/* ================================================================
   FireStone 官网首页 V2（内容改版 Demo）
   —— 少文字 · 多图表
   加载在 site.css 之后，复用其设计令牌，只新增本版专属组件
   ================================================================ */

/* ★ 补齐 site.css 未定义的令牌 —— 不补会整条声明失效、背景变透明，
   而文字仍是浅色，直接导致「模块没颜色、字看不清」（此前 .d2-reply / .quote / .f2 都中招） */
:root {
  --cyan: #2fa5e1;                    /* 辅助青（图表第二段） */
  --green-bg: rgba(45, 138, 78, .10); /* 成功态浅底 */
  --navy-800: #0d1b2f;                /* 深海军蓝：深色面板 / 引用块 */
  --navy-600: #1b2740;
}

/* ---------- ① 顶部提示条：主卖点前置（0-1 获客 / 询盘 / 成交） ---------- */
.announce {
  position: relative; z-index: 210;
  background: linear-gradient(100deg, #0d1b2f 0%, #1b2740 58%, #2a2350 100%);
  color: var(--on-ink); font-size: 12.5px;
}
.announce .wrap { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
.announce .tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 20px; color: #fff;
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
}
.announce .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce .txt b { color: #fff; font-weight: 650; }
.announce .txt i { font-style: normal; color: var(--on-ink-3); }
.announce .go { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 5px; color: var(--brand-3); font-weight: 600; }
.announce .go svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.announce .x { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--on-ink-3); }
.announce .x:hover { background: rgba(255,255,255,.1); color: #fff; }
.announce.hide { display: none; }

/* ---------- ② 首屏：3 步自动演示（替代静态假图） ---------- */
.demo-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.demo-steps .s {
  flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  font-size: 11.5px; color: var(--on-ink-3); transition: all .3s var(--ease);
}
.demo-steps .s i {
  width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; font-style: normal;
  background: rgba(255,255,255,.12); color: var(--on-ink-2); font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.demo-steps .s.on { background: rgba(53,103,250,.28); box-shadow: inset 0 0 0 1px rgba(53,103,250,.6); color: #fff; }
.demo-steps .s.on i { background: var(--brand); color: #fff; }
.demo-steps .s.done { color: var(--on-ink-2); }
.demo-steps .s.done i { background: rgba(28,163,85,.9); color: #fff; }

/* 首屏信任数字（★静态兜底：HTML 里就是最终值） */
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.hero-trust .t { }
.hero-trust b { display: block; font-size: 21px; font-weight: 730; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.hero-trust span { font-size: 11.5px; color: var(--on-ink-3); }

/* ---------- ③ 全链路地图 ---------- */
.chain { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.chain .node {
  flex: 1 1 0; min-width: 92px; position: relative; text-align: center; padding: 16px 8px 14px;
  border-radius: var(--r); transition: background .2s, transform .2s var(--ease);
}
.chain .node:hover { background: var(--paper-2); transform: translateY(-2px); }
.chain .node::after {
  content: ""; position: absolute; top: 35px; right: -7px; width: 14px; height: 1.5px;
  background: var(--line); z-index: 1;
}
.chain .node:last-child::after { display: none; }
.chain .ico {
  width: 36px; height: 36px; margin: 0 auto 9px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.chain .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chain .nm { font-size: 12.5px; font-weight: 680; letter-spacing: -.2px; }
.chain .ds { font-size: 10.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }

/* ---------- ③ 主要卖点：0 → 1 获客 · 询盘 · 成交 ---------- */
.ms3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.ms3 .m {
  position: relative; padding: 24px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.ms3 .m:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-line); }
.ms3 .m::after {
  content: ""; position: absolute; top: 50%; right: -14px; width: 13px; height: 13px;
  border-top: 1.6px solid var(--brand); border-right: 1.6px solid var(--brand);
  transform: translateY(-50%) rotate(45deg); opacity: .5; z-index: 2;
}
.ms3 .m:last-child::after { display: none; }
.ms3 .idx {
  position: absolute; top: 14px; right: 20px; font-size: 44px; font-weight: 800;
  letter-spacing: -2px; color: var(--text); opacity: .07; line-height: 1;
}
.ms3 .stg { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ms3 .stg-num {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
  padding: 3px 9px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.ms3 .stg-t { font-size: 17px; font-weight: 720; letter-spacing: -.4px; }
.ms3 .pain {
  font-size: 13px; color: var(--text-3); line-height: 1.6;
  padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px;
}
.ms3 .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ms3 .acts span {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
}
.ms3 .gain {
  font-size: 13px; color: var(--text); font-weight: 550; line-height: 1.65;
  padding: 11px 13px; border-radius: var(--r-sm); background: var(--green-bg);
}
.ms-note { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 26px; }

/* ---------- ④ WOW Demo 通用 ---------- */
.wow { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: center; }
.wow.rev { grid-template-columns: 1.18fr .82fr; }
.wow.rev .wow-copy { order: 2; }
.wow-copy .wow-kicker {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--brand); margin-bottom: 14px;
}
.wow-copy .wow-kicker b {
  width: 20px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.wow-copy h3 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 720; letter-spacing: -.7px; line-height: 1.32; margin-bottom: 14px; }
.wow-copy p { font-size: 14.5px; color: var(--text-2); line-height: 1.75; }
.wow-copy .feels { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.wow-copy .feels li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.wow-copy .feels svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; stroke: var(--brand); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.wow-panel {
  border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.wow-panel .ph {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  border-bottom: 1px solid var(--line-2); background: var(--paper-2);
}
.wow-panel .ph i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wow-panel .ph i:first-child { background: #f2705a; }
.wow-panel .ph i:nth-child(2) { background: #f0b84f; }
.wow-panel .ph i:nth-child(3) { background: #4ec27e; }
.wow-panel .ph span { margin-left: 7px; font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.wow-panel .pb { padding: 16px; }

/* Demo1 内部 */
.d1-input {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px dashed var(--brand-line); font-size: 13px;
}
.d1-input .k { font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); padding: 2px 8px; border-radius: 6px; }   /* ★ 原 --brand 对浅蓝底 3.96:1 */
.d1-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.d1-step { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.d1-step:last-child { padding-bottom: 0; }
.d1-step::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1.5px; background: var(--line); }
.d1-step:last-child::before { display: none; }
.d1-step .d { width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand); display: flex; align-items: center; justify-content: center; z-index: 1; }
.d1-step.g .d { background: var(--green); }
.d1-step .c { flex: 1; min-width: 0; }
.d1-step .t { font-size: 12.5px; font-weight: 680; }
.d1-step .x { font-size: 11.5px; color: var(--text-2); margin-top: 2px; line-height: 1.55; }
.bars-mini { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.bars-mini .r { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
/* ★★ 这一条要**分上下文**：同类名在两处复用，底色相反 —— 不能全局改（2026-09-23 踩过）
   · 首屏「界面截图」区 .shot-in 是深底 #101a2e → 用浅色（见下方 .shot-in 作用域）
   · WOW 面板里的市场分析块是**白底** → 必须用深色（--text-2，白底 5.64:1）
   曾经把基础规则改成 var(--on-ink-2)，结果首屏修好了、白底那 3 处变成 1.07（等于看不见）。 */
.bars-mini .r .nm { width: 62px; flex-shrink: 0; color: var(--text-2); }
.shot-in .bars-mini .r .nm { color: var(--on-ink-2); }   /* 深底：白底口径会看不见（3.02:1） */
.bars-mini .r .tr { flex: 1; height: 7px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.bars-mini .r .tr i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.bars-mini .r .vl { width: 40px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bars-mini .r.a .tr i { background: linear-gradient(90deg, var(--brand), var(--cyan)); }

/* Demo2 内部（聊天 + AI 输出） */
.d2-chat { display: flex; flex-direction: column; gap: 9px; padding: 14px; background: var(--paper-2); border-radius: var(--r-sm); }
.d2-bub { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.6; background: var(--paper); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.d2-bub .who { font-size: 10.5px; color: var(--text-3); display: block; margin-bottom: 4px; }
.d2-bub.hot { border-color: rgba(229,72,77,.35); background: #fff6f6; }
html[data-x] .d2-bub.hot { }
.d2-out { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.d2-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r-sm); background: var(--paper-2); }
.d2-row .k { width: 76px; flex-shrink: 0; font-size: 11.5px; color: var(--text-3); }
.d2-row .v { flex: 1; font-size: 12.5px; font-weight: 550; line-height: 1.55; }
.d2-row.warn { background: #fff6f6; }
.d2-row.warn .v { color: #c0392f; }
.d2-row.ok { background: var(--green-bg); }
.d2-row.ok .v { color: var(--green); }
.d2-reply { padding: 12px; border-radius: var(--r-sm); background: var(--navy-800); color: var(--on-ink); font-size: 12.5px; line-height: 1.7; }
.d2-reply .en { display: block; }
.d2-reply .cn { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(255,255,255,.18); color: var(--on-ink-2); font-size: 12px; }
.d2-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 3px 8px; border-radius: 6px; }
/* ★ 深色演示面板里的品牌蓝标签：--brand 对深底仅 3.27:1 */
.wow-panel .d2-tag { color: var(--brand-3); background: rgba(91, 155, 255, .16); }

/* Demo3 内部（老板看板） */
.d3-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.d3-kpi div { padding: 11px; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line-2); }
.d3-kpi b { display: block; font-size: 21px; font-weight: 730; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.d3-kpi b.warn { color: var(--amber); }
.d3-kpi b.bad { color: #b91c1c; }   /* ★ 原 #e5484d 对白底 3.76:1 → 6.47:1 */
.d3-kpi span { font-size: 10.5px; color: var(--text-3); }
.funnel { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.funnel .f { display: flex; align-items: center; gap: 10px; }
.funnel .f .bar {
  height: 26px; border-radius: 7px; display: flex; align-items: center; padding: 0 11px;
  color: #fff; font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.funnel .f .lb { font-size: 11.5px; color: var(--text-2); width: 84px; flex-shrink: 0; }
.funnel .f .pc { font-size: 11.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.f1 { background: linear-gradient(90deg, var(--brand), #2857e8); }
.f2 { background: linear-gradient(90deg, #3060d8, #1f7fae); }    /* ★ 原 #3f74f5→白字仅 4.18:1，浅青端仅 2.4:1 */
.f3 { background: linear-gradient(90deg, #1f7fae, #1a6f9e); }    /* ★ 原 #4db3e8→白字仅 2.4:1 */
.f4 { background: linear-gradient(90deg, var(--amber), #9d5a10); }   /* ★ 原 #f0a04f→白字仅 2.4:1 */
.d3-advice {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  font-size: 12.5px; line-height: 1.65; color: var(--text);
}
.d3-advice b { color: var(--brand); }

/* ---------- ⑦ 角色卡片 ---------- */
.role3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.role3 .r { padding: 24px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.role3 .r .who { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--brand); }
.role3 .r h4 { font-size: 19px; font-weight: 720; letter-spacing: -.5px; margin: 8px 0 12px; }
.role3 .r .q { font-size: 13px; color: var(--text-3); font-style: normal; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper-2); margin-bottom: 12px; }
.role3 .r ul { display: flex; flex-direction: column; gap: 8px; }
.role3 .r li { display: flex; gap: 8px; font-size: 13px; color: var(--text-2); }
.role3 .r li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; stroke: var(--brand); fill: none; stroke-width: 2.6; }

/* ---------- ⑧ 价格条 ---------- */
/* ---------- ⑨ 品牌故事 ---------- */
.quote {
  padding: 34px 38px; border-radius: var(--r-xl); background: var(--navy-800); color: var(--on-ink);
  border-left: 4px solid var(--brand);
}
.quote p { font-size: 15.5px; line-height: 1.85; color: var(--on-ink-2); }
.quote p b { color: #fff; font-weight: 650; }
.quote .sig { margin-top: 18px; font-size: 12.5px; color: var(--on-ink-3); }

/* ---------- ⑩ 演示弹窗（3 分钟演示） ---------- */
.modal-card.wide { max-width: 720px; }
.play {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(140deg, var(--navy-800), var(--navy-600));
  display: flex; align-items: center; justify-content: center;
}
.play .btn-play {
  width: 62px; height: 62px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.play .btn-play::after { content: ""; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; margin-left: 5px; }
.play .cap { position: absolute; left: 16px; bottom: 14px; font-size: 12.5px; color: rgba(255,255,255,.72); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .wow, .wow.rev { grid-template-columns: 1fr; gap: 28px; }
  .wow.rev .wow-copy { order: 0; }
  .role3 { grid-template-columns: 1fr 1fr; }
  .chain { gap: 4px; }
  .chain .node { min-width: 88px; flex: 1 1 22%; }
  .chain .node::after { display: none; }
}
@media (max-width: 860px) {
  .announce .wrap { flex-wrap: wrap; gap: 8px; }
  .announce .txt { white-space: normal; font-size: 12px; }
  .announce .go { margin-left: 0; }
  .role3, .ms3 { grid-template-columns: 1fr; }
  .d3-kpi { grid-template-columns: 1fr 1fr; }
  .ms3 .m::after { display: none; }
  .quote { padding: 24px 22px; }
  .hero-trust { gap: 16px 24px; }
}

/* ================================================================
   与 site.css 的衔接：提示条占据顶部，导航与首屏整体下移
   ================================================================ */
:root { --ann-h: 0px; }
.site-nav { top: var(--ann-h, 0px); }
.nav-drawer { top: calc(var(--nav-h) + var(--ann-h, 0px)); }
.hero { padding-top: calc(var(--nav-h) + var(--ann-h, 0px) + 84px); }
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 211; }

/* 首屏右侧三块演示内容：同一位置轮换 */
#heroPanes .pane { display: none; }
#heroPanes .pane.on { display: block; animation: paneIn .32s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero-trust .t { min-width: 84px; }

@media (max-width: 860px) {
  .hero { padding-top: calc(var(--nav-h) + var(--ann-h, 0px) + 40px); }
  .demo-steps { flex-wrap: wrap; }
}

/* V2：压缩纵向留白，减少滚动疲劳 */
.sec { padding: 68px 0; }
.sec.tight { padding: 54px 0; }
.sec-head { margin-bottom: 0; }
@media (max-width: 860px) { .sec { padding: 56px 0; } }

.chain-note { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 22px; }
.chain-note b { color: var(--brand); }

/* ================================================================
   2026-09-18 增量优化（只新增，不改动上面任何既有规则）
   ① 补上首页用到但营销站 CSS 里缺失的 .kv-row / .notice*（原来是无样式裸文本）
   ② WOW Demo 真实界面块（视频输出后台 / 成片局部 / 剪映草稿）
   ③ 案例卡片 / 企业版说明
   （2026-10-15：原「首屏产品输入 + 免费生成出海分析」相关样式已按需求整体删除）
   ================================================================ */

/* ---------- ① 补齐缺失样式：键值行与提示条 ---------- */
.kv-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { flex: none; width: 74px; color: var(--text-3); }
.kv-row .v { flex: 1; min-width: 0; color: var(--text); font-weight: 600; word-break: break-word; }
.notice {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--text-2);
}
.notice-success { border-color: rgba(28, 163, 85, .28); background: rgba(28, 163, 85, .08); color: #157a41; }
.notice-warn { border-color: rgba(232, 129, 27, .30); background: rgba(232, 129, 27, .09); color: #a85c0c; }

/* ══════════════════════════════════════════════════════════════
   ★★ 可读性修复（2026-09-23）：首屏「界面截图」区 `.shot-in` 是**深底**
      （实测背景 #101a2e），但里面复用的是按**浅底**写的组件，两个方向都会挂：
        · 显式用浅底文字色的（.kv-row .k/.v、.d1-step .x）→ 深底上看不见
          （.kv-row .v 实测 1.09＝几乎完全看不见；.d1-step .x 3.02；.kv-row .k 3.49）
        · 反向：`.shot-in` 自身 color 是浅色（--on-ink），而 `.d1-input` 是**浅色卡片**，
          卡片正文继承了浅色 → 浅字叠浅底（实测 1.06）
      做法：按「元素实际坐在什么底色上」逐个纠正，**不整体翻转变量**——
      整体翻转会把 .d1-input 这类浅色卡片一起带坏。
      ★ 这类"同一组件在深浅两种底上复用"的问题，光扫 CSS 变量用法查不出来，
        只能靠「逐元素量真实底色」（见 outputs/_probe_bg.js）。
   ══════════════════════════════════════════════════════════════ */
.shot-in .kv-row .k { color: var(--on-ink-3); }     /* 深底：标签用浅色（原 --text-3 → 3.49） */
.shot-in .kv-row .v { color: var(--on-ink); }       /* 深底：值用近白（原 --text → 1.09，几乎看不见） */
.shot-in .d1-step .x { color: var(--on-ink-2); }    /* 深底：步骤说明（原 --text-2 → 3.02） */
.shot-in .d1-input { color: #16233b; }              /* 浅色卡片：正文必须深色（原来继承浅色 → 1.06） */
.shot-in .notice-success { color: #6ee7a0; border-color: rgba(110, 231, 160, .34); background: rgba(110, 231, 160, .12); }
.shot-in .notice-warn { color: #f0b060; border-color: rgba(240, 176, 96, .34); background: rgba(240, 176, 96, .12); }

/* ---------- ② Demo 内的真实界面块 ---------- */
.d1-sub { font-size: 12px; font-weight: 700; color: var(--text-2); margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; }
.d1-sub::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.ma-ui { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
.ma-side { display: flex; flex-direction: column; gap: 5px; }
.ma-mod { font-size: 11px; padding: 5px 8px; border-radius: 7px; background: var(--paper-2); color: var(--text-3); border: 1px solid var(--line-2); }
.ma-mod.on { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); font-weight: 650; }
.ma-main { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 12px; }
.ma-cap { font-size: 11px; color: var(--text-3); margin-top: 7px; }
.rep-preview { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.rep-preview h5 { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.rep-li { display: flex; gap: 7px; font-size: 11.5px; color: var(--text-2); padding: 3px 0; line-height: 1.55; }
.rep-li b { flex: none; color: var(--brand); font-weight: 700; }
.pdf-card { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--brand-line); background: var(--brand-soft); border-radius: var(--r-sm); }
.pdf-ico { width: 30px; height: 34px; border-radius: 5px; background: #d94a3d; color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.pdf-i { flex: 1; min-width: 0; }
.pdf-i b { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-i span { font-size: 11px; color: var(--text-3); }
.pdf-go { flex: none; font-size: 11.5px; font-weight: 700; color: var(--brand); border: 1px solid var(--brand-line); background: var(--paper); border-radius: 999px; padding: 4px 11px; }
.d2-task { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--brand-line); font-size: 12px; color: var(--text-2); }
.d2-task svg { width: 15px; height: 15px; stroke: var(--brand); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.d2-task b { color: var(--text); }
@media (max-width: 860px) {
  .ma-ui { grid-template-columns: 1fr; }
  .ma-side { flex-direction: row; flex-wrap: wrap; }
  .ma-mod { flex: 0 0 auto; }
}

/* ---------- ④ 案例卡片 / 企业版说明 ---------- */
.cases-note { font-size: 12.5px; color: var(--text-3); margin-top: 16px; text-align: center; }
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.case-tags span { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--text-2); }

}

/* ================================================================
   ⑭ 手机端适配（≤640px）
   实测（390 宽）：桌面版式直接缩小后页高 12551px、顶部提示条高达 119px、
   八节点链路被挤成 3 行小卡片、多处点击目标只有 26–34px。以下按手机使用场景重排。
   ================================================================ */
.txt-sm { display: none; }

/* 锚点跳转（#main / #enterprise）不要被固定导航盖住 */
html { scroll-padding-top: calc(var(--nav-h) + var(--ann-h, 0px) + 14px); }

@media (max-width: 640px) {
  /* ① 顶部提示条：换短文案，高度 119px → ~54px */
  .announce .txt { display: none; }
  .announce .txt-sm { display: block; white-space: normal; font-size: 11.5px; line-height: 1.5; }
  .announce .go { display: none; }
  .announce .wrap { flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 0; padding-top: 7px; padding-bottom: 7px; }
  .announce .tag { font-size: 10px; padding: 2px 7px; }
  .announce .x { width: 40px; height: 40px; margin-left: auto; }

  /* ② 竖向节奏：手机上一屏多看一点内容 */
  .sec { padding: 44px 0; }
  .sec.tight { padding: 36px 0; }
  .sec-sub { font-size: 14.5px; }
  h2.sec-title { font-size: 24px; letter-spacing: -.6px; }   /* ★带 h2：site.css 用的是 h2.sec-title */

  /* ③ 首屏 */
  .hero { padding-top: calc(var(--nav-h) + var(--ann-h, 0px) + 28px); }
  .hero-badge { font-size: 11.5px; padding: 5px 11px; }
  h1.hero-title { font-size: 30px; letter-spacing: -1.1px; margin-bottom: 16px; }
  .hero-sub { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
  .hero-cta { gap: 10px; margin-bottom: 22px; }
  .hero-cta .btn { width: 100%; justify-content: center; }     /* 拇指友好：整行可点 */
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 20px; padding-top: 18px; }
  .hero-trust .t { min-width: 0; }
  .hero-trust b { font-size: 19px; }
  .hero-trust span { font-size: 11px; }
  .demo-steps { gap: 5px; }
  .demo-steps .s { font-size: 10.5px; padding: 6px 8px; gap: 5px; }
  .demo-steps .s i { width: 16px; height: 16px; font-size: 10px; }
  .shot-bar span { font-size: 10.5px; }
  .wow-panel .pb { padding: 13px; }

  /* ④ 八节点链路：横向并排 → 2 列紧凑格（图标在左、文字在右） */
  .chain { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chain .node {
    display: flex; align-items: center; gap: 9px; text-align: left;
    min-width: 0; padding: 10px; border-radius: var(--r-sm);
    background: var(--paper-2); border: 1px solid var(--line-2);
  }
  .chain .node::after { display: none; }
  .chain .ico { width: 30px; height: 30px; margin: 0; flex-shrink: 0; border-radius: 9px; }
  .chain .ico svg { width: 15px; height: 15px; }
  .chain .nm { font-size: 12.5px; line-height: 1.3; }
  .chain .ds { font-size: 10px; margin-top: 2px; line-height: 1.4; }
  .chain-note { font-size: 12px; margin-top: 14px; }

  /* ⑤ 主要卖点 */
  .ms3 { margin-top: 26px; gap: 12px; }
  .ms3 .m { padding: 18px; }
  .ms3 .idx { font-size: 36px; top: 12px; right: 16px; }
  .ms3 .stg-t { font-size: 16px; }
  .ms3 .pain { font-size: 12.5px; padding-bottom: 10px; margin-bottom: 10px; }
  .ms3 .gain { font-size: 12.5px; padding: 10px 11px; }
  .ms-note { font-size: 12px; margin-top: 18px; line-height: 1.6; }

  /* ⑥ 功能全景：8 张卡内距与字号各收一档 */
  .grid { gap: 12px; }
  .card { padding: 20px; }
  .card .ico { width: 38px; height: 38px; margin-bottom: 13px; }
  .card .ico svg { width: 19px; height: 19px; }
  .numcard .num { font-size: 34px; top: 10px; right: 16px; letter-spacing: -1.4px; }
  .card h3 { font-size: 16px; }
  .card p { font-size: 13.5px; line-height: 1.65; }
  .numcard .taglist { margin-top: 13px; gap: 6px; }
  .taglist span { font-size: 11.5px; padding: 3px 9px; }

  /* ⑦ 角色 / 引用 / 企业版说明 / CTA */
  .role3 { gap: 12px; }
  .role3 .r { padding: 20px; }
  .role3 .r h4 { font-size: 17px; }
  .role3 .r ul { gap: 7px; }
  .role3 .r li { font-size: 12.5px; }
  .quote { padding: 22px 18px; border-left-width: 3px; }
  .quote p { font-size: 14px; line-height: 1.8; }
  .ent-note { padding: 18px 16px; }
  .ent-note h3 { font-size: 16px; }
  .ent-points { gap: 7px 8px; margin-bottom: 15px; }
  .ent-points span { font-size: 12px; padding: 6px 10px; }
  .ent-actions .btn { width: 100%; justify-content: center; }
  .cta { padding: 32px 20px; }
  .cta h2 { font-size: 22px; }
  .cta p { font-size: 14px; margin-bottom: 22px; }
  .cta-actions { gap: 10px; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* ⑧ 三块 WOW Demo 面板内部 */
  .wow-copy h3 { font-size: 20px; }
  .wow-copy p { font-size: 13.5px; }
  .wow-copy .feels li { font-size: 12.5px; }
  .d1-input { font-size: 12px; padding: 9px 11px; gap: 8px; }
  .bars-mini .r .nm { width: 54px; font-size: 11px; }
  .bars-mini .r .vl { width: 32px; font-size: 11px; }
  .d2-chat { padding: 11px; }
  .d2-bub { font-size: 12px; max-width: 94%; }
  .d2-row { padding: 8px 10px; gap: 8px; }
  .d2-row .k { width: 62px; font-size: 11px; }
  .d2-row .v { font-size: 12px; }
  .d2-reply { padding: 11px; font-size: 12px; }
  .d3-kpi { gap: 7px; }
  .d3-kpi div { padding: 9px; }
  .d3-kpi b { font-size: 18px; }
  .d3-kpi span { font-size: 10px; }
  .funnel { margin-top: 11px; }
  .funnel .f { gap: 7px; }
  .funnel .f .lb { width: 54px; font-size: 11px; }
  .funnel .f .pc { font-size: 11px; }
  .funnel .f .bar { height: 23px; font-size: 11px; padding: 0 9px; }
  .d3-advice { font-size: 12px; padding: 11px 12px; }

  /* ⑨ 触摸目标：原来多处只有 26–36px */
  .btn-sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav-drawer a { min-height: 46px; display: flex; align-items: center; font-size: 15px; }
  .nav-drawer .btn { min-height: 46px; margin-top: 12px; }
  .faq-q { min-height: 54px; padding: 14px 0; font-size: 15px; }
  .foot-grid a { padding: 9px 0; }
  .sec-sub a { display: inline-block; padding: 9px 0; }

  /* ⑩ iOS：输入框字号 <16px 时聚焦会自动放大整页 */
  .form-row input, .form-row textarea, .form-row select { font-size: 16px; }

  /* ⑪ 关键字滚动带 */
  .marquee { padding: 16px 0; }
  .marquee-in { gap: 30px; animation-duration: 26s; }
  .marquee-in span { gap: 30px; font-size: 13px; }
}

/* 超窄屏：链路改单列 */
@media (max-width: 380px) {
  .chain { grid-template-columns: 1fr; }
  h1.hero-title { font-size: 27px; }
  .funnel .f .lb { width: 46px; }
}

/* 平板（641–860）：功能全景两列，别浪费横向空间 */
@media (min-width: 641px) and (max-width: 860px) {
  .grid.g4 { grid-template-columns: 1fr 1fr; }
  .chain { gap: 6px; }
}