diff --git a/app.vue b/app.vue
new file mode 100644
index 0000000..163a87b
--- /dev/null
+++ b/app.vue
@@ -0,0 +1,10 @@
+<script setup>
+const route = useRoute()
+const isInteriorPage = computed(() => route.path !== '/')
+</script>
+
+<template>
+  <NuxtPage />
+  <InteriorPageTools v-if="isInteriorPage" />
+  <ConsultationModal />
+</template>
diff --git a/assets/css/interior-polish.css b/assets/css/interior-polish.css
new file mode 100644
index 0000000..6688e9d
--- /dev/null
+++ b/assets/css/interior-polish.css
@@ -0,0 +1,409 @@
+:is(
+  .about-page,
+  .advantages-page,
+  .services-page,
+  .solutions-page,
+  .cases-page,
+  .case-detail-page,
+  .insights-page,
+  .article-page
+) {
+  --interior-ink: #263c55;
+  --interior-copy: #5d7087;
+  --interior-muted: #8192a6;
+  --interior-line: rgba(74, 134, 204, 0.14);
+  --interior-blue: #207bf2;
+  --interior-surface: rgba(255, 255, 255, 0.88);
+  position: relative;
+  min-height: 100dvh;
+  overflow: clip;
+  color: var(--interior-copy);
+  background: #f8fbff;
+  isolation: isolate;
+}
+
+:is(
+  .about-page,
+  .advantages-page,
+  .services-page,
+  .solutions-page,
+  .cases-page,
+  .case-detail-page,
+  .insights-page,
+  .article-page
+)::after {
+  position: fixed;
+  z-index: 40;
+  inset: 0;
+  content: '';
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
+  opacity: 0.018;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  .page-width {
+  width: min(1240px, calc(100% - 64px));
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(h1, h2, h3, h4, strong) {
+  color: var(--interior-ink);
+  letter-spacing: 0 !important;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(h1, h2, h3) {
+  text-wrap: balance;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  p {
+  text-wrap: pretty;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  main
+  > section {
+  scroll-margin-top: 78px;
+  box-shadow: inset 0 1px 0 rgba(92, 145, 207, 0.055);
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.section-kicker, .page-eyebrow) {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--interior-blue);
+  font-weight: 650;
+  letter-spacing: 0 !important;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.section-kicker, .page-eyebrow)::before {
+  width: 22px;
+  height: 2px;
+  flex: 0 0 auto;
+  content: '';
+  background: linear-gradient(90deg, #207bf2, #72cbef);
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.center-heading, .model-heading, .process-heading)
+  :is(.section-kicker, .page-eyebrow) {
+  justify-content: center;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.primary-button, .industry-plan-button, .service-action, .story-action) {
+  border-radius: 5px !important;
+  transition:
+    color 0.22s ease,
+    background 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.24s ease,
+    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(button, a):focus-visible {
+  outline: 3px solid rgba(32, 123, 242, 0.3);
+  outline-offset: 3px;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(table, .comparison-table, .result-table-wrap) {
+  font-variant-numeric: tabular-nums;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  img {
+  image-rendering: auto;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(
+    .stats-row article,
+    .method-flow article,
+    .team-capabilities article,
+    .intro-sequence article,
+    .advantage-story-visual,
+    .proof-stats article,
+    .decision-factor-list article,
+    .industry-visual,
+    .more-industry-list button,
+    .snapshot-grid article,
+    .method-list article,
+    .baseline-grid article,
+    .question-grid article,
+    .phase-list article,
+    .distribution-map article,
+    .outcome-grid article,
+    .related-grid article,
+    .article-grid article
+  ) {
+  border: 1px solid rgba(83, 145, 215, 0.12) !important;
+  border-radius: 8px !important;
+  background-color: var(--interior-surface) !important;
+  box-shadow:
+    0 16px 42px rgba(58, 112, 174, 0.075),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.comparison-table-wrap, .result-table-wrap, .comparison-table) {
+  border: 1px solid rgba(83, 145, 215, 0.14) !important;
+  border-radius: 8px !important;
+  background: rgba(255, 255, 255, 0.9) !important;
+  box-shadow: 0 20px 50px rgba(58, 112, 174, 0.08) !important;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.featured-case, .featured-insight, .contact-details, .objective-box, .article-lead) {
+  border: 1px solid rgba(83, 145, 215, 0.13) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 24px 56px rgba(48, 105, 171, 0.09) !important;
+}
+
+.interior-reveal-ready .interior-reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition:
+    opacity 0.72s ease,
+    transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.interior-reveal-ready .interior-reveal.is-revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    :is(.primary-button, .industry-plan-button):hover {
+    box-shadow: 0 14px 28px rgba(29, 119, 234, 0.23) !important;
+    transform: translateY(-3px);
+  }
+
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    :is(
+      .stats-row article,
+      .method-flow article,
+      .team-capabilities article,
+      .intro-sequence article,
+      .proof-stats article,
+      .decision-factor-list article,
+      .more-industry-list button,
+      .snapshot-grid article,
+      .method-list article,
+      .baseline-grid article,
+      .question-grid article,
+      .phase-list article,
+      .distribution-map article,
+      .outcome-grid article,
+      .related-grid article,
+      .article-grid article
+    ):hover {
+    border-color: rgba(51, 132, 229, 0.24) !important;
+    box-shadow:
+      0 22px 50px rgba(48, 111, 184, 0.13),
+      inset 0 1px 0 #fff !important;
+    transform: translateY(-5px);
+  }
+}
+
+@media (max-width: 760px) {
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    .page-width {
+    width: min(100% - 32px, 580px);
+  }
+
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    main
+    > section {
+    scroll-margin-top: 64px;
+  }
+
+  .interior-reveal-ready .interior-reveal {
+    transform: translateY(16px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .interior-reveal-ready .interior-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 894f1f7..57541f0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -41,91 +41,6 @@ a:focus-visible {
   width: min(1296px, calc(100% - 48px));
   margin: 0 auto;
 }
-.site-header {
-  height: 57px;
-  background: rgba(255, 255, 255, 0.96);
-  position: sticky;
-  top: 0;
-  z-index: 20;
-}
-.header-inner {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.brand {
-  display: block;
-  width: 190px;
-}
-.brand img {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-.desktop-nav {
-  display: flex;
-  gap: clamp(18px, 2.25vw, 43px);
-  align-items: center;
-  height: 100%;
-}
-.desktop-nav button {
-  position: relative;
-  background: transparent;
-  color: #555;
-  font-size: 14px;
-  white-space: nowrap;
-}
-.desktop-nav button::after {
-  position: absolute;
-  right: 0;
-  bottom: -8px;
-  left: 0;
-  height: 2px;
-  content: '';
-  background: #287cf9;
-  transform: scaleX(0);
-  transform-origin: center;
-  transition: transform 0.24s ease;
-}
-.desktop-nav button.active,
-.desktop-nav button:hover {
-  color: #287cf9;
-  font-weight: 700;
-}
-.desktop-nav button.active::after,
-.desktop-nav button:hover::after {
-  transform: scaleX(1);
-}
-.nav-chevron {
-  color: #646464;
-  margin-left: 6px;
-  font-size: 16px;
-  vertical-align: 1px;
-}
-.mobile-menu-button,
-.mobile-navigation {
-  display: none;
-}
-.login-button {
-  height: 31px;
-  min-width: 70px;
-  padding: 0 15px;
-  border-radius: 20px;
-  background: #087dfb;
-  color: white;
-  font-size: 12px;
-  box-shadow: 0 3px 8px rgba(30, 127, 255, 0.22);
-  transition:
-    transform 0.22s ease,
-    box-shadow 0.22s ease,
-    background 0.22s ease;
-}
-.login-button span {
-  font-size: 8px;
-  margin-right: 6px;
-}
-
 .hero-section {
   position: relative;
   height: min(32.2vw, 617px);
@@ -185,6 +100,7 @@ a:focus-visible {
   justify-content: center;
   border-radius: 5px;
   font-size: 14px;
+  text-decoration: none;
   transition:
     transform 0.2s,
     box-shadow 0.2s;
@@ -199,8 +115,7 @@ a:focus-visible {
   box-shadow: 0 11px 20px rgba(25, 106, 255, 0.24);
 }
 .primary-button:active,
-.outline-button:active,
-.login-button:active {
+.outline-button:active {
   transform: translateY(1px) scale(0.98);
 }
 .primary-button b {
@@ -819,123 +734,8 @@ a:focus-visible {
   color: #4d4d4d;
   font-size: 17px;
 }
-.site-footer {
-  color: #d6dde4;
-  background: #101d23;
-}
-.footer-main {
-  min-height: 222px;
-  display: grid;
-  grid-template-columns: 340px 1fr 210px;
-  align-items: center;
-  gap: 42px;
-}
-.footer-main > img {
-  width: 340px;
-  background: white;
-  border-radius: 5px;
-}
-.footer-links {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 23px 45px;
-}
-.footer-links div {
-  min-width: 100px;
-}
-.footer-links b {
-  display: block;
-  color: #bbc6ce;
-  font-size: 15px;
-  font-weight: 500;
-}
-.footer-links span {
-  display: block;
-  margin-top: 28px;
-  font-size: 12px;
-  color: #89969d;
-}
-.qr {
-  display: grid;
-  grid-template-columns: repeat(2, 70px);
-  gap: 11px;
-}
-.qr span {
-  height: 70px;
-  display: grid;
-  place-items: center;
-  color: #111;
-  background: #fff;
-  font-size: 52px;
-}
-.qr small {
-  grid-column: 1 / -1;
-  font-size: 12px;
-  color: #9ca6ac;
-  white-space: nowrap;
-}
-.footer-bottom {
-  height: 59px;
-  display: grid;
-  place-items: center;
-  color: #879298;
-  background: #252e33;
-  font-size: 12px;
-}
-.dialog-mask {
-  position: fixed;
-  z-index: 40;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  background: rgba(10, 25, 41, 0.46);
-}
-.consult-dialog {
-  position: relative;
-  width: min(390px, calc(100% - 40px));
-  padding: 32px;
-  border-radius: 14px;
-  background: #fff;
-  box-shadow: 0 24px 60px rgba(7, 50, 100, 0.28);
-  text-align: center;
-}
-.consult-dialog h2 {
-  margin: 0;
-  font-size: 23px;
-}
-.consult-dialog p {
-  margin: 14px 0 24px;
-  color: #777;
-  line-height: 1.6;
-}
-.close {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  color: #999;
-  background: transparent;
-  font-size: 28px;
-}
-.toast {
-  position: fixed;
-  z-index: 50;
-  bottom: 24px;
-  left: 50%;
-  margin: 0;
-  transform: translateX(-50%);
-  padding: 12px 20px;
-  color: white;
-  border-radius: 30px;
-  background: rgba(20, 30, 43, 0.9);
-  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.2);
-}
 
 @media (hover: hover) and (pointer: fine) {
-  .login-button:hover {
-    background: #056ee2;
-    box-shadow: 0 7px 16px rgba(30, 127, 255, 0.3);
-    transform: translateY(-1px);
-  }
   .stat-item:hover {
     background: #fff;
     box-shadow: 0 18px 34px rgba(59, 125, 233, 0.15);
@@ -980,17 +780,6 @@ a:focus-visible {
 }
 
 @media (min-width: 761px) {
-  .site-header {
-    transition:
-      background 0.3s ease,
-      box-shadow 0.3s ease,
-      backdrop-filter 0.3s ease;
-  }
-  .site-header.scrolled {
-    background: rgba(255, 255, 255, 0.9);
-    box-shadow: 0 10px 30px rgba(68, 122, 196, 0.1);
-    backdrop-filter: blur(18px) saturate(1.16);
-  }
   .hero-copy {
     will-change: transform;
   }
@@ -1057,28 +846,12 @@ a:focus-visible {
 }
 
 @media (max-width: 1050px) {
-  .desktop-nav {
-    gap: 14px;
-  }
-  .desktop-nav button {
-    font-size: 12px;
-  }
   .hero-copy {
     margin-left: 3%;
   }
   .section-title h2 {
     font-size: 29px;
   }
-  .footer-main {
-    grid-template-columns: 250px 1fr;
-    padding: 30px 0;
-  }
-  .footer-main > img {
-    width: 250px;
-  }
-  .qr {
-    display: none;
-  }
 }
 @media (max-width: 760px) {
   html {
@@ -1090,108 +863,8 @@ a:focus-visible {
   .page-width {
     width: min(100% - 32px, 560px);
   }
-  .site-header {
-    height: 55px;
-    box-shadow: 0 1px 0 rgba(31, 92, 165, 0.08);
-    backdrop-filter: blur(16px);
-  }
-  .brand {
-    width: 148px;
-  }
-  .desktop-nav {
-    display: none;
-  }
-  .login-button {
-    display: none;
-  }
-  .mobile-menu-button {
-    width: 44px;
-    height: 44px;
-    display: grid;
-    place-content: center;
-    gap: 5px;
-    margin-left: auto;
-    padding: 0;
-    border-radius: 50%;
-    color: #267cf5;
-    background: rgba(235, 245, 255, 0.88);
-  }
-  .mobile-menu-button .menu-glyph {
-    display: block;
-    font-size: 23px;
-    line-height: 1;
-    transform: translateY(-1px);
-  }
-  .mobile-menu-button.open .menu-glyph {
-    font-size: 28px;
-  }
-  .mobile-navigation {
-    position: fixed;
-    z-index: 19;
-    top: 55px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    overflow-y: auto;
-    background: rgba(247, 251, 255, 0.97);
-    backdrop-filter: blur(20px);
-  }
-  .mobile-navigation-inner {
-    display: grid;
-    gap: 0;
-    padding-top: 20px;
-    padding-bottom: max(30px, env(safe-area-inset-bottom));
-  }
-  .mobile-navigation-inner > button {
-    min-height: 58px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 4px;
-    color: #46505e;
-    border-bottom: 1px solid rgba(33, 106, 198, 0.1);
-    background: transparent;
-    font-size: 16px;
-    text-align: left;
-  }
-  .mobile-navigation-inner > button.active {
-    color: #1478fb;
-    font-weight: 700;
-  }
-  .mobile-navigation-inner > button b {
-    color: #78aaf0;
-    font-size: 18px;
-    font-weight: 400;
-  }
-  .mobile-navigation-inner .mobile-consult-button {
-    min-height: 50px;
-    justify-content: center;
-    gap: 10px;
-    margin-top: 24px;
-    padding: 0 20px;
-    color: #fff;
-    border: 0;
-    border-radius: 7px;
-    background: linear-gradient(100deg, #453cff, #00adf6);
-    box-shadow: 0 12px 24px rgba(25, 106, 255, 0.2);
-  }
-  .mobile-navigation-inner .mobile-consult-button b {
-    color: inherit;
-  }
-  .mobile-nav-enter-active,
-  .mobile-nav-leave-active {
-    transition:
-      opacity 0.25s ease,
-      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  .mobile-nav-enter-from,
-  .mobile-nav-leave-to {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
   .hero-section {
-    height: min(720px, calc(100svh - 55px));
+    height: min(720px, calc(100svh - 58px));
     min-height: 570px;
   }
   .hero-art {
@@ -1442,44 +1115,6 @@ a:focus-visible {
   .cta-content h2 br {
     display: none;
   }
-  .footer-main {
-    grid-template-columns: 1fr;
-    gap: 26px;
-    padding: 38px 0 34px;
-  }
-  .footer-main > img {
-    width: 240px;
-  }
-  .footer-links {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px 18px;
-  }
-  .footer-links span {
-    margin-top: 8px;
-  }
-  .footer-bottom {
-    height: auto;
-    min-height: 59px;
-    padding: 14px 16px;
-    text-align: center;
-    font-size: 10px;
-    line-height: 1.6;
-  }
-  .consult-dialog {
-    width: calc(100% - 28px);
-    padding: 30px 22px 24px;
-    border-radius: 16px;
-  }
-  .consult-dialog .primary-button {
-    width: 100%;
-  }
-  .toast {
-    right: 16px;
-    bottom: calc(16px + env(safe-area-inset-bottom));
-    left: 16px;
-    transform: none;
-    text-align: center;
-  }
 }
 
 @media (max-width: 390px) {
@@ -1506,7 +1141,387 @@ a:focus-visible {
     width: calc(100vw - 12px);
     margin-right: -12px;
   }
-  .footer-main > img {
-    width: min(240px, 100%);
+}
+
+/* Inner-page readability and layout system. The homepage intentionally stays unchanged. */
+:is(
+  .about-page,
+  .advantages-page,
+  .services-page,
+  .solutions-page,
+  .cases-page,
+  .case-detail-page,
+  .insights-page,
+  .article-page
+) {
+  --inner-ink: #2f4056;
+  --inner-copy: #52657d;
+  --inner-muted: #667a91;
+  color: var(--inner-ink);
+  text-rendering: optimizeLegibility;
+}
+
+@media (min-width: 1180px) {
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    .page-width {
+    width: min(1400px, calc(100% - 80px));
+  }
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.page-eyebrow, .section-kicker) {
+  color: #286dae !important;
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.08em !important;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.primary-button, .outline-button) {
+  gap: 8px;
+  min-height: 46px;
+  font-size: 15px !important;
+  font-weight: 600;
+}
+
+:is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  )
+  :is(.primary-button, .outline-button, button, a)
+  .app-icon {
+  width: 1.05em;
+  height: 1.05em;
+}
+
+/* Keep long-form section headings visually anchored instead of centering every block. */
+:is(.advantages-page, .case-detail-page) .center-heading,
+.solutions-page :is(.model-heading, .process-heading, .service-system-heading),
+.cases-page .cases-library-heading,
+.insights-page .library-heading {
+  max-width: 860px !important;
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+  text-align: left !important;
+}
+
+/* About */
+.about-page
+  :is(
+    .story-content p,
+    .change-step p,
+    .change-question,
+    .method-flow p,
+    .timeline-list li,
+    .team-capabilities p
+  ) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.75 !important;
+}
+.about-page
+  :is(
+    .contact-details dt,
+    .contact-qr small,
+    .team-capabilities span,
+    .method-marker,
+    .change-principles span
+  ) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.about-page :is(.contact-details dd, .contact-qr strong, .stats-row p, .hero-status) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+}
+
+/* Advantages */
+.advantages-page :is(.hero-advantage-links button, .story-action, .proof-layout header > a) {
+  font-size: 14px !important;
+}
+.advantages-page
+  :is(
+    .story-problem p,
+    .story-capability p,
+    .advantage-story-copy li,
+    .advantage-story-copy blockquote,
+    .comparison-table-wrap th,
+    .comparison-table-wrap td,
+    .value-added-copy > span,
+    .proof-stats p
+  ) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.7 !important;
+}
+.advantages-page
+  :is(.story-problem strong, .story-capability strong, .story-actions-title, .story-index) {
+  color: #476888 !important;
+  font-size: 13px !important;
+}
+.advantages-page :is(.value-added-copy > p, .value-added-copy li, .proof-stats span) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.advantages-page .comparison-table-wrap thead th {
+  font-size: 13px !important;
+}
+
+/* Services */
+.services-page
+  :is(
+    .model-explanation li,
+    .pain-note p,
+    .service-details strong,
+    .service-details li,
+    .process-timeline p,
+    .industry-list p,
+    .proof-summary li
+  ) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.72 !important;
+}
+.services-page
+  :is(
+    .hero-badges,
+    .journey-number,
+    .service-index,
+    .service-action,
+    .industry-list strong,
+    .proof-tag
+  ) {
+  font-size: 14px !important;
+}
+.services-page
+  :is(
+    .model-explanation header span,
+    .visual-topline,
+    .step-marker span,
+    .industry-list > article > span,
+    .proof-data span
+  ) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+
+/* Solutions */
+.solutions-page
+  :is(.hero-industry-links button, .industry-sticky-nav button, .industry-plan-button) {
+  font-size: 14px !important;
+}
+.solutions-page
+  :is(.decision-factor-list p, .strategy-copy, .industry-strategy li, .compliance-note) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.72 !important;
+}
+.solutions-page
+  :is(
+    .decision-factor-list > article > span,
+    .strategy-label,
+    .actions-title,
+    .industry-visual-header
+  ) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.solutions-page .industry-tags span {
+  color: #3f6286 !important;
+  font-size: 12px !important;
+}
+
+/* Case library */
+.cases-page :is(.case-filters button, .featured-case-copy > a, .snapshot-copy button) {
+  font-size: 14px !important;
+}
+.cases-page
+  :is(.featured-summary, .snapshot-copy > p, .case-empty > p:nth-of-type(2), .method-list p) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.72 !important;
+}
+.cases-page :is(.featured-case-copy > p, .snapshot-heading > span, .method-list span) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.cases-page .case-filters {
+  justify-content: flex-start !important;
+}
+
+/* Case detail */
+.case-detail-page .breadcrumb {
+  color: var(--inner-muted) !important;
+  font-size: 13px !important;
+}
+.case-detail-page
+  :is(
+    .objective-box > strong,
+    .objective-box li,
+    .baseline-grid p,
+    .question-grid p,
+    .question-grid strong,
+    .phase-list p,
+    .distribution-map article p,
+    .result-table-wrap th,
+    .result-table-wrap td,
+    .outcome-grid p
+  ) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.72 !important;
+}
+.case-detail-page
+  :is(
+    .case-meta span,
+    .baseline-grid span,
+    .baseline-conclusion span,
+    .subsection-copy > p,
+    .phase-list > article > span,
+    .distribution-map article > span,
+    .summary-quote > span,
+    .related-grid span
+  ) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.case-detail-page .result-table-wrap thead th {
+  font-size: 13px !important;
+}
+
+/* Insight library */
+.insights-page
+  :is(
+    .hero-actions > button,
+    .featured-footer a,
+    .read-link,
+    .insight-filters button,
+    .load-more,
+    .whitepaper-grid > button
+  ) {
+  font-size: 14px !important;
+}
+.insights-page
+  :is(
+    .featured-copy > p,
+    .article-copy > p,
+    .insight-empty p,
+    .whitepaper-copy p,
+    .whitepaper-copy span
+  ) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.72 !important;
+}
+.insights-page :is(.article-meta, .featured-footer > span) {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.insights-page .insight-filters {
+  justify-content: flex-start !important;
+}
+
+/* Article detail */
+.article-page .breadcrumbs {
+  color: var(--inner-muted) !important;
+  font-size: 12px !important;
+}
+.article-page
+  :is(
+    .article-heading > p,
+    .article-byline,
+    .article-aside > a,
+    .article-aside button,
+    .section-number,
+    .article-pagination span,
+    .related-section header p
+  ) {
+  font-size: 13px !important;
+}
+.article-page
+  :is(.comparison-head, .comparison-row, .draft-note p, .inline-cta button, .article-aside strong) {
+  color: var(--inner-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.65 !important;
+}
+.article-page .article-content {
+  max-width: 760px;
+}
+
+@media (max-width: 760px) {
+  :is(
+    .about-page,
+    .advantages-page,
+    .services-page,
+    .solutions-page,
+    .cases-page,
+    .case-detail-page,
+    .insights-page,
+    .article-page
+  ) {
+    width: 100%;
+    max-width: 100vw;
+  }
+
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    .page-width {
+    width: calc(100vw - 32px);
+    max-width: 620px;
+  }
+
+  :is(
+      .about-page,
+      .advantages-page,
+      .services-page,
+      .solutions-page,
+      .cases-page,
+      .case-detail-page,
+      .insights-page,
+      .article-page
+    )
+    :is(.page-eyebrow, .section-kicker) {
+    font-size: 13px !important;
   }
 }
diff --git a/components/AppIcon.vue b/components/AppIcon.vue
new file mode 100644
index 0000000..ef0d75d
--- /dev/null
+++ b/components/AppIcon.vue
@@ -0,0 +1,53 @@
+<script setup>
+import {
+  ArrowLeft,
+  ArrowRight,
+  Bottom,
+  Check,
+  Close,
+  Location,
+  Menu,
+  Message,
+  Phone,
+  Plus,
+  Search
+} from '@element-plus/icons-vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'arrow-right'
+  }
+})
+
+const icons = {
+  'arrow-left': ArrowLeft,
+  'arrow-right': ArrowRight,
+  bottom: Bottom,
+  check: Check,
+  close: Close,
+  location: Location,
+  menu: Menu,
+  message: Message,
+  phone: Phone,
+  plus: Plus,
+  search: Search
+}
+
+const icon = computed(() => icons[props.name] || ArrowRight)
+</script>
+
+<template>
+  <component :is="icon" class="app-icon" aria-hidden="true" />
+</template>
+
+<style scoped>
+.app-icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  flex: 0 0 auto;
+  overflow: visible;
+  vertical-align: -0.12em;
+}
+</style>
diff --git a/components/ConsultationModal.vue b/components/ConsultationModal.vue
new file mode 100644
index 0000000..37f41eb
--- /dev/null
+++ b/components/ConsultationModal.vue
@@ -0,0 +1,485 @@
+<script setup>
+const route = useRoute()
+const { isOpen, context, form, closeConsultation } = useConsultation()
+const formElement = ref(null)
+const nameInput = ref(null)
+const errors = ref({})
+const status = ref('idle')
+const submitError = ref('')
+
+const industries = ['企业服务', '教育培训', '本地生活', '医疗健康', '电商零售', '其他行业']
+const needs = ['品牌曝光', '精准获客转化', '全域营销', 'GEO 诊断', '内容与媒体分发']
+
+function validate() {
+  const nextErrors = {}
+  if (!form.value.name.trim()) nextErrors.name = '请填写您的姓名'
+  if (!form.value.company.trim()) nextErrors.company = '请填写公司名称'
+  if (!form.value.contact.trim()) {
+    nextErrors.contact = '请填写手机号或邮箱'
+  } else if (
+    !/^(1\d{10}|[\w.+-]+@[\w.-]+\.[A-Za-z]{2,}|[\d\s()+-]{6,})$/.test(form.value.contact.trim())
+  ) {
+    nextErrors.contact = '联系方式格式不正确'
+  }
+  if (!form.value.consent) nextErrors.consent = '请确认允许工作人员与您联系'
+  errors.value = nextErrors
+  return Object.keys(nextErrors).length === 0
+}
+
+async function submitForm() {
+  submitError.value = ''
+  if (!validate()) return
+
+  status.value = 'submitting'
+  try {
+    // 后续接入 CRM 或官网线索接口时，在此替换为真实请求。
+    await new Promise((resolve) => setTimeout(resolve, 650))
+    status.value = 'success'
+  } catch {
+    status.value = 'error'
+    submitError.value = '暂时无法提交，请稍后重试或通过页脚联系方式咨询。'
+  }
+}
+
+function resetAndClose() {
+  status.value = 'idle'
+  errors.value = {}
+  submitError.value = ''
+  closeConsultation()
+}
+
+function onKeydown(event) {
+  if (event.key === 'Escape' && isOpen.value) resetAndClose()
+}
+
+watch(isOpen, async (open) => {
+  if (!import.meta.client) return
+  document.body.style.overflow = open ? 'hidden' : ''
+  if (open) {
+    status.value = 'idle'
+    errors.value = {}
+    await nextTick()
+    nameInput.value?.focus()
+  }
+})
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="consultation">
+      <div v-if="isOpen" class="consultation-mask" @mousedown.self="resetAndClose">
+        <section
+          class="consultation-panel"
+          :class="{ 'is-interior': route.path !== '/' }"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="
+            status === 'success' ? 'consultation-success-title' : 'consultation-title'
+          "
+        >
+          <button
+            class="consultation-close"
+            type="button"
+            aria-label="关闭咨询弹窗"
+            @click="resetAndClose"
+          >
+            <AppIcon name="close" />
+          </button>
+
+          <div v-if="status === 'success'" class="consultation-success">
+            <div class="success-mark" aria-hidden="true"><AppIcon name="check" /></div>
+            <p class="modal-kicker">提交成功</p>
+            <h2 id="consultation-success-title">需求已经记录</h2>
+            <p>我们会根据您填写的行业与目标匹配顾问，请保持联系方式畅通。</p>
+            <button class="modal-primary" type="button" @click="resetAndClose">完成</button>
+          </div>
+
+          <template v-else>
+            <header class="consultation-heading">
+              <p class="modal-kicker">1 对 1 增长沟通</p>
+              <h2 id="consultation-title">{{ context.title }}</h2>
+              <p>留下基本信息，我们会结合您的业务阶段提供针对性建议。</p>
+            </header>
+
+            <form
+              ref="formElement"
+              class="consultation-form"
+              novalidate
+              @submit.prevent="submitForm"
+            >
+              <div class="form-grid">
+                <label>
+                  <span>姓名 <b>*</b></span>
+                  <input
+                    ref="nameInput"
+                    v-model="form.name"
+                    type="text"
+                    autocomplete="name"
+                    placeholder="怎么称呼您"
+                  />
+                  <small v-if="errors.name">{{ errors.name }}</small>
+                </label>
+                <label>
+                  <span>公司名称 <b>*</b></span>
+                  <input
+                    v-model="form.company"
+                    type="text"
+                    autocomplete="organization"
+                    placeholder="请输入公司名称"
+                  />
+                  <small v-if="errors.company">{{ errors.company }}</small>
+                </label>
+              </div>
+
+              <label>
+                <span>联系方式 <b>*</b></span>
+                <input
+                  v-model="form.contact"
+                  type="text"
+                  autocomplete="tel"
+                  placeholder="手机号或工作邮箱"
+                />
+                <small v-if="errors.contact">{{ errors.contact }}</small>
+              </label>
+
+              <div class="form-grid">
+                <label>
+                  <span>所属行业</span>
+                  <select v-model="form.industry">
+                    <option value="">请选择</option>
+                    <option v-for="industry in industries" :key="industry" :value="industry">
+                      {{ industry }}
+                    </option>
+                  </select>
+                </label>
+                <label>
+                  <span>核心需求</span>
+                  <select v-model="form.need">
+                    <option value="">请选择</option>
+                    <option v-for="need in needs" :key="need" :value="need">{{ need }}</option>
+                  </select>
+                </label>
+              </div>
+
+              <label>
+                <span>当前问题与目标</span>
+                <textarea
+                  v-model="form.message"
+                  rows="3"
+                  placeholder="例如：希望提升品牌在主流 AI 平台的推荐率"
+                ></textarea>
+              </label>
+
+              <label class="consent-row">
+                <input v-model="form.consent" type="checkbox" />
+                <span>我同意工作人员根据以上信息与我联系，并妥善使用本次咨询信息。</span>
+              </label>
+              <small v-if="errors.consent" class="consent-error">{{ errors.consent }}</small>
+
+              <p v-if="submitError" class="submit-error">{{ submitError }}</p>
+              <p class="source-note">咨询来源：{{ context.source }}</p>
+
+              <button class="modal-primary" type="submit" :disabled="status === 'submitting'">
+                <span v-if="status === 'submitting'" class="submit-dots" aria-hidden="true"
+                  ><i></i><i></i><i></i
+                ></span>
+                <template v-else>提交咨询 <AppIcon name="arrow-right" /></template>
+              </button>
+            </form>
+          </template>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.consultation-mask {
+  position: fixed;
+  z-index: 80;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(15, 35, 62, 0.48);
+  backdrop-filter: blur(12px);
+}
+.consultation-panel {
+  position: relative;
+  width: min(620px, 100%);
+  max-height: min(820px, calc(100dvh - 48px));
+  overflow-y: auto;
+  padding: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.74);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at 88% 8%, rgba(78, 158, 255, 0.16), transparent 31%),
+    rgba(255, 255, 255, 0.98);
+  box-shadow:
+    0 30px 80px rgba(28, 83, 155, 0.24),
+    inset 0 1px 0 #fff;
+}
+.consultation-panel.is-interior {
+  border-radius: 8px;
+}
+.consultation-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  color: #4f647d;
+  background: #edf5ff;
+}
+.is-interior .consultation-close {
+  border: 1px solid rgba(72, 139, 219, 0.12);
+  border-radius: 5px;
+}
+.consultation-close :deep(.app-icon) {
+  width: 18px;
+  height: 18px;
+}
+.consultation-heading {
+  padding-right: 38px;
+}
+.modal-kicker {
+  margin: 0 0 8px;
+  color: #207bf2;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+}
+.consultation-heading h2,
+.consultation-success h2 {
+  margin: 0;
+  color: #24364d;
+  font-size: clamp(25px, 4vw, 34px);
+  letter-spacing: -0.035em;
+  line-height: 1.25;
+}
+.consultation-heading > p:last-child,
+.consultation-success > p {
+  max-width: 32em;
+  margin: 12px 0 0;
+  color: #758399;
+  font-size: 14px;
+  line-height: 1.75;
+}
+.consultation-form {
+  display: grid;
+  gap: 17px;
+  margin-top: 28px;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.consultation-form label {
+  display: grid;
+  gap: 7px;
+}
+.consultation-form label > span {
+  color: #41536a;
+  font-size: 14px;
+  font-weight: 600;
+}
+.consultation-form label > span b {
+  color: #2a80ef;
+}
+.consultation-form input:not([type='checkbox']),
+.consultation-form select,
+.consultation-form textarea {
+  width: 100%;
+  border: 1px solid #dbe7f5;
+  border-radius: 8px;
+  outline: 0;
+  background: rgba(247, 251, 255, 0.82);
+  color: #2f4056;
+  font: inherit;
+  font-size: 14px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+}
+.consultation-form input:not([type='checkbox']),
+.consultation-form select {
+  height: 46px;
+  padding: 0 13px;
+}
+.consultation-form textarea {
+  resize: vertical;
+  min-height: 90px;
+  padding: 12px 13px;
+  line-height: 1.6;
+}
+.consultation-form input:focus,
+.consultation-form select:focus,
+.consultation-form textarea:focus {
+  border-color: #66a8fa;
+  background: #fff;
+  box-shadow: 0 0 0 4px rgba(43, 128, 239, 0.1);
+}
+.consultation-form small,
+.consent-error,
+.submit-error {
+  color: #d54b55;
+  font-size: 12px;
+}
+.consent-row {
+  grid-template-columns: 18px 1fr;
+  align-items: start;
+  gap: 9px !important;
+  cursor: pointer;
+}
+.consent-row input {
+  width: 16px;
+  height: 16px;
+  margin: 2px 0 0;
+  accent-color: #247df0;
+}
+.consent-row span {
+  color: #5f6e81 !important;
+  font-size: 13px !important;
+  font-weight: 400 !important;
+  line-height: 1.55;
+}
+.source-note {
+  margin: -4px 0 0;
+  color: #718095;
+  font-size: 12px;
+}
+.modal-primary {
+  width: 100%;
+  height: 50px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 7px;
+  color: #fff;
+  background: linear-gradient(100deg, #453cff, #00a7ef);
+  box-shadow: 0 12px 24px rgba(35, 111, 231, 0.2);
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s,
+    opacity 0.2s;
+}
+.modal-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 30px rgba(35, 111, 231, 0.28);
+}
+.modal-primary:active {
+  transform: translateY(1px) scale(0.99);
+}
+.modal-primary:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+.submit-dots {
+  display: flex;
+  gap: 5px;
+}
+.submit-dots i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #fff;
+  animation: submit-dot 0.8s infinite alternate;
+}
+.submit-dots i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.submit-dots i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.consultation-success {
+  min-height: 360px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.consultation-success .modal-primary {
+  max-width: 220px;
+  margin-top: 28px;
+}
+.success-mark {
+  width: 68px;
+  height: 68px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 20px;
+  border-radius: 22px;
+  color: #fff;
+  background: linear-gradient(145deg, #2a86f5, #65c7f4);
+  box-shadow: 0 16px 30px rgba(45, 131, 239, 0.25);
+  font-size: 30px;
+}
+.is-interior .success-mark {
+  border-radius: 8px;
+}
+.consultation-enter-active,
+.consultation-leave-active {
+  transition: opacity 0.25s ease;
+}
+.consultation-enter-active .consultation-panel,
+.consultation-leave-active .consultation-panel {
+  transition:
+    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.22s;
+}
+.consultation-enter-from,
+.consultation-leave-to {
+  opacity: 0;
+}
+.consultation-enter-from .consultation-panel,
+.consultation-leave-to .consultation-panel {
+  opacity: 0;
+  transform: translateY(18px) scale(0.98);
+}
+@keyframes submit-dot {
+  to {
+    transform: translateY(-4px);
+    opacity: 0.45;
+  }
+}
+@media (max-width: 640px) {
+  .consultation-mask {
+    align-items: end;
+    padding: 0;
+  }
+  .consultation-panel {
+    width: 100%;
+    max-height: calc(100dvh - 24px);
+    padding: 32px 20px 24px;
+    border-radius: 22px 22px 0 0;
+  }
+  .consultation-panel.is-interior {
+    border-radius: 8px 8px 0 0;
+  }
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  .consultation-close {
+    top: 13px;
+    right: 13px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .submit-dots i {
+    animation: none;
+  }
+}
+</style>
diff --git a/components/InteriorPageTools.vue b/components/InteriorPageTools.vue
new file mode 100644
index 0000000..509bcdd
--- /dev/null
+++ b/components/InteriorPageTools.vue
@@ -0,0 +1,177 @@
+<script setup>
+const route = useRoute()
+const progress = ref(0)
+const showBackToTop = ref(false)
+let observer
+let frame
+
+function updateScrollState() {
+  const scrollTop = window.scrollY || document.documentElement.scrollTop
+  const scrollable = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)
+  progress.value = Math.min(100, Math.max(0, (scrollTop / scrollable) * 100))
+  showBackToTop.value = scrollTop > Math.min(window.innerHeight * 0.72, 620)
+}
+
+function onScroll() {
+  if (frame) return
+  frame = window.requestAnimationFrame(() => {
+    frame = 0
+    updateScrollState()
+  })
+}
+
+function prepareSectionReveals() {
+  observer?.disconnect()
+  const page = document.querySelector(
+    '.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .case-detail-page, .insights-page, .article-page'
+  )
+  if (!page || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+  page.classList.add('interior-reveal-ready')
+  const sections = [
+    ...page.querySelectorAll('main > section, main > article > div, main > article > header')
+  ]
+  sections.forEach((section, index) => {
+    section.classList.add('interior-reveal')
+    if (index === 0 || section.getBoundingClientRect().top < window.innerHeight * 0.92) {
+      section.classList.add('is-revealed')
+    }
+  })
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return
+        entry.target.classList.add('is-revealed')
+        observer?.unobserve(entry.target)
+      })
+    },
+    { rootMargin: '0px 0px -9% 0px', threshold: 0.08 }
+  )
+
+  sections
+    .filter((section) => !section.classList.contains('is-revealed'))
+    .forEach((section) => observer.observe(section))
+}
+
+function backToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+onMounted(async () => {
+  window.addEventListener('scroll', onScroll, { passive: true })
+  window.addEventListener('resize', onScroll, { passive: true })
+  await nextTick()
+  updateScrollState()
+  prepareSectionReveals()
+})
+
+watch(
+  () => route.fullPath,
+  async () => {
+    await nextTick()
+    updateScrollState()
+    prepareSectionReveals()
+  }
+)
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  if (frame) window.cancelAnimationFrame(frame)
+  window.removeEventListener('scroll', onScroll)
+  window.removeEventListener('resize', onScroll)
+})
+</script>
+
+<template>
+  <div class="reading-progress" aria-hidden="true">
+    <span :style="{ transform: `scaleX(${progress / 100})` }"></span>
+  </div>
+  <Transition name="back-top">
+    <button
+      v-if="showBackToTop"
+      class="back-to-top"
+      type="button"
+      aria-label="回到页面顶部"
+      title="回到顶部"
+      @click="backToTop"
+    >
+      <AppIcon name="bottom" />
+    </button>
+  </Transition>
+</template>
+
+<style scoped>
+.reading-progress {
+  position: fixed;
+  z-index: 45;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  pointer-events: none;
+}
+.reading-progress span {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: linear-gradient(90deg, #166ff3, #62c8f1);
+  box-shadow: 0 1px 8px rgba(27, 124, 240, 0.34);
+  transform-origin: left center;
+  will-change: transform;
+}
+.back-to-top {
+  position: fixed;
+  z-index: 28;
+  right: clamp(18px, 2.7vw, 42px);
+  bottom: clamp(18px, 3vw, 40px);
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(91, 151, 224, 0.22);
+  border-radius: 6px;
+  color: #2379e8;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 14px 34px rgba(37, 94, 160, 0.16);
+  backdrop-filter: blur(14px);
+  transition:
+    color 0.22s ease,
+    background 0.22s ease,
+    transform 0.22s ease,
+    box-shadow 0.22s ease;
+}
+.back-to-top :deep(.app-icon) {
+  width: 18px;
+  height: 18px;
+  transform: rotate(180deg);
+}
+.back-to-top:hover {
+  color: #fff;
+  background: #207bf2;
+  box-shadow: 0 17px 36px rgba(31, 121, 236, 0.25);
+  transform: translateY(-3px);
+}
+.back-to-top:active {
+  transform: translateY(1px) scale(0.97);
+}
+.back-top-enter-active,
+.back-top-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.24s ease;
+}
+.back-top-enter-from,
+.back-top-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+@media (max-width: 680px) {
+  .back-to-top {
+    right: 16px;
+    bottom: 16px;
+    width: 42px;
+    height: 42px;
+  }
+}
+</style>
diff --git a/components/site/SiteFooter.vue b/components/site/SiteFooter.vue
new file mode 100644
index 0000000..93dc42f
--- /dev/null
+++ b/components/site/SiteFooter.vue
@@ -0,0 +1,251 @@
+<script setup>
+const route = useRoute()
+const { openConsultation } = useConsultation()
+
+const sourceLabel = computed(() => {
+  const labels = {
+    '/services': '营销增长服务',
+    '/solutions': '行业解决方案',
+    '/cases': '客户案例',
+    '/advantages': '核心优势',
+    '/insights': '增长洞察',
+    '/about': '关于我们'
+  }
+  const base = Object.keys(labels).find(
+    (path) => route.path === path || route.path.startsWith(`${path}/`)
+  )
+  return `${labels[base] || '全站'}页页脚`
+})
+</script>
+
+<template>
+  <footer class="subsite-footer" :class="{ 'is-interior': route.path !== '/' }">
+    <div class="page-width footer-content">
+      <div class="footer-company">
+        <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
+        <p>聚焦 AI 搜索增长，用可信内容、全域信源与转化承接帮助品牌建立长期数字资产。</p>
+        <button type="button" @click="openConsultation({ source: sourceLabel })">
+          <span>预约免费诊断</span>
+          <AppIcon name="arrow-right" />
+        </button>
+      </div>
+
+      <nav class="footer-navigation" aria-label="页脚导航">
+        <div>
+          <strong>快速导航</strong>
+          <NuxtLink to="/">首页</NuxtLink>
+          <NuxtLink to="/services">营销增长服务</NuxtLink>
+          <NuxtLink to="/solutions">行业解决方案</NuxtLink>
+          <NuxtLink to="/cases">客户案例</NuxtLink>
+          <NuxtLink to="/advantages">核心优势</NuxtLink>
+          <NuxtLink to="/insights">增长洞察</NuxtLink>
+          <NuxtLink to="/about">关于我们</NuxtLink>
+        </div>
+        <div>
+          <strong>业务方向</strong>
+          <NuxtLink to="/services#brand-exposure">品牌曝光</NuxtLink>
+          <NuxtLink to="/services#lead-conversion">精准获客转化</NuxtLink>
+          <NuxtLink to="/services#omnichannel">全域营销</NuxtLink>
+        </div>
+        <div>
+          <strong>联系我们</strong>
+          <span class="contact-line"
+            ><AppIcon name="location" />成都市武侯区芯通科技大厦 B 座 9 楼</span
+          >
+          <span class="contact-line"><AppIcon name="phone" />联系电话：待补充</span>
+          <span class="contact-line"><AppIcon name="message" />商务邮箱：待补充</span>
+        </div>
+      </nav>
+
+      <div class="footer-qr" aria-label="专属顾问二维码占位">
+        <span class="qr-pattern" aria-hidden="true"></span>
+        <strong>扫码添加专属顾问</strong>
+        <small>获取 1 对 1 GEO 增长建议</small>
+      </div>
+    </div>
+    <div class="footer-legal">
+      <div class="page-width">
+        <span>© 2026 成都大马棒传媒有限公司</span><span>备案信息待补充 · 隐私说明</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.subsite-footer {
+  color: #cbd6e1;
+  background: #12202a;
+}
+.subsite-footer.is-interior {
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 38px 38px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 38px 38px,
+    #12202a;
+}
+.footer-content {
+  min-height: 285px;
+  display: grid;
+  grid-template-columns: 1.2fr 1.7fr 0.65fr;
+  align-items: center;
+  gap: 52px;
+  padding-top: 42px;
+  padding-bottom: 42px;
+}
+.footer-company img {
+  display: block;
+  width: 255px;
+  padding: 8px;
+  border-radius: 6px;
+  background: #fff;
+}
+.is-interior .footer-company img {
+  border-radius: 5px;
+}
+.footer-company p {
+  max-width: 390px;
+  margin: 20px 0;
+  color: #b6c2cc;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.footer-company button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  color: #76b7ff;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 600;
+}
+.footer-company button:hover {
+  color: #fff;
+}
+.is-interior .footer-company button {
+  transition:
+    color 0.22s ease,
+    transform 0.22s ease;
+}
+.is-interior .footer-company button:hover {
+  transform: translateX(3px);
+}
+.footer-navigation {
+  display: grid;
+  grid-template-columns: 0.8fr 0.9fr 1.45fr;
+  gap: 32px;
+}
+.footer-navigation div {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+}
+.footer-navigation strong {
+  margin-bottom: 5px;
+  color: #eff6fb;
+  font-size: 14px;
+}
+.footer-navigation a,
+.footer-navigation span {
+  color: #b1bdc7;
+  font-size: 13px;
+  line-height: 1.65;
+  text-decoration: none;
+}
+.footer-navigation a:hover {
+  color: #70b5ff;
+}
+.is-interior .footer-navigation a {
+  transition:
+    color 0.2s ease,
+    transform 0.2s ease;
+}
+.is-interior .footer-navigation a:hover {
+  transform: translateX(2px);
+}
+.footer-navigation .contact-line {
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  align-items: start;
+  gap: 8px;
+}
+.footer-navigation .contact-line :deep(.app-icon) {
+  margin-top: 3px;
+  color: #70b5ff;
+}
+.footer-qr {
+  display: grid;
+  justify-items: center;
+  text-align: center;
+}
+.qr-pattern {
+  width: 86px;
+  height: 86px;
+  display: block;
+  border: 7px solid #fff;
+  background:
+    linear-gradient(90deg, #13212b 25%, transparent 25% 50%, #13212b 50% 75%, transparent 75%) 0 0 /
+      16px 16px,
+    linear-gradient(#13212b 25%, transparent 25% 50%, #13212b 50% 75%, transparent 75%) 8px 8px /
+      16px 16px,
+    #fff;
+}
+.footer-qr strong {
+  margin-top: 13px;
+  color: #e8f0f6;
+  font-size: 13px;
+}
+.footer-qr small {
+  margin-top: 6px;
+  color: #aebac4;
+  font-size: 12px;
+}
+.footer-legal {
+  min-height: 54px;
+  display: grid;
+  place-items: center;
+  color: #aeb9c2;
+  background: #263139;
+  font-size: 12px;
+}
+.is-interior .footer-legal {
+  border-top: 1px solid rgba(255, 255, 255, 0.055);
+  background: rgba(38, 49, 57, 0.88);
+}
+.footer-legal .page-width {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+}
+@media (max-width: 960px) {
+  .footer-content {
+    grid-template-columns: 1fr 1.5fr;
+  }
+  .footer-qr {
+    display: none;
+  }
+}
+@media (max-width: 680px) {
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: 32px;
+    padding-top: 40px;
+    padding-bottom: 36px;
+  }
+  .footer-company img {
+    width: 230px;
+  }
+  .footer-navigation {
+    grid-template-columns: 1fr 1fr;
+    gap: 28px 18px;
+  }
+  .footer-navigation div:last-child {
+    grid-column: 1 / -1;
+  }
+  .footer-legal .page-width {
+    display: grid;
+    justify-content: center;
+    padding: 14px 0;
+    text-align: center;
+  }
+}
+</style>
diff --git a/components/site/SiteHeader.vue b/components/site/SiteHeader.vue
new file mode 100644
index 0000000..a18ea88
--- /dev/null
+++ b/components/site/SiteHeader.vue
@@ -0,0 +1,328 @@
+<script setup>
+const route = useRoute()
+const mobileOpen = ref(false)
+const { openConsultation } = useConsultation()
+
+const navItems = [
+  { label: '首页', to: '/' },
+  { label: '营销增长服务', to: '/services' },
+  { label: '行业解决方案', to: '/solutions' },
+  { label: '客户案例', to: '/cases' },
+  { label: '核心优势', to: '/advantages' },
+  { label: '增长洞察', to: '/insights' },
+  { label: '关于我们', to: '/about' }
+]
+
+function isActive(item) {
+  if (item.to.includes('#')) return false
+  if (item.to === '/') return route.path === '/'
+  return route.path === item.to || route.path.startsWith(`${item.to}/`)
+}
+
+function requestDiagnosis() {
+  mobileOpen.value = false
+  const current = navItems.find((item) => {
+    if (item.to === '/') return route.path === '/'
+    return route.path === item.to || route.path.startsWith(`${item.to}/`)
+  })
+  openConsultation({
+    title: '预约免费 GEO 诊断',
+    source: `${current?.label || '全站'}页顶部导航`
+  })
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    mobileOpen.value = false
+  }
+)
+</script>
+
+<template>
+  <header class="subsite-header" :class="{ 'is-interior': route.path !== '/' }">
+    <div class="page-width subsite-header-inner">
+      <NuxtLink to="/" class="subsite-brand" aria-label="大马棒云途全域 GEO 首页">
+        <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
+      </NuxtLink>
+
+      <nav class="subsite-nav" aria-label="主导航">
+        <NuxtLink
+          v-for="item in navItems"
+          :key="item.label"
+          :to="item.to"
+          :class="{ active: isActive(item) }"
+        >
+          {{ item.label }}
+        </NuxtLink>
+      </nav>
+
+      <button class="header-consult" type="button" @click="requestDiagnosis">
+        <AppIcon name="message" />
+        <span>免费诊断</span>
+      </button>
+      <button
+        class="subsite-menu"
+        type="button"
+        :aria-expanded="mobileOpen"
+        aria-controls="subsite-mobile-navigation"
+        :aria-label="mobileOpen ? '关闭导航' : '打开导航'"
+        @click="mobileOpen = !mobileOpen"
+      >
+        <AppIcon :name="mobileOpen ? 'close' : 'menu'" />
+      </button>
+    </div>
+
+    <Transition name="mobile-navigation">
+      <nav
+        v-if="mobileOpen"
+        id="subsite-mobile-navigation"
+        class="subsite-mobile-nav"
+        aria-label="移动端导航"
+      >
+        <div class="page-width">
+          <NuxtLink
+            v-for="item in navItems"
+            :key="`mobile-${item.label}`"
+            :to="item.to"
+            :class="{ active: isActive(item) }"
+          >
+            <span>{{ item.label }}</span>
+            <AppIcon name="arrow-right" />
+          </NuxtLink>
+          <button type="button" @click="requestDiagnosis">
+            <span>预约免费诊断</span>
+            <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </nav>
+    </Transition>
+  </header>
+</template>
+
+<style scoped>
+.subsite-header {
+  position: sticky;
+  z-index: 30;
+  top: 0;
+  height: 64px;
+  border-bottom: 1px solid rgba(84, 142, 216, 0.1);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 10px 30px rgba(61, 116, 185, 0.06);
+  backdrop-filter: blur(18px) saturate(1.16);
+}
+.subsite-header.is-interior {
+  border-bottom-color: rgba(84, 142, 216, 0.12);
+  background: rgba(250, 253, 255, 0.88);
+  box-shadow:
+    0 12px 32px rgba(61, 116, 185, 0.07),
+    inset 0 1px 0 rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(20px) saturate(1.12);
+}
+.subsite-header-inner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+.subsite-brand {
+  width: 190px;
+  flex: 0 0 auto;
+}
+.is-interior .subsite-brand {
+  padding: 6px 8px;
+  border-radius: 5px;
+  transition:
+    background 0.22s ease,
+    transform 0.22s ease;
+}
+.is-interior .subsite-brand:hover {
+  background: rgba(228, 241, 255, 0.72);
+  transform: translateY(-1px);
+}
+.subsite-brand img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.subsite-nav {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(15px, 1.8vw, 34px);
+  margin-left: auto;
+}
+.subsite-nav a {
+  position: relative;
+  display: grid;
+  height: 100%;
+  place-items: center;
+  color: #44546a;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.22s;
+}
+.subsite-nav a::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  content: '';
+  background: #287cf9;
+  transform: scaleX(0);
+  transition: transform 0.24s ease;
+}
+.is-interior .subsite-nav a::after {
+  right: 20%;
+  left: 20%;
+  border-radius: 2px 2px 0 0;
+  background: linear-gradient(90deg, #287cf9, #61c4ee);
+}
+.subsite-nav a:hover,
+.subsite-nav a.active {
+  color: #2078eb;
+  font-weight: 600;
+}
+.subsite-nav a:hover::after,
+.subsite-nav a.active::after {
+  transform: scaleX(1);
+}
+.header-consult {
+  height: 34px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 17px;
+  border-radius: 6px;
+  color: #fff;
+  background: #087dfb;
+  box-shadow: 0 6px 15px rgba(30, 127, 255, 0.2);
+  font-size: 13px;
+  font-weight: 600;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+}
+.is-interior .header-consult {
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 5px;
+  background: linear-gradient(105deg, #1877ee, #2e9def);
+  box-shadow: 0 8px 18px rgba(30, 127, 255, 0.2);
+}
+.header-consult:hover {
+  background: #056ee2;
+  box-shadow: 0 9px 20px rgba(30, 127, 255, 0.28);
+  transform: translateY(-1px);
+}
+.header-consult:active {
+  transform: translateY(1px) scale(0.98);
+}
+.subsite-menu,
+.subsite-mobile-nav {
+  display: none;
+}
+@media (max-width: 1080px) {
+  .subsite-nav {
+    gap: 14px;
+  }
+  .subsite-nav a {
+    font-size: 13px;
+  }
+  .subsite-brand {
+    width: 165px;
+  }
+}
+@media (max-width: 820px) {
+  .subsite-header {
+    height: 58px;
+  }
+  .subsite-brand {
+    width: 158px;
+  }
+  .subsite-nav,
+  .header-consult {
+    display: none;
+  }
+  .subsite-menu {
+    position: relative;
+    width: 42px;
+    height: 42px;
+    display: block;
+    margin-left: auto;
+    display: grid;
+    place-items: center;
+    border-radius: 6px;
+    color: #287cf9;
+    background: #edf6ff;
+  }
+  .is-interior .subsite-menu {
+    border: 1px solid rgba(61, 137, 225, 0.12);
+    border-radius: 5px;
+  }
+  .subsite-menu :deep(.app-icon) {
+    width: 20px;
+    height: 20px;
+  }
+  .subsite-mobile-nav {
+    position: fixed;
+    z-index: 29;
+    top: 58px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    overflow-y: auto;
+    background: rgba(247, 251, 255, 0.98);
+    backdrop-filter: blur(20px);
+  }
+  .subsite-mobile-nav .page-width {
+    display: grid;
+    padding-top: 20px;
+  }
+  .subsite-mobile-nav a,
+  .subsite-mobile-nav button {
+    min-height: 58px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+    border-bottom: 1px solid rgba(48, 112, 192, 0.1);
+    color: #4b5c72;
+    background: transparent;
+    font-size: 16px;
+    text-decoration: none;
+  }
+  .subsite-mobile-nav a.active {
+    color: #1478fb;
+    font-weight: 700;
+  }
+  .subsite-mobile-nav button {
+    min-height: 50px;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 24px;
+    padding: 0 20px;
+    border: 0;
+    border-radius: 7px;
+    color: #fff;
+    background: linear-gradient(100deg, #453cff, #00adf6);
+  }
+}
+.mobile-navigation-enter-active,
+.mobile-navigation-leave-active {
+  transition:
+    opacity 0.22s,
+    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.mobile-navigation-enter-from,
+.mobile-navigation-leave-to {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+</style>
diff --git a/composables/useConsultation.js b/composables/useConsultation.js
new file mode 100644
index 0000000..02ee60f
--- /dev/null
+++ b/composables/useConsultation.js
@@ -0,0 +1,40 @@
+export function useConsultation() {
+  const isOpen = useState('consultation-open', () => false)
+  const context = useState('consultation-context', () => ({
+    title: '预约免费 GEO 诊断',
+    source: '全站咨询入口',
+    industry: ''
+  }))
+  const form = useState('consultation-form', () => ({
+    name: '',
+    company: '',
+    contact: '',
+    industry: '',
+    need: '',
+    message: '',
+    consent: false
+  }))
+
+  function openConsultation(payload = {}) {
+    context.value = {
+      title: payload.title || '预约免费 GEO 诊断',
+      source: payload.source || '全站咨询入口',
+      industry: payload.industry || ''
+    }
+
+    if (payload.industry) form.value.industry = payload.industry
+    isOpen.value = true
+  }
+
+  function closeConsultation() {
+    isOpen.value = false
+  }
+
+  return {
+    isOpen,
+    context,
+    form,
+    openConsultation,
+    closeConsultation
+  }
+}
diff --git a/data/cases.js b/data/cases.js
new file mode 100644
index 0000000..e416d25
--- /dev/null
+++ b/data/cases.js
@@ -0,0 +1,138 @@
+export const caseCategories = ['全部', '企业服务', '教育培训', '本地生活', '医疗健康', '电商零售']
+
+export const featuredCase = {
+  slug: 'k12-geo-growth',
+  industry: '教育培训',
+  client: '某 K12 全科在线教育品牌',
+  title: '420 个真实问题，5 个月进入 AI 推荐列表',
+  summary:
+    '围绕家长在 AI 平台中的真实提问场景，完成问题库搭建、内容体系建设、可信信源分发与持续效果监测。',
+  duration: '5 个月',
+  cover: '/images/lanhu/slices/home-group92-image17@2x.png',
+  metrics: [
+    ['11% → 88%', '核心问题覆盖率'],
+    ['+215%', '官网 AI 来源流量'],
+    ['+190%', '精准学员咨询量']
+  ]
+}
+
+export const resultSnapshots = [
+  {
+    industry: '企业服务',
+    client: '某 B2B 企业服务客户',
+    title: '从行业问题切入，让品牌提前进入采购比选',
+    metric: '+320%',
+    metricLabel: 'AI 搜索全域曝光',
+    secondary: '月精准线索新增 80+',
+    cover: '/images/lanhu/slices/home-group90-image15@2x.png'
+  },
+  {
+    industry: '本地生活',
+    client: '某区域本地生活品牌',
+    title: '占住同城搜索入口，缩短从看到到到店',
+    metric: '95%',
+    metricLabel: '品牌词搜索覆盖率',
+    secondary: '到店咨询量提升 170%',
+    cover: '/images/lanhu/slices/home-group91-image16@2x.png'
+  },
+  {
+    industry: '教育培训',
+    client: '某职业教育机构',
+    title: '用长尾问题覆盖课程比较与口碑验证',
+    metric: '1200+',
+    metricLabel: '长尾关键词布局',
+    secondary: '有效线索成本降低 45%',
+    cover: '/images/lanhu/slices/home-group93-image18@2x.png'
+  },
+  {
+    industry: '电商零售',
+    client: '某新消费零售品牌',
+    title: '串起种草、主动搜索与店铺承接',
+    metric: '3 万+',
+    metricLabel: '内容资产沉淀',
+    secondary: '自然流量占比提升至 60%',
+    cover: '/images/lanhu/slices/home-group94-image20@2x.png'
+  }
+]
+
+export const k12CaseDetail = {
+  ...featuredCase,
+  description:
+    '某 K12 全科在线教育品牌于 2025 年开展 GEO 全链路优化。项目在合规框架下，将品牌推进家长的 AI 选型、课程比较与口碑验证场景。',
+  background: [
+    '该客户为国内某初高中全科培优在线教育品牌，具备自研教研体系、全职教师团队，并覆盖同步辅导、升学冲刺和专项提分等课程产品。',
+    '品牌已有较好的用户基础，但信息流与竞价渠道成本持续走高，同时 K12 行业监管趋严，营销内容必须更加审慎、真实与合规。',
+    '越来越多家长会先向 AI 询问学科提分方法、线上辅导机构选择和初三冲刺课程，再进一步比较机构、课程与口碑。项目初期，品牌在核心推荐问题中的出现率较低，师资和课程优势也没有被完整呈现。'
+  ],
+  objectives: [
+    '在合规前提下提升品牌在主流 AI 平台中的认知与提及率',
+    '进入家长的机构选型、课程比较和口碑验证场景',
+    '把 AI 搜索需求与官网课程页、咨询入口稳定连接'
+  ],
+  baseline: [
+    ['核心推荐问题', '品牌精准提及率约 11%'],
+    ['多平台表现', '字节系、百度系等平台整体提及率约 15%'],
+    ['推荐排序', '首推率为 0，前三推荐率不足 8%'],
+    ['信息完整度', '师资、教研与真实案例信息分散且部分更新滞后'],
+    ['转化链路', 'AI 搜索需求与官网、课程页和咨询入口缺少稳定承接']
+  ],
+  questionFramework: [
+    {
+      title: '精准选型类',
+      content: '机构推荐、课程对比、价格区间、适合人群与报名咨询。',
+      goal: '承接高意向用户，提高品牌进入推荐列表的概率。'
+    },
+    {
+      title: '长尾场景类',
+      content: '学科提分方法、年级规划、备考节奏与常见学习误区。',
+      goal: '扩大前置需求覆盖，让品牌进入用户早期认知。'
+    },
+    {
+      title: '能力证明类',
+      content: '师资背景、教研体系、课程结构、教学服务与办学成果。',
+      goal: '建立完整、专业且可信的品牌认知。'
+    },
+    {
+      title: '口碑验证类',
+      content: '学员案例、家长评价、服务体验与课程反馈。',
+      goal: '降低家长决策顾虑，强化咨询和报名信心。'
+    }
+  ],
+  phases: [
+    {
+      number: '01',
+      title: '先建立基础可见性与场景认知',
+      text: '围绕学习方法、备考规划和提分误区等泛需求主题，输出知识科普与问题解答，让品牌在家长搜索学习问题时稳定出现。'
+    },
+    {
+      number: '02',
+      title: '再强化决策信任与推荐优先级',
+      text: '围绕师资、教研、课程体系、服务流程与真实案例补充高信任内容，并用外部权威信源增加 AI 引用依据。'
+    }
+  ],
+  distribution: [
+    ['权威层', '教育类媒体、行业垂直平台', '补充品牌和课程体系的第三方公信力'],
+    ['讨论层', '教育创作者、家长社区、知识问答平台', '形成贴近真实用户场景的口碑内容'],
+    ['平台层', '官网、小程序、课程页与咨询入口', '承接 AI 搜索带来的访问和咨询需求']
+  ],
+  resultTable: [
+    ['核心问题覆盖率', '11%', '88%', '品牌在核心家长问题中的稳定出现能力明显提升'],
+    ['核心推荐问题前三率', '不足 8%', '76%', '多个细分学科场景进入前三推荐'],
+    ['能力类问题覆盖率', '基础薄弱', '95%', '师资、教研与课程体系被更完整呈现'],
+    ['口碑类问题覆盖率', '基础薄弱', '90%', '学员案例与家长评价类内容形成补充'],
+    ['官网 AI 来源流量', '基线值', '+215%', 'AI 搜索带来的站点访问明显提升'],
+    ['精准学员咨询量', '基线值', '+190%', '咨询增长与 GEO 覆盖率提升呈现较强相关性'],
+    ['线索有效率', '传统信息流约 28%', 'AI 渠道约 65%', 'AI 搜索用户的决策意图更明确'],
+    ['线上获客成本', '基线值', '-38%', '获客结构得到优化']
+  ],
+  outcomes: [
+    ['210+ 篇', '累计产出合规内容'],
+    ['15 类', '覆盖媒体、社区与知识平台渠道'],
+    ['第 4 个月', '客户启动年度续约沟通'],
+    ['新增需求', '小学段课程 GEO 推广进入沟通']
+  ]
+}
+
+export function getCaseBySlug(slug) {
+  return slug === k12CaseDetail.slug ? k12CaseDetail : null
+}
diff --git a/data/insights.js b/data/insights.js
new file mode 100644
index 0000000..5e58850
--- /dev/null
+++ b/data/insights.js
@@ -0,0 +1,114 @@
+export const insightCategories = [
+  '全部',
+  '最新文章',
+  '行业动态',
+  'GEO 行业知识',
+  '实战复盘',
+  '行业白皮书'
+]
+
+export const insights = [
+  {
+    slug: 'what-is-geo',
+    category: 'GEO 行业知识',
+    title: 'GEO 是什么：从搜索排名到 AI 推荐的增长逻辑',
+    excerpt:
+      '当用户不再逐页浏览搜索结果，而是直接向 AI 提问，品牌需要重新理解内容、信源与推荐之间的关系。',
+    date: '2026-07-12',
+    readingTime: '8 分钟',
+    views: '2,438',
+    cover: '/images/lanhu/slices/home-group95-image21@2x.png',
+    featured: true,
+    lead: 'GEO（生成式引擎优化）不是给传统 SEO 换一个名字。它关注的是：当用户向 AI 描述需求时，品牌能否被准确理解、被可信来源支持，并进入最终答案。',
+    sections: [
+      {
+        title: '用户的搜索动作正在发生什么变化',
+        paragraphs: [
+          '传统搜索通常从关键词开始。用户打开多个网页，比较产品、价格、口碑与服务，再自行形成判断。AI 搜索把大量比较工作压缩进一次对话：用户描述场景，平台整理信息并直接给出总结或推荐。',
+          '这意味着品牌竞争不再只发生在结果页的排名位置，也发生在 AI 对品牌的认知结构中。企业公开信息是否完整、不同平台的说法是否一致、第三方信源是否足够可信，都会影响品牌是否进入回答。'
+        ]
+      },
+      {
+        title: 'GEO 与 SEO 的关注点并不相同',
+        paragraphs: [
+          'SEO 重点解决网页能否被搜索引擎抓取、理解并获得较好的自然排名。GEO 更进一步，关注内容能否成为生成式答案中的有效依据。两者并不冲突：清晰的网站结构仍然重要，但仅有站内页面已经不足以支撑完整的 AI 品牌认知。'
+        ],
+        comparison: [
+          ['关注对象', '搜索结果页与网页排名', 'AI 回答中的理解、提及与推荐'],
+          ['内容范围', '以官网和可索引页面为主', '官网、媒体、社区、问答与真实讨论'],
+          ['衡量方式', '排名、点击率、自然流量', '问题覆盖率、提及率、推荐率与咨询转化'],
+          ['长期资产', '关键词与站点权重', '跨平台一致的品牌事实与可信信源']
+        ]
+      },
+      {
+        title: '一套可执行的 GEO 工作从哪里开始',
+        paragraphs: [
+          '第一步不是批量生产文章，而是建立问题库。企业需要知道用户在认知、比较、验证和决策阶段分别会问什么，再检查品牌目前在这些问题中的真实表现。',
+          '完成基线诊断后，再围绕业务事实建设内容，匹配官网、权威媒体、垂直平台和真实讨论场景，并持续观察不同 AI 平台的引用与推荐变化。最终，所有曝光都应该连接到可以承接需求的页面和咨询入口。'
+        ]
+      },
+      {
+        title: '判断 GEO 是否有效，不能只看曝光',
+        paragraphs: [
+          '有效的 GEO 指标应覆盖三个层次：品牌是否进入核心问题、是否被准确描述和优先推荐，以及这些认知是否带来网站访问、咨询和有效线索。只有把内容表现与业务结果放在同一条链路里，优化才不会停留在表面。'
+        ]
+      }
+    ]
+  },
+  {
+    slug: 'ai-search-decision-path',
+    category: '行业动态',
+    title: 'AI 搜索如何改写用户的品牌决策路径',
+    excerpt: '从“找网页”到“要答案”，企业需要在认知、比较和验证三个阶段重新安排信息。',
+    date: '2026-07-08',
+    readingTime: '6 分钟',
+    views: '1,726',
+    cover: '/images/lanhu/slices/home-group90-image15@2x.png'
+  },
+  {
+    slug: 'geo-question-library',
+    category: '实战复盘',
+    title: '问题库不是关键词表：如何覆盖一条完整决策旅程',
+    excerpt: '把零散关键词整理成认知、比较、能力证明与口碑验证四类真实问题。',
+    date: '2026-07-03',
+    readingTime: '7 分钟',
+    views: '1,394',
+    cover: '/images/lanhu/slices/home-group92-image17@2x.png'
+  },
+  {
+    slug: 'credible-source-matrix',
+    category: 'GEO 行业知识',
+    title: '可信信源矩阵：为什么只更新官网还不够',
+    excerpt: 'AI 对品牌的判断来自多个公开来源，一致、真实、可验证的信息比单点声量更重要。',
+    date: '2026-06-27',
+    readingTime: '5 分钟',
+    views: '968',
+    cover: '/images/lanhu/slices/home-group91-image16@2x.png'
+  },
+  {
+    slug: 'geo-metrics',
+    category: '最新文章',
+    title: '除了提及率，GEO 项目还应该看哪些指标',
+    excerpt: '从问题覆盖、推荐顺序到官网流量和线索质量，建立一套能连接业务结果的指标体系。',
+    date: '2026-06-19',
+    readingTime: '9 分钟',
+    views: '1,185',
+    cover: '/images/lanhu/slices/home-group93-image18@2x.png'
+  },
+  {
+    slug: 'geo-industry-report-2026',
+    category: '行业白皮书',
+    title: '2026 AI 搜索与品牌增长观察',
+    excerpt: '梳理用户搜索行为、企业内容建设和 GEO 评估框架的关键变化。',
+    date: '2026-06-10',
+    readingTime: '白皮书',
+    views: '836',
+    cover: '/images/lanhu/slices/home-group95-image21@2x.png'
+  }
+]
+
+export const featuredInsight = insights.find((item) => item.featured)
+
+export function getInsightBySlug(slug) {
+  return insights.find((item) => item.slug === slug) || null
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 014e5aa..6eefaca 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -3,7 +3,7 @@ export default defineNuxtConfig({
     compatibilityVersion: 3
   },
   modules: ['@nuxtjs/tailwindcss'],
-  css: ['~/assets/css/main.css'],
+  css: ['~/assets/css/main.css', '~/assets/css/interior-polish.css'],
   vite: {
     server: {
       watch: {
diff --git a/package-lock.json b/package-lock.json
index 3d2b243..52d24c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "name": "damabang-geo-official-site",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.2",
         "@nuxtjs/tailwindcss": "^6.14.0",
         "gsap": "^3.15.0",
         "nuxt": "^3.17.0"
@@ -596,6 +597,15 @@
       "integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
       "license": "MIT"
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.10.0.tgz",
diff --git a/package.json b/package.json
index 442986e..141f1cc 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "@nuxtjs/tailwindcss": "^6.14.0",
     "gsap": "^3.15.0",
     "nuxt": "^3.17.0"
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 0000000..ef55272
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,1303 @@
+<script setup>
+import { gsap } from 'gsap'
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+
+const pageRoot = ref(null)
+const { openConsultation } = useConsultation()
+let animationContext
+
+useHead({
+  title: '关于我们｜大马棒·云途全域 GEO',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '大马棒·云途全域 GEO 是聚焦 AI 搜索增长的全链路服务商，提供可见性诊断、策略规划、内容建设、信源分发与效果复盘。'
+    }
+  ]
+})
+
+const stats = [
+  ['1000+', '累计服务客户'],
+  ['12+', '覆盖主流行业'],
+  ['5 万', '真人内容生产网络'],
+  ['5000+', '权威媒体资源']
+]
+
+const serviceFlow = [
+  ['01', '可见性诊断', '测试品牌在主流 AI 平台中的认知、提及与推荐表现。'],
+  ['02', '策略规划', '围绕业务目标、用户问题与行业特征确定 GEO 路径。'],
+  ['03', '内容建设', '把真实业务信息转化为用户愿意读、AI 能识别的内容。'],
+  ['04', '信源分发', '匹配权威媒体、垂直平台与真实讨论场景。'],
+  ['05', '效果复盘', '持续监测覆盖率、推荐率、流量与咨询线索质量。']
+]
+
+const timeline = [
+  {
+    year: '2023',
+    title: '核心团队组建',
+    events: ['深耕内容营销与搜索优化领域', '开始搭建分布式真人内容生产体系']
+  },
+  {
+    year: '2024',
+    title: '推出云途全域服务品牌',
+    events: ['真人内容生产网络突破 2 万人', '合作媒体超过 3000 家']
+  },
+  {
+    year: '2025',
+    title: '系统进入 GEO 赛道',
+    events: [
+      '累计服务客户突破 200 家，覆盖 10+ 行业',
+      '真人网络升级至 5 万人，媒体资源突破 5000 家'
+    ]
+  },
+  {
+    year: '2026',
+    title: '全面升级 AI 搜索增长体系',
+    events: ['打通品牌曝光与营销获客闭环', '服务客户突破 1000 家，覆盖 12+ 主流行业']
+  }
+]
+
+const teamCapabilities = [
+  ['搜索理解', '经历 PC 搜索、移动搜索到 AI 搜索的持续变化。'],
+  ['内容运营', '理解平台规则，也理解真实用户愿意阅读和相信什么。'],
+  ['媒体资源', '长期积累权威媒体、垂直信源与真实创作者网络。'],
+  ['业务转化', '不止关注曝光，更关注咨询、线索质量与长期资产。']
+]
+
+function requestDiagnosis(source) {
+  openConsultation({ title: '预约免费 GEO 增长诊断', source })
+}
+
+function scrollToStory() {
+  document.getElementById('company-story')?.scrollIntoView({ behavior: 'smooth' })
+}
+
+onMounted(async () => {
+  if (!pageRoot.value || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  await nextTick()
+  animationContext = gsap.context(() => {
+    gsap.to('.about-orbit-a', { rotation: 360, duration: 34, repeat: -1, ease: 'none' })
+    gsap.to('.about-orbit-b', { rotation: -360, duration: 44, repeat: -1, ease: 'none' })
+  }, pageRoot.value)
+})
+
+onBeforeUnmount(() => animationContext?.revert())
+</script>
+
+<template>
+  <div ref="pageRoot" class="about-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="about-hero">
+        <div class="about-hero-mesh" aria-hidden="true"></div>
+        <div class="page-width about-hero-grid">
+          <div class="about-hero-copy">
+            <p class="page-eyebrow">大马棒 · 云途全域 GEO</p>
+            <h1>云途全域</h1>
+            <h2>一家帮品牌在 AI 搜索里<br /><span>被看见、被信任、被选择</span>的全链路服务商</h2>
+            <p>
+              以“大马棒，让品牌在 AI
+              时代拥有持续增长力”为使命，专注打造兼具品牌声量沉淀与获客实效的增长解决方案。
+            </p>
+            <div class="hero-actions">
+              <button
+                class="primary-button"
+                type="button"
+                @click="requestDiagnosis('关于我们页 Hero')"
+              >
+                认识合作方式 <AppIcon name="arrow-right" />
+              </button>
+              <button class="text-action" type="button" @click="scrollToStory">
+                了解我们的故事 <AppIcon name="bottom" />
+              </button>
+            </div>
+          </div>
+
+          <div class="about-hero-visual" aria-label="云途全域 GEO 全链路服务示意图">
+            <div class="about-orbit about-orbit-a">
+              <i v-for="index in 5" :key="`a-${index}`"></i>
+            </div>
+            <div class="about-orbit about-orbit-b">
+              <i v-for="index in 4" :key="`b-${index}`"></i>
+            </div>
+            <div class="about-core">
+              <small>YUNTU GEO</small><strong>云途全域</strong><span>AI 搜索增长</span>
+            </div>
+            <div class="about-node about-node-1"><span>01</span><strong>诊断</strong></div>
+            <div class="about-node about-node-2"><span>02</span><strong>策略</strong></div>
+            <div class="about-node about-node-3"><span>03</span><strong>内容</strong></div>
+            <div class="about-node about-node-4"><span>04</span><strong>分发</strong></div>
+            <div class="about-node about-node-5"><span>05</span><strong>复盘</strong></div>
+            <div class="hero-status"><span></span> 从品牌认知到咨询转化</div>
+          </div>
+        </div>
+      </section>
+
+      <section id="company-story" class="company-story-section">
+        <div class="page-width company-story-grid">
+          <header class="story-heading">
+            <p class="section-kicker">我们是谁</p>
+            <h2>帮助企业把公开信息，沉淀为 AI 可以识别和引用的数字信任资产</h2>
+          </header>
+          <div class="story-content">
+            <p>
+              大马棒·云途全域 GEO 是国内深耕 AI 搜索增长领域的专业全链路服务商，聚焦
+              GEO（生成式引擎优化）核心赛道，秉持“品效协同、长效增长”的服务理念。
+            </p>
+            <p>
+              相比单纯追求曝光的传统内容投放，我们更关注企业在 AI
+              回答中的“是否被理解、是否被信任、是否被推荐”，并把内容建设与真实业务转化连接起来。
+            </p>
+            <blockquote>
+              <span>我们的使命</span>
+              大马棒，让品牌在 AI 时代拥有持续增长力。
+            </blockquote>
+          </div>
+        </div>
+      </section>
+
+      <section class="search-change-section">
+        <div class="page-width search-change-grid">
+          <div class="change-visual">
+            <div class="change-track">
+              <div class="change-step old">
+                <span>过去</span><strong>搜索网页</strong>
+                <p>输入关键词<br />逐页比较结果</p>
+              </div>
+              <i>→</i>
+              <div class="change-step now">
+                <span>现在</span><strong>向 AI 提问</strong>
+                <p>直接获得总结<br />与品牌推荐</p>
+              </div>
+            </div>
+            <div class="change-question">“哪一类方案更适合我的业务？”</div>
+          </div>
+          <div class="change-copy">
+            <p class="section-kicker">用户获取信息的方式变了</p>
+            <h2>从搜索网页，逐步转向向 AI 提问</h2>
+            <p>
+              GEO
+              不是简单堆叠文章或批量铺稿，而是围绕真实业务信息、用户决策意图、可信信源和内容结构，系统提升品牌在主流
+              AI 平台中的认知准确度、提及率与推荐优先级。
+            </p>
+            <div class="change-principles">
+              <span>真实业务事实</span><span>用户决策问题</span><span>可信公开信源</span
+              ><span>可追踪转化</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="company-stats-section">
+        <div class="page-width company-stats-grid">
+          <header>
+            <p class="section-kicker">持续积累的基础能力</p>
+            <h2>规模不是目的，是稳定交付的基础</h2>
+          </header>
+          <div class="stats-row">
+            <article v-for="(stat, index) in stats" :key="stat[1]">
+              <span>0{{ index + 1 }}</span
+              ><strong>{{ stat[0] }}</strong>
+              <p>{{ stat[1] }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="method-section">
+        <div class="page-width">
+          <header class="center-heading">
+            <p class="section-kicker">全链路服务方法</p>
+            <h2>从 AI 可见性诊断，到效果复盘</h2>
+            <p>每一个环节都围绕真实业务目标推进，避免内容、媒体和转化承接各做一段。</p>
+          </header>
+          <div class="method-flow">
+            <article v-for="step in serviceFlow" :key="step[0]">
+              <div class="method-marker">{{ step[0] }}</div>
+              <h3>{{ step[1] }}</h3>
+              <p>{{ step[2] }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="timeline-section">
+        <div class="page-width timeline-layout">
+          <header class="timeline-heading">
+            <p class="section-kicker">发展历程</p>
+            <h2>从内容与搜索经验，走向 AI 搜索增长</h2>
+            <p>
+              平台和算法持续变化，但我们做的事情始终一致：让品牌在用户搜索时出现，在用户选择时被信任。
+            </p>
+          </header>
+          <div class="timeline-list">
+            <article
+              v-for="(item, index) in timeline"
+              :key="item.year"
+              :class="{ current: index === timeline.length - 1 }"
+            >
+              <div class="timeline-year">{{ item.year }}</div>
+              <div>
+                <h3>{{ item.title }}</h3>
+                <ul>
+                  <li v-for="event in item.events" :key="event">{{ event }}</li>
+                </ul>
+              </div>
+              <span class="timeline-dot"></span>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="team-section">
+        <div class="page-width team-grid">
+          <div class="team-statement">
+            <p class="section-kicker">团队介绍</p>
+            <h2>十余年里，经历搜索从 PC 到移动，也正在经历从传统搜索到 AI 搜索</h2>
+            <blockquote>
+              算法在变，平台在变，用户获取信息的方式在变；帮助品牌被用户找到和信任这件事，没有变。
+            </blockquote>
+          </div>
+          <div class="team-capabilities">
+            <article v-for="(capability, index) in teamCapabilities" :key="capability[0]">
+              <span>0{{ index + 1 }}</span>
+              <h3>{{ capability[0] }}</h3>
+              <p>{{ capability[1] }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="contact-section">
+        <div class="page-width contact-grid">
+          <header class="contact-heading">
+            <p class="section-kicker">联系我们</p>
+            <h2>从一次真实沟通开始</h2>
+            <p>说说行业、现状和目标，我们会先判断 GEO 是否适合当前业务阶段。</p>
+            <button
+              class="primary-button small"
+              type="button"
+              @click="requestDiagnosis('关于我们联系板块')"
+            >
+              预约专属顾问 <AppIcon name="arrow-right" />
+            </button>
+          </header>
+          <div class="contact-details">
+            <dl>
+              <div>
+                <dt>公司名称</dt>
+                <dd>成都大马棒传媒有限公司</dd>
+              </div>
+              <div>
+                <dt>公司地址</dt>
+                <dd>成都市武侯区芯通科技大厦 B 座 9 楼</dd>
+              </div>
+              <div>
+                <dt>联系电话</dt>
+                <dd>待补充</dd>
+              </div>
+              <div>
+                <dt>商务邮箱</dt>
+                <dd>待补充</dd>
+              </div>
+            </dl>
+            <div class="contact-qr">
+              <span aria-hidden="true"></span><strong>扫码添加专属顾问</strong
+              ><small>获取 1 对 1 GEO 增长诊断</small>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="about-cta">
+        <div class="about-cta-art" aria-hidden="true"></div>
+        <div class="page-width about-cta-content">
+          <p>AI 搜索正在成为新的品牌决策入口</p>
+          <h2>让公开内容不再分散，<br />沉淀为持续产生价值的品牌资产</h2>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestDiagnosis('关于我们页底部 CTA')"
+          >
+            预约免费 GEO 诊断 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.about-page {
+  --about-blue: #237df0;
+  overflow: hidden;
+  color: #344359;
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.page-eyebrow,
+.section-kicker {
+  margin: 0;
+  color: var(--about-blue);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.about-hero {
+  position: relative;
+  min-height: 690px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f1f7ff;
+}
+.about-hero-mesh {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 80% 29%, rgba(75, 159, 255, 0.25), transparent 28%),
+    radial-gradient(circle at 15% 91%, rgba(98, 201, 235, 0.12), transparent 28%),
+    linear-gradient(110deg, #f8fbff, #e7f2ff);
+}
+.about-hero-mesh::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.18;
+  background-image:
+    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
+  background-size: 58px 58px;
+  mask-image: linear-gradient(90deg, transparent 20%, #000);
+}
+.about-hero-grid {
+  min-height: 690px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 60px;
+  padding: 55px 0 62px;
+}
+.about-hero-copy h1 {
+  margin: 16px 0 0;
+  color: #344359;
+  font-size: clamp(55px, 5.4vw, 86px);
+  letter-spacing: -0.06em;
+  line-height: 1;
+}
+.about-hero-copy h2 {
+  max-width: 760px;
+  margin: 24px 0 0;
+  color: #4d5d72;
+  font-size: clamp(25px, 2.25vw, 37px);
+  letter-spacing: -0.035em;
+  line-height: 1.42;
+}
+.about-hero-copy h2 span {
+  color: #1978ef;
+}
+.about-hero-copy > p:nth-of-type(2) {
+  max-width: 660px;
+  margin: 23px 0 0;
+  color: #68798e;
+  font-size: 15px;
+  line-height: 1.85;
+}
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  margin-top: 31px;
+}
+.text-action {
+  color: #53667e;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 600;
+}
+.text-action span {
+  display: inline-grid;
+  width: 28px;
+  height: 28px;
+  margin-left: 8px;
+  place-items: center;
+  border: 1px solid #bbcee4;
+  border-radius: 50%;
+  color: #237df0;
+  transition: 0.2s;
+}
+.text-action:hover span {
+  background: #fff;
+  transform: translateY(3px);
+}
+.about-hero-visual {
+  position: relative;
+  width: min(610px, 100%);
+  aspect-ratio: 1.04;
+  justify-self: end;
+}
+.about-hero-visual::before {
+  position: absolute;
+  inset: 6% 1% 0;
+  content: '';
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.95) 0 23%,
+      rgba(130, 194, 255, 0.21) 24% 47%,
+      transparent 48%
+    ),
+    url('/images/lanhu/slices/hero-geo-visual@2x.png') 70% 47% / 168% auto no-repeat;
+  filter: drop-shadow(0 32px 48px rgba(51, 119, 204, 0.18));
+  mask-image: radial-gradient(ellipse, #000 50%, transparent 75%);
+}
+.about-orbit {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  border: 1px solid rgba(51, 133, 232, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.about-orbit-a {
+  width: 385px;
+  height: 385px;
+}
+.about-orbit-b {
+  width: 515px;
+  height: 515px;
+  border-style: dashed;
+  opacity: 0.7;
+}
+.about-orbit i {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: #2782f2;
+  box-shadow: 0 6px 16px rgba(35, 124, 232, 0.36);
+}
+.about-orbit i:nth-child(1) {
+  top: -6px;
+  left: 50%;
+}
+.about-orbit i:nth-child(2) {
+  top: 25%;
+  right: 1%;
+  background: #52c2e7;
+}
+.about-orbit i:nth-child(3) {
+  right: 12%;
+  bottom: 10%;
+  background: #736ff1;
+}
+.about-orbit i:nth-child(4) {
+  bottom: 8%;
+  left: 15%;
+  background: #4a9ef2;
+}
+.about-orbit i:nth-child(5) {
+  top: 26%;
+  left: 1%;
+  background: #69c3e7;
+}
+.about-core {
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  width: 165px;
+  height: 165px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 12px solid rgba(255, 255, 255, 0.64);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #2b82f0, #48b8e8);
+  box-shadow: 0 24px 48px rgba(34, 117, 223, 0.29);
+  transform: translate(-50%, -50%);
+}
+.about-core small {
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  opacity: 0.75;
+}
+.about-core strong {
+  margin-top: 7px;
+  font-size: 21px;
+}
+.about-core span {
+  margin-top: 4px;
+  font-size: 10px;
+  opacity: 0.76;
+}
+.about-node {
+  position: absolute;
+  z-index: 5;
+  width: 78px;
+  height: 72px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 18px 6px 18px 6px;
+  color: #416991;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 15px 34px rgba(55, 112, 184, 0.15);
+  backdrop-filter: blur(10px);
+}
+.about-node span {
+  color: #96acc4;
+  font-size: 8px;
+}
+.about-node strong {
+  margin-top: 4px;
+  font-size: 12px;
+}
+.about-node-1 {
+  top: 6%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.about-node-2 {
+  top: 29%;
+  right: 2%;
+}
+.about-node-3 {
+  right: 9%;
+  bottom: 11%;
+}
+.about-node-4 {
+  bottom: 7%;
+  left: 25%;
+}
+.about-node-5 {
+  top: 38%;
+  left: 0;
+}
+.hero-status {
+  position: absolute;
+  right: 7%;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #74869c;
+  font-size: 11px;
+}
+.hero-status span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #28a3ed;
+  box-shadow: 0 0 0 5px rgba(40, 163, 237, 0.12);
+}
+.company-story-section {
+  scroll-margin-top: 70px;
+  padding: 116px 0 132px;
+}
+.company-story-grid {
+  display: grid;
+  grid-template-columns: 0.8fr 1.2fr;
+  gap: 95px;
+  align-items: start;
+}
+.story-heading {
+  position: sticky;
+  top: 105px;
+}
+.story-heading h2,
+.change-copy h2,
+.company-stats-grid h2,
+.center-heading h2,
+.timeline-heading h2,
+.team-statement h2,
+.contact-heading h2 {
+  margin: 15px 0 0;
+  color: #344359;
+  font-size: clamp(32px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.story-content > p {
+  margin: 0 0 21px;
+  color: #687a90;
+  font-size: 15px;
+  line-height: 1.95;
+}
+.story-content blockquote {
+  margin: 35px 0 0;
+  padding: 32px 36px;
+  border-radius: 7px 18px 7px 18px;
+  color: #fff;
+  background: linear-gradient(135deg, #2778dc, #42afe4);
+  box-shadow: 0 24px 50px rgba(38, 113, 205, 0.2);
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 1.55;
+}
+.story-content blockquote span {
+  display: block;
+  margin-bottom: 12px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.13em;
+  opacity: 0.72;
+}
+.search-change-section {
+  padding: 112px 0 128px;
+  background: #eef7ff;
+}
+.search-change-grid {
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 80px;
+  align-items: center;
+}
+.change-visual {
+  position: relative;
+  min-height: 430px;
+  padding: 55px;
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  border-radius: 20px 7px 20px 7px;
+  background:
+    radial-gradient(circle at 72% 28%, rgba(81, 160, 255, 0.27), transparent 25%),
+    linear-gradient(145deg, #f3f9ff, #dcecff);
+  box-shadow:
+    0 26px 55px rgba(57, 119, 197, 0.12),
+    inset 0 1px 0 #fff;
+}
+.change-track {
+  display: grid;
+  grid-template-columns: 1fr 50px 1fr;
+  align-items: center;
+  gap: 15px;
+}
+.change-track > i {
+  color: #5aa2ed;
+  font-size: 27px;
+  font-style: normal;
+  text-align: center;
+}
+.change-step {
+  min-height: 245px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 28px;
+  border-radius: 14px 5px 14px 5px;
+  background: rgba(255, 255, 255, 0.74);
+}
+.change-step span {
+  color: #8ba5c1;
+  font-size: 9px;
+  font-weight: 700;
+}
+.change-step strong {
+  margin-top: 23px;
+  color: #425a75;
+  font-size: 23px;
+}
+.change-step p {
+  margin: 12px 0 0;
+  color: #7b8a9c;
+  font-size: 12px;
+  line-height: 1.75;
+}
+.change-step.now {
+  color: #fff;
+  background: linear-gradient(145deg, #3185ed, #4eb7e7);
+  box-shadow: 0 18px 34px rgba(44, 128, 225, 0.2);
+}
+.change-step.now span,
+.change-step.now p {
+  color: rgba(255, 255, 255, 0.75);
+}
+.change-step.now strong {
+  color: #fff;
+}
+.change-question {
+  position: absolute;
+  right: 55px;
+  bottom: 27px;
+  left: 55px;
+  color: #5980aa;
+  font-size: 11px;
+  text-align: center;
+}
+.change-copy > p:nth-of-type(2) {
+  margin: 20px 0 0;
+  color: #718197;
+  font-size: 14px;
+  line-height: 1.85;
+}
+.change-principles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 24px;
+}
+.change-principles span {
+  padding: 8px 11px;
+  border-radius: 5px;
+  color: #557598;
+  background: rgba(255, 255, 255, 0.72);
+  font-size: 10px;
+}
+.company-stats-section {
+  padding: 110px 0 125px;
+}
+.company-stats-grid > header {
+  max-width: 760px;
+}
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  margin-top: 55px;
+}
+.stats-row article {
+  min-height: 190px;
+  padding: 30px;
+  border-radius: 15px 5px 15px 5px;
+  background: #f1f6fc;
+  transition: 0.24s;
+}
+.stats-row article:hover {
+  background: #fff;
+  box-shadow: 0 20px 42px rgba(59, 117, 187, 0.12);
+  transform: translateY(-5px);
+}
+.stats-row span {
+  color: #98adc5;
+  font-size: 9px;
+}
+.stats-row strong {
+  display: block;
+  margin-top: 35px;
+  color: #277fec;
+  font-size: 30px;
+  font-variant-numeric: tabular-nums;
+}
+.stats-row p {
+  margin: 7px 0 0;
+  color: #718298;
+  font-size: 11px;
+}
+.method-section {
+  padding: 112px 0 130px;
+  background: #eef7ff;
+}
+.center-heading {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+.center-heading > p:last-child {
+  max-width: 640px;
+  margin: 18px auto 0;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.method-flow {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 18px;
+  margin-top: 62px;
+}
+.method-flow::before {
+  position: absolute;
+  top: 27px;
+  right: 9%;
+  left: 9%;
+  height: 1px;
+  content: '';
+  background: linear-gradient(90deg, transparent, #75afea 12% 88%, transparent);
+}
+.method-flow article {
+  position: relative;
+  z-index: 2;
+  padding: 0 15px;
+  text-align: center;
+}
+.method-marker {
+  width: 55px;
+  height: 55px;
+  display: grid;
+  margin: 0 auto 22px;
+  place-items: center;
+  border: 7px solid rgba(255, 255, 255, 0.92);
+  border-radius: 50%;
+  color: #fff;
+  background: #358af0;
+  box-shadow: 0 11px 24px rgba(51, 135, 235, 0.22);
+  font-size: 10px;
+  font-weight: 700;
+}
+.method-flow h3 {
+  margin: 0;
+  color: #354961;
+  font-size: 17px;
+}
+.method-flow p {
+  margin: 11px 0 0;
+  color: #75869b;
+  font-size: 11px;
+  line-height: 1.7;
+}
+.timeline-section {
+  padding: 116px 0 132px;
+}
+.timeline-layout {
+  display: grid;
+  grid-template-columns: 0.75fr 1.25fr;
+  gap: 95px;
+  align-items: start;
+}
+.timeline-heading {
+  position: sticky;
+  top: 105px;
+}
+.timeline-heading > p:last-child {
+  margin: 20px 0 0;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.timeline-list {
+  position: relative;
+}
+.timeline-list::before {
+  position: absolute;
+  top: 20px;
+  bottom: 20px;
+  left: 82px;
+  width: 1px;
+  content: '';
+  background: linear-gradient(#b8d2ed, #488fe1);
+}
+.timeline-list article {
+  position: relative;
+  min-height: 180px;
+  display: grid;
+  grid-template-columns: 82px 1fr;
+  gap: 38px;
+  padding: 18px 0 30px;
+}
+.timeline-year {
+  color: #86a2c0;
+  font-size: 14px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.timeline-list h3 {
+  margin: -3px 0 0;
+  color: #3b5069;
+  font-size: 22px;
+}
+.timeline-list ul {
+  display: grid;
+  gap: 10px;
+  margin: 15px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.timeline-list li {
+  position: relative;
+  padding-left: 14px;
+  color: #728298;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.timeline-list li::before {
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  content: '';
+  border-radius: 50%;
+  background: #4a93e6;
+}
+.timeline-dot {
+  position: absolute;
+  top: 17px;
+  left: 76px;
+  width: 13px;
+  height: 13px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: #75a9df;
+  box-shadow: 0 0 0 1px #75a9df;
+}
+.timeline-list article.current .timeline-year,
+.timeline-list article.current h3 {
+  color: #247be8;
+}
+.timeline-list article.current .timeline-dot {
+  background: #247be8;
+  box-shadow: 0 0 0 5px rgba(36, 123, 232, 0.12);
+}
+.team-section {
+  padding: 112px 0 128px;
+  background: #f1f7fd;
+}
+.team-grid {
+  display: grid;
+  grid-template-columns: 0.88fr 1.12fr;
+  gap: 80px;
+  align-items: center;
+}
+.team-statement blockquote {
+  margin: 30px 0 0;
+  padding: 27px 30px;
+  border-left: 3px solid #3288ec;
+  color: #59708b;
+  background: rgba(255, 255, 255, 0.66);
+  font-size: 16px;
+  line-height: 1.8;
+}
+.team-capabilities {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.team-capabilities article {
+  min-height: 180px;
+  padding: 28px;
+  border-radius: 15px 5px 15px 5px;
+  background: rgba(255, 255, 255, 0.78);
+}
+.team-capabilities span {
+  color: #98adc5;
+  font-size: 9px;
+}
+.team-capabilities h3 {
+  margin: 28px 0 0;
+  color: #3c526b;
+  font-size: 18px;
+}
+.team-capabilities p {
+  margin: 8px 0 0;
+  color: #75869a;
+  font-size: 11px;
+  line-height: 1.65;
+}
+.contact-section {
+  padding: 116px 0 130px;
+}
+.contact-grid {
+  display: grid;
+  grid-template-columns: 0.72fr 1.28fr;
+  gap: 90px;
+  align-items: center;
+}
+.contact-heading > p:nth-of-type(2) {
+  margin: 20px 0 0;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.contact-heading .primary-button {
+  margin-top: 27px;
+}
+.contact-details {
+  display: grid;
+  grid-template-columns: 1fr 210px;
+  gap: 28px;
+  padding: 42px;
+  border-radius: 18px 6px 18px 6px;
+  background: #eef6ff;
+}
+.contact-details dl {
+  margin: 0;
+}
+.contact-details dl > div {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 25px;
+  padding: 18px 0;
+  border-bottom: 1px solid #d8e6f4;
+}
+.contact-details dl > div:last-child {
+  border-bottom: 0;
+}
+.contact-details dt {
+  color: #8295ab;
+  font-size: 10px;
+}
+.contact-details dd {
+  margin: 0;
+  color: #405873;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.contact-qr {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  text-align: center;
+}
+.contact-qr > span {
+  width: 106px;
+  height: 106px;
+  border: 8px solid #fff;
+  background:
+    linear-gradient(90deg, #1e446d 25%, transparent 25% 50%, #1e446d 50% 75%, transparent 75%) 0 0 /
+      18px 18px,
+    linear-gradient(#1e446d 25%, transparent 25% 50%, #1e446d 50% 75%, transparent 75%) 9px 9px /
+      18px 18px,
+    #fff;
+}
+.contact-qr strong {
+  margin-top: 14px;
+  color: #41617f;
+  font-size: 11px;
+}
+.contact-qr small {
+  margin-top: 5px;
+  color: #8294a7;
+  font-size: 9px;
+}
+.about-cta {
+  position: relative;
+  min-height: 430px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+.about-cta-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.about-cta-content {
+  padding: 75px 0;
+  text-align: center;
+}
+.about-cta-content > p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.about-cta-content h2 {
+  margin: 17px 0 0;
+  color: #2f75cc;
+  font-size: clamp(32px, 3.2vw, 50px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.about-cta-content .primary-button {
+  margin-top: 29px;
+}
+@media (max-width: 980px) {
+  .about-hero,
+  .about-hero-grid {
+    min-height: auto;
+  }
+  .about-hero-grid,
+  .company-story-grid,
+  .search-change-grid,
+  .timeline-layout,
+  .team-grid,
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+  .about-hero-grid {
+    padding-top: 74px;
+    padding-bottom: 62px;
+  }
+  .about-hero-visual {
+    justify-self: center;
+    margin-top: 20px;
+  }
+  .company-story-grid,
+  .timeline-layout {
+    gap: 45px;
+  }
+  .story-heading,
+  .timeline-heading {
+    position: static;
+  }
+  .search-change-grid {
+    gap: 55px;
+  }
+  .change-visual {
+    order: 2;
+  }
+  .timeline-heading {
+    max-width: 720px;
+  }
+  .team-grid,
+  .contact-grid {
+    gap: 45px;
+  }
+  .method-flow {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+  .method-flow::before {
+    top: 28px;
+    bottom: 28px;
+    left: 27px;
+    width: 1px;
+    height: auto;
+  }
+  .method-flow article {
+    min-height: 115px;
+    display: grid;
+    grid-template-columns: 55px 1fr;
+    grid-template-rows: auto auto;
+    gap: 4px 20px;
+    padding: 0;
+    text-align: left;
+  }
+  .method-marker {
+    grid-row: 1 / 3;
+    margin: 0;
+  }
+  .method-flow p {
+    margin-top: 4px;
+  }
+}
+@media (max-width: 600px) {
+  .about-hero-grid {
+    padding-top: 54px;
+  }
+  .about-hero-copy h1 {
+    font-size: clamp(52px, 16vw, 70px);
+  }
+  .about-hero-copy h2 {
+    font-size: 25px;
+  }
+  .about-hero-copy h2 br {
+    display: none;
+  }
+  .hero-actions {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .about-hero-visual {
+    aspect-ratio: 0.96;
+  }
+  .about-orbit-b {
+    width: 340px;
+    height: 340px;
+  }
+  .about-orbit-a {
+    width: 255px;
+    height: 255px;
+  }
+  .about-core {
+    width: 125px;
+    height: 125px;
+    border-width: 9px;
+  }
+  .about-core strong {
+    font-size: 17px;
+  }
+  .about-node {
+    width: 61px;
+    height: 57px;
+  }
+  .about-node strong {
+    font-size: 10px;
+  }
+  .company-story-section,
+  .search-change-section,
+  .company-stats-section,
+  .method-section,
+  .timeline-section,
+  .team-section,
+  .contact-section {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .story-content blockquote {
+    padding: 27px 23px;
+    font-size: 21px;
+  }
+  .change-visual {
+    min-height: 520px;
+    padding: 28px 20px;
+  }
+  .change-track {
+    grid-template-columns: 1fr;
+  }
+  .change-track > i {
+    transform: rotate(90deg);
+  }
+  .change-step {
+    min-height: 170px;
+  }
+  .change-question {
+    right: 20px;
+    bottom: 20px;
+    left: 20px;
+  }
+  .stats-row {
+    grid-template-columns: 1fr;
+  }
+  .stats-row article {
+    min-height: 145px;
+  }
+  .team-capabilities {
+    grid-template-columns: 1fr;
+  }
+  .team-capabilities article {
+    min-height: 145px;
+  }
+  .contact-details {
+    grid-template-columns: 1fr;
+    padding: 27px 20px;
+  }
+  .contact-details dl > div {
+    grid-template-columns: 80px 1fr;
+    gap: 14px;
+  }
+  .contact-qr {
+    padding-top: 22px;
+  }
+  .about-cta {
+    min-height: 390px;
+  }
+  .about-cta-content h2 br {
+    display: none;
+  }
+}
+</style>
diff --git a/pages/advantages.vue b/pages/advantages.vue
new file mode 100644
index 0000000..f63f75b
--- /dev/null
+++ b/pages/advantages.vue
@@ -0,0 +1,1508 @@
+<script setup>
+import { gsap } from 'gsap'
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+
+const pageRoot = ref(null)
+const { openConsultation } = useConsultation()
+let animationContext
+
+useHead({
+  title: '核心优势｜大马棒·云途全域 GEO',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '了解大马棒·云途全域 GEO 在真人内容生产、全域媒体资源、全链路转化闭环和行业定制服务方面的核心能力。'
+    }
+  ]
+})
+
+const advantages = [
+  {
+    id: 'human-content',
+    number: '01',
+    short: '真人内容',
+    eyebrow: 'Human content network',
+    title: '人，才是 AI 搜索时代最大的护城河',
+    summary:
+      '行业独家 5 万真人分布式内容生产网络，用 C 端爆款内容思维做 B 端 GEO，建立真实可信的 AI 信任型声量。',
+    problem: '批量生成内容看起来相似、缺少真实经验，用户不愿读，AI 也缺少持续引用的信任依据。',
+    capability:
+      '覆盖职场人、宝妈、学生、本地达人等多元真实身份，让内容带有具体经验、真实语气和行业场景。',
+    actions: [
+      '覆盖图文、问答、笔记和短视频等全内容形态',
+      '根据行业与决策场景匹配真实创作者身份',
+      '建立选题、审核、合规和质量复检机制'
+    ],
+    value: '用户读到的是真人真话，AI 引用的是可信信源。用户和 AI 都在帮品牌说话。',
+    metric: '5 万',
+    metricLabel: '真人内容生产网络',
+    visual: ['真实身份', '真实体验', '场景内容', 'AI 信任']
+  },
+  {
+    id: 'media-network',
+    number: '02',
+    short: '媒体矩阵',
+    eyebrow: 'Trusted media network',
+    title: '权威信源，是 AI 引用品牌的前提',
+    summary:
+      '5000+ 权威媒体与 10 万+ 优质自媒体组成全域矩阵，为品牌补充第三方公信力，并提升 AI 搜索中的引用权重。',
+    problem: '企业只在自有渠道反复介绍自己，公开网络缺少独立、稳定且层次丰富的第三方信源。',
+    capability:
+      '覆盖中央级媒体、行业垂直媒体、地方门户和自媒体达人，根据内容目标匹配不同层级的信源。',
+    actions: [
+      '多渠道权威背书，补足品牌公开信息',
+      '深度合作资源保障发布效率与内容质量',
+      '针对 AI 搜索数据源优化内容结构与引用机会'
+    ],
+    value: '不是单纯购买一个广告位，而是让 AI 基于可信来源，有依据地理解和推荐品牌。',
+    metric: '5000+',
+    metricLabel: '权威媒体资源',
+    visual: ['权威媒体', '垂直信源', '用户讨论', 'AI 引用']
+  },
+  {
+    id: 'closed-loop',
+    number: '03',
+    short: '全链路',
+    eyebrow: 'Full-funnel conversion',
+    title: '从第一条内容到第一通咨询，中间没有断层',
+    summary:
+      '打通“纯曝光—内容资产沉淀—转化闭环”，让每一次公开内容都能进入可追踪、可复盘的业务增长链路。',
+    problem:
+      '内容、媒体、官网和销售分别由不同团队管理，曝光之后无人承接，线索来源与预算效果难以说清。',
+    capability:
+      '从品牌曝光、内容沉淀到线索承接统一规划，并持续追踪用户从搜索、阅读到咨询的关键节点。',
+    actions: [
+      '统一品牌声量与业务获客目标',
+      '打通内容、官网、私域和咨询入口',
+      '按周期复盘曝光、流量与线索质量并持续优化'
+    ],
+    value: '预算花在哪里、效果从哪里来，能够被持续追踪；品牌建设与业务转化不再各做一段。',
+    metric: '全链路',
+    metricLabel: '曝光到咨询可追踪',
+    visual: ['品牌曝光', '内容资产', '精准流量', '咨询成交']
+  },
+  {
+    id: 'custom-service',
+    number: '04',
+    short: '定制服务',
+    eyebrow: 'Industry customization',
+    title: 'B2B 软件和火锅店，不可能用同一套打法',
+    summary:
+      '覆盖多类型经营主体，拒绝标准化模板，根据行业、企业阶段、用户决策路径与增长痛点定制 GEO 策略。',
+    problem: '通用方案只替换行业名称，没有考虑决策周期、合规要求、信任依据和真实转化动作。',
+    capability:
+      '服务企业服务、本地生活、电商零售、教育培训和医疗健康等多类型主体，支持一对一专属顾问全程跟进。',
+    actions: [
+      '基于行业、阶段、预算和目标重新设计策略',
+      '专属顾问一对一对接并同步执行进度',
+      '灵活组合服务模块，匹配不同规模企业需求'
+    ],
+    value: '不是从其他行业案例复制一份通用方法论，而是一套只针对当前业务问题的执行方案。',
+    metric: '12+',
+    metricLabel: '主流行业覆盖',
+    visual: ['行业诊断', '策略匹配', '专属执行', '动态优化']
+  }
+]
+
+const comparisonRows = [
+  ['核心目标', '抢排名、买点击', '蹭热度、抓眼球', '让品牌在 AI 推荐中被选中'],
+  ['内容逻辑', '迎合搜索规则', '什么火就写什么', '真实可信，适配 AI 搜索与用户决策'],
+  ['效果周期', '花钱就有，停投归零', '发布后快速沉底', '内容持续被引用，效果不断积累'],
+  ['转化链路', '广告点击后进入落地页', '曝光后缺少承接', '曝光—信任—咨询—成交可追踪'],
+  ['资产沉淀', '主要沉淀点击数据', '内容零散、不成体系', '形成可复用的品牌数字信任资产']
+]
+
+const valueAddedServices = [
+  {
+    number: '01',
+    title: '创始人 / 企业 IP 打造',
+    text: '结合品牌调性与创始人特质，搭建差异化人设定位、内容脚本体系与长期更新规划，形成高辨识度的专属 IP。',
+    items: ['人设定位', '选题与脚本', '内容生产', '长期运营'],
+    image: '/images/lanhu/slices/home-group96-image22@2x.png'
+  },
+  {
+    number: '02',
+    title: '短视频与直播获客',
+    text: '从短视频批量产出到直播间常态化运营，配置主播、运营、投流与中控团队，覆盖拍摄、剪辑、投放和转化。',
+    items: ['短视频生产', '直播运营', '投流优化', '成交承接'],
+    image: '/images/lanhu/slices/home-group97-image23@2x.png'
+  }
+]
+
+const proofStats = [
+  ['5 万', '真人内容生产网络'],
+  ['5000+', '权威媒体资源'],
+  ['1000+', '累计服务客户'],
+  ['12+', '覆盖主流行业']
+]
+
+function requestDiagnosis(source) {
+  openConsultation({ title: '预约免费 GEO 诊断', source })
+}
+
+function scrollToAdvantages() {
+  document.getElementById('advantage-system')?.scrollIntoView({ behavior: 'smooth' })
+}
+
+function scrollToAdvantage(id) {
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+onMounted(async () => {
+  if (!pageRoot.value || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  await nextTick()
+  animationContext = gsap.context(() => {
+    gsap.to('.advantage-orbit-a', { rotation: 360, duration: 30, repeat: -1, ease: 'none' })
+    gsap.to('.advantage-orbit-b', { rotation: -360, duration: 40, repeat: -1, ease: 'none' })
+  }, pageRoot.value)
+})
+
+onBeforeUnmount(() => animationContext?.revert())
+</script>
+
+<template>
+  <div ref="pageRoot" class="advantages-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="advantages-hero">
+        <div class="advantages-hero-mesh" aria-hidden="true"></div>
+        <div class="page-width advantages-hero-grid">
+          <div class="advantages-hero-copy">
+            <p class="page-eyebrow">核心优势</p>
+            <h1>别人在卷流量的时候，<br />我们在卷<span>什么</span></h1>
+            <p>
+              内容生产、媒体资源、链路闭环、定制能力，四个环节环环相扣，才构成真正可持续的全域增长。
+            </p>
+            <div class="hero-advantage-links">
+              <button
+                v-for="advantage in advantages"
+                :key="advantage.id"
+                type="button"
+                @click="scrollToAdvantage(advantage.id)"
+              >
+                <span>{{ advantage.number }}</span
+                >{{ advantage.short }}
+              </button>
+            </div>
+            <div class="hero-actions">
+              <button
+                class="primary-button"
+                type="button"
+                @click="requestDiagnosis('核心优势页 Hero')"
+              >
+                了解合作方式 <AppIcon name="arrow-right" />
+              </button>
+              <button class="text-action" type="button" @click="scrollToAdvantages">
+                查看能力拆解 <AppIcon name="bottom" />
+              </button>
+            </div>
+          </div>
+
+          <div class="advantage-engine" aria-label="四项核心优势协同示意图">
+            <div class="advantage-orbit advantage-orbit-a">
+              <i v-for="index in 4" :key="`a-${index}`"></i>
+            </div>
+            <div class="advantage-orbit advantage-orbit-b">
+              <i v-for="index in 4" :key="`b-${index}`"></i>
+            </div>
+            <div class="engine-core">
+              <small>YUNTU GEO</small><strong>四项能力</strong><span>协同增长</span>
+            </div>
+            <button
+              v-for="(advantage, index) in advantages"
+              :key="`engine-${advantage.id}`"
+              type="button"
+              class="engine-node"
+              :class="`engine-node-${index + 1}`"
+              @click="scrollToAdvantage(advantage.id)"
+            >
+              <span>{{ advantage.number }}</span
+              ><strong>{{ advantage.short }}</strong>
+            </button>
+            <div class="engine-status"><span></span> 能力闭环已建立</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="advantage-intro-section">
+        <div class="page-width advantage-intro-grid">
+          <header>
+            <p class="section-kicker">GEO 不是堆关键词</p>
+            <h2>让品牌被看见、被引用、被选择，需要一套完整能力</h2>
+            <p>
+              单一媒体资源或一次内容爆发都很难形成长期结果。真正有效的
+              GEO，需要真实内容、可信信源、转化承接和行业策略共同工作。
+            </p>
+          </header>
+          <div class="intro-sequence">
+            <article v-for="advantage in advantages" :key="`intro-${advantage.id}`">
+              <span>{{ advantage.number }}</span
+              ><strong>{{ advantage.short }}</strong>
+              <p>{{ advantage.metric }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section id="advantage-system" class="advantage-system">
+        <article
+          v-for="(advantage, advantageIndex) in advantages"
+          :id="advantage.id"
+          :key="advantage.id"
+          class="advantage-story"
+          :class="{ alternate: advantageIndex % 2 === 1 }"
+        >
+          <div class="page-width advantage-story-grid">
+            <div class="advantage-story-copy">
+              <p class="story-index">
+                {{ advantage.number }} <span>{{ advantage.eyebrow }}</span>
+              </p>
+              <h2>{{ advantage.title }}</h2>
+              <p class="story-summary">{{ advantage.summary }}</p>
+              <div class="story-problem">
+                <strong>行业常见问题</strong>
+                <p>{{ advantage.problem }}</p>
+              </div>
+              <div class="story-capability">
+                <strong>核心能力</strong>
+                <p>{{ advantage.capability }}</p>
+              </div>
+              <strong class="story-actions-title">执行方式</strong>
+              <ul>
+                <li v-for="(action, actionIndex) in advantage.actions" :key="action">
+                  <span>0{{ actionIndex + 1 }}</span
+                  >{{ action }}
+                </li>
+              </ul>
+              <blockquote><span>客户价值</span>{{ advantage.value }}</blockquote>
+              <button
+                type="button"
+                class="story-action"
+                @click="requestDiagnosis(`${advantage.short}优势板块`)"
+              >
+                了解这项能力 <AppIcon name="arrow-right" />
+              </button>
+            </div>
+
+            <div class="advantage-story-visual" :class="`advantage-visual-${advantageIndex + 1}`">
+              <header>
+                <span>{{ advantage.short }}能力模型</span><small>YUNTU CAPABILITY MAP</small>
+              </header>
+              <div class="capability-map">
+                <div class="capability-center">
+                  <small>{{ advantage.number }}</small
+                  ><strong>{{ advantage.short }}</strong>
+                </div>
+                <div
+                  v-for="(item, itemIndex) in advantage.visual"
+                  :key="item"
+                  class="capability-node"
+                  :class="`capability-node-${itemIndex + 1}`"
+                >
+                  <span>0{{ itemIndex + 1 }}</span
+                  ><strong>{{ item }}</strong>
+                </div>
+                <i v-for="line in 4" :key="line" :class="`capability-line line-${line}`"></i>
+              </div>
+              <div class="capability-metric">
+                <strong>{{ advantage.metric }}</strong
+                ><span>{{ advantage.metricLabel }}</span>
+              </div>
+            </div>
+          </div>
+        </article>
+      </section>
+
+      <section class="comparison-section">
+        <div class="page-width">
+          <header class="center-heading">
+            <p class="section-kicker">换一种打法</p>
+            <h2>同样在做搜索与内容，结果为什么不同</h2>
+            <p>对比的重点不是某个渠道更好，而是目标、内容逻辑、转化链路与资产沉淀方式不同。</p>
+          </header>
+          <div class="comparison-table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>核心维度</th>
+                  <th>SEO / SEM</th>
+                  <th>普通内容营销</th>
+                  <th>云途全域 GEO <span>推荐方式</span></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in comparisonRows" :key="row[0]">
+                  <th>{{ row[0] }}</th>
+                  <td>{{ row[1] }}</td>
+                  <td>{{ row[2] }}</td>
+                  <td>
+                    <strong>{{ row[3] }}</strong>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <section class="value-added-section">
+        <div class="page-width">
+          <header class="value-added-heading">
+            <div>
+              <p class="section-kicker">可选增值服务</p>
+              <h2>如需更深度的增长配套，我们也能做</h2>
+            </div>
+            <p>在 GEO 核心链路之外，根据品牌阶段补充 IP、短视频和直播能力。</p>
+          </header>
+          <div class="value-added-list">
+            <article
+              v-for="(service, index) in valueAddedServices"
+              :key="service.title"
+              :class="{ reverse: index === 1 }"
+            >
+              <div class="value-added-image">
+                <img :src="service.image" :alt="`${service.title}服务示意图`" /><span>{{
+                  service.number
+                }}</span>
+              </div>
+              <div class="value-added-copy">
+                <p>增值服务 {{ service.number }}</p>
+                <h3>{{ service.title }}</h3>
+                <span>{{ service.text }}</span>
+                <ul>
+                  <li v-for="item in service.items" :key="item">{{ item }}</li>
+                </ul>
+                <button type="button" @click="requestDiagnosis(`${service.title}板块`)">
+                  咨询服务组合 <AppIcon name="arrow-right" />
+                </button>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="proof-section">
+        <div class="page-width proof-layout">
+          <header>
+            <p class="section-kicker">能力需要结果证明</p>
+            <h2>资源规模只是基础，最终要回到业务增长</h2>
+            <p>
+              已经服务 1000+ 企业客户，覆盖 12+ 主流行业，并在多个复盘项目中持续提升 AI
+              可见性、品牌提及和咨询转化表现。
+            </p>
+            <NuxtLink to="/cases">查看客户案例 <AppIcon name="arrow-right" /></NuxtLink>
+          </header>
+          <div class="proof-stats">
+            <article v-for="(stat, index) in proofStats" :key="stat[1]">
+              <span>0{{ index + 1 }}</span
+              ><strong>{{ stat[0] }}</strong>
+              <p>{{ stat[1] }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="advantages-cta">
+        <div class="advantages-cta-art" aria-hidden="true"></div>
+        <div class="page-width advantages-cta-content">
+          <p>想知道这套能力适不适合你的行业？</p>
+          <h2>聊聊行业、现状和目标，<br />我们免费做一次 GEO 诊断</h2>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestDiagnosis('核心优势页底部 CTA')"
+          >
+            预约免费诊断 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.advantages-page {
+  --advantage-blue: #237df0;
+  overflow: hidden;
+  color: #344359;
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.page-eyebrow,
+.section-kicker {
+  margin: 0;
+  color: var(--advantage-blue);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.advantages-hero {
+  position: relative;
+  min-height: 670px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f1f7ff;
+}
+.advantages-hero-mesh {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 79% 28%, rgba(75, 159, 255, 0.25), transparent 27%),
+    radial-gradient(circle at 15% 92%, rgba(98, 201, 235, 0.12), transparent 28%),
+    linear-gradient(110deg, #f8fbff, #e7f2ff);
+}
+.advantages-hero-mesh::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.18;
+  background-image:
+    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
+  background-size: 58px 58px;
+  mask-image: linear-gradient(90deg, transparent 20%, #000);
+}
+.advantages-hero-grid {
+  min-height: 670px;
+  display: grid;
+  grid-template-columns: 0.95fr 1.05fr;
+  align-items: center;
+  gap: 55px;
+  padding: 52px 0 60px;
+}
+.advantages-hero-copy h1 {
+  margin: 15px 0 0;
+  color: #37465b;
+  font-size: clamp(44px, 4vw, 65px);
+  letter-spacing: -0.055em;
+  line-height: 1.18;
+}
+.advantages-hero-copy h1 span {
+  color: #1978ef;
+}
+.advantages-hero-copy > p:nth-of-type(2) {
+  max-width: 640px;
+  margin: 24px 0 0;
+  color: #68788e;
+  font-size: 16px;
+  line-height: 1.85;
+}
+.hero-advantage-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 27px;
+}
+.hero-advantage-links button {
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(68, 134, 217, 0.2);
+  border-radius: 5px;
+  color: #55718f;
+  background: rgba(255, 255, 255, 0.58);
+  font-size: 12px;
+  transition: 0.2s;
+}
+.hero-advantage-links button span {
+  margin-right: 7px;
+  color: #93aac4;
+  font-size: 9px;
+}
+.hero-advantage-links button:hover {
+  border-color: #6ba9f2;
+  color: #1e78e7;
+  background: #fff;
+  transform: translateY(-2px);
+}
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  margin-top: 31px;
+}
+.text-action {
+  color: #53667e;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 600;
+}
+.text-action span {
+  display: inline-grid;
+  width: 28px;
+  height: 28px;
+  margin-left: 8px;
+  place-items: center;
+  border: 1px solid #bbcee4;
+  border-radius: 50%;
+  color: #237df0;
+  transition: 0.2s;
+}
+.text-action:hover span {
+  background: #fff;
+  transform: translateY(3px);
+}
+.advantage-engine {
+  position: relative;
+  width: min(610px, 100%);
+  aspect-ratio: 1.06;
+  justify-self: end;
+}
+.advantage-engine::before {
+  position: absolute;
+  inset: 6% 2% 0;
+  content: '';
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.95) 0 23%,
+      rgba(130, 194, 255, 0.21) 24% 47%,
+      transparent 48%
+    ),
+    url('/images/lanhu/slices/hero-geo-visual@2x.png') 70% 47% / 168% auto no-repeat;
+  filter: drop-shadow(0 32px 48px rgba(51, 119, 204, 0.18));
+  mask-image: radial-gradient(ellipse, #000 50%, transparent 75%);
+}
+.advantage-orbit {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  border: 1px solid rgba(51, 133, 232, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.advantage-orbit-a {
+  width: 390px;
+  height: 390px;
+}
+.advantage-orbit-b {
+  width: 520px;
+  height: 520px;
+  border-style: dashed;
+  opacity: 0.7;
+}
+.advantage-orbit i {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: #2782f2;
+  box-shadow: 0 6px 16px rgba(35, 124, 232, 0.36);
+}
+.advantage-orbit i:nth-child(1) {
+  top: -6px;
+  left: 50%;
+}
+.advantage-orbit i:nth-child(2) {
+  top: 50%;
+  right: -6px;
+  background: #52c2e7;
+}
+.advantage-orbit i:nth-child(3) {
+  bottom: -6px;
+  left: 50%;
+  background: #736ff1;
+}
+.advantage-orbit i:nth-child(4) {
+  top: 50%;
+  left: -6px;
+  background: #4a9ef2;
+}
+.engine-core {
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  width: 160px;
+  height: 160px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 12px solid rgba(255, 255, 255, 0.64);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #2b82f0, #48b8e8);
+  box-shadow: 0 24px 48px rgba(34, 117, 223, 0.29);
+  transform: translate(-50%, -50%);
+}
+.engine-core small {
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  opacity: 0.75;
+}
+.engine-core strong {
+  margin-top: 7px;
+  font-size: 21px;
+}
+.engine-core span {
+  margin-top: 4px;
+  font-size: 10px;
+  opacity: 0.76;
+}
+.engine-node {
+  position: absolute;
+  z-index: 5;
+  width: 92px;
+  height: 82px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 20px 7px 20px 7px;
+  color: #416991;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 15px 34px rgba(55, 112, 184, 0.15);
+  backdrop-filter: blur(10px);
+  transition: 0.2s;
+}
+.engine-node:hover {
+  color: #1779ec;
+  transform: translateY(-4px);
+  box-shadow: 0 20px 38px rgba(55, 112, 184, 0.22);
+}
+.engine-node span {
+  color: #96acc4;
+  font-size: 9px;
+}
+.engine-node strong {
+  margin-top: 5px;
+  font-size: 13px;
+}
+.engine-node-1 {
+  top: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.engine-node-1:hover {
+  transform: translateX(-50%) translateY(-4px);
+}
+.engine-node-2 {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.engine-node-2:hover {
+  transform: translateY(-54%);
+}
+.engine-node-3 {
+  bottom: 4%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.engine-node-3:hover {
+  transform: translateX(-50%) translateY(-4px);
+}
+.engine-node-4 {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.engine-node-4:hover {
+  transform: translateY(-54%);
+}
+.engine-status {
+  position: absolute;
+  right: 6%;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #74869c;
+  font-size: 11px;
+}
+.engine-status span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #28a3ed;
+  box-shadow: 0 0 0 5px rgba(40, 163, 237, 0.12);
+}
+.advantage-intro-section {
+  padding: 112px 0 128px;
+}
+.advantage-intro-grid {
+  display: grid;
+  grid-template-columns: 0.8fr 1.2fr;
+  gap: 90px;
+  align-items: center;
+}
+.advantage-intro-grid header h2,
+.center-heading h2,
+.value-added-heading h2,
+.proof-layout header h2 {
+  margin: 15px 0 0;
+  color: #344359;
+  font-size: clamp(32px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.28;
+}
+.advantage-intro-grid header > p:last-child,
+.center-heading > p:last-child,
+.value-added-heading > p,
+.proof-layout header > p:last-of-type {
+  max-width: 620px;
+  margin: 20px 0 0;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.intro-sequence {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.intro-sequence article {
+  min-height: 165px;
+  padding: 26px;
+  border-radius: 14px 5px 14px 5px;
+  background: #f2f7fd;
+  transition: 0.24s;
+}
+.intro-sequence article:hover {
+  background: #fff;
+  box-shadow: 0 18px 38px rgba(59, 117, 187, 0.12);
+  transform: translateY(-4px);
+}
+.intro-sequence span {
+  color: #96abc3;
+  font-size: 9px;
+}
+.intro-sequence strong {
+  display: block;
+  margin-top: 28px;
+  color: #3a5069;
+  font-size: 17px;
+}
+.intro-sequence p {
+  margin: 7px 0 0;
+  color: #277fec;
+  font-size: 20px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.advantage-story {
+  scroll-margin-top: 80px;
+  padding: 116px 0 132px;
+}
+.advantage-story.alternate {
+  background: #eef7ff;
+}
+.advantage-story-grid {
+  display: grid;
+  grid-template-columns: 0.96fr 1.04fr;
+  align-items: center;
+  gap: 75px;
+}
+.alternate .advantage-story-copy {
+  order: 2;
+}
+.alternate .advantage-story-visual {
+  order: 1;
+}
+.story-index {
+  margin: 0;
+  color: #8ba6c4;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.story-index span {
+  margin-left: 12px;
+  color: #2b80ed;
+}
+.advantage-story-copy h2 {
+  margin: 18px 0 0;
+  color: #33455c;
+  font-size: clamp(33px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.story-summary {
+  margin: 19px 0 0;
+  color: #64778e;
+  font-size: 15px;
+  line-height: 1.8;
+}
+.story-problem,
+.story-capability {
+  margin-top: 22px;
+  padding: 17px 20px;
+  border-left: 3px solid #3d8ff1;
+  background: #f2f7fd;
+}
+.alternate .story-problem,
+.alternate .story-capability {
+  background: rgba(255, 255, 255, 0.68);
+}
+.story-problem strong,
+.story-capability strong {
+  color: #3f6d9e;
+  font-size: 11px;
+}
+.story-problem p,
+.story-capability p {
+  margin: 6px 0 0;
+  color: #6e7f93;
+  font-size: 12px;
+  line-height: 1.65;
+}
+.story-capability {
+  margin-top: 10px;
+  border-left-color: #6fb9e9;
+}
+.story-actions-title {
+  display: block;
+  margin-top: 24px;
+  color: #42556d;
+  font-size: 12px;
+}
+.advantage-story-copy ul {
+  display: grid;
+  gap: 11px;
+  margin: 13px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.advantage-story-copy li {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 10px;
+  color: #6e7f93;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.advantage-story-copy li span {
+  color: #458fe8;
+  font-size: 9px;
+  font-weight: 700;
+}
+.advantage-story-copy blockquote {
+  margin: 26px 0 0;
+  padding: 18px 20px;
+  border-radius: 6px;
+  color: #536b86;
+  background: rgba(45, 126, 230, 0.08);
+  font-size: 13px;
+  line-height: 1.7;
+}
+.advantage-story-copy blockquote span {
+  display: block;
+  margin-bottom: 5px;
+  color: #2e7edc;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+.story-action {
+  margin-top: 24px;
+  padding: 0 0 5px;
+  border-bottom: 1px solid #8eb9e9;
+  color: #247be8;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+}
+.story-action b {
+  margin-left: 8px;
+  transition: margin 0.2s;
+}
+.story-action:hover b {
+  margin-left: 13px;
+}
+.advantage-story-visual {
+  position: relative;
+  min-height: 590px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.86);
+  border-radius: 20px 7px 20px 7px;
+  background:
+    radial-gradient(circle at 72% 28%, rgba(82, 163, 255, 0.28), transparent 24%),
+    linear-gradient(145deg, #f2f8ff, #dcecff);
+  box-shadow:
+    0 28px 60px rgba(58, 122, 201, 0.13),
+    inset 0 1px 0 #fff;
+}
+.advantage-visual-2 {
+  background:
+    radial-gradient(circle at 27% 72%, rgba(92, 187, 236, 0.25), transparent 24%),
+    linear-gradient(145deg, #f2f9ff, #e2edff);
+}
+.advantage-visual-3 {
+  background:
+    radial-gradient(circle at 72% 72%, rgba(96, 145, 240, 0.24), transparent 25%),
+    linear-gradient(145deg, #f4f8ff, #ddeaff);
+}
+.advantage-visual-4 {
+  background:
+    radial-gradient(circle at 30% 27%, rgba(76, 170, 242, 0.25), transparent 24%),
+    linear-gradient(145deg, #eef8ff, #e0ecff);
+}
+.advantage-story-visual > header {
+  display: flex;
+  justify-content: space-between;
+  padding: 25px 28px;
+  color: #55779d;
+  font-size: 12px;
+}
+.advantage-story-visual > header small {
+  color: #95aac2;
+  font-size: 9px;
+  letter-spacing: 0.12em;
+}
+.capability-map {
+  position: absolute;
+  top: 52%;
+  left: 50%;
+  width: 410px;
+  height: 360px;
+  transform: translate(-50%, -50%);
+}
+.capability-map::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 280px;
+  height: 280px;
+  content: '';
+  border: 1px dashed rgba(55, 137, 232, 0.34);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.capability-center {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: 50%;
+  width: 142px;
+  height: 142px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 11px solid rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #3185ee, #50bce7);
+  box-shadow: 0 22px 42px rgba(36, 123, 225, 0.28);
+  transform: translate(-50%, -50%);
+}
+.capability-center small {
+  font-size: 9px;
+  opacity: 0.7;
+}
+.capability-center strong {
+  margin-top: 5px;
+  font-size: 17px;
+}
+.capability-node {
+  position: absolute;
+  z-index: 3;
+  min-width: 110px;
+  padding: 12px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.92);
+  border-radius: 7px;
+  color: #4e7198;
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 12px 25px rgba(54, 113, 185, 0.11);
+  text-align: center;
+  backdrop-filter: blur(8px);
+}
+.capability-node span {
+  display: block;
+  color: #91a9c3;
+  font-size: 8px;
+}
+.capability-node strong {
+  display: block;
+  margin-top: 3px;
+  font-size: 10px;
+}
+.capability-node-1 {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.capability-node-2 {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.capability-node-3 {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.capability-node-4 {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.capability-line {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 135px;
+  background: linear-gradient(#5aa1ed, transparent);
+  transform-origin: top;
+}
+.line-1 {
+  transform: rotate(180deg);
+}
+.line-2 {
+  transform: rotate(90deg);
+}
+.line-3 {
+  transform: rotate(0);
+}
+.line-4 {
+  transform: rotate(-90deg);
+}
+.capability-metric {
+  position: absolute;
+  right: 28px;
+  bottom: 24px;
+  display: grid;
+  justify-items: end;
+}
+.capability-metric strong {
+  color: #2780ed;
+  font-size: 28px;
+  font-variant-numeric: tabular-nums;
+}
+.capability-metric span {
+  margin-top: 4px;
+  color: #7b8da2;
+  font-size: 9px;
+}
+.comparison-section {
+  padding: 112px 0 130px;
+  background: #eef7ff;
+}
+.center-heading {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.center-heading > p:last-child {
+  margin-right: auto;
+  margin-left: auto;
+}
+.comparison-table-wrap {
+  margin-top: 58px;
+  overflow-x: auto;
+  border-radius: 15px 5px 15px 5px;
+  box-shadow: 0 22px 50px rgba(59, 117, 186, 0.1);
+}
+.comparison-table-wrap table {
+  width: 100%;
+  min-width: 900px;
+  border-collapse: collapse;
+  background: rgba(255, 255, 255, 0.9);
+}
+.comparison-table-wrap th,
+.comparison-table-wrap td {
+  padding: 22px 24px;
+  border-bottom: 1px solid #e1ebf5;
+  color: #6d7e92;
+  font-size: 12px;
+  line-height: 1.6;
+  text-align: left;
+}
+.comparison-table-wrap thead th {
+  color: #48617d;
+  background: #e2effd;
+  font-size: 11px;
+}
+.comparison-table-wrap thead th:last-child {
+  color: #fff;
+  background: #3187ee;
+}
+.comparison-table-wrap thead span {
+  display: block;
+  margin-top: 4px;
+  font-size: 8px;
+  opacity: 0.75;
+}
+.comparison-table-wrap tbody th {
+  color: #415974;
+  font-weight: 600;
+}
+.comparison-table-wrap td:last-child {
+  background: rgba(49, 135, 238, 0.05);
+}
+.comparison-table-wrap td strong {
+  color: #267eec;
+  font-weight: 600;
+}
+.value-added-section {
+  padding: 116px 0 132px;
+}
+.value-added-heading {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  align-items: end;
+  gap: 80px;
+}
+.value-added-heading > p {
+  margin-bottom: 6px;
+}
+.value-added-list {
+  display: grid;
+  gap: 30px;
+  margin-top: 62px;
+}
+.value-added-list article {
+  min-height: 390px;
+  display: grid;
+  grid-template-columns: 0.9fr 1.1fr;
+  overflow: hidden;
+  border-radius: 7px 20px 7px 20px;
+  background: #f1f7fd;
+}
+.value-added-list article.reverse {
+  grid-template-columns: 1.1fr 0.9fr;
+}
+.value-added-list article.reverse .value-added-image {
+  order: 2;
+}
+.value-added-image {
+  position: relative;
+  overflow: hidden;
+  background: #e5f1ff;
+}
+.value-added-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.value-added-image > span {
+  position: absolute;
+  top: 24px;
+  left: 24px;
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border-radius: 13px 4px 13px 4px;
+  color: #fff;
+  background: rgba(35, 121, 229, 0.86);
+  font-size: 10px;
+}
+.value-added-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 55px;
+}
+.value-added-copy > p {
+  margin: 0;
+  color: #2e80e8;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.value-added-copy h3 {
+  margin: 16px 0 0;
+  color: #374b63;
+  font-size: 31px;
+}
+.value-added-copy > span {
+  margin-top: 16px;
+  color: #718197;
+  font-size: 13px;
+  line-height: 1.75;
+}
+.value-added-copy ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 24px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.value-added-copy li {
+  padding: 8px 11px;
+  border-radius: 5px;
+  color: #557598;
+  background: rgba(255, 255, 255, 0.75);
+  font-size: 10px;
+}
+.value-added-copy button {
+  align-self: flex-start;
+  margin-top: 25px;
+  padding: 0 0 5px;
+  border-bottom: 1px solid #91bce8;
+  color: #287ce6;
+  background: transparent;
+  font-size: 12px;
+}
+.proof-section {
+  padding: 110px 0 126px;
+  background: #f2f7fd;
+}
+.proof-layout {
+  display: grid;
+  grid-template-columns: 0.76fr 1.24fr;
+  gap: 85px;
+  align-items: center;
+}
+.proof-layout header > a {
+  display: inline-block;
+  margin-top: 25px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #91bce8;
+  color: #287ce6;
+  font-size: 12px;
+  text-decoration: none;
+}
+.proof-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.proof-stats article {
+  min-height: 185px;
+  padding: 29px;
+  border-radius: 15px 5px 15px 5px;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: inset 0 1px 0 #fff;
+}
+.proof-stats span {
+  color: #98adc5;
+  font-size: 9px;
+}
+.proof-stats strong {
+  display: block;
+  margin-top: 32px;
+  color: #277fec;
+  font-size: 30px;
+  font-variant-numeric: tabular-nums;
+}
+.proof-stats p {
+  margin: 6px 0 0;
+  color: #718298;
+  font-size: 11px;
+}
+.advantages-cta {
+  position: relative;
+  min-height: 430px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+.advantages-cta-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.advantages-cta-content {
+  padding: 75px 0;
+  text-align: center;
+}
+.advantages-cta-content > p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.advantages-cta-content h2 {
+  margin: 17px 0 0;
+  color: #2f75cc;
+  font-size: clamp(32px, 3.2vw, 50px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.advantages-cta-content .primary-button {
+  margin-top: 29px;
+}
+@media (max-width: 980px) {
+  .advantages-hero,
+  .advantages-hero-grid {
+    min-height: auto;
+  }
+  .advantages-hero-grid,
+  .advantage-intro-grid,
+  .advantage-story-grid,
+  .value-added-heading,
+  .proof-layout {
+    grid-template-columns: 1fr;
+  }
+  .advantages-hero-grid {
+    padding-top: 74px;
+    padding-bottom: 62px;
+  }
+  .advantage-engine {
+    justify-self: center;
+    margin-top: 20px;
+  }
+  .advantage-intro-grid,
+  .proof-layout {
+    gap: 45px;
+  }
+  .advantage-story-grid {
+    gap: 50px;
+  }
+  .alternate .advantage-story-copy,
+  .alternate .advantage-story-visual {
+    order: initial;
+  }
+  .advantage-story-visual {
+    width: min(650px, 100%);
+  }
+  .value-added-heading {
+    gap: 14px;
+  }
+  .value-added-heading > p {
+    margin: 0;
+  }
+}
+@media (max-width: 600px) {
+  .advantages-hero-grid {
+    padding-top: 54px;
+  }
+  .advantages-hero-copy h1 {
+    font-size: clamp(37px, 10vw, 49px);
+  }
+  .advantages-hero-copy > p:nth-of-type(2) {
+    font-size: 15px;
+  }
+  .hero-actions {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .advantage-engine {
+    aspect-ratio: 0.96;
+  }
+  .advantage-orbit-b {
+    width: 340px;
+    height: 340px;
+  }
+  .advantage-orbit-a {
+    width: 255px;
+    height: 255px;
+  }
+  .engine-core {
+    width: 125px;
+    height: 125px;
+    border-width: 9px;
+  }
+  .engine-core strong {
+    font-size: 17px;
+  }
+  .engine-node {
+    width: 72px;
+    height: 66px;
+  }
+  .engine-node strong {
+    font-size: 11px;
+  }
+  .advantage-intro-section,
+  .advantage-story,
+  .comparison-section,
+  .value-added-section,
+  .proof-section {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .intro-sequence {
+    grid-template-columns: 1fr;
+  }
+  .intro-sequence article {
+    min-height: 140px;
+  }
+  .advantage-story-copy h2 {
+    font-size: 31px;
+  }
+  .advantage-story-visual {
+    min-height: 430px;
+  }
+  .capability-map {
+    width: 310px;
+    height: 280px;
+  }
+  .capability-map::before {
+    width: 205px;
+    height: 205px;
+  }
+  .capability-center {
+    width: 105px;
+    height: 105px;
+    border-width: 8px;
+  }
+  .capability-node {
+    min-width: 83px;
+    padding: 9px;
+  }
+  .capability-line {
+    height: 100px;
+  }
+  .capability-metric {
+    right: 18px;
+    bottom: 17px;
+  }
+  .capability-metric strong {
+    font-size: 21px;
+  }
+  .value-added-list article,
+  .value-added-list article.reverse {
+    grid-template-columns: 1fr;
+  }
+  .value-added-list article.reverse .value-added-image {
+    order: initial;
+  }
+  .value-added-image {
+    min-height: 260px;
+  }
+  .value-added-copy {
+    padding: 32px 23px;
+  }
+  .value-added-copy h3 {
+    font-size: 26px;
+  }
+  .proof-stats {
+    grid-template-columns: 1fr;
+  }
+  .proof-stats article {
+    min-height: 145px;
+  }
+  .advantages-cta {
+    min-height: 390px;
+  }
+  .advantages-cta-content h2 br {
+    display: none;
+  }
+}
+</style>
diff --git a/pages/cases/[slug].vue b/pages/cases/[slug].vue
new file mode 100644
index 0000000..c68aa96
--- /dev/null
+++ b/pages/cases/[slug].vue
@@ -0,0 +1,1237 @@
+<script setup>
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+import { getCaseBySlug, resultSnapshots } from '~/data/cases'
+
+const route = useRoute()
+const { openConsultation } = useConsultation()
+const caseStudy = getCaseBySlug(route.params.slug)
+
+if (!caseStudy) {
+  throw createError({ statusCode: 404, statusMessage: '案例不存在' })
+}
+
+useHead({
+  title: `${caseStudy.title}｜客户案例`,
+  meta: [{ name: 'description', content: caseStudy.description }]
+})
+
+function requestSimilarPlan(source) {
+  openConsultation({
+    title: '获取教育培训行业增长方案',
+    industry: caseStudy.industry,
+    source
+  })
+}
+</script>
+
+<template>
+  <div class="case-detail-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="detail-hero">
+        <div class="detail-hero-mesh" aria-hidden="true"></div>
+        <div class="page-width">
+          <nav class="breadcrumb" aria-label="面包屑导航">
+            <NuxtLink to="/">首页</NuxtLink><span>/</span><NuxtLink to="/cases">客户案例</NuxtLink
+            ><span>/</span><b>{{ caseStudy.industry }}</b>
+          </nav>
+          <div class="detail-hero-grid">
+            <div class="detail-hero-copy">
+              <div class="case-meta">
+                <span>{{ caseStudy.industry }}</span
+                ><span>{{ caseStudy.client }}</span
+                ><span>合作周期 {{ caseStudy.duration }}</span>
+              </div>
+              <h1>{{ caseStudy.title }}</h1>
+              <p>{{ caseStudy.description }}</p>
+              <button
+                class="primary-button"
+                type="button"
+                @click="requestSimilarPlan('案例详情 Hero')"
+              >
+                获取同类行业方案 <AppIcon name="arrow-right" />
+              </button>
+            </div>
+            <div class="detail-hero-result">
+              <div class="result-label">PROJECT OUTCOME</div>
+              <div class="result-orbit">
+                <i></i><i></i><i></i>
+                <div>
+                  <small>核心问题覆盖率</small><strong>88%</strong><span>项目启动前为 11%</span>
+                </div>
+              </div>
+              <div class="result-side result-side-one">
+                <strong>+215%</strong><span>官网 AI 来源流量</span>
+              </div>
+              <div class="result-side result-side-two">
+                <strong>+190%</strong><span>精准学员咨询量</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="overview-section">
+        <div class="page-width overview-grid">
+          <header class="section-heading">
+            <p class="section-kicker">01 · 项目背景</p>
+            <h2>品牌实力不弱，<br />但没有被 AI 完整理解</h2>
+          </header>
+          <div class="overview-content">
+            <p v-for="paragraph in caseStudy.background" :key="paragraph">{{ paragraph }}</p>
+            <aside class="objective-box">
+              <strong>客户希望解决</strong>
+              <ul>
+                <li v-for="objective in caseStudy.objectives" :key="objective">{{ objective }}</li>
+              </ul>
+            </aside>
+          </div>
+        </div>
+      </section>
+
+      <section class="baseline-section">
+        <div class="page-width">
+          <header class="center-heading">
+            <p class="section-kicker">02 · 前期调研</p>
+            <h2>先找到品牌没有进入推荐的原因</h2>
+            <p>
+              项目组选取 150
+              个高频问题进行基线测试，并从推荐表现、信息完整度与转化链路三个层面判断问题。
+            </p>
+          </header>
+          <div class="baseline-grid">
+            <article
+              v-for="(item, index) in caseStudy.baseline"
+              :key="item[0]"
+              :class="{ wide: index === 4 }"
+            >
+              <span>0{{ index + 1 }}</span>
+              <h3>{{ item[0] }}</h3>
+              <p>{{ item[1] }}</p>
+            </article>
+          </div>
+          <div class="baseline-conclusion">
+            <span>综合判断</span>
+            <p>品牌并非缺少业务实力，而是缺少面向 AI 搜索场景的结构化内容表达和可信信源覆盖。</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="solution-detail-section">
+        <div class="page-width">
+          <header class="solution-detail-heading">
+            <div>
+              <p class="section-kicker">03 · 解决方案</p>
+              <h2>围绕家长完整决策路径，重建内容与信任证据</h2>
+            </div>
+            <p>
+              先完善 AI 可以识别的品牌基础认知，再强化推荐类问题中的信任依据，最后打通咨询转化链路。
+            </p>
+          </header>
+
+          <section class="question-framework">
+            <div class="subsection-index">A</div>
+            <div class="subsection-copy">
+              <p>四维全旅程问题库</p>
+              <h3>从 150 个基线问题，扩展为 420+ 条真实提问</h3>
+            </div>
+            <div class="question-grid">
+              <article v-for="(item, index) in caseStudy.questionFramework" :key="item.title">
+                <span>0{{ index + 1 }}</span>
+                <h4>{{ item.title }}</h4>
+                <p>{{ item.content }}</p>
+                <strong>{{ item.goal }}</strong>
+              </article>
+            </div>
+          </section>
+
+          <section class="phase-section">
+            <div class="subsection-index">B</div>
+            <div class="subsection-copy">
+              <p>分阶段内容建设</p>
+              <h3>先让品牌稳定出现，再争取推荐优先级</h3>
+            </div>
+            <div class="phase-list">
+              <article v-for="phase in caseStudy.phases" :key="phase.number">
+                <span>{{ phase.number }}</span>
+                <div>
+                  <h4>{{ phase.title }}</h4>
+                  <p>{{ phase.text }}</p>
+                </div>
+              </article>
+            </div>
+          </section>
+
+          <section class="distribution-section">
+            <div class="subsection-index">C</div>
+            <div class="subsection-copy">
+              <p>可信信源分发</p>
+              <h3>建立“权威层—讨论层—平台层”矩阵</h3>
+            </div>
+            <div class="distribution-map">
+              <article v-for="(item, index) in caseStudy.distribution" :key="item[0]">
+                <span>0{{ index + 1 }}</span>
+                <h4>{{ item[0] }}</h4>
+                <strong>{{ item[1] }}</strong>
+                <p>{{ item[2] }}</p>
+              </article>
+              <div class="distribution-center">
+                <small>同一套</small><strong>品牌事实</strong><span>统一表达</span>
+              </div>
+            </div>
+          </section>
+
+          <section class="monitor-section">
+            <div class="subsection-index">D</div>
+            <div class="subsection-copy">
+              <p>持续监测与迭代</p>
+              <h3>每一轮结果，都进入下一轮内容调整</h3>
+            </div>
+            <div class="monitor-track">
+              <span>问题覆盖率</span><span>品牌提及率</span><span>前三推荐率</span
+              ><span>信息准确率</span><span>AI 来源流量</span><span>咨询线索质量</span>
+            </div>
+          </section>
+        </div>
+      </section>
+
+      <section class="result-section">
+        <div class="page-width">
+          <header class="center-heading">
+            <p class="section-kicker">04 · 项目成果</p>
+            <h2>从“几乎不被推荐”到稳定进入家长决策场景</h2>
+            <p>以下指标用于展示项目推进前后的变化，不代表对其他项目作出相同效果承诺。</p>
+          </header>
+          <div class="result-table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>核心指标</th>
+                  <th>项目前</th>
+                  <th>项目后 / 峰值</th>
+                  <th>变化说明</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in caseStudy.resultTable" :key="row[0]">
+                  <th>{{ row[0] }}</th>
+                  <td>{{ row[1] }}</td>
+                  <td>
+                    <strong>{{ row[2] }}</strong>
+                  </td>
+                  <td>{{ row[3] }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="outcome-grid">
+            <article v-for="(outcome, index) in caseStudy.outcomes" :key="outcome[1]">
+              <span>0{{ index + 1 }}</span
+              ><strong>{{ outcome[0] }}</strong>
+              <p>{{ outcome[1] }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-summary-section">
+        <div class="page-width detail-summary-grid">
+          <div class="summary-quote">
+            <span>项目复盘</span>
+            <blockquote>
+              GEO 的价值不是再增加一个投放渠道，而是帮助品牌进入用户做决定之前的那一次提问。
+            </blockquote>
+          </div>
+          <div class="summary-copy">
+            <p>
+              项目累计产出 210+ 篇合规内容，覆盖教育媒体、垂类平台、家长社区与知识问答平台等 15
+              类渠道。
+            </p>
+            <p>
+              AI 来源用户的页面停留时长、课程页访问率与咨询意向优于传统广告流量。项目推进至第 4
+              个月时，客户启动年度续约沟通，并新增小学段课程的 GEO 推广需求。
+            </p>
+            <button
+              class="primary-button small"
+              type="button"
+              @click="requestSimilarPlan('案例总结板块')"
+            >
+              获取同类方案 <AppIcon name="arrow-right" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section class="related-section">
+        <div class="page-width">
+          <header class="related-heading">
+            <div>
+              <p class="section-kicker">其他行业结果</p>
+              <h2>不同路径，同样关注业务结果</h2>
+            </div>
+            <NuxtLink to="/cases">返回全部案例 <AppIcon name="arrow-right" /></NuxtLink>
+          </header>
+          <div class="related-grid">
+            <article v-for="snapshot in resultSnapshots.slice(0, 3)" :key="snapshot.industry">
+              <img :src="snapshot.cover" :alt="`${snapshot.industry}案例结果`" />
+              <div>
+                <span>{{ snapshot.industry }}</span>
+                <h3>{{ snapshot.title }}</h3>
+                <strong>{{ snapshot.metric }}</strong>
+                <p>{{ snapshot.secondary }}</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-cta">
+        <div class="detail-cta-art" aria-hidden="true"></div>
+        <div class="page-width detail-cta-content">
+          <p>希望品牌也进入用户的 AI 推荐列表？</p>
+          <h2>先做一次可见性诊断，<br />找到最值得优先解决的问题</h2>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestSimilarPlan('案例详情底部 CTA')"
+          >
+            获取教育行业增长方案 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.case-detail-page {
+  --detail-blue: #237df0;
+  overflow: hidden;
+  color: #344359;
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.section-kicker {
+  margin: 0;
+  color: var(--detail-blue);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.detail-hero {
+  position: relative;
+  min-height: 690px;
+  isolation: isolate;
+  background: #eff6ff;
+}
+.detail-hero-mesh {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 79% 38%, rgba(72, 156, 255, 0.26), transparent 28%),
+    linear-gradient(112deg, #f8fbff, #e6f1ff);
+}
+.detail-hero-mesh::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.18;
+  background-image:
+    linear-gradient(rgba(55, 125, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(55, 125, 214, 0.08) 1px, transparent 1px);
+  background-size: 58px 58px;
+  mask-image: linear-gradient(90deg, transparent, #000);
+}
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-top: 28px;
+  color: #8291a4;
+  font-size: 11px;
+}
+.breadcrumb a {
+  color: #71849a;
+  text-decoration: none;
+}
+.breadcrumb a:hover {
+  color: #247ce9;
+}
+.breadcrumb b {
+  color: #4d6e93;
+  font-weight: 600;
+}
+.detail-hero-grid {
+  min-height: 625px;
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  align-items: center;
+  gap: 70px;
+  padding: 35px 0 70px;
+}
+.case-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+}
+.case-meta span {
+  padding: 7px 10px;
+  border: 1px solid rgba(70, 136, 217, 0.18);
+  border-radius: 4px;
+  color: #597794;
+  background: rgba(255, 255, 255, 0.55);
+  font-size: 10px;
+}
+.detail-hero-copy h1 {
+  max-width: 780px;
+  margin: 22px 0 0;
+  color: #344359;
+  font-size: clamp(42px, 4vw, 65px);
+  letter-spacing: -0.055em;
+  line-height: 1.2;
+}
+.detail-hero-copy > p {
+  max-width: 690px;
+  margin: 23px 0 0;
+  color: #68798e;
+  font-size: 15px;
+  line-height: 1.85;
+}
+.detail-hero-copy .primary-button {
+  margin-top: 31px;
+}
+.detail-hero-result {
+  position: relative;
+  width: min(520px, 100%);
+  aspect-ratio: 1;
+  justify-self: end;
+}
+.result-label {
+  position: absolute;
+  top: 5%;
+  right: 6%;
+  color: #7895b6;
+  font-size: 9px;
+  letter-spacing: 0.16em;
+}
+.result-orbit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 360px;
+  height: 360px;
+  border: 1px dashed rgba(48, 132, 232, 0.36);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.result-orbit::before {
+  position: absolute;
+  inset: 45px;
+  content: '';
+  border: 1px solid rgba(52, 135, 232, 0.24);
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.9),
+    rgba(128, 195, 255, 0.19) 60%,
+    transparent
+  );
+}
+.result-orbit > div {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: 50%;
+  width: 190px;
+  height: 190px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 13px solid rgba(255, 255, 255, 0.64);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #2c82f0, #48b8e8);
+  box-shadow: 0 25px 48px rgba(37, 121, 225, 0.29);
+  transform: translate(-50%, -50%);
+}
+.result-orbit small {
+  font-size: 10px;
+  opacity: 0.8;
+}
+.result-orbit strong {
+  margin-top: 6px;
+  font-size: 42px;
+  font-variant-numeric: tabular-nums;
+}
+.result-orbit span {
+  margin-top: 3px;
+  font-size: 9px;
+  opacity: 0.75;
+}
+.result-orbit i {
+  position: absolute;
+  z-index: 2;
+  width: 14px;
+  height: 14px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: #2e84ef;
+  box-shadow: 0 6px 15px rgba(42, 127, 232, 0.32);
+}
+.result-orbit i:nth-child(1) {
+  top: -7px;
+  left: 50%;
+}
+.result-orbit i:nth-child(2) {
+  right: 7%;
+  bottom: 18%;
+  background: #4fc2e8;
+}
+.result-orbit i:nth-child(3) {
+  bottom: 5%;
+  left: 18%;
+  background: #776ff0;
+}
+.result-side {
+  position: absolute;
+  z-index: 4;
+  min-width: 140px;
+  padding: 17px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 12px 4px 12px 4px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 16px 35px rgba(53, 112, 183, 0.13);
+  backdrop-filter: blur(10px);
+}
+.result-side strong {
+  display: block;
+  color: #277fec;
+  font-size: 25px;
+  font-variant-numeric: tabular-nums;
+}
+.result-side span {
+  color: #74869b;
+  font-size: 9px;
+}
+.result-side-one {
+  top: 18%;
+  right: 0;
+}
+.result-side-two {
+  bottom: 16%;
+  left: 0;
+}
+.overview-section {
+  padding: 116px 0 130px;
+}
+.overview-grid {
+  display: grid;
+  grid-template-columns: 0.72fr 1.28fr;
+  gap: 95px;
+  align-items: start;
+}
+.section-heading {
+  position: sticky;
+  top: 105px;
+}
+.section-heading h2,
+.center-heading h2,
+.solution-detail-heading h2,
+.related-heading h2 {
+  margin: 15px 0 0;
+  color: #344359;
+  font-size: clamp(32px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.28;
+}
+.overview-content > p {
+  margin: 0 0 20px;
+  color: #66788e;
+  font-size: 15px;
+  line-height: 1.95;
+}
+.objective-box {
+  margin-top: 35px;
+  padding: 30px;
+  border-radius: 15px 5px 15px 5px;
+  background: #eef6ff;
+}
+.objective-box > strong {
+  color: #3c5877;
+  font-size: 13px;
+}
+.objective-box ul {
+  display: grid;
+  gap: 13px;
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.objective-box li {
+  position: relative;
+  padding-left: 18px;
+  color: #6b7d92;
+  font-size: 13px;
+  line-height: 1.65;
+}
+.objective-box li::before {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  content: '';
+  border-radius: 50%;
+  background: #3d8fee;
+}
+.baseline-section {
+  padding: 110px 0 126px;
+  background: #eef7ff;
+}
+.center-heading {
+  max-width: 820px;
+  margin: 0 auto;
+  text-align: center;
+}
+.center-heading > p:last-child {
+  max-width: 670px;
+  margin: 18px auto 0;
+  color: #748498;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.baseline-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-top: 60px;
+}
+.baseline-grid article {
+  min-height: 205px;
+  padding: 28px;
+  border-radius: 14px 5px 14px 5px;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: inset 0 1px 0 #fff;
+}
+.baseline-grid article.wide {
+  grid-column: span 4;
+  min-height: 135px;
+}
+.baseline-grid span {
+  color: #8ba8c7;
+  font-size: 10px;
+  font-weight: 700;
+}
+.baseline-grid h3 {
+  margin: 34px 0 0;
+  color: #3c526b;
+  font-size: 17px;
+}
+.baseline-grid p {
+  margin: 10px 0 0;
+  color: #77879a;
+  font-size: 12px;
+  line-height: 1.65;
+}
+.baseline-grid article.wide h3 {
+  margin-top: 20px;
+}
+.baseline-conclusion {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  gap: 28px;
+  margin-top: 25px;
+  padding: 27px 30px;
+  border-left: 3px solid #358bf0;
+  background: rgba(255, 255, 255, 0.58);
+}
+.baseline-conclusion span {
+  color: #2f7edc;
+  font-size: 12px;
+  font-weight: 700;
+}
+.baseline-conclusion p {
+  margin: 0;
+  color: #61768f;
+  font-size: 14px;
+  line-height: 1.7;
+}
+.solution-detail-section {
+  padding: 116px 0 132px;
+}
+.solution-detail-heading {
+  display: grid;
+  grid-template-columns: 1.18fr 0.82fr;
+  align-items: end;
+  gap: 80px;
+}
+.solution-detail-heading > p {
+  margin: 0 0 6px;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.question-framework,
+.phase-section,
+.distribution-section,
+.monitor-section {
+  display: grid;
+  grid-template-columns: 70px 0.62fr 1.38fr;
+  gap: 35px;
+  padding: 78px 0;
+  border-bottom: 1px solid #e0e8f1;
+}
+.subsection-index {
+  color: rgba(65, 126, 199, 0.2);
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1;
+}
+.subsection-copy > p {
+  margin: 2px 0 0;
+  color: #2c80e9;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.subsection-copy h3 {
+  margin: 13px 0 0;
+  color: #3a4e66;
+  font-size: 24px;
+  line-height: 1.45;
+}
+.question-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 13px;
+}
+.question-grid article {
+  min-height: 205px;
+  padding: 25px;
+  border-radius: 13px 4px 13px 4px;
+  background: #f1f6fc;
+}
+.question-grid span {
+  color: #93abc4;
+  font-size: 9px;
+}
+.question-grid h4 {
+  margin: 25px 0 0;
+  color: #3d536d;
+  font-size: 17px;
+}
+.question-grid p {
+  margin: 9px 0 0;
+  color: #77879b;
+  font-size: 11px;
+  line-height: 1.6;
+}
+.question-grid strong {
+  display: block;
+  margin-top: 16px;
+  color: #4b80b9;
+  font-size: 10px;
+  line-height: 1.55;
+}
+.phase-list {
+  display: grid;
+  gap: 15px;
+}
+.phase-list article {
+  display: grid;
+  grid-template-columns: 54px 1fr;
+  gap: 20px;
+  padding: 27px;
+  border-left: 2px solid #4b98ef;
+  background: #f3f8fd;
+}
+.phase-list > article > span {
+  color: #4089df;
+  font-size: 10px;
+  font-weight: 700;
+}
+.phase-list h4 {
+  margin: 0;
+  color: #3e536b;
+  font-size: 17px;
+}
+.phase-list p {
+  margin: 9px 0 0;
+  color: #75869a;
+  font-size: 12px;
+  line-height: 1.7;
+}
+.distribution-map {
+  position: relative;
+  min-height: 360px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+.distribution-map article {
+  position: relative;
+  z-index: 2;
+  min-height: 230px;
+  padding: 27px 22px;
+  border: 1px solid #e0eaf5;
+  border-radius: 14px 5px 14px 5px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 16px 32px rgba(60, 118, 189, 0.09);
+}
+.distribution-map article > span {
+  color: #95abc4;
+  font-size: 9px;
+}
+.distribution-map h4 {
+  margin: 24px 0 0;
+  color: #3d536c;
+  font-size: 18px;
+}
+.distribution-map article strong {
+  display: block;
+  margin-top: 10px;
+  color: #3784df;
+  font-size: 11px;
+  line-height: 1.6;
+}
+.distribution-map article p {
+  margin: 10px 0 0;
+  color: #7a899b;
+  font-size: 10px;
+  line-height: 1.6;
+}
+.distribution-center {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 50%;
+  width: 112px;
+  height: 112px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #3185ee, #50bce7);
+  box-shadow: 0 17px 32px rgba(40, 127, 228, 0.25);
+  transform: translate(-50%, -36%);
+}
+.distribution-center small,
+.distribution-center span {
+  font-size: 8px;
+  opacity: 0.73;
+}
+.distribution-center strong {
+  margin: 3px 0;
+  font-size: 14px;
+}
+.monitor-track {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  gap: 11px;
+}
+.monitor-track span {
+  padding: 12px 15px;
+  border-radius: 5px;
+  color: #557596;
+  background: #eef6ff;
+  font-size: 11px;
+}
+.result-section {
+  padding: 112px 0 130px;
+  background: #eef7ff;
+}
+.result-table-wrap {
+  margin-top: 58px;
+  overflow-x: auto;
+  border-radius: 15px 5px 15px 5px;
+  box-shadow: 0 22px 50px rgba(59, 117, 186, 0.1);
+}
+.result-table-wrap table {
+  width: 100%;
+  min-width: 900px;
+  border-collapse: collapse;
+  background: rgba(255, 255, 255, 0.88);
+}
+.result-table-wrap th,
+.result-table-wrap td {
+  padding: 19px 22px;
+  border-bottom: 1px solid #e1ebf5;
+  color: #6d7e92;
+  font-size: 11px;
+  line-height: 1.55;
+  text-align: left;
+}
+.result-table-wrap thead th {
+  color: #47617e;
+  background: #e3f0fd;
+  font-size: 10px;
+}
+.result-table-wrap tbody th {
+  color: #405873;
+  font-weight: 600;
+}
+.result-table-wrap td strong {
+  color: #267eec;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
+.outcome-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  margin-top: 26px;
+}
+.outcome-grid article {
+  min-height: 170px;
+  padding: 25px;
+  border-radius: 13px 4px 13px 4px;
+  background: rgba(255, 255, 255, 0.68);
+}
+.outcome-grid span {
+  color: #9bb0c7;
+  font-size: 9px;
+}
+.outcome-grid strong {
+  display: block;
+  margin-top: 27px;
+  color: #287fec;
+  font-size: 22px;
+}
+.outcome-grid p {
+  margin: 7px 0 0;
+  color: #728298;
+  font-size: 11px;
+  line-height: 1.6;
+}
+.detail-summary-section {
+  padding: 112px 0 126px;
+}
+.detail-summary-grid {
+  display: grid;
+  grid-template-columns: 0.9fr 1.1fr;
+  gap: 85px;
+  align-items: center;
+}
+.summary-quote {
+  padding: 48px;
+  border-radius: 7px 20px 7px 20px;
+  color: #fff;
+  background: linear-gradient(135deg, #236fcf, #42aee3);
+  box-shadow: 0 26px 55px rgba(37, 111, 203, 0.2);
+}
+.summary-quote > span {
+  font-size: 10px;
+  letter-spacing: 0.13em;
+  opacity: 0.72;
+}
+.summary-quote blockquote {
+  margin: 30px 0 0;
+  font-size: 27px;
+  font-weight: 600;
+  line-height: 1.55;
+}
+.summary-copy p {
+  margin: 0 0 20px;
+  color: #6d7e92;
+  font-size: 14px;
+  line-height: 1.85;
+}
+.summary-copy .primary-button {
+  margin-top: 11px;
+}
+.related-section {
+  padding: 108px 0 124px;
+  background: #f2f7fd;
+}
+.related-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 30px;
+}
+.related-heading > a {
+  padding-bottom: 5px;
+  border-bottom: 1px solid #91bce9;
+  color: #287ce4;
+  font-size: 12px;
+  text-decoration: none;
+}
+.related-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 44px;
+}
+.related-grid article {
+  overflow: hidden;
+  border-radius: 14px 5px 14px 5px;
+  background: #fff;
+  transition:
+    transform 0.24s,
+    box-shadow 0.24s;
+}
+.related-grid article:hover {
+  box-shadow: 0 20px 40px rgba(60, 119, 189, 0.13);
+  transform: translateY(-5px);
+}
+.related-grid img {
+  width: 100%;
+  height: 175px;
+  display: block;
+  object-fit: cover;
+}
+.related-grid article > div {
+  padding: 24px;
+}
+.related-grid span {
+  color: #3b85dd;
+  font-size: 9px;
+}
+.related-grid h3 {
+  min-height: 56px;
+  margin: 12px 0 0;
+  color: #3b4f67;
+  font-size: 17px;
+  line-height: 1.55;
+}
+.related-grid strong {
+  display: block;
+  margin-top: 18px;
+  color: #277fec;
+  font-size: 23px;
+}
+.related-grid p {
+  margin: 5px 0 0;
+  color: #7b8a9c;
+  font-size: 10px;
+}
+.detail-cta {
+  position: relative;
+  min-height: 430px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+.detail-cta-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.detail-cta-content {
+  padding: 75px 0;
+  text-align: center;
+}
+.detail-cta-content > p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.detail-cta-content h2 {
+  margin: 17px 0 0;
+  color: #2f75cc;
+  font-size: clamp(32px, 3.2vw, 50px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.detail-cta-content .primary-button {
+  margin-top: 29px;
+}
+@media (max-width: 980px) {
+  .detail-hero-grid,
+  .overview-grid,
+  .solution-detail-heading,
+  .detail-summary-grid {
+    grid-template-columns: 1fr;
+  }
+  .detail-hero-grid {
+    gap: 25px;
+    padding-top: 58px;
+  }
+  .detail-hero-result {
+    justify-self: center;
+  }
+  .section-heading {
+    position: static;
+  }
+  .overview-grid {
+    gap: 40px;
+  }
+  .baseline-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .baseline-grid article.wide {
+    grid-column: span 2;
+  }
+  .solution-detail-heading {
+    gap: 14px;
+  }
+  .solution-detail-heading > p {
+    margin: 0;
+  }
+  .question-framework,
+  .phase-section,
+  .distribution-section,
+  .monitor-section {
+    grid-template-columns: 60px 1fr;
+  }
+  .question-grid,
+  .phase-list,
+  .distribution-map,
+  .monitor-track {
+    grid-column: 2;
+  }
+  .outcome-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .related-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .related-grid article:last-child {
+    display: none;
+  }
+}
+@media (max-width: 600px) {
+  .breadcrumb {
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  .detail-hero-copy h1 {
+    font-size: clamp(37px, 10vw, 49px);
+  }
+  .detail-hero-copy > p {
+    font-size: 14px;
+  }
+  .detail-hero-result {
+    aspect-ratio: 0.95;
+  }
+  .result-orbit {
+    width: 310px;
+    height: 310px;
+  }
+  .result-orbit > div {
+    width: 150px;
+    height: 150px;
+    border-width: 10px;
+  }
+  .result-orbit strong {
+    font-size: 34px;
+  }
+  .result-side {
+    min-width: 117px;
+    padding: 13px;
+  }
+  .result-side strong {
+    font-size: 20px;
+  }
+  .overview-section,
+  .baseline-section,
+  .solution-detail-section,
+  .result-section,
+  .detail-summary-section,
+  .related-section {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .objective-box {
+    padding: 24px 20px;
+  }
+  .baseline-grid {
+    grid-template-columns: 1fr;
+  }
+  .baseline-grid article.wide {
+    grid-column: auto;
+  }
+  .baseline-conclusion {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  .question-framework,
+  .phase-section,
+  .distribution-section,
+  .monitor-section {
+    grid-template-columns: 38px 1fr;
+    gap: 15px;
+    padding: 55px 0;
+  }
+  .subsection-index {
+    font-size: 38px;
+  }
+  .question-grid {
+    grid-template-columns: 1fr;
+  }
+  .distribution-map {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    padding-top: 70px;
+  }
+  .distribution-map article {
+    min-height: 170px;
+  }
+  .distribution-center {
+    top: 0;
+  }
+  .monitor-track span {
+    padding: 10px;
+  }
+  .outcome-grid {
+    grid-template-columns: 1fr;
+  }
+  .outcome-grid article {
+    min-height: 130px;
+  }
+  .summary-quote {
+    padding: 34px 24px;
+  }
+  .summary-quote blockquote {
+    font-size: 22px;
+  }
+  .related-heading {
+    align-items: start;
+    flex-direction: column;
+  }
+  .related-grid {
+    grid-template-columns: 1fr;
+  }
+  .related-grid article:last-child {
+    display: block;
+  }
+  .detail-cta {
+    min-height: 390px;
+  }
+  .detail-cta-content h2 br {
+    display: none;
+  }
+}
+</style>
diff --git a/pages/cases/index.vue b/pages/cases/index.vue
new file mode 100644
index 0000000..6f360ab
--- /dev/null
+++ b/pages/cases/index.vue
@@ -0,0 +1,1023 @@
+<script setup>
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+import { caseCategories, featuredCase, resultSnapshots } from '~/data/cases'
+
+const activeCategory = ref('全部')
+const { openConsultation } = useConsultation()
+
+useHead({
+  title: '客户案例｜大马棒·云途全域 GEO',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '查看大马棒·云途全域 GEO 在教育培训、企业服务、本地生活和电商零售行业中的真实增长路径与结果数据。'
+    }
+  ]
+})
+
+const showFeatured = computed(
+  () => activeCategory.value === '全部' || activeCategory.value === featuredCase.industry
+)
+const visibleSnapshots = computed(() => {
+  if (activeCategory.value === '全部') return resultSnapshots
+  return resultSnapshots.filter((item) => item.industry === activeCategory.value)
+})
+const hasResults = computed(() => showFeatured.value || visibleSnapshots.value.length > 0)
+
+function requestPlan(industry, source) {
+  openConsultation({ title: `获取${industry}行业增长方案`, industry, source })
+}
+
+function requestCustomPlan(source) {
+  openConsultation({ title: '咨询我的行业增长路径', source })
+}
+</script>
+
+<template>
+  <div class="cases-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="cases-hero">
+        <div class="cases-hero-mesh" aria-hidden="true"></div>
+        <div class="page-width cases-hero-grid">
+          <div class="cases-hero-copy">
+            <p class="page-eyebrow">客户案例</p>
+            <h1>那些和客户一起，<br />跑通的<span>全域路径</span></h1>
+            <p>
+              营销不是全平台撒网，而是找到属于行业的那个入口、那条路径。这里记录我们已经验证过的方法和结果。
+            </p>
+            <div class="hero-proof-line">
+              <div><strong>1000+</strong><span>服务客户</span></div>
+              <div><strong>12+</strong><span>覆盖行业</span></div>
+              <div><strong>全链路</strong><span>从曝光到咨询</span></div>
+            </div>
+            <button
+              class="primary-button"
+              type="button"
+              @click="requestCustomPlan('客户案例页 Hero')"
+            >
+              聊聊我的增长路径 <AppIcon name="arrow-right" />
+            </button>
+          </div>
+
+          <div class="case-collage" aria-label="不同行业案例结果预览">
+            <article
+              v-for="(snapshot, index) in resultSnapshots"
+              :key="snapshot.industry"
+              :class="`collage-card collage-card-${index + 1}`"
+            >
+              <img :src="snapshot.cover" :alt="`${snapshot.industry}案例封面`" />
+              <div>
+                <span>{{ snapshot.industry }}</span
+                ><strong>{{ snapshot.metric }}</strong
+                ><small>{{ snapshot.metricLabel }}</small>
+              </div>
+            </article>
+            <div class="collage-center">
+              <small>CASE LIBRARY</small><strong>真实增长路径</strong><span>持续更新</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="case-library-section">
+        <div class="page-width">
+          <header class="case-library-heading">
+            <div>
+              <p class="section-kicker">按行业查看</p>
+              <h2>结果相似，背后的路径并不相同</h2>
+            </div>
+            <p>筛选行业，查看已经确认的完整案例和结果快照。未经客户授权，案例默认使用匿名名称。</p>
+          </header>
+
+          <div class="case-filters" role="group" aria-label="案例行业筛选">
+            <button
+              v-for="category in caseCategories"
+              :key="category"
+              type="button"
+              :class="{ active: activeCategory === category }"
+              @click="activeCategory = category"
+            >
+              {{ category }}
+            </button>
+          </div>
+
+          <Transition name="case-change" mode="out-in">
+            <div :key="activeCategory" class="case-results">
+              <article v-if="showFeatured" class="featured-case">
+                <div class="featured-case-image">
+                  <img :src="featuredCase.cover" alt="教育培训行业 GEO 案例封面" />
+                  <span>{{ featuredCase.industry }} · 完整案例</span>
+                </div>
+                <div class="featured-case-copy">
+                  <p>{{ featuredCase.client }}</p>
+                  <h2>{{ featuredCase.title }}</h2>
+                  <span class="featured-summary">{{ featuredCase.summary }}</span>
+                  <div class="featured-metrics">
+                    <div v-for="metric in featuredCase.metrics" :key="metric[1]">
+                      <strong>{{ metric[0] }}</strong
+                      ><span>{{ metric[1] }}</span>
+                    </div>
+                  </div>
+                  <NuxtLink :to="`/cases/${featuredCase.slug}`"
+                    >查看完整复盘 <AppIcon name="arrow-right"
+                  /></NuxtLink>
+                </div>
+              </article>
+
+              <div v-if="visibleSnapshots.length" class="snapshot-heading">
+                <div>
+                  <p class="section-kicker">结果快照</p>
+                  <h3>更多已确认的行业结果</h3>
+                </div>
+                <span>完整复盘资料将在获得客户授权后陆续开放</span>
+              </div>
+
+              <div v-if="visibleSnapshots.length" class="snapshot-grid">
+                <article
+                  v-for="(snapshot, index) in visibleSnapshots"
+                  :key="`${activeCategory}-${snapshot.title}`"
+                  :class="{ wide: index === 0 && activeCategory === '全部' }"
+                >
+                  <div class="snapshot-image">
+                    <img :src="snapshot.cover" :alt="`${snapshot.industry}结果快照`" /><span>{{
+                      snapshot.industry
+                    }}</span>
+                  </div>
+                  <div class="snapshot-copy">
+                    <small>{{ snapshot.client }}</small>
+                    <h3>{{ snapshot.title }}</h3>
+                    <div class="snapshot-result">
+                      <strong>{{ snapshot.metric }}</strong
+                      ><span>{{ snapshot.metricLabel }}</span>
+                    </div>
+                    <p>{{ snapshot.secondary }}</p>
+                    <button
+                      type="button"
+                      @click="requestPlan(snapshot.industry, `${snapshot.industry}案例快照`)"
+                    >
+                      获取同类方案 <AppIcon name="arrow-right" />
+                    </button>
+                  </div>
+                </article>
+              </div>
+
+              <div v-if="!hasResults" class="case-empty">
+                <div class="empty-visual" aria-hidden="true"><span></span><span></span><i></i></div>
+                <p class="section-kicker">案例正在整理</p>
+                <h3>该行业的公开案例尚未上线</h3>
+                <p>我们可以先结合您的业务情况，分享对应行业的策略思路与可参考指标。</p>
+                <button
+                  class="primary-button small"
+                  type="button"
+                  @click="requestPlan(activeCategory, '案例筛选空状态')"
+                >
+                  获取{{ activeCategory }}行业建议 <AppIcon name="arrow-right" />
+                </button>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </section>
+
+      <section class="case-method-section">
+        <div class="page-width case-method-grid">
+          <header>
+            <p class="section-kicker">我们如何复盘</p>
+            <h2>不只展示一个漂亮数字</h2>
+            <p>
+              每篇完整案例都会说明项目开始前是什么状态、为什么选择这条路径、执行了什么，以及结果如何被持续监测。
+            </p>
+          </header>
+          <div class="method-list">
+            <article>
+              <span>01</span>
+              <h3>项目背景</h3>
+              <p>业务阶段、行业环境与增长目标。</p>
+            </article>
+            <article>
+              <span>02</span>
+              <h3>前期基线</h3>
+              <p>品牌提及、推荐排序与转化链路。</p>
+            </article>
+            <article>
+              <span>03</span>
+              <h3>解决方案</h3>
+              <p>问题库、内容建设、信源分发与监测。</p>
+            </article>
+            <article>
+              <span>04</span>
+              <h3>业务结果</h3>
+              <p>覆盖率、流量、咨询量与线索质量。</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="cases-cta">
+        <div class="cases-cta-art" aria-hidden="true"></div>
+        <div class="page-width cases-cta-content">
+          <p>案例只是参考，策略需要从你的业务出发</p>
+          <h2>聊聊行业、现状和目标，<br />找到适合你的那条路径</h2>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestCustomPlan('客户案例页底部 CTA')"
+          >
+            咨询我的行业增长路径 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.cases-page {
+  --case-blue: #237df0;
+  overflow: hidden;
+  color: #344359;
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.page-eyebrow,
+.section-kicker {
+  margin: 0;
+  color: var(--case-blue);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.cases-hero {
+  position: relative;
+  min-height: 660px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f1f7ff;
+}
+.cases-hero-mesh {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 80% 25%, rgba(76, 158, 255, 0.22), transparent 27%),
+    radial-gradient(circle at 14% 90%, rgba(97, 200, 235, 0.11), transparent 28%),
+    linear-gradient(110deg, #f8fbff, #e8f2ff);
+}
+.cases-hero-mesh::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.18;
+  background-image:
+    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: linear-gradient(90deg, transparent 20%, #000);
+}
+.cases-hero-grid {
+  min-height: 660px;
+  display: grid;
+  grid-template-columns: 0.9fr 1.1fr;
+  align-items: center;
+  gap: 70px;
+  padding: 52px 0 60px;
+}
+.cases-hero-copy h1 {
+  margin: 15px 0 0;
+  color: #37465b;
+  font-size: clamp(44px, 4vw, 65px);
+  letter-spacing: -0.055em;
+  line-height: 1.18;
+}
+.cases-hero-copy h1 span {
+  color: #1978ef;
+  white-space: nowrap;
+}
+.cases-hero-copy > p:nth-of-type(2) {
+  max-width: 620px;
+  margin: 24px 0 0;
+  color: #68788e;
+  font-size: 16px;
+  line-height: 1.85;
+}
+.hero-proof-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  margin-top: 29px;
+}
+.hero-proof-line div {
+  display: grid;
+}
+.hero-proof-line strong {
+  color: #257dec;
+  font-size: 20px;
+  font-variant-numeric: tabular-nums;
+}
+.hero-proof-line span {
+  margin-top: 4px;
+  color: #8290a2;
+  font-size: 10px;
+}
+.cases-hero-copy .primary-button {
+  margin-top: 31px;
+}
+.case-collage {
+  position: relative;
+  width: min(650px, 100%);
+  aspect-ratio: 1.05;
+  justify-self: end;
+}
+.case-collage::before {
+  position: absolute;
+  inset: 6% 7%;
+  content: '';
+  border: 1px dashed rgba(62, 140, 231, 0.28);
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.9),
+    rgba(151, 205, 255, 0.18) 48%,
+    transparent 69%
+  );
+}
+.collage-card {
+  position: absolute;
+  z-index: 2;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 17px 6px 17px 6px;
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 18px 42px rgba(55, 113, 184, 0.17);
+  backdrop-filter: blur(10px);
+}
+.collage-card img {
+  width: 100%;
+  height: 110px;
+  display: block;
+  object-fit: cover;
+}
+.collage-card > div {
+  display: grid;
+  padding: 13px 15px;
+}
+.collage-card span {
+  color: #7890aa;
+  font-size: 9px;
+}
+.collage-card strong {
+  margin-top: 4px;
+  color: #267eec;
+  font-size: 21px;
+}
+.collage-card small {
+  color: #6f8095;
+  font-size: 9px;
+}
+.collage-card-1 {
+  top: 3%;
+  left: 7%;
+  width: 210px;
+  transform: rotate(-3deg);
+}
+.collage-card-2 {
+  top: 9%;
+  right: 2%;
+  width: 190px;
+  transform: rotate(3deg);
+}
+.collage-card-3 {
+  bottom: 2%;
+  left: 2%;
+  width: 195px;
+  transform: rotate(2deg);
+}
+.collage-card-4 {
+  right: 4%;
+  bottom: 4%;
+  width: 215px;
+  transform: rotate(-2deg);
+}
+.collage-center {
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  width: 170px;
+  height: 170px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 12px solid rgba(255, 255, 255, 0.66);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #2c82ef, #4bb8e9);
+  box-shadow: 0 24px 48px rgba(40, 123, 224, 0.28);
+  transform: translate(-50%, -50%);
+}
+.collage-center small {
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  opacity: 0.76;
+}
+.collage-center strong {
+  margin-top: 8px;
+  font-size: 18px;
+}
+.collage-center span {
+  margin-top: 4px;
+  font-size: 10px;
+  opacity: 0.76;
+}
+.case-library-section {
+  padding: 112px 0 130px;
+}
+.case-library-heading {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  align-items: end;
+  gap: 80px;
+}
+.case-library-heading h2,
+.case-method-grid h2 {
+  margin: 15px 0 0;
+  color: #344359;
+  font-size: clamp(32px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.28;
+}
+.case-library-heading > p,
+.case-method-grid header > p:last-child {
+  max-width: 590px;
+  margin: 0 0 5px;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.case-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 43px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid #e0e9f3;
+}
+.case-filters button {
+  height: 38px;
+  padding: 0 18px;
+  border-radius: 5px;
+  color: #62758b;
+  background: #f1f6fc;
+  font-size: 12px;
+  transition: 0.2s;
+}
+.case-filters button:hover,
+.case-filters button.active {
+  color: #fff;
+  background: #287ff0;
+  box-shadow: 0 8px 18px rgba(39, 126, 238, 0.2);
+  transform: translateY(-1px);
+}
+.case-results {
+  margin-top: 45px;
+}
+.featured-case {
+  display: grid;
+  grid-template-columns: 1.02fr 0.98fr;
+  min-height: 480px;
+  overflow: hidden;
+  border-radius: 7px 22px 7px 22px;
+  background: #eaf4ff;
+  box-shadow: 0 28px 60px rgba(60, 123, 201, 0.13);
+}
+.featured-case-image {
+  position: relative;
+  min-height: 480px;
+  overflow: hidden;
+}
+.featured-case-image::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  background: linear-gradient(90deg, transparent 60%, rgba(234, 244, 255, 0.8));
+}
+.featured-case-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transform: scale(1.05);
+}
+.featured-case-image > span {
+  position: absolute;
+  z-index: 2;
+  top: 28px;
+  left: 28px;
+  padding: 9px 12px;
+  border-radius: 4px;
+  color: #fff;
+  background: rgba(31, 107, 205, 0.82);
+  font-size: 10px;
+  backdrop-filter: blur(8px);
+}
+.featured-case-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 50px 54px 50px 36px;
+}
+.featured-case-copy > p {
+  margin: 0;
+  color: #5181b9;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+.featured-case-copy h2 {
+  max-width: 600px;
+  margin: 16px 0 0;
+  color: #33465d;
+  font-size: clamp(30px, 2.7vw, 43px);
+  letter-spacing: -0.045em;
+  line-height: 1.32;
+}
+.featured-summary {
+  margin-top: 17px;
+  color: #708197;
+  font-size: 13px;
+  line-height: 1.75;
+}
+.featured-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 28px;
+}
+.featured-metrics div {
+  padding-top: 14px;
+  border-top: 1px solid #cadced;
+}
+.featured-metrics strong {
+  display: block;
+  color: #287fec;
+  font-size: 19px;
+  font-variant-numeric: tabular-nums;
+}
+.featured-metrics span {
+  display: block;
+  margin-top: 5px;
+  color: #8392a4;
+  font-size: 9px;
+}
+.featured-case-copy > a {
+  align-self: flex-start;
+  margin-top: 29px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #82b3ea;
+  color: #247be8;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.featured-case-copy > a b {
+  margin-left: 8px;
+}
+.snapshot-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 30px;
+  margin-top: 80px;
+}
+.snapshot-heading h3 {
+  margin: 12px 0 0;
+  color: #35475d;
+  font-size: 30px;
+}
+.snapshot-heading > span {
+  max-width: 390px;
+  color: #8795a6;
+  font-size: 11px;
+  text-align: right;
+}
+.snapshot-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 25px;
+  margin-top: 32px;
+}
+.snapshot-grid article {
+  min-height: 310px;
+  display: grid;
+  grid-template-columns: 0.9fr 1.1fr;
+  overflow: hidden;
+  border-radius: 15px 5px 15px 5px;
+  background: #f2f7fd;
+  transition:
+    transform 0.25s,
+    box-shadow 0.25s,
+    background 0.25s;
+}
+.snapshot-grid article:hover {
+  background: #fff;
+  box-shadow: 0 20px 42px rgba(61, 119, 189, 0.13);
+  transform: translateY(-5px);
+}
+.snapshot-grid article.wide {
+  grid-column: 1 / -1;
+  grid-template-columns: 1.1fr 0.9fr;
+  min-height: 355px;
+}
+.snapshot-image {
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+}
+.snapshot-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.snapshot-grid article:hover img {
+  transform: scale(1.04);
+}
+.snapshot-image span {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  padding: 7px 10px;
+  border-radius: 4px;
+  color: #fff;
+  background: rgba(33, 111, 208, 0.8);
+  font-size: 9px;
+}
+.snapshot-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 30px;
+}
+.snapshot-copy > small {
+  color: #7e93aa;
+  font-size: 9px;
+}
+.snapshot-copy h3 {
+  margin: 11px 0 0;
+  color: #384c64;
+  font-size: 20px;
+  line-height: 1.45;
+}
+.snapshot-result {
+  display: grid;
+  margin-top: 22px;
+}
+.snapshot-result strong {
+  color: #287fec;
+  font-size: 28px;
+  font-variant-numeric: tabular-nums;
+}
+.snapshot-result span {
+  color: #7f8fa2;
+  font-size: 10px;
+}
+.snapshot-copy > p {
+  margin: 9px 0 0;
+  color: #607997;
+  font-size: 11px;
+}
+.snapshot-copy button {
+  align-self: flex-start;
+  margin-top: 21px;
+  padding: 0 0 4px;
+  border-bottom: 1px solid #9bc1e9;
+  color: #2a7de5;
+  background: transparent;
+  font-size: 11px;
+}
+.case-empty {
+  min-height: 440px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 50px 20px;
+  border-radius: 18px 6px 18px 6px;
+  background: #f1f7fd;
+  text-align: center;
+}
+.empty-visual {
+  position: relative;
+  width: 120px;
+  height: 90px;
+  margin-bottom: 28px;
+}
+.empty-visual span {
+  position: absolute;
+  width: 65px;
+  height: 55px;
+  border: 1px solid #9dc5ee;
+  border-radius: 9px 3px 9px 3px;
+  background: rgba(255, 255, 255, 0.75);
+}
+.empty-visual span:first-child {
+  top: 4px;
+  left: 9px;
+  transform: rotate(-8deg);
+}
+.empty-visual span:nth-child(2) {
+  right: 6px;
+  bottom: 4px;
+  transform: rotate(8deg);
+}
+.empty-visual i {
+  position: absolute;
+  z-index: 2;
+  top: 28px;
+  left: 45px;
+  width: 30px;
+  height: 30px;
+  border: 7px solid #fff;
+  border-radius: 50%;
+  background: #3b8fea;
+  box-shadow: 0 9px 18px rgba(51, 135, 232, 0.24);
+}
+.case-empty h3 {
+  margin: 14px 0 0;
+  color: #3b4d63;
+  font-size: 27px;
+}
+.case-empty > p:nth-of-type(2) {
+  max-width: 500px;
+  margin: 12px 0 0;
+  color: #7c8b9d;
+  font-size: 13px;
+  line-height: 1.7;
+}
+.case-empty .primary-button {
+  margin-top: 25px;
+}
+.case-change-enter-active,
+.case-change-leave-active {
+  transition:
+    opacity 0.18s,
+    transform 0.22s;
+}
+.case-change-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.case-change-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+.case-method-section {
+  padding: 108px 0 122px;
+  background: #eef7ff;
+}
+.case-method-grid {
+  display: grid;
+  grid-template-columns: 0.78fr 1.22fr;
+  gap: 85px;
+  align-items: center;
+}
+.case-method-grid header > p:last-child {
+  margin-top: 20px;
+}
+.method-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.method-list article {
+  min-height: 180px;
+  padding: 28px;
+  border-radius: 14px 5px 14px 5px;
+  background: rgba(255, 255, 255, 0.7);
+  box-shadow: inset 0 1px 0 #fff;
+}
+.method-list span {
+  color: #8da8c6;
+  font-size: 10px;
+  font-weight: 700;
+}
+.method-list h3 {
+  margin: 26px 0 0;
+  color: #38506b;
+  font-size: 19px;
+}
+.method-list p {
+  margin: 8px 0 0;
+  color: #7a899b;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.cases-cta {
+  position: relative;
+  min-height: 430px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+.cases-cta-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.cases-cta-content {
+  padding: 75px 0;
+  text-align: center;
+}
+.cases-cta-content > p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.cases-cta-content h2 {
+  margin: 17px 0 0;
+  color: #2f75cc;
+  font-size: clamp(32px, 3.2vw, 50px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.cases-cta-content .primary-button {
+  margin-top: 29px;
+}
+@media (max-width: 980px) {
+  .cases-hero,
+  .cases-hero-grid {
+    min-height: auto;
+  }
+  .cases-hero-grid {
+    grid-template-columns: 1fr;
+    padding-top: 74px;
+    padding-bottom: 64px;
+  }
+  .case-collage {
+    width: min(650px, 100%);
+    justify-self: center;
+    margin-top: 10px;
+  }
+  .case-library-heading,
+  .case-method-grid {
+    grid-template-columns: 1fr;
+    gap: 35px;
+  }
+  .case-library-heading > p {
+    margin: 0;
+  }
+  .featured-case {
+    grid-template-columns: 1fr;
+  }
+  .featured-case-image {
+    min-height: 360px;
+  }
+  .featured-case-image::after {
+    background: linear-gradient(transparent 65%, #eaf4ff);
+  }
+  .featured-case-copy {
+    padding: 42px;
+  }
+  .snapshot-grid {
+    grid-template-columns: 1fr;
+  }
+  .snapshot-grid article.wide {
+    grid-column: auto;
+    grid-template-columns: 0.9fr 1.1fr;
+    min-height: 310px;
+  }
+}
+@media (max-width: 600px) {
+  .cases-hero-grid {
+    padding-top: 54px;
+  }
+  .cases-hero-copy h1 {
+    font-size: clamp(37px, 10vw, 49px);
+  }
+  .cases-hero-copy > p:nth-of-type(2) {
+    font-size: 15px;
+  }
+  .hero-proof-line {
+    gap: 22px;
+  }
+  .case-collage {
+    aspect-ratio: 0.93;
+  }
+  .collage-card {
+    width: 155px;
+  }
+  .collage-card img {
+    height: 82px;
+  }
+  .collage-card-1 {
+    left: 0;
+  }
+  .collage-card-2 {
+    right: 0;
+  }
+  .collage-card-3 {
+    left: 0;
+  }
+  .collage-card-4 {
+    right: 0;
+  }
+  .collage-center {
+    width: 132px;
+    height: 132px;
+    border-width: 9px;
+  }
+  .collage-center strong {
+    font-size: 15px;
+  }
+  .case-library-section {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .case-filters {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 14px;
+  }
+  .case-filters button {
+    flex: 0 0 auto;
+  }
+  .featured-case-image {
+    min-height: 260px;
+  }
+  .featured-case-copy {
+    padding: 30px 22px 34px;
+  }
+  .featured-metrics {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .featured-metrics div {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+  .snapshot-heading {
+    align-items: start;
+    flex-direction: column;
+  }
+  .snapshot-heading > span {
+    text-align: left;
+  }
+  .snapshot-grid article,
+  .snapshot-grid article.wide {
+    grid-template-columns: 1fr;
+  }
+  .snapshot-image {
+    min-height: 210px;
+  }
+  .snapshot-copy {
+    padding: 25px 22px;
+  }
+  .case-method-section {
+    padding-top: 76px;
+    padding-bottom: 84px;
+  }
+  .method-list {
+    grid-template-columns: 1fr;
+  }
+  .method-list article {
+    min-height: 145px;
+  }
+  .cases-cta {
+    min-height: 390px;
+  }
+  .cases-cta-content h2 br {
+    display: none;
+  }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 287dbca..9467b70 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,26 +1,14 @@
 <script setup>
 import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
 
-const consultationOpen = ref(false)
-const mobileMenuOpen = ref(false)
-const activeSection = ref('home')
-const headerScrolled = ref(false)
-const notice = ref('')
 const pageRoot = ref(null)
+const { openConsultation: openGlobalConsultation } = useConsultation()
 let animationContext
 let animationMedia
 
-const navItems = [
-  ['首页', 'home'],
-  ['营销增长服务', 'model'],
-  ['行业解决方案', 'industries'],
-  ['开放客户案例平台', 'cases'],
-  ['核心优势', 'advantages'],
-  ['全球营销增长洞察', 'delivery'],
-  ['关于我们', 'footer']
-]
-
 const logos = [
   'Bond',
   'WaSun',
@@ -115,18 +103,8 @@ const deliverySteps = [
   ]
 ]
 
-function scrollToSection(id) {
-  mobileMenuOpen.value = false
-  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-}
-function openConsultation() {
-  mobileMenuOpen.value = false
-  consultationOpen.value = true
-  notice.value = ''
-}
-function submitConsultation() {
-  consultationOpen.value = false
-  notice.value = '已收到您的咨询，我们将尽快与您联系。'
+function requestConsultation(source, title = '预约免费 GEO 增长诊断') {
+  openGlobalConsultation({ title, source })
 }
 
 onMounted(async () => {
@@ -156,7 +134,7 @@ onMounted(async () => {
 
     const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
     heroTimeline
-      .from('.site-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
+      .from('.subsite-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
       .from('.hero-copy h1', { autoAlpha: 0, y: 32, duration: 0.7, clearProps: 'all' }, '-=0.12')
       .from(
         '.hero-points span',
@@ -164,7 +142,7 @@ onMounted(async () => {
         '-=0.22'
       )
       .from(
-        '.button-row button',
+        '.button-row > *',
         { autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
         '-=0.12'
       )
@@ -247,30 +225,6 @@ onMounted(async () => {
         cleanup.push(() => element.removeEventListener(event, handler))
       }
 
-      ScrollTrigger.create({
-        start: 80,
-        end: 'max',
-        onToggle: ({ isActive }) => {
-          headerScrolled.value = isActive
-        }
-      })
-
-      navItems.forEach(([, target]) => {
-        const trigger = target === 'home' ? '.hero-section' : `#${target}`
-        if (!document.querySelector(trigger)) return
-        ScrollTrigger.create({
-          trigger,
-          start: 'top 48%',
-          end: 'bottom 48%',
-          onEnter: () => {
-            activeSection.value = target
-          },
-          onEnterBack: () => {
-            activeSection.value = target
-          }
-        })
-      })
-
       const hero = document.querySelector('.hero-section')
       const heroCopy = document.querySelector('.hero-copy')
       if (hero && heroCopy) {
@@ -414,303 +368,235 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <main id="home" ref="pageRoot" class="site-shell">
-    <header class="site-header" :class="{ scrolled: headerScrolled }">
-      <div class="page-width header-inner">
-        <a href="#home" class="brand" aria-label="大马棒首页"
-          ><img
-            src="/images/lanhu/slices/home-group114-image33@2x.png"
-            alt="成都大马棒传媒有限公司"
-        /></a>
-        <nav class="desktop-nav" aria-label="主导航">
-          <button
-            v-for="([label, target], index) in navItems"
-            :key="target"
-            :class="{ active: target === activeSection }"
-            @click="scrollToSection(target)"
-          >
-            {{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
-          </button>
-        </nav>
-        <button
-          class="mobile-menu-button"
-          :class="{ open: mobileMenuOpen }"
-          type="button"
-          :aria-expanded="mobileMenuOpen"
-          aria-controls="mobile-navigation"
-          :aria-label="mobileMenuOpen ? '关闭导航菜单' : '打开导航菜单'"
-          @click="mobileMenuOpen = !mobileMenuOpen"
-        >
-          <span class="menu-glyph" aria-hidden="true">{{ mobileMenuOpen ? '×' : '☰' }}</span>
-        </button>
-        <button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
-      </div>
-    </header>
+  <div id="home" ref="pageRoot" class="site-shell">
+    <SiteHeader />
 
-    <Transition name="mobile-nav">
-      <nav
-        v-if="mobileMenuOpen"
-        id="mobile-navigation"
-        class="mobile-navigation"
-        aria-label="移动端导航"
-      >
-        <div class="page-width mobile-navigation-inner">
-          <button
-            v-for="([label, target], index) in navItems"
-            :key="`mobile-${target}`"
-            :class="{ active: index === 0 }"
-            @click="scrollToSection(target)"
-          >
-            <span>{{ label }}</span
-            ><b>↗</b>
-          </button>
-          <button class="mobile-consult-button" @click="openConsultation">
-            立即免费咨询 <b>→</b>
-          </button>
-        </div>
-      </nav>
-    </Transition>
-
-    <section class="hero-section">
-      <div class="hero-art" aria-hidden="true"></div>
-      <div class="page-width hero-content">
-        <div class="hero-copy">
-          <h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
-          <p class="hero-points">
-            <span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
-            ><span>✓ 全链路转化闭环</span>
-          </p>
-          <div class="button-row">
-            <button class="primary-button" @click="openConsultation">免费定制 <b>→</b></button
-            ><button class="outline-button" @click="scrollToSection('cases')">查看成功案例</button>
+    <main>
+      <section class="hero-section">
+        <div class="hero-art" aria-hidden="true"></div>
+        <div class="page-width hero-content">
+          <div class="hero-copy">
+            <h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
+            <p class="hero-points">
+              <span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
+              ><span>✓ 全链路转化闭环</span>
+            </p>
+            <div class="button-row">
+              <button
+                class="primary-button"
+                type="button"
+                @click="requestConsultation('首页 Hero', '免费定制 GEO 增长方案')"
+              >
+                免费定制 <b>→</b></button
+              ><NuxtLink class="outline-button" to="/cases">查看成功案例</NuxtLink>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section class="logo-strip" aria-label="合作品牌">
-      <div class="logo-track">
-        <span
-          v-for="(logo, index) in logos"
-          :key="`${logo}-${index}`"
-          :class="`logo logo-${index % 6}`"
-          >{{ logo }}</span
-        >
-      </div>
-    </section>
+      <section class="logo-strip" aria-label="合作品牌">
+        <div class="logo-track">
+          <span
+            v-for="(logo, index) in logos"
+            :key="`${logo}-${index}`"
+            :class="`logo logo-${index % 6}`"
+            >{{ logo }}</span
+          >
+        </div>
+      </section>
 
-    <section class="intro-section page-width">
-      <SectionTitle
-        >已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
-        >主流行业<template #subtitle
-          >We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning More
-          Than A Dozen Mainstream Industry Sectors</template
-        ></SectionTitle
-      >
-      <div class="stats-panel">
-        <article v-for="stat in stats" :key="stat[1]" class="stat-item">
-          <img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
-          ><span>{{ stat[1] }}</span>
-        </article>
-      </div>
-    </section>
-
-    <section id="model" class="model-section">
-      <div class="page-width">
+      <section class="intro-section page-width">
         <SectionTitle
-          >独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
-            #subtitle
-            >Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
-            Brand Building And Conversion Performance</template
+          >已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
+          >主流行业<template #subtitle
+            >We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning
+            More Than A Dozen Mainstream Industry Sectors</template
           ></SectionTitle
         >
-        <div class="model-layout">
-          <div
-            v-for="model in ringModels"
-            :key="model.title"
-            class="ring ring-diagram"
-            role="img"
-            :aria-label="model.title"
+        <div class="stats-panel">
+          <article v-for="stat in stats" :key="stat[1]" class="stat-item">
+            <img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
+            ><span>{{ stat[1] }}</span>
+          </article>
+        </div>
+      </section>
+
+      <section id="model" class="model-section">
+        <div class="page-width">
+          <SectionTitle
+            >独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
+              #subtitle
+              >Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
+              Brand Building And Conversion Performance</template
+            ></SectionTitle
           >
-            <img class="ring-base" :src="model.image" alt="" />
-            <span
-              v-for="(label, labelIndex) in model.labels"
-              :key="label"
-              :class="`ring-label ring-label-${labelIndex + 1}`"
-              >{{ label }}</span
+          <div class="model-layout">
+            <div
+              v-for="model in ringModels"
+              :key="model.title"
+              class="ring ring-diagram"
+              role="img"
+              :aria-label="model.title"
             >
-            <div class="ring-center-label">
-              <svg v-if="model.icon === 'asset'" viewBox="0 0 48 48" aria-hidden="true">
-                <path d="M10 38V16l14-7 14 7v22H10Z" />
-                <path d="M17 21h4m6 0h4m-14 7h4m6 0h4M22 38v-6h4v6" />
-              </svg>
-              <svg v-else viewBox="0 0 48 48" aria-hidden="true">
-                <circle cx="15" cy="17" r="6" />
-                <circle cx="34" cy="14" r="5" />
-                <circle cx="31" cy="34" r="6" />
-                <path d="m20 18 9-3m2 4v9m-5 4-7-10" />
-              </svg>
-              <strong>{{ model.title }}</strong>
+              <img class="ring-base" :src="model.image" alt="" />
+              <span
+                v-for="(label, labelIndex) in model.labels"
+                :key="label"
+                :class="`ring-label ring-label-${labelIndex + 1}`"
+                >{{ label }}</span
+              >
+              <div class="ring-center-label">
+                <svg v-if="model.icon === 'asset'" viewBox="0 0 48 48" aria-hidden="true">
+                  <path d="M10 38V16l14-7 14 7v22H10Z" />
+                  <path d="M17 21h4m6 0h4m-14 7h4m6 0h4M22 38v-6h4v6" />
+                </svg>
+                <svg v-else viewBox="0 0 48 48" aria-hidden="true">
+                  <circle cx="15" cy="17" r="6" />
+                  <circle cx="34" cy="14" r="5" />
+                  <circle cx="31" cy="34" r="6" />
+                  <path d="m20 18 9-3m2 4v9m-5 4-7-10" />
+                </svg>
+                <strong>{{ model.title }}</strong>
+              </div>
             </div>
-          </div>
-          <div class="core-value">
-            <h3>
-              <img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
-            </h3>
-            <div v-for="point in corePoints" :key="point[0]" class="core-point">
-              <h4><i></i>{{ point[0] }}</h4>
-              <p>{{ point[1] }}</p>
+            <div class="core-value">
+              <h3>
+                <img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
+              </h3>
+              <div v-for="point in corePoints" :key="point[0]" class="core-point">
+                <h4><i></i>{{ point[0] }}</h4>
+                <p>{{ point[1] }}</p>
+              </div>
+              <NuxtLink class="primary-button small" to="/services">了解业务详情 <b>→</b></NuxtLink>
             </div>
-            <button class="primary-button small" @click="openConsultation">
-              了解业务详情 <b>→</b>
-            </button>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section id="advantages" class="advantages-section">
-      <div class="page-width">
-        <SectionTitle
-          ><span class="blue">四大核心</span>优势<template #subtitle
-            >Four Core Advantages</template
-          ></SectionTitle
-        >
-        <div class="lead-advantage">
-          <img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
-          <div>
-            <h3>真人内容生产优势</h3>
-            <p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
-            <p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
-          </div>
-        </div>
-        <div class="advantage-grid">
-          <article v-for="([title, text], index) in advantageCards" :key="title">
-            <img
-              :src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
-              alt=""
-            />
+      <section id="advantages" class="advantages-section">
+        <div class="page-width">
+          <SectionTitle
+            ><span class="blue">四大核心</span>优势<template #subtitle
+              >Four Core Advantages</template
+            ></SectionTitle
+          >
+          <div class="lead-advantage">
+            <img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
             <div>
-              <h3>{{ title }}</h3>
-              <p><b>核心点：</b>{{ text }}</p>
-              <p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
+              <h3>真人内容生产优势</h3>
+              <p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
+              <p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
             </div>
-          </article>
+          </div>
+          <div class="advantage-grid">
+            <article v-for="([title, text], index) in advantageCards" :key="title">
+              <img
+                :src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
+                alt=""
+              />
+              <div>
+                <h3>{{ title }}</h3>
+                <p><b>核心点：</b>{{ text }}</p>
+                <p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
+              </div>
+            </article>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section id="cases" class="cases-section">
-      <div class="case-background" aria-hidden="true"></div>
-      <div class="page-width case-content">
+      <section id="cases" class="cases-section">
+        <div class="case-background" aria-hidden="true"></div>
+        <div class="page-width case-content">
+          <SectionTitle
+            ><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
+            ><template #subtitle
+              >Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
+            ></SectionTitle
+          >
+          <div class="case-panel">
+            <article v-for="(image, index) in caseImages" :key="image">
+              <img :src="image" :alt="`客户案例 ${index + 1}`" />
+              <p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
+            </article>
+          </div>
+          <div class="center-action">
+            <NuxtLink class="primary-button small" to="/cases">查看全部案例 <b>→</b></NuxtLink>
+          </div>
+        </div>
+      </section>
+
+      <section id="industries" class="industries-section page-width">
         <SectionTitle
-          ><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
-          ><template #subtitle
-            >Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
-          ></SectionTitle
-        >
-        <div class="case-panel">
-          <article v-for="(image, index) in caseImages" :key="image">
-            <img :src="image" :alt="`客户案例 ${index + 1}`" />
-            <p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
-          </article>
-        </div>
-        <div class="center-action">
-          <button class="primary-button small" @click="openConsultation">
-            查看全部案例 <b>→</b>
-          </button>
-        </div>
-      </div>
-    </section>
-
-    <section id="industries" class="industries-section page-width">
-      <SectionTitle
-        >深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
-          >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
-          Solutions<br />Tailored To Clients’ Needs</template
-        ></SectionTitle
-      >
-      <div class="industry-grid">
-        <article v-for="card in industryCards" :key="card[0]">
-          <h3>{{ card[0] }}</h3>
-          <img :src="card[2]" alt="" />
-          <div class="quote">“</div>
-          <p>某企业服务客户：<br />{{ card[1] }}</p>
-          <div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
-        </article>
-      </div>
-    </section>
-
-    <section id="delivery" class="delivery-section">
-      <div class="page-width">
-        <SectionTitle
-          ><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
+          >深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
             >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
             Solutions<br />Tailored To Clients’ Needs</template
           ></SectionTitle
         >
-        <div class="delivery-banner"></div>
-        <div class="delivery-grid">
-          <article v-for="step in deliverySteps" :key="step[0]">
-            <img :src="step[2]" alt="" />
-            <div>
-              <h3>{{ step[0] }}：</h3>
-              <p>{{ step[1] }}</p>
-            </div>
+        <div class="industry-grid">
+          <article v-for="card in industryCards" :key="card[0]">
+            <h3>{{ card[0] }}</h3>
+            <img :src="card[2]" alt="" />
+            <div class="quote">“</div>
+            <p>某企业服务客户：<br />{{ card[1] }}</p>
+            <div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
           </article>
         </div>
-      </div>
-    </section>
-
-    <section class="testimonial-section">
-      <div class="page-width">
-        <SectionTitle
-          >客户真实评价，见证<span class="blue">服务品质</span
-          ><template #subtitle
-            >Genuine Client Testimonials Attest To Our Service Quality</template
-          ></SectionTitle
-        >
-        <div class="testimonial-track">
-          <article v-for="index in 5" :key="index">
-            <header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
-            <p>
-              创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
-            </p>
-          </article>
-        </div>
-      </div>
-    </section>
-
-    <section class="cta-section">
-      <div class="cta-art"></div>
-      <div class="cta-content">
-        <h2>AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系</h2>
-        <p>免费获取1对1GEO增长诊断方案</p>
-        <button class="primary-button" @click="openConsultation">立即免费咨询 <b>→</b></button>
-      </div>
-    </section>
-
-    <footer id="footer" class="site-footer">
-      <div class="page-width footer-main">
-        <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
-        <div class="footer-links">
-          <div v-for="n in 6" :key="n"><b>快捷导航</b><span>企业定位企业定位企业定位</span></div>
-        </div>
-        <div class="qr"><span>▦</span><span>▦</span><small>公众号　　微信二维码</small></div>
-      </div>
-      <div class="footer-bottom">
-        备案信息 备案信息 备案信息　　　版权声明版权声明版权声明　　　友情链接友情链接友情链接
-      </div>
-    </footer>
-
-    <div v-if="consultationOpen" class="dialog-mask" @click.self="consultationOpen = false">
-      <section class="consult-dialog" role="dialog" aria-modal="true">
-        <button class="close" aria-label="关闭" @click="consultationOpen = false">×</button>
-        <h2>咨询全域 GEO 方案</h2>
-        <p>提交后，我们会尽快为您匹配专属增长方案。</p>
-        <button class="primary-button" @click="submitConsultation">提交咨询</button>
       </section>
-    </div>
-    <p v-if="notice" class="toast">{{ notice }}</p>
-  </main>
+
+      <section id="delivery" class="delivery-section">
+        <div class="page-width">
+          <SectionTitle
+            ><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
+              >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
+              Solutions<br />Tailored To Clients’ Needs</template
+            ></SectionTitle
+          >
+          <div class="delivery-banner"></div>
+          <div class="delivery-grid">
+            <article v-for="step in deliverySteps" :key="step[0]">
+              <img :src="step[2]" alt="" />
+              <div>
+                <h3>{{ step[0] }}：</h3>
+                <p>{{ step[1] }}</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="testimonial-section">
+        <div class="page-width">
+          <SectionTitle
+            >客户真实评价，见证<span class="blue">服务品质</span
+            ><template #subtitle
+              >Genuine Client Testimonials Attest To Our Service Quality</template
+            ></SectionTitle
+          >
+          <div class="testimonial-track">
+            <article v-for="index in 5" :key="index">
+              <header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
+              <p>
+                创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="cta-section">
+        <div class="cta-art"></div>
+        <div class="cta-content">
+          <h2>
+            AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系
+          </h2>
+          <p>免费获取1对1GEO增长诊断方案</p>
+          <button class="primary-button" type="button" @click="requestConsultation('首页底部 CTA')">
+            立即免费咨询 <b>→</b>
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
 </template>
diff --git a/pages/insights/[slug].vue b/pages/insights/[slug].vue
new file mode 100644
index 0000000..71afc9c
--- /dev/null
+++ b/pages/insights/[slug].vue
@@ -0,0 +1,696 @@
+<script setup>
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+import { getInsightBySlug, insights } from '~/data/insights'
+
+const route = useRoute()
+const { openConsultation } = useConsultation()
+const article = computed(() => getInsightBySlug(route.params.slug))
+
+if (!article.value) {
+  throw createError({ statusCode: 404, statusMessage: '洞察文章不存在' })
+}
+
+const articleIndex = computed(() => insights.findIndex((item) => item.slug === article.value.slug))
+const previousArticle = computed(() => insights[articleIndex.value - 1] || null)
+const nextArticle = computed(() => insights[articleIndex.value + 1] || null)
+const relatedArticles = computed(() =>
+  insights.filter((item) => item.slug !== article.value.slug).slice(0, 3)
+)
+
+useHead(() => ({
+  title: `${article.value.title}｜云途全域增长洞察`,
+  meta: [
+    { name: 'description', content: article.value.excerpt },
+    { property: 'og:title', content: article.value.title },
+    { property: 'og:description', content: article.value.excerpt },
+    { property: 'og:image', content: article.value.cover }
+  ]
+}))
+
+function requestDiagnosis(source) {
+  openConsultation({ title: '预约免费 GEO 增长诊断', source })
+}
+
+function requestWhitepaper(source) {
+  openConsultation({ title: '获取 2026 AI 搜索与品牌增长观察', need: '行业白皮书', source })
+}
+</script>
+
+<template>
+  <div class="article-page">
+    <a class="skip-link" href="#main-content">跳到文章正文</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <article>
+        <header class="article-hero">
+          <div class="article-hero-art" aria-hidden="true"></div>
+          <div class="page-width article-hero-inner">
+            <nav class="breadcrumbs" aria-label="面包屑">
+              <NuxtLink to="/">首页</NuxtLink><span>/</span
+              ><NuxtLink to="/insights">增长洞察</NuxtLink><span>/</span
+              ><b>{{ article.category }}</b>
+            </nav>
+            <div class="article-heading">
+              <p>{{ article.category }}</p>
+              <h1>{{ article.title }}</h1>
+              <span>{{ article.excerpt }}</span>
+              <div class="article-byline">
+                <div><strong>云途全域编辑部</strong><small>YUNTU GEO INSIGHTS</small></div>
+                <time :datetime="article.date">{{ article.date }}</time
+                ><span>{{ article.readingTime }}</span
+                ><span>{{ article.views }} 阅读</span>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <div class="page-width article-layout">
+          <aside class="article-aside">
+            <NuxtLink to="/insights" class="back-link"
+              ><AppIcon name="arrow-left" /> 返回洞察列表</NuxtLink
+            >
+            <div>
+              <span>分享主题</span><strong>{{ article.category }}</strong>
+            </div>
+            <button type="button" @click="requestDiagnosis('洞察文章侧边栏')">
+              诊断品牌可见性 <AppIcon name="arrow-right" />
+            </button>
+          </aside>
+
+          <div class="article-content">
+            <figure class="article-cover"><img :src="article.cover" :alt="article.title" /></figure>
+
+            <template v-if="article.sections?.length">
+              <p class="article-lead">{{ article.lead }}</p>
+              <section v-for="(section, index) in article.sections" :key="section.title">
+                <span class="section-number">0{{ index + 1 }}</span>
+                <h2>{{ section.title }}</h2>
+                <p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
+                <div v-if="section.comparison" class="comparison-table">
+                  <div class="comparison-head">
+                    <span>比较维度</span><span>传统 SEO</span><span>GEO</span>
+                  </div>
+                  <div v-for="row in section.comparison" :key="row[0]" class="comparison-row">
+                    <strong>{{ row[0] }}</strong
+                    ><span>{{ row[1] }}</span
+                    ><span>{{ row[2] }}</span>
+                  </div>
+                </div>
+              </section>
+              <blockquote>
+                GEO
+                的目标不是让品牌在每一个问题里出现，而是在真正影响用户决策的问题中，被准确理解并获得可信推荐。
+              </blockquote>
+            </template>
+
+            <section v-else class="article-draft">
+              <span class="section-number">01</span>
+              <h2>核心观察</h2>
+              <p>{{ article.excerpt }}</p>
+              <div class="draft-note">
+                <strong>完整内容正在编辑</strong>
+                <p>
+                  这篇文章的详细数据、方法与案例仍在复核。我们先保留摘要，避免发布未经确认的信息。
+                </p>
+              </div>
+            </section>
+
+            <div class="inline-cta">
+              <div>
+                <span>把方法放回你的业务</span>
+                <h3>了解品牌当前在 AI 搜索中的真实表现</h3>
+              </div>
+              <button type="button" @click="requestDiagnosis(`洞察文章：${article.title}`)">
+                预约免费诊断 <AppIcon name="arrow-right" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </article>
+
+      <nav class="article-pagination page-width" aria-label="文章翻页">
+        <NuxtLink v-if="previousArticle" :to="`/insights/${previousArticle.slug}`"
+          ><span>上一篇</span><strong>{{ previousArticle.title }}</strong></NuxtLink
+        >
+        <div v-else></div>
+        <NuxtLink v-if="nextArticle" :to="`/insights/${nextArticle.slug}`"
+          ><span>下一篇</span><strong>{{ nextArticle.title }}</strong></NuxtLink
+        >
+      </nav>
+
+      <section class="related-section">
+        <div class="page-width">
+          <header>
+            <div>
+              <p>继续阅读</p>
+              <h2>相关增长洞察</h2>
+            </div>
+            <button type="button" @click="requestWhitepaper('文章详情白皮书入口')">
+              获取行业白皮书 <AppIcon name="arrow-right" />
+            </button>
+          </header>
+          <div class="related-grid">
+            <article v-for="item in relatedArticles" :key="item.slug">
+              <NuxtLink :to="`/insights/${item.slug}`"
+                ><img :src="item.cover" :alt="item.title"
+              /></NuxtLink>
+              <span>{{ item.category }} · {{ item.date }}</span>
+              <h3>
+                <NuxtLink :to="`/insights/${item.slug}`">{{ item.title }}</NuxtLink>
+              </h3>
+            </article>
+          </div>
+        </div>
+      </section>
+    </main>
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.article-page {
+  --article-blue: #237df0;
+  overflow: hidden;
+  color: #344359;
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.article-hero {
+  position: relative;
+  min-height: 545px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f1f7ff;
+}
+.article-hero-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 80% 25%, rgba(71, 154, 251, 0.2), transparent 27%),
+    linear-gradient(110deg, #f9fcff, #e8f2ff);
+}
+.article-hero-art::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.18;
+  background-image:
+    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: linear-gradient(90deg, transparent 18%, #000);
+}
+.article-hero-inner {
+  padding: 48px 0 60px;
+}
+.breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+  color: #8a9bb0;
+  font-size: 10px;
+}
+.breadcrumbs a {
+  color: #6c86a4;
+  text-decoration: none;
+}
+.breadcrumbs b {
+  color: #2a7ee6;
+  font-weight: 600;
+}
+.article-heading {
+  max-width: 980px;
+  margin-top: 64px;
+}
+.article-heading > p {
+  margin: 0;
+  color: #247ce9;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.article-heading h1 {
+  margin: 18px 0 0;
+  color: #34465b;
+  font-size: clamp(42px, 4.4vw, 68px);
+  letter-spacing: -0.055em;
+  line-height: 1.18;
+  text-wrap: balance;
+}
+.article-heading > span {
+  max-width: 770px;
+  display: block;
+  margin-top: 23px;
+  color: #6f8095;
+  font-size: 15px;
+  line-height: 1.8;
+}
+.article-byline {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-top: 30px;
+  color: #8595a8;
+  font-size: 10px;
+}
+.article-byline > div {
+  display: grid;
+  padding-right: 24px;
+  border-right: 1px solid #cbdbea;
+}
+.article-byline strong {
+  color: #526b87;
+  font-size: 11px;
+}
+.article-byline small {
+  margin-top: 3px;
+  font-size: 8px;
+  letter-spacing: 0.08em;
+}
+.article-layout {
+  display: grid;
+  grid-template-columns: 210px minmax(0, 800px);
+  justify-content: center;
+  gap: 70px;
+  padding-top: 90px;
+  padding-bottom: 120px;
+}
+.article-aside {
+  position: sticky;
+  top: 95px;
+  align-self: start;
+  display: grid;
+  gap: 28px;
+  padding-top: 8px;
+}
+.article-aside > a {
+  color: #607a98;
+  font-size: 11px;
+  text-decoration: none;
+}
+.article-aside > div {
+  display: grid;
+  gap: 7px;
+  padding-top: 22px;
+  border-top: 1px solid #dce6f0;
+}
+.article-aside span {
+  color: #93a2b3;
+  font-size: 9px;
+}
+.article-aside strong {
+  color: #3b5877;
+  font-size: 12px;
+}
+.article-aside button {
+  padding: 18px;
+  border-radius: 5px 14px 5px 14px;
+  color: #fff;
+  background: #277fec;
+  font-size: 11px;
+  text-align: left;
+  transition: 0.2s;
+}
+.article-aside button:hover {
+  box-shadow: 0 12px 25px rgba(39, 127, 236, 0.22);
+  transform: translateY(-2px);
+}
+.article-content {
+  min-width: 0;
+}
+.article-cover {
+  width: calc(100% + 120px);
+  height: 420px;
+  margin: 0 0 55px -60px;
+  overflow: hidden;
+  border-radius: 5px 22px 5px 22px;
+  background: #edf5fd;
+}
+.article-cover img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.article-lead {
+  margin: 0 0 62px;
+  padding: 30px 35px;
+  border-left: 3px solid #2b82ee;
+  color: #49637f;
+  background: #f1f7fd;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.85;
+}
+.article-content section {
+  position: relative;
+  margin-top: 66px;
+}
+.article-content section:first-of-type {
+  margin-top: 0;
+}
+.section-number {
+  position: absolute;
+  top: 4px;
+  left: -54px;
+  color: #8fb2d8;
+  font-size: 10px;
+  font-weight: 700;
+}
+.article-content h2 {
+  margin: 0 0 25px;
+  color: #34485f;
+  font-size: 30px;
+  letter-spacing: -0.025em;
+  line-height: 1.4;
+}
+.article-content section > p {
+  margin: 0 0 18px;
+  color: #64778e;
+  font-size: 15px;
+  line-height: 2;
+}
+.article-content blockquote {
+  margin: 68px 0 0;
+  padding: 36px 42px;
+  border-radius: 5px 18px 5px 18px;
+  color: #fff;
+  background: linear-gradient(135deg, #2778dc, #42aee2);
+  box-shadow: 0 22px 45px rgba(38, 113, 205, 0.18);
+  font-size: 21px;
+  font-weight: 600;
+  line-height: 1.75;
+}
+.comparison-table {
+  margin-top: 32px;
+  overflow: hidden;
+  border: 1px solid #dce7f2;
+  border-radius: 5px 14px 5px 14px;
+}
+.comparison-head,
+.comparison-row {
+  display: grid;
+  grid-template-columns: 0.65fr 1fr 1fr;
+}
+.comparison-head {
+  color: #fff;
+  background: #317fdb;
+  font-size: 11px;
+  font-weight: 600;
+}
+.comparison-head span,
+.comparison-row > * {
+  padding: 15px 18px;
+}
+.comparison-row {
+  border-top: 1px solid #e0e9f2;
+  color: #667a91;
+  background: #f8fbfe;
+  font-size: 11px;
+  line-height: 1.6;
+}
+.comparison-row strong {
+  color: #3c5877;
+  background: #edf5fc;
+  font-weight: 600;
+}
+.draft-note {
+  margin-top: 34px;
+  padding: 28px 30px;
+  border-radius: 5px 15px 5px 15px;
+  background: #f0f6fc;
+}
+.draft-note strong {
+  color: #3c5875;
+  font-size: 14px;
+}
+.draft-note p {
+  margin: 8px 0 0;
+  color: #78899c;
+  font-size: 12px;
+  line-height: 1.75;
+}
+.inline-cta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 35px;
+  margin-top: 72px;
+  padding: 34px 38px;
+  border-radius: 5px 17px 5px 17px;
+  background: #eaf4ff;
+}
+.inline-cta span {
+  color: #2b7fe8;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+.inline-cta h3 {
+  margin: 9px 0 0;
+  color: #3b536d;
+  font-size: 20px;
+}
+.inline-cta button {
+  flex: 0 0 auto;
+  height: 42px;
+  padding: 0 18px;
+  border-radius: 5px;
+  color: #fff;
+  background: #287fec;
+  font-size: 11px;
+}
+.article-pagination {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  padding-top: 42px;
+  padding-bottom: 42px;
+  border-top: 1px solid #dfe8f1;
+}
+.article-pagination a {
+  display: grid;
+  gap: 8px;
+  text-decoration: none;
+}
+.article-pagination a:last-child {
+  text-align: right;
+}
+.article-pagination span {
+  color: #8c9bab;
+  font-size: 9px;
+}
+.article-pagination strong {
+  color: #506983;
+  font-size: 13px;
+  line-height: 1.55;
+  transition: color 0.2s;
+}
+.article-pagination a:hover strong {
+  color: #237df0;
+}
+.related-section {
+  padding: 96px 0 118px;
+  background: #eef6fd;
+}
+.related-section header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 30px;
+}
+.related-section header p {
+  margin: 0;
+  color: #247ce9;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.related-section header h2 {
+  margin: 12px 0 0;
+  color: #354a62;
+  font-size: 35px;
+}
+.related-section header button {
+  padding: 0 0 5px;
+  border-bottom: 1px solid #94bae3;
+  color: #287bdc;
+  background: transparent;
+  font-size: 11px;
+}
+.related-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 0.9fr 0.9fr;
+  gap: 22px;
+  margin-top: 38px;
+}
+.related-grid article > a {
+  height: 190px;
+  display: block;
+  overflow: hidden;
+  border-radius: 4px 14px 4px 14px;
+}
+.related-grid article:first-child > a {
+  height: 250px;
+}
+.related-grid img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.related-grid article:hover img {
+  transform: scale(1.04);
+}
+.related-grid article > span {
+  display: block;
+  margin-top: 18px;
+  color: #7890aa;
+  font-size: 9px;
+}
+.related-grid h3 {
+  margin: 10px 0 0;
+  font-size: 18px;
+  line-height: 1.5;
+}
+.related-grid h3 a {
+  color: #3c526a;
+  text-decoration: none;
+}
+@media (max-width: 900px) {
+  .article-layout {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+  .article-aside {
+    position: static;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+  .article-aside > div {
+    display: none;
+  }
+  .article-cover {
+    width: 100%;
+    margin-left: 0;
+  }
+  .section-number {
+    position: static;
+    display: block;
+    margin-bottom: 10px;
+  }
+  .related-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .related-grid article:first-child {
+    grid-column: 1 / -1;
+  }
+}
+@media (max-width: 600px) {
+  .article-hero {
+    min-height: auto;
+  }
+  .article-hero-inner {
+    padding-top: 35px;
+    padding-bottom: 52px;
+  }
+  .article-heading {
+    margin-top: 42px;
+  }
+  .article-heading h1 {
+    font-size: clamp(35px, 10vw, 47px);
+  }
+  .article-byline {
+    flex-wrap: wrap;
+    gap: 12px 18px;
+  }
+  .article-byline > div {
+    width: 100%;
+    padding: 0 0 12px;
+    border-right: 0;
+    border-bottom: 1px solid #d1dfed;
+  }
+  .article-layout {
+    padding-top: 58px;
+    padding-bottom: 80px;
+  }
+  .article-aside {
+    grid-template-columns: 1fr;
+  }
+  .article-aside button {
+    display: none;
+  }
+  .article-cover {
+    height: 235px;
+    margin-bottom: 38px;
+  }
+  .article-lead {
+    padding: 24px 21px;
+    font-size: 16px;
+  }
+  .article-content section {
+    margin-top: 52px;
+  }
+  .article-content h2 {
+    font-size: 25px;
+  }
+  .comparison-table {
+    overflow-x: auto;
+  }
+  .comparison-head,
+  .comparison-row {
+    min-width: 600px;
+  }
+  .article-content blockquote {
+    padding: 29px 23px;
+    font-size: 18px;
+  }
+  .inline-cta {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 28px 23px;
+  }
+  .article-pagination {
+    grid-template-columns: 1fr;
+  }
+  .article-pagination a:last-child {
+    text-align: left;
+  }
+  .related-section {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .related-section header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .related-grid {
+    grid-template-columns: 1fr;
+  }
+  .related-grid article:first-child {
+    grid-column: auto;
+  }
+  .related-grid article:first-child > a {
+    height: 210px;
+  }
+}
+</style>
diff --git a/pages/insights/index.vue b/pages/insights/index.vue
new file mode 100644
index 0000000..d989e6d
--- /dev/null
+++ b/pages/insights/index.vue
@@ -0,0 +1,889 @@
+<script setup>
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+import { featuredInsight, insightCategories, insights } from '~/data/insights'
+
+const activeCategory = ref('全部')
+const visibleCount = ref(4)
+const { openConsultation } = useConsultation()
+
+useHead({
+  title: '增长洞察｜大马棒·云途全域 GEO',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '阅读 AI 搜索、GEO 行业知识、增长实战复盘与行业白皮书，了解品牌在生成式搜索中的增长方法。'
+    }
+  ]
+})
+
+const filteredInsights = computed(() => {
+  const list = insights.filter((item) => !item.featured)
+  if (activeCategory.value === '全部') return list
+  if (activeCategory.value === '最新文章') return list.slice(0, 3)
+  return list.filter((item) => item.category === activeCategory.value)
+})
+const visibleInsights = computed(() => filteredInsights.value.slice(0, visibleCount.value))
+const canLoadMore = computed(() => visibleCount.value < filteredInsights.value.length)
+
+watch(activeCategory, () => {
+  visibleCount.value = 4
+})
+
+function requestDiagnosis(source) {
+  openConsultation({ title: '预约免费 GEO 增长诊断', source })
+}
+
+function requestWhitepaper(source) {
+  openConsultation({
+    title: '获取 2026 AI 搜索与品牌增长观察',
+    need: '行业白皮书',
+    source
+  })
+}
+</script>
+
+<template>
+  <div class="insights-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="insights-hero">
+        <div class="insights-hero-art" aria-hidden="true"></div>
+        <div class="page-width insights-hero-grid">
+          <div class="insights-hero-copy">
+            <p class="page-eyebrow">全域营销增长洞察</p>
+            <h1>行业人在看的东西，<br /><span>全都在这里</span></h1>
+            <p>持续记录 AI 搜索的变化、可执行的 GEO 方法，以及我们从真实项目里得到的判断。</p>
+            <div class="hero-actions">
+              <a href="#insight-library" class="primary-button"
+                >开始阅读 <AppIcon name="bottom"
+              /></a>
+              <button type="button" @click="requestDiagnosis('增长洞察页 Hero')">
+                免费诊断品牌可见性
+              </button>
+            </div>
+          </div>
+          <div class="editorial-index" aria-label="增长洞察内容索引">
+            <div class="index-header"><span>YUNTU / INSIGHTS</span><small>2026.07</small></div>
+            <strong>06</strong>
+            <p>围绕 AI 搜索、品牌认知与业务转化，建立一套可持续更新的知识索引。</p>
+            <div class="index-lines"><i></i><i></i><i></i><i></i></div>
+            <div class="index-footer">
+              <span>KNOWLEDGE</span><span>PRACTICE</span><span>REPORT</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="insight-library" class="insight-library">
+        <div class="page-width">
+          <header class="library-heading">
+            <div>
+              <p class="section-kicker">本期推荐</p>
+              <h2>先从一个关键变化开始</h2>
+            </div>
+            <p>AI 不只是新的流量入口，它正在改变用户理解品牌、比较方案和做出选择的方式。</p>
+          </header>
+
+          <article class="featured-insight">
+            <NuxtLink :to="`/insights/${featuredInsight.slug}`" class="featured-image">
+              <img :src="featuredInsight.cover" :alt="featuredInsight.title" />
+              <span>EDITOR'S PICK</span>
+            </NuxtLink>
+            <div class="featured-copy">
+              <div class="article-meta">
+                <span>{{ featuredInsight.category }}</span
+                ><time>{{ featuredInsight.date }}</time>
+              </div>
+              <h2>
+                <NuxtLink :to="`/insights/${featuredInsight.slug}`">{{
+                  featuredInsight.title
+                }}</NuxtLink>
+              </h2>
+              <p>{{ featuredInsight.excerpt }}</p>
+              <div class="featured-footer">
+                <NuxtLink :to="`/insights/${featuredInsight.slug}`"
+                  >阅读全文 <AppIcon name="arrow-right"
+                /></NuxtLink>
+                <span>{{ featuredInsight.readingTime }} · {{ featuredInsight.views }} 阅读</span>
+              </div>
+            </div>
+          </article>
+
+          <nav class="insight-filters" aria-label="洞察文章分类">
+            <button
+              v-for="category in insightCategories"
+              :key="category"
+              type="button"
+              :class="{ active: activeCategory === category }"
+              @click="activeCategory = category"
+            >
+              {{ category }}
+            </button>
+          </nav>
+
+          <Transition name="insight-change" mode="out-in">
+            <div :key="activeCategory" class="article-results">
+              <div v-if="visibleInsights.length" class="article-grid">
+                <article
+                  v-for="(article, index) in visibleInsights"
+                  :key="article.slug"
+                  :class="{ lead: index === 0 }"
+                >
+                  <NuxtLink :to="`/insights/${article.slug}`" class="article-cover">
+                    <img :src="article.cover" :alt="article.title" />
+                    <span>{{ article.category }}</span>
+                  </NuxtLink>
+                  <div class="article-copy">
+                    <div class="article-meta">
+                      <time>{{ article.date }}</time
+                      ><span>{{ article.views }} 阅读</span>
+                    </div>
+                    <h3>
+                      <NuxtLink :to="`/insights/${article.slug}`">{{ article.title }}</NuxtLink>
+                    </h3>
+                    <p>{{ article.excerpt }}</p>
+                    <NuxtLink :to="`/insights/${article.slug}`" class="read-link"
+                      >查看详情 <AppIcon name="arrow-right"
+                    /></NuxtLink>
+                  </div>
+                </article>
+              </div>
+              <div v-else class="insight-empty">
+                <span>CONTENT IN PROGRESS</span>
+                <h3>该分类内容正在整理</h3>
+                <p>可以先预约诊断，我们会结合你的行业分享对应的 GEO 判断与资料。</p>
+                <button
+                  class="primary-button small"
+                  type="button"
+                  @click="requestDiagnosis('洞察分类空状态')"
+                >
+                  预约免费诊断 <AppIcon name="arrow-right" />
+                </button>
+              </div>
+              <button v-if="canLoadMore" class="load-more" type="button" @click="visibleCount += 4">
+                加载更多 <AppIcon name="plus" />
+              </button>
+            </div>
+          </Transition>
+        </div>
+      </section>
+
+      <section class="whitepaper-section">
+        <div class="whitepaper-art" aria-hidden="true"></div>
+        <div class="page-width whitepaper-grid">
+          <div class="whitepaper-number"><span>REPORT</span><strong>2026</strong></div>
+          <div class="whitepaper-copy">
+            <p>行业白皮书</p>
+            <h2>AI 搜索与品牌增长观察</h2>
+            <span>用户行为 · 内容信源 · 衡量框架 · 行业实践</span>
+          </div>
+          <button type="button" @click="requestWhitepaper('增长洞察页白皮书')">
+            获取白皮书 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+
+      <section class="insights-cta">
+        <div class="page-width insights-cta-content">
+          <p>阅读方法，也要回到自己的业务</p>
+          <h2>看看你的品牌，正在被 AI 如何理解</h2>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestDiagnosis('增长洞察页底部 CTA')"
+          >
+            预约免费 GEO 诊断 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.insights-page {
+  --insight-blue: #237df0;
+  overflow: hidden;
+  color: #344359;
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.page-eyebrow,
+.section-kicker {
+  margin: 0;
+  color: var(--insight-blue);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.insights-hero {
+  position: relative;
+  min-height: 620px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f2f7fd;
+}
+.insights-hero-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 78% 28%, rgba(66, 151, 251, 0.23), transparent 27%),
+    linear-gradient(110deg, #f9fcff, #e8f2ff);
+}
+.insights-hero-art::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.2;
+  background-image:
+    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: linear-gradient(90deg, transparent 18%, #000);
+}
+.insights-hero-grid {
+  min-height: 620px;
+  display: grid;
+  grid-template-columns: 0.9fr 1.1fr;
+  align-items: center;
+  gap: 90px;
+  padding: 58px 0 66px;
+}
+.insights-hero-copy h1 {
+  margin: 16px 0 0;
+  color: #35465c;
+  font-size: clamp(48px, 4.5vw, 72px);
+  letter-spacing: -0.055em;
+  line-height: 1.16;
+}
+.insights-hero-copy h1 span {
+  color: #1978ef;
+}
+.insights-hero-copy > p:nth-of-type(2) {
+  max-width: 590px;
+  margin: 24px 0 0;
+  color: #6d7d91;
+  font-size: 15px;
+  line-height: 1.85;
+}
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-top: 31px;
+}
+.hero-actions a {
+  text-decoration: none;
+}
+.hero-actions > button {
+  color: #546b86;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+}
+.editorial-index {
+  position: relative;
+  width: min(570px, 100%);
+  min-height: 390px;
+  justify-self: end;
+  padding: 38px 42px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 4px 24px 4px 24px;
+  background: rgba(255, 255, 255, 0.6);
+  box-shadow:
+    0 30px 65px rgba(56, 117, 193, 0.14),
+    inset 0 1px 0 #fff;
+  backdrop-filter: blur(14px);
+}
+.index-header,
+.index-footer {
+  display: flex;
+  justify-content: space-between;
+  color: #6e8daf;
+  font-size: 9px;
+  letter-spacing: 0.12em;
+}
+.editorial-index > strong {
+  display: block;
+  margin-top: 37px;
+  color: #267fec;
+  font-size: 104px;
+  font-weight: 600;
+  letter-spacing: -0.07em;
+  line-height: 0.9;
+  font-variant-numeric: tabular-nums;
+}
+.editorial-index > p {
+  max-width: 360px;
+  margin: 23px 0 0;
+  color: #5f748d;
+  font-size: 14px;
+  line-height: 1.75;
+}
+.index-lines {
+  position: absolute;
+  top: 75px;
+  right: 42px;
+  width: 118px;
+  display: grid;
+  gap: 14px;
+}
+.index-lines i {
+  height: 1px;
+  background: #b9d2ec;
+  transform-origin: right;
+}
+.index-lines i:nth-child(2) {
+  transform: scaleX(0.7);
+}
+.index-lines i:nth-child(3) {
+  transform: scaleX(0.45);
+}
+.index-lines i:nth-child(4) {
+  transform: scaleX(0.82);
+}
+.index-footer {
+  position: absolute;
+  right: 42px;
+  bottom: 35px;
+  left: 42px;
+  padding-top: 17px;
+  border-top: 1px solid #d3e1ef;
+}
+.insight-library {
+  padding: 112px 0 132px;
+}
+.library-heading {
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  align-items: end;
+  gap: 80px;
+}
+.library-heading h2 {
+  margin: 15px 0 0;
+  color: #344359;
+  font-size: clamp(32px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.28;
+}
+.library-heading > p {
+  max-width: 540px;
+  margin: 0 0 5px;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.featured-insight {
+  min-height: 450px;
+  display: grid;
+  grid-template-columns: 1.08fr 0.92fr;
+  margin-top: 48px;
+  overflow: hidden;
+  border-radius: 5px 22px 5px 22px;
+  background: #edf6ff;
+}
+.featured-image {
+  position: relative;
+  min-height: 450px;
+  overflow: hidden;
+}
+.featured-image::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  background: linear-gradient(90deg, transparent 65%, rgba(237, 246, 255, 0.85));
+}
+.featured-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.45s;
+}
+.featured-insight:hover img {
+  transform: scale(1.035);
+}
+.featured-image > span {
+  position: absolute;
+  z-index: 2;
+  top: 28px;
+  left: 28px;
+  padding: 8px 11px;
+  border-radius: 3px;
+  color: #fff;
+  background: rgba(34, 112, 209, 0.82);
+  font-size: 9px;
+  letter-spacing: 0.1em;
+}
+.featured-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 54px 48px 36px;
+}
+.article-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  color: #8798ab;
+  font-size: 10px;
+}
+.article-meta span:first-child {
+  color: #2b7ee5;
+  font-weight: 700;
+}
+.featured-copy h2 {
+  margin: 20px 0 0;
+  font-size: clamp(30px, 2.6vw, 42px);
+  line-height: 1.35;
+}
+.featured-copy h2 a,
+.article-copy h3 a {
+  color: #34485f;
+  text-decoration: none;
+}
+.featured-copy > p {
+  margin: 18px 0 0;
+  color: #718197;
+  font-size: 13px;
+  line-height: 1.85;
+}
+.featured-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #cfdeed;
+}
+.featured-footer a,
+.read-link {
+  color: #247be8;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.featured-footer > span {
+  color: #8997a7;
+  font-size: 9px;
+}
+.insight-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 75px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid #e0e9f3;
+}
+.insight-filters button {
+  height: 38px;
+  padding: 0 17px;
+  border-radius: 4px;
+  color: #61758c;
+  background: #f1f6fc;
+  font-size: 12px;
+  transition: 0.2s;
+}
+.insight-filters button:hover,
+.insight-filters button.active {
+  color: #fff;
+  background: #287ff0;
+  box-shadow: 0 8px 18px rgba(39, 126, 238, 0.2);
+  transform: translateY(-1px);
+}
+.article-results {
+  margin-top: 40px;
+}
+.article-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 28px;
+}
+.article-grid article {
+  display: grid;
+  grid-template-columns: 0.85fr 1.15fr;
+  min-height: 285px;
+  overflow: hidden;
+  border-radius: 14px 4px 14px 4px;
+  background: #f3f7fc;
+  transition:
+    transform 0.25s,
+    box-shadow 0.25s,
+    background 0.25s;
+}
+.article-grid article:hover {
+  background: #fff;
+  box-shadow: 0 20px 42px rgba(61, 119, 189, 0.13);
+  transform: translateY(-5px);
+}
+.article-grid article.lead {
+  grid-column: 1 / -1;
+  grid-template-columns: 1.05fr 0.95fr;
+  min-height: 350px;
+}
+.article-cover {
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+}
+.article-cover img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.article-grid article:hover img {
+  transform: scale(1.04);
+}
+.article-cover > span {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  padding: 7px 9px;
+  border-radius: 3px;
+  color: #fff;
+  background: rgba(32, 105, 200, 0.82);
+  font-size: 9px;
+}
+.article-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 28px;
+}
+.article-copy h3 {
+  margin: 15px 0 0;
+  font-size: 20px;
+  line-height: 1.45;
+}
+.article-grid article.lead h3 {
+  font-size: 28px;
+}
+.article-copy > p {
+  margin: 12px 0 0;
+  color: #75859a;
+  font-size: 11px;
+  line-height: 1.75;
+}
+.read-link {
+  align-self: flex-start;
+  margin-top: 22px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #9bc1e9;
+}
+.load-more {
+  min-width: 150px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin: 42px auto 0;
+  border: 1px solid #bad2ea;
+  border-radius: 5px;
+  color: #527497;
+  background: #fff;
+  font-size: 12px;
+  transition: 0.2s;
+}
+.load-more:hover {
+  color: #247be8;
+  border-color: #73aae4;
+  transform: translateY(-2px);
+}
+.insight-empty {
+  min-height: 390px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 45px 20px;
+  border-radius: 16px 5px 16px 5px;
+  background: #f2f7fd;
+  text-align: center;
+}
+.insight-empty > span {
+  color: #2a80ea;
+  font-size: 9px;
+  letter-spacing: 0.14em;
+}
+.insight-empty h3 {
+  margin: 14px 0 0;
+  color: #3b4f66;
+  font-size: 27px;
+}
+.insight-empty p {
+  max-width: 490px;
+  margin: 12px 0 0;
+  color: #7b8b9d;
+  font-size: 13px;
+  line-height: 1.7;
+}
+.insight-empty button {
+  margin-top: 24px;
+}
+.insight-change-enter-active,
+.insight-change-leave-active {
+  transition:
+    opacity 0.18s,
+    transform 0.22s;
+}
+.insight-change-enter-from {
+  opacity: 0;
+  transform: translateY(9px);
+}
+.insight-change-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+.whitepaper-section {
+  position: relative;
+  overflow: hidden;
+  background: #eaf4ff;
+}
+.whitepaper-art {
+  position: absolute;
+  inset: 0;
+  background: url('/images/lanhu/slices/home-group98-image24@2x.png') center / cover no-repeat;
+  opacity: 0.7;
+}
+.whitepaper-grid {
+  position: relative;
+  min-height: 310px;
+  display: grid;
+  grid-template-columns: 0.65fr 1.35fr auto;
+  align-items: center;
+  gap: 65px;
+}
+.whitepaper-number {
+  display: grid;
+}
+.whitepaper-number span {
+  color: #6e92b9;
+  font-size: 9px;
+  letter-spacing: 0.14em;
+}
+.whitepaper-number strong {
+  color: #277fec;
+  font-size: 64px;
+  letter-spacing: -0.05em;
+  font-variant-numeric: tabular-nums;
+}
+.whitepaper-copy p {
+  margin: 0;
+  color: #277fec;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.whitepaper-copy h2 {
+  margin: 13px 0 0;
+  color: #395069;
+  font-size: 35px;
+}
+.whitepaper-copy span {
+  display: block;
+  margin-top: 12px;
+  color: #72869c;
+  font-size: 12px;
+}
+.whitepaper-grid > button {
+  height: 48px;
+  padding: 0 24px;
+  border-radius: 5px;
+  color: #fff;
+  background: #277fec;
+  box-shadow: 0 12px 25px rgba(39, 127, 236, 0.2);
+  font-size: 12px;
+  font-weight: 600;
+  transition: 0.2s;
+}
+.whitepaper-grid > button:hover {
+  background: #176ed8;
+  transform: translateY(-2px);
+}
+.insights-cta {
+  min-height: 410px;
+  display: grid;
+  place-items: center;
+  background:
+    linear-gradient(rgba(248, 252, 255, 0.45), rgba(235, 246, 255, 0.7)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.insights-cta-content {
+  padding: 74px 0;
+  text-align: center;
+}
+.insights-cta-content p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.insights-cta-content h2 {
+  margin: 17px 0 0;
+  color: #3375c5;
+  font-size: clamp(32px, 3.2vw, 50px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.insights-cta-content button {
+  margin-top: 29px;
+}
+@media (max-width: 980px) {
+  .insights-hero,
+  .insights-hero-grid {
+    min-height: auto;
+  }
+  .insights-hero-grid,
+  .library-heading {
+    grid-template-columns: 1fr;
+  }
+  .insights-hero-grid {
+    padding-top: 74px;
+    padding-bottom: 66px;
+  }
+  .editorial-index {
+    justify-self: center;
+  }
+  .library-heading {
+    gap: 22px;
+  }
+  .library-heading > p {
+    margin: 0;
+  }
+  .featured-insight {
+    grid-template-columns: 1fr;
+  }
+  .featured-image {
+    min-height: 360px;
+  }
+  .featured-image::after {
+    background: linear-gradient(transparent 65%, #edf6ff);
+  }
+  .featured-copy {
+    padding: 42px;
+  }
+  .article-grid {
+    grid-template-columns: 1fr;
+  }
+  .article-grid article.lead {
+    grid-column: auto;
+  }
+  .whitepaper-grid {
+    grid-template-columns: 0.7fr 1.3fr;
+    gap: 35px;
+    padding-top: 54px;
+    padding-bottom: 54px;
+  }
+  .whitepaper-grid > button {
+    grid-column: 2;
+    justify-self: start;
+  }
+}
+@media (max-width: 600px) {
+  .insights-hero-grid {
+    padding-top: 54px;
+  }
+  .insights-hero-copy h1 {
+    font-size: clamp(39px, 11vw, 52px);
+  }
+  .hero-actions {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .editorial-index {
+    min-height: 330px;
+    padding: 28px 25px;
+  }
+  .editorial-index > strong {
+    font-size: 82px;
+  }
+  .index-lines {
+    right: 25px;
+    width: 85px;
+  }
+  .index-footer {
+    right: 25px;
+    bottom: 25px;
+    left: 25px;
+  }
+  .insight-library {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .featured-image {
+    min-height: 245px;
+  }
+  .featured-copy {
+    padding: 30px 22px 34px;
+  }
+  .featured-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .insight-filters {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+  .insight-filters button {
+    flex: 0 0 auto;
+  }
+  .article-grid article,
+  .article-grid article.lead {
+    grid-template-columns: 1fr;
+  }
+  .article-cover {
+    min-height: 210px;
+  }
+  .article-copy {
+    padding: 25px 22px;
+  }
+  .article-grid article.lead h3 {
+    font-size: 22px;
+  }
+  .whitepaper-grid {
+    grid-template-columns: 1fr;
+    gap: 22px;
+  }
+  .whitepaper-number strong {
+    font-size: 52px;
+  }
+  .whitepaper-copy h2 {
+    font-size: 29px;
+  }
+  .whitepaper-grid > button {
+    grid-column: auto;
+  }
+  .insights-cta {
+    min-height: 380px;
+  }
+}
+</style>
diff --git a/pages/services.vue b/pages/services.vue
new file mode 100644
index 0000000..1fa85c6
--- /dev/null
+++ b/pages/services.vue
@@ -0,0 +1,1878 @@
+<script setup>
+import { gsap } from 'gsap'
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+
+const pageRoot = ref(null)
+const { openConsultation } = useConsultation()
+let animationContext
+
+useHead({
+  title: '营销增长服务｜大马棒·云途全域 GEO',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '从品牌曝光、可信内容建设到精准线索承接，大马棒·云途全域 GEO 帮助企业建立可持续的 AI 搜索增长链路。'
+    }
+  ]
+})
+
+const journey = [
+  { number: '01', title: '被看见', text: '用户向 AI 提问时，品牌能够进入相关回答与推荐范围。' },
+  { number: '02', title: '被信任', text: '权威媒体、真人内容与真实业务信息共同形成可信证据。' },
+  { number: '03', title: '被选择', text: '高意向问题被内容承接，并顺畅进入咨询与成交链路。' }
+]
+
+const ringModels = [
+  {
+    title: '声量资产环',
+    image: '/images/lanhu/slices/home-group80-group83-image11@2x.png',
+    items: ['真人内容生产', '全域媒体分发', 'AI 信任构建', '品牌资产沉淀']
+  },
+  {
+    title: '获客转化环',
+    image: '/images/lanhu/slices/home-group86-group87-image12@2x.png',
+    items: ['精准意图触达', '内容种草引导', '线索留资转化', '数据优化迭代']
+  }
+]
+
+const services = [
+  {
+    id: 'brand-exposure',
+    index: '01',
+    eyebrow: 'Brand visibility',
+    title: '品牌曝光，不是多发几篇内容',
+    lead: '真正有效的曝光，是让用户在提问、比较和验证的每一个环节，都能看到一致、可信的品牌信息。',
+    pain: '品牌公开信息分散、AI 认知不完整，用户搜索时只看到竞品或过时内容。',
+    actions: [
+      '梳理品牌核心事实与高频用户问题',
+      '搭建真人内容与权威信源矩阵',
+      '围绕主流 AI 平台持续优化可见性'
+    ],
+    outputs: ['品牌 AI 认知基线报告', '内容主题与信源分发清单', '品牌提及与引用监测报告'],
+    metric: '5 万',
+    metricLabel: '真人内容生产网络',
+    visualTitle: '可信声量生成器',
+    visualItems: ['真实业务信息', '真人体验内容', '权威媒体信源', 'AI 搜索引用']
+  },
+  {
+    id: 'lead-conversion',
+    index: '02',
+    eyebrow: 'Lead conversion',
+    title: '精准获客，把高意向问题接住',
+    lead: '我们不只看曝光量，更关心哪些问题带来访问、咨询和有效线索，让内容真正进入业务链路。',
+    pain: '内容有阅读却没有后续承接，用户看完之后找不到合适的咨询入口。',
+    actions: [
+      '按决策阶段搭建高意向问题库',
+      '设计从内容到官网与私域的承接路径',
+      '持续复盘线索质量并调整内容重点'
+    ],
+    outputs: ['全旅程用户问题库', '转化内容与落地页建议', '线索来源及质量复盘'],
+    metric: '65%',
+    metricLabel: '客户转化链路效率平均提升',
+    visualTitle: '意图转化路径',
+    visualItems: ['用户提问', '可信回答', '品牌比较', '咨询留资']
+  },
+  {
+    id: 'omnichannel',
+    index: '03',
+    eyebrow: 'Omnichannel growth',
+    title: '全域营销，让曝光和获客不再断层',
+    lead: '从纯曝光、内容资产沉淀到精准获客转化，我们用同一套数据目标串起媒体、内容、官网和咨询入口。',
+    pain: '不同供应商各做一段，内容、投放和销售数据无法对齐，预算去向与增长结果说不清。',
+    actions: [
+      '统一品牌声量与获客目标',
+      '打通内容生产、媒体发布和线索承接',
+      '按月复盘并动态调整资源配比'
+    ],
+    outputs: ['全域增长策略地图', '跨平台内容资产库', '曝光到咨询全链路报告'],
+    metric: '5000+',
+    metricLabel: '权威媒体资源矩阵',
+    visualTitle: '全域协同网络',
+    visualItems: ['媒体曝光', '内容资产', '搜索信任', '业务转化']
+  }
+]
+
+const processSteps = [
+  ['需求诊断', '一对一沟通，分析品牌现状、AI 可见性与增长痛点。'],
+  ['方案定制', '明确 GEO 策略、交付节点、内容重点与预期指标。'],
+  ['内容落地', '真人内容生产与媒体矩阵分发，全流程同步进度。'],
+  ['数据优化', '定期监测品牌提及、引用来源、流量与线索质量。'],
+  ['资产沉淀', '交付可复用内容资产与增长报告，形成长期积累。']
+]
+
+const industries = [
+  {
+    name: '企业服务',
+    text: '在长决策链中提前建立专业信任，进入客户比选名单。',
+    stat: 'AI 曝光 +320%'
+  },
+  {
+    name: '教育培训',
+    text: '覆盖择校、课程比较与口碑验证，降低家长决策顾虑。',
+    stat: '线索成本 -45%'
+  },
+  {
+    name: '本地生活',
+    text: '占住同城搜索与到店决策入口，缩短从看到到进店。',
+    stat: '到店咨询 +170%'
+  },
+  {
+    name: '医疗健康',
+    text: '通过合规科普与权威形象建设，沉淀长期专业信任。',
+    stat: '合规策略定制'
+  },
+  { name: '电商零售', text: '串起种草、主动搜索、店铺承接和直播转化。', stat: '自然流量占比 60%' }
+]
+
+function requestDiagnosis(source, extra = {}) {
+  openConsultation({
+    title: extra.title || '预约免费 GEO 诊断',
+    source,
+    industry: extra.industry || ''
+  })
+}
+
+function scrollToServices() {
+  document.getElementById('service-system')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+onMounted(async () => {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !pageRoot.value) return
+  await nextTick()
+
+  animationContext = gsap.context(() => {
+    gsap.to('.hero-orbit-one', { rotation: 360, duration: 28, repeat: -1, ease: 'none' })
+    gsap.to('.hero-orbit-two', { rotation: -360, duration: 36, repeat: -1, ease: 'none' })
+  }, pageRoot.value)
+})
+
+onBeforeUnmount(() => animationContext?.revert())
+</script>
+
+<template>
+  <div ref="pageRoot" class="services-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="services-hero">
+        <div class="hero-mesh" aria-hidden="true"></div>
+        <div class="page-width services-hero-grid">
+          <div class="services-hero-copy">
+            <p class="page-eyebrow">大马棒 · 云途全域 GEO</p>
+            <h1>从被看见、被信任<br />到最终<span>被选择</span></h1>
+            <p class="hero-description">
+              围绕真实用户提问，系统建设品牌内容、可信信源与转化承接，让每一次 AI
+              搜索曝光都能沉淀为长期增长资产。
+            </p>
+            <div class="hero-badges" aria-label="服务核心能力">
+              <span>5 万真人内容网络</span><span>5000+ 权威媒体</span><span>全链路效果复盘</span>
+            </div>
+            <div class="hero-actions">
+              <button
+                class="primary-button"
+                type="button"
+                @click="requestDiagnosis('营销增长服务页 Hero')"
+              >
+                免费获取诊断 <AppIcon name="arrow-right" />
+              </button>
+              <button class="hero-text-link" type="button" @click="scrollToServices">
+                了解服务体系 <AppIcon name="bottom" />
+              </button>
+            </div>
+          </div>
+
+          <div class="services-hero-visual" aria-label="GEO 品牌声量与获客转化协同示意图">
+            <div class="hero-orbit hero-orbit-one"><i></i><i></i><i></i></div>
+            <div class="hero-orbit hero-orbit-two"><i></i><i></i><i></i><i></i></div>
+            <div class="hero-core">
+              <small>GEO</small><strong>品效双环</strong><span>持续增长</span>
+            </div>
+            <div class="hero-data hero-data-top"><small>品牌提及</small><strong>+217%</strong></div>
+            <div class="hero-data hero-data-bottom">
+              <small>转化效率</small><strong>+64%</strong>
+            </div>
+            <div class="hero-visual-caption"><span></span> AI 搜索增长系统正在运行</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="decision-section">
+        <div class="page-width decision-grid">
+          <header class="section-intro services-reveal">
+            <p class="section-kicker">决策路径正在改变</p>
+            <h2>用户先向 AI 提问，<br />再决定相信谁</h2>
+            <p>
+              企业要解决的不再只是“有没有排名”，而是品牌能否进入回答、形成可信证据，并承接下一步行动。
+            </p>
+          </header>
+          <div class="decision-journey services-reveal">
+            <article v-for="(item, index) in journey" :key="item.title">
+              <div class="journey-number">{{ item.number }}</div>
+              <div>
+                <h3>{{ item.title }}</h3>
+                <p>{{ item.text }}</p>
+              </div>
+              <span v-if="index < journey.length - 1" aria-hidden="true">→</span>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="model-deep-section">
+        <div class="page-width">
+          <header class="model-heading services-reveal">
+            <p class="section-kicker">双环增长模型</p>
+            <h2>一边沉淀品牌声量，一边推动精准获客</h2>
+            <p>两个环路共享同一套业务事实、内容资产与数据目标，让品牌建设和转化结果互相增强。</p>
+          </header>
+
+          <div class="model-deep-grid services-reveal">
+            <div class="ring-stage">
+              <div
+                v-for="(ring, index) in ringModels"
+                :key="ring.title"
+                class="model-ring"
+                :class="`ring-${index + 1}`"
+              >
+                <img :src="ring.image" :alt="`${ring.title}示意图`" />
+                <div class="ring-copy">
+                  <small>0{{ index + 1 }}</small
+                  ><strong>{{ ring.title }}</strong>
+                </div>
+              </div>
+              <div class="ring-connector"><span>数据</span><span>协同</span></div>
+            </div>
+
+            <div class="model-explanation">
+              <article v-for="(ring, index) in ringModels" :key="`copy-${ring.title}`">
+                <header>
+                  <span>0{{ index + 1 }}</span>
+                  <h3>{{ ring.title }}</h3>
+                </header>
+                <p>
+                  {{
+                    index === 0
+                      ? '把分散的品牌信息沉淀为真实、稳定、可被 AI 引用的数字信任资产。'
+                      : '把高意向搜索场景与官网、私域和销售承接连接起来，持续优化线索质量。'
+                  }}
+                </p>
+                <ul>
+                  <li v-for="item in ring.items" :key="item">{{ item }}</li>
+                </ul>
+              </article>
+              <button
+                class="primary-button small"
+                type="button"
+                @click="requestDiagnosis('双环增长模型板块')"
+              >
+                评估我的增长链路 <AppIcon name="arrow-right" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="service-system" class="service-system-section">
+        <div class="page-width">
+          <header class="service-system-heading services-reveal">
+            <div>
+              <p class="section-kicker">服务体系</p>
+              <h2>三类能力，服务同一个增长目标</h2>
+            </div>
+            <p>
+              不把服务拆成互不相干的资源采购，而是按照企业当前最急需解决的问题，组合成可追踪的增长路径。
+            </p>
+          </header>
+
+          <div class="service-stories">
+            <article
+              v-for="(service, serviceIndex) in services"
+              :id="service.id"
+              :key="service.id"
+              class="service-story services-reveal"
+              :class="{ reverse: serviceIndex % 2 === 1 }"
+            >
+              <div class="service-story-copy">
+                <p class="service-index">
+                  {{ service.index }} <span>{{ service.eyebrow }}</span>
+                </p>
+                <h3>{{ service.title }}</h3>
+                <p class="service-lead">{{ service.lead }}</p>
+                <div class="pain-note">
+                  <strong>常见问题</strong>
+                  <p>{{ service.pain }}</p>
+                </div>
+                <div class="service-details">
+                  <div>
+                    <strong>我们怎么做</strong>
+                    <ul>
+                      <li v-for="item in service.actions" :key="item">{{ item }}</li>
+                    </ul>
+                  </div>
+                  <div>
+                    <strong>您会获得</strong>
+                    <ul>
+                      <li v-for="item in service.outputs" :key="item">{{ item }}</li>
+                    </ul>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  class="service-action"
+                  @click="
+                    requestDiagnosis(`${service.title}板块`, {
+                      title: `咨询${service.title.split('，')[0]}方案`
+                    })
+                  "
+                >
+                  咨询这项服务 <AppIcon name="arrow-right" />
+                </button>
+              </div>
+
+              <div class="service-story-visual" :class="`visual-${serviceIndex + 1}`">
+                <div class="visual-topline">
+                  <span>{{ service.visualTitle }}</span
+                  ><small>YUNTU GEO SYSTEM</small>
+                </div>
+                <div class="visual-network">
+                  <div class="network-core">
+                    <small>{{ service.index }}</small
+                    ><strong>{{ service.title.split('，')[0] }}</strong>
+                  </div>
+                  <span
+                    v-for="(item, itemIndex) in service.visualItems"
+                    :key="item"
+                    :class="`network-item item-${itemIndex + 1}`"
+                    >{{ item }}</span
+                  >
+                  <i v-for="line in 4" :key="line" :class="`network-line line-${line}`"></i>
+                </div>
+                <div class="visual-metric">
+                  <strong>{{ service.metric }}</strong
+                  ><span>{{ service.metricLabel }}</span>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="process-section">
+        <div class="process-background" aria-hidden="true"></div>
+        <div class="page-width">
+          <header class="process-heading services-reveal">
+            <p class="section-kicker">标准化交付</p>
+            <h2>五步推进，每一步都有依据</h2>
+            <p>从第一次沟通到内容资产交付，节点透明、数据可查、方向可调整。</p>
+          </header>
+          <div class="process-timeline services-reveal">
+            <article v-for="(step, index) in processSteps" :key="step[0]">
+              <div class="step-marker">
+                <span>0{{ index + 1 }}</span>
+              </div>
+              <h3>{{ step[0] }}</h3>
+              <p>{{ step[1] }}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="service-industries">
+        <div class="page-width industries-layout">
+          <header class="section-intro services-reveal">
+            <p class="section-kicker">行业适配</p>
+            <h2>行业不同，用户相信你的理由也不同</h2>
+            <p>我们根据行业决策周期、合规要求、用户问题和转化方式重新组合策略，不复制通用模板。</p>
+            <button
+              class="primary-button small"
+              type="button"
+              @click="requestDiagnosis('行业适配板块')"
+            >
+              获取行业建议 <AppIcon name="arrow-right" />
+            </button>
+          </header>
+          <div class="industry-list services-reveal">
+            <article v-for="(industry, index) in industries" :key="industry.name">
+              <span>0{{ index + 1 }}</span>
+              <div>
+                <h3>{{ industry.name }}</h3>
+                <p>{{ industry.text }}</p>
+              </div>
+              <strong>{{ industry.stat }}</strong>
+              <button
+                type="button"
+                :aria-label="`获取${industry.name}行业方案`"
+                @click="
+                  requestDiagnosis(`${industry.name}行业入口`, {
+                    title: `获取${industry.name}行业方案`,
+                    industry: industry.name
+                  })
+                "
+              >
+                →
+              </button>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="proof-section">
+        <div class="page-width proof-grid services-reveal">
+          <article class="featured-proof">
+            <div class="proof-tag">教育培训行业 · GEO 全链路案例</div>
+            <h2>420 个真实问题，5 个月进入 AI 推荐列表</h2>
+            <p>
+              围绕家长“找方法、选机构、比课程、看口碑、做决策”的完整路径，搭建问题库、可信内容与持续监测体系。
+            </p>
+            <div class="proof-data">
+              <div><strong>11% → 88%</strong><span>核心问题覆盖率</span></div>
+              <div><strong>+215%</strong><span>官网 AI 来源流量</span></div>
+              <div><strong>+190%</strong><span>精准学员咨询量</span></div>
+            </div>
+          </article>
+          <aside class="proof-summary">
+            <p class="section-kicker">真实结果</p>
+            <h3>不是一次流量高峰，<br />而是一套持续积累的内容资产</h3>
+            <ul>
+              <li>210+ 篇合规内容</li>
+              <li>覆盖 15 类渠道</li>
+              <li>线索有效率提升至约 65%</li>
+            </ul>
+            <button
+              class="service-action"
+              type="button"
+              @click="
+                requestDiagnosis('代表案例板块', {
+                  title: '获取同类行业增长方案',
+                  industry: '教育培训'
+                })
+              "
+            >
+              获取同类方案 <AppIcon name="arrow-right" />
+            </button>
+          </aside>
+        </div>
+      </section>
+
+      <section class="services-cta">
+        <div class="cta-wave" aria-hidden="true"></div>
+        <div class="page-width services-cta-content services-reveal">
+          <p>从一次真实诊断开始</p>
+          <h2>你的品牌，应该先解决曝光问题，<br />还是转化问题？</h2>
+          <span>聊聊行业、现状和目标，我们会给出第一步建议。</span>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestDiagnosis('营销增长服务页底部 CTA')"
+          >
+            预约免费 GEO 诊断 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.services-page {
+  --service-blue: #207bf2;
+  --service-blue-strong: #176fd8;
+  --service-cyan: #58b9df;
+  --service-ink: #414141;
+  --service-copy: #5d7087;
+  --service-muted: #7f91a6;
+  --service-line: rgba(74, 134, 204, 0.18);
+  --service-surface: #f4f8fc;
+  overflow: hidden;
+  color: var(--service-ink);
+  background: #fff;
+}
+.services-page .primary-button {
+  color: #fff;
+  background: linear-gradient(105deg, var(--service-blue-strong), #2694e9);
+  box-shadow: 0 10px 24px rgba(32, 123, 242, 0.2);
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  color: #fff;
+  border-radius: 6px;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.page-eyebrow,
+.section-kicker {
+  margin: 0;
+  color: var(--service-blue);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.services-hero {
+  position: relative;
+  min-height: 650px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f3f8ff;
+}
+.hero-mesh {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 72% 34%, rgba(78, 158, 255, 0.25), transparent 25%),
+    radial-gradient(circle at 12% 82%, rgba(104, 205, 234, 0.1), transparent 28%),
+    linear-gradient(108deg, #f7faff 0%, #eef5ff 52%, #e7f1ff 100%);
+}
+.hero-mesh::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.2;
+  background-image:
+    linear-gradient(rgba(59, 122, 204, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 122, 204, 0.08) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: linear-gradient(90deg, transparent, #000);
+}
+.services-hero-grid {
+  min-height: 650px;
+  display: grid;
+  grid-template-columns: 0.92fr 1.08fr;
+  align-items: center;
+  gap: 55px;
+  padding-top: 42px;
+  padding-bottom: 52px;
+}
+.services-hero-copy {
+  position: relative;
+  z-index: 2;
+}
+.services-hero-copy h1 {
+  margin: 15px 0 0;
+  color: var(--service-ink);
+  font-size: 62px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+.services-hero-copy h1 span {
+  color: #1878ef;
+}
+.hero-description {
+  max-width: 610px;
+  margin: 24px 0 0;
+  color: var(--service-copy);
+  font-size: 17px;
+  line-height: 1.8;
+  text-wrap: pretty;
+}
+.hero-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 18px;
+  margin-top: 27px;
+  color: var(--service-copy);
+  font-size: 14px;
+  line-height: 1.6;
+}
+.hero-badges span {
+  position: relative;
+  padding-left: 17px;
+}
+.hero-badges span::before {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  width: 7px;
+  height: 7px;
+  content: '';
+  border: 2px solid #2d8bf6;
+  border-radius: 50%;
+}
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  margin-top: 33px;
+}
+.hero-text-link {
+  color: var(--service-copy);
+  background: transparent;
+  font-size: 15px;
+  font-weight: 600;
+}
+.hero-text-link span {
+  display: inline-grid;
+  width: 28px;
+  height: 28px;
+  margin-left: 8px;
+  place-items: center;
+  border: 1px solid #bbcee4;
+  border-radius: 50%;
+  color: #237df0;
+  transition:
+    transform 0.22s,
+    background 0.22s;
+}
+.hero-text-link:hover span {
+  background: #fff;
+  transform: translateY(3px);
+}
+.services-hero-visual {
+  position: relative;
+  width: min(610px, 100%);
+  aspect-ratio: 1.12;
+  justify-self: end;
+}
+.services-hero-visual::before {
+  position: absolute;
+  inset: 9% 3% 2%;
+  content: '';
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.96) 0 24%,
+      rgba(145, 201, 255, 0.23) 25% 44%,
+      transparent 45%
+    ),
+    url('/images/lanhu/slices/hero-geo-visual@2x.png') 72% 45% / 170% auto no-repeat;
+  filter: drop-shadow(0 30px 45px rgba(52, 120, 207, 0.18));
+  mask-image: radial-gradient(ellipse, #000 48%, transparent 73%);
+}
+.hero-core {
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  width: 156px;
+  height: 156px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, rgba(35, 126, 241, 0.94), rgba(43, 180, 231, 0.84));
+  box-shadow:
+    0 22px 45px rgba(33, 116, 224, 0.28),
+    inset 0 1px 5px rgba(255, 255, 255, 0.7);
+  transform: translate(-50%, -50%);
+}
+.hero-core small {
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  opacity: 0.85;
+}
+.hero-core strong {
+  margin-top: 7px;
+  color: #fff;
+  font-size: 20px;
+}
+.hero-core span {
+  margin-top: 4px;
+  font-size: 11px;
+  opacity: 0.8;
+}
+.hero-orbit {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: 50%;
+  border: 1px solid rgba(50, 133, 234, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.hero-orbit-one {
+  width: 360px;
+  height: 360px;
+}
+.hero-orbit-two {
+  width: 490px;
+  height: 490px;
+  border-style: dashed;
+  opacity: 0.72;
+}
+.hero-orbit i {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: #2383f4;
+  box-shadow: 0 5px 15px rgba(32, 125, 237, 0.35);
+}
+.hero-orbit i:nth-child(1) {
+  top: -7px;
+  left: 50%;
+}
+.hero-orbit i:nth-child(2) {
+  right: 10%;
+  bottom: 18%;
+  background: #52c6e7;
+}
+.hero-orbit i:nth-child(3) {
+  bottom: 10%;
+  left: 15%;
+  background: var(--service-blue-strong);
+}
+.hero-orbit i:nth-child(4) {
+  top: 18%;
+  left: 2%;
+  background: #7bc6f8;
+}
+.hero-data {
+  position: absolute;
+  z-index: 5;
+  min-width: 135px;
+  padding: 14px 17px;
+  border: 1px solid rgba(255, 255, 255, 0.86);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.76);
+  box-shadow:
+    0 14px 35px rgba(50, 111, 187, 0.13),
+    inset 0 1px 0 #fff;
+  backdrop-filter: blur(12px);
+}
+.hero-data small {
+  display: block;
+  color: var(--service-muted);
+  font-size: 12px;
+}
+.hero-data strong {
+  display: block;
+  margin-top: 4px;
+  color: #207df0;
+  font-size: 25px;
+  font-variant-numeric: tabular-nums;
+}
+.hero-data-top {
+  top: 12%;
+  right: 4%;
+}
+.hero-data-bottom {
+  bottom: 14%;
+  left: 1%;
+}
+.hero-visual-caption {
+  position: absolute;
+  right: 8%;
+  bottom: 2%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--service-muted);
+  font-size: 12px;
+}
+.hero-visual-caption span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #29a3ed;
+  box-shadow: 0 0 0 5px rgba(41, 163, 237, 0.12);
+}
+.decision-section {
+  padding: 110px 0 126px;
+}
+.decision-grid {
+  display: grid;
+  grid-template-columns: 0.82fr 1.35fr;
+  gap: 80px;
+  align-items: center;
+}
+.section-intro h2,
+.model-heading h2,
+.service-system-heading h2,
+.process-heading h2 {
+  margin: 14px 0 0;
+  color: var(--service-ink);
+  font-size: 44px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.25;
+  text-wrap: balance;
+}
+.section-intro > p:last-of-type,
+.model-heading > p:last-child,
+.service-system-heading > p,
+.process-heading > p:last-child {
+  max-width: 600px;
+  margin: 20px 0 0;
+  color: var(--service-copy);
+  font-size: 16px;
+  line-height: 1.8;
+}
+.decision-journey {
+  display: grid;
+}
+.decision-journey article {
+  position: relative;
+  min-height: 128px;
+  display: grid;
+  grid-template-columns: 78px 1fr 28px;
+  align-items: center;
+  gap: 23px;
+  padding: 22px 0;
+  border-bottom: 1px solid var(--service-line);
+}
+.decision-journey article:first-child {
+  border-top: 1px solid var(--service-line);
+}
+.journey-number {
+  color: #a4b8ce;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.decision-journey h3 {
+  margin: 0;
+  color: var(--service-ink);
+  font-size: 25px;
+}
+.decision-journey p {
+  max-width: 500px;
+  margin: 8px 0 0;
+  color: var(--service-copy);
+  font-size: 15px;
+  line-height: 1.72;
+}
+.decision-journey article > span {
+  color: #62a2ef;
+  font-size: 22px;
+}
+.model-deep-section {
+  position: relative;
+  padding: 110px 0 128px;
+  background:
+    radial-gradient(circle at 10% 90%, rgba(105, 201, 238, 0.16), transparent 26%), #edf7ff;
+}
+.model-heading {
+  max-width: 980px;
+  margin: 0 auto;
+  text-align: center;
+}
+.model-heading h2,
+.process-heading h2,
+.service-system-heading h2 {
+  width: 100%;
+  text-align: center !important;
+  white-space: nowrap;
+}
+.model-heading > p:last-child {
+  max-width: 860px;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
+  text-wrap: balance;
+}
+.model-deep-grid {
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 75px;
+  align-items: center;
+  margin-top: 72px;
+}
+.ring-stage {
+  position: relative;
+  min-height: 510px;
+}
+.model-ring {
+  position: absolute;
+  width: 345px;
+  aspect-ratio: 1;
+}
+.model-ring img {
+  display: block;
+  width: 100%;
+  filter: drop-shadow(0 25px 32px rgba(58, 123, 205, 0.12));
+}
+.ring-1 {
+  top: 10px;
+  left: 0;
+}
+.ring-2 {
+  right: 0;
+  bottom: 0;
+}
+.ring-copy {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  transform: translate(-50%, -50%);
+}
+.ring-copy small {
+  color: #87a4c6;
+  font-size: 11px;
+}
+.ring-copy strong {
+  margin-top: 5px;
+  color: #2d76d8;
+  font-size: 17px;
+}
+.ring-connector {
+  position: absolute;
+  z-index: 3;
+  top: 45%;
+  left: 50%;
+  width: 92px;
+  height: 92px;
+  display: grid;
+  place-content: center;
+  border: 7px solid rgba(255, 255, 255, 0.84);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #448ff2, #43b9e9);
+  box-shadow: 0 16px 32px rgba(44, 130, 224, 0.22);
+  transform: translate(-50%, -50%);
+  font-size: 11px;
+  text-align: center;
+}
+.model-explanation {
+  display: grid;
+  gap: 26px;
+}
+.model-explanation article {
+  padding: 0 0 30px;
+  border-bottom: 1px solid var(--service-line);
+}
+.model-explanation header {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+.model-explanation header span {
+  color: #79a2d2;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.model-explanation h3 {
+  margin: 0;
+  color: var(--service-ink);
+  font-size: 24px;
+}
+.model-explanation p {
+  margin: 13px 0 15px;
+  color: var(--service-copy);
+  font-size: 15px;
+  line-height: 1.75;
+}
+.model-explanation ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.model-explanation li {
+  padding: 8px 12px;
+  border-radius: 5px;
+  color: #496b91;
+  background: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+}
+.service-system-section {
+  padding: 116px 0 134px;
+}
+.service-system-heading {
+  max-width: 980px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+  text-align: center;
+}
+.service-system-heading > div {
+  width: 100%;
+}
+.service-system-heading .section-kicker {
+  justify-content: center;
+}
+.service-system-heading > p {
+  max-width: 860px;
+  margin: 20px auto 0;
+  text-align: center;
+  text-wrap: balance;
+}
+.service-stories {
+  display: grid;
+  gap: 78px;
+  margin-top: 72px;
+}
+.service-story {
+  display: grid;
+  grid-template-columns: 0.93fr 1.07fr;
+  align-items: stretch;
+  gap: 68px;
+  padding: 52px 0 64px;
+  border-top: 1px solid var(--service-line);
+}
+.service-story.reverse .service-story-copy {
+  order: 2;
+}
+.service-story.reverse .service-story-visual {
+  order: 1;
+}
+.service-index {
+  margin: 0;
+  color: #87a3c3;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.service-index span {
+  margin-left: 12px;
+  color: #2c80ed;
+}
+.service-story h3 {
+  max-width: 630px;
+  margin: 18px 0 0;
+  color: var(--service-ink);
+  font-size: 40px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.25;
+}
+.service-lead {
+  margin: 19px 0 0;
+  color: var(--service-copy);
+  font-size: 16px;
+  line-height: 1.82;
+  text-wrap: balance;
+}
+.pain-note {
+  margin-top: 25px;
+  padding: 20px 24px;
+  border-left: 3px solid #3a8ef3;
+  background: var(--service-surface);
+}
+.pain-note strong {
+  color: #3d6faa;
+  font-size: 13px;
+}
+.pain-note p {
+  margin: 6px 0 0;
+  color: var(--service-copy);
+  font-size: 15px;
+  line-height: 1.72;
+}
+.service-details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  margin-top: 30px;
+}
+.service-details strong {
+  color: var(--service-ink);
+  font-size: 14px;
+}
+.service-details ul {
+  display: grid;
+  gap: 11px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.service-details li {
+  position: relative;
+  padding-left: 14px;
+  color: var(--service-copy);
+  font-size: 14px;
+  line-height: 1.65;
+}
+.service-details li::before {
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  content: '';
+  border-radius: 50%;
+  background: #4b97ef;
+}
+.service-action {
+  margin-top: 27px;
+  padding: 0 0 5px;
+  border-bottom: 1px solid #8eb8e9;
+  color: #257ce8;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 600;
+}
+.service-action b {
+  margin-left: 8px;
+  transition: margin 0.2s;
+}
+.service-action:hover b {
+  margin-left: 13px;
+}
+.service-story-visual {
+  position: relative;
+  min-height: 520px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  background:
+    radial-gradient(circle at 70% 25%, rgba(84, 164, 255, 0.28), transparent 24%),
+    linear-gradient(145deg, #f1f8ff, #dfeeff);
+  box-shadow:
+    0 28px 60px rgba(62, 126, 204, 0.13),
+    inset 0 1px 0 #fff;
+}
+.visual-2 {
+  background:
+    radial-gradient(circle at 25% 70%, rgba(87, 190, 231, 0.27), transparent 25%),
+    linear-gradient(145deg, #e9f7ff, #e5edff);
+}
+.visual-3 {
+  background:
+    radial-gradient(circle at 75% 70%, rgba(97, 139, 241, 0.25), transparent 25%),
+    linear-gradient(145deg, #f4f8ff, #dcecff);
+}
+.visual-topline {
+  display: flex;
+  justify-content: space-between;
+  padding: 24px 27px;
+  color: #496b91;
+  font-size: 13px;
+}
+.visual-topline small {
+  color: var(--service-muted);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+}
+.visual-network {
+  position: absolute;
+  top: 54%;
+  left: 50%;
+  width: 390px;
+  height: 340px;
+  transform: translate(-50%, -50%);
+}
+.network-core {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: 50%;
+  width: 135px;
+  height: 135px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 12px solid rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, var(--service-blue-strong), var(--service-cyan));
+  box-shadow: 0 22px 38px rgba(37, 125, 226, 0.28);
+  transform: translate(-50%, -50%);
+}
+.network-core small {
+  font-size: 11px;
+  opacity: 0.7;
+}
+.network-core strong {
+  margin-top: 5px;
+  color: #fff;
+  font-size: 17px;
+}
+.network-item {
+  position: absolute;
+  z-index: 2;
+  min-width: 105px;
+  padding: 11px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.92);
+  border-radius: 7px;
+  color: #496b91;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 12px 24px rgba(55, 116, 190, 0.1);
+  font-size: 12px;
+  text-align: center;
+  backdrop-filter: blur(8px);
+}
+.item-1 {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.item-2 {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.item-3 {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.item-4 {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.network-line {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 118px;
+  background: linear-gradient(#65a7ef, transparent);
+  transform-origin: top;
+}
+.line-1 {
+  transform: rotate(180deg);
+}
+.line-2 {
+  transform: rotate(90deg);
+}
+.line-3 {
+  transform: rotate(0);
+}
+.line-4 {
+  transform: rotate(-90deg);
+}
+.visual-metric {
+  position: absolute;
+  right: 24px;
+  bottom: 22px;
+  display: grid;
+  justify-items: end;
+}
+.visual-metric strong {
+  color: #2780ed;
+  font-size: 27px;
+  font-variant-numeric: tabular-nums;
+}
+.visual-metric span {
+  margin-top: 3px;
+  color: var(--service-muted);
+  font-size: 12px;
+}
+.process-section {
+  position: relative;
+  padding: 112px 0 128px;
+  isolation: isolate;
+  background: #edf7ff;
+}
+.process-background {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background: url('/images/lanhu/slices/home-group95-image21@2x.png') center 10% / cover no-repeat;
+  opacity: 0.16;
+  mask-image: linear-gradient(#000, transparent 88%);
+}
+.process-heading {
+  max-width: 980px;
+  margin: 0 auto;
+  text-align: center;
+}
+.process-heading > p:last-child {
+  max-width: 860px;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
+  text-wrap: balance;
+}
+.process-timeline {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 22px;
+  margin-top: 66px;
+}
+.process-timeline::before {
+  position: absolute;
+  top: 26px;
+  right: 9%;
+  left: 9%;
+  height: 1px;
+  content: '';
+  background: linear-gradient(90deg, transparent, #7eb5f0 12% 88%, transparent);
+}
+.process-timeline article {
+  position: relative;
+  z-index: 2;
+  padding: 0 18px;
+  text-align: center;
+}
+.step-marker {
+  width: 54px;
+  height: 54px;
+  display: grid;
+  margin: 0 auto 22px;
+  place-items: center;
+  border: 7px solid rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  color: #fff;
+  background: #358af0;
+  box-shadow: 0 11px 24px rgba(51, 135, 235, 0.22);
+}
+.step-marker span {
+  font-size: 11px;
+  font-weight: 700;
+}
+.process-timeline h3 {
+  margin: 0;
+  color: var(--service-ink);
+  font-size: 18px;
+}
+.process-timeline p {
+  margin: 11px 0 0;
+  color: var(--service-copy);
+  font-size: 14px;
+  line-height: 1.72;
+}
+.service-industries {
+  padding: 116px 0 132px;
+}
+.industries-layout {
+  display: grid;
+  grid-template-columns: 0.72fr 1.28fr;
+  gap: 88px;
+  align-items: start;
+}
+.industries-layout .section-intro {
+  position: sticky;
+  top: 112px;
+}
+.industries-layout .primary-button {
+  margin-top: 28px;
+}
+.industry-list {
+  display: grid;
+}
+.industry-list article {
+  min-height: 128px;
+  display: grid;
+  grid-template-columns: 44px 1fr auto 42px;
+  align-items: center;
+  gap: 24px;
+  padding: 18px 0;
+  border-bottom: 1px solid var(--service-line);
+  transition:
+    padding 0.25s,
+    background 0.25s;
+}
+.industry-list article:first-child {
+  border-top: 1px solid var(--service-line);
+}
+.industry-list article:hover {
+  padding-right: 13px;
+  padding-left: 13px;
+  background: #f7fbff;
+}
+.industry-list > article > span {
+  color: #9bb0c7;
+  font-size: 11px;
+  font-weight: 700;
+}
+.industry-list h3 {
+  margin: 0;
+  color: var(--service-ink);
+  font-size: 21px;
+}
+.industry-list p {
+  margin: 7px 0 0;
+  color: var(--service-copy);
+  font-size: 15px;
+  line-height: 1.68;
+}
+.industry-list strong {
+  color: var(--service-blue);
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.industry-list button {
+  width: 34px;
+  height: 34px;
+  border: 1px solid #b9d0e9;
+  border-radius: 50%;
+  color: #3184ec;
+  background: #fff;
+  transition:
+    transform 0.2s,
+    background 0.2s,
+    color 0.2s;
+}
+.industry-list button:hover {
+  color: #fff;
+  background: #3184ec;
+  transform: translateX(3px);
+}
+.proof-section {
+  padding: 104px 0 122px;
+  background: #f2f8ff;
+}
+.proof-grid {
+  display: grid;
+  grid-template-columns: 1.35fr 0.65fr;
+  gap: 30px;
+}
+.featured-proof {
+  min-height: 430px;
+  padding: 52px;
+  border-radius: 8px;
+  color: #fff;
+  background:
+    linear-gradient(120deg, rgba(26, 82, 167, 0.95), rgba(38, 142, 222, 0.82)),
+    url('/images/lanhu/slices/home-group90-image15@2x.png') center / cover;
+  box-shadow: 0 28px 60px rgba(40, 100, 177, 0.18);
+}
+.proof-tag {
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  opacity: 0.72;
+}
+.featured-proof h2 {
+  max-width: 720px;
+  margin: 26px 0 0;
+  color: #fff;
+  font-size: 44px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.25;
+}
+.featured-proof > p {
+  max-width: 680px;
+  margin: 19px 0 0;
+  font-size: 16px;
+  line-height: 1.8;
+  opacity: 0.8;
+}
+.proof-data {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 52px;
+}
+.proof-data div {
+  padding-top: 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.34);
+}
+.proof-data strong {
+  display: block;
+  color: #fff;
+  font-size: 25px;
+  font-variant-numeric: tabular-nums;
+}
+.proof-data span {
+  display: block;
+  margin-top: 7px;
+  font-size: 13px;
+  opacity: 0.7;
+}
+.proof-summary {
+  padding: 45px 40px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 22px 50px rgba(63, 119, 185, 0.1);
+}
+.proof-summary h3 {
+  margin: 18px 0 0;
+  color: var(--service-ink);
+  font-size: 27px;
+  line-height: 1.45;
+}
+.proof-summary ul {
+  display: grid;
+  gap: 13px;
+  margin: 28px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.proof-summary li {
+  padding-bottom: 13px;
+  border-bottom: 1px solid #e4edf6;
+  color: var(--service-copy);
+  font-size: 15px;
+}
+.services-cta {
+  position: relative;
+  min-height: 430px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+.cta-wave {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    linear-gradient(rgba(247, 251, 255, 0.22), rgba(236, 247, 255, 0.5)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.services-cta-content {
+  padding: 76px 0;
+  text-align: center;
+}
+.services-cta-content > p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.services-cta-content h2 {
+  margin: 17px 0 0;
+  color: var(--service-ink);
+  font-size: 48px;
+  letter-spacing: 0;
+  line-height: 1.3;
+}
+.services-cta-content > span {
+  display: block;
+  margin-top: 14px;
+  color: var(--service-copy);
+  font-size: 16px;
+}
+.services-cta-content .primary-button {
+  margin-top: 28px;
+}
+@media (max-width: 1050px) {
+  .services-hero-grid {
+    grid-template-columns: 0.9fr 1.1fr;
+    gap: 25px;
+  }
+  .hero-orbit-two {
+    width: 420px;
+    height: 420px;
+  }
+  .hero-orbit-one {
+    width: 320px;
+    height: 320px;
+  }
+  .model-deep-grid {
+    gap: 35px;
+  }
+  .model-ring {
+    width: 310px;
+  }
+  .service-story {
+    gap: 36px;
+  }
+  .service-story-visual {
+    min-height: 490px;
+  }
+  .industries-layout {
+    gap: 55px;
+  }
+}
+@media (max-width: 1080px) {
+  .services-hero,
+  .services-hero-grid {
+    min-height: auto;
+  }
+  .services-hero-grid {
+    grid-template-columns: 1fr;
+    padding-top: 72px;
+    padding-bottom: 60px;
+  }
+  .services-hero-copy {
+    max-width: 760px;
+  }
+  .services-hero-copy h1 {
+    font-size: 52px;
+  }
+  .section-intro h2,
+  .model-heading h2,
+  .service-system-heading h2,
+  .process-heading h2 {
+    font-size: 40px;
+  }
+  .model-heading h2,
+  .service-system-heading h2,
+  .process-heading h2 {
+    max-width: 18em;
+    white-space: normal;
+  }
+  .service-story h3 {
+    font-size: 38px;
+  }
+  .featured-proof h2,
+  .services-cta-content h2 {
+    font-size: 42px;
+  }
+  .services-hero-visual {
+    width: min(570px, 100%);
+    justify-self: center;
+    margin-top: 28px;
+  }
+  .decision-grid,
+  .model-deep-grid,
+  .service-system-heading,
+  .service-story,
+  .industries-layout,
+  .proof-grid {
+    grid-template-columns: 1fr;
+  }
+  .decision-grid {
+    gap: 45px;
+  }
+  .model-deep-grid {
+    gap: 50px;
+  }
+  .ring-stage {
+    width: min(650px, 100%);
+    margin: auto;
+  }
+  .service-system-heading {
+    gap: 0;
+  }
+  .service-system-heading > p {
+    margin-top: 18px;
+  }
+  .service-story-copy {
+    max-width: 780px;
+  }
+  .service-story.reverse .service-story-copy,
+  .service-story.reverse .service-story-visual {
+    order: initial;
+  }
+  .service-story-visual {
+    width: min(720px, 100%);
+    min-height: 500px;
+    justify-self: center;
+  }
+  .process-timeline {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+  .process-timeline::before {
+    top: 28px;
+    bottom: 28px;
+    left: 26px;
+    width: 1px;
+    height: auto;
+  }
+  .process-timeline article {
+    min-height: 118px;
+    display: grid;
+    grid-template-columns: 54px 1fr;
+    grid-template-rows: auto auto;
+    gap: 4px 20px;
+    padding: 0 0 28px;
+    text-align: left;
+  }
+  .step-marker {
+    grid-row: 1 / 3;
+    margin: 0;
+  }
+  .process-timeline p {
+    margin-top: 4px;
+  }
+  .industries-layout .section-intro {
+    position: static;
+    max-width: 720px;
+  }
+  .proof-summary {
+    padding: 38px;
+  }
+}
+@media (max-width: 600px) {
+  .services-hero-grid {
+    min-width: 0;
+    padding-top: 54px;
+  }
+  .services-hero-copy {
+    width: 100%;
+    min-width: 0;
+  }
+  .services-hero-copy h1 {
+    max-width: 100%;
+    font-size: 38px;
+    letter-spacing: 0;
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+  .services-hero-copy h1 br,
+  .section-intro h2 br,
+  .proof-summary h3 br {
+    display: none;
+  }
+  .section-intro h2,
+  .model-heading h2,
+  .service-system-heading h2,
+  .process-heading h2,
+  .featured-proof h2,
+  .services-cta-content h2 {
+    font-size: 32px;
+  }
+  .service-story h3 {
+    font-size: 30px;
+  }
+  .hero-description {
+    width: 100%;
+    max-width: 100%;
+    font-size: 15px;
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+  .hero-badges {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  .hero-actions {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .services-hero-visual {
+    width: min(340px, 100%);
+    aspect-ratio: 0.95;
+  }
+  .hero-orbit-two {
+    width: 330px;
+    height: 330px;
+  }
+  .hero-orbit-one {
+    width: 250px;
+    height: 250px;
+  }
+  .hero-core {
+    width: 124px;
+    height: 124px;
+  }
+  .hero-core strong {
+    font-size: 17px;
+  }
+  .hero-data {
+    min-width: 112px;
+    padding: 11px 13px;
+  }
+  .hero-data strong {
+    font-size: 20px;
+  }
+  .decision-section,
+  .model-deep-section,
+  .service-system-section,
+  .service-industries {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .decision-journey article {
+    grid-template-columns: 44px 1fr;
+    gap: 13px;
+    padding: 22px 4px;
+  }
+  .decision-journey article > span {
+    display: none;
+  }
+  .decision-journey h3 {
+    font-size: 21px;
+  }
+  .ring-stage {
+    min-height: 390px;
+  }
+  .model-ring {
+    width: 235px;
+  }
+  .ring-copy strong {
+    font-size: 13px;
+  }
+  .ring-connector {
+    width: 70px;
+    height: 70px;
+    border-width: 5px;
+  }
+  .service-stories {
+    gap: 40px;
+    margin-top: 45px;
+  }
+  .service-story {
+    gap: 32px;
+    padding-top: 35px;
+  }
+  .service-details {
+    grid-template-columns: 1fr;
+  }
+  .service-story-visual {
+    min-height: 410px;
+  }
+  .visual-network {
+    width: 310px;
+    height: 280px;
+  }
+  .network-core {
+    width: 108px;
+    height: 108px;
+    border-width: 8px;
+  }
+  .network-core strong {
+    font-size: 14px;
+  }
+  .network-item {
+    min-width: 86px;
+    padding: 9px;
+    font-size: 11px;
+  }
+  .network-line {
+    height: 92px;
+  }
+  .process-section {
+    padding-top: 76px;
+    padding-bottom: 84px;
+  }
+  .industry-list article {
+    grid-template-columns: 30px 1fr 36px;
+    gap: 10px;
+    padding: 22px 4px;
+  }
+  .industry-list strong {
+    grid-column: 2 / 3;
+  }
+  .industry-list button {
+    grid-column: 3;
+    grid-row: 1 / 3;
+  }
+  .featured-proof {
+    min-height: 0;
+    padding: 34px 24px;
+  }
+  .proof-data {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-top: 36px;
+  }
+  .proof-summary {
+    padding: 32px 24px;
+  }
+  .services-cta {
+    min-height: 390px;
+  }
+  .services-cta-content h2 br {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .services-page *,
+  .services-page *::before,
+  .services-page *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>
diff --git a/pages/solutions.vue b/pages/solutions.vue
new file mode 100644
index 0000000..11ae5e1
--- /dev/null
+++ b/pages/solutions.vue
@@ -0,0 +1,1381 @@
+<script setup>
+import { gsap } from 'gsap'
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
+
+const pageRoot = ref(null)
+const activeIndustry = ref('enterprise')
+const { openConsultation } = useConsultation()
+let animationContext
+let observer
+
+useHead({
+  title: '行业解决方案｜大马棒·云途全域 GEO',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '面向企业服务、教育培训、本地生活、医疗健康与电商零售行业，提供基于真实用户决策路径的 GEO 获客转化方案。'
+    }
+  ]
+})
+
+const industries = [
+  {
+    id: 'enterprise',
+    number: '01',
+    name: '企业服务',
+    short: '企服',
+    question: 'SaaS、软件、企服公司最头疼什么？',
+    pain: '决策动不动几个月，客户到处比方案，搜一圈下来，你甚至没有进入备选名单。',
+    strategyTitle: '不追泛流量，先追“信任”',
+    strategy:
+      'B 端采购者搜索的是业务问题，而不是品牌名。我们在行业媒体建立背书，在“怎么解决某类问题”的内容中呈现方案，让品牌在客户比选阶段提前出现。',
+    actions: [
+      '行业媒体深度稿与创始人访谈，拉高品牌专业水位',
+      '占住“行业解决方案”“系统怎么选”等高意向长尾问题',
+      '持续输出白皮书与案例复盘，积累长期决策信任'
+    ],
+    metrics: [
+      ['+320%', 'AI 搜索曝光'],
+      ['80+', '月精准线索']
+    ],
+    tags: ['长决策链', '专业背书', '方案比选'],
+    visual: ['行业问题', '专业内容', '权威信源', '进入比选']
+  },
+  {
+    id: 'education',
+    number: '02',
+    name: '教育培训',
+    short: '教育',
+    question: '家长搜完品牌，又会去搜“这家机构靠谱吗”',
+    pain: '口碑是否可信、课程是否匹配、真实效果如何，往往直接决定这一次咨询能不能发生。',
+    strategyTitle: '把“别人怎么说你”系统管理起来',
+    strategy:
+      '围绕择校指南、课程比较、避坑经验与真实学习反馈，用贴近家长决策语言的内容覆盖从找方法到选机构的完整路径。',
+    actions: [
+      '构建真实学员口碑内容矩阵，覆盖主流搜索与内容平台',
+      '围绕“机构怎么样”“课程值得吗”等问题精准布局',
+      '用场景化内容引导咨询，让搜索流量进入课程承接页'
+    ],
+    metrics: [
+      ['1200+', '长尾问题布局'],
+      ['-45%', '有效线索成本']
+    ],
+    tags: ['口碑验证', '课程比较', '家长决策'],
+    visual: ['学习问题', '课程比较', '口碑验证', '报名咨询']
+  },
+  {
+    id: 'local-life',
+    number: '03',
+    name: '本地生活',
+    short: '本地',
+    question: '用户就在附近搜，搜完便决定去哪一家',
+    pain: '如果品牌没有出现在同城搜索、内容推荐和本地平台中，就等于把到店客户送给隔壁。',
+    strategyTitle: '不是做大曝光，而是让附近的人搜得到你',
+    strategy:
+      '围绕真实消费场景，在本地生活平台、内容社区和短视频渠道建立稳定内容覆盖，让用户从看到、心动到到店之间少走一步。',
+    actions: [
+      '覆盖本地生活平台内容，占住同城与附近搜索位置',
+      '组合同城达人和真实顾客内容，避免脱离体验的假种草',
+      '设计到店路径内容，明确位置、场景、产品与消费理由'
+    ],
+    metrics: [
+      ['95%', '品牌词搜索覆盖'],
+      ['+170%', '到店咨询量']
+    ],
+    tags: ['同城搜索', '真实体验', '到店转化'],
+    visual: ['附近搜索', '真实体验', '消费理由', '到店行动']
+  },
+  {
+    id: 'healthcare',
+    number: '04',
+    name: '医疗健康',
+    short: '医疗',
+    question: '用户先相信你的专业，才敢把健康交给你',
+    pain: '负面口碑、过时信息和不准确内容会在搜索结果页持续消耗信任，同时行业推广又受到严格合规约束。',
+    strategyTitle: '不做擦边推广，建设合规权威形象',
+    strategy:
+      '以合规科普为核心，把专业能力转化为用户看得懂、AI 能识别的内容，在用户搜索健康问题时持续呈现准确、稳定的专业声音。',
+    actions: [
+      '体系化输出合规科普内容，强化专业人设与核心 IP',
+      '覆盖用户从“查症状”到“选机构”的全流程问题',
+      '系统维护公开口碑，及时纠正过时与不准确信息'
+    ],
+    metrics: [
+      ['合规', '内容审核机制'],
+      ['定制', '效果指标体系']
+    ],
+    tags: ['合规科普', '权威形象', '口碑维护'],
+    visual: ['健康提问', '专业科普', '权威验证', '机构选择'],
+    note: '医疗健康行业的执行范围与效果指标需依据具体业务资质、地区政策和平台规则单独确认。'
+  },
+  {
+    id: 'ecommerce',
+    number: '05',
+    name: '电商零售',
+    short: '电商',
+    question: '平台流量越来越贵，用户却搜不到品牌内容',
+    pain: '站内投流成本持续上涨，站外品牌信息稀少，用户被种草后无法完成主动搜索与信任验证。',
+    strategyTitle: '填满用户主动搜索品牌时看到的内容',
+    strategy:
+      '通过种草、测评、使用场景、短视频与直播承接，串起“被种草—主动搜—找到品牌—进入店铺或私域”的完整路径。',
+    actions: [
+      '全平台种草内容布局，持续提升品牌主动搜索热度',
+      '产品测评与使用场景内容，降低用户理解和决策门槛',
+      '把搜索流量承接至店铺、直播间与私域，沉淀复购用户'
+    ],
+    metrics: [
+      ['3 万+', '内容资产沉淀'],
+      ['60%', '自然流量占比']
+    ],
+    tags: ['内容种草', '产品测评', '直播承接'],
+    visual: ['内容种草', '主动搜索', '场景验证', '店铺转化']
+  }
+]
+
+const decisionFactors = [
+  ['01', '决策周期', '企服客户可能比较数月，本地消费往往几分钟内完成决定。内容节奏不能相同。'],
+  ['02', '信任依据', '有人相信行业媒体，有人相信真实体验，也有人更看重资质、专业科普与长期口碑。'],
+  ['03', '转化动作', '预约演示、报名试听、到店消费、在线问诊和进入店铺，需要完全不同的承接链路。']
+]
+
+const moreIndustries = ['快消品牌', '工业制造', '地产家居', '金融服务', '汽车出行', '法律服务']
+
+function scrollToIndustry(id) {
+  activeIndustry.value = id
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+function requestIndustryPlan(industry, source) {
+  openConsultation({ title: `获取${industry}行业方案`, source, industry })
+}
+
+function requestCustomPlan(source) {
+  openConsultation({ title: '咨询定制行业方案', source })
+}
+
+onMounted(async () => {
+  if (!pageRoot.value) return
+  await nextTick()
+
+  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    animationContext = gsap.context(() => {
+      gsap.to('.solutions-orbit-a', { rotation: 360, duration: 32, repeat: -1, ease: 'none' })
+      gsap.to('.solutions-orbit-b', { rotation: -360, duration: 42, repeat: -1, ease: 'none' })
+    }, pageRoot.value)
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      const visible = entries
+        .filter((entry) => entry.isIntersecting)
+        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
+      if (visible?.target?.id) activeIndustry.value = visible.target.id
+    },
+    { rootMargin: '-28% 0px -56% 0px', threshold: [0.1, 0.35, 0.6] }
+  )
+
+  industries.forEach((industry) => {
+    const element = document.getElementById(industry.id)
+    if (element) observer.observe(element)
+  })
+})
+
+onBeforeUnmount(() => {
+  animationContext?.revert()
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <div ref="pageRoot" class="solutions-page">
+    <a class="skip-link" href="#main-content">跳到主要内容</a>
+    <SiteHeader />
+
+    <main id="main-content">
+      <section class="solutions-hero">
+        <div class="solutions-hero-mesh" aria-hidden="true"></div>
+        <div class="page-width solutions-hero-grid">
+          <div class="solutions-hero-copy">
+            <p class="page-eyebrow">行业解决方案</p>
+            <h1>让每一个行业，<br />都有一套自己的<span>增长打法</span></h1>
+            <p>
+              深度理解不同行业的增长痛点与用户决策路径，匹配有针对性的内容、信源和获客转化策略。
+            </p>
+            <div class="hero-industry-links" aria-label="行业快捷导航">
+              <button
+                v-for="industry in industries"
+                :key="industry.id"
+                type="button"
+                @click="scrollToIndustry(industry.id)"
+              >
+                {{ industry.name }}
+              </button>
+            </div>
+            <button
+              class="primary-button"
+              type="button"
+              @click="requestCustomPlan('行业解决方案页 Hero')"
+            >
+              获取专属方案 <AppIcon name="arrow-right" />
+            </button>
+          </div>
+
+          <div class="solutions-hero-visual" aria-label="五大行业解决方案协同示意图">
+            <div class="solutions-orbit solutions-orbit-a">
+              <i v-for="industry in industries" :key="`orbit-a-${industry.id}`"></i>
+            </div>
+            <div class="solutions-orbit solutions-orbit-b">
+              <i v-for="index in 4" :key="`orbit-b-${index}`"></i>
+            </div>
+            <div class="solutions-core">
+              <small>YUNTU GEO</small><strong>行业增长引擎</strong><span>策略因行业而不同</span>
+            </div>
+            <button
+              v-for="(industry, index) in industries"
+              :key="`node-${industry.id}`"
+              type="button"
+              class="industry-node"
+              :class="`node-${index + 1}`"
+              @click="scrollToIndustry(industry.id)"
+            >
+              <small>0{{ index + 1 }}</small
+              ><strong>{{ industry.short }}</strong>
+            </button>
+            <div class="hero-signal"><span></span> 5 类行业路径已建立</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="difference-section">
+        <div class="page-width difference-layout">
+          <header class="difference-heading">
+            <p class="section-kicker">为什么不能套用同一模板</p>
+            <h2>B2B 软件和一家火锅店，<br />用户做决定的方式完全不同</h2>
+            <p>
+              行业方案的核心不是替换几个关键词，而是重新理解用户在什么场景下提问、依据什么建立信任，以及最后如何行动。
+            </p>
+          </header>
+          <div class="decision-factor-list">
+            <article v-for="factor in decisionFactors" :key="factor[0]">
+              <span>{{ factor[0] }}</span>
+              <div>
+                <h3>{{ factor[1] }}</h3>
+                <p>{{ factor[2] }}</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <nav class="industry-sticky-nav" aria-label="行业方案导航">
+        <div class="page-width">
+          <button
+            v-for="industry in industries"
+            :key="`sticky-${industry.id}`"
+            type="button"
+            :class="{ active: activeIndustry === industry.id }"
+            @click="scrollToIndustry(industry.id)"
+          >
+            <span>{{ industry.number }}</span
+            >{{ industry.name }}
+          </button>
+        </div>
+      </nav>
+
+      <section class="industry-solutions">
+        <article
+          v-for="(industry, industryIndex) in industries"
+          :id="industry.id"
+          :key="industry.id"
+          class="industry-solution"
+          :class="{ alternate: industryIndex % 2 === 1 }"
+        >
+          <div class="page-width industry-solution-grid">
+            <header class="industry-intro">
+              <div class="industry-number">{{ industry.number }}</div>
+              <p class="section-kicker">{{ industry.name }}行业</p>
+              <h2>{{ industry.question }}</h2>
+              <p class="industry-pain">{{ industry.pain }}</p>
+              <div class="industry-tags">
+                <span v-for="tag in industry.tags" :key="tag">{{ tag }}</span>
+              </div>
+            </header>
+
+            <div class="industry-strategy">
+              <p class="strategy-label">我们的打法</p>
+              <h3>{{ industry.strategyTitle }}</h3>
+              <p class="strategy-copy">{{ industry.strategy }}</p>
+              <strong class="actions-title">具体会做这些事</strong>
+              <ul>
+                <li v-for="(action, actionIndex) in industry.actions" :key="action">
+                  <span>0{{ actionIndex + 1 }}</span
+                  >{{ action }}
+                </li>
+              </ul>
+              <p v-if="industry.note" class="compliance-note">{{ industry.note }}</p>
+              <button
+                class="industry-plan-button"
+                type="button"
+                @click="requestIndustryPlan(industry.name, `${industry.name}行业方案板块`)"
+              >
+                获取{{ industry.name }}行业方案 <AppIcon name="arrow-right" />
+              </button>
+            </div>
+
+            <div class="industry-visual" :class="`industry-visual-${industryIndex + 1}`">
+              <div class="industry-visual-header">
+                <span>{{ industry.name }}决策路径</span><small>GEO INDUSTRY MAP</small>
+              </div>
+              <div class="path-map">
+                <div class="path-axis"></div>
+                <div
+                  v-for="(item, itemIndex) in industry.visual"
+                  :key="item"
+                  class="path-node"
+                  :class="`path-node-${itemIndex + 1}`"
+                >
+                  <span>0{{ itemIndex + 1 }}</span
+                  ><strong>{{ item }}</strong>
+                </div>
+                <div class="path-center">
+                  <small>行业策略</small><strong>{{ industry.short }}</strong>
+                </div>
+              </div>
+              <div class="industry-metrics">
+                <div v-for="metric in industry.metrics" :key="metric[1]">
+                  <strong>{{ metric[0] }}</strong
+                  ><span>{{ metric[1] }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </article>
+      </section>
+
+      <section class="more-industries-section">
+        <div class="page-width more-industries-grid">
+          <header>
+            <p class="section-kicker">更多行业</p>
+            <h2>没在上面找到你的行业？</h2>
+            <p>
+              无论企业处于什么行业和发展阶段，我们都会基于品牌现状、用户决策路径与增长目标重新制定策略。
+            </p>
+            <button
+              class="primary-button small"
+              type="button"
+              @click="requestCustomPlan('更多行业板块')"
+            >
+              咨询定制方案 <AppIcon name="arrow-right" />
+            </button>
+          </header>
+          <div class="more-industry-list">
+            <button
+              v-for="(industry, index) in moreIndustries"
+              :key="industry"
+              type="button"
+              @click="requestIndustryPlan(industry, '更多行业入口')"
+            >
+              <span>0{{ index + 1 }}</span
+              ><strong>{{ industry }}</strong
+              ><AppIcon name="arrow-right" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section class="solutions-cta">
+        <div class="solutions-cta-art" aria-hidden="true"></div>
+        <div class="page-width solutions-cta-content">
+          <p>你的行业，有自己的增长答案</p>
+          <h2>先说说业务现状，<br />我们帮你找到最值得投入的路径</h2>
+          <span>免费进行一次行业 GEO 可见性与获客链路沟通。</span>
+          <button
+            class="primary-button"
+            type="button"
+            @click="requestCustomPlan('行业解决方案页底部 CTA')"
+          >
+            获取专属行业方案 <AppIcon name="arrow-right" />
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
+</template>
+
+<style scoped>
+.solutions-page {
+  --solutions-blue: #237df0;
+  --solutions-ink: #344359;
+  overflow: hidden;
+  color: var(--solutions-ink);
+  background: #fff;
+}
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 10px;
+  left: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  color: #fff;
+  background: #1f70df;
+  transform: translateY(-150%);
+  transition: transform 0.2s;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+.page-eyebrow,
+.section-kicker {
+  margin: 0;
+  color: var(--solutions-blue);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.solutions-hero {
+  position: relative;
+  min-height: 670px;
+  display: grid;
+  align-items: center;
+  isolation: isolate;
+  background: #f2f7ff;
+}
+.solutions-hero-mesh {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    radial-gradient(circle at 80% 30%, rgba(76, 159, 255, 0.24), transparent 26%),
+    radial-gradient(circle at 18% 92%, rgba(97, 203, 235, 0.11), transparent 28%),
+    linear-gradient(108deg, #f8fbff 0%, #eef5ff 53%, #e6f1ff 100%);
+}
+.solutions-hero-mesh::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  opacity: 0.2;
+  background-image:
+    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
+  background-size: 58px 58px;
+  mask-image: linear-gradient(90deg, transparent 20%, #000);
+}
+.solutions-hero-grid {
+  min-height: 670px;
+  display: grid;
+  grid-template-columns: 0.96fr 1.04fr;
+  align-items: center;
+  gap: 45px;
+  padding-top: 52px;
+  padding-bottom: 58px;
+}
+.solutions-hero-copy h1 {
+  max-width: 720px;
+  margin: 15px 0 0;
+  color: #37465b;
+  font-size: clamp(42px, 3.9vw, 64px);
+  letter-spacing: -0.055em;
+  line-height: 1.2;
+}
+.solutions-hero-copy h1 span {
+  color: #1978ef;
+  white-space: nowrap;
+}
+.solutions-hero-copy > p:nth-of-type(2) {
+  max-width: 630px;
+  margin: 24px 0 0;
+  color: #68788e;
+  font-size: 16px;
+  line-height: 1.85;
+}
+.hero-industry-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 27px;
+}
+.hero-industry-links button {
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid rgba(68, 134, 217, 0.2);
+  border-radius: 5px;
+  color: #55718f;
+  background: rgba(255, 255, 255, 0.58);
+  font-size: 12px;
+  transition: 0.2s;
+}
+.hero-industry-links button:hover {
+  border-color: #6ba9f2;
+  color: #1e78e7;
+  background: #fff;
+  transform: translateY(-2px);
+}
+.solutions-hero-copy > .primary-button {
+  margin-top: 30px;
+}
+.solutions-hero-visual {
+  position: relative;
+  width: min(600px, 100%);
+  aspect-ratio: 1.08;
+  justify-self: end;
+}
+.solutions-hero-visual::before {
+  position: absolute;
+  inset: 8% 2% 1%;
+  content: '';
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.96) 0 22%,
+      rgba(132, 194, 255, 0.22) 23% 46%,
+      transparent 47%
+    ),
+    url('/images/lanhu/slices/hero-geo-visual@2x.png') 70% 48% / 168% auto no-repeat;
+  filter: drop-shadow(0 32px 48px rgba(51, 119, 204, 0.18));
+  mask-image: radial-gradient(ellipse, #000 50%, transparent 75%);
+}
+.solutions-core {
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  width: 162px;
+  height: 162px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #287ff0, #42b7e9);
+  box-shadow:
+    0 24px 48px rgba(34, 117, 223, 0.3),
+    inset 0 1px 5px rgba(255, 255, 255, 0.65);
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+.solutions-core small {
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  opacity: 0.78;
+}
+.solutions-core strong {
+  margin-top: 8px;
+  font-size: 19px;
+}
+.solutions-core span {
+  margin-top: 5px;
+  font-size: 10px;
+  opacity: 0.76;
+}
+.solutions-orbit {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  border: 1px solid rgba(51, 133, 232, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.solutions-orbit-a {
+  width: 390px;
+  height: 390px;
+}
+.solutions-orbit-b {
+  width: 520px;
+  height: 520px;
+  border-style: dashed;
+  opacity: 0.7;
+}
+.solutions-orbit i {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: #2782f2;
+  box-shadow: 0 6px 16px rgba(35, 124, 232, 0.36);
+}
+.solutions-orbit i:nth-child(1) {
+  top: -6px;
+  left: 50%;
+}
+.solutions-orbit i:nth-child(2) {
+  top: 23%;
+  right: 2%;
+  background: #52c2e7;
+}
+.solutions-orbit i:nth-child(3) {
+  right: 14%;
+  bottom: 9%;
+  background: #736ff1;
+}
+.solutions-orbit i:nth-child(4) {
+  bottom: 9%;
+  left: 15%;
+  background: #4a9ef2;
+}
+.solutions-orbit i:nth-child(5) {
+  top: 24%;
+  left: 1%;
+  background: #70c9ec;
+}
+.industry-node {
+  position: absolute;
+  z-index: 5;
+  width: 74px;
+  height: 74px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 20px 7px 20px 7px;
+  color: #3f6691;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow:
+    0 14px 32px rgba(55, 112, 184, 0.14),
+    inset 0 1px 0 #fff;
+  backdrop-filter: blur(10px);
+  transition: 0.2s;
+}
+.industry-node:hover {
+  color: #1779ec;
+  transform: translateY(-4px);
+  box-shadow: 0 19px 36px rgba(55, 112, 184, 0.22);
+}
+.industry-node small {
+  font-size: 9px;
+  opacity: 0.55;
+}
+.industry-node strong {
+  margin-top: 4px;
+  font-size: 14px;
+}
+.node-1 {
+  top: 7%;
+  left: 25%;
+}
+.node-2 {
+  top: 20%;
+  right: 4%;
+}
+.node-3 {
+  right: 4%;
+  bottom: 20%;
+}
+.node-4 {
+  bottom: 7%;
+  left: 27%;
+}
+.node-5 {
+  top: 42%;
+  left: 0;
+}
+.hero-signal {
+  position: absolute;
+  right: 7%;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #74869c;
+  font-size: 11px;
+}
+.hero-signal span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #28a3ed;
+  box-shadow: 0 0 0 5px rgba(40, 163, 237, 0.12);
+}
+.difference-section {
+  padding: 112px 0 128px;
+}
+.difference-layout {
+  display: grid;
+  grid-template-columns: 0.92fr 1.08fr;
+  gap: 90px;
+  align-items: center;
+}
+.difference-heading h2,
+.more-industries-grid h2 {
+  margin: 15px 0 0;
+  color: #344359;
+  font-size: clamp(32px, 3vw, 48px);
+  letter-spacing: -0.045em;
+  line-height: 1.28;
+}
+.difference-heading > p:last-child,
+.more-industries-grid header > p:nth-of-type(2) {
+  max-width: 600px;
+  margin: 20px 0 0;
+  color: #748398;
+  font-size: 15px;
+  line-height: 1.8;
+}
+.decision-factor-list {
+  display: grid;
+}
+.decision-factor-list article {
+  min-height: 128px;
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid #dfe8f2;
+}
+.decision-factor-list article:first-child {
+  border-top: 1px solid #dfe8f2;
+}
+.decision-factor-list > article > span {
+  color: #9eb3ca;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.decision-factor-list h3 {
+  margin: 0;
+  color: #34475f;
+  font-size: 22px;
+}
+.decision-factor-list p {
+  max-width: 560px;
+  margin: 8px 0 0;
+  color: #77879b;
+  font-size: 13px;
+  line-height: 1.7;
+}
+.industry-sticky-nav {
+  position: sticky;
+  z-index: 18;
+  top: 64px;
+  border-top: 1px solid rgba(76, 139, 215, 0.08);
+  border-bottom: 1px solid rgba(76, 139, 215, 0.12);
+  background: rgba(248, 252, 255, 0.94);
+  backdrop-filter: blur(16px);
+}
+.industry-sticky-nav .page-width {
+  height: 68px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+}
+.industry-sticky-nav button {
+  position: relative;
+  color: #62758c;
+  background: transparent;
+  font-size: 13px;
+  transition: 0.2s;
+}
+.industry-sticky-nav button span {
+  margin-right: 9px;
+  color: #9cafc4;
+  font-size: 10px;
+}
+.industry-sticky-nav button::after {
+  position: absolute;
+  right: 21%;
+  bottom: 0;
+  left: 21%;
+  height: 2px;
+  content: '';
+  background: #2780ef;
+  transform: scaleX(0);
+  transition: transform 0.22s;
+}
+.industry-sticky-nav button:hover,
+.industry-sticky-nav button.active {
+  color: #207aeb;
+  background: rgba(255, 255, 255, 0.52);
+}
+.industry-sticky-nav button.active::after {
+  transform: scaleX(1);
+}
+.industry-solution {
+  scroll-margin-top: 132px;
+  padding: 118px 0 132px;
+}
+.industry-solution.alternate {
+  background: #eef7ff;
+}
+.industry-solution-grid {
+  display: grid;
+  grid-template-columns: 0.75fr 0.95fr 1.1fr;
+  align-items: center;
+  gap: 56px;
+}
+.industry-number {
+  margin-bottom: 38px;
+  color: rgba(73, 132, 204, 0.15);
+  font-size: 92px;
+  font-weight: 700;
+  letter-spacing: -0.08em;
+  line-height: 0.8;
+}
+.industry-intro h2 {
+  margin: 18px 0 0;
+  color: #33445a;
+  font-size: clamp(30px, 2.45vw, 40px);
+  letter-spacing: -0.04em;
+  line-height: 1.34;
+}
+.industry-pain {
+  margin: 21px 0 0;
+  color: #748398;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.industry-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 24px;
+}
+.industry-tags span {
+  padding: 7px 10px;
+  border-radius: 5px;
+  color: #557699;
+  background: #eef6ff;
+  font-size: 10px;
+}
+.alternate .industry-tags span {
+  background: rgba(255, 255, 255, 0.7);
+}
+.industry-strategy {
+  padding: 35px 0;
+  border-top: 1px solid #d8e5f2;
+  border-bottom: 1px solid #d8e5f2;
+}
+.strategy-label {
+  margin: 0;
+  color: #2c7fea;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.industry-strategy h3 {
+  margin: 13px 0 0;
+  color: #354a63;
+  font-size: 25px;
+  line-height: 1.4;
+}
+.strategy-copy {
+  margin: 15px 0 0;
+  color: #728297;
+  font-size: 13px;
+  line-height: 1.75;
+}
+.actions-title {
+  display: block;
+  margin-top: 24px;
+  color: #42556d;
+  font-size: 12px;
+}
+.industry-strategy ul {
+  display: grid;
+  gap: 13px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.industry-strategy li {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 10px;
+  color: #6d7e92;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.industry-strategy li span {
+  color: #4690eb;
+  font-size: 10px;
+  font-weight: 700;
+}
+.compliance-note {
+  margin: 20px 0 0;
+  padding: 12px 14px;
+  border-left: 2px solid #63a6ef;
+  color: #6e8198;
+  background: rgba(255, 255, 255, 0.65);
+  font-size: 11px;
+  line-height: 1.65;
+}
+.industry-plan-button {
+  margin-top: 27px;
+  padding: 0 0 5px;
+  border-bottom: 1px solid #8db9e9;
+  color: #247be8;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 600;
+}
+.industry-plan-button b {
+  margin-left: 8px;
+  transition: margin 0.2s;
+}
+.industry-plan-button:hover b {
+  margin-left: 13px;
+}
+.industry-visual {
+  position: relative;
+  min-height: 510px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  border-radius: 20px 7px 20px 7px;
+  background:
+    radial-gradient(circle at 70% 28%, rgba(81, 161, 255, 0.28), transparent 24%),
+    linear-gradient(145deg, #f2f8ff, #dcecff);
+  box-shadow:
+    0 28px 60px rgba(58, 122, 201, 0.13),
+    inset 0 1px 0 #fff;
+}
+.industry-visual-2 {
+  background:
+    radial-gradient(circle at 25% 70%, rgba(104, 187, 242, 0.25), transparent 24%),
+    linear-gradient(145deg, #f3f9ff, #e3edff);
+}
+.industry-visual-3 {
+  background:
+    radial-gradient(circle at 72% 70%, rgba(85, 190, 226, 0.26), transparent 25%),
+    linear-gradient(145deg, #edf9ff, #dfeeff);
+}
+.industry-visual-4 {
+  background:
+    radial-gradient(circle at 30% 28%, rgba(98, 157, 237, 0.24), transparent 24%),
+    linear-gradient(145deg, #f5f9ff, #e0ebff);
+}
+.industry-visual-5 {
+  background:
+    radial-gradient(circle at 72% 30%, rgba(101, 143, 239, 0.25), transparent 25%),
+    linear-gradient(145deg, #f2f8ff, #deeaff);
+}
+.industry-visual-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 24px 27px;
+  color: #55779d;
+  font-size: 12px;
+}
+.industry-visual-header small {
+  color: #95aac2;
+  font-size: 9px;
+  letter-spacing: 0.12em;
+}
+.path-map {
+  position: absolute;
+  top: 52%;
+  left: 50%;
+  width: 360px;
+  height: 320px;
+  transform: translate(-50%, -50%);
+}
+.path-axis {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 235px;
+  height: 235px;
+  border: 1px dashed rgba(57, 137, 231, 0.34);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.path-axis::before,
+.path-axis::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  background: linear-gradient(90deg, transparent, rgba(55, 137, 233, 0.55), transparent);
+  transform: translate(-50%, -50%);
+}
+.path-axis::before {
+  width: 310px;
+  height: 1px;
+}
+.path-axis::after {
+  width: 1px;
+  height: 280px;
+}
+.path-center {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  width: 112px;
+  height: 112px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  border: 9px solid rgba(255, 255, 255, 0.58);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #3185ee, #51bce7);
+  box-shadow: 0 20px 38px rgba(36, 123, 225, 0.28);
+  transform: translate(-50%, -50%);
+}
+.path-center small {
+  font-size: 9px;
+  opacity: 0.75;
+}
+.path-center strong {
+  margin-top: 5px;
+  font-size: 18px;
+}
+.path-node {
+  position: absolute;
+  z-index: 3;
+  min-width: 96px;
+  padding: 11px 13px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  color: #4e7198;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 12px 25px rgba(54, 113, 185, 0.11);
+  text-align: center;
+  backdrop-filter: blur(8px);
+}
+.path-node span {
+  display: block;
+  color: #91a9c3;
+  font-size: 8px;
+}
+.path-node strong {
+  display: block;
+  margin-top: 3px;
+  font-size: 10px;
+}
+.path-node-1 {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.path-node-2 {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.path-node-3 {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.path-node-4 {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.industry-metrics {
+  position: absolute;
+  right: 25px;
+  bottom: 22px;
+  display: flex;
+  gap: 24px;
+}
+.industry-metrics div {
+  display: grid;
+  justify-items: end;
+}
+.industry-metrics strong {
+  color: #2780ed;
+  font-size: 22px;
+  font-variant-numeric: tabular-nums;
+}
+.industry-metrics span {
+  margin-top: 3px;
+  color: #7b8da2;
+  font-size: 9px;
+}
+.more-industries-section {
+  padding: 116px 0 130px;
+}
+.more-industries-grid {
+  display: grid;
+  grid-template-columns: 0.82fr 1.18fr;
+  gap: 90px;
+  align-items: center;
+}
+.more-industries-grid .primary-button {
+  margin-top: 28px;
+}
+.more-industry-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.more-industry-list button {
+  min-height: 88px;
+  display: grid;
+  grid-template-columns: 35px 1fr 25px;
+  align-items: center;
+  gap: 12px;
+  padding: 0 22px;
+  border-radius: 8px;
+  color: #3e536c;
+  background: #f2f7fd;
+  text-align: left;
+  transition: 0.22s;
+}
+.more-industry-list button:hover {
+  color: #1f78e7;
+  background: #fff;
+  box-shadow: 0 14px 30px rgba(59, 119, 191, 0.12);
+  transform: translateY(-3px);
+}
+.more-industry-list span {
+  color: #9fb2c8;
+  font-size: 10px;
+}
+.more-industry-list strong {
+  font-size: 15px;
+}
+.more-industry-list b {
+  color: #4a91e8;
+  font-size: 18px;
+  font-weight: 400;
+}
+.solutions-cta {
+  position: relative;
+  min-height: 440px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+.solutions-cta-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background:
+    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.48)),
+    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
+}
+.solutions-cta-content {
+  padding: 76px 0;
+  text-align: center;
+}
+.solutions-cta-content > p {
+  margin: 0;
+  color: #237df0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+.solutions-cta-content h2 {
+  margin: 17px 0 0;
+  color: #2f75cc;
+  font-size: clamp(32px, 3.2vw, 50px);
+  letter-spacing: -0.045em;
+  line-height: 1.3;
+}
+.solutions-cta-content > span {
+  display: block;
+  margin-top: 14px;
+  color: #657891;
+  font-size: 15px;
+}
+.solutions-cta-content .primary-button {
+  margin-top: 28px;
+}
+@media (max-width: 1120px) {
+  .solutions-hero-grid {
+    gap: 20px;
+  }
+  .solutions-orbit-b {
+    width: 450px;
+    height: 450px;
+  }
+  .solutions-orbit-a {
+    width: 340px;
+    height: 340px;
+  }
+  .industry-solution-grid {
+    gap: 32px;
+  }
+  .industry-number {
+    font-size: 75px;
+  }
+  .path-map {
+    width: 320px;
+  }
+}
+@media (max-width: 900px) {
+  .solutions-hero,
+  .solutions-hero-grid {
+    min-height: auto;
+  }
+  .solutions-hero-grid,
+  .difference-layout,
+  .industry-solution-grid,
+  .more-industries-grid {
+    grid-template-columns: 1fr;
+  }
+  .solutions-hero-grid {
+    padding-top: 74px;
+    padding-bottom: 62px;
+  }
+  .solutions-hero-visual {
+    width: min(590px, 100%);
+    justify-self: center;
+    margin-top: 20px;
+  }
+  .difference-layout {
+    gap: 48px;
+  }
+  .industry-sticky-nav {
+    top: 58px;
+    overflow-x: auto;
+  }
+  .industry-sticky-nav .page-width {
+    width: max-content;
+    min-width: 760px;
+  }
+  .industry-sticky-nav button {
+    width: 152px;
+  }
+  .industry-solution {
+    scroll-margin-top: 126px;
+    padding-top: 84px;
+    padding-bottom: 94px;
+  }
+  .industry-solution-grid {
+    gap: 44px;
+  }
+  .industry-number {
+    margin-bottom: 24px;
+  }
+  .industry-strategy {
+    max-width: 760px;
+  }
+  .industry-visual {
+    width: min(620px, 100%);
+    min-height: 520px;
+  }
+  .more-industries-grid {
+    gap: 45px;
+  }
+}
+@media (max-width: 600px) {
+  .solutions-hero-grid {
+    padding-top: 54px;
+  }
+  .solutions-hero-copy h1 {
+    font-size: clamp(36px, 10vw, 48px);
+  }
+  .solutions-hero-copy > p:nth-of-type(2) {
+    font-size: 15px;
+  }
+  .solutions-hero-copy > .primary-button {
+    margin-top: 25px;
+  }
+  .solutions-hero-visual {
+    aspect-ratio: 0.98;
+  }
+  .solutions-orbit-b {
+    width: 340px;
+    height: 340px;
+  }
+  .solutions-orbit-a {
+    width: 255px;
+    height: 255px;
+  }
+  .solutions-core {
+    width: 125px;
+    height: 125px;
+  }
+  .solutions-core strong {
+    font-size: 15px;
+  }
+  .industry-node {
+    width: 60px;
+    height: 60px;
+    border-radius: 16px 6px 16px 6px;
+  }
+  .industry-node strong {
+    font-size: 12px;
+  }
+  .difference-section,
+  .more-industries-section {
+    padding-top: 76px;
+    padding-bottom: 86px;
+  }
+  .decision-factor-list article {
+    grid-template-columns: 42px 1fr;
+    gap: 12px;
+    padding: 20px 0;
+  }
+  .industry-solution {
+    padding-top: 72px;
+    padding-bottom: 82px;
+  }
+  .industry-number {
+    font-size: 62px;
+  }
+  .industry-intro h2 {
+    font-size: 29px;
+  }
+  .industry-strategy {
+    padding: 28px 0;
+  }
+  .industry-visual {
+    min-height: 420px;
+  }
+  .path-map {
+    width: 305px;
+    height: 270px;
+  }
+  .path-axis {
+    width: 190px;
+    height: 190px;
+  }
+  .path-axis::before {
+    width: 265px;
+  }
+  .path-axis::after {
+    height: 235px;
+  }
+  .path-center {
+    width: 92px;
+    height: 92px;
+    border-width: 7px;
+  }
+  .path-node {
+    min-width: 80px;
+    padding: 9px;
+  }
+  .industry-metrics {
+    right: 18px;
+    bottom: 17px;
+    gap: 14px;
+  }
+  .industry-metrics strong {
+    font-size: 18px;
+  }
+  .more-industry-list {
+    grid-template-columns: 1fr;
+  }
+  .more-industry-list button {
+    min-height: 72px;
+  }
+  .solutions-cta {
+    min-height: 400px;
+  }
+  .solutions-cta-content h2 br {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .solutions-page *,
+  .solutions-page *::before,
+  .solutions-page *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>
diff --git a/public/images/lanhu/slices/切图 35@2x.png b/public/images/lanhu/slices/切图 35@2x.png
new file mode 100644
index 0000000..8db1f05
Binary files /dev/null and b/public/images/lanhu/slices/切图 35@2x.png differ