/* ============================================================
   VPNBN · home.css
   首页专属:晨空山丘线路图 Hero、糖果卡卖点区、事实面板、
   线路状态网格、波浪衔接与窄屏收拢。
   所有颜色/圆角/字体一律引用 base.css 的设计令牌。
   ============================================================ */

/* ------------------------------------------------------------
   首屏:场景容器与文案列
   ------------------------------------------------------------ */
.defs{position:absolute;width:0;height:0;overflow:hidden}

.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--header-h));
  padding:96px var(--gutter) 128px;
}

.hero-visual{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow-x:clip;
  max-width:100%;
}
.scene{position:absolute;inset:0;width:100%;height:100%}
.scene-svg{display:block;width:100%;height:100%}

.hero-inner{position:relative;z-index:2;width:100%}
.hero-copy{
  width:100%;
  max-width:600px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.h1{
  margin:20px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:62px;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--text);
  width:max-content;
  max-width:900px;
}
.h1 .kw{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-right:.02em;
}

.hero-copy .lead{margin:20px 0 0;max-width:600px}
.cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}

.trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
  margin:24px 0 0;
  max-width:600px;
}
.trust li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:var(--text-muted);
  line-height:24px;
}
.trust svg{display:block;flex:0 0 auto;color:var(--success)}

.glass{
  margin-top:28px;
  width:100%;
  display:grid;
  gap:8px;
  padding:12px 18px;
  border-radius:var(--r-card);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--glass-border);
  box-shadow:0 18px 40px -18px var(--sh-teal-12),inset 0 1px 0 var(--text-invert);
}
.g-row{display:flex;align-items:center;gap:14px;min-width:0}
.g-label{
  flex:0 0 auto;
  width:64px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.chips{display:flex;flex:1;justify-content:space-between;gap:6px;min-width:0;flex-wrap:wrap}
.chips li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 12px;
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.chips svg{display:block;flex:0 0 auto;color:var(--text)}
.flag{border-radius:3px}

/* ------------------------------------------------------------
   场景 SVG:渐变停靠点、云、山丘、线路、节点卡
   ------------------------------------------------------------ */
.stop-sky-a{stop-color:var(--sky-top)}
.stop-sky-b{stop-color:var(--sky-mid)}
.stop-sky-c{stop-color:var(--sky-low)}
.stop-far-a{stop-color:var(--hill-far)}
.stop-far-b{stop-color:var(--hill-far-low)}
.stop-near-a{stop-color:var(--hill-near-a)}
.stop-near-b{stop-color:var(--hill-near-b)}
.stop-branch-a{stop-color:var(--teal-line)}
.stop-branch-b{stop-color:var(--accent)}
.stop-purple-a{stop-color:var(--accent)}
.stop-purple-b{stop-color:var(--accent-dark)}
.stop-teal-a{stop-color:var(--success)}
.stop-teal-b{stop-color:var(--success-dark)}
.stop-skyc-a{stop-color:var(--candy-sky)}
.stop-skyc-b{stop-color:var(--candy-sky-dark)}
.stop-honey-a{stop-color:var(--candy-honey)}
.stop-honey-b{stop-color:var(--candy-honey-dark)}
.stop-cream-a{stop-color:var(--candy-cream)}
.stop-cream-b{stop-color:var(--candy-cream-dark)}

.cloud{fill:var(--cloud)}
.bush{fill:var(--bush)}
.branch{fill:none;stroke:url(#g-branch);stroke-width:3;stroke-linecap:round}
.link{fill:none;stroke:var(--border-strong);stroke-width:1.4;stroke-dasharray:3 4;opacity:.8}
.arrow{fill:none;stroke:var(--accent-dark);stroke-width:1.6;stroke-dasharray:4 5;stroke-linecap:round;opacity:.7}
.arrow-head{fill:var(--accent-dark);opacity:.7}

.hl{fill:none;stroke:var(--hl);stroke-width:1}
.hl-soft{fill:none;stroke:var(--hl-soft);stroke-width:1}

/* 设备起点卡 */
.devcard{filter:drop-shadow(0 12px 18px var(--sh-teal-12))}
.dc-bg{fill:var(--text-invert)}
.dc-ic{color:var(--text);transform:translateX(-18px)}
.dc-text{font-family:var(--font-body);font-size:13px;font-weight:600;fill:var(--text)}

/* 节点卡:呼吸 + 同色柔影 */
.node{
  transform-box:fill-box;
  transform-origin:center;
  animation:breathe 6s ease-in-out infinite;
}
.node-hk{filter:drop-shadow(0 10px 16px var(--sh-accent-14));animation-delay:0s}
.node-tokyo{filter:drop-shadow(0 10px 16px var(--sh-accent-14));animation-delay:-1.2s}
.node-sg{filter:drop-shadow(0 10px 16px var(--sh-teal-12));animation-delay:-2.4s}
.node-la{filter:drop-shadow(0 10px 16px var(--sh-sky-12));animation-delay:-3.6s}
.node-fra{filter:drop-shadow(0 10px 16px var(--sh-honey-12));animation-delay:-4.8s}
.node-zrh{filter:drop-shadow(0 10px 16px var(--sh-cream-12));animation-delay:-1.8s}
.node-ldn{filter:drop-shadow(0 10px 16px var(--sh-neutral-10));animation-delay:-3s}
.node-seoul{filter:drop-shadow(0 10px 16px var(--sh-teal-12));animation-delay:-4.2s}
.float-badge{filter:drop-shadow(0 8px 14px var(--sh-accent-10))}
@keyframes breathe{
  0%,100%{transform:scale(.99)}
  50%{transform:scale(1.015)}
}

.nb-white{fill:var(--text-invert)}
.nb-hollow{fill:var(--hollow-fill);stroke:var(--text-invert);stroke-width:2.5}
.nb-purple{fill:url(#g-purple)}
.nb-teal{fill:url(#g-teal)}
.nb-skyc{fill:url(#g-skyc)}
.nb-honey{fill:url(#g-honey)}
.nb-cream{fill:url(#g-cream);stroke:url(#g-cream);stroke-width:8;stroke-linejoin:round}
.b-purple{fill:none;stroke:var(--accent);stroke-width:1.5}
.b-teal{fill:none;stroke:var(--success);stroke-width:1.5}
.hex-hl{fill:none;stroke:var(--hl-soft);stroke-width:1;stroke-linejoin:round}

.bd-bg{fill:var(--bg-panel)}
.bd-text{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  fill:var(--text);
}

.n-city{font-family:var(--font-body);font-size:14px;font-weight:700;fill:var(--text)}
.n-type{font-family:var(--font-mono);font-size:10.5px;font-weight:500;fill:var(--text-muted)}
.n-inv{fill:var(--text-invert)}
.n-inv-soft{fill:var(--text-invert);opacity:.86}

/* 沿线流动的光点 */
.flow-dot{opacity:.95}
.dot-core{fill:var(--accent)}
.dot-halo{fill:var(--accent);opacity:.22}

/* 首屏底缘波浪 */
.hero-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  width:100%;
  height:110px;
  z-index:1;
  display:block;
}
.wave-fill{fill:var(--bg)}

/* 窄屏:节点卡群收成横向可滑的紧凑卡带 */
.node-strip{display:none}
.ns-item{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 14px;
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
  flex:0 0 auto;
}

/* ------------------------------------------------------------
   旗帜与图标配色(内联 SVG 引用)
   ------------------------------------------------------------ */
.f-red{fill:var(--flag-red)}
.f-blue{fill:var(--flag-blue)}
.f-white{fill:var(--text-invert)}
.f-ink{fill:var(--text)}
.f-gold{fill:var(--candy-cream)}
.f-white-stroke{fill:none;stroke:var(--text-invert);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-white-stroke-thick{fill:none;stroke:var(--text-invert);stroke-width:4}
.f-red-stroke{fill:none;stroke:var(--flag-red);stroke-width:2}

/* ------------------------------------------------------------
   数据条与滚动带之间的节奏
   ------------------------------------------------------------ */
.sec-tight.wrap{padding-top:44px;padding-bottom:44px}

/* ------------------------------------------------------------
   核心卖点:糖果卡两行拼盘
   ------------------------------------------------------------ */
.candy-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-bottom:22px;
}
.candy{
  min-width:0;
  border-radius:var(--r-card-lg);
  overflow:hidden;
  box-shadow:0 26px 50px -30px var(--sh-accent-14),inset 0 1px 0 var(--hl-soft);
  transition:transform .22s,box-shadow .22s;
}
.candy:hover{transform:translateY(-4px);box-shadow:0 34px 60px -30px var(--sh-accent-28),inset 0 1px 0 var(--hl-soft)}
.candy-figure{padding:20px 20px 0}
.candy-purple .candy-figure{background:linear-gradient(160deg,var(--tint-purple-top),var(--tint-purple-bot))}
.candy-teal .candy-figure{background:linear-gradient(160deg,var(--tint-teal-top),var(--tint-teal-bot))}
.candy-honey .candy-figure{background:linear-gradient(160deg,var(--tint-honey-top),var(--tint-honey-bot))}
.candy-figure svg{
  display:block;
  width:100%;
  height:auto;
  background:var(--text-invert);
  border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--border-soft);
}
.candy-body{padding:22px 24px 26px}
.candy-purple .candy-body{background:var(--tint-purple-soft)}
.candy-teal .candy-body{background:var(--tint-teal-soft)}
.candy-honey .candy-body{background:var(--tint-honey-soft)}
.candy-body h3{font-size:19px;margin:0 0 10px;color:var(--text)}
.candy-body p{margin:0;font-size:15px;line-height:1.72;color:var(--text)}

/* 糖果卡内的白色内容图 */
.fig-grid{fill:none;stroke:var(--bg-panel2);stroke-width:1}
.fig-line-a{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.fig-line-b{fill:none;stroke:var(--teal-line);stroke-width:2.4;stroke-linecap:round;opacity:.75}
.fig-dot-a{fill:var(--accent)}
.fig-dot-b{fill:var(--teal-line)}
.fig-dot-c{fill:var(--candy-honey)}
.fig-card{fill:var(--bg-panel2)}
.fig-card-hl{fill:none;stroke:var(--text-invert);stroke-width:1}
.fig-lock{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.fig-lock-body{fill:var(--accent)}
.fig-key{fill:var(--text-invert)}
.fig-key-stem{fill:none;stroke:var(--text-invert);stroke-width:3;stroke-linecap:round}
.fig-dev{fill:var(--bg-panel2)}
.fig-dev-screen{fill:var(--text-invert);stroke:var(--border);stroke-width:1}
.fig-dev-base{fill:none;stroke:var(--border-strong);stroke-width:3;stroke-linecap:round}
.fig-dev-dot{fill:var(--border-strong)}

/* 第二行:近白矮卡 + 糖果色竖条 */
.flat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.flat-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  min-width:0;
  padding:22px 22px 22px 28px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:0 18px 38px -30px var(--sh-neutral-10),inset 0 1px 0 var(--text-invert);
  overflow:hidden;
  transition:transform .22s,box-shadow .22s;
}
.flat-card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -30px var(--sh-accent-14),inset 0 1px 0 var(--text-invert)}
.flat-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:var(--flat-bar,var(--accent));
}
.flat-ai{--flat-bar:var(--accent)}
.flat-media{--flat-bar:var(--candy-sky)}
.flat-refund{--flat-bar:var(--success)}
.flat-ic{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:var(--r-node);
  background:var(--text-invert);
  border:1px solid var(--border-soft);
  color:var(--accent-dark);
  box-shadow:0 8px 16px -10px var(--sh-accent-14);
}
.flat-media .flat-ic{color:var(--candy-sky-dark)}
.flat-refund .flat-ic{color:var(--success-dark)}
.flat-card h3{font-size:17px;margin:0 0 8px}
.flat-card p{margin:0;font-size:14.5px;line-height:1.72;color:var(--text-muted)}

/* ------------------------------------------------------------
   节点区:面板带、小标题、选线说明
   ------------------------------------------------------------ */
.sec-panel{position:relative}
.sec-panel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--bg-panel);
  z-index:-1;
}
.wave-sep--up{background:var(--bg-panel)}

.sub-title{margin:34px 0 8px;font-size:18px;font-weight:700}
.sub-title:first-of-type{margin-top:0}
.sub-note{margin:0 0 16px;color:var(--text-muted);font-size:14.5px}
.pick-grid{margin-top:14px}
.pick-note{margin:0 0 10px;color:var(--text-muted);font-size:15px;line-height:1.75;max-width:900px}
.sec-foot{margin:26px 0 0;text-align:center}

/* 线路状态网格(数据由 servers.js 注入) */
#server-status.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0 0 30px;
}
#server-status.server-status:empty{display:none}
.server-status > *{min-width:0}
.server-status .srv-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:12px 16px;
  border-radius:var(--r-node);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--text-invert),0 14px 30px -26px var(--sh-neutral-10);
}
.server-status .srv-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--success);
  animation:srv-breathe 2.6s ease-in-out infinite;
}
.server-status .srv-flag{display:inline-flex;flex:0 0 auto}
.server-status .srv-flag svg{display:block;border-radius:3px}
.server-status .srv-name{
  flex:1 1 auto;
  min-width:0;
  font-size:14.5px;
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.server-status .srv-type{
  flex:0 0 auto;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--bg-panel2);
  border:1px solid var(--border-soft);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent-dark);
  white-space:nowrap;
}
.server-status .srv-ms,
.server-status .srv-bw{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@keyframes srv-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

/* ------------------------------------------------------------
   套餐区:说明与流量包
   ------------------------------------------------------------ */
.plan-notes{margin-top:34px;display:grid;gap:22px}
.pack-panel h3{font-size:17px;margin:0 0 14px}
.pack-list{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.pack-list li{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
  padding:10px 18px;
  border-radius:var(--r-pill);
  background:var(--bg-panel2);
  border:1px solid var(--border-soft);
}
.pack-vol{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
.pack-price{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text)}
.pack-panel p{margin:0;color:var(--text-muted);font-size:15px;line-height:1.72}

/* ------------------------------------------------------------
   为什么选择:左文右事实面板
   ------------------------------------------------------------ */
.why-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:28px;
  align-items:start;
}
.why-copy p{color:var(--text-muted);font-size:15.5px;line-height:1.78;margin:0 0 16px}
.why-copy p:last-child{margin-bottom:0}
.fact-panel{display:flex;flex-direction:column;gap:18px}
.fact-panel h3{font-size:17px;margin:0}
.fact-list{display:flex;flex-direction:column;gap:12px;margin:0}
.fact-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-soft);
  min-width:0;
}
.fact-list li:last-child{border-bottom:0;padding-bottom:0}
.fact-k{
  flex:0 0 auto;
  min-width:64px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.fact-v{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}

/* ------------------------------------------------------------
   博客预览区
   ------------------------------------------------------------ */
#posts .post-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ------------------------------------------------------------
   响应式
   ------------------------------------------------------------ */
@media (max-width:1180px){
  .chips li{padding:0 10px;font-size:12.5px}
  #posts .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .h1{font-size:52px}
  .cluster,
  .arrow,
  .arrow-head,
  .float-badge,
  .flow-dot{display:none}
  .candy-grid{grid-template-columns:minmax(0,1fr)}
  .flat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid{grid-template-columns:minmax(0,1fr)}
  #server-status.server-status{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .hero{flex-direction:column-reverse;min-height:auto;padding:104px var(--gutter) 96px}
  .hero-visual{position:static;z-index:1;pointer-events:auto;width:100%}
  .h1{font-size:40px;width:auto;max-width:100%}
  .hero-copy .lead{font-size:16px}
  .devcard{display:none}
  .node-strip{
    display:flex;
    gap:10px;
    margin-top:28px;
    padding:0 22px 6px;
    overflow-x:auto;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .flat-grid{grid-template-columns:minmax(0,1fr)}
  .hero-wave{height:76px}
}
@media (max-width:640px){
  .h1{font-size:34px}
  .cta{flex-direction:column;width:100%}
  .cta .btn{width:100%}
  .g-row{flex-direction:column;align-items:flex-start;gap:8px}
  .g-label{width:auto}
  .chips{justify-content:flex-start}
  .node-strip{padding:0 18px 6px}
  .pack-list li{width:100%;justify-content:space-between}
  #posts .post-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .flow-dot{display:none}
  .node,.server-status .srv-dot{animation:none}
}