/* ==========================================================================
   VPNGive — 首页专属样式
   首屏光柱氛围 + 五格线路交付卡带 + 首页区块辅助间距
   通用组件样式见 base.css / components.css，此处不重复定义
   ========================================================================== */

/* ------------------------------------------------------------- hero --- */
.hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  display:flex;
  align-items:center;
  min-height:calc(100svh - 102px);
  padding-top:26px;
  padding-bottom:46px;
}
.hero-beams{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:68%;
  max-width:100%;
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(180deg,var(--beam-cyan-strong),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-mid),var(--beam-fade-indigo)),
    linear-gradient(180deg,var(--beam-cyan-mid),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-soft),var(--beam-fade-indigo)),
    linear-gradient(180deg,var(--beam-cyan-strong),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-strong),var(--beam-fade-indigo)),
    linear-gradient(180deg,var(--beam-cyan-soft),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-mid),var(--beam-fade-indigo)),
    linear-gradient(180deg,var(--beam-cyan-soft),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-strong),var(--beam-fade-indigo)),
    linear-gradient(180deg,var(--beam-cyan-mid),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-soft),var(--beam-fade-indigo)),
    linear-gradient(180deg,var(--beam-cyan-mid),var(--beam-fade-cyan)),
    linear-gradient(180deg,var(--beam-indigo-mid),var(--beam-fade-indigo));
  background-size:
    8px 56%,6px 38%,10px 70%,6px 30%,8px 46%,10px 62%,6px 26%,
    8px 50%,6px 34%,10px 66%,8px 40%,6px 28%,10px 54%,8px 34%;
  background-position:
    3% 0,8% 0,12.5% 0,18% 0,25% 0,33% 0,42% 0,
    51% 0,57% 0,63% 0,69% 0,75% 0,82% 0,90% 0;
  animation:beamBreath 9s ease-in-out infinite alternate;
}
@keyframes beamBreath{
  from{opacity:.82}
  to{opacity:1}
}
.hero-wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:780px}
.hero-title{margin-top:18px}
.hero-title .hl{position:relative;display:inline-block;isolation:isolate}
.hero-title .hl::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.07em;
  height:.19em;border-radius:var(--r-xs);background:var(--accent-wash);z-index:-1;
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.hero-lede{margin-top:20px;max-width:640px;font-size:14.5px;line-height:1.78;color:var(--muted)}
.hero-lede strong{color:var(--ink);font-weight:700}

.trust{
  display:flex;flex-wrap:wrap;align-items:center;
  margin-top:16px;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.02em;color:var(--muted);
}
.trust li{display:inline-flex;align-items:center;min-width:0}
.trust li+li::before{content:"·";color:var(--border);margin-left:9px;margin-right:9px}

.platform-bar{
  display:flex;align-items:center;gap:16px;max-width:660px;
  margin-top:22px;padding-top:15px;border-top:1px solid var(--border);
}
.platform-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--muted);flex:0 0 auto;
}
.flag-row{display:flex;align-items:center;gap:16px;max-width:660px;margin-top:14px}
.flags{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.flags li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);min-width:0}

/* --------------------------------------------- 首屏装置：线路交付卡带 --- */
.rig{position:relative;margin-top:38px;padding-top:20px;padding-bottom:20px}
.rig-rail{
  position:absolute;left:0;right:0;top:50%;z-index:0;
  border-top:1px dashed var(--border);
}
.rig-cards{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
}
.line-card{
  position:relative;display:flex;flex-direction:column;gap:13px;
  padding:16px 15px 15px;min-width:0;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.line-card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-card-hover)}
.line-card.is-current{border-color:var(--accent-line)}
.line-card.is-current::before{
  content:"";position:absolute;left:15px;right:15px;top:0;height:2px;
  border-radius:0 0 2px 2px;background:var(--accent);
}
.line-top{display:flex;align-items:center;gap:9px;min-width:0}
.line-name{
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.line-name i{font-style:normal;color:var(--border);margin:0 2px}
.line-card.is-current .line-name::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:6px;
  border-radius:50%;background:var(--accent);vertical-align:middle;
}
.line-tags{display:flex;flex-wrap:wrap;gap:6px}
.line-card .term{margin-top:auto}

.rig-pill{
  position:absolute;top:2px;right:4px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--border);
  box-shadow:var(--shadow-float);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--ink);
  white-space:nowrap;max-width:100%;overflow:hidden;
}
.rig-pill svg{
  width:12px;height:12px;flex:0 0 12px;fill:none;stroke:var(--accent);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.rig-badge{
  position:absolute;bottom:2px;left:4px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;
  border-radius:var(--r-xs);background:var(--ink);color:var(--on-dark);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
  box-shadow:var(--shadow-dark);white-space:nowrap;max-width:100%;overflow:hidden;
}
.rig-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:0 0 5px}

/* --------------------------------------------------------- 区块辅助 --- */
.sec-head + .feature-browser,
.sec-head + .table-scroll,
.sec-head + .platform-grid,
.sec-head + .plan-grid,
.sec-head + .post-grid{margin-top:30px}

.lines-note{
  margin-top:18px;max-width:820px;
  font-size:14px;line-height:1.8;color:var(--muted);
}
.lines-note strong{color:var(--ink);font-weight:700}

.sec-more{
  display:inline-flex;align-items:center;gap:5px;margin-top:22px;min-height:24px;
  font-size:13px;font-weight:600;color:var(--accent);
}
.sec-more svg{
  width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.sec-more:hover{color:var(--accent-dark)}

.why-panel{margin-top:26px}
.why-panel .prose p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ 窄屏 --- */
@media (max-width:1040px){
  .hero{min-height:0;padding-top:30px;padding-bottom:42px}
  .rig-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .rig-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rig{margin-top:30px}
  .platform-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .flag-row{flex-direction:column;align-items:flex-start;gap:10px}
  .rig-pill,.rig-badge{font-size:10px;height:24px;padding:0 9px}
}
@media (max-width:640px){
  .line-card{transform:none!important}
}