/* assets/css/sections/metrics.css — 指标条：首屏之后的第一屏，用四个数字给出量级。
   数字由 main.js 的计数器写入，HTML 里预置终值——脚本没跑起来时也读得到真实数据。 */

.metrics{ border-block:1px solid var(--line); background:var(--surface); }
.metrics-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:var(--line);
  margin-block:-1px;
}
.metric{ padding:36px 28px; background:var(--surface); }
.metric-num{
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--serif); font-weight:900; font-size:40px; line-height:1.1;
  font-variant-numeric:lining-nums;
}
.metric-num .pre,.metric-num .suf{ font-size:22px; }
.metric-label{ margin-top:10px; font-size:14.5px; color:var(--muted); }
.metric-note{ margin-top:6px; font-size:12.5px; color:var(--line-dark); }

/* 深底上的指标条 */
.band--deep .metrics-grid{ background:rgba(255,255,255,.14); }
.band--deep .metric{ background:var(--ink-deep); }
.band--deep .metric-label{ color:#93A5BB; }

@media (max-width:860px){
  .metrics-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .metric{ padding:26px 20px; }
  .metric-num{ font-size:32px; }
}