.page-home {
  --home-rail-card: 228px;
  --home-shadow: 0 32px 80px -48px rgba(55, 245, 196, .45);
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 7vw, 92px) 0 clamp(34px, 6vw, 62px);
  background: linear-gradient(166deg, var(--im-panel) 0%, var(--im-ink) 62%);
}

.page-home .home-hero__shape {
  position: absolute;
  z-index: 0;
  top: -20%;
  right: -24%;
  width: 82%;
  height: 145%;
  background: linear-gradient(152deg, var(--im-lift) 4%, rgba(18, 29, 58, 0) 74%);
  clip-path: polygon(28% 0, 100% 7%, 100% 100%, 0 82%);
  pointer-events: none;
}

.page-home .home-hero__blob {
  position: absolute;
  z-index: 0;
  left: -10%;
  bottom: 4%;
  width: clamp(170px, 30vw, 360px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 42% 42%, rgba(55, 245, 196, .2), rgba(55, 245, 196, 0) 68%);
  border-radius: 42% 58% 63% 37% / 46% 38% 62% 54%;
  pointer-events: none;
}

.page-home .home-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 54px);
  align-items: center;
}

.page-home .home-hero__title {
  margin: .5em 0 .55em;
  font-family: var(--im-display);
  font-size: clamp(2.35rem, 6.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--im-white);
}

.page-home .home-hero__accent {
  display: inline-block;
  position: relative;
  color: var(--im-accent);
  padding-bottom: .08em;
}

.page-home .home-hero__accent::after {
  content: "";
  position: absolute;
  left: 2%;
  right: -3%;
  bottom: 0;
  height: .12em;
  background: linear-gradient(90deg, var(--im-accent), var(--im-rose));
  clip-path: polygon(0 44%, 100% 0, 98% 100%, 2% 78%);
}

.page-home .home-hero__lead {
  max-width: 46ch;
  margin: 0;
  color: var(--im-body);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.78;
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
}

.page-home .home-hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--im-radius);
  border: 1px solid var(--im-line);
  background: var(--im-panel);
  overflow: hidden;
  transform: rotate(-1.6deg);
  box-shadow: var(--home-shadow);
}

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

.page-home .home-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--im-accent-soft);
  background: linear-gradient(0deg, rgba(6, 10, 22, .92), rgba(6, 10, 22, 0));
}

.page-home .home-hero__entries {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(30px, 5vw, 54px) auto 0;
  padding: 0;
  list-style: none;
}

.page-home .home-hero__entries a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: rgba(18, 29, 58, .7);
  color: var(--im-white);
  text-decoration: none;
  transition: border-color .25s var(--im-ease), transform .25s var(--im-ease), background .25s var(--im-ease);
}

.page-home .home-hero__entries a:hover,
.page-home .home-hero__entries a:focus-visible {
  border-color: var(--im-accent);
  background: var(--im-lift);
  transform: translateY(-2px);
}

.page-home .home-hero__num {
  font-family: var(--im-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--im-accent);
  letter-spacing: .08em;
}

.page-home .home-hero__label {
  font-size: 1rem;
  font-weight: 700;
}

.page-home .home-hero__desc {
  font-size: .8rem;
  color: var(--im-muted);
}

/* ---------- 固定战队长条 ---------- */
.page-home .home-roster {
  padding: clamp(30px, 5vw, 54px) 0 clamp(34px, 5vw, 56px);
  background: var(--im-panel);
  border-top: 1px solid var(--im-line);
  border-bottom: 1px solid var(--im-line);
}

.page-home .home-roster__head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-home .home-roster__title {
  margin: 0;
  font-family: var(--im-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--im-white);
}

.page-home .home-roster__note {
  margin: 0;
  max-width: 62ch;
  color: var(--im-body);
  font-size: .95rem;
  line-height: 1.72;
}

.page-home .home-roster__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}

.page-home .home-roster__media {
  margin: 0;
  border-radius: var(--im-radius-sm);
  border: 1px solid var(--im-line);
  overflow: hidden;
  background: var(--im-ink);
}

.page-home .home-roster__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 190px;
  object-fit: cover;
}

.page-home .home-roster__rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--im-accent) var(--im-ink);
}

.page-home .home-roster__rail:focus-visible {
  outline: 2px solid var(--im-accent-soft);
  outline-offset: 4px;
  border-radius: var(--im-radius-sm);
}

.page-home .home-roster__rail::-webkit-scrollbar {
  height: 6px;
}

.page-home .home-roster__rail::-webkit-scrollbar-track {
  background: var(--im-ink);
  border-radius: 999px;
}

.page-home .home-roster__rail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--im-accent), var(--im-rose));
  border-radius: 999px;
}

.page-home .home-roster__card {
  flex: 0 0 var(--home-rail-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: var(--im-lift);
  transition: border-color .25s var(--im-ease);
}

.page-home .home-roster__card:hover {
  border-color: var(--im-accent);
}

.page-home .home-roster__id {
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--im-accent);
}

.page-home .home-roster__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-roster__meta {
  margin: 0 0 4px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--im-muted);
}

.page-home .home-roster__card .im-badge {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- 章节通用 ---------- */
.page-home .home-section {
  padding: clamp(46px, 8vw, 96px) 0;
}

.page-home .home-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-home .home-section__head--stack {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-home .home-section__intro h2 {
  margin: .28em 0 .5em;
  font-family: var(--im-display);
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--im-white);
}

.page-home .home-section__intro p {
  margin: 0;
  max-width: 62ch;
  color: var(--im-body);
  font-size: .98rem;
  line-height: 1.78;
}

/* ---------- 01 本周值得看 ---------- */
.page-home .home-focus {
  background: var(--im-ink);
}

.page-home .home-focus__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-home .home-focus__filters .im-chip[aria-pressed="true"] {
  background: var(--im-accent);
  color: var(--im-ink);
  border-color: var(--im-accent);
}

.page-home .home-focus__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .home-focus__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  background: linear-gradient(158deg, var(--im-panel), var(--im-lift));
  transition: border-color .3s var(--im-ease), transform .3s var(--im-ease);
}

.page-home .home-focus__card:hover {
  border-color: var(--im-accent);
  transform: translateY(-3px);
}

.page-home .home-focus__card .im-badge {
  align-self: flex-start;
}

.page-home .home-focus__card h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-focus__card p {
  margin: 0;
  color: var(--im-body);
  font-size: .9rem;
  line-height: 1.75;
}

.page-home .home-focus__link {
  margin-top: auto;
  padding-top: 6px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--im-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .25s var(--im-ease);
}

.page-home .home-focus__link:hover,
.page-home .home-focus__link:focus-visible {
  border-bottom-color: var(--im-accent);
}

/* ---------- 02 案例合集路径 ---------- */
.page-home .home-collect {
  background: linear-gradient(180deg, var(--im-ink), var(--im-panel) 55%, var(--im-ink));
}

.page-home .home-collect__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

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

.page-home .home-collect__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border-left: 2px solid var(--im-line);
  background: rgba(18, 29, 58, .55);
  border-radius: 0 var(--im-radius-sm) var(--im-radius-sm) 0;
  transition: border-color .3s var(--im-ease);
}

.page-home .home-collect__step:hover {
  border-left-color: var(--im-accent);
}

.page-home .home-collect__stepnum {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--im-accent);
  font-family: var(--im-mono);
  font-size: .9rem;
  font-weight: 600;
  color: var(--im-accent);
}

.page-home .home-collect__step h3 {
  margin: 0 0 4px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-collect__step p {
  margin: 0;
  color: var(--im-body);
  font-size: .88rem;
  line-height: 1.72;
}

.page-home .home-collect__media {
  margin: 0;
  border-radius: var(--im-radius);
  overflow: hidden;
  border: 1px solid var(--im-line);
  background: var(--im-panel);
}

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

.page-home .home-collect__caption {
  padding: 12px 18px;
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--im-muted);
  border-top: 1px solid var(--im-line);
}

/* ---------- 03 公告 ---------- */
.page-home .home-notice {
  scroll-margin-top: 96px;
  background: var(--im-ink);
}

.page-home .home-notice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 50px);
  align-items: center;
}

.page-home .home-notice__media {
  margin: 0;
  border-radius: var(--im-radius);
  overflow: hidden;
  border: 1px solid var(--im-line);
  background: var(--im-panel);
}

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

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

.page-home .home-notice__list li {
  padding: 18px;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: var(--im-panel);
}

.page-home .home-notice__list p {
  margin: 10px 0 0;
  color: var(--im-body);
  font-size: .9rem;
  line-height: 1.75;
}

/* ---------- 04 服务与联系 ---------- */
.page-home .home-service {
  background: var(--im-ink);
  padding-bottom: clamp(52px, 8vw, 104px);
}

.page-home .home-service__panel {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  background:
    radial-gradient(circle at 88% 8%, rgba(55, 245, 196, .12), rgba(55, 245, 196, 0) 52%),
    linear-gradient(160deg, var(--im-panel), var(--im-ink));
}

.page-home .home-service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .home-service__card {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: rgba(18, 29, 58, .6);
}

.page-home .home-service__card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-service__card p {
  margin: 0 0 16px;
  color: var(--im-body);
  font-size: .9rem;
  line-height: 1.75;
}

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

.page-home .home-service__contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: .88rem;
  color: var(--im-body);
}

.page-home .home-service__contact span {
  min-width: 42px;
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--im-muted);
}

.page-home .home-service__contact a {
  color: var(--im-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--im-ease);
}

.page-home .home-service__contact a:hover,
.page-home .home-service__contact a:focus-visible {
  border-bottom-color: var(--im-accent);
}

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

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

@media (min-width: 860px) {
  .page-home .home-section__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: clamp(20px, 4vw, 46px);
  }

  .page-home .home-roster__body {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
  }

  .page-home .home-roster__media img {
    max-height: none;
    height: 180px;
  }

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

  .page-home .home-notice__grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 920px) {
  .page-home .home-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero__media {
    transform: none;
  }

  .page-home .home-hero__entries a,
  .page-home .home-focus__card,
  .page-home .home-focus__link,
  .page-home .home-collect__step,
  .page-home .home-service__contact a {
    transition: none;
  }
}


<main id="main-content" class="page-home">
  <section class="home-hero" aria-labelledby="home-hero-title">
    <div class="home-hero__shape" aria-hidden="true"></div>
    <div class="home-hero__blob" aria-hidden="true"></div>
    <div class="im-container home-hero__grid">
      <div class="home-hero__copy">
        <p class="im-kicker">赛事资讯 · 选手数据 · 阵容观察</p>
        <h1 class="home-hero__title" id="home-hero-title">把自己死守的战队<br><span class="home-hero__accent">看进每一个细节</span></h1>
        <p class="home-hero__lead">IM 品牌站陪你把一整个赛季跟到底：赛前翻阵容与选手状态，赛后读案例复盘，换了手机再登录，收藏还在原处。无论是长期蹲一支固定队伍，还是想为品牌做一期赛事专题，都能在这里找到顺手的入口。</p>
        <div class="home-hero__actions">
          <a class="im-btn im-btn--solid" href="/updates/">进入资讯中心</a>
          <a class="im-btn im-btn--ghost" href="#notice">看第9期服务公告</a>
        </div>
      </div>
      <figure class="home-hero__media">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="暗夜蓝背景中由霓虹青数据线与节点组成的赛事信号网络">
        <figcaption class="home-hero__caption">赛事雷达 · 选手数据 · 阵容脉络</figcaption>
      </figure>
    </div>
    <ul class="im-container home-hero__entries">
      <li>
        <a href="/updates/">
          <span class="home-hero__num">01</span>
          <span class="home-hero__label">赛事资讯</span>
          <span class="home-hero__desc">动态与复盘</span>
        </a>
      </li>
      <li>
        <a href="/offerings/">
          <span class="home-hero__num">02</span>
          <span class="home-hero__label">阵容与功能</span>
          <span class="home-hero__desc">长条与收藏</span>
        </a>
      </li>
      <li>
        <a href="/answers/">
          <span class="home-hero__num">03</span>
          <span class="home-hero__label">答疑与公告</span>
          <span class="home-hero__desc">登录与同步</span>
        </a>
      </li>
      <li>
        <a href="/cooperation/">
          <span class="home-hero__num">04</span>
          <span class="home-hero__label">合作联系</span>
          <span class="home-hero__desc">专题与定制</span>
        </a>
      </li>
    </ul>
  </section>

  <section class="home-roster" aria-labelledby="home-roster-title">
    <div class="im-container">
      <div class="home-roster__head">
        <h2 class="home-roster__title" id="home-roster-title">固定战队一览</h2>
        <p class="home-roster__note">28 支固定战队的赛季阵容排成一条长带，左右滑动就能对照。看到熟悉的队伍，直接点进案例合集翻它整个赛季的观赛记录。</p>
      </div>
      <div class="home-roster__body">
        <figure class="home-roster__media">
          <img src="{zhanqunpic:h:360w:1600}" width="1600" height="360" loading="lazy" decoding="async" alt="多条横向信息卡与战队色块抽象排列成的阵容资料带">
        </figure>
        <div class="home-roster__rail" tabindex="0" role="group" aria-label="固定战队阵容横向列表，可使用左右方向键浏览">
          <article class="home-roster__card">
            <span class="home-roster__id">NO.01</span>
            <h3 class="home-roster__name">固定战队 01</h3>
            <p class="home-roster__meta">东部赛区 · 首发 5 人 · 轮换 2 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.04</span>
            <h3 class="home-roster__name">固定战队 04</h3>
            <p class="home-roster__meta">东部赛区 · 首发 5 人 · 轮换 1 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.07</span>
            <h3 class="home-roster__name">固定战队 07</h3>
            <p class="home-roster__meta">南部赛区 · 首发 5 人 · 轮换 3 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.11</span>
            <h3 class="home-roster__name">固定战队 11</h3>
            <p class="home-roster__meta">北部赛区 · 首发 5 人 · 轮换 2 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.15</span>
            <h3 class="home-roster__name">固定战队 15</h3>
            <p class="home-roster__meta">西部赛区 · 首发 5 人 · 轮换 2 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.19</span>
            <h3 class="home-roster__name">固定战队 19</h3>
            <p class="home-roster__meta">东部赛区 · 首发 5 人 · 轮换 1 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.23</span>
            <h3 class="home-roster__name">固定战队 23</h3>
            <p class="home-roster__meta">南部赛区 · 首发 5 人 · 轮换 2 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
          <article class="home-roster__card">
            <span class="home-roster__id">NO.28</span>
            <h3 class="home-roster__name">固定战队 28</h3>
            <p class="home-roster__meta">北部赛区 · 首发 5 人 · 轮换 3 人</p>
            <span class="im-badge">赛季阵容观察</span>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="home-section home-focus" aria-labelledby="home-focus-title">
    <div class="im-container">
      <header class="home-section__head">
        <span class="im-index" aria-hidden="true">01</span>
        <div class="home-section__intro">
          <p class="im-kicker">本周值得看</p>
          <h2 id="home-focus-title">现在打开就能读的几篇</h2>
          <p>赛事节奏、选手状态和阵容调整往往连着发生，我们把最近更新里最值得先看的内容挑了出来，按你关心的方向点一下就能筛。</p>
        </div>
      </header>

      <div class="home-focus__filters" role="group" aria-label="按内容方向筛选">
        <button type="button" class="im-chip" aria-pressed="true" data-filter="all">全部</button>
        <button type="button" class="im-chip" aria-pressed="false" data-filter="match">赛事动态</button>
        <button type="button" class="im-chip" aria-pressed="false" data-filter="player">选手数据</button>
        <button type="button" class="im-chip" aria-pressed="false" data-filter="lineup">阵容观察</button>
        <button type="button" class="im-chip" aria-pressed="false" data-filter="review">案例复盘</button>
      </div>

      <div class="home-focus__grid">
        <article class="home-focus__card" data-reveal>
          <span class="im-badge">赛事动态</span>
          <h3>本周三组对话，赛程一出就知道看点在哪</h3>
          <p>强弱错位的对阵最容易出故事：一方在推节奏，另一方在守资源。我们把这几场的观察角度先列出来，方便你带着问题去看直播。</p>
          <a class="home-focus__link" href="/updates/">去资讯中心读</a>
        </article>
        <article class="home-focus__card" data-reveal>
          <span class="im-badge">选手数据</span>
          <h3>分均伤害抬升背后，是打法还是角色变了</h3>
          <p>同一名选手在不同阶段的输出曲线会明显分叉。对照常用角色和参团率一起看，才分得清是个人手感回暖，还是队伍把资源让了过来。</p>
          <a class="home-focus__link" href="/updates/">查看数据档案</a>
        </article>
        <article class="home-focus__card" data-reveal>
          <span class="im-badge">阵容观察</span>
          <h3>固定战队在中段引入轮换位，图的是什么</h3>
          <p>轮换不是简单换人，而是把一套打法拆成两条线。我们按赛季阶段拉了这几支队伍的阵容变化，看看调整之后谁的上场时间被重新分配。</p>
          <a class="home-focus__link" href="/offerings/">看阵容长条</a>
        </article>
        <article class="home-focus__card" data-reveal>
          <span class="im-badge">案例复盘</span>
          <h3>落后经济还能翻，视野与资源的取舍怎么排</h3>
          <p>翻盘局最值得反复看的是决策顺序。我们把关键节点的视野布置和资源交换拆开，还原当时为什么敢接这一波。</p>
          <a class="home-focus__link" href="/offerings/">翻案例合集</a>
        </article>
        <article class="home-focus__card" data-reveal>
          <span class="im-badge">选手数据</span>
          <h3>参团率和常用角色，存在稳定的对应关系吗</h3>
          <p>把本赛季的出场次数、胜率与常用角色放在一起看，会发现有些位置天然更依赖团战，有些位置则更看重单点突破。</p>
          <a class="home-focus__link" href="/updates/">查看阶段趋势</a>
        </article>
        <article class="home-focus__card" data-reveal>
          <span class="im-badge">案例复盘</span>
          <h3>开团时机差两秒，一场比赛就走向了另一边</h3>
          <p>同样的阵容，同样的经济差，差的是谁先动手。这篇复盘沿着时间轴把两波关键团战的判断依据标了出来。</p>
          <a class="home-focus__link" href="/updates/">读完整复盘</a>
        </article>
      </div>
    </div>
  </section>

  <section class="home-section home-collect" aria-labelledby="home-collect-title">
    <div class="im-container home-collect__grid">
      <div class="home-collect__copy">
        <header class="home-section__head home-section__head--stack">
          <span class="im-index im-index--accent" aria-hidden="true">02</span>
          <div class="home-section__intro">
            <p class="im-kicker">案例合集路径</p>
            <h2 id="home-collect-title">收藏过的复盘，换台设备也能接着看</h2>
            <p>案例合集收录了 480 个观赛与阵容研究案例，按赛季、战队和主题三类标签管理。登录之后挑自己喜欢的存下来，下次打开就是上次停下的地方。</p>
          </div>
        </header>
        <ol class="home-collect__steps">
          <li class="home-collect__step">
            <span class="home-collect__stepnum">1</span>
            <div>
              <h3>登录后建立自己的收藏夹</h3>
              <p>找到想留住的案例，点一下收藏就会归到账号名下，之后在合集里按标签翻回来很快。</p>
            </div>
          </li>
          <li class="home-collect__step">
            <span class="home-collect__stepnum">2</span>
            <div>
              <h3>换设备时重新登录一次</h3>
              <p>从电脑换到手机，或者反过来，用同一个账号登录，收藏内容会跟着账号走。</p>
            </div>
          </li>
          <li class="home-collect__step">
            <span class="home-collect__stepnum">3</span>
            <div>
              <h3>继续看没读完的那部分</h3>
              <p>收藏与账号绑定，不用重新找入口，也不用担心清单散落在不同设备里。</p>
            </div>
          </li>
        </ol>
        <a class="im-btn im-btn--ghost im-btn--sm" href="/answers/">遇到问题去答疑中心</a>
      </div>
      <figure class="home-collect__media">
        <img src="{zhanqunpic:h:700w:900}" width="900" height="700" loading="lazy" decoding="async" alt="手机与桌面屏幕以细线连接、收藏星标在设备之间同步的抽象插画">
        <figcaption class="home-collect__caption">收藏随账号走，设备只是窗口</figcaption>
      </figure>
    </div>
  </section>

  <section class="home-section home-notice" id="notice" aria-labelledby="home-notice-title">
    <div class="im-container home-notice__grid">
      <figure class="home-notice__media">
        <img src="{zhanqunpic:h:800w:800}" width="800" height="800" loading="lazy" decoding="async" alt="霓虹青描边的公告塔与期号圆环，背景为深蓝几何形体">
      </figure>
      <div class="home-notice__copy">
        <header class="home-section__head home-section__head--stack">
          <span class="im-index" aria-hidden="true">03</span>
          <div class="home-section__intro">
            <p class="im-kicker">公告与新手提示</p>
            <h2 id="home-notice-title">移动端服务公告 · 第9期</h2>
            <p>顶部栏公告区一直挂着当期要点，手机上第一次来的人，从这几条开始最省事。</p>
          </div>
        </header>
        <ul class="home-notice__list">
          <li>
            <span class="im-badge im-badge--rose">新用户指引</span>
            <p>第一次用手机打开，先在顶部栏认一下资讯、阵容、案例合集三个入口，之后找任何内容都不必绕路。</p>
          </li>
          <li>
            <span class="im-badge im-badge--rose">登录说明</span>
            <p>收藏功能需要登录后使用。换设备时重新登录一次，账号里的合集就会同步出现。</p>
          </li>
          <li>
            <span class="im-badge im-badge--rose">功能变更</span>
            <p>移动端首屏加载控制在 2 秒以内，筛选栏和长条卡的滑动手感这一期做了调整，触屏操作更跟手。</p>
          </li>
        </ul>
        <a class="im-btn im-btn--ghost im-btn--sm" href="/answers/">看公告详细说明</a>
      </div>
    </div>
  </section>

  <section class="home-section home-service" aria-labelledby="home-service-title">
    <div class="im-container">
      <div class="home-service__panel">
        <header class="home-section__head home-section__head--stack">
          <span class="im-index im-index--accent" aria-hidden="true">04</span>
          <div class="home-section__intro">
            <p class="im-kicker">服务与联系</p>
            <h2 id="home-service-title">想合作就聊合作，想问问题就问问题</h2>
            <p>赛事专题共建、固定战队阵容页定制、案例合集策划、数据可视化模块设计，这四类需求都接；日常使用里的疑问，也可以直接找客服。</p>
          </div>
        </header>
        <div class="home-service__grid">
          <div class="home-service__card">
            <h3>内容与品牌合作</h3>
            <p>如果你们需要一场赛事的专题页面、一套贴合战队风格的阵容展示，或者把数据做成观众看得懂的可视化模块，可以把想法和节奏要求发过来，我们按赛季节点排期。</p>
            <a class="im-btn im-btn--solid im-btn--sm" href="/cooperation/">说明合作需求</a>
          </div>
          <div class="home-service__card">
            <h3>客服咨询</h3>
            <p>登录、收藏同步、公告理解上有卡住的地方，用下面任一方式联系我们，工作日 10:00–18:00 有人接待。</p>
            <ul class="home-service__contact">
              <li><span>邮箱</span><a href="mailto:support@im-ascentcall.com.cn">support@im-ascentcall.com.cn</a></li>
              <li><span>电话</span><a href="tel:40086112972">400-8611-2972</a></li>
              <li><span>时段</span>工作日 10:00–18:00</li>
            </ul>
            <a class="im-btn im-btn--ghost im-btn--sm" href="/answers/">先去答疑中心</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-rail-card: 228px;
  --home-shadow: 0 32px 80px -48px rgba(55, 245, 196, .45);
}

/* ---------- 首屏 ---------- */
.page-home .home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 7vw, 92px) 0 clamp(34px, 6vw, 62px);
  background: linear-gradient(166deg, var(--im-panel) 0%, var(--im-ink) 62%);
}

.page-home .home-hero__shape {
  position: absolute;
  z-index: 0;
  top: -20%;
  right: -24%;
  width: 82%;
  height: 145%;
  background: linear-gradient(152deg, var(--im-lift) 4%, rgba(18, 29, 58, 0) 74%);
  clip-path: polygon(28% 0, 100% 7%, 100% 100%, 0 82%);
  pointer-events: none;
}

.page-home .home-hero__blob {
  position: absolute;
  z-index: 0;
  left: -10%;
  bottom: 4%;
  width: clamp(170px, 30vw, 360px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 42% 42%, rgba(55, 245, 196, .2), rgba(55, 245, 196, 0) 68%);
  border-radius: 42% 58% 63% 37% / 46% 38% 62% 54%;
  pointer-events: none;
}

.page-home .home-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 54px);
  align-items: center;
}

.page-home .home-hero__title {
  margin: .5em 0 .55em;
  font-family: var(--im-display);
  font-size: clamp(2.35rem, 6.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--im-white);
}

.page-home .home-hero__accent {
  display: inline-block;
  position: relative;
  color: var(--im-accent);
  padding-bottom: .08em;
}

.page-home .home-hero__accent::after {
  content: "";
  position: absolute;
  left: 2%;
  right: -3%;
  bottom: 0;
  height: .12em;
  background: linear-gradient(90deg, var(--im-accent), var(--im-rose));
  clip-path: polygon(0 44%, 100% 0, 98% 100%, 2% 78%);
}

.page-home .home-hero__lead {
  max-width: 46ch;
  margin: 0;
  color: var(--im-body);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.78;
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
}

.page-home .home-hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--im-radius);
  border: 1px solid var(--im-line);
  background: var(--im-panel);
  overflow: hidden;
  transform: rotate(-1.6deg);
  box-shadow: var(--home-shadow);
}

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

.page-home .home-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--im-accent-soft);
  background: linear-gradient(0deg, rgba(6, 10, 22, .92), rgba(6, 10, 22, 0));
}

.page-home .home-hero__entries {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(30px, 5vw, 54px) auto 0;
  padding: 0;
  list-style: none;
}

.page-home .home-hero__entries a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: rgba(18, 29, 58, .7);
  color: var(--im-white);
  text-decoration: none;
  transition: border-color .25s var(--im-ease), transform .25s var(--im-ease), background .25s var(--im-ease);
}

.page-home .home-hero__entries a:hover,
.page-home .home-hero__entries a:focus-visible {
  border-color: var(--im-accent);
  background: var(--im-lift);
  transform: translateY(-2px);
}

.page-home .home-hero__num {
  font-family: var(--im-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--im-accent);
  letter-spacing: .08em;
}

.page-home .home-hero__label {
  font-size: 1rem;
  font-weight: 700;
}

.page-home .home-hero__desc {
  font-size: .8rem;
  color: var(--im-muted);
}

/* ---------- 固定战队长条 ---------- */
.page-home .home-roster {
  padding: clamp(30px, 5vw, 54px) 0 clamp(34px, 5vw, 56px);
  background: var(--im-panel);
  border-top: 1px solid var(--im-line);
  border-bottom: 1px solid var(--im-line);
}

.page-home .home-roster__head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-home .home-roster__title {
  margin: 0;
  font-family: var(--im-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--im-white);
}

.page-home .home-roster__note {
  margin: 0;
  max-width: 62ch;
  color: var(--im-body);
  font-size: .95rem;
  line-height: 1.72;
}

.page-home .home-roster__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}

.page-home .home-roster__media {
  margin: 0;
  border-radius: var(--im-radius-sm);
  border: 1px solid var(--im-line);
  overflow: hidden;
  background: var(--im-ink);
}

.page-home .home-roster__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 190px;
  object-fit: cover;
}

.page-home .home-roster__rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--im-accent) var(--im-ink);
}

.page-home .home-roster__rail:focus-visible {
  outline: 2px solid var(--im-accent-soft);
  outline-offset: 4px;
  border-radius: var(--im-radius-sm);
}

.page-home .home-roster__rail::-webkit-scrollbar {
  height: 6px;
}

.page-home .home-roster__rail::-webkit-scrollbar-track {
  background: var(--im-ink);
  border-radius: 999px;
}

.page-home .home-roster__rail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--im-accent), var(--im-rose));
  border-radius: 999px;
}

.page-home .home-roster__card {
  flex: 0 0 var(--home-rail-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: var(--im-lift);
  transition: border-color .25s var(--im-ease);
}

.page-home .home-roster__card:hover {
  border-color: var(--im-accent);
}

.page-home .home-roster__id {
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--im-accent);
}

.page-home .home-roster__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-roster__meta {
  margin: 0 0 4px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--im-muted);
}

.page-home .home-roster__card .im-badge {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- 章节通用 ---------- */
.page-home .home-section {
  padding: clamp(46px, 8vw, 96px) 0;
}

.page-home .home-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-home .home-section__head--stack {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-home .home-section__intro h2 {
  margin: .28em 0 .5em;
  font-family: var(--im-display);
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--im-white);
}

.page-home .home-section__intro p {
  margin: 0;
  max-width: 62ch;
  color: var(--im-body);
  font-size: .98rem;
  line-height: 1.78;
}

/* ---------- 01 本周值得看 ---------- */
.page-home .home-focus {
  background: var(--im-ink);
}

.page-home .home-focus__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-home .home-focus__filters .im-chip[aria-pressed="true"] {
  background: var(--im-accent);
  color: var(--im-ink);
  border-color: var(--im-accent);
}

.page-home .home-focus__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .home-focus__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  background: linear-gradient(158deg, var(--im-panel), var(--im-lift));
  transition: border-color .3s var(--im-ease), transform .3s var(--im-ease);
}

.page-home .home-focus__card:hover {
  border-color: var(--im-accent);
  transform: translateY(-3px);
}

.page-home .home-focus__card .im-badge {
  align-self: flex-start;
}

.page-home .home-focus__card h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-focus__card p {
  margin: 0;
  color: var(--im-body);
  font-size: .9rem;
  line-height: 1.75;
}

.page-home .home-focus__link {
  margin-top: auto;
  padding-top: 6px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--im-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .25s var(--im-ease);
}

.page-home .home-focus__link:hover,
.page-home .home-focus__link:focus-visible {
  border-bottom-color: var(--im-accent);
}

/* ---------- 02 案例合集路径 ---------- */
.page-home .home-collect {
  background: linear-gradient(180deg, var(--im-ink), var(--im-panel) 55%, var(--im-ink));
}

.page-home .home-collect__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

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

.page-home .home-collect__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border-left: 2px solid var(--im-line);
  background: rgba(18, 29, 58, .55);
  border-radius: 0 var(--im-radius-sm) var(--im-radius-sm) 0;
  transition: border-color .3s var(--im-ease);
}

.page-home .home-collect__step:hover {
  border-left-color: var(--im-accent);
}

.page-home .home-collect__stepnum {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--im-accent);
  font-family: var(--im-mono);
  font-size: .9rem;
  font-weight: 600;
  color: var(--im-accent);
}

.page-home .home-collect__step h3 {
  margin: 0 0 4px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-collect__step p {
  margin: 0;
  color: var(--im-body);
  font-size: .88rem;
  line-height: 1.72;
}

.page-home .home-collect__media {
  margin: 0;
  border-radius: var(--im-radius);
  overflow: hidden;
  border: 1px solid var(--im-line);
  background: var(--im-panel);
}

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

.page-home .home-collect__caption {
  padding: 12px 18px;
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--im-muted);
  border-top: 1px solid var(--im-line);
}

/* ---------- 03 公告 ---------- */
.page-home .home-notice {
  scroll-margin-top: 96px;
  background: var(--im-ink);
}

.page-home .home-notice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 50px);
  align-items: center;
}

.page-home .home-notice__media {
  margin: 0;
  border-radius: var(--im-radius);
  overflow: hidden;
  border: 1px solid var(--im-line);
  background: var(--im-panel);
}

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

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

.page-home .home-notice__list li {
  padding: 18px;
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: var(--im-panel);
}

.page-home .home-notice__list p {
  margin: 10px 0 0;
  color: var(--im-body);
  font-size: .9rem;
  line-height: 1.75;
}

/* ---------- 04 服务与联系 ---------- */
.page-home .home-service {
  background: var(--im-ink);
  padding-bottom: clamp(52px, 8vw, 104px);
}

.page-home .home-service__panel {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  background:
    radial-gradient(circle at 88% 8%, rgba(55, 245, 196, .12), rgba(55, 245, 196, 0) 52%),
    linear-gradient(160deg, var(--im-panel), var(--im-ink));
}

.page-home .home-service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .home-service__card {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: rgba(18, 29, 58, .6);
}

.page-home .home-service__card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--im-white);
}

.page-home .home-service__card p {
  margin: 0 0 16px;
  color: var(--im-body);
  font-size: .9rem;
  line-height: 1.75;
}

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

.page-home .home-service__contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: .88rem;
  color: var(--im-body);
}

.page-home .home-service__contact span {
  min-width: 42px;
  font-family: var(--im-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--im-muted);
}

.page-home .home-service__contact a {
  color: var(--im-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--im-ease);
}

.page-home .home-service__contact a:hover,
.page-home .home-service__contact a:focus-visible {
  border-bottom-color: var(--im-accent);
}

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

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

@media (min-width: 860px) {
  .page-home .home-section__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: clamp(20px, 4vw, 46px);
  }

  .page-home .home-roster__body {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: center;
  }

  .page-home .home-roster__media img {
    max-height: none;
    height: 180px;
  }

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

  .page-home .home-notice__grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 920px) {
  .page-home .home-hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero__media {
    transform: none;
  }

  .page-home .home-hero__entries a,
  .page-home .home-focus__card,
  .page-home .home-focus__link,
  .page-home .home-collect__step,
  .page-home .home-service__contact a {
    transition: none;
  }
}