.page-faq{
  --faq-rule:linear-gradient(90deg,rgba(217,162,74,0) 0%,rgba(217,162,74,.72) 14%,rgba(217,162,74,.72) 86%,rgba(217,162,74,0) 100%);
  --faq-gap:clamp(22px,3.4vw,38px);
  position:relative;
  padding-bottom:clamp(48px,8vh,96px);
}

/* ---------- 首屏框景 ---------- */
.page-faq .faq-hero{
  position:relative;
  padding:clamp(84px,15vh,148px) 0 clamp(16px,3vh,30px);
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(760px 380px at 84% -8%,rgba(63,224,208,.10),transparent 62%),
    radial-gradient(680px 420px at 4% 4%,rgba(217,162,74,.13),transparent 66%);
}
.page-faq .faq-frame{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,23,48,.88) 0%,rgba(7,11,24,.62) 100%);
  padding:clamp(26px,4.4vw,54px);
}
.page-faq .faq-frame::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(30,43,77,.9) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,43,77,.9) 1px,transparent 1px);
  background-size:64px 64px;
}
.page-faq .faq-frame__meta{
  position:absolute;
  z-index:2;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--gold);
  background:var(--ink);
  padding:2px 10px;
  line-height:1.4;
  white-space:nowrap;
}
.page-faq .faq-frame__meta--tl{ top:-1px; left:clamp(18px,3vw,32px); transform:translateY(-50%); }
.page-faq .faq-frame__meta--br{ bottom:-1px; right:clamp(18px,3vw,32px); transform:translateY(50%); }
.page-faq .faq-frame > *{ position:relative; z-index:1; }
.page-faq .faq-frame h1{
  margin:clamp(12px,1.6vw,18px) 0 0;
  font-size:clamp(28px,5.2vw,54px);
  line-height:1.14;
  letter-spacing:-.012em;
  max-width:20ch;
}
.page-faq .faq-frame .lede{
  margin:clamp(14px,1.8vw,20px) 0 0;
  max-width:62ch;
  color:var(--warm);
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.8;
}

/* ---------- 分组胶囊 ---------- */
.page-faq .faq-tabbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(24px,3.4vw,38px);
  padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--line);
}
.page-faq .faq-tab{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(14,23,48,.72);
  color:var(--warm);
  border-radius:var(--pill);
  padding:10px 20px;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.page-faq .faq-tab:hover{
  color:var(--paper);
  border-color:rgba(217,162,74,.5);
}
.page-faq .faq-tab[aria-selected="true"]{
  color:var(--gold-hi);
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(217,162,74,.18),rgba(140,95,30,.10));
  box-shadow:inset 0 0 0 1px rgba(242,210,139,.16);
}
.page-faq .faq-tab:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* ---------- 快速定位 ---------- */
.page-faq .faq-quick{
  padding:clamp(30px,5vh,58px) 0 clamp(8px,2vh,16px);
}
.page-faq .faq-quick__head h2{
  margin:10px 0 0;
  font-size:clamp(20px,2.6vw,28px);
  letter-spacing:-.008em;
}
.page-faq .faq-quick__grid{
  margin-top:clamp(20px,3vw,32px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.6vw,18px);
}
.page-faq .quick-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,23,48,.74) 0%,rgba(7,11,24,.42) 100%);
  padding:24px 22px 22px 26px;
}
.page-faq .quick-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--grad-gold);
}
.page-faq .quick-card h3{
  margin:0;
  font-size:17px;
  line-height:1.5;
  color:var(--paper);
}
.page-faq .quick-card p{
  margin:0;
  flex:1 1 auto;
  color:var(--warm);
  font-size:15px;
  line-height:1.78;
}
.page-faq .quick-card .btn{
  align-self:flex-start;
  font-size:14px;
}

/* ---------- 问答面板 ---------- */
.page-faq .faq-panels{
  padding-block:clamp(26px,4.5vw,54px);
}
.page-faq .faq-panel{
  display:grid;
  gap:var(--faq-gap);
  outline:none;
  max-width:1080px;
}
.page-faq .faq-panel[hidden]{ display:none; }

.page-faq .faq-group__head{
  position:relative;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:clamp(12px,2vw,20px);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.page-faq .faq-group__head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:clamp(120px,26%,260px);
  height:1px;
  background:var(--grad-gold);
}
.page-faq .faq-group__num{
  font-size:clamp(22px,3.2vw,34px);
  line-height:1;
  color:var(--gold);
  letter-spacing:.02em;
}
.page-faq .faq-group__head h2{
  margin:0;
  flex:1 1 auto;
  min-width:200px;
  font-size:clamp(18px,2.4vw,26px);
  letter-spacing:-.006em;
}
.page-faq .faq-group__count{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  white-space:nowrap;
}

/* ---------- 问答条目 ---------- */
.page-faq .faq-list{
  display:grid;
  border-top:1px solid var(--line-soft);
}
.page-faq .faq-item{
  border-bottom:1px solid var(--line-soft);
}
.page-faq .faq-item > summary{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:clamp(10px,1.6vw,16px);
  padding:18px 42px 18px 0;
  list-style:none;
  cursor:pointer;
  color:var(--paper);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.66;
  transition:color .2s var(--ease);
}
.page-faq .faq-item > summary::-webkit-details-marker{ display:none; }
.page-faq .faq-item > summary::marker{ content:""; }
.page-faq .faq-item > summary:hover{ color:var(--gold-hi); }
.page-faq .faq-item > summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.page-faq .faq-item__no{
  flex:0 0 auto;
  min-width:2.2em;
  padding-top:.36em;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--gold);
}
.page-faq .faq-item__text{ flex:1 1 auto; }
.page-faq .faq-item > summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:18px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  color:var(--cyan);
  border:1px solid rgba(63,224,208,.32);
  border-radius:var(--pill);
  transition:background .24s var(--ease),color .24s var(--ease);
}
.page-faq .faq-item[open] > summary::after{
  content:"–";
  background:rgba(63,224,208,.16);
}
.page-faq .faq-item__a{
  padding:2px 42px 20px calc(2.2em + clamp(10px,1.6vw,16px));
  color:var(--warm);
  font-size:clamp(14px,1.5vw,16px);
  line-height:1.82;
}
.page-faq .faq-item__a p{
  margin:0;
  max-width:64ch;
}
.page-faq .faq-item__a a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(63,224,208,.45);
}
.page-faq .faq-item__a a:hover{
  color:var(--paper);
  border-bottom-color:var(--gold);
}
.page-faq .faq-item[open] .faq-item__a{
  animation:faq-reveal .3s var(--ease) both;
}
@keyframes faq-reveal{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:none; }
}

/* ---------- 图 ---------- */
.page-faq .faq-figure{
  margin:0;
  display:grid;
  gap:10px;
}
.page-faq .faq-figure__box{
  position:relative;
  border:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
}
.page-faq .faq-figure__box img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:1000 / 650;
}
.page-faq .faq-figure__box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background:
    linear-gradient(180deg,rgba(7,11,24,0) 48%,rgba(7,11,24,.62) 100%),
    repeating-linear-gradient(0deg,rgba(7,11,24,.4) 0 1px,transparent 1px 4px);
}
.page-faq .faq-figure__cap{
  font-size:12px;
  letter-spacing:.05em;
  color:var(--warm);
  line-height:1.6;
}

/* ---------- 收尾 ---------- */
.page-faq .faq-tail{
  padding:clamp(14px,3vh,34px) 0 0;
}
.page-faq .faq-tail__inner{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(217,162,74,.12) 0%,rgba(14,23,48,.82) 42%,rgba(7,11,24,.72) 100%);
  padding:clamp(26px,4vw,48px);
  display:grid;
  gap:14px;
  justify-items:start;
  overflow:hidden;
}
.page-faq .faq-tail__inner::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background:var(--faq-rule);
}
.page-faq .faq-tail__label{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cyan);
}
.page-faq .faq-tail__inner h2{
  margin:0;
  font-size:clamp(19px,2.6vw,28px);
  line-height:1.36;
  max-width:26ch;
  letter-spacing:-.008em;
}
.page-faq .faq-tail__inner p{
  margin:0;
  max-width:60ch;
  color:var(--warm);
  font-size:15px;
  line-height:1.8;
}
.page-faq .faq-tail__inner .btn{ margin-top:6px; }

/* ---------- 断点 ---------- */
@media (min-width:680px){
  .page-faq .faq-quick__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:960px){
  .page-faq .faq-frame{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  .page-faq .faq-panel{
    padding-left:clamp(0px,2vw,26px);
    border-left:1px solid rgba(30,43,77,.55);
  }
}

@media (max-width:600px){
  .page-faq .faq-item__a{ padding-left:0; }
  .page-faq .faq-item > summary{ padding-right:38px; }
  .page-faq .faq-tab{ padding:9px 16px; font-size:14px; }
  .page-faq .faq-tail__inner{ justify-items:stretch; }
  .page-faq .faq-tail__inner .btn{ justify-self:start; }
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-item[open] .faq-item__a{ animation:none; }
  .page-faq .faq-item > summary::after{ transition:none; }
  .page-faq .faq-tab{ transition:none; }
}
<<<END>>>