/* =============================================================
   Clash for Android · 首页专属样式
   home.css —— 纯排版 Hero / 事实条 / 平台网格 / 三步预览 / 背书区 / 问答精选
   依赖 base.css 设计令牌
   ============================================================= */

/* ---------- 纯排版 Hero(轻渐变分层,无图形装饰) ---------- */
.hero-plain {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-base) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-plain h1 {
  font-size: clamp(2.15rem, 5.6vw, 3.55rem);
  max-width: 920px;
}
.hero-plain .hero-desc {
  max-width: 660px;
}

/* ---------- 状态栏装饰条(静态事实,等宽字体) ---------- */
.factline {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
.factline-in {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 2.2rem;
  padding-top: .72rem;
  padding-bottom: .72rem;
  font: 500 .74rem/1.7 var(--ff-mono);
  letter-spacing: .07em;
  color: var(--ink-soft);
}
.factline-in b {
  color: var(--lake-deep);
  font-weight: 600;
}

/* ---------- 「查看更多」尾行链接 ---------- */
.more-line {
  margin: 1.8rem 0 0;
  text-align: right;
}
.more-line a {
  font: 600 .88rem/1.5 var(--ff-mono);
}

/* ---------- 下载入口平台网格 ---------- */
.os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.os-grid > * { min-width: 0; }

.os-cell {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.os-cell svg {
  width: 26px;
  height: 26px;
  color: var(--lake);
  flex-shrink: 0;
}
.os-cell h3 {
  margin: 0;
  font-size: 1.02rem;
}
.os-cell p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .86rem;
  flex: 1;
}
.os-cell .act {
  align-self: flex-start;
}

/* ---------- 三步上手预览 ---------- */
.step-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.step-rail > * { min-width: 0; }

.step-cell {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem;
}
.step-no {
  display: inline-block;
  font: 700 .78rem/1.4 var(--ff-mono);
  letter-spacing: .14em;
  color: var(--lake-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-base);
  padding: .18rem .55rem;
  margin-bottom: .8rem;
}
.step-cell h3 {
  margin: 0 0 .45rem;
  font-size: 1.05rem;
}
.step-cell p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
}

/* ---------- 开源背书区 ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 2.4rem;
}
.trust-grid > * { min-width: 0; }

.trust-item h3 {
  margin: 0 0 .4rem;
  font-size: 1rem;
  font-weight: 800;
}
.trust-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
}

.clone-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.8rem;
  background: var(--bg-panel-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .85rem 1.1rem;
}
.clone-tag {
  font: 700 .7rem/1.4 var(--ff-mono);
  letter-spacing: .16em;
  color: var(--lake-deep);
  flex-shrink: 0;
}
.clone-box code {
  flex: 1 1 280px;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  font: 500 .84rem/1.8 var(--ff-mono);
  color: var(--ink);
}
.clone-box .act { flex-shrink: 0; }

/* ---------- 常见问题精选 ---------- */
.qpick {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.qpick li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.qpick .q {
  font-weight: 700;
  color: var(--ink);
}
.qpick .a {
  flex: 1 1 340px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: .9rem;
}
.qpick a {
  font: 600 .84rem/1.5 var(--ff-mono);
  white-space: nowrap;
}

/* ---------- 响应式 ---------- */
@media (max-width: 880px) {
  .step-rail { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; gap: 1.3rem; }
}

@media (max-width: 640px) {
  .factline-in { gap: .3rem 1.4rem; }
  .more-line { text-align: left; }
  .qpick a { white-space: normal; }
}