/* =========================================================
   VPNTd home.css — 首页专属样式
   线路筛选 / 卖点示意件 / 流量包提示 / 更多链接 / CTA 带
   所有颜色引用 :root 令牌
   ========================================================= */

/* ---------------- 线路地区筛选 ---------------- */
.filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0 16px;
}
.filter-btn{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:999px;
  padding:8px 16px;
  min-height:36px;
  transition:color .15s,border-color .15s,background-color .15s;
}
.filter-btn:hover{color:var(--text);border-color:var(--accent-dark)}
.filter-btn.is-active{color:var(--text);border-color:var(--accent-dark);background:var(--panel2)}

/* ---------------- 选线说明段落 ---------------- */
.route-note{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.8;
  max-width:780px;
  margin-top:14px;
}
.route-note strong{color:var(--text);font-weight:600}

/* ---------------- 卖点面板迷你示意件 ---------------- */
.feature-demo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.demo-node{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--trace);
  flex-shrink:0;
}
.demo-node.is-hot{
  background:var(--accent-dark);
  box-shadow:0 0 10px var(--accent-glow-soft);
}
.demo-line{
  height:2px;
  flex:1 1 30px;
  max-width:120px;
  min-width:16px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--trace),var(--accent-dark));
}
.demo-block{
  width:24px;
  height:16px;
  border:1px solid var(--border);
  border-radius:3px;
  background:var(--panel2);
  flex-shrink:0;
}
.demo-shield{
  width:20px;
  height:24px;
  background:var(--accent-dark);
  opacity:.85;
  clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);
  flex-shrink:0;
}

/* ---------------- 流量包提示条 ---------------- */
.pack-note{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:14px 18px;
  font-size:13.5px;
  color:var(--muted);
}
.pack-note .pack-key{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--accent-dark);
  flex-shrink:0;
}

/* ---------------- 「查看全部」类链接 ---------------- */
.more-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  margin-top:18px;
  font-size:14px;
  font-weight:600;
  color:var(--accent-dark);
  transition:color .15s;
}
.more-link:hover{color:var(--accent)}

/* ---------------- 底部 CTA 带 ---------------- */
.cta-band{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(120deg,var(--panel2),var(--panel) 55%);
}
.cta-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:46px;
  padding-bottom:46px;
}
.cta-band-copy{flex:1 1 340px;min-width:0}
.cta-band-title{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,26px);
  font-weight:800;
  letter-spacing:-.01em;
}
.cta-band-sub{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
  max-width:560px;
}
.cta-band .btn-primary{flex:0 0 auto}

/* ---------------- 窄屏 ---------------- */
@media (max-width:720px){
  .cta-band-inner{flex-direction:column;align-items:flex-start}
  .cta-band .btn-primary{width:100%}
  .pack-note{align-items:flex-start}
}