/* ============================================================
   Surge官网 · home.css
   首页专属:状态栏 / 平台入口卡 / 三步上手 / 克隆命令框 / FAQ 链接
   基础令牌与组件见 base.css / components.css
   ============================================================ */

/* ---------- Hero 内补充:placard 主按钮间距 ---------- */
.placard-actions{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:10px;
}

/* ---------- 状态栏装饰条(静态事实,aria-hidden) ---------- */
.statusbar{
  border-top:1px dashed var(--dash);
  border-bottom:1px dashed var(--dash);
  background:var(--bg-deep);
}
.statusbar-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px;
  padding-top:12px;
  padding-bottom:12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--text-muted);
}
.statusbar-inner span{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.statusbar-inner i{
  width:5px; height:5px;
  background:var(--accent);
  flex:none;
}
.statusbar-inner b{ color:var(--text); font-weight:500; }
@media (max-width:640px){
  .statusbar-inner{ gap:6px 16px; font-size:9.5px; }
  .statusbar-inner span{ white-space:normal; }
}

/* ---------- 平台入口卡 ---------- */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}
.pf-grid > *{ min-width:0; }
.pf-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:18px 20px;
  min-width:0;
  transition:border-color .15s linear;
}
.pf-card:hover{ border-color:var(--dash); }
.pf-icon{
  width:34px; height:34px;
  border:1px dashed var(--dash-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  flex:none;
}
.pf-ico{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
}
.pf-card h3{
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
}
.pf-card p{
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.8;
}
.pf-link{
  margin-top:auto;
  padding-top:12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
  transition:color .15s linear;
}
.pf-link:hover{ color:var(--text); }

/* ---------- 区块末尾的居中动作行 ---------- */
.dl-all{
  margin-top:22px;
  display:flex; justify-content:center;
}

/* ---------- 三步上手 ---------- */
.step{
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:20px 22px;
  min-width:0;
}
.step-no{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--accent);
  border:1px dashed var(--dash-soft);
  padding:3px 8px;
  max-width:100%;
  overflow:hidden;
}
.step h3{
  font-size:15px;
  font-weight:800;
  margin:12px 0 8px;
}
.step p{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.85;
}

/* ---------- 信任背书 ---------- */
.trust-grid{ align-items:start; }
.trust-text p{
  margin-bottom:14px;
  font-size:13.5px;
  line-height:1.9;
  color:var(--text-muted);
}
.trust-text p:last-child{ margin-bottom:0; }
.trust-text p strong{ color:var(--text); font-weight:600; }

.clone-box{
  display:flex; align-items:stretch;
  background:var(--bg-deep);
  border:1px solid var(--border);
}
.clone-box code{
  flex:1; min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  padding:13px 16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text);
}
.clone-box button{
  flex:none;
  border-left:1px dashed var(--dash-soft);
  padding:0 18px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--text-muted);
  transition:color .15s linear,background .15s linear;
}
.clone-box button:hover{ color:var(--accent); background:var(--bg-panel2); }
.clone-box button.is-ok{ color:var(--success); }
.clone-note{
  margin-top:12px;
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.8;
}
.trust-chips{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:8px;
}

/* ---------- FAQ 答案内链接 ---------- */
.faq-item .faq-a a{
  color:var(--accent);
  border-bottom:1px dashed var(--dash);
  transition:border-color .15s linear;
}
.faq-item .faq-a a:hover{ border-bottom-color:var(--accent); }