/* ============================================================
   hero.css — 全站「影像首屏」底部规范（唯一数据源）
   挂载页面（必须放在各自 <style> 之后，保证同级选择器后到者胜）：
     index.html / models.html / usage-cost.html / quiz.html
     app.html / b2b.html / calculator.html

   解决的历史问题：七个页面的首屏底部各写各的，导致
     · 横线（数据条 border-top）位置不一：models.html 少写 margin-top:auto，
       数据条跟着内容走而不是贴底，横线比别的页高出一截
     · 鼠标滚动提示各页 bottom 值不同（124 / 122 / 118 / 26px），位置对不上；
       b2b / calculator 在手机上还不隐藏，直接压在横线上
     · 数据文字字号 / 色值 / 行距 / 内距各不相同，三列四列也不齐
     · b2b / calculator 在窄屏改了根字号（html{font-size:15px/14px}），
       把 rem 写的字号一起带偏了

   规范做法：
     1) 数据条一律 margin-top:auto 贴底，横线全站同一高度
     2) 鼠标提示作为数据条的第一个子元素，用 bottom:100% 锚在横线上，
        间距恒定 —— 不再依赖写死的 bottom 像素值，任何屏宽都严丝合缝
     3) 字号一律用 px / vw，不用 rem —— 不受页面根字号影响
     4) 列数 = 条目数（grid-auto-flow:column，三列四列都自动撑满居中）
     5) 响应式只在这里写一遍：≤980 收起鼠标提示，≤768 收紧内距，≤640 两列

   页面里原有的同名规则保留作「样式表没加载时」的兜底，正常情况下被本文件覆盖。
   ============================================================ */

:root{
  --hero-line:rgba(233,223,201,.18);      /* 横线（数据条上边框） */
  --hero-hint-bd:rgba(233,223,201,.45);   /* 鼠标提示描边 */
  --hero-gold:#E2C583;                    /* 数据大字：哑金 */
  --hero-gold-d:#D8C69A;                  /* 鼠标滚轮点 */
  --hero-label:rgba(245,241,232,.62);     /* 数据说明文字 */
  --hero-hint-gap:16px;                   /* 鼠标提示与横线的间距 */
  --hero-band-pt:26px;                    /* 数据条上内距 */
  --hero-band-pb:34px;                    /* 数据条下内距 */
  --hero-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
}

/* ---------- 1. 数据条：横线位置与内距 ---------- */

/* hero 本身是 <header> 元素，会被页面里给「导航条」写的 header{} 规则误伤：
   b2b.css / calculator.html 都有 header{...}，会给首屏加上浅色下边框、左右内距与投影，
   结果横线两侧各短 18px、底部多出一条浅色细线。这里统一抹平。 */
:is(.hero,.b2b-hero,.calc-hero){
  border-top:0;
  border-bottom:0;
  padding-left:0;
  padding-right:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

:is(.hero,.b2b-hero,.calc-hero) > :is(.hero-stats,.hero-band){
  position:relative;
  z-index:2;
  width:100%;
  margin-top:auto;                                   /* 贴底：横线全站同一个高度 */
  border-top:1px solid var(--hero-line);
  background:linear-gradient(180deg,rgba(20,18,14,0),rgba(20,18,14,.5));  /* 垫底，说明文字更清晰 */
}
:is(.hero,.b2b-hero,.calc-hero) > :is(.hero-stats,.hero-band) > .wrap{
  display:grid;
  grid-template-columns:none;                        /* 交给 auto-flow：列数 = 条目数 */
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:18px;
  max-width:1180px;
  margin:0 auto;
  padding:var(--hero-band-pt) 24px var(--hero-band-pb);
}

/* ---------- 2. 鼠标滚动提示：锚在横线上方，间距恒定 ---------- */
:is(.hero,.b2b-hero,.calc-hero) > :is(.hero-stats,.hero-band) > .scroll-hint{
  position:absolute;
  left:50%;
  bottom:100%;                        /* 底边贴住横线 */
  transform:translateX(-50%);
  margin-bottom:var(--hero-hint-gap);
  z-index:2;
  width:22px;
  height:36px;
  border:1.5px solid var(--hero-hint-bd);
  border-radius:12px;
  display:flex;
  justify-content:center;
  padding-top:7px;
  pointer-events:none;
}
:is(.hero,.b2b-hero,.calc-hero) .scroll-hint i{
  display:block;
  width:3px;
  height:7px;
  border-radius:2px;
  background:var(--hero-gold-d);
  animation:heroHint 1.8s ease-in-out infinite;
}
@keyframes heroHint{
  0%,100%{transform:translateY(0);opacity:1}
  55%{transform:translateY(9px);opacity:.3}
}
@media (prefers-reduced-motion:reduce){
  :is(.hero,.b2b-hero,.calc-hero) .scroll-hint i{animation:none}
}

/* ---------- 3. 数据文字：字号 / 颜色 / 行距 ---------- */
:is(.hero,.b2b-hero,.calc-hero) .hstat{text-align:center}
:is(.hero,.b2b-hero,.calc-hero) .hstat .v{
  font-family:var(--hero-serif);
  font-size:clamp(21.6px,2.6vw,29.6px);   /* 等价 1.35–1.85rem@16px，但不受根字号影响 */
  font-weight:700;
  color:var(--hero-gold);
  letter-spacing:1px;
  line-height:1.35;
}
:is(.hero,.b2b-hero,.calc-hero) .hstat .v .r{color:var(--hero-gold)}
:is(.hero,.b2b-hero,.calc-hero) .hstat .v small{
  font-size:.56em;
  font-weight:600;
  color:rgba(245,241,232,.72);
  margin-left:2px;
  letter-spacing:1px;
}
:is(.hero,.b2b-hero,.calc-hero) .hstat .l{
  font-size:11.5px;
  color:var(--hero-label);
  margin-top:4px;
  letter-spacing:2px;
  line-height:1.6;
}

/* ---------- 4. 响应式（全站同一套断点） ---------- */
@media (max-width:980px){
  /* 收起鼠标提示，避免压住横线。选择器与上面基础规则同权，靠位置靠后生效 */
  :is(.hero,.b2b-hero,.calc-hero) > :is(.hero-stats,.hero-band) > .scroll-hint{display:none}
}
@media (max-width:768px){
  :is(.hero,.b2b-hero,.calc-hero) > :is(.hero-stats,.hero-band) > .wrap{
    gap:16px;
    padding-top:22px;
    padding-bottom:30px;
  }
  /* 说明文字统一预留两行（行高 1.6 × 2），避免长短不一把横线顶高顶低 */
  :is(.hero,.b2b-hero,.calc-hero) .hstat .l{min-height:3.2em}
}
@media (max-width:640px){
  :is(.hero,.b2b-hero,.calc-hero) > :is(.hero-stats,.hero-band) > .wrap{
    grid-auto-flow:row;
    grid-template-columns:repeat(2,1fr);   /* 手机一律两列 */
    grid-auto-columns:auto;
    gap:13px 10px;
    padding:20px 18px 26px;
  }
  /* 奇数条（3 条）时最后一条占满整行居中，不留空缺口 */
  :is(.hero,.b2b-hero,.calc-hero) .hstat:last-child:nth-child(odd){grid-column:1/-1}
  :is(.hero,.b2b-hero,.calc-hero) .hstat .v{font-size:clamp(18.4px,5.4vw,24px)}
  :is(.hero,.b2b-hero,.calc-hero) .hstat .l{font-size:10.5px;letter-spacing:1.2px;min-height:3.2em}
}