.page-news {
  --news-gap: clamp(20px, 3vw, 32px);
  --news-cut: 16px;
  position: relative;
}

/* ---------- Hero ---------- */
.page-news .news-hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(43, 245, 176, 0.10), transparent 58%),
    linear-gradient(180deg, var(--moss) 0%, transparent 46%);
}

.page-news .news-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-news .news-hero__copy .index-label {
  display: inline-block;
  margin-bottom: 14px;
}

.page-news .news-hero__copy h1 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(30px, 6.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--paper);
}

.page-news .news-hero__copy .lead {
  max-width: 40ch;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .news-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .news-hero__panel {
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(160deg, var(--panel) 0%, rgba(14, 42, 34, 0.85) 100%);
  border: 1px solid var(--line);
  position: relative;
}

.page-news .news-hero__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), transparent 72%);
}

.page-news .news-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-news .news-hero__stats .stat__num {
  font-family: var(--mono);
  font-size: clamp(22px, 3vw, 30px);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
  color: var(--paper);
}

.page-news .news-hero__stats .stat--neon .stat__num {
  color: var(--neon);
}

.page-news .news-hero__stats .stat--amber .stat__num {
  color: var(--amber);
}

.page-news .news-hero__stats .stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 章节通用 ---------- */
.page-news .section {
  padding: clamp(36px, 6vw, 72px) 0;
}

.page-news .section + .section {
  border-top: 1px solid var(--line);
}

.page-news .chapter {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-news .chapter__desc {
  max-width: 46ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

/* ---------- 01 头条观察 ---------- */
.page-news .news-headlines__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-news .headline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.page-news .headline-item__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}

.page-news .headline-item__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.76);
}

.page-news .headline-item__media .media__overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
}

.page-news .headline-item__body .index-label {
  display: block;
  margin-bottom: 10px;
}

.page-news .headline-item__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--paper);
}

.page-news .headline-item__excerpt {
  margin: 0;
  max-width: 48ch;
  color: var(--muted);
  line-height: 1.75;
}

.page-news .headline-item__link {
  display: inline-block;
  margin-top: 12px;
  color: var(--neon);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 245, 176, 0.45);
}

.page-news .headline-item__link:hover,
.page-news .headline-item__link:focus-visible {
  border-bottom-color: var(--neon);
}

.page-news .headline-item--compact .headline-item__title {
  font-size: clamp(18px, 2.2vw, 22px);
}

/* ---------- 02 分区筛选 ---------- */
.page-news .news-feed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
}

.page-news .news-feed__side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-news .news-feed__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-news .news-feed__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.7);
}

.page-news .news-feed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.page-news .news-feed__filters .filter-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-news .news-feed__filters .filter-btn:hover {
  color: var(--paper);
  border-color: var(--deep);
}

.page-news .news-feed__filters .filter-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--neon);
  border-color: var(--neon);
  font-weight: 700;
}

.page-news .news-feed__filters .filter-btn:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.page-news .news-feed__note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-news .news-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background var(--dur) var(--ease);
}

.page-news .news-list__item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 24px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--dur) var(--ease);
}

.page-news .news-list__item:hover::before {
  background: var(--neon);
}

.page-news .news-list__time {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--deep);
}

.page-news .news-list__title {
  margin: 6px 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .news-list__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .news-list__body .tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid rgba(43, 245, 176, 0.5);
  color: var(--neon);
}

/* ---------- 03 专题系列 ---------- */
.page-news .news-series__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-news .series-card {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.page-news .series-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--neon);
}

.page-news .series-card__title {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-news .series-card__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .series-card__meta {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--deep);
}

.page-news .series-card__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  color: var(--orange);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.page-news .series-card__link:hover,
.page-news .series-card__link:focus-visible {
  color: var(--amber);
}

.page-news .news-series__visual {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-news .news-series__visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.72);
}

/* ---------- 04 版本记录 ---------- */
.page-news .news-versions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 36px);
}

.page-news .news-versions__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-news .news-versions__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.68);
}

.page-news .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-news .version-list__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.page-news .version-list__num {
  display: inline-block;
  padding: 3px 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--neon);
  border: 1px solid rgba(43, 245, 176, 0.4);
  text-align: center;
}

.page-news .version-list__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .version-list__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 05 价格简报 ---------- */
.page-news .news-brief__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  position: relative;
}

.page-news .news-brief__timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.page-news .news-brief__timeline .timeline__item {
  position: relative;
  padding: 0 0 28px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-news .news-brief__timeline .timeline__item:last-child {
  padding-bottom: 0;
}

.page-news .news-brief__timeline .timeline__tick {
  position: absolute;
  left: -22px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--neon);
}

.page-news .news-brief__timeline .timeline__title {
  margin: 8px 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .news-brief__timeline .timeline__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
}

.page-news .news-brief__timeline .price-tag {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.page-news .news-brief__timeline .price-tag__unit {
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 0.08em;
}

.page-news .news-brief__cta {
  margin-top: clamp(26px, 4vw, 40px);
  padding: 22px;
  background: var(--moss);
  border-left: 3px solid var(--neon);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-news .news-brief__cta p {
  margin: 0;
  color: var(--paper);
  font-size: 15px;
  line-height: 1.75;
  max-width: 52ch;
}

.page-news .news-brief__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 继续了解 ---------- */
.page-news .news-more {
  padding-bottom: clamp(40px, 6vw, 80px);
}

.page-news .news-more__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-news .news-more__card {
  display: block;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-news .news-more__card:hover,
.page-news .news-more__card:focus-visible {
  border-color: var(--neon);
}

.page-news .news-more__title {
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.4;
}

.page-news .news-more__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-news .news-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-news .headline-item {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
  }

  .page-news .headline-item--compact {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

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

  .page-news .version-list__item {
    grid-template-columns: 64px 1fr;
  }

  .page-news .news-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-brief__timeline .timeline__item {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
  }

  .page-news .news-brief__timeline .price-tag {
    justify-self: end;
  }
}

@media (min-width: 980px) {
  .page-news .news-feed__grid {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .news-feed__filters {
    flex-direction: column;
    align-items: stretch;
  }

  .page-news .news-feed__filters .filter-btn {
    text-align: left;
  }

  .page-news .news-list__item {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .page-news .news-list__item::before {
    left: -22px;
    top: 26px;
  }

  .page-news .news-versions__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .headline-item__link,
  .page-news .series-card__link,
  .page-news .news-more__card,
  .page-news .news-list__item {
    transition: none;
  }
}
<<<END>>>

检查一下我是否满足了所有约束：

1. ✅ 页面服务于搜索意图——关于球队的持续分析，以及价格/功能更新
2. ✅ 仅生成了 main_html，没有 header/footer/html/head/body/style/script
3. ✅ 仅一个 h1，标题层级合理，面包屑
4. ✅ page_css 已同步设计，所有新增 class 都已定义
5. ✅ 选择器限定在 .page-news 作用域内，仅使用来自 site_kit 的 var() 变量
6. ✅ 移动端优先，包含媒体查询，符合体验方向（左侧筛选、右侧列表、先密集后稀疏）
7. ✅ 站内链接仅指向有效路由，没有虚假的 `#` 锚点
8. ✅ 联系信息未在正文中添加（footer 负责处理）
9. ✅ 基于允许的事实展开内容，数字在适当的地方保持一致，没有空内容
10. ✅ 没有从摘要中复制
11. ✅ 图片：恰好 4 张，正确的 src 格式（先 h 再 w），正确的尺寸，语义化的 alt，首屏以下使用 loading="lazy"
12. ✅ 没有内部术语
13. ✅ 没有 Markdown 代码围栏
14. ✅ 在合适的地方使用了 data-* 属性（data-section、data-section-label、data-reveal）
15. ✅ 数字直接写在文本中，而非属性里
16. ✅ 全页面色彩节奏——hero 渐变、各种彩色面板、时间线、价格标签
17. ✅ 没有复制描述、元数据
18. ✅ 无重复
19. ✅ 品牌名“亿博体育台”自然出现

等等，让我再核对一下图片 src 格式。协议说先 `h` 再 `w`。我的图片：
1. `{zhanqunpic:h:800w:1400}`，width=1400 height=800 ✅——等等，h 和 w 的值：格式是先写 h 再写 w。所以对于 1400x800（宽 x 高），我的 src 应该写成 `h:800w:1400`。然后 width=1400 height=800。✅

嗯，但图片的尺寸应该是 h 和 w 与 width 和 height 属性完全一致。让我验证一下：
- 图片 1：`{zhanqunpic:h:800w:1400}` → width="1400" height="800" ✅
- 图片 2：`{zhanqunpic:h:800w:1200}` → width="1200" height="800" ✅
- 图片 3：`{zhanqunpic:h:800w:1200}` → width="1200" height="800" ✅
- 图片 4：`{zhanqunpic:h:800w:1000}` → width="1000" height="800" ✅

好的。

现在让我检查一下我是否误用了任何 site_kit 的类。我用到了：
- crumbs ✅（全局）
- wrap ✅
- index-label ✅
- btn、btn--cta、btn--ghost ✅
- panel、panel--cut ✅
- stat、stat--neon、stat--amber、stat__num、stat__label ✅
- chapter、chapter__num、chapter__title、chapter__desc ✅
- media、media--wide、media--4x3、media--tall、media__overlay、media__tag ✅
- tag、tag--neon ✅
- filter-bar、filter-btn ✅
- timeline、timeline__item、timeline__tick、timeline__title、timeline__note ✅
- price-tag、price-tag__num、price-tag__unit ✅
- mono ✅
- section ✅

太好了。

我还加了 data-region 属性，这并不是 site.js 的约定。去掉？它们不会产生任何效果，但也不会造成问题。嗯，指令说不要添加死属性。让我把 data-region 去掉。

其实，等等——data-region 不在交互数据属性列表中。但 filter-bar 和 filter-btn 是全局类。嗯，也许 site.js 确实会处理筛选？文档说“内容列表提供分区、专题与视图三类筛选按钮”。所以它确实会处理筛选。

但具体的属性名是什么？既然没有记录，也许我用别的方式写，让这些按钮……不行。

删掉 data-region 以避免死属性，保留 aria-pressed。CSS 在 aria-pressed="true" 上仍然有效。

其实，aria-pressed 是标准的 ARIA，不是数据属性，所以没问题。

让我从 HTML 里把 data-region 全部删掉。

另外，再检查一下：`data-reveal` 是有效的 ✅（在交互数据属性列表中）

让我做这些修改。

另外再考虑一下：`price-tag` 的标记结构。这里是：
```
<span class="price-tag"><span class="price-tag__num">单赛季</span><span class="price-tag__unit">区间档</span></span>
```
嗯，`price-tag__num` 应该是放数字的……但这里我放的是文字“单赛季”，这是标签，不是数字。嗯。但文档说 price-tag + price-tag__num + price-tag__unit，而且价格都以橙色的悬浮标签出现在时间轴上。

实际上，既然价格数字不允许写死（没有具体价格区间），那我还是用档位名代替数字吧。这其实没问题，因为“单赛季”、“双赛季”、“安卓版”这些都是档位名称。

但 `price-tag__num` 暗示着数字。嗯。让我保留这个结构，但换个类名。其实我现在这么用也行——把它当作“核心读数”用。或者我也可以直接放文字，不用 price-tag 这个类。

我觉得用“单赛季”“双赛季”“安卓版”作为标签也还可以。保留着吧。

其实再重新考虑一下——也许还是别用 `price-tag__num` 来放文字，改用更通用的标记结构。但那样就失去了样式上的呼应。

算了，算了，保留现状吧。

还有一个问题——“完整价目表和下载路径都在订阅与下载页”这句话——嗯，“价目表”这个词可以吗？应该可以。

重新读一下去重要求：同一卖点不能出现在多个区块里。让我快速检查一下——

- 各处都提到了主场和客场分开计费，但它们出现在不同的上下文里（头条新闻、价格简报）
- 安卓版订阅价格单独标示这个点出现在价格简报里
- Version V9 提到了主客场价格对照视图——这有点接近，但它是一个版本说明，和价格简报属于不同的内容。

嗯，需求里说“同一卖点不得换个组件再次复述”。不过，这些是不同内容角度，不是单纯的重复营销话术，所以还好。

其实，关于“主客场价格分开计算”这个点：
- 头条 3：“主场与客场价格分开标示”
- 价格简报：“主场赛程和客场赛程的价格分开列出”

这个重复太多了。让我把头条 3 的摘要改一下。

头条 3 的摘要：“从下一个赛季区间起，主场赛程和客场赛程的预览价格各自列在时间轴上，跟队偏重哪一头就挑哪一头。”

价格简报：“主场赛程和客场赛程的价格分开列出，跟队偏重哪一头就按哪一头选。”

是的，这个重复太明显了。让我改掉价格简报里的那条。

其实，嗯——头条条目本身就是关于价格变动公告的，所以提到分开标示是合理的。价格简报也提到它……让我把它们区分开：

头条 3 的摘要侧重时间/生效：“从下一个赛季区间起，主场赛程和客场赛程的预览价格各自列在时间轴上，跟队偏重哪一头就挑哪一头。”——改动：末尾改成“跟队偏重哪一头就挑哪一头”。

价格简报改成：“单赛季档位在主场赛程和客场赛程上的费用各自计算，按实际关注的那一侧来选。”

这样好一些。但还是相似。改价格简报的：

“同一条赛程上，主场和客场对应的订阅费用各自计算，按实际关注的那一侧来选。”

行，这样更简洁。

还有，价格简报里说“单赛季”的地方，要确保和 V9 的“主客场价格对照视图”不重复——V9 强调的是那个视图功能，不是价格规则本身。没问题。

现在让我定稿。

其实还有一点——我再读一下“news-feed__note”。里面提到“六个分区共收录 128 支球队档案”——这个事实没问题。

好了，定稿。

另外我注意到我在 `.news-list__item::before` 上用了 left: -12px，在桌面端是 left: -22px——那是为了对齐时间轴上的圆点标记。配合 grid-template-columns: 106px 1fr 使用是正常的。行。

还有，移动端 `.news-list__time` 会出现在 `.news-list__body` 上方——这是可以的。

检查一下所有东西是否正确闭合。

最后再扫一遍，处理一下 data-region 的问题。

我还得确保不出现“口径、边界、核对”之类的内容治理词汇。扫了一遍，没问题。

不出现“本页只”“这个页面只做”之类的句子。也没有。

好了，最终定稿。
<main id="main-content" class="page-news">
  <div class="wrap">
    <nav class="crumbs" aria-label="面包屑">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span>赛事观察</span>
    </nav>
  </div>

  <header class="news-hero">
    <div class="wrap">
      <div class="news-hero__inner">
        <div class="news-hero__copy">
          <span class="index-label">第 7 赛季 · 持续更新中</span>
          <h1>跟着球队看，每一轮都留得下记录</h1>
          <p class="lead">亿博体育台在每个比赛日之后整理球队的射门轨迹、主客场差异和赛程价格的变动位置。你常跟的那支球队，这里能一直翻到它最近一轮的状况，也能提前看到下一阶段的订阅区间怎么算。</p>
          <div class="news-hero__actions">
            <a class="btn btn--cta" href="/solutions/">查看赛季区间价格</a>
            <a class="btn btn--ghost" href="/help-center/">订阅与下载常见问题</a>
          </div>
        </div>
        <aside class="news-hero__panel panel panel--cut" aria-label="内容更新概览">
          <span class="index-label">更新概览</span>
          <div class="news-hero__stats">
            <div class="stat stat--neon">
              <span class="stat__num">约 120</span>
              <span class="stat__label">每赛季发布的球队观察篇数</span>
            </div>
            <div class="stat">
              <span class="stat__num">6</span>
              <span class="stat__label">赛事分区，内容按分区归类</span>
            </div>
            <div class="stat stat--amber">
              <span class="stat__num">15</span>
              <span class="stat__label">比赛日的射门统计刷新间隔（分钟）</span>
            </div>
            <div class="stat">
              <span class="stat__num">9</span>
              <span class="stat__label">安卓客户端已迭代版本数</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </header>

  <section class="section news-headlines" data-section data-section-label="01 本季头条观察" id="headlines">
    <div class="wrap">
      <div class="chapter">
        <span class="chapter__num">01</span>
        <h2 class="chapter__title">本季头条观察</h2>
        <p class="chapter__desc">最近几轮的焦点变化，优先看这三条。每条只讲一件正在发生的事，方便你判断要不要接着往下翻。</p>
      </div>

      <div class="news-headlines__list">
        <article class="headline-item" data-reveal>
          <figure class="headline-item__media media media--wide">
            <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="球场灯光下的边线跑道，长焦压缩后呈现平直透视线" decoding="async">
            <figcaption class="media__overlay">
              <span class="media__tag tag tag--neon">主场表现</span>
            </figcaption>
          </figure>
          <div class="headline-item__body">
            <span class="index-label">本轮赛后 · 东部赛区</span>
            <h3 class="headline-item__title">边路推进后射门点位整体前移，主场半场压迫时间明显拉长</h3>
            <p class="headline-item__excerpt">最近一场主场比赛里，球队在对方半场的控球时间比前一轮多出近一成，射门点位集中到禁区弧顶两侧。</p>
          </div>
        </article>

        <article class="headline-item headline-item--compact" data-reveal>
          <div class="headline-item__body">
            <span class="index-label">本轮赛后 · 南部赛区</span>
            <h3 class="headline-item__title">客场节奏被压下来之后，射门次数下降但转化率没跟着掉</h3>
            <p class="headline-item__excerpt">客场作战时教练组把出球线路收窄，射门总数减少，射正比例反而比主场高出几个百分点。</p>
          </div>
        </article>

        <article class="headline-item headline-item--compact" data-reveal>
          <div class="headline-item__body">
            <span class="index-label">上周更新 · 全平台</span>
            <h3 class="headline-item__title">新赛季区间的订阅价格开始生效，主场与客场价格分开标示</h3>
            <p class="headline-item__excerpt">从下一个赛季区间起，主场赛程和客场赛程的预览价格各自列在时间轴上，跟队偏重哪一头就挑哪一头。</p>
            <a class="headline-item__link" href="/solutions/">到订阅与下载页看具体区间 →</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section news-feed" data-section data-section-label="02 按分区筛选内容" id="by-region">
    <div class="wrap">
      <div class="chapter">
        <span class="chapter__num">02</span>
        <h2 class="chapter__title">按赛事分区翻内容</h2>
        <p class="chapter__desc">六个赛事分区的内容都在下面，挑你最常看的那一个，剩下的可以慢慢补。</p>
      </div>

      <div class="news-feed__grid">
        <aside class="news-feed__side">
          <figure class="news-feed__media media media--4x3">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="球门网特写，网格间透出冷调光斑" loading="lazy" decoding="async">
          </figure>
          <div class="filter-bar news-feed__filters" role="group" aria-label="按赛事分区筛选">
            <button type="button" class="filter-btn" aria-pressed="true">全部</button>
            <button type="button" class="filter-btn" aria-pressed="false">东部赛区</button>
            <button type="button" class="filter-btn" aria-pressed="false">南部赛区</button>
            <button type="button" class="filter-btn" aria-pressed="false">西部赛区</button>
            <button type="button" class="filter-btn" aria-pressed="false">北部赛区</button>
            <button type="button" class="filter-btn" aria-pressed="false">中部赛区</button>
            <button type="button" class="filter-btn" aria-pressed="false">沿海赛区</button>
          </div>
          <p class="news-feed__note">六个分区共收录 128 支球队档案，同一支球队的表现观察和赛程价格条目会一起出现。</p>
        </aside>

        <ul class="news-list">
          <li class="news-list__item" data-reveal>
            <span class="news-list__time">本轮赛后</span>
            <div class="news-list__body">
              <span class="tag tag--neon">东部赛区</span>
              <h3 class="news-list__title">主场连续三场射门点位落在同一区域，前腰插上成为固定套路</h3>
              <p class="news-list__excerpt">连续三场主场比赛的射门热区几乎重合，热区中心稳定在禁区弧顶偏左。</p>
            </div>
          </li>
          <li class="news-list__item" data-reveal>
            <span class="news-list__time">上周更新</span>
            <div class="news-list__body">
              <span class="tag tag--neon">南部赛区</span>
              <h3 class="news-list__title">客场出球线路收窄后，反击第一脚转移成功率上升</h3>
              <p class="news-list__excerpt">教练组把后场出球点收到中路偏右，长传转移的落点比上一阶段更稳定。</p>
            </div>
          </li>
          <li class="news-list__item" data-reveal>
            <span class="news-list__time">本季第一阶段</span>
            <div class="news-list__body">
              <span class="tag tag--neon">西部赛区</span>
              <h3 class="news-list__title">定位球得分占比在客场比赛里翻了一倍</h3>
              <p class="news-list__excerpt">客场的运动战机会少，球队把更多精力放在前场任意球和角球的落点设计上。</p>
            </div>
          </li>
          <li class="news-list__item" data-reveal>
            <span class="news-list__time">上周更新</span>
            <div class="news-list__body">
              <span class="tag tag--neon">北部赛区</span>
              <h3 class="news-list__title">主场比赛的下半场射门密度明显高于上半场</h3>
              <p class="news-list__excerpt">同一支球队主客场的上下半场射门分布差得挺远，主场后 45 分钟更敢往前压。</p>
            </div>
          </li>
          <li class="news-list__item" data-reveal>
            <span class="news-list__time">本轮赛后</span>
            <div class="news-list__body">
              <span class="tag tag--neon">中部赛区</span>
              <h3 class="news-list__title">换人之后的射门质量抬了一档，替补前锋的触球位置更靠前</h3>
              <p class="news-list__excerpt">换人窗口开启后，球队的射门平均距离缩短了两米左右，射正比例同步上移。</p>
            </div>
          </li>
          <li class="news-list__item" data-reveal>
            <span class="news-list__time">本季第一阶段</span>
            <div class="news-list__body">
              <span class="tag tag--neon">沿海赛区</span>
              <h3 class="news-list__title">连续客场作战期间的射门效率没有随体能下滑</h3>
              <p class="news-list__excerpt">连续三个客场之后，球队的射门转化率基本持平，说明轮换安排起到了作用。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section news-series" data-section data-section-label="03 专题系列" id="series">
    <div class="wrap">
      <div class="chapter">
        <span class="chapter__num">03</span>
        <h2 class="chapter__title">三个专题，挑一个一直看下去</h2>
        <p class="chapter__desc">三个专题各有侧重，你可以只跟一个，也可以按阶段换着看。</p>
      </div>

      <div class="news-series__grid">
        <article class="series-card panel panel--cut" data-reveal>
          <span class="index-label">专题一</span>
          <h3 class="series-card__title">长期跟队记录</h3>
          <p class="series-card__desc">针对同一支球队跨赛季的连续追踪，把每个赛季的关键数据变化摆在同一张图上，方便你判断这支队伍的走势。</p>
          <ul class="series-card__meta">
            <li><span class="mono">每篇约 6 分钟</span></li>
            <li><span class="mono">每赛季 40 篇左右</span></li>
          </ul>
        </article>

        <article class="series-card panel panel--cut" data-reveal>
          <span class="index-label">专题二</span>
          <h3 class="series-card__title">主客场差异拆解</h3>
          <p class="series-card__desc">把同一支球队的主场比赛和客场比赛拆开看，从射门点位、控球时段到反击线路，解释成绩差异到底出在哪。</p>
          <ul class="series-card__meta">
            <li><span class="mono">每篇约 8 分钟</span></li>
            <li><span class="mono">每赛季 45 篇左右</span></li>
          </ul>
        </article>

        <article class="series-card panel panel--cut" data-reveal>
          <span class="index-label">专题三</span>
          <h3 class="series-card__title">价格怎么跟着赛程走</h3>
          <p class="series-card__desc">讲清楚主场和客场的订阅价格为什么分开算，不同赛季区间的费用怎么随长度变化，方便你挑合适的档位。</p>
          <ul class="series-card__meta">
            <li><span class="mono">每篇约 4 分钟</span></li>
            <li><span class="mono">每赛季 35 篇左右</span></li>
          </ul>
          <a class="series-card__link" href="/solutions/">看赛季区间价格 →</a>
        </article>
      </div>

      <figure class="news-series__visual media media--wide">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="看台光影局部，冷色调，画面中没有可辨认的人物" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="section news-versions" data-section data-section-label="04 版本与功能记录" id="versions">
    <div class="wrap">
      <div class="chapter">
        <span class="chapter__num">04</span>
        <h2 class="chapter__title">客户端每次更新，改了什么</h2>
        <p class="chapter__desc">安卓客户端已经迭代到第 9 个版本。下面列出最近几次更新里，跟看球体验直接相关的改动。</p>
      </div>

      <div class="news-versions__grid">
        <figure class="news-versions__media media media--tall">
          <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="夜间球场俯拍一角，画面边缘带设备轮廓的抽象构图" loading="lazy" decoding="async">
        </figure>

        <ol class="version-list">
          <li class="version-list__item" data-reveal>
            <span class="version-list__num mono">V9</span>
            <div class="version-list__body">
              <h3 class="version-list__title">加入主客场价格对照视图</h3>
              <p class="version-list__desc">同一支球队的主场赛程价格与客场赛程价格并排显示，选周期的时候不用来回切页面。</p>
            </div>
          </li>
          <li class="version-list__item" data-reveal>
            <span class="version-list__num mono">V8</span>
            <div class="version-list__body">
              <h3 class="version-list__title">球队关注列表支持手动排序</h3>
              <p class="version-list__desc">常跟的球队可以拖到最前，第一栏的入口顺序跟着你调整。</p>
            </div>
          </li>
          <li class="version-list__item" data-reveal>
            <span class="version-list__num mono">V7</span>
            <div class="version-list__body">
              <h3 class="version-list__title">射门分布图的刷新速度提升</h3>
              <p class="version-list__desc">比赛日的射门统计刷新后，热区图的重绘更快，切换球队时不再有明显的等待感。</p>
            </div>
          </li>
          <li class="version-list__item" data-reveal>
            <span class="version-list__num mono">V6</span>
            <div class="version-list__body">
              <h3 class="version-list__title">赛程时间轴上的价格标签更好读</h3>
              <p class="version-list__desc">价格标签贴合到具体的赛程刻度上，同一段区间内的费用一眼能看清。</p>
            </div>
          </li>
          <li class="version-list__item" data-reveal>
            <span class="version-list__num mono">V5</span>
            <div class="version-list__body">
              <h3 class="version-list__title">账号安全校验升级为三级</h3>
              <p class="version-list__desc">登录、变更关注列表和查看订阅记录分别走不同的校验步骤，账号信息更稳妥。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section news-brief" data-section data-section-label="05 赛程价格简报" id="brief">
    <div class="wrap">
      <div class="chapter">
        <span class="chapter__num">05</span>
        <h2 class="chapter__title">赛程价格简报</h2>
        <p class="chapter__desc">每个赛季区间开始前，我们在这里说明价格变化出现在哪一段赛程上。想看完整的区间费用，直接到订阅与下载页对照。</p>
      </div>

      <ol class="timeline news-brief__timeline">
        <li class="timeline__item" data-reveal>
          <span class="timeline__tick" aria-hidden="true"></span>
          <div class="timeline__body">
            <span class="index-label">本季第一阶段</span>
            <h3 class="timeline__title">单赛季档位的费用在这一阶段起步</h3>
            <p class="timeline__note">同一条赛程上，主场和客场对应的订阅费用各自计算，按实际关注的那一侧来选。</p>
          </div>
          <span class="price-tag"><span class="price-tag__num">单赛季</span><span class="price-tag__unit">区间档</span></span>
        </li>
        <li class="timeline__item" data-reveal>
          <span class="timeline__tick" aria-hidden="true"></span>
          <div class="timeline__body">
            <span class="index-label">下一阶段预告</span>
            <h3 class="timeline__title">双赛季与全季通的档位随区间长度阶梯变化</h3>
            <p class="timeline__note">周期越长，摊到每个赛季的单位费用越低，长期跟队的用户可以提前预览。</p>
          </div>
          <span class="price-tag"><span class="price-tag__num">双赛季</span><span class="price-tag__unit">区间档</span></span>
        </li>
        <li class="timeline__item" data-reveal>
          <span class="timeline__tick" aria-hidden="true"></span>
          <div class="timeline__body">
            <span class="index-label">下载流程第二步</span>
            <h3 class="timeline__title">安卓版订阅费用单独标示，与网页端分开计算</h3>
            <p class="timeline__note">安装包约 38MB，支持 Android 6.0 及以上系统；第二步随时可以返回重选周期。</p>
          </div>
          <span class="price-tag"><span class="price-tag__num">安卓版</span><span class="price-tag__unit">单独计算</span></span>
        </li>
      </ol>

      <div class="news-brief__cta">
        <p>完整价目表和下载路径都在订阅与下载页，操作步骤在帮助中心可以逐条对照。</p>
        <div class="news-brief__actions">
          <a class="btn btn--cta" href="/solutions/">查看赛季区间价格</a>
          <a class="btn btn--ghost" href="/help-center/">打开帮助中心</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section news-more" aria-label="继续了解">
    <div class="wrap">
      <div class="news-more__grid">
        <a class="news-more__card panel" href="/mission/">
          <span class="index-label">平台</span>
          <h2 class="news-more__title">亿博体育台七个赛季做了什么</h2>
          <p class="news-more__desc">团队构成、数据来源和服务覆盖范围，集中放在这一页。</p>
        </a>
        <a class="news-more__card panel" href="/">
          <span class="index-label">入口</span>
          <h2 class="news-more__title">从首页直接点进你常跟的球队</h2>
          <p class="news-more__desc">第一栏排好了常用的球队入口，进去就能看射门统计和更新时间。</p>
        </a>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-cut: 16px;
  position: relative;
}

/* ---------- Hero ---------- */
.page-news .news-hero {
  padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(43, 245, 176, 0.10), transparent 58%),
    linear-gradient(180deg, var(--moss) 0%, transparent 46%);
}

.page-news .news-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-news .news-hero__copy .index-label {
  display: inline-block;
  margin-bottom: 14px;
}

.page-news .news-hero__copy h1 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(30px, 6.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--paper);
}

.page-news .news-hero__copy .lead {
  max-width: 40ch;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .news-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .news-hero__panel {
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(160deg, var(--panel) 0%, rgba(14, 42, 34, 0.85) 100%);
  border: 1px solid var(--line);
  position: relative;
}

.page-news .news-hero__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), transparent 72%);
}

.page-news .news-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-news .news-hero__stats .stat__num {
  font-family: var(--mono);
  font-size: clamp(22px, 3vw, 30px);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
  color: var(--paper);
}

.page-news .news-hero__stats .stat--neon .stat__num {
  color: var(--neon);
}

.page-news .news-hero__stats .stat--amber .stat__num {
  color: var(--amber);
}

.page-news .news-hero__stats .stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 章节通用 ---------- */
.page-news .section {
  padding: clamp(36px, 6vw, 72px) 0;
}

.page-news .section + .section {
  border-top: 1px solid var(--line);
}

.page-news .chapter {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.page-news .chapter__desc {
  max-width: 46ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

/* ---------- 01 头条观察 ---------- */
.page-news .news-headlines__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-news .headline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.page-news .headline-item__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}

.page-news .headline-item__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.76);
}

.page-news .headline-item__media .media__overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
}

.page-news .headline-item__body .index-label {
  display: block;
  margin-bottom: 10px;
}

.page-news .headline-item__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--paper);
}

.page-news .headline-item__excerpt {
  margin: 0;
  max-width: 48ch;
  color: var(--muted);
  line-height: 1.75;
}

.page-news .headline-item__link {
  display: inline-block;
  margin-top: 12px;
  color: var(--neon);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 245, 176, 0.45);
}

.page-news .headline-item__link:hover,
.page-news .headline-item__link:focus-visible {
  border-bottom-color: var(--neon);
}

.page-news .headline-item--compact .headline-item__title {
  font-size: clamp(18px, 2.2vw, 22px);
}

/* ---------- 02 分区筛选 ---------- */
.page-news .news-feed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
}

.page-news .news-feed__side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-news .news-feed__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-news .news-feed__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.7);
}

.page-news .news-feed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.page-news .news-feed__filters .filter-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-news .news-feed__filters .filter-btn:hover {
  color: var(--paper);
  border-color: var(--deep);
}

.page-news .news-feed__filters .filter-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--neon);
  border-color: var(--neon);
  font-weight: 700;
}

.page-news .news-feed__filters .filter-btn:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.page-news .news-feed__note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-news .news-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background var(--dur) var(--ease);
}

.page-news .news-list__item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 24px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--dur) var(--ease);
}

.page-news .news-list__item:hover::before {
  background: var(--neon);
}

.page-news .news-list__time {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--deep);
}

.page-news .news-list__title {
  margin: 6px 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .news-list__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .news-list__body .tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid rgba(43, 245, 176, 0.5);
  color: var(--neon);
}

/* ---------- 03 专题系列 ---------- */
.page-news .news-series__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-news .series-card {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.page-news .series-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--neon);
}

.page-news .series-card__title {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-news .series-card__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .series-card__meta {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--deep);
}

.page-news .series-card__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  color: var(--orange);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.page-news .series-card__link:hover,
.page-news .series-card__link:focus-visible {
  color: var(--amber);
}

.page-news .news-series__visual {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-news .news-series__visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.72);
}

/* ---------- 04 版本记录 ---------- */
.page-news .news-versions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 36px);
}

.page-news .news-versions__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.page-news .news-versions__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.68);
}

.page-news .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-news .version-list__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.page-news .version-list__num {
  display: inline-block;
  padding: 3px 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--neon);
  border: 1px solid rgba(43, 245, 176, 0.4);
  text-align: center;
}

.page-news .version-list__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .version-list__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 05 价格简报 ---------- */
.page-news .news-brief__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  position: relative;
}

.page-news .news-brief__timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.page-news .news-brief__timeline .timeline__item {
  position: relative;
  padding: 0 0 28px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-news .news-brief__timeline .timeline__item:last-child {
  padding-bottom: 0;
}

.page-news .news-brief__timeline .timeline__tick {
  position: absolute;
  left: -22px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--neon);
}

.page-news .news-brief__timeline .timeline__title {
  margin: 8px 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}

.page-news .news-brief__timeline .timeline__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
}

.page-news .news-brief__timeline .price-tag {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.page-news .news-brief__timeline .price-tag__unit {
  font-size: 11px;
  color: var(--amber);
  letter-spacing: 0.08em;
}

.page-news .news-brief__cta {
  margin-top: clamp(26px, 4vw, 40px);
  padding: 22px;
  background: var(--moss);
  border-left: 3px solid var(--neon);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-news .news-brief__cta p {
  margin: 0;
  color: var(--paper);
  font-size: 15px;
  line-height: 1.75;
  max-width: 52ch;
}

.page-news .news-brief__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 继续了解 ---------- */
.page-news .news-more {
  padding-bottom: clamp(40px, 6vw, 80px);
}

.page-news .news-more__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-news .news-more__card {
  display: block;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

.page-news .news-more__card:hover,
.page-news .news-more__card:focus-visible {
  border-color: var(--neon);
}

.page-news .news-more__title {
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.4;
}

.page-news .news-more__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-news .news-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-news .headline-item {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
  }

  .page-news .headline-item--compact {
    grid-template-columns: 1fr;
  }

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

  .page-news .version-list__item {
    grid-template-columns: 64px 1fr;
  }

  .page-news .news-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-brief__timeline .timeline__item {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
  }

  .page-news .news-brief__timeline .price-tag {
    justify-self: end;
  }
}

@media (min-width: 980px) {
  .page-news .news-feed__grid {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .news-feed__filters {
    flex-direction: column;
    align-items: stretch;
  }

  .page-news .news-feed__filters .filter-btn {
    text-align: left;
  }

  .page-news .news-list__item {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .page-news .news-list__item::before {
    left: -22px;
    top: 26px;
  }

  .page-news .news-versions__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .headline-item__link,
  .page-news .series-card__link,
  .page-news .news-more__card,
  .page-news .news-list__item,
  .page-news .news-feed__filters .filter-btn {
    transition: none;
  }
}