/* ==========================================================================
   VPN31 · home.css
   首页专属:卖点拼盘右列堆叠 / 线路状态行 / 线路说明 / 套餐说明 /
   差异说明双列 / 底部 CTA 带
   设计值一律引用 :root 令牌,不新增硬编码颜色
   ========================================================================== */

/* ==========================================================================
   1. 卖点拼盘:右侧 5 列竖叠两块小卡(不记录日志 / 不限台数)
   ========================================================================== */

.bento-stack{
  grid-column:span 5;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:1px;
  min-width:0;
  background-color:var(--border);
}

.bento-stack > .bento-card{grid-column:auto;}

/* ==========================================================================
   2. 线路状态(容器由 servers.js 注入行,样式在此)
   ========================================================================== */

.status-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  margin-bottom:10px;
}

.status-head .kicker{margin-bottom:0;}

.status-hint{
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

#server-status{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  background-color:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

#server-status:empty{display:none;}

.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px 16px;
  background-color:var(--panel);
  font-size:13px;
  line-height:1.4;
  color:var(--text);
}

.srv-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-a12);
  animation:srvPulse 2.8s ease-in-out infinite;
}

@keyframes srvPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.55;transform:scale(.82);}
}

.srv-flag{
  flex:none;
  display:inline-flex;
  align-items:center;
  line-height:1;
}

.srv-name{
  min-width:0;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.srv-type{
  flex:none;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:11px;
  font-weight:500;
  color:var(--accent-dark);
  white-space:nowrap;
}

.srv-ms{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:-.01em;
  color:var(--muted);
  white-space:nowrap;
}

.srv-bw{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:-.01em;
  color:var(--muted);
  white-space:nowrap;
}

/* ==========================================================================
   3. 线路说明
   ========================================================================== */

.routes-note{
  margin-top:var(--sp-4);
  max-width:72ch;
}

.routes-note h3{margin-bottom:10px;}

.routes-note p{
  margin:0 0 10px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}

.routes-note p:last-child{margin-bottom:0;}

.routes-note strong{
  color:var(--text);
  font-weight:650;
}

.routes-more{margin-top:var(--sp-3);}

/* ==========================================================================
   4. 套餐说明
   ========================================================================== */

.plans-note{
  margin-top:var(--sp-3);
  max-width:72ch;
}

.plans-note p{
  margin:0 0 10px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}

.plans-note p:last-child{margin-bottom:0;}

.plans-extra{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  margin-top:var(--sp-3);
}

/* ==========================================================================
   5. 差异说明双列
   ========================================================================== */

.why-split{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:clamp(24px, 3vw, 40px);
  align-items:start;
}

.why-split .prose p{
  font-size:15px;
  line-height:1.82;
  color:var(--muted);
}

.why-facts{
  position:relative;
  min-width:0;
}

/* ==========================================================================
   6. 底部 CTA 带
   ========================================================================== */

.cta-band{
  position:relative;
  margin-top:clamp(24px, 4vw, 48px);
  padding-block:clamp(32px, 4vw, 52px);
  background-image:var(--grad-bar);
  color:var(--on-accent);
  overflow:hidden;
}

.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(var(--white-a24) .6px, transparent .6px);
  background-size:4px 4px;
  opacity:.55;
}

.cta-band-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
}

.cta-band h2{
  color:var(--on-accent);
  font-size:clamp(1.5rem, 2.4vw, 2rem);
}

.cta-band p{
  margin:8px 0 0;
  max-width:44ch;
  font-size:14.5px;
  line-height:1.7;
  color:var(--on-accent);
  opacity:.9;
}

.cta-band .btn{
  flex:none;
  white-space:nowrap;
  background-color:var(--panel);
  border-color:var(--panel);
  color:var(--accent-dark);
}

/* ==========================================================================
   7. 响应式
   ========================================================================== */

@media (max-width:900px){
  .bento-stack{grid-column:span 12;}
  .why-split{grid-template-columns:minmax(0, 1fr);}
}

@media (max-width:640px){
  #server-status{grid-template-columns:minmax(0, 1fr);}
  .srv-row{padding:10px 12px;}
  .cta-band .btn{width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .srv-dot{animation:none;}
}