.page-faq{
  --faq-pad:clamp(44px,7vw,84px);
  --faq-gap:clamp(18px,3vw,30px);
  --faq-hero-bg:linear-gradient(158deg,#0E2A47 0%,#1B4F72 62%,#14395A 100%);
  background:var(--c-sand);
  color:var(--c-ink);
  font-family:var(--f-body);
  overflow-x:hidden;
}

.page-faq .shell{
  width:100%;
  max-width:var(--shell-max);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.page-faq .crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding-block:14px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--c-bronze);
}
.page-faq .crumbs a{
  color:var(--c-tianshan);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur),color var(--dur);
}
.page-faq .crumbs a:hover,
.page-faq .crumbs a:focus-visible{
  border-bottom-color:var(--c-gold);
  color:var(--c-night);
}
.page-faq .crumbs-sep{color:var(--c-line);}

/* ---------- 首屏框景 ---------- */
.page-faq .faq-hero{
  position:relative;
  background:var(--faq-hero-bg);
  color:var(--c-mist);
  padding-block:clamp(32px,6vw,66px) clamp(40px,8vw,88px);
  overflow:hidden;
}
.page-faq .faq-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(215,229,240,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(215,229,240,.07) 1px,transparent 1px);
  background-size:52px 52px;
  pointer-events:none;
}
.page-faq .faq-hero-glow{
  position:absolute;
  top:-180px;
  right:-150px;
  width:460px;
  height:460px;
  background:radial-gradient(circle,rgba(201,162,39,.32) 0%,rgba(201,162,39,0) 68%);
  pointer-events:none;
}
.page-faq .faq-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(26px,5vw,46px);
}
.page-faq .faq-hero-copy .eyebrow{
  margin:0;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:rgba(201,162,39,.95);
}
.page-faq .faq-hero h1{
  margin:.3em 0 .45em;
  font-family:var(--f-head);
  font-weight:600;
  font-size:clamp(32px,6.4vw,60px);
  line-height:1.08;
  letter-spacing:.01em;
  color:var(--c-mist);
}
.page-faq .faq-hero-lead{
  margin:0;
  max-width:58ch;
  font-size:clamp(15px,2.4vw,17px);
  line-height:1.82;
  color:rgba(251,249,245,.8);
}
.page-faq .faq-hero-stats{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.page-faq .faq-hero-stats li{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:10px;
  border-top:2px solid rgba(201,162,39,.7);
  font-size:13px;
  line-height:1.6;
  color:rgba(251,249,245,.68);
}
.page-faq .faq-hero-stats .num{
  font-family:var(--f-mono);
  font-size:clamp(24px,4vw,32px);
  line-height:1;
  color:var(--c-mist);
  letter-spacing:.02em;
}

.page-faq .faq-hero-frame{
  position:relative;
  padding:clamp(16px,3vw,24px);
  background:rgba(11,22,32,.42);
  border:1px solid rgba(201,162,39,.45);
}
.page-faq .faq-hero-frame::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:58px;
  height:3px;
  background:var(--c-gold);
}
.page-faq .faq-hero-frame-title{
  position:relative;
  margin:0 0 14px;
  padding-left:26px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--c-gold);
}
.page-faq .faq-hero-frame-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:18px;
  height:2px;
  background:var(--c-gold);
}
.page-faq .faq-anchor-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.page-faq .faq-anchor{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:12px 10px;
  border-bottom:1px solid rgba(215,229,240,.14);
  color:rgba(251,249,245,.86);
  text-decoration:none;
  transition:background-color var(--dur),color var(--dur),padding-left var(--dur);
}
.page-faq .faq-anchor:hover,
.page-faq .faq-anchor:focus-visible{
  background:rgba(201,162,39,.16);
  color:#fff;
  padding-left:18px;
}
.page-faq .faq-anchor-index{
  flex:none;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--c-gold);
}
.page-faq .faq-anchor-text{
  font-size:15px;
  line-height:1.5;
}

/* ---------- 编号章节 ---------- */
.page-faq .faq-chapter{
  padding-block:var(--faq-pad);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.page-faq .faq-chapter + .faq-chapter{
  border-top:1px solid var(--c-line);
}
.page-faq .chapter-head{
  display:grid;
  gap:8px;
  margin-bottom:clamp(22px,4vw,38px);
}
.page-faq .chapter-index{
  display:inline-block;
  padding-top:8px;
  border-top:2px solid var(--c-gold);
  font-family:var(--f-mono);
  font-size:clamp(28px,5vw,44px);
  line-height:1;
  letter-spacing:.02em;
  color:var(--c-gold);
  transition:color var(--dur),border-color var(--dur);
}
.page-faq .chapter-title{
  margin:0 0 10px;
  font-family:var(--f-head);
  font-weight:600;
  font-size:clamp(25px,4.4vw,38px);
  line-height:1.18;
  color:var(--c-night);
}
.page-faq .chapter-lead{
  margin:0;
  max-width:62ch;
  font-size:16px;
  line-height:1.78;
  color:var(--c-ink-72);
}
.page-faq .faq-chapter.is-active .chapter-index{
  color:var(--c-rose);
  border-top-color:var(--c-rose);
}

/* ---------- 快速上手 ---------- */
.page-faq .faq-start-grid{
  display:grid;
  gap:var(--faq-gap);
}
.page-faq .faq-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-faq .faq-step{
  padding:18px 18px 18px 20px;
  background:var(--c-mist);
  border:1px solid var(--c-line);
  border-left:3px solid var(--c-tianshan);
  transition:border-left-color var(--dur),background-color var(--dur);
}
.page-faq .faq-step:hover{
  border-left-color:var(--c-gold);
}
.page-faq .faq-step-num{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--c-bronze);
}
.page-faq .faq-step h3{
  margin:8px 0 8px;
  font-family:var(--f-head);
  font-weight:600;
  font-size:19px;
  line-height:1.35;
  color:var(--c-night);
}
.page-faq .faq-step p{
  margin:0;
  font-size:15px;
  line-height:1.76;
  color:var(--c-ink-72);
}

.page-faq .faq-figure{
  margin:0;
  display:grid;
  gap:10px;
}
.page-faq .faq-figure .media-frame{
  position:relative;
  display:block;
  aspect-ratio:3 / 2;
  overflow:hidden;
  border:1px solid var(--c-tianshan);
  background:linear-gradient(150deg,#0E2A47,#1B4F72);
}
.page-faq .faq-figure img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.page-faq .faq-figure .media-caption{
  padding-left:12px;
  border-left:2px solid var(--c-gold);
  font-size:13px;
  line-height:1.66;
  color:var(--c-ink-56);
}

/* ---------- 栏目索引 ---------- */
.page-faq .faq-index-list{
  display:grid;
  border-top:1px solid var(--c-tianshan);
}
.page-faq .faq-index-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 16px;
  padding:16px 8px;
  border-bottom:1px solid var(--c-line);
  text-decoration:none;
  color:inherit;
  transition:background-color var(--dur);
}
.page-faq .faq-index-term{
  grid-column:1;
  grid-row:1;
  font-family:var(--f-head);
  font-weight:600;
  font-size:19px;
  line-height:1.4;
  color:var(--c-night);
}
.page-faq .faq-index-arrow{
  grid-column:2;
  grid-row:1;
  align-self:center;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--c-bronze);
  transition:color var(--dur);
}
.page-faq .faq-index-desc{
  grid-column:1 / -1;
  grid-row:2;
  font-size:14px;
  line-height:1.72;
  color:var(--c-ink-56);
}
.page-faq .faq-index-item:hover,
.page-faq .faq-index-item:focus-visible{
  background:var(--c-mist);
}
.page-faq .faq-index-item:hover .faq-index-arrow,
.page-faq .faq-index-item:focus-visible .faq-index-arrow{
  color:var(--c-rose);
}
.page-faq .faq-index-item:focus-visible{
  outline:2px solid var(--c-gold);
  outline-offset:-2px;
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-qa{
  display:grid;
  gap:10px;
}
.page-faq .faq-qa .fold{
  background:var(--c-mist);
  border:1px solid var(--c-line);
  border-left:3px solid var(--c-tianshan);
  transition:border-left-color var(--dur),background-color var(--dur);
}
.page-faq .faq-qa .fold[open]{
  border-left-color:var(--c-gold);
  background:var(--c-sand);
}
.page-faq .faq-qa .fold-trigger{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  list-style:none;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  line-height:1.58;
  color:var(--c-night);
}
.page-faq .faq-qa .fold-trigger::-webkit-details-marker{
  display:none;
}
.page-faq .faq-qa .fold-trigger::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--f-mono);
  font-size:18px;
  line-height:1;
  color:var(--c-gold);
  transition:color var(--dur);
}
.page-faq .faq-qa .fold[open] .fold-trigger::after{
  content:"–";
  color:var(--c-rose);
}
.page-faq .faq-q-index{
  flex:none;
  padding-top:3px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--c-bronze);
}
.page-faq .faq-q-text{
  min-width:0;
}
.page-faq .faq-qa .fold-panel{
  padding:0 18px 18px clamp(20px,7vw,46px);
  font-size:15px;
  line-height:1.8;
  color:var(--c-ink-72);
}
.page-faq .faq-qa .fold-panel p{
  margin:0;
}

/* ---------- 手机端说明 ---------- */
.page-faq .faq-mobile-grid{
  display:grid;
  gap:var(--faq-gap);
}
.page-faq .faq-mobile-figure .media-frame{
  aspect-ratio:4 / 5;
}
.page-faq .faq-mobile-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-faq .faq-mobile-list li{
  padding:16px 18px;
  background:var(--c-mist);
  border-left:3px solid var(--c-gold);
}
.page-faq .faq-mobile-label{
  display:block;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--c-bronze);
}
.page-faq .faq-mobile-list h3{
  margin:8px 0 6px;
  font-family:var(--f-head);
  font-weight:600;
  font-size:18px;
  line-height:1.36;
  color:var(--c-night);
}
.page-faq .faq-mobile-list p{
  margin:0;
  font-size:15px;
  line-height:1.76;
  color:var(--c-ink-72);
}

/* ---------- 联系支持 ---------- */
.page-faq .faq-support{
  position:relative;
  display:grid;
  gap:20px;
  padding:clamp(26px,5vw,46px);
  background:var(--c-night);
  color:var(--c-mist);
  overflow:hidden;
}
.page-faq .faq-support::after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-130px;
  width:300px;
  height:300px;
  background:linear-gradient(135deg,rgba(201,162,39,.34),rgba(194,24,91,.2));
  transform:rotate(38deg);
  pointer-events:none;
}
.page-faq .faq-support-copy{
  position:relative;
  z-index:1;
}
.page-faq .faq-support-title{
  margin:0 0 10px;
  font-family:var(--f-head);
  font-weight:600;
  font-size:clamp(20px,3.4vw,26px);
  line-height:1.4;
  color:var(--c-mist);
}
.page-faq .faq-support-text{
  margin:0;
  max-width:56ch;
  font-size:15px;
  line-height:1.8;
  color:rgba(251,249,245,.76);
}
.page-faq .faq-support .btn{
  position:relative;
  z-index:1;
  justify-self:start;
}

/* ---------- 断点 ---------- */
@media (min-width:820px){
  .page-faq .chapter-head{
    grid-template-columns:104px minmax(0,1fr);
    gap:26px;
    align-items:start;
  }
  .page-faq .faq-index-item{
    grid-template-columns:210px minmax(0,1fr) 76px;
    align-items:baseline;
    padding:18px 10px;
  }
  .page-faq .faq-index-desc{
    grid-column:2;
    grid-row:1;
  }
  .page-faq .faq-index-arrow{
    grid-column:3;
    grid-row:1;
    justify-self:end;
  }
}

@media (min-width:900px){
  .page-faq .faq-hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:start;
  }
}

@media (min-width:960px){
  .page-faq .faq-start-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:start;
  }
  .page-faq .faq-mobile-grid{
    grid-template-columns:minmax(0,.76fr) minmax(0,1fr);
    align-items:start;
  }
  .page-faq .faq-support{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
  .page-faq .faq-support .btn{
    justify-self:end;
  }
}

@media (min-width:1040px){
  .page-faq .faq-qa{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:start;
  }
}
<<<END>>>
