/* ============================================================
   home.css — VPNFP 首页专属样式
   节点预览 / 线路状态 / 卖点目录浏览器 / 差异卡片 / 底部 CTA 带
   ============================================================ */

/* ---- 通用:小节头副句 ---- */
.sec-head p{font-size:15px;color:var(--text-muted);margin:0}

/* ---- 通用:更多链接 ---- */
.more-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:22px;
  font-size:14px;
  font-weight:600;
  color:var(--accent);
}
.more-link:hover{text-decoration:underline}

/* ---- 节点预览区 ---- */
.node-advice{margin-top:30px}
.node-advice p{font-size:14.5px;line-height:1.85;color:var(--text-muted)}
.srv-cap{
  margin:30px 0 12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--text-muted);
  opacity:.75;
}
.server-status{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}
.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-s);
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
}
.srv-dot{
  flex:none;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--success);
  animation:srv-breathe 2.8s ease-in-out infinite;
}
.srv-flag{
  flex:none;
  width:22px;height:15px;
  border-radius:3px;
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  letter-spacing:.04em;
  color:var(--text-muted);
}
.srv-name{
  min-width:0;
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.srv-type{
  flex:none;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--accent);
  border:1px solid var(--accent-dark);
  border-radius:var(--r-s);
  padding:1px 6px;
  white-space:nowrap;
}
.srv-ms{margin-left:auto;color:var(--text);white-space:nowrap}
.srv-bw{flex:none;white-space:nowrap}
@keyframes srv-breathe{0%,100%{opacity:.4}50%{opacity:1}}

/* ---- 卖点目录浏览器:桌面左目录右详情,移动端手风琴 ---- */
.feat-browser{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0 44px;
  text-align:left;
}
/* 桌面端条目拆进网格:标题进左列,详情统一跨 6 行进右列 */
.feat-item{display:contents}
.feat-head{grid-column:1;margin:0}
.feat-tab{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:15px 14px 15px 16px;
  border-left:2px solid var(--border);
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--text-muted);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.feat-tab:hover{color:var(--text)}
.feat-dot{
  flex:none;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--border);
  transition:background .15s ease,box-shadow .15s ease;
}
.feat-item.is-active .feat-tab{
  color:var(--text);
  border-left-color:var(--accent);
  background:var(--bg-panel2);
}
.feat-item.is-active .feat-dot{
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
.feat-body{
  grid-column:2;
  grid-row:1 / span 6;
  display:none;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:30px 34px;
}
.feat-item.is-active .feat-body{
  display:flex;
  align-items:center;
  gap:32px;
}
.feat-detail{flex:1;min-width:0}
.feat-detail .feat-tagline{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:12px;
}
.feat-detail p{font-size:14.5px;line-height:1.85;color:var(--text-muted);margin:0}
.feat-detail a{color:var(--accent)}
.feat-art{flex:none;width:150px}
.feat-art svg{display:block;width:100%;height:auto}

/* ---- 差异卡片 ---- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}
.why-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:24px;
}
.why-cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:12px;
}
.why-card h3{font-size:16px}
.why-card p{font-size:14px;line-height:1.8;color:var(--text-muted);margin:0}

/* ---- 底部 CTA 带 ---- */
.cta-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:var(--bg-panel2);
  border:1px solid var(--accent-dark);
  border-radius:var(--r-m);
  padding:36px 40px;
  box-shadow:0 0 46px var(--accent-glow-soft);
}
.cta-band h2{font-size:22px;margin:0 0 8px}
.cta-band p{
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
  margin:0;
  max-width:64ch;
}
.cta-band .btn{flex:none}

/* ---- 断点 ---- */
@media (max-width:960px){
  .feat-browser{display:block}
  .feat-item{
    display:block;
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:var(--r-m);
    margin-bottom:10px;
  }
  .feat-item.is-active{border-color:var(--accent-dark)}
  .feat-head{margin:0}
  .feat-tab{border-left:none;border-radius:var(--r-m) var(--r-m) 0 0}
  .feat-item.is-active .feat-tab{background:transparent}
  .feat-body{
    border:none;
    border-radius:0 0 var(--r-m) var(--r-m);
    padding:2px 18px 20px;
  }
  .feat-item.is-active .feat-body{flex-direction:column;gap:18px}
  .feat-art{width:130px;align-self:center}
  .cta-band{padding:28px 24px}
}
@media (max-width:760px){
  .server-status{grid-template-columns:1fr}
}