/* =========================================================
   Clash正版官网 · 首页专属样式(index.html)
   依赖 base.css / components.css 的设计令牌,零硬编码颜色。
   ========================================================= */

/* ---- Hero:按钮组紧跟 H1 ---- */
.hm-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}

/* ---- 快速上手三步 ---- */
.hm-steps-sec{background:var(--paper-panel);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.hm-steps-sec .gz-panel{background:var(--paper);padding:24px 26px}
.hm-step p{margin:14px 0 0;font-size:14px;line-height:2;color:var(--ink)}
.hm-step-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px dotted var(--line-gold)}
.hm-step-no{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--ink);
  font-family:var(--font-display);font-size:16px;font-weight:700;
}
.hm-step-title{font-family:var(--font-display);font-size:17px;letter-spacing:.1em}

/* 区块尾行链接 */
.hm-secfoot{margin-top:26px;text-align:right}

/* ---- 五平台领取入口 ---- */
.hm-plats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}
.hm-plats>*{min-width:0}
.hm-plat{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--paper-panel);
  border:1px solid var(--line-gold);
  padding:22px 20px 18px;
  min-width:0;
}
.hm-plat:hover{border-color:var(--ink-muted)}
.hm-plat-icon{width:30px;height:30px;flex-shrink:0;color:var(--ink)}
.hm-plat-name{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.hm-plat-note{font-size:12.5px;line-height:1.85;color:var(--ink-muted)}
.hm-plat-go{
  margin-top:auto;padding-top:12px;
  font-size:12.5px;letter-spacing:.12em;color:var(--ink-muted);
  border-top:1px dotted var(--line-gold);
  align-self:stretch;
}
.hm-plat:hover .hm-plat-go{color:var(--ink)}

/* ---- 开源背书:左事实清单 + 右克隆命令框 ---- */
.hm-trust-sec{background:var(--paper-panel);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.hm-trust{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:30px;align-items:start;
  margin-top:26px;
}
.hm-trust>*{min-width:0}
.hm-facts{display:grid;gap:0;border-top:1px solid var(--line-gold)}
.hm-fact-row{padding:18px 2px;border-bottom:1px dotted var(--line-gold)}
.hm-fact-row dt{
  font-family:var(--font-display);font-size:15px;font-weight:700;
  letter-spacing:.14em;margin-bottom:6px;
}
.hm-fact-row dd{margin:0;font-size:14px;line-height:2;color:var(--ink)}

.hm-clone-box{padding:24px 24px 20px}
.hm-clone-label{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.22em;color:var(--ink-muted);
  margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--line-gold);
}
.hm-clone-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hm-clone-cmd{
  flex:1 1 240px;min-width:0;
  display:block;
  background:var(--paper-panel);
  border:1px solid var(--line-gold);
  padding:11px 14px;
  font-size:12.5px;line-height:1.7;
  overflow-wrap:anywhere;
}
.hm-copy{flex-shrink:0}
.hm-clone-note{margin:14px 0 0;font-size:12.5px;line-height:1.95;color:var(--ink-muted)}

/* ---- 常见问题摘录 ---- */
.hm-qa{margin-top:24px;border-top:1px solid var(--line-gold)}
.hm-qa-item{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:8px 26px;align-items:baseline;
  padding:16px 2px;
  border-bottom:1px dotted var(--line-gold);
}
.hm-qa-q{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.03em}
.hm-qa-a{font-size:13.5px;line-height:1.95;color:var(--ink-muted)}
.hm-qa-link{font-size:12.5px;letter-spacing:.1em;color:var(--ink-muted);white-space:nowrap}
.hm-qa-link:hover{color:var(--ink)}

/* ---- 响应式 ---- */
@media (max-width:1080px){
  .hm-plats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .hm-trust{grid-template-columns:minmax(0,1fr)}
  .hm-qa-item{grid-template-columns:minmax(0,1fr)}
  .hm-qa-link{justify-self:start}
}
@media (max-width:700px){
  .hm-plats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hm-cta{margin-top:20px}
  .hm-cta .gz-btn{flex:1 1 100%}
  .hm-secfoot{text-align:left}
  .hm-clone-row{flex-direction:column;align-items:stretch}
  .hm-copy{align-self:flex-start}
}
</<FILE-GUARD>>