/* =========================================================
   Clash指南 · home.css —— 首页专属样式
   仅新增本页组件;颜色全部引用 base.css :root 令牌。
   ========================================================= */

/* ---------- Hero 徽标 ---------- */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;line-height:1;color:var(--text-muted);
  border:var(--bd) solid var(--border);
  background:var(--bg);padding:8px 13px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.hero-badge i{
  width:8px;height:8px;flex-shrink:0;
  background:var(--success);
  animation:pip 1.4s steps(1,end) infinite;
}
@keyframes pip{0%,64%{opacity:1}65%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.hero-badge i{animation:none}}

/* ---------- 平台入口网格 ---------- */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.plat-grid>*{min-width:0}
.plat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--bg);
  border:var(--bd) solid var(--border);
  padding:20px 18px;
}
.plat-card:hover{border-color:var(--accent)}
.plat-ico{width:34px;height:34px;flex-shrink:0}
.plat-name{
  font-family:var(--font-mono);font-size:16px;font-weight:700;
  letter-spacing:.05em;color:var(--text);
}
.plat-desc{color:var(--text-muted);font-size:13.5px;line-height:1.8}
.plat-card .btn{margin-top:auto}
@media (max-width:1000px){.plat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.plat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.plat-grid{grid-template-columns:1fr}}

/* ---------- 区块尾部"查看更多"行 ---------- */
.more-line{margin-top:26px;text-align:center}

/* ---------- 信任背书 ---------- */
.trust-h{
  font-size:16px;font-weight:900;color:var(--accent);
  letter-spacing:.05em;margin-bottom:8px;
}
.trust-h+.trust-p{margin-bottom:18px}
.trust-p{color:var(--text-muted);font-size:14px;line-height:1.9}
.trust-p:last-child{margin-bottom:0}

/* ---------- clone 命令展示框 ---------- */
.clonebox{
  margin-top:22px;
  border:var(--bd) solid var(--border);
  background:var(--bg-panel);
}
.clone-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;
  border-bottom:var(--bd) solid var(--border);
  background:var(--bg-panel2);
}
.clone-lb{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--text-muted);line-height:1;
  overflow:hidden;white-space:nowrap;
}
.copy-btn{
  appearance:none;cursor:pointer;flex-shrink:0;
  font-family:var(--font-mono);font-size:12px;font-weight:700;line-height:1;
  color:var(--accent);background:var(--bg);
  border:var(--bd) solid var(--accent);
  padding:8px 12px;min-height:34px;
}
.copy-btn:hover{background:var(--accent);color:var(--bg)}
.copy-btn.done{color:var(--success);border-color:var(--success);background:var(--bg)}
.clone-cmd{
  font-family:var(--font-mono);font-size:14px;line-height:1.6;
  color:var(--text);
  padding:16px 18px;
  overflow-x:auto;white-space:nowrap;
  overscroll-behavior-x:contain;
}
.clone-p{color:var(--accent);margin-right:10px}

/* ---------- 常见问题速查 ---------- */
.qa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qa-list>*{min-width:0}
.qa-item{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg);
  border:var(--bd) solid var(--border);
  padding:18px;
}
.qa-item:hover{border-color:var(--accent)}
.qa-q{font-size:15.5px;font-weight:900;color:var(--text);line-height:1.6}
.qa-q::before{content:"▶ ";color:var(--error);font-size:11px}
.qa-item:hover .qa-q{color:var(--accent)}
.qa-a{color:var(--text-muted);font-size:13.5px;line-height:1.85}
@media (max-width:640px){.qa-list{grid-template-columns:1fr}}