.page-contact {
  --pc-hair: rgba(199, 210, 240, .16);
  --pc-hair-strong: rgba(199, 210, 240, .34);
  --pc-cut: 18px;
  background: var(--ink-900);
  color: var(--snow-300);
  overflow-x: hidden;
}

/* ---------- 面包屑 ---------- */
.page-contact .contact-crumbs {
  padding-top: clamp(16px, 3.5vw, 32px);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 60px);
  background:
    radial-gradient(115% 82% at 92% -6%, rgba(255, 90, 31, .22), transparent 60%),
    radial-gradient(70% 60% at 4% 100%, rgba(27, 79, 143, .35), transparent 68%),
    linear-gradient(182deg, var(--ink-900) 0%, var(--ink-950) 100%);
}

.page-contact .contact-hero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: end;
}

.page-contact .contact-hero__kicker {
  margin: 0 0 14px;
  color: var(--sand-400);
  letter-spacing: .18em;
}

.page-contact .contact-hero__title {
  margin: 0 0 20px;
  color: var(--paper-050);
  font-weight: 300;
  line-height: 1.04;
  max-width: 15ch;
}

.page-contact .contact-hero__lede {
  margin: 0;
  max-width: 46ch;
  color: var(--snow-300);
}

.page-contact .contact-hero__aside {
  padding-left: 0;
}

.page-contact .hero-slab {
  padding: 16px 0 16px 22px;
  border-left: 3px solid var(--flame-500);
  background: linear-gradient(90deg, rgba(255, 90, 31, .16), rgba(255, 90, 31, 0) 78%);
}

.page-contact .hero-slab__num {
  display: block;
  color: var(--sand-400);
  line-height: .92;
}

.page-contact .hero-slab__caption {
  margin: 8px 0 0;
  color: var(--snow-300);
}

.page-contact .hero-slab__note {
  margin: 14px 0 0;
  color: var(--snow-300);
  opacity: .82;
}

.page-contact .contact-hero__media {
  margin-top: clamp(30px, 5vw, 56px);
}

.page-contact .contact-hero__frame {
  margin: 0;
}

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

/* ---------- 联系方式 + 准备清单 ---------- */
.page-contact .contact-channel {
  padding: clamp(34px, 6vw, 72px) 0;
  background: var(--ink-950);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-split {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: 1fr;
}

.page-contact .channel-card,
.page-contact .checklist {
  padding: clamp(22px, 3vw, 36px);
}

.page-contact .channel-card {
  background: linear-gradient(158deg, var(--ink-700) 0%, var(--ink-900) 76%);
  border: 1px solid var(--pc-hair);
}

.page-contact .channel-card__title,
.page-contact .checklist__title {
  margin: 0 0 20px;
  color: var(--paper-050);
}

.page-contact .channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.page-contact .channel-item {
  display: grid;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--pc-hair);
}

.page-contact .channel-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-contact .channel-item__label {
  color: var(--sand-400);
  letter-spacing: .12em;
}

.page-contact .channel-item__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(18px, 2.1vw, 26px);
  line-height: 1.3;
  color: var(--paper-050);
  overflow-wrap: anywhere;
}

.page-contact .channel-item__value--phone {
  letter-spacing: .1em;
}

.page-contact .channel-item__hint {
  color: var(--snow-300);
  opacity: .8;
  max-width: 46ch;
}

.page-contact .channel-card__btn {
  margin-top: 26px;
}

.page-contact .checklist {
  background: var(--ink-700);
  border: 1px solid var(--pc-hair);
}

.page-contact .checklist__lede {
  margin: 0 0 22px;
  color: var(--snow-300);
  opacity: .86;
}

.page-contact .checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-contact .checklist__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px dashed var(--pc-hair);
}

.page-contact .checklist__box {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  border: 1px solid var(--pc-hair-strong);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}

.page-contact .checklist__box:hover {
  border-color: var(--flame-300);
}

.page-contact .checklist__box:focus-visible {
  outline: 2px solid var(--flame-500);
  outline-offset: 3px;
}

.page-contact .checklist__box:checked {
  border-color: var(--flame-500);
  background: rgba(255, 90, 31, .16);
}

.page-contact .checklist__box:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--flame-500);
  border-bottom: 2px solid var(--flame-500);
  transform: rotate(40deg);
}

.page-contact .checklist__label {
  display: grid;
  gap: 5px;
  cursor: pointer;
}

.page-contact .checklist__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--paper-050);
  transition: color var(--ease), text-decoration-color var(--ease);
}

.page-contact .checklist__desc {
  font-size: 15px;
  line-height: 1.72;
  color: var(--snow-300);
  opacity: .84;
}

.page-contact .checklist__box:checked + .checklist__label .checklist__title {
  text-decoration: line-through;
  text-decoration-color: var(--flame-500);
  color: var(--snow-300);
}

.page-contact .checklist__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--pc-hair);
  color: var(--snow-300);
  opacity: .74;
}

/* ---------- 受理范围轨道 ---------- */
.page-contact .contact-scope {
  padding: clamp(38px, 6vw, 78px) 0;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(27, 79, 143, .3), transparent 66%),
    var(--ink-900);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-scope .section__head {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-contact .contact-scope .section__title {
  color: var(--paper-050);
  font-weight: 300;
}

.page-contact .contact-scope .section__note {
  color: var(--snow-300);
  opacity: .82;
}

.page-contact .contact-scope__track .track__item {
  min-width: min(78vw, 330px);
}

.page-contact .scope-card {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: clamp(22px, 3vw, 30px);
  background: linear-gradient(170deg, var(--ink-700) 0%, var(--ink-900) 82%);
  border: 1px solid var(--pc-hair);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform var(--ease), border-color var(--ease);
}

.page-contact .scope-card:hover {
  transform: translateY(-3px);
  border-color: var(--flame-500);
}

.page-contact .scope-card__index {
  color: var(--sand-400);
  font-size: 26px;
  line-height: 1;
}

.page-contact .scope-card__name {
  margin: 0;
  color: var(--paper-050);
}

.page-contact .scope-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--snow-300);
}

.page-contact .scope-card__how {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--pc-hair);
  color: var(--flame-300);
}

/* ---------- 受理时间 ---------- */
.page-contact .contact-hours {
  padding: clamp(38px, 6vw, 76px) 0;
  background: var(--ink-950);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-hours__head {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-contact .contact-hours .section__title {
  margin: 0;
  color: var(--paper-050);
  font-weight: 300;
}

.page-contact .hours-list {
  display: grid;
}

.page-contact .hours-row {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px dashed var(--pc-hair);
}

.page-contact .hours-row:last-child {
  border-bottom: 1px dashed var(--pc-hair);
}

.page-contact .hours-row__time {
  color: var(--sand-400);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
}

.page-contact .hours-row__text {
  margin: 0;
  color: var(--snow-300);
  max-width: 62ch;
}

/* ---------- 合作对接（浅色区） ---------- */
.page-contact .contact-coop {
  padding: clamp(38px, 6vw, 78px) 0;
  background: var(--paper-050);
  color: var(--ink-900);
}

.page-contact .contact-coop__inner {
  display: grid;
  gap: clamp(24px, 3.4vw, 44px);
  grid-template-columns: 1fr;
}

.page-contact .contact-coop__title {
  margin: 0 0 18px;
  color: var(--ink-950);
  font-weight: 300;
}

.page-contact .contact-coop__text {
  margin: 0;
  color: var(--ink-700);
  max-width: 44ch;
}

.page-contact .coop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
}

.page-contact .coop-item {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid rgba(7, 26, 51, .14);
}

.page-contact .coop-item:last-child {
  border-bottom: 1px solid rgba(7, 26, 51, .14);
}

.page-contact .coop-item__mark {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--flame-500);
}

.page-contact .coop-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-700);
}

/* ---------- 到访地址 ---------- */
.page-contact .contact-visit {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 7vw, 92px) 0;
  background: var(--ink-950);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-visit__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
  pointer-events: none;
}

.page-contact .contact-visit__inner {
  position: relative;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  grid-template-columns: 1fr;
  align-items: center;
}

.page-contact .visit-card {
  padding: clamp(24px, 3vw, 38px);
  background: rgba(5, 11, 20, .84);
  border: 1px solid var(--pc-hair-strong);
}

.page-contact .visit-card__title {
  margin: 0 0 16px;
  color: var(--paper-050);
}

.page-contact .visit-card__addr {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.52;
  color: var(--paper-050);
  max-width: 24ch;
}

.page-contact .visit-card__btn {
  margin-top: 22px;
}

.page-contact .visit-card__note {
  margin: 16px 0 0;
  color: var(--snow-300);
  opacity: .82;
  max-width: 44ch;
}

.page-contact .visit-map-wrap {
  display: grid;
  gap: 12px;
}

.page-contact .visit-map {
  display: block;
  width: 100%;
  height: auto;
}

.page-contact .visit-map__road {
  fill: none;
  stroke: var(--pc-hair-strong);
  stroke-width: 2;
}

.page-contact .visit-map__road--minor {
  stroke: var(--pc-hair);
  stroke-dasharray: 5 7;
}

.page-contact .visit-map__dash {
  fill: none;
  stroke: var(--flame-500);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}

.page-contact .visit-map__pin {
  fill: var(--flame-500);
}

.page-contact .visit-map__pin-halo {
  fill: none;
  stroke: var(--flame-300);
  stroke-width: 1;
  opacity: .6;
  animation: pc-halo 2s ease-in-out infinite;
}

.page-contact .visit-map__block {
  fill: none;
  stroke: var(--sand-400);
  stroke-width: 1.5;
}

.page-contact .visit-map__caption {
  margin: 0;
  color: var(--snow-300);
  opacity: .78;
}

@keyframes pc-halo {
  0%, 100% { opacity: .25; }
  50% { opacity: .68; }
}

/* ---------- 收尾 ---------- */
.page-contact .contact-next {
  padding: clamp(34px, 5.5vw, 68px) 0;
  background: linear-gradient(6deg, var(--ink-900), var(--ink-950));
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-next__title {
  margin: 0 0 12px;
  color: var(--paper-050);
}

.page-contact .contact-next__text {
  margin: 0 0 24px;
  color: var(--snow-300);
  max-width: 58ch;
}

.page-contact .contact-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-contact .hours-row {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 32px;
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .page-contact .contact-hero__aside {
    padding-left: clamp(18px, 3vw, 40px);
  }

  .page-contact .contact-hero__frame img {
    height: clamp(280px, 34vw, 420px);
  }

  .page-contact .visit-card__addr {
    overflow-wrap: anywhere;
  }
}

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

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

  .page-contact .contact-visit__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-contact .contact-scope__track .track__item {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .visit-map__pin-halo {
    animation: none;
    opacity: .5;
  }

  .page-contact .scope-card:hover {
    transform: none;
  }
}


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

  <div class="wrap contact-crumbs">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">首页</a></li>
        <li class="breadcrumbs__item"><span class="breadcrumbs__link" aria-current="page">咨询服务</span></li>
      </ol>
    </nav>
  </div>

  <section class="contact-hero" aria-labelledby="contact-title" data-reveal>
    <div class="wrap contact-hero__inner">
      <div class="contact-hero__left">
        <p class="note-s contact-hero__kicker">咨询服务 · 半岛体育</p>
        <h1 id="contact-title" class="display-xl contact-hero__title">找半岛体育客服，<br>一次把问题说清</h1>
        <p class="body-m contact-hero__lede">订阅没生效、平板打不开页面、旧版登录绕不回来，不用自己反复试。把设备型号和一张截图带上，多数问题当天就能往前推一步。</p>
      </div>
      <aside class="contact-hero__aside">
        <div class="hero-slab">
          <span class="index-mono hero-slab__num">15</span>
          <p class="note-s hero-slab__caption">工作时段内平均首次响应时间（分钟）</p>
        </div>
        <p class="note-s hero-slab__note">受理时间 9:30–21:00，赛事高峰时段延长至 23:00</p>
      </aside>
    </div>
    <div class="wrap contact-hero__media">
      <figure class="media-frame media-frame--wide contact-hero__frame">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="客服工作台桌面特写，键盘、耳麦与屏幕光斑，画面中不出现可辨认面孔">
        <figcaption class="media-frame__caption">工作时段内客服与技术支持的工位实时在线，订阅、适配与登录问题一并处理。</figcaption>
      </figure>
    </div>
  </section>

  <section class="contact-channel" aria-labelledby="channel-title">
    <div class="wrap">
      <div class="contact-split">
        <div class="channel-card panel">
          <h2 id="channel-title" class="heading-m channel-card__title">两条路，任选一条</h2>
          <ul class="channel-list">
            <li class="channel-item">
              <span class="note-s channel-item__label">客服邮箱</span>
              <span class="channel-item__value channel-item__value--mail">kefu@bandao-sports-arena.com.cn</span>
              <span class="note-s channel-item__hint">适合附截图、录屏和完整描述，受理订阅异常、平板打不开页面与旧版登录问题。</span>
            </li>
            <li class="channel-item">
              <span class="note-s channel-item__label">客服电话</span>
              <span class="channel-item__value channel-item__value--phone">400-9033-5434</span>
              <span class="note-s channel-item__hint">适合问题比较急、需要边操作边确认的情况，通话中可直接核对订阅状态。</span>
            </li>
          </ul>
          <a class="btn btn--primary channel-card__btn" href="/help-center/">先按帮助中心第3步自查</a>
        </div>

        <div class="checklist panel" id="prep">
          <h2 class="heading-m checklist__title">反馈前，把这三样放在手边</h2>
          <p class="body-m checklist__lede">信息齐全的反馈，通常一轮沟通就能定位。勾选时确认一下，缺哪样补哪样。</p>
          <ul class="checklist__list">
            <li class="checklist__item">
              <input class="checklist__box" type="checkbox" id="prep-device">
              <label class="checklist__label" for="prep-device">
                <span class="checklist__title">设备型号与系统版本</span>
                <span class="checklist__desc">手机或平板的型号、系统版本写清楚，我们能立刻判断是不是 7 至 13 英寸屏幕的适配差异。</span>
              </label>
            </li>
            <li class="checklist__item">
              <input class="checklist__box" type="checkbox" id="prep-shot">
              <label class="checklist__label" for="prep-shot">
                <span class="checklist__title">问题截图或录屏</span>
                <span class="checklist__desc">截图能说明页面停在哪一步、提示了什么。相比文字描述，定位速度快得多。</span>
              </label>
            </li>
            <li class="checklist__item">
              <input class="checklist__box" type="checkbox" id="prep-time">
              <label class="checklist__label" for="prep-time">
                <span class="checklist__title">问题发生的时段</span>
                <span class="checklist__desc">大致几点、隔多久出现一次，能帮我们对照当时的服务状态，判断是偶发还是持续。</span>
              </label>
            </li>
          </ul>
          <p class="note-s checklist__foot">反馈时不需要提供密码或任何账号凭证，请留意保护自己的账号信息。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="contact-scope" aria-labelledby="scope-title" data-reveal>
    <div class="wrap section__head">
      <h2 id="scope-title" class="display-l section__title">我们受理哪些问题</h2>
      <p class="section__note">客服与技术支持共 15 人，按问题类型分工，每条都告诉你用什么方式提交最快。</p>
    </div>
    <div class="track contact-scope__track">
      <ul class="track__list">
        <li class="track__item scope-card">
          <span class="index-mono scope-card__index">01</span>
          <h3 class="heading-m scope-card__name">赛事订阅异常</h3>
          <p class="scope-card__text">付了没生效、状态停在待确认、重点场次提醒没到，都可以直接说。</p>
          <p class="note-s scope-card__how">建议方式：邮件提交，附订单时间与订阅状态截图</p>
        </li>
        <li class="track__item scope-card">
          <span class="index-mono scope-card__index">02</span>
          <h3 class="heading-m scope-card__name">平板打不开页面</h3>
          <p class="scope-card__text">页面空白、加载一半停住、按钮点不动，先清理缓存多半能恢复。</p>
          <p class="note-s scope-card__how">建议方式：先看帮助中心的适配与缓存清理指引，仍不行再电话</p>
        </li>
        <li class="track__item scope-card">
          <span class="index-mono scope-card__index">03</span>
          <h3 class="heading-m scope-card__name">旧版登录问题</h3>
          <p class="scope-card__text">停在旧版入口、提示需要重新进入，按帮助中心第3步走一遍即可。</p>
          <p class="note-s scope-card__how">建议方式：自助自查为主，卡住再把截图发到客服邮箱</p>
        </li>
        <li class="track__item scope-card">
          <span class="index-mono scope-card__index">04</span>
          <h3 class="heading-m scope-card__name">账号相关咨询</h3>
          <p class="scope-card__text">常用页收藏丢失、偏好设置重置、订阅记录对不上，都可以问。</p>
          <p class="note-s scope-card__how">建议方式：邮件或电话均可，说明设备与浏览器版本</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="contact-hours" aria-labelledby="hours-title" data-reveal>
    <div class="wrap contact-hours__inner">
      <div class="contact-hours__head">
        <h2 id="hours-title" class="display-l section__title">什么时候找我们，多久有回音</h2>
      </div>
      <div class="hours-list">
        <div class="hours-row">
          <span class="index-mono hours-row__time">9:30</span>
          <p class="body-m hours-row__text">工作日开始受理，订阅状态、页面适配、登录问题同时接收，不必等到下午。</p>
        </div>
        <div class="hours-row">
          <span class="index-mono hours-row__time">21:00</span>
          <p class="body-m hours-row__text">常规受理时段结束；有重点场次的日子会延长到 23:00，赛前急事仍能找到人。</p>
        </div>
        <div class="hours-row">
          <span class="index-mono hours-row__time">2天</span>
          <p class="body-m hours-row__text">需要进一步核对的问题，跟进周期通常不超过 2 个工作日，期间会同步进展。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="contact-coop section--paper" aria-labelledby="coop-title" data-reveal>
    <div class="wrap contact-coop__inner">
      <div class="contact-coop__intro">
        <h2 id="coop-title" class="display-l contact-coop__title">场馆、内容与地方活动合作</h2>
        <p class="body-m contact-coop__text">我们和 12 家本地体育场馆、5 家赛事内容机构长期保持合作，为新疆用户提供线下活动通知与本地赛事内容支持。如果你手上有场地、赛事资源或社区活动想法，欢迎直接对接。</p>
      </div>
      <ul class="coop-list">
        <li class="coop-item">
          <span class="coop-item__mark">场馆</span>
          <p class="coop-item__text">场地合作、观赛活动落地、赛事直播支持。请注明场地名称、可容纳人数与可用时段。</p>
        </li>
        <li class="coop-item">
          <span class="coop-item__mark">内容</span>
          <p class="coop-item__text">赛事内容共建、地方赛事报道、专题栏目合作。请概述内容方向、更新频率与团队情况。</p>
        </li>
        <li class="coop-item">
          <span class="coop-item__mark">活动</span>
          <p class="coop-item__text">社区赛事、校园体育、球迷线下聚会。请写明活动规模、拟定时间和所需支持。</p>
        </li>
        <li class="coop-item">
          <span class="coop-item__mark">对接</span>
          <p class="coop-item__text">合作意向发到客服邮箱，标题注明「合作」与所在城市，我们会在工作时段内回复。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="contact-visit" aria-labelledby="visit-title" data-reveal>
    <img class="contact-visit__bg" src="{zhanqunpic:h:700w:1600}" width="1600" height="700" alt="城市夜景与建筑轮廓的抽象线条，暖橙色窗光点缀，无文字无招牌" loading="lazy" decoding="async">
    <div class="wrap contact-visit__inner">
      <div class="visit-card panel">
        <h2 id="visit-title" class="heading-m visit-card__title">到访地址</h2>
        <p class="visit-card__addr">新疆省乌鲁木齐市天山区解放南路128号半岛体育大厦5层</p>
        <a class="btn btn--primary visit-card__btn" href="/consult/#prep">先整理好反馈信息</a>
        <p class="note-s visit-card__note">到访前建议先通过客服电话或客服邮箱预约，我们会提前安排接待时间，避免你在现场久等。</p>
      </div>
      <div class="visit-map-wrap">
        <svg class="visit-map" viewBox="0 0 420 260" role="img" aria-label="到访方位示意：解放南路与人民路交会处，向东北方向可达目的地">
          <path class="visit-map__road visit-map__road--minor" d="M-10 96 L430 72" />
          <path class="visit-map__road" d="M-10 208 L430 162" />
          <path class="visit-map__road" d="M138 -10 L188 270" />
          <path class="visit-map__dash" d="M188 166 L306 58" />
          <circle class="visit-map__pin" cx="188" cy="166" r="7" />
          <circle class="visit-map__pin-halo" cx="188" cy="166" r="16" />
          <rect class="visit-map__block" x="300" y="40" width="46" height="30" />
        </svg>
        <p class="note-s visit-map__caption">解放南路自南向北，与人民路交会后向东北方向步行即可抵达。示意图只表达道路走向与相对方位。</p>
      </div>
    </div>
  </section>

  <section class="contact-next" aria-labelledby="next-title" data-reveal>
    <div class="wrap contact-next__inner">
      <h2 id="next-title" class="heading-m contact-next__title">还没准备好发邮件？</h2>
      <p class="body-m contact-next__text">先在帮助中心按步骤自查登录与页面适配，或者去赛事订阅中心核对订阅状态。能把问题说具体，沟通自然更快。</p>
      <div class="contact-next__links">
        <a class="btn btn--ghost" href="/help-center/">打开帮助中心</a>
        <a class="btn btn--ghost" href="/products/">查看赛事订阅中心</a>
        <a class="btn btn--quiet" href="/profile/">了解品牌概况</a>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --pc-hair: rgba(199, 210, 240, .16);
  --pc-hair-strong: rgba(199, 210, 240, .34);
  --pc-cut: 18px;
  background: var(--ink-900);
  color: var(--snow-300);
  overflow-x: hidden;
}

.page-contact .contact-crumbs {
  padding-top: clamp(16px, 3.5vw, 32px);
}

.page-contact .contact-hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 60px);
  background:
    radial-gradient(115% 82% at 92% -6%, rgba(255, 90, 31, .22), transparent 60%),
    radial-gradient(70% 60% at 4% 100%, rgba(27, 79, 143, .35), transparent 68%),
    linear-gradient(182deg, var(--ink-900) 0%, var(--ink-950) 100%);
}

.page-contact .contact-hero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: end;
}

.page-contact .contact-hero__kicker {
  margin: 0 0 14px;
  color: var(--sand-400);
  letter-spacing: .18em;
}

.page-contact .contact-hero__title {
  margin: 0 0 20px;
  color: var(--paper-050);
  font-weight: 300;
  line-height: 1.04;
  max-width: 15ch;
}

.page-contact .contact-hero__lede {
  margin: 0;
  max-width: 46ch;
  color: var(--snow-300);
}

.page-contact .contact-hero__aside {
  padding-left: 0;
}

.page-contact .hero-slab {
  padding: 16px 0 16px 22px;
  border-left: 3px solid var(--flame-500);
  background: linear-gradient(90deg, rgba(255, 90, 31, .16), rgba(255, 90, 31, 0) 78%);
}

.page-contact .hero-slab__num {
  display: block;
  color: var(--sand-400);
  line-height: .92;
}

.page-contact .hero-slab__caption {
  margin: 8px 0 0;
  color: var(--snow-300);
}

.page-contact .hero-slab__note {
  margin: 14px 0 0;
  color: var(--snow-300);
  opacity: .82;
}

.page-contact .contact-hero__media {
  margin-top: clamp(30px, 5vw, 56px);
}

.page-contact .contact-hero__frame {
  margin: 0;
}

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

.page-contact .contact-channel {
  padding: clamp(34px, 6vw, 72px) 0;
  background: var(--ink-950);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-split {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: 1fr;
}

.page-contact .channel-card,
.page-contact .checklist {
  padding: clamp(22px, 3vw, 36px);
}

.page-contact .channel-card {
  background: linear-gradient(158deg, var(--ink-700) 0%, var(--ink-900) 76%);
  border: 1px solid var(--pc-hair);
}

.page-contact .channel-card__title,
.page-contact .checklist__title {
  margin: 0 0 20px;
  color: var(--paper-050);
}

.page-contact .channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.page-contact .channel-item {
  display: grid;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--pc-hair);
}

.page-contact .channel-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-contact .channel-item__label {
  color: var(--sand-400);
  letter-spacing: .12em;
}

.page-contact .channel-item__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(18px, 2.1vw, 26px);
  line-height: 1.3;
  color: var(--paper-050);
  overflow-wrap: anywhere;
}

.page-contact .channel-item__value--phone {
  letter-spacing: .1em;
}

.page-contact .channel-item__hint {
  color: var(--snow-300);
  opacity: .8;
  max-width: 46ch;
}

.page-contact .channel-card__btn {
  margin-top: 26px;
}

.page-contact .checklist {
  background: var(--ink-700);
  border: 1px solid var(--pc-hair);
}

.page-contact .checklist__lede {
  margin: 0 0 22px;
  color: var(--snow-300);
  opacity: .86;
}

.page-contact .checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-contact .checklist__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px dashed var(--pc-hair);
}

.page-contact .checklist__box {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  border: 1px solid var(--pc-hair-strong);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}

.page-contact .checklist__box:hover {
  border-color: var(--flame-300);
}

.page-contact .checklist__box:focus-visible {
  outline: 2px solid var(--flame-500);
  outline-offset: 3px;
}

.page-contact .checklist__box:checked {
  border-color: var(--flame-500);
  background: rgba(255, 90, 31, .16);
}

.page-contact .checklist__box:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--flame-500);
  border-bottom: 2px solid var(--flame-500);
  transform: rotate(40deg);
}

.page-contact .checklist__label {
  display: grid;
  gap: 5px;
  cursor: pointer;
}

.page-contact .checklist__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--paper-050);
  transition: color var(--ease);
}

.page-contact .checklist__desc {
  font-size: 15px;
  line-height: 1.72;
  color: var(--snow-300);
  opacity: .84;
}

.page-contact .checklist__box:checked + .checklist__label .checklist__title {
  text-decoration: line-through;
  text-decoration-color: var(--flame-500);
  color: var(--snow-300);
}

.page-contact .checklist__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--pc-hair);
  color: var(--snow-300);
  opacity: .74;
}

.page-contact .contact-scope {
  padding: clamp(38px, 6vw, 78px) 0;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(27, 79, 143, .3), transparent 66%),
    var(--ink-900);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-scope .section__head {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-contact .contact-scope .section__title {
  color: var(--paper-050);
  font-weight: 300;
}

.page-contact .contact-scope .section__note {
  color: var(--snow-300);
  opacity: .82;
}

.page-contact .contact-scope__track .track__item {
  min-width: min(78vw, 330px);
}

.page-contact .scope-card {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: clamp(22px, 3vw, 30px);
  background: linear-gradient(170deg, var(--ink-700) 0%, var(--ink-900) 82%);
  border: 1px solid var(--pc-hair);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: transform var(--ease), border-color var(--ease);
}

.page-contact .scope-card:hover {
  transform: translateY(-3px);
  border-color: var(--flame-500);
}

.page-contact .scope-card__index {
  color: var(--sand-400);
  font-size: 26px;
  line-height: 1;
}

.page-contact .scope-card__name {
  margin: 0;
  color: var(--paper-050);
}

.page-contact .scope-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--snow-300);
}

.page-contact .scope-card__how {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--pc-hair);
  color: var(--flame-300);
}

.page-contact .contact-hours {
  padding: clamp(38px, 6vw, 76px) 0;
  background: var(--ink-950);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-hours__head {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-contact .contact-hours .section__title {
  margin: 0;
  color: var(--paper-050);
  font-weight: 300;
}

.page-contact .hours-list {
  display: grid;
}

.page-contact .hours-row {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px dashed var(--pc-hair);
}

.page-contact .hours-row:last-child {
  border-bottom: 1px dashed var(--pc-hair);
}

.page-contact .hours-row__time {
  color: var(--sand-400);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
}

.page-contact .hours-row__text {
  margin: 0;
  color: var(--snow-300);
  max-width: 62ch;
}

.page-contact .contact-coop {
  padding: clamp(38px, 6vw, 78px) 0;
  background: var(--paper-050);
  color: var(--ink-900);
}

.page-contact .contact-coop__inner {
  display: grid;
  gap: clamp(24px, 3.4vw, 44px);
  grid-template-columns: 1fr;
}

.page-contact .contact-coop__title {
  margin: 0 0 18px;
  color: var(--ink-950);
  font-weight: 300;
}

.page-contact .contact-coop__text {
  margin: 0;
  color: var(--ink-700);
  max-width: 44ch;
}

.page-contact .coop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
}

.page-contact .coop-item {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid rgba(7, 26, 51, .14);
}

.page-contact .coop-item:last-child {
  border-bottom: 1px solid rgba(7, 26, 51, .14);
}

.page-contact .coop-item__mark {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--flame-500);
}

.page-contact .coop-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-700);
}

.page-contact .contact-visit {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 7vw, 92px) 0;
  background: var(--ink-950);
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-visit__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
  pointer-events: none;
}

.page-contact .contact-visit__inner {
  position: relative;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  grid-template-columns: 1fr;
  align-items: center;
}

.page-contact .visit-card {
  padding: clamp(24px, 3vw, 38px);
  background: rgba(5, 11, 20, .84);
  border: 1px solid var(--pc-hair-strong);
}

.page-contact .visit-card__title {
  margin: 0 0 16px;
  color: var(--paper-050);
}

.page-contact .visit-card__addr {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.52;
  color: var(--paper-050);
  max-width: 24ch;
}

.page-contact .visit-card__btn {
  margin-top: 22px;
}

.page-contact .visit-card__note {
  margin: 16px 0 0;
  color: var(--snow-300);
  opacity: .82;
  max-width: 44ch;
}

.page-contact .visit-map-wrap {
  display: grid;
  gap: 12px;
}

.page-contact .visit-map {
  display: block;
  width: 100%;
  height: auto;
}

.page-contact .visit-map__road {
  fill: none;
  stroke: var(--pc-hair-strong);
  stroke-width: 2;
}

.page-contact .visit-map__road--minor {
  stroke: var(--pc-hair);
  stroke-dasharray: 5 7;
}

.page-contact .visit-map__dash {
  fill: none;
  stroke: var(--flame-500);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}

.page-contact .visit-map__pin {
  fill: var(--flame-500);
}

.page-contact .visit-map__pin-halo {
  fill: none;
  stroke: var(--flame-300);
  stroke-width: 1;
  opacity: .6;
  animation: pc-halo 2s ease-in-out infinite;
}

.page-contact .visit-map__block {
  fill: none;
  stroke: var(--sand-400);
  stroke-width: 1.5;
}

.page-contact .visit-map__caption {
  margin: 0;
  color: var(--snow-300);
  opacity: .78;
}

@keyframes pc-halo {
  0%, 100% { opacity: .25; }
  50% { opacity: .68; }
}

.page-contact .contact-next {
  padding: clamp(34px, 5.5vw, 68px) 0;
  background: linear-gradient(6deg, var(--ink-900), var(--ink-950));
  border-top: 1px solid var(--pc-hair);
}

.page-contact .contact-next__title {
  margin: 0 0 12px;
  color: var(--paper-050);
}

.page-contact .contact-next__text {
  margin: 0 0 24px;
  color: var(--snow-300);
  max-width: 58ch;
}

.page-contact .contact-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 760px) {
  .page-contact .hours-row {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 32px;
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .page-contact .contact-hero__aside {
    padding-left: clamp(18px, 3vw, 40px);
  }

  .page-contact .contact-hero__frame img {
    height: clamp(280px, 34vw, 420px);
  }

  .page-contact .visit-card__addr {
    overflow-wrap: anywhere;
  }
}

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

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

  .page-contact .contact-visit__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-contact .contact-scope__track .track__item {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .visit-map__pin-halo {
    animation: none;
    opacity: .5;
  }

  .page-contact .scope-card:hover {
    transform: none;
  }
}