/* ==========================================================================
   掌域官网 · 首页版式（home.css）
   仅首页（index.html）加载；区块编号与设计文档 §4 一一对应
   （00 导航与 13 Footer 在 components.css）。子页不加载本文件。
   ========================================================================== */

/* ============================== 01 首屏 hero ============================== */
.hero{padding-block:var(--space-64)}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  align-items:center;
}
.hero-copy{grid-column:span 6;display:flex;flex-direction:column;align-items:flex-start}
.hero-title{
  margin-top:var(--space-12);
  max-width:20ch; /* 控制两行 */
  font-size:var(--font-display-size);
  line-height:var(--font-display-lh);
  font-weight:var(--weight-medium);
}
.hero-lead{
  margin-top:var(--space-16);
  max-width:56ch;
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
  color:var(--color-text-secondary);
}
.hero-actions{margin-top:var(--space-24)}
.hero-footnote{margin-top:var(--space-16)}
.hero-chart{grid-column:span 6}
@media (max-width:767px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-32)}
  .hero-copy,.hero-chart{grid-column:auto}
}

/* —— 仪表盘示意卡（01，与 05 共用 .chart-card/.chart）—— */
.mini-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-12);
  margin-bottom:var(--space-16);
}
.mini-cell{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.mini-name{font-size:var(--font-eyebrow-size);line-height:var(--font-eyebrow-lh);color:var(--color-text-secondary)}
.mini-slot{height:24px;border-radius:var(--radius-4);background:var(--color-surface-muted)}

/* —— 示意卡外壳与示意图 SVG 画法（01 / 05 共用；SVG 内不出现任何数字）—— */
.chart-card{
  margin:0;
  background:var(--color-surface);
  border:var(--stroke-hairline) solid var(--color-border);
  border-radius:var(--radius-10);
  padding:var(--card-pad);
}
.chart-card figcaption{margin-top:var(--space-8);text-align:right}
.chart{width:100%;height:auto}
.chart .axis{
  stroke:var(--color-neutral);
  stroke-width:var(--stroke-axis); /* 0.5px 发丝线 */
  stroke-opacity:.3;               /* 文档：20–40% 透明度 */
  vector-effect:non-scaling-stroke;
}
.chart .line{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:var(--stroke-chart); /* 2px，全站描边上限 */
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart .area{fill:var(--color-primary);fill-opacity:.08;stroke:none} /* 平铺 8% 蓝面，不用渐变 */
.chart .snap{
  stroke:var(--color-neutral);
  stroke-width:1;
  stroke-dasharray:4 4;
  vector-effect:non-scaling-stroke;
}
.chart .dot{fill:var(--color-primary);stroke:var(--color-surface);stroke-width:2}
.chart .dot-muted{fill:var(--color-neutral);stroke:var(--color-surface);stroke-width:2}
.chart text{font-size:12px;fill:var(--color-text-secondary)}

/* ============================== 02 价值锚点 ============================== */
.s02-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24)}
.s02-item{display:flex;flex-direction:column;gap:var(--space-8)}
.s02-item p{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-secondary)}
@media (max-width:767px){
  .s02-grid{grid-template-columns:1fr;gap:var(--space-32)}
}

/* ============================== 03 五步闭环 ============================== */
.steps{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-12);
  list-style:none;
  margin:0 0 var(--space-32);
}
.step{
  padding:8px 14px; /* 文档 §4.03：节点小卡 padding 8/14 */
  border:var(--stroke-hairline) solid var(--color-border);
  border-radius:var(--radius-8);
  font-size:var(--font-body-size);
  line-height:1.5;
  font-weight:var(--weight-medium);
}
.step-sep{display:flex;flex:none}
.step-arrow{flex:none;width:14px;height:14px;color:var(--color-text-tertiary)}
.step-desc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-24)}
.step-desc{display:flex;flex-direction:column;gap:var(--space-8)}
.step-desc .step-desc-name{font-size:var(--font-body-size);line-height:var(--font-body-lh);font-weight:var(--weight-medium)}
.step-desc p{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-secondary)}
@media (max-width:767px){
  .steps{flex-direction:column}
  .step-arrow{transform:rotate(90deg)} /* 同一枚右向箭头转成向下 */
  .step-desc-grid{grid-template-columns:1fr;gap:var(--space-24)}
}

/* ============================== 04 四个核心指标 ============================== */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-12)}
.metric{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
  min-height:160px;
  background:var(--color-surface);
  border:var(--stroke-hairline) solid var(--color-border);
  border-radius:var(--radius-10);
  padding:var(--card-pad);
}
.metric-name{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-secondary)}
.metric-slot{width:96px;height:28px;border-radius:var(--radius-4);background:var(--color-surface-muted)}
.metric-desc{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-tertiary)}
/* 口径浮层（上方偏移 8、圆角 8、白底、1px 描边） */
.metric-tip{
  position:absolute;
  left:0;right:0;
  bottom:calc(100% + 8px);
  z-index:10;
  padding:var(--space-12);
  background:var(--color-surface);
  border:var(--stroke-hairline) solid var(--color-border);
  border-radius:var(--radius-8);
  font-size:var(--font-caption-size);
  line-height:var(--font-caption-lh);
  color:var(--color-text-secondary);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease-out,transform .15s ease-out;
}
.metric:hover .metric-tip,
.metric:focus-within .metric-tip,
.metric.is-open .metric-tip{opacity:1;visibility:visible;transform:none}
@media (max-width:767px){
  .metrics{grid-template-columns:1fr}
}

/* ============================== 05 快照 vs 水位 ============================== */
.s05{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-48);
  align-items:center;
}
.s05-chart{grid-column:span 6}
.s05-copy{grid-column:span 6;display:flex;flex-direction:column;gap:var(--space-16)}
.s05-sub{font-size:var(--font-h3-size);line-height:var(--font-h3-lh);font-weight:var(--weight-medium)}
.s05-copy > p{color:var(--color-text-secondary);max-width:56ch}
.s05-note{
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
  margin-top:var(--space-8);
  padding-left:var(--space-16);
  border-left:var(--stroke-hairline) solid var(--color-border);
}
.s05-note p{color:var(--color-text-secondary);max-width:56ch}
@media (max-width:767px){
  .s05{grid-template-columns:1fr;gap:var(--space-32)}
  .s05-chart,.s05-copy{grid-column:auto}
}

/* ============================== 06 / 07 / 08 三卡行 ============================== */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-12)}
.info-card{display:flex;flex-direction:column;gap:var(--space-8)}
.info-card p{font-size:var(--font-caption-size);line-height:var(--font-caption-lh);color:var(--color-text-secondary)}
@media (max-width:767px){
  .card-grid-3{grid-template-columns:1fr}
}

/* —— 06 证据链 caption 行 —— */
.chain-line{
  margin-top:var(--space-24);
  text-align:center;
  font-size:var(--font-caption-size);
  line-height:var(--font-caption-lh);
  color:var(--color-text-secondary);
}
.chain-arrow{
  display:inline-block;
  width:14px;height:14px;
  margin-inline:var(--space-8);
  vertical-align:-2px;
  color:var(--color-text-tertiary);
}

/* —— 08 收口文案（信任状，不得缩小弱化）—— */
.s08-closing{
  margin-top:var(--space-48);
  margin-inline:auto;
  max-width:46ch;
  text-align:center;
  font-size:var(--font-body-size);
  line-height:var(--font-body-lh);
  font-weight:var(--weight-medium);
}

/* ============================== 09 平台与周期 ============================== */
.s09-chips{margin-block:var(--space-24)}
.s09-copy{display:flex;flex-direction:column;gap:var(--space-8);max-width:72ch;color:var(--color-text-secondary)}
.s09-footnote{margin-top:var(--space-16)}

/* ============================== 10 定价入口 ============================== */
.s10{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:var(--space-48);
  align-items:start;
}
.s10-card{display:flex;flex-direction:column;gap:var(--space-16)}
.s10-card p{color:var(--color-text-secondary)}
.s10-example{font-weight:var(--weight-medium);color:var(--color-text-primary)}
.s10-actions{display:flex;flex-direction:column;gap:var(--space-12);width:180px}
@media (max-width:767px){
  .s10{grid-template-columns:1fr;gap:var(--space-24)}
  .s10-actions{width:100%}
}

/* ============================== 12 收尾 CTA（深色块，全站唯一） ============================== */
.cta-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-12);
  padding:var(--space-32);
  background:var(--color-surface-strong);
  border-radius:var(--radius-10);
  text-align:center;
}
.cta-title{
  font-size:var(--font-h2-size);
  line-height:var(--font-h2-lh);
  font-weight:var(--weight-medium);
  color:var(--color-on-strong);
}
.cta-lead{color:var(--color-on-strong-soft);max-width:56ch}
.cta-block .btn-row{margin-top:var(--space-12);justify-content:center}
@media (max-width:767px){
  .cta-block{padding:var(--space-24)}
}