.page-contact {
  --contact-rule: 1px solid var(--line);
  --contact-pad: clamp(42px, 6vw, 92px);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(38px, 6vw, 84px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  margin-top: clamp(22px, 3vw, 38px);
}

.page-contact .contact-hero__lead > .lede {
  margin-top: clamp(14px, 2vw, 22px);
}

.page-contact .contact-lines {
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-contact .contact-line {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: var(--contact-rule);
}

.page-contact .contact-line__value {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: all;
  -webkit-user-select: all;
}

.page-contact .contact-line__value--mail {
  font-size: clamp(26px, 6.6vw, 62px);
  color: var(--lime);
}

.page-contact .contact-line__value--tel {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 7.4vw, 58px);
  color: var(--text);
  letter-spacing: -0.01em;
}

.page-contact .contact-line__meta {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 46ch;
}

.page-contact .contact-hero__aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-contact .contact-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
}

.page-contact .contact-status__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.16);
}

.page-contact .contact-status__text {
  display: grid;
  gap: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.page-contact .contact-status__text strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-contact .contact-status__text span {
  color: var(--text-dim);
  font-size: 13px;
}

.page-contact .contact-hero__media {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-contact .contact-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--r-organic);
  filter: saturate(0.85) brightness(0.92);
}

.page-contact .contact-hero__media figcaption {
  color: var(--text-dim);
}

/* ---------- 通用章节 ---------- */
.page-contact .band {
  padding-block: var(--contact-pad);
  border-top: var(--contact-rule);
}

.page-contact .band--pitch {
  background: var(--ink-900);
  border-top: var(--contact-rule);
}

.page-contact .band--band-bottom {
  padding-bottom: clamp(48px, 7vw, 104px);
}

.page-contact .band__head {
  display: grid;
  gap: 12px;
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 48px);
}

.page-contact .band__title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.page-contact .band__head .measure {
  color: var(--text);
  opacity: 0.8;
  font-size: 15.5px;
  line-height: 1.78;
}

/* ---------- 渠道分工 ---------- */
.page-contact .channels {
  display: grid;
  gap: 0;
}

.page-contact .channel {
  display: grid;
  gap: 10px;
  padding: 24px 0;
  border-top: var(--contact-rule);
  align-content: start;
}

.page-contact .channel:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-contact .channel__title {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.page-contact .channel__body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
  opacity: 0.8;
}

.page-contact .channel__foot {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lime-dim);
  overflow-wrap: anywhere;
}

/* ---------- 反馈模板 ---------- */
.page-contact .feedback-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-contact .feedback-media {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-contact .feedback-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--r-organic);
  filter: saturate(0.8) brightness(0.9);
}

.page-contact .feedback-media figcaption {
  color: var(--text-dim);
}

.page-contact .feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-contact .feedback-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-top: var(--contact-rule);
}

.page-contact .feedback-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-contact .feedback-item__no {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lime);
  padding-top: 6px;
}

.page-contact .feedback-item__title {
  grid-column: 2;
  font-family: var(--font-head);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}

.page-contact .feedback-item__body {
  grid-column: 2;
  font-size: 15px;
  line-height: 1.76;
  color: var(--text);
  opacity: 0.78;
}

.page-contact .contact-disclosures {
  display: grid;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 34px);
}

.page-contact .contact-disclosures .disclosure {
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--ink-800);
  overflow: hidden;
}

.page-contact .contact-disclosures .disclosure__toggle {
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-contact .contact-disclosures .disclosure__toggle:hover {
  background: var(--ink-700);
}

.page-contact .contact-disclosures .disclosure__toggle[aria-expanded="true"] {
  color: var(--lime);
}

.page-contact .contact-disclosures .disclosure__panel {
  padding: 0 18px 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--steel);
}

/* ---------- 自助排查 ---------- */
.page-contact .help-list {
  display: grid;
  gap: 0;
}

.page-contact .help-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 18px;
  padding: 20px 0;
  border-top: var(--contact-rule);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.page-contact .help-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-contact .help-row:hover,
.page-contact .help-row:focus-visible {
  border-color: var(--lime-dim);
}

.page-contact .help-row__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-head);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.page-contact .help-row__desc {
  grid-column: 1;
  grid-row: 2;
  font-size: 15px;
  line-height: 1.76;
  color: var(--text);
  opacity: 0.76;
  max-width: 62ch;
}

.page-contact .help-row__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--lime);
  transition: transform 200ms var(--ease);
}

.page-contact .help-row:hover .help-row__arrow,
.page-contact .help-row:focus-visible .help-row__arrow {
  transform: translateX(4px);
}

/* ---------- 纠错与合作 ---------- */
.page-contact .ops-grid {
  display: grid;
  gap: clamp(20px, 3vw, 0px);
}

.page-contact .ops-item {
  display: grid;
  gap: 10px;
  padding: 22px 0;
  border-top: var(--contact-rule);
  align-content: start;
}

.page-contact .ops-item__title {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.32;
}

.page-contact .ops-item__body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
  opacity: 0.8;
}

.page-contact .inline-link {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-contact .inline-link:hover {
  color: var(--lime-dim);
}

/* ---------- 底部信息带 ---------- */
.page-contact .contact-band {
  display: grid;
  gap: 0;
  border-top: var(--contact-rule);
  border-bottom: var(--contact-rule);
}

.page-contact .contact-band__row {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: var(--contact-rule);
}

.page-contact .contact-band__row:last-child {
  border-bottom: 0;
}

.page-contact .contact-band__value {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------- 桌面端 ---------- */
@media (min-width: 880px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .channel {
    border-top: 0;
    padding: 0 0 0 clamp(20px, 2.4vw, 34px);
    border-left: var(--contact-rule);
  }

  .page-contact .channel:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-contact .feedback-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: start;
  }

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

  .page-contact .ops-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 40px);
  }

  .page-contact .ops-item {
    border-top: var(--contact-rule);
    padding-top: 22px;
    padding-bottom: 0;
  }

  .page-contact .contact-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 64px);
  }

  .page-contact .contact-band__row {
    grid-template-columns: 8.5em minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
  }
}

@media (min-width: 1180px) {
  .page-contact .contact-hero {
    padding-bottom: clamp(56px, 7vw, 96px);
  }

  .page-contact .contact-hero__grid {
    gap: clamp(48px, 6vw, 88px);
  }
}

@media (max-width: 420px) {
  .page-contact .contact-line__value--mail {
    font-size: 24px;
  }

  .page-contact .contact-line__value--tel {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .help-row,
  .page-contact .help-row__arrow,
  .page-contact .contact-disclosures .disclosure__toggle {
    transition: none;
  }

  .page-contact .help-row:hover .help-row__arrow {
    transform: none;
  }
}


<main id="main-content" class="page-contact">
  <section class="shell contact-hero" aria-labelledby="contact-title">
    <nav class="breadcrumb" aria-label="当前位置">
      <a href="/">赛场首页</a>
      <span class="breadcrumb__sep">/</span>
      <span aria-current="page">找到我们</span>
    </nav>

    <div class="contact-hero__grid">
      <div class="contact-hero__lead" data-reveal>
        <p class="eyebrow">找到我们 · CONTACT</p>
        <h1 id="contact-title">联系米尔体育赛场</h1>
        <p class="lede measure">主页打不开、赛事页一直转圈、筛完联赛进不去，或者比分要更正、想聊联赛合作——工作日的白天，邮箱和电话都有人在看。</p>

        <ul class="contact-lines">
          <li class="contact-line">
            <span class="u-technical">客服邮箱 · 首选</span>
            <span class="contact-line__value contact-line__value--mail">email@mier-goal.com.cn</span>
            <span class="contact-line__meta">需要写清楚过程、附截图、希望留下往来记录的沟通，走这里</span>
          </li>
          <li class="contact-line">
            <span class="u-technical">客服电话 · 着急时</span>
            <span class="contact-line__value contact-line__value--tel">13816161420</span>
            <span class="contact-line__meta">想马上确认是本地网络问题还是站点问题时，直接拨过来</span>
          </li>
        </ul>
      </div>

      <aside class="contact-hero__aside" data-reveal>
        <div class="status-bar contact-status">
          <span class="status-bar__dot contact-status__dot" aria-hidden="true"></span>
          <span class="contact-status__text">
            <strong>工作日 9:00–18:00</strong>
            <span>邮件与电话同步受理，节假日除外</span>
          </span>
        </div>
        <figure class="contact-hero__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场看台入口与灯柱，地面反光沿对角线延伸">
          <figcaption class="u-technical">值班编辑在比赛日按班次守到最后一轮数据落库</figcaption>
        </figure>
      </aside>
    </div>
  </section>

  <section class="shell band" aria-labelledby="channel-title">
    <div class="band__head" data-reveal>
      <p class="eyebrow">渠道分工</p>
      <h2 class="band__title" id="channel-title">同一个问题，走对的渠道能省一半来回</h2>
      <p class="measure">邮件适合把话说完整，电话适合把事说快，地址用于寄送材料与当面沟通。三种方式都在工作日 9:00–18:00 内受理。</p>
    </div>

    <div class="channels">
      <article class="channel" data-reveal>
        <p class="u-technical u-lime">01 / 邮箱</p>
        <h3 class="channel__title">需要写清楚、带附件的事</h3>
        <p class="channel__body">页面报错的完整过程、比分与统计的更正申请、联赛合作与内容转载咨询，都可以一次写全。附件放截图或录屏都行，邮件里说明希望怎么处理。</p>
        <p class="channel__foot u-mono">email@mier-goal.com.cn</p>
      </article>

      <article class="channel" data-reveal>
        <p class="u-technical u-lime">02 / 电话</p>
        <h3 class="channel__title">需要马上有个说法的事</h3>
        <p class="channel__body">主页登不上、赛事页白屏、点筛选后原地卡住，这类情况电话里两分钟就能判断问题在哪一头，省掉反复发邮件的等待。</p>
        <p class="channel__foot u-mono">13816161420</p>
      </article>

      <article class="channel" data-reveal>
        <p class="u-technical u-lime">03 / 地址</p>
        <h3 class="channel__title">寄材料与当面沟通</h3>
        <p class="channel__body">河南省郑州市金水区花园路116号。服务地区为河南，外地过来之前先打个电话约好时间，免得白跑一趟。</p>
        <p class="channel__foot u-mono">河南 · 郑州</p>
      </article>
    </div>
  </section>

  <section class="shell band band--pitch" aria-labelledby="template-title">
    <div class="band__head" data-reveal>
      <p class="eyebrow">反馈模板</p>
      <h2 class="band__title" id="template-title">写反馈时，把这四样一起带上</h2>
      <p class="measure">设备、页面、现象、截图，四项齐了基本一次就能定位。少一项，往往要多问两轮。</p>
    </div>

    <div class="feedback-grid">
      <figure class="feedback-media" data-reveal>
        <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="用线框与色块表示的设备信息与页面截图示意，不含真实界面文字" loading="lazy" decoding="async">
        <figcaption class="u-technical">设备信息与截图拼在一起，问题现场就还原了大半</figcaption>
      </figure>

      <div class="feedback-body">
        <ol class="feedback-list">
          <li class="feedback-item" data-reveal>
            <span class="feedback-item__no" aria-hidden="true">01</span>
            <h3 class="feedback-item__title">设备与系统</h3>
            <p class="feedback-item__body">手机或电脑的具体型号、操作系统版本，以及用的是哪个浏览器。同一个现象在苹果设备和安卓设备上，原因经常不一样。</p>
          </li>
          <li class="feedback-item" data-reveal>
            <span class="feedback-item__no" aria-hidden="true">02</span>
            <h3 class="feedback-item__title">页面地址与筛选条件</h3>
            <p class="feedback-item__body">出问题的是哪一页，当时选的联赛、赛季、轮次和分类标签分别是什么。把这些一起写上，比只说“打不开”有用得多。</p>
          </li>
          <li class="feedback-item" data-reveal>
            <span class="feedback-item__no" aria-hidden="true">03</span>
            <h3 class="feedback-item__title">问题现象</h3>
            <p class="feedback-item__body">点下去之后到底发生了什么：白屏、一直转圈、跳回上一页，还是弹出一行提示。提示的原话照抄下来最好。</p>
          </li>
          <li class="feedback-item" data-reveal>
            <span class="feedback-item__no" aria-hidden="true">04</span>
            <h3 class="feedback-item__title">截图或录屏</h3>
            <p class="feedback-item__body">一张能同时看到报错信息和当前筛选条件的截图，就能抵掉好几轮来回确认。</p>
          </li>
        </ol>

        <div class="contact-disclosures">
          <div class="disclosure" data-disclosure data-reveal>
            <button class="disclosure__toggle" type="button" data-disclosure-toggle aria-expanded="false">
              主页或赛事页完全打不开，还要准备什么
            </button>
            <div class="disclosure__panel" data-disclosure-panel hidden>
              <p>先换一个网络、换一个浏览器各试一次，把两次的结果都写上。同时说明出错的大致时间点，以及是不是每次打开都这样。苹果设备上遇到赛事页打不开，请把系统版本写清楚，这类情况我们已经记录在跟进。</p>
            </div>
          </div>

          <div class="disclosure" data-disclosure data-reveal>
            <button class="disclosure__toggle" type="button" data-disclosure-toggle aria-expanded="false">
              选完联赛点不进去，还要准备什么
            </button>
            <div class="disclosure__panel" data-disclosure-panel hidden>
              <p>写下当时选的联赛、赛季与轮次，以及是从首页、赛事数据台还是某篇文章点进去的。如果换一组条件就能正常进入，也请一并说明——这一条对定位帮助最大。</p>
            </div>
          </div>

          <div class="disclosure" data-disclosure data-reveal>
            <button class="disclosure__toggle" type="button" data-disclosure-toggle aria-expanded="false">
              比分或技术统计要更正，还要准备什么
            </button>
            <div class="disclosure__panel" data-disclosure-panel hidden>
              <p>给出比赛日期、对阵双方、需要修改的字段名称与正确数值，并附上你能查到的出处。每场比赛有 28 项技术统计，字段名写准了，改起来就直接。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="shell band" aria-labelledby="help-title">
    <div class="band__head" data-reveal>
      <p class="eyebrow">先自己看一眼</p>
      <h2 class="band__title" id="help-title">有些问题，翻一页就解决了</h2>
      <p class="measure">米尔体育主页登不上、赛事页加载不出来、筛完联赛进不去，这三类问得最多的情况，帮助知识库里都写好了从哪一步开始查。</p>
    </div>

    <div class="help-list">
      <a class="help-row" href="/knowledge/" data-reveal>
        <span class="help-row__title">打不开、登不上</span>
        <span class="help-row__desc">按网络、浏览器缓存、设备系统版本三步往下走，多数情况在第二步就有结论。</span>
        <span class="help-row__arrow" aria-hidden="true">→</span>
      </a>
      <a class="help-row" href="/knowledge/" data-reveal>
        <span class="help-row__title">筛完联赛进不去</span>
        <span class="help-row__desc">先清空筛选条件回到默认状态，再一项一项加上去，看是哪一步开始卡住。</span>
        <span class="help-row__arrow" aria-hidden="true">→</span>
      </a>
      <a class="help-row" href="/product/" data-reveal>
        <span class="help-row__title">数据字段是怎么算的</span>
        <span class="help-row__desc">控球、射门、传球、定位球、纪律与换人六类共 28 项字段，赛事数据台逐项说明了取数方式和展示位置。</span>
        <span class="help-row__arrow" aria-hidden="true">→</span>
      </a>
      <a class="help-row" href="/articles/" data-reveal>
        <span class="help-row__title">复盘为什么这样读</span>
        <span class="help-row__desc">进攻效率、防守转换、定位球得失、换人影响、时段走势、关键判罚记录六个维度，赛场专栏里有完整的解读样例。</span>
        <span class="help-row__arrow" aria-hidden="true">→</span>
      </a>
    </div>
  </section>

  <section class="shell band band--pitch" aria-labelledby="ops-title">
    <div class="band__head" data-reveal>
      <p class="eyebrow">纠错与合作</p>
      <h2 class="band__title" id="ops-title">三件事，三种说法</h2>
      <p class="measure">数据更正、联赛合作、内容引用，处理的人不同，写法也不一样。照着下面的方式写，基本第一封信就能到对的人手里。</p>
    </div>

    <div class="ops-grid">
      <article class="ops-item" data-reveal>
        <p class="u-technical u-orange">数据更正</p>
        <h3 class="ops-item__title">比分与统计写错了</h3>
        <p class="ops-item__body">发到客服邮箱，标题写“数据更正 + 比赛日期”，正文给出对阵双方、字段名称和正确数值。有官方记录或现场照片的，一并附上，处理会快很多。</p>
      </article>

      <article class="ops-item" data-reveal>
        <p class="u-technical u-orange">联赛合作</p>
        <h3 class="ops-item__title">业余联赛要接数据服务</h3>
        <p class="ops-item__body">目前有 36 个业余联赛组委会、210 支球队在用我们的赛程、比分与球员出场记录服务。邮件里说明联赛规模、赛制安排和现在怎么记成绩，我们会给出接入方式。</p>
      </article>

      <article class="ops-item" data-reveal>
        <p class="u-technical u-orange">内容引用</p>
        <h3 class="ops-item__title">想转载或引用站内内容</h3>
        <p class="ops-item__body">转载规范与署名方式写在<a class="inline-link" href="/legal/">使用说明与条款</a>里，先看一遍再发邮件说明用途。赛后复盘与轮次综述的引用申请，请写明发布平台与预计范围。</p>
      </article>
    </div>
  </section>

  <section class="shell band band--band-bottom" aria-labelledby="band-title">
    <div class="band__head" data-reveal>
      <p class="eyebrow">联系方式一览</p>
      <h2 class="band__title" id="band-title">需要的时候，从这里取</h2>
    </div>

    <div class="contact-band" data-reveal>
      <div class="contact-band__row">
        <span class="u-technical">客服邮箱</span>
        <span class="contact-band__value u-mono">email@mier-goal.com.cn</span>
      </div>
      <div class="contact-band__row">
        <span class="u-technical">客服电话</span>
        <span class="contact-band__value u-mono">13816161420</span>
      </div>
      <div class="contact-band__row">
        <span class="u-technical">联系地址</span>
        <span class="contact-band__value">河南省郑州市金水区花园路116号</span>
      </div>
      <div class="contact-band__row">
        <span class="u-technical">服务地区</span>
        <span class="contact-band__value">河南</span>
      </div>
      <div class="contact-band__row">
        <span class="u-technical">回复时段</span>
        <span class="contact-band__value">工作日 9:00–18:00 内回复</span>
      </div>
      <div class="contact-band__row">
        <span class="u-technical">备案号</span>
        <span class="contact-band__value u-mono">豫ICP备92184827号</span>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --contact-rule: 1px solid var(--line);
  --contact-pad: clamp(42px, 6vw, 92px);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(38px, 6vw, 84px);
}

.page-contact .contact-hero__grid {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  margin-top: clamp(22px, 3vw, 38px);
}

.page-contact .contact-hero__lead > .lede {
  margin-top: clamp(14px, 2vw, 22px);
}

.page-contact .contact-lines {
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-contact .contact-line {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: var(--contact-rule);
}

.page-contact .contact-line__value {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: all;
  -webkit-user-select: all;
}

.page-contact .contact-line__value--mail {
  font-size: clamp(26px, 6.6vw, 62px);
  color: var(--lime);
}

.page-contact .contact-line__value--tel {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 7.4vw, 58px);
  color: var(--text);
  letter-spacing: -0.01em;
}

.page-contact .contact-line__meta {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 46ch;
}

.page-contact .contact-hero__aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-contact .contact-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
}

.page-contact .contact-status__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.16);
}

.page-contact .contact-status__text {
  display: grid;
  gap: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.page-contact .contact-status__text strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-contact .contact-status__text span {
  color: var(--text-dim);
  font-size: 13px;
}

.page-contact .contact-hero__media {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-contact .contact-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--r-organic);
  filter: saturate(0.85) brightness(0.92);
}

.page-contact .contact-hero__media figcaption {
  color: var(--text-dim);
}

/* ---------- 通用章节 ---------- */
.page-contact .band {
  padding-block: var(--contact-pad);
  border-top: var(--contact-rule);
}

.page-contact .band--pitch {
  background: var(--ink-900);
  border-top: var(--contact-rule);
}

.page-contact .band--band-bottom {
  padding-bottom: clamp(48px, 7vw, 104px);
}

.page-contact .band__head {
  display: grid;
  gap: 12px;
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 48px);
}

.page-contact .band__title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.page-contact .band__head .measure {
  color: var(--text);
  opacity: 0.8;
  font-size: 15.5px;
  line-height: 1.78;
}

/* ---------- 渠道分工 ---------- */
.page-contact .channels {
  display: grid;
  gap: 0;
}

.page-contact .channel {
  display: grid;
  gap: 10px;
  padding: 24px 0;
  border-top: var(--contact-rule);
  align-content: start;
}

.page-contact .channel:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-contact .channel__title {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.page-contact .channel__body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
  opacity: 0.8;
}

.page-contact .channel__foot {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lime-dim);
  overflow-wrap: anywhere;
}

/* ---------- 反馈模板 ---------- */
.page-contact .feedback-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-contact .feedback-media {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-contact .feedback-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--r-organic);
  filter: saturate(0.8) brightness(0.9);
}

.page-contact .feedback-media figcaption {
  color: var(--text-dim);
}

.page-contact .feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-contact .feedback-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-top: var(--contact-rule);
}

.page-contact .feedback-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-contact .feedback-item__no {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lime);
  padding-top: 6px;
}

.page-contact .feedback-item__title {
  grid-column: 2;
  font-family: var(--font-head);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}

.page-contact .feedback-item__body {
  grid-column: 2;
  font-size: 15px;
  line-height: 1.76;
  color: var(--text);
  opacity: 0.78;
}

.page-contact .contact-disclosures {
  display: grid;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 34px);
}

.page-contact .contact-disclosures .disclosure {
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--ink-800);
  overflow: hidden;
}

.page-contact .contact-disclosures .disclosure__toggle {
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-contact .contact-disclosures .disclosure__toggle:hover {
  background: var(--ink-700);
}

.page-contact .contact-disclosures .disclosure__toggle[aria-expanded="true"] {
  color: var(--lime);
}

.page-contact .contact-disclosures .disclosure__panel {
  padding: 0 18px 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--steel);
}

/* ---------- 自助排查 ---------- */
.page-contact .help-list {
  display: grid;
  gap: 0;
}

.page-contact .help-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 18px;
  padding: 20px 0;
  border-top: var(--contact-rule);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.page-contact .help-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-contact .help-row:hover,
.page-contact .help-row:focus-visible {
  border-color: var(--lime-dim);
}

.page-contact .help-row__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-head);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.page-contact .help-row__desc {
  grid-column: 1;
  grid-row: 2;
  font-size: 15px;
  line-height: 1.76;
  color: var(--text);
  opacity: 0.76;
  max-width: 62ch;
}

.page-contact .help-row__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--lime);
  transition: transform 200ms var(--ease);
}

.page-contact .help-row:hover .help-row__arrow,
.page-contact .help-row:focus-visible .help-row__arrow {
  transform: translateX(4px);
}

/* ---------- 纠错与合作 ---------- */
.page-contact .ops-grid {
  display: grid;
  gap: clamp(20px, 3vw, 0px);
}

.page-contact .ops-item {
  display: grid;
  gap: 10px;
  padding: 22px 0;
  border-top: var(--contact-rule);
  align-content: start;
}

.page-contact .ops-item__title {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.32;
}

.page-contact .ops-item__body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
  opacity: 0.8;
}

.page-contact .inline-link {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.page-contact .inline-link:hover {
  color: var(--lime-dim);
}

/* ---------- 底部信息带 ---------- */
.page-contact .contact-band {
  display: grid;
  gap: 0;
  border-top: var(--contact-rule);
  border-bottom: var(--contact-rule);
}

.page-contact .contact-band__row {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: var(--contact-rule);
}

.page-contact .contact-band__row:last-child {
  border-bottom: 0;
}

.page-contact .contact-band__value {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------- 桌面端 ---------- */
@media (min-width: 880px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .channel {
    border-top: 0;
    padding: 0 0 0 clamp(20px, 2.4vw, 34px);
    border-left: var(--contact-rule);
  }

  .page-contact .channel:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-contact .feedback-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: start;
  }

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

  .page-contact .ops-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 40px);
  }

  .page-contact .ops-item {
    border-top: var(--contact-rule);
    padding-top: 22px;
    padding-bottom: 0;
  }

  .page-contact .contact-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 64px);
  }

  .page-contact .contact-band__row {
    grid-template-columns: 8.5em minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
  }
}

@media (min-width: 1180px) {
  .page-contact .contact-hero {
    padding-bottom: clamp(56px, 7vw, 96px);
  }

  .page-contact .contact-hero__grid {
    gap: clamp(48px, 6vw, 88px);
  }
}

@media (max-width: 420px) {
  .page-contact .contact-line__value--mail {
    font-size: 24px;
  }

  .page-contact .contact-line__value--tel {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .help-row,
  .page-contact .help-row__arrow,
  .page-contact .contact-disclosures .disclosure__toggle {
    transition: none;
  }

  .page-contact .help-row:hover .help-row__arrow {
    transform: none;
  }
}