/* ==========================================================================
   Clash测评 · home.css(首页专属)
   Hero 氛围光晕 / 徽标行 / 维度评测 tab 区 / 平台下载网格 /
   信任背书双栏 + clone 命令框 / 常见问题精选 / 博客预览尾行
   ========================================================================== */

/* ---------- Hero 氛围:黄区内一层缓动大光晕(纯装饰) ---------- */
.app-head{overflow:hidden}
.home-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(46% 60% at 22% 18%,color-mix(in srgb,var(--bg) 34%,transparent) 0%,transparent 70%),
    radial-gradient(52% 66% at 80% 82%,color-mix(in srgb,var(--accent-dark) 40%,transparent) 0%,transparent 72%);
  animation:glow-drift 14s ease-in-out infinite alternate;
}
@keyframes glow-drift{
  from{transform:translate3d(-2%,-1.5%,0) scale(1)}
  to{transform:translate3d(2%,1.5%,0) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .home-glow{animation:none}
}
.app-head>.hero{position:relative;z-index:1}
/* 头部自成层叠上下文:z-index 必须高于金刚区面板(.kong-wrap z-index:2),
   否则移动端抽屉/遮罩(在 header 内部)整体被面板盖住,菜单看得见点不动 */
.app-head>header{position:relative;z-index:60}

/* ---------- Hero 徽标行 ---------- */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:color-mix(in srgb,var(--bg) 66%,transparent);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  padding:7px 18px;
  border-radius:var(--radius-pill);
  margin-bottom:20px;
}
.pulse-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--success);
  flex-shrink:0;
  animation:dot-breathe 2.4s ease-in-out infinite;
}
@keyframes dot-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.78)}
}
@media (prefers-reduced-motion:reduce){
  .pulse-dot{animation:none}
}

/* ---------- 维度评测区 ---------- */
.dim-intro{
  margin-top:16px;
  max-width:760px;
  font-size:14px;
  line-height:1.85;
  color:color-mix(in srgb,var(--text) 76%,var(--bg));
}
.dim-tabs{margin-top:22px}
.pane-lead{
  margin-bottom:24px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--text-muted);
  max-width:720px;
}
.tab-pane .feed-grid{margin-top:14px}

/* ---------- 平台下载网格 ---------- */
.plat-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.plat-grid>*{min-width:0}
.plat-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:20px 22px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.plat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.plat-ico{
  width:44px;height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--bg);
  flex-shrink:0;
  box-shadow:var(--shadow-soft);
}
.plat-ico svg{display:block}
.plat-ico.p-win{background:var(--icon-windows)}
.plat-ico.p-mac{background:var(--icon-macos)}
.plat-ico.p-and{background:var(--icon-android)}
.plat-ico.p-ios{background:var(--icon-ios)}
.plat-ico.p-lin{background:var(--icon-linux)}
.plat-body{display:block;min-width:0}
.plat-name{
  display:block;
  font-size:16px;
  font-weight:800;
  color:var(--text);
}
.plat-note{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}
.plat-go{
  margin-top:auto;
  font-size:13.5px;
  font-weight:700;
  color:var(--accent-dark);
}
.plat-card:hover .plat-go{color:var(--warn)}
.plat-card--all{
  background:var(--bg-panel2);
  justify-content:flex-end;
}

/* ---------- 信任背书双栏 ---------- */
.trust-cols{
  margin-top:24px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:28px;
  align-items:start;
}
.trust-cols>*{min-width:0}
.trust-text h3{
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
}
.trust-text h3+p{margin-bottom:22px}
.trust-text p{
  font-size:14px;
  line-height:1.85;
  color:color-mix(in srgb,var(--text) 80%,var(--bg));
}
.trust-text p:last-child{margin-bottom:0}
.trust-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.clone-box{
  background:var(--bg-panel);
  border-radius:var(--radius-lg);
  padding:20px 22px;
}
.clone-title{
  font-size:13.5px;
  font-weight:800;
  margin-bottom:12px;
}
.clone-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  min-width:0;
}
.clone-row code{
  flex:1;
  min-width:0;
  background:var(--bg);
  border-radius:var(--radius-sm);
  padding:10px 13px;
  font-size:12px;
  line-height:1.6;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}
.copy-btn{
  flex-shrink:0;
  min-height:44px;
  padding:8px 18px;
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:var(--text);
  font-size:13px;
  font-weight:800;
  transition:background-color .15s ease;
}
.copy-btn:hover{background:var(--accent-dark)}
.copy-btn.is-copied{background:var(--success);color:var(--bg)}
.clone-hint{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.trust-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- 常见问题精选 ---------- */
.qa-list{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.qa-list>*{min-width:0}
.qa-item{
  background:var(--bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  padding:16px 20px;
}
.qa-q{
  display:block;
  font-size:14.5px;
  font-weight:800;
}
.qa-a{
  display:block;
  margin-top:7px;
  font-size:13px;
  line-height:1.75;
  color:color-mix(in srgb,var(--text) 74%,var(--bg));
}
.qa-a a{
  color:var(--accent-dark);
  font-weight:700;
}
.qa-a a:hover{color:var(--warn)}

/* ---------- 博客预览尾行 ---------- */
.blog-more-row{
  margin-top:24px;
  display:flex;
  justify-content:center;
}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .plat-grid{grid-template-columns:1fr 1fr}
  .trust-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .plat-grid{grid-template-columns:1fr}
  .qa-list{grid-template-columns:1fr}
  .hero-badge{margin-bottom:16px}
  .clone-row{flex-wrap:wrap}
  .clone-row code{flex-basis:100%}
}