/* ============================================================
   官网三页 · 视觉稿组件层（从 design-preview 验收稿移植）
   作用域：仅 index / features / solutions 三页引用
   ⚠️ 只放「视觉稿新增组件」，通用类（.btn/.section/.hero/.card/.grid/
      .mod-tag/.domain-head...）一律不重复定义，全部沿用 style.css，
      否则会覆盖正式站既有样式、波及 pricing / about 等页面。
   ============================================================ */

/* 平滑滚动会干扰浏览器「返回上一页」的滚动位置恢复（已知引擎问题），
   三页内关闭，保证从功能页/行业方案页返回首页时停在原位 */
html { scroll-behavior: auto; }

/* ---------- 小工具类 ---------- */
.tiny { font-size: 12px; color: var(--stone); }
.muted { color: var(--steel); }
.hero-legal { font-size: 12px; color: var(--stone); margin-top: 10px; line-height: 1.6; }
/* Hero 差异化要点：填充左栏，突出与竞品的不同 */
.hero-points { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.hero-points li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.6; color: var(--charcoal); }
.hero-points li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-tint); color: var(--primary-deep); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.hero-points b { font-weight: 600; color: var(--ink); }

/* ---------- index · 营销与 AI 能力区：省钱对照条 ---------- */
.save-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.save-item { background: var(--surface-tint); border: 1px solid var(--surface-tint-border); border-radius: 18px; padding: 16px 18px; }
.save-k { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.save-old { display: block; font-size: 12.5px; color: var(--stone); line-height: 1.5; }
.save-new { display: block; font-size: 12.5px; color: var(--primary-deep); font-weight: 600; margin-top: 3px; line-height: 1.5; }
.save-note { margin-top: 12px; text-align: center; }
@media (max-width: 991px) { .save-strip { grid-template-columns: 1fr; gap: 10px; } }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.section-head.spaced { margin-top: 58px; }
.section-head.tight { margin-bottom: 24px; }

/* ============================================================
   index · Hero 产品界面示意（.dash）——取代原 SVG 占位图
   ============================================================ */

.dash-stage { position: relative; margin-top: 0; margin-right: 24px; z-index: 2; }
.dash {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.dash-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; background: var(--surface-soft); border-bottom: 1px solid var(--hairline); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.dash-bar .dt { font-size: 11.5px; font-weight: 600; color: var(--charcoal); margin-left: 6px; }
.dash-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.dash-body { padding: 14px; }

.dash-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.dash-sname { font-size: 12.5px; font-weight: 600; }
.dash-chip { font-size: 9.5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--primary-deep); font-weight: 600; }
.dash-date { margin-left: auto; font-size: 9.5px; color: var(--stone); }

.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
.dash-kpi { background: var(--surface-soft); border-radius: 14px; padding: 11px 13px; }
.dash-kpi.acc { background: var(--surface-tint); }
.dash-kpi .l { font-size: 10px; color: var(--steel); margin-bottom: 4px; }
.dash-kpi .v { font-size: 22px; font-weight: 600; letter-spacing: -.7px; line-height: 1.1; }
.dash-kpi .v small { font-size: 11px; font-weight: 500; color: var(--stone); margin-left: 1px; }
.dash-kpi .t { font-size: 9.5px; margin-top: 4px; color: var(--steel); }

.dash-panel { background: var(--surface-soft); border-radius: 14px; padding: 11px 13px; margin-bottom: 11px; }
.dash-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.dash-pt { font-size: 11px; font-weight: 600; }
.dash-ps { font-size: 9.5px; color: var(--stone); }

/* 近 7 日营收柱图 */
.dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.dash-bw { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.dash-bv { font-size: 8px; color: var(--steel); letter-spacing: -.2px; }
.dash-bk { width: 100%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--primary-soft) 0%, var(--primary) 100%); opacity: .78; }
.dash-bw.td .dash-bk { opacity: 1; box-shadow: 0 3px 7px -2px rgba(37, 99, 235, .45); }
.dash-bw.td .dash-bv { color: var(--primary-deep); font-weight: 600; }
.dash-bl { font-size: 8.5px; color: var(--stone); }

/* 今日待办 */
.dash-todo { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e6ebf1; }
.dash-todo:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-td { width: 5px; height: 5px; border-radius: 50%; margin-top: 5px; flex: none; }
.dash-tt { font-size: 10.5px; line-height: 1.5; }
.dash-tt em { font-style: normal; color: var(--stone); font-size: 9.5px; display: block; }

/* 单一场景：接下来到店 */
.dash-scene { border: 1px solid var(--hairline); border-radius: 15px; padding: 12px 13px; margin-bottom: 11px; box-shadow: 0 6px 14px -9px rgba(10,19,23,.16); }
.dash-sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-sl { font-size: 10px; color: var(--stone); }
.dash-sbadge { font-size: 9.5px; padding: 2px 9px; border-radius: var(--radius-pill); background: #fff2f4; color: #c03050; font-weight: 600; }
.dash-guest { display: flex; align-items: center; gap: 10px; }
.dash-avt { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #ffb1c1, #f472a0); color: #fff; font-size: 12px; font-weight: 600; flex: none; }
.dash-gname { font-size: 12px; font-weight: 600; }
.dash-gtag { font-size: 9px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--primary-deep); margin-left: 5px; }
.dash-gmeta { font-size: 9.5px; color: var(--steel); margin-top: 3px; display: block; }
.dash-gtime { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--primary-deep); }

/* AI 营销助手 */
.dash-ai { background: linear-gradient(120deg, var(--surface-tint) 0%, var(--surface-tint-strong) 100%); border: 1px solid var(--surface-tint-border); border-radius: 14px; padding: 11px 12px; display: flex; gap: 9px; align-items: flex-start; }
.dash-aiav { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, #ff9b5c, #f97316); color: #fff; font-size: 12px; flex: none; }
.dash-ait { font-size: 10px; color: var(--primary-deep); font-weight: 600; margin-bottom: 4px; display: block; }
.dash-aix { font-size: 10.5px; color: var(--steel); line-height: 1.6; }

.dash-foot { font-size: 9px; color: var(--stone); text-align: center; padding: 9px 0 2px; }

/* 手机浮层 */
.dash-phone { position: absolute; right: -16px; bottom: -28px; width: 124px; background: #fff; border: 1px solid var(--hairline); border-radius: 17px; padding: 7px; box-shadow: 0 20px 40px -12px rgba(10,19,23,.22); }
.dash-pnotch { width: 34px; height: 3px; border-radius: 3px; background: #e2e6eb; margin: 2px auto 7px; }
.dash-pscr { background: var(--surface-soft); border-radius: 12px; padding: 9px; }
.dash-ptitle { font-size: 9px; color: var(--stone); margin-bottom: 6px; letter-spacing: .3px; }
.dash-pitem { background: #fff; border-radius: 10px; padding: 8px 9px; }
.dash-pdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--critical); margin-right: 4px; vertical-align: 1px; }
.dash-pscr .dash-pt { font-size: 9px; color: var(--critical); }
.dash-pn { font-size: 11px; font-weight: 600; margin-top: 3px; }
.dash-pd { font-size: 9px; color: var(--steel); margin-top: 2px; }
.dash-pf { font-size: 8.5px; color: var(--stone); text-align: center; margin-top: 7px; }

@media (max-width: 991px) {
  .dash-phone { position: static; margin: 16px auto 0; right: auto; bottom: auto; }
  .dash-stage { display: flex; flex-direction: column; align-items: center; margin-top: 0; margin-right: 0; }
  .dash { width: 100%; }
}

/* ============================================================
   index · 三端并排（竞品官网只提文字，我们做真实界面并排）
   ============================================================ */
.ends { display: grid; grid-template-columns: 168px 1fr 1.5fr; gap: 20px; align-items: end; margin-top: 46px; }
.end { background: #fff; border: 1px solid var(--hairline); border-radius: 20px; padding: 9px; box-shadow: 0 18px 40px -20px rgba(10,19,23,.2); }
.end-label { font-size: 11px; color: var(--stone); text-align: center; margin-bottom: 9px; }
.end-screen { background: var(--surface-soft); border-radius: 14px; padding: 11px; }
.end-title { font-size: 10.5px; font-weight: 600; margin-bottom: 8px; }
.end-line { background: #fff; border-radius: 8px; padding: 7px 9px; margin-bottom: 5px; }
.end-line:last-child { margin-bottom: 0; }
.end-t1 { font-size: 10px; font-weight: 600; }
.end-t2 { font-size: 8.5px; color: var(--stone); margin-top: 2px; }
.end-row { display: flex; gap: 6px; margin-bottom: 6px; }
.end-box { flex: 1; background: #fff; border-radius: 8px; padding: 7px 8px; }
.end-box .k { font-size: 8.5px; color: var(--stone); }
.end-box .v { font-size: 13px; font-weight: 600; letter-spacing: -.3px; margin-top: 2px; }
.end-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; background: #fff; border-radius: 8px; padding: 8px 9px; }
.end-bk { flex: 1; border-radius: 3px; background: linear-gradient(180deg, var(--primary-soft), var(--primary)); opacity: .8; }
.end-note { font-size: 11.5px; color: var(--stone); text-align: center; margin-top: 16px; }

@media (max-width: 1099px) {
  .ends { grid-template-columns: 1fr 1fr; }
  .ends .end:last-child { grid-column: span 2; }
}
@media (max-width: 767px) {
  .ends { grid-template-columns: 1fr; }
  .ends .end:last-child { grid-column: span 1; }
}

/* ============================================================
   features · 能力地图
   ============================================================ */
.map-flow { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.mf-step { font-size: 12.5px; padding: 7px 16px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--steel); }
.mf-step.tail { background: var(--surface-tint); color: var(--primary-deep); font-weight: 600; }
.mf-arrow { color: var(--stone); padding: 0 9px; font-size: 12px; }

/* 2026-10-03：能力地图由 5 个业务域扩到 6 个（新增「经营决策」），
   5 列会让第 6 张卡单独掉行且只有 20% 宽，改 3 列 → 6 张卡正好两行整齐。 */
.mapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dcard { background: #fff; border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.dcard-top { padding: 14px 15px 12px; border-bottom: 1px solid var(--hairline); }
.dcard.acc .dcard-top { background: var(--surface-tint); }
.d-idx { font-size: 10px; color: var(--primary-deep); font-weight: 700; letter-spacing: .5px; }
.d-name { font-size: 14.5px; font-weight: 600; margin-top: 4px; letter-spacing: -.2px; }
.d-role { font-size: 10.5px; color: var(--stone); margin-top: 3px; }
.dcard-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dmod { font-size: 11.5px; padding: 6px 10px; border-radius: 9px; background: var(--surface-soft); line-height: 1.35; }
.dmod em { font-style: normal; display: block; font-size: 9.5px; color: var(--stone); margin-top: 2px; }
.dcard-foot { padding: 10px 13px 12px; border-top: 1px dashed var(--hairline); font-size: 10px; color: var(--stone); }

.mapnote { margin-top: 16px; font-size: 12px; color: var(--stone); text-align: center; }

@media (max-width: 1099px) { .mapgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .mapgrid { grid-template-columns: 1fr; } }

/* ============================================================
   features · 「同一个模块，三个行业长成三种样子」
   ============================================================ */
.indsplit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.isp { background: #fff; border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; }
.isp-head { padding: 11px 14px; background: var(--surface-soft); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.isp-tag { font-size: 9.5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--primary-deep); font-weight: 600; }
.isp-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.isp-row { font-size: 11.5px; padding: 6px 9px; border-radius: 8px; background: var(--surface-soft); }
.isp-row b { color: var(--primary-deep); font-weight: 600; }

@media (max-width: 767px) { .indsplit { grid-template-columns: 1fr; } }

/* ============================================================
   solutions · 三行业共同的隐痛
   2026-10-30：原为粉底 + 粉描边（#f0d2d9 / #fff7f8 / #e6cfd5），与全站蓝色主色系不搭，
   改为浅蓝底块（--surface-tint → --surface-tint-strong）+ 浅蓝描边，字色与卡片沿用中性体系。
   ============================================================ */
.ache { border: 1px solid var(--surface-tint-border); background: linear-gradient(120deg, var(--surface-tint) 0%, var(--surface-tint-strong) 100%); border-radius: 22px; padding: 24px 26px; margin-bottom: 18px; }
.ache-head { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 6px; }
.ache-sub { font-size: 13px; color: var(--steel); margin-bottom: 18px; }
.ache-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ache-item { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; }
.ache-ind { font-size: 10px; color: var(--stone); margin-bottom: 5px; }
.ache-txt { font-size: 13px; font-weight: 600; line-height: 1.45; }
.ache-fix { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hairline); font-size: 13px; line-height: 1.6; }
.ache-fix b { color: var(--primary-deep); }

@media (max-width: 767px) {
  .ache-grid { grid-template-columns: 1fr; }
  .ache { padding: 20px 18px; }
}

/* ============================================================
   solutions · 痛点 → 解法 对照图
   ============================================================ */
.ind { margin-bottom: 46px; }
.ind-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.ind-name { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.ind-chip { font-size: 11px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--primary-deep); font-weight: 600; }

.pswrap { border: 1px solid var(--hairline); border-radius: 22px; overflow: hidden; }
.ps-head { display: grid; grid-template-columns: 1fr 72px 1fr; background: var(--surface-soft); font-size: 11.5px; color: var(--steel); padding: 10px 18px; }
.psrow { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; padding: 14px 18px; border-top: 1px solid var(--hairline); }
.ps-pain { font-size: 13.5px; line-height: 1.5; display: flex; gap: 9px; align-items: flex-start; }
/* 痛点序号徽标：原为粉底粉字（#fff0f3 / #c03050），与隐痛板块同批改为主色系 */
.ps-pno { width: 19px; height: 19px; border-radius: 6px; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--surface-tint); color: var(--primary-deep); margin-top: 1px; }
.ps-arw { display: flex; justify-content: center; }
.ps-arw span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-tint); color: var(--primary-deep); font-size: 13px; }
.ps-solve { font-size: 13.5px; line-height: 1.5; }
.ps-solve small { display: block; font-size: 11px; color: var(--steel); margin-top: 3px; }

.ind-fields { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; align-items: center; }
.ind-flabel { font-size: 11px; color: var(--stone); margin-right: 2px; }
.ind-field { font-size: 11.5px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--primary-deep); font-weight: 600; }

@media (max-width: 767px) {
  .ps-head { display: none; }
  .psrow { grid-template-columns: 1fr; gap: 8px; }
  .ps-arw { justify-content: flex-start; }
}