.page-home {
  --home-space: clamp(56px, 9vw, 112px);
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--paper);
}

.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 6vw, 76px);
}

.page-home .hero-grid {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

.page-home .hero-context {
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding-left: 14px;
  border-left: 3px solid var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .hero-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(56px, 15vw, 148px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .hero-title__line--accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--mint);
  letter-spacing: 0.05em;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .page-home .hero-title__line--accent {
    color: var(--mint);
  }
}

.page-home .hero-lead {
  max-width: 34rem;
  margin: 0 0 clamp(24px, 3.5vw, 36px);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--paper-soft);
}

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

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

.page-home .hero-figure {
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
  transform: rotate(-2deg);
}

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

.page-home .focus-card {
  margin-top: 22px;
  padding: 18px 20px 20px;
  border: 2px solid var(--mint);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.page-home .focus-card:hover,
.page-home .focus-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--paper);
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.page-home .focus-card__big {
  margin: 12px 0 10px;
  font-family: var(--font-mono);
  font-size: clamp(38px, 6vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--mint);
}

.page-home .focus-card__big span {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-home .focus-card__rows {
  display: grid;
  gap: 8px;
  margin: 0;
}

.page-home .focus-card__rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.page-home .focus-card__rows dt {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-home .focus-card__rows dd {
  margin: 0;
  color: var(--paper);
  text-align: right;
}

.page-home .home-section {
  padding: var(--home-space) 0;
}

.page-home .section-head {
  display: grid;
  gap: 16px;
  max-width: 48rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-home .section-head h2 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .section-head p:not(.eyebrow) {
  max-width: 44rem;
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--paper-soft);
}

.page-home .locate-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-home .timeline {
  padding: clamp(16px, 3vw, 30px);
  border: 2px solid var(--line-strong);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard-sm);
}

.page-home .timeline__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .tl-line {
  fill: none;
  stroke: var(--mint);
  stroke-width: 3;
  stroke-linejoin: round;
}

.page-home .tl-dot {
  fill: var(--ink);
  stroke: var(--mint);
  stroke-width: 3;
}

.page-home .tl-dot--last {
  fill: var(--mint);
}

.page-home .tl-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: var(--mist);
}

.page-home .locate-figure {
  border: 2px solid var(--line-strong);
  background: var(--panel);
}

.page-home .locate-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .node-grid {
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-home .node-card {
  padding: 20px 20px 22px;
  border-left: 3px solid var(--mint);
  background: var(--ink-2);
}

.page-home .node-card__time {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mint);
}

.page-home .node-card p:not(.node-card__time) {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper-soft);
}

.page-home .data-grid {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
}

.page-home .data-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .data-copy > p:not(.eyebrow) {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--paper-soft);
}

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

.page-home .data-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--paper-soft);
}

.page-home .data-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 10px;
  height: 2px;
  background: var(--red);
}

.page-home .data-list b {
  margin-right: 8px;
  color: var(--paper);
  letter-spacing: 0.02em;
}

.page-home .data-visual {
  position: relative;
}

.page-home .data-visual .media-frame {
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
}

.page-home .data-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .panel-stack {
  margin-top: 18px;
  padding: 16px 18px 18px;
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.page-home .panel-stack:hover,
.page-home .panel-stack:focus-visible {
  transform: translateY(-3px);
  border-color: var(--mint);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.page-home .panel-stack__head {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mint);
}

.page-home .panel-stack ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .panel-stack li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.page-home .panel-stack li span {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-home .panel-stack li b {
  font-weight: 500;
  color: var(--paper);
}

.page-home .steps {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .step {
  padding: 22px 20px 24px;
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.page-home .step:hover,
.page-home .step:focus-visible {
  transform: translateY(-4px);
  border-color: var(--mint);
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.page-home .step__index {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--mint);
}

.page-home .step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper-soft);
}

.page-home .steps__foot {
  margin: clamp(22px, 3vw, 32px) 0 0;
}

.page-home .device-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-home .device-figure .media-frame {
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
  transform: rotate(2deg);
}

.page-home .device-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .device-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .device-copy > p:not(.eyebrow) {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--paper-soft);
}

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

.page-home .device-steps li {
  display: grid;
  gap: 4px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--line-strong);
}

.page-home .device-steps b {
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-home .device-steps span {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .device-copy__note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-home .feed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .feed__item {
  border-top: 1px solid var(--line);
}

.page-home .feed__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-home .feed__link {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px 16px 18px 20px;
  text-decoration: none;
  transition: background var(--ease), padding-left var(--ease);
}

.page-home .feed__link:hover,
.page-home .feed__link:focus-visible {
  padding-left: 28px;
  background: var(--ink-2);
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

.page-home .feed__band {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--line-strong);
  transition: width var(--ease), background var(--ease);
}

.page-home .feed__band--red {
  --band: var(--red);
}

.page-home .feed__band--mint {
  --band: var(--mint);
}

.page-home .feed__band--amber {
  --band: var(--amber);
}

.page-home .feed__link:hover .feed__band,
.page-home .feed__link:focus-visible .feed__band {
  width: 8px;
  background: var(--band, var(--red));
}

.page-home .feed__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .feed__title {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.page-home .home-cta {
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 2px solid var(--line-strong);
  background: var(--ink-2);
}

.page-home .home-cta__inner {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}

.page-home .home-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .home-cta p:not(.eyebrow) {
  max-width: 36rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--paper-soft);
}

.page-home .home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

@media (min-width: 900px) {
  .page-home .locate-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: stretch;
  }

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

  .page-home .data-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }

  .page-home .panel-stack {
    position: absolute;
    left: 18px;
    bottom: 20px;
    width: 272px;
    margin: 0;
  }

  .page-home .device-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

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

@media (min-width: 960px) {
  .page-home .home-hero {
    padding-top: clamp(40px, 5vw, 80px);
  }

  .page-home .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }

  .page-home .hero-visual {
    padding-left: 16px;
  }

  .page-home .focus-card {
    position: absolute;
    left: -28px;
    bottom: -36px;
    width: 284px;
    margin: 0;
  }

  .page-home .home-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>
```
Wait — I output an extra marker `<<<PAGE_CSS_END>>>` and `<<<END>>>` which were not requested. The instruction says only three markers each appearing once: ``, ``. I violated. Need to redo cleanly without extra markers.

Let me re-output properly with only two markers.
<main id="main-content" class="page-home">
  <section class="home-hero" aria-labelledby="home-hero-title">
    <div class="shell hero-grid">
      <div class="hero-copy">
        <p class="hero-context">竞博体育中国官方品牌站 · 赛事内容与数据服务 · 重庆</p>
        <h1 class="hero-title" id="home-hero-title">
          <span class="hero-title__line">用实力</span>
          <span class="hero-title__line hero-title__line--accent">说话</span>
        </h1>
        <p class="hero-lead">赛场上的判断常常只差几秒：谁在打、数据什么时候变、这场值不值得盯。竞博赛场把赛程、球员表现和焦点场次收进同一个入口，你从一场比赛就能直接看到下一步该点哪里。</p>
        <div class="hero-actions">
          <a class="btn btn--primary" href="/apps/">查看赛程</a>
          <a class="btn btn--ghost" href="/articles/">打开内容目录</a>
          <a class="text-link" href="/answers/">查阅答疑</a>
        </div>
      </div>
      <div class="hero-visual">
        <div class="media-frame media-frame--16x9 media-frame--cut hero-figure">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="赛场边线局部与顶灯的高对比特写，画面里没有人物面部">
        </div>
        <aside class="focus-card" tabindex="0" aria-label="今日焦点场次与更新时间">
          <span class="tag tag--live">今日焦点</span>
          <p class="focus-card__big">3<span>场</span></p>
          <dl class="focus-card__rows">
            <div>
              <dt>最近变更</dt>
              <dd>90 秒内进入日历</dd>
            </div>
            <div>
              <dt>下一节点</dt>
              <dd>赛中数据更新</dd>
            </div>
          </dl>
        </aside>
      </div>
    </div>
  </section>

  <div class="rule-band rule-band--mint" aria-hidden="true"></div>

  <section class="home-section home-section--locate" aria-labelledby="locate-title">
    <div class="shell">
      <div class="section-head">
        <p class="eyebrow">01 / 定位场次</p>
        <h2 id="locate-title">先框定日期，再盯住那一次更新时间</h2>
        <p>不必在整季赛程里从头翻。新版赛事日历支持按日期区间、赛事分类和重点场次三种方式定位，选定之后直接给出这场比赛的三个更新时间节点，临时调整也能第一时间看到。</p>
      </div>
      <div class="locate-grid">
        <div class="timeline">
          <svg class="timeline__svg" viewBox="0 0 640 180" role="img" aria-label="赛程更新时间轴：赛前、赛中、赛后三个节点依次亮起">
            <polyline class="tl-line" points="48,132 216,74 408,110 592,44"></polyline>
            <circle class="tl-dot" cx="48" cy="132" r="8"></circle>
            <circle class="tl-dot" cx="216" cy="74" r="8"></circle>
            <circle class="tl-dot" cx="408" cy="110" r="8"></circle>
            <circle class="tl-dot tl-dot--last" cx="592" cy="44" r="8"></circle>
            <text class="tl-text" x="48" y="164">赛前</text>
            <text class="tl-text" x="216" y="106" text-anchor="middle">赛中</text>
            <text class="tl-text" x="408" y="142" text-anchor="middle">赛后</text>
            <text class="tl-text" x="592" y="76" text-anchor="end">下一场</text>
          </svg>
        </div>
        <div class="media-frame media-frame--4x3 locate-figure">
          <img loading="lazy" decoding="async" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="信号青绿时间轴与场次节点组成的赛程数据图，深色底">
        </div>
      </div>
      <div class="grid grid--3 node-grid">
        <article class="card node-card">
          <p class="node-card__time">赛前</p>
          <h3>名单与阵容变动</h3>
          <p>临近开赛的出场名单调整出现在这里，你再决定这场要不要继续盯。</p>
        </article>
        <article class="card node-card">
          <p class="node-card__time">赛中</p>
          <h3>比分与过程同步</h3>
          <p>比分、关键回合和技术统计跟着比赛走，中途打开也不会漏掉前面发生的事。</p>
        </article>
        <article class="card node-card">
          <p class="node-card__time">赛后</p>
          <h3>结果落定，数据归位</h3>
          <p>终场哨响后结果沉淀下来，直接接着看这场球员的表现明细。</p>
        </article>
      </div>
    </div>
  </section>

  <div class="rule-band rule-band--split" aria-hidden="true"></div>

  <section class="home-section home-section--data" aria-labelledby="data-title">
    <div class="shell data-grid">
      <div class="data-copy">
        <p class="eyebrow">02 / 数据对照</p>
        <h2 id="data-title">表现和赛况，放在同一眼看完</h2>
        <p>看一名前锋，你通常得开两个窗口：一个翻他的赛季走势，一个查这场的对手和开赛时间。球员数据对照把两边叠在一起，切换球员时赛事信息跟着换，判断不用来回跳。</p>
        <ul class="data-list">
          <li><b>赛季趋势</b>连续场次的表现走向，起伏一眼看得出。</li>
          <li><b>对阵关联</b>面对同组对手时的历史表现，横向比更快。</li>
          <li><b>赛事联动</b>轮次、场地和开赛时间跟随当前场次更新。</li>
        </ul>
        <a class="btn btn--ghost" href="/apps/">打开应用中心</a>
      </div>
      <div class="data-visual">
        <div class="media-frame media-frame--4x3">
          <img loading="lazy" decoding="async" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色数据面板上并排展示球员表现曲线与赛事信息">
        </div>
        <div class="panel-stack" tabindex="0">
          <p class="panel-stack__head">当前查看 · 前锋</p>
          <ul>
            <li><span>表现</span><b>近 5 场走势曲线</b></li>
            <li><span>赛事</span><b>轮次 / 场地 / 开赛时间</b></li>
            <li><span>关联</span><b>本赛季同组对手记录</b></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <div class="rule-band rule-band--red" aria-hidden="true"></div>

  <section class="home-section home-section--focus" aria-labelledby="focus-title">
    <div class="shell">
      <div class="section-head">
        <p class="eyebrow">03 / 焦点场次</p>
        <h2 id="focus-title">三步，把值得看的比赛挑出来</h2>
        <p>赛季密集的时候，全量赛程反而是负担。从内容目录进入重点场次，按下面三步收窄，剩下的就是当天真正要看的那几场。</p>
      </div>
      <ol class="steps">
        <li class="step" tabindex="0">
          <span class="step__index">01</span>
          <h3>从内容目录进入</h3>
          <p>内容目录里的入口直接落到重点场次，不用回首页重新找一遍。</p>
        </li>
        <li class="step" tabindex="0">
          <span class="step__index">02</span>
          <h3>确认关注列表</h3>
          <p>关注列表最多保存 120 场赛事，可按赛事系列分组，先看一眼有没有落下的。</p>
        </li>
        <li class="step" tabindex="0">
          <span class="step__index">03</span>
          <h3>按联赛与状态筛选</h3>
          <p>再按联赛、日期和关注状态收窄范围，焦点赛事就排到眼前了。</p>
        </li>
      </ol>
      <p class="steps__foot"><a class="text-link" href="/apps/">进入应用中心筛选焦点赛事</a></p>
    </div>
  </section>

  <section class="home-section home-section--device" aria-labelledby="device-title">
    <div class="shell device-grid">
      <div class="device-figure">
        <div class="media-frame media-frame--1x1">
          <img loading="lazy" decoding="async" src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="手机、平板与桌面屏幕斜向排列，同屏展示同一场比赛的入口">
        </div>
      </div>
      <div class="device-copy">
        <p class="eyebrow">04 / 换设备</p>
        <h2 id="device-title">换块屏幕，接着往下看</h2>
        <p>从手机换到桌面，最怕的是重新翻一遍。帮助文档里的换设备指引把路径压成三步，按顺序走完，原来关注的场次基本都能找回来。</p>
        <ol class="device-steps">
          <li>
            <b>打开站点入口</b>
            <span>在新设备上进竞博赛场，不用重新配置什么。</span>
          </li>
          <li>
            <b>查看关注列表</b>
            <span>看看已保存的赛事还在不在，分组结构保持一致。</span>
          </li>
          <li>
            <b>重新定位最近场次</b>
            <span>用日期区间把最近几天要看的比赛拉回来。</span>
          </li>
        </ol>
        <p class="device-copy__note">帮助文档现有 72 篇，分 9 个章节，从快速开始到问题排查都能找到对应步骤。</p>
        <a class="btn btn--primary" href="/answers/">查阅换设备指引</a>
      </div>
    </div>
  </section>

  <div class="rule-band rule-band--amber" aria-hidden="true"></div>

  <section class="home-section home-section--feed" aria-labelledby="feed-title">
    <div class="shell">
      <div class="section-head">
        <p class="eyebrow">05 / 内容专栏</p>
        <h2 id="feed-title">每周更新的赛程观察与数据方法</h2>
        <p>内容团队每周更新 6 到 10 篇，赛程观察、数据方法、版本说明各有固定栏目，赛季初和版本发布后还会加密更新。</p>
      </div>
      <ul class="feed">
        <li class="feed__item">
          <a class="feed__link" href="/articles/">
            <span class="feed__band feed__band--red" aria-hidden="true"></span>
            <span class="feed__meta">赛程观察 · 本周更新</span>
            <span class="feed__title">三组同轮对抗的节奏差异，以及该看哪一场</span>
          </a>
        </li>
        <li class="feed__item">
          <a class="feed__link" href="/articles/">
            <span class="feed__band feed__band--mint" aria-hidden="true"></span>
            <span class="feed__meta">数据方法 · 赛季初</span>
            <span class="feed__title">用趋势线判断状态起伏，比单场数据更稳</span>
          </a>
        </li>
        <li class="feed__item">
          <a class="feed__link" href="/articles/">
            <span class="feed__band feed__band--amber" aria-hidden="true"></span>
            <span class="feed__meta">版本说明 · 版本发布后</span>
            <span class="feed__title">三种定位入口怎么配合，用最短路径找到场次</span>
          </a>
        </li>
        <li class="feed__item">
          <a class="feed__link" href="/articles/">
            <span class="feed__band feed__band--red" aria-hidden="true"></span>
            <span class="feed__meta">使用技巧 · 本周更新</span>
            <span class="feed__title">关注列表分组之后，赛前半小时先看哪一栏</span>
          </a>
        </li>
        <li class="feed__item">
          <a class="feed__link" href="/articles/">
            <span class="feed__band feed__band--mint" aria-hidden="true"></span>
            <span class="feed__meta">专题策划 · 赛季初</span>
            <span class="feed__title">跨项目观赛入口的差异，一次讲清</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="home-cta" aria-labelledby="cta-title">
    <div class="shell home-cta__inner">
      <div>
        <p class="eyebrow">下一步</p>
        <h2 id="cta-title">从今天的焦点场次开始</h2>
        <p>打开应用中心挑你关心的比赛；想先知道我们从哪来、凭什么值得长期用，去看品牌历程。</p>
      </div>
      <div class="home-cta__actions">
        <a class="btn btn--primary" href="/apps/">查看赛程</a>
        <a class="btn btn--ghost" href="/history/">品牌历程</a>
        <a class="text-link" href="/connect/">联系品牌</a>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-space: clamp(56px, 9vw, 112px);
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--paper);
}

.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 6vw, 76px);
}

.page-home .hero-grid {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

.page-home .hero-context {
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding-left: 14px;
  border-left: 3px solid var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .hero-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(56px, 15vw, 148px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .hero-title__line--accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--mint);
  letter-spacing: 0.05em;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .page-home .hero-title__line--accent {
    color: var(--mint);
  }
}

.page-home .hero-lead {
  max-width: 34rem;
  margin: 0 0 clamp(24px, 3.5vw, 36px);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--paper-soft);
}

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

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

.page-home .hero-figure {
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
  transform: rotate(-2deg);
}

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

.page-home .focus-card {
  margin-top: 22px;
  padding: 18px 20px 20px;
  border: 2px solid var(--mint);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.page-home .focus-card:hover,
.page-home .focus-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--paper);
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.page-home .focus-card__big {
  margin: 12px 0 10px;
  font-family: var(--font-mono);
  font-size: clamp(38px, 6vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--mint);
}

.page-home .focus-card__big span {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-home .focus-card__rows {
  display: grid;
  gap: 8px;
  margin: 0;
}

.page-home .focus-card__rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.page-home .focus-card__rows dt {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-home .focus-card__rows dd {
  margin: 0;
  color: var(--paper);
  text-align: right;
}

.page-home .home-section {
  padding: var(--home-space) 0;
}

.page-home .section-head {
  display: grid;
  gap: 16px;
  max-width: 48rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.page-home .section-head h2 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .section-head p:not(.eyebrow) {
  max-width: 44rem;
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--paper-soft);
}

.page-home .locate-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.page-home .timeline {
  padding: clamp(16px, 3vw, 30px);
  border: 2px solid var(--line-strong);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard-sm);
}

.page-home .timeline__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .tl-line {
  fill: none;
  stroke: var(--mint);
  stroke-width: 3;
  stroke-linejoin: round;
}

.page-home .tl-dot {
  fill: var(--ink);
  stroke: var(--mint);
  stroke-width: 3;
}

.page-home .tl-dot--last {
  fill: var(--mint);
}

.page-home .tl-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: var(--mist);
}

.page-home .locate-figure {
  border: 2px solid var(--line-strong);
  background: var(--panel);
}

.page-home .locate-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .node-grid {
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: clamp(24px, 4vw, 40px);
}

.page-home .node-card {
  padding: 20px 20px 22px;
  border-left: 3px solid var(--mint);
  background: var(--ink-2);
}

.page-home .node-card__time {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mint);
}

.page-home .node-card p:not(.node-card__time) {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper-soft);
}

.page-home .data-grid {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
}

.page-home .data-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .data-copy > p:not(.eyebrow) {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--paper-soft);
}

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

.page-home .data-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--paper-soft);
}

.page-home .data-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 10px;
  height: 2px;
  background: var(--red);
}

.page-home .data-list b {
  margin-right: 8px;
  color: var(--paper);
  letter-spacing: 0.02em;
}

.page-home .data-visual {
  position: relative;
}

.page-home .data-visual .media-frame {
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
}

.page-home .data-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .panel-stack {
  margin-top: 18px;
  padding: 16px 18px 18px;
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.page-home .panel-stack:hover,
.page-home .panel-stack:focus-visible {
  transform: translateY(-3px);
  border-color: var(--mint);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.page-home .panel-stack__head {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mint);
}

.page-home .panel-stack ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .panel-stack li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.page-home .panel-stack li span {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--mist);
}

.page-home .panel-stack li b {
  font-weight: 500;
  color: var(--paper);
}

.page-home .steps {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .step {
  padding: 22px 20px 24px;
  border: 2px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.page-home .step:hover,
.page-home .step:focus-visible {
  transform: translateY(-4px);
  border-color: var(--mint);
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.5);
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

.page-home .step__index {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--mint);
}

.page-home .step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper-soft);
}

.page-home .steps__foot {
  margin: clamp(22px, 3vw, 32px) 0 0;
}

.page-home .device-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-home .device-figure .media-frame {
  border: 2px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
  transform: rotate(2deg);
}

.page-home .device-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .device-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .device-copy > p:not(.eyebrow) {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--paper-soft);
}

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

.page-home .device-steps li {
  display: grid;
  gap: 4px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--line-strong);
}

.page-home .device-steps b {
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-home .device-steps span {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .device-copy__note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-home .feed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .feed__item {
  border-top: 1px solid var(--line);
}

.page-home .feed__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-home .feed__link {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px 16px 18px 20px;
  text-decoration: none;
  transition: background var(--ease), padding-left var(--ease);
}

.page-home .feed__link:hover,
.page-home .feed__link:focus-visible {
  padding-left: 28px;
  background: var(--ink-2);
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

.page-home .feed__band {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--line-strong);
  transition: width var(--ease), background var(--ease);
}

.page-home .feed__band--red {
  --band: var(--red);
}

.page-home .feed__band--mint {
  --band: var(--mint);
}

.page-home .feed__band--amber {
  --band: var(--amber);
}

.page-home .feed__link:hover .feed__band,
.page-home .feed__link:focus-visible .feed__band {
  width: 8px;
  background: var(--band, var(--red));
}

.page-home .feed__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .feed__title {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.page-home .home-cta {
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 2px solid var(--line-strong);
  background: var(--ink-2);
}

.page-home .home-cta__inner {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}

.page-home .home-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.page-home .home-cta p:not(.eyebrow) {
  max-width: 36rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--paper-soft);
}

.page-home .home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

@media (min-width: 900px) {
  .page-home .locate-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: stretch;
  }

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

  .page-home .data-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }

  .page-home .panel-stack {
    position: absolute;
    left: 18px;
    bottom: 20px;
    width: 272px;
    margin: 0;
  }

  .page-home .device-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

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

@media (min-width: 960px) {
  .page-home .home-hero {
    padding-top: clamp(40px, 5vw, 80px);
  }

  .page-home .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }

  .page-home .hero-visual {
    padding-left: 16px;
  }

  .page-home .focus-card {
    position: absolute;
    left: -28px;
    bottom: -36px;
    width: 284px;
    margin: 0;
  }

  .page-home .home-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}