.page-contact {
  --pc-gap: clamp(18px, 3vw, 32px);
  --pc-block: clamp(44px, 6vw, 92px);
  --pc-edge: rgba(61, 245, 230, 0.22);
  --pc-radius: 20px;
  color: var(--bone);
  background: linear-gradient(180deg, var(--ink) 0%, var(--night) 58%, var(--ink) 100%);
  overflow-x: clip;
}

.page-contact .pc-kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  font-size: 13px;
  color: var(--rock);
}

.page-contact .breadcrumb a {
  color: var(--rock);
  text-decoration: none;
}

.page-contact .breadcrumb a:hover {
  color: var(--cyan);
}

.page-contact .breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: rgba(138, 148, 166, 0.6);
}

.page-contact .breadcrumb li[aria-current="page"] {
  color: var(--bone);
}

/* ---------- 首屏 ---------- */
.page-contact .pc-hero {
  padding: clamp(22px, 4vw, 56px) 0 var(--pc-block);
}

.page-contact .pc-hero__grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .pc-hero__title {
  margin: 12px 0 20px;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: calc(clamp(2rem, 5.2vw, 3.5rem) * var(--scale));
  line-height: 1.12;
  letter-spacing: -0.02em;
  transform: rotate(-1.2deg);
  text-shadow: 3px 3px 0 rgba(61, 245, 230, 0.24), -2px -2px 0 rgba(255, 61, 154, 0.18);
  overflow-wrap: anywhere;
}

.page-contact .pc-hero__lede {
  max-width: 46ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(243, 240, 232, 0.86);
}

.page-contact .pc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-contact .pc-hero__actions .btn {
  text-decoration: none;
}

.page-contact .pc-quick {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(155deg, rgba(14, 23, 48, 0.96), rgba(7, 11, 24, 0.98));
  border: 1px solid var(--pc-edge);
  border-radius: var(--pc-radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.page-contact .pc-quick__label {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--rock);
  text-transform: uppercase;
}

.page-contact .pc-quick__mail {
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.6vw, 19px);
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(61, 245, 230, 0.45);
  overflow-wrap: anywhere;
}

.page-contact .pc-quick__mail:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.page-contact .pc-quick__hint {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.78);
}

.page-contact .pc-quick__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-contact .pc-quick__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 240, 232, 0.35);
}

.page-contact .pc-quick__link:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 通用小节头 ---------- */
.page-contact .pc-head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-contact .pc-head__lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.78);
}

/* ---------- 三步反馈 ---------- */
.page-contact .pc-steps {
  padding: var(--pc-block) 0;
}

.page-contact .pc-steps__grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .pc-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .pc-step {
  position: relative;
  padding: 20px 22px 18px 74px;
  background: rgba(14, 23, 48, 0.72);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(255, 159, 69, 0.45);
  border-radius: 14px;
}

.page-contact .pc-step:hover {
  border-left-color: var(--orange);
}

.page-contact .pc-step__num {
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--orange);
}

.page-contact .pc-step__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.page-contact .pc-step__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.78);
}

.page-contact .pc-step__more {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.page-contact .pc-step__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--cyan);
}

.page-contact .pc-step__more summary::-webkit-details-marker {
  display: none;
}

.page-contact .pc-step__more summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--orange);
}

.page-contact .pc-step__more[open] summary::before {
  content: "–";
}

.page-contact .pc-step__more p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(243, 240, 232, 0.74);
}

.page-contact .pc-steps__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-contact .pc-media {
  margin: 0;
  border: 1px solid var(--pc-edge);
  border-radius: 16px;
  overflow: hidden;
}

.page-contact .pc-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .pc-template {
  padding: 16px 18px;
  background: rgba(139, 92, 246, 0.09);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 14px;
}

.page-contact .pc-template summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
}

.page-contact .pc-template summary::-webkit-details-marker {
  display: none;
}

.page-contact .pc-template summary::after {
  content: " ↓";
  color: var(--cyan);
}

.page-contact .pc-template[open] summary::after {
  content: " ↑";
}

.page-contact .pc-template__body {
  margin: 14px 0 0;
  padding: 14px;
  background: rgba(7, 11, 24, 0.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(243, 240, 232, 0.88);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 客服渠道 ---------- */
.page-contact .pc-channels {
  padding: var(--pc-block) 0;
  background: linear-gradient(180deg, rgba(14, 23, 48, 0.92), rgba(7, 11, 24, 0.96));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-contact .pc-channels__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: center;
}

.page-contact .pc-channels__media {
  margin: 0;
  border: 1px solid var(--pc-edge);
  border-radius: 18px;
  overflow: hidden;
}

.page-contact .pc-channels__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .pc-channels__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.5rem, 3vw, 2.1rem) * var(--scale));
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-contact .pc-channels__list {
  margin: 18px 0 0;
}

.page-contact .pc-channels__row {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .pc-channels__row dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--rock);
}

.page-contact .pc-channels__row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone);
}

.page-contact .pc-channels__row dd a {
  color: var(--cyan);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.page-contact .pc-channels__row dd a:hover {
  color: var(--orange);
}

.page-contact .pc-channels__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: rgba(111, 163, 111, 0.1);
  border-left: 2px solid var(--moss);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.86);
}

/* ---------- 咨询范围 ---------- */
.page-contact .pc-scope {
  padding: var(--pc-block) 0;
}

.page-contact .pc-scope__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-contact .pc-scope__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: rgba(14, 23, 48, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.page-contact .pc-scope__item h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.page-contact .pc-scope__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-scope__item .tag {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 合作 ---------- */
.page-contact .pc-coop {
  padding: var(--pc-block) 0;
}

.page-contact .pc-coop__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: start;
}

.page-contact .pc-coop__title {
  margin: 12px 0 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.5rem, 3.2vw, 2.3rem) * var(--scale));
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.page-contact .pc-coop__lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.8);
}

.page-contact .pc-coop__points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .pc-coop__points li {
  padding-left: 16px;
  border-left: 2px solid rgba(61, 245, 230, 0.35);
  font-size: 15px;
  line-height: 1.78;
  color: rgba(243, 240, 232, 0.78);
}

.page-contact .pc-coop__points strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  color: var(--bone);
}

.page-contact .pc-coop__topic {
  padding: 24px;
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.2), rgba(7, 11, 24, 0.92));
  border: 1px solid rgba(139, 92, 246, 0.44);
  border-radius: 18px;
}

.page-contact .pc-coop__topic-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-contact .pc-coop__topic-line {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: rgba(7, 11, 24, 0.82);
  border: 1px dashed rgba(61, 245, 230, 0.42);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--bone);
  overflow-wrap: anywhere;
}

.page-contact .pc-coop__topic-hint {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-coop__topic .btn {
  margin-top: 20px;
  text-decoration: none;
}

/* ---------- 处理进度 ---------- */
.page-contact .pc-flow {
  padding: var(--pc-block) 0;
}

.page-contact .pc-flow__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: start;
}

.page-contact .pc-flow__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.4rem, 2.8vw, 2rem) * var(--scale));
  font-weight: 900;
  line-height: 1.3;
}

.page-contact .pc-flow__lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.page-contact .pc-flow__item {
  position: relative;
  padding-left: 30px;
}

.page-contact .pc-flow__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: -20px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 159, 69, 0.6), rgba(255, 159, 69, 0.04));
}

.page-contact .pc-flow__item:last-child::before {
  display: none;
}

.page-contact .pc-flow__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--ink);
}

.page-contact .pc-flow__item h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--bone);
}

.page-contact .pc-flow__item p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.76);
}

/* ---------- 答疑引导 ---------- */
.page-contact .pc-help {
  padding: var(--pc-block) 0;
  background: rgba(14, 23, 48, 0.62);
  border-top: 1px solid var(--line);
}

.page-contact .pc-help__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: center;
}

.page-contact .pc-help__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.4rem, 2.8vw, 2rem) * var(--scale));
  font-weight: 900;
  line-height: 1.3;
}

.page-contact .pc-help__lede {
  margin: 14px 0 22px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-help__intro .btn {
  text-decoration: none;
}

.page-contact .pc-help__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .pc-help__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(7, 11, 24, 0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  color: var(--bone);
  text-decoration: none;
}

.page-contact .pc-help__links a::after {
  content: "→";
  color: var(--cyan);
  flex: none;
}

.page-contact .pc-help__links a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-contact .pc-channels__row {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
  }

  .page-contact .pc-scope__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 980px) {
  .page-contact .pc-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-contact .pc-steps__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-contact .pc-channels__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-contact .pc-coop__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-contact .pc-flow__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-contact .pc-help__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (min-width: 1180px) {
  .page-contact .pc-scope__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 28px;
  }

  .page-contact .pc-scope__item:nth-child(2),
  .page-contact .pc-scope__item:nth-child(5) {
    transform: translateY(26px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .pc-hero__title {
    transform: none;
  }

  .page-contact .pc-scope__item:nth-child(2),
  .page-contact .pc-scope__item:nth-child(5) {
    transform: none;
  }
}


<main id="main-content" class="page-contact">
  <div class="container">
    <nav class="breadcrumb" aria-label="页面路径">
      <ol>
        <li><a href="/">试玩会馆首页</a></li>
        <li aria-current="page">咨询通道</li>
      </ol>
    </nav>
  </div>

  <section class="pc-hero">
    <div class="container pc-hero__grid">
      <div class="pc-hero__copy">
        <p class="pc-kicker mono">咨询通道 / INQUIRY</p>
        <h1 class="pc-hero__title">电玩试玩会馆咨询通道：把问题交给会回话的人</h1>
        <p class="lede pc-hero__lede">入口点进去没反应、某个分类在你的 iPhone 上跑得不对劲，或者你想聊内容合作，都可以从这里开始。把情况写清楚，剩下的交给我们。</p>
        <div class="pc-hero__actions">
          <a class="btn btn--primary" href="#steps">看看怎么提交</a>
          <a class="btn btn--ghost" href="#channels">直接找客服</a>
        </div>
      </div>

      <aside class="pc-quick" aria-label="客服通道速览">
        <p class="pc-quick__label mono">最快的一条路</p>
        <a class="pc-quick__mail" href="mailto:email@pg-trywin.com.cn">email@pg-trywin.com.cn</a>
        <p class="pc-quick__hint">客服邮箱工作日 10:00-18:00 回复。写信时带上分类、条目名称和设备信息，来回次数会少很多。</p>
        <div class="pc-quick__meta">
          <span class="tag tag--moss">邮件优先</span>
          <span class="tag tag--cyan">凭编号跟进</span>
        </div>
        <a class="pc-quick__link" href="#channels">查看完整联系信息</a>
      </aside>
    </div>
  </section>

  <section class="pc-steps" id="steps">
    <div class="container">
      <div class="section-head pc-head">
        <p class="pc-kicker mono">三步提交</p>
        <h2 class="section-head__title">新用户反馈指引：三步讲清你的体验</h2>
        <p class="pc-head__lede">第一次写反馈的人常卡在“我该说什么”。下面三件事写全，我们拿到就能直接处理，不用来回追问。</p>
      </div>

      <div class="pc-steps__grid">
        <ol class="pc-step-list">
          <li class="pc-step">
            <span class="pc-step__num mono">01</span>
            <h3 class="pc-step__title">先说清是哪一款</h3>
            <p class="pc-step__text">在试玩导航里确认你要说的是哪一类、哪一款，把分类名称和条目名称写下来。负责这条线的同事一眼就能对上。</p>
            <details class="pc-step__more">
              <summary>这一步的填写提示</summary>
              <p>写“消除连线里的某一款”不如直接写条目名称；有截图就附一张，位置比描述更直观。</p>
            </details>
          </li>
          <li class="pc-step">
            <span class="pc-step__num mono">02</span>
            <h3 class="pc-step__title">把现场还原一遍</h3>
            <p class="pc-step__text">写下你的 iPhone 机型、iOS 版本，以及操作到哪一步出现什么现象。信息越具体，我们越容易复现。</p>
            <details class="pc-step__more">
              <summary>这一步的填写提示</summary>
              <p>例如“在某一步点击后画面停住，退回再进仍然如此”，比只写“打不开”有用得多。系统版本写到 iOS 15、16 这样的层面即可。</p>
            </details>
          </li>
          <li class="pc-step">
            <span class="pc-step__num mono">03</span>
            <h3 class="pc-step__title">收好你的处理编号</h3>
            <p class="pc-step__text">邮件发出后你会拿到一个处理进度编号。后续跟进同一件事，把编号写在标题最前面就行。</p>
            <details class="pc-step__more">
              <summary>这一步的填写提示</summary>
              <p>一个编号对应一件事。如果问题变了，另开一封新邮件并在正文里提一句上一个编号，我们能把两段接起来。</p>
            </details>
          </li>
        </ol>

        <div class="pc-steps__side">
          <figure class="media pc-media">
            <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="手持手机填写体验反馈的界面特写，屏幕上方显示步骤编号 01 至 03">
            <figcaption class="media__caption">按编号逐步填写，反馈不容易漏项</figcaption>
          </figure>

          <details class="pc-template">
            <summary>展开一份可以直接套用的反馈邮件</summary>
            <pre class="pc-template__body mono">主题：【体验反馈】分类名称 + 条目名称 + 处理编号（如有）
分类：经典转轴 / 消除连线 / 竞猜轮盘 / 冒险闯关 / 节奏连击 / 休闲益智
设备与系统：iPhone 机型 + iOS 版本
发生时间：某日 大致时段
现象：在哪一步出现什么情况，能否重复出现
附件：截图 1-2 张
回拨号码：需要电话沟通时填写</pre>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="pc-channels" id="channels">
    <div class="container pc-channels__grid">
      <figure class="media media--wide pc-channels__media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色客服工作台屏幕上的邮件列表与反馈编号排列画面" loading="lazy" decoding="async">
        <figcaption class="media__caption">每封来信按处理编号归档，跟进时不必重讲一遍</figcaption>
      </figure>

      <div class="pc-channels__body">
        <h2 class="pc-channels__title">客服渠道与工作时间</h2>
        <dl class="pc-channels__list">
          <div class="pc-channels__row">
            <dt>客服邮箱</dt>
            <dd><a href="mailto:email@pg-trywin.com.cn">email@pg-trywin.com.cn</a></dd>
          </div>
          <div class="pc-channels__row">
            <dt>电话</dt>
            <dd>17798317467</dd>
          </div>
          <div class="pc-channels__row">
            <dt>联系地址</dt>
            <dd>广东省广州市天河区科韵路16号信息港南座8层</dd>
          </div>
        </dl>
        <p class="pc-channels__note">客服邮箱工作日 10:00-18:00 回复。如需电话沟通，请在邮件中留下联系方式，客服将主动回拨。</p>
      </div>
    </div>
  </section>

  <section class="pc-scope">
    <div class="container">
      <div class="section-head pc-head">
        <p class="pc-kicker mono">咨询范围</p>
        <h2 class="section-head__title">你的问题该走哪条线</h2>
        <p class="pc-head__lede">大多是同一封邮件就能启动的事。对照下面几类，把关键信息带上，处理会顺着走。</p>
      </div>

      <ul class="pc-scope__list">
        <li class="pc-scope__item">
          <h3>入口点进去没反应</h3>
          <p>写清你从哪个分类进入、卡在哪一屏，附一张截图。入口使用类的问题通常一轮就能定位。</p>
          <span class="tag tag--cyan">客服邮箱</span>
        </li>
        <li class="pc-scope__item">
          <h3>想知道反馈处理到哪了</h3>
          <p>把处理进度编号放在邮件标题里，注明上次沟通的大致时间，我们直接调出原始记录接上。</p>
          <span class="tag tag--magenta">带上编号</span>
        </li>
        <li class="pc-scope__item">
          <h3>iPhone 上表现异常</h3>
          <p>机型、系统版本、现象三样写全。兼容性问题会按复测轮次归档，同类反馈多了会推动一次真机复测。</p>
          <span class="tag tag--moss">设备信息</span>
        </li>
        <li class="pc-scope__item">
          <h3>内容或描述需要更正</h3>
          <p>指出栏目与条目名称、你看到的实际情况。内容组每周复核一次常见问题，规则类内容每月复核。</p>
          <span class="tag tag--clay">内容纠错</span>
        </li>
        <li class="pc-scope__item">
          <h3>想谈合作</h3>
          <p>把机构名称、合作方向和可投入的资源写在正文里，主题行按合作咨询的格式开头，我们会转给对接同事。</p>
          <span class="tag tag--cyan">合作咨询</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="pc-coop">
    <div class="container pc-coop__grid">
      <div class="pc-coop__copy">
        <p class="pc-kicker mono">合作与媒体</p>
        <h2 class="pc-coop__title">和 8 家电玩内容媒体、5 家兼容测试服务商一起把关</h2>
        <p class="pc-coop__lede">条目稳不稳，光靠一方看不全。我们和内容媒体一起挑选题，和测试服务商一起跑真机反馈，把每一轮的结论都记进条目里。</p>
        <ul class="pc-coop__points">
          <li>
            <strong>内容媒体</strong>
            分类榜单的联合选题、试玩观察稿件的素材互通，新分类上线前先做一轮交叉比对。
          </li>
          <li>
            <strong>兼容测试</strong>
            新机型接入前跑一轮真机反馈，异常记录按复测轮次归档，稳定后再进入榜单。
          </li>
          <li>
            <strong>年度观察报告</strong>
            每年发布一次试玩体验观察报告，汇总分类热度、设备兼容与用户反馈趋势，合作方可提前沟通选题方向。
          </li>
        </ul>
      </div>

      <div class="pc-coop__topic">
        <p class="pc-coop__topic-label mono">邮件主题建议</p>
        <p class="pc-coop__topic-line mono">【合作咨询】机构名称 + 合作方向 + 期望启动时间</p>
        <p class="pc-coop__topic-hint">正文里补一句你们已有的内容储备或测试能力，我们能更快判断从哪一块开始。</p>
        <a class="btn btn--cyan" href="mailto:email@pg-trywin.com.cn">按这个主题写一封</a>
      </div>
    </div>
  </section>

  <section class="pc-flow">
    <div class="container pc-flow__grid">
      <div class="pc-flow__intro">
        <h2 class="pc-flow__title">编号发出去之后，事情怎么走</h2>
        <p class="pc-flow__lede">反馈不是发完就断线。知道每一步在哪、交给谁，你就不用隔几天再问一遍。</p>
      </div>
      <ol class="pc-flow__list">
        <li class="pc-flow__item">
          <h3>编号就是归档号</h3>
          <p>同一件事始终用同一个编号沟通，回信时把它写在标题最前面，我们不必重读整段历史。</p>
        </li>
        <li class="pc-flow__item">
          <h3>邮件按顺序回</h3>
          <p>工作日 10:00-18:00 收到的来信依次回复，落在周末或节假日的会顺延到下一个工作日。</p>
        </li>
        <li class="pc-flow__item">
          <h3>电话由我们先打过去</h3>
          <p>想在电话里说清楚，就在邮件末尾留下号码和方便接听的时段，客服看到后会主动回拨。</p>
        </li>
        <li class="pc-flow__item">
          <h3>别为同一件事再发一封</h3>
          <p>重复来信会被拆成新编号，反而拖慢处理。补充信息直接回在原邮件线程里更稳妥。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="pc-help" id="help">
    <div class="container pc-help__grid">
      <div class="pc-help__intro">
        <h2 class="pc-help__title">先翻一眼答疑中心，多半已经有答案</h2>
        <p class="pc-help__lede">常见问题库累计整理了 120 条问答，覆盖下载、规则、反馈、账号与设备兼容。规则和设置类的问题，那里往往比写信更快。</p>
        <a class="btn btn--ghost" href="/answers/">去答疑中心</a>
      </div>
      <ul class="pc-help__links">
        <li><a href="/answers/">试玩轮次与处理编号怎么对应</a></li>
        <li><a href="/offerings/">按分类找入口、看 iOS 版安装指引</a></li>
        <li><a href="/privacy-notice/">字号与动效偏好保存在哪里</a></li>
        <li><a href="/disclaimer/">试玩体验的范围与站点备案信息</a></li>
      </ul>
    </div>
  </section>
</main>

.page-contact {
  --pc-gap: clamp(18px, 3vw, 32px);
  --pc-block: clamp(44px, 6vw, 92px);
  --pc-edge: rgba(61, 245, 230, 0.22);
  --pc-radius: 20px;
  color: var(--bone);
  background: linear-gradient(180deg, var(--ink) 0%, var(--night) 58%, var(--ink) 100%);
  overflow-x: clip;
}

.page-contact .pc-kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-contact .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  font-size: 13px;
  color: var(--rock);
}

.page-contact .breadcrumb a {
  color: var(--rock);
  text-decoration: none;
}

.page-contact .breadcrumb a:hover {
  color: var(--cyan);
}

.page-contact .breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: rgba(138, 148, 166, 0.6);
}

.page-contact .breadcrumb li[aria-current="page"] {
  color: var(--bone);
}

/* ---------- 首屏 ---------- */
.page-contact .pc-hero {
  padding: clamp(22px, 4vw, 56px) 0 var(--pc-block);
}

.page-contact .pc-hero__grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .pc-hero__title {
  margin: 12px 0 20px;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: calc(clamp(2rem, 5.2vw, 3.5rem) * var(--scale));
  line-height: 1.12;
  letter-spacing: -0.02em;
  transform: rotate(-1.2deg);
  text-shadow: 3px 3px 0 rgba(61, 245, 230, 0.24), -2px -2px 0 rgba(255, 61, 154, 0.18);
  overflow-wrap: anywhere;
}

.page-contact .pc-hero__lede {
  max-width: 46ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(243, 240, 232, 0.86);
}

.page-contact .pc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-contact .pc-hero__actions .btn {
  text-decoration: none;
}

.page-contact .pc-quick {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(155deg, rgba(14, 23, 48, 0.96), rgba(7, 11, 24, 0.98));
  border: 1px solid var(--pc-edge);
  border-radius: var(--pc-radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.page-contact .pc-quick__label {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--rock);
  text-transform: uppercase;
}

.page-contact .pc-quick__mail {
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.6vw, 19px);
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(61, 245, 230, 0.45);
  overflow-wrap: anywhere;
}

.page-contact .pc-quick__mail:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.page-contact .pc-quick__hint {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.78);
}

.page-contact .pc-quick__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.page-contact .pc-quick__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 240, 232, 0.35);
}

.page-contact .pc-quick__link:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 通用小节头 ---------- */
.page-contact .pc-head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-contact .pc-head__lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.78);
}

/* ---------- 三步反馈 ---------- */
.page-contact .pc-steps {
  padding: var(--pc-block) 0;
}

.page-contact .pc-steps__grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-contact .pc-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .pc-step {
  position: relative;
  padding: 20px 22px 18px 74px;
  background: rgba(14, 23, 48, 0.72);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(255, 159, 69, 0.45);
  border-radius: 14px;
}

.page-contact .pc-step:hover {
  border-left-color: var(--orange);
}

.page-contact .pc-step__num {
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--orange);
}

.page-contact .pc-step__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.page-contact .pc-step__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.78);
}

.page-contact .pc-step__more {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.page-contact .pc-step__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--cyan);
}

.page-contact .pc-step__more summary::-webkit-details-marker {
  display: none;
}

.page-contact .pc-step__more summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--orange);
}

.page-contact .pc-step__more[open] summary::before {
  content: "–";
}

.page-contact .pc-step__more p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(243, 240, 232, 0.74);
}

.page-contact .pc-steps__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-contact .pc-media {
  margin: 0;
  border: 1px solid var(--pc-edge);
  border-radius: 16px;
  overflow: hidden;
}

.page-contact .pc-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .pc-template {
  padding: 16px 18px;
  background: rgba(139, 92, 246, 0.09);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 14px;
}

.page-contact .pc-template summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
}

.page-contact .pc-template summary::-webkit-details-marker {
  display: none;
}

.page-contact .pc-template summary::after {
  content: " ↓";
  color: var(--cyan);
}

.page-contact .pc-template[open] summary::after {
  content: " ↑";
}

.page-contact .pc-template__body {
  margin: 14px 0 0;
  padding: 14px;
  background: rgba(7, 11, 24, 0.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(243, 240, 232, 0.88);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 客服渠道 ---------- */
.page-contact .pc-channels {
  padding: var(--pc-block) 0;
  background: linear-gradient(180deg, rgba(14, 23, 48, 0.92), rgba(7, 11, 24, 0.96));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-contact .pc-channels__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: center;
}

.page-contact .pc-channels__media {
  margin: 0;
  border: 1px solid var(--pc-edge);
  border-radius: 18px;
  overflow: hidden;
}

.page-contact .pc-channels__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .pc-channels__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.5rem, 3vw, 2.1rem) * var(--scale));
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-contact .pc-channels__list {
  margin: 18px 0 0;
}

.page-contact .pc-channels__row {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.page-contact .pc-channels__row dt {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--rock);
}

.page-contact .pc-channels__row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone);
}

.page-contact .pc-channels__row dd a {
  color: var(--cyan);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.page-contact .pc-channels__row dd a:hover {
  color: var(--orange);
}

.page-contact .pc-channels__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: rgba(111, 163, 111, 0.1);
  border-left: 2px solid var(--moss);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.86);
}

/* ---------- 咨询范围 ---------- */
.page-contact .pc-scope {
  padding: var(--pc-block) 0;
}

.page-contact .pc-scope__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-contact .pc-scope__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: rgba(14, 23, 48, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.page-contact .pc-scope__item h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.page-contact .pc-scope__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-scope__item .tag {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 合作 ---------- */
.page-contact .pc-coop {
  padding: var(--pc-block) 0;
}

.page-contact .pc-coop__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: start;
}

.page-contact .pc-coop__title {
  margin: 12px 0 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.5rem, 3.2vw, 2.3rem) * var(--scale));
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.page-contact .pc-coop__lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.8);
}

.page-contact .pc-coop__points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .pc-coop__points li {
  padding-left: 16px;
  border-left: 2px solid rgba(61, 245, 230, 0.35);
  font-size: 15px;
  line-height: 1.78;
  color: rgba(243, 240, 232, 0.78);
}

.page-contact .pc-coop__points strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  color: var(--bone);
}

.page-contact .pc-coop__topic {
  padding: 24px;
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.2), rgba(7, 11, 24, 0.92));
  border: 1px solid rgba(139, 92, 246, 0.44);
  border-radius: 18px;
}

.page-contact .pc-coop__topic-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-contact .pc-coop__topic-line {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: rgba(7, 11, 24, 0.82);
  border: 1px dashed rgba(61, 245, 230, 0.42);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--bone);
  overflow-wrap: anywhere;
}

.page-contact .pc-coop__topic-hint {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-coop__topic .btn {
  margin-top: 20px;
  text-decoration: none;
}

/* ---------- 处理进度 ---------- */
.page-contact .pc-flow {
  padding: var(--pc-block) 0;
}

.page-contact .pc-flow__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: start;
}

.page-contact .pc-flow__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.4rem, 2.8vw, 2rem) * var(--scale));
  font-weight: 900;
  line-height: 1.3;
}

.page-contact .pc-flow__lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.page-contact .pc-flow__item {
  position: relative;
  padding-left: 30px;
}

.page-contact .pc-flow__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: -20px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 159, 69, 0.6), rgba(255, 159, 69, 0.04));
}

.page-contact .pc-flow__item:last-child::before {
  display: none;
}

.page-contact .pc-flow__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--ink);
}

.page-contact .pc-flow__item h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--bone);
}

.page-contact .pc-flow__item p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(243, 240, 232, 0.76);
}

/* ---------- 答疑引导 ---------- */
.page-contact .pc-help {
  padding: var(--pc-block) 0;
  background: rgba(14, 23, 48, 0.62);
  border-top: 1px solid var(--line);
}

.page-contact .pc-help__grid {
  display: grid;
  gap: var(--pc-gap);
  align-items: center;
}

.page-contact .pc-help__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(clamp(1.4rem, 2.8vw, 2rem) * var(--scale));
  font-weight: 900;
  line-height: 1.3;
}

.page-contact .pc-help__lede {
  margin: 14px 0 22px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(243, 240, 232, 0.76);
}

.page-contact .pc-help__intro .btn {
  text-decoration: none;
}

.page-contact .pc-help__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .pc-help__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(7, 11, 24, 0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  color: var(--bone);
  text-decoration: none;
}

.page-contact .pc-help__links a::after {
  content: "→";
  color: var(--cyan);
  flex: none;
}

.page-contact .pc-help__links a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-contact .pc-channels__row {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
  }

  .page-contact .pc-scope__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 980px) {
  .page-contact .pc-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-contact .pc-steps__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-contact .pc-channels__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-contact .pc-coop__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-contact .pc-flow__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-contact .pc-help__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (min-width: 1180px) {
  .page-contact .pc-scope__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 28px;
  }

  .page-contact .pc-scope__item:nth-child(2),
  .page-contact .pc-scope__item:nth-child(5) {
    transform: translateY(26px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .pc-hero__title {
    transform: none;
  }

  .page-contact .pc-scope__item:nth-child(2),
  .page-contact .pc-scope__item:nth-child(5) {
    transform: none;
  }
}