.page-contact {
  --contact-gap: clamp(16px, 3vw, 30px);
  --contact-rule: 1px solid var(--line);
  --card-ink: #3B3B33;
  background: var(--bg);
  color: var(--text);
  padding-top: calc(var(--header-h) + clamp(16px, 3vw, 32px));
}

.page-contact .contact-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0 0 14px;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(38px, 7vw, 86px);
  border-bottom: 1px solid var(--line-strong);
}

.page-contact .contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-contact .contact-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .24;
  filter: saturate(.5) contrast(1.05);
}

.page-contact .contact-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(228, 0, 43, .20), transparent 62%),
    linear-gradient(180deg, rgba(14, 42, 34, .82) 0%, rgba(14, 42, 34, .97) 72%);
}

.page-contact .contact-hero__inner {
  position: relative;
  z-index: 1;
}

.page-contact .breadcrumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-contact .display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.05rem, 6.4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}

.page-contact .contact-hero__copy .lede {
  max-width: 44ch;
  color: var(--cool);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  margin: 0 0 22px;
}

.page-contact .contact-hero__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-yellow);
  font-size: .82rem;
  color: var(--cool);
}

/* ---------- 联系牌 ---------- */
.page-contact .contact-card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--charcoal);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: var(--shadow-card);
}

.page-contact .contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--red) 0 38%, var(--yellow) 38% 100%);
}

.page-contact .contact-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  margin-bottom: 6px;
}

.page-contact .contact-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  letter-spacing: .02em;
  margin: 0;
  color: var(--ink-green);
}

.page-contact .contact-card__code {
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--maroon);
  opacity: .8;
}

.page-contact .contact-item {
  display: block;
  padding: 14px 0 15px;
  border-bottom: 1px solid rgba(20, 20, 20, .14);
}

.page-contact .contact-item__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .72;
  margin-bottom: 6px;
}

.page-contact .contact-item__value {
  display: inline-block;
  font-size: clamp(1rem, 2.3vw, 1.24rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-green);
  text-decoration: none;
  word-break: break-word;
}

.page-contact a.contact-item__value {
  border-bottom: 2px solid rgba(228, 0, 43, .26);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

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

.page-contact .contact-item__value--mono {
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}

.page-contact .contact-card__note {
  margin: 16px 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--card-ink);
}

/* ---------- 提交要点 ---------- */
.page-contact .contact-fields {
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-fields__head {
  max-width: 58ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-contact .contact-fields__lede {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

.page-contact .submit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-contact .submit-item {
  position: relative;
  background: var(--ink-green);
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 28px);
  border-left: 3px solid transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.page-contact .submit-item:hover {
  border-left-color: var(--yellow);
  background: var(--slate);
}

.page-contact .submit-item__num {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cyan);
  margin-bottom: 8px;
}

.page-contact .submit-item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--paper);
}

.page-contact .submit-item__text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.72;
  color: var(--cool);
}

/* ---------- 响应节奏 ---------- */
.page-contact .contact-service {
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-service__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-contact .contact-service__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line-strong);
}

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

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

.page-contact .service-item {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.page-contact .service-item:first-child {
  border-top: 1px solid var(--line-yellow);
}

.page-contact .service-item__key {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--yellow);
}

.page-contact .service-item__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.72;
  color: var(--cool);
}

/* ---------- 常见场景 ---------- */
.page-contact .contact-scenes {
  border-bottom: 1px solid var(--line);
}

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

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

.page-contact .scene-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-top: 1px solid var(--line);
  transition: background var(--t) var(--ease);
}

.page-contact .scene-item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-contact .scene-item:hover {
  background: rgba(201, 209, 206, .04);
}

.page-contact .scene-item__num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  font-size: .72rem;
  font-weight: 700;
  color: var(--cyan);
  margin-top: 2px;
}

.page-contact .scene-item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: .02em;
  margin: 0 0 6px;
  color: var(--paper);
}

.page-contact .scene-item__text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.72;
  color: var(--cool);
}

.page-contact .scene-item__link {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid var(--line-yellow);
  padding-bottom: 2px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-contact .scene-item__link:hover,
.page-contact .scene-item__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* ---------- 邮件与电话 ---------- */
.page-contact .contact-channel {
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-channel__head {
  max-width: 52ch;
  margin-bottom: clamp(22px, 3.4vw, 36px);
}

.page-contact .contact-channel__lede {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .channel-grid {
  display: grid;
  gap: clamp(14px, 2.4vw, 22px);
}

.page-contact .channel-card {
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}

.page-contact .channel-card--paper {
  background: var(--cream);
  color: var(--charcoal);
  box-shadow: var(--shadow-card);
}

.page-contact .channel-card--dark {
  background: var(--charcoal);
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--red);
}

.page-contact .channel-card__tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 4px 10px;
  border-radius: var(--pill);
  margin-bottom: 14px;
}

.page-contact .channel-card--paper .channel-card__tag {
  background: rgba(20, 20, 20, .08);
  color: var(--maroon);
}

.page-contact .channel-card--dark .channel-card__tag {
  background: rgba(255, 209, 0, .14);
  color: var(--yellow);
}

.page-contact .channel-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  letter-spacing: .02em;
  margin: 0 0 14px;
}

.page-contact .channel-card--paper .channel-card__title {
  color: var(--ink-green);
}

.page-contact .channel-card__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-contact .channel-card__list li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: .87rem;
  line-height: 1.65;
  border-top: 1px solid;
}

.page-contact .channel-card--paper .channel-card__list li {
  border-color: rgba(20, 20, 20, .12);
  color: var(--card-ink);
}

.page-contact .channel-card--dark .channel-card__list li {
  border-color: var(--line);
  color: var(--cool);
}

.page-contact .channel-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--red);
}

.page-contact .channel-card--dark .channel-card__list li::before {
  background: var(--cyan);
}

.page-contact .channel-card__mail {
  display: inline-block;
  font-size: clamp(.92rem, 2.2vw, 1.06rem);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  opacity: .92;
  transition: opacity var(--t) var(--ease);
}

.page-contact .channel-card--paper .channel-card__mail {
  color: var(--maroon);
}

.page-contact .channel-card--dark .channel-card__mail {
  color: var(--yellow);
}

.page-contact .channel-card__mail:hover,
.page-contact .channel-card__mail:focus-visible {
  opacity: 1;
}

/* ---------- 尾部提示带 ---------- */
.page-contact .contact-cta {
  background: var(--charcoal);
  border-top: 3px solid var(--yellow);
}

.page-contact .contact-cta__inner {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  padding-top: clamp(30px, 5vw, 58px);
  padding-bottom: clamp(30px, 5vw, 58px);
  align-items: center;
}

.page-contact .contact-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  letter-spacing: .01em;
  margin: 0 0 12px;
  color: var(--paper);
}

.page-contact .contact-cta__text {
  margin: 0 0 14px;
  max-width: 56ch;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--cool);
}

.page-contact .contact-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  font-size: .82rem;
}

.page-contact .contact-cta__links a {
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 209, 0, .35);
  padding-bottom: 1px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

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

.page-contact .contact-cta__btn {
  justify-self: start;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-contact .submit-list {
    grid-template-columns: 1fr 1fr;
  }

  .page-contact .channel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-contact .scene-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
  }

  .page-contact .scene-item__num {
    grid-row: auto;
    margin-top: 0;
  }

  .page-contact .scene-item__link {
    grid-column: 3;
    margin-top: 0;
    align-self: center;
  }

  .page-contact .contact-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-contact .contact-cta__btn {
    justify-self: end;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(32px, 5vw, 64px);
  }

  .page-contact .contact-service__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }

  .page-contact .service-item {
    grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr);
    gap: 4px 20px;
    align-items: baseline;
  }
}

@media (min-width: 1180px) {
  .page-contact .contact-card {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .submit-item,
  .page-contact .scene-item,
  .page-contact .scene-item__link,
  .page-contact .contact-cta__links a,
  .page-contact a.contact-item__value,
  .page-contact .channel-card__mail {
    transition: none;
  }
}


<main id="main-content" class="page-contact">
  <section class="contact-hero" aria-labelledby="contact-title">
    <div class="contact-hero__bg">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深色指挥中心里成排屏幕与红黄信号灯亮起的抽象氛围">
    </div>
    <div class="container contact-hero__inner">
      <nav class="breadcrumbs" aria-label="面包屑">
        <a href="/">首页</a>
        <span class="breadcrumbs__sep">/</span>
        <span aria-current="page">联系支持</span>
      </nav>

      <div class="contact-hero__grid">
        <div class="contact-hero__copy" data-reveal>
          <p class="eyebrow">CONTACT / 联系与支持</p>
          <h1 id="contact-title" class="display-xl">有问题，交给值守的编辑团队</h1>
          <p class="lede">
            赛前比对阵容、翻一条纪律记录、确认规则换了版本之后该怎么看，都可以直接找我们。
            宝威体育BVTY中国站的工作日 9:00-18:00 有专人接邮箱和电话，
            说清联赛与轮次，回复会快很多。
          </p>
          <p class="contact-hero__hint">
            <span class="tag">REPLY / 专人回复</span>
            赛事数据类问题，附上联赛与轮次信息即可。
          </p>
        </div>

        <aside class="contact-card" aria-label="联系方式" data-reveal data-reveal-delay="120">
          <div class="contact-card__head">
            <h2 class="contact-card__title">客服通道</h2>
            <span class="mono contact-card__code">BVTY / DESK 01</span>
          </div>

          <div class="contact-item">
            <span class="contact-item__label">EMAIL / 客服邮箱</span>
            <a class="contact-item__value contact-item__value--mono" href="mailto:support@yong-baowei.com.cn">support@yong-baowei.com.cn</a>
          </div>

          <div class="contact-item">
            <span class="contact-item__label">PHONE / 联系电话</span>
            <a class="contact-item__value contact-item__value--mono" href="tel:40055665280">400-5566-5280</a>
          </div>

          <div class="contact-item">
            <span class="contact-item__label">ADDRESS / 联系地址</span>
            <span class="contact-item__value">宁夏省银川市金凤区北京中路168号</span>
          </div>

          <div class="contact-item">
            <span class="contact-item__label">HOURS / 服务时间</span>
            <span class="contact-item__value contact-item__value--mono">工作日 9:00 – 18:00</span>
          </div>

          <p class="contact-card__note">
            该邮箱为站点客服邮箱，工作日 9:00-18:00 专人回复；
            赛事数据类问题请附联赛与轮次信息。
          </p>
        </aside>
      </div>
    </div>
  </section>

  <section class="section contact-fields" aria-labelledby="fields-title">
    <div class="container">
      <header class="contact-fields__head" data-reveal>
        <p class="eyebrow">CHECKLIST / 提交要点</p>
        <h2 id="fields-title" class="contact-h2">一条写清楚，少一次来回</h2>
        <p class="contact-fields__lede">
          同一个问题，写得具体和写得笼统，处理速度差很远。下面四项占了大半时间，
          顺手补齐，编辑团队就能直接定位到那一处。
        </p>
      </header>

      <ol class="submit-list">
        <li class="submit-item" data-reveal>
          <span class="submit-item__num mono">01</span>
          <h3 class="submit-item__title">联赛与轮次</h3>
          <p class="submit-item__text">是英超、西甲还是德甲，第几轮。三个联赛的册页各自独立，先定位联赛能直接跳到对应栏目。</p>
        </li>
        <li class="submit-item" data-reveal data-reveal-delay="80">
          <span class="submit-item__num mono">02</span>
          <h3 class="submit-item__title">球队或球员</h3>
          <p class="submit-item__text">写全队名或球员名；遇到同姓或者转会期的记录，补一个球衣号或位置，能省掉一轮确认。</p>
        </li>
        <li class="submit-item" data-reveal data-reveal-delay="160">
          <span class="submit-item__num mono">03</span>
          <h3 class="submit-item__title">看到的板块</h3>
          <p class="submit-item__text">伤停信息简体版、阵容变动大屏、红黄牌赛季册页、规则说明还是视频集锦，说清是哪一块。</p>
        </li>
        <li class="submit-item" data-reveal data-reveal-delay="240">
          <span class="submit-item__num mono">04</span>
          <h3 class="submit-item__title">现象与期望</h3>
          <p class="submit-item__text">当时看到的内容是什么样，您希望它是什么样。能截图就附上，或者写清从哪个联赛标签点进去的。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section contact-service" aria-labelledby="service-title">
    <div class="container contact-service__grid">
      <figure class="contact-service__figure" data-reveal>
        <img src="{zhanqunpic:h:800w:800}" width="800" height="800" loading="lazy" decoding="async" alt="蓝图纸网格上叠放着奶油色联系卡片的抽象构图">
      </figure>

      <div class="contact-service__body" data-reveal data-reveal-delay="120">
        <p class="eyebrow">RESPONSE / 响应节奏</p>
        <h2 id="service-title" class="contact-h2">工作日有人值守，开赛前也会看</h2>
        <ul class="service-list">
          <li class="service-item">
            <span class="service-item__key mono">9:00 – 18:00</span>
            <p class="service-item__text">工作日由专人回复邮件与接听电话，当天收到的邮件当天处理。</p>
          </li>
          <li class="service-item">
            <span class="service-item__key mono">MATCHDAY</span>
            <p class="service-item__text">联赛轮次密集的那几天咨询量集中，非临场的问题可能顺延到下一个工作日，早一天发更稳。</p>
          </li>
          <li class="service-item">
            <span class="service-item__key mono">VERSION</span>
            <p class="service-item__text">规则说明改版之后的疑问，请注明赛季，例如 2024/25，方便对应到具体的册页与版本。</p>
          </li>
          <li class="service-item">
            <span class="service-item__key mono">18 人 / 3 组</span>
            <p class="service-item__text">数据编辑团队按英超、西甲、德甲分组，另设一名版本校对编辑统一处理规则类问题。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section contact-scenes" aria-labelledby="scenes-title">
    <div class="container">
      <header class="contact-scenes__head" data-reveal>
        <p class="eyebrow">SCENES / 常见场景</p>
        <h2 id="scenes-title" class="contact-h2">大家通常为这些事来信</h2>
      </header>

      <ul class="scene-list">
        <li class="scene-item" data-reveal>
          <span class="scene-item__num mono">A</span>
          <div class="scene-item__body">
            <h3 class="scene-item__title">规则版本对不上</h3>
            <p class="scene-item__text">焕新版规则说明与旧版逐条并列，差异项单独标出；看哪一列、哪个赛季适用，说一声就能指到位。</p>
          </div>
          <a class="scene-item__link" href="/knowledge/">去看知识中心</a>
        </li>
        <li class="scene-item" data-reveal data-reveal-delay="60">
          <span class="scene-item__num mono">B</span>
          <div class="scene-item__body">
            <h3 class="scene-item__title">某条红黄牌记录找不到</h3>
            <p class="scene-item__text">按球员和球队双维度都能检索，还能叠加赛季与联赛。搜索没结果时，把检索条件发过来，我们回查册页。</p>
          </div>
          <a class="scene-item__link" href="/solutions/">查看数据方案</a>
        </li>
        <li class="scene-item" data-reveal data-reveal-delay="120">
          <span class="scene-item__num mono">C</span>
          <div class="scene-item__body">
            <h3 class="scene-item__title">阵容变动标签读不懂</h3>
            <p class="scene-item__text">大屏上阵容卡片跟着比分一起滚动，标签含义、更新时间与比分刷新节奏的关系，可以一次问清楚。</p>
          </div>
          <a class="scene-item__link" href="/solutions/">查看数据方案</a>
        </li>
        <li class="scene-item" data-reveal data-reveal-delay="180">
          <span class="scene-item__num mono">D</span>
          <div class="scene-item__body">
            <h3 class="scene-item__title">伤停信息什么时候更新</h3>
            <p class="scene-item__text">每轮联赛开赛前 30 分钟更新简体版。想确认某一轮的具体时间点，把联赛和轮次发来即可。</p>
          </div>
          <a class="scene-item__link" href="/topics/">查看专题中心</a>
        </li>
        <li class="scene-item" data-reveal data-reveal-delay="240">
          <span class="scene-item__num mono">E</span>
          <div class="scene-item__body">
            <h3 class="scene-item__title">内容与数据合作</h3>
            <p class="scene-item__text">球队内容运营、联赛内容编辑团队想引用赛季纪律数据或共建栏目，写明用途与周期，会转给对应的同事。</p>
          </div>
          <a class="scene-item__link" href="/overview/">了解品牌总览</a>
        </li>
        <li class="scene-item" data-reveal data-reveal-delay="300">
          <span class="scene-item__num mono">F</span>
          <div class="scene-item__body">
            <h3 class="scene-item__title">个人信息与转载</h3>
            <p class="scene-item__text">邮件里能不能写个人信息、集锦与数据内容怎么引用，条款里都写明了；找不到的段落可以直接问。</p>
          </div>
          <a class="scene-item__link" href="/privacy/">阅读隐私政策</a>
        </li>
      </ul>
    </div>
  </section>

  <section class="section contact-channel" aria-labelledby="channel-title">
    <div class="container">
      <header class="contact-channel__head" data-reveal>
        <p class="eyebrow">EMAIL OR CALL / 怎么选</p>
        <h2 id="channel-title" class="contact-h2">邮件说事，电话问路</h2>
        <p class="contact-channel__lede">两种方式都有人值守，区别只在您要留下什么。</p>
      </header>

      <div class="channel-grid">
        <article class="channel-card channel-card--paper" data-reveal>
          <span class="channel-card__tag mono">EMAIL</span>
          <h3 class="channel-card__title">需要附材料、留记录</h3>
          <ul class="channel-card__list">
            <li>截图、多轮往返、涉及好几条记录的问题</li>
            <li>希望把答复留档，转给团队其他人看</li>
            <li>非紧急，晚一点回复也不影响赛前准备</li>
            <li>赛季数据引用与合作类咨询</li>
          </ul>
          <a class="channel-card__mail contact-item__value--mono" href="mailto:support@yong-baowei.com.cn">support@yong-baowei.com.cn</a>
        </article>

        <article class="channel-card channel-card--dark" data-reveal data-reveal-delay="120">
          <span class="channel-card__tag mono">PHONE</span>
          <h3 class="channel-card__title">要一句话听明白</h3>
          <ul class="channel-card__list">
            <li>某个标签、某个字段看不懂，想当场问清</li>
            <li>开赛前时间紧，需要一个方向而不是一份说明</li>
            <li>不确定该走哪个板块，先问一句再动手</li>
            <li>邮件里说不清的路径问题，电话三步能讲完</li>
          </ul>
          <a class="channel-card__mail contact-item__value--mono" href="tel:40055665280">400-5566-5280</a>
        </article>
      </div>
    </div>
  </section>

  <section class="contact-cta" aria-labelledby="cta-title">
    <div class="container contact-cta__inner" data-reveal>
      <div class="contact-cta__copy">
        <h2 id="cta-title" class="contact-cta__title">想先自己翻一翻，也完全行</h2>
        <p class="contact-cta__text">
          90 多条规则与使用问答、六个赛季的册页、三大联赛的赛前情报，多数问题翻两下就有答案。
          翻不到再找我们，省时也省事。
        </p>
        <p class="contact-cta__links">
          <a href="/knowledge/">知识中心</a>
          <a href="/solutions/">数据方案</a>
          <a href="/agreement/">用户协议</a>
        </p>
      </div>
      <a class="btn btn--signal contact-cta__btn" href="/">径直入口</a>
    </div>
  </section>
</main>

.page-contact {
  --contact-gap: clamp(16px, 3vw, 30px);
  --contact-rule: 1px solid var(--line);
  --card-ink: #3B3B33;
  background: var(--bg);
  color: var(--text);
  padding-top: calc(var(--header-h) + clamp(16px, 3vw, 32px));
}

.page-contact .contact-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0 0 14px;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(38px, 7vw, 86px);
  border-bottom: 1px solid var(--line-strong);
}

.page-contact .contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-contact .contact-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .24;
  filter: saturate(.5) contrast(1.05);
}

.page-contact .contact-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(228, 0, 43, .20), transparent 62%),
    linear-gradient(180deg, rgba(14, 42, 34, .82) 0%, rgba(14, 42, 34, .97) 72%);
}

.page-contact .contact-hero__inner {
  position: relative;
  z-index: 1;
}

.page-contact .breadcrumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-contact .display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.05rem, 6.4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}

.page-contact .contact-hero__copy .lede {
  max-width: 44ch;
  color: var(--cool);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  margin: 0 0 22px;
}

.page-contact .contact-hero__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-yellow);
  font-size: .82rem;
  color: var(--cool);
}

/* ---------- 联系牌 ---------- */
.page-contact .contact-card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--charcoal);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: var(--shadow-card);
}

.page-contact .contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--red) 0 38%, var(--yellow) 38% 100%);
}

.page-contact .contact-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  margin-bottom: 6px;
}

.page-contact .contact-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  letter-spacing: .02em;
  margin: 0;
  color: var(--ink-green);
}

.page-contact .contact-card__code {
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--maroon);
  opacity: .8;
}

.page-contact .contact-item {
  display: block;
  padding: 14px 0 15px;
  border-bottom: 1px solid rgba(20, 20, 20, .14);
}

.page-contact .contact-item__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .72;
  margin-bottom: 6px;
}

.page-contact .contact-item__value {
  display: inline-block;
  font-size: clamp(1rem, 2.3vw, 1.24rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-green);
  text-decoration: none;
  word-break: break-word;
}

.page-contact a.contact-item__value {
  border-bottom: 2px solid rgba(228, 0, 43, .26);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

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

.page-contact .contact-item__value--mono {
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}

.page-contact .contact-card__note {
  margin: 16px 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--card-ink);
}

/* ---------- 提交要点 ---------- */
.page-contact .contact-fields {
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-fields__head {
  max-width: 58ch;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-contact .contact-fields__lede {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

.page-contact .submit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-contact .submit-item {
  position: relative;
  background: var(--ink-green);
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 28px);
  border-left: 3px solid transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.page-contact .submit-item:hover {
  border-left-color: var(--yellow);
  background: var(--slate);
}

.page-contact .submit-item__num {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cyan);
  margin-bottom: 8px;
}

.page-contact .submit-item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--paper);
}

.page-contact .submit-item__text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.72;
  color: var(--cool);
}

/* ---------- 响应节奏 ---------- */
.page-contact .contact-service {
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-service__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-contact .contact-service__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line-strong);
}

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

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

.page-contact .service-item {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.page-contact .service-item:first-child {
  border-top: 1px solid var(--line-yellow);
}

.page-contact .service-item__key {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--yellow);
}

.page-contact .service-item__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.72;
  color: var(--cool);
}

/* ---------- 常见场景 ---------- */
.page-contact .contact-scenes {
  border-bottom: 1px solid var(--line);
}

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

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

.page-contact .scene-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-top: 1px solid var(--line);
  transition: background var(--t) var(--ease);
}

.page-contact .scene-item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-contact .scene-item:hover {
  background: rgba(201, 209, 206, .04);
}

.page-contact .scene-item__num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--pill);
  border: 1px solid var(--line-strong);
  font-size: .72rem;
  font-weight: 700;
  color: var(--cyan);
  margin-top: 2px;
}

.page-contact .scene-item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: .02em;
  margin: 0 0 6px;
  color: var(--paper);
}

.page-contact .scene-item__text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.72;
  color: var(--cool);
}

.page-contact .scene-item__link {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid var(--line-yellow);
  padding-bottom: 2px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-contact .scene-item__link:hover,
.page-contact .scene-item__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* ---------- 邮件与电话 ---------- */
.page-contact .contact-channel {
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-channel__head {
  max-width: 52ch;
  margin-bottom: clamp(22px, 3.4vw, 36px);
}

.page-contact .contact-channel__lede {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--muted);
}

.page-contact .channel-grid {
  display: grid;
  gap: clamp(14px, 2.4vw, 22px);
}

.page-contact .channel-card {
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}

.page-contact .channel-card--paper {
  background: var(--cream);
  color: var(--charcoal);
  box-shadow: var(--shadow-card);
}

.page-contact .channel-card--dark {
  background: var(--charcoal);
  color: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--red);
}

.page-contact .channel-card__tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 4px 10px;
  border-radius: var(--pill);
  margin-bottom: 14px;
}

.page-contact .channel-card--paper .channel-card__tag {
  background: rgba(20, 20, 20, .08);
  color: var(--maroon);
}

.page-contact .channel-card--dark .channel-card__tag {
  background: rgba(255, 209, 0, .14);
  color: var(--yellow);
}

.page-contact .channel-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  letter-spacing: .02em;
  margin: 0 0 14px;
}

.page-contact .channel-card--paper .channel-card__title {
  color: var(--ink-green);
}

.page-contact .channel-card__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-contact .channel-card__list li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: .87rem;
  line-height: 1.65;
  border-top: 1px solid;
}

.page-contact .channel-card--paper .channel-card__list li {
  border-color: rgba(20, 20, 20, .12);
  color: var(--card-ink);
}

.page-contact .channel-card--dark .channel-card__list li {
  border-color: var(--line);
  color: var(--cool);
}

.page-contact .channel-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--red);
}

.page-contact .channel-card--dark .channel-card__list li::before {
  background: var(--cyan);
}

.page-contact .channel-card__mail {
  display: inline-block;
  font-size: clamp(.92rem, 2.2vw, 1.06rem);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  opacity: .92;
  transition: opacity var(--t) var(--ease);
}

.page-contact .channel-card--paper .channel-card__mail {
  color: var(--maroon);
}

.page-contact .channel-card--dark .channel-card__mail {
  color: var(--yellow);
}

.page-contact .channel-card__mail:hover,
.page-contact .channel-card__mail:focus-visible {
  opacity: 1;
}

/* ---------- 尾部提示带 ---------- */
.page-contact .contact-cta {
  background: var(--charcoal);
  border-top: 3px solid var(--yellow);
}

.page-contact .contact-cta__inner {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  padding-top: clamp(30px, 5vw, 58px);
  padding-bottom: clamp(30px, 5vw, 58px);
  align-items: center;
}

.page-contact .contact-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  letter-spacing: .01em;
  margin: 0 0 12px;
  color: var(--paper);
}

.page-contact .contact-cta__text {
  margin: 0 0 14px;
  max-width: 56ch;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--cool);
}

.page-contact .contact-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  font-size: .82rem;
}

.page-contact .contact-cta__links a {
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 209, 0, .35);
  padding-bottom: 1px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

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

.page-contact .contact-cta__btn {
  justify-self: start;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-contact .submit-list {
    grid-template-columns: 1fr 1fr;
  }

  .page-contact .channel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-contact .scene-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
  }

  .page-contact .scene-item__num {
    grid-row: auto;
    margin-top: 0;
  }

  .page-contact .scene-item__link {
    grid-column: 3;
    margin-top: 0;
    align-self: center;
  }

  .page-contact .contact-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-contact .contact-cta__btn {
    justify-self: end;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(32px, 5vw, 64px);
  }

  .page-contact .contact-service__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }

  .page-contact .service-item {
    grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr);
    gap: 4px 20px;
    align-items: baseline;
  }
}

@media (min-width: 1180px) {
  .page-contact .contact-card {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .submit-item,
  .page-contact .scene-item,
  .page-contact .scene-item__link,
  .page-contact .contact-cta__links a,
  .page-contact a.contact-item__value,
  .page-contact .channel-card__mail {
    transition: none;
  }
}