.page-contact {
  --ct-gap: clamp(20px, 3vw, 36px);
  --ct-radius: 12px;
  --ct-soft: rgba(255, 253, 247, .92);
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-contact .wrap {
  width: 100%;
}

.page-contact .eyebrow {
  margin: 0 0 14px;
  color: var(--slate-600);
}

.page-contact .eyebrow__num {
  color: var(--gold-500);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  margin-right: 12px;
}

.page-contact .h-display,
.page-contact .h-section {
  margin: 0;
  letter-spacing: -.01em;
}

.page-contact .h-section {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.22;
}

.page-contact .h-sub {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.page-contact .body-copy {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.8;
}

.page-contact section {
  scroll-margin-top: 96px;
}

/* ---------- 首屏 ---------- */
.page-contact .ct-dark {
  position: relative;
  background-color: var(--ink-900);
  color: var(--paper);
  padding: clamp(26px, 4vw, 44px) 0 clamp(48px, 7vw, 90px);
  isolation: isolate;
}

.page-contact .ct-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 88% 8%, rgba(201, 162, 39, .16), transparent 62%),
              radial-gradient(90% 80% at 4% 92%, rgba(23, 82, 67, .75), transparent 70%);
  pointer-events: none;
}

.page-contact .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(22px, 4vw, 42px);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--slate-200);
}

.page-contact .breadcrumb a {
  color: var(--gold-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}

.page-contact .breadcrumb a:hover {
  border-bottom-color: var(--gold-500);
}

.page-contact .breadcrumb__sep {
  color: var(--gold-500);
}

.page-contact .ct-hero {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.page-contact .ct-hero .eyebrow {
  color: var(--gold-200);
}

.page-contact .ct-hero .h-display {
  color: var(--paper);
  max-width: 20ch;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.06;
}

.page-contact .ct-hero .lede {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--slate-200);
}

.page-contact .ct-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-jump a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold-200);
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.page-contact .ct-jump a:hover {
  border-color: var(--gold-500);
  background: var(--ink-700);
  color: var(--paper);
}

.page-contact .ct-hero__art {
  position: relative;
  display: none;
}

.page-contact .ct-hero__art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 渠道 ---------- */
.page-contact .ct-channels {
  background: var(--ink-700);
  color: var(--paper);
  padding: clamp(44px, 6.5vw, 92px) 0;
  border-top: 1px solid var(--line-gold);
}

.page-contact .ct-channels .eyebrow {
  color: var(--gold-200);
}

.page-contact .ct-channels .h-section {
  color: var(--paper);
}

.page-contact .ct-channels .body-copy {
  color: var(--slate-200);
}

.page-contact .ct-head {
  max-width: 68ch;
  margin-bottom: clamp(24px, 3.5vw, 46px);
}

.page-contact .ct-channels__grid {
  display: grid;
  gap: var(--ct-gap);
}

.page-contact .ct-channel-list {
  display: grid;
  gap: 16px;
}

.page-contact .ct-card {
  border: 1px solid var(--line-gold);
  border-radius: var(--ct-radius);
  padding: clamp(18px, 2.4vw, 26px);
  background: linear-gradient(170deg, rgba(23, 82, 67, .58), rgba(6, 28, 23, .42));
  box-shadow: var(--shadow-deep);
}

.page-contact .ct-card__kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--gold-500);
}

.page-contact .ct-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--paper);
}

.page-contact .ct-card__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--gold-200);
  overflow-wrap: anywhere;
}

.page-contact .ct-card__value--text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
}

.page-contact .ct-card__facts {
  display: grid;
  gap: 6px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-light);
  font-size: 14px;
  line-height: 1.75;
}

.page-contact .ct-card__facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold-500);
}

.page-contact .ct-card__facts dd {
  margin: 0 0 10px;
  color: var(--slate-200);
}

.page-contact .ct-card__facts dd:last-child {
  margin-bottom: 0;
}

.page-contact .ct-channels__figure {
  margin: 0;
}

.page-contact .media-frame__caption {
  margin: 10px 0 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--slate-200);
}

/* ---------- 材料清单 ---------- */
.page-contact .ct-materials {
  padding: clamp(44px, 6.5vw, 92px) 0;
  background: var(--paper);
}

.page-contact .ct-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.page-contact .ct-filter .filter-btn {
  padding: 10px 18px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.page-contact .ct-filter .filter-btn:hover {
  border-color: var(--gold-500);
  color: var(--ink-900);
}

.page-contact .ct-filter .filter-btn.is-active {
  background: var(--cinnabar-600);
  border-color: var(--cinnabar-600);
  color: #FFFFFF;
}

.page-contact .ct-material-grid {
  display: grid;
  gap: var(--ct-gap);
}

.page-contact .ct-material {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 28px;
  border-top: 2px solid var(--gold-500);
  border-radius: 0 0 var(--ct-radius) var(--ct-radius);
  background: var(--ct-soft);
  box-shadow: var(--shadow-soft);
}

.page-contact .ct-material.is-filtered {
  display: none;
}

.page-contact .ct-material__num {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold-500);
}

.page-contact .ct-material__intro {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate-600);
}

.page-contact .ct-check {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-check li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-700);
}

.page-contact .ct-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-gold-mid);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(201, 162, 39, .18), rgba(201, 162, 39, .02));
}

/* ---------- 附材料 ---------- */
.page-contact .ct-attach {
  padding: clamp(44px, 6.5vw, 92px) 0;
  background: linear-gradient(180deg, var(--paper), #EBE7DA);
}

.page-contact .ct-attach__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  align-items: center;
}

.page-contact .ct-steps {
  display: grid;
  gap: 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-steps__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-dark);
}

.page-contact .ct-steps__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .ct-step-num {
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--gold-500);
  padding-top: 2px;
}

.page-contact .ct-steps__item .h-sub {
  font-size: 16.5px;
}

.page-contact .ct-steps__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-contact .ct-hint {
  margin: 26px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cinnabar-600);
  background: rgba(255, 253, 247, .78);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-contact .ct-attach__figure {
  margin: 0;
}

.page-contact .ct-attach__figure .media-frame__caption {
  color: var(--slate-600);
}

/* ---------- 服务时段 ---------- */
.page-contact .ct-hours {
  padding: clamp(44px, 6.5vw, 92px) 0;
  background: var(--paper);
}

.page-contact .ct-hours__grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
}

.page-contact .ct-scale {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-gold);
  border-radius: var(--ct-radius);
  background: var(--ct-soft);
  box-shadow: var(--shadow-soft);
}

.page-contact .ct-scale__track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--slate-200);
  overflow: hidden;
}

.page-contact .ct-scale__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 37.5%;
  width: 37.5%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  box-shadow: 0 0 12px rgba(201, 162, 39, .55);
}

.page-contact .ct-scale__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--slate-600);
}

.page-contact .ct-scale__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-700);
}

.page-contact .ct-scale__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}

/* ---------- 地址 ---------- */
.page-contact .ct-address {
  margin-top: clamp(32px, 4.5vw, 56px);
  padding: clamp(22px, 3vw, 36px);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--ct-radius) var(--ct-radius) 0;
  background: rgba(201, 213, 220, .45);
}

.page-contact .ct-address .h-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 2.2vw, 20px);
}

.page-contact .ct-address .body-copy {
  color: var(--ink-700);
}

/* ---------- 指引入口 ---------- */
.page-contact .ct-guides {
  background: var(--ink-900);
  color: var(--paper);
  padding: clamp(44px, 6.5vw, 92px) 0;
}

.page-contact .ct-guides .eyebrow {
  color: var(--gold-200);
}

.page-contact .ct-guides .h-section {
  color: var(--paper);
}

.page-contact .ct-guides .body-copy {
  color: var(--slate-200);
}

.page-contact .ct-guides__grid {
  display: grid;
  gap: 16px;
}

.page-contact .ct-link-card {
  display: block;
  padding: 22px;
  border: 1px solid var(--line-gold);
  border-radius: var(--ct-radius);
  color: var(--paper);
  text-decoration: none;
  background: linear-gradient(170deg, rgba(23, 82, 67, .35), rgba(6, 28, 23, .18));
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}

.page-contact .ct-link-card:hover {
  border-color: var(--gold-500);
  background: var(--ink-700);
  transform: translateY(-2px);
}

.page-contact .ct-link-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--paper);
}

.page-contact .ct-link-card__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate-200);
}

.page-contact .ct-link-card__go {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold-200);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-contact .ct-material {
    padding: 30px 26px 32px;
  }

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

@media (min-width: 900px) {
  .page-contact .ct-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-contact .ct-hero__art {
    display: block;
  }

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

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

  .page-contact .ct-channel-list {
    gap: 20px;
  }

  .page-contact .ct-channel-list > .ct-card:nth-child(2) {
    margin-left: 34px;
  }

  .page-contact .ct-channel-list > .ct-card:nth-child(3) {
    margin-left: 14px;
  }

  .page-contact .ct-attach__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-contact .ct-hours__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (min-width: 1100px) {
  .page-contact .ct-material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-contact .ct-material-grid > .ct-material:nth-child(2) {
    margin-top: 28px;
  }

  .page-contact .ct-material-grid > .ct-material:nth-child(3) {
    margin-top: 12px;
  }

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

  .page-contact .ct-guides__grid > .ct-link-card:nth-child(2) {
    margin-top: 24px;
  }

  .page-contact .ct-guides__grid > .ct-link-card:nth-child(5) {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .ct-link-card,
  .page-contact .ct-jump a,
  .page-contact .ct-filter .filter-btn {
    transition: none;
  }

  .page-contact .ct-link-card:hover {
    transform: none;
  }
}

(Note: the above already contains PAGE_CSS once — the final output below is the correct single ordering.)


<main id="main-content" class="page-contact">
  <section class="ct-dark bg-grid" aria-labelledby="ct-hero-title">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="位置提示">
        <a href="/">首页概览</a>
        <span class="breadcrumb__sep" aria-hidden="true">/</span>
        <span aria-current="page">联系与支持</span>
      </nav>
      <div class="ct-hero">
        <div class="ct-hero__lead">
          <p class="eyebrow"><span class="eyebrow__num">05</span>联系与支持</p>
          <h1 class="h-display" id="ct-hero-title">卡在哪一步，就把那一步说清楚</h1>
          <p class="lede">皇冠现金的客服按问题类型分流。你是要比对两个版本的功能差异、是要找一个能装的旧版安装包，还是卡在登录与访客注册的某一环，需要的材料并不相同。照着下面的清单准备好再发信，一次说清，少走一轮来回。</p>
          <ul class="ct-jump">
            <li><a href="#channels">三个渠道</a></li>
            <li><a href="#materials">材料清单</a></li>
            <li><a href="#hours">回复时段</a></li>
            <li><a href="#address">到访地址</a></li>
          </ul>
        </div>
        <div class="ct-hero__art" aria-hidden="true">
          <svg viewBox="0 0 420 320" role="presentation" focusable="false">
            <g fill="none" stroke="rgba(201,162,39,.46)" stroke-width="1">
              <path d="M18 268C104 268 118 92 214 92S330 196 402 54" />
              <path d="M18 214C118 214 142 142 244 142S338 226 402 132" />
              <path d="M18 152C96 152 130 44 226 44S344 118 402 96" stroke-dasharray="3 7" />
            </g>
            <g fill="#C9A227">
              <circle cx="214" cy="92" r="5" />
              <circle cx="244" cy="142" r="4" />
              <circle cx="226" cy="44" r="4" />
            </g>
            <g fill="none" stroke="rgba(239,223,174,.32)" stroke-width="1">
              <rect x="288" y="222" width="96" height="60" rx="8" />
              <path d="M288 242h96M312 222v-16M360 222v-16" />
            </g>
            <g fill="#C22F26">
              <circle cx="336" cy="252" r="6" />
            </g>
          </svg>
        </div>
      </div>
    </div>
  </section>

  <section class="ct-channels" id="channels" aria-labelledby="ct-channels-title">
    <div class="wrap">
      <div class="ct-head">
        <p class="eyebrow"><span class="eyebrow__num">01</span>三个可用渠道</p>
        <h2 class="h-section" id="ct-channels-title">选对入口，问题就少绕一圈</h2>
        <p class="body-copy">邮箱适合带截图的长问题，电话适合需要口头确认步骤的卡点，地址适合需要当面递交材料。三种方式都在工作日 9:00–18:00 有人处理。</p>
      </div>
      <div class="ct-channels__grid">
        <div class="ct-channel-list">
          <article class="ct-card">
            <p class="ct-card__kicker">渠道 01</p>
            <h3 class="ct-card__title">客服邮箱</h3>
            <p class="ct-card__value mono">email@vip-crown-cash.com.cn</p>
            <dl class="ct-card__facts">
              <dt>适合问</dt>
              <dd>两个版本在某个功能点上的差异、某一类旧版安装包该去哪里找、访客注册流程里的细节，以及任何需要附截图说明的情况。</dd>
              <dt>换个渠道更快</dt>
              <dd>需要在电话里当场确认操作步骤、或情况比较急的时候，直接拨打服务电话。</dd>
            </dl>
          </article>
          <article class="ct-card">
            <p class="ct-card__kicker">渠道 02</p>
            <h3 class="ct-card__title">服务电话</h3>
            <p class="ct-card__value mono">15221818140</p>
            <dl class="ct-card__facts">
              <dt>适合问</dt>
              <dd>入口切换后仍进不去、安装包下载中途断开、步骤理解有偏差，这类边说边试更快解决的问题。</dd>
              <dt>换个渠道更快</dt>
              <dd>需要逐项比对功能差异的，请改用邮箱并附上对照滑轨的截图，方便一起查看。</dd>
            </dl>
          </article>
          <article class="ct-card">
            <p class="ct-card__kicker">渠道 03</p>
            <h3 class="ct-card__title">服务联络点</h3>
            <p class="ct-card__value ct-card__value--text">江苏省南京市建邺区江东中路369号皇冠现金服务中心</p>
            <dl class="ct-card__facts">
              <dt>适合问</dt>
              <dd>当面递交材料、需要现场看一遍操作的安排。到访前请先电话约好时间，避免空跑。</dd>
              <dt>换个渠道更快</dt>
              <dd>日常咨询用邮箱或电话即可，不用专程跑一趟。</dd>
            </dl>
          </article>
        </div>
        <figure class="ct-channels__figure media-frame media-frame--wide">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="三张纵向排列的渠道信息卡版式图，分别标注邮箱、电话与地址" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">邮箱、电话、联络点各自的适用问题一眼对照</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="ct-materials" id="materials" aria-labelledby="ct-materials-title">
    <div class="wrap">
      <div class="ct-head">
        <p class="eyebrow"><span class="eyebrow__num">02</span>先说清是哪一类问题</p>
        <h2 class="h-section" id="ct-materials-title">三类问题，三份准备清单</h2>
        <p class="body-copy">同一句「用不了」，可能落在完全不同的环节。先按下面的分类想一遍自己属于哪一类，把对应清单里的信息凑齐，沟通会短很多。</p>
      </div>
      <div class="filter-bar ct-filter" data-filter-group data-filter-scope="#ct-material-list" role="group" aria-label="按问题类型筛选">
        <button class="filter-btn is-active" type="button" data-filter="all" aria-pressed="true">全部</button>
        <button class="filter-btn" type="button" data-filter="compare" aria-pressed="false">版本对照</button>
        <button class="filter-btn" type="button" data-filter="install" aria-pressed="false">下载安装</button>
        <button class="filter-btn" type="button" data-filter="account" aria-pressed="false">登录与注册</button>
      </div>
      <div class="ct-material-grid" id="ct-material-list">
        <article class="ct-material" data-filter-item data-filter-tags="compare" data-reveal>
          <p class="ct-material__num mono">A</p>
          <h3 class="h-sub">版本对照问题</h3>
          <p class="ct-material__intro">你手上有一个版本，想知道换成 V4 之后哪些功能变了、界面挪了位置，或者想确认某条差异还在不在。</p>
          <ul class="ct-check">
            <li>当前在用的版本号：V4、V3 还是 V2</li>
            <li>想比对的功能分类，从入口切换、登录与身份、版本对照、下载中心、注册指引、设备兼容、界面布局、通知提醒、账户安全里挑一项</li>
            <li>对照滑轨上那一屏的截图，左右两栏内容都要看得到</li>
          </ul>
        </article>
        <article class="ct-material" data-filter-item data-filter-tags="install" data-reveal data-reveal-delay="80">
          <p class="ct-material__num mono">B</p>
          <h3 class="h-sub">下载安装问题</h3>
          <p class="ct-material__intro">安装包下到一半断了、双击后没有反应、装完打不开，都属于这一类，多半和系统版本或文件完整性有关。</p>
          <ul class="ct-check">
            <li>设备系统与版本：桌面端看 Windows 10 及以上还是 macOS 12 及以上，移动端看 Android 8.0 及以上还是 iOS 14 及以上</li>
            <li>安装包条目上标注的版本号、文件体积与校验码</li>
            <li>中断或报错时的弹窗截图，连带窗口标题一起截进去</li>
          </ul>
        </article>
        <article class="ct-material" data-filter-item data-filter-tags="account" data-reveal data-reveal-delay="160">
          <p class="ct-material__num mono">C</p>
          <h3 class="h-sub">登录与注册问题</h3>
          <p class="ct-material__intro">老用户的两步登录停在中间，或者第一次在手机上做访客注册找不到起点，说清停在哪一步最有用。</p>
          <ul class="ct-check">
            <li>停在账号识别还是验证确认，卡住时页面上显示了什么提示</li>
            <li>当前入口名称：标准入口还是大陆版入口</li>
            <li>手机系统与正在使用的浏览器名称</li>
          </ul>
        </article>
      </div>
    </div>
  </section>

  <section class="ct-attach" id="attach" aria-labelledby="ct-attach-title">
    <div class="wrap">
      <p class="eyebrow"><span class="eyebrow__num">03</span>省一轮沟通的做法</p>
      <div class="ct-attach__grid">
        <div class="ct-attach__body">
          <h2 class="h-section" id="ct-attach-title">附上这三样，一条消息就够用</h2>
          <p class="body-copy">描述得再细，也比不上一张能看清楚的截图。把下面三样一起发过来，基本可以省掉一次反问。</p>
          <ol class="ct-steps">
            <li class="ct-steps__item">
              <span class="ct-step-num mono">01</span>
              <div>
                <h3 class="h-sub">截图要带上页面地址</h3>
                <p>浏览器地址栏和你正在看的区域截在同一张图里，我们就能直接对上你看的那一屏，不用先猜你说的是哪个栏目。</p>
              </div>
            </li>
            <li class="ct-steps__item">
              <span class="ct-step-num mono">02</span>
              <div>
                <h3 class="h-sub">写清操作系统与版本</h3>
                <p>同一个现象，在 Windows、macOS、Android、iOS 上的成因往往不同。系统写清楚，才知道该翻哪一类安装包条目。</p>
              </div>
            </li>
            <li class="ct-steps__item">
              <span class="ct-step-num mono">03</span>
              <div>
                <h3 class="h-sub">写上客户端版本号</h3>
                <p>V4 与旧版在界面布局和登录步骤上有明显差别，版本号决定了该对着哪一份对照记录来看你的情况。</p>
              </div>
            </li>
          </ol>
          <p class="ct-hint">客服邮箱在工作日 9:00–18:00 内回复；涉及版本对照与旧版客户端下载的问题，附上页面截图能更快定位。</p>
        </div>
        <figure class="ct-attach__figure media-frame media-frame--free">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深墨绿底上的金色抽象线路示意图，节点以圆点表示" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">信息越完整，定位越直接</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="ct-hours" id="hours" aria-labelledby="ct-hours-title">
    <div class="wrap">
      <div class="ct-hours__grid">
        <div>
          <p class="eyebrow"><span class="eyebrow__num">04</span>什么时候能收到回复</p>
          <h2 class="h-section" id="ct-hours-title">工作日 9:00–18:00 内回复</h2>
          <p class="body-copy">这段时间里，邮箱和电话都有人处理。周末与节假日收到的来信并不会作废，会按到达的先后顺序在下一个工作日接着处理。</p>
        </div>
        <div class="ct-scale">
          <div class="ct-scale__track" role="img" aria-label="一天二十四小时刻度，工作日九点至十八点为服务时段">
            <span class="ct-scale__fill"></span>
          </div>
          <div class="ct-scale__labels mono">
            <span>00:00</span>
            <span>06:00</span>
            <span>12:00</span>
            <span>18:00</span>
            <span>24:00</span>
          </div>
          <p class="ct-scale__note"><span class="ct-scale__dot" aria-hidden="true"></span>鎏金区间为工作日受理时段</p>
        </div>
      </div>

      <div class="ct-address" id="address">
        <p class="eyebrow"><span class="eyebrow__num">05</span>到访与地址说明</p>
        <h2 class="h-sub">江苏省南京市建邺区江东中路369号皇冠现金服务中心</h2>
        <p class="body-copy">这里是皇冠现金的服务联络点，用于接待当面递交材料与需要现场看一遍操作的安排。到访前请先拨打服务电话约好时间，工作日 9:00–18:00 都有人在。日常的版本对照、安装包与注册问题，用邮箱或电话处理更快，不必专程跑一趟。</p>
      </div>
    </div>
  </section>

  <section class="ct-guides" id="guides" aria-labelledby="ct-guides-title">
    <div class="wrap">
      <div class="ct-head">
        <p class="eyebrow"><span class="eyebrow__num">06</span>也许答案已经在指引里</p>
        <h2 class="h-section" id="ct-guides-title">先翻一页，可能不用等回复</h2>
        <p class="body-copy">入口切换、两步登录、移动端访客注册这些高频问题，指引里已经按步骤写全了；版本差异和安装包条目也能直接查到。</p>
      </div>
      <div class="ct-guides__grid">
        <a class="ct-link-card" href="/guide/">
          <h3 class="ct-link-card__title">使用指引</h3>
          <p class="ct-link-card__text">入口切换不生效怎么排查、两步登录怎么做、手机上访客注册从哪一步开始，都在这页。</p>
          <span class="ct-link-card__go">查看指引 →</span>
        </a>
        <a class="ct-link-card" href="/features/">
          <h3 class="ct-link-card__title">版本与下载中心</h3>
          <p class="ct-link-card__text">按系统找旧版安装包，对照 V4 与旧版在九个功能分类上的差别。</p>
          <span class="ct-link-card__go">进入下载中心 →</span>
        </a>
        <a class="ct-link-card" href="/news/">
          <h3 class="ct-link-card__title">版本动态</h3>
          <p class="ct-link-card__text">最近改了什么、兼容性验证的结果、指引哪里做了调整，按版本线归档。</p>
          <span class="ct-link-card__go">查看更新 →</span>
        </a>
        <a class="ct-link-card" href="/about-us/">
          <h3 class="ct-link-card__title">品牌与团队</h3>
          <p class="ct-link-card__text">资料由谁整理、多久复核一次、V2 到 V4 怎么一步步走过来。</p>
          <span class="ct-link-card__go">了解团队 →</span>
        </a>
        <a class="ct-link-card" href="/privacy/">
          <h3 class="ct-link-card__title">隐私政策</h3>
          <p class="ct-link-card__text">入口偏好的本地保存方式，以及来信咨询时附带的信息如何使用。</p>
          <span class="ct-link-card__go">查看说明 →</span>
        </a>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --ct-gap: clamp(20px, 3vw, 36px);
  --ct-radius: 12px;
  --ct-soft: rgba(255, 253, 247, .92);
  background: var(--paper);
  color: var(--black);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-contact .wrap {
  width: 100%;
}

.page-contact .eyebrow {
  margin: 0 0 14px;
  color: var(--slate-600);
}

.page-contact .eyebrow__num {
  color: var(--gold-500);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  margin-right: 12px;
}

.page-contact .h-display,
.page-contact .h-section {
  margin: 0;
  letter-spacing: -.01em;
}

.page-contact .h-section {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.22;
}

.page-contact .h-sub {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.page-contact .body-copy {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.8;
}

.page-contact section {
  scroll-margin-top: 96px;
}

.page-contact .ct-dark {
  position: relative;
  background-color: var(--ink-900);
  color: var(--paper);
  padding: clamp(26px, 4vw, 44px) 0 clamp(48px, 7vw, 90px);
  isolation: isolate;
}

.page-contact .ct-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 88% 8%, rgba(201, 162, 39, .16), transparent 62%),
              radial-gradient(90% 80% at 4% 92%, rgba(23, 82, 67, .75), transparent 70%);
  pointer-events: none;
}

.page-contact .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(22px, 4vw, 42px);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--slate-200);
}

.page-contact .breadcrumb a {
  color: var(--gold-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}

.page-contact .breadcrumb a:hover {
  border-bottom-color: var(--gold-500);
}

.page-contact .breadcrumb__sep {
  color: var(--gold-500);
}

.page-contact .ct-hero {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.page-contact .ct-hero .eyebrow {
  color: var(--gold-200);
}

.page-contact .ct-hero .h-display {
  color: var(--paper);
  max-width: 20ch;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.06;
}

.page-contact .ct-hero .lede {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--slate-200);
}

.page-contact .ct-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-jump a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--gold-200);
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.page-contact .ct-jump a:hover {
  border-color: var(--gold-500);
  background: var(--ink-700);
  color: var(--paper);
}

.page-contact .ct-hero__art {
  position: relative;
  display: none;
}

.page-contact .ct-hero__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-contact .ct-channels {
  background: var(--ink-700);
  color: var(--paper);
  padding: clamp(44px, 6.5vw, 92px) 0;
  border-top: 1px solid var(--line-gold);
}

.page-contact .ct-channels .eyebrow {
  color: var(--gold-200);
}

.page-contact .ct-channels .h-section {
  color: var(--paper);
}

.page-contact .ct-channels .body-copy {
  color: var(--slate-200);
}

.page-contact .ct-head {
  max-width: 68ch;
  margin-bottom: clamp(24px, 3.5vw, 46px);
}

.page-contact .ct-channels__grid {
  display: grid;
  gap: var(--ct-gap);
}

.page-contact .ct-channel-list {
  display: grid;
  gap: 16px;
}

.page-contact .ct-card {
  border: 1px solid var(--line-gold);
  border-radius: var(--ct-radius);
  padding: clamp(18px, 2.4vw, 26px);
  background: linear-gradient(170deg, rgba(23, 82, 67, .58), rgba(6, 28, 23, .42));
  box-shadow: var(--shadow-deep);
}

.page-contact .ct-card__kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--gold-500);
}

.page-contact .ct-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--paper);
}

.page-contact .ct-card__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--gold-200);
  overflow-wrap: anywhere;
}

.page-contact .ct-card__value--text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
}

.page-contact .ct-card__facts {
  display: grid;
  gap: 6px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-light);
  font-size: 14px;
  line-height: 1.75;
}

.page-contact .ct-card__facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold-500);
}

.page-contact .ct-card__facts dd {
  margin: 0 0 10px;
  color: var(--slate-200);
}

.page-contact .ct-card__facts dd:last-child {
  margin-bottom: 0;
}

.page-contact .ct-channels__figure {
  margin: 0;
}

.page-contact .media-frame__caption {
  margin: 10px 0 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--slate-200);
}

.page-contact .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-contact .ct-materials {
  padding: clamp(44px, 6.5vw, 92px) 0;
  background: var(--paper);
}

.page-contact .ct-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.page-contact .ct-filter .filter-btn {
  padding: 10px 18px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.page-contact .ct-filter .filter-btn:hover {
  border-color: var(--gold-500);
  color: var(--ink-900);
}

.page-contact .ct-filter .filter-btn.is-active {
  background: var(--cinnabar-600);
  border-color: var(--cinnabar-600);
  color: #FFFFFF;
}

.page-contact .ct-material-grid {
  display: grid;
  gap: var(--ct-gap);
}

.page-contact .ct-material {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 28px;
  border-top: 2px solid var(--gold-500);
  border-radius: 0 0 var(--ct-radius) var(--ct-radius);
  background: var(--ct-soft);
  box-shadow: var(--shadow-soft);
}

.page-contact .ct-material.is-filtered {
  display: none;
}

.page-contact .ct-material__num {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold-500);
}

.page-contact .ct-material__intro {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate-600);
}

.page-contact .ct-check {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-check li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-700);
}

.page-contact .ct-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-gold-mid);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(201, 162, 39, .18), rgba(201, 162, 39, .02));
}

.page-contact .ct-attach {
  padding: clamp(44px, 6.5vw, 92px) 0;
  background: linear-gradient(180deg, var(--paper), #EBE7DA);
}

.page-contact .ct-attach__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  align-items: center;
}

.page-contact .ct-steps {
  display: grid;
  gap: 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .ct-steps__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-dark);
}

.page-contact .ct-steps__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-contact .ct-step-num {
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--gold-500);
  padding-top: 2px;
}

.page-contact .ct-steps__item .h-sub {
  font-size: 16.5px;
}

.page-contact .ct-steps__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-700);
}

.page-contact .ct-hint {
  margin: 26px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cinnabar-600);
  background: rgba(255, 253, 247, .78);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-contact .ct-attach__figure {
  margin: 0;
}

.page-contact .ct-attach__figure .media-frame__caption {
  color: var(--slate-600);
}

.page-contact .ct-hours {
  padding: clamp(44px, 6.5vw, 92px) 0;
  background: var(--paper);
}

.page-contact .ct-hours__grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
}

.page-contact .ct-scale {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-gold);
  border-radius: var(--ct-radius);
  background: var(--ct-soft);
  box-shadow: var(--shadow-soft);
}

.page-contact .ct-scale__track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--slate-200);
  overflow: hidden;
}

.page-contact .ct-scale__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 37.5%;
  width: 37.5%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  box-shadow: 0 0 12px rgba(201, 162, 39, .55);
}

.page-contact .ct-scale__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--slate-600);
}

.page-contact .ct-scale__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-700);
}

.page-contact .ct-scale__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}

.page-contact .ct-address {
  margin-top: clamp(32px, 4.5vw, 56px);
  padding: clamp(22px, 3vw, 36px);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--ct-radius) var(--ct-radius) 0;
  background: rgba(201, 213, 220, .45);
}

.page-contact .ct-address .h-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 2.2vw, 20px);
}

.page-contact .ct-address .body-copy {
  color: var(--ink-700);
}

.page-contact .ct-guides {
  background: var(--ink-900);
  color: var(--paper);
  padding: clamp(44px, 6.5vw, 92px) 0;
}

.page-contact .ct-guides .eyebrow {
  color: var(--gold-200);
}

.page-contact .ct-guides .h-section {
  color: var(--paper);
}

.page-contact .ct-guides .body-copy {
  color: var(--slate-200);
}

.page-contact .ct-guides__grid {
  display: grid;
  gap: 16px;
}

.page-contact .ct-link-card {
  display: block;
  padding: 22px;
  border: 1px solid var(--line-gold);
  border-radius: var(--ct-radius);
  color: var(--paper);
  text-decoration: none;
  background: linear-gradient(170deg, rgba(23, 82, 67, .35), rgba(6, 28, 23, .18));
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}

.page-contact .ct-link-card:hover {
  border-color: var(--gold-500);
  background: var(--ink-700);
  transform: translateY(-2px);
}

.page-contact .ct-link-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--paper);
}

.page-contact .ct-link-card__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate-200);
}

.page-contact .ct-link-card__go {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold-200);
}

@media (min-width: 640px) {
  .page-contact .ct-material {
    padding: 30px 26px 32px;
  }

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

@media (min-width: 900px) {
  .page-contact .ct-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-contact .ct-hero__art {
    display: block;
  }

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

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

  .page-contact .ct-channel-list {
    gap: 20px;
  }

  .page-contact .ct-channel-list > .ct-card:nth-child(2) {
    margin-left: 34px;
  }

  .page-contact .ct-channel-list > .ct-card:nth-child(3) {
    margin-left: 14px;
  }

  .page-contact .ct-attach__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-contact .ct-hours__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (min-width: 1100px) {
  .page-contact .ct-material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .page-contact .ct-material-grid > .ct-material:nth-child(2) {
    margin-top: 28px;
  }

  .page-contact .ct-material-grid > .ct-material:nth-child(3) {
    margin-top: 12px;
  }

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

  .page-contact .ct-guides__grid > .ct-link-card:nth-child(2) {
    margin-top: 24px;
  }

  .page-contact .ct-guides__grid > .ct-link-card:nth-child(5) {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .ct-link-card,
  .page-contact .ct-jump a,
  .page-contact .ct-filter .filter-btn,
  .page-contact .breadcrumb a {
    transition: none;
  }

  .page-contact .ct-link-card:hover {
    transform: none;
  }
}