/* ============================================================
   Clash入门指南 · clashrumen.com
   home.css —— 首页专属:轨道图幅 / 事实条 / 平台入口 /
   特性详图面板 / 三步预览 / 背书区 / FAQ 精选 / 博客预览
   ============================================================ */

/* ---------- Hero 轨道图幅(纯装饰,一次配置缓速旋转) ---------- */
.orbit-spin{
  transform-origin:280px 280px;
  animation:orbitspin linear infinite;
}
.orbit-slow{animation-duration:110s;}
.orbit-fast{animation-duration:70s;animation-direction:reverse;}
@keyframes orbitspin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion:reduce){
  .orbit-spin{animation:none;}
}

/* ---------- 状态栏装饰条(静态事实) ---------- */
.factline{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-inline:var(--gutter);
  background:var(--paper-sink);
  overflow:hidden;
}
.fact{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  padding:13px 22px;
  border-right:1px solid var(--rule);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--chalk);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fact:first-child{padding-left:0;}
.fact:last-child{border-right:none;}
.fact em{
  font-style:normal;
  color:var(--chalk-dim);
  letter-spacing:.14em;
  flex-shrink:0;
}

/* ---------- 平台入口网格 ---------- */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.plat-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid var(--rule);
  background:var(--paper-raise);
  padding:24px 22px;
  min-width:0;
  transition:border-color .18s ease;
}
.plat-card:hover{border-color:var(--chalk);}
.plat-ico{
  width:34px;
  height:34px;
  color:var(--chalk);
  flex-shrink:0;
}
.plat-name{
  font-size:16.5px;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--chalk);
}
.plat-note{
  font-size:13px;
  line-height:1.85;
  color:var(--chalk-dim);
}
.plat-go{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--chalk-dim);
}
.plat-card:hover .plat-go{color:var(--chalk);}
.plat-card--all{
  background:var(--paper-sink);
  border-style:dashed;
  justify-content:center;
}
.plat-card--all:hover{border-style:solid;}

/* ---------- 特性详图面板内部 ---------- */
.fpanel-t{
  font-size:18px;
  font-weight:800;
  letter-spacing:.04em;
  margin-bottom:14px;
  padding-right:120px;
}
.fpanel-d{
  font-size:14px;
  line-height:1.95;
  color:var(--chalk-dim);
  max-width:62em;
}
.fpanel-d code{
  background:var(--paper-sink);
  border:1px solid var(--rule);
  padding:1px 6px;
  font-size:.88em;
  color:var(--chalk);
}
.fpanel-code{
  margin-top:18px;
  background:var(--paper-sink);
  border:1px solid var(--rule);
  padding:16px 18px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--chalk);
  max-width:100%;
}

/* ---------- 三步开工预览 ---------- */
.qs-row{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.qs-step{
  position:relative;
  border:1px solid var(--rule);
  background:var(--paper-raise);
  padding:24px 22px 22px;
  min-width:0;
}
.qs-step::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  width:3px;
  height:44px;
  background:var(--seal);
}
.qs-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--chalk);
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--chalk);
  margin-bottom:16px;
}
.qs-t{
  font-size:16.5px;
  font-weight:800;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.qs-d{
  font-size:13.5px;
  line-height:1.9;
  color:var(--chalk-dim);
}
.qs-more{margin-top:28px;}

/* ---------- 开源背书区 ---------- */
.trust-item{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.trust-t{
  font-size:15.5px;
  font-weight:800;
  letter-spacing:.05em;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.trust-t .mono{
  font-size:11px;
  letter-spacing:.12em;
  flex-shrink:0;
}
.trust-d{
  font-size:13.5px;
  line-height:1.9;
  color:var(--chalk-dim);
}
.trust-item .cmd-box{margin-top:auto;}

/* ---------- FAQ 精选 / 博客预览尾部链接 ---------- */
.faq-more,
.blog-more{margin-top:26px;}
.faq-a a{
  color:var(--chalk);
  border-bottom:1px dashed var(--chalk-dim);
}
.faq-a a:hover{border-bottom-color:var(--chalk);}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .board svg{max-height:none;max-width:520px;margin-inline:auto;}
}
@media (max-width:900px){
  .plat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .qs-row{grid-template-columns:1fr;}
  .fpanel-t{padding-right:0;padding-top:26px;}
}
@media (max-width:640px){
  .plat-grid{grid-template-columns:1fr;}
  .fact{padding:11px 14px;font-size:10.5px;}
  .fact:first-child{padding-left:0;}
  .plate--corners{padding:26px 18px;}
}
</code>