/* ============================================================
   index.html 页面专属样式 home.css
   依赖 base.css / components.css 的设计令牌,不单独定义颜色。
   ============================================================ */

/* ---------- 平台货道网格 ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.plat-grid > *{min-width:0}
.plat-card{
  display:flex;flex-direction:column;
  background:var(--bg-panel-2);border-radius:18px;padding:22px 20px;
  box-shadow:0 10px 26px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.plat-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px var(--shadow-card),0 0 30px var(--glow-board)}
.plat-ic{
  width:44px;height:44px;flex:none;border-radius:13px;background:var(--win-2);
  display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:14px;
}
.plat-ic svg{width:24px;height:24px}
.plat-name{font-size:16px;font-weight:800;margin-bottom:8px}
.plat-desc{font-size:13px;color:var(--text-muted);line-height:1.85;margin-bottom:16px}
.plat-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--accent);
  transition:color .2s ease;
}
.plat-go svg{width:14px;height:14px;flex:none;transition:transform .2s ease}
.plat-go:hover svg{transform:translateX(3px)}
.plat-note{margin-top:16px;font-size:13px;line-height:1.9}
.plat-all{margin-top:22px;text-align:right}
.plat-all a,.blog-all a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--text-muted);
  transition:color .2s ease;
}
.plat-all a svg,.blog-all a svg{width:15px;height:15px;flex:none;transition:transform .2s ease}
.plat-all a:hover,.blog-all a:hover{color:var(--accent)}
.plat-all a:hover svg,.blog-all a:hover svg{transform:translateX(3px)}

/* ---------- 快速上手三步卡 ---------- */
.qs-card{
  background:var(--bg-panel-2);border-radius:18px;padding:24px;
  box-shadow:0 10px 26px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.qs-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px var(--shadow-card),0 0 30px var(--glow-board)}
.qs-no{
  display:inline-flex;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink);
  background:linear-gradient(180deg,var(--plate-1),var(--plate-2));
  padding:4px 10px;border-radius:7px;box-shadow:0 3px 8px var(--shadow-cap);margin-bottom:14px;
}
.qs-name{font-size:16.5px;font-weight:800;margin-bottom:10px}
.qs-desc{font-size:13.5px;color:var(--text-muted);line-height:1.9}
.qs-more{margin-top:26px}

/* ---------- 信任背书:开源生态 + 克隆命令 ---------- */
.trust-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.trust-grid > *{min-width:0}
.trust-text{
  background:var(--bg-panel-2);border-radius:20px;padding:28px;
  box-shadow:0 12px 30px var(--shadow-card);
}
.trust-text h3{font-size:15.5px;font-weight:800;margin:0 0 8px}
.trust-text p{font-size:14px;color:var(--text-muted);line-height:1.95;margin-bottom:20px}
.trust-text p:last-child{margin-bottom:0}
.clone-panel{
  position:sticky;top:calc(var(--header-h) + 20px);
  background:linear-gradient(160deg,var(--bg-panel),var(--machine-2));
  color:var(--ink);border-radius:20px;padding:26px;
  box-shadow:0 16px 40px var(--shadow-card);
}
.clone-title{font-size:17px;font-weight:900;letter-spacing:.5px;margin-bottom:10px}
.clone-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin-bottom:16px}
.clone-box{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--win-2),var(--win-3));
  border-radius:13px;padding:10px 10px 10px 16px;
  box-shadow:inset 0 2px 10px var(--shadow-inset);
}
.clone-cmd{
  flex:1;min-width:0;overflow-x:auto;white-space:nowrap;
  font-family:var(--font-mono);font-size:12.5px;color:var(--accent);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.copy-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2));color:var(--ink);
  font-size:12.5px;font-weight:800;padding:9px 14px;border-radius:10px;
  box-shadow:0 6px 16px var(--glow-btn),inset 0 1.5px 0 var(--hl-btn);
  transition:transform .2s ease,box-shadow .2s ease;
}
.copy-btn svg{width:13px;height:13px;flex:none}
.copy-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px var(--glow-btn-hover),inset 0 1.5px 0 var(--hl-btn)}
.copy-btn.is-copied{background:var(--success);color:var(--ink);box-shadow:0 6px 16px var(--glow-success)}
.clone-note{margin-top:14px;font-size:12.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- FAQ 精选内的链接 ---------- */
.faq-a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ver-dim);transition:text-decoration-color .2s ease}
.faq-a a:hover{text-decoration-color:var(--accent)}

/* ---------- 博客预览尾链 ---------- */
.blog-all{margin-top:28px;text-align:right}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .trust-grid{grid-template-columns:1fr}
  .clone-panel{position:static}
}
@media (max-width:640px){
  .plat-all,.blog-all{text-align:left}
}