.page-home {
  --home-gap: clamp(16px, 2.2vw, 26px);
  --home-hair: rgba(42, 52, 104, 0.85);
  --home-pad-y: clamp(48px, 7vw, 96px);
  background: var(--ry-bg);
  color: var(--ry-text);
  overflow-x: clip;
}

/* ---------- 封面首屏 ---------- */
.page-home .home-cover {
  position: relative;
  padding: calc(var(--ry-main-offset) + clamp(28px, 6vw, 64px)) 0 clamp(44px, 7vw, 88px);
  background:
    radial-gradient(ellipse 70% 55% at 84% 10%, rgba(79, 227, 208, 0.16), transparent 62%),
    radial-gradient(ellipse 40% 40% at 8% 82%, rgba(255, 122, 92, 0.1), transparent 70%),
    repeating-linear-gradient(-12deg, transparent 0 52px, rgba(42, 52, 104, 0.5) 52px 53px),
    repeating-linear-gradient(78deg, transparent 0 52px, rgba(42, 52, 104, 0.28) 52px 53px),
    linear-gradient(180deg, #0d1434 0%, var(--ry-bg) 68%);
  border-bottom: 1px solid var(--home-hair);
}

.page-home .home-cover__inner {
  display: grid;
  gap: clamp(30px, 5vw, 52px);
  align-items: start;
}

.page-home .home-cover__title {
  margin: 14px 0 0;
  font-size: clamp(30px, 6.2vw, 66px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.page-home .home-cover__accent {
  color: var(--ry-cyan);
  background: linear-gradient(180deg, transparent 68%, rgba(79, 227, 208, 0.22) 68%);
  padding-bottom: 2px;
}

.page-home .home-cover__sub {
  margin: 22px 0 0;
  max-width: 46ch;
  color: var(--ry-muted);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
}

.page-home .home-cover__note {
  margin: 16px 0 0;
  max-width: 48ch;
  padding-left: 14px;
  border-left: 2px solid rgba(79, 227, 208, 0.45);
  color: var(--ry-text);
  font-size: 14px;
  line-height: 1.8;
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-home .home-cover__index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--home-hair);
}

.page-home .home-cover__index-label {
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ry-gold);
  margin-right: 4px;
}

.page-home .home-cover__index a {
  font-family: var(--ry-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ry-muted);
  text-decoration: none;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--ry-line);
  background: rgba(22, 28, 58, 0.5);
  transition: color 0.22s var(--ry-ease), border-color 0.22s var(--ry-ease),
    background 0.22s var(--ry-ease), transform 0.22s var(--ry-ease);
}

.page-home .home-cover__index a:hover,
.page-home .home-cover__index a:focus-visible {
  color: var(--ry-cyan);
  border-color: rgba(79, 227, 208, 0.5);
  background: rgba(79, 227, 208, 0.1);
  transform: translateY(-1px);
}

.page-home .home-cover__visual {
  position: relative;
  margin: 0;
  padding-bottom: 18px;
}

.page-home .home-cover__panel {
  padding: 12px;
  border-radius: var(--ry-radius);
  background: rgba(22, 28, 58, 0.55);
  border: 1px solid rgba(79, 227, 208, 0.22);
  box-shadow:
    0 28px 64px -34px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(79, 227, 208, 0.35);
  backdrop-filter: blur(14px);
}

.page-home .home-cover__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.page-home .home-cover__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--ry-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ry-muted);
}

/* ---------- 章节通用 ---------- */
.page-home .home-overview,
.page-home .home-rhythm,
.page-home .home-entry,
.page-home .home-activity,
.page-home .home-support {
  position: relative;
  padding: var(--home-pad-y) 0;
}

.page-home .home-rhythm,
.page-home .home-support {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(22, 28, 58, 0.45) 14%,
    rgba(22, 28, 58, 0.45) 86%,
    transparent 100%
  );
  border-top: 1px solid rgba(42, 52, 104, 0.55);
  border-bottom: 1px solid rgba(42, 52, 104, 0.55);
}

.page-home .home-section__head {
  max-width: 64ch;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .home-section__head h2,
.page-home .home-rhythm__body h2,
.page-home .home-activity__panel h2,
.page-home .home-support__body h2 {
  margin: 10px 0 0;
  font-size: clamp(23px, 3.4vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.page-home .home-section__lead {
  margin: 14px 0 0;
  color: var(--ry-muted);
  font-size: 15.5px;
  line-height: 1.85;
}

/* ---------- 六宫格 ---------- */
.page-home .home-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}

.page-home .home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 20px 26px;
  border-radius: var(--ry-radius);
  border: 1px solid var(--ry-line);
  background: linear-gradient(158deg, rgba(22, 28, 58, 0.94), rgba(11, 16, 38, 0.86));
  text-decoration: none;
  color: var(--ry-text);
  overflow: hidden;
  transition: border-color 0.26s var(--ry-ease), transform 0.26s var(--ry-ease),
    box-shadow 0.26s var(--ry-ease);
}

.page-home .home-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ry-cyan);
  opacity: 0.75;
  transition: opacity 0.26s var(--ry-ease), box-shadow 0.26s var(--ry-ease);
}

.page-home .home-tile:hover,
.page-home .home-tile:focus-visible {
  border-color: rgba(79, 227, 208, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -30px rgba(0, 0, 0, 0.95);
}

.page-home .home-tile:hover::before,
.page-home .home-tile:focus-visible::before {
  opacity: 1;
  box-shadow: 0 0 16px rgba(79, 227, 208, 0.8);
}

.page-home .home-tile__count {
  font-family: var(--ry-font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ry-text);
  transform-origin: left center;
  transition: color 0.26s var(--ry-ease), transform 0.26s var(--ry-ease);
}

.page-home .home-tile:hover .home-tile__count,
.page-home .home-tile:focus-visible .home-tile__count {
  color: var(--ry-cyan);
  transform: scale(1.12);
}

.page-home .home-tile__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-home .home-tile__desc {
  margin: 0;
  color: var(--ry-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.page-home .home-tile__meta {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ry-gold);
}

/* ---------- 梳理节奏 ---------- */
.page-home .home-rhythm__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.page-home .home-rhythm__visual {
  margin: 0;
}

.page-home .home-rhythm__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ry-radius);
  border: 1px solid var(--ry-line);
  box-shadow: inset 0 1px 0 rgba(79, 227, 208, 0.3);
}

.page-home .home-rhythm__visual figcaption,
.page-home .home-entry__visual figcaption,
.page-home .home-support__visual figcaption {
  margin-top: 12px;
  font-family: var(--ry-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--ry-muted);
}

.page-home .home-rhythm__text {
  margin: 16px 0 0;
  color: var(--ry-text);
  font-size: 15.5px;
  line-height: 1.9;
  max-width: 62ch;
}

.page-home .home-ticks {
  list-style: none;
  margin: 28px 0 0;
  padding: 20px 0 6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 14px;
  overflow-x: auto;
  border-top: 1px solid var(--home-hair);
  scrollbar-width: thin;
}

.page-home .home-ticks li {
  position: relative;
  padding-top: 14px;
  border-top: 2px solid rgba(42, 52, 104, 0.9);
}

.page-home .home-ticks li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(154, 166, 200, 0.6);
}

.page-home .home-ticks li.is-current {
  border-top-color: rgba(255, 122, 92, 0.8);
}

.page-home .home-ticks li.is-current::before {
  background: var(--ry-coral);
  box-shadow: 0 0 14px rgba(255, 122, 92, 0.9);
}

.page-home .home-ticks__key {
  display: block;
  font-family: var(--ry-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ry-cyan);
}

.page-home .home-ticks li.is-current .home-ticks__key {
  color: var(--ry-coral);
}

.page-home .home-ticks__label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ry-muted);
}

.page-home .home-rhythm__more {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ry-muted);
}

.page-home .home-rhythm__more a {
  color: var(--ry-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 208, 0.4);
}

.page-home .home-rhythm__more a:hover,
.page-home .home-rhythm__more a:focus-visible {
  border-bottom-color: var(--ry-cyan);
}

/* ---------- 两端入口 ---------- */
.page-home .home-entry__cols {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.page-home .home-entry__block {
  padding: 22px 22px 22px 24px;
  border-radius: var(--ry-radius-sm);
  border: 1px solid rgba(42, 52, 104, 0.75);
  background: linear-gradient(150deg, rgba(22, 28, 58, 0.8), rgba(11, 16, 38, 0.7));
}

.page-home .home-entry__block + .home-entry__block {
  margin-top: var(--home-gap);
}

.page-home .home-entry__name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ry-cyan);
  letter-spacing: 0.01em;
}

.page-home .home-entry__block p {
  margin: 0;
  color: var(--ry-muted);
  font-size: 14.5px;
  line-height: 1.85;
}

.page-home .home-entry__sync {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(242, 196, 107, 0.09);
  border: 1px solid rgba(242, 196, 107, 0.28);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ry-text);
}

.page-home .home-entry__visual {
  margin: 0;
}

.page-home .home-entry__visual img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ry-radius);
  border: 1px solid rgba(79, 227, 208, 0.22);
  box-shadow: 0 26px 56px -34px rgba(0, 0, 0, 0.95);
}

/* ---------- 活动查询 ---------- */
.page-home .home-activity__panel {
  position: relative;
  padding: clamp(24px, 4vw, 52px);
  border-radius: var(--ry-radius);
  border: 1px solid var(--ry-line);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 122, 92, 0.15), transparent 56%),
    radial-gradient(circle at 4% 100%, rgba(79, 227, 208, 0.12), transparent 52%),
    linear-gradient(150deg, rgba(22, 28, 58, 0.95), rgba(11, 16, 38, 0.92));
  box-shadow: inset 0 1px 0 rgba(79, 227, 208, 0.32);
}

.page-home .home-activity__text {
  margin: 16px 0 0;
  max-width: 66ch;
  color: var(--ry-text);
  font-size: 15.5px;
  line-height: 1.9;
}

.page-home .home-activity__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .home-activity__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ry-muted);
}

.page-home .home-activity__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--ry-cyan);
}

.page-home .home-activity__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- 反馈通道 ---------- */
.page-home .home-support__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.page-home .home-support__text {
  margin: 16px 0 0;
  max-width: 60ch;
  color: var(--ry-text);
  font-size: 15.5px;
  line-height: 1.9;
}

.page-home .home-support__contact {
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border-radius: var(--ry-radius-sm);
  border: 1px solid var(--ry-line);
  background: rgba(22, 28, 58, 0.7);
}

.page-home .home-support__row {
  display: grid;
  gap: 2px;
}

.page-home .home-support__row dt {
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ry-gold);
}

.page-home .home-support__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ry-text);
  word-break: break-word;
}

.page-home .home-support__body .btn {
  margin-top: 26px;
}

.page-home .home-support__visual {
  margin: 0;
}

.page-home .home-support__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ry-radius);
  border: 1px solid rgba(255, 122, 92, 0.28);
  box-shadow: 0 26px 56px -34px rgba(0, 0, 0, 0.95);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-home .home-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-home .home-entry__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
  }

  .page-home .home-support__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (min-width: 960px) {
  .page-home .home-cover__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
  }

  .page-home .home-cover__panel {
    transform: rotate(-1.1deg);
    transition: transform 0.4s var(--ry-ease);
  }

  .page-home .home-cover__visual:hover .home-cover__panel {
    transform: rotate(0deg);
  }

  .page-home .home-rhythm__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
}

@media (min-width: 1000px) {
  .page-home .home-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-activity__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-tile,
  .page-home .home-tile__count,
  .page-home .home-cover__index a,
  .page-home .home-cover__panel {
    transition: none;
  }

  .page-home .home-tile:hover,
  .page-home .home-tile:focus-visible {
    transform: none;
  }

  .page-home .home-tile:hover .home-tile__count,
  .page-home .home-tile:focus-visible .home-tile__count {
    transform: none;
  }
}

<main id="main-content" class="page-home">
  <section class="home-cover" data-hero aria-labelledby="home-cover-title">
    <div class="home-cover__inner shell">
      <div class="home-cover__lead">
        <p class="idx"><span class="idx__num">01</span>COVER / 官方信息入口</p>
        <h1 class="home-cover__title" id="home-cover-title">换设备、找活动、查入口，<span class="home-cover__accent">一块面板就够了</span></h1>
        <p class="home-cover__lead-text">
          荣一娱乐把活动周期、分类目录、终端入口和服务说明放进同一块夜间控制台。新电脑重新登录，设置项全在一屏；手机上一按就到常用面板；每两周重排一次类目与位置，改了什么在专栏里写清楚。
        </p>
        <div class="home-cover__actions">
          <a class="btn btn--primary" href="/catalog/">查活动周期</a>
          <a class="btn btn--ghost" href="/guide/">打开使用指南</a>
        </div>
        <nav class="home-cover__jump" aria-label="页面章节快速定位">
          <a href="#overview">02 面板速览</a>
          <a href="#rhythm">03 双周节奏</a>
          <a href="#entry">04 两端入口</a>
          <a href="#activity">05 活动查询</a>
          <a href="#support">06 反馈通道</a>
        </nav>
      </div>

      <figure class="home-cover__figure panel panel--glow">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="深靛蓝背景上交叠的半透明圆角面板与青色发光细线，无人物">
        <figcaption class="home-cover__caption">
          <span class="tag tag--cyan">v3.7</span>
          <span>近两年完成 14 次版本迭代</span>
        </figcaption>
      </figure>
    </div>
  </section>

  <section class="home-overview" id="overview" data-section aria-labelledby="home-overview-title">
    <div class="shell">
      <header class="home-section__head">
        <p class="idx"><span class="idx__num">02</span>PANELS / 面板速览</p>
        <h2 id="home-overview-title">六个一级类目，一眼看清东西都在哪</h2>
        <p class="home-section__lead">活动、入口、说明、更新、问答、反馈各占一格。每格标着条目数量和最近一轮的位置，想知道哪块最厚、哪块刚动过，扫一遍就明白。</p>
      </header>

      <div class="home-grid">
        <a class="home-tile" href="/catalog/" data-reveal>
          <span class="home-tile__count">413</span>
          <span class="home-tile__name">活动专栏</span>
          <span class="home-tile__meta">14 天一期 · 最近一轮第 26 轮</span>
        </a>
        <a class="home-tile" href="/guide/" data-reveal>
          <span class="home-tile__count">268</span>
          <span class="home-tile__name">入口指引</span>
          <span class="home-tile__meta">电脑端与手机端对照 · 第 26 轮</span>
        </a>
        <a class="home-tile" href="/instructions/" data-reveal>
          <span class="home-tile__count">197</span>
          <span class="home-tile__name">服务说明</span>
          <span class="home-tile__meta">标注适用终端 · 第 26 轮</span>
        </a>
        <a class="home-tile" href="/notes/" data-reveal>
          <span class="home-tile__count">142</span>
          <span class="home-tile__name">版本更新</span>
          <span class="home-tile__meta">近两年 14 次迭代 · 第 26 轮</span>
        </a>
        <a class="home-tile" href="/guide/" data-reveal>
          <span class="home-tile__count">126</span>
          <span class="home-tile__name">常见问答</span>
          <span class="home-tile__meta">60 余条使用指南 · 第 26 轮</span>
        </a>
        <a class="home-tile" href="/contact-us/" data-reveal>
          <span class="home-tile__count">94</span>
          <span class="home-tile__name">反馈通道</span>
          <span class="home-tile__meta">位于面板底部 · 第 26 轮</span>
        </a>
      </div>
    </div>
  </section>

  <section class="home-rhythm" id="rhythm" data-section aria-labelledby="home-rhythm-title">
    <div class="shell home-rhythm__grid">
      <figure class="home-rhythm__figure">
        <img src="{zhanqunpic:h:640w:960}" width="960" height="640" loading="lazy" decoding="async" alt="屏幕局部的索引列表与周期刻度，青色高亮当前周期">
        <figcaption>每一期活动在索引里占一行，当前周期用青色标出。</figcaption>
      </figure>
      <div class="home-rhythm__body">
        <p class="idx"><span class="idx__num">03</span>RHYTHM / 双周节奏</p>
        <h2 id="home-rhythm-title">每十四天过一遍，改动清单跟着发出来</h2>
        <p class="home-rhythm__text">
          面板一年走完 26 轮梳理，一轮十四天，2024 年起就没断过。每轮会把类目归属、入口位置和说明文案重新过一遍，同时产出一份改动清单，跟专栏笔记一起公开。你上次提的问题被挪到了哪，翻清单就能对上。
        </p>
        <ol class="home-ticks" aria-label="近期梳理轮次">
          <li>
            <span class="home-ticks__key">第 24 轮</span>
            <span class="home-ticks__label">活动周期同步</span>
          </li>
          <li>
            <span class="home-ticks__key">第 25 轮</span>
            <span class="home-ticks__label">说明文案重写</span>
          </li>
          <li class="home-ticks__now">
            <span class="home-ticks__key">第 26 轮</span>
            <span class="home-ticks__label">分类归属调整 · 进行中</span>
          </li>
          <li>
            <span class="home-ticks__key">第 27 轮</span>
            <span class="home-ticks__label">两周后开启</span>
          </li>
        </ol>
        <p class="home-rhythm__more">看清每一轮改了什么，可以去<a href="/notes/">专栏笔记</a>里按轮次翻；想了解这套节奏怎么来的，<a href="/story/">品牌故事</a>里有完整时间线。</p>
      </div>
    </div>
  </section>

  <section class="home-entry" id="entry" data-section aria-labelledby="home-entry-title">
    <div class="shell">
      <header class="home-section__head">
        <p class="idx"><span class="idx__num">04</span>ENTRY / 两端入口</p>
        <h2 id="home-entry-title">电脑端一屏看全，手机端五个键直达</h2>
        <p class="home-section__lead">同一套配置，换台设备接着用。原来要逐页翻的设置项，现在集中在一处；手机上留五个最常用的位置，不用每次从头找。</p>
      </header>

      <div class="home-entry__cols">
        <div class="home-entry__col">
          <div class="home-entry__block">
            <h3>电脑端</h3>
            <p>换新电脑后重新登录，账号、显示、通知等全部设置项都在同一块面板里，不用逐页翻找。装好机接着开工，几分钟就能把常用项调回顺手的状态。</p>
          </div>
          <div class="home-entry__block">
            <h3>手机端</h3>
            <p>五个常用入口快捷位，与电脑端设置项一一对应，还支持在手机桌面创建快捷方式。通勤路上想确认某一期的起止时间，点两下就到。</p>
          </div>
          <p class="home-entry__note">平板端与手机端共用同一套入口配置，登录后自动同步，换哪台设备都不必重新设置一遍。</p>
        </div>
        <figure class="home-entry__figure">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" loading="lazy" decoding="async" alt="竖版手机界面局部，包含五个圆角快捷位与柔和高光，无真人">
          <figcaption>五个快捷位与电脑端设置项一一对应。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="home-activity" id="activity" data-section aria-labelledby="home-activity-title">
    <div class="shell">
      <div class="home-activity__panel panel panel--glow">
        <p class="idx"><span class="idx__num">05</span>ACTIVITY / 活动查询</p>
        <h2 id="home-activity-title">活动一期十四天，往回能翻十二个周期</h2>
        <p class="home-activity__text">活动专栏跟着全站节奏走，十四天开一期，每个周期开放一轮周期查询。这一期什么时候开始、到哪天结束、从哪个入口参与，条目里写清楚了。活动结束记录不删，往回能查最近 12 个周期的安排，错过哪一期也补得回来。</p>
        <ul class="home-activity__list">
          <li>一期十四天，起止时间与参与入口写在同一张条目上</li>
          <li>最近 12 个周期的安排可回溯，跨期对照不用另找地方</li>
          <li>与 40 余家内容合作方共建栏目，周期信息同步更新</li>
        </ul>
        <div class="home-activity__actions">
          <a class="btn btn--primary" href="/catalog/">进入周期查询</a>
          <a class="btn btn--ghost" href="/notes/">看专栏笔记</a>
        </div>
      </div>
    </div>
  </section>

  <section class="home-support" id="support" data-section aria-labelledby="home-support-title">
    <div class="shell home-support__grid">
      <div class="home-support__body">
        <p class="idx"><span class="idx__num">06</span>SUPPORT / 反馈通道</p>
        <h2 id="home-support-title">反馈入口就在面板底部，一个工作日内回复</h2>
        <p class="home-support__text">遇到入口对不上、说明看着含糊，或者某台设备上显示不对，把问题写清楚发过来。附上设备型号、入口位置和看到的现象，定位会快很多。邮箱通常一个工作日内回复，电话每天 9:00 至 21:00 有人接，节假日照常。</p>
        <dl class="home-support__contact">
          <div class="home-support__row">
            <dt>客服邮箱</dt>
            <dd>kefu@fun-rongyi.com.cn</dd>
          </div>
          <div class="home-support__row">
            <dt>客服电话</dt>
            <dd>400-3814-3749</dd>
          </div>
          <div class="home-support__row">
            <dt>服务时段</dt>
            <dd>每日 9:00 至 21:00，节假日照常</dd>
          </div>
        </dl>
        <a class="btn btn--primary" href="/contact-us/">前往反馈</a>
      </div>
      <figure class="home-support__figure">
        <img src="{zhanqunpic:h:625w:1000}" width="1000" height="625" loading="lazy" decoding="async" alt="面板底部区域的界面特写，带反馈入口按钮与珊瑚橙标记">
        <figcaption>滑到面板底部，就能看到反馈入口。</figcaption>
      </figure>
    </div>
  </section>
</main>

.page-home {
  --home-gap: clamp(14px, 2.2vw, 24px);
  --home-hair: rgba(42, 52, 104, 0.9);
  --home-soft: rgba(22, 28, 58, 0.72);
  background: var(--ry-bg);
  color: var(--ry-text);
  overflow-x: clip;
}

/* 首屏封面 */
.page-home .home-cover {
  position: relative;
  padding: calc(var(--ry-main-offset) + clamp(24px, 5vw, 56px)) 0 clamp(44px, 7vw, 88px);
  background:
    radial-gradient(ellipse 62% 52% at 84% 8%, rgba(79, 227, 208, 0.18), transparent 62%),
    radial-gradient(ellipse 44% 40% at 6% 86%, rgba(255, 122, 92, 0.12), transparent 70%),
    repeating-linear-gradient(-12deg, transparent 0 52px, rgba(42, 52, 104, 0.55) 52px 53px),
    repeating-linear-gradient(78deg, transparent 0 52px, rgba(42, 52, 104, 0.3) 52px 53px),
    linear-gradient(180deg, #0d1436 0%, var(--ry-bg) 66%);
  border-bottom: 1px solid var(--home-hair);
}

.page-home .home-cover__inner {
  display: grid;
  gap: clamp(30px, 5vw, 52px);
  align-items: center;
}

.page-home .home-cover__title {
  margin: 14px 0 0;
  font-size: clamp(30px, 6.4vw, 66px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-home .home-cover__accent {
  color: var(--ry-cyan);
  background: linear-gradient(180deg, transparent 70%, rgba(79, 227, 208, 0.24) 70%);
  padding-bottom: 2px;
}

.page-home .home-cover__lead-text {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--ry-muted);
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-home .home-cover__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: clamp(26px, 4vw, 42px);
  padding-top: 20px;
  border-top: 1px solid var(--home-hair);
}

.page-home .home-cover__jump a {
  font-family: var(--ry-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ry-muted);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--ry-line);
  background: rgba(22, 28, 58, 0.55);
  transition: color 0.22s var(--ry-ease), border-color 0.22s var(--ry-ease),
    background 0.22s var(--ry-ease), transform 0.22s var(--ry-ease);
}

.page-home .home-cover__jump a:hover,
.page-home .home-cover__jump a:focus-visible {
  color: var(--ry-cyan);
  border-color: rgba(79, 227, 208, 0.5);
  background: rgba(79, 227, 208, 0.1);
  transform: translateY(-1px);
}

.page-home .home-cover__figure {
  margin: 0;
  padding: 10px;
  border-radius: var(--ry-radius);
  background: rgba(22, 28, 58, 0.56);
  border: 1px solid rgba(79, 227, 208, 0.24);
  box-shadow: 0 30px 66px -36px rgba(0, 0, 0, 0.96), inset 0 1px 0 rgba(79, 227, 208, 0.36);
  backdrop-filter: blur(14px);
}

.page-home .home-cover__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}

.page-home .home-cover__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 0 4px 4px;
  font-family: var(--ry-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ry-muted);
}

/* 章节通用 */
.page-home .home-overview,
.page-home .home-rhythm,
.page-home .home-entry,
.page-home .home-activity,
.page-home .home-support {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0;
}

.page-home .home-rhythm,
.page-home .home-support {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(22, 28, 58, 0.45) 14%,
    rgba(22, 28, 58, 0.45) 86%,
    transparent 100%
  );
  border-top: 1px solid rgba(42, 52, 104, 0.55);
  border-bottom: 1px solid rgba(42, 52, 104, 0.55);
}

.page-home .home-section__head {
  max-width: 64ch;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .home-section__head h2,
.page-home .home-rhythm__body h2,
.page-home .home-activity__panel h2,
.page-home .home-support__body h2 {
  margin: 10px 0 0;
  font-size: clamp(23px, 3.4vw, 38px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-home .home-section__lead {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ry-muted);
}

/* 六宫格 */
.page-home .home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}

.page-home .home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 20px 20px 24px;
  border-radius: var(--ry-radius);
  border: 1px solid var(--ry-line);
  background: linear-gradient(158deg, rgba(22, 28, 58, 0.94), rgba(11, 16, 38, 0.88));
  text-decoration: none;
  color: var(--ry-text);
  overflow: hidden;
  transition: border-color 0.26s var(--ry-ease), transform 0.26s var(--ry-ease),
    box-shadow 0.26s var(--ry-ease);
}

.page-home .home-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ry-cyan);
  opacity: 0.72;
  transition: opacity 0.26s var(--ry-ease), box-shadow 0.26s var(--ry-ease);
}

.page-home .home-tile:hover,
.page-home .home-tile:focus-visible {
  border-color: rgba(79, 227, 208, 0.46);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.96);
}

.page-home .home-tile:hover::before,
.page-home .home-tile:focus-visible::before {
  opacity: 1;
  box-shadow: 0 0 16px rgba(79, 227, 208, 0.85);
}

.page-home .home-tile__count {
  font-family: var(--ry-font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ry-text);
  transform-origin: left center;
  transition: color 0.26s var(--ry-ease), transform 0.26s var(--ry-ease);
}

.page-home .home-tile:hover .home-tile__count,
.page-home .home-tile:focus-visible .home-tile__count {
  color: var(--ry-cyan);
  transform: scale(1.14);
}

.page-home .home-tile__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-home .home-tile__meta {
  margin-top: 6px;
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  line-height: 1.6;
  color: var(--ry-gold);
}

/* 双周节奏 */
.page-home .home-rhythm__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.page-home .home-rhythm__figure,
.page-home .home-entry__figure,
.page-home .home-support__figure {
  margin: 0;
}

.page-home .home-rhythm__figure img,
.page-home .home-support__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ry-radius);
  border: 1px solid var(--ry-line);
  object-fit: cover;
  box-shadow: inset 0 1px 0 rgba(79, 227, 208, 0.3);
}

.page-home .home-support__figure img {
  border-color: rgba(255, 122, 92, 0.3);
  box-shadow: 0 26px 56px -34px rgba(0, 0, 0, 0.95);
}

.page-home .home-rhythm__figure figcaption,
.page-home .home-entry__figure figcaption,
.page-home .home-support__figure figcaption {
  margin-top: 12px;
  font-family: var(--ry-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--ry-muted);
}

.page-home .home-rhythm__text {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ry-text);
}

.page-home .home-ticks {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 4px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(128px, 1fr);
  gap: 14px;
  overflow-x: auto;
  border-top: 1px solid var(--home-hair);
  scrollbar-width: thin;
}

.page-home .home-ticks li {
  position: relative;
  padding-top: 16px;
  border-top: 2px solid rgba(42, 52, 104, 0.95);
}

.page-home .home-ticks li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(154, 166, 200, 0.55);
}

.page-home .home-ticks li.home-ticks__now {
  border-top-color: rgba(255, 122, 92, 0.85);
}

.page-home .home-ticks li.home-ticks__now::before {
  background: var(--ry-coral);
  box-shadow: 0 0 14px rgba(255, 122, 92, 0.9);
}

.page-home .home-ticks__key {
  display: block;
  font-family: var(--ry-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ry-cyan);
}

.page-home .home-ticks li.home-ticks__now .home-ticks__key {
  color: var(--ry-coral);
}

.page-home .home-ticks__label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ry-muted);
}

.page-home .home-rhythm__more {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ry-muted);
}

.page-home .home-rhythm__more a {
  color: var(--ry-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 208, 0.42);
}

.page-home .home-rhythm__more a:hover,
.page-home .home-rhythm__more a:focus-visible {
  border-bottom-color: var(--ry-cyan);
}

/* 两端入口 */
.page-home .home-entry__cols {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.page-home .home-entry__block {
  padding: 22px 22px 22px 24px;
  border-radius: var(--ry-radius-sm);
  border: 1px solid rgba(42, 52, 104, 0.78);
  background: linear-gradient(150deg, rgba(22, 28, 58, 0.82), rgba(11, 16, 38, 0.72));
}

.page-home .home-entry__block + .home-entry__block {
  margin-top: var(--home-gap);
}

.page-home .home-entry__block h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ry-cyan);
  letter-spacing: 0.01em;
}

.page-home .home-entry__block p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ry-muted);
}

.page-home .home-entry__note {
  margin: 18px 0 0;
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(242, 196, 107, 0.09);
  border: 1px solid rgba(242, 196, 107, 0.3);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ry-text);
}

.page-home .home-entry__figure img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ry-radius);
  border: 1px solid rgba(79, 227, 208, 0.24);
  object-fit: cover;
  box-shadow: 0 26px 56px -34px rgba(0, 0, 0, 0.95);
}

.page-home .home-entry__figure figcaption {
  text-align: center;
}

/* 活动查询 */
.page-home .home-activity__panel {
  position: relative;
  padding: clamp(24px, 4vw, 52px);
  border-radius: var(--ry-radius);
  border: 1px solid var(--ry-line);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 122, 92, 0.16), transparent 56%),
    radial-gradient(circle at 4% 100%, rgba(79, 227, 208, 0.13), transparent 54%),
    linear-gradient(150deg, rgba(22, 28, 58, 0.95), rgba(11, 16, 38, 0.92));
  box-shadow: inset 0 1px 0 rgba(79, 227, 208, 0.34);
}

.page-home .home-activity__text {
  margin: 16px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ry-text);
}

.page-home .home-activity__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .home-activity__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ry-muted);
}

.page-home .home-activity__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--ry-cyan);
}

.page-home .home-activity__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* 反馈通道 */
.page-home .home-support__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.page-home .home-support__text {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ry-text);
}

.page-home .home-support__contact {
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border-radius: var(--ry-radius-sm);
  border: 1px solid var(--ry-line);
  background: var(--home-soft);
}

.page-home .home-support__row {
  display: grid;
  gap: 2px;
}

.page-home .home-support__row dt {
  font-family: var(--ry-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ry-gold);
}

.page-home .home-support__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ry-text);
  word-break: break-word;
}

.page-home .home-support__body .btn {
  margin-top: 26px;
}

/* 响应式 */
@media (min-width: 620px) {
  .page-home .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-home .home-entry__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  }

  .page-home .home-support__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (min-width: 960px) {
  .page-home .home-cover__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }

  .page-home .home-cover__figure {
    transform: rotate(-1.1deg);
    transition: transform 0.4s var(--ry-ease);
  }

  .page-home .home-cover__figure:hover {
    transform: rotate(0deg);
  }

  .page-home .home-rhythm__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
}

@media (min-width: 1000px) {
  .page-home .home-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-ticks {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-tile,
  .page-home .home-tile__count,
  .page-home .home-cover__jump a,
  .page-home .home-cover__figure {
    transition: none;
  }

  .page-home .home-tile:hover,
  .page-home .home-tile:focus-visible,
  .page-home .home-tile:hover .home-tile__count,
  .page-home .home-tile:focus-visible .home-tile__count {
    transform: none;
  }
}