.page-faq{
  --faq-hair:rgba(53,230,208,.22);
  --faq-hair-soft:rgba(53,230,208,.12);
  --faq-soft:#4A6B72;
  --faq-cut:16px;
  overflow-x:clip;
  background:var(--abyss);
  color:var(--frost);
}
.page-faq section[id]{scroll-margin-top:calc(var(--header-h) + 66px);}
.page-faq a{color:var(--neon);}

.page-faq .faq-hero{
  position:relative;
  padding:clamp(20px,4vw,36px) 0 clamp(26px,5vw,52px);
  background:
    radial-gradient(120% 90% at 88% 0%,rgba(53,230,208,.16),transparent 62%),
    radial-gradient(90% 80% at 0% 100%,rgba(255,90,31,.10),transparent 60%),
    var(--abyss);
  border-bottom:1px solid var(--faq-hair-soft);
}
.page-faq .faq-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:64%;
  background-image:repeating-linear-gradient(112deg,transparent 0 62px,rgba(53,230,208,.10) 62px 63px);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent);
  pointer-events:none;
}
.page-faq .faq-hero .shell{position:relative;z-index:1;}
.page-faq .faq-hero .breadcrumbs{position:relative;z-index:1;}
.page-faq .faq-hero__title{
  margin:.28em 0 .22em;
  font-family:var(--font-body);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.08;
  transform:skew(-3deg);
  transform-origin:left bottom;
  color:var(--frost);
}
.page-faq .faq-hero__lede{
  margin:0;
  max-width:42em;
  color:rgba(245,241,232,.82);
}

/* 类别跳转条 */
.page-faq .faq-jump{
  position:sticky;
  top:var(--header-h);
  z-index:30;
  background:rgba(4,34,43,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--faq-hair);
}
.page-faq .faq-jump__inner{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:10px;
  padding-bottom:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.page-faq .faq-jump__inner::-webkit-scrollbar{display:none;}
.page-faq .faq-jump__label{
  flex:none;
  padding-right:10px;
  margin-right:2px;
  border-right:1px solid var(--faq-hair);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--aqua);
}
.page-faq .faq-jump__link{
  flex:none;
  white-space:nowrap;
  padding:6px 12px;
  font-size:13px;
  line-height:1.4;
  text-decoration:none;
  color:var(--frost);
  border:1px solid var(--faq-hair);
  border-radius:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.page-faq .faq-jump__link:hover,
.page-faq .faq-jump__link:focus-visible{border-color:var(--neon);color:var(--neon);}
.page-faq .faq-jump__link[aria-current="true"]{
  color:var(--neon);
  border-color:var(--neon);
  background:rgba(53,230,208,.10);
}

/* 区块底色 */
.page-faq .faq-sec{padding:clamp(32px,6vw,64px) 0;}
.page-faq .faq-sec--dark{background:var(--abyss);}
.page-faq .faq-sec--teal{background:var(--deep-teal);border-top:1px solid var(--faq-hair-soft);border-bottom:1px solid var(--faq-hair-soft);}
.page-faq .faq-sec--paper{background:var(--parchment);color:var(--ink);}
.page-faq .faq-sec--paper a{color:#0F5A66;}
.page-faq .faq-sec--paper .eyebrow{color:#0F5A66;}

/* 区块标题 */
.page-faq .faq-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:clamp(16px,3vw,28px);
}
.page-faq .faq-head__title{
  margin:0;
  font-size:clamp(21px,3.4vw,31px);
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.01em;
}
.page-faq .faq-head__note{
  margin:0;
  max-width:46em;
  font-size:14px;
  line-height:1.75;
  color:var(--aqua);
}
.page-faq .faq-sec--paper .faq-head__note{color:var(--faq-soft);}

/* 三条快答 */
.page-faq .faq-quick{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.page-faq .faq-quick__item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px 20px 18px;
  background:linear-gradient(155deg,rgba(15,90,102,.55),rgba(4,34,43,.88));
  border:1px solid var(--faq-hair);
  clip-path:polygon(0 0,calc(100% - var(--faq-cut)) 0,100% var(--faq-cut),100% 100%,0 100%);
  transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.page-faq .faq-quick__item:hover{transform:translateY(-2px);border-color:var(--neon);}
.page-faq .faq-quick__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gold);
}
.page-faq .faq-quick__q{
  margin:0;
  font-size:16.5px;
  font-weight:700;
  line-height:1.45;
  color:var(--frost);
}
.page-faq .faq-quick__a{
  margin:0;
  padding-left:12px;
  border-left:3px solid var(--neon);
  font-size:14px;
  line-height:1.72;
  color:rgba(245,241,232,.82);
}
.page-faq .faq-quick__link{
  margin-top:auto;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:var(--orange);
}
.page-faq .faq-quick__link::after{content:" →";}
.page-faq .faq-quick__link:hover{color:var(--gold);}

/* 折叠问答 */
.page-faq .faq-list{border-top:1px solid var(--faq-hair);}
.page-faq .faq-item{border-bottom:1px solid var(--faq-hair);}
.page-faq .faq-q{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 2px;
  cursor:pointer;
  list-style:none;
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  color:var(--frost);
  transition:color .18s var(--ease);
}
.page-faq .faq-q::-webkit-details-marker{display:none;}
.page-faq .faq-q::marker{content:"";}
.page-faq .faq-q:hover{color:var(--neon);}
.page-faq .faq-q__idx{
  flex:none;
  padding-top:3px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--aqua);
}
.page-faq .faq-q__text{flex:1 1 auto;}
.page-faq .faq-q__icon{
  position:relative;
  flex:none;
  width:20px;
  height:20px;
  margin-top:2px;
  border:1px solid var(--faq-hair);
  border-radius:2px;
}
.page-faq .faq-q__icon::before,
.page-faq .faq-q__icon::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:50%;
  height:1.5px;
  background:var(--neon);
  transform:translateY(-50%);
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.page-faq .faq-q__icon::after{transform:translateY(-50%) rotate(90deg);}
.page-faq .faq-item[open] .faq-q__icon::after{transform:translateY(-50%) rotate(0deg);opacity:0;}
.page-faq .faq-item[open] .faq-q{color:var(--neon);}
.page-faq .faq-a{
  margin:0 0 14px;
  padding:14px 16px 16px 18px;
  background:var(--deep-teal);
  border-left:3px solid var(--neon);
  border-radius:2px;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(245,241,232,.9);
  animation:faqDrop .18s var(--ease) both;
}
.page-faq .faq-a p{margin:0 0 10px;}
.page-faq .faq-a p:last-child{margin-bottom:0;}
.page-faq .faq-sec--teal .faq-a{background:rgba(4,34,43,.82);}
@keyframes faqDrop{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}

/* 图文分栏 */
.page-faq .faq-split{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1fr;}
.page-faq .faq-split__main{min-width:0;}
.page-faq .faq-figure{margin:0;}
.page-faq .faq-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border-radius:2px;
}

/* 侧栏说明 */
.page-faq .faq-side{
  padding:18px 18px 20px;
  border:1px solid var(--faq-hair);
  border-top:3px solid var(--gold);
  background:rgba(8,59,71,.55);
  clip-path:polygon(0 0,calc(100% - var(--faq-cut)) 0,100% var(--faq-cut),100% 100%,0 100%);
}
.page-faq .faq-side__title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
  color:var(--gold);
}
.page-faq .faq-side__text{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.78;
  color:rgba(245,241,232,.82);
}
.page-faq .faq-side__text:last-child{margin-bottom:0;}

/* 客服准备清单 */
.page-faq .faq-prep{
  display:grid;
  gap:10px;
  margin:0 0 22px;
  padding:0;
  list-style:none;
}
.page-faq .faq-prep__item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  background:var(--sand);
  border-left:3px solid var(--orange);
}
.page-faq .faq-prep__num{
  flex:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:#B33C10;
  padding-top:3px;
}
.page-faq .faq-prep__body{
  font-size:14px;
  line-height:1.72;
  color:var(--ink);
}
.page-faq .faq-prep__body strong{color:#8A2C0B;}

/* 邮箱块 */
.page-faq .faq-mail{
  padding:18px;
  border:1px solid rgba(34,24,18,.22);
  border-left:4px solid var(--neon);
  background:rgba(228,212,187,.5);
}
.page-faq .faq-mail__title{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faq-soft);
}
.page-faq .faq-mail__addr{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:clamp(15px,3vw,20px);
  font-weight:600;
  letter-spacing:-.01em;
  color:#0F5A66;
  overflow-wrap:anywhere;
}
.page-faq .faq-mail__note{
  margin:0;
  font-size:13.5px;
  line-height:1.78;
  color:#3A2A22;
}

/* 继续找 */
.page-faq .faq-next__list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--faq-hair);
}
.page-faq .faq-next__row{border-bottom:1px solid var(--faq-hair);}
.page-faq .faq-next__row a{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 14px;
  padding:16px 4px;
  text-decoration:none;
  transition:background .18s var(--ease),padding-left .18s var(--ease);
}
.page-faq .faq-next__row a:hover{background:rgba(53,230,208,.07);padding-left:10px;}
.page-faq .faq-next__k{
  font-size:16px;
  font-weight:700;
  color:var(--frost);
}
.page-faq .faq-next__d{
  grid-column:1 / 2;
  font-size:13.5px;
  line-height:1.7;
  color:var(--aqua);
}
.page-faq .faq-next__arrow{
  grid-row:1 / span 2;
  grid-column:2 / 3;
  font-size:18px;
  color:var(--orange);
}

@media (min-width:760px){
  .page-faq .faq-quick{grid-template-columns:1fr 1fr;}
  .page-faq .faq-quick__item:first-child{grid-column:1 / -1;}
  .page-faq .faq-prep{grid-template-columns:1fr 1fr;}
}

@media (min-width:1000px){
  .page-faq .faq-quick{grid-template-columns:1.15fr 1fr 1fr;}
  .page-faq .faq-quick__item:first-child{grid-column:auto;}
  .page-faq .faq-split{grid-template-columns:1.4fr .9fr;align-items:start;}
  .page-faq .faq-split--paper{grid-template-columns:1.25fr 1fr;}
  .page-faq .faq-figure{position:sticky;top:calc(var(--header-h) + 76px);}
  .page-faq .faq-q{padding:18px 2px;font-size:16.5px;}
  .page-faq .faq-next__row a{grid-template-columns:240px 1fr auto;gap:6px 24px;padding:18px 4px;}
  .page-faq .faq-next__d{grid-column:2 / 3;grid-row:1 / 2;}
  .page-faq .faq-next__arrow{grid-row:1 / 2;grid-column:3 / 4;}
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-a{animation:none;}
  .page-faq .faq-quick__item,
  .page-faq .faq-jump__link,
  .page-faq .faq-next__row a,
  .page-faq .faq-q__icon::before,
  .page-faq .faq-q__icon::after{transition:none;}
  .page-faq .faq-quick__item:hover{transform:none;}
  .page-faq .faq-next__row a:hover{padding-left:4px;}
}
<<<END>>>
