.page-contact {
  --contact-glow: radial-gradient(115% 85% at 84% 0%, rgba(199, 255, 61, 0.16), rgba(92, 225, 230, 0.07) 40%, transparent 70%);
  --contact-shadow: 8px 8px 0 rgba(5, 8, 7, 0.85);
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  font-family: var(--font-body);
  color: var(--mist);
  overflow-x: clip;
}

.page-contact .breadcrumbs {
  padding: 22px 0 6px;
}

.page-contact .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

.page-contact .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 8px;
  color: var(--line);
}

.page-contact .breadcrumb-link {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--step) var(--ease), border-color var(--step) var(--ease);
}

.page-contact .breadcrumb-link:hover,
.page-contact .breadcrumb-link:focus-visible {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

.page-contact .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blueprint);
}

.page-contact h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--mist);
}

.page-contact .section-head {
  margin-bottom: 28px;
  max-width: 62ch;
}

.page-contact .section-head__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist-60);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  display: grid;
  gap: 34px;
  padding: 22px 0 58px;
  border-bottom: 2px solid var(--line-soft);
}

.page-contact .contact-hero::before {
  content: "";
  position: absolute;
  inset: -10% -14% auto 30%;
  height: 460px;
  background: var(--contact-glow);
  pointer-events: none;
  z-index: 0;
}

.page-contact .contact-hero__copy,
.page-contact .hero-figure {
  position: relative;
  z-index: 1;
}

.page-contact .contact-hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--mist);
}

.page-contact .contact-hero h1 em {
  font-style: normal;
  color: var(--volt);
  display: inline-block;
  border-bottom: 6px solid rgba(199, 255, 61, 0.28);
}

.page-contact .contact-hero__lede {
  margin: 0 0 26px;
  max-width: 56ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.78;
  color: var(--mist-80);
}

.page-contact .contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.page-contact .contact-hero__actions .btn {
  flex: 1 1 200px;
}

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

.page-contact .hero-index li {
  border-bottom: 1px solid var(--line-faint);
}

.page-contact .hero-index a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mist-80);
  text-decoration: none;
  transition: color var(--step) var(--ease), padding-left var(--step) var(--ease);
}

.page-contact .hero-index a:hover,
.page-contact .hero-index a:focus-visible {
  color: var(--volt);
  padding-left: 8px;
}

.page-contact .hero-index__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blueprint);
  letter-spacing: 0.1em;
}

.page-contact .hero-figure {
  margin: 0;
  border: 2px solid var(--line);
  background: var(--turf-deep);
  box-shadow: var(--contact-shadow);
}

.page-contact .hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.page-contact .hero-figure figcaption {
  padding: 12px 14px;
  border-top: 2px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--steel);
}

/* ---------- 联系渠道 ---------- */
.page-contact .channels {
  padding: 62px 0 24px;
}

.page-contact .channels__grid {
  display: grid;
  gap: 18px;
}

.page-contact .channel-main {
  padding: 26px 22px;
  border: 2px solid var(--line);
  background:
    linear-gradient(160deg, rgba(14, 59, 46, 0.72), rgba(10, 21, 18, 0.96) 62%);
  box-shadow: var(--contact-shadow);
}

.page-contact .channel-main__key {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--volt);
}

.page-contact .channel-main__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(17px, 3.2vw, 30px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--mist);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 2px solid transparent;
  transition: color var(--step) var(--ease), border-color var(--step) var(--ease);
}

.page-contact .channel-main__value:hover,
.page-contact .channel-main__value:focus-visible {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

.page-contact .channel-main__value--tel {
  font-size: clamp(26px, 5.4vw, 46px);
  color: var(--volt-soft);
}

.page-contact .channel-main__note {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist-60);
}

.page-contact .channel-main__divider {
  height: 2px;
  margin: 26px 0 24px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 14px,
    transparent 14px 24px
  );
}

.page-contact .channel-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-contact .window-card {
  padding: 22px;
  border: 2px solid var(--line-soft);
  background: var(--turf-deep);
}

.page-contact .window-card__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.page-contact .window-card__time {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 600;
  color: var(--volt);
  letter-spacing: -0.01em;
}

.page-contact .window-card__day {
  display: inline-block;
  margin: 8px 0 12px;
  padding: 3px 10px;
  background: var(--volt-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.page-contact .window-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist-60);
}

.page-contact .quick-card {
  padding: 22px;
  border: 2px dashed var(--line-soft);
  background: rgba(10, 21, 18, 0.7);
}

.page-contact .quick-card__label {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-contact .quick-card__text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist-60);
}

.page-contact .quick-card__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--blueprint);
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 225, 230, 0.4);
  transition: color var(--step) var(--ease), border-color var(--step) var(--ease);
}

.page-contact .quick-card__link:hover,
.page-contact .quick-card__link:focus-visible {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

/* ---------- 咨询准备 ---------- */
.page-contact .prepare {
  display: grid;
  gap: 32px;
  padding: 62px 0;
  border-top: 2px solid var(--line-faint);
}

.page-contact .prepare__media {
  margin: 0;
  border: 2px solid var(--line-soft);
  background: var(--turf-deep);
}

.page-contact .prepare__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 7;
  object-fit: cover;
}

.page-contact .prepare__caption {
  margin: 0;
  padding: 11px 14px;
  border-top: 2px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

.page-contact .prepare__lede {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist-80);
}

.page-contact .prepare-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  background: var(--line-faint);
  border: 2px solid var(--line-faint);
}

.page-contact .prepare-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 16px 18px;
  background: var(--ink);
}

.page-contact .prepare-list__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--volt);
  letter-spacing: 0.06em;
  padding-top: 2px;
}

.page-contact .prepare-list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-contact .prepare-list p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mist-60);
}

.page-contact .prepare__tip {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--volt);
  background: rgba(199, 255, 61, 0.07);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist-80);
}

.page-contact .prepare__tip a {
  color: var(--volt);
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 255, 61, 0.45);
  overflow-wrap: anywhere;
}

.page-contact .prepare__tip a:hover,
.page-contact .prepare__tip a:focus-visible {
  border-bottom-color: var(--volt);
}

/* ---------- 问题分流 ---------- */
.page-contact .routing {
  padding: 62px 0;
  border-top: 2px solid var(--line-faint);
}

.page-contact .route-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.page-contact .route-tab {
  display: inline-block;
  padding: 10px 18px 12px;
  border: 2px solid var(--line);
  background: var(--turf-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist-80);
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background var(--step) var(--ease), color var(--step) var(--ease), border-color var(--step) var(--ease), transform var(--step) var(--ease);
}

.page-contact .route-tab:hover,
.page-contact .route-tab:focus-visible {
  background: var(--volt);
  border-color: var(--volt);
  color: var(--ink);
  transform: translate(-2px, -2px);
}

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

.page-contact .route-card {
  padding: 22px 20px;
  border: 2px solid var(--line-soft);
  background: var(--turf-deep);
  scroll-margin-top: 90px;
  transition: border-color var(--step) var(--ease), box-shadow var(--step) var(--ease);
}

.page-contact .route-card:hover {
  border-color: var(--line);
  box-shadow: 6px 6px 0 rgba(23, 107, 77, 0.35);
}

.page-contact .route-card__tag {
  margin-bottom: 12px;
}

.page-contact .route-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-contact .route-card p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--mist-60);
}

.page-contact .route-card__hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--blueprint) !important;
  padding-top: 10px;
  border-top: 1px dashed var(--line-faint);
}

.page-contact .route-card__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--volt);
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 255, 61, 0.4);
  transition: border-color var(--step) var(--ease);
}

.page-contact .route-card__link:hover,
.page-contact .route-card__link:focus-visible {
  border-bottom-color: var(--volt);
}

/* ---------- 回复节奏 ---------- */
.page-contact .rhythm {
  padding: 62px 0;
  border-top: 2px solid var(--line-faint);
}

.page-contact .rhythm__head {
  max-width: 64ch;
  margin-bottom: 30px;
}

.page-contact .rhythm__head p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist-60);
}

.page-contact .rhythm__track {
  position: relative;
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: grid;
  gap: 22px;
  border-left: 2px solid var(--line);
}

.page-contact .rhythm__track li {
  position: relative;
  padding-bottom: 2px;
}

.page-contact .rhythm__dot {
  position: absolute;
  left: -34px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border: 2px solid var(--volt);
  border-radius: 50%;
}

.page-contact .rhythm__dot--end {
  background: var(--heat);
  border-color: var(--heat);
}

.page-contact .rhythm__step {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--volt);
}

.page-contact .rhythm__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mist-60);
}

/* ---------- 地址条 ---------- */
.page-contact .address-bar {
  display: grid;
  gap: 0;
  margin-top: 62px;
  border: 2px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(92, 225, 230, 0.14) 0 1px, transparent 1px 56px),
    linear-gradient(120deg, rgba(14, 59, 46, 0.85), rgba(5, 8, 7, 0.98) 70%);
}

.page-contact .address-bar__main {
  padding: 26px 22px;
}

.page-contact .address-bar .eyebrow {
  color: var(--blueprint);
}

.page-contact .address-bar h2 {
  font-size: clamp(22px, 2.8vw, 32px);
  margin-bottom: 14px;
}

.page-contact .address-bar__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9vw, 18px);
  line-height: 1.66;
  letter-spacing: 0.01em;
  color: var(--mist);
  border-left: 4px solid var(--volt);
  padding-left: 14px;
}

.page-contact .address-bar__side {
  padding: 22px;
  border-top: 2px solid var(--line-soft);
  background: rgba(5, 8, 7, 0.55);
}

.page-contact .address-bar__label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heat);
}

.page-contact .address-bar__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--mist-60);
}

.page-contact .address-bar__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-contact .address-bar__links a {
  color: var(--volt);
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 255, 61, 0.35);
  overflow-wrap: anywhere;
  width: fit-content;
  transition: border-color var(--step) var(--ease);
}

.page-contact .address-bar__links a:hover,
.page-contact .address-bar__links a:focus-visible {
  border-bottom-color: var(--volt);
}

/* ---------- 收尾 ---------- */
.page-contact .closing {
  margin-top: 56px;
  padding: 32px 22px;
  border: 2px solid var(--line-soft);
  background: var(--turf-deep);
}

.page-contact .closing h2 {
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: 12px;
}

.page-contact .closing p {
  margin: 0 0 22px;
  max-width: 58ch;
  font-size: 14.5px;
  line-height: 1.76;
  color: var(--mist-60);
}

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

.page-contact .closing__actions .btn {
  flex: 1 1 190px;
}

/* ---------- 桌面端 ---------- */
@media (min-width: 700px) {
  .page-contact .hero-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .page-contact .channels__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .route-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .address-bar {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .page-contact .address-bar__side {
    border-top: 0;
    border-left: 2px solid var(--line-soft);
  }
}

@media (min-width: 960px) {
  .page-contact {
    padding-bottom: 110px;
  }

  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 52px;
    padding: 34px 0 72px;
    align-items: start;
  }

  .page-contact .contact-hero__actions .btn {
    flex: 0 0 auto;
  }

  .page-contact .hero-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-contact .channels,
  .page-contact .routing,
  .page-contact .rhythm {
    padding-top: 82px;
    padding-bottom: 40px;
  }

  .page-contact .prepare {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 48px;
    align-items: start;
    padding: 82px 0 50px;
  }

  .page-contact .prepare__media {
    position: sticky;
    top: 96px;
  }

  .page-contact .rhythm__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    padding: 34px 0 0;
    border-left: 0;
    border-top: 2px solid var(--line);
  }

  .page-contact .rhythm__track li {
    padding-right: 10px;
  }

  .page-contact .rhythm__dot {
    left: 0;
    top: -42px;
  }

  .page-contact .route-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .page-contact .route-card {
    padding: 26px 24px;
  }

  .page-contact .closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 40px;
    padding: 40px 34px;
  }

  .page-contact .closing h2 {
    grid-column: 1;
  }

  .page-contact .closing p {
    grid-column: 1;
    margin-bottom: 0;
  }

  .page-contact .closing__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    flex-wrap: nowrap;
    align-self: center;
  }

  .page-contact .closing__actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .route-tab:hover,
  .page-contact .route-tab:focus-visible,
  .page-contact .hero-index a:hover,
  .page-contact .hero-index a:focus-visible {
    transform: none;
  }
}
<main id="main-content" class="page-contact">
  <nav class="breadcrumbs" aria-label="页面位置">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
      <li class="breadcrumb-item"><span aria-current="page">联系我们</span></li>
    </ol>
  </nav>

  <section class="contact-hero" aria-labelledby="contact-title">
    <div class="contact-hero__copy">
      <p class="eyebrow">服务台 · 工作日 09:00–18:00</p>
      <h1 id="contact-title">资料卡在半路，<em>找得到人</em>才算解决</h1>
      <p class="contact-hero__lede">赛前速览打不开、换手机后收藏没跟上、订阅的球队迟迟不提示更新——开云下注的客服按问题类型分流处理。工作日九点到六点有专人回复，节假日留言会接在下一个工作日。</p>
      <div class="contact-hero__actions">
        <a class="btn btn-primary" href="tel:40084066253">拨打 400-8406-6253</a>
        <a class="btn btn-ghost" href="mailto:contact@bet-kaiyungame.com.cn">写邮件说明情况</a>
      </div>
      <ul class="hero-index">
        <li><a href="#channels"><span class="hero-index__num">01</span>邮箱与电话</a></li>
        <li><a href="#prepare"><span class="hero-index__num">02</span>咨询准备</a></li>
        <li><a href="#routing"><span class="hero-index__num">03</span>问题分流</a></li>
        <li><a href="#address"><span class="hero-index__num">04</span>联系地址</a></li>
      </ul>
    </div>

    <figure class="hero-figure">
      <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场灯光与抽象城市天际线构成的联系页氛围图">
      <figcaption>灯光调暗之后，复盘才刚开始</figcaption>
    </figure>
  </section>

  <section class="channels" id="channels" aria-labelledby="channels-title">
    <div class="section-head">
      <p class="eyebrow">01 / 联系渠道</p>
      <h2 id="channels-title">两个入口，一条地址，时间写清楚</h2>
      <p class="section-head__note">急事打电话，细节多发邮件。两条线都通向同一支客服团队。</p>
    </div>

    <div class="channels__grid">
      <article class="channel-main">
        <p class="channel-main__key">客服邮箱</p>
        <a class="channel-main__value" href="mailto:contact@bet-kaiyungame.com.cn">contact@bet-kaiyungame.com.cn</a>
        <p class="channel-main__note">这是站点客服邮箱，工作日 09:00–18:00 有专人回复，节假日可留言，我们将在下一个工作日处理。带上截图和联赛轮次，往往一轮沟通就能定位。</p>

        <div class="channel-main__divider" role="presentation"></div>

        <p class="channel-main__key">服务电话</p>
        <a class="channel-main__value channel-main__value--tel" href="tel:40084066253">400-8406-6253</a>
        <p class="channel-main__note">下载中断、收藏没同步、订阅提示收不到，这类急着用的情况电话更快。接通后先说联赛和球队，再讲现象，定位会明显缩短。</p>
      </article>

      <aside class="channel-side">
        <div class="window-card">
          <p class="window-card__label">人工回复时段</p>
          <p class="window-card__time">09:00 — 18:00</p>
          <p class="window-card__day">周一至周五</p>
          <p class="window-card__text">节假日与夜间收到的消息，会排在下一个工作日的第一批处理。</p>
        </div>
        <div class="quick-card">
          <p class="quick-card__label">先看看能不能自助解决</p>
          <p class="quick-card__text">下载失败、跨设备同步、订阅设置这几类问题，帮助问答里已经写好了分步排查路径，多数情况三步之内能自己走通。</p>
          <a class="quick-card__link" href="/faqs/">进入帮助问答 →</a>
        </div>
      </aside>
    </div>
  </section>

  <section class="prepare" id="prepare" aria-labelledby="prepare-title">
    <figure class="prepare__media">
      <img src="{zhanqunpic:h:700w:900}" width="900" height="700" loading="lazy" decoding="async" alt="账号、设备、联赛与问题截图组成的咨询准备清单图形">
      <figcaption class="prepare__caption">四样东西摆在一起，一条消息就能说清问题</figcaption>
    </figure>

    <div class="prepare__body">
      <p class="eyebrow">02 / 咨询准备</p>
      <h2 id="prepare-title">开口之前，先攒齐这四样</h2>
      <p class="prepare__lede">我们收到的咨询里，来回最多的往往不是问题难，而是信息缺一块。先把下面几项写在同一条消息里，处理会快得多。</p>

      <ol class="prepare-list">
        <li>
          <span class="prepare-list__num">01</span>
          <div>
            <h3>登录账号</h3>
            <p>用来登录的那串手机号或邮箱。收藏、订阅和筛选偏好都挂在这个账号下，没有它我们查不到你的专区状态。</p>
          </div>
        </li>
        <li>
          <span class="prepare-list__num">02</span>
          <div>
            <h3>设备情况</h3>
            <p>原来在哪台设备上用，现在换成了什么。换机之后的同步问题，多半出在这一步。</p>
          </div>
        </li>
        <li>
          <span class="prepare-list__num">03</span>
          <div>
            <h3>联赛与球队</h3>
            <p>具体到哪一轮、哪支球队、哪个版本。资料库覆盖足球、篮球等 12 个联赛，说清范围我们才找得准。</p>
          </div>
        </li>
        <li>
          <span class="prepare-list__num">04</span>
          <div>
            <h3>问题截图</h3>
            <p>报错提示、空白页面、下载进度卡住的位置，截一张比描述十句都直接。</p>
          </div>
        </li>
      </ol>

      <p class="prepare__tip">材料备齐后，发到 <a href="mailto:contact@bet-kaiyungame.com.cn">contact@bet-kaiyungame.com.cn</a>，或者直接在电话里讲。</p>
    </div>
  </section>

  <section class="routing" id="routing" aria-labelledby="routing-title">
    <div class="section-head">
      <p class="eyebrow">03 / 问题分流</p>
      <h2 id="routing-title">你的问题属于哪一类</h2>
      <p class="section-head__note">点下面的标签，直接跳到对应的处理说明，按那一类准备材料就行。</p>
    </div>

    <nav class="route-tabs" aria-label="问题分类">
      <a class="route-tab" href="#help-download">资料下载</a>
      <a class="route-tab" href="#help-sync">收藏与同步</a>
      <a class="route-tab" href="#help-subscribe">球队订阅</a>
      <a class="route-tab" href="#help-partner">合作与引用</a>
    </nav>

    <div class="route-cards">
      <article class="route-card" id="help-download">
        <p class="route-card__tag tag">资料下载</p>
        <h3>文件下不下来、打不开、对不上版本</h3>
        <p>赛前速览、赛后统计、射门分布、球队对比这几类资料都提供 PDF 与 CSV 两种格式。PDF 显示空白多半是阅读器版本问题，CSV 打开乱码通常是编码没选对，先换一个打开方式试；仍然不行，把资料名称和联赛轮次发给我们。</p>
        <p class="route-card__hint">需要准备：联赛名称 · 轮次 · 资料标题 · 文件格式</p>
        <a class="route-card__link" href="/app-download/">查看资料格式与版本记录 →</a>
      </article>

      <article class="route-card" id="help-sync">
        <p class="route-card__tag tag tag-volt">收藏与同步</p>
        <h3>换了设备，收藏没有跟过来</h3>
        <p>收藏和分组结构跟着账号走，换设备后重新登录就会回到原来的位置。如果没回来，先确认当前登录的是不是同一个账号，再看收藏夹里的联赛分组有没有被改动过。仍然对不上，把原设备和新设备型号一起告诉我们。</p>
        <p class="route-card__hint">需要准备：登录账号 · 原设备 · 新设备 · 涉及的联赛</p>
        <a class="route-card__link" href="/data-privacy/">了解账号同步涉及的信息 →</a>
      </article>

      <article class="route-card" id="help-subscribe">
        <p class="route-card__tag tag">球队订阅</p>
        <h3>订阅了球队，却没有收到更新提示</h3>
        <p>赛事专区支持同时关注最多 8 支球队，超出这个数量时新增的关注不会生效，先看看列表是不是已经满了。另外，订阅提示与账号绑定，换设备登录后也要重新确认一次通知权限。</p>
        <p class="route-card__hint">需要准备：关注球队列表 · 未收到提示的时间段 · 手机系统版本</p>
        <a class="route-card__link" href="/app-download/">设置移动端球队订阅 →</a>
      </article>

      <article class="route-card" id="help-partner">
        <p class="route-card__tag tag tag-heat">合作与引用</p>
        <h3>内容引用、专区接入、长期订阅咨询</h3>
        <p>需要在稿件中引用赛事资料、讨论专区接入，或者为团队统一配置订阅的，请发邮件到客服邮箱，写明机构名称、使用场景和期望时间。我们会在工作日内安排对应同事回复。</p>
        <p class="route-card__hint">需要准备：机构名称 · 使用场景 · 需要的资料类别 · 时间预期</p>
        <a class="route-card__link" href="/overview/">了解资料生产与团队分工 →</a>
      </article>
    </div>
  </section>

  <section class="rhythm" id="hours" aria-labelledby="rhythm-title">
    <div class="rhythm__head">
      <p class="eyebrow">04 / 回复节奏</p>
      <h2 id="rhythm-title">消息进来之后，是这样走的</h2>
      <p>工作日 09:00 到 18:00 有专人盯着邮箱和电话，节假日与夜间收到的留言顺延到下一个工作日。每一条都会有人接手，也会有人回到底。</p>
    </div>

    <ol class="rhythm__track">
      <li>
        <span class="rhythm__dot" aria-hidden="true"></span>
        <p class="rhythm__step">接收</p>
        <p class="rhythm__text">邮箱留言和电话记录当天汇总，按资料、同步、订阅、合作归类。</p>
      </li>
      <li>
        <span class="rhythm__dot" aria-hidden="true"></span>
        <p class="rhythm__step">定位</p>
        <p class="rhythm__text">对照账号状态、版本号和联赛轮次，确认问题出在哪一环。</p>
      </li>
      <li>
        <span class="rhythm__dot" aria-hidden="true"></span>
        <p class="rhythm__step">回复</p>
        <p class="rhythm__text">能远程解决的在邮件里给到步骤；需要补资料的，一次把清单列全。</p>
      </li>
      <li>
        <span class="rhythm__dot rhythm__dot--end" aria-hidden="true"></span>
        <p class="rhythm__step">跨节假日</p>
        <p class="rhythm__text">假期内收到的消息，在下一个工作日的头一批里处理。</p>
      </li>
    </ol>
  </section>

  <section class="address-bar" id="address" aria-labelledby="address-title">
    <div class="address-bar__main">
      <p class="eyebrow">05 / 联系地址</p>
      <h2 id="address-title">需要寄送材料时</h2>
      <p class="address-bar__value">贵州省贵阳市观山湖区长岭北路88号金融城3号楼17层</p>
    </div>
    <div class="address-bar__side">
      <p class="address-bar__label">寄送前请先联系</p>
      <p class="address-bar__text">寄出前打个电话或发封邮件，我们会告诉你材料怎么写、由谁签收，省得来回折腾。</p>
      <p class="address-bar__links">
        <a href="tel:40084066253">400-8406-6253</a>
        <a href="mailto:contact@bet-kaiyungame.com.cn">contact@bet-kaiyungame.com.cn</a>
      </p>
    </div>
  </section>

  <section class="closing" aria-labelledby="closing-title">
    <h2 id="closing-title">还没决定从哪开始？</h2>
    <p>先去下载中心挑一份你关注的联赛资料，看看版本与格式是否合用；或者到帮助问答里，按问题类型找到分步排查路径。两处都走不通，再来联系我们。</p>
    <div class="closing__actions">
      <a class="btn btn-primary" href="/app-download/">下载赛事资料</a>
      <a class="btn btn-ghost" href="/faqs/">查看帮助问答</a>
    </div>
  </section>
</main>