/* ============================================================
   39VPN · home.css — 首页专属
   区块标题组 / 卖点工作台索引 / 服务定位 / 线路状态
   ============================================================ */

/* ============ 区块标题组 ============ */
.sec-head{max-width:780px;margin:0 auto 36px;text-align:center}
.sec-head h2{margin:14px 0 10px}
.sec-head p{color:var(--muted);font-size:15px;text-align:left}
.sec-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.band-dark .sec-kicker{border-color:var(--deep-line);background:rgba(159,176,214,.06);color:var(--deep-muted)}
.band-dark .sec-head p{color:var(--deep-muted)}

/* 更多链接 */
.more-link{margin-top:24px;text-align:center}
.more-link a{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:700;font-size:14.5px;transition:color .15s}
.more-link a:hover{color:var(--accent-dark)}
.more-link svg{display:block;flex-shrink:0}

/* ============ 卖点工作台索引(暗区) ============ */
.feat-list{display:grid;grid-template-columns:330px 1fr;column-gap:26px}
.feat-item{display:contents}
.feat-tab{grid-column:1;position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px 14px 18px;border:1px solid var(--deep-line);border-radius:var(--radius-lg);background:transparent;color:var(--deep-muted);text-align:left;cursor:pointer;margin-bottom:10px;transition:border-color .15s,background .15s,color .15s}
.feat-tab:hover{border-color:var(--deep-muted);color:var(--deep-text)}
.feat-tab.on{background:rgba(159,176,214,.08);border-color:var(--accent);color:var(--deep-text)}
.feat-tab.on::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.ft-text{flex:1;min-width:0;text-align:left}
.feat-tab strong{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:800;color:var(--deep-text);letter-spacing:-.01em}
.feat-tab small{display:block;font-size:12px;margin-top:3px;color:var(--deep-muted)}
.ft-arrow{flex-shrink:0;font-family:var(--font-mono);font-size:14px;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.feat-tab.on .ft-arrow{opacity:1;transform:none}
.feat-panel{grid-column:2;grid-row:1 / span 6;display:none}
.feat-panel.on{display:block}
.feat-panel h3{margin:0 0 12px;font-size:19px}
.feat-panel p{font-size:14.5px;line-height:1.9}
.feat-art{margin-top:22px;color:var(--accent);opacity:.92;max-width:100%;height:auto}
.feat-art .a-ok{fill:var(--ok)}
.feat-art .a-gold{fill:var(--gold)}
.feat-art .a-pink{fill:var(--pink)}
.feat-art .art-ok{stroke:var(--ok)}
.feat-art .art-pink{stroke:var(--pink)}

/* ============ 服务定位 ============ */
.why-body{max-width:800px;margin:0 auto;display:grid;gap:16px}
.why-body p{font-size:15px;line-height:1.85;color:var(--text)}
.why-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* ============ 线路状态(servers.js 注入) ============ */
.srv-caption{display:flex;align-items:center;gap:9px;margin:32px 0 14px;font-family:var(--font-display);font-size:15.5px;font-weight:800;color:var(--text)}
.server-status{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.srv-row{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--shadow-card)}
.srv-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:srv-breath 2.4s ease-in-out infinite}
.srv-flag{display:flex;flex-shrink:0}
.srv-flag svg{display:block}
.srv-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--text)}
.srv-type{flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap;max-width:100%;overflow:hidden}
.srv-ms{margin-left:auto;flex-shrink:0;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--ok)}
.srv-bw{flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.srv-note{margin-top:14px;font-size:12.5px;color:var(--muted)}
@keyframes srv-breath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}

/* ============ 响应式 ============ */
@media (max-width:900px){
  .feat-list{display:block}
  .feat-item{display:block}
  .feat-tab{width:100%;margin-bottom:8px}
  .feat-panel{margin-top:2px}
  .feat-panel.on{margin-bottom:16px}
}
@media (max-width:768px){
  .server-status{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .srv-dot{animation:none}
}