/* ============================================================
   VPN-LG · help.css
   帮助中心页专属样式:页头氛围层(径向光斑 + 点阵底纹)、
   分类区块与标题饰条、收尾入口区。
   通用组件(按钮/胶囊/FAQ/目录条)一律引用 base.css 与 components.css。
   ============================================================ */

/* ---- 页头 ---- */
.help-hero{
  position:relative;
  overflow:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:34px;
  text-align:center;
}
.help-decor{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.help-glow{
  position:absolute;left:0;right:0;top:-260px;
  width:min(980px,132vw);height:620px;
  margin-inline:auto;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,var(--accent-07) 0%,var(--accent-06) 40%,transparent 74%);
}
.help-glow-soft{
  position:absolute;left:0;right:0;top:-60px;
  width:min(520px,86vw);height:300px;
  margin-inline:auto;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,var(--accent-10) 0%,transparent 72%);
}
.help-grid{
  position:absolute;left:0;right:0;bottom:0;height:150px;
  background-image:radial-gradient(var(--border-strong) 1px,transparent 1px);
  background-size:22px 22px;
  /* 遮罩只做 alpha 过渡,与设计令牌无关 */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 78%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 78%);
  opacity:.45;
}
.help-hero-inner{position:relative;z-index:1}
.help-hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08}
.help-hero .lede{margin:16px auto 0;max-width:680px}
.help-facts{margin-top:22px;justify-content:center}

/* ---- 分类区块 ---- */
.cat-block{padding-top:48px;padding-bottom:6px}
.cat-head{position:relative;padding-left:16px;margin-bottom:18px;max-width:780px}
.cat-head::before{
  content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--honey),var(--accent));
}
.cat-head h2{font-size:clamp(22px,2.3vw,30px)}
.cat-lede{margin-top:8px;font-size:14.5px;line-height:1.75;color:var(--text-muted)}

/* ---- 收尾入口区 ---- */
.help-end{padding-top:56px;padding-bottom:80px;max-width:820px}
.help-end .cat-lede{max-width:640px}
.help-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.help-end .callout{margin-top:22px}
.help-end .callout a{
  color:var(--accent-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}

@media (max-width:768px){
  .help-hero{padding-top:34px;padding-bottom:22px}
  .help-glow{top:-190px;height:440px}
  .help-glow-soft{top:-40px;height:220px}
  .help-grid{height:110px}
  .cat-block{padding-top:36px}
  .help-end{padding-top:40px;padding-bottom:56px}
}