.page-contact {
  --pc-line: rgba(6, 24, 38, 0.16);
  --pc-line-light: rgba(245, 247, 238, 0.2);
  --pc-soft: #41525f;
  background: var(--chalk);
  color: var(--night);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.page-contact .shell {
  position: relative;
}

/* 面包屑 */
.page-contact .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
  padding-bottom: clamp(18px, 3vw, 28px);
}

.page-contact .breadcrumbs__link {
  color: var(--volt);
  text-decoration: none;
}

.page-contact .breadcrumbs__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-contact .breadcrumbs__sep {
  color: var(--steel);
}

.page-contact .breadcrumbs__current {
  color: var(--chalk);
}

/* 首屏 */
.pc-hero {
  position: relative;
  background: linear-gradient(160deg, var(--night) 0%, #04121d 62%, var(--ink) 100%);
  color: var(--chalk);
  padding: clamp(20px, 4vw, 32px) 0 clamp(40px, 7vw, 80px);
  overflow: hidden;
}

.pc-hero__net {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(245, 247, 238, 0.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(245, 247, 238, 0.07) 0 1px, transparent 1px 64px);
  mask-image: linear-gradient(200deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 78%);
  pointer-events: none;
}

.pc-hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: 8%;
  width: 46%;
  height: 220%;
  background: linear-gradient(180deg, rgba(11, 122, 59, 0.42), rgba(11, 122, 59, 0));
  transform: rotate(14deg) skewY(-6deg);
  transform-origin: top right;
  pointer-events: none;
}

.pc-hero__grid {
  position: relative;
  display: grid;
  gap: clamp(26px, 5vw, 48px);
}

.pc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--volt);
  text-transform: uppercase;
}

.pc-kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--volt);
}

.pc-title {
  margin: 14px 0 0;
  font-size: clamp(30px, 6.4vw, 56px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.pc-lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.78;
  color: var(--mist);
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.page-contact .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.page-contact .btn--volt {
  background: var(--volt);
  color: var(--ink);
}

.page-contact .btn--volt:hover {
  background: var(--chalk);
}

.page-contact .btn--ghost {
  border-color: var(--pc-line-light);
  color: var(--chalk);
  background: transparent;
}

.page-contact .btn--ghost:hover {
  border-color: var(--volt);
  color: var(--volt);
}

.pc-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--volt);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 255, 62, 0.5);
  padding-bottom: 2px;
}

.pc-jump:hover {
  color: var(--chalk);
  border-bottom-color: var(--chalk);
}

.pc-hero__side {
  display: grid;
  gap: 18px;
  align-content: start;
}

/* 联系信息板 */
.pc-board {
  background: linear-gradient(180deg, rgba(11, 122, 59, 0.26) 0%, rgba(3, 7, 10, 0.9) 72%);
  border: 1px solid var(--pc-line-light);
  border-top: 3px solid var(--volt);
  padding: clamp(18px, 3.2vw, 28px);
}

.pc-board__row + .pc-board__row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--pc-line-light);
}

.pc-board__label {
  display: block;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
}

.pc-board__value {
  display: block;
  margin-top: 8px;
  font-family: var(--font-num);
  font-size: clamp(19px, 4.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--chalk);
  text-decoration: none;
  word-break: break-all;
  letter-spacing: 0.01em;
}

.pc-board__value:hover {
  color: var(--volt);
}

.pc-board__addr {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mist);
}

.pc-board__note {
  margin: 20px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--volt);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--mist);
}

/* 图片容器 */
.pc-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--pc-line-light);
  background: var(--ink);
  overflow: hidden;
}

.pc-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.pc-figure__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9px 12px;
  background: rgba(3, 7, 10, 0.84);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--mist);
}

.pc-figure--light {
  border-color: var(--pc-line);
}

/* 章节带 */
.pc-band {
  padding: clamp(38px, 6vw, 78px) 0;
}

.pc-band--chalk {
  background: var(--chalk);
  color: var(--night);
}

.pc-band--night {
  background: var(--night);
  color: var(--chalk);
}

.pc-band--board {
  background: linear-gradient(180deg, var(--board) 0%, #0d2c45 100%);
  color: var(--chalk);
}

.pc-band--net {
  position: relative;
}

.pc-band--net::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(245, 247, 238, 0.06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(245, 247, 238, 0.06) 0 1px, transparent 1px 48px);
  pointer-events: none;
}

.pc-band > .shell {
  position: relative;
}

/* 章节标题 */
.pc-head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pc-line);
  margin-bottom: clamp(22px, 3.6vw, 34px);
}

.pc-head__index {
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--turf);
  text-transform: uppercase;
}

.pc-head__title {
  margin: 0;
  font-size: clamp(23px, 3.8vw, 34px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.pc-head__note {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--pc-soft);
}

.pc-band--night .pc-head,
.pc-band--board .pc-head {
  border-bottom-color: var(--pc-line-light);
}

.pc-band--night .pc-head__index,
.pc-band--board .pc-head__index {
  color: var(--volt);
}

.pc-band--night .pc-head__note,
.pc-band--board .pc-head__note {
  color: var(--mist);
}

/* 纠错步骤 */
.pc-steps {
  display: grid;
  gap: 0;
}

.pc-step {
  position: relative;
  padding: 20px 0 22px;
  border-top: 1px solid var(--pc-line);
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

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

.pc-step:hover {
  border-left-color: var(--turf);
  background: rgba(11, 122, 59, 0.05);
  padding-left: 14px;
}

.pc-step__num {
  display: block;
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--turf);
  letter-spacing: 0.02em;
}

.pc-step__title {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--night);
}

.pc-step__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--pc-soft);
}

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

.pc-step__more summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--turf-deep);
}

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

.pc-step__more summary::before {
  content: "＋ ";
  font-family: var(--font-num);
  color: var(--turf);
}

.pc-step__more[open] summary::before {
  content: "－ ";
}

.pc-step__more summary:hover {
  color: var(--turf);
}

.pc-step__more ul {
  margin: 6px 0 4px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.pc-step__more li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pc-soft);
}

.pc-alert {
  display: flex;
  gap: 10px;
  margin: 24px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--signal);
  background: rgba(255, 90, 54, 0.09);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--night);
}

.pc-alert::before {
  content: "!";
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--signal);
}

/* 两栏对照 */
.pc-split {
  display: grid;
  gap: clamp(24px, 4vw, 42px);
}

.pc-sub {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--volt);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pc-line-light);
}

.pc-sub--gap {
  margin-top: 30px;
}

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

.pc-list li {
  border-left: 2px solid var(--steel);
  padding-left: 14px;
}

.pc-list--volt li {
  border-left-color: var(--signal);
}

.pc-list strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--chalk);
  margin-bottom: 4px;
}

.pc-list span {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.pc-inline-link {
  color: var(--volt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pc-inline-link:hover {
  color: var(--chalk);
}

.pc-split__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.pc-side-note {
  margin: 0;
  padding: 14px 16px;
  background: rgba(3, 7, 10, 0.32);
  border-left: 2px solid var(--volt);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

/* 回复时间 */
.pc-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.pc-stat {
  border-left: 3px solid var(--turf);
  padding-left: 14px;
}

.pc-stat__num {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--volt);
}

.pc-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--mist);
}

.pc-clock {
  border: 1px solid var(--pc-line-light);
  background: rgba(18, 58, 90, 0.42);
  padding: 14px 16px 12px;
}

.pc-clock__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.pc-clock__scale {
  position: relative;
  height: 32px;
  margin-top: 10px;
  border-bottom: 1px solid var(--pc-line-light);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(245, 247, 238, 0.42) 0 1px,
    transparent 1px 4.1667%
  );
}

.pc-clock__band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--turf) 0%, var(--volt) 100%);
}

.pc-note-line {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.78;
  color: var(--mist);
}

.pc-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-flow li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--pc-line-light);
}

.pc-flow li:first-child {
  border-top: 1px dashed var(--pc-line-light);
}

.pc-flow b {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  color: var(--volt);
  letter-spacing: 0.04em;
}

.pc-flow span {
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist);
}

/* 自助入口 */
.pc-shortcuts {
  display: grid;
  border-top: 1px solid var(--pc-line);
}

.pc-shortcut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 6px;
  border-bottom: 1px solid var(--pc-line);
  text-decoration: none;
  color: var(--night);
  transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.pc-shortcut:hover {
  background: rgba(11, 122, 59, 0.08);
  padding-left: 14px;
}

.pc-shortcut__name {
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.pc-shortcut__desc {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--pc-soft);
}

.pc-shortcut__go {
  flex: none;
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  color: var(--turf);
}

.pc-shortcut:hover .pc-shortcut__go {
  color: var(--signal);
}

/* 响应式 */
@media (min-width: 620px) {
  .pc-stats {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .pc-shortcuts {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
  }
}

@media (min-width: 860px) {
  .pc-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: start;
  }

  .pc-split {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: start;
  }

  .pc-split--reverse .pc-split__main {
    order: 1;
  }

  .pc-steps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
  }

  .pc-step {
    border-left: 1px solid var(--pc-line);
    padding: 22px 0 24px 18px;
  }

  .pc-step:hover {
    padding-left: 18px;
  }

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

@media (min-width: 1080px) {
  .pc-board__value {
    font-size: 27px;
  }

  .pc-shortcut {
    padding: 20px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .btn,
  .pc-step,
  .pc-shortcut {
    transition: none;
  }
}


<main id="main-content" class="page-contact">
  <section class="pc-hero">
    <div class="pc-hero__net" aria-hidden="true"></div>
    <div class="shell">
      <nav class="breadcrumbs" aria-label="面包屑">
        <a class="breadcrumbs__link" href="/">首页</a>
        <span class="breadcrumbs__sep">/</span>
        <span class="breadcrumbs__current">联系与纠错</span>
      </nav>
      <div class="pc-hero__grid">
        <div class="pc-hero__lead">
          <p class="pc-kicker">联系与纠错</p>
          <h1 class="pc-title">比分写错了、想给线索，都找这里</h1>
          <p class="pc-lead">趣体育的客服通道按需求分开走：比分与阵容有问题走纠错，手里有赛程和现场消息走线索提交，做赛事内容与数据协作走合作沟通。写信或直接拨号，工作时间内会有人接。</p>
          <div class="pc-actions">
            <a class="btn btn--volt" href="mailto:info@sports-quti.com.cn">发邮件给客服</a>
            <a class="btn btn--ghost" href="tel:18640845642">拨打电话</a>
            <a class="pc-jump" href="#correction">看纠错怎么提<span aria-hidden="true">↓</span></a>
          </div>
        </div>
        <div class="pc-hero__side">
          <div class="pc-board">
            <div class="pc-board__row">
              <span class="pc-board__label">客服邮箱</span>
              <a class="pc-board__value" href="mailto:info@sports-quti.com.cn">info@sports-quti.com.cn</a>
            </div>
            <div class="pc-board__row">
              <span class="pc-board__label">联系电话</span>
              <a class="pc-board__value" href="tel:18640845642">18640845642</a>
            </div>
            <div class="pc-board__row">
              <span class="pc-board__label">联系地址</span>
              <span class="pc-board__addr">四川省成都市武侯区天府大道北段666号</span>
            </div>
            <p class="pc-board__note">该邮箱为站点客服邮箱，工作日 9:00–18:00 内回复；赛事数据纠错请附截图与场次链接。</p>
          </div>
          <figure class="pc-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面上摊开的场次记录、手机与耳机，夜赛灯光从侧面照进来" decoding="async">
            <figcaption class="pc-figure__cap">一份截图、一条链接、两句说明，往往就决定修正的速度</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="pc-band pc-band--chalk" id="correction">
    <div class="shell">
      <div class="pc-head" data-reveal>
        <span class="pc-head__index">01 / 纠错流程</span>
        <h2 class="pc-head__title">数据纠错怎么提交</h2>
        <p class="pc-head__note">材料一次给全，比分、节次和阵容的修正就能赶上下一轮更新批次。</p>
      </div>
      <div class="pc-steps">
        <article class="pc-step" data-reveal>
          <span class="pc-step__num">01</span>
          <h3 class="pc-step__title">截下出错的那一块</h3>
          <p class="pc-step__text">比分、半场或节次、技术统计哪一处不对，就截哪一处，连同你看到的原值一起发来，比纯文字描述省一半沟通。</p>
          <details class="pc-step__more">
            <summary>截图里最好带上</summary>
            <ul>
              <li>出错的具体字段，例如第三节比分或首发名单</li>
              <li>页面上的球队名与轮次</li>
              <li>你认为正确的结果</li>
            </ul>
          </details>
        </article>
        <article class="pc-step" data-reveal>
          <span class="pc-step__num">02</span>
          <h3 class="pc-step__title">附上场次链接</h3>
          <p class="pc-step__text">同一轮常有名称相近的对阵，一条场次链接能直接定位到档案，避免把不同赛季的两场球混在一起处理。</p>
          <details class="pc-step__more">
            <summary>没有链接时怎么写</summary>
            <ul>
              <li>写清项目、联赛名称、赛季阶段与轮次</li>
              <li>写清主客队与完赛比分</li>
              <li>备注比赛日期所在的周末或赛段</li>
            </ul>
          </details>
        </article>
        <article class="pc-step" data-reveal>
          <span class="pc-step__num">03</span>
          <h3 class="pc-step__title">等下一轮更新</h3>
          <p class="pc-step__text">收到后先判定属于赛果、复盘、阵容还是技术统计，再交给对应的编辑。站点数据每72小时核对一次更新，修正随下一个批次生效。</p>
          <details class="pc-step__more">
            <summary>什么情况会回信再问</summary>
            <ul>
              <li>截图与场次链接指向两场不同比赛</li>
              <li>你提供的结果存在多个版本</li>
              <li>同一处错误在多个联赛档案里同时出现</li>
            </ul>
          </details>
        </article>
      </div>
      <p class="pc-alert">同一处错误发一次就够。已经提交过的场次会跟着批次一起走，重复提交反而会拖慢分拣。</p>
    </div>
  </section>

  <section class="pc-band pc-band--board pc-band--net">
    <div class="shell">
      <div class="pc-head" data-reveal>
        <span class="pc-head__index">02 / 线索与合作</span>
        <h2 class="pc-head__title">赛事线索与内容合作</h2>
        <p class="pc-head__note">赛事运营机构、球迷社区和媒体编辑，都可以从这里把消息递进来。</p>
      </div>
      <div class="pc-split">
        <div class="pc-split__main">
          <h3 class="pc-sub">可以递进来的线索</h3>
          <ul class="pc-list">
            <li>
              <strong>赛程与场地变动</strong>
              <span>临时改期、更换场地、开赛时间调整，提前告知能让当天的场次记录跟上现场。</span>
            </li>
            <li>
              <strong>阵容与伤停信息</strong>
              <span>首发变更、临场替换、赛前确认的伤停名单，都能成为阵容轮换判断的依据。</span>
            </li>
            <li>
              <strong>现场观察与看台细节</strong>
              <span>关键节点的现场情况、换人前后的阵型变化、看台上的助威与情绪，都是很好用的观察素材。</span>
            </li>
          </ul>
          <h3 class="pc-sub pc-sub--gap">可以谈的合作方向</h3>
          <ul class="pc-list pc-list--volt">
            <li>
              <strong>赛事数据包</strong>
              <span>为赛事运营机构整理场次档案与核心指标，方便对外发布与赛后通报。</span>
            </li>
            <li>
              <strong>复盘内容协作</strong>
              <span>与球迷社区、媒体编辑共同产出赛后复盘与数据观察，站点每赛季发布约 1,800 篇。</span>
            </li>
            <li>
              <strong>专题与栏目共建</strong>
              <span>围绕联赛、杯赛或历史交锋做长期栏目，内容在<a class="pc-inline-link" href="/journal/">赛场日志</a>与<a class="pc-inline-link" href="/catalog/">数据工具栏</a>之间互相引路。</span>
            </li>
          </ul>
        </div>
        <div class="pc-split__side">
          <figure class="pc-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="球场入口与看台通道的斜构图，灯光下通向观众席" loading="lazy" decoding="async">
            <figcaption class="pc-figure__cap">从通道口到看台，现场消息常常比通报早一步</figcaption>
          </figure>
          <p class="pc-side-note">写信时在主题里注明“赛事线索”或“内容合作”，正文写清机构名称、联赛与项目、想推进的事情，再留下方便回复的渠道即可。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="pc-band pc-band--night">
    <div class="shell">
      <div class="pc-head" data-reveal>
        <span class="pc-head__index">03 / 回复时间</span>
        <h2 class="pc-head__title">什么时候能收到回音</h2>
        <p class="pc-head__note">工作时间内收到当天分拣，常见的查询与报错多数在半天内答复。</p>
      </div>
      <div class="pc-split pc-split--reverse">
        <div class="pc-split__main">
          <div class="pc-stats">
            <div class="pc-stat">
              <span class="pc-stat__num">9:00–18:00</span>
              <span class="pc-stat__label">工作日在线时段</span>
            </div>
            <div class="pc-stat">
              <span class="pc-stat__num">4</span>
              <span class="pc-stat__label">小时，常见问题平均回复时长</span>
            </div>
          </div>
          <div class="pc-clock" aria-hidden="true">
            <div class="pc-clock__label">
              <span>09:00 接班</span>
              <span>18:00 收班</span>
            </div>
            <div class="pc-clock__scale">
              <span class="pc-clock__band"></span>
            </div>
          </div>
          <p class="pc-note-line">周末与节假日收到的邮件，会在下一个工作日处理，赛事线索与报错不会堆着不管。</p>
        </div>
        <div class="pc-split__side">
          <h3 class="pc-sub">从收件到有结果</h3>
          <ol class="pc-flow">
            <li><b>01</b><span>分拣：先看是查数据、报错误，还是谈合作，交到对应的人手上。</span></li>
            <li><b>02</b><span>判断：赛果与阵容类转给赛事编辑，指标与档案类转给标注与核对岗。</span></li>
            <li><b>03</b><span>处理：确认后进入下一轮更新批次，或先补一份说明回给你。</span></li>
            <li><b>04</b><span>回信：告知处理结果；需要补材料的，写清缺的是哪一项。</span></li>
          </ol>
          <p class="pc-note-line">客服邮件与纠错记录保存 24 个月，超期后做匿名化处理，具体情况可看<a class="pc-inline-link" href="/personal-data/">个人信息说明</a>。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="pc-band pc-band--chalk">
    <div class="shell">
      <div class="pc-head" data-reveal>
        <span class="pc-head__index">04 / 先看这里</span>
        <h2 class="pc-head__title">有些问题，翻两页就有答案</h2>
        <p class="pc-head__note">查询方法、联赛对照、内容引用规则，下面几处已经写得很细，看完再写信效率更高。</p>
      </div>
      <div class="pc-shortcuts">
        <a class="pc-shortcut" href="/guide/">
          <span>
            <span class="pc-shortcut__name">使用指南</span>
            <span class="pc-shortcut__desc">怎么按球队、球员、赛季检索，对照视图怎么看，纠错该带哪些材料。</span>
          </span>
          <span class="pc-shortcut__go" aria-hidden="true">→</span>
        </a>
        <a class="pc-shortcut" href="/catalog/">
          <span>
            <span class="pc-shortcut__name">数据工具栏</span>
            <span class="pc-shortcut__desc">多个联赛同屏对照，12 项核心指标与历史交锋时间轴都在这里。</span>
          </span>
          <span class="pc-shortcut__go" aria-hidden="true">→</span>
        </a>
        <a class="pc-shortcut" href="/journal/">
          <span>
            <span class="pc-shortcut__name">赛场日志</span>
            <span class="pc-shortcut__desc">赛后复盘与数据观察，比分走势、关键节点、阵容轮换都拆开写。</span>
          </span>
          <span class="pc-shortcut__go" aria-hidden="true">→</span>
        </a>
        <a class="pc-shortcut" href="/usage/">
          <span>
            <span class="pc-shortcut__name">使用规范</span>
            <span class="pc-shortcut__desc">数据时效、内容引用范围、外部链接与纠错信息的使用规则。</span>
          </span>
          <span class="pc-shortcut__go" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --pc-line: rgba(6, 24, 38, 0.16);
  --pc-line-light: rgba(245, 247, 238, 0.2);
  --pc-soft: #41525f;
  background: var(--chalk);
  color: var(--night);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.page-contact .shell {
  position: relative;
}

.page-contact .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: clamp(18px, 3vw, 28px);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-contact .breadcrumbs__link {
  color: var(--volt);
  text-decoration: none;
}

.page-contact .breadcrumbs__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-contact .breadcrumbs__sep {
  color: var(--steel);
}

.page-contact .breadcrumbs__current {
  color: var(--chalk);
}

.pc-hero {
  position: relative;
  padding: clamp(20px, 4vw, 32px) 0 clamp(40px, 7vw, 80px);
  background: linear-gradient(160deg, var(--night) 0%, #04121d 62%, var(--ink) 100%);
  color: var(--chalk);
  overflow: hidden;
}

.pc-hero__net {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(245, 247, 238, 0.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(245, 247, 238, 0.07) 0 1px, transparent 1px 64px);
  mask-image: linear-gradient(200deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 78%);
  pointer-events: none;
}

.pc-hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: 8%;
  width: 46%;
  height: 220%;
  background: linear-gradient(180deg, rgba(11, 122, 59, 0.42), rgba(11, 122, 59, 0));
  transform: rotate(14deg) skewY(-6deg);
  transform-origin: top right;
  pointer-events: none;
}

.pc-hero__grid {
  position: relative;
  display: grid;
  gap: clamp(26px, 5vw, 48px);
}

.pc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--volt);
}

.pc-kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--volt);
}

.pc-title {
  margin: 14px 0 0;
  font-size: clamp(30px, 6.4vw, 56px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.pc-lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.78;
  color: var(--mist);
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.page-contact .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.page-contact .btn--volt {
  background: var(--volt);
  color: var(--ink);
}

.page-contact .btn--volt:hover {
  background: var(--chalk);
}

.page-contact .btn--ghost {
  border-color: var(--pc-line-light);
  background: transparent;
  color: var(--chalk);
}

.page-contact .btn--ghost:hover {
  border-color: var(--volt);
  color: var(--volt);
}

.pc-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--volt);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 255, 62, 0.5);
}

.pc-jump:hover {
  color: var(--chalk);
  border-bottom-color: var(--chalk);
}

.pc-hero__side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.pc-board {
  padding: clamp(18px, 3.2vw, 28px);
  background: linear-gradient(180deg, rgba(11, 122, 59, 0.26) 0%, rgba(3, 7, 10, 0.9) 72%);
  border: 1px solid var(--pc-line-light);
  border-top: 3px solid var(--volt);
}

.pc-board__row + .pc-board__row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--pc-line-light);
}

.pc-board__label {
  display: block;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}

.pc-board__value {
  display: block;
  margin-top: 8px;
  font-family: var(--font-num);
  font-size: clamp(19px, 4.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--chalk);
  text-decoration: none;
  word-break: break-all;
}

.pc-board__value:hover {
  color: var(--volt);
}

.pc-board__addr {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mist);
}

.pc-board__note {
  margin: 20px 0 0;
  padding-left: 12px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--mist);
  border-left: 2px solid var(--volt);
}

.pc-figure {
  position: relative;
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--pc-line-light);
  overflow: hidden;
}

.pc-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.pc-figure__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--mist);
  background: rgba(3, 7, 10, 0.84);
}

.pc-band {
  padding: clamp(38px, 6vw, 78px) 0;
}

.pc-band--chalk {
  background: var(--chalk);
  color: var(--night);
}

.pc-band--night {
  background: var(--night);
  color: var(--chalk);
}

.pc-band--board {
  background: linear-gradient(180deg, var(--board) 0%, #0d2c45 100%);
  color: var(--chalk);
}

.pc-band--net {
  position: relative;
}

.pc-band--net::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(245, 247, 238, 0.06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(245, 247, 238, 0.06) 0 1px, transparent 1px 48px);
  pointer-events: none;
}

.pc-band > .shell {
  position: relative;
}

.pc-head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(22px, 3.6vw, 34px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pc-line);
}

.pc-head__index {
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--turf);
}

.pc-head__title {
  margin: 0;
  font-size: clamp(23px, 3.8vw, 34px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.pc-head__note {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--pc-soft);
}

.pc-band--night .pc-head,
.pc-band--board .pc-head {
  border-bottom-color: var(--pc-line-light);
}

.pc-band--night .pc-head__index,
.pc-band--board .pc-head__index {
  color: var(--volt);
}

.pc-band--night .pc-head__note,
.pc-band--board .pc-head__note {
  color: var(--mist);
}

.pc-steps {
  display: grid;
  gap: 0;
}

.pc-step {
  position: relative;
  padding: 20px 0 22px;
  border-top: 1px solid var(--pc-line);
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

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

.pc-step:hover {
  padding-left: 14px;
  background: rgba(11, 122, 59, 0.05);
  border-left-color: var(--turf);
}

.pc-step__num {
  display: block;
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--turf);
}

.pc-step__title {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--night);
}

.pc-step__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--pc-soft);
}

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

.pc-step__more summary {
  padding: 10px 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--turf-deep);
  cursor: pointer;
  list-style: none;
}

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

.pc-step__more summary::before {
  content: "＋ ";
  font-family: var(--font-num);
  color: var(--turf);
}

.pc-step__more[open] summary::before {
  content: "－ ";
}

.pc-step__more summary:hover {
  color: var(--turf);
}

.pc-step__more ul {
  margin: 6px 0 4px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.pc-step__more li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pc-soft);
}

.pc-alert {
  display: flex;
  gap: 10px;
  margin: 24px 0 0;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--night);
  background: rgba(255, 90, 54, 0.09);
  border-left: 4px solid var(--signal);
}

.pc-alert::before {
  content: "!";
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--signal);
}

.pc-split {
  display: grid;
  gap: clamp(24px, 4vw, 42px);
}

.pc-sub {
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--volt);
  border-bottom: 1px solid var(--pc-line-light);
}

.pc-sub--gap {
  margin-top: 30px;
}

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

.pc-list li {
  padding-left: 14px;
  border-left: 2px solid var(--steel);
}

.pc-list--volt li {
  border-left-color: var(--signal);
}

.pc-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--chalk);
}

.pc-list span {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.pc-inline-link {
  color: var(--volt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pc-inline-link:hover {
  color: var(--chalk);
}

.pc-split__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.pc-side-note {
  margin: 0;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
  background: rgba(3, 7, 10, 0.32);
  border-left: 2px solid var(--volt);
}

.pc-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.pc-stat {
  padding-left: 14px;
  border-left: 3px solid var(--turf);
}

.pc-stat__num {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--volt);
}

.pc-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mist);
}

.pc-clock {
  padding: 14px 16px 12px;
  background: rgba(18, 58, 90, 0.42);
  border: 1px solid var(--pc-line-light);
}

.pc-clock__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.pc-clock__scale {
  position: relative;
  height: 32px;
  margin-top: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(245, 247, 238, 0.42) 0 1px,
    transparent 1px 4.1667%
  );
  border-bottom: 1px solid var(--pc-line-light);
}

.pc-clock__band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--turf) 0%, var(--volt) 100%);
}

.pc-note-line {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.78;
  color: var(--mist);
}

.pc-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-flow li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--pc-line-light);
}

.pc-flow li:first-child {
  border-top: 1px dashed var(--pc-line-light);
}

.pc-flow b {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--volt);
}

.pc-flow span {
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist);
}

.pc-shortcuts {
  display: grid;
  border-top: 1px solid var(--pc-line);
}

.pc-shortcut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 6px;
  color: var(--night);
  text-decoration: none;
  border-bottom: 1px solid var(--pc-line);
  transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.pc-shortcut:hover {
  padding-left: 14px;
  background: rgba(11, 122, 59, 0.08);
}

.pc-shortcut__name {
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.pc-shortcut__desc {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--pc-soft);
}

.pc-shortcut__go {
  flex: none;
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  color: var(--turf);
}

.pc-shortcut:hover .pc-shortcut__go {
  color: var(--signal);
}

@media (min-width: 620px) {
  .pc-stats {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .pc-shortcuts {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
  }
}

@media (min-width: 860px) {
  .pc-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: start;
  }

  .pc-split {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: start;
  }

  .pc-split--reverse .pc-split__main {
    order: 1;
  }

  .pc-steps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
  }

  .pc-step {
    padding: 22px 0 24px 18px;
    border-left: 1px solid var(--pc-line);
  }

  .pc-step:hover {
    padding-left: 18px;
  }
}

@media (min-width: 1080px) {
  .pc-board__value {
    font-size: 27px;
  }

  .pc-shortcut {
    padding: 20px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .btn,
  .pc-step,
  .pc-shortcut {
    transition: none;
  }
}