/* ============================================================
   VPNBQ — home.css
   首页专属:首屏装置(线路魔方)/ 平台行 / 旗帜行 / 线路状态容器
   设计令牌全部来自 base.css,本文件不新增颜色常量。
   ============================================================ */

/* ---------- 首屏骨架 ---------- */
.hero{
  position:relative;
  min-height:780px;
  display:flex;
  align-items:center;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 52%,var(--bg-bottom) 100%);
}
.beam{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(112deg,transparent 30%,var(--tint-05) 47%,var(--tint-06) 52%,transparent 70%);
}
.grain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:multiply;
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 46%;
  gap:40px;
  align-items:center;
}
.copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.hero-title{
  margin-top:24px;
  font:400 64px/1.12 var(--font-display);
  letter-spacing:-.02em;
  color:var(--text);
}
.hero-title .hi{color:var(--accent)}
.cta-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:26px;
  flex-wrap:wrap;
}
.hero .lede{margin-top:20px}

/* ---------- 首屏信任点 ---------- */
.trust{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:20px;
  font-size:13.5px;
  color:var(--text-2);
}
.trust li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.trust svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}
.trust .mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em}

/* ---------- 平台行 ---------- */
.row-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
  font:500 11.5px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--text-3);
  text-transform:uppercase;
  width:100%;
  max-width:560px;
}
.row-label::after{content:"";flex:1;height:1px;background:var(--border)}
.plat-row{
  display:flex;
  gap:16px;
  margin-top:12px;
  flex-wrap:wrap;
}
.plat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:72px;
  min-width:0;
}
.plat span:last-child{
  font-size:12px;
  line-height:1;
  color:var(--text-2);
  white-space:nowrap;
}
.plat.is-current span:last-child{color:var(--text);font-weight:500}

/* ---------- 热门线路旗帜行 ---------- */
.flag-row{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:22px;
  flex-wrap:wrap;
}
.flag-lbl{
  font:500 11.5px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--text-3);
}
.flag-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-2);
  white-space:nowrap;
}
.f-gold{fill:var(--warn)}
.fs-white{fill:none;stroke:var(--bg-panel)}
.fs-red{fill:none;stroke:var(--flag-red)}

/* ---------- 装置:线路魔方 ---------- */
.cube-stage{
  position:relative;
  height:640px;
  width:100%;
  min-width:0;
  perspective:1400px;
  perspective-origin:50% 40%;
}
.cube-halo{
  position:absolute;
  left:8%;right:8%;top:6%;bottom:14%;
  pointer-events:none;
  background:radial-gradient(closest-side,var(--tint-06),transparent);
}
.cube-shadow{
  position:absolute;
  left:50%;
  top:508px;
  width:420px;
  height:76px;
  margin-left:-210px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,var(--tint-16),transparent 72%);
  filter:blur(14px);
}
.cube-rig{
  position:absolute;
  left:50%;
  top:270px;
  width:320px;
  height:320px;
  margin:-160px 0 0 -160px;
  transform-style:preserve-3d;
  transform:translateY(0) rotateX(-24deg);
  animation:bob 6s ease-in-out infinite;
}
.cube{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(-32deg);
  animation:spin 24s linear infinite;
}
.face{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:8px;
  padding:8px;
  background:var(--graphite-body);
  border-radius:4px;
  box-shadow:inset 0 0 0 1px var(--hl-06);
  backface-visibility:hidden;
}
.face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.f-front{transform:translateZ(160px)}
.f-right{transform:rotateY(90deg) translateZ(160px)}
.f-right::after{background:var(--shade-18)}
.f-back{transform:rotateY(180deg) translateZ(160px)}
.f-back::after{background:var(--shade-08)}
.f-left{transform:rotateY(-90deg) translateZ(160px)}
.f-left::after{background:var(--shade-18)}
.f-top{transform:rotateX(90deg) translateZ(160px)}
.f-top::after{background:var(--hl-06)}
.f-bottom{transform:rotateX(-90deg) translateZ(160px)}
.tile{
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:8px 9px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:linear-gradient(160deg,var(--graphite-hi),var(--graphite-lo));
  box-shadow:inset 0 0 0 1px var(--hl-08),inset 0 1px 0 var(--hl-14);
  font:500 10px/1.25 var(--font-mono);
  letter-spacing:.02em;
  color:var(--tile-ink);
  white-space:nowrap;
}
.tile::before{
  content:"";
  position:absolute;
  left:10px;right:10px;top:10px;bottom:28px;
  border-radius:3px;
  background:radial-gradient(circle at 1px 1px,var(--hl-08) .7px,transparent 1.2px) 0 0/5px 5px;
  opacity:.9;
}
.tile.live{
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  background:linear-gradient(160deg,var(--accent-2),var(--accent));
  color:var(--on-accent);
  box-shadow:inset 0 0 0 1px var(--hl-28),0 0 26px var(--tint-glow);
}
.tile.live::before{opacity:.45}
.tile.live svg{width:22px;height:22px;position:relative}
.tile.live i{font-style:normal;font-size:9px;letter-spacing:.04em;opacity:.85;display:block}
.tile.live b{font-weight:600;font-size:11px;display:block;margin-top:2px}

/* ---------- 漂浮辅助小卡 ---------- */
.aux{
  position:absolute;
  z-index:4;
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--hl-28) inset,0 0 0 1px var(--border),0 20px 44px -20px var(--tint-16),0 8px 18px -10px var(--tint-10);
  animation:drift 8s ease-in-out infinite;
}
.aux-a{
  top:0;right:0;
  height:38px;
  padding:0 14px 0 12px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
}
.aux-a .mono{
  font:500 11px/1 var(--font-mono);
  color:var(--text-3);
  letter-spacing:.01em;
  padding-left:9px;
  border-left:1px solid var(--border);
}
.aux-b{
  left:0;bottom:0;
  padding:11px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:5px;
  animation-delay:-4s;
}
.aux-k{
  font:500 11px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--text-3);
  text-transform:uppercase;
}
.aux-v{font-size:13px;color:var(--text);white-space:nowrap}
.aux-v em{font-style:normal;color:var(--text-3);padding:0 5px}

@keyframes spin{from{transform:rotateY(-32deg)}to{transform:rotateY(328deg)}}
@keyframes bob{
  0%,100%{transform:translateY(0) rotateX(-24deg)}
  50%{transform:translateY(-6px) rotateX(-24deg)}
}
@keyframes drift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .cube,.cube-rig,.aux{animation:none}
  .cube{transform:rotateY(-32deg)}
  .cube-rig{transform:translateY(0) rotateX(-24deg)}
}

/* ---------- 卖点右列容器 ---------- */
.feature-panels{min-width:0}
.feature-panels .feature-detail[hidden]{display:none}

/* ---------- 节点预览区的补充说明 ---------- */
.nodes-note{margin-top:34px;max-width:820px}
.nodes-note h3{margin-bottom:10px}
.nodes-note p{
  margin:12px 0;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
}
.more-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-size:14px;
  color:var(--accent);
  min-height:24px;
}
.more-link:hover{color:var(--accent-dark)}
.more-link svg{flex-shrink:0}

/* ---------- 线路状态容器(servers.js 注入) ---------- */
.srv-block{margin-top:38px}
.srv-note{
  max-width:760px;
  margin:12px 0 16px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--text-2);
}
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 22px;
  padding:8px 12px;
  overflow:hidden;
  max-width:100%;
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--hl-28) inset,0 0 0 1px var(--border),0 14px 30px -26px var(--ink-shadow);
}
.server-status:empty{display:none}
.server-status > *{min-width:0}
.server-status .srv-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 8px;
  border-bottom:1px solid var(--border-soft);
  min-width:0;
  font-size:13.5px;
  color:var(--text);
}
.server-status .srv-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px rgba(31,138,91,.14);
  flex-shrink:0;
  animation:pulse 2.6s ease-in-out infinite;
}
.server-status .srv-flag{
  width:22px;
  height:16px;
  flex:0 0 22px;
  border-radius:3px;
  overflow:hidden;
}
.server-status .srv-name{
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.server-status .srv-type{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent);
  font-size:11.5px;
  white-space:nowrap;
  flex-shrink:0;
}
.server-status .srv-ms,
.server-status .srv-bw{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-2);
  white-space:nowrap;
  flex-shrink:0;
}
.server-status .srv-ms{margin-left:auto}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
@media (prefers-reduced-motion:reduce){
  .server-status .srv-dot{animation:none}
}

/* ---------- 客户端下载区补充 ---------- */
.dl-note-block{margin-top:34px;max-width:820px}
.dl-note-block h3{margin-bottom:10px}
.dl-note-block p{
  margin:12px 0;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
}

/* ---------- 套餐预览区补充 ---------- */
.pack-head{margin:44px 0 18px;max-width:820px}
.pack-head h3{margin-bottom:8px}
.pack-head p{font-size:14px;line-height:1.8;color:var(--text-2)}
.plans-note{margin-top:38px;max-width:820px}
.plans-note h3{margin-bottom:10px}
.plans-note p{
  margin:12px 0;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-2);
}
.plans-note strong{color:var(--text)}

/* ---------- 博客预览区补充 ---------- */
.blog-more{margin-top:26px}

/* ============================================================
   断点
   ============================================================ */
@media (max-width:1180px){
  .hero-title{font-size:56px}
}
@media (max-width:1024px){
  .hero{min-height:auto;padding-top:48px;padding-bottom:56px}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .cube-stage{width:70%;margin-left:auto;margin-right:auto;height:560px}
  .cube-rig{top:240px}
  .cube-shadow{top:460px}
  .aux-a{top:auto;bottom:0;right:0}
  .row-label{max-width:100%}
}
@media (max-width:768px){
  .hero-title{font-size:clamp(28px,7.6vw,40px)}
  .plat-row{gap:12px}
  .plat{width:64px}
  .flag-row{gap:12px 18px}
  .nodes-note,
  .dl-note-block,
  .plans-note,
  .pack-head{max-width:100%}
  .server-status{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hero{padding-top:36px;padding-bottom:44px}
  .cube-stage{width:100%;height:440px;perspective:1000px}
  .cube-rig{transform:translateY(0) rotateX(-24deg) scale(.7);top:190px}
  .cube-shadow{top:360px;width:300px;margin-left:-150px}
  .plat{width:56px}
  .plat-row{gap:10px}
  .trust{gap:8px 14px}
  .trust li{white-space:normal}
  .aux-a,.aux-b{position:static;margin-top:8px}
  .aux-a{height:auto;padding:8px 12px;flex-wrap:wrap}
  .aux-b{animation:none}
  .cta-row{gap:10px}
  .pack-head{margin-top:32px}
}
@media (max-width:360px){
  .plat{width:52px}
  .flag-row{gap:10px 14px}
}