.page-faq{
  --faq-line:1px solid rgba(201,211,208,.18);
  --faq-line-soft:1px solid rgba(201,211,208,.10);
  background:
    radial-gradient(820px 420px at 82% -8%, rgba(53,242,208,.10), transparent 62%),
    radial-gradient(680px 400px at 6% 22%, rgba(255,122,47,.07), transparent 60%),
    linear-gradient(180deg, #071C16 0%, #071C16 34%, #0F1512 100%);
  color: var(--silver);
  font-family: var(--font-body);
  overflow-x: hidden;
  padding-bottom: clamp(40px, 7vw, 88px);
}
.page-faq :where(h1,h2,h3){ font-family: var(--font-display); color: var(--paper); margin:0; letter-spacing:-.03em; }
.page-faq p{ margin:0; }
.page-faq a{ color: inherit; }
.page-faq .faq-mono{ font-family: var(--font-mono); font-weight:700; }

/* ── 顶部条 ── */
.page-faq .faq-band{ border-bottom: var(--faq-line); }
.page-faq .faq-band__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 18px; padding-top:16px; padding-bottom:14px;
}
.page-faq .faq-band__sep{ color: rgba(201,211,208,.5); margin:0 6px; }
.page-faq .faq-band__stamp{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(201,211,208,.72);
}
.page-faq .faq-band__stamp .faq-mono{ color: var(--cyan); font-size:13px; letter-spacing:0; }

/* ── 首屏 ── */
.page-faq .faq-hero{ padding: clamp(32px,5vw,64px) 0 clamp(24px,4vw,44px); }
.page-faq .faq-hero__grid{ display:grid; grid-template-columns:1fr; gap: clamp(26px,4vw,44px); }
.page-faq .faq-hero__title{
  font-size: clamp(40px,7.2vw,86px);
  font-weight:800; line-height:.94; letter-spacing:-.045em;
}
.page-faq .faq-hero__title span{
  display:block; margin-top:16px;
  font-family: var(--font-body);
  font-size: clamp(16px,2.2vw,24px); font-weight:700;
  line-height:1.45; letter-spacing:.01em; color: var(--cyan);
}
.page-faq .faq-hero__lede{
  max-width:38em; margin-top:22px;
  font-size: clamp(15px,1.6vw,17px); line-height:1.8; color: var(--mist);
}
.page-faq .faq-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.page-faq .faq-stats{
  list-style:none; margin:30px 0 0; padding:1px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background: rgba(201,211,208,.16);
  border-radius: var(--radius-md); overflow:hidden;
}
.page-faq .faq-stats li{ background:#0B211B; padding:14px 16px; }
.page-faq .faq-stats b{
  display:block; font-family: var(--font-mono);
  font-size: clamp(22px,3vw,30px); line-height:1.1; color: var(--cyan);
}
.page-faq .faq-stats span{ display:block; margin-top:4px; font-size:12px; color: rgba(201,211,208,.82); }

.page-faq .faq-hero__side{
  align-self:start;
  background: linear-gradient(160deg, rgba(18,54,43,.92), rgba(11,33,27,.72));
  border: var(--faq-line);
  border-radius: var(--radius-lg);
  padding: clamp(20px,3vw,32px);
}
.page-faq .faq-hero__side-label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--orange); font-weight:700;
}
.page-faq .faq-track{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:0; }
.page-faq .faq-track li{
  position:relative; padding:0 0 22px 26px;
  border-left:1px dashed rgba(53,242,208,.35);
}
.page-faq .faq-track li:last-child{ border-left-color: transparent; padding-bottom:0; }
.page-faq .faq-track__dot{
  position:absolute; left:-6px; top:4px; width:11px; height:11px;
  border-radius:50%; background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(53,242,208,.16);
}
.page-faq .faq-track strong{ display:block; font-size:16px; color: var(--paper); }
.page-faq .faq-track em{
  display:block; margin-top:4px; font-style:normal;
  font-size:13px; color: rgba(201,211,208,.78);
}
.page-faq .faq-hero__side-foot{
  margin-top:20px; padding-top:16px; border-top: var(--faq-line-soft);
  font-size:13px; line-height:1.7; color: rgba(216,205,189,.85);
}
.page-faq .faq-hero__side-foot a{ color: var(--cyan); text-decoration:underline; text-underline-offset:3px; }

/* ── 章节标题组 ── */
.page-faq .faq-head-block{ max-width:46em; }
.page-faq .faq-head-block h2{
  font-size: clamp(26px,4vw,42px); line-height:1.15; margin-top:10px;
}
.page-faq .faq-head-block__text{
  margin-top:14px; font-size: clamp(14px,1.5vw,16px);
  line-height:1.8; color: var(--mist);
}

/* ── 快速开始 ── */
.page-faq .faq-start{ padding-top: clamp(28px,4vw,48px); }
.page-faq .faq-figure{
  margin: clamp(22px,3vw,30px) 0 0;
  border: var(--faq-line); border-radius: var(--radius-lg); overflow:hidden;
  background:#0B211B;
}
.page-faq .faq-figure img{ display:block; width:100%; height:auto; object-fit:cover; }
.page-faq .faq-figure figcaption{
  padding:12px 18px 14px; font-size:12px; letter-spacing:.02em;
  color: rgba(201,211,208,.72); border-top: var(--faq-line-soft);
}
.page-faq .faq-figure--inset{ border-radius: var(--radius-md); }

.page-faq .faq-begin{
  list-style:none; margin: clamp(22px,3vw,30px) 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:16px;
}
.page-faq .faq-begin li{
  background: var(--paper); color: var(--ink-text);
  border-radius: var(--radius-md);
  padding: clamp(20px,2.6vw,26px);
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
}
.page-faq .faq-begin li::after{
  content:""; position:absolute; right:-30px; top:-30px;
  width:88px; height:88px; border-radius:50%;
  background: rgba(255,122,47,.14);
}
.page-faq .faq-begin__no{
  align-self:flex-start; font-family: var(--font-mono); font-weight:700;
  font-size:12px; letter-spacing:.08em; padding:3px 11px;
  border-radius: var(--pill); background:#0F1512; color: var(--cyan);
}
.page-faq .faq-begin h3{
  color: var(--ink-text); font-size: clamp(18px,2.2vw,21px); line-height:1.3;
}
.page-faq .faq-begin p{ font-size:14px; line-height:1.75; color:#2B3733; }
.page-faq .faq-begin__link{
  margin-top:auto; align-self:flex-start;
  font-size:13px; font-weight:700; text-decoration:none;
  color:#0F1512; border-bottom:2px solid var(--orange);
  padding-bottom:2px;
}
.page-faq .faq-begin__link:hover{ color:#8A3B0F; }

/* ── 索引 + 正文布局 ── */
.page-faq .faq-layout{
  display:grid; grid-template-columns:1fr;
  gap: clamp(22px,4vw,40px);
  padding-top: clamp(24px,4vw,44px);
}
.page-faq .faq-index{ min-width:0; }
.page-faq .faq-index__label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(201,211,208,.7); margin-bottom:12px;
}
.page-faq .faq-index__nav{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:none;
}
.page-faq .faq-index__nav::-webkit-scrollbar{ display:none; }
.page-faq .faq-pill{
  flex:0 0 auto; display:inline-block;
  padding:9px 16px; border-radius: var(--pill);
  border:1px solid var(--edge-strong);
  font-size:13px; font-weight:600; text-decoration:none;
  color: var(--silver); white-space:nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.page-faq .faq-pill:hover,
.page-faq .faq-pill:focus-visible{
  background: rgba(53,242,208,.14); color: var(--cyan); border-color: var(--cyan);
  outline:none;
}
.page-faq .faq-body{ min-width:0; }

/* ── 教程章节 ── */
.page-faq .faq-chapter{
  padding: clamp(20px,3vw,32px) 0 clamp(26px,3.4vw,36px);
  border-top: var(--faq-line);
  scroll-margin-top: 24px;
}
.page-faq .faq-chapter:first-child{ border-top:none; padding-top:0; }
.page-faq .faq-chapter__head{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:4px 16px; align-items:start;
}
.page-faq .faq-chapter__num{
  grid-row: span 2;
  font-family: var(--font-mono); font-weight:700;
  font-size: clamp(28px,4.6vw,46px); line-height:.9;
  color: transparent; -webkit-text-stroke: 1px rgba(53,242,208,.75);
}
.page-faq .faq-chapter__head h2{
  font-size: clamp(21px,3.2vw,32px); line-height:1.2;
}
.page-faq .faq-chapter__lede{
  grid-column:2;
  margin-top:10px; font-size: clamp(14px,1.5vw,16px);
  line-height:1.8; color: var(--mist);
}

.page-faq .faq-steps{
  list-style:none; margin: clamp(20px,3vw,28px) 0 0; padding:0;
  display:grid; gap:12px;
}
.page-faq .faq-step{
  position:relative;
  background: rgba(18,54,43,.52);
  border: var(--faq-line);
  border-radius: var(--radius-md);
  padding:16px 18px 18px 54px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.page-faq .faq-step:hover{
  background: rgba(18,54,43,.82);
  border-color: rgba(53,242,208,.34);
  transform: translateY(-2px);
}
.page-faq .faq-step__no{
  position:absolute; left:15px; top:16px;
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background: var(--cyan); color:#0F1512;
  font-family: var(--font-mono); font-size:13px; font-weight:700;
}
.page-faq .faq-step h3{
  font-family: var(--font-body);
  font-size: clamp(15px,1.7vw,17px); font-weight:700;
  color: var(--paper); line-height:1.5;
}
.page-faq .faq-step p{
  margin-top:8px; font-size:14px; line-height:1.8;
  color: rgba(216,205,189,.86);
}
.page-faq .faq-steps--check .faq-step:nth-child(4){
  border-color: rgba(255,122,47,.4);
  background: rgba(255,122,47,.08);
}
.page-faq .faq-steps--check .faq-step:nth-child(4) .faq-step__no{
  background: var(--orange);
}

.page-faq .faq-note{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:16px; padding:14px 16px;
  background: rgba(201,211,208,.06);
  border-left:2px solid rgba(201,211,208,.55);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13.5px; line-height:1.75; color: var(--mist);
}
.page-faq .faq-note__mark{
  flex:0 0 auto; width:8px; height:8px; margin-top:7px;
  border-radius:2px; background: var(--silver);
  transform: rotate(45deg);
}
.page-faq .faq-jump{ margin-top:16px; }
.page-faq .faq-jump a{
  display:inline-block; font-size:14px; font-weight:700;
  color: var(--cyan); text-decoration:none;
  border-bottom:1px solid rgba(53,242,208,.45); padding-bottom:3px;
}
.page-faq .faq-jump a:hover{ border-bottom-color: var(--cyan); }

/* ── 比分分隔线 ── */
.page-faq .faq-tie{
  display:flex; align-items:center; gap:14px;
  margin: clamp(22px,3vw,32px) 0 0;
}
.page-faq .faq-tie::before,
.page-faq .faq-tie::after{
  content:""; flex:1 1 auto; height:1px;
  background: linear-gradient(90deg, rgba(53,242,208,0), rgba(53,242,208,.55), rgba(53,242,208,0));
}
.page-faq .faq-tie span{
  flex:0 0 auto; font-family: var(--font-mono);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: rgba(53,242,208,.9);
}

/* ── 联系条 ── */
.page-faq .faq-contact-strip{
  margin-top:18px; padding:16px 18px;
  border:1px dashed rgba(53,242,208,.35);
  border-radius: var(--radius-md);
  display:grid; gap:12px;
}
.page-faq .faq-contact-strip p{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  font-size:13.5px;
}
.page-faq .faq-contact-strip strong{
  color: rgba(201,211,208,.68); font-size:12px;
  letter-spacing:.1em; font-weight:600; min-width:5em;
}
.page-faq .faq-contact-strip span{
  font-family: var(--font-mono); color: var(--paper); word-break:break-all;
}
.page-faq .faq-contact-strip .btn{ justify-self:start; }

/* ── 折叠问答 ── */
.page-faq .faq-chapter--qa{ padding-bottom:0; }
.page-faq .faq-qa{
  margin-top:12px;
  border: var(--faq-line);
  border-radius: var(--radius-md);
  background: rgba(15,21,18,.72);
  overflow:hidden;
  transition: border-color .18s ease, background .18s ease;
}
.page-faq .faq-qa[open]{ border-color: rgba(53,242,208,.42); background: rgba(11,33,27,.85); }
.page-faq .faq-qa summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px;
  font-size: clamp(14.5px,1.6vw,16px); font-weight:700; color: var(--paper);
}
.page-faq .faq-qa summary::-webkit-details-marker{ display:none; }
.page-faq .faq-qa summary::after{
  content:"+"; flex:0 0 auto;
  font-family: var(--font-mono); font-size:19px; line-height:1;
  color: var(--cyan);
}
.page-faq .faq-qa[open] summary::after{ content:"–"; }
.page-faq .faq-qa summary:focus-visible{
  outline:2px solid var(--cyan); outline-offset:-3px;
}
.page-faq .faq-qa__body{
  padding:0 18px 18px;
  font-size:14px; line-height:1.8; color: rgba(216,205,189,.88);
}

/* ── 收尾卡片 ── */
.page-faq .faq-cta-wrap{ padding-top: clamp(34px,5vw,64px); }
.page-faq .faq-cta{
  background: linear-gradient(135deg, var(--paper) 0%, #EADCC6 100%);
  color: var(--ink-text);
  border-radius: var(--radius-lg);
  padding: clamp(22px,3.6vw,44px);
  display:grid; gap:22px;
  position:relative; overflow:hidden;
}
.page-faq .faq-cta::before{
  content:""; position:absolute; left:-40px; bottom:-60px;
  width:180px; height:180px; border-radius:50%;
  background: rgba(53,242,208,.24);
}
.page-faq .faq-cta .eyebrow{ color:#8A3B0F; }
.page-faq .faq-cta h2{
  color: var(--ink-text); font-size: clamp(22px,3.4vw,34px);
  line-height:1.2; margin-top:8px;
}
.page-faq .faq-cta p{
  margin-top:12px; max-width:42em;
  font-size:14.5px; line-height:1.8; color:#2B3733;
}
.page-faq .faq-cta__actions{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  position:relative; z-index:1;
}
.page-faq .faq-cta__actions .btn--solid{
  background: var(--orange); color:#0F1512; border-color: var(--orange);
}
.page-faq .faq-cta__actions .btn--solid:hover{ filter:brightness(1.06); }
.page-faq .faq-cta__actions .btn--ghost{
  background: transparent; color:#0F1512; border-color: rgba(15,21,18,.45);
}
.page-faq .faq-cta__actions .btn--ghost:hover{
  background:#0F1512; color: var(--paper); border-color:#0F1512;
}

/* ── 响应式 ── */
@media (min-width:600px){
  .page-faq .faq-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .page-faq .faq-contact-strip{ grid-template-columns:1fr 1fr; align-items:center; }
  .page-faq .faq-contact-strip .btn{ grid-column:1 / -1; }
}

@media (min-width:720px){
  .page-faq .faq-begin{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:900px){
  .page-faq .faq-hero__grid{ grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
  .page-faq .faq-cta{ grid-template-columns: minmax(0,1fr) auto; align-items:center; }
  .page-faq .faq-cta__actions{ flex-direction:column; align-items:stretch; }
  .page-faq .faq-cta__actions .btn{ text-align:center; }
}

@media (min-width:980px){
  .page-faq .faq-layout{ grid-template-columns: 208px minmax(0,1fr); align-items:start; }
  .page-faq .faq-index{ position:sticky; top:20px; }
  .page-faq .faq-index__nav{ flex-direction:column; overflow:visible; padding-bottom:0; }
  .page-faq .faq-pill{ width:100%; text-align:left; }
  .page-faq .faq-contact-strip{ grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:center; }
  .page-faq .faq-contact-strip .btn{ grid-column:auto; }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .faq-step,
  .page-faq .faq-pill,
  .page-faq .faq-qa{ transition:none; }
  .page-faq .faq-step:hover{ transform:none; }
}
<<<END>>>