/* =====================================================
   Clash下载 · clash06.com —— 首页专属样式
   Hero 徽标行 / peek 补充说明 / 下载平台格图标 /
   信任背书网格 / clone 命令框 / 常见问题精选条
   ===================================================== */

/* ---- Hero 小标签徽标 ---- */
.hero-flag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:var(--text-muted);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 17px;
  margin-bottom:18px;
}

.flag-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  animation:flagPulse 2.6s ease-in-out infinite;
}

@keyframes flagPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.78);}
}

/* ---- peek 分区补充说明 ---- */
.peek .fact-strip{margin-top:18px;}

.peek-note{
  max-width:560px;
  margin:18px auto 0;
  font-size:14.5px;
  color:var(--text-muted);
}

/* ---- 下载平台格:图标与适用说明 ---- */
.tile-ico{
  width:34px;
  height:34px;
  flex-shrink:0;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:4px;
}

.tile-ico circle{fill:var(--accent);stroke:none;}

.tile-desc{
  font-size:12.5px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.55;
}

/* ---- 「查看全部」类行尾链接 ---- */
.more-link{
  text-align:center;
  margin-top:32px;
}

.more-link a{
  font-size:15px;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
}

.more-link a:hover{
  color:var(--accent-dark);
  text-decoration:underline;
}

/* ---- 信任背书网格 ---- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

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

.trust-grid h3{margin-bottom:10px;}

.trust-grid p{
  font-size:15px;
  color:var(--text-muted);
}

/* ---- clone 命令展示框 ---- */
.clone-box{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 16px;
  margin-top:14px;
  min-width:0;
}

.clone-box code{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--text);
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  min-width:0;
  flex:1;
}

.clone-copy{
  flex-shrink:0;
  font-size:13px;
  font-weight:600;
  color:var(--accent-dark);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 16px;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}

.clone-copy:hover{
  color:var(--accent);
  border-color:var(--peach-deep);
}

.clone-note{
  font-size:13px;
  margin-top:12px;
}

/* ---- 常见问题精选条 ---- */
.qa-strip{
  max-width:820px;
}

.qa-line{
  font-size:15px;
  color:var(--text-muted);
  border-left:4px solid var(--peach-deep);
  background:var(--bg-panel);
  border-radius:var(--radius-md);
  padding:14px 20px;
}

.qa-line + .qa-line{margin-top:14px;}

.qa-line strong{
  display:block;
  color:var(--text);
  font-weight:600;
  margin-bottom:4px;
}

/* ---- 响应式 ---- */
@media (max-width:820px){
  .trust-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .flag-dot{animation:none;}
  .clone-copy{transition:none;}
}