diff --git a/.gitignore b/.gitignore
index dddf370..423807c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,9 @@ node_modules/
 .output/
 dist/
 
+# Local Codex agent skills and instructions
+.agents/
+
 # Local environment files
 .env
 .env.*
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..2499163
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index b32f7f2..01b7fff 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4,10 +4,1085 @@
 
 :root {
   font-family: 'Source Han Sans', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
-  color: rgb(64 64 64);
-  background: #f8fbff;
+  color: #404040;
+  background: #fff;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  min-width: 320px;
+  margin: 0;
+  background: #fff;
+}
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+button {
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}
+button:focus-visible,
+a:focus-visible {
+  outline: 3px solid rgba(20, 120, 251, 0.38);
+  outline-offset: 3px;
 }
 
-html { scroll-behavior: smooth; }
-body { min-width: 320px; margin: 0; background: #f8fbff; }
-button, a { -webkit-tap-highlight-color: transparent; }
+.site-shell {
+  overflow: hidden;
+  color: #404040;
+}
+.page-width {
+  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;
+}
+.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);
+  min-height: 430px;
+  background: #f4f8ff;
+  isolation: isolate;
+}
+.hero-art {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background: url('/images/lanhu/slices/home-container25-image2@2x.png') center/cover no-repeat;
+}
+.hero-content {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.hero-copy {
+  margin-left: 2px;
+  margin-top: -2px;
+}
+.hero-copy h1 {
+  margin: 0;
+  font-size: clamp(34px, 2.7vw, 51px);
+  line-height: 1.34;
+  letter-spacing: 0.2px;
+  font-weight: 700;
+  color: #3f4145;
+}
+.hero-points {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 17px;
+  margin: 25px 0 28px;
+  color: #525966;
+  font-size: 15px;
+}
+.hero-points span::first-letter {
+  color: #167cff;
+  font-weight: 700;
+}
+.button-row {
+  display: flex;
+  gap: 15px;
+}
+.primary-button,
+.outline-button {
+  display: inline-flex;
+  min-width: 135px;
+  height: 49px;
+  padding: 0 26px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  font-size: 14px;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.primary-button {
+  color: #fff;
+  background: linear-gradient(100deg, #453cff, #00adf6);
+  box-shadow: 0 8px 15px rgba(25, 106, 255, 0.16);
+}
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 11px 20px rgba(25, 106, 255, 0.24);
+}
+.primary-button:active,
+.outline-button:active,
+.login-button:active {
+  transform: translateY(1px) scale(0.98);
+}
+.primary-button b {
+  font-size: 21px;
+  margin-left: 9px;
+  font-weight: 400;
+}
+.outline-button {
+  color: #656565;
+  background: rgba(255, 255, 255, 0.56);
+  border: 1px solid #7b818c;
+}
+.outline-button:hover {
+  color: #1578fa;
+  border-color: rgba(21, 120, 250, 0.48);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 8px 18px rgba(44, 120, 236, 0.1);
+  transform: translateY(-2px);
+}
+.primary-button.small {
+  height: 46px;
+  min-width: 162px;
+  padding: 0 21px;
+  font-size: 13px;
+}
+
+.logo-strip {
+  height: 65px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow:
+    inset 0 1px 0 rgba(224, 236, 255, 0.45),
+    0 8px 20px rgba(184, 213, 255, 0.06);
+}
+.logo-track {
+  height: 100%;
+  min-width: 2100px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 44px;
+  padding: 0 26px;
+  transform: translateX(-2%);
+}
+.logo {
+  font-family: Arial, sans-serif;
+  font-size: 20px;
+  font-weight: 800;
+  color: #173993;
+  white-space: nowrap;
+}
+.logo-1 {
+  color: #0b5a9a;
+}
+.logo-2 {
+  font-size: 13px;
+  color: #4a7899;
+}
+.logo-3 {
+  font-size: 25px;
+}
+.logo-4 {
+  font-size: 22px;
+  color: #1f2785;
+}
+.logo-5 {
+  font-size: 12px;
+  color: #0b7baa;
+}
+
+.section-title {
+  text-align: center;
+}
+.section-title h2 {
+  margin: 0;
+  color: #414141;
+  font-weight: 700;
+  font-size: 35px;
+  letter-spacing: 0.1px;
+  line-height: 1.35;
+}
+.section-title .blue,
+.blue {
+  color: #1478fb;
+}
+.section-title p {
+  margin: 12px 0 0;
+  color: #a5a5a5;
+  font-size: 15px;
+  line-height: 1.55;
+  letter-spacing: 0.15px;
+}
+.intro-section {
+  padding-top: 76px;
+  padding-bottom: 74px;
+}
+.stats-panel {
+  min-height: 371px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  padding: 45px 34px 28px;
+  margin-top: 31px;
+  border-radius: 16px;
+  background: linear-gradient(
+    120deg,
+    rgba(255, 193, 180, 0.88),
+    rgba(240, 211, 180, 0.67) 25%,
+    rgba(206, 235, 255, 0.88) 58%,
+    rgba(203, 194, 255, 0.78)
+  );
+}
+.stat-item {
+  min-height: 292px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 31px 10px;
+  background: rgba(255, 255, 255, 0.83);
+  border-radius: 20px;
+  box-shadow: 0 9px 25px rgba(75, 136, 255, 0.05);
+  transition:
+    transform 0.32s ease,
+    box-shadow 0.32s ease,
+    background 0.32s ease;
+}
+.stat-item img {
+  width: 86px;
+  height: 86px;
+  object-fit: contain;
+  margin-bottom: 19px;
+}
+.stat-item strong {
+  color: #0875f9;
+  font-size: 34px;
+  line-height: 1;
+}
+.stat-item span {
+  color: #555;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.model-section {
+  min-height: 791px;
+  padding: 76px 0 80px;
+  background: linear-gradient(135deg, #f8fbff 5%, #fff 44%, #eff4ff 100%);
+}
+.model-layout {
+  display: grid;
+  grid-template-columns: 0.95fr 0.95fr 1.2fr;
+  align-items: center;
+  gap: 25px;
+  margin-top: 52px;
+}
+.ring {
+  width: 100%;
+  max-width: 370px;
+  justify-self: center;
+}
+.core-value {
+  padding: 12px 0 0 10px;
+}
+.core-value h3 {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  margin: 0 0 17px;
+  color: #1578fa;
+  font-size: 21px;
+}
+.core-value h3 img {
+  width: 50px;
+  height: 50px;
+  object-fit: contain;
+}
+.core-point {
+  padding: 15px 0 17px;
+  border-bottom: 1px dashed #d3d3d3;
+}
+.core-point h4 {
+  margin: 0;
+  color: #454545;
+  font-size: 18px;
+}
+.core-point h4 i {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 10px;
+  border-radius: 50%;
+  vertical-align: -1px;
+  background: linear-gradient(135deg, #a0e1ff, #3c67ff);
+}
+.core-point p {
+  margin: 10px 0 0;
+  color: #757575;
+  font-size: 16px;
+  line-height: 1.7;
+}
+.core-value .primary-button {
+  margin-top: 34px;
+}
+
+.advantages-section {
+  padding: 83px 0 92px;
+  background: #edf8ff;
+}
+.lead-advantage {
+  display: grid;
+  grid-template-columns: 47% 1fr;
+  align-items: center;
+  gap: 24px;
+  height: 182px;
+  overflow: hidden;
+  margin-top: 56px;
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.8);
+  transition:
+    transform 0.32s ease,
+    box-shadow 0.32s ease;
+}
+.lead-advantage > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.2, 1);
+}
+.lead-advantage > div {
+  padding: 16px 30px;
+}
+.lead-advantage h3,
+.advantage-grid h3 {
+  margin: 0 0 13px;
+  color: #1e7dff;
+  font-size: 22px;
+}
+.lead-advantage p,
+.advantage-grid p {
+  margin: 6px 0;
+  color: #777;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.lead-advantage b,
+.advantage-grid b {
+  color: #555;
+}
+.advantage-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  margin-top: 24px;
+}
+.advantage-grid article {
+  min-height: 163px;
+  padding: 22px 20px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.8);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+    background 0.3s ease;
+}
+.advantage-grid img {
+  position: absolute;
+  right: -18px;
+  bottom: -22px;
+  width: 120px;
+  opacity: 0.45;
+  transition:
+    transform 0.4s ease,
+    opacity 0.4s ease;
+}
+.advantage-grid > article > div {
+  position: relative;
+  z-index: 1;
+}
+.advantage-grid h3 {
+  font-size: 19px;
+}
+
+.cases-section {
+  position: relative;
+  min-height: 752px;
+  padding: 73px 0;
+  background: #eef9ff;
+  overflow: hidden;
+}
+.case-background {
+  position: absolute;
+  inset: 0;
+  background: url('/images/lanhu/slices/home-group75-image7@2x.png') right center/cover no-repeat;
+  opacity: 0.18;
+}
+.case-content {
+  position: relative;
+}
+.case-panel {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 38px;
+  padding: 28px 28px 25px;
+  margin-top: 51px;
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid #d7e9ff;
+  border-radius: 14px;
+  box-shadow: 0 10px 24px rgba(112, 163, 255, 0.09);
+}
+.case-panel article {
+  min-width: 0;
+  transition: transform 0.3s ease;
+}
+.case-panel img {
+  width: 100%;
+  height: 186px;
+  border-radius: 9px;
+  object-fit: cover;
+  transition:
+    transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
+    box-shadow 0.3s ease;
+}
+.case-panel p {
+  margin: 17px 0 0;
+  color: #666;
+  font-size: 14px;
+  line-height: 1.55;
+}
+.center-action {
+  text-align: center;
+  margin-top: 46px;
+}
+
+.industries-section {
+  padding: 80px 0 111px;
+}
+.industry-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  margin-top: 76px;
+}
+.industry-grid article {
+  position: relative;
+  min-height: 311px;
+  overflow: hidden;
+  padding: 26px;
+  border-radius: 12px;
+  background: linear-gradient(130deg, #fff 26%, #f2f5ff 62%, #bddbff);
+  transition:
+    transform 0.32s ease,
+    box-shadow 0.32s ease;
+}
+.industry-grid h3 {
+  margin: 0;
+  color: #414141;
+  font-size: 26px;
+}
+.industry-grid img {
+  width: 45%;
+  height: 150px;
+  object-fit: contain;
+  float: left;
+  margin: 25px 15px 0 -8px;
+}
+.quote {
+  margin-top: 33px;
+  color: #787878;
+  font-weight: 700;
+  font-size: 43px;
+  line-height: 0.55;
+}
+.industry-grid p {
+  margin: 19px 0 14px;
+  color: #777;
+  font-size: 15px;
+  line-height: 1.5;
+}
+.tags {
+  display: flex;
+  gap: 9px;
+}
+.tags span {
+  padding: 6px 13px;
+  color: #408cff;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.55);
+  font-size: 12px;
+}
+
+.delivery-section {
+  padding: 85px 0 109px;
+  background: #edf8ff;
+}
+.delivery-banner {
+  height: 187px;
+  margin-top: 44px;
+  border-radius: 12px;
+  background: url('/images/lanhu/slices/home-group95-image21@2x.png') center/cover no-repeat;
+}
+.delivery-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 26px 38px;
+  margin-top: 28px;
+}
+.delivery-grid article {
+  min-height: 119px;
+  display: flex;
+  gap: 16px;
+  padding: 20px 27px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 6px 17px rgba(92, 153, 255, 0.1);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+.delivery-grid img {
+  width: 55px;
+  height: 55px;
+  object-fit: contain;
+}
+.delivery-grid h3 {
+  margin: 0;
+  color: #2d83fb;
+  font-size: 20px;
+}
+.delivery-grid p {
+  margin: 8px 0 0;
+  color: #777;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.testimonial-section {
+  padding: 88px 0 78px;
+  background: #fff;
+}
+.testimonial-track {
+  display: flex;
+  gap: 24px;
+  width: max-content;
+  margin-top: 62px;
+  transform: translateX(-520px);
+}
+.testimonial-track article {
+  width: 460px;
+  min-height: 216px;
+  padding: 25px 27px;
+  border-radius: 10px;
+  background: #f9fbff;
+  color: #767676;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+    background 0.3s ease;
+}
+.testimonial-track header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.avatar {
+  display: block;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #516b71, #f3bc94);
+}
+.testimonial-track time {
+  margin-left: auto;
+  color: #aaa;
+}
+.testimonial-track p {
+  margin: 18px 0 0;
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+.cta-section {
+  position: relative;
+  min-height: 390px;
+  overflow: hidden;
+  color: #1d7cf8;
+}
+.cta-art {
+  position: absolute;
+  inset: 0;
+  background: url('/images/lanhu/slices/home-group105-image31@2x.png') center/cover no-repeat;
+}
+.cta-content {
+  position: relative;
+  max-width: 790px;
+  margin: auto;
+  padding-top: 86px;
+  text-align: center;
+}
+.cta-content h2 {
+  margin: 0;
+  font-size: 30px;
+  line-height: 1.45;
+}
+.cta-content p {
+  margin: 16px 0 23px;
+  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);
+    transform: translateY(-8px);
+  }
+  .lead-advantage:hover {
+    box-shadow: 0 17px 34px rgba(73, 139, 234, 0.14);
+    transform: translateY(-5px);
+  }
+  .lead-advantage:hover > img {
+    transform: scale(1.045);
+  }
+  .advantage-grid article:hover {
+    background: #fff;
+    box-shadow: 0 17px 32px rgba(73, 139, 234, 0.14);
+    transform: translateY(-6px);
+  }
+  .advantage-grid article:hover img {
+    opacity: 0.66;
+    transform: translate(-4px, -4px) scale(1.05);
+  }
+  .case-panel article:hover {
+    transform: translateY(-6px);
+  }
+  .case-panel article:hover img {
+    box-shadow: 0 14px 24px rgba(54, 127, 242, 0.2);
+    transform: scale(1.03);
+  }
+  .industry-grid article:hover {
+    box-shadow: 0 18px 32px rgba(56, 122, 225, 0.18);
+    transform: translateY(-7px);
+  }
+  .delivery-grid article:hover {
+    box-shadow: 0 15px 30px rgba(63, 135, 239, 0.16);
+    transform: translateY(-5px);
+  }
+  .testimonial-track article:hover {
+    background: #fff;
+    box-shadow: 0 16px 28px rgba(72, 135, 226, 0.13);
+    transform: translateY(-6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@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) {
+  .page-width {
+    width: min(100% - 32px, 560px);
+  }
+  .site-header {
+    height: 55px;
+  }
+  .brand {
+    width: 150px;
+  }
+  .desktop-nav {
+    display: none;
+  }
+  .hero-section {
+    height: 500px;
+    min-height: 0;
+  }
+  .hero-art {
+    background-position: 62% center;
+    opacity: 0.72;
+  }
+  .hero-copy {
+    margin: 0;
+  }
+  .hero-copy h1 {
+    font-size: 31px;
+  }
+  .hero-points {
+    margin: 18px 0 22px;
+    gap: 8px 14px;
+    font-size: 13px;
+    max-width: 290px;
+  }
+  .primary-button,
+  .outline-button {
+    min-width: 124px;
+    height: 44px;
+    padding: 0 13px;
+  }
+  .logo-strip {
+    height: 52px;
+  }
+  .logo-track {
+    gap: 28px;
+  }
+  .intro-section,
+  .industries-section {
+    padding-top: 55px;
+    padding-bottom: 58px;
+  }
+  .section-title h2 {
+    font-size: 25px;
+  }
+  .section-title p {
+    font-size: 12px;
+  }
+  .stats-panel {
+    grid-template-columns: repeat(2, 1fr);
+    min-height: 0;
+    padding: 20px;
+    gap: 12px;
+  }
+  .stat-item {
+    min-height: 190px;
+    padding: 20px 7px;
+    border-radius: 14px;
+  }
+  .stat-item img {
+    width: 58px;
+    height: 58px;
+    margin-bottom: 12px;
+  }
+  .stat-item strong {
+    font-size: 28px;
+  }
+  .stat-item span {
+    font-size: 13px;
+    margin-top: 9px;
+    text-align: center;
+  }
+  .model-section,
+  .advantages-section,
+  .cases-section,
+  .delivery-section,
+  .testimonial-section {
+    padding: 58px 0;
+  }
+  .model-layout {
+    grid-template-columns: 1fr 1fr;
+    gap: 7px;
+    margin-top: 36px;
+  }
+  .ring {
+    max-width: 220px;
+  }
+  .core-value {
+    grid-column: 1 / -1;
+    padding: 15px 0 0;
+  }
+  .lead-advantage {
+    grid-template-columns: 1fr;
+    height: auto;
+    margin-top: 38px;
+  }
+  .lead-advantage > img {
+    height: 150px;
+  }
+  .lead-advantage > div {
+    padding: 19px;
+  }
+  .advantage-grid,
+  .industry-grid,
+  .delivery-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  .advantage-grid article {
+    min-height: 145px;
+  }
+  .case-panel {
+    grid-template-columns: 1fr 1fr;
+    gap: 18px 14px;
+    padding: 15px;
+    margin-top: 35px;
+  }
+  .case-panel img {
+    height: 110px;
+  }
+  .case-panel p {
+    margin-top: 10px;
+    font-size: 12px;
+  }
+  .industry-grid {
+    margin-top: 45px;
+  }
+  .industry-grid article {
+    min-height: 255px;
+  }
+  .delivery-banner {
+    height: 105px;
+    margin-top: 30px;
+  }
+  .delivery-grid article {
+    min-height: 95px;
+    padding: 16px;
+  }
+  .testimonial-track {
+    transform: none;
+    overflow-x: auto;
+    width: 100%;
+    margin-top: 35px;
+  }
+  .testimonial-track article {
+    min-width: 280px;
+    width: 280px;
+  }
+  .cta-section {
+    min-height: 320px;
+  }
+  .cta-content {
+    padding: 65px 17px 0;
+  }
+  .cta-content h2 {
+    font-size: 21px;
+  }
+  .cta-content h2 br {
+    display: none;
+  }
+  .footer-main {
+    grid-template-columns: 1fr;
+    gap: 26px;
+  }
+  .footer-main > img {
+    width: 240px;
+  }
+  .footer-links {
+    gap: 18px;
+  }
+  .footer-links span {
+    margin-top: 8px;
+  }
+  .footer-bottom {
+    padding: 0 12px;
+    text-align: center;
+    font-size: 10px;
+  }
+}
diff --git a/components/SectionTitle.vue b/components/SectionTitle.vue
new file mode 100644
index 0000000..d3b37f1
--- /dev/null
+++ b/components/SectionTitle.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="section-title">
+    <h2><slot /></h2>
+    <p v-if="$slots.subtitle"><slot name="subtitle" /></p>
+  </div>
+</template>
diff --git a/components/ui/button/Button.vue b/components/ui/button/Button.vue
index 64198a8..2eb3d0a 100644
--- a/components/ui/button/Button.vue
+++ b/components/ui/button/Button.vue
@@ -9,7 +9,11 @@ defineProps({
   <button
     :type="type"
     class="inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-    :class="variant === 'outline' ? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' : 'bg-primary text-white shadow-sm hover:bg-blue-600'"
+    :class="
+      variant === 'outline'
+        ? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50'
+        : 'bg-primary text-white shadow-sm hover:bg-blue-600'
+    "
   >
     <slot />
   </button>
diff --git a/nuxt.config.js b/nuxt.config.js
index b429fc6..bf77bd1 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,6 +1,15 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss'],
   css: ['~/assets/css/main.css'],
+  vite: {
+    server: {
+      watch: {
+        // `.agents` contains local assistant skills.  On Windows, chokidar can
+        // fail while resolving it and cause Nuxt's dev server to restart.
+        ignored: ['**/.agents/**']
+      }
+    }
+  },
   app: {
     head: {
       title: '大马棒 · 云途全域 GEO',
diff --git a/package-lock.json b/package-lock.json
index 3b4de28..3d2b243 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,11 +7,13 @@
       "name": "damabang-geo-official-site",
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "gsap": "^3.15.0",
         "nuxt": "^3.17.0"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.21",
         "postcss": "^8.5.3",
+        "prettier": "^3.9.5",
         "tailwindcss": "^3.4.17"
       }
     },
@@ -6681,6 +6683,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -9580,6 +9588,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.9.5.tgz",
+      "integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "7.1.0",
       "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-7.1.0.tgz",
diff --git a/package.json b/package.json
index b896357..442986e 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,21 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host 0.0.0.0",
     "build": "nuxt build",
-    "preview": "nuxt preview"
+    "preview": "nuxt preview",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "gsap": "^3.15.0",
     "nuxt": "^3.17.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
+    "prettier": "^3.9.5",
     "tailwindcss": "^3.4.17"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 8c18e9f..3e331c6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,247 +1,429 @@
 <script setup>
-import Button from '~/components/ui/button/Button.vue'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
 const consultationOpen = ref(false)
 const notice = ref('')
+const pageRoot = ref(null)
+let animationContext
 
 const navItems = [
-  { label: '首页', target: 'home' },
-  { label: '营销增长服务', target: 'model' },
-  { label: '行业解决方案', target: 'industry' },
-  { label: '内容生产服务', target: 'advantages' },
-  { label: '核心优势', target: 'advantages' },
-  { label: '案例与媒体资源', target: 'cases' },
-  { label: '关于我们', target: 'footer' }
+  ['首页', 'home'],
+  ['营销增长服务', 'model'],
+  ['行业解决方案', 'industries'],
+  ['开放客户案例平台', 'cases'],
+  ['核心优势', 'advantages'],
+  ['全球营销增长洞察', 'delivery'],
+  ['关于我们', 'footer']
 ]
 
+const logos = [
+  'Bond',
+  'WaSun',
+  '西西能源',
+  'CIIC',
+  'SUNAC',
+  'B+ WORKS',
+  'Bond',
+  'WaSun',
+  '西西能源',
+  'CIIC',
+  'SUNAC',
+  'B+ WORKS'
+]
 const stats = [
-  { value: '300+', label: '服务客户群体' },
-  { value: '12+', label: '覆盖行业' },
-  { value: '126%', label: '客户 AI 搜索曝光提升' },
-  { value: '65%', label: '客户月均精准线索提升' }
+  ['300+', '累计服务客户', '/images/lanhu/slices/home-group100-image26@2x.png'],
+  ['12+', '覆盖行业', '/images/lanhu/slices/home-group101-image27@2x.png'],
+  ['126%', '客户AI搜索曝光平均提升', '/images/lanhu/slices/home-group102-image28@2x.png'],
+  ['65%', '客户转化链路效率平均提升', '/images/lanhu/slices/home-group103-image29@2x.png']
 ]
-
-const valuePoints = [
-  { title: '曝光', text: '打造 AI 搜索语境下的品牌信任声望，一次布局长期复用。' },
-  { title: '获客', text: '从曝光到获客全链路承接，避免流量断层，实现品效协同。' }
+const corePoints = [
+  ['曝光', '打造AI搜索语境下的品牌信任声量，一次布局 长期复用'],
+  ['获客', '流量，让每一分投入都有回报 让曝光直接落地为可跟进的精准线索，告别无效']
 ]
-
-const advantages = [
-  { title: '全域媒体资源优势', detail: '5000+ 权威官媒 + 10万+ 优质自媒体矩阵', image: '/images/lanhu/slices/home-group37-group70-image5@2x.png' },
-  { title: '真人内容生产优势', detail: '行业独家 5万真人分布式内容生产网络', image: '/images/lanhu/slices/home-group36-group71-image5@2x.png' },
-  { title: '全链路闭环优势', detail: '从品牌声量到转化增长，形成全链路业务闭环', image: '/images/lanhu/slices/home-group35-group72-image5@2x.png' },
-  { title: '全客群定制优势', detail: '覆盖全类型经营主体，一对一专属定制方案', image: '/images/lanhu/slices/home-group34-group74-image5@2x.png' }
+const advantageCards = [
+  ['全域媒体资源优势', '5000+权威官媒+10万+优质自媒体矩阵'],
+  ['全链路闭环优势', '行业唯一打通「纯曝光+内容资产沉淀+转化闭环」'],
+  ['全客群定制优势', '覆盖全类型经营主体，一对一专属定制专属方案']
 ]
-
-const cases = [
-  { category: '企业服务', result: 'AI 搜索全域曝光提升 320%，月均精准线索新增 80+' },
-  { category: '品牌营销', result: '搜索语境占位提升，建立多渠道权威信任背书' },
-  { category: '本地生活', result: '内容矩阵联动，带动门店咨询与转化增长' },
-  { category: '消费品牌', result: '真人内容规模化生产，提升品牌声量与转化' }
+const caseImages = [
+  '/images/lanhu/slices/home-group90-image15@2x.png',
+  '/images/lanhu/slices/home-group91-image16@2x.png',
+  '/images/lanhu/slices/home-group92-image17@2x.png',
+  '/images/lanhu/slices/home-group93-image18@2x.png'
+]
+const industryCards = [
+  [
+    '本地生活',
+    'AI搜索全域曝光提升320%月均精准线索新增80+，持续获得品牌声量与业务线索',
+    '/images/lanhu/slices/home-group34-group74-image5@2x.png'
+  ],
+  [
+    '快消',
+    'AI搜索全域曝光提升320%月均精准线索新增80+，让内容价值更快兑现',
+    '/images/lanhu/slices/home-group35-group72-image5@2x.png'
+  ],
+  [
+    '美妆',
+    'AI搜索全域曝光提升320%月均精准线索新增80+，建立多渠道信任背书',
+    '/images/lanhu/slices/home-group36-group71-image5@2x.png'
+  ]
 ]
-
-const industries = ['本地生活', '快消', '美妆']
-
 const deliverySteps = [
-  ['需求诊断', '一对一沟通，分析品牌现状与增长目标'],
-  ['方案定制', '定制专属 GEO 策略，明确关键节点与节奏'],
-  ['内容落地', '真人内容生产 + 媒体资源投放，全程跟进'],
-  ['数据优化', '定期复盘数据，动态调整策略，持续提升'],
-  ['资产沉淀', '沉淀持续增长的品牌资产，实现长效复用']
+  [
+    '需求诊断',
+    '一对一沟通，分析品牌现状与增长痛点',
+    '/images/lanhu/slices/home-group78-image10@2x.png'
+  ],
+  [
+    '方案定制',
+    '定制专属GEO策略，明确交付节点与预期效果',
+    '/images/lanhu/slices/home-group80-group77-image9@2x.png'
+  ],
+  [
+    '内容落地',
+    '真人内容生产+媒体矩阵投放，全流程同步进度',
+    '/images/lanhu/slices/home-group86-group76-image8@2x.png'
+  ],
+  [
+    '数据优化',
+    '定期数据复盘，动态调整策略，持续优化效果',
+    '/images/lanhu/slices/home-group34-group74-image5@2x.png'
+  ],
+  [
+    '资产沉淀',
+    '交付完整内容资产与增长报告，实现长效复用',
+    '/images/lanhu/slices/home-group35-group72-image5@2x.png'
+  ]
 ]
 
 function scrollToSection(id) {
   document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
-
 function openConsultation() {
   consultationOpen.value = true
   notice.value = ''
 }
-
 function submitConsultation() {
   consultationOpen.value = false
   notice.value = '已收到您的咨询，我们将尽快与您联系。'
 }
+
+onMounted(async () => {
+  await nextTick()
+
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !pageRoot.value) return
+
+  gsap.registerPlugin(ScrollTrigger)
+
+  animationContext = gsap.context(() => {
+    const reveal = (targets, trigger, options = {}) => {
+      gsap.from(targets, {
+        autoAlpha: 0,
+        y: 34,
+        duration: 0.72,
+        ease: 'power3.out',
+        stagger: 0.1,
+        clearProps: 'transform,opacity,visibility',
+        scrollTrigger: {
+          trigger,
+          start: 'top 82%',
+          once: true
+        },
+        ...options
+      })
+    }
+
+    const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
+    heroTimeline
+      .from('.site-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',
+        { autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.09, clearProps: 'all' },
+        '-=0.22'
+      )
+      .from(
+        '.button-row button',
+        { autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
+        '-=0.12'
+      )
+
+    gsap.to('.hero-art', {
+      scale: 1.025,
+      yPercent: 1,
+      duration: 9,
+      ease: 'sine.inOut',
+      repeat: -1,
+      yoyo: true
+    })
+
+    reveal('.intro-section .section-title', '.intro-section')
+    reveal('.stats-panel .stat-item', '.stats-panel', { y: 26, stagger: 0.12 })
+    reveal('.model-layout .ring', '.model-layout', { x: -24, y: 12, stagger: 0.16 })
+    reveal('.core-value', '.model-layout', { x: 28, y: 0, delay: 0.12 })
+    reveal('.advantages-section .section-title', '.advantages-section')
+    reveal('.lead-advantage', '.lead-advantage')
+    reveal('.advantage-grid article', '.advantage-grid', { y: 24, stagger: 0.12 })
+    reveal('.cases-section .section-title', '.cases-section')
+    reveal('.case-panel article', '.case-panel', { y: 24, stagger: 0.1 })
+    reveal('.industry-grid article', '.industry-grid', { y: 26, stagger: 0.12 })
+    reveal('.delivery-banner', '.delivery-banner', { y: 22 })
+    reveal('.delivery-grid article', '.delivery-grid', { y: 22, stagger: 0.1 })
+    reveal('.testimonial-section .section-title', '.testimonial-section')
+    reveal('.testimonial-track article', '.testimonial-track', { y: 22, stagger: 0.1 })
+    reveal('.cta-content', '.cta-section', { y: 26 })
+  }, pageRoot.value)
+})
+
+onBeforeUnmount(() => animationContext?.revert())
 </script>
 
 <template>
-  <main id="home" class="overflow-hidden bg-white text-ink">
-    <header class="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
-      <div class="mx-auto flex h-11 max-w-[1280px] items-center justify-between px-5">
-        <a href="#home" class="shrink-0">
-          <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="大马棒营销咨询集团" class="h-9 w-auto object-contain">
-        </a>
-        <nav class="hidden items-center gap-7 text-xs text-slate-600 xl:flex" aria-label="主导航">
-          <button v-for="(item, index) in navItems" :key="item.target" class="whitespace-nowrap transition hover:text-primary" :class="index === 0 ? 'font-semibold text-primary' : ''" @click="scrollToSection(item.target)">
-            {{ item.label }}
+  <main id="home" ref="pageRoot" class="site-shell">
+    <header class="site-header">
+      <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: index === 0 }"
+            @click="scrollToSection(target)"
+          >
+            {{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
           </button>
         </nav>
-        <Button class="h-6 rounded-full px-3 text-[10px]" @click="openConsultation">登录</Button>
+        <button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
       </div>
     </header>
 
-    <section class="relative isolate h-[372px] overflow-hidden bg-[#f5f9ff]">
-      <img src="/images/lanhu/slices/home-container25-image2@2x.png" alt="" class="pointer-events-none absolute inset-0 z-0 h-full w-full max-w-none object-cover" aria-hidden="true">
-      <div class="relative z-10 mx-auto grid h-full max-w-[1280px] items-center px-8 py-12 sm:grid-cols-[48%_52%] sm:px-[12.65%]">
-        <div class="relative z-10 pt-2">
-          <h1 class="text-[48px] font-bold leading-[1.38] tracking-tight text-ink sm:text-[32px]">
-            <span class="block whitespace-nowrap">大马棒 · 云途全域 GEO</span>
-            <span class="block whitespace-nowrap">让品牌在 AI 时代拥有持续增长力</span>
-          </h1>
-          <div class="mt-4 flex flex-wrap gap-x-3 gap-y-2 text-xs text-slate-600">
-            <span>✓ 5万真人内容生产网络</span>
-            <span>✓ 5000+ 自营资源矩阵</span>
-            <span>✓ 全链路转化闭环</span>
-          </div>
-          <div class="mt-6 flex flex-wrap gap-3">
-            <Button class="h-10 rounded-[4px] px-5 text-xs" @click="openConsultation">免费定制 <span class="ml-1">→</span></Button>
-            <Button variant="outline" class="h-10 rounded-[4px] px-5 text-xs" @click="scrollToSection('cases')">查看成功案例</Button>
+    <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>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="border-y border-slate-100 bg-white py-5">
-      <div class="mx-auto flex max-w-[960px] items-center justify-between gap-5 px-4 text-xs font-semibold text-slate-400 sm:text-sm">
-        <span>and</span><span>WaSun</span><span>企业服务</span><span>CiiC</span><span>SUNX</span><span>品牌营销</span>
+    <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="mx-auto max-w-[960px] px-4 py-16 text-center">
-      <h2 class="text-2xl font-bold tracking-tight">已服务 <span class="text-primary">300+</span> 全类型经营主体，覆盖 <span class="text-primary">12+</span> 主流行业</h2>
-      <p class="mt-2 text-xs text-muted">We have provided services to over 300 full-spectrum business entities </p>
-      <p class="mt-2 text-xs text-muted">spanning more than a dozen mainstream industry sectors</p>
-      <div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-4">
-        <article v-for="(stat, index) in stats" :key="stat.label" class="rounded-xl bg-gradient-to-br from-white to-blue-50 px-3 py-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
-          <img v-if="index === 0" src="/images/lanhu/slices/home-group37-group70-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
-          <img v-else-if="index === 1" src="/images/lanhu/slices/home-group36-group71-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
-          <div class="text-2xl font-bold text-primary">{{ stat.value }}</div>
-          <div class="mt-1 text-xs text-slate-500">{{ stat.label }}</div>
+    <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="relative overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#e3f4ff_100%)] py-16">
-      <div class="mx-auto max-w-[960px] px-4 text-center">
-        <h2 class="text-2xl font-bold">独创「<span class="text-primary">GEO双环增长模型</span>」，实现品效协同长效增长</h2>
-        <p class="mt-2 text-xs text-muted">Original “GEO Dual-Ring Growth Model” Delivers Long-term Growth Through Integrated Brand Building And Conversion Performance</p>
-        <div class="mt-8 grid items-center gap-6 md:grid-cols-[1fr_1fr_1.1fr]">
-          <img src="/images/lanhu/slices/home-group80-group83-image11@2x.png" alt="品牌声量增长环" class="mx-auto size-40 object-contain">
-          <img src="/images/lanhu/slices/home-group86-group87-image12@2x.png" alt="转化增长环" class="mx-auto size-40 object-contain">
-          <div class="rounded-xl bg-white/70 p-6 text-left shadow-[0_12px_32px_rgba(48,121,255,0.12)]">
-            <h3 class="font-semibold text-primary">业务核心价值点</h3>
-            <div v-for="point in valuePoints" :key="point.title" class="mt-5 border-b border-slate-200 pb-4 last:border-0 last:pb-0">
-              <h4 class="font-medium text-slate-800">{{ point.title }}</h4>
-              <p class="mt-2 text-sm leading-6 text-slate-500">{{ point.text }}</p>
+    <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
+        >
+        <div class="model-layout">
+          <img
+            class="ring"
+            src="/images/lanhu/slices/home-group80-group83-image11@2x.png"
+            alt="声量资产环"
+          />
+          <img
+            class="ring"
+            src="/images/lanhu/slices/home-group86-group87-image12@2x.png"
+            alt="获客转化环"
+          />
+          <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>
-            <Button class="mt-5" @click="openConsultation">了解业务详情 <span class="ml-1">→</span></Button>
+            <button class="primary-button small" @click="openConsultation">
+              了解业务详情 <b>→</b>
+            </button>
           </div>
         </div>
       </div>
     </section>
 
-    <section id="advantages" class="bg-[#edf8ff] py-16">
-      <div class="mx-auto max-w-[960px] px-4">
-        <div class="text-center">
-          <h2 class="text-2xl font-bold text-primary">四大核心优势</h2>
-          <p class="mt-2 text-xs text-muted">Four Core Advantages</p>
+    <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="mt-9 grid gap-4 sm:grid-cols-2">
-          <article v-for="advantage in advantages" :key="advantage.title" class="flex min-h-36 items-center gap-5 rounded-lg bg-white/85 p-5 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
-            <img :src="advantage.image" alt="" class="size-20 shrink-0 object-contain">
+        <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 class="font-semibold text-primary">{{ advantage.title }}</h3>
-              <p class="mt-2 text-sm leading-6 text-slate-500">{{ advantage.detail }}</p>
+              <h3>{{ title }}</h3>
+              <p><b>核心点：</b>{{ text }}</p>
+              <p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
             </div>
           </article>
         </div>
       </div>
     </section>
 
-    <section id="cases" class="relative overflow-hidden py-16">
-      <div class="absolute inset-0 bg-[url('/images/lanhu/slices/home-group75-image7@2x.png')] bg-cover bg-center opacity-45" />
-      <div class="relative mx-auto max-w-[960px] px-4">
-        <div class="text-center">
-          <h2 class="text-2xl font-bold text-primary">真实落地成果，见证增长实效</h2>
-          <p class="mt-2 text-xs text-muted">Practical Delivered Results That Demonstrate Tangible Growth Outcomes</p>
-        </div>
-        <div class="mt-9 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <article v-for="(item, index) in cases" :key="item.category" class="overflow-hidden rounded-xl bg-white shadow-[0_10px_24px_rgba(48,121,255,0.12)]">
-            <div class="grid h-28 place-items-center bg-gradient-to-br from-blue-100 via-white to-sky-100">
-              <img :src="advantages[index].image" alt="" class="size-16 object-contain">
-            </div>
-            <div class="p-4">
-              <h3 class="font-semibold text-slate-800">{{ item.category }}</h3>
-              <p class="mt-2 text-xs leading-5 text-slate-500">{{ item.result }}</p>
-            </div>
+    <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="mt-8 text-center"><Button @click="openConsultation">查看全部案例 <span class="ml-1">→</span></Button></div>
+        <div class="center-action">
+          <button class="primary-button small" @click="openConsultation">
+            查看全部案例 <b>→</b>
+          </button>
+        </div>
       </div>
     </section>
 
-    <section id="industry" class="mx-auto max-w-[960px] px-4 py-16">
-      <div class="text-center">
-        <h2 class="text-2xl font-bold">深耕 <span class="text-primary">12+</span> 行业，定制专属 GEO 增长方案</h2>
-        <p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
-      </div>
-      <div class="mt-9 grid gap-5 md:grid-cols-3">
-        <article v-for="(industry, index) in industries" :key="industry" class="relative overflow-hidden rounded-xl bg-gradient-to-br from-sky-50 via-white to-blue-100 p-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
-          <img :src="advantages[index].image" alt="" class="absolute -right-3 -top-2 size-28 opacity-35">
-          <h3 class="relative text-lg font-semibold text-slate-800">{{ industry }}</h3>
-          <p class="relative mt-4 text-sm leading-6 text-slate-600">为 {{ industry }} 品牌定制 AI 搜索内容策略、媒体资源布局与增长转化方案。</p>
-          <div class="relative mt-5 flex gap-2"><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">内容策略</span><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">全域曝光</span></div>
+    <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 class="bg-[#eff9ff] py-16">
-      <div class="mx-auto max-w-[960px] px-4">
-        <div class="text-center">
-          <h2 class="text-2xl font-bold"><span class="text-primary">5步标准化</span>交付流程，透明可控效果可追溯</h2>
-          <p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
-        </div>
-        <div class="mt-9 rounded-xl bg-white/80 p-6 shadow-[0_10px_30px_rgba(48,121,255,0.08)]">
-          <ol class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            <li v-for="(step, index) in deliverySteps" :key="step[0]" class="flex gap-4 rounded-lg border border-blue-50 bg-white p-4">
-              <span class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-100 text-sm font-bold text-primary">0{{ index + 1 }}</span>
-              <div><h3 class="font-semibold text-slate-800">{{ step[0] }}</h3><p class="mt-1 text-xs leading-5 text-slate-500">{{ step[1] }}</p></div>
-            </li>
-          </ol>
+    <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="mx-auto max-w-[960px] px-4 py-16">
-      <div class="text-center"><h2 class="text-2xl font-bold">客户真实评价，见证<span class="text-primary">服务品质</span></h2><p class="mt-2 text-xs text-muted">Genuine Client Testimonials Attest To Our Service Quality</p></div>
-      <div class="mt-8 grid gap-4 md:grid-cols-3">
-        <blockquote v-for="name in ['企业服务客户', '消费品牌客户', '本地生活客户']" :key="name" class="rounded-xl bg-slate-50 p-6 text-sm leading-7 text-slate-500">
-          <span class="text-3xl font-bold text-blue-200">“</span>通过全域 GEO 布局，我们在 AI 搜索场景中持续获得了更高质量的品牌曝光与业务线索。<footer class="mt-4 font-medium text-slate-700">— {{ name }}</footer>
-        </blockquote>
+    <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="relative overflow-hidden bg-primary py-14 text-center text-white">
-      <img src="/images/lanhu/slices/home-group105-image31@2x.png" alt="" class="absolute inset-0 size-full object-cover opacity-70">
-      <div class="relative mx-auto max-w-2xl px-4"><h2 class="text-2xl font-bold leading-relaxed">AI 搜索增长风口已至，大马棒 · 云途全域 GEO 助力企业打造品牌双环增长体系</h2><p class="mt-3 text-sm text-blue-50">免费获取 1 对 1 GEO 诊断方案</p><Button class="mt-6 bg-white text-primary hover:bg-slate-100" @click="openConsultation">立即咨询 <span class="ml-1">→</span></Button></div>
+    <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="bg-[#111d24] py-10 text-slate-300">
-      <div class="mx-auto grid max-w-[960px] gap-8 px-4 md:grid-cols-[1.2fr_1fr_auto]">
-        <div><h2 class="text-lg font-bold text-white">成都大马棒传媒有限公司</h2><p class="mt-3 text-sm leading-6 text-slate-400">全域增长咨询与内容营销服务，为品牌构建 AI 时代的持续增长力。</p></div>
-        <div class="text-sm leading-7 text-slate-400"><div>服务热线：132-254-2153</div><div>商务合作：business@damabang.com</div><div>工作时间：周一至周五 09:30 - 18:30</div></div>
-        <div class="grid size-24 place-items-center rounded bg-white/10 text-xs text-slate-400">关注我们<br>获取方案</div>
+    <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="fixed inset-0 z-40 grid place-items-center bg-slate-950/45 px-4" @click.self="consultationOpen = false">
-      <section class="w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl" role="dialog" aria-modal="true" aria-labelledby="consult-title">
-        <h2 id="consult-title" class="text-lg font-bold text-ink">咨询全域 GEO 方案</h2>
-        <p class="mt-2 text-sm leading-6 text-muted">提交后，我们会为您匹配专属增长方案。</p>
-        <div class="mt-6 flex justify-end gap-3"><Button variant="outline" @click="consultationOpen = false">暂不咨询</Button><Button @click="submitConsultation">提交咨询</Button></div>
+    <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="fixed bottom-5 left-1/2 z-50 -translate-x-1/2 rounded-full bg-slate-900 px-5 py-3 text-sm text-white shadow-xl" role="status">{{ notice }}</p>
+    <p v-if="notice" class="toast">{{ notice }}</p>
   </main>
 </template>