diff --git a/.gitignore b/.gitignore
index e6c849e..34a48de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,7 @@ dist/
 *.log
 .env.local
 .env.*.local
-.codex
\ No newline at end of file
+.codex
+.cache/
+.openvscode-server/
+docs/
\ No newline at end of file
diff --git a/assets/css/product.css b/assets/css/product.css
new file mode 100644
index 0000000..c8c8eaf
--- /dev/null
+++ b/assets/css/product.css
@@ -0,0 +1,390 @@
+:root {
+    --product-section-heading-gap: 48px;
+    --product-section-heading-inner-gap: 14px;
+}
+
+.cargo-platform-content {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.cargo-info-left {
+    width: 540px;
+    flex: 0 0 540px;
+    padding-right: 30px;
+    box-sizing: border-box;
+    text-align: left;
+}
+
+.cargo-info-left--compact {
+    flex-basis: 540px;
+}
+
+.cargo-info-left h2,
+.cargo-info-left p {
+    text-align: left;
+}
+
+.cargo-info-right {
+    flex: 1;
+    min-width: 0;
+    box-sizing: border-box;
+}
+
+.product-hero-container {
+    padding-top: 0;
+}
+
+@media screen and (min-width: 992px) {
+    .page-title.page-title-cargo-platform .container.product-hero-container,
+    .page-title.page-title-cargo-platform1 .container.product-hero-container,
+    .page-title.page-title-cargo-platform2 .container.product-hero-container {
+        padding-top: 0;
+    }
+}
+
+.product-hero-title {
+    margin-bottom: 20px;
+}
+
+.product-hero-description {
+    font-size: 16px;
+    line-height: 1.8;
+}
+
+.page-title-cargo-platform .product-hero-title,
+.page-title-cargo-platform .product-hero-description,
+.page-title-cargo-platform2 .product-hero-title,
+.page-title-cargo-platform2 .product-hero-description {
+    color: #021c3e;
+}
+
+.page-title-cargo-platform1 .product-hero-title {
+    color: #021c3e;
+}
+
+.page-title-cargo-platform1 .product-hero-description {
+    color: #012e67;
+}
+
+.main2 {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.product-architecture-section--gradient {
+    background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%);
+}
+
+.product-architecture-section--soft {
+    background-color: #eaf5fd;
+    padding: 60px 0;
+}
+
+.product-architecture-container {
+    padding: 20px;
+}
+
+.product-architecture-title {
+    margin: 40px 0 var(--product-section-heading-inner-gap);
+}
+
+.product-architecture-title--compact {
+    margin-bottom: var(--product-section-heading-inner-gap);
+}
+
+.product-architecture-section--gradient .text-center > p,
+.product-architecture-section--soft .text-center > p {
+    margin: 0 0 var(--product-section-heading-gap);
+}
+
+.product-advantages-header {
+    padding-top: 60px;
+    margin-bottom: var(--product-section-heading-gap);
+    text-align: center;
+}
+
+.product-advantages-header--compact {
+    padding-top: 50px;
+}
+
+.product-advantages-title {
+    margin-bottom: var(--product-section-heading-inner-gap);
+}
+
+.product-advantages-title--spacious {
+    margin-bottom: var(--product-section-heading-inner-gap);
+}
+
+.product-advantages-header p {
+    margin: 0;
+}
+
+.feature-highlight-section {
+    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+    padding-top: 90px;
+    padding-bottom: 90px;
+}
+
+.feature-highlight-heading {
+    text-align: center;
+    margin-bottom: var(--product-section-heading-gap);
+}
+
+.feature-highlight-heading h1 {
+    margin: 0 0 var(--product-section-heading-inner-gap);
+    color: #10233f;
+}
+
+.feature-highlight-heading p {
+    margin: 0;
+}
+
+.feature-highlight-tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: 1px solid #dfe8f3;
+    width: 100%;
+}
+
+.feature-highlight-tabs li {
+    flex: 0 0 auto;
+    min-width: auto;
+}
+
+.feature-highlight-tab {
+    position: relative;
+    width: 100%;
+    padding: 16px 10px 18px;
+    border: 0;
+    background: transparent;
+    color: #4f5f76;
+    font-size: clamp(16px, 0.95vw, 18px);
+    font-weight: 600;
+    line-height: 1.5;
+    cursor: pointer;
+    transition: color 0.25s ease;
+    white-space: nowrap;
+}
+
+.feature-highlight-tab:hover,
+.feature-highlight-tab:focus {
+    color: #1c6de0;
+    outline: none;
+}
+
+.feature-highlight-tab.active {
+    color: #006aff;
+    text-decoration-line: underline;
+    text-decoration-color: #1b68db;
+    text-decoration-thickness: 4px;
+    text-underline-offset: 18px;
+    text-decoration-skip-ink: none;
+}
+
+.feature-highlight-tab.active:after {
+    content: none;
+}
+
+.feature-highlight-panel {
+    display: none;
+    padding-top: 54px;
+}
+
+.feature-highlight-panel.active {
+    display: block;
+}
+
+.feature-highlight-detail {
+    display: flex;
+    align-items: center;
+    gap: 56px;
+}
+
+.feature-highlight-copy {
+    flex: 1 1 52%;
+    max-width: 520px;
+    text-align: left;
+}
+
+.feature-highlight-copy h2 {
+    margin: 0 0 18px;
+    color: #101820;
+    font-size: 30px;
+    font-weight: 700;
+    line-height: 1.25;
+}
+
+.feature-highlight-copy p {
+    margin: 0;
+    color: #4f5f76;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.9;
+}
+
+.feature-highlight-points {
+    margin: 28px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.feature-highlight-points li {
+    position: relative;
+    margin-bottom: 18px;
+    padding-left: 22px;
+    color: #24374f;
+    font-size: 16px;
+    line-height: 1.8;
+}
+
+.feature-highlight-points li:before {
+    content: "";
+    position: absolute;
+    top: 13px;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #1c6de0;
+    box-shadow: 0 0 0 6px rgba(28, 109, 224, 0.12);
+}
+
+.feature-highlight-visual {
+    flex: 1 1 48%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.feature-highlight-visual-card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 620px;
+    min-height: 300px;
+    padding: 8px 10px;
+    border: 1px solid rgba(40, 122, 221, 0.08);
+    border-radius: 20px;
+    background: linear-gradient(180deg, rgba(247, 251, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
+    box-shadow: 0 10px 24px rgba(22, 72, 140, 0.04);
+    overflow: hidden;
+}
+
+.feature-highlight-visual-card img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    max-height: none;
+    object-fit: contain;
+    filter: drop-shadow(0 8px 14px rgba(30, 88, 165, 0.08));
+}
+
+@media (max-width: 1199px) {
+    .feature-highlight-tab {
+        font-size: 16px;
+    }
+
+    .feature-highlight-copy h2 {
+        font-size: 40px;
+    }
+}
+
+@media (max-width: 991px) {
+    .feature-highlight-detail {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 34px;
+    }
+
+    .feature-highlight-copy,
+    .feature-highlight-visual {
+        max-width: none;
+        flex-basis: 100%;
+    }
+
+    .feature-highlight-copy h2 {
+        font-size: 36px;
+    }
+}
+
+@media (max-width: 768px) {
+    .cargo-platform-content {
+        flex-direction: column;
+    }
+
+    .cargo-info-left {
+        width: 100%;
+        flex: 1;
+        padding-right: 0;
+        margin-bottom: 20px;
+    }
+
+    .cargo-info-right {
+        width: 100%;
+    }
+}
+
+@media (max-width: 767px) {
+    .feature-highlight-section {
+        padding-top: 70px;
+        padding-bottom: 70px;
+    }
+
+    .feature-highlight-heading p {
+        font-size: 16px;
+    }
+
+    .feature-highlight-tabs li {
+        flex: 0 0 auto;
+    }
+
+    .feature-highlight-tabs {
+        justify-content: flex-start;
+        gap: 8px;
+    }
+
+    .feature-highlight-tab {
+        padding: 14px 8px 16px;
+        font-size: 15px;
+    }
+
+    .feature-highlight-tab.active {
+        text-underline-offset: 16px;
+    }
+
+    .feature-highlight-tabs {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .feature-highlight-panel {
+        padding-top: 32px;
+    }
+
+    .feature-highlight-copy h2 {
+        font-size: 30px;
+    }
+
+    .feature-highlight-copy p,
+    .feature-highlight-points li {
+        font-size: 16px;
+    }
+
+    .feature-highlight-visual-card {
+        min-height: 210px;
+        padding: 8px;
+    }
+
+    .feature-highlight-visual-card img {
+        width: 100%;
+    }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index c1471f4..1316c23 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -115,8 +115,9 @@ body {
 }
 
 p {
-  color: #2a3e5d;
-  line-height: 2em;
+  color: #1d2f4b;
+
+  line-height: 1.5em;
 }
 
 h1,
@@ -653,7 +654,7 @@ img {
 }
 
 .page-title3 {
-  background: url("../images/page-title3.webp") center center/cover no-repeat local;
+  background: url("../images/page-title3.png") center center/cover no-repeat local;
   width: 100%;
   height: 330px;
   position: relative;
@@ -669,7 +670,7 @@ img {
 }
 
 .page-title5 {
-  background: url("../images/page-title6.jpg.webp") center center/cover no-repeat local;
+  background: url("../images/page-title5.png") center center/cover no-repeat local;
   width: 100%;
   height: 330px;
   position: relative;
@@ -679,7 +680,7 @@ img {
 .page-title6 {
   background: url("../images/page-title6.png.webp") center center/cover no-repeat local;
   width: 100%;
-  height: 330px;
+  height: 360px;
   position: relative;
   text-align: center;
 }
@@ -715,6 +716,68 @@ img {
   color: #ffffff;
 }
 
+.page-title-cargo-platform1 {
+  background: url("../images/project/agNetCargoPlatform/top2.png") center center/cover no-repeat local;
+  width: 100%;
+  height: 330px;
+  position: relative;
+  text-align: center;
+  /* background-color: #ffffff00 !important; */
+  margin-top: 80px !important;  /* Adjusted for new 80px header height */
+}
+
+.page-title-cargo-platform1::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* background-color: rgba(0, 0, 0, 0.5); */
+  z-index: 1;
+}
+
+.page-title-cargo-platform1 .container {
+  position: relative;
+  z-index: 2;
+}
+
+.page-title-cargo-platform1 h2,
+.page-title-cargo-platform1 p {
+  color: #ffffff;
+}
+
+.page-title-cargo-platform2 {
+  background: url("../images/project/agNetCargoPlatform/top3.png") center center/cover no-repeat local;
+  width: 100%;
+  height: 330px;
+  position: relative;
+  text-align: center;
+  /* background-color: #ffffff00 !important; */
+  margin-top: 80px !important;  /* Adjusted for new 80px header height */
+}
+
+.page-title-cargo-platform2::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* background-color: rgba(0, 0, 0, 0.5); */
+  z-index: 1;
+}
+
+.page-title-cargo-platform2 .container {
+  position: relative;
+  z-index: 2;
+}
+
+.page-title-cargo-platform2 h2,
+.page-title-cargo-platform2 p {
+  color: #ffffff;
+}
+
 @media (max-width: 991px) {
   .page-title {
     height: 300px;
@@ -739,16 +802,17 @@ img {
 
 .page-title h2 {
   font-size: 55px;
+  margin-bottom: 20px;
+  color:#ffffff;
   font-size: 2.4375rem;
   font-weight: 900;
-  color: #fff;
+
   margin: 0em 0 0.30em;
 }
 .page-title p {
   font-size: 16px;
-  font-size: 1.3rem;
   /*font-weight: 900;*/
-  color: #fff;
+color:#ffffff;
   margin: 0.5em 0 0.30em;
 }
 
@@ -2724,7 +2788,7 @@ img {
 --------------------------------------------------------------*/
 .hero-slider {
   width: 100%;
-  height: 700px;
+  height: 500px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -2746,6 +2810,7 @@ img {
 
 .hero-slider .swiper-slide {
   overflow: hidden;
+  background-size: cover;
   color: #fff;
 }
 
@@ -2940,7 +3005,7 @@ img {
 
 .hero-style-1 .slide-title h2, .hero-style-2 .slide-title h2, .hero-style-3 .slide-title h2 {
   font-size: 55px;
-  font-size: 3.4375rem;
+  font-size: 3rem;
   font-weight: 800;
   color: #031c5c;
   margin: 0 0 0.45em;
@@ -3626,7 +3691,7 @@ img {
 --------------------------------------------------------------*/
 .services-section {
   background-color:#f5f8f9;
-  padding-bottom: 105px;
+  padding-bottom: 80px;
 }
 
 .services-section1 {
@@ -3688,7 +3753,7 @@ img {
   margin: 0 15px 30px;
   float: left;
   text-align: center;
-  padding: 35px 35px;
+  padding: 20px 35px;
   -webkit-box-shadow: 0px 0px 32px 0px rgba(16, 37, 65, 0.1);
   box-shadow: 0px 0px 32px 0px rgba(16, 37, 65, 0.1);
   border-radius: 10px;
@@ -4335,7 +4400,7 @@ img {
 .fun-fact-section h2 {
   font-size: 36px;
   font-size: 2.25rem;
-  margin: 0 0 1.8em;
+  margin: 0 0 1em;
 }
 
 @media (max-width: 991px) {
@@ -4366,8 +4431,9 @@ img {
 
 .fun-fact-section .grid h3 {
   font-size: 48px;
-  font-size: 3rem;
-  font-weight: 300;
+  font-size: 4rem;
+  font-weight: 700;
+  color: #0453fc;
   margin: 0 0 0.2em;
 }
 
@@ -4406,6 +4472,33 @@ img {
   padding-top: 0;
 }
 
+.portfolio-section.section-padding {
+  padding-top: 64px;
+  padding-bottom: 72px;
+}
+
+.portfolio-section .section-title-s4 {
+  max-width: 560px;
+  margin: 0 auto 38px;
+}
+
+.portfolio-section .section-title-s4 > span {
+  margin-bottom: 12px;
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+}
+
+.portfolio-section .section-title-s4 h2 {
+  margin: 0;
+  line-height: 1.25;
+}
+
+.portfolio-section .portfolio-container {
+  max-width: 1488px;
+  margin: 0 auto;
+  padding: 0 24px 6px;
+}
+
 .portfolio-section:before {
   content: "";
   width: 100%;
@@ -4418,7 +4511,10 @@ img {
 
 .portfolio-section .portfolio-grids .grid {
   position: relative;
-  /*overflow: hidden;*/
+  overflow: hidden;
+  background: #0c2037;
+  -webkit-transition: -webkit-transform 0.35s ease, box-shadow 0.35s ease;
+  transition: transform 0.35s ease, box-shadow 0.35s ease;
 }
 
 .portfolio-section .portfolio-grids a.grid {
@@ -4427,25 +4523,48 @@ img {
   text-decoration: none;
 }
 
+.portfolio-section .portfolio-grids .grid .img-holder {
+  position: relative;
+}
+
+.portfolio-section .portfolio-grids .grid .img-holder img {
+  width: 100%;
+  aspect-ratio: 4 / 5;
+  object-fit: cover;
+  display: block;
+  filter: saturate(0.88) contrast(0.9) brightness(0.82);
+  -webkit-transition: -webkit-transform 0.45s ease, -webkit-filter 0.35s ease;
+  transition: transform 0.45s ease, filter 0.35s ease;
+}
+
 .portfolio-section .portfolio-grids .grid:hover {
-  cursor: -webkit-grab;
-  cursor: grab;
+  cursor: pointer;
+  -webkit-transform: translateY(-6px);
+  transform: translateY(-6px);
+  box-shadow: 0 22px 48px rgba(8, 24, 44, 0.18);
 }
 
 .portfolio-section .portfolio-grids .grid .details {
-  background-color: rgba(16, 37, 65, 0.9);
+  background: linear-gradient(180deg, rgba(7, 24, 43, 0.08) 0%, rgba(9, 29, 52, 0.22) 38%, rgba(9, 29, 52, 0.82) 100%);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
-  top: 30%;
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: all 0.5s;
-  -moz-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  -ms-transition: all 0.5s;
-  transition: all 0.5s;
+  top: 0;
+  padding: 40px 26px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 10px;
+  opacity: 1;
+  visibility: visible;
+  overflow: hidden;
+  pointer-events: none;
+  -webkit-transition: background 0.35s ease;
+  -moz-transition: background 0.35s ease;
+  -o-transition: background 0.35s ease;
+  -ms-transition: background 0.35s ease;
+  transition: background 0.35s ease;
 }
 
 .portfolio-section .portfolio-grids .grid .details:before {
@@ -4455,56 +4574,204 @@ img {
   position: absolute;
   left: 0;
   top: 0;
-  opacity: 0.85;
-}
-
-.portfolio-section .portfolio-grids .grid .inner {
-  width: 100%;
-  padding: 25px;
-  position: absolute;
-  left: 0;
-  bottom: 25px;
+  background: linear-gradient(180deg, rgba(12, 32, 54, 0.02) 0%, rgba(12, 32, 54, 0.08) 28%, rgba(12, 32, 54, 0.24) 100%);
+  opacity: 0.72;
 }
 
 .portfolio-section .portfolio-grids .grid h3 {
-  font-size: 17px;
-  font-size: 1.0625rem;
-  margin: 0 0 0.3em;
-  text-transform: capitalize;
+  margin: 0 0 6px;
+  color: rgb(255, 255, 255);
+  font-size: 1.5rem;
+  line-height: 1.3;
+  font-weight: 600;
+  max-width: 11em;
+  min-height: 2.6em;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 @media (max-width: 991px) {
   .portfolio-section .portfolio-grids .grid h3 {
-    font-size: 15px;
-    font-size: 0.9375rem;
+    font-size: 1.28rem;
+    min-height: 2.7em;
   }
 }
 
-.portfolio-section .portfolio-grids .grid h3,
-.portfolio-section .portfolio-grids .grid h3 a {
-  color: #fff;
-  font-size: 1.75rem;
+.portfolio-section .portfolio-grids .grid .portfolio-meta,
+.portfolio-section .portfolio-grids .grid .portfolio-desc,
+.portfolio-section .portfolio-grids .grid .portfolio-link {
+  position: relative;
+  z-index: 2;
 }
 
-.portfolio-section .portfolio-grids .grid p {
-  font-size: 14px;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1481ff;
+.portfolio-section .portfolio-grids .grid .portfolio-meta {
+  margin: 0 0 6px;
+  color: #ffffff;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  min-height: 34px;
+  padding: 5px 20px;
+  box-shadow: -1px 3px 6px rgb(5 99 241 / 67%);
+  border-radius: 30px;
+  background: rgba(16, 119, 255, 0.918);
+  backdrop-filter: blur(6px);
+  transform: translateY(-4px);
+}
+
+.portfolio-section .portfolio-grids .grid .portfolio-desc {
   margin: 0;
+  min-height: 3.5em;
+  max-width: 15em;
+  color: rgba(232, 241, 250, 0.84);
+  font-size: 0.98rem;
+  line-height: 1.75;
+  font-weight: 400;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
 }
 
-@media (max-width: 991px) {
-  .portfolio-section .portfolio-grids .grid p {
-    font-size: 12px;
-    font-size: 0.75rem;
-  }
+.portfolio-section .portfolio-grids .grid .portfolio-link {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+  margin-top: auto;
+  padding-left: 20px;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 0.95rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  -webkit-transition: color 0.35s ease, padding-left 0.35s ease;
+  transition: color 0.35s ease, padding-left 0.35s ease;
+}
+
+.portfolio-section .portfolio-grids .grid .portfolio-link:before,
+.portfolio-section .portfolio-grids .grid .portfolio-link:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  background: #0084ff;
+  -webkit-transition: background 0.35s ease, width 0.35s ease, -webkit-transform 0.35s ease;
+  transition: background 0.35s ease, width 0.35s ease, transform 0.35s ease;
+}
+
+.portfolio-section .portfolio-grids .grid .portfolio-link:before {
+  width: 12px;
+  height: 2px;
+  transform: translateY(-50%);
+}
+
+.portfolio-section .portfolio-grids .grid .portfolio-link:after {
+  width: 7px;
+  height: 7px;
+  border-top: 2px solid #5ab0ff;
+  border-right: 2px solid #5ab0ff;
+  background: transparent;
+  left: 6px;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.portfolio-section .portfolio-grids .grid:hover .img-holder img {
+  -webkit-transform: scale(1.03);
+  transform: scale(1.03);
+  filter: saturate(0.92) contrast(0.93) brightness(0.86);
 }
 
 .portfolio-section .portfolio-grids .grid:hover .details {
-  opacity: 1;
-  top: 0;
-  visibility: visible;
+  background: linear-gradient(180deg, rgba(7, 24, 43, 0.14) 0%, rgba(86, 165, 255, 0.28) 40%, rgba(28, 134, 255, 0.86) 100%);
+}
+
+.portfolio-section .portfolio-grids .grid:hover .portfolio-link {
+  color: #ffffff;
+  padding-left: 24px;
+}
+
+@media (max-width: 1199px) {
+  .portfolio-section.section-padding {
+    padding-top: 58px;
+    padding-bottom: 64px;
+  }
+
+  .portfolio-section .section-title-s4 {
+    max-width: 520px;
+    margin-bottom: 32px;
+  }
+
+  .portfolio-section .portfolio-container {
+    padding: 0 18px 4px;
+  }
+
+  .portfolio-section .portfolio-grids .grid .details {
+    padding: 24px 22px 24px;
+  }
+
+  .portfolio-section .portfolio-grids .grid h3 {
+    font-size: 1.42rem;
+    max-width: 8.5em;
+  }
+
+  .portfolio-section .portfolio-grids .grid .portfolio-meta {
+    margin-left: -22px;
+  }
+}
+
+@media (max-width: 767px) {
+  .portfolio-section.section-padding {
+    padding-top: 48px;
+    padding-bottom: 52px;
+  }
+
+  .portfolio-section .section-title-s4 {
+    margin-bottom: 24px;
+  }
+
+  .portfolio-section .section-title-s4 > span {
+    margin-bottom: 10px;
+  }
+
+  .portfolio-section .portfolio-container {
+    padding: 0 12px 4px;
+  }
+
+  .portfolio-section .portfolio-grids .grid .details {
+    padding: 22px 20px 20px;
+    gap: 12px;
+  }
+
+  .portfolio-section .portfolio-grids .grid h3 {
+    font-size: 1.12rem;
+    max-width: none;
+    min-height: auto;
+  }
+
+  .portfolio-section .portfolio-grids .grid .portfolio-meta {
+    font-size: 0.74rem;
+    min-height: 30px;
+    padding: 5px 20px 5px 12px;
+    margin-left: -20px;
+  }
+
+  .portfolio-section .portfolio-grids .grid .portfolio-desc {
+    font-size: 0.9rem;
+    line-height: 1.7;
+    min-height: auto;
+    max-width: none;
+  }
+
+  .portfolio-section .portfolio-grids .grid .portfolio-link {
+    font-size: 0.88rem;
+  }
 }
 
 .portfolio-section .all-portfolio {
@@ -4545,14 +4812,138 @@ img {
   bottom: 0;
 }
 
+.partners-section .partners-marquee-wrap {
+  position: relative;
+  width: 100%;
+  padding: 15px clamp(8px, 2vw, 24px) 30px;
+}
+
+.partners-section .partners-marquee-wrap .row {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.partners-section .partners-marquee-wrap .col-xs-12 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.partners-section .partners-marquee-wrap .separator {
+  width: auto;
+  left: clamp(8px, 2vw, 24px);
+  right: clamp(8px, 2vw, 24px);
+}
+
+.partners-section .partner-marquee {
+  overflow: hidden;
+  width: 100%;
+}
+
+.partners-section .partner-track {
+  display: flex;
+  width: max-content;
+  -webkit-animation: partners-marquee 24s linear infinite;
+  animation: partners-marquee 24s linear infinite;
+  will-change: transform;
+}
+
+.partners-section .partner-track-set {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .partners-section .grid {
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: clamp(120px, 12vw, 220px);
+  padding: 8px 15px;
 }
 
 .partners-section .grid img {
   height: 80px;
-  margin: auto 0 ;
+  max-width: 100%;
+  width: auto;
+  margin: auto 0;
   display: inline-block;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+@-webkit-keyframes partners-marquee {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-50%, 0, 0);
+    transform: translate3d(-50%, 0, 0);
+  }
+}
+
+@keyframes partners-marquee {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-50%, 0, 0);
+    transform: translate3d(-50%, 0, 0);
+  }
+}
+
+@media (max-width: 991px) {
+  .partners-section .partners-marquee-wrap {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .partners-section .partners-marquee-wrap .separator {
+    left: 12px;
+    right: 12px;
+  }
+
+  .partners-section .grid {
+    min-width: 160px;
+    padding: 8px 12px;
+  }
+
+  .partners-section .grid img {
+    height: 68px;
+  }
+}
+
+@media (max-width: 767px) {
+  .partners-section .partners-marquee-wrap {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .partners-section .partners-marquee-wrap .separator {
+    left: 10px;
+    right: 10px;
+  }
+
+  .partners-section .partner-track {
+    -webkit-animation-duration: 20s;
+    animation-duration: 20s;
+  }
+
+  .partners-section .partner-track-set {
+    flex-shrink: 0;
+  }
+
+  .partners-section .grid {
+    min-width: 128px;
+    padding: 6px 10px;
+  }
+
+  .partners-section .grid img {
+    height: 56px;
+  }
 }
 
 /*--------------------------------------------------------------
@@ -5340,6 +5731,7 @@ img {
   font-size: 16px;
   font-size: 1rem;
   margin: 1em 0 0;
+  color:#011946;
   line-height: 2em;
 }
 
diff --git a/assets/images/about/slide-1.webp b/assets/images/about/slide-1.webp
new file mode 100644
index 0000000..c389609
Binary files /dev/null and b/assets/images/about/slide-1.webp differ
diff --git a/assets/images/index/top.png b/assets/images/index/top.png
new file mode 100644
index 0000000..ec957aa
Binary files /dev/null and b/assets/images/index/top.png differ
diff --git a/assets/images/page-title3.png b/assets/images/page-title3.png
new file mode 100644
index 0000000..bc59975
Binary files /dev/null and b/assets/images/page-title3.png differ
diff --git a/assets/images/page-title5.png b/assets/images/page-title5.png
new file mode 100644
index 0000000..4b1b415
Binary files /dev/null and b/assets/images/page-title5.png differ
diff --git a/assets/images/product/bctp/chuanhuotong.png b/assets/images/product/bctp/chuanhuotong.png
new file mode 100644
index 0000000..5df171d
Binary files /dev/null and b/assets/images/product/bctp/chuanhuotong.png differ
diff --git a/assets/images/product/bctp/jiagou.png b/assets/images/product/bctp/jiagou.png
new file mode 100644
index 0000000..4fa06d0
Binary files /dev/null and b/assets/images/product/bctp/jiagou.png differ
diff --git a/assets/images/product/bctp/sanweiwuzhou.png b/assets/images/product/bctp/sanweiwuzhou.png
new file mode 100644
index 0000000..3609c67
Binary files /dev/null and b/assets/images/product/bctp/sanweiwuzhou.png differ
diff --git a/assets/images/product/bctp/wudaozhi.png b/assets/images/product/bctp/wudaozhi.png
new file mode 100644
index 0000000..0e6e1d4
Binary files /dev/null and b/assets/images/product/bctp/wudaozhi.png differ
diff --git a/assets/images/product/bctp/wujiujishuyi.png b/assets/images/product/bctp/wujiujishuyi.png
new file mode 100644
index 0000000..86e965d
Binary files /dev/null and b/assets/images/product/bctp/wujiujishuyi.png differ
diff --git a/assets/images/product/bctp/wumaoyi.png b/assets/images/product/bctp/wumaoyi.png
new file mode 100644
index 0000000..b701bff
Binary files /dev/null and b/assets/images/product/bctp/wumaoyi.png differ
diff --git a/assets/images/product/bctp/xiaochengxuzuoye.png b/assets/images/product/bctp/xiaochengxuzuoye.png
new file mode 100644
index 0000000..ca59927
Binary files /dev/null and b/assets/images/product/bctp/xiaochengxuzuoye.png differ
diff --git a/assets/images/product/cangchu/cangkuzonglan.png b/assets/images/product/cangchu/cangkuzonglan.png
new file mode 100644
index 0000000..5382747
Binary files /dev/null and b/assets/images/product/cangchu/cangkuzonglan.png differ
diff --git a/assets/images/product/cangchu/kucunshishizhuizong.png b/assets/images/product/cangchu/kucunshishizhuizong.png
new file mode 100644
index 0000000..07afe6f
Binary files /dev/null and b/assets/images/product/cangchu/kucunshishizhuizong.png differ
diff --git a/assets/images/product/cangchu/shujuqudongjuece.png b/assets/images/product/cangchu/shujuqudongjuece.png
new file mode 100644
index 0000000..c1f9608
Binary files /dev/null and b/assets/images/product/cangchu/shujuqudongjuece.png differ
diff --git a/assets/images/product/cangchu/zhinenghuoweibuju.png b/assets/images/product/cangchu/zhinenghuoweibuju.png
new file mode 100644
index 0000000..fcf2715
Binary files /dev/null and b/assets/images/product/cangchu/zhinenghuoweibuju.png differ
diff --git a/assets/images/product/cangchu/zuoyezidonghua.png b/assets/images/product/cangchu/zuoyezidonghua.png
new file mode 100644
index 0000000..c4df20e
Binary files /dev/null and b/assets/images/product/cangchu/zuoyezidonghua.png differ
diff --git a/assets/images/product/cheliangyunshu/chanpinzonglan.png b/assets/images/product/cheliangyunshu/chanpinzonglan.png
new file mode 100644
index 0000000..dc06677
Binary files /dev/null and b/assets/images/product/cheliangyunshu/chanpinzonglan.png differ
diff --git a/assets/images/product/cheliangyunshu/chengbenjingxihesuan.png b/assets/images/product/cheliangyunshu/chengbenjingxihesuan.png
new file mode 100644
index 0000000..c0c4266
Binary files /dev/null and b/assets/images/product/cheliangyunshu/chengbenjingxihesuan.png differ
diff --git a/assets/images/product/cheliangyunshu/feiyongzidongjiesuan.png b/assets/images/product/cheliangyunshu/feiyongzidongjiesuan.png
new file mode 100644
index 0000000..fa7a2fe
Binary files /dev/null and b/assets/images/product/cheliangyunshu/feiyongzidongjiesuan.png differ
diff --git a/assets/images/product/cheliangyunshu/yichangkuaisuchuli.png b/assets/images/product/cheliangyunshu/yichangkuaisuchuli.png
new file mode 100644
index 0000000..f727a4f
Binary files /dev/null and b/assets/images/product/cheliangyunshu/yichangkuaisuchuli.png differ
diff --git a/assets/images/product/cheliangyunshu/yunshushijiankeshihua.png b/assets/images/product/cheliangyunshu/yunshushijiankeshihua.png
new file mode 100644
index 0000000..16c177a
Binary files /dev/null and b/assets/images/product/cheliangyunshu/yunshushijiankeshihua.png differ
diff --git a/assets/images/product/cheliangyunshu/zhinengluxianguihua.png b/assets/images/product/cheliangyunshu/zhinengluxianguihua.png
new file mode 100644
index 0000000..8bf24eb
Binary files /dev/null and b/assets/images/product/cheliangyunshu/zhinengluxianguihua.png differ
diff --git a/assets/images/product/chuanbodaili/aizhinenyunzuo.png b/assets/images/product/chuanbodaili/aizhinenyunzuo.png
new file mode 100644
index 0000000..928009a
Binary files /dev/null and b/assets/images/product/chuanbodaili/aizhinenyunzuo.png differ
diff --git a/assets/images/product/chuanbodaili/chanpinzonglan.png b/assets/images/product/chuanbodaili/chanpinzonglan.png
new file mode 100644
index 0000000..a5eae87
Binary files /dev/null and b/assets/images/product/chuanbodaili/chanpinzonglan.png differ
diff --git a/assets/images/product/chuanbodaili/edipeizhi.png b/assets/images/product/chuanbodaili/edipeizhi.png
new file mode 100644
index 0000000..66a4c28
Binary files /dev/null and b/assets/images/product/chuanbodaili/edipeizhi.png differ
diff --git a/assets/images/product/chuanbodaili/jituanduogongsiguanli.png b/assets/images/product/chuanbodaili/jituanduogongsiguanli.png
new file mode 100644
index 0000000..2d6f19f
Binary files /dev/null and b/assets/images/product/chuanbodaili/jituanduogongsiguanli.png differ
diff --git a/assets/images/product/chuanbodaili/quandaofuwu.png b/assets/images/product/chuanbodaili/quandaofuwu.png
new file mode 100644
index 0000000..18d0538
Binary files /dev/null and b/assets/images/product/chuanbodaili/quandaofuwu.png differ
diff --git a/assets/images/product/chuanbodaili/shujukeshihua.png b/assets/images/product/chuanbodaili/shujukeshihua.png
new file mode 100644
index 0000000..c7c1b27
Binary files /dev/null and b/assets/images/product/chuanbodaili/shujukeshihua.png differ
diff --git a/assets/images/product/chuanbodaili/yecaiyitihua.png b/assets/images/product/chuanbodaili/yecaiyitihua.png
new file mode 100644
index 0000000..62031dc
Binary files /dev/null and b/assets/images/product/chuanbodaili/yecaiyitihua.png differ
diff --git a/assets/images/product/chuanboguanli/bikanban.png b/assets/images/product/chuanboguanli/bikanban.png
new file mode 100644
index 0000000..8d7b00d
Binary files /dev/null and b/assets/images/product/chuanboguanli/bikanban.png differ
diff --git a/assets/images/product/chuanboguanli/chanpinzonglan.png b/assets/images/product/chuanboguanli/chanpinzonglan.png
new file mode 100644
index 0000000..3a33b93
Binary files /dev/null and b/assets/images/product/chuanboguanli/chanpinzonglan.png differ
diff --git a/assets/images/product/chuanboguanli/chuanyuanxinzizidong.png b/assets/images/product/chuanboguanli/chuanyuanxinzizidong.png
new file mode 100644
index 0000000..091c29e
Binary files /dev/null and b/assets/images/product/chuanboguanli/chuanyuanxinzizidong.png differ
diff --git a/assets/images/product/chuanboguanli/feiyongbaoxiaotongyi.png b/assets/images/product/chuanboguanli/feiyongbaoxiaotongyi.png
new file mode 100644
index 0000000..33f0c72
Binary files /dev/null and b/assets/images/product/chuanboguanli/feiyongbaoxiaotongyi.png differ
diff --git a/assets/images/product/chuanboguanli/gongzuoliuchengtongyi.png b/assets/images/product/chuanboguanli/gongzuoliuchengtongyi.png
new file mode 100644
index 0000000..52355cf
Binary files /dev/null and b/assets/images/product/chuanboguanli/gongzuoliuchengtongyi.png differ
diff --git a/assets/images/product/chuanboguanli/tixiwendangwuzhihua.png b/assets/images/product/chuanboguanli/tixiwendangwuzhihua.png
new file mode 100644
index 0000000..f93d3db
Binary files /dev/null and b/assets/images/product/chuanboguanli/tixiwendangwuzhihua.png differ
diff --git a/assets/images/product/chuanboguanli/yecaiduidong.png b/assets/images/product/chuanboguanli/yecaiduidong.png
new file mode 100644
index 0000000..e831648
Binary files /dev/null and b/assets/images/product/chuanboguanli/yecaiduidong.png differ
diff --git a/assets/images/product/chuanboguanli/zhengshuyujing.png b/assets/images/product/chuanboguanli/zhengshuyujing.png
new file mode 100644
index 0000000..3ce0d14
Binary files /dev/null and b/assets/images/product/chuanboguanli/zhengshuyujing.png differ
diff --git a/assets/images/product/chuangongsi/chanpinzonglan.png b/assets/images/product/chuangongsi/chanpinzonglan.png
new file mode 100644
index 0000000..2afd929
Binary files /dev/null and b/assets/images/product/chuangongsi/chanpinzonglan.png differ
diff --git a/assets/images/product/chuangongsi/chuanbodongtaiguanli.png b/assets/images/product/chuangongsi/chuanbodongtaiguanli.png
new file mode 100644
index 0000000..a847d69
Binary files /dev/null and b/assets/images/product/chuangongsi/chuanbodongtaiguanli.png differ
diff --git a/assets/images/product/chuangongsi/ediwufengjiaohuan.png b/assets/images/product/chuangongsi/ediwufengjiaohuan.png
new file mode 100644
index 0000000..7013b61
Binary files /dev/null and b/assets/images/product/chuangongsi/ediwufengjiaohuan.png differ
diff --git a/assets/images/product/chuangongsi/juecekanban.png b/assets/images/product/chuangongsi/juecekanban.png
new file mode 100644
index 0000000..51b00a2
Binary files /dev/null and b/assets/images/product/chuangongsi/juecekanban.png differ
diff --git a/assets/images/product/chuangongsi/quanqiuheguishipei.png b/assets/images/product/chuangongsi/quanqiuheguishipei.png
new file mode 100644
index 0000000..8b26dbd
Binary files /dev/null and b/assets/images/product/chuangongsi/quanqiuheguishipei.png differ
diff --git a/assets/images/product/chuangongsi/yecailiandong.png b/assets/images/product/chuangongsi/yecailiandong.png
new file mode 100644
index 0000000..80bb2cd
Binary files /dev/null and b/assets/images/product/chuangongsi/yecailiandong.png differ
diff --git a/assets/images/product/chuangongsi/yewuzhinengcaozuo.png b/assets/images/product/chuangongsi/yewuzhinengcaozuo.png
new file mode 100644
index 0000000..c1295c5
Binary files /dev/null and b/assets/images/product/chuangongsi/yewuzhinengcaozuo.png differ
diff --git a/assets/images/product/haiyundingcang/chanpinjieshao.png b/assets/images/product/haiyundingcang/chanpinjieshao.png
new file mode 100644
index 0000000..8359a56
Binary files /dev/null and b/assets/images/product/haiyundingcang/chanpinjieshao.png differ
diff --git a/assets/images/product/haiyundingcang/duoduanxietongchuda.png b/assets/images/product/haiyundingcang/duoduanxietongchuda.png
new file mode 100644
index 0000000..cd233fc
Binary files /dev/null and b/assets/images/product/haiyundingcang/duoduanxietongchuda.png differ
diff --git a/assets/images/product/haiyundingcang/fuwuchanpinhua.png b/assets/images/product/haiyundingcang/fuwuchanpinhua.png
new file mode 100644
index 0000000..3ee918b
Binary files /dev/null and b/assets/images/product/haiyundingcang/fuwuchanpinhua.png differ
diff --git a/assets/images/product/haiyundingcang/quanchenglukeshihuagenzong.png b/assets/images/product/haiyundingcang/quanchenglukeshihuagenzong.png
new file mode 100644
index 0000000..2aafda6
Binary files /dev/null and b/assets/images/product/haiyundingcang/quanchenglukeshihuagenzong.png differ
diff --git a/assets/images/product/haiyundingcang/zhinengyingxiaozhongxin.png b/assets/images/product/haiyundingcang/zhinengyingxiaozhongxin.png
new file mode 100644
index 0000000..ffd4467
Binary files /dev/null and b/assets/images/product/haiyundingcang/zhinengyingxiaozhongxin.png differ
diff --git a/assets/images/product/haiyundingcang/zidonghuaguizeyinqing.png b/assets/images/product/haiyundingcang/zidonghuaguizeyinqing.png
new file mode 100644
index 0000000..fcfa4a8
Binary files /dev/null and b/assets/images/product/haiyundingcang/zidonghuaguizeyinqing.png differ
diff --git a/assets/images/product/huoyundaili/edizidongduijie.png b/assets/images/product/huoyundaili/edizidongduijie.png
new file mode 100644
index 0000000..7263aa8
Binary files /dev/null and b/assets/images/product/huoyundaili/edizidongduijie.png differ
diff --git a/assets/images/product/huoyundaili/jifeilinghuohua.png b/assets/images/product/huoyundaili/jifeilinghuohua.png
new file mode 100644
index 0000000..fd036f3
Binary files /dev/null and b/assets/images/product/huoyundaili/jifeilinghuohua.png differ
diff --git a/assets/images/product/huoyundaili/liuchengbiaozhunhua.png b/assets/images/product/huoyundaili/liuchengbiaozhunhua.png
new file mode 100644
index 0000000..d8d0e98
Binary files /dev/null and b/assets/images/product/huoyundaili/liuchengbiaozhunhua.png differ
diff --git a/assets/images/product/huoyundaili/ludanzhinenghua.png b/assets/images/product/huoyundaili/ludanzhinenghua.png
new file mode 100644
index 0000000..55e41cc
Binary files /dev/null and b/assets/images/product/huoyundaili/ludanzhinenghua.png differ
diff --git a/assets/images/product/ilog/chanpinjieshao.png b/assets/images/product/ilog/chanpinjieshao.png
new file mode 100644
index 0000000..addcc40
Binary files /dev/null and b/assets/images/product/ilog/chanpinjieshao.png differ
diff --git a/assets/images/product/ilog/duiwaixitongduijie.png b/assets/images/product/ilog/duiwaixitongduijie.png
new file mode 100644
index 0000000..48fffa8
Binary files /dev/null and b/assets/images/product/ilog/duiwaixitongduijie.png differ
diff --git a/assets/images/product/ilog/duoduanxietongbangong.png b/assets/images/product/ilog/duoduanxietongbangong.png
new file mode 100644
index 0000000..af8fdd9
Binary files /dev/null and b/assets/images/product/ilog/duoduanxietongbangong.png differ
diff --git a/assets/images/product/ilog/jituantongyiguanli.png b/assets/images/product/ilog/jituantongyiguanli.png
new file mode 100644
index 0000000..39dae5e
Binary files /dev/null and b/assets/images/product/ilog/jituantongyiguanli.png differ
diff --git a/assets/images/product/ilog/mokuaihuapeizhi.png b/assets/images/product/ilog/mokuaihuapeizhi.png
new file mode 100644
index 0000000..8f05020
Binary files /dev/null and b/assets/images/product/ilog/mokuaihuapeizhi.png differ
diff --git a/assets/images/product/ilog/shujuzidongliuzhuan.png b/assets/images/product/ilog/shujuzidongliuzhuan.png
new file mode 100644
index 0000000..b37851e
Binary files /dev/null and b/assets/images/product/ilog/shujuzidongliuzhuan.png differ
diff --git a/assets/images/product/jizhuangxiang/chanpinjieshao.png b/assets/images/product/jizhuangxiang/chanpinjieshao.png
new file mode 100644
index 0000000..917d66e
Binary files /dev/null and b/assets/images/product/jizhuangxiang/chanpinjieshao.png differ
diff --git a/assets/images/product/jizhuangxiang/chayanzuoyequanliuchengkeshihua.png b/assets/images/product/jizhuangxiang/chayanzuoyequanliuchengkeshihua.png
new file mode 100644
index 0000000..6193744
Binary files /dev/null and b/assets/images/product/jizhuangxiang/chayanzuoyequanliuchengkeshihua.png differ
diff --git a/assets/images/product/jizhuangxiang/duichangquanjingkeshihua.png b/assets/images/product/jizhuangxiang/duichangquanjingkeshihua.png
new file mode 100644
index 0000000..b603896
Binary files /dev/null and b/assets/images/product/jizhuangxiang/duichangquanjingkeshihua.png differ
diff --git a/assets/images/product/jizhuangxiang/duoluzuoyezhinengjunheng.png b/assets/images/product/jizhuangxiang/duoluzuoyezhinengjunheng.png
new file mode 100644
index 0000000..bf2bae8
Binary files /dev/null and b/assets/images/product/jizhuangxiang/duoluzuoyezhinengjunheng.png differ
diff --git a/assets/images/product/jizhuangxiang/quanzidongduichangjihua.png b/assets/images/product/jizhuangxiang/quanzidongduichangjihua.png
new file mode 100644
index 0000000..f0e59c3
Binary files /dev/null and b/assets/images/product/jizhuangxiang/quanzidongduichangjihua.png differ
diff --git a/assets/images/product/jizhuangxiang/wurenzhishouzidonghuazhakou.png b/assets/images/product/jizhuangxiang/wurenzhishouzidonghuazhakou.png
new file mode 100644
index 0000000..152e0f2
Binary files /dev/null and b/assets/images/product/jizhuangxiang/wurenzhishouzidonghuazhakou.png differ
diff --git a/assets/images/product/jizhuangxiang/zhinengchuanbopeizai.png b/assets/images/product/jizhuangxiang/zhinengchuanbopeizai.png
new file mode 100644
index 0000000..77f7b3d
Binary files /dev/null and b/assets/images/product/jizhuangxiang/zhinengchuanbopeizai.png differ
diff --git a/assets/images/product/jizhuangxiang/zhinengduichangyouhua.png b/assets/images/product/jizhuangxiang/zhinengduichangyouhua.png
new file mode 100644
index 0000000..edb3d1e
Binary files /dev/null and b/assets/images/product/jizhuangxiang/zhinengduichangyouhua.png differ
diff --git a/assets/images/product/sanzahuo/bsjiagoubianjieshiyong.png b/assets/images/product/sanzahuo/bsjiagoubianjieshiyong.png
new file mode 100644
index 0000000..caf6dbe
Binary files /dev/null and b/assets/images/product/sanzahuo/bsjiagoubianjieshiyong.png differ
diff --git a/assets/images/product/sanzahuo/chanpinjieshao.png b/assets/images/product/sanzahuo/chanpinjieshao.png
new file mode 100644
index 0000000..f5d415b
Binary files /dev/null and b/assets/images/product/sanzahuo/chanpinjieshao.png differ
diff --git a/assets/images/product/sanzahuo/duomatoutongyiguankong.png b/assets/images/product/sanzahuo/duomatoutongyiguankong.png
new file mode 100644
index 0000000..df6d903
Binary files /dev/null and b/assets/images/product/sanzahuo/duomatoutongyiguankong.png differ
diff --git a/assets/images/product/sanzahuo/guojihuaduoyuyanzhichi.png b/assets/images/product/sanzahuo/guojihuaduoyuyanzhichi.png
new file mode 100644
index 0000000..02314e2
Binary files /dev/null and b/assets/images/product/sanzahuo/guojihuaduoyuyanzhichi.png differ
diff --git a/assets/images/product/sanzahuo/huowushishidingweiyuzhuizong.png b/assets/images/product/sanzahuo/huowushishidingweiyuzhuizong.png
new file mode 100644
index 0000000..0caf284
Binary files /dev/null and b/assets/images/product/sanzahuo/huowushishidingweiyuzhuizong.png differ
diff --git a/assets/images/product/sanzahuo/shangxiayouxitongduijie.png b/assets/images/product/sanzahuo/shangxiayouxitongduijie.png
new file mode 100644
index 0000000..8cfcacb
Binary files /dev/null and b/assets/images/product/sanzahuo/shangxiayouxitongduijie.png differ
diff --git a/assets/images/product/sanzahuo/yecaiyitihuaguanli.png b/assets/images/product/sanzahuo/yecaiyitihuaguanli.png
new file mode 100644
index 0000000..70598ac
Binary files /dev/null and b/assets/images/product/sanzahuo/yecaiyitihuaguanli.png differ
diff --git a/assets/images/product/sanzahuo/zhinengzhaokouyuzidongshibie.png b/assets/images/product/sanzahuo/zhinengzhaokouyuzidongshibie.png
new file mode 100644
index 0000000..a35e439
Binary files /dev/null and b/assets/images/product/sanzahuo/zhinengzhaokouyuzidongshibie.png differ
diff --git a/assets/images/product/wangluohuoyun/huowuquanchengzhuisu.png b/assets/images/product/wangluohuoyun/huowuquanchengzhuisu.png
new file mode 100644
index 0000000..b86c29b
Binary files /dev/null and b/assets/images/product/wangluohuoyun/huowuquanchengzhuisu.png differ
diff --git a/assets/images/product/wangluohuoyun/jiangdijishuyunchengben.png b/assets/images/product/wangluohuoyun/jiangdijishuyunchengben.png
new file mode 100644
index 0000000..52b75ce
Binary files /dev/null and b/assets/images/product/wangluohuoyun/jiangdijishuyunchengben.png differ
diff --git a/assets/images/product/wangluohuoyun/tishengfuwujingzhengli.png b/assets/images/product/wangluohuoyun/tishengfuwujingzhengli.png
new file mode 100644
index 0000000..195bb13
Binary files /dev/null and b/assets/images/product/wangluohuoyun/tishengfuwujingzhengli.png differ
diff --git a/assets/images/product/wangluohuoyun/tishengjishuyunnengli.png b/assets/images/product/wangluohuoyun/tishengjishuyunnengli.png
new file mode 100644
index 0000000..c424b4c
Binary files /dev/null and b/assets/images/product/wangluohuoyun/tishengjishuyunnengli.png differ
diff --git a/assets/images/product/wangluohuoyun/xietongdashujufenxi.png b/assets/images/product/wangluohuoyun/xietongdashujufenxi.png
new file mode 100644
index 0000000..633b90d
Binary files /dev/null and b/assets/images/product/wangluohuoyun/xietongdashujufenxi.png differ
diff --git a/assets/images/product/wangshangyewudating/aifuzhushenhe.png b/assets/images/product/wangshangyewudating/aifuzhushenhe.png
new file mode 100644
index 0000000..b6bf9c2
Binary files /dev/null and b/assets/images/product/wangshangyewudating/aifuzhushenhe.png differ
diff --git a/assets/images/product/wangshangyewudating/chanpingailan.png b/assets/images/product/wangshangyewudating/chanpingailan.png
new file mode 100644
index 0000000..a572d64
Binary files /dev/null and b/assets/images/product/wangshangyewudating/chanpingailan.png differ
diff --git a/assets/images/product/wangshangyewudating/guanlikeshihua.png b/assets/images/product/wangshangyewudating/guanlikeshihua.png
new file mode 100644
index 0000000..16d4b38
Binary files /dev/null and b/assets/images/product/wangshangyewudating/guanlikeshihua.png differ
diff --git a/assets/images/product/wangshangyewudating/qianhouduanliandong.png b/assets/images/product/wangshangyewudating/qianhouduanliandong.png
new file mode 100644
index 0000000..759194c
Binary files /dev/null and b/assets/images/product/wangshangyewudating/qianhouduanliandong.png differ
diff --git a/assets/images/product/wangshangyewudating/yidongbangong.png b/assets/images/product/wangshangyewudating/yidongbangong.png
new file mode 100644
index 0000000..c64de0d
Binary files /dev/null and b/assets/images/product/wangshangyewudating/yidongbangong.png differ
diff --git a/assets/images/product/wangshangyewudating/zhifuyitihua.png b/assets/images/product/wangshangyewudating/zhifuyitihua.png
new file mode 100644
index 0000000..2a90b2e
Binary files /dev/null and b/assets/images/product/wangshangyewudating/zhifuyitihua.png differ
diff --git a/assets/images/product/wangshangyewudating/zhinengliuchengtixiao.png b/assets/images/product/wangshangyewudating/zhinengliuchengtixiao.png
new file mode 100644
index 0000000..bb34493
Binary files /dev/null and b/assets/images/product/wangshangyewudating/zhinengliuchengtixiao.png differ
diff --git a/assets/images/product/yitihua/chanpinjieshao.png b/assets/images/product/yitihua/chanpinjieshao.png
new file mode 100644
index 0000000..0e95941
Binary files /dev/null and b/assets/images/product/yitihua/chanpinjieshao.png differ
diff --git a/assets/images/product/yitihua/chayanzuoyequanliuchengkeshihua.png b/assets/images/product/yitihua/chayanzuoyequanliuchengkeshihua.png
new file mode 100644
index 0000000..b8d5e1d
Binary files /dev/null and b/assets/images/product/yitihua/chayanzuoyequanliuchengkeshihua.png differ
diff --git a/assets/images/product/yitihua/duichangquanjingkeshihua.png b/assets/images/product/yitihua/duichangquanjingkeshihua.png
new file mode 100644
index 0000000..020421a
Binary files /dev/null and b/assets/images/product/yitihua/duichangquanjingkeshihua.png differ
diff --git a/assets/images/product/yitihua/duoluzuoyezhinengjunheng.png b/assets/images/product/yitihua/duoluzuoyezhinengjunheng.png
new file mode 100644
index 0000000..663fe00
Binary files /dev/null and b/assets/images/product/yitihua/duoluzuoyezhinengjunheng.png differ
diff --git a/assets/images/product/yitihua/quanzidongduichangjihua.png b/assets/images/product/yitihua/quanzidongduichangjihua.png
new file mode 100644
index 0000000..aee2def
Binary files /dev/null and b/assets/images/product/yitihua/quanzidongduichangjihua.png differ
diff --git a/assets/images/product/yitihua/wurenzhishouzidonghuazhakou.png b/assets/images/product/yitihua/wurenzhishouzidonghuazhakou.png
new file mode 100644
index 0000000..368377b
Binary files /dev/null and b/assets/images/product/yitihua/wurenzhishouzidonghuazhakou.png differ
diff --git a/assets/images/product/yitihua/zhinengchuanbopeizai.png b/assets/images/product/yitihua/zhinengchuanbopeizai.png
new file mode 100644
index 0000000..3d3b509
Binary files /dev/null and b/assets/images/product/yitihua/zhinengchuanbopeizai.png differ
diff --git a/assets/images/product/yitihua/zhinengduichangyouhua.png b/assets/images/product/yitihua/zhinengduichangyouhua.png
new file mode 100644
index 0000000..419b86a
Binary files /dev/null and b/assets/images/product/yitihua/zhinengduichangyouhua.png differ
diff --git a/assets/images/project/agNetCargoPlatform/top2.png b/assets/images/project/agNetCargoPlatform/top2.png
new file mode 100644
index 0000000..54e0edb
Binary files /dev/null and b/assets/images/project/agNetCargoPlatform/top2.png differ
diff --git a/assets/images/project/agNetCargoPlatform/top3.png b/assets/images/project/agNetCargoPlatform/top3.png
new file mode 100644
index 0000000..ed5af3c
Binary files /dev/null and b/assets/images/project/agNetCargoPlatform/top3.png differ
diff --git a/assets/images/slider/slide-1.png b/assets/images/slider/slide-1.png
new file mode 100644
index 0000000..9237d7e
Binary files /dev/null and b/assets/images/slider/slide-1.png differ
diff --git a/assets/images/slider/slide-2.png b/assets/images/slider/slide-2.png
new file mode 100644
index 0000000..a3ec238
Binary files /dev/null and b/assets/images/slider/slide-2.png differ
diff --git a/assets/images/solution/bg.png b/assets/images/solution/bg.png
new file mode 100644
index 0000000..45fc044
Binary files /dev/null and b/assets/images/solution/bg.png differ
diff --git a/assets/images/solution/dazong.png b/assets/images/solution/dazong.png
new file mode 100644
index 0000000..d9f33fb
Binary files /dev/null and b/assets/images/solution/dazong.png differ
diff --git a/assets/images/solution/gangkou.png b/assets/images/solution/gangkou.png
new file mode 100644
index 0000000..b4206a3
Binary files /dev/null and b/assets/images/solution/gangkou.png differ
diff --git a/assets/images/solution/neihe.png b/assets/images/solution/neihe.png
new file mode 100644
index 0000000..f579bb1
Binary files /dev/null and b/assets/images/solution/neihe.png differ
diff --git a/assets/images/solution/quancheng.png b/assets/images/solution/quancheng.png
new file mode 100644
index 0000000..2ed8e05
Binary files /dev/null and b/assets/images/solution/quancheng.png differ
diff --git a/assets/js/partners-marquee.js b/assets/js/partners-marquee.js
new file mode 100644
index 0000000..4efc3a5
--- /dev/null
+++ b/assets/js/partners-marquee.js
@@ -0,0 +1,121 @@
+(function (root, factory) {
+    if (typeof module === "object" && module.exports) {
+        module.exports = factory();
+        return;
+    }
+
+    root.PartnerMarquee = factory();
+}(typeof self !== "undefined" ? self : this, function () {
+    "use strict";
+
+    function calculateCopies(viewportWidth, baseWidth) {
+        if (!viewportWidth || !baseWidth) {
+            return 2;
+        }
+
+        return Math.max(1, Math.ceil((viewportWidth + 1) / baseWidth));
+    }
+
+    function calculateDuration(segmentWidth) {
+        var minDuration = 18;
+        var pixelsPerSecond = 90;
+
+        if (!segmentWidth) {
+            return minDuration;
+        }
+
+        return Math.max(minDuration, Math.round((segmentWidth / pixelsPerSecond) * 10) / 10);
+    }
+
+    function buildSegmentMarkup(baseMarkup, copies) {
+        return new Array(copies + 1).join(baseMarkup);
+    }
+
+    function syncTrack(track) {
+        var marquee = track.parentNode;
+        var firstSet = track.querySelector(".partner-track-set");
+        var viewportWidth;
+        var baseWidth;
+        var copies;
+        var segmentMarkup;
+        var firstSegment;
+        var secondSegment;
+
+        if (!marquee || !firstSet) {
+            return;
+        }
+
+        if (!track.getAttribute("data-base-markup")) {
+            track.setAttribute("data-base-markup", firstSet.innerHTML.trim());
+        }
+
+        track.innerHTML = "";
+
+        firstSet = document.createElement("div");
+        firstSet.className = "partner-track-set";
+        firstSet.setAttribute("aria-hidden", "true");
+        firstSet.innerHTML = track.getAttribute("data-base-markup");
+        track.appendChild(firstSet);
+
+        viewportWidth = marquee.clientWidth;
+        baseWidth = firstSet.scrollWidth;
+        copies = calculateCopies(viewportWidth, baseWidth);
+        segmentMarkup = buildSegmentMarkup(track.getAttribute("data-base-markup"), copies);
+
+        track.innerHTML = "";
+
+        firstSegment = document.createElement("div");
+        firstSegment.className = "partner-track-set";
+        firstSegment.innerHTML = segmentMarkup;
+
+        secondSegment = document.createElement("div");
+        secondSegment.className = "partner-track-set";
+        secondSegment.setAttribute("aria-hidden", "true");
+        secondSegment.innerHTML = segmentMarkup;
+
+        track.appendChild(firstSegment);
+        track.appendChild(secondSegment);
+        track.style.animationDuration = calculateDuration(firstSegment.scrollWidth) + "s";
+    }
+
+    function syncAll() {
+        var tracks = document.querySelectorAll(".partner-track");
+        var i;
+
+        for (i = 0; i < tracks.length; i += 1) {
+            syncTrack(tracks[i]);
+        }
+    }
+
+    function debounce(fn, wait) {
+        var timer = null;
+
+        return function () {
+            clearTimeout(timer);
+            timer = setTimeout(fn, wait);
+        };
+    }
+
+    function init() {
+        if (!document.querySelector(".partner-track")) {
+            return;
+        }
+
+        syncAll();
+        window.addEventListener("resize", debounce(syncAll, 120));
+    }
+
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", init);
+        } else {
+            init();
+        }
+    }
+
+    return {
+        buildSegmentMarkup: buildSegmentMarkup,
+        calculateCopies: calculateCopies,
+        calculateDuration: calculateDuration
+    };
+}));
diff --git a/assets/js/script.js b/assets/js/script.js
index c1f391b..723aee7 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -95,7 +95,15 @@
         }
     }
 
-
+    // DATA BACKGROUND IMAGE
+    var sliderBgSetting = $(".slide-bg-image");
+    sliderBgSetting.each(function(indx){
+        if ($(this).attr("data-background")){
+            $(this).css("background-image", "url(" + $(this).data("background") + ")");
+        }
+    });
+
+
     // HERO SLIDER
     if (typeof Swiper === "function" && jQuery(".swiper-container").length) {
         var menu = [];
@@ -155,14 +163,6 @@
         var swiper = new Swiper(".swiper-container", swiperOptions);
     }
 
-    // DATA BACKGROUND IMAGE
-    var sliderBgSetting = $(".slide-bg-image");
-    sliderBgSetting.each(function(indx){
-        if ($(this).attr("data-background")){
-            $(this).css("background-image", "url(" + $(this).data("background") + ")");
-        }
-    });
-
 
 
     /*------------------------------------------
@@ -433,11 +433,11 @@
                     items: 3
                 },
 
-                1200 : {
-                    items: 4
-                }
-            }
-        });
+                992 : {
+                    items: 4
+                }
+            }
+        });
     }
 
 
diff --git a/classiccase.html b/classiccase.html
index d5393da..e3be6a1 100644
--- a/classiccase.html
+++ b/classiccase.html
@@ -54,12 +54,12 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title5">
+        <section class="page-title page-title3">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成功源自创新与合作</h2>
-                        <p>坚持以客户为中心，快速响应客户需求，为客户创造长期价值</p>
+                        <h2>创新引领未来，合作成就卓越</h2>
+                        <p>以客户为中心，以响应为使命，以价值为承诺</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
diff --git a/contact.html b/contact.html
index ba5929a..7e1ea16 100644
--- a/contact.html
+++ b/contact.html
@@ -60,8 +60,8 @@
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就客户 共创辉煌</h2>
-                        <p>与港航企业一起在快速发展的物流行业中共同成长、共创辉煌</p>
+                        <h2>做有温度的数字化</h2>
+                        <p>成为领先的智慧港航生态服务商</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
diff --git a/culture.html b/culture.html
index f8d65b6..6e400e4 100644
--- a/culture.html
+++ b/culture.html
@@ -108,12 +108,12 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title3 ">
+        <section class="page-title page-title5 ">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就客户 共创辉煌</h2>
-                        <p>与港航企业一起在快速发展的物流行业中共同成长、共创辉煌</p>
+                        <h2>有温度的团队</h2>
+                        <p>不止有代码和方案，还有球场、烧烤与山海</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
diff --git a/docs/superpowers/plans/2026-04-14-image-optimization-redesign.md b/docs/superpowers/plans/2026-04-14-image-optimization-redesign.md
deleted file mode 100644
index 7d00884..0000000
--- a/docs/superpowers/plans/2026-04-14-image-optimization-redesign.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Image Optimization Redesign Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Restore the prior image/code state, create an `assets_backup` copy, and re-run image optimization so only materially beneficial conversions are adopted while oversized images are compressed to a better size/quality point.
-
-**Architecture:** Revert only the previous assistant-generated changes back to the repository baseline, then operate from that clean baseline with a standalone Python optimizer script. The script will evaluate candidates per file, keep the better format, update references only for accepted conversions, and emit a report for verification.
-
-**Tech Stack:** Python 3, `unittest`, ImageMagick `magick`, git, static HTML/CSS/JS assets
-
----
-
-### Task 1: Restore Baseline And Create Backup
-
-**Files:**
-- Create: `assets_backup/**`
-- Modify: `.gitignore`
-- Modify: `assets/css/about.css`
-- Modify: `assets/css/css.css`
-- Modify: `assets/css/history.css`
-- Modify: `assets/css/style.css`
-- Modify: `*.html`
-- Modify: `classiccase/*.html`
-- Modify: `assets/images/**/*.{png,jpg,jpeg,gif}`
-- Delete: `assets/images/**/*.webp`
-- Delete: `huace/arrow.webp`
-- Delete: `backup/original-images-20260414-155153.tar.gz`
-- Delete: `scripts/optimize_images.py`
-
-- [ ] **Step 1: Capture the assistant-created delta**
-
-Run:
-```bash
-git diff --name-only
-```
-Expected: only the previously assistant-modified image, html, css, `.gitignore`, and generated `webp`/script artifacts are listed.
-
-- [ ] **Step 2: Restore tracked files to repository baseline**
-
-Run:
-```bash
-git restore --source=HEAD -- .gitignore assets/css/about.css assets/css/css.css assets/css/history.css assets/css/style.css changzhan.html chuandai.html classiccase.html classiccase/ index.html contact.html company.html company2.html culture.html dianshang.html footer.html header.html ilog.html jining.html joinus.html new_1.html new_2.html new_3.html new_5.html new_6.html product_Logistics.html product_eCommerce.html product_ecommerce_bctp.html product_ecommerce_freight_booking.html product_ecommerce_net_cargo.html product_ecommerce_obh.html product_full_logistics_chain_cargo_agent.html product_full_logistics_chain_platform.html product_full_logistics_chain_ship_agent.html product_full_logistics_chain_vehicle_transport.html product_full_logistics_chain_warehouse.html product_port.html product_port_cdi.html product_port_cdi_bulk.html product_port_cdi_container.html product_shipping.html product_shipping_boat.html product_shipping_company.html solution_inland_river_shipping.html solution_logistics_chain.html solution_port_supply_chain.html solution_supply_chain.html tech.html yunmatou.html assets/images huace/arrow.png
-```
-Expected: tracked files revert to `HEAD`.
-
-- [ ] **Step 3: Remove generated artifacts**
-
-Run:
-```bash
-find assets/images -type f -name '*.webp' -delete
-rm -f huace/arrow.webp backup/original-images-20260414-155153.tar.gz scripts/optimize_images.py
-```
-Expected: previously generated `webp` files and old helper artifacts are removed.
-
-- [ ] **Step 4: Create a full assets backup**
-
-Run:
-```bash
-rm -rf assets_backup
-cp -a assets assets_backup
-```
-Expected: `assets_backup` exists as a byte-for-byte working backup of the restored baseline assets tree.
-
-- [ ] **Step 5: Verify the backup and restore state**
-
-Run:
-```bash
-git status --short
-find assets_backup -maxdepth 2 -type d | sort | sed -n '1,20p'
-```
-Expected: only `assets_backup/` is untracked before the new optimization work begins.
-
-### Task 2: Add Red-Green Coverage For Selection Rules
-
-**Files:**
-- Create: `tests/test_optimize_assets.py`
-- Create: `scripts/optimize_assets.py`
-
-- [ ] **Step 1: Write the failing tests**
-
-```python
-import unittest
-from pathlib import Path
-
-from scripts.optimize_assets import should_keep_conversion, classify_large_image
-
-
-class OptimizeAssetsRulesTest(unittest.TestCase):
-    def test_rejects_webp_when_not_smaller_than_source(self) -> None:
-        self.assertFalse(should_keep_conversion(120_000, 123_000))
-
-    def test_accepts_materially_smaller_webp_for_large_file(self) -> None:
-        self.assertTrue(should_keep_conversion(500_000, 430_000))
-
-    def test_flags_large_by_filesize(self) -> None:
-        self.assertTrue(classify_large_image(301_000, 1200, 900))
-
-    def test_flags_large_by_dimensions(self) -> None:
-        self.assertTrue(classify_large_image(120_000, 3000, 1800))
-```
-
-- [ ] **Step 2: Run the tests to confirm RED**
-
-Run:
-```bash
-python3 -m unittest tests.test_optimize_assets -v
-```
-Expected: FAIL with import or symbol errors because `scripts/optimize_assets.py` does not exist yet.
-
-- [ ] **Step 3: Write the minimal implementation**
-
-```python
-def should_keep_conversion(source_size: int, candidate_size: int) -> bool:
-    savings = source_size - candidate_size
-    if savings <= 0:
-        return False
-    if source_size < 150 * 1024:
-        return savings >= 8 * 1024
-    return (savings / source_size) >= 0.05
-
-
-def classify_large_image(source_size: int, width: int, height: int) -> bool:
-    return source_size > 300 * 1024 or max(width, height) > 2560
-```
-
-- [ ] **Step 4: Run the tests to confirm GREEN**
-
-Run:
-```bash
-python3 -m unittest tests.test_optimize_assets -v
-```
-Expected: PASS with 4 tests run successfully.
-
-### Task 3: Implement The Optimizer And Rewrite References
-
-**Files:**
-- Modify: `scripts/optimize_assets.py`
-- Test: `tests/test_optimize_assets.py`
-- Modify: `assets/css/**/*.css`
-- Modify: `*.html`
-- Modify: `classiccase/*.html`
-- Modify: `product_*.html`
-- Modify: `solution_*.html`
-
-- [ ] **Step 1: Expand tests for path rewriting and candidate selection**
-
-```python
-    def test_prefers_original_when_candidate_savings_is_below_threshold(self) -> None:
-        self.assertFalse(should_keep_conversion(200_000, 191_000))
-```
-
-- [ ] **Step 2: Run the tests to confirm RED**
-
-Run:
-```bash
-python3 -m unittest tests.test_optimize_assets -v
-```
-Expected: FAIL on the new threshold case.
-
-- [ ] **Step 3: Implement the full optimizer**
-
-```python
-# Main behavior:
-# 1. Walk assets image files from the restored baseline.
-# 2. For each image, optimize original format in place only if smaller.
-# 3. For large images, evaluate multiple quality/resize candidates.
-# 4. Generate webp only when it beats the optimized source and passes thresholds.
-# 5. Update text references only for accepted conversions.
-# 6. Emit a summary report with baseline and final totals.
-```
-
-- [ ] **Step 4: Run targeted verification**
-
-Run:
-```bash
-python3 -m unittest tests.test_optimize_assets -v
-python3 scripts/optimize_assets.py
-```
-Expected: tests pass; script prints accepted conversions, skipped conversions, and size totals.
-
-### Task 4: Final Verification
-
-**Files:**
-- Verify: `assets/**`
-- Verify: `assets_backup/**`
-- Verify: `*.html`
-- Verify: `assets/css/*.css`
-
-- [ ] **Step 1: Verify there are no missing accepted references**
-
-Run:
-```bash
-python3 scripts/optimize_assets.py --check
-```
-Expected: exit 0 with no missing rewritten references.
-
-- [ ] **Step 2: Verify resulting size totals**
-
-Run:
-```bash
-du -sh assets assets_backup
-find assets -type f \\( -iname '*.webp' -o -iname '*.png' -o -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.gif' \\) -printf '%s\n' | awk '{s+=$1} END {printf "assets raster total: %.2f MB\n", s/1024/1024}'
-```
-Expected: `assets_backup` remains as backup; `assets` shows reduced effective payload compared with the restored baseline.
-
-- [ ] **Step 3: Verify git diff is scoped correctly**
-
-Run:
-```bash
-git status --short
-```
-Expected: only the intended backup, script, tests, optimized images, and rewritten references are listed.
diff --git a/header.html b/header.html
index 778f5f3..bc6052d 100644
--- a/header.html
+++ b/header.html
@@ -70,35 +70,36 @@
                     <li class="menu-item-has-children product-menu">
                         <a href="product_Logistics.html" target="_parent">产品中心</a>
                         <ul class="sub-menu">
-                            <li class="menu-item-has-children">
-                                <a href="product_Logistics.html" target="_parent">物流供应链系列产品</a>
+                                                        <li class="menu-item-has-children">
+                                <a href="product_eCommerce.html" target="_parent">港航电商系列产品</a>
                                 <ul class="sub-menu">
-                                    <li><a href="product_full_logistics_chain_platform.html" target="_parent">岸基全程物流链平台</a></li>
+                                    <li><a href="product_ecommerce_freight_booking.html" target="_parent">岸基海运订舱平台</a></li>
+                                    <li><a href="product_ecommerce_net_cargo.html" target="_parent">岸基网络货运平台</a></li>
+                                    <li><a href="product_ecommerce_obh.html" target="_parent">岸基网上业务大厅平台</a></li>
+                                    <li><a href="product_ecommerce_bctp.html" target="_parent">岸基大宗商品贸易平台</a></li>
+                                </ul>
+                            </li>
+                            <li class="menu-item-has-children">
+                                <a href="product_Logistics.html" target="_parent">全程物流链系列产品</a>
+                                <ul class="sub-menu">
+                                    <li><a href="product_full_logistics_chain_platform.html" target="_parent">岸基全程物流链系统</a></li>
                                     <li><a href="product_full_logistics_chain_vehicle_transport.html" target="_parent">岸基车辆运输管理系统</a></li>
                                     <li><a href="product_full_logistics_chain_warehouse.html" target="_parent">岸基仓储管理系统</a></li>
                                     <li><a href="product_full_logistics_chain_ship_agent.html" target="_parent">岸基船舶代理系统</a></li>
                                     <li><a href="product_full_logistics_chain_cargo_agent.html" target="_parent">岸基货运代理系统</a></li>
                                 </ul>
                             </li>
-                            <li class="menu-item-has-children">
-                                <a href="product_eCommerce.html" target="_parent">港航电商平台系列产品</a>
-                                <ul class="sub-menu">
-                                    <li><a href="product_ecommerce_bctp.html" target="_parent">岸基大宗商品贸易平台</a></li>
-                                    <li><a href="product_ecommerce_freight_booking.html" target="_parent">岸基海运订舱平台</a></li>
-                                    <li><a href="product_ecommerce_net_cargo.html" target="_parent">岸基网络货运平台</a></li>
-                                    <li><a href="product_ecommerce_obh.html" target="_parent">岸基网上业务大厅平台</a></li>
-                                </ul>
-                            </li>
+
                             <li class="menu-item-has-children">
                                 <a href="product_port.html" target="_parent">云码头系列产品</a>
                                 <ul class="sub-menu">
-                                    <li><a href="product_port_cdi.html" target="_parent">岸基云码头一体化智能操作系统</a></li>
+                                    <li><a href="product_port_cdi.html" target="_parent">岸基云码头智能操作系统</a></li>
                                     <li><a href="product_port_cdi_container.html" target="_parent">岸基云码头集装箱智能操作系统</a></li>
                                     <li><a href="product_port_cdi_bulk.html" target="_parent">岸基云码头散杂货智能操作系统</a></li>
                                 </ul>
                             </li>
                             <li class="menu-item-has-children">
-                                <a href="product_shipping.html" target="_parent">航运数字化产品</a>
+                                <a href="product_shipping.html" target="_parent">航运数字系列产品</a>
                                 <ul class="sub-menu">
                                     <li><a href="product_shipping_company.html" target="_parent">岸基船公司运营管理系统</a></li>
                                     <li><a href="product_shipping_boat.html" target="_parent">岸基船舶管理系统</a></li>
@@ -110,7 +111,7 @@
                         <a target="_parent">解决方案</a>
                         <ul class="sub-menu">
                             <li>
-                                <a href="solution_inland_river_shipping.html" target="_parent">内河航运一体化解决方案</a>
+                                <a href="solution_inland_river_shipping.html" target="_parent">内河港航一体化解决方案</a>
                             </li>
                             <li>
                                 <a href="solution_supply_chain.html" target="_parent">大宗货物供应链解决方案</a>
diff --git a/index.html b/index.html
index 327295a..8ccf3cd 100644
--- a/index.html
+++ b/index.html
@@ -86,8 +86,26 @@
         <section class="hero-slider hero-style-1">
             <div class="swiper-container">
                 <div class="swiper-wrapper">
+                                        <div class="swiper-slide">
+                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-1.png" style="max-width: none;">
+
+                            <div class="container">
+                                <div data-swiper-parallax="300" class="slide-title">
+                                    <h2>全域智慧物流链解决方案</h2>
+                                </div>
+                                <div data-swiper-parallax="400" class="slide-text">
+                                    <p>贯通多式联运全链路，实现一单到底、全程可视、协同高效、降本增效与价值升级。</p>
+                                </div>
+                                <div class="clearfix"></div>
+                                <div data-swiper-parallax="500" class="slide-btns">
+                                    <a href="solution_logistics_chain.html" target="view_window" class="theme-btn-s2">了解更多</a>
+                                <!--&lt;!&ndash;<a href="https://www.youtube.com/embed/7e90gBu4pas?autoplay=1" class="hero-video-btn video-btn"  data-type="iframe" tabindex="0"><i class="fi flaticon-play-button"></i>Watch About</a> &ndash;&gt;-->
+                                </div>
+                            </div>
+                        </div> <!-- end slide-inner --> 
+                    </div>
                     <div class="swiper-slide">
-                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-2.webp">
+                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-2.png">
                             <div class="container">
                                 <div data-swiper-parallax="300" class="slide-title">
                                     <h2>携手数字化，智领新航运</h2>
@@ -102,24 +120,7 @@
                             </div>
                         </div> <!-- end slide-inner -->
                     </div> <!-- end swiper-slide -->
-                    <div class="swiper-slide">
-                        <div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-1.webp" style="max-width: none;">
-
-                            <div class="container">
-                                <div data-swiper-parallax="300" class="slide-title">
-                                    <h2>服务敏捷进化，云端智能互联</h2>
-                                </div>
-                                <div data-swiper-parallax="400" class="slide-text">
-                                    <p>一体平台，双模部署：为中小码头赋能，让智慧运营更轻、更易、更高效。</p>
-                                </div>
-                                <div class="clearfix"></div>
-                                <div data-swiper-parallax="500" class="slide-btns">
-                                    <a href="http://product_Logistics.html" target="view_window" class="theme-btn-s2">了解更多</a>
-                                <!--&lt;!&ndash;<a href="https://www.youtube.com/embed/7e90gBu4pas?autoplay=1" class="hero-video-btn video-btn"  data-type="iframe" tabindex="0"><i class="fi flaticon-play-button"></i>Watch About</a> &ndash;&gt;-->
-                                </div>
-                            </div>
-                        </div> <!-- end slide-inner --> 
-                    </div> <!-- end swiper-slide -->
+ <!-- end swiper-slide -->
 
 
                 </div>
@@ -140,32 +141,33 @@
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="feature-grids clearfix">
-                            <div class="grid">
-                                <div class="header">
-                                    <i class="fi flaticon-truck"></i>
-                                </div>
-                                <div class="details">
-                                    <h3>物流供应链产品</h3>
-                                    <p>面向船公司、船货代、报关、车队、场站和仓储等物流业务的完整解决方案。 </p>
-                                    <a href="product_Logistics.html" class="read-more"  target="_parent">了解更多</a>
-                                </div>
-                            </div>
+
                             <div class="grid">
                                 <div class="header">
                                     <i class="fi flaticon-box"></i>
                                 </div>
                                 <div class="details">
-                                    <h3>港航电商产品</h3>
+                                    <h3>港航电商系列产品</h3>
                                     <p>打通销售、操作、商务、客服全链路，赋能港航企业一体化物流运营方案。 </p>
                                     <a href="product_eCommerce.html" class="read-more"  target="_parent">了解更多</a>
                                 </div>
                             </div>
+                            <div class="grid">
+                                <div class="header">
+                                    <i class="fi flaticon-truck"></i>
+                                </div>
+                                <div class="details">
+                                    <h3>物流供应链系列产品</h3>
+                                    <p>覆盖船公司、船货代、报关行、车队、场站及仓储，全链路产品矩阵。 </p>
+                                    <a href="product_Logistics.html" class="read-more"  target="_parent">了解更多</a>
+                                </div>
+                            </div>                            
                             <div class="grid">
                                 <div class="header">
                                     <i class="fi flaticon-matou "></i>
                                 </div>
                                 <div class="details">
-                                    <h3>云码头产品</h3>
+                                    <h3>云码头系列产品</h3>
                                     <p> 为集装箱、散货、件杂货及液化码头提供深度覆盖的完整解决方案。 </p>
                                     <a href="product_port.html" class="read-more"  target="_parent">了解更多</a>
                                 </div>
@@ -175,8 +177,8 @@
                                     <i class="fi flaticon-cruise"></i>
                                 </div>
                                 <div class="details">
-                                    <h3>航运产品</h3>
-                                    <p> 依托“1+3+N”核心架构，构建数字化协同引擎，驱动航运全链路降本增效。 </p>
+                                    <h3>航运数字系列产品</h3>
+                                    <p> 驱动航运全链路降本增效，依托“1+3+N”核心架构，构建数字化协同引擎。 </p>
                                     <a href="product_shipping.html" class="read-more"  target="_parent">了解更多</a>
                                 </div>
                             </div>
@@ -197,13 +199,13 @@
                 <div class="row">
                     <div class="col col-lg-6 col-lg-offset-3">
                         <div class="section-title-s4">
-                            <span>物流供应链核心能力全景</span>
-                            <h2>一体协同的全栈产品矩阵</h2>
+                            <span>港航供应链核心能力全景</span>
+                            <h2>全栈服务生态，重构供应链新格局</h2>
                         </div>
                     </div>
                 </div>
             </div> <!-- end container -->
-                    <img src="assets/images/index/top.webp" alt="" loading="lazy" style="width: 55%; max-width: none; ">
+                    <img src="assets/images/index/top.png" alt="" loading="lazy" style="width: 65%; max-width: none; ">
                 </div>
          
             </div>
@@ -217,46 +219,47 @@
                 <div class="row">
                     <div class="col col-lg-6 col-lg-offset-3">
                         <div class="section-title-s4">
-                              <span>垂直领域全景方案</span>
-                            <h2>模块化港航产品生态</h2>
-                          
+                              <span>按业务链路快速匹配对应方案</span>
+                            <h2>全域方案 智航港航</h2>
+
                         </div>
                     </div>
                 </div>
             </div> <!-- end container -->
             <div class="portfolio-container">
                 <div class="portfolio-grids portfolio-slider">
-                    <a class="grid" href="solution_supply_chain.html">
-                        <div class="img-holder">
-                            <img src="assets/images/portfolio/img-1.jpg" alt loading="lazy">
-                        </div>
-                        <div class="details">
-                            <div class="inner">
-                                <h3>大宗货物供应链解决方案</h3>
-                                <p class="cat">贸易/物流/港口</p>
-                            </div>
-                        </div>
-                    </a>
                     <a class="grid" href="solution_inland_river_shipping.html">
                         <div class="img-holder">
                             <img src="assets/images/portfolio/img-5.webp" alt loading="lazy">
                         </div>
                         <div class="details">
-                            <div class="inner">
-                                <h3>内河港航一体化解决方案</h3>
-                                <p class="cat">内河港航集团</p>
-                            </div>
+                            <p class="portfolio-meta">内河港航集团</p>
+                            <h3>内河港航一体化解决方案</h3>
+                            <p class="portfolio-desc">打通港口、物流、贸易、金融全链路，实现无人化作业、一单到底、全程可视、业态升级。</p>
+                            <span class="portfolio-link">查看方案</span>
                         </div>
                     </a>
+                    <a class="grid" href="solution_supply_chain.html">
+                        <div class="img-holder">
+                            <img src="assets/images/portfolio/img-1.jpg" alt loading="lazy">
+                        </div>
+                        <div class="details">
+                            <p class="portfolio-meta">贸易 / 物流 / 港口</p>
+                            <h3>大宗货物供应链解决方案</h3>
+                            <p class="portfolio-desc">按货种深度定制，打通物流 、贸易、 金融全链路，实现作业无人化、全程可追溯、增收提效。</p>
+                            <span class="portfolio-link">查看方案</span>
+                        </div>
+                    </a>
+
                     <a class="grid" href="solution_port_supply_chain.html">
                         <div class="img-holder">
                             <img src="assets/images/portfolio/img-4.webp" alt loading="lazy">
                         </div>
                         <div class="details">
-                            <div class="inner">
-                                <h3>港口供应链平台解决方案</h3>
-                                <p class="cat">大型港航集团</p>
-                            </div>
+                            <p class="portfolio-meta">大型港航集团</p>
+                            <h3>港口供应链平台解决方案</h3>
+                            <p class="portfolio-desc">AI 智能配载更高效、全货种兼容更通用、数据打通更协同、信创适配更安全、供应链服务更增值。</p>
+                            <span class="portfolio-link">查看方案</span>
                         </div>
                     </a>
                     <a class="grid" href="solution_logistics_chain.html">
@@ -264,10 +267,10 @@
                             <img src="assets/images/portfolio/img-3.webp" alt loading="lazy">
                         </div>
                         <div class="details">
-                            <div class="inner">
-                                <h3>全程物流链解决方案</h3>
-                                <p class="cat">大型物流集团</p>
-                            </div>
+                            <p class="portfolio-meta">大型物流集团</p>
+                            <h3>全程物流链解决方案</h3>
+                            <p class="portfolio-desc">以统一平台打通全环节数据，实现业务财务一体化、流程自动化，高效解决物流协同低效、成本难控等痛点，助力企业降本增效。</p>
+                            <span class="portfolio-link">查看方案</span>
                         </div>
                     </a>
                 </div>
@@ -282,12 +285,12 @@
                     <div class="col col-md-5">
                         <div class="section-title-s2">
                             <span>我们的服务领域</span>
-                            <h2>覆盖港口与航运全链条业务</h2>
+                            <h2>深度覆盖港航全链条核心业务场景</h2>
                         </div>
                     </div>
                     <div class="col col-md-6 col-md-offset-1">
                         <div class="section-title-text">
-                            <p>公司专注于为国内外物流经营实体、运输中介机构、物流金融服务企业、货主及相关政府部门，提供包括航运电商平台建设与运营、物流业务项目实施、大数据平台搭建以及信息化建设咨询等在内的综合性信息服务。
+                            <p>公司专注服务国内外物流实体、中介机构、金融企业、货主及监管部门，提供航运电商、物流实施、大数据平台、信息化咨询等全栈式综合信息服务，实现港航物流全领域、全主体、全链条覆盖。
                             </p>
                         </div>
                     </div>
@@ -299,21 +302,21 @@
                                 <div class="icon">
                                     <i class="fi flaticon-matou"></i>
                                 </div>
-                                <h3><a href="#">码头</a></h3>
+                                <h3>码头</h3>
                                 <!--<p>对码头进行智能化控制，提高码头的作业效率</p>-->
                             </div>
                             <div class="grid">
                                 <div class="icon">
                                     <i class="fi flaticon-changzhan"></i>
                                 </div>
-                                <h3><a href="#">场站</a></h3>
+                                <h3>场站</h3>
                                 <!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
                             </div>
                             <div class="grid">
                                 <div class="icon">
                                     <i class="fi flaticon-cangchu"></i>
                                 </div>
-                                <h3><a href="#">仓储</a></h3>
+                                <h3>仓储</h3>
                                 <!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
                             </div>
                             <div class="grid">
@@ -321,7 +324,7 @@
                                     <!--<img style="" src="assets/images/uniF10B.png">-->
                                     <i class="fi flaticon-dingcang"></i>
                                 </div>
-                                <h3><a href="">船公司</a></h3>
+                                <h3>船公司</h3>
                                 <p> </p>
                             </div>
                             <div class="grid">
@@ -329,7 +332,7 @@
                                     <!--<img style="" src="assets/images/uniF10B.png">-->
                                     <i class="fi flaticon-cruise"></i>
                                 </div>
-                                <h3><a href="">船代</a></h3>
+                                <h3>船代</h3>
                                 <p> </p>
                             </div>
                             <div class="grid">
@@ -337,14 +340,14 @@
                                     <!--<img style="" src="assets/images/012-cruise.svg">-->
                                     <i class="fi flaticon-box"></i>
                                 </div>
-                                <h3><a href="#">货代</a></h3>
+                                <h3>货代</h3>
                                 <p> </p>
                             </div>
                             <div class="grid">
                                 <div class="icon">
                                     <i class="fi flaticon-delivery"></i>
                                 </div>
-                                <h3><a href="#">车队</a></h3>
+                                <h3>车队</h3>
                                 <!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
                             </div>
 
@@ -352,7 +355,7 @@
                                 <div class="icon">
                                     <i class="fi flaticon-delivery-truck"></i>
                                 </div>
-                                <h3><a href="#">交管部门</a></h3>
+                                <h3>交管部门</h3>
                                 <!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
                             </div>
 
@@ -384,7 +387,7 @@
                         <div class="details" style="margin-top: 100px;">
                             <div class="section-title">
                                 <span>我们的行业价值</span>
-                                <h2>客户覆盖率与业务占比双高</h2>
+                                <h2>广覆港航全链，稳居市场前列</h2>
                             </div>
                             <p>依托长达20年的行业信息化经验，我们以科技驱动航运物流供应链的创新与升级。目前，由我们提供服务的客户，其业务总量已占据全国水运货量的五分之一。</p>
                             <div class="contact-info">
@@ -396,7 +399,7 @@
                                 <div>
                                     <!--<img src="assets/images/map.png" alt>-->
                                     <h4>航运货物总量占比</h4>
-                                    <p style="font-family:Helvetica Neue, sans-serif;line-height:1.25rem;font-size:120px;color:#019dfa;font-weight:bold;"><span class="odometer" data-count="20">00</span>%</p>
+                                    <p style="font-family:Helvetica Neue, sans-serif;line-height:1.25rem;font-size:60px;color:#013bfa;font-weight:bold;"><span class="odometer" data-count="20" style="font-size:120px;">00</span>%</p>
                                 </div>
                             </div>
                             <!--<div class="btns">-->
@@ -409,7 +412,43 @@
             </div> <!-- end container -->
         </section>
         <!-- end about-section -->
-
+  <!-- start fun-fact-section -->
+        <section class="fun-fact-section section-padding pt0">
+            <div class="container">
+                <div class="row">
+                    <div class="col col-xs-12">
+                        <h2>数智驱动港航业务 全景洞察运营态势</h2>
+                        <div class="fun-fact-grids clearfix">
+                            <div class="grid">
+                                <div class="info">
+                                    <h3><span class="odometer" data-count="250">00</span>+</h3>
+                                    <p>集装箱业务</p>
+                                </div>
+                            </div>
+                            <div class="grid">
+                                <div class="info">
+                                    <h3><span class="odometer" data-count="17">00</span>+</h3>
+                                    <p>散杂货业务</p>
+                                </div>
+                            </div>
+                            <div class="grid">
+                                <div class="info">
+                                    <h3><span class="odometer" data-count="13">00</span>+</h3>
+                                    <p>Countries Covered</p>
+                                </div>
+                            </div>
+                            <div class="grid">
+                                <div class="info">
+                                    <h3><span class="odometer" data-count="100">00</span>%</h3>
+                                    <p>Satisfied customers</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- end container -->
+        </section>
+        <!-- end fun-fact-section -->
 
         <!-- start services-section -->
 
@@ -752,87 +791,158 @@
                         <div class="section-title-s3" style="margin-bottom:0px
 ">
                             <span>我们的合作伙伴</span>
-                            <h2>携手港航顶尖客户</h2>
+                            <h2>聚港航精锐，启智慧新程</h2>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="container" style="padding:15px 0 30px 0!important;">
+            <div class="partners-marquee-wrap">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <div class="partner-grids partners-slider">
-                            <div class="grid">
-                                <img src="assets/images/partners/jinjiang.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/qiaoyi.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/zhongshanganghang.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/shanghaihanghua.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/qinhuangdao.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/rizhao.png" alt loading="lazy">
+                        <div class="partner-marquee">
+                            <div class="partner-track">
+                                <div class="partner-track-set">
+                                    <div class="grid">
+                                        <img src="assets/images/partners/jinjiang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/qiaoyi.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/zhongshanganghang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/shanghaihanghua.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/qinhuangdao.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/rizhao.png" alt loading="lazy">
+                                    </div>
+                                </div>
+                                <div class="partner-track-set" aria-hidden="true">
+                                    <div class="grid">
+                                        <img src="assets/images/partners/jinjiang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/qiaoyi.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/zhongshanganghang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/shanghaihanghua.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/qinhuangdao.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/rizhao.png" alt loading="lazy">
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
-                        <div class="partner-grids partners-slider">
-                            <div class="grid">
-                                <img src="assets/images/partners/beibuwan.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/jining.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/liandai.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/hainanlingao.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/zhujiangchuanwu.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/hefei.png" alt loading="lazy">
+                        <div class="partner-marquee">
+                            <div class="partner-track">
+                                <div class="partner-track-set">
+                                    <div class="grid">
+                                        <img src="assets/images/partners/beibuwan.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/jining.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/liandai.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/hainanlingao.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/zhujiangchuanwu.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/hefei.png" alt loading="lazy">
+                                    </div>
+                                </div>
+                                <div class="partner-track-set" aria-hidden="true">
+                                    <div class="grid">
+                                        <img src="assets/images/partners/beibuwan.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/jining.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/liandai.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/hainanlingao.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/zhujiangchuanwu.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/hefei.png" alt loading="lazy">
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
-                        <div class="partner-grids partners-slider">
-
-                            <div class="grid">
-                                <img src="assets/images/partners/gangwuju.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/zhongyunjituan.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/tangshangang.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/dongfangguoji.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/weihaigang.png" alt loading="lazy">
-                            </div>
-                            <div class="grid">
-                                <img src="assets/images/partners/wuzhou.png" alt loading="lazy">
+                        <div class="partner-marquee">
+                            <div class="partner-track">
+                                <div class="partner-track-set">
+                                    <div class="grid">
+                                        <img src="assets/images/partners/gangwuju.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/zhongyunjituan.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/tangshangang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/dongfangguoji.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/weihaigang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/wuzhou.png" alt loading="lazy">
+                                    </div>
+                                </div>
+                                <div class="partner-track-set" aria-hidden="true">
+                                    <div class="grid">
+                                        <img src="assets/images/partners/gangwuju.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/zhongyunjituan.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/tangshangang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/dongfangguoji.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/weihaigang.png" alt loading="lazy">
+                                    </div>
+                                    <div class="grid">
+                                        <img src="assets/images/partners/wuzhou.png" alt loading="lazy">
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="separator"></div>
-            </div> <!-- end container -->
+            </div>
         </section>
         <!-- end partners-section -->
 
@@ -919,9 +1029,8 @@
                 <div class="row">
                     <div class="col col-lg-8 col-sm-8">
                         <div class="text">
-                            <h2>为客户提供高效服务
-                            </h2>
-                            <p style="font-size:19px;">岸基科技，港航企业可信赖的长期伙伴。我们专注打造高效能“互联网+航运”平台，以客户为中心快速响应，驱动管理效能升级，为客户创造持久价值。</p>
+                            <h2>岸基科技，港航企业值得信赖的长期伙伴。</h2>
+                            <p style="font-size:19px;">我们专注打造高效能 “互联网 + 航运” 生态平台，坚持以客户为中心，敏捷响应需求，驱动管理效能持续升级，为客户创造长期持久价值。</p>
                         </div>
                     </div>
                     <div class="col col-lg-3 col-sm-4">
@@ -967,6 +1076,7 @@
     <script defer src="assets/js/kefu.js"></script>
     <script defer src="assets/js/jquery-plugin-collection.js"></script>
     <script defer src="assets/js/script.js"></script>
+    <script defer src="assets/js/partners-marquee.js"></script>
 
     <!-- d3 用于地图，延迟加载 -->
     <script defer src="assets/js/d3.min.js"></script>
diff --git a/joinus.html b/joinus.html
index 5ef6b52..67a0a95 100644
--- a/joinus.html
+++ b/joinus.html
@@ -81,8 +81,8 @@
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>你选择的不仅是职业</h2>
-                        <p>你还在寻找人生的挑战吗？加入我们，挖掘更优秀的自己</p>
+                        <h2>我们正在寻找</h2>
+                        <p>有梦想、有实力、有担当的你</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
diff --git a/new.html b/new.html
index c770b23..660e73f 100644
--- a/new.html
+++ b/new.html
@@ -54,12 +54,12 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title3 ">
+        <section class="page-title page-title6 ">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就客户 共创辉煌</h2>
-                        <p>与港航企业一起在快速发展的物流行业中共同成长、共创辉煌</p>
+                        <h2>新闻与洞察</h2>
+                        <p>了解岸基最新动态，见证每一步成长</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
diff --git a/product_Logistics.html b/product_Logistics.html
index 76353cd..9f9542d 100644
--- a/product_Logistics.html
+++ b/product_Logistics.html
@@ -58,8 +58,8 @@
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就非凡行业新发展</h2>
-                        <p>通过核心软件产品推动港航业的发展与变革，为企业创造赢利点，提升中国物流运行效率</p>
+                        <h2>智慧产品矩阵</h2>
+                        <p>通覆盖全角色，贯穿全流程</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
@@ -78,7 +78,7 @@
                                     <li class="current"><a href="product_Logistics.html">全程物流链系列产品</a></li>
                                     <li><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
                                     <li><a href="product_port.html">云码头系列产品</a></li>
-                                    <li><a href="product_shipping.html">航运数字化产品</a></li>
+                                    <li><a href="product_shipping.html">航运数字系列产品</a></li>
                                 </ul>
                             </div>
                         </div>
diff --git a/product_eCommerce.html b/product_eCommerce.html
index 80b61b3..22e9318 100644
--- a/product_eCommerce.html
+++ b/product_eCommerce.html
@@ -58,8 +58,8 @@
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就非凡行业新发展</h2>
-                        <p>通过核心软件产品推动港航业的发展与变革，为企业创造赢利点，提升中国物流运行效率</p>
+                         <h2>智慧产品矩阵</h2>
+                        <p>通覆盖全角色，贯穿全流程</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
@@ -78,7 +78,7 @@
                                     <li><a href="product_Logistics.html">全程物流链系列产品</a></li>
                                     <li class="current"><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
                                     <li><a href="product_port.html">云码头系列产品</a></li>
-                                    <li><a href="product_shipping.html">航运数字化产品</a></li>
+                                    <li><a href="product_shipping.html">航运数字系列产品</a></li>
                                 </ul>
                             </div>
                         </div>
diff --git a/product_ecommerce_bctp.html b/product_ecommerce_bctp.html
index 304f510..020c19b 100644
--- a/product_ecommerce_bctp.html
+++ b/product_ecommerce_bctp.html
@@ -29,59 +29,7 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
-
-    <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    <link href="assets/css/product.css" rel="stylesheet">
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +60,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform1">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基大宗商品贸易平台</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                               岸基大宗商品贸易平台是集信息发布、商品交易、水上运输、多式联运于一体的综合服务平台。平台支持微信小程序及网站访问，为货主、贸易商、船主、车主等各方提供在线贸易与运输服务，推动多式联运“一单制”，实现物流全程数字化与智能化，优化港口资源配置，提升效率、降低成本。平台通过整合上下游资源、构建港口生态，持续增强航运物流供应链整体竞争力。
+                        <div class="cargo-info-left cargo-info-left--compact">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基大宗商品贸易平台</h2>
+                            <p class="product-hero-description">
+岸基大宗商品贸易平台，集信息发布、在线交易、水上运输、多式联运于一体。支持小程序及网站访问，为货主、贸易商、船主、车主提供一站式贸易与运输服务，推动多式联运“一单制”，实现物流全程数字化、智能化。                            </p>
                         </div>
                         <div class="cargo-info-right"></div>
                     </div>
@@ -139,72 +87,139 @@
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>以港航数字化为核心，构建全链路一体化业务体系</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">船货通</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">梧贸易</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">梧道知</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">物流集疏易</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">小程序作业</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">三维梧州</button>
+                    </li>
+                </ul>
+                <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/bctp/chuanhuotong.png" alt="船货通功能图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="船货通功能">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>船货通功能</h4>
-                                        <p>解决货主找船、船找货源的信息封闭问题，对接业内主流网货平台服务提供更加便捷船货匹配渠道；</p>
-                                    </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/bctp/wumaoyi.png" alt="梧贸易功能图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="梧贸易功能">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>梧贸易功能</h4>
-                                        <p>为货主和贸易商提供在线交易撮合、智能货物推荐等功能，打破线下交易壁垒</p>
-                                    </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/bctp/wudaozhi.png" alt="梧道知功能图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="梧道知功能">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>梧道知功能</h4>
-                                        <p>解决船舶航行安全所需航道水文、气象、水闸拥挤等相关痛点问题，为平台客户提供实时资讯</p>
-                                    </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/bctp/wujiujishuyi.png" alt="物流集疏易图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="物流集疏易">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>物流集疏易</h4>
-                                        <p>解决多式联运复杂的协同问题，提供一单制在线联运服务，在线下单，智能分解服务报价，全程跟踪</p>
-                                    </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/bctp/xiaochengxuzuoye.png" alt="小程序作业图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="小程序作业">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>小程序作业</h4>
-                                        <p>解决车辆进港送货、船舶靠泊作业等在外作业问题，实现高效的无纸化交接。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="三维梧州功能">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>三维梧州功能</h4>
-                                        <p>解决区域物流数据的整合问题，解决经济物流相关指标的实时分析问题，提供直观的三维展现</p>
-                                    </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/bctp/sanweiwuzhou.png" alt="三维梧州功能图示">
                                 </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -212,11 +227,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title product-architecture-title--compact">产品架构</h1>
+                         <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/ecommerce/bctp.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -227,60 +243,67 @@
         <section >
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header product-advantages-header--compact">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>我们不止于功能领先，更在于价值落地</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
+                        <div class="service-grids services-slider clearfix bctp-advantage-grid">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>业务协作一体化</h4>
+                                        <img src="assets/images/project/common/编组-14.svg" alt="业务协作一体化">
                                     </div>
                                     <div class="feature-card-body">
+                                        <h4>业务协作一体化</h4>
                                         <p>建立在线业务协作机制，通过平台连接用户、船方、司机、货主、资金方、监管单位等，实现企业-人-应用-业务的高效、低成本互联互通，业务和办公自动化协同。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>港口三维可视化</h4>
+                                        <img src="assets/images/project/common/资源_5.svg" alt="港口三维可视化">
                                     </div>
                                     <div class="feature-card-body">
+                                        <h4>港口三维可视化</h4>
                                         <p>港区水面、码头等三维展示、立体呈现，观测码头作业流程，监测机械及人员实时状况，实现目标跟踪、查找等，维护港口整体生产秩序，保障忙而不乱、高效有序。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>生产作业无纸化</h4>
+                                        <img src="assets/images/project/common/资源_3.svg" alt="生产作业无纸化">
                                     </div>
                                     <div class="feature-card-body">
+                                        <h4>生产作业无纸化</h4>
                                         <p>使用电子单据全面代替传统纸质单据，通过一键发布需求、订单在线跟踪等，减少人工手动操作，提高港区整体自动化、智慧化生产作业效率。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>数据资源一体化</h4>
+                                        <img src="assets/images/project/common/资源_9.svg" alt="数据资源一体化">
                                     </div>
                                     <div class="feature-card-body">
+                                        <h4>数据资源一体化</h4>
                                         <p>建立数据共享架构，打通港口信息流、资金流、物流、商流等，将离散的各类业务系统以及物流公司、港口公司、船公司、货代、船代、司机、业务员等各方数据统一整合，建立共建共享，开放协同的数字底座。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>辅助决策科学化</h4>
+                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="辅助决策科学化">
                                     </div>
                                     <div class="feature-card-body">
+                                        <h4>辅助决策科学化</h4>
                                         <p>为管理人员提供从宏观到微观的港区运营视图，拓展动态监测、统计分析、趋势研判、效果评估、风险防控等，提升梧州港智慧化经营决策水平。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>港口服务品质化</h4>
+                                        <img src="assets/images/project/common/编组-14.svg" alt="港口服务品质化">
                                     </div>
                                     <div class="feature-card-body">
+                                        <h4>港口服务品质化</h4>
                                         <p>提供水文气象、航标显示、航道信息、船舶显示、气象信息等查询和提醒服务，提高服务品质，保障物流运输安全。</p>
                                     </div>
                                 </div>
@@ -314,31 +337,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_ecommerce_freight_booking.html b/product_ecommerce_freight_booking.html
index fda67f7..3e4e9e4 100644
--- a/product_ecommerce_freight_booking.html
+++ b/product_ecommerce_freight_booking.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +63,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform1">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
                         <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基海运订舱平台</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                构建线上线下融合的智慧海运服务平台，实现订舱、拖车、报关全流程线上化操作。依托服务产品化、流程可视化与智能营销，赋能企业提升业务效率、降低运营成本，打造一站式海运电商体验。
+                            <h2 id="cargoTitle" class="product-hero-title">岸基海运订舱平台</h2>
+                            <p class="product-hero-description">
+                                岸基海运订舱平台是面向国际物流领域的一站式数字化解决方案，将订舱、拖车、报关等传统线下服务全面线上化，通过服务产品化、全链路可视化、智能营销、多端协同与自动化规则引擎，帮助企业提升业务效率、降低运营成本，打造如电商般便捷的海运服务体验。
                             </p>
                         </div>
                         <div class="cargo-info-right"></div>
@@ -140,63 +91,121 @@
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕海运订舱场景，构建从服务上架到履约跟踪的全链路数字能力。</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">服务产品化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">全链路可视化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">智能营销中心</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">多端协同触达</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">自动化规则引擎</button>
+                    </li>
+                </ul>
+                <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>把订舱、拖车、报关等线下服务抽象为标准化 SPU/SKU，实现线上透明展示与自由组合交易。</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/haiyundingcang/fuwuchanpinhua.png" alt="服务产品化功能图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="服务产品化（SPU/SKU）">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>服务产品化（SPU/SKU）</h4>
-                                        <p>将线下服务抽象为标准化产品单元，支持线上自由组合交易，提升服务可售性与客户决策效率。</p>
-                                    </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/haiyundingcang/quanchenglukeshihuagenzong.png" alt="全链路可视化跟踪图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="全链路可视化跟踪">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>全链路可视化跟踪</h4>
-                                        <p>以提单号为唯一线索，实时追踪订舱、提单签发、舱单传输等关键节点状态，提升业务透明度与客户信任度。</p>
-                                    </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>
+                                    <li>营销数据可回溯，支持持续优化投放策略。</li>
+                                </ul>
+                            </div>
+                            <div class="feature-highlight-visual">
+                                <div class="feature-highlight-visual-card">
+                                    <img src="assets/images/product/haiyundingcang/zhinengyingxiaozhongxin.png" alt="智能营销中心图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="全渠道交互覆盖">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能营销中心</h4>
-                                        <p>集成积分、满减、秒杀、优惠券等促销工具，帮助企业构建电商化营销体系，增强客户粘性。</p>
-                                    </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>通过 APP、微信公众号、邮件、短信等渠道主动推送订单状态、异常预警与活动通知，提升服务响应速度。</p>
+                                <ul class="feature-highlight-points">
+                                    <li>关键节点实时通知，客户无需频繁登录查询。</li>
+                                    <li>多渠道冗余保障，降低单一触达失败风险。</li>
+                                    <li>支持按需订阅消息类型，减少信息过载。</li>
+                                    <li>服务响应提速，客户满意度持续提升。</li>
+                                </ul>
+                            </div>
+                            <div class="feature-highlight-visual">
+                                <div class="feature-highlight-visual-card">
+                                    <img src="assets/images/product/haiyundingcang/duoduanxietongchuda.png" alt="多端协同触达图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="多端协同触达">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>多端协同触达</h4>
-                                        <p>通过APP、微信、邮件、短信全渠道推送订单状态，提升服务响应速度与客户满意度。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="自动化规则引擎">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>自动化规则引擎</h4>
-                                        <p>支持船公司业务规则、计费事件、表单流程的自定义配置，适应港口/货代/船东等复杂场景，提升系统灵活性。</p>
-                                    </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>
+                                    <li>实施周期显著缩短，上线后仍可持续迭代优化。</li>
+                                </ul>
+                            </div>
+                            <div class="feature-highlight-visual">
+                                <div class="feature-highlight-visual-card">
+                                    <img src="assets/images/product/haiyundingcang/zidonghuaguizeyinqing.png" alt="自动化规则引擎图示">
                                 </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -204,11 +213,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/ecommerce/booking.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -216,56 +226,80 @@
             </div>
         </section>
 
-        <section >
+        <section>
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>从业务连接到经营决策，持续放大海运订舱运营价值。</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>强大的数据服务与EDI能力</h4>
+                                    <img src="assets/images/project/common/资源_5.svg" alt="全域数据枢纽">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>通过标准化接口实现船代、财务、OA等多系统无缝对接，支持订单、舱单、账单数据实时同步，彻底打破信息孤岛，构建全域数据枢纽。</p>
+                                    <h4>全域数据枢纽</h4>
+                                    <p>通过标准化 EDI 接口打通多系统数据通道，消除信息孤岛，实现一套业务数据在多端共享与复用。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>业务链路可视化与智能优化</h4>
+                                    <img src="assets/images/project/common/编组-14.svg" alt="全流程自动化处理">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>全流程节点状态与时间轴清晰可视，实时触发异常预警（如延迟超时、操作卡顿），支持动态调整流程逻辑，助力企业快速定位并疏通业务瓶颈。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>高度灵活的规则引擎</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>支持计费费目自定义、船公司页面表单动态配置、业务流转规则按需调整，灵活适配不同客户与船公司的差异化需求，零代码满足复杂场景。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
                                     <h4>全流程自动化处理</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>基于邮件主题智能识别实现订单自动分发，同步触发状态更新与异常提醒，减少人工核对环节，操作效率提升50%+。</p>
+                                    <p>邮件与业务指令可智能识别并自动分发，显著减少人工核对环节，持续提升整体作业效率。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>多渠道支付与智能结算</h4>
+                                    <img src="assets/images/project/common/资源_3.svg" alt="多渠道支付与智能结算">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>集成东方支付、网银、微信、支付宝等主流支付方式，支持线上线下混合结算模式，资金到账时效压缩至分钟级，提升资金周转率30%+。</p>
+                                    <h4>多渠道支付与智能结算</h4>
+                                    <p>支持主流线上支付与自动归集结算，缩短资金到账时间，提升资金周转效率与财务协同能力。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_9.svg" alt="零代码柔性配置">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>零代码柔性配置</h4>
+                                    <p>计费、表单、审批规则均可按场景配置，快速匹配客户与船司差异需求，降低系统改造成本。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-2-copy-5.svg" alt="透明决策引擎">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>透明决策引擎</h4>
+                                    <p>关键节点可视化与异常自动预警形成闭环，让业务瓶颈可定位、可追踪、可持续优化。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-14.svg" alt="多端协同触达">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>多端协同触达</h4>
+                                    <p>APP、微信、邮件、短信协同触达业务状态与异常信息，保障通知及时传递，提升客户服务体验。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_5.svg" alt="服务产品化交易模式">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>服务产品化交易模式</h4>
+                                    <p>将非标海运服务沉淀为标准商品，支持自由组合与快速决策，增强服务销售能力与规模化复制效率。</p>
                                 </div>
                             </div>
                         </div>
@@ -298,31 +332,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_ecommerce_net_cargo.html b/product_ecommerce_net_cargo.html
index c2a1042..0d527e5 100644
--- a/product_ecommerce_net_cargo.html
+++ b/product_ecommerce_net_cargo.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +63,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform1">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
                         <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基网络货运平台</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                供应链平台核心组件，依托大数据与云计算技术直连终端客户。聚焦智能车货匹配、动态路径调度、自动化作业三大功能。集成订单管理、车辆定位、进度可视化、决策分析、电子结算，构建全链路数字化闭环。深度融合智能调度与路径优化，提升港口拖车全流程协同效率与服务品质。
+                            <h2 id="cargoTitle" class="product-hero-title">岸基网络货运平台</h2>
+                            <p class="product-hero-description">
+                                岸基网络货运平台是供应链平台核心组件，依托大数据与云计算技术直连终端客户，聚焦智能车货匹配、动态路径调度与自动化作业，集成订单管理、车辆定位、进度可视化、决策分析与电子结算，构建全链路数字化闭环，持续提升港口拖车协同效率与服务品质。
                             </p>
                         </div>
                         <div class="cargo-info-right"></div>
@@ -140,63 +91,118 @@
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>以车货协同和路径优化为核心，打造港口集疏运数字化闭环。</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">货物全程追溯</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">集疏运能力提升</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">服务竞争力提升</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">集疏运降本</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">协同大数据分析</button>
+                    </li>
+                </ul>
+                <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/wangluohuoyun/huowuquanchengzhuisu.png" alt="货物全程追溯图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="货物全程追溯">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>货物全程追溯：保障安全，提升可靠性</h4>
-                                        <p>运用移动端数据采集与车辆定位技术，对货物从装货点启运、途中运输直至抵达目的地的全过程进行实时监控与数据记录。实现货物的端到端可视化追踪，显著提升运输过程的安全性与可靠性，让客户随时掌握货物动态。</p>
-                                    </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/wangluohuoyun/tishengjishuyunnengli.png" alt="提升港口集疏运能力图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="提升港口集疏运能力">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>提升港口集疏运能力：加速周转，优化计划</h4>
-                                        <p>通过平台赋能，有效加速港口集装箱/货物的周转速度，整体提升港口集疏运效率。同时，大幅提升陆路集疏运的计划性，并推动实现集疏运作业流程的无纸化操作，简化流程，提高效率。</p>
-                                    </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/wangluohuoyun/tishengfuwujingzhengli.png" alt="提升港口服务竞争力图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="提升港口服务竞争力">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>提升港口服务竞争力：强化联动，优化体验</h4>
-                                        <p>助力中山港深化与内陆枢纽的协同联动，有效吸引更多制造业货源聚集。结合海关"直提直装"、"离港确认"等便利化措施，优化通关流程，显著缩短货物在港时间，增强客户服务体验与满意度。</p>
-                                    </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/wangluohuoyun/jiangdijishuyunchengben.png" alt="降低集疏运成本图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="降低集疏运成本">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>降低集疏运成本：智能调度，提升效率</h4>
-                                        <p>依托平台智能算法，综合考量车辆实时位置、车龄车况、装卸地点等多维因素，实现运输线路的动态优化。有效提升车辆利用效率与双重运输几率，从源头降低整体集疏运成本。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="增强协同大数据分析能力">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>增强协同大数据分析能力：信息共享，智能预测</h4>
-                                        <p>打通港区码头作业信息与陆运车辆信息的实时共享通道，通过预约排队机制实现作业有序化，提升计划性，增强协同作业效率，减少无效等待时间，降低运营成本。利用大数据分析算法，精准预测未来货物流量趋势，并据此优化路径规划策略，为运营决策提供有力支撑。</p>
-                                    </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/wangluohuoyun/xietongdashujufenxi.png" alt="增强协同大数据分析能力图示">
                                 </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -204,11 +210,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/ecommerce/cargo.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -216,66 +223,91 @@
             </div>
         </section>
 
-        <section >
+        <section>
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>覆盖合规、资金、效率、协同与决策的全方位运营支撑能力。</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>解决开票难题：合规化税务支撑</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>"营改增"政策下普通货运发票开具困难，个体运输户无法提供增值税发票。平台通过税控系统对接，基于真实交易数据化解开票壁垒。</p>
-                                    </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-14.svg" alt="税务合规无忧">
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>三方资金监管：交易安全闭环</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>货主/车主通过平台、物流企业、银行三方监管体系，实现快捷在线支付，保障各方资金安全与权益。</p>
-                                    </div>
+                                <div class="feature-card-body">
+                                    <h4>税务合规无忧</h4>
+                                    <p>对接税控系统并沉淀“三流合一”数据链路，有效解决开票难题，降低企业税务风险。</p>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>增值税发票赋能：降低财务风险</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>依托全程监管的"三流合一"交易数据，开具正规运输发票，有效规避企业税务合规风险。</p>
-                                    </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_5.svg" alt="资金安全放心">
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>小微企业管理提效：全功能工具赋能</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>为小微车队/承运商提供运单、司机、车辆、调度、轨迹、结算、发票管理等全链条工具，显著提升其管理效率与平台黏性。</p>
-                                    </div>
+                                <div class="feature-card-body">
+                                    <h4>资金安全放心</h4>
+                                    <p>平台、物流企业、银行三方监管机制确保交易资金安全，增强交易双方信任基础。</p>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>物流分包网络覆盖：线上线下服务贯通</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>构建物流分包商网络，支撑平台线上交易与线下服务无缝衔接，实现全场景服务覆盖。</p>
-                                    </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_3.svg" alt="小微企业数字化升级">
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>电子签单认证：无纸化操作升级</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>支持手持终端收货人签字确认及网站/APP在线评价，推动签收流程数字化变革。</p>
-                                    </div>
+                                <div class="feature-card-body">
+                                    <h4>小微企业数字化升级</h4>
+                                    <p>提供全链路数字化管理工具，帮助小微物流企业获得可复制、可扩展的运营能力。</p>
                                 </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_9.svg" alt="全场景服务触达">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>全场景服务触达</h4>
+                                    <p>整合物流分包商网络，实现线上下单与线下履约贯通，满足多场景运输服务需求。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-2-copy-5.svg" alt="货物状态实时掌控">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>货物状态实时掌控</h4>
+                                    <p>移动端采集与车辆定位结合，形成端到端透明追踪能力，提升服务可靠性与可控性。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-14.svg" alt="集疏运成本持续优化">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>集疏运成本持续优化</h4>
+                                    <p>智能算法与预约协同机制共同减少空驶与等待时间，推动运输成本持续下降。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_5.svg" alt="竞争力与满意度双提升">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>竞争力与满意度双提升</h4>
+                                    <p>港口协同联动与通关便利化措施叠加，缩短在港时间，增强客户满意度与港口竞争力。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_3.svg" alt="数据驱动科学决策">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>数据驱动科学决策</h4>
+                                    <p>通过货量预测与路径优化把运营管理从经验驱动转向数据驱动，提升决策准确性。</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -306,31 +338,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_ecommerce_obh.html b/product_ecommerce_obh.html
index de6cdc1..7882540 100644
--- a/product_ecommerce_obh.html
+++ b/product_ecommerce_obh.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +63,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform1">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
                         <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基网上业务大厅平台</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                网上业务大厅平台作为多类型码头业务前端客户服务子系统的核心模块，专为货主、货代、船代、车队等外部客户设计，同时支撑大型港口集团实现码头业务的统一化、标准化管理。平台提供电子办单、财务计费与开票、办单数据对接后端TOS系统、作业数据查询等全流程客户服务功能，并通过集群部署、负载均衡及数据异地存储技术，全面提升系统安全性与运行可靠性。
+                            <h2 id="cargoTitle" class="product-hero-title">岸基网上业务大厅平台</h2>
+                            <p class="product-hero-description">
+                                网上业务大厅平台是多类型码头业务前端客户服务的核心模块，面向货主、货代、船代、车队等外部客户，支撑港口集团实现码头业务统一化与标准化管理。平台提供电子办单、计费开票、TOS 数据对接、作业查询等全流程服务，并通过集群部署、负载均衡与异地存储保障系统安全与稳定运行。
                             </p>
                         </div>
                         <div class="cargo-info-right"></div>
@@ -134,60 +85,145 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="../index.html">首页</a> &gt; <a href="../product_eCommerce.html">产品中心</a> &gt; 岸基网上业务大厅平台
+                        <a href="../index.html">首页</a> &gt; <a href="../product_eCommerce.html">产品中心</a> &gt; 岸基港航客户服务平台（网上业务大厅）
                     </div>
                 </div>
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕客户办单体验与港口业务协同，打造高可用的一体化服务入口。</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">智能流程提效</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">移动办公</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">管理可视化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">前后端联动</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">支付流程一体化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">AI辅助审核</button>
+                    </li>
+                </ul>
+                <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>通过 BPM 工作流实现合同办单全过程可视化，并引入 AI 异常识别能力，提升审核效率与处理准确性。</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/wangshangyewudating/zhinengliuchengtixiao.png" alt="智能流程提效图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="业务流程化、规范化、无纸化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>业务流程化、规范化、无纸化</h4>
-                                        <p>通过系统固化港口内部业务管理流程，强化操作规范性，取消部分内部纸质单证，实现全流程电子化流转，显著提升业务处理效率与合规性。</p>
-                                    </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/wangshangyewudating/yidongbangong.png" alt="移动办公图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="移动办公">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>移动办公：打破时空限制的敏捷服务</h4>
-                                        <p>依托网厅服务平台配套的移动端系统，支持多终端、多渠道操作，实现移动端办单与实时业务查询，赋能客户随时随地处理业务，提升服务响应敏捷度。</p>
-                                    </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/wangshangyewudating/guanlikeshihua.png" alt="管理可视化图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="管理可视化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>管理可视化：透明化驱动精准决策</h4>
-                                        <p>通过工作流跟踪、监控报表生成及预警通知推送，为客户实时展示业务办理进度与关键状态，确保信息透明可溯，助力客户动态优化决策。</p>
-                                    </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>平台作为业务枢纽，对外联通代理与海关系统，对内集成 TOS、门禁、理货等业务系统，实现数据贯通。</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/wangshangyewudating/qianhouduanliandong.png" alt="前后端联动图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="前后端联动">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>前后端联动：构建一体化数据中枢</h4>
-                                        <p>网厅平台作为核心枢纽，对外联通代理系统、海关系统，对内集成TOS系统、门禁、理货等业务系统，实现跨系统数据无缝交互，奠定全链路协同基础。</p>
-                                    </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/wangshangyewudating/zhifuyitihua.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>AI辅助审核：智能识别风险，提升审核质量</h2>
+                                <p>引入 AI 审核引擎自动识别单证信息与潜在风险，辅助人工审核聚焦关键问题，实现高效与可控并重。</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/wangshangyewudating/aifuzhushenhe.png" alt="AI辅助审核图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -195,11 +231,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/ecommerce/obh.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -207,74 +244,82 @@
             </div>
         </section>
 
-        <section >
+        <section>
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>以高可用架构和数据联通能力，支撑港航客户服务持续升级。</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>智能流程提效</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>通过BPM工作流实现合同办单全流程可视化，客户与审核人员可实时追踪动态，落地项目平均单节点审批时效压缩至300分钟内。</p>
-                                    </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-14.svg" alt="智能流程提效">
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>九大系统全域交互</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>与TOS系统、金税系统、财务系统、EDI系统、海关系统、短信平台、车队系统、门禁系统建立数据通道，打破信息孤岛，支撑跨系统业务协同。</p>
-                                    </div>
+                                <div class="feature-card-body">
+                                    <h4>智能流程提效</h4>
+                                    <p>BPM 工作流实现全流程可视化，审批节点时效持续优化，客户可实时掌握办单进展。</p>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>高可用架构保障</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>采用集群部署、负载均衡及热加载技术，支持不停机更新（客户无感操作），唐山网厅系统落地近两年未出现严重宕机事故。</p>
-                                    </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_5.svg" alt="九大系统互联">
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>无纸化法律闭环</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>通过电子签章生成具备法律效力的电子合同，彻底取消纸质单证，实现全流程无纸化办公。</p>
-                                    </div>
+                                <div class="feature-card-body">
+                                    <h4>九大系统互联</h4>
+                                    <p>打通 TOS、金税、财务、EDI、海关、短信、车队、门禁等系统数据，建立统一协同通道。</p>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>实时数据透视</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>提供多维度数据查询服务，客户可实时掌握在港货物动态，提升决策时效性。</p>
-                                    </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_3.svg" alt="高可用架构保障">
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>支付流程一体化</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>对接银行系统实现在线支付，并嵌入合同办单流程，极大简化操作环节。</p>
-                                    </div>
+                                <div class="feature-card-body">
+                                    <h4>高可用架构保障</h4>
+                                    <p>采用集群部署、负载均衡与热加载机制，支持不停机迭代，保障平台稳定运行。</p>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                        <h4>专属服务定制</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>通过配套小程序及模块化定制功能，为差异化需求客户提供精准服务解决方案。</p>
-                                    </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_9.svg" alt="无纸化法律闭环">
                                 </div>
+                                <div class="feature-card-body">
+                                    <h4>无纸化法律闭环</h4>
+                                    <p>电子签章生成具备法律效力的电子合同，推动纸质单证全面电子化。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-14.svg" alt="实时数据透视">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>实时数据透视</h4>
+                                    <p>多维数据查询能力帮助客户实时掌握在港动态，提升经营判断及时性。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_5.svg" alt="支付流程一体化">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>支付流程一体化</h4>
+                                    <p>银行支付能力深度嵌入办单流程，支付与业务状态联动，减少人工流转环节。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_3.svg" alt="AI辅助审核">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>AI辅助审核</h4>
+                                    <p>单证自动识别与风险筛查提升审核效率，降低人为疏漏带来的业务与合规风险。</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -305,31 +350,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_full_logistics_chain_cargo_agent.html b/product_full_logistics_chain_cargo_agent.html
index 4888604..4675891 100644
--- a/product_full_logistics_chain_cargo_agent.html
+++ b/product_full_logistics_chain_cargo_agent.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,15 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基货运代理系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                岸基全程物流链核心产品之一，针对货代业务特点，运用先进计算机技术，提升业务单证的智能识别、费用智能对账等服务能力，实现业务的标准化、流程化、智能化操作，实现货物委托、提单确认、海关预配、EDI、费用结算、客户服务等业务的高效操作。
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基全程物流链平台-货运代理系统</h2>
+                            <p class="product-hero-description">
+                                货运代理系统是全程物流链平台核心产品之一，针对货代业务特点，实现货物委托、提单确认、海关预配、EDI、费用结算等关键环节的高效操作。系统通过 AI 提升单证识别与费用对账能力，帮助企业减少人工处理、提升作业效率。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -140,57 +92,111 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕货代作业标准化与自动化，提升效率、准确性与协同能力</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">流程标准化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">录单智能化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">计费灵活化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">EDI自动对接</button>
+                    </li>
+                </ul>
+                <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>建立数据 SOP 标准，明确各业务节点的操作责任与数据流转方式，降低协作不确定性。</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/huoyundaili/liuchengbiaozhunhua.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>录单智能化：AI帮你干活，人工少一半</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/huoyundaili/ludanzhinenghua.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/huoyundaili/jifeilinghuohua.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>EDI自动对接：数据自动传，不用二次录入</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/huoyundaili/edizidongduijie.png" alt="EDI自动对接">
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="流程标准化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>流程标准化</h4>
-                                        <p>建立数据SOP标准，明确货物委托、提单确认等每项业务环节节点，数据流转对象、交互方式、数据标准等，实现系统业务的标准化、流程化操作，提高操作效率。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="录单智能化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>录单智能化</h4>
-                                        <p>配置录单自动化流程，实现数据的快速录入等处理。比如智能发送海关预配舱单、智能实现船公司订舱、提单确认、VGM等操作，整体工作效率提高30%，大大降低人工成本。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="计费灵活化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>计费灵活化</h4>
-                                        <p>自定义设置各费目计费要素、计费事件、计费规则等内容，依据设定规则实现费用的自动计算处理，提高计费业务人员的工作效率，减少误差。同时可以根据费目对应的业务节点完成时自动触发计费事件，实现费用的智能计算操作。</p>
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
-                </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background-color: #eaf5fd; padding: 60px 0;">
+        <section class="product-architecture-section--soft">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
                         <h1>产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/product_full_logistics_chain_platform/cargo_agent.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -198,48 +204,71 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 30px;">产品优势</h1>
+                            <h1 class="product-advantages-title product-advantages-title--spacious">产品优势</h1>
+                            <p>我们不止于功能领先，更在于价值落地</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>分布式部署+微服务模式</h4>
+                                    <img src="assets/images/project/common/编组-14.svg" alt="流程标准省心">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>系统采用先进的互联网分布式架构，无需一次性投入高额硬件成本，资源利用率提升 40% 以上。同时基于微服务、热加载的技术架构，实现系统模块独立开发，无需暂停系统进行升级，提高系统的兼容性和可扩展性。</p>
+                                    <h4>流程标准省心</h4>
+                                    <p>SOP 标准明确环节边界，岗位协同更清晰，问题可追溯，降低运营不确定性。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>AI技术应用</h4>
+                                    <img src="assets/images/project/common/资源_5.svg" alt="AI录单省力">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>通过收集船期、订单等关键的业务数据，建立AI模型与规则引擎，实现系统智能录单秒级完成，告别人工重复录入，错误率降低 95% 以上；通过AI引擎实时监控邮箱，智能解析邮件中、订舱回执等信息，分钟级更新订单状态，实现订单流转无人盯守，提高操作效率。</p>
+                                    <h4>AI录单省力</h4>
+                                    <p>借助 AI 模型与规则引擎自动处理录单与识别任务，减少重复劳动并提高处理速度。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>数据可视监管</h4>
+                                    <img src="assets/images/project/common/资源_3.svg" alt="计费灵活省事">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>深层挖掘业务、财务数据，搭建多维度可视化看板，直观查看数据流程节点运行情况，监控异常数据信息并实时告警提示；同时对业务数据进行同比、环比分析，让领导层掌握公司的经营情况，为公司发展决策提供依据。</p>
+                                    <h4>计费灵活省事</h4>
+                                    <p>费目与规则可按客户及业务灵活配置，系统自动计费，减少人工核算与争议。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/资源_9.svg" alt="EDI协同省时">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>EDI协同省时</h4>
+                                    <p>外部系统自动对接与报文交换，减少重复录入，提升跨系统协同效率。</p>
+                                </div>
+                            </div>
+                            <div class="feature-card">
+                                <div class="feature-card-icon">
+                                    <img src="assets/images/project/common/编组-2-copy-5.svg" alt="可视监管省脑">
+                                </div>
+                                <div class="feature-card-body">
+                                    <h4>可视监管省脑</h4>
+                                    <p>多维看板与异常预警帮助管理层实时掌握经营状态，决策更及时、依据更充分。</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -260,35 +289,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_full_logistics_chain_platform.html b/product_full_logistics_chain_platform.html
index f23a58b..969e4a0 100644
--- a/product_full_logistics_chain_platform.html
+++ b/product_full_logistics_chain_platform.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="irstheme">
 
-    <title> 产品中心-岸基科技-岸基全程物流链平台 </title>
+    <title> 产品中心-岸基科技-岸基全程物流链系统 </title>
     <meta name="title" content="烟台岸基网络科技有限公司">
     <meta name="Description"
         content="烟台岸基网络科技有限公司是从事于全程物流链科技服务的互联网软件公司，致力于打造港航企业的互联网生态圈，研发出了航运电子商务平台系统、多码头智能操作系统、全程物流链管理系统等软件产品。">
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,15 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基全程物流链平台</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                               平台致力于解决物流信息链条割裂的痛点，通过“互联网+物流”的创新模式，无缝连接船公司、货代、车队、港口及仓储等各个环节。依托全流程在线协同与实时数据互通，平台构建了覆盖海运、陆运、仓储的一体化操作界面，有效提升供应链透明度与整体协作效率。
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基全程物流链系统</h2>
+                            <p class="product-hero-description">
+                                全程物流链平台是供应链数字化转型的核心支撑平台，为船公司、货代、报关行、车队、港口场站、仓储服务商等全链条参与者提供线上协同工具。平台通过标准化数据接口实现订舱、货物追踪、单证流转线上化，打通信息壁垒，减少电话沟通与重复录入。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -140,75 +92,133 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕全链条协同与数据贯通，提升物流执行效率与透明度</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">数据自动流转</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">多端协同办公</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">集团统一管控</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">模块化灵活配置</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">对外系统对接</button>
+                    </li>
+                </ul>
+                <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/ilog/shujuzidongliuzhuan.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>支持 PC、APP、微信公众号和小程序，覆盖不同岗位与作业场景的协同需求。</p>
+                                <ul class="feature-highlight-points">
+                                    <li>办公室可用电脑处理批量订舱与单证。</li>
+                                    <li>出差场景下可通过手机查看订单与审批进度。</li>
+                                    <li>司机通过小程序接收派车并上传回单。</li>
+                                    <li>客户通过公众号查货、查费、查船期。</li>
+                                </ul>
+                            </div>
+                            <div class="feature-highlight-visual">
+                                <div class="feature-highlight-visual-card">
+                                    <img src="assets/images/product/ilog/duoduanxietongbangong.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/ilog/jituantongyiguanli.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>平台采用模块化与插拔式组件架构，支持企业按阶段投入、按业务扩展。</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/ilog/mokuaihuapeizhi.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/ilog/duiwaixitongduijie.png" alt="对外系统对接">
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="开放式设计">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>开放式设计，打通全程信息流</h4>
-                                        <p>基于全程物流链业务开放式设计，实现数据全环节共享利用；提供对外数据交换组件，消除信息孤岛，提升数据利用率。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="业务经验与技术深度结合">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>业务经验与技术深度结合</h4>
-                                        <p>十年物流平台IT服务经验团队 + 阿里开发框架资深架构师引领，确保业务需求与技术创新无缝融合。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="全渠道交互覆盖">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>全渠道交互覆盖</h4>
-                                        <p>支持PC端访问，同步融入移动应用、微信公众号等互联网访问方式，满足多场景操作需求。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="多层级管控能力">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>多层级管控能力</h4>
-                                        <p>采用多租户设计，实现集团化统一管理；业务覆盖物流链全环节，兼顾板块内部操作与集团全局管控。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="模块化敏捷适配">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>模块化敏捷适配</h4>
-                                        <p>模块化设计 + 插拔式组件 + 分布式部署，支持按企业规模快速定制系统，兼容多种硬件环境。</p>
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
-                </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/product_full_logistics_chain_platform/platform.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -216,72 +226,80 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>我们不止于功能领先，更在于价值落地</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>成本投入低</h4>
+                                    <img src="assets/images/project/common/编组-14.svg" alt="云化部署降本">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>无需购买实体服务器，资源按需使用，显著降低硬件投入与维护成本。</p>
+                                    <h4>云化部署降本</h4>
+                                    <p>云资源按需使用，减少硬件采购与机房维护投入，让系统建设成本更可控。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>全方位运维支持</h4>
+                                    <img src="assets/images/project/common/资源_5.svg" alt="自动运维省心">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>提供平台资源大屏监控与多方式报警机制，用户无需关注底层运维，聚焦核心业务。</p>
+                                    <h4>自动运维省心</h4>
+                                    <p>平台提供自动化监控与告警，降低人工运维依赖，保障系统稳定运行。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>操作便捷性</h4>
+                                    <img src="assets/images/project/common/资源_3.svg" alt="多端协同提效">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>公有云与私有云统一登录控制台，全平台图形化操作，简化管理流程。</p>
+                                    <h4>多端协同提效</h4>
+                                    <p>PC、APP、微信全渠道覆盖，业务、管理、外场角色都能在统一平台协同操作。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>高安全性保障</h4>
+                                    <img src="assets/images/project/common/资源_9.svg" alt="模块化按需上线">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>平台集成综合安全防护方案，支持多副本数据存储及"两地三中心"异地存储架构。</p>
+                                    <h4>模块化按需上线</h4>
+                                    <p>按业务阶段灵活启用模块，既避免一次性重投入，也保留后续扩展弹性。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>高可靠性设计</h4>
+                                    <img src="assets/images/project/common/编组-2-copy-5.svg" alt="自动对接降误差">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>支持负载均衡<br>支持多项目资源隔离<br>支持多应用集群数据读写分离</p>
+                                    <h4>自动对接降误差</h4>
+                                    <p>与上下游系统自动交换数据，减少人工重复录入，提升准确率与对账效率。</p>
                                 </div>
                             </div>
-                            <div class="feature-card feature-card-advantage">
+                            <div class="feature-card">
                                 <div class="feature-card-icon">
-                                    <h4>标准化平台</h4>
+                                    <img src="assets/images/project/common/编组-14.svg" alt="高可用与数据安全">
                                 </div>
                                 <div class="feature-card-body">
-                                    <p>基于openstack主流云平台构建，确保技术生态兼容性与可持续性。</p>
+                                    <h4>高可用与数据安全</h4>
+                                    <p>通过多副本备份与资源隔离提升可靠性，在业务高峰期保持持续可用与数据安全。</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -302,35 +320,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_full_logistics_chain_ship_agent.html b/product_full_logistics_chain_ship_agent.html
index 77faea8..e1577f2 100644
--- a/product_full_logistics_chain_ship_agent.html
+++ b/product_full_logistics_chain_ship_agent.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,16 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基船舶代理系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                面向船代公司提供完整业务操作解决方案，通过“互联网+”服务模式满足企业内部操作需求。支持船务、单证、箱管、商务、财务等多部门协同，搭建智能高效业务平台，实现线上线下“一站式”服务。
-适用于集装箱/散杂货、干线/支线、外贸/内贸等全代理模式。
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基全程物流链平台-船舶代理系统</h2>
+                            <p class="product-hero-description">
+                                船舶代理系统面向船代公司提供完整业务操作解决方案，支持船务、单证、箱管、商务、财务等多部门协同办公。系统适用于集装箱/散杂货、干线/支线、外贸/内贸等全代理模式，帮助企业实现线上线下一站式服务，提升作业效率与管理精度。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -141,66 +92,39 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
-                        </div>
-                    </div>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>覆盖船代核心作业链条，强化集团管控、自动化处理与经营可视</p>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="SAAS模式化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>系统SAAS模式化与集团化管理</h4>
-                                        <p>支持集团多公司模式的统一业务操作，规范数据标准及业务流程，实现跨公司协同管控。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="AI+RPA技术">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能AI+RPA技术应用</h4>
-                                        <p>通过AI与RPA技术实现发票智能识别、海关预配自动登录与发送功能，提升操作自动化水平。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="EDI自定义">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>EDI与界面深度自定义</h4>
-                                        <p>支持EDI所有报文格式、费用导入清单及功能界面的自定义配置，满足个性化数据处理需求。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="全渠道服务">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>全渠道服务多样化</h4>
-                                        <p>提供网站及移动端（APP、微信）等多平台应用，实现客户数据精准推送服务。</p>
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation"><button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">集团统一管理</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">AI智能作业</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">EDI灵活配置</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">全渠道服务</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">业财一体化</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">数据可视化</button></li>
+                </ul>
+                <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/chuanbodaili/jituanduogongsiguanli.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>AI智能识别与自动化操作</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/chuanbodaili/aizhinenyunzuo.png" alt="AI智能作业"></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>EDI与界面自定义配置</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/chuanbodaili/edipeizhi.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>通过网站、APP、微信多端协同，实现客户服务与内部作业统一联动。</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/chuanbodaili/quandaofuwu.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/chuanbodaili/yecaiyitihua.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/chuanbodaili/shujukeshihua.png" alt="数据可视化"></div></div></div></div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background-color: #eaf5fd; padding: 60px 0;">
+        <section class="product-architecture-section--soft">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
                         <h1>产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/product_full_logistics_chain_platform/ship_agent.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -208,72 +132,25 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品优势</h1>
-                        </div>
-                    </div>
-                </div>
+                <div class="row"><div class="product-advantages-header"><div><h1 class="product-advantages-title product-advantages-title--spacious">产品优势</h1><p>我们不止于功能领先，更在于价值落地</p></div></div></div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>标准化架构与管控</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>统一架构定义数据标准、流程标准与业务规则，实现业务流程标准化操作，支持集团化经营模式，确保数据一体化管控。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>智能化技术应用</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>应用AI大模型与规则引擎，实现海关品名负面清单智能校验、海关预配装载舱单智能发送、邮件智能解析转发、危险品智能审单，提升操作效率与准确性。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>自动化业务操作</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>基于标准业务环节，实现出口自动化做船、费用自动计算及RPA自动化操作，显著提升效率并节约人力成本。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>灵活化配置生态</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>采用"基础平台+业务插件"模块化配置模式，支持审批流程、操作界面、EDI格式及邮件模板的自定义，快速适应业务多变与增长需求。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>可视化决策支持</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>深度挖掘业务数据，图形化实时展现船舶信息、业务进度与财务数据，全局掌控运营状态，辅助精准决策。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>高可靠技术保障</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>基于分布式私有PaaS平台，通过微服务架构、负载均衡与数据安全机制，保障系统稳定运行与运维安全。</p>
-                                </div>
-                            </div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="集团管控省力"></div><div class="feature-card-body"><h4>集团管控省力</h4><p>统一架构定义数据标准与流程规则，多公司统一管理且保持独立运营边界。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="AI操作省人"></div><div class="feature-card-body"><h4>AI操作省人</h4><p>智能识别与规则引擎覆盖高频场景，减少人工录入和重复校验负担。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_3.svg" alt="自动化业务省时"></div><div class="feature-card-body"><h4>自动化业务省时</h4><p>RPA 自动处理与费用自动计算协同，缩短作业链条，提升交付效率。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_9.svg" alt="灵活配置省事"></div><div class="feature-card-body"><h4>灵活配置省事</h4><p>基础平台与插件化能力支持界面、审批、报文按需配置，无需频繁改造系统。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="数据可视省心"></div><div class="feature-card-body"><h4>数据可视省心</h4><p>船舶动态、业务进度、收入成本统一可视，辅助管理层快速做经营判断。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="高可靠保障"></div><div class="feature-card-body"><h4>高可靠保障</h4><p>分布式平台与负载均衡机制保障系统稳定，满足高并发与持续运行需求。</p></div></div>
                         </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -294,35 +171,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_full_logistics_chain_vehicle_transport.html b/product_full_logistics_chain_vehicle_transport.html
index 8e41ffa..152a49b 100644
--- a/product_full_logistics_chain_vehicle_transport.html
+++ b/product_full_logistics_chain_vehicle_transport.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,15 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基车辆运输管理系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                              专注于运输流程的优化与管理。该系统贯彻业财一体化理念，通过智能调度强化运力协同，并实现对运输收入与成本的精准管控，助力企业提升全程物流效率与经营效益。
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基车辆运输管理系统</h2>
+                            <p class="product-hero-description">
+                                岸基车辆运输管理系统（TMS）以业财一体化为核心，聚焦车队调度、成本核算、费用结算等关键场景。系统通过智能调度和全程可视化能力，帮助运输企业优化运力配置，实现运输收入与成本精细化管理，提升运营效率。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -140,75 +92,37 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
-                        </div>
-                    </div>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>从路线、跟踪、成本到结算与异常处置，构建运输全流程数字化闭环</p>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="智能规划运输路线">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能规划运输路线</h4>
-                                        <p>TMS系统集成GIS（地理信息系统）、实时交通数据与算法模型，根据货物属性（重量、体积、温控需求）、车辆资源（载重、司机资质）及外部因素，自动生成最优路线。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="运输动态实时跟踪">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>运输动态实时跟踪</h4>
-                                        <p>TMS通过GPS定位、人工录入动态信息、通关闸口信息录入及视频监控设备，实现运输全程监控动态实时跟踪。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="细化核算运输成本">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>细化核算运输成本</h4>
-                                        <p>TMS构建精细化成本模型，覆盖运费、燃油费、过路费等全部支出，并支持多种计费规则（重量、体积、里程、件数）。通过小程序、公众号或APP实时查看车辆与货物位置、状态及预计到达时间，响应时间从30分钟缩短至1分钟。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="自动计算相关费用">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>自动计算相关费用</h4>
-                                        <p>TMS实现结算管理自动化：可按照费率自动计算费用、生成对账单、发票及核销信息，自动生成利润分析、承运商对账等报表，减少人工录入错误，降低运维成本。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="高效异常处理智能决策">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>高效异常处理智能决策</h4>
-                                        <p>TMS通过监控与多节点跟踪，实现异常状况快速处理：在途监控支持分段记录行驶时间、停留时长，分析异常停留原因。系统自动规划新路线或调配资源，协调运输过程，保障安全。</p>
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation"><button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">智能路线规划</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">全程可视追踪</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">成本精细核算</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">费用自动结算</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">异常快速处理</button></li>
+                </ul>
+                <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>系统基于 GIS、实时交通与车辆约束条件自动生成建议路线，降低调度经验依赖。</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/cheliangyunshu/zhinengluxianguihua.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>通过 GPS、闸口信息和视频监控，实现车辆位置与货物状态实时可见。</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/cheliangyunshu/yunshushijiankeshihua.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/cheliangyunshu/chengbenjingxihesuan.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>系统按费率自动计算费用并生成对账单与报表，缩短结算周期。</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/cheliangyunshu/feiyongzidongjiesuan.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/cheliangyunshu/yichangkuaisuchuli.png" alt="异常快速处理"></div></div></div></div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background-color: #eaf5fd; padding: 60px 0;">
+        <section class="product-architecture-section--soft">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
                         <h1>产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/product_full_logistics_chain_platform/car_management.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -216,48 +130,24 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品优势</h1>
-                        </div>
-                    </div>
-                </div>
+                <div class="row"><div class="product-advantages-header"><div><h1 class="product-advantages-title product-advantages-title--spacious">产品优势</h1><p>我们不止于功能领先，更在于价值落地</p></div></div></div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>更具智能化：物联网与大数据驱动决策</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>通过物联网、大数据技术实现物流信息实时共享与智能决策，彻底改变依赖人工操作和经验判断导致的效率低下与信息不透明问题。以订单处理、库存管理、运输调度场景为例，系统自动化替代人工干预，消除信息滞后与操作误差。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>效率提升：动态资源调度与全时操作</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>动态调整运力资源确保货物准时送达，解决人工调度反应迟钝痛点。支持手机、平板等设备随时随地访问系统，实现订单处理、调度安排等操作无缝协同，显著提升作业响应速度与市场适应力。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>成本控制：多维优化与合规保障</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>精准分析不同运输方式及供应商费用，智能选择最具性价比方案。同步确保运输全程合规性，主动规避因违规引发的法律风险和经济损失，实现成本精细管控。</p>
-                                </div>
-                            </div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="路线更省"></div><div class="feature-card-body"><h4>路线更省</h4><p>GIS 与实时交通数据联动，自动规划更优路线，减少绕行与燃油消耗。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="跟踪更透"></div><div class="feature-card-body"><h4>跟踪更透</h4><p>GPS、闸口与视频数据整合，车辆与货物状态全程可见，响应更及时。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_3.svg" alt="成本更清"></div><div class="feature-card-body"><h4>成本更清</h4><p>精细化成本模型覆盖全费用项，单趟利润与线路效益能够快速量化。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_9.svg" alt="结算更快"></div><div class="feature-card-body"><h4>结算更快</h4><p>费率自动计算与对账单自动生成，显著压缩对账和结算周期。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-2-copy-5.svg" alt="异常更稳"></div><div class="feature-card-body"><h4>异常更稳</h4><p>异常预警、路径重算和应急调度协同，提升运输连续性与风险应对能力。</p></div></div>
                         </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -278,35 +168,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_full_logistics_chain_warehouse.html b/product_full_logistics_chain_warehouse.html
index f9f6f11..6520b41 100644
--- a/product_full_logistics_chain_warehouse.html
+++ b/product_full_logistics_chain_warehouse.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,15 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基仓储管理系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                WMS仓储管理系统是一种用于优化仓库内部操作的软件系统。它通过集成智能设备和执行分配，实现仓库作业的动态管控和实时跟踪。是一种用于管理和控制仓库操作的软件系统，主要目的是帮助仓库管理人员实现对仓库内货物的准确记录、库存跟踪以及库存调度等功能，从而实现对仓库运作的全面监控和管理。WMS能够确保仓库作业的流畅性和准确性。
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基仓储管理系统</h2>
+                            <p class="product-hero-description">
+                                岸基仓储管理系统用于优化仓库内部操作，通过集成智能设备与作业分配机制，实现仓库作业的动态管控与实时跟踪。系统帮助仓库管理人员完成货物准确记录、库存跟踪、入出库调度等关键工作，保障仓储作业流畅且准确。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -140,66 +92,35 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
-                        </div>
-                    </div>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>聚焦库存准确、作业提效与管理可视，打造仓储数字化执行底座</p>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="实时追踪与精准管控">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>实时追踪与精准管控</h4>
-                                        <p>WMS系统实时采集库存数据，消除人工记录误差。WMS整合库存数据，生成可视化报表，帮助管理者优化采购计划。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="智能布局与立体存储">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能布局与立体存储</h4>
-                                        <p>WMS系统可按照批次、总量或体积等条件，智能化的给出货物分类建议，高频商品（如快消品）被分配至靠近出入口的"黄金区域"，低频商品（如季节性商品）存放至高层货架。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="自动化与流程优化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>自动化与流程优化</h4>
-                                        <p>拣货员通过手持端接收系统推送的订单任务，进行入库、出库或移库等操作，简化操作减少无效行走，WMS替代纸质单据，通过移动端实时同步作业数据，减少信息传递延误。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="数据驱动与决策支持">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>数据驱动与决策支持</h4>
-                                        <p>WMS提供库存、订单、作业效率等数据的实时报表，管理层可随时掌握仓库运营状态。</p>
-                                    </div>
-                                </div>
-                        </div>
-                    </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation"><button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">库存实时追踪</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">智能货位布局</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">作业自动化</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">数据驱动决策</button></li>
+                </ul>
+                <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/cangchu/kucunshishizhuizong.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/cangchu/zhinenghuoweibuju.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/cangchu/zuoyezidonghua.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>提供库存、订单、效率等实时报表，帮助管理层进行采购与运营决策。</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/cangchu/shujuqudongjuece.png" alt="数据驱动决策"></div></div></div></div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background-color: #eaf5fd; padding: 60px 0;">
+        <section class="product-architecture-section--soft">
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
                         <h1>产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/product_full_logistics_chain_platform/warehouse.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -207,48 +128,24 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品优势</h1>
-                        </div>
-                    </div>
-                </div>
+                <div class="row"><div class="product-advantages-header"><div><h1 class="product-advantages-title product-advantages-title--spacious">产品优势</h1><p>我们不止于功能领先，更在于价值落地</p></div></div></div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>效率提升：从"人工驱动"到"智能自动化"</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>实现"入库-上架-拣货-出库"全流程智能化，系统根据订单需求和货物位置，自动生成最优拣货路径，减少无效行走。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>成本降低：做到"精益化运营"</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>通过智能化设备（例如手机移动端或扫码终端设备）替代过剩人工，人力需求减少50%-70%，实时库存监控和效期管理功能将损耗率控制在1%以内。</p>
-                                </div>
-                            </div>
-                            <div class="feature-card feature-card-advantage">
-                                <div class="feature-card-icon">
-                                    <h4>数据驱动决策：帮助精准预算</h4>
-                                </div>
-                                <div class="feature-card-body">
-                                    <p>提供库存、订单、作业效率等数据的实时报表，可随时掌握仓库运营状态，系统可实时显示当前库存数据量、工作进度、设备运行状态等。</p>
-                                </div>
-                            </div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="库存准"></div><div class="feature-card-body"><h4>库存准</h4><p>库存实时采集与可视化报表结合，扫码即更新，减少账实偏差。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="找货快"></div><div class="feature-card-body"><h4>找货快</h4><p>智能布局让高频货位更合理、同类集中存放，缩短拣货路径与找货时间。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_3.svg" alt="作业快"></div><div class="feature-card-body"><h4>作业快</h4><p>移动扫码作业替代纸质单据，任务推送与路径规划同步提效。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_9.svg" alt="看得清"></div><div class="feature-card-body"><h4>看得清</h4><p>库存、订单、效率多维数据统一看板，帮助管理层实时掌握仓库状态。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-2-copy-5.svg" alt="省人力"></div><div class="feature-card-body"><h4>省人力</h4><p>智能化设备与流程替代手工记录，减少人力依赖并降低仓储损耗。</p></div></div>
                         </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -269,35 +166,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_port.html b/product_port.html
index 45b229a..1c3434e 100644
--- a/product_port.html
+++ b/product_port.html
@@ -58,8 +58,8 @@
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就非凡行业新发展</h2>
-                        <p>通过核心软件产品推动港航业的发展与变革，为企业创造赢利点，提升中国物流运行效率</p>
+                          <h2>智慧产品矩阵</h2>
+                        <p>通覆盖全角色，贯穿全流程</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
@@ -78,7 +78,7 @@
                                     <li><a href="product_Logistics.html">全程物流链系列产品</a></li>
                                     <li><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
                                     <li class="current"><a href="product_port.html">云码头系列产品</a></li>
-                                    <li><a href="product_shipping.html">航运数字化产品</a></li>
+                                    <li><a href="product_shipping.html">航运数字系列产品</a></li>
                                 </ul>
                             </div>
                         </div>
diff --git a/product_port_cdi.html b/product_port_cdi.html
index 0832202..4cedc92 100644
--- a/product_port_cdi.html
+++ b/product_port_cdi.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +63,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform2">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
                         <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基一体化云码头智能操作系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-针对码头全流程管理的通用软件套装，集成码头操作、智能计划、调度、费收、EDI报文、统计分析、客户服务、决策支持与维护服务等九大核心系统。平台支持集装箱、散杂货、液化及综合型码头全周期作业管理，助力港口集团实现统一、标准化运营。通过自动排产、实时监控、智能配载与集卡调度等功能，持续提升码头运营效率与智能化水平。                            </p>
+                            <h2 id="cargoTitle" class="product-hero-title">岸基云码头集散一体化智能操作系统</h2>
+                            <p class="product-hero-description">
+云码头智能操作平台——适配集装箱、散杂货、液化等全货种码头。集成操作、计划、调度、费收、EDI、客服、决策等核心模块，以自动排产、智能配载、实时监控、集卡调度，赋能集团化统一运营，提效增智。  </p>
                         </div>
                         <div class="cargo-info-right"></div>
                     </div>
@@ -133,87 +84,166 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                        <a href="../index.html">首页</a> &gt; <a href="../product_eCommerce.html">产品中心</a> &gt; 岸基一体化云码头智能操作系统
+                        <a href="../index.html">首页</a> &gt; <a href="../product_eCommerce.html">产品中心</a> &gt; 岸基云码头集散一体化智能操作系统（集散一体化版）
                     </div>
                 </div>
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕堆场、配载、闸口与查验关键环节，形成端到端作业优化闭环</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">智能堆场优化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">全自动堆场计划</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">智能船舶配载</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">堆场全景可视化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">多路作业智能均衡</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">无人值守自动化闸口</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-7" data-target="#feature-panel-7">查验作业全流程可视</button>
+                    </li>
+                </ul>
+                <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/yitihua/zhinengduichangyouhua.png" alt="智能堆场优化图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="智能堆场优化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能堆场优化</h4>
-                                        <p>通过图形界面与数学算法提升堆场堆码密度，显著减少集装箱二次翻捣率，使堆场策划更简单智能，降低操作成本。</p>
-                                    </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/yitihua/quanzidongduichangjihua.png" alt="全自动堆场计划图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="全自动堆场计划">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>全自动堆场计划</h4>
-                                        <p>基于参数化算法自动派位，综合考量堆场状况、作业量平衡、机械负荷、力矩、箱位移距及未来作业顺序，最大化减少机械移动，提升资源利用率。</p>
-                                    </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>支持手工与EDI预配，结合规则引擎和专家知识库自动生成配载队列，并对方案进行持续优化。</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/yitihua/zhinengchuanbopeizai.png" alt="智能船舶配载图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="智能船舶配载">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能船舶配载</h4>
-                                        <p>支持手工/EDI报文预配，自动生成可拆分合并的配载队列，结合分桥操作优化与专家知识库，通过参数调整生成差异化方案，提供配载报告分析与智能修正。</p>
-                                    </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>基于BS图形化界面实时展示整船进度、机械位置与箱位分布，建立可监控、可追踪、可回溯的现场视图。</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/yitihua/duichangquanjingkeshihua.png" alt="堆场全景可视化图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="堆场全景可视化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>堆场全景可视化</h4>
-                                        <p>BS架构图形化实时展示整船箱进度、堆场机械位置及箱位分布，模拟真实堆场动态，提升作业监控精度。</p>
-                                    </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/yitihua/duoluzuoyezhinengjunheng.png" alt="多路作业智能均衡图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="多路作业智能均衡">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>多路作业智能均衡</h4>
-                                        <p>基于堆场策划自动分配闸口进箱与卸船位置，结合机械分布状态动态平衡作业量，优化资源调度效率。</p>
-                                    </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/yitihua/wurenzhishouzidonghuazhakou.png" alt="无人值守自动化闸口图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="无人值守自动化闸口">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>无人值守自动化闸口</h4>
-                                        <p>高端设备自动采集闸口数据并生成作业指令，实现全程无人操作，消除信息二次录入，提升吞吐能力与通行效率。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="查验作业全流程可视">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>查验作业全流程可视</h4>
-                                        <p>图形化展示机查/人查排队队列、作业区箱位状态及实时进度，通过EDI与海关同步查验指令与结果，集成地磅数据自动采集，实现残损登记可视化。</p>
-                                    </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="feature-panel-7" class="feature-highlight-panel" role="tabpanel">
+                        <div class="feature-highlight-detail">
+                            <div class="feature-highlight-copy">
+                                <h2>查验作业全流程可视：协同效率持续提升</h2>
+                                <p>图形化呈现机查/人查排队队列、作业区状态与实时进度，并通过EDI对接海关查验指令和结果，打通现场执行链路。</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/yitihua/chayanzuoyequanliuchengkeshihua.png" alt="查验作业全流程可视图示">
                                 </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -221,11 +251,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/port/cdi.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -236,45 +267,68 @@
         <section >
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>我们不止于功能领先，更在于价值落地</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>智能流程重塑运营标准</h4>
+                                        <img src="assets/images/project/common/编组-14.svg" alt="翻倒降低与堆位增效">
                                     </div>
                                     <div class="feature-card-body">
-                                        <p>通过系统固化港口业务管理流程，强化操作规范性，取消部分内部纸质单证，实现全流程无纸化运作，显著提升作业效率与合规性。</p>
+                                        <h4>翻倒降低与堆位增效</h4>
+                                        <p>图形界面结合数学算法优化堆码密度，在相同场地条件下提升容纳能力并减少二次翻捣，直接降低作业成本。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>自动化驱动实时决策</h4>
+                                        <img src="assets/images/project/common/资源_5.svg" alt="自动派位与均衡作业">
                                     </div>
                                     <div class="feature-card-body">
-                                        <p>地磅自动称重、闸口智能识别、手机理货数据同步、车载终端实时回传等技术实现关键业务自动化，数据采集时效性提升，赋能高效监管与动态决策。</p>
+                                        <h4>自动派位与均衡作业</h4>
+                                        <p>参数化算法自动分配堆场位置并平衡作业负载，减少设备空转与重复移动，保障多线并行时的吞吐稳定。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>全要素可视化管控</h4>
+                                        <img src="assets/images/project/common/资源_3.svg" alt="智能配载提质增效">
                                     </div>
                                     <div class="feature-card-body">
-                                        <p>图形化界面直观展示货物状态、作业计划及执行进度，实现计划、货物、作业等核心信息的可视化管理，提升运营透明度。</p>
+                                        <h4>智能配载提质增效</h4>
+                                        <p>支持EDI预配与专家知识库优化，自动生成多套配载方案并快速比选，缩短计划编制周期并提升装船质量。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>全域运行实时监控</h4>
+                                        <img src="assets/images/project/common/资源_9.svg" alt="全景可视与实时监控">
                                     </div>
                                     <div class="feature-card-body">
-                                        <p>对港口船舶动态、货物位置、机械状态、车辆轨迹进行在线监控，即时发现运营异常，加速问题响应，提升货物流转效率。</p>
+                                        <h4>全景可视与实时监控</h4>
+                                        <p>整船进度、箱位分布、机械位置在线可视，调度可基于统一现场视图快速决策，提升异常处置时效。</p>
+                                    </div>
+                                </div>
+                                <div class="feature-card">
+                                    <div class="feature-card-icon">
+                                        <img src="assets/images/project/common/编组-14.svg" alt="闸口无人化快速通行">
+                                    </div>
+                                    <div class="feature-card-body">
+                                        <h4>闸口无人化快速通行</h4>
+                                        <p>自动识别与自动指令下发覆盖车辆进出关键环节，减少人工登记和重复录入，缩短闸口等待时长。</p>
+                                    </div>
+                                </div>
+                                <div class="feature-card">
+                                    <div class="feature-card-icon">
+                                        <img src="assets/images/project/common/资源_5.svg" alt="查验协同与过程留痕">
+                                    </div>
+                                    <div class="feature-card-body">
+                                        <h4>查验协同与过程留痕</h4>
+                                        <p>查验队列、指令回执与残损登记在线联动，提升跨部门协同效率，强化作业透明度与过程可追溯。</p>
                                     </div>
                                 </div>
                         </div>
@@ -307,31 +361,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_port_cdi_bulk.html b/product_port_cdi_bulk.html
index ec37eaa..f750a1c 100644
--- a/product_port_cdi_bulk.html
+++ b/product_port_cdi_bulk.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +63,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform2">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
                         <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基云码头散杂货智能操作系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-岸基云码头散杂货操作系统是基于云端的多租户软件，集成码头操作、智能计划、调度、费收等九大核心系统。通过图形化界面与智能算法，实现自动化排产、实时监控及智能调度，全面适配门机、堆高机等各类码头设备。系统以模块化设计灵活扩展，可按需调用资源、降低成本，并通过高可用架构保障安全稳定运行，助力散杂货码头提升作业效率与智能化水平。                            </p>
+                            <h2 id="cargoTitle" class="product-hero-title">岸基云码头散杂货智能操作系统</h2>
+                            <p class="product-hero-description">
+岸基云码头散杂货操作系统基于云端多租户架构，集成码头操作、智能计划、智能调度、费收管理、EDI报文转换、统计分析、WEB客户服务、决策支持、维护服务及场站等核心子系统。平台通过图形化操作和智能算法支撑自动排产、实时监控、自动配载与协同调度，满足散杂货码头高频作业场景，在提升效率的同时降低IT建设与运维成本。                            </p>
                         </div>
                         <div class="cargo-info-right"></div>
                     </div>
@@ -139,63 +90,160 @@
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>聚焦闸口、定位、业财、多码头与生态对接，打造散杂货码头云化运营底座</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">智能闸口与自动识别</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">货物实时定位与追踪</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">业财一体化管理</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">多码头统一管控</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">BS架构便捷使用</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">国际化多语言支持</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-7" data-target="#feature-panel-7">上下游系统对接</button>
+                    </li>
+                </ul>
+                <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>运用OCR、RFID等技术自动识别车辆与单证信息，将人工登记为主的闸口流程升级为自动采集与自动放行。</p>
+                                <ul class="feature-highlight-points">
+                                    <li>车牌自动识别快速通行，无需停车重复登记。</li>
+                                    <li>单证OCR录入减少人工输入，降低录入误差。</li>
+                                    <li>闸口数据实时采集回传，提升现场作业效率。</li>
+                                </ul>
+                            </div>
+                            <div class="feature-highlight-visual">
+                                <div class="feature-highlight-visual-card">
+                                    <img src="assets/images/product/sanzahuo/zhinengzhaokouyuzidongshibie.png" alt="智能闸口与自动识别图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/Group-5-Copy-3.svg" alt="智能化码头管理系统">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能化码头管理系统</h4>
-                                        <p>系统运用先进算法，实现了智能闸口，OCR，RFID，GPS差分，移动互联方面的智能化。</p>
-                                    </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>通过GPS差分定位与移动终端采集，实时追踪货物位置、作业状态与异常变化，提升现场协同准确性。</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/sanzahuo/huowushishidingweiyuzhuizong.png" alt="货物实时定位与追踪图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="一体化码头集成管理系统">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>一体化码头集成管理系统</h4>
-                                        <p>系统集业务操作，财务计费，决策支持，智能分析为一体，涵盖了码头、货主、货代、船东、船代、一关三检的相关业务管理及对接。</p>
-                                    </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/sanzahuo/yecaiyitihuaguanli.png" alt="业财一体化管理图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="互联网多租户码头系统">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>互联网多租户码头系统</h4>
-                                        <p>系统支持SaaS模式的多码头运营管理，适合于集团下多个码头的统一部署和分布式独立操作。</p>
-                                    </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>支持SaaS模式下多码头统一部署、独立运行，既满足集团标准管控，又保障单码头运营自治。</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/sanzahuo/duomatoutongyiguankong.png" alt="多码头统一管控图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_6.svg" alt="互联网模式码头管理系统">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>互联网模式码头管理系统</h4>
-                                        <p>系统采用BS模式设计实现，简化了系统的开发、维护和使用。系统支持B2C，B2C商业模式。</p>
-                                    </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>BS架构便捷使用：部署与运维更轻量</h2>
+                                <p>采用浏览器访问模式，无需逐台安装客户端，升级维护集中在服务端统一完成，降低IT维护门槛。</p>
+                                <ul class="feature-highlight-points">
+                                    <li>终端具备浏览器即可使用，推广部署更快捷。</li>
+                                    <li>系统升级后台统一发布，减少现场运维负担。</li>
+                                    <li>支持PC与平板协同访问，办公灵活性更高。</li>
+                                </ul>
+                            </div>
+                            <div class="feature-highlight-visual">
+                                <div class="feature-highlight-visual-card">
+                                    <img src="assets/images/product/sanzahuo/bsjiagoubianjieshiyong.png" alt="BS架构便捷使用图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/智慧物业-copy-2.svg" alt="国际化码头管理系统">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>国际化码头管理系统</h4>
-                                        <p>系统支持多国语言，多国日期，多国数字和多国货币自定义格式。</p>
-                                    </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/sanzahuo/guojihuaduoyuyanzhichi.png" alt="国际化多语言支持图示">
                                 </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="feature-panel-7" 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/sanzahuo/shangxiayouxitongduijie.png" alt="上下游系统对接图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -203,11 +251,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/port/bulk.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -218,61 +267,68 @@
         <section >
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>我们不止于功能领先，更在于价值落地</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>资源弹性调度</h4>
+                                        <img src="assets/images/project/common/Group-5-Copy-3.svg" alt="极简成本投入">
                                     </div>
                                     <div class="feature-card-body">
-                                        <p>置机房与服务器硬件，资源按需弹性调用，显著降低基础设施投入与闲置浪费。</p>
+                                        <h4>极简成本投入</h4>
+                                        <p>无需自建机房和服务器，按需弹性调用云资源，减少一次性基础设施投入并避免长期闲置浪费。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
+                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="全托管式智能运维">
+                                    </div>
+                                    <div class="feature-card-body">
                                         <h4>全托管式智能运维</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>平台资源大屏实时监控，支持多方式预警通知，用户无需关注底层运维，聚焦核心业务发展。</p>
+                                        <p>提供资源状态可视监控与多通道告警，底层运维由平台统一托管，业务团队可专注生产运营优化。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
+                                        <img src="assets/images/project/common/资源_9.svg" alt="统一化便捷操作">
+                                    </div>
+                                    <div class="feature-card-body">
                                         <h4>统一化便捷操作</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>公有云与私有云统一登录控制台，全平台图形化操作界面，大幅降低使用门槛与培训成本。</p>
+                                        <p>公有云与私有云统一控制台入口，配合图形化操作界面，降低学习门槛并缩短新用户上手周期。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
+                                        <img src="assets/images/project/common/资源_6.svg" alt="军工级安全防护">
+                                    </div>
+                                    <div class="feature-card-body">
                                         <h4>军工级安全防护</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>平台级综合安全防护方案，多副本数据存储支持"两地三中心"异地容灾架构，保障数据零丢失。</p>
+                                        <p>平台级安全策略叠加多副本存储与“两地三中心”容灾架构，保障关键数据高可靠与高可用。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
+                                        <img src="assets/images/project/common/智慧物业-copy-2.svg" alt="企业级可靠保障">
+                                    </div>
+                                    <div class="feature-card-body">
                                         <h4>企业级可靠保障</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <p>负载均衡自动分流请求，多项目资源隔离避免干扰，多应用集群数据读写分离提升系统稳定性。</p>
+                                        <p>通过负载均衡、资源隔离与集群读写分离机制保障高并发稳定性，支撑多业务场景持续运行。</p>
                                     </div>
                                 </div>
-                                <div class="feature-card feature-card-advantage">
+                                <div class="feature-card">
                                     <div class="feature-card-icon">
-                                        <h4>开放标准云平台</h4>
+                                        <img src="assets/images/project/common/Group-5-Copy-3.svg" alt="开放标准云平台">
                                     </div>
                                     <div class="feature-card-body">
-                                        <p>基于OpenStack主流云架构，确保技术兼容性与生态扩展性，规避厂商绑定风险。</p>
+                                        <h4>开放标准云平台</h4>
+                                        <p>基于OpenStack主流架构构建，具备良好兼容性与扩展性，降低长期厂商绑定风险。</p>
                                     </div>
                                 </div>
                         </div>
@@ -305,31 +361,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_port_cdi_container.html b/product_port_cdi_container.html
index 2c1553c..b4bb656 100644
--- a/product_port_cdi_container.html
+++ b/product_port_cdi_container.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -112,14 +63,14 @@
 
 
         <!-- start page-title -->
-        <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+        <section class="page-title page-title-cargo-platform2">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
                         <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基云码头集装箱操作系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-岸基云码头集装箱操作系统是一款基于云端的多租户软件，集成了码头运营所需的九大核心子系统。它通过智能算法与图形化界面，实现从自动计划到实时调度的全流程智能化管理，并能灵活适配各类码头设备与工艺，有效提升作业效率、优化资源配置。其模块化设计支持弹性扩展，在降低成本的同时保障系统安全可靠。                                            </p>
+                            <h2 id="cargoTitle" class="product-hero-title">岸基云码头集装箱智能操作系统</h2>
+                            <p class="product-hero-description">
+岸基云码头集装箱操作系统基于云端多租户架构，集成码头操作、智能计划、智能调度、费收管理、EDI报文转换、统计分析、WEB客户服务、决策支持、维护服务及场站等核心子系统。系统通过图形化界面与智能算法实现自动计划排产、实时作业监控、自动船舶配载和智能集卡调度，提升集装箱码头作业效率，并以模块化能力支持低成本扩展与稳定运行。                                            </p>
                         </div>
                         <div class="cargo-info-right"></div>
                     </div>
@@ -133,87 +84,166 @@
             <div class="row">
                 <div class="col col-xs-12">
                     <div class="page-path">
-                         <a href="../index.html">首页</a> &gt; <a href="../product_eCommerce.html">产品中心</a> &gt; 岸基云码头集装箱操作系统
+                         <a href="../index.html">首页</a> &gt; <a href="../product_eCommerce.html">产品中心</a> &gt; 岸基云码头集装箱智能操作系统
                     </div>
                 </div>
             </div>
         </div>
 
-        <section class="section-padding">
+        <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕堆场、配载、闸口与查验场景，构建集装箱码头智能作业闭环</p>
+                </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation">
+                        <button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">智能堆场优化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">全自动堆场计划</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">智能船舶配载</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">堆场全景可视化</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">多路作业智能均衡</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">无人值守自动化闸口</button>
+                    </li>
+                    <li role="presentation">
+                        <button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-7" data-target="#feature-panel-7">查验作业全流程可视</button>
+                    </li>
+                </ul>
+                <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/jizhuangxiang/zhinengduichangyouhua.png" alt="智能堆场优化图示">
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_2.svg" alt="智能堆场优化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能堆场优化</h4>
-                                        <p>通过图形界面与数学算法提升堆场堆码密度，显著减少集装箱二次翻捣率，使堆场策划更简单智能，降低操作成本。</p>
-                                    </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/jizhuangxiang/quanzidongduichangjihua.png" alt="全自动堆场计划图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="全自动堆场计划">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>全自动堆场计划</h4>
-                                        <p>基于参数化算法自动派位，综合考量堆场状况、作业量平衡、机械负荷、力矩、箱位移距及未来作业顺序，最大化减少机械移动，提升资源利用率。</p>
-                                    </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>支持手工与EDI预配，结合专家知识库生成可优化的配载队列，提升计划质量并缩短配载准备周期。</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/jizhuangxiang/zhinengchuanbopeizai.png" alt="智能船舶配载图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-2-copy-5.svg" alt="智能船舶配载">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>智能船舶配载</h4>
-                                        <p>支持手工/EDI报文预配，自动生成可拆分合并的配载队列，结合分桥操作优化与专家知识库，通过参数调整生成差异化方案，提供配载报告分析与智能修正。</p>
-                                    </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>BS图形化实时展示整船进度、机械位置与箱位分布，帮助调度与现场人员快速协同、快速响应异常。</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/jizhuangxiang/duichangquanjingkeshihua.png" alt="堆场全景可视化图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_10.svg" alt="堆场全景可视化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>堆场全景可视化</h4>
-                                        <p>BS架构图形化实时展示整船箱进度、堆场机械位置及箱位分布，模拟真实堆场动态，提升作业监控精度。</p>
-                                    </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/jizhuangxiang/duoluzuoyezhinengjunheng.png" alt="多路作业智能均衡图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/Group-15-Copy-3.svg" alt="多路作业智能均衡">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>多路作业智能均衡</h4>
-                                        <p>基于堆场策划自动分配闸口进箱与卸船位置，结合机械分布状态动态平衡作业量，优化资源调度效率。</p>
-                                    </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/jizhuangxiang/wurenzhishouzidonghuazhakou.png" alt="无人值守自动化闸口图示">
                                 </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_4.svg" alt="无人值守自动化闸口">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>无人值守自动化闸口</h4>
-                                        <p>高端设备自动采集闸口数据并生成作业指令，实现全程无人操作，消除信息二次录入，提升吞吐能力与通行效率。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/Group-5-Copy-3.svg" alt="查验作业全流程可视">
-                                    </div>
-                                    <div class="feature-card-body">
-                                        <h4>查验作业全流程可视</h4>
-                                        <p>图形化展示机查/人查排队队列、作业区箱位状态及实时进度，通过EDI与海关同步查验指令与结果，集成地磅数据自动采集，实现残损登记可视化。</p>
-                                    </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="feature-panel-7" class="feature-highlight-panel" role="tabpanel">
+                        <div class="feature-highlight-detail">
+                            <div class="feature-highlight-copy">
+                                <h2>查验作业全流程可视：跨部门协同提速</h2>
+                                <p>图形化展示机查/人查队列与作业区状态，并通过EDI同步查验指令和结果，提升查验过程的透明与协作效率。</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/jizhuangxiang/chayanzuoyequanliuchengkeshihua.png" alt="查验作业全流程可视图示">
                                 </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -221,11 +251,12 @@
         </section>
 
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/port/cdi2.webp" class="img-responsive center-block" />
                     </div>
                 </div>
@@ -235,45 +266,50 @@
         <section >
             <div class="container">
                 <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
+                    <div class="product-advantages-header">
                         <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
+                            <h1 class="product-advantages-title">产品优势</h1>
+                            <p>我们不止于功能领先，更在于价值落地</p>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col col-xs-12">
                          <div class="service-grids services-slider clearfix">
-                                 <div class="feature-card feature-card-advantage">
+                                 <div class="feature-card">
                                      <div class="feature-card-icon">
+                                         <img src="assets/images/project/common/资源_2.svg" alt="流程标准化与无纸化">
+                                     </div>
+                                     <div class="feature-card-body">
                                          <h4>流程标准化与无纸化</h4>
-                                     </div>
-                                     <div class="feature-card-body">
-                                         <p>通过系统固化港口业务管理流程，强化操作规范性，取消部分内部纸质单证，实现全流程无纸化运作，显著提升作业效率与合规性。</p>
+                                         <p>通过系统固化作业规则和关键节点，推动内部单证电子化流转，形成可执行、可追溯的标准化生产流程。</p>
                                      </div>
                                  </div>
-                                 <div class="feature-card feature-card-advantage">
+                                 <div class="feature-card">
                                      <div class="feature-card-icon">
+                                         <img src="assets/images/project/common/资源_9.svg" alt="自动化驱动实时决策">
+                                     </div>
+                                     <div class="feature-card-body">
                                          <h4>自动化驱动实时决策</h4>
-                                     </div>
-                                     <div class="feature-card-body">
-                                         <p>地磅自动称重、闸口智能识别、手机理货数据同步、车载终端实时回传等技术实现关键业务自动化，数据采集时效性提升，赋能高效监管与动态决策。</p>
+                                         <p>围绕地磅、闸口、移动终端与车载设备实现关键数据自动采集，显著提升监管时效与现场决策响应速度。</p>
                                      </div>
                                  </div>
-                                 <div class="feature-card feature-card-advantage">
+                                 <div class="feature-card">
                                      <div class="feature-card-icon">
+                                         <img src="assets/images/project/common/编组-2-copy-5.svg" alt="全要素可视化管控">
+                                     </div>
+                                     <div class="feature-card-body">
                                          <h4>全要素可视化管控</h4>
-                                     </div>
-                                     <div class="feature-card-body">
-                                         <p>图形化界面直观展示货物状态、作业计划及执行进度，实现计划、货物、作业等核心信息的可视化管理，提升运营透明度。</p>
+                                         <p>图形化汇总展示计划、货物、设备与执行进度，让管理层和调度层基于统一视图进行协同与管控。</p>
                                      </div>
                                  </div>
-                                 <div class="feature-card feature-card-advantage">
+                                 <div class="feature-card">
                                      <div class="feature-card-icon">
-                                         <h4>全域运行实时监控</h4>
+                                         <img src="assets/images/project/common/资源_10.svg" alt="全域运行实时监控">
                                      </div>
                                      <div class="feature-card-body">
-                                         <p>对港口船舶动态、货物位置、机械状态、车辆轨迹进行在线监控，即时发现运营异常，加速问题响应，提升货物流转效率。</p>
+                                         <h4>全域运行实时监控</h4>
+                                         <p>对船舶动态、货物位置、机械状态和车辆轨迹进行实时监控，快速识别异常并推动闭环处置，保障码头连续高效运行。</p>
                                      </div>
                                  </div>
                          </div>
@@ -306,31 +342,19 @@
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_shipping.html b/product_shipping.html
index fe1680a..370fca5 100644
--- a/product_shipping.html
+++ b/product_shipping.html
@@ -58,8 +58,8 @@
             <div class="container">
                 <div class="row">
                     <div class="col col-xs-12">
-                        <h2>成就非凡行业新发展</h2>
-                        <p>通过核心软件产品推动港航业的发展与变革，为企业创造赢利点，提升中国物流运行效率</p>
+                         <h2>智慧产品矩阵</h2>
+                        <p>通覆盖全角色，贯穿全流程</p>
                     </div>
                 </div> <!-- end row -->
             </div> <!-- end container -->
@@ -78,7 +78,7 @@
                                     <li><a href="product_Logistics.html">全程物流链系列产品</a></li>
                                     <li><a href="product_eCommerce.html">港航电商平台系列产品</a></li>
                                     <li><a href="product_port.html">云码头系列产品</a></li>
-                                    <li class="current"><a href="product_shipping.html">航运数字化产品</a></li>
+                                    <li class="current"><a href="product_shipping.html">航运数字系列产品</a></li>
                                 </ul>
                             </div>
                         </div>
diff --git a/product_shipping_boat.html b/product_shipping_boat.html
index 86eed60..c181e6e 100644
--- a/product_shipping_boat.html
+++ b/product_shipping_boat.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,16 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基船舶管理系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                船舶管理系统是根据船公司的经营和运营管理特点，定制化开发符合船公司适用的船舶综合管理系统。实现经营管理和运营管理一体化、体系和经营一体化、业务财务一体化，提升各部门间的数据共享和协同能力。<br><br>
-                                
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基全程物流链平台-船舶管理系统</h2>
+                            <p class="product-hero-description">
+                                船舶管理系统根据船公司经营与运营管理特点定制，覆盖经营管理、运营管理与体系管理场景。系统实现业务与财务一体化、跨部门数据共享与协同处理，重点支撑航次测算、审批流、结算流以及海务、机务、船员、调度等核心作业。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -141,77 +92,41 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
-                        </div>
-                    </div>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕经营、运营、财务与体系管理构建船舶管理一体化平台</p>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="智能堆场优化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>费用报销系统：统一管控降本增效</h4>
-                                         <p>金蝶费用报销系统停止使用，全部费用报销在本系统统一管理。显著提升企业管理水平，直接节约运营成本。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="全自动堆场计划">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>工作流系统：标准化流程赋能集团管控</h4>
-                                         <p>飞书等流程审批系统停止使用，所有审核在本系统统一处理。实现集团对各板块业务流程的标准化、集约化管理。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="智能船舶配载">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>BI系统：数据可视化驱动决策</h4>
-                                         <p>集成现有BI工具，提供大数据可视化统计。深度整合各部门业务数据，支撑集团级数据分析与战略制定。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="堆场全景可视化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>EAS财务系统：业财无缝协同</h4>
-                                         <p>通过中间库对接金蝶EAS财务系统，自动同步费用、发票、收付款数据至财务中间库，确保财务凭证高效生成。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="多路作业智能均衡">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>消息任务管理系统：实时预警提效避险</h4>
-                                         <p>整合消息、任务等信息流，实时提醒待办任务、审批及预警。有效减少船舶/船员证书过期风险，提升用户工作效率。</p>
-                                    </div>
-                                </div>
-
-
-                        </div>
-                    </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation"><button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">统一报销管理</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">统一流程审批</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">业财数据对接</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">船员薪资计算</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">证书到期预警</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">体系文件无纸化</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-7" data-target="#feature-panel-7">BI数据可视</button></li>
+                </ul>
+                <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-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>
+                    <div id="feature-panel-7" class="feature-highlight-panel" role="tabpanel"><div class="feature-highlight-detail"><div class="feature-highlight-copy"><h2>BI数据可视：决策有数</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/bikanban.png" alt="BI数据可视"></div></div></div></div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/shipping/boat.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -219,64 +134,26 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
-                        <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
-                        </div>
-                    </div>
-                </div>
+                <div class="row"><div class="product-advantages-header"><div><h1 class="product-advantages-title">产品优势</h1><p>我们不止于功能领先，更在于价值落地</p></div></div></div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>一体化协同平台，重塑运营流程</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>依托智能化工作流引擎，我们将业务、调度、海机务、船员、财务及体系管理等所有环节无缝集成于统一平台。它打破了部门壁垒，实现了跨岗位、全流程的线上协同与规范流转，确保从任务下发、多部门配合评估到最终闭环，全程高效有序，驱动整体运营效率质的飞跃。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>复杂业务计算自动化，解放人力杜绝误差</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>系统内置的强大计算引擎，深度应用于船员薪资、利润预测、物料备件及燃油采购等复杂业务场景。它自动完成繁琐核算，结果直接对接财务系统，彻底告别人工手算与重复录入。这不仅大幅提升工作效率，更从根本上避免了人为错误，保障了数据的绝对准确与财务合规。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>体系文件全流程无纸化，提效合规双赢</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>实现从生成、审批到归档的全链路无纸化管理。系统可直接套用公司模板生成文件，自动附载审批意见与电子签名，支持一键导出打印。所有文件电子化集中存储，便于随时检索调阅，既显著提升了日常办公效率，也为审计与体系认证提供了坚实的合规保障。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>数据资产化与智能可视化，驱动科学决策</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>系统构建了覆盖船员、客户、船舶的中央数据库，持续沉淀企业独有的数据资产。基于此，我们提供多维度、可定制的数据分析功能，关键指标与业务洞察通过直观的图表动态呈现。管理层可实时、全面掌控运营状况，让每一步战略决策都有据可依，精准有力。</p>
-                                    </div>
-                                 </div>
-                                 <div class="feature-card feature-card-advantage">
-                                     <div class="feature-card-icon">
-                                         <h4>智能预警与任务推动，实现主动式管理</h4>
-                                     </div>
-                                     <div class="feature-card-body">
-                                         <p>系统具备主动监控与消息驱动能力。对证书、合同等关键节点进行自动跟踪，并及时发出预警。同时，流程中产生的所有待办任务都会实时推送至负责人，确保事项无遗漏、进度可视化。变被动等待为主动推动，极大提升了流程执行的实时性与管理便捷性。</p>
-                                     </div>
-                                 </div>
-                         </div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="统一报销管理"></div><div class="feature-card-body"><h4>统一报销管理</h4><p>集中处理费用报销流程，降低系统分散导致的维护成本与管理复杂度。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="统一流程审批"></div><div class="feature-card-body"><h4>统一流程审批</h4><p>审批全流程回归业务系统，集团标准一致，进度透明，审计可追溯。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_3.svg" alt="业财自动对接"></div><div class="feature-card-body"><h4>业财自动对接</h4><p>业务数据自动联动财务系统，减少重复录入，缩短对账与结账周期。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_9.svg" alt="复杂计算自动化"></div><div class="feature-card-body"><h4>复杂计算自动化</h4><p>内置计算引擎处理薪资与经营测算，降低人工核算误差并提升效率。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="智能预警主动推送"></div><div class="feature-card-body"><h4>智能预警主动推送</h4><p>证书、合同等关键节点自动预警并推送责任人，减少风险与事项漏办。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="体系文件无纸化"></div><div class="feature-card-body"><h4>体系文件无纸化</h4><p>文件生成、审批、归档全线上化，提升审计效率与体系管理合规性。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_3.svg" alt="BI数据可视"></div><div class="feature-card-body"><h4>BI数据可视</h4><p>多维图表集中呈现经营指标，支持管理层实时掌握运营状态并快速决策。</p></div></div>
+                        </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -297,35 +174,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/product_shipping_company.html b/product_shipping_company.html
index 6aebb24..1288dd0 100644
--- a/product_shipping_company.html
+++ b/product_shipping_company.html
@@ -29,59 +29,10 @@
     <!--<link href="assets/css/style 2.css" rel="stylesheet">-->
     <link href="assets/css/style.css" rel="stylesheet">
     <link href="assets/css/pro.css" rel="stylesheet">
+    <link href="assets/css/product.css" rel="stylesheet">
 
     <!-- Custom styles for cargo platform page title -->
-    <style>
-        /* 产品页面双列布局样式 */
-        .cargo-platform-content {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cargo-info-left {
-            width: 580px;
-            flex: 0 0 580px;
-            padding-right: 30px;
-            box-sizing: border-box;
-            text-align: left;
-        }
-
-        .cargo-info-left h2,
-        .cargo-info-left p {
-            text-align: left;
-        }
-
-        .cargo-info-right {
-            flex: 1;
-            min-width: 0;
-            box-sizing: border-box;
-        }
-
-        /* 响应式设计 - 移动端调整为垂直布局 */
-        @media (max-width: 768px) {
-            .cargo-platform-content {
-                flex-direction: column;
-            }
-
-            .cargo-info-left {
-                width: 100%;
-                flex: 1;
-                padding-right: 0;
-                margin-bottom: 20px;
-            }
-
-            .cargo-info-right {
-                width: 100%;
-            }
-        }
-
-        /* Swiper轮播居中父容器 */
-        .main2 {
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-    </style>
+    
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -113,15 +64,16 @@
 
         <!-- start page-title -->
         <section class="page-title page-title-cargo-platform">
-            <div class="container" style="padding-top:0px">
+            <div class="container product-hero-container">
                 <div class="row">
                     <div class="cargo-platform-content col col-xs-12 col-md-12">
-                        <div class="cargo-info-left">
-                            <h2 id="cargoTitle" style="margin-bottom: 20px;color:black;">岸基船公司运营管理系统</h2>
-                            <p style="font-size: 16px; line-height: 1.8;color:black;">
-                                岸基船公司运营管理系统以“1+3+N”架构为核心，打造航运数字化协同引擎，驱动全链路降本增效。核心功能：业务智能操作、船舶动态管理、EDI无缝交换、决策数据看板，赋能航运全流程一站式解决方案。
+                                                <div class="cargo-info-left">
+                            <h2 id="cargoTitle" class="product-hero-title">岸基全程物流链平台-船公司运营管理系统</h2>
+                            <p class="product-hero-description">
+                                船公司运营管理系统以“1+3+N”架构为核心，打通业务操作、船舶管理、财务结算三大环节，实现全链路数据协同。系统提供业务智能操作、船舶动态管理、EDI无缝交换、决策数据看板等能力，帮助船公司降低人工投入、提升船舶利用率并加快结算周期。
                             </p>
                         </div>
+
                         <div class="cargo-info-right"></div>
                     </div>
                 </div> <!-- end row -->
@@ -140,77 +92,39 @@
             </div>
         </div>
 
-        <section class="section-padding">
+                <section class="feature-highlight-section fun-fact-section">
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;">
-                        <div>
-                            <h1 style="margin-bottom: 30px;">产品功能亮点</h1>
-                        </div>
-                    </div>
+                <div class="feature-highlight-heading">
+                    <h1>产品核心功能与价值</h1>
+                    <p>围绕船公司核心经营链路，构建智能化、可视化、全球化的运营能力</p>
                 </div>
-                <div class="row">
-                    <div class="col col-xs-12">
-                        <div class="service-grids services-slider clearfix">
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="智能堆场优化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>弹性架构支撑业务洪峰</h4>
-                                         <p>分布式PaaS平台+多端适配，容器水平扩容保障高并发稳定性，热部署实现升级零感知。系统可用性99.9%，旺季订舱响应提速40%，业务增长无缝承载。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_5.svg" alt="全自动堆场计划">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>全域EDI智能通关</h4>
-                                         <p>300+口岸节点自动对接，支持海关/海事/码头多协议报文流转。消除人工录入误差（误差率≤0.1%），口岸协同效率提升60%，货物滞留风险归零。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_3.svg" alt="智能船舶配载">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>业财船一体化协同中枢</h4>
-                                         <p>“1+3+N”架构打通经营/船管/财务链路，实时联动预算、结算与船舶动态。成本核算周期缩短50%，船舶利用率提升15%-20%，决策效率提升30%。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/资源_9.svg" alt="堆场全景可视化">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>AI+IoT智能引擎</h4>
-                                         <p>OCR单证识别+AIS船舶秒级定位+超期费自动核算。单证处理效率提升70%，货物跟踪精度达秒级，服务响应≤10分钟。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card">
-                                    <div class="feature-card-icon">
-                                        <img src="assets/images/project/common/编组-14.svg" alt="多路作业智能均衡">
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <h4>全球合规智能适配</h4>
-                                         <p>多语言/多币种自动换算+AMS舱单等国际法规预置。海外代理操作提效50%，跨境结算周期缩短1周，外贸拓展成本降低25%。</p>
-                                    </div>
-                                </div>
-
-
-                        </div>
-                    </div>
+                <ul class="feature-highlight-tabs" role="tablist">
+                    <li role="presentation"><button class="feature-highlight-tab active" type="button" role="tab" aria-selected="true" aria-controls="feature-panel-1" data-target="#feature-panel-1">业务智能操作</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-2" data-target="#feature-panel-2">船舶动态管理</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-3" data-target="#feature-panel-3">EDI无缝交换</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-4" data-target="#feature-panel-4">业财数据联动</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-5" data-target="#feature-panel-5">决策数据看板</button></li>
+                    <li role="presentation"><button class="feature-highlight-tab" type="button" role="tab" aria-selected="false" aria-controls="feature-panel-6" data-target="#feature-panel-6">全球合规适配</button></li>
+                </ul>
+                <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>通过 OCR 识别、自动计费与待办推送，优化传统手工业务处理模式。</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/yewuzhinengcaozuo.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>接入 AIS 数据，实时展示船舶位置、航速与 ETA，强化调度与异常响应能力。</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/chuanbodongtaiguanli.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>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>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- 产品架构图区域 - 全宽背景 -->
-        <section style="background: linear-gradient(135deg, #d2e5fa 0%, #f0f7ff 30%, #f5f9ff 70%, #d2e7fd 100%)">
-            <div class="container" style="padding:40px;">
+        <section class="product-architecture-section--gradient">
+            <div class="container product-architecture-container">
                 <div class="row">
                     <div class="col col-xs-12 text-center">
-                        <h1 style="margin:40px 0 30px 0;">产品架构</h1>
+                        <h1 class="product-architecture-title">产品架构</h1>
+                        <p>从底层到应用，构建全链路协同骨架</p>
                         <img src="assets/images/project/shipping/company.webp"
                             class="img-responsive center-block" />
                     </div>
@@ -218,52 +132,24 @@
             </div>
         </section>
 
-        <section >
+                <section >
             <div class="container">
-                <div class="row">
-                    <div style="text-align: center;padding-top: 60px;">
-                        <div>
-                            <h1 style="margin-bottom: 10px;">产品优势</h1>
-                        </div>
-                    </div>
-                </div>
+                <div class="row"><div class="product-advantages-header"><div><h1 class="product-advantages-title">产品优势</h1><p>我们不止于功能领先，更在于价值落地</p></div></div></div>
                 <div class="row">
                     <div class="col col-xs-12">
                         <div class="service-grids services-slider clearfix">
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>全场景弹性架构 + 智能EDI中枢</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>技术壁垒：分布式PaaS平台百万人次并发0宕机，热部署升级无感知；智能EDI支持300+口岸节点8种协议自动对接，秒级报文解析。</p>
-                                          <p>行业覆盖：已承载合德航运60+船舶（8.7万TEU）全业务运营，旺季订舱响应40ms，系统可用性99.9%；海关/海事数据流转误差率≤0.1%，口岸协同提效60%。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>业财船一体化中台</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>技术壁垒：“1+3+N”架构实时打通经营/船舶/财务数据链；BI引擎实现成本核算、船舶调度的毫秒级联动。</p>
-                                          <p>行业覆盖：为天津中运提升船舶利用率18%，成本核算周期缩短50%；修箱费、超期费自动核算，财务对账提效40%。</p>
-                                    </div>
-                                </div>
-                                <div class="feature-card feature-card-advantage">
-                                    <div class="feature-card-icon">
-                                         <h4>AIoT智能引擎 + 全球合规适配</h4>
-                                    </div>
-                                    <div class="feature-card-body">
-                                         <p>技术壁垒：OCR+AIS+智能算法实现单证70%提效、货物秒级追踪；多币种/多法规预置，支持IMO碳规则等20+国合规要求。</p>
-                                          <p>行业覆盖：嘉华航运中东航线单证处理耗时降80%，美西航线燃油成本降12%；跨境结算周期从7天缩至3天，外贸拓客成本降25%。</p>
-                                    </div>
-                                </div>
-
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-14.svg" alt="弹性架构支撑"></div><div class="feature-card-body"><h4>弹性架构支撑</h4><p>分布式 PaaS 与容器扩容能力支撑业务峰值，升级过程对运营影响更小。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_5.svg" alt="EDI智能通关"></div><div class="feature-card-body"><h4>EDI智能通关</h4><p>多口岸、多协议报文自动处理，减少手工录入误差并提升口岸协同效率。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_3.svg" alt="业财船一体化"></div><div class="feature-card-body"><h4>业财船一体化</h4><p>经营、船舶、财务链路打通，成本核算和船舶利用分析更及时、更准确。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/资源_9.svg" alt="AI+IoT智能化"></div><div class="feature-card-body"><h4>AI+IoT智能化</h4><p>OCR、AIS 与自动核算协同，提升单证处理效率与船货跟踪精度。</p></div></div>
+                            <div class="feature-card"><div class="feature-card-icon"><img src="assets/images/project/common/编组-2-copy-5.svg" alt="全球合规适配"></div><div class="feature-card-body"><h4>全球合规适配</h4><p>多语言、多币种与国际规则预置，降低海外业务落地与跨境结算复杂度。</p></div></div>
                         </div>
                     </div>
                 </div>
-            </div> <!-- end container -->
+            </div>
         </section>
 
+
         <!-- start site-footer -->
         <!-- start site-footer -->
         <div id="footer"></div>
@@ -284,35 +170,24 @@
     <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
 
-    <script type="text/javascript">
+        <script type="text/javascript">
         $("#footer").load("footer.html");
         $("#header").load("header.html");
 
-        // 初始化功能卡片轮播 - 使用 Owl Carousel
         $(document).ready(function() {
-            $(".feature-cards-slider").owlCarousel({
-                loop: true,
-                margin: 25,
-                smartSpeed: 500,
-                autoplay: true,
-                autoplayTimeout: 5000,
-                autoplayHoverPause: true,
-                dots: false,
-                nav: false,
-                responsive: {
-                    0: {
-                        items: 1
-                    },
-                    768: {
-                        items: 2
-                    },
-                    992: {
-                        items: 3
-                    }
-                }
+            $(".feature-highlight-tab").on("click", function() {
+                var $tab = $(this);
+                var target = $tab.data("target");
+
+                $(".feature-highlight-tab").removeClass("active").attr("aria-selected", "false");
+                $(".feature-highlight-panel").removeClass("active");
+
+                $tab.addClass("active").attr("aria-selected", "true");
+                $(target).addClass("active");
             });
         });
     </script>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/solution_inland_river_shipping.html b/solution_inland_river_shipping.html
index f2a4357..5e246ab 100644
--- a/solution_inland_river_shipping.html
+++ b/solution_inland_river_shipping.html
@@ -47,7 +47,7 @@
             align-items: center;
             padding-top: 110px; /* header高度80px + 最小间距30px */
             overflow: hidden;
-            background:linear-gradient(135deg, #0422a8 0%, #0c4ab3 50%, #001a4d 100%);
+            background: url("assets/images/solution/neihe.png");
         }
 
         .solution-hero::before {
@@ -89,21 +89,21 @@
             gap: 8px;
             padding: 6px 16px;
             border-radius: 50px;
-            background: rgba(0, 100, 255, 0.1);
-            border: 1px solid rgba(0, 100, 255, 0.2);
-            color: rgba(0, 150, 255, 1);
+            background: #0066ff;
+    
+            color: rgb(255, 255, 255);
             font-size: 12px;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 1px;
-            margin-bottom: 24px;
+            margin-top: 24px;
         }
 
         .hero-badge .pulse-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: rgba(0, 150, 255, 1);
+            background: rgb(255, 255, 255);
             animation: pulse 2s ease-in-out infinite;
         }
 
@@ -129,7 +129,7 @@
 
         .hero-desc {
             font-size: 18px;
-            color: #cbd5e1;
+            color: #eef6ff;
             line-height: 1.8;
             max-width: 520px;
             margin-bottom: 32px;
@@ -187,7 +187,7 @@
         }
 
         .stats-card-container {
-            backdrop-filter: blur(12px);
+            
             padding: 24px 24px 48px 24px;
         }
 
@@ -202,7 +202,7 @@
             background: rgba(0, 50, 128, 0.5);
             padding: 30px;
             border-radius: 12px;
-            border: 1px solid rgba(0, 100, 255, 0.3);
+            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
             height: 130px;
             display: flex;
             flex-direction: column;
@@ -312,6 +312,7 @@
         .pain-point-card {
             height: 100%;
             padding: 32px;
+            text-align: center;
             background: #f8fafc;
             border-radius: 16px;
             border: 1px solid #e2e8f0;
@@ -345,8 +346,8 @@
             font-size: 28px;
         }
 
-        .pain-point-icon.red i { color: #ef4444; }
-        .pain-point-icon.orange i { color: #f97316; }
+        .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; }
 
@@ -375,7 +376,7 @@
         /* Solution Architecture Section */
         .architecture-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
             color: #fff;
             overflow: hidden;
         }
@@ -400,8 +401,8 @@
 
         .arch-step-number {
             flex-shrink: 0;
-            width: 48px;
-            height: 48px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -411,32 +412,32 @@
         }
 
         .arch-step-number.blue {
-            background: rgba(0, 100, 255, 0.2);
+            background: rgba(177, 208, 255, 0.2);
             border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgba(0, 150, 255, 1);
+            color: rgb(255, 255, 255);
         }
 
         .arch-step-number.cyan {
-            background: rgba(0, 150, 255, 0.2);
-            border: 1px solid rgba(0, 150, 255, 0.3);
-            color: rgba(0, 180, 255, 1);
+            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(50, 100, 255, 0.2);
-            border: 1px solid rgba(50, 100, 255, 0.3);
-            color: rgba(100, 150, 255, 1);
+            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: 20px;
+            font-size: 18px;
             font-weight: 600;
             margin-bottom: 8px;
         }
 
-        .arch-step-content h4.blue { color: rgba(150, 200, 255, 1); }
-        .arch-step-content h4.cyan { color: rgba(100, 200, 255, 1); }
-        .arch-step-content h4.indigo { color: rgba(150, 180, 255, 1); }
+        .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;
@@ -527,10 +528,10 @@
             position: relative;
             width: 100%;
             max-width: 700px;
-            margin: 0 auto;
+            margin: 20px auto;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 16px;
-            padding: 20px;
+            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);
@@ -725,8 +726,7 @@
         }
 
         .product-card-footer {
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
+    
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -768,7 +768,7 @@
 
         /* Value Section */
         .value-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: #fff;
         }
 
@@ -860,7 +860,7 @@
         /* Advantages Section */
         .advantages-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+             background: url("assets/images/solution/bg.png");
             color: #fff;
             position: relative;
             overflow: hidden;
@@ -888,8 +888,7 @@
             right: 0;
             width: 50%;
             height: 100%;
-            background: rgba(0, 50, 128, 0.5);
-            transform: skewX(-12deg) translateX(25%);
+    
         }
 
         .advantage-item {
@@ -930,7 +929,7 @@
         }
 
         .stat-box {
-            background: rgba(0, 40, 100, 0.8);
+            background: rgba(0, 40, 100, 0.5);
             padding: 28px;
             border-radius: 16px;
             text-align: center;
@@ -949,7 +948,7 @@
         .stat-box .stat-number {
             font-size: 36px;
             font-weight: 700;
-            color: rgba(0, 150, 255, 1);
+            color: rgb(255, 255, 255);
             margin-bottom: 8px;
         }
 
@@ -1122,18 +1121,17 @@
                         <div class="reveal">
                             <div class="hero-badge">
                                 <span class="pulse-dot"></span>
-                                专注港航信息化20年
+                              内河港航集团
                             </div>
                             <h1 class="hero-title">
-                                内河港航<br>
-                                <span class="gradient-text">一体化解决方案</span>
+                                内河港航一体化解决方案
                             </h1>
                             <p class="hero-desc">
-                                打破信息孤岛，实现"商流、物流、资金流、信息流"四流合一。助力内河港口从传统装卸向综合物流运营商转型。
+                                贯通港口、物流、贸易全链路，以“1+3+N”架构驱动内河港航一体化协同，助您从“装卸港”迈向“贸易港”。
                             </p>
                         </div>
                     </div>
-                    <div class="col-md-6 hero-stats hidden-sm hidden-xs">
+            
                         <div class="reveal" style="transition-delay: 200ms;">
                             <div class="stats-card-container">
                                 <div class="stats-grid">
@@ -1173,7 +1171,7 @@
             <div class="container">
                 <div class="section-header reveal">
                     <h2>直击行业四大核心痛点</h2>
-                    <p>聚焦内河港航集团在转型升级中面临的共性瓶颈，为您提供精准对策。</p>
+                    <p>行业困境亟待破局，数智升级势在必行</p>
                 </div>
 
                 <div class="row">
@@ -1267,7 +1265,7 @@
                 <div class="section-header-flex reveal">
                     <div class="section-header-left">
                         <div class="section-label">Product Matrix</div>
-                        <h2>核心产品体系</h2>
+                        <h2>部分产品与服务</h2>
                         <p>从底层作业到顶层决策，全方位覆盖港航业务场景。</p>
                     </div>
                     <a href="product_eCommerce.html" class="view-all-link hidden-xs">
@@ -1279,19 +1277,19 @@
                     <div class="col-md-4">
                         <div class="product-card reveal">
                             <div class="product-card-bar blue"></div>
+
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">生产</span>
-                                    <span class="product-tag">调度</span>
-                                </div>
+                  
                                 <h3>岸基云码头智能操作系统</h3>
                                 <p>专为内河港口设计，支持"散货+集装箱+件杂货"一体化管理。涵盖计划、闸口、库场、计费全流程，灵活适应不同规模需求。</p>
+                                <a href="product_port_cdi.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1299,18 +1297,17 @@
                         <div class="product-card reveal" style="transition-delay: 100ms;">
                             <div class="product-card-bar cyan"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">网络货运</span>
-                                    <span class="product-tag">多式联运</span>
-                                </div>
-                                <h3>智慧物流协同平台</h3>
+                       
+                                <h3>岸基网络货运平台</h3>
                                 <p>连接货主、车队、船公司。实现车/船/货智能匹配、路径优化及全程可视化追踪，解决"货好找、运难调"难题。</p>
+                                <a href="product_ecommerce_net_cargo.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1318,61 +1315,24 @@
                         <div class="product-card reveal" style="transition-delay: 200ms;">
                             <div class="product-card-bar indigo"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">交易</span>
-                                    <span class="product-tag">金融</span>
-                                </div>
-                                <h3>大宗商品供应链交易平台</h3>
+                        
+                                <h3>岸基大宗商品贸易平台</h3>
                                 <p>提供挂牌交易、竞价拍卖模式，集成电子仓单融资等服务，助力港口从"装卸港"向"贸易港"转型。</p>
-                                <div class="product-card-footer">
+                               <a href="product_ecommerce_bctp.html" target="_parent">
+                                <div class="product-card-footer"  >
+                                   
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
+                                 
                                 </div>
+                            </a>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="product-card reveal" style="transition-delay: 300ms;">
-                            <div class="product-card-bar slate"></div>
-                            <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">IoT</span>
-                                    <span class="product-tag">自动化</span>
-                                </div>
-                                <h3>智能无人值守系统</h3>
-                                <p>集成智能闸口、无人地磅。通过车牌识别、RFID等技术，实现车辆进出港全流程无人化，杜绝作弊，提升效率。</p>
-                                <div class="product-card-footer">
-                                    <span>了解详情</span>
-                                    <div class="product-card-arrow">
-                                        <i class="ti-arrow-right"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="product-card reveal" style="transition-delay: 400ms;">
-                            <div class="product-card-bar green"></div>
-                            <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">BI</span>
-                                    <span class="product-tag">驾驶舱</span>
-                                </div>
-                                <h3>港航大数据分析决策中心</h3>
-                                <p>汇聚全域数据，构建领导驾驶舱。提供货类流向、客户价值分析及港航指数，辅助科学决策。</p>
-                                <div class="product-card-footer">
-                                    <span>了解详情</span>
-                                    <div class="product-card-arrow">
-                                        <i class="ti-arrow-right"></i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+
                 </div>
             </div>
         </section>
@@ -1546,7 +1506,9 @@
                             </div>
                             <div class="case-card-body">
                                 <p>实现集团内贸、港、物系统融合，解决"散改集"痛点。助力煤炭等大宗商品线上交易与全链条监管，打造千亿级物流集团。</p>
+                    
                             </div>
+                        
                         </div>
                     </div>
                     <div class="col-md-4">
diff --git a/solution_logistics_chain.html b/solution_logistics_chain.html
index b415ea9..02ce7a1 100644
--- a/solution_logistics_chain.html
+++ b/solution_logistics_chain.html
@@ -28,8 +28,14 @@
     <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);
+        }
+
         /* ========== Solution Page Styles ========== */
 
         /* Hero Section */
@@ -40,7 +46,7 @@
             align-items: center;
             padding-top: 110px; /* header高度80px + 最小间距30px */
             overflow: hidden;
-            background: linear-gradient(135deg, #0422a8 0%, #0c4ab3 50%, #001a4d 100%);
+            background: url("assets/images/solution/neihe.png");
         }
 
         .solution-hero::before {
@@ -50,7 +56,7 @@
             right: 0;
             width: 60%;
             height: 60%;
-            background: radial-gradient(circle, rgba(0, 150, 136, 0.15) 0%, transparent 70%);
+            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
             animation: blob 8s ease-in-out infinite;
         }
 
@@ -61,7 +67,7 @@
             left: 0;
             width: 60%;
             height: 60%;
-            background: radial-gradient(circle, rgba(0, 150, 136, 0.1) 0%, transparent 70%);
+            background: radial-gradient(circle, rgba(0, 100, 255, 0.1) 0%, transparent 70%);
             animation: blob 8s ease-in-out infinite 2s;
         }
 
@@ -82,21 +88,21 @@
             gap: 8px;
             padding: 6px 16px;
             border-radius: 50px;
-            background: rgba(0, 150, 136, 0.1);
-            border: 1px solid rgba(0, 150, 136, 0.2);
-            color: rgba(0, 150, 255, 1);
+            background: #0066ff;
+    
+            color: rgb(255, 255, 255);
             font-size: 12px;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 1px;
-            margin-bottom: 24px 0 0 0;
+            margin-top: 24px;
         }
 
         .hero-badge .pulse-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: rgba(0, 150, 255, 1);
+            background: rgb(255, 255, 255);
             animation: pulse 2s ease-in-out infinite;
         }
 
@@ -122,7 +128,7 @@
 
         .hero-desc {
             font-size: 18px;
-            color: #cbd5e1;
+            color: #eef6ff;
             line-height: 1.8;
             max-width: 520px;
             margin-bottom: 32px;
@@ -145,11 +151,11 @@
             font-weight: 500;
             text-decoration: none;
             transition: all 0.3s ease;
-            box-shadow: 0 10px 40px -10px rgba(0, 150, 136, 0.5);
+            box-shadow: 0 10px 40px -10px rgba(0, 100, 255, 0.5);
         }
 
         .btn-primary-custom:hover {
-            background: rgb(0, 57, 121);
+            background: rgba(0, 80, 200, 1);
             color: #fff;
             transform: translateY(-2px);
         }
@@ -180,7 +186,7 @@
         }
 
         .stats-card-container {
-            backdrop-filter: blur(12px);
+            
             padding: 24px 24px 48px 24px;
         }
 
@@ -195,7 +201,7 @@
             background: rgba(0, 50, 128, 0.5);
             padding: 30px;
             border-radius: 12px;
-            border: 1px solid rgba(0, 100, 255, 0.3);
+            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
             height: 130px;
             display: flex;
             flex-direction: column;
@@ -216,10 +222,10 @@
             display: block;
         }
 
-        .stat-item .stat-icon.teal { color: rgb(0, 127, 200); }
-        .stat-item .stat-icon.cyan { color: rgba(0, 188, 212, 1); }
-        .stat-item .stat-icon.green { color: rgb(76, 153, 175); }
-        .stat-item .stat-icon.amber { color: rgba(255, 193, 7, 1); }
+        .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;
@@ -305,6 +311,7 @@
         .pain-point-card {
             height: 100%;
             padding: 32px;
+            text-align: center;
             background: #f8fafc;
             border-radius: 16px;
             border: 1px solid #e2e8f0;
@@ -338,8 +345,8 @@
             font-size: 28px;
         }
 
-        .pain-point-icon.red i { color: #ef4444; }
-        .pain-point-icon.orange i { color: #f97316; }
+        .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; }
 
@@ -368,7 +375,7 @@
         /* Solution Architecture Section */
         .architecture-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
             color: #fff;
             overflow: hidden;
         }
@@ -393,8 +400,8 @@
 
         .arch-step-number {
             flex-shrink: 0;
-            width: 48px;
-            height: 48px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -403,33 +410,33 @@
             font-size: 14px;
         }
 
-        .arch-step-number.teal {
-            background: rgba(0, 150, 136, 0.2);
-            border: 1px solid rgba(0, 150, 136, 0.3);
-            color: rgb(0, 123, 200);
+        .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(0, 188, 212, 0.2);
-            border: 1px solid rgba(0, 188, 212, 0.3);
-            color: rgba(0, 220, 255, 1);
+            background: rgba(177, 208, 255, 0.2);
+            border: 1px solid rgba(0, 100, 255, 0.3);
+            color: rgb(255, 255, 255);
         }
 
-        .arch-step-number.green {
-            background: rgba(76, 175, 80, 0.2);
-            border: 1px solid rgba(76, 175, 80, 0.3);
-            color: rgba(129, 199, 132, 1);
+        .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: 20px;
+            font-size: 18px;
             font-weight: 600;
             margin-bottom: 8px;
         }
 
-        .arch-step-content h4.teal { color: rgba(128, 203, 196, 1); }
-        .arch-step-content h4.cyan { color: rgba(128, 222, 234, 1); }
-        .arch-step-content h4.green { color: rgba(165, 214, 167, 1); }
+        .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;
@@ -447,7 +454,7 @@
             content: '';
             position: absolute;
             inset: 0;
-            background: linear-gradient(135deg, rgba(0, 150, 136, 0.2), rgba(0, 188, 212, 0.1));
+            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;
@@ -484,10 +491,10 @@
             margin-bottom: 12px;
         }
 
-        .arch-grid-item i.teal { color: rgba(0, 200, 180, 1); }
-        .arch-grid-item i.cyan { color: rgba(0, 188, 212, 1); }
-        .arch-grid-item i.green { color: #4caf50; }
-        .arch-grid-item i.amber { color: #ffc107; }
+        .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;
@@ -506,13 +513,13 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 10px 40px rgba(0, 150, 136, 0.3);
+            box-shadow: 0 10px 40px rgba(0, 100, 255, 0.3);
             z-index: 10;
         }
 
         .arch-center-link i {
             font-size: 24px;
-            color: #00695c;
+            color: #003080;
         }
 
         /* Architecture Visual Image Container */
@@ -520,10 +527,10 @@
             position: relative;
             width: 100%;
             max-width: 700px;
-            margin: 0 auto;
+            margin: 20px auto;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 16px;
-            padding: 20px;
+            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);
@@ -536,7 +543,7 @@
             content: '';
             position: absolute;
             inset: -2px;
-            background: linear-gradient(135deg, rgba(0, 150, 136, 0.3), rgba(0, 188, 212, 0.2));
+            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;
@@ -557,7 +564,7 @@
         .arch-visual-container:hover {
             transform: translateY(-4px);
             transition: transform 0.3s ease;
-            border-color: rgba(0, 200, 180, 0.6);
+            border-color: rgba(0, 150, 255, 0.6);
         }
 
         /* Responsive adjustments for the image container */
@@ -631,7 +638,7 @@
         }
 
         .view-all-link:hover {
-            color: rgba(0, 121, 107, 1);
+            color: rgba(0, 80, 200, 1);
         }
 
         /* 让同一行的产品卡片高度一致 */
@@ -669,13 +676,11 @@
             width: 100%;
         }
 
-        .product-card-bar.teal { background: rgba(0, 150, 136, 1); }
-        .product-card-bar.cyan { background: rgba(0, 188, 212, 1); }
-        .product-card-bar.green { background: rgba(76, 175, 80, 1); }
-        .product-card-bar.amber { background: rgba(255, 193, 7, 1); }
-        .product-card-bar.indigo { background: rgba(63, 81, 181, 1); }
-        .product-card-bar.purple { background: rgba(156, 39, 176, 1); }
         .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;
@@ -720,8 +725,7 @@
         }
 
         .product-card-footer {
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
+    
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -763,7 +767,7 @@
 
         /* Value Section */
         .value-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: #fff;
         }
 
@@ -855,7 +859,7 @@
         /* Advantages Section */
         .advantages-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+             background: url("assets/images/solution/bg.png");
             color: #fff;
             position: relative;
             overflow: hidden;
@@ -883,8 +887,7 @@
             right: 0;
             width: 50%;
             height: 100%;
-            background: rgba(0, 77, 64, 0.5);
-            transform: skewX(-12deg) translateX(25%);
+    
         }
 
         .advantage-item {
@@ -900,7 +903,7 @@
 
         .advantage-check i {
             font-size: 24px;
-            color: rgba(0, 200, 180, 1);
+            color: rgba(0, 150, 255, 1);
         }
 
         .advantage-item h4 {
@@ -925,7 +928,7 @@
         }
 
         .stat-box {
-            background: rgba(0, 40, 100, 0.8);
+            background: rgba(0, 40, 100, 0.5);
             padding: 28px;
             border-radius: 16px;
             text-align: center;
@@ -944,7 +947,7 @@
         .stat-box .stat-number {
             font-size: 36px;
             font-weight: 700;
-            color: rgba(0, 200, 180, 1);
+            color: rgb(255, 255, 255);
             margin-bottom: 8px;
         }
 
@@ -959,16 +962,6 @@
             background: #f8fafc;
         }
 
-        .cases-section .row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .cases-section .row > [class*="col-"] {
-            display: flex;
-            margin-bottom: 24px;
-        }
-
         .case-card {
             background: #fff;
             border-radius: 16px;
@@ -988,20 +981,16 @@
             overflow: hidden;
         }
 
-        .case-card-header.teal {
-            background: linear-gradient(135deg, rgba(0, 105, 92, 1), rgba(0, 150, 136, 1));
+        .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, 131, 143, 1), rgba(0, 188, 212, 1));
-        }
-
-        .case-card-header.green {
-            background: linear-gradient(135deg, rgba(56, 142, 60, 1), rgba(76, 175, 80, 1));
+            background: linear-gradient(135deg, rgba(0, 80, 200, 1), rgba(0, 120, 255, 1));
         }
 
         .case-card-header.indigo {
-            background: linear-gradient(135deg, rgba(48, 63, 159, 1), rgba(63, 81, 181, 1));
+            background: linear-gradient(135deg, rgba(30, 60, 180, 1), rgba(50, 100, 255, 1));
         }
 
         .case-card-header::before {
@@ -1131,11 +1120,10 @@
                         <div class="reveal">
                             <div class="hero-badge">
                                 <span class="pulse-dot"></span>
-                                专注港航信息化20年
+                                大型物流集团
                             </div>
                             <h1 class="hero-title">
-                                全程物流链<br>
-                                <span class="gradient-text">一体化解决方案</span>
+                                全程物流链解决方案</span>
                             </h1>
                             <p class="hero-desc">
                                 覆盖订舱、报关、运输、仓储、交付全流程，打破信息孤岛，实现业务协同与智能决策，助力物流企业数字化转型升级。
@@ -1147,7 +1135,7 @@
                             <div class="stats-card-container">
                                 <div class="stats-grid">
                                     <div class="stat-item">
-                                        <i class="ti-layout-grid2 stat-icon teal"></i>
+                                        <i class="ti-layout-grid2 stat-icon blue"></i>
                                         <div class="stat-number">标准化</div>
                                         <div class="stat-label">统一架构与数据标准</div>
                                     </div>
@@ -1162,7 +1150,7 @@
                                         <div class="stat-label">AI大模型深度应用</div>
                                     </div>
                                     <div class="stat-item">
-                                        <i class="ti-eye stat-icon amber"></i>
+                                        <i class="ti-eye stat-icon indigo"></i>
                                         <div class="stat-number">可视化</div>
                                         <div class="stat-label">全链路实时监控</div>
                                     </div>
@@ -1182,7 +1170,7 @@
             <div class="container">
                 <div class="section-header reveal">
                     <h2>直击行业四大核心痛点</h2>
-                    <p>聚焦物流企业在数字化转型中面临的共性瓶颈，为您提供精准对策。</p>
+                    <p>行业困境亟待破局，数智升级势在必行</p>
                 </div>
 
                 <div class="row">
@@ -1191,8 +1179,8 @@
                             <div class="pain-point-icon red">
                                 <i class="ti-layout-list-post"></i>
                             </div>
-                            <h3>业务环节繁杂且系统分散</h3>
-                            <p>物流业务覆盖订舱、报关、运输、仓储、交付等多个环节，各环节对应独立系统且缺乏有效联动，数据需跨系统重复录入，易引发信息偏差。</p>
+                            <h3>环节繁杂，系统分散</h3>
+                            <p>物流业务覆盖订舱、报关、运输、仓储、交付等多个环节，缺乏有效联动，数据需跨系统重复录入，易引发信息偏差。</p>
                         </div>
                     </div>
                     <div class="col-md-3 col-sm-6">
@@ -1209,7 +1197,7 @@
                             <div class="pain-point-icon yellow">
                                 <i class="ti-location-pin"></i>
                             </div>
-                            <h3>网点布局分散且协同不足</h3>
+                            <h3>网点分散，协同不足</h3>
                             <p>公司网点数量多、地理分布广泛，各网点间信息传递依赖传统沟通方式，数据同步存在延迟，难以实现全网资源统筹规划。</p>
                         </div>
                     </div>
@@ -1218,7 +1206,7 @@
                             <div class="pain-point-icon purple">
                                 <i class="ti-bar-chart"></i>
                             </div>
-                            <h3>缺乏数据驱动分析能力</h3>
+                            <h3>缺乏数据驱动能力</h3>
                             <p>现有系统仅满足基础业务操作需求，未建立完善的数据整合与分析体系，无法对核心数据进行深度挖掘，决策缺乏数据支撑。</p>
                         </div>
                     </div>
@@ -1235,25 +1223,25 @@
                             <h2 style="font-size: 32px; font-weight: 700; margin-bottom: 40px; color: #fff;">全程物流链平台框架</h2>
 
                             <div class="arch-step">
-                                <div class="arch-step-number teal">01</div>
+                                <div class="arch-step-number blue">01</div>
                                 <div class="arch-step-content">
-                                    <h4 class="teal">统一业务门户</h4>
+                                    <h4 class="blue">统一业务门户</h4>
                                     <p>为船公司、船代、货代、报关、仓储等提供统一的业务线上营业厅，一站式处理全流程业务。</p>
                                 </div>
                             </div>
 
                             <div class="arch-step">
-                                <div class="arch-step-number cyan">02</div>
+                                <div class="arch-step-number  blue">02</div>
                                 <div class="arch-step-content">
-                                    <h4 class="cyan">全链条协同</h4>
+                                    <h4 class="blue">全链条协同</h4>
                                     <p>打通订舱、报关、运输、仓储、交付各环节，实现数据互通、业务联动，消除信息孤岛。</p>
                                 </div>
                             </div>
 
                             <div class="arch-step">
-                                <div class="arch-step-number green">03</div>
+                                <div class="arch-step-number  blue">03</div>
                                 <div class="arch-step-content">
-                                    <h4 class="green">智能分析决策</h4>
+                                    <h4 class="blue">智能分析决策</h4>
                                     <p>通过AI大模型与数据分析技术，对全链条数据进行深度挖掘，提供智能预测与决策支持。</p>
                                 </div>
                             </div>
@@ -1276,7 +1264,7 @@
                 <div class="section-header-flex reveal">
                     <div class="section-header-left">
                         <div class="section-label">Product Matrix</div>
-                        <h2>核心产品体系</h2>
+                        <h2>部分产品与服务</h2>
                         <p>从智能生产到供应链协同，全方位覆盖大型港航集团业务场景。</p>
                     </div>
                     <a href="product_eCommerce.html" class="view-all-link hidden-xs">
@@ -1289,18 +1277,17 @@
                         <div class="product-card reveal">
                             <div class="product-card-bar blue"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">船公司</span>
-                            
-                                </div>
+                          
                                 <h3>岸基船公司运营管理系统</h3>
                                 <p>业务智能操作、船舶动态管理、EDI无缝交换、决策数据看板，赋能航运全流程一站式解决方案。</p>
+                                <a href="product_shipping_company.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1308,18 +1295,17 @@
                         <div class="product-card reveal" style="transition-delay: 100ms;">
                             <div class="product-card-bar cyan"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">船公司</span>
-            
-                                </div>
+                         
                                 <h3>岸基船舶管理系统</h3>
                                 <p>根据船公司的经营和运营管理特点，定制化开发符合船公司适用的船舶综合管理系统。实现经营管理和运营管理一体化、体系和经营一体化、业务财务一体化，提升各部门间的数据共享和协同能力。</p>
+                                <a href="product_shipping_boat.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1327,18 +1313,17 @@
                         <div class="product-card reveal" style="transition-delay: 200ms;">
                             <div class="product-card-bar indigo"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">全程物流链</span>
-                     
-                                </div>
+                        
                                 <h3>岸基仓储管理系统</h3>
                                 <p>提供在线委托、预约、结算、运力撮合等服务。平台已完成对国产操作环境和浏览器的兼容性适配。</p>
+                                <a href="product_full_logistics_chain_warehouse.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1346,18 +1331,16 @@
                         <div class="product-card reveal">
                             <div class="product-card-bar blue"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">全程物流链</span>
-                        
-                                </div>
                                 <h3>岸基船舶代理系统</h3>
                                 <p>面向船代公司提供完整业务操作解决方案，通过“互联网+”服务模式满足企业内部操作需求。支持船务、单证、箱管、商务、财务等多部门协同，搭建智能高效业务平台，实现线上线下“一站式”服务。</p>
+                               <a href="product_full_logistics_chain_ship_agent.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1365,18 +1348,17 @@
                         <div class="product-card reveal" style="transition-delay: 100ms;">
                             <div class="product-card-bar cyan"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">全程物流链</span>
-                        
-                                </div>
+
                                 <h3>岸基货运代理系统</h3>
                                 <p>针对货代业务特点，运用先进计算机技术，提升业务单证的智能识别、费用智能对账等服务能力，实现业务的标准化、流程化、智能化操作，实现货物委托、提单确认、海关预配、EDI、费用结算、客户服务等业务的高效操作。</p>
+                               <a href="product_full_logistics_chain_cargo_agent.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1384,18 +1366,17 @@
                         <div class="product-card reveal" style="transition-delay: 200ms;">
                             <div class="product-card-bar indigo"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">全程物流链</span>
-                        
-                                </div>
+
                                 <h3>岸基车辆运输管理系统</h3>
                                 <p>专门用于优化和管理运输流程的解决方案，系统以业财一体化的管理理念，优化车辆调度，实现运输收入、成本的精细化管理。</p>
+                                <a href="product_full_logistics_chain_vehicle_transport.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
diff --git a/solution_port_supply_chain.html b/solution_port_supply_chain.html
index 3571ada..0dcd33e 100644
--- a/solution_port_supply_chain.html
+++ b/solution_port_supply_chain.html
@@ -28,8 +28,13 @@
     <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);
+        }
 
         /* ========== Solution Page Styles ========== */
 
@@ -41,7 +46,7 @@
             align-items: center;
             padding-top: 110px; /* header高度80px + 最小间距30px */
             overflow: hidden;
-            background: linear-gradient(135deg, #0422a8 0%, #0c4ab3 50%, #001a4d 100%);
+            background: url("assets/images/solution/neihe.png");
         }
 
         .solution-hero::before {
@@ -51,7 +56,7 @@
             right: 0;
             width: 60%;
             height: 60%;
-            background: radial-gradient(circle, rgba(0, 150, 136, 0.15) 0%, transparent 70%);
+            background: radial-gradient(circle, rgba(0, 100, 255, 0.15) 0%, transparent 70%);
             animation: blob 8s ease-in-out infinite;
         }
 
@@ -83,21 +88,21 @@
             gap: 8px;
             padding: 6px 16px;
             border-radius: 50px;
-            background: rgba(0, 100, 255, 0.1);
-            border: 1px solid rgba(0, 100, 255, 0.2);
-            color: rgba(0, 150, 255, 1);
+            background: #0066ff;
+    
+            color: rgb(255, 255, 255);
             font-size: 12px;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 1px;
-            margin-bottom: 24px;
+            margin-top: 24px;
         }
 
         .hero-badge .pulse-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: rgba(0, 150, 255, 1);
+            background: rgb(255, 255, 255);
             animation: pulse 2s ease-in-out infinite;
         }
 
@@ -123,7 +128,7 @@
 
         .hero-desc {
             font-size: 18px;
-            color: #cbd5e1;
+            color: #eef6ff;
             line-height: 1.8;
             max-width: 520px;
             margin-bottom: 32px;
@@ -181,7 +186,7 @@
         }
 
         .stats-card-container {
-            backdrop-filter: blur(12px);
+            
             padding: 24px 24px 48px 24px;
         }
 
@@ -196,7 +201,7 @@
             background: rgba(0, 50, 128, 0.5);
             padding: 30px;
             border-radius: 12px;
-            border: 1px solid rgba(0, 100, 255, 0.3);
+            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
             height: 130px;
             display: flex;
             flex-direction: column;
@@ -306,6 +311,7 @@
         .pain-point-card {
             height: 100%;
             padding: 32px;
+            text-align: center;
             background: #f8fafc;
             border-radius: 16px;
             border: 1px solid #e2e8f0;
@@ -339,8 +345,8 @@
             font-size: 28px;
         }
 
-        .pain-point-icon.red i { color: #ef4444; }
-        .pain-point-icon.orange i { color: #f97316; }
+        .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; }
 
@@ -369,7 +375,7 @@
         /* Solution Architecture Section */
         .architecture-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
             color: #fff;
             overflow: hidden;
         }
@@ -394,8 +400,8 @@
 
         .arch-step-number {
             flex-shrink: 0;
-            width: 48px;
-            height: 48px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -405,32 +411,32 @@
         }
 
         .arch-step-number.blue {
-            background: rgba(0, 100, 255, 0.2);
+            background: rgba(177, 208, 255, 0.2);
             border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgba(0, 150, 255, 1);
+            color: rgb(255, 255, 255);
         }
 
         .arch-step-number.cyan {
-            background: rgba(0, 150, 255, 0.2);
-            border: 1px solid rgba(0, 150, 255, 0.3);
-            color: rgba(0, 180, 255, 1);
+            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(50, 100, 255, 0.2);
-            border: 1px solid rgba(50, 100, 255, 0.3);
-            color: rgba(100, 150, 255, 1);
+            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: 20px;
+            font-size: 18px;
             font-weight: 600;
             margin-bottom: 8px;
         }
 
-        .arch-step-content h4.blue { color: rgba(150, 200, 255, 1); }
-        .arch-step-content h4.cyan { color: rgba(100, 200, 255, 1); }
-        .arch-step-content h4.indigo { color: rgba(150, 180, 255, 1); }
+        .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;
@@ -521,10 +527,10 @@
             position: relative;
             width: 100%;
             max-width: 700px;
-            margin: 0 auto;
+            margin: 20px auto;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 16px;
-            padding: 20px;
+            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);
@@ -719,8 +725,7 @@
         }
 
         .product-card-footer {
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
+    
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -762,7 +767,7 @@
 
         /* Value Section */
         .value-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: #fff;
         }
 
@@ -854,7 +859,7 @@
         /* Advantages Section */
         .advantages-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+             background: url("assets/images/solution/bg.png");
             color: #fff;
             position: relative;
             overflow: hidden;
@@ -882,8 +887,7 @@
             right: 0;
             width: 50%;
             height: 100%;
-            background: rgba(0, 50, 128, 0.5);
-            transform: skewX(-12deg) translateX(25%);
+    
         }
 
         .advantage-item {
@@ -924,7 +928,7 @@
         }
 
         .stat-box {
-            background: rgba(0, 40, 100, 0.8);
+            background: rgba(0, 40, 100, 0.5);
             padding: 28px;
             border-radius: 16px;
             text-align: center;
@@ -943,7 +947,7 @@
         .stat-box .stat-number {
             font-size: 36px;
             font-weight: 700;
-            color: rgba(0, 150, 255, 1);
+            color: rgb(255, 255, 255);
             margin-bottom: 8px;
         }
 
@@ -1116,11 +1120,10 @@
                         <div class="reveal">
                             <div class="hero-badge">
                                 <span class="pulse-dot"></span>
-                                专注港航信息化20年
+                                大型港航集团
                             </div>
                             <h1 class="hero-title">
-                                港口供应链<br>
-                                <span class="gradient-text">平台解决方案</span>
+                                港口供应链平台解决方案</span>
                             </h1>
                             <p class="hero-desc">
                                 围绕大型港航集团，实现"专业性、一体化、自主可控、AI赋能"的数字化转型。从"物流中心"向"服务中心"升级。
@@ -1167,7 +1170,7 @@
             <div class="container">
                 <div class="section-header reveal">
                     <h2>直击行业四大核心痛点</h2>
-                    <p>聚焦大型港航集团在数字化转型中面临的共性瓶颈，为您提供精准对策。</p>
+                    <p>行业困境亟待破局，数智升级势在必行</p>
                 </div>
 
                 <div class="row">
@@ -1261,7 +1264,7 @@
                 <div class="section-header-flex reveal">
                     <div class="section-header-left">
                         <div class="section-label">Product Matrix</div>
-                        <h2>核心产品体系</h2>
+                        <h2>部分产品与服务</h2>
                         <p>从智能生产到供应链协同，全方位覆盖大型港航集团业务场景。</p>
                     </div>
                     <a href="product_eCommerce.html" class="view-all-link hidden-xs">
@@ -1274,10 +1277,7 @@
                         <div class="product-card reveal">
                             <div class="product-card-bar blue"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">TOS</span>
-                                    <span class="product-tag">AI配载</span>
-                                </div>
+                       
                                 <h3>岸基云码头智能操作系统</h3>
                                 <p>兼容集装箱、散杂货、油品、滚装船全货种的生产调度。AI智能算法快速生成满足多目标约束的最优配载方案，可视化配载彻底摆脱人工经验依赖。</p>
                                 <div class="product-card-footer">
@@ -1293,10 +1293,7 @@
                         <div class="product-card reveal" style="transition-delay: 100ms;">
                             <div class="product-card-bar cyan"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">数据中台</span>
-                                    <span class="product-tag">信创</span>
-                                </div>
+                           
                                 <h3>集团级数据中台与信创统一接口平台</h3>
                                 <p>核心数据存储与计算采用国产分布式数据库。中台负责全域数据采集、治理和建模，提供标准化、信创兼容的API接口服务。</p>
                                 <div class="product-card-footer">
@@ -1312,18 +1309,17 @@
                         <div class="product-card reveal" style="transition-delay: 200ms;">
                             <div class="product-card-bar indigo"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">门户</span>
-                                    <span class="product-tag">运力撮合</span>
-                                </div>
-                                <h3>岸基网上业务大厅与供应链运力交易大厅</h3>
+                       
+                                <h3>岸基网上业务大厅平台 </h3>
                                 <p>提供在线委托、预约、结算、运力撮合等服务。平台已完成对国产操作环境和浏览器的兼容性适配。</p>
+                                <a href="product_ecommerce_obh.html" target="_parent">
                                 <div class="product-card-footer">
                                     <span>了解详情</span>
                                     <div class="product-card-arrow">
                                         <i class="ti-arrow-right"></i>
                                     </div>
                                 </div>
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -1388,7 +1384,7 @@
                             </div>
                             <div class="value-content">
                                 <h3>成本优化与风险降低</h3>
-                                <p>AI配载优化了堆场和船舱空间，减少了二次搬倒，降低了运营成本。智能安全系统和AI视频分析，有效降低高风险作业区的安全事故发生率。</p>
+                                <p>AI配载优化了堆场和船舱空间，减少了二次搬倒。智能安全系统和AI视频分析，有效降低高风险作业区的安全事故发生率。</p>
                             </div>
                         </div>
                     </div>
@@ -1493,7 +1489,7 @@
                                 <h3>唐山港京唐港区矿石码头</h3>
                             </div>
                             <div class="case-card-body">
-                                <p>针对25万吨级专业矿石码头打造的全流程数字化系统，涵盖智能卸船、堆取料机调度、铁路疏港、视频AI理货等功能，实现生产全流程线上闭环与精细化管控。</p>
+                                <p>针对25万吨级专业矿石码头打造的全流程数字化，涵盖智能卸船、堆取料机调度、视频AI理货等功能，实现生产全流程线上闭环管控。</p>
                             </div>
                         </div>
                     </div>
diff --git a/solution_supply_chain.html b/solution_supply_chain.html
index eac5468..ff6070d 100644
--- a/solution_supply_chain.html
+++ b/solution_supply_chain.html
@@ -28,7 +28,6 @@
     <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 {
@@ -47,7 +46,7 @@
             align-items: center;
             padding-top: 110px; /* header高度80px + 最小间距30px */
             overflow: hidden;
-            background: linear-gradient(135deg, #0422a8 0%, #0c4ab3 50%, #001a4d 100%);
+            background: url("assets/images/solution/neihe.png");
         }
 
         .solution-hero::before {
@@ -89,21 +88,21 @@
             gap: 8px;
             padding: 6px 16px;
             border-radius: 50px;
-            background: rgba(0, 100, 255, 0.1);
-            border: 1px solid rgba(0, 100, 255, 0.2);
-            color: rgba(0, 150, 255, 1);
+            background: #0066ff;
+    
+            color: rgb(255, 255, 255);
             font-size: 12px;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 1px;
-            margin-bottom: 24px 0 0 0;
+            margin-top: 24px;
         }
 
         .hero-badge .pulse-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: rgba(0, 150, 255, 1);
+            background: rgb(255, 255, 255);
             animation: pulse 2s ease-in-out infinite;
         }
 
@@ -129,7 +128,7 @@
 
         .hero-desc {
             font-size: 18px;
-            color: #cbd5e1;
+            color: #eef6ff;
             line-height: 1.8;
             max-width: 520px;
             margin-bottom: 32px;
@@ -187,7 +186,7 @@
         }
 
         .stats-card-container {
-            backdrop-filter: blur(12px);
+            
             padding: 24px 24px 48px 24px;
         }
 
@@ -202,7 +201,7 @@
             background: rgba(0, 50, 128, 0.5);
             padding: 30px;
             border-radius: 12px;
-            border: 1px solid rgba(0, 100, 255, 0.3);
+            box-shadow: -1px 3px 6px 0px rgb(8 75 159 / 33%);
             height: 130px;
             display: flex;
             flex-direction: column;
@@ -312,6 +311,7 @@
         .pain-point-card {
             height: 100%;
             padding: 32px;
+            text-align: center;
             background: #f8fafc;
             border-radius: 16px;
             border: 1px solid #e2e8f0;
@@ -345,8 +345,8 @@
             font-size: 28px;
         }
 
-        .pain-point-icon.red i { color: #ef4444; }
-        .pain-point-icon.orange i { color: #f97316; }
+        .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; }
 
@@ -375,7 +375,7 @@
         /* Solution Architecture Section */
         .architecture-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+            background: linear-gradient(135deg, #005dc7 0%, rgb(1, 79, 212) 100%);
             color: #fff;
             overflow: hidden;
         }
@@ -400,8 +400,8 @@
 
         .arch-step-number {
             flex-shrink: 0;
-            width: 48px;
-            height: 48px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -411,32 +411,32 @@
         }
 
         .arch-step-number.blue {
-            background: rgba(0, 100, 255, 0.2);
+            background: rgba(177, 208, 255, 0.2);
             border: 1px solid rgba(0, 100, 255, 0.3);
-            color: rgba(0, 150, 255, 1);
+            color: rgb(255, 255, 255);
         }
 
         .arch-step-number.cyan {
-            background: rgba(0, 150, 255, 0.2);
-            border: 1px solid rgba(0, 150, 255, 0.3);
-            color: rgba(0, 180, 255, 1);
+            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(50, 100, 255, 0.2);
-            border: 1px solid rgba(50, 100, 255, 0.3);
-            color: rgba(100, 150, 255, 1);
+            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: 20px;
+            font-size: 18px;
             font-weight: 600;
             margin-bottom: 8px;
         }
 
-        .arch-step-content h4.blue { color: rgba(150, 200, 255, 1); }
-        .arch-step-content h4.cyan { color: rgba(100, 200, 255, 1); }
-        .arch-step-content h4.indigo { color: rgba(150, 180, 255, 1); }
+        .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;
@@ -527,10 +527,10 @@
             position: relative;
             width: 100%;
             max-width: 700px;
-            margin: 0 auto;
+            margin: 20px auto;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 16px;
-            padding: 20px;
+            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);
@@ -725,8 +725,7 @@
         }
 
         .product-card-footer {
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
+    
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -768,7 +767,7 @@
 
         /* Value Section */
         .value-section {
-            padding: 100px 0;
+            padding: 70px 0;
             background: #fff;
         }
 
@@ -860,7 +859,7 @@
         /* Advantages Section */
         .advantages-section {
             padding: 100px 0;
-            background: linear-gradient(135deg, #001a4d 0%, #003080 100%);
+             background: url("assets/images/solution/bg.png");
             color: #fff;
             position: relative;
             overflow: hidden;
@@ -888,8 +887,7 @@
             right: 0;
             width: 50%;
             height: 100%;
-            background: rgba(0, 50, 128, 0.5);
-            transform: skewX(-12deg) translateX(25%);
+    
         }
 
         .advantage-item {
@@ -930,7 +928,7 @@
         }
 
         .stat-box {
-            background: rgba(0, 40, 100, 0.8);
+            background: rgba(0, 40, 100, 0.5);
             padding: 28px;
             border-radius: 16px;
             text-align: center;
@@ -949,7 +947,7 @@
         .stat-box .stat-number {
             font-size: 36px;
             font-weight: 700;
-            color: rgba(0, 150, 255, 1);
+            color: rgb(255, 255, 255);
             margin-bottom: 8px;
         }
 
@@ -1122,11 +1120,10 @@
                         <div class="reveal">
                             <div class="hero-badge">
                                 <span class="pulse-dot"></span>
-                                专注港航信息化20年
+                                贸易/物流/港口
                             </div>
                             <h1 class="hero-title">
-                                大宗货物<br>
-                                <span class="gradient-text">供应链解决方案</span>
+                                大宗货物供应链解决方案</span>
                             </h1>
                             <p class="hero-desc">
                                 纵向贯穿整个供应链，横向集成物流、商流、资金流、信息流。助力港口从"装卸商"向"单货种供应链服务商"转型。
@@ -1173,7 +1170,7 @@
             <div class="container">
                 <div class="section-header reveal">
                     <h2>直击行业四大核心痛点</h2>
-                    <p>聚焦大宗货物供应链在数字化转型中面临的共性瓶颈，为您提供精准对策。</p>
+                    <p>行业困境亟待破局，数智升级势在必行</p>
                 </div>
 
                 <div class="row">
@@ -1182,8 +1179,8 @@
                             <div class="pain-point-icon red">
                                 <i class="ti-package"></i>
                             </div>
-                            <h3>货种定制化管理深度不足</h3>
-                            <p>传统系统多为通用型，难以满足单一货种在堆存、计量、品质检测、混配等环节的特殊精细化管理需求。</p>
+                            <h3>货种难定制</h3>
+                            <p>通用系统无法满足煤炭、矿石、粮食等大宗货种的精细化管理需求，作业效率低、货损高。</p>
                         </div>
                     </div>
                     <div class="col-md-3 col-sm-6">
@@ -1191,8 +1188,8 @@
                             <div class="pain-point-icon orange">
                                 <i class="ti-unlink"></i>
                             </div>
-                            <h3>信息割裂，控链能力弱</h3>
-                            <p>供应链各环节信息互通障碍大，缺乏围绕该货种的统一物流、商流、资金流管理平台，集团控制能力不足。</p>
+                            <h3>信息难打通</h3>
+                            <p>生产、港口、运输、消费方数据割裂，集团对供应链控制力弱、话语权不足。</p>
                         </div>
                     </div>
                     <div class="col-md-3 col-sm-6">
@@ -1200,8 +1197,8 @@
                             <div class="pain-point-icon yellow">
                                 <i class="ti-exchange-vertical"></i>
                             </div>
-                            <h3>贸易与物流脱节，价值链短</h3>
-                            <p>港口仅作为物流节点，未能有效整合电子交易、仓储监管和金融服务，难以向全链条服务商转型。</p>
+                            <h3>贸易物流脱节</h3>
+                            <p>港口停留在物流节点角色，未能整合交易、仓储、金融，价值链短、盈利单一。</p>
                         </div>
                     </div>
                     <div class="col-md-3 col-sm-6">
@@ -1209,8 +1206,10 @@
                             <div class="pain-point-icon purple">
                                 <i class="ti-timer"></i>
                             </div>
-                            <h3>作业效率与安全成本高企</h3>
-                            <p>缺乏计划前置和实时数据采集，影响船舶装卸、铁路集疏运效率；传统人工安全检查和环保监管成本高昂。</p>
+                            <h3>作业成本高</h3>
+                            <p>计划滞后、数据缺失，装卸效率受限；人工监管、环保靠人，成本居高不下。
+
+</p>
                         </div>
                     </div>
                 </div>
@@ -1267,7 +1266,7 @@
                 <div class="section-header-flex reveal">
                     <div class="section-header-left">
                         <div class="section-label">Product Matrix</div>
-                        <h2>核心产品体系</h2>
+                        <h2>部分产品与服务</h2>
                         <p>从港口生产到供应链金融，全方位覆盖大宗货物供应链场景。</p>
                     </div>
                     <a href="product_eCommerce.html" class="view-all-link hidden-xs">
@@ -1280,10 +1279,7 @@
                         <div class="product-card reveal">
                             <div class="product-card-bar blue"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">生产</span>
-                                    <span class="product-tag">计量</span>
-                                </div>
+                         
                                 <h3>智慧港口生产管理系统</h3>
                                 <p>支持单货种的堆存区可视化管理，通过物联网中台统一对接地磅、皮带秤、闸口数据，实现计量无人化和数据防篡改。</p>
                                 <div class="product-card-footer">
@@ -1299,10 +1295,7 @@
                         <div class="product-card reveal" style="transition-delay: 100ms;">
                             <div class="product-card-bar cyan"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">物流</span>
-                                    <span class="product-tag">一单制</span>
-                                </div>
+                        
                                 <h3>智慧全程物流服务系统</h3>
                                 <p>打通单货种集疏运通道，专注铁水联运、公水联运，实现一单到底、全程物流跟踪和可视化，提供一站式客户服务。</p>
                                 <div class="product-card-footer">
@@ -1318,10 +1311,7 @@
                         <div class="product-card reveal" style="transition-delay: 200ms;">
                             <div class="product-card-bar indigo"></div>
                             <div class="product-card-body">
-                                <div class="product-tags">
-                                    <span class="product-tag">交易</span>
-                                    <span class="product-tag">金融</span>
-                                </div>
+                         
                                 <h3>供应链商贸与金融服务系统</h3>
                                 <p>围绕单货种货权，提供线上交易平台、在线竞价、交易撮合，以及订单融资、仓单质押等供应链金融服务。</p>
                                 <div class="product-card-footer">