.page-contact {
  --contact-edge: clamp(16px, 4vw, 40px);
  background: var(--c-deep);
  color: var(--c-paper);
  font-family: var(--f-body);
  padding-bottom: clamp(48px, 8vw, 104px);
}

.page-contact .contact-crumbs {
  padding-top: clamp(18px, 3.5vw, 30px);
  padding-bottom: clamp(10px, 2vw, 18px);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
  padding-bottom: clamp(36px, 6vw, 68px);
  border-bottom: 1px solid var(--c-line);
}

.page-contact .contact-hero h1 {
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-size: clamp(32px, 6.6vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--c-paper);
}

.page-contact .contact-hero__intro {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-stone);
}

.page-contact .contact-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .contact-hero__tags li {
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
  border: 1px solid rgba(53, 224, 206, 0.35);
  padding: 4px 10px;
}

.page-contact .contact-hero__figure {
  margin: 0;
  position: relative;
  background: var(--c-panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-contact .contact-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06);
}

@media (min-width: 900px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* ---------- 渠道对照 ---------- */
.page-contact .contact-routes {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--c-line);
}

.page-contact .contact-routes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(30, 58, 85, 0.9) 0 1px,
    transparent 1px 96px
  );
  opacity: 0.35;
  pointer-events: none;
}

.page-contact .contact-routes > * {
  position: relative;
  z-index: 1;
}

.page-contact .contact-routes__head h2 {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-paper);
}

.page-contact .contact-routes__intro {
  margin: 12px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-stone);
}

.page-contact .route-list {
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.page-contact .route-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--dur) var(--ease);
}

.page-contact .route-row__no {
  grid-column: 1;
  grid-row: 1;
  padding-top: 3px;
  font-family: var(--f-num);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
}

.page-contact .route-row__main {
  grid-column: 2;
  grid-row: 1;
}

.page-contact .route-row__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-paper);
}

.page-contact .route-row__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .route-row__channel {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  font-family: var(--f-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-deep);
  background: var(--c-cyan);
  padding: 3px 9px;
}

.page-contact .route-row__why {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-stone);
  opacity: 0.88;
}

@media (hover: hover) {
  .page-contact .route-row:hover {
    background-color: rgba(53, 224, 206, 0.05);
  }
}

@media (min-width: 900px) {
  .page-contact .route-row {
    grid-template-columns: 56px minmax(0, 1.25fr) 132px minmax(0, 1fr);
    align-items: center;
    gap: 0 24px;
    padding: 22px 0;
  }

  .page-contact .route-row__no,
  .page-contact .route-row__main,
  .page-contact .route-row__channel,
  .page-contact .route-row__why {
    grid-column: auto;
    grid-row: auto;
  }

  .page-contact .route-row__no {
    padding-top: 0;
  }
}

.page-contact .route-alert {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 16px 18px;
  background: linear-gradient(90deg, rgba(255, 174, 60, 0.14), rgba(255, 174, 60, 0));
  border-left: 3px solid var(--c-amber);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .route-alert strong {
  color: var(--c-amber);
  font-weight: 600;
}

/* ---------- 左右分置 ---------- */
.page-contact .contact-split {
  display: grid;
  gap: clamp(32px, 4.5vw, 52px);
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.page-contact .contact-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-contact .contact-rail__title {
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--c-paper);
}

.page-contact .channel {
  position: relative;
  padding: 20px 24px 20px 20px;
  background: var(--c-panel);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform var(--dur) var(--ease);
}

.page-contact .channel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-cyan);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
}

@media (hover: hover) {
  .page-contact .channel:hover {
    transform: translateY(-2px);
  }

  .page-contact .channel:hover::after {
    opacity: 1;
  }
}

.page-contact .channel__tag {
  margin: 0;
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-stone);
}

.page-contact .channel__name {
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-paper);
}

.page-contact .channel__value {
  margin: 10px 0 0;
  font-family: var(--f-num);
  font-size: clamp(15px, 2.6vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-amber);
  overflow-wrap: anywhere;
}

.page-contact .channel__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .channel__meta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-moss);
}

.page-contact .rail-note {
  padding: 16px 18px;
  border: 1px dashed var(--c-line);
}

.page-contact .rail-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

/* ---------- 右栏 ---------- */
.page-contact .contact-main {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  min-width: 0;
}

.page-contact .form-brief__title,
.page-contact .scenes__title,
.page-contact .locate__title {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.12;
}

.page-contact .form-brief__title,
.page-contact .scenes__title {
  color: var(--c-paper);
}

.page-contact .form-brief__intro,
.page-contact .scenes__intro {
  margin: 12px 0 0;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-stone);
}

.page-contact .brief-list {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .brief-list__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
}

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

.page-contact .brief-list__key {
  padding-top: 3px;
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-cyan);
}

.page-contact .brief-list__item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-paper);
}

.page-contact .brief-list__item p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

/* ---------- 地址与备案 ---------- */
.page-contact .locate {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px);
  background: var(--c-paper);
  color: var(--c-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.page-contact .locate__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.13;
  filter: grayscale(1) contrast(0.75);
  pointer-events: none;
}

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

.page-contact .locate .eyebrow {
  color: var(--c-terra);
}

.page-contact .locate .eyebrow::before {
  background: currentColor;
  border-color: currentColor;
}

.page-contact .locate__title {
  color: var(--c-deep);
}

.page-contact .locate__address {
  margin: 14px 0 0;
  max-width: 22em;
  font-family: var(--f-editorial);
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  color: var(--c-deep);
}

.page-contact .locate__facts {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(6, 16, 28, 0.18);
  display: grid;
  gap: 14px;
}

.page-contact .locate__facts dt {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(6, 16, 28, 0.55);
}

.page-contact .locate__facts dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-deep);
  overflow-wrap: anywhere;
}

.page-contact .locate__note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(6, 16, 28, 0.72);
}

@media (min-width: 620px) {
  .page-contact .locate__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
  }
}

/* ---------- 场景示例 ---------- */
.page-contact .scene-list {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

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

.page-contact .scene__summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.page-contact .scene__summary::-webkit-details-marker {
  display: none;
}

.page-contact .scene__no {
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-cyan);
}

.page-contact .scene__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-paper);
  transition: color var(--dur) var(--ease);
}

.page-contact .scene__channel {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--c-amber);
  border: 1px solid rgba(255, 174, 60, 0.4);
  padding: 3px 8px;
}

.page-contact .scene[open] .scene__title {
  color: var(--c-cyan);
}

.page-contact .scene__body {
  padding: 0 0 20px 42px;
}

.page-contact .scene__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .scene__body ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.page-contact .scene__body li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-stone);
}

.page-contact .scene__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 1px;
  background: var(--c-cyan);
  opacity: 0.7;
}

/* ---------- 桌面端左右分置 ---------- */
@media (min-width: 1024px) {
  .page-contact .contact-split {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .contact-rail {
    position: sticky;
    top: 100px;
  }
}

/* ---------- 窄屏兜底 ---------- */
@media (max-width: 380px) {
  .page-contact .channel__value {
    font-size: 14px;
  }

  .page-contact .scene__summary {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 6px;
  }

  .page-contact .scene__channel {
    grid-column: 2;
    justify-self: start;
  }

  .page-contact .scene__body {
    padding-left: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel,
  .page-contact .route-row,
  .page-contact .scene__title {
    transition: none;
  }

  .page-contact .channel:hover {
    transform: none;
  }
}

<main id="main-content" class="page-contact">
  <div class="shell">
    <nav class="crumbs contact-crumbs" aria-label="面包屑">
      <ol class="crumbs__list">
        <li class="crumbs__item"><a href="/">首页</a></li>
        <li class="crumbs__sep" aria-hidden="true">/</li>
        <li class="crumbs__item" aria-current="page">找到我们</li>
      </ol>
    </nav>
  </div>

  <div class="shell">
    <section class="contact-hero" aria-labelledby="contact-title">
      <div class="contact-hero__lede">
        <p class="eyebrow">联系通道</p>
        <h1 id="contact-title">找到我们，把问题说清楚</h1>
        <p class="contact-hero__intro">比分对不上、页面点不动、想谈栏目合作——天博体育的客服通道按问题类型分开。你挑一条最接近的，把页面链接和具体现象一起发过来，工作日内都会收到答复。</p>
        <ul class="contact-hero__tags">
          <li>内容纠错</li>
          <li>操作确认</li>
          <li>合作洽谈</li>
        </ul>
      </div>
      <figure class="contact-hero__figure">
        <img src="{zhanqunpic:h:750w:1100}" width="1100" height="750" alt="夜间城市天际线与滨海建筑轮廓的暗调剪影，冷蓝底色中透出微暖灯光">
      </figure>
    </section>
  </div>

  <div class="shell">
    <section class="contact-routes" aria-labelledby="routes-heading">
      <header class="contact-routes__head">
        <p class="eyebrow">选对通道</p>
        <h2 id="routes-heading">三类问题，三条不同的入口</h2>
        <p class="contact-routes__intro">同一件事找错人，来回就多两轮。先看你的情况更像哪一种，再决定用邮箱还是直接打电话。</p>
      </header>

      <ol class="route-list">
        <li class="route-row">
          <span class="route-row__no" aria-hidden="true">01</span>
          <div class="route-row__main">
            <h3 class="route-row__title">数据或记录对不上</h3>
            <p class="route-row__desc">某个比分、排名、出场条目与你手上的记录不一致。</p>
          </div>
          <span class="route-row__channel">客服邮箱</span>
          <p class="route-row__why">截图和链接能一并送到，客服拿到就能对着同一屏逐条比。</p>
        </li>
        <li class="route-row">
          <span class="route-row__no" aria-hidden="true">02</span>
          <div class="route-row__main">
            <h3 class="route-row__title">操作卡住、找不到入口</h3>
            <p class="route-row__desc">筛选没结果、按钮点不开、页面加载停住。</p>
          </div>
          <span class="route-row__channel">客服电话</span>
          <p class="route-row__why">这类问题说两句就能确认下一步，不用等一封回信。</p>
        </li>
        <li class="route-row">
          <span class="route-row__no" aria-hidden="true">03</span>
          <div class="route-row__main">
            <h3 class="route-row__title">栏目合作与内容洽谈</h3>
            <p class="route-row__desc">想把数据用在自己的节目、稿件或社区里，先聊方向。</p>
          </div>
          <span class="route-row__channel">客服邮箱</span>
          <p class="route-row__why">写清机构名称与用途，回信能直接接上细节，不必重述一遍。</p>
        </li>
      </ol>

      <p class="route-alert"><strong>急事先走在线表单。</strong>字段固定，页面链接、赛季轮次、看到的现象一次带全，客服打开就能看到上下文，省掉第一轮追问。</p>
    </section>
  </div>

  <div class="shell">
    <div class="contact-split">
      <aside class="contact-rail" aria-labelledby="rail-heading">
        <h2 id="rail-heading" class="contact-rail__title">两条可以直接用的通道</h2>

        <article class="channel">
          <p class="channel__tag">内容纠错 · 合作洽谈</p>
          <h3 class="channel__name">客服邮箱</h3>
          <p class="channel__value">service@insider-tianbo.com.cn</p>
          <p class="channel__note">正文里带上页面链接、赛季与轮次、你看到的数值，回信时能直接对上同一个位置。</p>
          <p class="channel__meta">工作日内回复</p>
        </article>

        <article class="channel">
          <p class="channel__tag">操作确认 · 现场问题</p>
          <h3 class="channel__name">客服电话</h3>
          <p class="channel__value">17957538809</p>
          <p class="channel__note">筛选条件怎么组合、入口在哪个位置、页面为什么没反应，电话里当场就能确认。</p>
          <p class="channel__meta">工作日内可接通</p>
        </article>

        <div class="rail-note">
          <p>情况急、一时又说不完整，站内在线表单更顺手：你填什么，客服就看到什么，不用再问一遍同样的话。</p>
        </div>
      </aside>

      <div class="contact-main">
        <section class="form-brief" aria-labelledby="brief-heading">
          <p class="eyebrow">提交之前</p>
          <h2 id="brief-heading" class="form-brief__title">在线表单里写清这四样</h2>
          <p class="form-brief__intro">写得越具体，客服第一次就能定位到问题，回信也就不用反复来回问。</p>
          <ul class="brief-list">
            <li class="brief-list__item">
              <span class="brief-list__key" aria-hidden="true">01</span>
              <div>
                <h3>出问题的页面链接</h3>
                <p>联赛、赛季、轮次都还留在链接里最好，客服能直接打开你看到的那一屏。</p>
              </div>
            </li>
            <li class="brief-list__item">
              <span class="brief-list__key" aria-hidden="true">02</span>
              <div>
                <h3>你看到的数值</h3>
                <p>把它和你认为正确的数字并排写出来，差在哪里一眼可见。</p>
              </div>
            </li>
            <li class="brief-list__item">
              <span class="brief-list__key" aria-hidden="true">03</span>
              <div>
                <h3>当时的筛选条件</h3>
                <p>用过哪几个联赛、赛季、球队或球员的筛选，组合起来有几种可能。</p>
              </div>
            </li>
            <li class="brief-list__item">
              <span class="brief-list__key" aria-hidden="true">04</span>
              <div>
                <h3>截图或录屏</h3>
                <p>一闪而过的现象最需要这个，画面比描述更快说明问题。</p>
              </div>
            </li>
          </ul>
        </section>

        <section class="locate" aria-labelledby="locate-heading">
          <img class="locate__texture" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="抽象坐标网格与经纬线叠加的暗色纹理" loading="lazy" decoding="async">
          <div class="locate__inner">
            <p class="eyebrow locate__eyebrow">来信与备案</p>
            <h2 id="locate-heading" class="locate__title">地址与备案信息</h2>
            <address class="locate__address">海南省海口市龙华区滨海大道105号百方广场B座18层</address>
            <dl class="locate__facts">
              <div>
                <dt>备案号</dt>
                <dd>琼ICP备14031885号</dd>
              </div>
              <div>
                <dt>服务地区</dt>
                <dd>海南</dd>
              </div>
              <div>
                <dt>读者分布</dt>
                <dd>31 个省级行政区</dd>
              </div>
            </dl>
            <p class="locate__note">邮件与表单内容由客服在工作日内查看；需要当场确认的操作问题，电话更快。</p>
          </div>
        </section>

        <section class="scenes" aria-labelledby="scenes-heading">
          <p class="eyebrow">典型场景</p>
          <h2 id="scenes-heading" class="scenes__title">三个最常见的开场</h2>
          <p class="scenes__intro">下面这三种占了联系量的大半。点开能看到建议走哪条通道，以及提前准备什么材料。</p>

          <ol class="scene-list">
            <li>
              <details class="scene">
                <summary class="scene__summary">
                  <span class="scene__no" aria-hidden="true">01</span>
                  <span class="scene__title">数据和记录不符</span>
                  <span class="scene__channel">推荐 · 邮箱</span>
                </summary>
                <div class="scene__body">
                  <p>你在积分榜或球员逐场记录里看到的数字，与手上的资料对不上。</p>
                  <ul>
                    <li>出问题的页面链接，尽量保留赛季与轮次</li>
                    <li>你看到的数值，以及你认为正确的数值</li>
                    <li>能说明正确值来源的截图或链接</li>
                  </ul>
                </div>
              </details>
            </li>
            <li>
              <details class="scene">
                <summary class="scene__summary">
                  <span class="scene__no" aria-hidden="true">02</span>
                  <span class="scene__title">赛季筛选不出想要的结果</span>
                  <span class="scene__channel">推荐 · 电话</span>
                </summary>
                <div class="scene__body">
                  <p>条件都选了，列表却是空的，或者出来的不是你要的那个赛季。</p>
                  <ul>
                    <li>当时用的是手机还是电脑，屏幕大致宽度</li>
                    <li>同时启用了哪几个筛选条件</li>
                    <li>问题出现的大致时间，方便对着同一时段排查</li>
                  </ul>
                </div>
              </details>
            </li>
            <li>
              <details class="scene">
                <summary class="scene__summary">
                  <span class="scene__no" aria-hidden="true">03</span>
                  <span class="scene__title">栏目合作洽谈</span>
                  <span class="scene__channel">推荐 · 邮箱</span>
                </summary>
                <div class="scene__body">
                  <p>想把排名或进失球结构用在自己的节目、稿件或球迷社区里，先碰个方向。</p>
                  <ul>
                    <li>机构或团队名称，以及你负责的部分</li>
                    <li>想合作的栏目方向与大致使用方式</li>
                    <li>期望推进的时间范围</li>
                  </ul>
                </div>
              </details>
            </li>
          </ol>
        </section>
      </div>
    </div>
  </div>
</main>

.page-contact {
  --contact-edge: clamp(16px, 4vw, 40px);
  background: var(--c-deep);
  color: var(--c-paper);
  font-family: var(--f-body);
  padding-bottom: clamp(48px, 8vw, 104px);
}

.page-contact .contact-crumbs {
  padding-top: clamp(18px, 3.5vw, 30px);
  padding-bottom: clamp(10px, 2vw, 18px);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
  padding-bottom: clamp(36px, 6vw, 68px);
  border-bottom: 1px solid var(--c-line);
}

.page-contact .contact-hero h1 {
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-size: clamp(32px, 6.6vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--c-paper);
}

.page-contact .contact-hero__intro {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-stone);
}

.page-contact .contact-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .contact-hero__tags li {
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
  border: 1px solid rgba(53, 224, 206, 0.35);
  padding: 4px 10px;
}

.page-contact .contact-hero__figure {
  margin: 0;
  position: relative;
  background: var(--c-panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-contact .contact-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06);
}

@media (min-width: 900px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* ---------- 渠道对照 ---------- */
.page-contact .contact-routes {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--c-line);
}

.page-contact .contact-routes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(30, 58, 85, 0.9) 0 1px,
    transparent 1px 96px
  );
  opacity: 0.35;
  pointer-events: none;
}

.page-contact .contact-routes > * {
  position: relative;
  z-index: 1;
}

.page-contact .contact-routes__head h2 {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-paper);
}

.page-contact .contact-routes__intro {
  margin: 12px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-stone);
}

.page-contact .route-list {
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.page-contact .route-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--dur) var(--ease);
}

.page-contact .route-row__no {
  grid-column: 1;
  grid-row: 1;
  padding-top: 3px;
  font-family: var(--f-num);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
}

.page-contact .route-row__main {
  grid-column: 2;
  grid-row: 1;
}

.page-contact .route-row__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-paper);
}

.page-contact .route-row__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .route-row__channel {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  font-family: var(--f-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-deep);
  background: var(--c-cyan);
  padding: 3px 9px;
}

.page-contact .route-row__why {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-stone);
  opacity: 0.88;
}

@media (hover: hover) {
  .page-contact .route-row:hover {
    background-color: rgba(53, 224, 206, 0.05);
  }
}

@media (min-width: 900px) {
  .page-contact .route-row {
    grid-template-columns: 56px minmax(0, 1.25fr) 132px minmax(0, 1fr);
    align-items: center;
    gap: 0 24px;
    padding: 22px 0;
  }

  .page-contact .route-row__no,
  .page-contact .route-row__main,
  .page-contact .route-row__channel,
  .page-contact .route-row__why {
    grid-column: auto;
    grid-row: auto;
  }

  .page-contact .route-row__no {
    padding-top: 0;
  }
}

.page-contact .route-alert {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 16px 18px;
  background: linear-gradient(90deg, rgba(255, 174, 60, 0.14), rgba(255, 174, 60, 0));
  border-left: 3px solid var(--c-amber);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .route-alert strong {
  color: var(--c-amber);
  font-weight: 600;
}

/* ---------- 左右分置 ---------- */
.page-contact .contact-split {
  display: grid;
  gap: clamp(32px, 4.5vw, 52px);
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.page-contact .contact-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-contact .contact-rail__title {
  margin: 0 0 4px;
  font-family: var(--f-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--c-paper);
}

.page-contact .channel {
  position: relative;
  padding: 20px 24px 20px 20px;
  background: var(--c-panel);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform var(--dur) var(--ease);
}

.page-contact .channel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-cyan);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
}

@media (hover: hover) {
  .page-contact .channel:hover {
    transform: translateY(-2px);
  }

  .page-contact .channel:hover::after {
    opacity: 1;
  }
}

.page-contact .channel__tag {
  margin: 0;
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-stone);
}

.page-contact .channel__name {
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-paper);
}

.page-contact .channel__value {
  margin: 10px 0 0;
  font-family: var(--f-num);
  font-size: clamp(15px, 2.6vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-amber);
  overflow-wrap: anywhere;
}

.page-contact .channel__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .channel__meta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-num);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-moss);
}

.page-contact .rail-note {
  padding: 16px 18px;
  border: 1px dashed var(--c-line);
}

.page-contact .rail-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

/* ---------- 右栏 ---------- */
.page-contact .contact-main {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  min-width: 0;
}

.page-contact .form-brief__title,
.page-contact .scenes__title,
.page-contact .locate__title {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.12;
}

.page-contact .form-brief__title,
.page-contact .scenes__title {
  color: var(--c-paper);
}

.page-contact .form-brief__intro,
.page-contact .scenes__intro {
  margin: 12px 0 0;
  max-width: 38em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-stone);
}

.page-contact .brief-list {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .brief-list__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
}

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

.page-contact .brief-list__key {
  padding-top: 3px;
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-cyan);
}

.page-contact .brief-list__item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-paper);
}

.page-contact .brief-list__item p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

/* ---------- 地址与备案 ---------- */
.page-contact .locate {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px);
  background: var(--c-paper);
  color: var(--c-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.page-contact .locate__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.13;
  filter: grayscale(1) contrast(0.75);
  pointer-events: none;
}

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

.page-contact .locate .eyebrow {
  color: var(--c-terra);
}

.page-contact .locate .eyebrow::before {
  background: currentColor;
  border-color: currentColor;
}

.page-contact .locate__title {
  color: var(--c-deep);
}

.page-contact .locate__address {
  margin: 14px 0 0;
  max-width: 22em;
  font-family: var(--f-editorial);
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  color: var(--c-deep);
}

.page-contact .locate__facts {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(6, 16, 28, 0.18);
  display: grid;
  gap: 14px;
}

.page-contact .locate__facts dt {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(6, 16, 28, 0.55);
}

.page-contact .locate__facts dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-deep);
  overflow-wrap: anywhere;
}

.page-contact .locate__note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(6, 16, 28, 0.72);
}

@media (min-width: 620px) {
  .page-contact .locate__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
  }
}

/* ---------- 场景示例 ---------- */
.page-contact .scene-list {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

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

.page-contact .scene__summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}

.page-contact .scene__summary::-webkit-details-marker {
  display: none;
}

.page-contact .scene__no {
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-cyan);
}

.page-contact .scene__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-paper);
  transition: color var(--dur) var(--ease);
}

.page-contact .scene__channel {
  font-family: var(--f-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--c-amber);
  border: 1px solid rgba(255, 174, 60, 0.4);
  padding: 3px 8px;
}

.page-contact .scene[open] .scene__title {
  color: var(--c-cyan);
}

.page-contact .scene__body {
  padding: 0 0 20px 42px;
}

.page-contact .scene__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-stone);
}

.page-contact .scene__body ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.page-contact .scene__body li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-stone);
}

.page-contact .scene__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 1px;
  background: var(--c-cyan);
  opacity: 0.7;
}

/* ---------- 桌面端左右分置 ---------- */
@media (min-width: 1024px) {
  .page-contact .contact-split {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .contact-rail {
    position: sticky;
    top: 100px;
  }
}

/* ---------- 窄屏兜底 ---------- */
@media (max-width: 380px) {
  .page-contact .channel__value {
    font-size: 14px;
  }

  .page-contact .scene__summary {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 6px;
  }

  .page-contact .scene__channel {
    grid-column: 2;
    justify-self: start;
  }

  .page-contact .scene__body {
    padding-left: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel,
  .page-contact .route-row,
  .page-contact .scene__title {
    transition: none;
  }

  .page-contact .channel:hover {
    transform: none;
  }
}