/* ============================================================
   Clash下载站 · 首页专属样式
   依赖 base.css / components.css 的 :root 令牌
   ============================================================ */

/* ---------- Hero 补充件 ---------- */
.hero-flag{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.flag-dot{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--wax);
}
.hero-chips{margin-top:20px}
.wax-seal{color:var(--wax)}

/* ---------- 区块抬头 ---------- */
.sec-head{margin-bottom:32px}
.sec-head h2{margin-bottom:.35em}
.sec-lead{
  max-width:40em;
  font-size:14.5px;
  margin:0;
}
.sec-tail{margin:26px 0 0}

/* ---------- 平台入口网格 ---------- */
.port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px;
}
.port-grid>*{min-width:0}
.port-card{
  display:flex;
  flex-direction:column;
  background:var(--paper-lift);
  border:var(--hairline);
  border-radius:var(--corner);
  padding:20px 20px 18px;
  text-decoration:none;
  color:var(--ink);
  transition:transform .18s ease;
}
.port-card:hover{transform:translateY(-2px)}
.port-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  border:var(--hairline);
  border-radius:var(--corner);
  background:var(--paper);
  color:var(--ink);
  margin-bottom:14px;
}
.port-card h3{margin:0 0 8px;font-size:1.05rem}
.port-card p{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.75;
  margin:0 0 14px;
}
.port-go{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--wax-deep);
}
.port-card:hover .port-go{
  text-decoration:underline;
  text-decoration-color:var(--wax);
  text-underline-offset:3px;
}

/* ---------- 快速上手预览 ---------- */
.quick-panel{padding:clamp(22px, 3.5vw, 34px)}
.quick-panel .step-list{margin-bottom:0}
.quick-t{
  font-size:1.05rem;
  margin:0 0 .4em;
}
.quick-panel .step-list p{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:0;
}
.quick-more{margin:22px 0 0 48px}

/* ---------- 开源背景 ---------- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-bottom:28px;
}
.trust-grid>*{min-width:0}
.trust-grid .panel p:last-child{
  font-size:14px;
  line-height:1.9;
  margin-bottom:0;
}

/* 克隆命令展示框 */
.clone-box{
  background:var(--paper-deep);
  border:var(--hairline);
  border-radius:var(--corner);
  padding:20px 22px;
}
.clone-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.clone-cmd{
  flex:1 1 280px;
  min-width:0;
  display:block;
  background:var(--paper-lift);
  border:var(--hairline);
  border-radius:var(--corner);
  font-family:var(--font-mono);
  font-size:13px;
  padding:11px 14px;
  overflow-x:auto;
  white-space:nowrap;
}
.clone-note{
  font-size:12.5px;
  margin:12px 0 0;
}

/* ---------- 常见问题精选 ---------- */
.pick-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.pick-list>*{min-width:0}
.pick-list li{
  display:flex;
  gap:14px;
  margin:0;
  background:var(--paper-lift);
  border:var(--hairline);
  border-radius:var(--corner);
  padding:18px 20px;
}
.pick-ix{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--wax);
  flex-shrink:0;
  padding-top:3px;
}
.pick-list strong{
  display:block;
  font-size:15px;
  margin-bottom:6px;
}
.pick-list p{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.8;
  margin:0;
}
.pick-list p a{
  color:var(--wax-deep);
  text-decoration:underline;
  text-decoration-color:var(--wax);
  text-underline-offset:3px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 820px){
  .trust-grid{grid-template-columns:1fr}
  .pick-list{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .quick-more{margin-left:0}
  .quick-more .btn{width:100%}
  .clone-row .btn{width:100%}
}
</style>