.page-contact {
  --contact-gap: clamp(18px, 3vw, 32px);
}

.page-contact .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  margin: 0 0 clamp(18px, 4vw, 34px);
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-contact .crumbs li + li::before {
  content: "/";
  margin-right: 0.5em;
  color: var(--line);
}

.page-contact .crumbs a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-contact .crumbs a:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- hero ---------- */
.page-contact .contact-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
  padding-bottom: clamp(40px, 7vw, 84px);
  border-bottom: 1px solid var(--line-soft);
}

.page-contact .contact-hero-copy .h-display {
  margin: 0.35em 0 0.6em;
}

.page-contact .contact-hero-copy .lede {
  max-width: 44ch;
}

.page-contact .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-contact .contact-hero-panel {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-contact .contact-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 70%);
}

.page-contact .panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.page-contact .panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(47, 227, 194, 0.16);
}

.page-contact .panel-time {
  margin: 18px 0 8px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.04em;
  color: var(--ice);
}

.page-contact .panel-desc {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-contact .panel-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.page-contact .panel-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.page-contact .panel-list dt {
  font-size: 13px;
  color: var(--ice);
}

.page-contact .panel-list dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan-soft);
  text-align: right;
}

/* ---------- shared section bits ---------- */
.page-contact .section-sub {
  max-width: 52ch;
  margin: 0.6em 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- channels ---------- */
.page-contact .channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-contact .channel {
  padding: clamp(20px, 3vw, 28px);
  background: var(--panel);
  transition: background 0.25s var(--ease);
}

.page-contact .channel:hover {
  background: var(--navy);
}

.page-contact .channel-label {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

.page-contact .channel-value {
  display: block;
  font-size: clamp(0.95rem, 2.4vw, 1.12rem);
  line-height: 1.4;
  color: var(--cyan);
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-contact a.channel-value:hover {
  color: var(--cyan-soft);
  border-bottom-color: var(--cyan-soft);
}

.page-contact .channel-value--text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ice);
  word-break: normal;
}

.page-contact .channel-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

.page-contact .figure {
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.page-contact .figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--panel);
}

.page-contact .figure--overview img {
  aspect-ratio: 3 / 2;
}

.page-contact .figure--mail img {
  aspect-ratio: 4 / 3;
}

.page-contact .figure .media-cap {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mist-dim);
}

/* ---------- mail split ---------- */
.page-contact .mail-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 56px);
}

.page-contact .mail-block p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .mail-block .h2 {
  margin: 0.4em 0 0.7em;
}

.page-contact .subject-list {
  display: grid;
  gap: 1px;
  margin-top: 26px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-contact .subject {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--navy);
}

.page-contact .subject-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ice);
  word-break: break-word;
}

.page-contact .urgent-card {
  padding: clamp(22px, 3.2vw, 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius);
}

.page-contact .urgent-tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--coral);
  border: 1px solid var(--coral);
  border-radius: 999px;
}

.page-contact .urgent-title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ice);
}

.page-contact .urgent-foot {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--coral);
}

/* ---------- hours ---------- */
.page-contact .hours-dial {
  margin-top: clamp(26px, 4vw, 42px);
  padding: clamp(22px, 3.2vw, 34px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-contact .hours-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist);
}

.page-contact .hours-range {
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  letter-spacing: 0.06em;
  color: var(--ice);
}

.page-contact .hours-track {
  position: relative;
  height: 6px;
  background: var(--panel);
  border-radius: 999px;
  overflow: hidden;
}

.page-contact .hours-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(47, 227, 194, 0.35), var(--cyan));
  border-radius: 999px;
}

.page-contact .hours-mark {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 14px;
  background: var(--line);
  transform: translateX(-50%);
}

.page-contact .hours-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--mist-dim);
}

.page-contact .route-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-contact .route {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page-contact .route-num {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.page-contact .route-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ice);
}

.page-contact .route p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .route a {
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}

.page-contact .route a:hover {
  border-bottom-color: var(--cyan);
}

/* ---------- cooperation ---------- */
.page-contact .coop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}

.page-contact .coop-intro .h2 {
  margin: 0.4em 0 0.7em;
}

.page-contact .coop-intro p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  margin: 0 0 26px;
}

.page-contact .coop-steps {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-contact .coop-step {
  padding: clamp(18px, 2.6vw, 24px);
  background: var(--panel);
}

.page-contact .coop-step-num {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}

.page-contact .coop-step h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ice);
}

.page-contact .coop-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- shortcuts ---------- */
.page-contact .shortcut-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
  margin-top: clamp(26px, 4vw, 40px);
}

.page-contact .shortcut {
  position: relative;
  display: block;
  padding: clamp(20px, 3vw, 30px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.page-contact .shortcut:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-contact .shortcut-tag {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mist-dim);
}

.page-contact .shortcut h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ice);
}

.page-contact .shortcut p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .shortcut-go {
  display: inline-block;
  margin-top: 18px;
  font-size: 16px;
  color: var(--cyan);
}

/* ---------- site info ---------- */
.page-contact .site-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
}

.page-contact .site-info-grid .h2 {
  margin: 0.4em 0 0.7em;
}

.page-contact .site-info-grid p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  margin: 0;
}

.page-contact .info-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.page-contact .info-list > div {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-contact .info-list dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

.page-contact .info-list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ice);
  word-break: break-word;
}

.page-contact .legal-strip {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 10px;
}

.page-contact .legal-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .legal-line a {
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}

.page-contact .legal-line a:hover {
  border-bottom-color: var(--cyan);
}

.page-contact .legal-line--muted {
  color: var(--coral);
}

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .coop-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .route-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-contact .info-list > div {
    grid-template-columns: 120px 1fr;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
  }
  .page-contact .contact-hero-panel {
    margin-top: 0;
  }
  .page-contact .mail-split-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .page-contact .coop-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .page-contact .shortcut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-contact .site-info-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
  .page-contact .coop-steps {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1100px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .page-contact .coop-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .shortcut,
  .page-contact .channel {
    transition: none;
  }
  .page-contact .shortcut:hover {
    transform: none;
  }
}

<main id="main-content" class="page-contact">
  <nav class="crumbs wrap" aria-label="面包屑">
    <ol>
      <li><a href="/">首页</a></li>
      <li aria-current="page">服务联络</li>
    </ol>
  </nav>

  <section class="contact-hero wrap" data-reveal>
    <div class="contact-hero-copy">
      <p class="eyebrow">CONTACT · 服务联络</p>
      <h1 class="h-display">入口打不开、数据对不上，<br>都有人接</h1>
      <p class="lede">乐鱼赛场把观赛入口、赛后统计和合作洽谈拆成三条清楚的联络线。你不用猜该找谁，写清场次和问题，我们按类别分派。工作日 9:00–21:00 持续有人看，紧急的事在邮件标题写「加急」会被优先挑出来。</p>
      <div class="hero-actions">
        <a class="btn btn--primary" href="mailto:service@sports-leyu-zh.com.cn">写信给客服</a>
        <a class="btn btn--ghost" href="#hours">看服务时段</a>
      </div>
    </div>

    <aside class="contact-hero-panel" aria-label="服务窗口概览">
      <div class="panel-head">
        <span class="panel-dot" aria-hidden="true"></span>
        <span class="mono">SERVICE WINDOW</span>
      </div>
      <p class="panel-time mono">09:00 — 21:00</p>
      <p class="panel-desc">工作日持续受理，非工作时段送来的消息会在下一个工作日排进处理队列。</p>
      <dl class="panel-list">
        <div>
          <dt>入口与观赛</dt>
          <dd>客服邮箱 / 电话</dd>
        </div>
        <div>
          <dt>赛果与统计</dt>
          <dd>客服邮箱 + 场次</dd>
        </div>
        <div>
          <dt>合作与媒体</dt>
          <dd>通用联络邮箱</dd>
        </div>
      </dl>
    </aside>
  </section>

  <section class="section contact-channels" id="channels" data-reveal>
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">CHANNELS · 联络渠道</p>
        <h2 class="h2">四个入口，按用途分开写</h2>
        <p class="section-sub">同一件事写错邮箱要多绕一圈。看看哪个最贴近你要办的事。</p>
      </div>

      <div class="channel-grid">
        <article class="channel">
          <p class="channel-label mono">01 · 客服邮箱</p>
          <a class="channel-value mono" href="mailto:service@sports-leyu-zh.com.cn">service@sports-leyu-zh.com.cn</a>
          <p class="channel-note">观赛入口打不开、赛况加载异常、提醒没收到，写这里。工作日 9:00–21:00 内回复。</p>
        </article>

        <article class="channel">
          <p class="channel-label mono">02 · 通用联络</p>
          <a class="channel-value mono" href="mailto:support@sports-leyu-zh.com.cn">support@sports-leyu-zh.com.cn</a>
          <p class="channel-note">媒体采访、场馆协作、青训机构与数据服务商的合作洽谈，从这个邮箱进来。</p>
        </article>

        <article class="channel">
          <p class="channel-label mono">03 · 服务电话</p>
          <a class="channel-value mono" href="tel:40088443890">400-8844-3890</a>
          <p class="channel-note">适合需要边说边指的场合，比如入口在哪、多场同屏怎么摆、提醒怎么开。</p>
        </article>

        <article class="channel">
          <p class="channel-label mono">04 · 联系地址</p>
          <p class="channel-value channel-value--text">宁夏省银川市金凤区北京中路168号</p>
          <p class="channel-note">寄送材料或书面信函请使用这个地址，收件人写明「乐鱼赛场 服务联络」。</p>
        </article>
      </div>

      <figure class="figure figure--overview">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="以仪表盘刻度呈现的服务时段与三条联络路径示意" loading="lazy" decoding="async">
        <figcaption class="media-cap">时段、渠道与响应顺序放在一起看，能更快决定写哪一封、打哪一个电话。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section mail-split" id="mail" data-reveal>
    <div class="wrap mail-split-grid">
      <div class="mail-block">
        <p class="eyebrow">MAIL · 邮件怎么写</p>
        <h2 class="h2">标题写清楚，处理快一半</h2>
        <p>格式不用多正式，但一封信息齐全的邮件确实处理得更快。至少写清三件事：你在哪个页面、看的是哪场比赛、希望我们做什么。附上场次时间、联赛名称和设备型号，能省掉一轮来回。</p>

        <div class="subject-list">
          <div class="subject">
            <span class="tag tag--muted">入口问题</span>
            <p class="subject-text mono">【入口】移动端无法打开 + 设备型号与系统版本</p>
          </div>
          <div class="subject">
            <span class="tag tag--muted">数据反馈</span>
            <p class="subject-text mono">【统计】某场赛后数据与我看到的不一致 + 场次时间</p>
          </div>
          <div class="subject">
            <span class="tag tag--muted">提醒设置</span>
            <p class="subject-text mono">【提醒】未收到开赛提醒 + 已收藏的联赛名称</p>
          </div>
          <div class="subject">
            <span class="tag tag--muted">合作洽谈</span>
            <p class="subject-text mono">【合作】机构类型 + 所在区域 + 希望协作的内容方向</p>
          </div>
        </div>
      </div>

      <div class="mail-block">
        <div class="urgent-card">
          <p class="urgent-tag">加急</p>
          <h3 class="urgent-title">紧急问题，请写进邮件标题</h3>
          <p>比赛正在进行、入口进不去、数据明显异常这类有时效压力的情况，把「加急」两个字放进标题，会进优先处理队列。正文仍请写清场次与设备信息，免得我们回头再问一遍。</p>
          <p class="urgent-foot mono">工作日 09:00–21:00 内回复</p>
        </div>

        <figure class="figure figure--mail">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="邮件加急标签与索引卡片叠放的抽象图形，强调标题优先处理" loading="lazy" decoding="async">
          <figcaption class="media-cap">标注「加急」的邮件会被单独挑出，与常规咨询分开排队。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section hours-band" id="hours" data-reveal>
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">HOURS · 服务时间</p>
        <h2 class="h2">工作日 9:00 到 21:00，持续有人看</h2>
        <p class="section-sub">非工作时段送来的消息不会丢，会排进下一个工作日的处理队列。</p>
      </div>

      <div class="hours-dial">
        <div class="hours-head">
          <span class="mono hours-label">工作日服务窗口</span>
          <span class="mono hours-range">09:00 — 21:00</span>
        </div>
        <div class="hours-track" role="img" aria-label="工作日服务时间从早上九点到晚上九点">
          <span class="hours-fill"></span>
          <span class="hours-mark" style="left:0%"></span>
          <span class="hours-mark" style="left:25%"></span>
          <span class="hours-mark" style="left:50%"></span>
          <span class="hours-mark" style="left:75%"></span>
          <span class="hours-mark" style="left:100%"></span>
        </div>
        <div class="hours-scale mono">
          <span>09:00</span>
          <span>12:00</span>
          <span>15:00</span>
          <span>18:00</span>
          <span>21:00</span>
        </div>
      </div>

      <div class="route-grid">
        <article class="route">
          <p class="route-num mono">ROUTE 01</p>
          <h3 class="route-title">入口与观赛</h3>
          <p>第一次找入口、移动端手势不熟、多场同屏不会配，先打电话或用客服邮箱。<a href="/tutorial/">观赛教程</a>按步骤拆开讲过，自己看也快。</p>
        </article>
        <article class="route">
          <p class="route-num mono">ROUTE 02</p>
          <h3 class="route-title">赛果与统计</h3>
          <p>比分、射门、篮板、犯规这类数据和你看到的不一致，把场次时间和联赛名称发到客服邮箱。<a href="/articles/">赛事专题</a>里也能按日期翻到该场复盘。</p>
        </article>
        <article class="route">
          <p class="route-num mono">ROUTE 03</p>
          <h3 class="route-title">合作与媒体</h3>
          <p>区域体育媒体、场馆运营方、青训机构与数据服务商走通用联络邮箱，邮件里写清机构类型、覆盖区域和想做内容的方向。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section coop" id="coop" data-reveal>
    <div class="wrap coop-grid">
      <div class="coop-intro">
        <p class="eyebrow">COOPERATION · 合作咨询</p>
        <h2 class="h2">把合作谈成一条能落地的路径</h2>
        <p>我们已与 18 家区域体育媒体、26 家场馆运营方建立内容协作，形式围绕赛事信息、现场内容与数据展开。第一次接触时按下面四步把信息给到，第一封回信就能进入正题。</p>
        <a class="btn btn--primary" href="mailto:support@sports-leyu-zh.com.cn">发起合作邮件</a>
      </div>

      <ol class="coop-steps">
        <li class="coop-step">
          <span class="coop-step-num mono">STEP 01</span>
          <h3>说明机构类型</h3>
          <p>先讲清贵方是媒体、场馆、青训机构还是数据服务商，我们判断对接方向会更快。</p>
        </li>
        <li class="coop-step">
          <span class="coop-step-num mono">STEP 02</span>
          <h3>给出覆盖区域</h3>
          <p>平台服务覆盖 31 个省级区域，写明贵方所在的省市，便于判断内容协作的落点。</p>
        </li>
        <li class="coop-step">
          <span class="coop-step-num mono">STEP 03</span>
          <h3>描述内容方向</h3>
          <p>想做的是一场赛事的信息共享、长期联赛观察，还是现场内容与数据互补，说清楚就够。</p>
        </li>
        <li class="coop-step">
          <span class="coop-step-num mono">STEP 04</span>
          <h3>留下回信方式</h3>
          <p>写清接收回信的邮箱与可联络时段，我们会按工作日的节奏安排后续沟通。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section shortcuts" id="shortcuts" data-reveal>
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">SHORTCUTS · 常见问题去哪儿</p>
        <h2 class="h2">有些问题，自己看比等回信更快</h2>
      </div>

      <div class="shortcut-grid">
        <a class="shortcut" href="/tutorial/">
          <p class="shortcut-tag mono">入口与操作</p>
          <h3>第一次找赛事入口</h3>
          <p>从导航栏「赛事」进入，到移动端手势与提醒设置，一条线走完。</p>
          <span class="shortcut-go" aria-hidden="true">→</span>
        </a>
        <a class="shortcut" href="/articles/">
          <p class="shortcut-tag mono">数据与专题</p>
          <h3>赛后统计与周末安排</h3>
          <p>按日期轴翻双场时间线，也能找到该场统计复盘与赛程变更。</p>
          <span class="shortcut-go" aria-hidden="true">→</span>
        </a>
        <a class="shortcut" href="/apps/">
          <p class="shortcut-tag mono">移动端</p>
          <h3>观赛应用说明</h3>
          <p>iOS、Android 与 H5 三种入口，多场同屏、收藏联赛和提醒设置都在这里。</p>
          <span class="shortcut-go" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section site-info" id="site-info" data-reveal>
    <div class="wrap">
      <div class="site-info-grid">
        <div>
          <p class="eyebrow">SITE · 站点信息</p>
          <h2 class="h2">备案与站点信息</h2>
          <p>乐鱼赛场通过 sports-leyu-zh.com.cn 对外提供赛事信息与观赛服务。下面几项可以直接查证。</p>
        </div>

        <dl class="info-list">
          <div>
            <dt>域名</dt>
            <dd class="mono">sports-leyu-zh.com.cn</dd>
          </div>
          <div>
            <dt>备案号</dt>
            <dd class="mono">宁ICP备74542520号-3</dd>
          </div>
          <div>
            <dt>客服邮箱</dt>
            <dd class="mono">service@sports-leyu-zh.com.cn</dd>
          </div>
          <div>
            <dt>服务时间</dt>
            <dd>工作日 9:00–21:00 内回复</dd>
          </div>
        </dl>
      </div>

      <div class="legal-strip">
        <p class="legal-line">个人信息如何处理、Cookie 与本地存储怎么用，见<a href="/privacy/">隐私政策</a>。</p>
        <p class="legal-line">内容时效、数据参考范围与第三方链接的责任说明，见<a href="/statement/">使用说明</a>。</p>
        <p class="legal-line legal-line--muted">紧急问题请在邮件标题注明「加急」。</p>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --contact-gap: clamp(18px, 3vw, 32px);
}

.page-contact .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  margin: 0 0 clamp(18px, 4vw, 34px);
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-contact .crumbs li + li::before {
  content: "/";
  margin-right: 0.5em;
  color: var(--line);
}

.page-contact .crumbs a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-contact .crumbs a:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-contact .contact-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
  padding-bottom: clamp(40px, 7vw, 84px);
  border-bottom: 1px solid var(--line-soft);
}

.page-contact .contact-hero-copy .h-display {
  margin: 0.35em 0 0.6em;
}

.page-contact .contact-hero-copy .lede {
  max-width: 46ch;
}

.page-contact .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-contact .contact-hero-panel {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-contact .contact-hero-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 72%);
}

.page-contact .panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mist);
}

.page-contact .panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(47, 227, 194, 0.16);
}

.page-contact .panel-time {
  margin: 18px 0 8px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.04em;
  color: var(--ice);
}

.page-contact .panel-desc {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-contact .panel-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.page-contact .panel-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.page-contact .panel-list dt {
  font-size: 13px;
  color: var(--ice);
}

.page-contact .panel-list dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan-soft);
  text-align: right;
}

.page-contact .section-sub {
  max-width: 52ch;
  margin: 0.6em 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-contact .channel {
  padding: clamp(20px, 3vw, 28px);
  background: var(--panel);
  transition: background 0.25s var(--ease);
}

.page-contact .channel:hover {
  background: var(--navy);
}

.page-contact .channel-label {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

.page-contact .channel-value {
  display: block;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  line-height: 1.45;
  color: var(--cyan);
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-contact a.channel-value:hover {
  color: var(--cyan-soft);
  border-bottom-color: var(--cyan-soft);
}

.page-contact .channel-value--text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ice);
  word-break: normal;
}

.page-contact .channel-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

.page-contact .figure {
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.page-contact .figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--panel);
}

.page-contact .figure--overview img {
  aspect-ratio: 3 / 2;
}

.page-contact .figure--mail img {
  aspect-ratio: 4 / 3;
}

.page-contact .figure .media-cap {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mist-dim);
}

.page-contact .mail-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 56px);
}

.page-contact .mail-block p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .mail-block .h2 {
  margin: 0.4em 0 0.7em;
}

.page-contact .subject-list {
  display: grid;
  gap: 1px;
  margin-top: 26px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-contact .subject {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--navy);
}

.page-contact .subject-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ice);
  word-break: break-word;
}

.page-contact .urgent-card {
  padding: clamp(22px, 3.2vw, 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius);
}

.page-contact .urgent-tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--coral);
  border: 1px solid var(--coral);
  border-radius: 999px;
}

.page-contact .urgent-title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ice);
}

.page-contact .urgent-foot {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--coral);
}

.page-contact .hours-dial {
  margin-top: clamp(26px, 4vw, 42px);
  padding: clamp(22px, 3.2vw, 34px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-contact .hours-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist);
}

.page-contact .hours-range {
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  letter-spacing: 0.06em;
  color: var(--ice);
}

.page-contact .hours-track {
  position: relative;
  height: 6px;
  background: var(--panel);
  border-radius: 999px;
}

.page-contact .hours-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(47, 227, 194, 0.32), var(--cyan));
  border-radius: 999px;
}

.page-contact .hours-mark {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 14px;
  background: var(--line);
  transform: translateX(-50%);
}

.page-contact .hours-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--mist-dim);
}

.page-contact .route-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-contact .route {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.page-contact .route-num {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.page-contact .route-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ice);
}

.page-contact .route p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .route a {
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}

.page-contact .route a:hover {
  border-bottom-color: var(--cyan);
}

.page-contact .coop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}

.page-contact .coop-intro .h2 {
  margin: 0.4em 0 0.7em;
}

.page-contact .coop-intro p {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .coop-steps {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-contact .coop-step {
  padding: clamp(18px, 2.6vw, 24px);
  background: var(--panel);
}

.page-contact .coop-step-num {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}

.page-contact .coop-step h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ice);
}

.page-contact .coop-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .shortcut-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
  margin-top: clamp(26px, 4vw, 40px);
}

.page-contact .shortcut {
  display: block;
  padding: clamp(20px, 3vw, 30px);
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.page-contact .shortcut:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-contact .shortcut-tag {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mist-dim);
}

.page-contact .shortcut h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ice);
}

.page-contact .shortcut p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .shortcut-go {
  display: inline-block;
  margin-top: 18px;
  font-size: 16px;
  color: var(--cyan);
}

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

.page-contact .site-info-grid .h2 {
  margin: 0.4em 0 0.7em;
}

.page-contact .site-info-grid p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

.page-contact .info-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.page-contact .info-list > div {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-contact .info-list dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

.page-contact .info-list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ice);
  word-break: break-word;
}

.page-contact .legal-strip {
  display: grid;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.page-contact .legal-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--mist);
}

.page-contact .legal-line a {
  color: var(--cyan-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}

.page-contact .legal-line a:hover {
  border-bottom-color: var(--cyan);
}

.page-contact .legal-line--muted {
  color: var(--coral);
}

@media (min-width: 640px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .coop-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .route-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-contact .info-list > div {
    grid-template-columns: 120px 1fr;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
  }
  .page-contact .mail-split-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .page-contact .coop-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .page-contact .shortcut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-contact .site-info-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
  .page-contact .coop-steps {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1100px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .page-contact .coop-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .shortcut,
  .page-contact .channel {
    transition: none;
  }
  .page-contact .shortcut:hover {
    transform: none;
  }
}