.page-contact {
  --ct-r: 5px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

/* ---------- 面包屑 ---------- */
.page-contact .breadcrumb {
  padding-block: clamp(14px, 2.4vw, 22px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

.page-contact .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .breadcrumb a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--line-gold);
}

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

.page-contact .breadcrumb li[aria-current] {
  color: var(--ink-soft);
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(24px, 5vw, 56px) clamp(18px, 3vw, 28px);
  color: var(--paper);
  background:
    radial-gradient(120% 95% at 90% -12%, rgba(217, 164, 65, .3), transparent 62%),
    linear-gradient(158deg, var(--night) 0%, var(--green) 56%, var(--green-mid) 100%);
}

.page-contact .ct-hero__inner {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
}

.page-contact .ct-hero__copy .kicker {
  color: var(--gold);
  letter-spacing: .18em;
}

.page-contact .ct-hero h1 {
  margin: 10px 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.85rem, 5.4vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: .02em;
  color: var(--paper-lift);
}

.page-contact .ct-hero__lead {
  margin: 0 0 14px;
  max-width: 46ch;
  font-size: clamp(.94rem, 1.6vw, 1.04rem);
  line-height: 1.72;
  color: rgba(244, 239, 230, .82);
}

.page-contact .ct-hero__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold-soft);
}

.page-contact .ct-hero__figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(240, 217, 168, .34);
  border-radius: var(--ct-r);
}

.page-contact .ct-hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) sepia(.12);
}

/* 服务时间刻度条 */
.page-contact .ct-hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: clamp(18px, 3vw, 28px);
  padding: 12px 16px;
  border: 1px solid rgba(240, 217, 168, .28);
  border-radius: 10px;
  background: rgba(11, 31, 27, .38);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold-soft);
}

.page-contact .ct-hours__day {
  color: var(--paper);
}

.page-contact .ct-hours__track {
  position: relative;
  flex: 1 1 100px;
  min-width: 80px;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(244, 239, 230, .18);
}

.page-contact .ct-hours__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--poplar));
}

.page-contact .ct-hours__time {
  color: var(--paper);
}

.page-contact .ct-hours__tz {
  color: rgba(244, 239, 230, .62);
}

/* ---------- 通用章节头 ---------- */
.page-contact .ct-head {
  max-width: 62ch;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.page-contact .ct-head .kicker {
  color: var(--poplar);
}

.page-contact .ct-head h2 {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-head__sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------- 三条通道 ---------- */
.page-contact .ct-channels {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-contact .ct-grid {
  display: grid;
  gap: 16px;
}

.page-contact .ct-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--ct-r);
  background: var(--paper-lift);
}

.page-contact .ct-card:nth-child(2) {
  border-top-color: var(--poplar);
}

.page-contact .ct-card:nth-child(3) {
  border-top-color: var(--blue);
}

.page-contact .ct-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--blue);
}

.page-contact .ct-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-card__value {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--poplar);
  background: var(--dusk);
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}

.page-contact .ct-card__desc {
  margin: 0;
  font-size: .9rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

.page-contact .ct-card__meta {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--blue);
}

/* ---------- 邮件问题 ---------- */
.page-contact .ct-mail {
  padding-block: clamp(34px, 6vw, 64px);
  background: var(--dusk);
}

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

.page-contact .ct-issue {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  background: var(--paper-lift);
}

.page-contact .ct-issue__idx {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}

.page-contact .ct-issue h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--green);
}

.page-contact .ct-issue p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------- 打电话前的准备 ---------- */
.page-contact .ct-prep {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-contact .ct-prep__inner {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
}

.page-contact .ct-prep__text .kicker {
  color: var(--poplar);
}

.page-contact .ct-prep__text h2 {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-prep__text p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-contact .ct-checklist {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-contact .ct-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
  line-height: 1.66;
  color: var(--ink-soft);
}

.page-contact .ct-check {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
}

.page-contact .ct-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--poplar);
}

.page-contact .ct-checklist strong {
  color: var(--green);
  font-weight: 600;
}

/* ---------- 回复节奏 ---------- */
.page-contact .ct-tempo {
  padding-bottom: clamp(34px, 6vw, 64px);
}

.page-contact .ct-tempo__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 42px);
  border-radius: var(--ct-r);
  background: linear-gradient(150deg, var(--green) 0%, var(--night) 100%);
  color: var(--paper);
}

.page-contact .ct-tempo__panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 46%;
  height: 180%;
  background: rgba(217, 164, 65, .1);
  transform: rotate(18deg);
  pointer-events: none;
}

.page-contact .ct-tempo__panel .kicker {
  color: var(--gold);
  letter-spacing: .18em;
}

.page-contact .ct-tempo__panel h2 {
  margin: 8px 0 clamp(16px, 2.6vw, 26px);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--paper-lift);
}

.page-contact .ct-tempo__list {
  display: grid;
  gap: 16px;
  margin: 0;
  position: relative;
}

.page-contact .ct-tempo__list > div {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, .18);
}

.page-contact .ct-tempo__list dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
}

.page-contact .ct-tempo__list dd {
  margin: 0;
  font-size: .93rem;
  line-height: 1.7;
  color: rgba(244, 239, 230, .86);
}

/* ---------- 地址与资料寄送 ---------- */
.page-contact .ct-post {
  padding-block: clamp(34px, 6vw, 64px);
  background: var(--dusk);
}

.page-contact .ct-post__inner {
  display: grid;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
}

.page-contact .ct-post__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ct-r);
}

.page-contact .ct-post__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.9) sepia(.08);
}

.page-contact .ct-post__copy .kicker {
  color: var(--poplar);
}

.page-contact .ct-post__copy h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-post__copy p {
  margin: 0 0 14px;
  max-width: 44ch;
  font-size: .95rem;
  line-height: 1.74;
  color: var(--ink-soft);
}

.page-contact .ct-post__note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--blue);
}

/* ---------- 合作与媒体 ---------- */
.page-contact .ct-coop {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-contact .ct-coop__inner {
  display: grid;
  gap: 22px;
}

.page-contact .ct-coop__inner .kicker {
  color: var(--poplar);
}

.page-contact .ct-coop h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-coop p {
  margin: 0 0 12px;
  max-width: 52ch;
  font-size: .95rem;
  line-height: 1.74;
  color: var(--ink-soft);
}

.page-contact .ct-coop__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-coop__tags li {
  padding: 8px 14px;
  border: 1px solid var(--line-gold);
  background: var(--paper-lift);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--green);
}

/* ---------- 相关入口 ---------- */
.page-contact .ct-next {
  padding-block: clamp(28px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.page-contact .ct-next h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-next p {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-contact .ct-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-contact .ct-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
  }

  .page-contact .ct-hero__figure {
    aspect-ratio: 4 / 3;
  }

  .page-contact .ct-tempo__list > div {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

@media (min-width: 860px) {
  .page-contact .ct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .page-contact .ct-card:nth-child(2) {
    margin-top: 14px;
  }

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

@media (min-width: 900px) {
  .page-contact .ct-prep__inner {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .page-contact .ct-post__inner {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .page-contact .ct-coop__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: start;
  }

  .page-contact .ct-coop__tags {
    flex-direction: column;
    align-items: flex-start;
  }
}


<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="ct-hero" aria-labelledby="ct-hero-title">
    <div class="container ct-hero__inner">
      <div class="ct-hero__copy" data-reveal>
        <p class="kicker">联系通道 / CONTACT</p>
        <h1 id="ct-hero-title">联系博奥看台，选对通道把问题说清</h1>
        <p class="ct-hero__lead">赛后数字对不上、V3 与 V4 显示不同、想确认案例合集走到了第几期，都可以直接找我们。工作日 10:00–19:00（北京时间），邮箱和电话这头都有人。</p>
        <p class="ct-hero__hint">邮箱与电话可直接选中复制，不必逐字敲。</p>
      </div>
      <figure class="ct-hero__figure">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="天山轮廓与暮色沙丘，低饱和沙金与墨绿调，作为联系通道首屏画面">
      </figure>
    </div>
    <div class="container">
      <div class="ct-hours" data-reveal>
        <span class="ct-hours__day">工作日</span>
        <span class="ct-hours__track" aria-hidden="true"><span class="ct-hours__fill"></span></span>
        <span class="ct-hours__time">10:00 — 19:00</span>
        <span class="ct-hours__tz">北京时间</span>
      </div>
    </div>
  </section>

  <section class="ct-channels" aria-labelledby="ct-channels-title">
    <div class="container">
      <div class="ct-head">
        <p class="kicker">通道索引</p>
        <h2 id="ct-channels-title">三条通道，先看用途再动手</h2>
        <p class="ct-head__sub">选对入口能省掉一轮来回：能附截图的走邮箱，一句话说得清的打电话，纸面材料走寄送。</p>
      </div>
      <div class="ct-grid">
        <article class="ct-card" data-reveal>
          <span class="ct-card__num">01 / MAIL</span>
          <h3 class="ct-card__title">客服邮箱</h3>
          <p class="ct-card__value">service@boao-login-sports.com.cn</p>
          <p class="ct-card__desc">适合要附截图、写清版本与期号的问题，也用于合作沟通和资料寄送前的确认。</p>
          <span class="ct-card__meta">工作日 10:00–19:00 回复</span>
        </article>
        <article class="ct-card" data-reveal>
          <span class="ct-card__num">02 / TEL</span>
          <h3 class="ct-card__title">客服电话</h3>
          <p class="ct-card__value">15533457926</p>
          <p class="ct-card__desc">适合一句话能说清的事，或邮件发出后想确认是否收到。手边备好球队名和期号再拨，沟通更顺。</p>
          <span class="ct-card__meta">工作日 10:00–19:00（北京时间）</span>
        </article>
        <article class="ct-card" data-reveal>
          <span class="ct-card__num">03 / POST</span>
          <h3 class="ct-card__title">联系地址</h3>
          <p class="ct-card__value">新疆省乌鲁木齐市天山区人民路138号</p>
          <p class="ct-card__desc">用于信件与资料寄送。寄出之前先发一封邮件到客服邮箱，把收件信息和资料形式定下来。</p>
          <span class="ct-card__meta">资料寄送专用</span>
        </article>
      </div>
    </div>
  </section>

  <section class="ct-mail" aria-labelledby="ct-mail-title">
    <div class="container">
      <div class="ct-head">
        <p class="kicker">写邮件的四类问题</p>
        <h2 id="ct-mail-title">把问题写成我们看得懂的样子</h2>
        <p class="ct-head__sub">同样一封信，附上截图和版本号，往往当天就能有答案。</p>
      </div>
      <ul class="ct-issues">
        <li class="ct-issue" data-reveal>
          <span class="ct-issue__idx" aria-hidden="true">A</span>
          <div>
            <h3>某场比赛的数字对不上</h3>
            <p>写明球队、赛季轮次和你看到的比分或时间轴，附一张截图。我们回你归档里的原始记录，并说明差异出在哪一处。</p>
          </div>
        </li>
        <li class="ct-issue" data-reveal>
          <span class="ct-issue__idx" aria-hidden="true">B</span>
          <div>
            <h3>V3 与 V4 显示不同</h3>
            <p>注明你打开的是哪个版本、用的设备与浏览器，把两边截图并排放进邮件，我们能直接定位问题出现在哪一层展示。</p>
          </div>
        </li>
        <li class="ct-issue" data-reveal>
          <span class="ct-issue__idx" aria-hidden="true">C</span>
          <div>
            <h3>案例合集期号与覆盖范围</h3>
            <p>说明想确认第几期、涉及哪支球队。我们回你这一期覆盖的球队与场次，方便你在做赛季复盘时直接引用。</p>
          </div>
        </li>
        <li class="ct-issue" data-reveal>
          <span class="ct-issue__idx" aria-hidden="true">D</span>
          <div>
            <h3>合作与内容沟通</h3>
            <p>写清机构类型、想推进的方向和大致时间安排。地方体育媒体、数据服务商与球队资料馆的来信，我们会转给对应同事。</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <section class="ct-prep" aria-labelledby="ct-prep-title">
    <div class="container ct-prep__inner">
      <div class="ct-prep__text">
        <p class="kicker">打电话前</p>
        <h2 id="ct-prep-title">手边备好四样东西</h2>
        <p>电话里最耗时间的往往是“哪一场、哪个版本”。把这四样放在屏幕上，几分钟就能把话说透。</p>
      </div>
      <ol class="ct-checklist">
        <li><span class="ct-check" aria-hidden="true"></span><span><strong>球队名称与赛季轮次</strong>——让我们直接定位到那一场，不用来回猜。</span></li>
        <li><span class="ct-check" aria-hidden="true"></span><span><strong>案例合集期号或 V4 版本号</strong>——同一个问题在不同期、不同版本里可能长得不一样。</span></li>
        <li><span class="ct-check" aria-hidden="true"></span><span><strong>一张截图</strong>——比分、关键事件时间轴或阵容名单，截到有数字的那一屏就够了。</span></li>
        <li><span class="ct-check" aria-hidden="true"></span><span><strong>一句话结论</strong>——你希望我们做什么：改展示、补记录，还是解释差异。</span></li>
      </ol>
    </div>
  </section>

  <section class="ct-tempo" aria-labelledby="ct-tempo-title">
    <div class="container">
      <div class="ct-tempo__panel">
        <p class="kicker">回复节奏</p>
        <h2 id="ct-tempo-title">什么时候能等到回音</h2>
        <dl class="ct-tempo__list">
          <div>
            <dt>工作日内</dt>
            <dd>收到的邮件按到达顺序回复，来电当场接起。多数问题在服务时段内就能给出结论。</dd>
          </div>
          <div>
            <dt>复杂问题</dt>
            <dd>涉及多场次、或需要把 V3 与 V4 两版数据摆在一起看的，我们在 2 个工作日内先回一条进度说明，再补齐结果。</dd>
          </div>
          <div>
            <dt>休赛期</dt>
            <dd>档案整理集中在每周两次，回复会稍慢一些，仍安排在 10:00–19:00 之间处理。</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <section class="ct-post" aria-labelledby="ct-post-title">
    <div class="container ct-post__inner">
      <figure class="ct-post__figure">
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" loading="lazy" decoding="async" alt="桌面上的信封、战报打印件与期号标签，侧光拍摄，用于资料寄送说明">
      </figure>
      <div class="ct-post__copy">
        <p class="kicker">信件与资料寄送</p>
        <h2 id="ct-post-title">寄之前，先发一封邮件</h2>
        <p>联系地址是新疆省乌鲁木齐市天山区人民路138号，用于信件与资料寄送。资料在路上要走几天，寄出前把清单发到客服邮箱，收件信息与资料形式确认好再让包裹出发，比寄错一次省事得多。</p>
        <p class="ct-post__note">纸质战报、期号清单与球队资料都可以寄；电子材料直接发邮箱更快。</p>
      </div>
    </div>
  </section>

  <section class="ct-coop" aria-labelledby="ct-coop-title">
    <div class="container ct-coop__inner">
      <div>
        <p class="kicker">合作与媒体</p>
        <h2 id="ct-coop-title">地方媒体、数据服务商与球队资料馆</h2>
        <p>目前与我们保持往来的有 14 家地方体育媒体、6 家数据服务商和 9 支球队资料馆，多数合作是从一封邮件开始的。</p>
        <p>写信到客服邮箱，说明机构名称、合作方向与时间安排：内容共建、赛季数据服务、资料互借，或者其他形式。我们看到后会转给对应同事，并回一个初步安排。</p>
      </div>
      <ul class="ct-coop__tags">
        <li>内容共建</li>
        <li>赛季数据服务</li>
        <li>资料互借</li>
        <li>案例交流</li>
      </ul>
    </div>
  </section>

  <section class="ct-next" aria-labelledby="ct-next-title">
    <div class="container">
      <h2 id="ct-next-title">还没到写信那一步？</h2>
      <p>订阅提醒、版本切换和小屏阅读的大半疑问，帮助中心里已经写清了。</p>
      <ul class="ct-next__links">
        <li><a class="btn btn--ghost" href="/help-center/">去帮助中心</a></li>
        <li><a class="btn btn--ghost" href="/platform/">看赛事订阅</a></li>
        <li><a class="btn btn--ghost" href="/data-privacy/">数据与隐私</a></li>
        <li><a class="btn btn--ghost" href="/notice/">访问须知</a></li>
        <li><a class="btn btn--dark" href="/">回看台首页</a></li>
      </ul>
    </div>
  </section>
</main>

.page-contact {
  --ct-r: 5px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

/* ---------- 面包屑 ---------- */
.page-contact .breadcrumb {
  padding-block: clamp(14px, 2.4vw, 22px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

.page-contact .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .breadcrumb a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--line-gold);
}

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

.page-contact .breadcrumb li[aria-current] {
  color: var(--ink-soft);
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(24px, 5vw, 56px) clamp(18px, 3vw, 28px);
  color: var(--paper);
  background:
    radial-gradient(120% 95% at 90% -12%, rgba(217, 164, 65, .3), transparent 62%),
    linear-gradient(158deg, var(--night) 0%, var(--green) 56%, var(--green-mid) 100%);
}

.page-contact .ct-hero__inner {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
}

.page-contact .ct-hero__copy .kicker {
  color: var(--gold);
  letter-spacing: .18em;
}

.page-contact .ct-hero h1 {
  margin: 10px 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.85rem, 5.4vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: .02em;
  color: var(--paper-lift);
}

.page-contact .ct-hero__lead {
  margin: 0 0 14px;
  max-width: 46ch;
  font-size: clamp(.94rem, 1.6vw, 1.04rem);
  line-height: 1.72;
  color: rgba(244, 239, 230, .82);
}

.page-contact .ct-hero__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold-soft);
}

.page-contact .ct-hero__figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(240, 217, 168, .34);
  border-radius: var(--ct-r);
}

.page-contact .ct-hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) sepia(.12);
}

/* 服务时间刻度条 */
.page-contact .ct-hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: clamp(18px, 3vw, 28px);
  padding: 12px 16px;
  border: 1px solid rgba(240, 217, 168, .28);
  border-radius: 10px;
  background: rgba(11, 31, 27, .38);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold-soft);
}

.page-contact .ct-hours__day {
  color: var(--paper);
}

.page-contact .ct-hours__track {
  position: relative;
  flex: 1 1 100px;
  min-width: 80px;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(244, 239, 230, .18);
}

.page-contact .ct-hours__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--poplar));
}

.page-contact .ct-hours__time {
  color: var(--paper);
}

.page-contact .ct-hours__tz {
  color: rgba(244, 239, 230, .62);
}

/* ---------- 通用章节头 ---------- */
.page-contact .ct-head {
  max-width: 62ch;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.page-contact .ct-head .kicker {
  color: var(--poplar);
}

.page-contact .ct-head h2 {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-head__sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------- 三条通道 ---------- */
.page-contact .ct-channels {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-contact .ct-grid {
  display: grid;
  gap: 16px;
}

.page-contact .ct-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--ct-r);
  background: var(--paper-lift);
}

.page-contact .ct-card:nth-child(2) {
  border-top-color: var(--poplar);
}

.page-contact .ct-card:nth-child(3) {
  border-top-color: var(--blue);
}

.page-contact .ct-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--blue);
}

.page-contact .ct-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-card__value {
  margin: 0;
  padding: 10px 12px;
  border-left: 2px solid var(--poplar);
  background: var(--dusk);
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}

.page-contact .ct-card__desc {
  margin: 0;
  font-size: .9rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

.page-contact .ct-card__meta {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--blue);
}

/* ---------- 邮件问题 ---------- */
.page-contact .ct-mail {
  padding-block: clamp(34px, 6vw, 64px);
  background: var(--dusk);
}

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

.page-contact .ct-issue {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  background: var(--paper-lift);
}

.page-contact .ct-issue__idx {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}

.page-contact .ct-issue h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--green);
}

.page-contact .ct-issue p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------- 打电话前的准备 ---------- */
.page-contact .ct-prep {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-contact .ct-prep__inner {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
}

.page-contact .ct-prep__text .kicker {
  color: var(--poplar);
}

.page-contact .ct-prep__text h2 {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-prep__text p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-contact .ct-checklist {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-contact .ct-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
  line-height: 1.66;
  color: var(--ink-soft);
}

.page-contact .ct-check {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
}

.page-contact .ct-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--poplar);
}

.page-contact .ct-checklist strong {
  color: var(--green);
  font-weight: 600;
}

/* ---------- 回复节奏 ---------- */
.page-contact .ct-tempo {
  padding-bottom: clamp(34px, 6vw, 64px);
}

.page-contact .ct-tempo__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 42px);
  border-radius: var(--ct-r);
  background: linear-gradient(150deg, var(--green) 0%, var(--night) 100%);
  color: var(--paper);
}

.page-contact .ct-tempo__panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 46%;
  height: 180%;
  background: rgba(217, 164, 65, .1);
  transform: rotate(18deg);
  pointer-events: none;
}

.page-contact .ct-tempo__panel .kicker {
  color: var(--gold);
  letter-spacing: .18em;
}

.page-contact .ct-tempo__panel h2 {
  margin: 8px 0 clamp(16px, 2.6vw, 26px);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--paper-lift);
}

.page-contact .ct-tempo__list {
  display: grid;
  gap: 16px;
  margin: 0;
  position: relative;
}

.page-contact .ct-tempo__list > div {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, .18);
}

.page-contact .ct-tempo__list dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
}

.page-contact .ct-tempo__list dd {
  margin: 0;
  font-size: .93rem;
  line-height: 1.7;
  color: rgba(244, 239, 230, .86);
}

/* ---------- 地址与资料寄送 ---------- */
.page-contact .ct-post {
  padding-block: clamp(34px, 6vw, 64px);
  background: var(--dusk);
}

.page-contact .ct-post__inner {
  display: grid;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
}

.page-contact .ct-post__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ct-r);
}

.page-contact .ct-post__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(.9) sepia(.08);
}

.page-contact .ct-post__copy .kicker {
  color: var(--poplar);
}

.page-contact .ct-post__copy h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-post__copy p {
  margin: 0 0 14px;
  max-width: 44ch;
  font-size: .95rem;
  line-height: 1.74;
  color: var(--ink-soft);
}

.page-contact .ct-post__note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--blue);
}

/* ---------- 合作与媒体 ---------- */
.page-contact .ct-coop {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-contact .ct-coop__inner {
  display: grid;
  gap: 22px;
}

.page-contact .ct-coop__inner .kicker {
  color: var(--poplar);
}

.page-contact .ct-coop h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-coop p {
  margin: 0 0 12px;
  max-width: 52ch;
  font-size: .95rem;
  line-height: 1.74;
  color: var(--ink-soft);
}

.page-contact .ct-coop__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-coop__tags li {
  padding: 8px 14px;
  border: 1px solid var(--line-gold);
  background: var(--paper-lift);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--green);
}

/* ---------- 相关入口 ---------- */
.page-contact .ct-next {
  padding-block: clamp(28px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.page-contact .ct-next h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--green);
}

.page-contact .ct-next p {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-contact .ct-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-contact .ct-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
  }

  .page-contact .ct-hero__figure {
    aspect-ratio: 4 / 3;
  }

  .page-contact .ct-tempo__list > div {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

@media (min-width: 860px) {
  .page-contact .ct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .page-contact .ct-card:nth-child(2) {
    margin-top: 14px;
  }

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

@media (min-width: 900px) {
  .page-contact .ct-prep__inner {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .page-contact .ct-post__inner {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .page-contact .ct-coop__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: start;
  }

  .page-contact .ct-coop__tags {
    flex-direction: column;
    align-items: flex-start;
  }
}