/* ============================================================
   Clash for iOS — home.css(仅首页使用)
   Hero 徽标 / CTA 行 / 平台入口网格 / 信任背书 / 命令框 / 迷你 FAQ
   全部取值引用 base.css 设计令牌,禁止硬编码颜色
   ============================================================ */

/* —— Hero 小标签徽标(呼吸圆点 + 短状语) —— */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:var(--glass);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-lift);
  padding:.45rem 1.05rem;
  margin-bottom:1.7rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--text-muted);
}

.hero-badge i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  animation:badge-breath 2.8s ease-in-out infinite;
}

@keyframes badge-breath{
  0%,100%{opacity:.45;transform:scale(.8);}
  50%    {opacity:1;transform:scale(1);}
}

/* —— H1 之后紧跟的 CTA 按钮行 —— */
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9rem;
  margin-top:2rem;
}

/* —— 区块末尾"查看全部"行 —— */
.sec-more{
  margin-top:1.7rem;
  text-align:center;
}

/* —— 平台入口网格 —— */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
}

.plat-grid>*{min-width:0;}

.plat-card{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  background:var(--bg-panel);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  padding:1.35rem 1.25rem;
  min-width:0;
  transition:transform .2s ease,box-shadow .2s ease;
}

.plat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

.plat-ic{
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--ink);
  color:var(--on-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.plat-ic svg{width:24px;height:24px;display:block;}

.plat-name{
  font-size:1.05rem;
  font-weight:800;
}

.plat-note{
  color:var(--text-muted);
  font-size:.88rem;
  line-height:1.85;
}

.plat-go{
  margin-top:auto;
  font-weight:700;
  font-size:.88rem;
  color:var(--accent-dark);
}

/* —— 快速上手面板内的完整教程链接 —— */
.steps-more{
  margin-top:1.8rem;
  text-align:right;
}

/* —— 信任背书 —— */
.trust-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

.trust-cols{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 2rem;
}

.trust-cols>p{
  min-width:0;
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.95;
}

/* —— git clone 命令展示框 —— */
.clone-box{
  margin-top:1.8rem;
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--ink);
  color:var(--on-ink);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);
  padding:1rem 1.3rem;
}

.clone-box code{
  flex:1;
  min-width:0;
  background:none;
  padding:0;
  color:inherit;
  font-size:.88rem;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow-x:auto;
}

.clone-box .btn{flex-shrink:0;}

/* —— 常见问题精选 —— */
.mini-faq{
  list-style:none;
  display:grid;
  gap:.85rem;
}

.mini-faq li{
  background:var(--bg-panel);
  border-radius:18px;
  box-shadow:var(--shadow-lift);
  padding:1.05rem 1.35rem;
  min-width:0;
}

.mini-faq b{
  display:block;
  font-size:.98rem;
  font-weight:800;
  margin-bottom:.25rem;
}

.mini-faq span{
  display:block;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.9;
}

/* —— 响应式 —— */
@media (max-width:960px){
  .plat-grid{grid-template-columns:repeat(2,1fr);}
  .trust-cols{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .plat-grid{grid-template-columns:1fr;}

  .hero-cta{
    width:100%;
  }

  .hero-cta .btn{
    flex:1 1 auto;
    justify-content:center;
  }

  .clone-box{
    flex-direction:column;
    align-items:stretch;
  }

  .clone-box .btn{align-self:flex-end;}

  .steps-more{text-align:left;}
}

/* —— 动画降级 —— */
@media (prefers-reduced-motion:reduce){
  .hero-badge i{animation:none;opacity:1;transform:none;}
  .plat-card{transition:none;}
  .plat-card:hover{transform:none;}
}