/* ============================================================
   clashsg.com · 首页专属样式
   依赖 base.css / components.css 的设计令牌与通用组件。
   ============================================================ */

/* —— 区块尾部「查看全部」行 —— */
.more-row{
  margin-top:32px;
}
.more-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  color:var(--accent-dark);
  transition:color .15s ease;
}
.more-link:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ============================================================
   平台下载入口网格
   ============================================================ */
.plat-grid{
  margin-top:32px;
}
.plat-card{
  display:flex;
  flex-direction:column;
  padding:24px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  transition:box-shadow .15s ease;
}
.plat-card:hover{box-shadow:var(--shadow-2);}
.plat-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.plat-ico{
  width:26px;
  height:26px;
  flex-shrink:0;
}
.plat-name{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  color:var(--text);
}
.plat-desc{
  margin-top:10px;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}
.plat-go{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:auto;
  padding-top:14px;
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:600;
  color:var(--accent-dark);
}
.plat-go:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ============================================================
   快速上手三步
   ============================================================ */
.step-flow{
  max-width:840px;
  margin-top:32px;
}
.step-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:22px 0;
}
.step-row + .step-row{
  border-top:1px solid var(--bg-panel-2);
}
.step-no{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg);
  font-size:15px;
  font-weight:600;
}
.step-body h3{
  font-size:16.5px;
  font-weight:700;
  color:var(--text);
}
.step-body p{
  margin-top:6px;
  max-width:66ch;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ============================================================
   信任背书区
   ============================================================ */
.trust-cols{
  margin-top:32px;
  gap:36px;
  align-items:start;
}
.trust-text h3{
  margin-top:22px;
  font-size:16px;
  font-weight:700;
  color:var(--text);
}
.trust-text h3:first-child{margin-top:0;}
.trust-text p{
  margin-top:8px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.clone-slab{
  margin-top:0;
  background:var(--bg);
}
.clone-slab .code-slab-bar{
  justify-content:space-between;
}
.copy-btn{
  display:inline-flex;
  align-items:center;
  padding:4px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-chip);
  background:var(--bg);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  transition:border-color .15s ease,color .15s ease;
}
.copy-btn:hover{
  border-color:var(--accent);
  color:var(--accent-dark);
}
.trust-note{
  margin-top:16px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--text-muted);
}
.trust-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  font-size:13px;
  color:var(--text-muted);
}
.trust-facts li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-chip);
  background:var(--bg);
  max-width:100%;
  overflow:hidden;
}
.tf-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.trust-facts li:nth-child(4n+1) .tf-dot{background:var(--g-blue);}
.trust-facts li:nth-child(4n+2) .tf-dot{background:var(--g-red);}
.trust-facts li:nth-child(4n+3) .tf-dot{background:var(--g-yellow);}
.trust-facts li:nth-child(4n+4) .tf-dot{background:var(--g-green);}

/* ============================================================
   常见问题精选
   ============================================================ */
.mini-faq{
  max-width:840px;
  margin-top:28px;
}
.mini-faq li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 0;
}
.mini-faq li + li{
  border-top:1px solid var(--bg-panel-2);
}
.mf-dot{
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:9px;
}
.mini-faq li:nth-child(4n+1) .mf-dot{background:var(--g-blue);}
.mini-faq li:nth-child(4n+2) .mf-dot{background:var(--g-red);}
.mini-faq li:nth-child(4n+3) .mf-dot{background:var(--g-yellow);}
.mini-faq li:nth-child(4n+4) .mf-dot{background:var(--g-green);}
.mf-body{min-width:0;}
.mf-q{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
}
.mf-a{
  margin-top:4px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}
.mf-a a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-decoration-color:var(--border);
  text-underline-offset:3px;
}
.mf-a a:hover{text-decoration-color:var(--accent-dark);}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:860px){
  .trust-cols{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .step-row{gap:14px;padding:18px 0;}
  .step-no{width:30px;height:30px;font-size:14px;}
}
</parameter>