/* ============================================================
   Clash新手指南 · 首页专属样式(home.css)
   依赖 base.css 设计令牌与 components.css 组件,只做首页增量
   ============================================================ */

/* ---------- Hero:巨型橙色编号 01 压左半屏 ---------- */
.hero-left{justify-content:center;}
.hero-copy{position:relative;z-index:2;}
.mega-no{
  position:absolute;left:64px;top:-14px;z-index:1;
  font-family:var(--font-display);font-weight:900;
  font-size:50vh;line-height:.86;
  color:var(--accent);
  -webkit-text-stroke:var(--line) var(--ink);
  letter-spacing:-.04em;
  opacity:.32;
  pointer-events:none;user-select:none;
}
.label-dot{
  display:inline-block;width:8px;height:8px;
  background:var(--accent);border:var(--line) solid var(--ink);
  margin-right:8px;flex-shrink:0;
  vertical-align:1px;
}

/* ---------- 通用「查看全部」行 ---------- */
.more-line{margin-top:26px;}
.more-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:900;font-size:15px;
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:10px 18px;
}
.more-link:hover{background:var(--panel-2);}
.more-link .arr-mono{font-family:var(--font-mono);font-weight:700;color:var(--accent-deep);}

/* ---------- SEC.02 五平台领料台 ---------- */
.plat-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  border:var(--line) solid var(--ink);background:var(--panel);
}
.plat-grid>*{min-width:0;}
.plat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:20px 18px 16px;
  border-right:var(--line) solid var(--ink);
  background:var(--panel);
}
.plat-card:last-child{border-right:none;}
.plat-card:hover{background:var(--panel-2);}
.plat-fig svg{width:40px;height:40px;}
.plat-name{font-family:var(--font-display);font-weight:900;font-size:18px;}
.plat-note{font-size:13px;line-height:1.8;color:var(--ink-soft);flex:1;}
.plat-id{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-soft);
  border-top:var(--line) dashed var(--ink);
  padding-top:6px;align-self:stretch;
}

/* ---------- SEC.03 工序表增量:详解段 ---------- */
.step-desc{
  margin-top:12px;font-size:14px;line-height:1.9;color:var(--ink-soft);
  border-top:var(--line) dashed var(--ink);padding-top:10px;
}
.callout-body a{border-bottom:2px solid var(--accent);font-weight:700;}
.callout-body a:hover{background:var(--panel-2);}

/* ---------- SEC.04 信任背书 ---------- */
.prov-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start;
}
.prov-grid>*{min-width:0;}
.prov-text h3{
  font-size:18px;font-weight:900;margin-top:22px;margin-bottom:8px;
  padding-left:12px;border-left:6px solid var(--accent);
}
.prov-text h3:first-child{margin-top:0;}
.prov-text p{font-size:14px;line-height:1.95;color:var(--ink-soft);margin-bottom:6px;}
.prov-side{display:flex;flex-direction:column;gap:18px;}
.clone-cap{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft);
  border-bottom:var(--line) solid var(--ink);padding-bottom:7px;margin-bottom:12px;
}
.clone-row{display:flex;flex-direction:column;gap:10px;}
.clone-cmd{
  display:block;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
  background:var(--panel-2);border:1px solid var(--ink);
  padding:10px 12px;overflow-wrap:anywhere;
}
.copy-btn{align-self:flex-start;}
.clone-note{margin-top:12px;font-size:13px;line-height:1.8;color:var(--ink-soft);}
.fact-list li{
  display:flex;gap:12px;align-items:baseline;
  padding-top:7px;padding-bottom:7px;
  border-bottom:1px dashed var(--ink-soft);
  font-size:13px;
}
.fact-list li:last-child{border-bottom:none;}
.fact-k{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);
  flex-shrink:0;min-width:52px;
}
.fact-v{font-weight:700;}

/* ---------- SEC.05 常见问题精选 ---------- */
.qa-strip{
  display:grid;grid-template-columns:1fr 1fr;
  border:var(--line) solid var(--ink);background:var(--panel);
}
.qa-strip>*{min-width:0;}
.qa-item{padding:18px 20px;border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);}
.qa-item:nth-child(2n){border-right:none;}
.qa-item:nth-last-child(-n+2){border-bottom:none;}
.qa-q{font-family:var(--font-display);font-weight:900;font-size:15px;}
.qa-a{margin-top:6px;font-size:14px;line-height:1.85;color:var(--ink-soft);}
.qa-a a{border-bottom:2px solid var(--accent);font-weight:700;}
.qa-a a:hover{background:var(--panel-2);}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .mega-no{font-size:34vh;left:96px;top:0;}
  .plat-grid{grid-template-columns:repeat(3,1fr);}
  .plat-card{border-bottom:var(--line) solid var(--ink);}
  .plat-card:nth-child(3n){border-right:none;}
  .plat-card:nth-child(3){border-right:none;}
  .plat-card:nth-child(4),.plat-card:nth-child(5){border-bottom:none;}
  .prov-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .plat-grid{grid-template-columns:1fr 1fr;}
  .plat-card{border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);}
  .plat-card:nth-child(2n){border-right:none;}
  .plat-card:nth-child(3){border-right:var(--line) solid var(--ink);}
  .plat-card:nth-child(4){border-bottom:none;}
  .plat-card:nth-child(5){border-right:none;border-bottom:none;}
  .qa-strip{grid-template-columns:1fr;}
  .qa-item{border-right:none;}
  .qa-item:nth-last-child(-n+2){border-bottom:var(--line) solid var(--ink);}
  .qa-item:last-child{border-bottom:none;}
}
@media (max-width:640px){
  .mega-no{font-size:26vh;left:auto;right:8px;top:8px;opacity:.2;}
}