/* ==========================================================================
   归浦官网 V6 · 钉钉语言升级层
   依据 www.dingtalk.com 线上 CSS Modules 实测参数复刻（非臆测）：
     · BannerV2        首屏：padding 120px 64px 28px / 标题 80px·600 / 按钮 56px 胶囊
     · ProductsShowcase 产品卡：radius 12px / shadow 0 4.293px 32.196px rgba(0,0,0,.1)
     · RevealOnScroll  动效：位移 48px · .7s cubic-bezier(.22,1,.36,1)
                      逐字：translateY(.55em) → -.07em → 0 · .62s cubic-bezier(.2,.7,.3,1)
                      列表项：30px · 手绘装饰线 stroke-dasharray 0→1
   本文件在 v5.css 之后加载，同名选择器以后加载者生效，便于整体回滚。
   ========================================================================== */

/* ==========================================================================
   1. 滚动出场动效引擎（复刻钉钉 RevealOnScroll）
   ========================================================================== */

/* 容器：进入视口前下沉 48px，进入后上浮归位
   钉钉原值：hidden → translate3d(0,48px,0)；revealed → opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1) */
html.js .reveal{
  opacity:0;
  transform:translate3d(0,48px,0);
  will-change:opacity,transform;
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}
html.js .reveal.in{opacity:1;transform:translateZ(0)}

/* 首屏元素不做滚动触发，直接用钉钉 mount 动画（位移更小 18px，避免首屏"抖"） */
html.js .rv-mount{animation:rvMount .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes rvMount{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translateZ(0)}
}

/* 逐字出场：钉钉 character-wave
   每个字符包一层 .wv-ch，进入视口后按 --i 递增延迟，形成从左到右的波浪
   注意：不要改 [data-wave] 本身的 display —— h2/h1 需保持 block */
[data-wave] .wv-ch{display:inline-block;will-change:transform,opacity}
[data-wave] .wv-sp{display:inline-block;white-space:pre}
html.js [data-wave]:not(.wv-in) .wv-ch{opacity:0;transform:translateY(.55em)}
html.js [data-wave].wv-in .wv-ch{
  animation:dtWave .62s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 30ms);
}
@keyframes dtWave{
  0%{opacity:0;transform:translateY(.55em)}
  70%{opacity:1;transform:translateY(-.07em)}
  to{opacity:1;transform:translateY(0)}
}

/* 列表/网格逐项出场：钉钉 reveal-item（位移 30px） */
html.js .rv-items > *{opacity:0;transform:translate3d(0,30px,0)}
html.js .rv-items.rv-in > *{
  animation:rvItem .62s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes rvItem{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:translateZ(0)}
}

/* 标题装饰：手绘下划线/圈注，用 stroke-dasharray 从 0 画到 1（钉钉 draw-title-decoration） */
.rv-deco{overflow:visible!important}
html.js .rv-deco [data-deco-path]{stroke-dasharray:0 1.01;stroke-dashoffset:0;opacity:0}
html.js .rv-deco.rv-in [data-deco-path]{
  animation:rvDraw .9s cubic-bezier(.22,1,.36,1) .28s both;
}
@keyframes rvDraw{
  0%{stroke-dasharray:0 1.01;stroke-dashoffset:0;opacity:0}
  1%{opacity:1}
  to{stroke-dasharray:1 1.01;stroke-dashoffset:0;opacity:1}
}

/* ==========================================================================
   2. HERO V7（左文案 + 右双产品预览）
   底色：白 → 暖白 → 浅灰；辅助：极淡冷灰蓝；不做彩色铺底
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAF9 58%,#F5F6F8 100%);
  padding:calc(122px + var(--sat)) 40px 40px;
}
/* 背景层：极淡网格 + 预览区一圈几乎没有的冷光，只衬托不抢眼 */
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg .hb-grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(16,24,40,.026) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(16,24,40,.026) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(120% 88% at 62% 34%,#000 0%,rgba(0,0,0,.42) 52%,transparent 82%);
  mask-image:radial-gradient(120% 88% at 62% 34%,#000 0%,rgba(0,0,0,.42) 52%,transparent 82%);
}
.hero-bg .hb-glow{
  position:absolute;right:-6%;top:6%;width:760px;height:660px;border-radius:50%;
  background:radial-gradient(circle,rgba(219,231,248,.5) 0%,rgba(228,236,250,.24) 42%,transparent 72%);
}
.hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:2}
.hero-grid{
  /* V8 布局：左右栏宽比微调（1.16/.92 → 1.06/1），右栏获得更接近正方的高卡片，
     两侧视觉配重更均衡；顶部/底部由两侧内容自然决定，两栏内部分别垂直居中 */
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(36px,4.2vw,58px);align-items:stretch;
}
/* 左栏：内容整体上下居中；右栏：外壳由 JS 精确锚定（顶对标题、底对数据卡）
   V9：左栏改为「整体居中」——所有子元素水平居中排列（标签 / 主标题 / 副标题 /
   按钮 / 数据卡 / 口径说明），并让内部块级元素按内容宽度收拢，避免拉伸变形 */
.hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}
.hero-preview{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
/* 底部一层极淡收口，衔接下方浅灰底 */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(245,246,248,0) 0%,rgba(245,246,248,.9) 100%);
}

/* ---------- 左侧文案 ----------
   V9：由左对齐改为整体居中（.hero-copy 已是 align-items:center 的纵向 flex，
   这里再显式声明 text-align:center，保证行内文字/多行文本同样居中） */
.hero-copy{text-align:center;min-width:0}

/* 品牌标签：轻量胶囊 + 极淡描边（不是厚重卡片） */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;letter-spacing:.012em;
  color:rgba(24,28,31,.76);background:rgba(255,255,255,.76);
  border:1px solid rgba(16,24,40,.08);
  border-radius:999px;padding:8px 17px;margin-bottom:24px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-badge svg{color:var(--brand);flex:none;width:14px;height:14px}

/* 主标题：收敛到 62px（比 80px 更克制），中文行高 1.2
   行内不换行，由 JS 按容器宽度逐级缩字号，避免"真正理解"被拦腰拆断
   V9：左栏整体居中后，两行各自以自身内容宽度居中（nowrap + text-align:center） */
.hero-type .ht-line{position:relative;display:block;white-space:nowrap;text-align:center}
.hero .hero-type,
.hero h1.display{
  font-size:clamp(30px,4vw,60px);font-weight:600;line-height:1.24;
  letter-spacing:-.012em;color:#0A0A0A;
  text-align:center;
  /* 字号自适应由 JS 一次性落位；这里给个过渡，避免任何重排造成"瞬跳" */
  transition:font-size .28s cubic-bezier(.22,1,.36,1);
}
/* 第二行「从这里开始」比第一行略小，形成层级而非等重堆叠 */
.hero-type .ht-l2{font-size:.92em;letter-spacing:-.008em}
.hero h1.display{margin:0}

/* 逐字：保留钉钉 character-wave（位移 + 微回弹） */
.ht-char{
  display:inline-block;opacity:0;transform:translateY(.55em);filter:none;
  transform-origin:50% 100%;will-change:transform,opacity;transition:none;
}
html.js .hero-type.typing .ht-char.on{
  animation:dtWave .62s cubic-bezier(.2,.7,.3,1) both;
}
html:not(.js) .ht-char{opacity:1;transform:none}
.hero-type.typed .ht-char{opacity:1;transform:none;will-change:auto}

/* 关键词：极淡色块（保持归浦蓝 10% 透明，不用渐变/发光） */
.hero-type .bub{
  display:inline-block;position:relative;z-index:1;
  border-radius:12px;padding:.02em .24em;margin:0 .03em;
  background:rgba(109,94,224,.09);color:var(--brand-deep);
}
.hero-type .bub.violet{background:rgba(109,94,224,.09);color:var(--brand-deep)}
html.js .hero-type.typed::after{display:none}
html.js .hero-type.typed .bub{animation:none}
.hero-deco-ul{
  position:absolute;left:-6px;bottom:-.10em;width:112px;height:auto;
  pointer-events:none;z-index:0;color:var(--brand);
}
.hero-deco-ul path{stroke:currentColor;stroke-width:3.4;fill:none;stroke-linecap:round}

/* 副标题：两条产品线各占一行（1/2 编号 + 产品名 + 简述），形成清单式层级
   V9：整体居中——容器按内容宽度收拢（fit-content），使其在居中父级下不被拉伸；
   两条 .hs-line 改为整行居中（justify-content:center），保持"编号+产品名+简述"成组居中 */
.hero-sub{
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.78;
  color:rgba(24,28,31,.6);margin-top:20px;max-width:34em;
  width:fit-content;margin-left:auto;margin-right:auto;text-align:center;
}
.hero-sub .hs-lead{
  display:block;font-size:13px;font-weight:400;color:rgba(24,28,31,.46);
  letter-spacing:.01em;margin-bottom:9px;text-align:center;
}
.hero-sub .hs-line{
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:7px;
  padding:2px 0;
}
.hero-sub .hs-num{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  font-size:10.5px;font-style:normal;font-weight:700;
  color:var(--brand-deep);background:rgba(109,94,224,.11);
  transform:translateY(-1px);
}
.hero-sub .hs-line b{color:#181C1F;font-weight:600}
.hero-sub .hs-line em{
  font-style:normal;font-weight:400;color:rgba(24,28,31,.52);font-size:.93em;
}
.hero-sub .hs-line + .hs-line{margin-top:5px}

/* ---------- 双入口按钮（一黑一白，左右并排，两枚严格等宽等高） ----------
   V9：整体居中——grid 容器按内容宽度收拢并水平居中 */
.hero-actions{
  margin-top:30px;
  /* 两列等分：两枚按钮宽度严格一致（内容长短不影响） */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;width:100%;max-width:400px;
  margin-left:auto;margin-right:auto;
  position:relative;z-index:2;
}
.hero-actions .btn{
  height:44px;border-radius:11px;padding:0 34px 0 15px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:500;width:100%;min-width:0;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,
             background-color .2s ease,border-color .2s ease,color .2s ease;
}
.hero-actions .ha-txt{display:flex;align-items:center;justify-content:center;line-height:1.2;min-width:0}
.hero-actions .ha-txt b{font-size:13.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap}
.hero-actions .btn{position:relative}
.hero-actions .btn .arw{width:13px;height:13px;flex:none;position:absolute;right:14px}

body.gp-home .hero-actions .btn-primary,
.hero-actions .btn-primary{
  background:#111114!important;background-image:none!important;
  border:1px solid #111114!important;color:#fff!important;
  box-shadow:0 1px 3px rgba(10,10,10,.10),0 6px 16px rgba(10,10,10,.12);
}
body.gp-home .hero-actions .btn-primary:hover,
.hero-actions .btn-primary:hover{
  background:#000!important;border-color:#000!important;
  transform:translateY(-1px);box-shadow:0 3px 8px rgba(10,10,10,.14),0 10px 24px rgba(10,10,10,.18);
}
body.gp-home .hero-actions .btn-primary:focus-visible,
.hero-actions .btn-primary:focus-visible{outline:2px solid #0A0A0A;outline-offset:3px}

.hero-actions .btn-line{
  background:#fff;color:#17181C;border:1px solid rgba(16,24,40,.14);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.hero-actions .btn-line:hover{
  background:#fff;border-color:rgba(16,24,40,.34);
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,24,40,.09);
}
.hero-actions .btn-line:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.hero-actions .btn .arw{flex:none;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.hero-actions .btn:hover .arw{transform:translateX(3px)}
.hero-actions .btn:active{transform:translateY(0) scale(.985)}

/* ---------- 数据带：液态玻璃卡片（覆盖 v5 的实心彩底），数字放大 ---------- */
/* 桌面：四列等分，左右严格对齐（grid 1fr×4，不再用内容自适应宽度） */
.hero-copy .hero-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;                /* 同行卡片严格等高 */
  margin-top:36px;gap:clamp(10px,1.1vw,14px);
  width:100%;max-width:100%;
}
/* 液态玻璃：半透明底 + 背景模糊 + 内侧高光 + 极轻投影
   —— 保留 v5 原有的四色色相（蓝/绿/蓝/橙），只是把实心渐变换成玻璃质感 */
.hero-copy .hero-stats .metric,
.hero-copy .hero-stats .metric:nth-child(2),
.hero-copy .hero-stats .metric:nth-child(3),
.hero-copy .hero-stats .metric:nth-child(4){
  position:relative;overflow:hidden;
  border-radius:18px;
  padding:15px 18px 14px;
  min-width:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  height:100%;
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(16,24,40,.035),
    0 10px 26px rgba(16,24,40,.055);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
/* 各卡色相：极淡的彩色玻璃（0.10~0.12 透明度），而非实心渐变 */
.hero-copy .hero-stats .metric{background:linear-gradient(150deg,rgba(255,255,255,.72) 0%,rgba(226,236,254,.52) 100%)}
.hero-copy .hero-stats .metric:nth-child(2){background:linear-gradient(150deg,rgba(255,255,255,.72) 0%,rgba(224,246,236,.52) 100%)}
.hero-copy .hero-stats .metric:nth-child(3){background:linear-gradient(150deg,rgba(255,255,255,.72) 0%,rgba(231,239,254,.52) 100%)}
.hero-copy .hero-stats .metric:nth-child(4){background:linear-gradient(150deg,rgba(255,255,255,.72) 0%,rgba(255,240,226,.5) 100%)}
/* 玻璃边缘：一圈 1px 的浅色描边，模拟液态玻璃的高光折射 */
.hero-copy .hero-stats .metric::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.045);
}
/* 左上角一抹斜向高光（液态玻璃的标志性反光）—— 保持在数字之下 */
.hero-copy .hero-stats .metric::before{
  content:"";position:absolute;left:-30%;top:-60%;width:88%;height:150%;
  background:linear-gradient(120deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 62%);
  transform:rotate(-8deg);pointer-events:none;z-index:0;
  display:block!important;
}
.hero-copy .hero-stats .metric:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 2px 4px rgba(16,24,40,.04),
    0 16px 36px rgba(16,24,40,.09);
}
/* 数字与说明放大：数字与单位必须整体成行
   注意：v5.css 里 .metric big 用了 background-clip:text + -webkit-text-fill-color:transparent
   做渐变文字，这里必须显式重置，否则数字会变成全透明而"消失"（只剩裸写在 big 里的单位可见） */
.hero-copy .hero-stats .metric big,
.hero-copy .hero-stats .metric:nth-child(2) big,
.hero-copy .hero-stats .metric:nth-child(3) big,
.hero-copy .hero-stats .metric:nth-child(4) big{
  display:block;position:relative;z-index:1;
  font-size:clamp(26px,2.1vw,32px);font-weight:700;line-height:1.08;
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;
  width:100%;max-width:100%;
  /* V9：左栏整体居中后，卡内数字与说明同样水平居中 */
  text-align:center;
  /* 统一数字行高度：各卡的「17+ / 8 维 / 8 大 / 30s」行高一致，纵向严格对齐 */
  min-height:1.08em;
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:#0A0A0A!important;color:#0A0A0A!important;
}
.hero-copy .hero-stats .metric big span{
  display:inline;font-size:inherit;font-weight:inherit;
  margin:0;white-space:inherit;
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:inherit!important;color:inherit!important;
}
.hero-copy .hero-stats .metric span{
  display:block;position:relative;z-index:1;
  margin-top:6px;font-size:12.5px;font-weight:500;color:rgba(24,28,31,.6);
  line-height:1.45;
  text-align:center;              /* V9：说明文字随数字一同水平居中 */
  /* 说明文字统一预留 2 行高度：短文案与长文案的卡片高度完全一致，
     四张卡无论怎么折行都是同一个高度，左右/上下严格对齐 */
  min-height:calc(1.45em * 2);
}
.hero-stats-note{
  margin-top:14px;font-size:11.5px;line-height:1.72;color:rgba(24,28,31,.4);
  /* V9：口径说明在居中列中按内容收拢并居中 */
  width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:center;
}

/* ==========================================================================
   2.5 双产品预览面板（高保真 · 纯 HTML/CSS/SVG）
   V8 布局：右侧改为「单张固定外壳 + 内部渐隐轮播」
     · 外壳沿用原 .hp-card.hp-agent 的全部视觉（深色 / 圆角 / 投影 / 窗口条）
     · 两张原卡内容作为等高的 .hp-slide 层叠在同一位置，仅 opacity 切换
     · 不改任何颜色 / 字体 / 组件样式，只处理层叠与尺寸关系
   ========================================================================== */
.hero-preview{position:relative;min-width:0}
.hero-preview::before{
  content:"";position:absolute;inset:-8% -10% -6%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 62% 40%,rgba(198,216,244,.36) 0%,transparent 72%);
}
/* 外壳：桌面下由 JS 精确锚定高度（顶对标题、底对数据卡），
   这里显式 flex 规则确保 JS 写入的 height 不被 flex 拉伸覆盖 */
.hp-shell{position:relative;z-index:1;flex:0 0 auto;min-height:0}
/* 滑动层：两层同位置叠放，只做 opacity 过渡（无位移、无缩放） */
.hp-slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s;
  will-change:opacity;
}
.hp-slide.is-on{
  opacity:1;visibility:visible;
  transition:opacity .6s ease, visibility 0s linear 0s;
}
/* 层内卡片：占满整层高度，保证两层等高、外壳尺寸恒定 */
.hp-slide>.hp-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
/* 内容区：外壳被 JS 锚定到「标题顶→数据卡底」的整块高度，内容自然高度通常小于外壳。
   两层统一用 space-between 把富余高度摊到各区块之间，内容铺满整张卡、不留大片空白；
   区块间额外的空隙由下面各自的 margin 上限兜住，避免拉得过散。 */
.hp-slide>.hp-card>.hp-body{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:space-between;
}
/* GEO 层：内容保持原浅色卡片视觉，仅占满层高 */
.hp-geo-in-shell{width:100%;margin-left:0}

/* —— 以下为原 .hp-card 基础样式，视觉参数保持不变 —— */
.hp-card{
  position:relative;z-index:1;background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid rgba(16,24,40,.07);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 18px 44px rgba(16,24,40,.08);
}
/* 旧「双卡上下堆叠」的错位规则已随 V8 布局退役：
   .hp-card + .hp-card 与 .hp-geo 的宽度/偏移不再适用（两层现由 .hp-slide 控制），
   保留 .hp-geo 的其余视觉参数（在下方 .hp-geo .hp-body 等处原样沿用）。 */

/* 窗口条 */
.hp-bar{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;
  border-bottom:1px solid rgba(16,24,40,.06);background:rgba(250,251,252,.9);
}
.hp-dots{display:inline-flex;gap:5px;flex:none}
.hp-dots i{width:8px;height:8px;border-radius:50%;background:rgba(16,24,40,.13)}
.hp-bar-t{font-size:12px;font-weight:600;color:rgba(24,28,31,.66);letter-spacing:.01em}
.hp-chip{
  margin-left:auto;flex:none;font-size:10.5px;font-weight:500;letter-spacing:.03em;
  color:rgba(255,255,255,.66);background:rgba(255,255,255,.10);
  border-radius:999px;padding:2px 8px;
}
.hp-chip.light{color:rgba(24,28,31,.42);background:#F1F3F6}
.hp-geo-ic{color:var(--brand);display:inline-flex;flex:none}

/* Agent 卡：深色玻璃质感 —— 唯一使用深色的区域（小面积） */
.hp-agent{background:#14161A;border-color:rgba(255,255,255,.07);
  box-shadow:0 1px 2px rgba(10,10,10,.18),0 22px 50px rgba(16,24,40,.16)}
.hp-agent .hp-bar{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.07)}
.hp-agent .hp-bar-t{color:rgba(255,255,255,.72)}
.hp-dots{opacity:.9}
.hp-agent .hp-dots i{background:rgba(255,255,255,.18)}
.hp-body{padding:16px}

/* 对话气泡 */
.hp-msg{display:flex;gap:9px;align-items:flex-start}
.hp-msg .hp-av{
  flex:none;width:24px;height:24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);
}
.hp-msg p{
  margin:0;padding:8px 12px;border-radius:12px 12px 12px 4px;
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);
}

/* 任务节点流 */
.hp-flow{margin:13px 0 0 33px;display:flex;flex-direction:column;gap:7px}
.hp-step{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.5)}
.hp-step .hp-dot{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.2);
}
.hp-step.done .hp-dot{background:#4FBE8B;box-shadow:0 0 0 3px rgba(79,190,139,.16)}
.hp-step.done span{color:rgba(255,255,255,.72)}
.hp-step.run .hp-dot{
  background:#7FA8F5;box-shadow:0 0 0 3px rgba(127,168,245,.2);
  animation:hpBlink 1.6s ease-in-out infinite;
}
.hp-step.run span{color:rgba(255,255,255,.9)}
@keyframes hpBlink{0%,100%{opacity:1}50%{opacity:.42}}

/* 结构化结果卡 */
.hp-result{
  margin-top:13px;background:rgba(255,255,255,.95);border-radius:12px;padding:12px 13px 10px;
  border:1px solid rgba(255,255,255,.5);
}
.hp-res-head{display:flex;align-items:center;gap:8px}
.hp-res-head>span:first-child{font-size:12.5px;font-weight:600;color:#14161A}
.hp-tag{
  margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.02em;
  color:#0E7C55;background:#E4F5EC;border-radius:999px;padding:2px 7px;
}
.hp-res-list{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.hp-res-list li{
  display:flex;gap:7px;align-items:flex-start;
  font-size:11.5px;line-height:1.5;color:rgba(24,28,31,.66);
}
.hp-res-list li i{flex:none;width:4px;height:4px;border-radius:50%;background:#B7C0D0;margin-top:6px}
.hp-spark{width:100%;height:34px;display:block;margin-top:8px}

/* GEO 卡：内边距与 Agent 层保持一致，切换时内容基点不发生位移 */
.hp-geo .hp-body{padding:16px}
.hp-metric{display:flex;align-items:flex-end;gap:10px}
.hp-metric-n{display:flex;align-items:baseline;gap:3px}
.hp-metric-n b{font-size:27px;font-weight:600;letter-spacing:-.02em;color:#0A0A0A;font-variant-numeric:tabular-nums}
.hp-metric-n em{font-size:12px;font-style:normal;color:rgba(24,28,31,.4)}
.hp-delta{
  display:inline-flex;align-items:center;gap:3px;margin-bottom:4px;
  font-size:11px;font-weight:500;color:#0E7C55;
  background:#E9F6F0;border-radius:999px;padding:2px 8px;
}
/* 平台可见度条：在 space-between 布局下，块间距由富余高度决定，
   这里给出上限（margin-top 已由基础规则给 13px），避免超宽卡上被拉得过散 */
.hp-plat{margin:13px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.hp-plat li{display:flex;align-items:center;gap:9px}
.hp-plat img{width:17px;height:17px;border-radius:5px;object-fit:contain;flex:none;background:#F4F6F9}
.hp-plat-b{flex:1;min-width:0;height:6px;border-radius:999px;background:#EEF1F6;overflow:hidden}
.hp-plat-b i{
  display:block;height:100%;width:var(--w,50%);border-radius:999px;
  background:linear-gradient(90deg,#5B8DEF,#6D5AE6);
  transform-origin:left center;
}
.hp-plat em{flex:none;width:32px;text-align:right;font-size:10.5px;font-style:normal;color:rgba(24,28,31,.44)}
/* 趋势图 */
.hp-chart{margin-top:12px;height:58px}
.hp-chart svg{width:100%;height:100%;display:block;overflow:visible}
.hp-line{stroke-dasharray:320;stroke-dashoffset:320}
html.js .hero-preview.in .hp-line{animation:hpDraw 1.5s cubic-bezier(.22,1,.36,1) .35s both}
@keyframes hpDraw{to{stroke-dashoffset:0}}
html.js .hero-preview.in .hp-endpoint{animation:hpPop .5s cubic-bezier(.2,.9,.3,1.4) 1.7s both}
@keyframes hpPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
/* 信源标签 */
.hp-src{margin-top:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hp-src>span{font-size:10.5px;color:rgba(24,28,31,.38);margin-right:1px}
.hp-src i{
  font-style:normal;font-size:10.5px;color:rgba(24,28,31,.62);
  background:#F3F5F8;border-radius:6px;padding:3px 8px;
}
/* 平台条进入视口时依次展开（增量动画，克制） */
html.js .hero-preview.in .hp-plat-b i,
html.js .hero-preview.in .hp-src i{animation:hpFill .9s cubic-bezier(.22,1,.36,1) both}
html.js .hero-preview.in .hp-plat li:nth-child(1) i{animation-delay:.06s}
html.js .hero-preview.in .hp-plat li:nth-child(2) i{animation-delay:.13s}
html.js .hero-preview.in .hp-plat li:nth-child(3) i{animation-delay:.2s}
html.js .hero-preview.in .hp-plat li:nth-child(4) i{animation-delay:.27s}
@keyframes hpFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html:not(.js) .hp-plat-b i{transform:none}

/* ==========================================================================
   2.6 V9 · 统一深色外壳
   —— 轮播两层(销售周报 / 品牌可见度)统一为「同一张深色卡片外壳」，
      外壳颜色在任何时刻都不参与过渡，只有内部内容做 opacity 淡入淡出。
      下面这一段只把 GEO 层原本的浅色值换算成深色玻璃体系，不改任何尺寸、
      字号、圆角、间距、层级 —— 保证切换时外壳几何与形态恒等。
   ========================================================================== */
/* 卡片底：与 .hp-agent 完全同色，确保两层切换时外壳颜色零变化 */
.hp-geo{
  background:#14161A;border-color:rgba(255,255,255,.07);
  box-shadow:0 1px 2px rgba(10,10,10,.18),0 22px 50px rgba(16,24,40,.16);
}
.hp-geo .hp-bar{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.07)}
.hp-geo .hp-bar-t{color:rgba(255,255,255,.72)}
.hp-geo .hp-dots i{background:rgba(255,255,255,.18)}
.hp-geo-ic{color:#7FA8F5}
/* chip：沿用深色卡上的半透明白胶囊 */
.hp-chip.light{color:rgba(255,255,255,.66);background:rgba(255,255,255,.10)}
/* 主数值 */
.hp-plat-b{background:rgba(255,255,255,.10)}
/* 平台图标：深色卡上不用白色底块，改用极淡白玻璃底盘，避免"白方块"割裂感；
   尺寸统一 18px，保证 DeepSeek/Kimi 这类深色图标在深底上仍有清晰边界 */
.hp-plat img{
  width:18px;height:18px;border-radius:6px;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  padding:2px;
}
.hp-plat em{color:rgba(255,255,255,.48)}
.hp-metric-n b{color:#fff}
.hp-metric-n em{color:rgba(255,255,255,.42)}
.hp-delta{color:#5FD3A0;background:rgba(79,190,139,.14)}
/* 趋势图：网格线与坐标轴在深底上降为白色低透明度 */
.hp-geo .hp-grid line{stroke:rgba(255,255,255,.10)}
.hp-chart .hp-line{stroke:#7FA8F5}
.hp-chart .hp-endpoint{fill:#14161A;stroke:#7FA8F5}
/* 信源标签 */
.hp-src>span{color:rgba(255,255,255,.38)}
.hp-src i{color:rgba(255,255,255,.66);background:rgba(255,255,255,.07)}

/* ==========================================================================
   3. 工作台实况四卡（复刻钉钉 ProductsShowcase）
   钉钉实测卡片：radius 12px / box-shadow 0 4.293px 32.196px rgba(0,0,0,.1)
   本区不做 Tab 切换，四张卡全部常驻可见 —— 每张卡都是一块真实工作台画面
   ========================================================================== */
.dtlive{background:#fff;padding:64px 0 90px;overflow:hidden;position:relative}
.dtlive .container{max-width:1240px}
.dtlive-head{max-width:760px;margin:0 auto;text-align:center}
.dtlive-head .eyebrow{margin-bottom:14px}

.dtlive-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;margin-top:38px;
}

.dtcard{
  position:relative;display:block;background:#fff;border:0;border-radius:12px;
  overflow:hidden;padding:0;text-align:left;width:100%;
  box-shadow:0 4.293px 32.196px rgba(0,0,0,.10);
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1);
}
.dtcard:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(0,0,0,.14)}
.dtcard:focus-visible{outline:3px solid rgba(109,94,224,.45);outline-offset:4px}

/* 媒体位：16:9，同时支持 <video> / <img gif> / 静态海报 */
.dt-media{
  position:relative;aspect-ratio:16/9;background:#0E1116;overflow:hidden;
}
.dt-media > img.dt-poster,
.dt-media > video.dt-vid,
.dt-media > img.dt-gif{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:left top;display:block;
}
/* 视频存在时淡入覆盖海报（钉钉 activeVideo 过渡 66ms，这里 260ms 更自然） */
.dt-media > video.dt-vid{opacity:0;transition:opacity .26s ease;z-index:2}
.dt-media.has-vid > video.dt-vid{opacity:1}
.dt-media.has-gif > img.dt-poster{opacity:0}
.dt-media > img.dt-gif{opacity:0;transition:opacity .26s ease;z-index:2}
.dt-media.has-gif > img.dt-gif{opacity:1}

/* LIVE 角标：呼吸绿点 */
.dt-live-tag{
  position:absolute;left:14px;top:14px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  border-radius:999px;background:rgba(10,12,16,.58);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.06em;
}
.dt-live-tag i{
  width:6px;height:6px;border-radius:50%;background:#22D37F;
  box-shadow:0 0 0 3px rgba(34,211,127,.28);
  animation:dtPulse 1.9s ease-in-out infinite;
}
@keyframes dtPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}

/* 实况数据条：滚动时才让人"看见"工作台在跑 */
.dt-ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  padding:26px 16px 12px;
  background:linear-gradient(180deg,rgba(8,10,14,0) 0%,rgba(8,10,14,.74) 100%);
  color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;
}
.dt-tk{display:flex;align-items:baseline;gap:5px}
.dt-tk b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dt-tk span{opacity:.66;font-weight:400}
.dt-tk.up b{color:#5BE49B}
.dt-tk.blue b{color:#7FBAFF}

/* 卡片底部信息 */
.dt-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-top:1px solid #F0F1F3;
}
.dt-card-t{font-size:15.5px;font-weight:600;color:#181C1F;letter-spacing:.01em}
.dt-card-s{margin-top:4px;font-size:12.5px;color:rgba(24,28,31,.56);line-height:1.6}
.dt-card-go{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap;
}
.dt-card-go svg{transition:transform .22s ease}
.dtcard:hover .dt-card-go svg{transform:translateX(3px)}

/* 实况区下方说明 */
.dtlive-tip{
  margin-top:22px;text-align:center;font-size:12.5px;color:rgba(24,28,31,.42);
}

/* V6.1 · AI 生成概念插画全宽带 */
.art-wide{margin-top:38px}
.art-wide img{
  width:100%;display:block;border-radius:16px;
  box-shadow:0 4.293px 32.196px rgba(0,0,0,.08);
}

/* ==========================================================================
   4. 去塑料感：标题字重与卡片材质的全站收敛
   ========================================================================== */

/* v5.7 透镜层品牌色收敛：紫渐变 → 归浦蓝（一行改变量，全站生效） */
body.gp-home{--lens-grad:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%)}
/* 内页（page56/57）品牌令牌同步收敛 */
body,body.gp-page{
  --j56-brand:#6D5AE6;
  --j56-grad:linear-gradient(120deg,#6D5AE6 0%,#8B7BF0 100%);
  --lens-grad:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);
}
/* 内页主按钮：跟随 --brand（V9 浅色=紫蓝 #6D5AE6 / 深色模式=v7 的品牌蓝），原为硬编码近黑 */
.gp-page main .btn.btn-primary,
.gp-page main .btn.btn-pick,
.gp-page main .btn.btn-accent,
body.gp-page .btn-primary:not(.qa-submit),
.btn-accent{
  background:var(--brand)!important;background-image:none!important;
  border-color:var(--brand)!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(109,94,224,.22)!important;
}
.gp-page main .btn.btn-primary:hover,
.gp-page main .btn.btn-pick:hover,
.gp-page main .btn.btn-accent:hover,
body.gp-page .btn-primary:not(.qa-submit):hover,
.btn-accent:hover{
  background:var(--brand-deep)!important;background-image:none!important;
  border-color:var(--brand-deep)!important;
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(82,57,216,.3)!important;
}
/* 钉钉 headline 是 600 字重；v5.7 的 900 + -0.022em 是"塑料粗黑"的来源 */
body.gp-home .section-title{font-weight:600;letter-spacing:-.012em}
body.gp-home .ai-card h3{font-weight:600}
/* 透镜层里的紫色残留在品牌蓝体系下改为中性/品牌色 */
body.gp-home .gdelta.up{color:#00A870}
body.gp-home .chat .bubble.ai{background:var(--pk-blue);border-color:#E6E1FB}
body.gp-home .geo-tabs button:hover{background:var(--pk-blue)}
body.gp-home .gdelta.down{color:#E11D48}

/* 大标题统一 600 字重（钉钉 headline 是 600，不是 800） */
.section-title,.big-cta .display{font-weight:600;letter-spacing:.005em;color:#0A0A0A}
.section-title{font-size:clamp(26px,2.9vw,38px);line-height:1.32}
.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.12em;
  color:rgba(24,28,31,.52);text-transform:none;
}

/* 卡片阴影统一为钉钉量级：轻、柔、真实 */
.price-card,.ai-card,.case-card,.gcard,.res-card,.svc-card,.lab-card,.feat-card{
  box-shadow:0 4.293px 32.196px rgba(0,0,0,.07);
  border-radius:14px;
}
.price-card:hover,.ai-card:hover,.case-card:hover,.gcard:hover,
.res-card:hover,.svc-card:hover,.lab-card:hover,.feat-card:hover{
  box-shadow:0 16px 44px rgba(0,0,0,.11);
}

/* 渐变文字只保留在强调词，且降低饱和 */
.hl-grad{
  background:linear-gradient(96deg,#6D5AE6 0%,#8B7BF0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================================
   5. HERO · 标题后置 logo 入场（文字先汇聚 → 播完后 logo 才出现）
   ========================================================================== */
.ht-l2{display:flex;align-items:center;justify-content:center;gap:.22em;flex-wrap:wrap}
.hero-logo{
  width:clamp(64px,7vw,104px);height:auto;flex:none;
  opacity:0;transform:scale(.55) rotate(-14deg) translateY(.1em);
  transform-origin:50% 58%;
  filter:drop-shadow(0 10px 24px rgba(10,10,10,.18));
  will-change:transform,opacity;
}
html.js .hero-type.typed .hero-logo{
  animation:logoIn .9s cubic-bezier(.2,.9,.25,1.2) .45s both;
}
@keyframes logoIn{
  0%{opacity:0;transform:scale(.55) rotate(-14deg) translateY(.1em)}
  60%{opacity:1;transform:scale(1.08) rotate(3deg) translateY(0)}
  to{opacity:1;transform:scale(1) rotate(0) translateY(0)}
}
/* logo 落定后一圈极轻的光晕脉冲（只播一次） */
html.js .hero-type.typed .hero-logo::after{content:none}
html:not(.js) .hero-logo{opacity:1;transform:none}

/* ==========================================================================
   6. 悬浮窗（钉钉同款：咨询客服 + 快速置顶）
   ========================================================================== */
.float-dock{
  position:fixed;right:22px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  /* 首屏默认隐藏整组浮层，避免遮挡 Hero 产品预览；滚过首屏后 dock-on 显现 */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.2,.7,.3,1),visibility .3s;
}
.float-dock.dock-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* V6.1 隐藏原 AI 助手球，避免与「咨询客服+置顶」悬浮窗重叠 */
#aiBall,.ai-ball,.ai-panel{display:none!important}
.fd-top{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#17181C;border:1px solid rgba(23,24,28,.10);
  box-shadow:0 8px 26px rgba(0,0,0,.14);cursor:pointer;
  z-index:2;
  transition:background-color .2s,color .2s,box-shadow .2s;
}
.fd-top.show{}
.fd-top:hover{background:#17181C;color:#fff;box-shadow:0 12px 30px rgba(10,10,10,.22)}
.fd-top svg{width:20px;height:20px}
.fd-cs{
  display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px;
  border-radius:999px;background:#111114;color:#fff;border:0;cursor:pointer;
  font-size:14.5px;font-weight:500;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 30px rgba(10,10,10,.24);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background-color .2s;
}
.fd-cs:hover{transform:translateY(-2px);background:#000;box-shadow:0 16px 36px rgba(10,10,10,.3)}
.fd-cs svg{width:19px;height:19px;flex:none}
/* 客服弹层（点击展开的迷你名片） */
.fd-panel{
  position:absolute;right:0;bottom:64px;width:264px;
  background:#fff;border-radius:16px;padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility .28s;
  z-index:1;
}
.float-dock.open .fd-panel{opacity:1;visibility:visible;transform:none}
.fd-panel h4{margin:0 0 6px;font-size:15.5px;font-weight:600;color:#111114}
.fd-panel p{margin:0 0 14px;font-size:12.5px;line-height:1.7;color:rgba(24,28,31,.58)}
.fd-panel .fd-row{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  font-size:13px;color:#181C1F;text-decoration:none;transition:background .18s;
}
.fd-panel .fd-row:hover{background:#F4F6F9}
.fd-panel .fd-row svg{width:17px;height:17px;color:#111114;flex:none}

/* ==========================================================================
   7. 响应式（基准：iPhone 竖屏 375 / 390 / 430；平板 768；桌面 1440）
   ========================================================================== */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero-copy .hero-sub,
  .hero-copy .hero-stats-note{max-width:36em}
  .hero-actions{margin-left:auto;margin-right:auto}
  /* 移动端数据带：2×2 网格 */
  .hero-copy .hero-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    width:100%;max-width:400px;margin-left:auto;margin-right:auto;
    justify-content:center;margin-top:30px;
  }
  .hero-copy .hero-stats .metric{padding:14px 12px 13px;border-radius:16px}
  .hero-copy .hero-stats .metric big,
  .hero-copy .hero-stats .metric:nth-child(2) big,
  .hero-copy .hero-stats .metric:nth-child(3) big,
  .hero-copy .hero-stats .metric:nth-child(4) big{font-size:28px}
  .hero-copy .hero-stats .metric span{font-size:12px;margin-top:6px;white-space:normal}
  /* 单列时两栏不再同高：外壳给出显式高度，两层仍等高等宽 */
  .hero-preview{width:100%;max-width:600px;margin:0 auto}
  .hp-shell{height:auto}
  .hp-slide{position:relative;inset:auto;min-height:0}
  .hp-slide:not(.is-on){position:absolute;inset:0}
  .hp-geo-in-shell{width:100%;margin-left:0}
}
@media (max-width:860px){
  .hero{padding:calc(104px + var(--sat)) 18px 32px}
  .hero-bg .hb-glow{width:520px;height:460px;right:-24%;top:2%}
  .hero-grid{gap:32px}
  .hero-type .ht-l2{font-size:.94em}
  /* 按钮：左右并排、严格等宽（grid 两列等分），一行放得下 */
  .hero-actions{
    margin-top:26px;gap:10px;width:100%;max-width:400px;
    margin-left:auto;margin-right:auto;
  }
  .hero-actions .btn{
    height:46px;padding:0 30px 0 14px;border-radius:12px;
  }
  .hero-actions .ha-txt b{font-size:13.5px}
  .hero-actions .btn .arw{width:13px;height:13px;right:12px}
  .hero-copy .hero-stats{margin-top:28px}
  .hero-copy .hero-stats .metric big,
  .hero-copy .hero-stats .metric:nth-child(2) big,
  .hero-copy .hero-stats .metric:nth-child(3) big,
  .hero-copy .hero-stats .metric:nth-child(4) big{font-size:33px}
  .hero-stats-note{font-size:11.5px}
  /* 平板 / 大手机横屏：标题下限提到 34px，避免居中单列时标题比桌面还小 */
  .hero .hero-type,
  .hero h1.display{font-size:clamp(34px,6.4vw,52px)}
  /* 预览面板：手机端压缩高度，隐藏次要细节，绝不横向溢出 */
  .hp-bar{height:36px;padding:0 12px}
  .hp-body{padding:13px}
  .hp-geo .hp-body{padding:13px 13px 12px}
  .hp-msg p{font-size:12px}
  .hp-flow{margin-left:31px;gap:6px}
  .hp-spark{height:28px}
  .hp-chart{height:48px;margin-top:10px}
  .hp-plat li:nth-child(n+4){display:none}   /* 手机上只留 3 个平台，避免过长 */
  .dtlive{padding:48px 0 64px}
  .dtlive-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .dt-ticker{display:none}
  /* 悬浮窗：移动端右移内缩 + iOS 底部安全区，客服默认收起为圆形图标 */
  .float-dock{
    right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    gap:10px;align-items:flex-end;
  }
  .fd-cs{
    width:48px;height:48px;padding:0;gap:0;justify-content:center;
    border-radius:50%;
  }
  .fd-cs span.fd-cs-t{display:none}
  .fd-cs svg{width:21px;height:21px}
  .fd-top{width:44px;height:44px}
  .fd-top svg{width:18px;height:18px}
  .fd-panel{width:min(272px,calc(100vw - 32px));bottom:60px}
  /* 首屏底部预留，任何情况下不被悬浮窗压住 */
  .hero{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .hero{padding:calc(96px + var(--sat)) 16px 26px}
  /* 手机端整体放大：标签 / 标题 / 副标题 / 按钮 / 数据卡同步上调一档 */
  .hero-badge{font-size:13px;padding:7px 15px;margin-bottom:19px}
  .hero-badge svg{width:15px;height:15px}
  .hero-sub{font-size:15.5px;line-height:1.76;margin-top:17px;-webkit-line-clamp:3}
  .hero-sub .hs-lead{font-size:13.5px;margin-bottom:11px}
  .hero-sub .hs-num{width:19px;height:19px;font-size:11.5px}
  .hero-actions{margin-top:25px;gap:9px;max-width:100%}
  .hero-actions .btn{height:46px;padding:0 22px 0 10px;border-radius:12px}
  .hero-actions .ha-txt b{font-size:13px}
  .hero-actions .btn .arw{width:12px;height:12px;right:9px}
  .hero-copy .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;margin-top:27px;max-width:420px;
    margin-left:auto;margin-right:auto;   /* V9：居中列中数据带同样居中 */
  }
  .hero-copy .hero-stats .metric{padding:15px 12px 14px;border-radius:17px}
  /* 数字字号：以最长的一条「17+」在卡内不折行为准（折行会让卡片高度参差不齐）。
     34px / 30px 时「17+」在 156px 卡内仍会换行，收到 28px 后一行放得下，四卡严格等高 */
  .hero-copy .hero-stats .metric big,
  .hero-copy .hero-stats .metric:nth-child(2) big,
  .hero-copy .hero-stats .metric:nth-child(3) big,
  .hero-copy .hero-stats .metric:nth-child(4) big{font-size:28px}
  .hero-copy .hero-stats .metric span{font-size:12.5px;margin-top:7px}
  .hero-stats-note{font-size:11px;margin-top:14px}
  .hero-grid{gap:26px}
  /* 手机端标题下限提到 34px（桌面仍受 4vw/60px 上限约束），配合 JS 防拆行自适应 */
  .hero .hero-type,
  .hero h1.display{font-size:clamp(34px,9vw,44px)}
  /* 预览面板：手机端只保留核心辨识度，控制首屏长度 */
  .hp-chip{display:none}
  .hp-res-list li:nth-child(3){display:none}
  .hp-spark{height:26px;margin-top:6px}
  .hp-flow{margin-top:11px}
  .hp-result{margin-top:11px;padding:11px 12px 8px}
  .hp-plat{margin-top:11px}
  .hp-chart{height:44px;margin-top:9px}
  .hp-src{margin-top:10px}
  .dt-live-tag{height:24px;font-size:11px;left:10px;top:10px}
}
@media (max-width:380px){
  .hero-type .ht-l2{font-size:.9em}
  .hero-badge{font-size:12px;padding:6px 13px}
  .hero-sub{font-size:14.5px}
  .hero-sub .hs-lead{font-size:12.5px}
  .hero-actions .btn{height:44px;padding:0 22px 0 10px}
  .hero-actions .ha-txt b{font-size:13px}
  .hero-actions .btn .arw{width:12px;height:12px;right:9px}
  .hero-copy .hero-stats .metric big,
  .hero-copy .hero-stats .metric:nth-child(2) big,
  .hero-copy .hero-stats .metric:nth-child(3) big,
  .hero-copy .hero-stats .metric:nth-child(4) big{font-size:26px}
  .hp-metric-n b{font-size:24px}
}
/* 超窄屏（320px 级别）：双按钮必须能并排放下，优先保证不溢出、不横向滚动 */
@media (max-width:365px){
  .hero{padding-left:13px;padding-right:13px}
  .hero-actions{gap:6px}
  .hero-actions .btn{height:40px;padding:0 18px 0 8px;border-radius:10px}
  .hero-actions .ha-txt b{font-size:11.5px}
  .hero-actions .btn .arw{width:11px;height:11px;right:7px}
  .hero-badge{font-size:11.5px;padding:5px 11px}
}

/* 无障碍：尊重系统"减弱动效" —— 全部位移/逐字退化为直接显示 */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .reveal.in{transform:none}
  html.js .rv-mount{animation:none;opacity:1;transform:none}
  .ht-char{opacity:1;transform:none;animation:none!important}
  html.js [data-wave] .wv-ch,
  html.js [data-wave]:not(.wv-in) .wv-ch{opacity:1;transform:none;animation:none}
  html.js .rv-items > *{opacity:1;transform:none;animation:none}
  .dt-live-tag i{animation:none}
  .dtcard{transition:none}
  .hp-step.run .hp-dot{animation:none}
  .hp-line{stroke-dasharray:none;stroke-dashoffset:0}
  html.js .hero-preview.in .hp-line,
  html.js .hero-preview.in .hp-endpoint,
  html.js .hero-preview.in .hp-plat-b i,
  html.js .hero-preview.in .hp-src i{animation:none;opacity:1;transform:none}
  /* 轮播：减弱动效下不做淡入淡出，切换即时完成（JS 侧同时不启动自动轮播） */
  .hp-slide{transition:none}
  .hp-slide.is-on{transition:none}
}