/* ==========================================================================
   VPNUJ — home.css
   Page-scoped styles for the zh-CN home page only.
   Everything here builds on the tokens defined in base.css; no new colours,
   radii or font stacks are introduced outside :root additions below.
   ========================================================================== */

:root{
  /* scroll-shade used by the horizontally scrollable route table edge */
  --scroll-shade:rgba(18,19,22,.10);
}

/* ==========================================================================
   1. Static fact band (below hero, decorative)
   ========================================================================== */

.stat-band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:0 26px;
  margin:0;
  padding:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.stat-band > span{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:13px 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stat-band b{
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}

/* ==========================================================================
   2. Server status mount (injected by servers.js)
   ========================================================================== */

.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  max-width:100%;
}

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

.srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:11px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  font-size:13px;
  color:var(--text);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}

.srv-row:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.srv-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--accent-soft);
  flex:none;
}

.srv-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:none;
  font-size:13px;
  line-height:1;
  color:var(--text-muted);
}

.srv-flag svg{width:16px;height:16px;}

.srv-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:var(--text);
}

.srv-type{
  flex:none;
  padding:1px 8px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

.srv-ms{
  flex:none;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}

.srv-bw{
  flex:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-soft);
  white-space:nowrap;
}

/* ==========================================================================
   3. Capability grid (six explained items)
   ========================================================================== */

.cap-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:var(--sp-6);
}

.cap-grid > *{min-width:0;}

.cap-item{
  position:relative;
  padding:22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}

.cap-item:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.cap-index{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--accent);
}

.cap-item h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.35;
}

.cap-item p{
  margin:0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

.cap-item p.cap-index{color:var(--accent);}

/* ==========================================================================
   4. Route table extras
   ========================================================================== */

.route-notes{margin-top:var(--sp-5);}

.route-notes p{font-size:14.5px;line-height:1.78;}

/* horizontally scrollable table: edge shade hints more content */
.table-scroll[data-label]{
  background-image:
    linear-gradient(90deg,var(--bg-panel),var(--bg-panel)),
    linear-gradient(90deg,var(--bg-panel),var(--bg-panel)),
    linear-gradient(90deg,var(--scroll-shade),rgba(18,19,22,0)),
    linear-gradient(270deg,var(--scroll-shade),rgba(18,19,22,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:22px 100%,22px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}

/* ==========================================================================
   5. Plan extras
   ========================================================================== */

.plan-notes{margin-top:var(--sp-5);}

.plan-notes p{font-size:14.5px;line-height:1.78;}

.traffic-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  margin-top:16px;
  padding:16px 20px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}

.traffic-title{
  margin:0;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.traffic-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text);
}

.traffic-list li{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}

.traffic-list b{font-weight:700;color:var(--text);}
.traffic-list span{color:var(--text-muted);}

/* ==========================================================================
   6. Why-VPNUJ split
   ========================================================================== */

.why-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
}

.why-grid > *{min-width:0;}

.why-side{
  display:grid;
  gap:16px;
}

.why-list{
  display:grid;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.why-list li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.62;
  color:var(--text-muted);
}

.why-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.why-facts{
  display:grid;
  gap:0;
  margin:12px 0 0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:11.5px;
}

.why-facts li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-block:8px;
  border-bottom:1px dashed var(--border);
}

.why-facts li:last-child{border-bottom:0;}
.why-facts span{color:var(--text-soft);white-space:nowrap;flex:none;}
.why-facts b{
  color:var(--text);
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
}

/* ==========================================================================
   7. Section footer link
   ========================================================================== */

.section-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin:var(--sp-5) 0 0;
}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 2px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--accent-dark);
  text-decoration:none;
  border-radius:var(--r-xs);
  transition:color var(--dur-fast) var(--ease);
}

.link-more:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ==========================================================================
   8. Bottom CTA band
   ========================================================================== */

.cta-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:32px 34px;
  border-radius:var(--r-xl);
  color:var(--ink-text);
  background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 62%,var(--ink-3) 100%);
  box-shadow:inset 0 1px 0 var(--ink-line-hi),var(--shadow-sky);
}

.cta-band > div{min-width:0;}

.cta-band h2{
  color:var(--white);
  font-size:clamp(22px,2.3vw,30px);
  letter-spacing:-.02em;
}

.cta-band p{
  margin-top:8px;
  max-width:58ch;
  font-size:13.5px;
  line-height:1.68;
  color:var(--ink-muted);
}

.cta-band .btn-primary{
  background:var(--white);
  color:var(--ink);
  box-shadow:none;
  flex-shrink:0;
}

.cta-band .btn-primary:hover{
  background:var(--bg-panel-2);
  color:var(--ink);
  box-shadow:none;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width:1080px){
  .why-grid{grid-template-columns:minmax(0,1fr);}
  .why-side{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
  .cap-grid{grid-template-columns:minmax(0,1fr);}
  .server-status{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:760px){
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;}
  .stat-band > span{font-size:11.5px;}
}

@media (max-width:640px){
  .stat-band{grid-template-columns:minmax(0,1fr);}
  .stat-band > span{padding:10px 0;}
  .why-side{grid-template-columns:minmax(0,1fr);}
  .cap-item{padding:18px;}
  .traffic-note{padding:14px 16px;}
  .cta-band{padding:22px;}
  .cta-band .btn{width:100%;}
  .srv-row{padding:10px 12px;gap:8px;}
  .srv-bw{display:none;}
}