.page-faq{
  --faq-line:rgba(52,69,127,.55);
  --faq-radius:14px;
}

.page-faq .crumbs{
  margin:28px 0 22px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  position:relative;
  padding:18px 0 8px;
  border-bottom:3px solid var(--orbit);
}
.page-faq .faq-hero::after{
  content:"";
  display:block;
  height:3px;
  margin-top:26px;
  background:linear-gradient(90deg,var(--cyan),var(--gold) 45%,transparent);
}
.page-faq .faq-hero h1{
  margin:12px 0 18px;
  font-size:clamp(30px,5.4vw,60px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:.01em;
  color:var(--cream);
}
.page-faq .faq-hero .lead{
  max-width:44em;
  color:var(--mist);
  font-size:clamp(15.5px,1.6vw,17.5px);
}
.page-faq .faq-strip{
  display:grid;
  gap:14px;
  margin:30px 0 0;
}
.page-faq .faq-strip .stat{
  background:rgba(23,16,67,.66);
  border:2px solid var(--orbit);
  border-radius:var(--faq-radius);
  padding:14px 18px 14px 20px;
}
.page-faq .faq-strip .stat__num{
  color:var(--gold);
  font-size:clamp(28px,4vw,40px);
  line-height:1;
}
.page-faq .faq-strip .stat__label{
  color:var(--mist);
}
@media (min-width:720px){
  .page-faq .faq-strip{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- 章节框架 ---------- */
.page-faq .faq-sec{
  padding:clamp(46px,7vw,86px) 0 0;
}
.page-faq .faq-sec--last{
  padding-bottom:clamp(50px,7vw,90px);
}
.page-faq .faq-sec__head{
  display:flex;
  align-items:flex-start;
  gap:clamp(10px,2.5vw,26px);
  margin-bottom:clamp(22px,3.4vw,38px);
}
.page-faq .faq-sec__head .sec-num{
  flex:0 0 auto;
  line-height:.82;
  color:transparent;
  -webkit-text-stroke:1.5px var(--orbit);
  transition:color .3s var(--ease),-webkit-text-stroke-color .3s var(--ease),transform .3s var(--ease);
}
.page-faq .faq-sec__head .sec-num.is-lit{
  color:var(--gold);
  -webkit-text-stroke-color:var(--gold);
  transform:translateY(-8px);
}
.page-faq .faq-sec__title{
  min-width:0;
  padding-top:6px;
}
.page-faq .faq-sec__title .lead{
  margin-top:12px;
  max-width:42em;
  color:var(--mist);
}

/* ---------- 01 自助入口 ---------- */
.page-faq .faq-intro{
  align-items:start;
  gap:clamp(22px,3.5vw,44px);
}
.page-faq .faq-intro__text p{
  color:var(--mist);
  max-width:40em;
}
.page-faq .faq-intro__list{
  list-style:none;
  margin:20px 0 26px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-faq .faq-intro__list li{
  position:relative;
  padding:11px 14px 11px 34px;
  border-left:3px solid var(--cyan);
  background:rgba(23,16,67,.55);
  border-radius:0 var(--faq-radius) var(--faq-radius) 0;
  color:var(--mist);
  font-size:15.5px;
}
.page-faq .faq-intro__list li::before{
  content:"";
  position:absolute;
  left:13px;
  top:19px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
}
.page-faq .faq-intro__list strong{
  color:var(--cream);
  margin-right:6px;
}
.page-faq .faq-wave{
  display:block;
  width:100%;
  height:120px;
  margin:4px 0 10px;
}
.page-faq .faq-wave__axis{
  stroke:var(--orbit);
  stroke-width:1;
  stroke-dasharray:4 6;
}
.page-faq .faq-wave__path{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2.5;
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:0;
}
.page-faq .faq-wave__node{
  fill:var(--gold);
  animation:faq-node 2.4s ease-in-out infinite;
}
.page-faq .faq-wave__node:nth-of-type(2){ animation-delay:.4s; }
.page-faq .faq-wave__node:nth-of-type(3){ animation-delay:.8s; }
@keyframes faq-node{
  0%,100%{ opacity:.4; r:5; }
  50%{ opacity:1; r:7; }
}
.page-faq .faq-wave__legend{
  color:var(--mist);
  font-size:13px;
  letter-spacing:.02em;
}
.page-faq .faq-wave__legend .mono{
  color:var(--gold);
  margin-right:4px;
}
.page-faq .faq-figure{
  margin:0;
}
.page-faq .faq-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--r-lg);
}
.page-faq .faq-figure--band{
  margin-bottom:clamp(22px,3.2vw,36px);
}
@media (min-width:900px){
  .page-faq .faq-figure--band{
    margin-bottom:38px;
  }
}

/* ---------- 02 分类切换 ---------- */
.page-faq .faq-switch{
  position:relative;
}
.page-faq .faq-switch__input{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.page-faq .faq-switch__body{
  display:grid;
  gap:22px;
}
.page-faq .faq-drawers{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-faq .faq-drawers__title{
  margin:0 0 4px;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mist);
}
.page-faq .faq-drawer{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px 14px 22px;
  background:rgba(23,16,67,.72);
  border:3px solid var(--orbit);
  border-radius:var(--faq-radius);
  color:var(--mist);
  cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.page-faq .faq-drawer::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:5px;
  border-radius:0 3px 3px 0;
  background:transparent;
  transition:background .22s var(--ease);
}
.page-faq .faq-drawer:hover{
  transform:translateX(3px);
  border-color:var(--cyan);
  color:var(--cream);
}
.page-faq .faq-drawer__name{
  font-weight:700;
  font-size:16px;
}
.page-faq .faq-drawer__count{
  font-size:13px;
  color:var(--orbit);
  border:1px solid currentColor;
  border-radius:20px;
  padding:1px 9px;
}
.page-faq .faq-drawer:hover .faq-drawer__count{ color:var(--cyan); }

.page-faq #faqcat-login:checked ~ .faq-switch__body label[for="faqcat-login"],
.page-faq #faqcat-points:checked ~ .faq-switch__body label[for="faqcat-points"],
.page-faq #faqcat-benefit:checked ~ .faq-switch__body label[for="faqcat-benefit"],
.page-faq #faqcat-order:checked ~ .faq-switch__body label[for="faqcat-order"]{
  background:var(--cream);
  border-color:var(--ink);
  color:var(--ink);
  box-shadow:var(--bang);
}
.page-faq #faqcat-login:checked ~ .faq-switch__body label[for="faqcat-login"]::before,
.page-faq #faqcat-points:checked ~ .faq-switch__body label[for="faqcat-points"]::before,
.page-faq #faqcat-benefit:checked ~ .faq-switch__body label[for="faqcat-benefit"]::before,
.page-faq #faqcat-order:checked ~ .faq-switch__body label[for="faqcat-order"]::before{
  background:var(--cyan);
}
.page-faq #faqcat-login:checked ~ .faq-switch__body label[for="faqcat-login"] .faq-drawer__count,
.page-faq #faqcat-points:checked ~ .faq-switch__body label[for="faqcat-points"] .faq-drawer__count,
.page-faq #faqcat-benefit:checked ~ .faq-switch__body label[for="faqcat-benefit"] .faq-drawer__count,
.page-faq #faqcat-order:checked ~ .faq-switch__body label[for="faqcat-order"] .faq-drawer__count{
  color:var(--ink);
}

.page-faq .faq-panel{
  display:none;
  animation:faq-fade .28s var(--ease);
}
@keyframes faq-fade{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
.page-faq #faqcat-login:checked ~ .faq-switch__body .faq-panel[data-cat="login"],
.page-faq #faqcat-points:checked ~ .faq-switch__body .faq-panel[data-cat="points"],
.page-faq #faqcat-benefit:checked ~ .faq-switch__body .faq-panel[data-cat="benefit"],
.page-faq #faqcat-order:checked ~ .faq-switch__body .faq-panel[data-cat="order"]{
  display:block;
}
.page-faq .faq-panel__title{
  margin:0 0 14px;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--gold);
  padding-bottom:10px;
  border-bottom:2px solid var(--faq-line);
}
@media (min-width:900px){
  .page-faq .faq-switch__body{
    grid-template-columns:minmax(210px,262px) 1fr;
    gap:32px;
    align-items:start;
    padding-left:14px;
  }
  .page-faq .faq-drawers{
    position:sticky;
    top:calc(var(--bar-h) + 22px);
  }
}

/* ---------- 折叠问答 ---------- */
.page-faq .qa{
  border:3px solid var(--orbit);
  border-radius:var(--faq-radius);
  background:rgba(23,16,67,.6);
  margin:0 0 12px;
  overflow:hidden;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.page-faq .qa:hover{
  border-color:var(--cyan);
}
.page-faq .qa[open]{
  border-color:var(--cyan);
  box-shadow:6px 6px 0 rgba(6,10,28,.85);
}
.page-faq .qa > summary{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 18px;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  font-size:15.5px;
  line-height:1.6;
  color:var(--cream);
}
.page-faq .qa > summary::-webkit-details-marker{ display:none; }
.page-faq .qa > summary::after{
  content:"+";
  margin-left:auto;
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:18px;
  line-height:1.3;
  color:var(--cyan);
}
.page-faq .qa[open] > summary::after{
  content:"–";
  color:var(--gold);
}
.page-faq .qa__body{
  padding:0 18px 18px;
  color:var(--mist);
  font-size:15px;
  line-height:1.85;
  border-top:1px dashed var(--faq-line);
  padding-top:14px;
}
.page-faq .qa__body p{ margin:0; }

/* 奶油纸面板内的问答 */
.page-faq .qa--paper{
  background:transparent;
  border-color:rgba(23,17,10,.28);
  border-width:0 0 2px 0;
  border-radius:0;
  margin-bottom:0;
}
.page-faq .qa--paper:last-child{ border-bottom:0; }
.page-faq .qa--paper:hover{
  border-color:rgba(23,17,10,.5);
}
.page-faq .qa--paper[open]{
  border-color:var(--ink);
  box-shadow:none;
}
.page-faq .qa--paper > summary{
  color:var(--ink);
  padding:16px 6px;
}
.page-faq .qa--paper > summary::after{
  color:#0f7d74;
}
.page-faq .qa--paper[open] > summary::after{
  color:#8a5a00;
}
.page-faq .qa--paper .qa__body{
  color:#3a3223;
  border-top-color:rgba(23,17,10,.16);
  padding:0 6px 18px;
}

/* ---------- 奶油纸卡片 ---------- */
.page-faq .faq-card{
  padding:8px 22px;
}
.page-faq .faq-card .panel__title{
  margin:20px 0 6px;
}

/* ---------- 05 联系 ---------- */
.page-faq .faq-contact{
  display:grid;
  gap:20px;
}
.page-faq .faq-contact__prep{
  padding:24px 22px;
}
.page-faq .faq-contact__prep .panel__title{
  margin:0 0 16px;
}
.page-faq .faq-contact__list{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:11px;
}
.page-faq .faq-contact__list li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  color:#3a3223;
  font-size:15px;
  line-height:1.7;
}
.page-faq .faq-contact__list .mono{
  flex:0 0 auto;
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  border-radius:6px;
  font-size:12px;
  background:var(--gold-soft);
}
.page-faq .faq-contact__prep .hint{
  color:#5b5340;
  border-top:1px solid rgba(23,17,10,.16);
  padding-top:14px;
}
.page-faq .faq-contact__ways{
  padding:24px 22px;
  border-radius:var(--r-lg);
  display:grid;
  gap:16px;
  align-content:start;
}
.page-faq .faq-way{
  display:grid;
  gap:5px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--faq-line);
}
.page-faq .faq-way__label{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mist);
}
.page-faq .faq-way__value{
  font-size:clamp(15px,2.2vw,19px);
  font-weight:700;
  color:var(--gold);
  text-decoration:none;
  word-break:break-all;
}
.page-faq a.faq-way__value:hover{
  color:var(--cyan);
  text-decoration:underline;
}
.page-faq .faq-contact__note{
  margin:0;
  color:var(--mist);
  font-size:14px;
  line-height:1.8;
}
.page-faq .faq-contact__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-faq .faq-more{
  margin:28px 0 0;
  color:var(--mist);
  font-size:15px;
  line-height:1.8;
}
.page-faq .faq-more a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-faq .faq-more a:hover{ color:var(--gold); }

@media (min-width:880px){
  .page-faq .faq-contact{
    grid-template-columns:7fr 5fr;
    align-items:start;
  }
}

@media (max-width:520px){
  .page-faq .faq-card{ padding:4px 14px; }
  .page-faq .faq-contact__prep,
  .page-faq .faq-contact__ways{ padding:20px 16px; }
  .page-faq .qa > summary{ padding:14px 14px; font-size:15px; }
  .page-faq .qa__body{ padding-left:14px; padding-right:14px; }
  .page-faq .faq-drawer{ padding:12px 14px 12px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-wave__node{ animation:none; opacity:.9; }
  .page-faq .faq-panel{ animation:none; }
  .page-faq .faq-drawer:hover{ transform:none; }
  .page-faq .faq-sec__head .sec-num{ transition:none; }
}
<<<END>>>