/* ============================================================
   VPNBN · help.css
   帮助中心页(questions.html)专属样式:首屏天光与云、分类图标、
   问答文档容器、文末帮助面板。仅本页引入。
   ============================================================ */

/* ---------------- 首屏 ---------------- */
.help-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:74px;
  padding-bottom:0;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 58%,var(--sky-low) 100%);
}
.help-hero::before,
.help-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--cloud);
  pointer-events:none;
}
.help-hero::before{
  width:240px;
  height:118px;
  left:5%;
  top:44px;
  box-shadow:64px 20px 0 -22px var(--cloud);
}
.help-hero::after{
  width:190px;
  height:96px;
  right:7%;
  top:70px;
  box-shadow:-58px 26px 0 -24px var(--cloud);
}
.help-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:860px;
  margin:0 auto;
}
.help-hero h1{margin:20px 0 0}
.help-hero .lead{margin:18px 0 0;max-width:660px}
.help-hero .fact-strip{margin-top:30px}
.help-hero .wave-sep{margin-top:54px}

/* ---------------- 问答文档 ---------------- */
.faq-doc{
  max-width:920px;
  margin:0 auto;
}
.faq-doc .toc-tabs{margin-bottom:30px}
.faq-doc .faq-list{max-width:none}
.faq-cat{margin-top:56px}
.faq-cat:first-of-type{margin-top:0}
.faq-cat-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-soft);
}
.faq-cat-head > div{min-width:0}
.faq-cat-head h2{font-size:clamp(21px,2.1vw,26px)}
.faq-cat-ic{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 auto;
  border-radius:var(--r-node);
  background:var(--accent-soft);
  color:var(--accent-dark);
  box-shadow:inset 0 1px 0 var(--hl),0 10px 22px -16px var(--sh-accent-14);
}
.faq-cat-ic svg{display:block;width:22px;height:22px}
.faq-cat-ic--teal{
  background:var(--tint-teal-soft);
  color:var(--success-dark);
  box-shadow:inset 0 1px 0 var(--hl),0 10px 22px -16px var(--sh-teal-12);
}
.faq-cat-ic--honey{
  background:var(--tint-honey-soft);
  color:var(--candy-honey-dark);
  box-shadow:inset 0 1px 0 var(--hl),0 10px 22px -16px var(--sh-honey-12);
}
.faq-cat-ic--sky{
  background:var(--bg-panel2);
  color:var(--candy-sky-dark);
  box-shadow:inset 0 1px 0 var(--hl),0 10px 22px -16px var(--sh-sky-12);
}
.faq-cat-sub{
  margin:5px 0 0;
  color:var(--text-muted);
  font-size:14.5px;
  line-height:1.6;
}

/* ---------------- 文末帮助面板 ---------------- */
.help-more{background:var(--bg-panel)}
.help-more-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:26px 40px;
  padding:34px 36px;
  border-radius:var(--r-card-lg);
  background:var(--bg-panel2);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--hl),0 26px 52px -36px var(--sh-accent-14);
}
.help-more-text{flex:1 1 420px;min-width:0}
.help-more-text h2{font-size:clamp(22px,2.3vw,28px)}
.help-more-text p{
  margin:10px 0 0;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.72;
  max-width:640px;
}
.help-more-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 24px;
  margin:18px 0 0;
  max-width:660px;
}
.help-more-links li{min-width:0}
.help-more-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:14.5px;
  font-weight:600;
  color:var(--accent-dark);
  text-decoration:none;
}
.help-more-links a:hover{text-decoration:underline;text-underline-offset:3px}
.help-more-cta{flex:0 0 auto}

/* ---------------- 窄屏 ---------------- */
@media (max-width:768px){
  .help-hero{padding-top:52px}
  .help-hero::before{width:150px;height:74px;left:-6%;top:28px;box-shadow:none}
  .help-hero::after{width:120px;height:60px;right:-4%;top:46px;box-shadow:none}
  .help-hero .wave-sep{margin-top:40px}
  .faq-cat{margin-top:44px}
  .faq-cat-head{gap:12px}
  .faq-cat-ic{width:42px;height:42px}
  .help-more-panel{padding:26px 22px}
  .help-more-links{grid-template-columns:minmax(0,1fr)}
}