.page-home {
  --home-soft: #C7CEE8;
  --home-track: rgba(46, 60, 120, 0.6);
  background: var(--indigo-950);
  color: var(--paper);
  overflow-x: clip;
}

.page-home .section {
  padding-block: clamp(44px, 6.5vw, 88px);
}

.page-home .breadcrumbs {
  padding-block: 18px 2px;
}

.page-home h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 3.4vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--paper);
}

.page-home .section-head {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-home .section-head .rule-line {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold-500);
  margin-top: 16px;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 96px);
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-home .hero-copy {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
  overflow: hidden;
}

.page-home .hero-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.page-home .hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-home .hero-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(10, 17, 48, 0.35) 0%, rgba(10, 17, 48, 0.94) 74%),
    repeating-linear-gradient(0deg, rgba(138, 147, 184, 0.09) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(138, 147, 184, 0.09) 0 1px, transparent 1px 24px);
}

.page-home .hero-text {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 4.5vw, 52px);
  width: 100%;
}

.page-home .hero-title {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.05rem, 6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.page-home .hero-title em {
  font-style: normal;
  color: var(--gold-500);
}

.page-home .hero-lead {
  max-width: 36ch;
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--home-soft);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .hero-side {
  position: relative;
}

.page-home .hero-side-figure {
  margin: 0;
  height: 100%;
  min-height: 260px;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-800);
}

.page-home .hero-side-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}

.page-home .status-card {
  position: relative;
  z-index: 3;
  margin: -76px 14px 0;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
  box-shadow: var(--shadow-stack);
}

.page-home .status-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.page-home .status-card__refresh {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .status-ring {
  width: 76px;
  height: 76px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: conic-gradient(var(--turquoise) 0 240deg, var(--vermilion) 240deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 54%, #000 56% 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 54%, #000 56% 100%);
}

.page-home .line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-home .line-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.page-home .line-item:first-child {
  border-top: 0;
}

.page-home .line-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.page-home .line-item--ok .line-dot {
  background: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(47, 181, 154, 0.16);
}

.page-home .line-item--down .line-dot {
  background: var(--vermilion);
}

.page-home .line-name {
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-home .line-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-home .status-card__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
}

@keyframes home-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .line-item--ok .line-dot {
    animation: home-breathe 2.4s var(--ease) infinite;
  }
}

/* ---------- 双版本入口对照 ---------- */
.page-home .compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-home .compare-card {
  position: relative;
  padding: clamp(20px, 3.4vw, 34px);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
}

.page-home .compare-card--new {
  background: var(--indigo-800);
  border-left: 4px solid var(--gold-500);
}

.page-home .compare-card h3 {
  margin: 14px 0 10px;
  font-size: 1.16rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-home .compare-card > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--home-soft);
}

.page-home .compare-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.page-home .compare-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--home-soft);
}

.page-home .compare-list li::before {
  content: "—";
  font-family: var(--font-mono);
  color: var(--gold-500);
}

.page-home .compare-link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
  padding-bottom: 3px;
}

.page-home .compare-link:hover {
  color: var(--gold-500);
}

/* ---------- 赛程条带 ---------- */
.page-home .schedule-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.page-home .schedule-cover {
  margin: 0;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-800);
}

.page-home .schedule-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-home .schedule-cover figcaption {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.page-home .schedule-rail {
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.page-home .schedule-rail::-webkit-scrollbar {
  display: none;
}

.page-home .schedule-rail:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
}

.page-home .match-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
}

.page-home .match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home .match-league {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .match-teams {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-home .match-vs {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
  padding-inline: 4px;
}

.page-home .match-stats {
  display: grid;
  gap: 9px;
}

.page-home .stat-row {
  display: grid;
  grid-template-columns: 20px 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.page-home .stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.page-home .stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--gold-300);
}

.page-home .mini-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--home-track);
  overflow: hidden;
}

.page-home .mini-bar i {
  display: block;
  height: 100%;
  width: var(--w, 4px);
  border-radius: 3px;
}

.page-home .stat-row--for .mini-bar i {
  background: var(--gold-500);
}

.page-home .stat-row--against .mini-bar i {
  background: var(--sky);
}

.page-home .schedule-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}

.page-home .schedule-hint {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
}

/* ---------- 专题索引 ---------- */
.page-home .topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-home .topic-lead {
  margin: 0 0 24px;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--home-soft);
}

.page-home .topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .topic-tag {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 16px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-home .topic-tag:hover {
  transform: translateX(5px);
  border-color: var(--gold-500);
}

.page-home .topic-tag__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-500);
  padding-top: 3px;
}

.page-home .topic-tag__body {
  display: block;
}

.page-home .topic-tag__name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--paper);
}

.page-home .topic-tag__note {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 维护与人工支持 ---------- */
.page-home .ops-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-home .ops-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .ops-list li {
  padding-left: 16px;
  border-left: 2px solid var(--line);
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--home-soft);
}

.page-home .ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-home .ops-figure {
  margin: 0;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-800);
}

.page-home .ops-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .ops-note {
  margin-top: clamp(28px, 4vw, 44px);
}

.page-home .ops-note p {
  margin: 0;
  padding: 16px 18px;
  border: var(--border);
  border-left: 4px solid var(--turquoise);
  border-radius: var(--radius);
  background: var(--indigo-900);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--home-soft);
  overflow-wrap: anywhere;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .match-card {
    flex: 0 0 46%;
  }
}

@media (min-width: 820px) {
  .page-home .compare-grid {
    grid-template-columns: 5fr 7fr;
  }
}

@media (min-width: 900px) {
  .page-home .ops-grid {
    grid-template-columns: 7fr 5fr;
  }
}

@media (min-width: 960px) {
  .page-home .hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: stretch;
  }

  .page-home .hero-side {
    display: flex;
    flex-direction: column;
  }

  .page-home .status-card {
    position: absolute;
    left: calc(var(--gap) * -3);
    right: 24px;
    bottom: 24px;
    margin: 0;
  }

  .page-home .schedule-wrap {
    grid-template-columns: 4fr 8fr;
    align-items: stretch;
  }

  .page-home .schedule-cover {
    display: flex;
    flex-direction: column;
  }

  .page-home .schedule-cover img {
    flex: 1;
    aspect-ratio: auto;
    height: 100%;
  }

  .page-home .topic-grid {
    grid-template-columns: 5fr 7fr;
  }
}

@media (min-width: 1100px) {
  .page-home .match-card {
    flex: 0 0 31%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .topic-tag {
    transition: none;
  }

  .page-home .topic-tag:hover {
    transform: none;
  }
}


<main id="main-content" class="page-home">
  <div class="container">
    <nav class="breadcrumbs" aria-label="当前位置">
      <span aria-current="page">首页</span>
      <span class="breadcrumbs__sep">/</span>
      <span>V4 品牌通道</span>
      <span class="breadcrumbs__sep">/</span>
      <span>第 18 轮 · 赛程已同步</span>
    </nav>
  </div>

  <section class="section hero" aria-labelledby="hero-title">
    <div class="container hero-grid">
      <div class="hero-copy">
        <figure class="hero-figure">
          <img src="{zhanqunpic:h:960w:1680}" width="1680" height="960" alt="夜间高原公路向远处延伸，路面反光形成一道连续光带，画面上没有任何标识与文字">
        </figure>
        <div class="hero-text">
          <p class="kicker">V4 品牌通道 · 品质入口</p>
          <h1 class="hero-title" id="hero-title">KAIYUN <em>最新通道</em>，<br>三条线路实时可查</h1>
          <p class="hero-lead">三条线路每 60 秒刷新状态，旧链接打不开时直接换备用入口，首屏打开也比上一代快约 38%。</p>
          <div class="hero-actions">
            <a class="btn btn--primary" href="#routes">查看线路状态</a>
            <a class="btn btn--ghost" href="/features/">版本对照</a>
          </div>
        </div>
      </div>

      <div class="hero-side">
        <figure class="hero-side-figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="山口处成排经幡在冷色夜风中展开，五色布条细节清晰，整体偏冷调">
        </figure>

        <div class="status-card" id="routes">
          <div class="status-card__head">
            <span class="kicker">当前线路</span>
            <span class="status-card__refresh">60 秒刷新</span>
          </div>

          <div class="status-ring" aria-hidden="true"></div>

          <ul class="line-list">
            <li class="line-item line-item--ok">
              <span class="line-dot" aria-hidden="true"></span>
              <span class="line-name">主线路 · V4 品质通道</span>
              <span class="line-time">12:04:18</span>
            </li>
            <li class="line-item line-item--ok">
              <span class="line-dot" aria-hidden="true"></span>
              <span class="line-name">备用 01</span>
              <span class="line-time">12:04:20</span>
            </li>
            <li class="line-item line-item--down">
              <span class="line-dot" aria-hidden="true"></span>
              <span class="line-name">备用 02 · 维护窗口</span>
              <span class="line-time">12:04:22</span>
            </li>
          </ul>

          <p class="status-card__note">三盏灯两青一红，最近一次刷新距现在不到一分钟。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section compare" aria-labelledby="compare-title">
    <div class="container">
      <div class="section-head" data-reveal>
        <p class="kicker">入口对照</p>
        <h2 id="compare-title">手里那条旧链接，这一轮还该不该点</h2>
        <span class="rule-line" aria-hidden="true"></span>
      </div>

      <div class="compare-grid">
        <article class="compare-card compare-card--old" data-reveal>
          <span class="tag tag--warn">旧版入口</span>
          <h3>早先收藏的 V2、V3 地址</h3>
          <p>维护窗口一旦开启，这几条地址会被自动关停。打开后长时间空白、或者反复跳回原页，多半是它这一轮已经不再指向赛事内容。</p>
          <ul class="compare-list">
            <li>先别急着重装浏览器，换一条线路往往十秒内就能进</li>
            <li>手上只有旧链接时，对照下方的线路状态再操作</li>
            <li>V2、V3 的入口说明页仍然保留，可以随时回查</li>
          </ul>
        </article>

        <article class="compare-card compare-card--new" data-reveal>
          <span class="tag tag--ok">V4 最新通道</span>
          <h3>一期三线，主备分工明确</h3>
          <p>主线路承担日常访问，两条备用线路在主线路波动时接替。点开之前，状态灯已经告诉您通不通。</p>
          <ul class="compare-list">
            <li>主线路与备用 01 当前可用，可直接进入</li>
            <li>备用 02 正处在维护窗口，暂时让位</li>
            <li>加载耗时比上一代缩短约 38%，页面打开更快</li>
            <li>核查时间精确到秒，刷新节奏固定为 60 秒</li>
          </ul>
          <a class="compare-link" href="/features/">查看完整版本对照</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section schedule" aria-labelledby="schedule-title">
    <div class="container">
      <div class="section-head" data-reveal>
        <p class="kicker">第 18 轮 · 赛程中心</p>
        <h2 id="schedule-title">进失球横向摊开，一扫就知道打到什么程度</h2>
        <span class="rule-line" aria-hidden="true"></span>
      </div>
    </div>

    <div class="container schedule-wrap">
      <figure class="schedule-cover" data-reveal>
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="低角度广角拍摄的夜间球场灯光与草皮纹理，画面中没有球员面部特写" loading="lazy" decoding="async">
        <figcaption>第 18 轮 · 六类俱乐部联赛对阵已同步</figcaption>
      </figure>

      <div class="schedule-rail" tabindex="0" role="group" aria-label="第 18 轮各场次，可用左右方向键切换">
        <article class="match-card">
          <div class="match-head">
            <span class="match-league">城市联赛 · A 组</span>
            <span class="tag tag--ok">已同步</span>
          </div>
          <p class="match-teams">拉萨城东 <span class="match-vs">对</span> 日喀则高原</p>
          <div class="match-stats">
            <div class="stat-row stat-row--for">
              <span class="stat-label">进</span>
              <span class="stat-num">2</span>
              <span class="mini-bar"><i style="--w:50%"></i></span>
            </div>
            <div class="stat-row stat-row--against">
              <span class="stat-label">失</span>
              <span class="stat-num">1</span>
              <span class="mini-bar"><i style="--w:25%"></i></span>
            </div>
          </div>
        </article>

        <article class="match-card">
          <div class="match-head">
            <span class="match-league">城市联赛 · B 组</span>
            <span class="tag tag--ok">已同步</span>
          </div>
          <p class="match-teams">山南河谷 <span class="match-vs">对</span> 林芝森林</p>
          <div class="match-stats">
            <div class="stat-row stat-row--for">
              <span class="stat-label">进</span>
              <span class="stat-num">1</span>
              <span class="mini-bar"><i style="--w:25%"></i></span>
            </div>
            <div class="stat-row stat-row--against">
              <span class="stat-label">失</span>
              <span class="stat-num">1</span>
              <span class="mini-bar"><i style="--w:25%"></i></span>
            </div>
          </div>
        </article>

        <article class="match-card">
          <div class="match-head">
            <span class="match-league">青年联赛</span>
            <span class="tag tag--ok">已同步</span>
          </div>
          <p class="match-teams">昌都青年 <span class="match-vs">对</span> 那曲青年</p>
          <div class="match-stats">
            <div class="stat-row stat-row--for">
              <span class="stat-label">进</span>
              <span class="stat-num">3</span>
              <span class="mini-bar"><i style="--w:75%"></i></span>
            </div>
            <div class="stat-row stat-row--against">
              <span class="stat-label">失</span>
              <span class="stat-num">0</span>
              <span class="mini-bar"><i style="--w:4px"></i></span>
            </div>
          </div>
        </article>

        <article class="match-card">
          <div class="match-head">
            <span class="match-league">女子联赛</span>
            <span class="tag tag--ok">已同步</span>
          </div>
          <p class="match-teams">拉萨女足 <span class="match-vs">对</span> 阿里女足</p>
          <div class="match-stats">
            <div class="stat-row stat-row--for">
              <span class="stat-label">进</span>
              <span class="stat-num">0</span>
              <span class="mini-bar"><i style="--w:4px"></i></span>
            </div>
            <div class="stat-row stat-row--against">
              <span class="stat-label">失</span>
              <span class="stat-num">2</span>
              <span class="mini-bar"><i style="--w:50%"></i></span>
            </div>
          </div>
        </article>

        <article class="match-card">
          <div class="match-head">
            <span class="match-league">企业联赛</span>
            <span class="tag tag--ok">已同步</span>
          </div>
          <p class="match-teams">城关联队 <span class="match-vs">对</span> 堆龙联队</p>
          <div class="match-stats">
            <div class="stat-row stat-row--for">
              <span class="stat-label">进</span>
              <span class="stat-num">2</span>
              <span class="mini-bar"><i style="--w:50%"></i></span>
            </div>
            <div class="stat-row stat-row--against">
              <span class="stat-label">失</span>
              <span class="stat-num">2</span>
              <span class="mini-bar"><i style="--w:50%"></i></span>
            </div>
          </div>
        </article>

        <article class="match-card">
          <div class="match-head">
            <span class="match-league">高原邀请赛</span>
            <span class="tag tag--ok">已同步</span>
          </div>
          <p class="match-teams">曲水竞技 <span class="match-vs">对</span> 尼木竞技</p>
          <div class="match-stats">
            <div class="stat-row stat-row--for">
              <span class="stat-label">进</span>
              <span class="stat-num">1</span>
              <span class="mini-bar"><i style="--w:25%"></i></span>
            </div>
            <div class="stat-row stat-row--against">
              <span class="stat-label">失</span>
              <span class="stat-num">3</span>
              <span class="mini-bar"><i style="--w:75%"></i></span>
            </div>
          </div>
        </article>
      </div>
    </div>

    <div class="container schedule-foot">
      <p class="schedule-hint">赛后 30 分钟内同步本轮数据。左右拖动条带，或用方向键逐场切换。</p>
      <a class="btn btn--ghost btn--sm" href="/features/">进赛程中心看全部轮次</a>
    </div>
  </section>

  <section class="section topics" aria-labelledby="topics-title">
    <div class="container">
      <div class="topic-grid">
        <div class="topic-intro" data-reveal>
          <p class="kicker">专题索引</p>
          <h2 id="topics-title">四十二条规则重新编队，单条条文一个锚点直达</h2>
          <p class="topic-lead">竞赛、报名、纪律、器材、赛事运营五类分开放，每一条都有固定编号。把单条链接发给同事，对方打开就停在那一条，不必再从第一段往下翻。</p>
          <a class="btn btn--primary" href="/stories/">进入俱乐部联赛专题</a>
        </div>

        <ul class="topic-list" data-reveal>
          <li class="topic-tag">
            <span class="topic-tag__num">01</span>
            <span class="topic-tag__body">
              <span class="topic-tag__name">竞赛</span>
              <span class="topic-tag__note">赛制安排与轮次设置</span>
            </span>
          </li>
          <li class="topic-tag">
            <span class="topic-tag__num">02</span>
            <span class="topic-tag__body">
              <span class="topic-tag__name">报名</span>
              <span class="topic-tag__note">参赛资格与提交材料</span>
            </span>
          </li>
          <li class="topic-tag">
            <span class="topic-tag__num">03</span>
            <span class="topic-tag__body">
              <span class="topic-tag__name">纪律</span>
              <span class="topic-tag__note">违规认定与申诉路径</span>
            </span>
          </li>
          <li class="topic-tag">
            <span class="topic-tag__num">04</span>
            <span class="topic-tag__body">
              <span class="topic-tag__name">器材</span>
              <span class="topic-tag__note">装备规格与场地条件</span>
            </span>
          </li>
          <li class="topic-tag">
            <span class="topic-tag__num">05</span>
            <span class="topic-tag__body">
              <span class="topic-tag__name">赛事运营</span>
              <span class="topic-tag__note">现场组织与执行分工</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section ops" aria-labelledby="ops-title">
    <div class="container ops-grid">
      <div class="ops-copy" data-reveal>
        <p class="kicker">维护节奏与人工支持</p>
        <h2 id="ops-title">固定的维护窗口，清楚的响应时间</h2>
        <ul class="ops-list">
          <li>每月 2 次例行维护，安排在工作日 03:00–05:00，窗口内旧入口自动切换到备用线路。</li>
          <li>线路状态每 60 秒刷新一次，页面顶部即可确认；首屏打开速度较上一代提升约 38%。</li>
          <li>核查工单按提交顺序排队，平均 1 个工作日给出结果；线路问题首次响应通常在 2 小时左右。</li>
          <li>团队 28 人，分内容编辑、数据校对、前端体验、客户服务四组，赛程每轮校对一次。</li>
        </ul>
        <div class="ops-actions">
          <a class="btn btn--primary" href="/questions/">查看线路自查步骤</a>
          <a class="btn btn--ghost" href="/contact/">联系人工核查</a>
        </div>
      </div>

      <figure class="ops-figure" data-reveal>
        <img src="{zhanqunpic:h:640w:1000}" width="1000" height="640" alt="同心波纹状抽象图形叠加半透明网格，青绿与金色光点散布其间，画面中没有真实设备" loading="lazy" decoding="async">
      </figure>
    </div>

    <div class="container ops-note">
      <p>联系电话 400-7978-7164，客服邮箱 contact@kaiyun-v4.com.cn，工作日 09:30–18:30 内有人值守。提交线路问题时附上截图与访问时间，处理会更快。</p>
    </div>
  </section>
</main>

.page-home {
  --home-soft: #C7CEE8;
  --home-track: rgba(46, 60, 120, 0.6);
  background: var(--indigo-950);
  color: var(--paper);
  overflow-x: clip;
}

.page-home .section {
  padding-block: clamp(44px, 6.5vw, 88px);
}

.page-home .breadcrumbs {
  padding-block: 18px 2px;
}

.page-home h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 3.4vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--paper);
}

.page-home .section-head {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-home .section-head .rule-line {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold-500);
  margin-top: 16px;
}

/* 首屏 */
.page-home .hero {
  padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 96px);
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-home .hero-copy {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
  overflow: hidden;
}

.page-home .hero-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.page-home .hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-home .hero-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(10, 17, 48, 0.35) 0%, rgba(10, 17, 48, 0.94) 74%),
    repeating-linear-gradient(0deg, rgba(138, 147, 184, 0.09) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(138, 147, 184, 0.09) 0 1px, transparent 1px 24px);
}

.page-home .hero-text {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(24px, 4.5vw, 52px);
}

.page-home .hero-title {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.05rem, 6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.page-home .hero-title em {
  font-style: normal;
  color: var(--gold-500);
}

.page-home .hero-lead {
  max-width: 36ch;
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--home-soft);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .hero-side {
  position: relative;
}

.page-home .hero-side-figure {
  margin: 0;
  height: 100%;
  min-height: 260px;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-800);
}

.page-home .hero-side-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}

.page-home .status-card {
  position: relative;
  z-index: 3;
  margin: -76px 14px 0;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
  box-shadow: var(--shadow-stack);
}

.page-home .status-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.page-home .status-card__refresh {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .status-ring {
  width: 76px;
  height: 76px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: conic-gradient(var(--turquoise) 0 240deg, var(--vermilion) 240deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 54%, #000 56% 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 54%, #000 56% 100%);
}

.page-home .line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-home .line-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.page-home .line-item:first-child {
  border-top: 0;
}

.page-home .line-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.page-home .line-item--ok .line-dot {
  background: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(47, 181, 154, 0.16);
}

.page-home .line-item--down .line-dot {
  background: var(--vermilion);
}

.page-home .line-name {
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-home .line-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-home .status-card__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
}

@keyframes home-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .line-item--ok .line-dot {
    animation: home-breathe 2.4s var(--ease) infinite;
  }
}

/* 双版本入口对照 */
.page-home .compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-home .compare-card {
  position: relative;
  padding: clamp(20px, 3.4vw, 34px);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
}

.page-home .compare-card--new {
  background: var(--indigo-800);
  border-left: 4px solid var(--gold-500);
}

.page-home .compare-card h3 {
  margin: 14px 0 10px;
  font-size: 1.16rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-home .compare-card > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--home-soft);
}

.page-home .compare-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.page-home .compare-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--home-soft);
}

.page-home .compare-list li::before {
  content: "—";
  font-family: var(--font-mono);
  color: var(--gold-500);
}

.page-home .compare-link {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
}

.page-home .compare-link:hover {
  color: var(--gold-500);
}

/* 赛程条带 */
.page-home .schedule-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.page-home .schedule-cover {
  margin: 0;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-800);
}

.page-home .schedule-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-home .schedule-cover figcaption {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.page-home .schedule-rail {
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.page-home .schedule-rail::-webkit-scrollbar {
  display: none;
}

.page-home .schedule-rail:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
}

.page-home .match-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
}

.page-home .match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home .match-league {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .match-teams {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-home .match-vs {
  padding-inline: 4px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
}

.page-home .match-stats {
  display: grid;
  gap: 9px;
}

.page-home .stat-row {
  display: grid;
  grid-template-columns: 20px 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.page-home .stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.page-home .stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--gold-300);
}

.page-home .mini-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--home-track);
  overflow: hidden;
}

.page-home .mini-bar i {
  display: block;
  height: 100%;
  width: var(--w, 4px);
  border-radius: 3px;
}

.page-home .stat-row--for .mini-bar i {
  background: var(--gold-500);
}

.page-home .stat-row--against .mini-bar i {
  background: var(--sky);
}

.page-home .schedule-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}

.page-home .schedule-hint {
  margin: 0;
  max-width: 52ch;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
}

/* 专题索引 */
.page-home .topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-home .topic-lead {
  margin: 0 0 24px;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--home-soft);
}

.page-home .topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .topic-tag {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 16px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--indigo-900);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-home .topic-tag:hover {
  transform: translateX(5px);
  border-color: var(--gold-500);
}

.page-home .topic-tag__num {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}

.page-home .topic-tag__body {
  display: block;
}

.page-home .topic-tag__name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
}

.page-home .topic-tag__note {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

/* 维护与人工支持 */
.page-home .ops-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-home .ops-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .ops-list li {
  padding-left: 16px;
  border-left: 2px solid var(--line);
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--home-soft);
}

.page-home .ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-home .ops-figure {
  margin: 0;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-800);
}

.page-home .ops-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .ops-note {
  margin-top: clamp(28px, 4vw, 44px);
}

.page-home .ops-note p {
  margin: 0;
  padding: 16px 18px;
  border: var(--border);
  border-left: 4px solid var(--turquoise);
  border-radius: var(--radius);
  background: var(--indigo-900);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--home-soft);
  overflow-wrap: anywhere;
}

/* 断点 */
@media (min-width: 640px) {
  .page-home .match-card {
    flex: 0 0 46%;
  }
}

@media (min-width: 820px) {
  .page-home .compare-grid {
    grid-template-columns: 5fr 7fr;
  }
}

@media (min-width: 900px) {
  .page-home .ops-grid {
    grid-template-columns: 7fr 5fr;
  }
}

@media (min-width: 960px) {
  .page-home .hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: stretch;
  }

  .page-home .hero-side {
    display: flex;
    flex-direction: column;
  }

  .page-home .status-card {
    position: absolute;
    left: calc(var(--gap) * -3);
    right: 24px;
    bottom: 24px;
    margin: 0;
  }

  .page-home .schedule-wrap {
    grid-template-columns: 4fr 8fr;
    align-items: stretch;
  }

  .page-home .schedule-cover {
    display: flex;
    flex-direction: column;
  }

  .page-home .schedule-cover img {
    flex: 1;
    aspect-ratio: auto;
    height: 100%;
  }

  .page-home .topic-grid {
    grid-template-columns: 5fr 7fr;
  }
}

@media (min-width: 1100px) {
  .page-home .match-card {
    flex: 0 0 31%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .topic-tag {
    transition: none;
  }

  .page-home .topic-tag:hover {
    transform: none;
  }
}