.page-faq {
  --faq-body: #C6D1E7;
  --faq-line: rgba(0, 229, 255, 0.16);
  --faq-radius: 14px;
  --faq-gap: clamp(16px, 2.4vw, 32px);
  background: var(--ink);
  color: var(--white);
  padding-bottom: clamp(48px, 7vw, 96px);
  font-family: var(--font-display);
  overflow-x: hidden;
}

.page-faq * {
  box-sizing: border-box;
}

.page-faq img {
  max-width: 100%;
  height: auto;
}

.page-faq .dv-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 面包屑 ---------- */
.page-faq .faq-crumb {
  padding-top: clamp(18px, 3vw, 30px);
  font-size: 13px;
}

.page-faq .faq-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.page-faq .faq-crumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-faq .faq-crumb li + li::before {
  content: "/";
  color: rgba(147, 161, 189, 0.5);
}

.page-faq .faq-crumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.page-faq .faq-crumb a:hover {
  color: var(--cyan);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 60px) 0 clamp(36px, 6vw, 76px);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -140px;
  width: min(780px, 90vw);
  height: 560px;
  background: linear-gradient(140deg, rgba(0, 87, 255, 0.45), rgba(0, 229, 255, 0.08) 52%, transparent 76%);
  transform: skewY(-9deg);
  pointer-events: none;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(340px, 46vw);
  height: 3px;
  background: linear-gradient(90deg, var(--orange), transparent);
}

.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

.page-faq .faq-hero__title {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.6vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.page-faq .faq-hero__lead {
  margin: 0 0 26px;
  max-width: 56ch;
  color: var(--faq-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-faq .faq-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--faq-line);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  overflow: hidden;
}

.page-faq .faq-facts__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 15px 14px;
  background: var(--ink-2);
}

.page-faq .faq-facts__num {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.01em;
}

.page-faq .faq-facts__label {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 三步自查 ---------- */
.page-faq .faq-check {
  padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 44px);
}

.page-faq .faq-check__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-faq .faq-check__intro {
  margin: 14px 0 0;
  max-width: 48ch;
  color: var(--faq-body);
  font-size: 15px;
  line-height: 1.8;
}

.page-faq .faq-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-step:last-child {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 106, 0, 0.45);
  background: rgba(255, 106, 0, 0.1);
  color: var(--orange);
  font-size: 12.5px;
  font-weight: 700;
}

.page-faq .faq-step__body h3 {
  margin: 5px 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--white);
}

.page-faq .faq-step__body p {
  margin: 0;
  color: var(--faq-body);
  font-size: 14.5px;
  line-height: 1.75;
}

.page-faq .faq-check__figure {
  margin: 0;
}

.page-faq .faq-check__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--faq-radius);
  border: 1px solid var(--faq-line);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.page-faq .faq-check__cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- 双栏主体 ---------- */
.page-faq .faq-body {
  padding: clamp(28px, 4vw, 48px) 0 0;
}

.page-faq .faq-layout {
  display: grid;
  gap: clamp(24px, 3.5vw, 48px);
}

.page-faq .faq-side__title {
  margin: 0 0 12px;
}

.page-faq .faq-nav .dv-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-faq .faq-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-nav a .dv-mono {
  font-size: 11.5px;
  color: rgba(147, 161, 189, 0.65);
  transition: color 0.25s var(--ease);
}

.page-faq .faq-nav a:hover {
  color: var(--white);
  background: rgba(0, 87, 255, 0.14);
}

.page-faq .faq-nav a[aria-current="true"] {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(255, 106, 0, 0.1);
}

.page-faq .faq-nav a[aria-current="true"] .dv-mono {
  color: var(--orange);
}

.page-faq .faq-side__card {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  background: linear-gradient(160deg, rgba(0, 87, 255, 0.2), rgba(11, 17, 32, 0.92) 62%);
  box-shadow: var(--shadow);
}

.page-faq .faq-side__card-tag {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-faq .faq-side__card-text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--faq-body);
}

/* ---------- 问答分组 ---------- */
.page-faq .faq-group {
  margin-bottom: clamp(36px, 5vw, 64px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-faq .faq-group:last-child {
  margin-bottom: 0;
}

.page-faq .faq-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-group__num {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--orange);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-faq .faq-group__icon {
  display: inline-flex;
  color: var(--cyan);
}

.page-faq .faq-group__meta {
  flex: 1 1 220px;
  min-width: 0;
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 27px);
  letter-spacing: 0.01em;
  color: var(--white);
}

.page-faq .faq-group__desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.page-faq .faq-shot {
  margin: 0 0 18px;
}

.page-faq .faq-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--faq-radius);
  border: 1px solid var(--faq-line);
  object-fit: cover;
}

.page-faq .faq-shot__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-item {
  background: var(--ink-2);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  margin-bottom: 10px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.page-faq .faq-item:hover {
  border-color: rgba(0, 229, 255, 0.34);
}

.page-faq .faq-item[open] {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: inset 2px 0 0 var(--orange), var(--shadow);
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--white);
}

.page-faq .faq-item > summary::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item > summary::marker {
  content: "";
}

.page-faq .faq-item > summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--faq-radius);
}

.page-faq .faq-item__q {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .faq-item__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--faq-line);
  color: var(--cyan);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.page-faq .faq-item[open] .faq-item__arrow {
  transform: rotate(90deg);
  color: var(--orange);
  border-color: rgba(255, 106, 0, 0.5);
}

.page-faq .faq-item__body {
  padding: 0 18px 18px;
  animation: faqFadeIn 0.3s var(--ease) both;
}

.page-faq .faq-item__body p {
  margin: 0;
  max-width: 64ch;
  color: var(--faq-body);
  font-size: 14.5px;
  line-height: 1.8;
}

.page-faq .faq-item__body a,
.page-faq .faq-prep__foot a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-item__body a:hover,
.page-faq .faq-prep__foot a:hover {
  color: var(--orange);
  border-color: var(--orange);
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 联系与准备 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 1px;
  background: var(--faq-line);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  overflow: hidden;
}

.page-faq .faq-contact__col {
  padding: 20px 18px;
  background: var(--ink-2);
}

.page-faq .faq-contact__label {
  margin: 0 0 10px;
}

.page-faq .faq-contact__link {
  display: inline-block;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  word-break: break-all;
}

.page-faq .faq-contact__link:hover {
  color: var(--cyan);
  border-color: var(--orange);
}

.page-faq .faq-contact__address {
  margin: 0;
  color: var(--white);
  font-size: 14px;
  line-height: 1.7;
}

.page-faq .faq-contact__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

.page-faq .faq-prep {
  margin-top: 20px;
  padding: 20px 18px;
  border: 1px dashed rgba(0, 229, 255, 0.32);
  border-radius: var(--faq-radius);
  background: rgba(0, 87, 255, 0.08);
}

.page-faq .faq-prep h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-faq .faq-prep ul {
  margin: 0;
  padding-left: 18px;
  color: var(--faq-body);
  font-size: 14px;
  line-height: 1.95;
}

.page-faq .faq-prep__foot {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 媒体查询 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-prep {
    padding: 24px 22px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: end;
  }

  .page-faq .faq-layout {
    grid-template-columns: minmax(200px, 244px) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-side {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

  .page-faq .faq-nav .dv-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-faq .faq-nav a {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-check__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-faq .faq-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (placeholder) {
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item__body {
    animation: none;
  }

  .page-faq .faq-item__arrow,
  .page-faq .faq-item,
  .page-faq .faq-nav a {
    transition: none;
  }
}
<<<END>>>
抱歉，上一条输出有误（末尾混入了无效的媒体查询占位与多余标记）。以下是修正后的完整内容，请以此为准：


<main id="main-content" class="page-faq">

  <div class="dv-container">
    <nav class="dv-breadcrumb faq-crumb" aria-label="页面位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li>使用指南</li>
      </ol>
    </nav>
  </div>

  <header class="faq-hero">
    <div class="dv-container faq-hero__inner">
      <div class="faq-hero__copy">
        <p class="dv-eyebrow">HELP CENTER · 工作日 09:00–18:00</p>
        <h1 class="faq-hero__title">装不上、选错版本、资料催得急，先走这三步</h1>
        <p class="dv-lead faq-hero__lead">多玩平台把玩家和企业客户最常卡住的地方拆成四组问答，每个答案都给到可以立刻执行的动作。先判断问题出在下载、安装还是使用阶段，多数情况当场就能绕开。</p>
        <div class="dv-actions faq-hero__actions">
          <a class="dv-btn dv-btn--primary" href="#self-check">开始自查</a>
          <a class="dv-btn dv-btn--ghost" href="/app-download/">去下载客户端</a>
        </div>
      </div>
      <ul class="faq-facts">
        <li class="faq-facts__item">
          <span class="faq-facts__num dv-mono">7×12</span>
          <span class="faq-facts__label">小时在线帮助中心</span>
        </li>
        <li class="faq-facts__item">
          <span class="faq-facts__num dv-mono">82%</span>
          <span class="faq-facts__label">常见安装问题自助解决</span>
        </li>
        <li class="faq-facts__item">
          <span class="faq-facts__num dv-mono">4 小时</span>
          <span class="faq-facts__label">咨询一般回复时长</span>
        </li>
        <li class="faq-facts__item">
          <span class="faq-facts__num dv-mono">31</span>
          <span class="faq-facts__label">个省级行政区服务覆盖</span>
        </li>
      </ul>
    </div>
  </header>

  <section class="faq-check" id="self-check" aria-labelledby="faq-check-title">
    <div class="dv-container">
      <div class="faq-check__grid">
        <div class="faq-check__copy" data-reveal>
          <p class="dv-eyebrow">STEP 01 → 03</p>
          <h2 id="faq-check-title" class="dv-chapter">先判断卡在哪一段</h2>
          <p class="faq-check__intro">同一个报错出现在不同阶段，处理动作完全不一样。花一分钟对号入座，再往下翻具体的处理步骤。</p>
          <ol class="faq-steps">
            <li class="faq-step">
              <span class="faq-step__num dv-mono">01</span>
              <div class="faq-step__body">
                <h3>文件还没拿全</h3>
                <p>下载中断、体积和下载页标注的对不上、校验值不匹配，直接看「下载与安装」的前两条。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step__num dv-mono">02</span>
              <div class="faq-step__body">
                <h3>装到一半停了</h3>
                <p>空间不足、权限被拦、进度不动，或者装完打不开，看「下载与安装」的后三条。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step__num dv-mono">03</span>
              <div class="faq-step__body">
                <h3>装好了但用不顺</h3>
                <p>拿不准选哪个版本、内容没更到最新、找不到栏目入口，看「版本与更新」和「账号与内容」。</p>
              </div>
            </li>
          </ol>
        </div>
        <figure class="faq-check__figure" data-reveal>
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="下载、安装、使用三个阶段的自查流程示意图，用分支箭头标出常见问题类型">
          <figcaption class="faq-check__cap">下载 → 安装 → 使用：三个阶段各自对应的问题类型</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="faq-body" aria-labelledby="faq-body-title">
    <h2 id="faq-body-title" class="dv-skip">常见问题分组</h2>
    <div class="dv-container faq-layout">

      <aside class="faq-side">
        <p class="dv-eyebrow faq-side__title">问题分组</p>
        <nav class="dv-toc faq-nav" aria-label="问答分组目录">
          <ol class="dv-toc__list">
            <li><a href="#g-install" data-toc-link><span class="dv-mono">01</span>下载与安装</a></li>
            <li><a href="#g-version" data-toc-link><span class="dv-mono">02</span>版本与更新</a></li>
            <li><a href="#g-enterprise" data-toc-link><span class="dv-mono">03</span>企业资源</a></li>
            <li><a href="#g-content" data-toc-link><span class="dv-mono">04</span>账号与内容</a></li>
            <li><a href="#g-help" data-toc-link><span class="dv-mono">05</span>仍未解决时</a></li>
          </ol>
        </nav>
        <div class="faq-side__card">
          <p class="faq-side__card-tag dv-mono">直接问人</p>
          <p class="faq-side__card-text">工作日 9:00–18:00 受理邮件与电话，一般 4 小时内回复。</p>
          <a class="dv-btn dv-btn--sm dv-btn--orange" href="/find-us/">联系客服</a>
        </div>
      </aside>

      <div class="faq-main">

        <section class="faq-group" id="g-install" aria-labelledby="g-install-title">
          <header class="faq-group__head">
            <span class="faq-group__num dv-mono">01</span>
            <span class="faq-group__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v11"/><path d="m7.5 10 4.5 4.5L16.5 10"/><path d="M4 20h16"/></svg>
            </span>
            <div class="faq-group__meta">
              <h3 id="g-install-title" class="faq-group__title">下载与安装</h3>
              <p class="faq-group__desc">文件下不下来、校验对不上、装到一半被拦住，都在这里处理。</p>
            </div>
          </header>

          <figure class="faq-shot">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="客户端安装界面截图，用霓虹青描边标注校验码位置与安装路径选择处" loading="lazy" decoding="async">
            <figcaption class="faq-shot__cap">安装界面中校验码的展示位置与安装路径的选择处</figcaption>
          </figure>

          <div class="faq-list">
            <details class="faq-item" name="faq-install">
              <summary>
                <span class="faq-item__q">安装包下到一半就断了，怎么重来？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>先确认剩余磁盘空间够用：标准版安装包 148MB、轻量版 62MB、macOS 版 176MB、绿色版 96MB，标准版安装后还要再占用约 320MB。换一条稳定网络，用浏览器另存到本地重新下载，别在下载器里反复续传。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-install">
              <summary>
                <span class="faq-item__q">怎么确认下载到的文件没有被改过？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>每个安装包在<a href="/app-download/">客户端下载页</a>都附有 SHA-256 校验码与数字签名信息，比对一致再安装。给团队批量分发时，把这串值随文件一起发出去，接收方装之前统一核对一次。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-install">
              <summary>
                <span class="faq-item__q">安装进度卡着不动，或者提示空间不足</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>安装过程需要临时解压，先把待安装磁盘腾出比安装包大一倍以上的空间。临时关掉正在扫描该目录的安全软件，删掉上一次失败留下的残留目录，再重新运行安装程序。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-install">
              <summary>
                <span class="faq-item__q">系统提示没有权限，安装直接被拦住</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>客户端支持 Windows 10/11 64 位与 macOS 12 及以上系统，请先在 Windows 上右键「以管理员身份运行」，macOS 则到「隐私与安全性」里放行一次。公司电脑装了统一管控软件的，请先让 IT 放开这次安装。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-install">
              <summary>
                <span class="faq-item__q">装完了打不开，或者打开一闪就退</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>检查安装路径是否落在当前账号可写的位置，装进受保护的目录会起不来。绿色版要先把压缩包完整解压到本地文件夹再运行，直接在压缩包内双击通常就是这个现象。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-group" id="g-version" aria-labelledby="g-version-title">
          <header class="faq-group__head">
            <span class="faq-group__num dv-mono">02</span>
            <span class="faq-group__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.34-5.66"/><path d="M20 4v4h-4"/></svg>
            </span>
            <div class="faq-group__meta">
              <h3 id="g-version-title" class="faq-group__title">版本与更新</h3>
              <p class="faq-group__desc">四个版本怎么挑、升级走哪条路、旧版还能撑多久。</p>
            </div>
          </header>

          <div class="faq-list">
            <details class="faq-item" name="faq-version">
              <summary>
                <span class="faq-item__q">四个版本，我该装哪一个？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>常玩大型游戏、要完整功能，选 Windows 标准版（148MB）；机型偏旧或只想轻量跑，选轻量版（62MB）；macOS 12 及以上用 macOS 版（176MB）；经常换机器、不想在本地留下安装痕迹，用免安装绿色版（96MB）。完整差异在<a href="/app-download/">下载页</a>有逐项对照。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-version">
              <summary>
                <span class="faq-item__q">装好之后怎么升级到新版本？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>在客户端内直接检查更新，按提示装完即可，不需要先卸载旧版。内容目录每月 5 日随客户端版本节奏统一刷新，更新后新栏目和工具中心的新版本会一起到位。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-version">
              <summary>
                <span class="faq-item__q">旧版本还能继续用吗？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>能打开，但新发布的栏目内容和新版小工具要在较新版本上才看得到。如果长期停在旧版本又遇到问题，建议先升级再排查，能排除掉一大半兼容性因素。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-version">
              <summary>
                <span class="faq-item__q">历史版本在哪里找？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>下载页的版本记录区按时间列出了各版本的发布说明与体积信息，可以倒查。企业客户需要用指定版本做兼容测试的，咨询时把版本号写进需求，能省掉一轮确认。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-version">
              <summary>
                <span class="faq-item__q">多久会发一次新版本？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>自 2016 年上线以来已对外发布 42 个客户端版本，节奏跟着内容目录的月度刷新推进。较大的版本更新会提前在版本情报栏目放出说明，先看再升更稳妥。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-group" id="g-enterprise" aria-labelledby="g-enterprise-title">
          <header class="faq-group__head">
            <span class="faq-group__num dv-mono">03</span>
            <span class="faq-group__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/></svg>
            </span>
            <div class="faq-group__meta">
              <h3 id="g-enterprise-title" class="faq-group__title">企业资源</h3>
              <p class="faq-group__desc">资料包有什么、怎么申请、多久刷一次、分发前怎么核对。</p>
            </div>
          </header>

          <div class="faq-list">
            <details class="faq-item" name="faq-enterprise">
              <summary>
                <span class="faq-item__q">企业资源专区里都放了什么？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>专区集中放置六类资料包：产品白皮书、接口对接说明、品牌素材包、版本兼容矩阵、运营活动模板、备案与服务说明。专区自 2019 年上线，目前已服务 1,860 家企业客户，客户主要集中在华东与东北地区。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-enterprise">
              <summary>
                <span class="faq-item__q">资料包要怎么申请？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>用公司邮箱写信到 info@gameverse-duowan.com.cn，注明公司名称、使用场景和需要的资料包名称。工作日 9:00–18:00 内受理，一般 4 小时内回复。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-enterprise">
              <summary>
                <span class="faq-item__q">资料多久刷新一次，旧版本还能拿到吗？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>资料包每月随客户端版本同步刷新，与内容目录的更新节奏一致。历史版本在专区内保留 12 个月，需要更早的版本时，把用途和版本号一起说明。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-enterprise">
              <summary>
                <span class="faq-item__q">批量分发给同事时，怎么保证文件没出错？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>每个安装包都配有 SHA-256 校验码与数字签名信息，在<a href="/app-download/">下载页</a>就能查到。分发时把校验值和安装包一起发出，接收方装之前比对一次，能挡掉传输过程中的文件损坏。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-enterprise">
              <summary>
                <span class="faq-item__q">接口对接说明里包含哪些内容？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>覆盖鉴权方式、数据字段、回调机制与错误码，并附版本兼容矩阵说明各客户端版本的差异。对接中遇到字段对不上，把版本号和错误码一并说明，通常一轮就能定位。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-group" id="g-content" aria-labelledby="g-content-title">
          <header class="faq-group__head">
            <span class="faq-group__num dv-mono">04</span>
            <span class="faq-group__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"/><path d="M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6"/></svg>
            </span>
            <div class="faq-group__meta">
              <h3 id="g-content-title" class="faq-group__title">账号与内容</h3>
              <p class="faq-group__desc">栏目分别看什么、多久换一次、想投稿从哪里开始。</p>
            </div>
          </header>

          <div class="faq-list">
            <details class="faq-item" name="faq-content">
              <summary>
                <span class="faq-item__q">八个栏目分别该去哪个看？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>新游速递看新品上线，版本情报看更新说明，攻略资料查具体玩法，工具中心提供帧率检测、配置对照、快捷键生成器等自研小工具，赛事专区跟社区比赛，创作者社区看投稿与作者动态，企业资源取资料包，帮助支持处理安装与使用问题。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-content">
              <summary>
                <span class="faq-item__q">内容多久更新一次？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>内容目录每月 5 日随客户端版本节奏统一刷新，变更记录保留最近 24 个月。系列专题和赛事内容会按活动节点单独排期，不一定跟着月度节奏走。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-content">
              <summary>
                <span class="faq-item__q">想把攻略投给平台，从哪里开始？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>目前平台有 2,300 余位注册创作者，每月新增攻略与工具类投稿约 900 篇，去<a href="/articles/">内容专栏</a>就能看到创作者的成稿样式。稿件会经过选题、编辑、复核三道流程，技术类内容另加一道数据校验，所以发布节奏会比投稿稍慢。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-content">
              <summary>
                <span class="faq-item__q">找不到某款游戏的攻略怎么办？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>攻略资料库目前收录 4.7 万条词条、覆盖 320 款游戏。先用游戏全名精确检索，再换成玩法或关卡关键词试一次；工具中心那 18 款小工具也常能补上配置、按键一类的问题。</p>
              </div>
            </details>

            <details class="faq-item" name="faq-content">
              <summary>
                <span class="faq-item__q">社区赛事的信息在哪里跟？</span>
                <span class="faq-item__arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3 5 5-5 5"/></svg></span>
              </summary>
              <div class="faq-item__body">
                <p>赛事专区累计承办 36 届社区赛事，单届报名规模在 2,000 人以上。赛程、报名入口与规则都按届次归档在赛事栏目内，开赛前的变动也在这里同步。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="faq-group faq-group--help" id="g-help" aria-labelledby="g-help-title">
          <header class="faq-group__head">
            <span class="faq-group__num dv-mono">05</span>
            <span class="faq-group__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 15a2 2 0 0 1-2 2H8l-4 3V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9Z"/></svg>
            </span>
            <div class="faq-group__meta">
              <h3 id="g-help-title" class="faq-group__title">仍未解决时</h3>
              <p class="faq-group__desc">把信息一次说清楚，通常一轮就能对上问题。</p>
            </div>
          </header>

          <div class="faq-contact">
            <div class="faq-contact__col">
              <p class="faq-contact__label dv-eyebrow">写邮件</p>
              <a class="faq-contact__link" href="mailto:info@gameverse-duowan.com.cn">info@gameverse-duowan.com.cn</a>
              <p class="faq-contact__note">工作日 9:00–18:00 内受理，一般 4 小时内回复。</p>
            </div>
            <div class="faq-contact__col">
              <p class="faq-contact__label dv-eyebrow">打电话</p>
              <a class="faq-contact__link" href="tel:15543878086">15543878086</a>
              <p class="faq-contact__note">安装卡死一类的问题，电话里描述现象往往更快。</p>
            </div>
            <div class="faq-contact__col">
              <p class="faq-contact__label dv-eyebrow">通信地址</p>
              <p class="faq-contact__address">吉林省吉林市船营区解放中路128号</p>
              <p class="faq-contact__note">运营与服务支撑地为吉林省，服务覆盖 31 个省级行政区。</p>
            </div>
          </div>

          <div class="faq-prep">
            <h4>写信前先备好这几样</h4>
            <ul>
              <li>客户端版本号，在客户端内可以直接查到</li>
              <li>操作系统版本，以及芯片类型是 64 位还是 Apple 芯片</li>
              <li>报错提示的原文，或能描述当前位置的界面截图说明</li>
              <li>已经试过的处理步骤，避免重复走一遍</li>
              <li>企业咨询另附公司名称与需求说明</li>
            </ul>
            <p class="faq-prep__foot">也可以先翻一遍<a href="/articles/">内容专栏</a>里的版本情报，很多更新后的新变化在那里有说明。</p>
          </div>
        </section>

      </div>
    </div>
  </section>

</main>


.page-faq {
  --faq-body: #C6D1E7;
  --faq-line: rgba(0, 229, 255, 0.16);
  --faq-radius: 14px;
  --faq-gap: clamp(16px, 2.4vw, 32px);
  background: var(--ink);
  color: var(--white);
  padding-bottom: clamp(48px, 7vw, 96px);
  font-family: var(--font-display);
  overflow-x: hidden;
}

.page-faq * {
  box-sizing: border-box;
}

.page-faq img {
  max-width: 100%;
  height: auto;
}

.page-faq .dv-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 面包屑 ---------- */
.page-faq .faq-crumb {
  padding-top: clamp(18px, 3vw, 30px);
  font-size: 13px;
}

.page-faq .faq-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.page-faq .faq-crumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-faq .faq-crumb li + li::before {
  content: "/";
  color: rgba(147, 161, 189, 0.5);
}

.page-faq .faq-crumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.page-faq .faq-crumb a:hover {
  color: var(--cyan);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 60px) 0 clamp(36px, 6vw, 76px);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -140px;
  width: min(780px, 90vw);
  height: 560px;
  background: linear-gradient(140deg, rgba(0, 87, 255, 0.45), rgba(0, 229, 255, 0.08) 52%, transparent 76%);
  transform: skewY(-9deg);
  pointer-events: none;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(340px, 46vw);
  height: 3px;
  background: linear-gradient(90deg, var(--orange), transparent);
}

.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

.page-faq .faq-hero__title {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.6vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.page-faq .faq-hero__lead {
  margin: 0 0 26px;
  max-width: 56ch;
  color: var(--faq-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-faq .faq-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--faq-line);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  overflow: hidden;
}

.page-faq .faq-facts__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 15px 14px;
  background: var(--ink-2);
}

.page-faq .faq-facts__num {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.01em;
}

.page-faq .faq-facts__label {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 三步自查 ---------- */
.page-faq .faq-check {
  padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 44px);
}

.page-faq .faq-check__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-faq .faq-check__intro {
  margin: 14px 0 0;
  max-width: 48ch;
  color: var(--faq-body);
  font-size: 15px;
  line-height: 1.8;
}

.page-faq .faq-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-step:last-child {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 106, 0, 0.45);
  background: rgba(255, 106, 0, 0.1);
  color: var(--orange);
  font-size: 12.5px;
  font-weight: 700;
}

.page-faq .faq-step__body h3 {
  margin: 5px 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--white);
}

.page-faq .faq-step__body p {
  margin: 0;
  color: var(--faq-body);
  font-size: 14.5px;
  line-height: 1.75;
}

.page-faq .faq-check__figure {
  margin: 0;
}

.page-faq .faq-check__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--faq-radius);
  border: 1px solid var(--faq-line);
  box-shadow: var(--shadow);
  object-fit: cover;
}

.page-faq .faq-check__cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- 双栏主体 ---------- */
.page-faq .faq-body {
  padding: clamp(28px, 4vw, 48px) 0 0;
}

.page-faq .faq-layout {
  display: grid;
  gap: clamp(24px, 3.5vw, 48px);
}

.page-faq .faq-side__title {
  margin: 0 0 12px;
}

.page-faq .faq-nav .dv-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-faq .faq-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-nav a .dv-mono {
  font-size: 11.5px;
  color: rgba(147, 161, 189, 0.65);
  transition: color 0.25s var(--ease);
}

.page-faq .faq-nav a:hover {
  color: var(--white);
  background: rgba(0, 87, 255, 0.14);
}

.page-faq .faq-nav a[aria-current="true"] {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(255, 106, 0, 0.1);
}

.page-faq .faq-nav a[aria-current="true"] .dv-mono {
  color: var(--orange);
}

.page-faq .faq-side__card {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  background: linear-gradient(160deg, rgba(0, 87, 255, 0.2), rgba(11, 17, 32, 0.92) 62%);
  box-shadow: var(--shadow);
}

.page-faq .faq-side__card-tag {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-faq .faq-side__card-text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--faq-body);
}

/* ---------- 问答分组 ---------- */
.page-faq .faq-group {
  margin-bottom: clamp(36px, 5vw, 64px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-faq .faq-group:last-child {
  margin-bottom: 0;
}

.page-faq .faq-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-group__num {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--orange);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-faq .faq-group__icon {
  display: inline-flex;
  color: var(--cyan);
}

.page-faq .faq-group__meta {
  flex: 1 1 220px;
  min-width: 0;
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 27px);
  letter-spacing: 0.01em;
  color: var(--white);
}

.page-faq .faq-group__desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.page-faq .faq-shot {
  margin: 0 0 18px;
}

.page-faq .faq-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--faq-radius);
  border: 1px solid var(--faq-line);
  object-fit: cover;
}

.page-faq .faq-shot__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-item {
  background: var(--ink-2);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  margin-bottom: 10px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.page-faq .faq-item:hover {
  border-color: rgba(0, 229, 255, 0.34);
}

.page-faq .faq-item[open] {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: inset 2px 0 0 var(--orange), var(--shadow);
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--white);
}

.page-faq .faq-item > summary::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item > summary::marker {
  content: "";
}

.page-faq .faq-item > summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--faq-radius);
}

.page-faq .faq-item__q {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .faq-item__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--faq-line);
  color: var(--cyan);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.page-faq .faq-item[open] .faq-item__arrow {
  transform: rotate(90deg);
  color: var(--orange);
  border-color: rgba(255, 106, 0, 0.5);
}

.page-faq .faq-item__body {
  padding: 0 18px 18px;
  animation: faqFadeIn 0.3s var(--ease) both;
}

.page-faq .faq-item__body p {
  margin: 0;
  max-width: 64ch;
  color: var(--faq-body);
  font-size: 14.5px;
  line-height: 1.8;
}

.page-faq .faq-item__body a,
.page-faq .faq-prep__foot a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-faq .faq-item__body a:hover,
.page-faq .faq-prep__foot a:hover {
  color: var(--orange);
  border-color: var(--orange);
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 联系与准备 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 1px;
  background: var(--faq-line);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  overflow: hidden;
}

.page-faq .faq-contact__col {
  padding: 20px 18px;
  background: var(--ink-2);
}

.page-faq .faq-contact__label {
  margin: 0 0 10px;
}

.page-faq .faq-contact__link {
  display: inline-block;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  word-break: break-all;
}

.page-faq .faq-contact__link:hover {
  color: var(--cyan);
  border-color: var(--orange);
}

.page-faq .faq-contact__address {
  margin: 0;
  color: var(--white);
  font-size: 14px;
  line-height: 1.7;
}

.page-faq .faq-contact__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

.page-faq .faq-prep {
  margin-top: 20px;
  padding: 20px 18px;
  border: 1px dashed rgba(0, 229, 255, 0.32);
  border-radius: var(--faq-radius);
  background: rgba(0, 87, 255, 0.08);
}

.page-faq .faq-prep h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-faq .faq-prep ul {
  margin: 0;
  padding-left: 18px;
  color: var(--faq-body);
  font-size: 14px;
  line-height: 1.95;
}

.page-faq .faq-prep__foot {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 媒体查询 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-prep {
    padding: 24px 22px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: end;
  }

  .page-faq .faq-layout {
    grid-template-columns: minmax(200px, 244px) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-side {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

  .page-faq .faq-nav .dv-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-faq .faq-nav a {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-check__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-faq .faq-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item__body {
    animation: none;
  }

  .page-faq .faq-item__arrow,
  .page-faq .faq-item,
  .page-faq .faq-nav a {
    transition: none;
  }
}