:root {
  --promo-ink: #102b27;
  --promo-deep: #083b35;
  --promo-green: #0f806d;
  --promo-mint: #c8f4df;
  --promo-paper: #f7f8f5;
  --promo-muted: #5c706b;
  --promo-line: #dce8e1;
}

html { scroll-behavior: smooth; }
body {
  padding-bottom: 0;
  background: var(--promo-paper);
  color: var(--promo-ink);
}
.wrap { width: min(1280px, calc(100% - 64px)); }
.top {
  top: 16px;
  width: min(1280px, calc(100% - 64px));
  margin-top: 16px;
  padding: 8px 10px 8px 18px;
  border-color: rgba(16, 43, 39, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 12px 36px rgba(9, 49, 39, .08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.brand { gap: 11px; }
.brand .mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--promo-deep);
  font-size: 12px;
}
.brand-name strong { color: var(--promo-ink); font-size: 16px; letter-spacing: -.035em; }
.brand-name span { color: var(--promo-muted); font-size: 11px; white-space: nowrap; }
.links { gap: 4px; }
.links a { color: #36534b; font-size: 13px; font-weight: 700; }
.links a:hover { color: var(--promo-deep); background: #edf6f0; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.top-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 44px;
  border-radius: 10px;
  color: #36534b;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.top-login:hover { background: #edf6f0; }
.top-cta { min-height: 42px; padding: 0 17px; border-radius: 11px; font-size: 13px; white-space: nowrap; }
.top-cta span { font-size: 18px; line-height: 1; }
.btn-primary {
  background: var(--promo-green);
  box-shadow: 0 12px 26px rgba(7, 60, 48, .17);
}
.btn-primary:hover { background: #0a6c5c; }
.btn:focus-visible, .top-login:focus-visible, .links a:focus-visible,
.tour-nav button:focus-visible, .carousel-tools button:focus-visible,
.faq-question:focus-visible, .geo-intro-link:focus-visible, footer a:focus-visible {
  outline: 3px solid #e9a46a;
  outline-offset: 3px;
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 800px;
  margin-top: -94px;
  padding: 172px max(48px, calc((100vw - 1174px) / 2)) 95px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  /* 首屏背景素材来自 geo-webside/public/hero-bg.jpg。 */
  background-image:
    linear-gradient(90deg, rgba(4, 18, 29, .94) 0%, rgba(4, 18, 29, .82) 34%, rgba(4, 18, 29, .25) 72%, rgba(4, 18, 29, .12) 100%),
    url("geo-answer-flow.jpg");
  background-position: center, center 55%;
  background-size: cover;
  box-shadow: none;
}
.hero::before { display: none; }
.hero::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: 190px;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(247, 248, 244, 0) 0%,
    rgba(247, 248, 244, .12) 28%,
    rgba(247, 248, 244, .72) 72%,
    var(--promo-paper) 100%
  );
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; max-width: 625px; }
.hero .kicker {
  gap: 9px;
  min-height: 35px;
  margin-bottom: 28px;
  padding: 0 13px;
  border: 1px solid rgba(200, 244, 223, .3);
  background: rgba(218, 255, 237, .08);
  color: #c7f3df;
  -webkit-text-fill-color: #c7f3df;
  font-size: 12px;
  letter-spacing: .08em;
}
.status-dot, .scene-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8eec4;
  box-shadow: 0 0 0 4px rgba(168, 238, 196, .13);
}
.display {
  max-width: 650px;
  color: #f8fff9;
  font-size: clamp(2.7rem, 4.1vw, 4.5rem);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.13;
}
.display span + span { margin-top: 4px; color: #b8f1cf; }
.hero-lead {
  max-width: 34rem;
  margin-top: 28px;
  color: #d5e4e5;
  font-size: clamp(1rem, 1.3vw, 1.13rem);
  line-height: 1.85;
}
.hero .actions { margin-top: 38px; gap: 12px; }
.hero .btn { min-height: 52px; padding: 0 22px; border-radius: 12px; }
.hero .btn-primary { background: #c8f4df; color: #0c4539; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); }
.hero .btn-primary:hover { background: #e1ffed; }
.hero .btn-ghost { border-color: rgba(229, 255, 241, .35); background: rgba(255, 255, 255, .06); color: #f4fff7; }
.hero .btn-ghost:hover { border-color: #b8f1cf; background: rgba(255, 255, 255, .12); }

.scene {
  z-index: 1;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 25px;
  background: #edf6f1;
  background-image: radial-gradient(#cfe2d9 1px, transparent 1px);
  background-size: 17px 17px;
  box-shadow: 0 32px 80px rgba(1, 23, 19, .27), 0 0 0 10px rgba(228, 255, 240, .07);
  transform: rotate(1.5deg);
}
.scene .orb-a { background: #d7f5e3; }
.scene .orb-b { background: #fbe6ce; }
.scene-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -2px -2px 12px;
  padding: 7px 3px;
  color: #38594f;
  font-size: 11px;
  font-weight: 750;
}
.scene-header-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--promo-deep);
  color: #fff;
  font-size: 12px;
}
.scene-live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #18836d; }
.scene-live i { display: block; width: 6px; height: 6px; background: #20a47e; box-shadow: none; }
.qcard, .acard { border-color: #dcebe1; box-shadow: 0 8px 25px rgba(32, 73, 58, .08); }
.qcard { min-height: 82px; padding: 14px 18px; border-radius: 16px; }
.qmark {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #0d4a40;
  font-family: var(--font-display), sans-serif;
  font-size: 22px;
}
.ask { font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 750; }
.caret { display: none; }
.acard { padding: 17px; border-radius: 17px; }
.answer-top { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #264a40; font-size: 12px; }
.answer-top strong { font-size: 13px; }
.answer-top > span:last-child { margin-left: auto; color: #80968b; font-size: 11px; }
.answer-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e3f5e8; color: #0f806d; font-size: 10px; font-weight: 800; }
.arow { height: 8px; margin-top: 9px; background: #e5eee8; }
.hit { min-height: 44px; margin-top: 12px; padding: 9px 12px; background: #def5e8; }
.hit strong { font-size: 12px; white-space: nowrap; }
.hit i { flex: 1; width: auto; max-width: 100px; margin-left: auto; background: #3cab85; opacity: .35; }
.gem { width: 12px; height: 12px; background: #0c876c; }
.trio span { min-height: 62px; background: #f7faf7; border-color: #e4efe7; color: #375248; font-size: 11px; }
.scene-platform-label { position: relative; z-index: 1; margin: 15px 0 9px 2px; color: #668276; font-size: 11px; font-weight: 700; }
.ptiles { margin-top: 0; }
.ptiles span { min-height: 38px; border: 1px solid #dcebe1; border-radius: 9px; color: #365349; font-size: 11px; }
.ptiles span:nth-child(n) { border-top: 1px solid #dcebe1; }

.geo-intro {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: 116px;
  scroll-margin-top: 120px;
}
.geo-intro-copy h2 {
  max-width: 570px;
  color: var(--promo-ink);
  font-size: clamp(2rem, 3.1vw, 3.1rem);
  letter-spacing: -.025em;
  line-height: 1.22;
}
.geo-intro-lead {
  max-width: 560px;
  margin-top: 22px;
  color: var(--promo-muted);
  font-size: 16px;
  line-height: 1.8;
}
.geo-focus { display: grid; gap: 0; margin: 30px 0 0; padding: 0; list-style: none; }
.geo-focus li {
  display: grid;
  grid-template-columns: 38px 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 65px;
  border-top: 1px solid var(--promo-line);
}
.geo-focus li:last-child { border-bottom: 1px solid var(--promo-line); }
.geo-focus span { color: var(--promo-green); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.geo-focus strong { color: var(--promo-ink); font-size: 16px; }
.geo-focus p { color: var(--promo-muted); font-size: 13px; line-height: 1.55; }
.geo-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 26px;
  color: var(--promo-green);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.geo-intro-link:hover { color: var(--promo-deep); }
.geo-intro-link span { font-size: 19px; }
.geo-visual {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--promo-line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(13, 56, 45, .12);
}
.geo-visual-image { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #eef0e9; }
.geo-visual-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.geo-visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 23px 22px; }
.geo-visual figcaption > div { display: grid; gap: 5px; }
.geo-visual figcaption strong { color: var(--promo-ink); font-size: 16px; }
.geo-visual figcaption div span { color: var(--promo-muted); font-size: 12px; line-height: 1.5; }
.geo-visual-meta { flex: 0 0 auto; color: var(--promo-green); font-size: 11px; font-weight: 800; white-space: nowrap; }

.block { padding: 104px 0 0; }
.head { max-width: 750px; margin-bottom: 32px; }
.section-eyebrow {
  margin: 0 0 14px !important;
  color: var(--promo-green) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .2em;
}
.head h2 { color: var(--promo-ink); font-size: clamp(2rem, 3.1vw, 3.2rem); letter-spacing: -.025em; }
.head > p:last-child { max-width: 650px; margin-top: 16px; color: var(--promo-muted); font-size: 16px; line-height: 1.75; }
.benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; counter-reset: benefit; }
.piccard {
  position: relative;
  min-height: 315px;
  padding: 18px 22px 26px;
  overflow: hidden;
  border: 1px solid var(--promo-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  box-shadow: 0 12px 32px rgba(20, 62, 46, .045);
  counter-increment: benefit;
}
.piccard::before { position: absolute; top: 32px; right: 34px; z-index: 1; content: "0" counter(benefit); color: #52786a; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.frame { display: block; height: 166px; margin-bottom: 24px; padding: 0; overflow: hidden; border-radius: 16px; }
.frame img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 52%; outline: 1px solid rgba(0, 0, 0, .08); outline-offset: -1px; }
.f-mint { background: #e8f6ee; }
.f-blue { background: #e9f3f5; }
.f-sand { background: #fcf1e7; }
.f-deep { background: #e6f0ec; }
.piccard h3 { margin-top: 0; color: var(--promo-ink); font-size: 19px; letter-spacing: -.015em; }
.piccard p { margin-top: 12px; color: var(--promo-muted); font-size: 13px; line-height: 1.65; }
.piccard:hover { box-shadow: 0 18px 36px rgba(20, 62, 46, .1); }

.tour { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 14px; border-color: var(--promo-line); border-radius: 28px; box-shadow: 0 22px 50px rgba(20, 62, 46, .06); }
.tour-nav { gap: 8px; padding: 10px; border-radius: 18px; background: #f0f5ef; }
.tour-nav button { min-height: 62px; padding: 9px 12px; border-color: transparent; background: transparent; color: #49645a; font-size: 14px; }
.tour-nav button:hover { background: #fff; color: var(--promo-deep); }
.tour-nav button[aria-selected="true"] { border-color: var(--promo-deep); background: var(--promo-deep); box-shadow: 0 8px 18px rgba(8, 59, 53, .14); }
.tour-nav button[aria-selected="true"]:hover { color: #fff; }
.tour-nav .glyph { background: #fff; color: #0c7966; }
.tour-nav button[aria-selected="true"] .glyph { background: #246358; }
.slide-copy { display: grid; gap: 8px; min-height: 116px; padding: 9px 7px 18px; }
.slide-copy span { color: var(--promo-green); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.slide-copy h3 { color: var(--promo-ink); font-size: clamp(1.35rem, 2vw, 1.9rem); }
.slide-copy p { max-width: 620px; color: var(--promo-muted); font-size: 13px; line-height: 1.65; }
.art { min-height: 315px; border-color: #e2ebe5; background: #f5f9f6; }
.art.see { background: #f1f8f5; }
.art.lib { background: #edf7f1; }
.art.write { background: #fcf7ef; }
.art.send { background: #f1f6f7; }
.art.watch { background: #f4f8f5; }
.askbox, .src, .doc, .sheetlet, .meter, .pcell, .feed { border-color: #dce8e1; box-shadow: 0 8px 22px rgba(20, 62, 46, .04); }
.carousel-tools button { border-color: var(--promo-line); color: var(--promo-deep); }
.carousel-tools button:hover { border-color: var(--promo-green); background: #eef8f1; }
.carousel-count { color: #688276; }

.art.product-art {
  display: block;
  min-height: 315px;
  padding: 20px;
  background: linear-gradient(145deg, #edf7f3, #f7fbf8);
}
.product-window {
  width: 100%;
  min-height: 272px;
  overflow: hidden;
  border: 1px solid #dce9e2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(18, 66, 48, .09);
}
body[data-page="home"] .art:is(.diagnosis-art, .workflow-art) { min-height: 0; padding: 0; overflow: hidden; background: #edf7f1; }
body[data-page="home"] :is(.diagnosis-art, .workflow-art) img { display: block; width: 100%; height: auto; }
body[data-page="home"] .tour .slide-copy { gap: 10px; padding: 16px 12px 24px; }
body[data-page="home"] .tour .slide-copy p { max-width: 740px; font-size: 14px; line-height: 1.8; }
.workflow-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.workflow-points li { padding: 5px 11px; border: 1px solid #dce8e1; border-radius: 4px; background: #f3f7f4; color: #3c6858; font-size: 11px; line-height: 1.5; }
.product-window-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 49px;
  padding: 0 18px;
  border-bottom: 1px solid #e8efe9;
  color: #28483e;
  font-size: 12px;
}
.product-window-head small { margin-left: auto; color: #8da197; font-size: 10px; }
.product-window-dots { display: flex; gap: 5px; }
.product-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d9e6dd; }
.product-window-dots i:first-child { background: #d58b72; }
.product-window-dots i:nth-child(2) { background: #e4c487; }
.product-window-dots i:nth-child(3) { background: #88b9a1; }
.mock-label { display: block; color: #6b8679; font-size: 11px; font-weight: 750; letter-spacing: .03em; }
.visibility-layout, .knowledge-layout, .content-layout, .distribution-layout, .monitor-layout { display: grid; gap: 15px; padding: 18px; }
.visibility-layout { grid-template-columns: 1.25fr .9fr; }
.visibility-platforms, .visibility-summary, .knowledge-main, .content-prompt, .content-draft, .distribution-asset, .distribution-channels, .monitor-trend, .monitor-details > div {
  min-width: 0;
  border: 1px solid #e5eee8;
  border-radius: 14px;
  background: #fff;
}
.visibility-platforms, .visibility-summary { padding: 18px; }
.platform-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 15px; font-size: 12px; }
.platform-row b { color: #39564a; font-weight: 700; }
.platform-row i { height: 9px; overflow: hidden; border-radius: 20px; background: #e9f1ed; }
.platform-row i::before { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: #3fae88; content: ""; }
.platform-row:nth-of-type(2) i::before { background: #76bc9c; }
.platform-row:nth-of-type(3) i::before { background: #4f9d92; }
.platform-row:nth-of-type(4) i::before { background: #a2cdb4; }
.visibility-summary { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 15px; background: #f9fcf9; }
.visibility-summary strong, .knowledge-main > strong, .content-prompt > strong, .content-draft > strong, .distribution-asset > strong { color: #214b3c; font-size: 16px; line-height: 1.5; }
.summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.summary-chips span, .content-draft div span { padding: 5px 8px; border-radius: 20px; background: #e9f6ee; color: #32795d; font-size: 10px; font-weight: 700; }
.summary-track { display: flex; align-items: end; gap: 7px; width: 100%; height: 34px; }
.summary-track i { flex: 1; height: 45%; border-radius: 4px 4px 0 0; background: #a7d7b8; }
.summary-track i:nth-child(2) { height: 70%; }
.summary-track i:nth-child(3) { height: 58%; }
.summary-track i:nth-child(4) { height: 85%; background: #2e9871; }
.summary-track i:nth-child(5) { height: 100%; background: #177c64; }
.knowledge-layout { grid-template-columns: 140px minmax(0, 1fr); }
.knowledge-sidebar { display: grid; align-content: start; gap: 6px; padding: 16px 9px; border-radius: 13px; background: #f3f8f4; }
.knowledge-sidebar .mock-label { padding: 0 8px 8px; }
.knowledge-sidebar b { padding: 8px; border-radius: 7px; color: #60766b; font-size: 11px; }
.knowledge-sidebar b.is-current { background: #e0f1e6; color: #1e7252; }
.knowledge-main { padding: 18px; }
.knowledge-main > strong { display: block; margin-top: 9px; }
.knowledge-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.knowledge-cards span { display: grid; align-content: start; gap: 10px; min-height: 100px; padding: 12px; border: 1px solid #e4eee8; border-radius: 9px; color: #365c48; font-size: 11px; font-weight: 700; }
.knowledge-cards i, .content-draft > i, .distribution-asset > i { display: block; width: 100%; height: 6px; border-radius: 6px; background: #e4eee7; }
.knowledge-cards i:last-child { width: 65%; }
.content-layout, .distribution-layout { grid-template-columns: .8fr 1.2fr; }
.content-prompt, .content-draft, .distribution-asset, .distribution-channels { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-height: 184px; padding: 18px; }
.content-prompt { justify-content: space-between; background: #f8fbf8; }
.content-source, .asset-tag { padding: 7px 9px; border-radius: 8px; background: #e7f5eb; color: #257453; font-size: 10px; font-weight: 700; }
.content-draft > i:nth-of-type(2), .distribution-asset > i:nth-of-type(2) { width: 90%; }
.content-draft > i:nth-of-type(3), .distribution-asset > i:nth-of-type(3) { width: 70%; }
.content-draft div { display: flex; gap: 6px; margin-top: auto; }
.distribution-channels { gap: 7px; background: #f9fcf9; }
.distribution-channels > div { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 43px; padding: 8px 11px; border: 1px solid #e5eee8; border-radius: 8px; background: #fff; }
.distribution-channels b { color: #345447; font-size: 11px; }
.distribution-channels small { color: #6e9f81; font-size: 10px; }
.monitor-layout { grid-template-columns: 1.25fr .9fr; }
.monitor-trend { padding: 16px 18px 12px; }
.chart-legend { display: flex; gap: 14px; margin-top: 8px; color: #3a8d6b; font-size: 10px; }
.chart-legend span:nth-child(2) { color: #89b49c; }
.chart-legend span:nth-child(3) { color: #d39e68; }
.monitor-trend svg { display: block; width: 100%; height: 140px; margin-top: 6px; overflow: visible; }
.chart-grid { fill: none; stroke: #e7eee9; stroke-width: 1; }
.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.chart-line-a { stroke: #2d9b70; }
.chart-line-b { stroke: #91bba1; }
.chart-line-c { stroke: #d6a170; }
.monitor-details { display: grid; gap: 10px; }
.monitor-details > div { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px; }
.monitor-details strong { color: #315244; font-size: 12px; line-height: 1.5; }
.monitor-details strong i { color: #89b9a0; font-style: normal; }
.monitor-details p { color: #738c7c; font-size: 10px; line-height: 1.45; }

.band {
  margin-top: 110px;
  padding: 92px 0 98px;
  background:
    radial-gradient(circle at 94% 0, rgba(113, 209, 169, .19), transparent 32%),
    radial-gradient(circle at 0 100%, rgba(54, 154, 131, .15), transparent 38%),
    #093c35;
}
.band .head { max-width: 790px; margin-bottom: 46px; }
.band .section-eyebrow { color: #a7e8c6 !important; }
.band .head h2 { color: #fff; }
.band .head > p:last-child { color: #bbd7c8; }
.loop { gap: 18px; }
.loop::before { top: 40px; height: 1px; background: rgba(207, 246, 221, .35); }
.step { flex: 1; }
.step .glyph { width: 80px; height: 80px; border: 1px solid rgba(210, 252, 226, .4); border-radius: 22px; background: #16594c; color: #d8fae7; }
.step h3 { margin-top: 18px; font-size: 17px; }
.step p { margin-top: 7px; color: #b5d3c4; font-size: 12px; }

.samples { gap: 18px; }
.poster {
  --scenario-accent: #0f806d;
  --scenario-tint: #f1f8f4;
  --scenario-glow: rgba(15, 128, 109, .13);
  display: flex;
  flex-direction: column;
  min-height: 285px;
  padding: 22px;
  border-color: var(--promo-line);
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0, var(--scenario-glow), transparent 44%), linear-gradient(135deg, #fff 8%, var(--scenario-tint));
  box-shadow: 0 12px 28px rgba(22, 58, 43, .035);
}
.poster.home { --scenario-accent: #c76b3e; --scenario-tint: #fff6ed; --scenario-glow: rgba(219, 133, 72, .18); }
.poster.edu { --scenario-accent: #427f9d; --scenario-tint: #eff8fb; --scenario-glow: rgba(78, 154, 187, .16); }
.poster.team { --scenario-accent: #16806a; --scenario-tint: #eff9f4; --scenario-glow: rgba(55, 174, 132, .15); }
.poster.shop { --scenario-accent: #a46b5d; --scenario-tint: #fbf3ee; --scenario-glow: rgba(185, 119, 99, .14); }
.scenario-top { display: flex; align-items: center; gap: 9px; }
.scenario-number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--scenario-accent); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.scenario-kind { color: #36534a; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.scenario-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid rgba(20, 69, 49, .08); border-radius: 12px; background: rgba(255, 255, 255, .82); color: var(--scenario-accent); }
.scenario-icon svg { width: 23px; height: 23px; }
.scenario-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 22px; align-items: stretch; flex: 1; margin-top: 17px; }
.scenario-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 7px 0 3px; }
.scenario-label { display: inline-flex; align-items: center; gap: 7px; color: var(--scenario-accent); font-size: 11px; font-weight: 800; }
.scenario-label::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.scenario-copy h3 { margin-top: 12px; color: var(--promo-ink); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.28; letter-spacing: -.02em; text-wrap: balance; }
.scenario-copy p { max-width: 290px; margin-top: auto; padding-top: 12px; color: var(--promo-muted); font-size: 12px; line-height: 1.55; text-wrap: pretty; }
.scenario-info { align-self: stretch; padding: 15px 16px; border: 1px solid rgba(17, 80, 55, .09); border-radius: 15px; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 22px rgba(15, 64, 43, .045); }
.scenario-info > span { color: #71877c; font-size: 11px; font-weight: 700; }
.scenario-info ul { display: grid; gap: 2px; margin: 11px 0 0; padding: 0; list-style: none; }
.scenario-info li { display: flex; align-items: center; gap: 9px; min-height: 35px; border-bottom: 1px solid #edf2ed; color: #365348; font-size: 12px; font-weight: 700; }
.scenario-info li:last-child { border-bottom: 0; }
.scenario-info li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--scenario-accent); content: ""; opacity: .75; }

#desktop { padding-top: 110px; }
.desktop { gap: 50px; padding: 56px; border: 1px solid #d5e7dd; border-radius: 32px; background: #e9f3ed; }
.desktop .kicker { background: #d7eddf; color: #0d7962; -webkit-text-fill-color: #0d7962; }
.desktop h2 { color: var(--promo-ink); font-size: clamp(2rem, 2.9vw, 3rem); }
.desktop .sub { color: var(--promo-muted); font-size: 15px; }
.desktop-visual { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d5e7dd; border-radius: 16px; background: #edf7f1; box-shadow: 0 20px 45px rgba(24, 74, 53, .08); }
.desktop-visual img { display: block; width: 100%; height: auto; }
.desktop-visual figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 14px 16px; border-top: 1px solid #d5e7dd; background: #f6faf7; color: #3c6858; font-size: 11px; line-height: 1.6; }
.desktop .note { max-width: 400px; margin-top: 15px; color: #657a70; font-size: 12px; }
.os { border-color: #d9e9df; background: #fff; }
.os b { color: var(--promo-green); font-size: 12px; }
button.os { background: rgba(255, 255, 255, .42); }
.window { border-color: #dce8e1; box-shadow: 0 25px 45px rgba(24, 74, 53, .12); transform: perspective(1100px) rotateY(-4deg); }
.winbar { background: #f8faf8; border-color: var(--promo-line); }
.side { background: #0a4b3f; }
.bars { background: #f0f6f1; }

#faq { padding-top: 110px; }
#faq .head { max-width: none; margin-bottom: 38px; text-align: center; }
.faq { grid-template-columns: 1fr; gap: 16px; }
.faq-item { padding: 0 30px; border-color: #e7eee9; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(24, 58, 48, .07); transition: border-color 160ms ease-out, box-shadow 160ms ease-out; }
.faq-item.is-open { border-color: #cfe5d9; box-shadow: 0 14px 32px rgba(24, 58, 48, .1); }
.faq-question { min-height: 82px; gap: 20px; color: var(--promo-ink); font-size: 18px; font-weight: 600; }
.faq-question::before { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--promo-green); content: ""; }
.faq-question::after { flex: 0 0 9px; width: 9px; height: 9px; margin: -5px 3px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg); transition: transform 160ms ease-out; }
.faq-item.is-open .faq-question::after { margin-top: 5px; transform: rotate(225deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); transition: grid-template-rows 280ms cubic-bezier(.2, 0, 0, 1), opacity 200ms ease-out, transform 280ms cubic-bezier(.2, 0, 0, 1); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.faq-answer-inner { min-height: 0; overflow: hidden; }
.faq p { margin-bottom: 24px; padding: 0 30px 0 27px; color: var(--promo-muted); font-size: 15px; line-height: 1.7; }
.finale {
  min-height: 260px;
  margin-top: 110px;
  margin-bottom: 30px;
  padding: 50px 60px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 80% 0%, rgba(173, 250, 193, .22), transparent 42%),
    linear-gradient(110deg, #083b35, #0e5b4c);
}
.finale .section-eyebrow { color: #a8e8c5 !important; }
.finale h2 { color: #fff; font-size: clamp(2rem, 3vw, 3.2rem); }
.finale p:last-child { margin-top: 14px; color: #c0d9cb; font-size: 14px; }
.finale .btn-light { min-height: 52px; padding: 0 24px; color: #0b5745; white-space: nowrap; }
.site-footer { position: relative; background: #0b1220; color: #cbd5e1; }
.site-footer-inner { padding-top: 72px; padding-bottom: 64px; }
.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(120px, .75fr) minmax(0, 1.7fr) 160px;
  gap: clamp(24px, 3vw, 46px);
}
.site-footer h2 { margin: 4px 0 23px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.site-footer a { color: inherit; text-decoration: none; transition: color 160ms ease-out, background-color 160ms ease-out; }
.site-footer a:hover { color: #fff; }
.site-footer-logo { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 20px; }
.site-footer-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #5b9e96; color: #fff; font-size: 12px; font-weight: 800; }
.site-footer-brand p { margin-top: 16px; color: #94a3b8; font-size: 14px; line-height: 1.7; }
.site-footer-brand p:last-child { margin-top: 18px; }
.site-footer-nav { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; }
.site-footer-nav .site-footer-register { color: #56c8b8; font-weight: 700; }
.site-footer-contact dl, .site-footer-contact dd { margin: 0; }
.site-footer-contact dl { display: grid; gap: 22px; }
.site-footer-contact dt { margin-bottom: 7px; color: #94a3b8; font-size: 14px; }
.site-footer-contact dd { color: #d7e1ed; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.site-footer-phones { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.site-footer-phones a { color: #56c8b8; white-space: nowrap; }
.site-footer-qr img { display: block; width: 160px; height: 160px; padding: 6px; background: #fff; border-radius: 3px; object-fit: contain; }
.site-footer-legal { display: grid; justify-items: center; gap: 9px; margin-top: 72px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .13); color: #94a3b8; font-size: 13px; text-align: center; }
.site-footer-legal a { text-decoration: underline; text-decoration-color: rgba(148, 163, 184, .6); text-underline-offset: 3px; }
.site-footer-top { position: absolute; right: 24px; bottom: 24px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; background: #1a2438; color: #fff !important; font-size: 12px; font-weight: 700; }
.site-footer-top:hover { background: #0f806d; }

@media (max-width: 1050px) {
  .hero { min-height: 760px; margin-top: -130px; padding: 180px 48px 80px; }
  .hero-copy { max-width: 625px; }
  .geo-intro { grid-template-columns: 1fr; gap: 32px; scroll-margin-top: 150px; }
  .geo-visual { max-width: 670px; justify-self: center; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour { grid-template-columns: 1fr; }
  .tour-nav { flex-direction: row; overflow-x: auto; }
  .tour-nav button { width: auto; flex: 0 0 auto; }
  .desktop { grid-template-columns: 1fr; }
  .window { order: 0; transform: none; }
  .site-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px 56px; }
}
@media (max-width: 900px) {
  .top { flex-wrap: wrap; row-gap: 4px; }
  .top-actions { margin-left: auto; }
  .links { order: 3; flex: 1 0 100%; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .links::-webkit-scrollbar { display: none; }
  .links a { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  .wrap, .top { width: min(100% - 32px, 1220px); }
  .top { top: 8px; margin-top: 8px; padding: 7px 8px 7px 12px; }
  .links { order: 3; gap: 2px; }
  .links a { min-height: 36px; padding: 0 10px; font-size: 12px; }
  .top-login { min-width: 46px; font-size: 12px; }
  .top-cta { padding: 0 11px; font-size: 12px; }
  .hero {
    width: 100%;
    min-height: 735px;
    margin-top: -115px;
    padding: 166px 24px 70px;
    background-image:
      linear-gradient(90deg, rgba(4, 18, 29, .91), rgba(4, 18, 29, .68)),
      url("geo-answer-flow.jpg");
    background-position: center, 67% center;
  }
  .hero .kicker { margin-bottom: 23px; }
  .hero::after { height: 135px; }
  .display { font-size: clamp(2.4rem, 8.5vw, 3.65rem); }
  .hero-lead { margin-top: 22px; font-size: 14px; line-height: 1.75; }
  .hero .actions { margin-top: 27px; }
  .geo-visual { max-width: 520px; }
  .geo-intro { margin-top: 76px; scroll-margin-top: 138px; }
  .geo-intro-lead { font-size: 14px; }
  .block { padding-top: 72px; }
  .head { margin-bottom: 25px; }
  .head > p:last-child { font-size: 14px; }
  .piccard { min-height: 286px; }
  .frame { height: 140px; margin-bottom: 22px; }
  .band { margin-top: 76px; padding: 65px 0; }
  .loop { gap: 0; }
  .loop::before { left: 31px; }
  .step { gap: 17px; padding: 11px 0; }
  .step .glyph { width: 64px; height: 64px; margin: 0; border-radius: 17px; }
  .step .glyph svg { width: 27px; height: 27px; }
  .step h3 { margin: 0; min-width: 55px; }
  .step p { margin: 0; }
  .samples { grid-template-columns: 1fr; }
  .poster { min-height: 0; }
  .desktop { padding: 28px; border-radius: 25px; }
  #desktop, #faq { padding-top: 76px; }
  .finale { margin-top: 76px; padding: 37px 28px; }
  .site-footer-inner { padding-top: 56px; padding-bottom: 48px; }
  .site-footer-grid { gap: 36px 24px; }
  .site-footer-legal { margin-top: 52px; }
}
@media (max-width: 500px) {
  .top { row-gap: 3px; }
  .brand-name span { display: none; }
  .top-cta { min-height: 38px; }
  .hero { min-height: 720px; padding: 152px 18px 60px; }
  .display { font-size: clamp(2.15rem, 9.4vw, 2.85rem); }
  .hero .actions { display: grid; }
  .hero .btn { width: 100%; }
  .geo-visual { border-radius: 20px; }
  .geo-visual figcaption { align-items: flex-start; flex-direction: column; gap: 9px; padding: 16px; }
  .scene { padding: 10px; }
  .qcard { min-height: 66px; padding: 10px; gap: 10px; }
  .qmark { width: 38px; height: 38px; font-size: 19px; }
  .ask { font-size: 13px; }
  .acard { padding: 11px; }
  .hit { gap: 5px; padding: 8px; }
  .hit strong { font-size: 10px; }
  .hit i { display: none; }
  .trio { gap: 5px; }
  .trio span { min-height: 54px; padding: 4px; font-size: 9px; }
  .ptiles { gap: 5px; }
  .ptiles span { min-height: 33px; padding: 0 2px; font-size: 9px; }
  .geo-focus li { grid-template-columns: 30px 74px minmax(0, 1fr); gap: 8px; }
  .geo-focus strong { font-size: 14px; }
  .geo-focus p { font-size: 11px; }
  .benefits { grid-template-columns: 1fr; }
  .piccard { min-height: 0; }
  .frame { height: 150px; }
  .tour { padding: 9px; }
  .tour-nav { padding: 6px; }
  .tour-nav button { min-height: 46px; gap: 6px; padding: 6px 9px; font-size: 11px; }
  .tour-nav .glyph { width: 26px; height: 26px; border-radius: 8px; }
  .tour-nav .glyph svg { width: 16px; height: 16px; }
  .slide-copy { padding: 9px 7px 16px; }
  .slide-copy h3 { font-size: 20px; }
  .art { padding: 12px; }
  .art.product-art { min-height: 0; padding: 10px; }
  .product-window { min-height: 0; border-radius: 14px; }
  .product-window-head { height: 42px; padding: 0 12px; }
  .visibility-layout, .knowledge-layout, .content-layout, .distribution-layout, .monitor-layout { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .visibility-platforms, .visibility-summary, .knowledge-main, .content-prompt, .content-draft, .distribution-asset, .distribution-channels, .monitor-trend, .monitor-details > div { padding: 12px; }
  .visibility-summary { gap: 10px; }
  .summary-track { display: none; }
  .knowledge-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 8px; }
  .knowledge-sidebar .mock-label { grid-column: 1 / -1; }
  .knowledge-sidebar b { padding: 6px; }
  .knowledge-cards { margin-top: 12px; }
  .knowledge-cards span { min-height: 78px; padding: 7px; font-size: 10px; }
  .content-prompt, .content-draft, .distribution-asset, .distribution-channels { min-height: 0; gap: 8px; }
  .distribution-asset > i { display: none; }
  .monitor-trend svg { height: 105px; }
  .monitor-details { grid-template-columns: 1fr 1fr; }
  .monitor-details > div { padding: 9px; }
  .monitor-details strong { font-size: 10px; }
  .art.see .askbox { min-height: 138px; padding: 16px; }
  .art.see .meters { gap: 6px; }
  .art.see .meter { min-height: 118px; gap: 13px; padding: 10px 4px; }
  .art.see .meter strong { font-size: 12px; }
  .art.see .dots { gap: 3px; }
  .art.see .dots i { width: 7px; height: 7px; }
  .art.see .stair { transform: scale(.7); }
  .art.see .dial { transform: scale(.65); }
  .art.write .src, .art.write .doc,
  .art.send .sheetlet { min-height: 154px; padding: 17px; }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 17px; }
  .step .glyph { grid-row: span 2; }
  .step h3 { align-self: end; }
  .step p { align-self: start; }
  .desktop { padding: 24px 16px; }
  .finale .btn { width: 100%; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer h2 { margin-bottom: 14px; }
  .site-footer-nav a { min-height: 44px; }
  .site-footer-top { position: static; width: 44px; height: 44px; margin: 0 auto 24px; }
}
@media (max-width: 500px) {
  #faq .head { margin-bottom: 24px; }
  .faq { gap: 12px; }
  .faq-item { padding: 0 18px; }
  .faq-question { min-height: 70px; gap: 13px; font-size: 15px; }
  .faq p { padding: 0 12px 0 20px; font-size: 14px; }
  .poster { padding: 17px; border-radius: 21px; }
  .scenario-layout { grid-template-columns: 1fr; gap: 13px; margin-top: 14px; }
  .scenario-copy { padding: 0; }
  .scenario-copy h3 { margin-top: 9px; font-size: 23px; }
  .scenario-copy p { margin-top: 9px; padding-top: 0; }
  .scenario-info { padding: 12px; }
  .scenario-info ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
  .scenario-info li { justify-content: center; gap: 5px; min-height: 31px; padding: 0 3px; border: 0; border-radius: 7px; background: var(--scenario-tint); font-size: 11px; white-space: nowrap; }
  .scenario-info li::before { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene, .window { transform: none; }
  .faq-answer, .faq-question::after, .faq-item { transition: none; }
  .faq-answer { transform: none; }
}

/* 首页首屏轮播：画面与文案一起切换。 */
.hero.hero-carousel { display: block; min-height: 720px; padding: 0; }
.hero.hero-carousel::after { display: none; }
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 172px max(48px, calc((100vw - 1174px) / 2)) 110px;
  visibility: hidden;
  opacity: 0;
  isolation: isolate;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .25, 1), visibility .6s;
}
.hero-slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); }
.hero-slide::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 170px;
  background: linear-gradient(180deg, rgba(247, 248, 244, 0), rgba(247, 248, 244, .7) 72%, var(--promo-paper));
  content: "";
  pointer-events: none;
}
.hero-slide--light::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  content: "";
}
.hero-slide--insight::before {
  background-image: linear-gradient(90deg, #effaf4 0%, rgba(239, 250, 244, .98) 28%, rgba(239, 250, 244, .8) 46%, rgba(239, 250, 244, .15) 77%), url("promo-product-hero-20260925.webp");
}
.hero-slide--content::before {
  background-image: linear-gradient(90deg, #f5f9ef 0%, rgba(245, 249, 239, .98) 28%, rgba(245, 249, 239, .82) 46%, rgba(245, 249, 239, .13) 78%), url("promo-content-flow-20260925.webp");
}
.hero-slide--light .kicker { border-color: rgba(16, 111, 80, .2); background: rgba(255, 255, 255, .65); color: #176e57; -webkit-text-fill-color: #176e57; }
.hero-slide--light .display { color: #103f35; }
.hero-slide--light .display span + span { color: #0c8068; }
.hero-slide--light .hero-lead { color: #3b5d53; }
.hero-slide--light .btn-primary { background: #0c8068; color: #fff; box-shadow: 0 12px 28px rgba(10, 98, 76, .18); }
.hero-slide--light .btn-primary:hover { background: #096c58; }
.hero-slide--light .btn-ghost { border-color: rgba(24, 91, 70, .22); background: rgba(255, 255, 255, .72); color: #174a3d; }
.hero-slide--light .btn-ghost:hover { border-color: #0c8068; background: #fff; }
.hero-carousel-dots {
  position: absolute;
  right: 0;
  bottom: 54px;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.hero-carousel-dots button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hero-carousel-dots button span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(17, 84, 70, .48);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
  transition: width .25s ease, background .25s ease;
}
.hero-carousel-dots button:hover span { background: #0c8068; }
.hero-carousel-dots button.is-active span { width: 20px; background: #0c8068; }
.hero-carousel-dots button:focus-visible { outline: 3px solid #e9a46a; outline-offset: 1px; border-radius: 50%; }
@media (max-width: 1050px) {
  .hero.hero-carousel { min-height: 720px; }
  .hero-slide { padding: 180px 48px 105px; }
}
@media (max-width: 720px) {
  .hero.hero-carousel { min-height: 740px; }
  .hero-slide { padding: 160px 24px 100px; align-items: flex-start; }
  .hero-slide--light::before { background-position: center, 58% center; }
  .hero-slide--insight::before { background-image: linear-gradient(180deg, rgba(239, 250, 244, .98), rgba(239, 250, 244, .92) 48%, rgba(239, 250, 244, .08) 100%), url("promo-product-hero-20260925.webp"); }
  .hero-slide--content::before { background-image: linear-gradient(180deg, rgba(245, 249, 239, .98), rgba(245, 249, 239, .92) 48%, rgba(245, 249, 239, .08) 100%), url("promo-content-flow-20260925.webp"); }
}
@media (max-width: 400px) {
  .hero.hero-carousel { min-height: 740px; }
  .hero-slide { padding: 160px 18px 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-carousel-dots button span { transition: none; }
}

/* 首页参考品牌官网的首屏层级，保留原图与三组产品主题。 */
body[data-page="home"] .hero.hero-carousel { margin-top: 0; min-height: max(820px, calc(100vh - var(--home-header-height) + 120px)); min-height: max(820px, calc(100svh - var(--home-header-height) + 120px)); background-color: #04121d; }
body[data-page="home"] .hero-slide { align-items: flex-start; padding: 72px max(32px, calc((100vw - 1280px) / 2)) 150px; }
body[data-page="home"] .hero-copy { max-width: 780px; }
body[data-page="home"] .hero .kicker { min-height: 0; margin-bottom: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; letter-spacing: .12em; }
body[data-page="home"] .hero .status-dot { display: none; }
body[data-page="home"] .hero-overline { margin: 0 0 24px; color: #8bd0bd; font-size: 12px; font-weight: 650; letter-spacing: .24em; }
body[data-page="home"] .hero .display { max-width: 780px; font-size: clamp(44px, 4.4vw, 68px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
body[data-page="home"] .hero .display span + span { margin-top: 22px; font-size: .64em; line-height: 1.35; }
body[data-page="home"] .hero-lead { max-width: 660px; margin-top: 28px; font-size: 16px; line-height: 1.85; }
body[data-page="home"] .hero .actions { margin-top: 30px; }
body[data-page="home"] .hero .btn { min-height: 52px; border-radius: 4px; box-shadow: none; }
body[data-page="home"] .hero .btn-primary { background: #36786f; color: #fff; }
body[data-page="home"] .hero .btn-primary:hover { background: #2b655d; }
body[data-page="home"] .hero .btn-ghost { background: rgba(255, 255, 255, .04); }
body[data-page="home"] .hero-slide--light .hero-overline { color: #176e57; }
body[data-page="home"] .hero .hero-slide--light .btn-ghost { background: rgba(255, 255, 255, .7); }
body[data-page="home"] .hero-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; max-width: 610px; margin: 38px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(207, 233, 224, .22); list-style: none; color: #e1ece8; font-size: 15px; font-weight: 600; }
body[data-page="home"] .hero-highlights li { display: flex; align-items: center; gap: 11px; }
body[data-page="home"] .hero-highlights li::before { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #62b9a0; content: ""; }
body[data-page="home"] .hero-slide--light .hero-highlights { border-color: rgba(30, 82, 66, .18); color: #315347; }
body[data-page="home"] .hero-carousel-dots { bottom: 152px; }
body[data-page="home"] .hero-carousel-dots button { width: 44px; height: 44px; }
body[data-page="home"] .hero-slide::after { display: block; height: 120px; }
@media (max-width: 1050px) {
  body[data-page="home"] .hero-slide { padding: 58px 32px 150px; }
  body[data-page="home"] .hero-copy { max-width: 690px; }
}
@media (max-width: 720px) {
  body[data-page="home"] .hero.hero-carousel { min-height: max(770px, calc(100vh - var(--home-header-height) + 120px)); min-height: max(770px, calc(100svh - var(--home-header-height) + 120px)); }
  body[data-page="home"] .hero-slide { padding: 42px 24px 125px; }
  body[data-page="home"] .hero .display { font-size: clamp(32px, 8.6vw, 48px); }
  body[data-page="home"] .hero .display span + span { margin-top: 16px; font-size: .78em; }
  body[data-page="home"] .hero .kicker { font-size: 12px; }
  body[data-page="home"] .hero-overline { font-size: 10px; letter-spacing: .15em; }
  body[data-page="home"] .hero-lead { margin-top: 22px; font-size: 14px; }
  body[data-page="home"] .hero-highlights { gap: 14px; margin-top: 28px; padding-top: 20px; font-size: 12px; }
  body[data-page="home"] .hero-highlights li { gap: 7px; }
  body[data-page="home"] .hero-carousel-dots { bottom: 144px; }
}
@media (max-width: 400px) {
  body[data-page="home"] .hero-slide { padding-inline: 18px; }
}

/* 产品能力用可读的界面示意表达，避免装饰图抢占信息层级。 */
.capability-preview { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; height: 184px; padding: 18px; background: #f2f6f3; border: 1px solid #e5ece7; border-radius: 8px; text-align: left; }
.preview-label { color: #3e6252; font-size: 11px; font-weight: 650; }
.capability-preview > small { color: #5c706b; font-size: 10px; }
.preview-platform { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; }
.preview-platform b { color: #4e665c; font-size: 10px; font-weight: 500; }
.preview-platform i { height: 5px; border-radius: 3px; background: #dce8e1; }
.preview-platform i::before { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: #508b73; content: ""; }
.preview-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.preview-files > span { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 70px; padding: 10px 6px; border: 1px solid #dce8e1; border-radius: 5px; background: #fff; color: #365347; font-size: 10px; }
.preview-files small { color: #6b8075; font-size: 8px; letter-spacing: .06em; }
.preview-document { padding: 12px 14px; border: 1px solid #dce8e1; border-radius: 5px; background: #fff; }
.preview-document strong { color: #365347; font-size: 11px; font-weight: 600; }
.preview-document i { display: block; height: 4px; margin-top: 9px; border-radius: 2px; background: #dce8e1; }
.preview-document i:nth-of-type(2) { width: 85%; }
.preview-document i:nth-of-type(3) { width: 60%; }
.preview-document > span { display: block; margin-top: 12px; color: #508b73; font-size: 9px; }
.capability-preview svg { width: 100%; height: 72px; }
body[data-page="home"] .benefits .feature-art { height: auto; aspect-ratio: 3 / 2; padding: 0; border-radius: 10px; background: #f2f6f3; }
body[data-page="home"] .benefits .feature-art img { object-fit: contain; outline: none; }
.btn { transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.btn:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* 流程作为工作台演示的简短补充，移动端概览采用紧凑横排。 */
.band { padding-block: 48px; }
.band .head { margin-bottom: 24px; }
.band .head h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
.band .head > p:last-child { display: none; }
@media (max-width: 720px) {
  .band { padding-block: 32px; }
  .band .loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .band .loop::before { display: none; }
  .band .step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; text-align: center; }
  .band .step .glyph { width: 40px; height: 40px; margin: 0; border-radius: 12px; }
  .band .step .glyph svg { width: 20px; height: 20px; }
  .band .step h3 { min-width: 0; font-size: 13px; }
  .band .step p { display: none; }
}
@media (max-width: 500px) {
  .benefits .piccard { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-content: center; padding: 16px; }
  body[data-page="home"] .benefits .feature-art { height: 100px; aspect-ratio: auto; }
  .benefits .piccard::before { display: none; }
  .benefits .frame { grid-row: span 2; height: 100px; margin: 0; padding: 10px; gap: 7px; }
  .benefits .piccard h3 { align-self: end; font-size: 16px; line-height: 1.4; }
  .benefits .piccard p { margin-top: 6px; font-size: 12px; line-height: 1.65; }
  .benefits .preview-label { font-size: 10px; }
  .benefits .capability-preview > small { display: none; }
  .benefits .preview-platform { grid-template-columns: 1fr; gap: 3px; }
  .benefits .preview-platform b { font-size: 8px; }
  .benefits .preview-files { grid-template-columns: 1fr; gap: 4px; }
  .benefits .preview-files > span { min-height: 0; padding: 4px; font-size: 9px; }
  .benefits .preview-files small { display: none; }
  .benefits .preview-document { padding: 7px; }
  .benefits .preview-document strong { font-size: 9px; }
  .benefits .preview-document > span { display: none; }
}

/* 用户案例按业务挑战、优化策略与展示数据组织。 */
.customer-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.customer-case-card { display: flex; flex-direction: column; min-width: 0; padding: 30px; border: 1px solid var(--promo-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(20, 62, 46, .035); }
.customer-case-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--promo-green); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.customer-case-number { color: #8aa299; font-variant-numeric: tabular-nums; }
.customer-case-card h3 { margin: 12px 0 22px; color: var(--promo-ink); font-size: clamp(23px, 2vw, 28px); letter-spacing: -.02em; }
.customer-case-detail { display: grid; gap: 16px; margin: 0 0 26px; }
.customer-case-detail dt { margin-bottom: 5px; color: #234f40; font-size: 12px; font-weight: 700; }
.customer-case-detail dd { margin: 0; color: var(--promo-muted); font-size: 14px; line-height: 1.8; }
.customer-case-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; margin: auto 0 0; padding: 24px 0 0; border-top: 1px solid var(--promo-line); }
.customer-case-metrics > div { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.customer-case-metrics dt { color: var(--promo-muted); font-size: 12px; }
.customer-case-metrics dd { margin: 0; color: var(--promo-green); font-size: clamp(25px, 2.4vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.customer-case-source { margin: 20px 0 0; color: #6e8177; font-size: 11px; line-height: 1.7; }
.customer-case-source a { color: #36786f; text-decoration: underline; text-underline-offset: 3px; }
.customer-case-source a:focus-visible { outline: 2px solid #36786f; outline-offset: 4px; }
@media (max-width: 700px) {
  .customer-case-grid { grid-template-columns: 1fr; gap: 16px; }
  .customer-case-card { padding: 24px; }
  .customer-case-detail dd { font-size: 13px; }
  .customer-case-metrics { gap: 18px 16px; padding-top: 20px; }
}

/* 五项能力用图文一体的横向画面展示，文字叠加在图片留白区。 */
body[data-page="home"] .feature-showcase { display: block; padding: 0; overflow: hidden; border-radius: 20px; border: 1px solid #dce8e1; background: #fff; box-shadow: 0 18px 48px rgba(20, 62, 46, .05); }
body[data-page="home"] .feature-showcase .tour-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 10px; border-radius: 0; background: #fff; overflow: visible; }
body[data-page="home"] .feature-showcase .tour-nav button { justify-content: center; gap: 9px; width: 100%; min-height: 60px; padding: 10px 8px; border-radius: 8px; font-size: 14px; }
body[data-page="home"] .feature-showcase .tour-nav .glyph { width: 30px; height: 30px; background: transparent; }
body[data-page="home"] .feature-showcase .tour-nav button[aria-selected="true"] { background: #e5f1e9; border-color: transparent; color: #175b49; box-shadow: none; }
body[data-page="home"] .feature-showcase .tour-nav button[aria-selected="true"] .glyph { background: transparent; color: #175b49; }
body[data-page="home"] .feature-showcase .tour-nav button:hover { background: #f0f6f2; }
body[data-page="home"] .feature-showcase .feature-stage { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
body[data-page="home"] .feature-showcase .slide { display: block; grid-area: 1 / 1; position: relative; isolation: isolate; min-height: 440px; aspect-ratio: 16 / 9; overflow: hidden; visibility: hidden; pointer-events: none; background: #edf5ef; transform: translateX(var(--slide-offset, 100%)); }
body[data-page="home"] .feature-showcase[data-feature-ready] .slide { transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
body[data-page="home"] .feature-showcase .slide.is-on, body[data-page="home"] .feature-showcase .slide.is-visible { visibility: visible; }
body[data-page="home"] .feature-showcase .slide.is-on { pointer-events: auto; transform: translateX(var(--slide-offset, 0%)); }
body[data-page="home"] .feature-showcase .slide.is-staging { transition: none; }
body[data-page="home"] .feature-showcase .art { position: absolute; inset: 0; z-index: -1; margin: 0; border: 0; border-radius: 0; }
body[data-page="home"] .feature-showcase .art img { width: 100%; height: 100%; object-fit: cover; }
body[data-page="home"] .feature-showcase .art picture { display: block; width: 100%; height: 100%; }
body[data-page="home"] .feature-showcase .slide-copy { position: absolute; top: 50%; left: 5%; width: 28%; min-height: 0; gap: 0; padding: 0; transform: translateY(-50%); }
body[data-page="home"] .feature-showcase .slide-copy > span { font-size: 12px; letter-spacing: .12em; }
body[data-page="home"] .feature-showcase .slide-copy h3 { margin: 24px 0 20px; color: #103f35; font-size: clamp(28px, 3.2vw, 43px); line-height: 1.25; letter-spacing: -.035em; text-wrap: balance; }
body[data-page="home"] .feature-showcase .slide-copy p { max-width: 390px; margin: 0; color: #426458; font-size: 15px; line-height: 1.85; text-wrap: pretty; }
body[data-page="home"] .feature-showcase .workflow-points { gap: 8px; margin-top: 26px; }
body[data-page="home"] .feature-showcase .workflow-points li { padding: 6px 10px; background: rgba(255,255,255,.65); border-color: rgba(42,103,77,.15); }
/* 渠道品牌标识保留原色，名称与图标共同说明分发入口。 */
body[data-page="home"] .feature-showcase .channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
body[data-page="home"] .feature-showcase .channel-list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border: 1px solid rgba(42,103,77,.12); border-radius: 7px; background: rgba(255,255,255,.72); color: #254e40; font-size: 12px; white-space: nowrap; }
body[data-page="home"] .feature-showcase .channel-list img { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
body[data-page="home"] .feature-showcase .carousel-bar { grid-area: 2 / 1; position: relative; justify-content: center; min-height: 56px; margin: 0; padding: 8px 24px; border-top: 1px solid #dce8e1; background: #fff; }
body[data-page="home"] .feature-progress { display: flex; gap: 6px; }
body[data-page="home"] .feature-progress span { width: 28px; height: 3px; border-radius: 2px; background: #dbe7df; transition: background-color 160ms ease; }
body[data-page="home"] .feature-progress .is-current { background: #36786a; }
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .feature-showcase[data-feature-ready] .slide { transition: none; }
  body[data-page="home"] .feature-progress span { transition: none; }
}
@media (max-width: 900px) {
  body[data-page="home"] .feature-showcase .tour-nav button { font-size: 12px; gap: 5px; }
  body[data-page="home"] .feature-showcase .tour-nav .glyph { width: 24px; height: 24px; }
}
@media (max-width: 900px) {
  body[data-page="home"] .feature-showcase { border-radius: 16px; }
  body[data-page="home"] .feature-showcase .tour-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; gap: 2px; }
  body[data-page="home"] .feature-showcase .tour-nav button { width: 100%; min-height: 44px; padding: 8px 2px; font-size: 10px; }
  body[data-page="home"] .feature-showcase .tour-nav .glyph { display: none; }
  body[data-page="home"] .feature-showcase .slide { min-height: max(710px, calc(380px + (100vw - 64px) * .84)); aspect-ratio: auto; }
  body[data-page="home"] .feature-showcase .slide-copy { top: 30px; right: 24px; left: 24px; width: auto; transform: none; }
  body[data-page="home"] .feature-showcase .slide-copy h3 { margin: 16px 0 14px; font-size: 30px; }
  body[data-page="home"] .feature-showcase .slide-copy p { font-size: 13px; line-height: 1.75; }
  body[data-page="home"] .feature-showcase .workflow-points { margin-top: 18px; gap: 6px; }
  body[data-page="home"] .feature-showcase .workflow-points li { font-size: 10px; }
  body[data-page="home"] .feature-showcase .art { inset: 290px 0 0; }
  body[data-page="home"] .feature-showcase .distribution-slide { min-height: max(710px, calc(380px + (100vw - 64px) * .84)); }
  body[data-page="home"] .feature-showcase .distribution-slide .art { inset: 380px 0 0; }
  body[data-page="home"] .feature-showcase .channel-list { margin-top: 16px; gap: 6px; }
  body[data-page="home"] .feature-showcase .channel-list li { padding: 6px 8px; font-size: 11px; }
  body[data-page="home"] .feature-showcase .art img { object-fit: contain; object-position: center; }
  body[data-page="home"] .feature-showcase .art::after { position: absolute; top: 0; right: 0; left: 0; height: 36px; background: linear-gradient(#edf5ef, transparent); content: ""; pointer-events: none; }
  body[data-page="home"] .feature-showcase .carousel-bar { padding: 8px 16px; }
}