.page-about{
  --about-line:rgba(159,177,191,.18);
  --about-soft:rgba(246,250,245,.76);
  background:var(--ink-950);
  color:var(--paper-50);
  font-family:var(--font-sans);
  padding-bottom:clamp(48px,8vw,96px);
  overflow-x:hidden;
}

.page-about *{
  box-sizing:border-box;
}

.page-about h1,
.page-about h2,
.page-about h3{
  margin:0;
  font-weight:800;
  letter-spacing:-.015em;
}

.page-about p{
  margin:0;
}

.page-about a{
  color:inherit;
}

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

/* 面包屑 */
.page-about .breadcrumbs{
  padding-block:18px 0;
}

.page-about .breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--steel-400);
}

.page-about .breadcrumbs__list li+li::before{
  content:"/";
  margin-right:8px;
  color:var(--ink-600);
}

.page-about .breadcrumbs__list a{
  text-decoration:none;
  color:var(--steel-400);
  transition:color .25s var(--ease);
}

.page-about .breadcrumbs__list a:hover{
  color:var(--cyan-400);
}

.page-about .breadcrumbs__list [aria-current]{
  color:var(--cyan-400);
}

/* 首屏 */
.about-hero{
  position:relative;
  display:grid;
  gap:clamp(24px,4vw,40px);
  padding-block:clamp(26px,5vw,52px) clamp(32px,5vw,56px);
  border-bottom:1px solid var(--about-line);
}

.about-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-70px;
  right:-30%;
  width:min(560px,92vw);
  height:360px;
  background:linear-gradient(135deg,rgba(25,245,208,.2),rgba(67,86,214,.14) 48%,rgba(4,18,31,0) 74%);
  border-radius:36px;
  transform:rotate(-9deg);
  pointer-events:none;
}

.about-hero__lead,
.about-facts{
  position:relative;
  z-index:1;
}

.page-about .eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan-400);
  margin:0;
}

.about-hero h1{
  margin-top:14px;
  font-size:clamp(1.95rem,6.2vw,3.7rem);
  line-height:1.05;
  transform:skewY(-1deg);
  transform-origin:left top;
  color:var(--paper-50);
}

.page-about .lede{
  margin-top:18px;
  max-width:46ch;
  font-size:clamp(.95rem,2.4vw,1.05rem);
  line-height:1.78;
  color:var(--about-soft);
}

.about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* 速览面板 */
.about-facts{
  border:1px solid var(--line-cyan);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--ink-800),var(--ink-700));
  box-shadow:var(--shadow-island);
  padding:clamp(18px,3vw,26px);
}

.about-facts__title{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan-400);
}

.about-facts__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 12px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-facts__list li{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:12px;
  border-top:1px solid var(--about-line);
}

.about-facts__num{
  font-size:clamp(1.45rem,4.4vw,1.95rem);
  font-weight:700;
  line-height:1;
  color:var(--gold-400);
}

.about-facts__label{
  font-size:12.5px;
  line-height:1.5;
  color:var(--about-soft);
}

/* 章节骨架 */
.about-node{
  padding-block:clamp(38px,7vw,76px);
}

.about-node + .about-node{
  border-top:1px solid var(--about-line);
}

.about-node__head{
  max-width:64ch;
}

.about-node h2{
  margin-top:12px;
  font-size:clamp(1.42rem,4.4vw,2.35rem);
  line-height:1.16;
  color:var(--paper-50);
}

.about-node__head p:not(.eyebrow){
  margin-top:14px;
  font-size:clamp(.92rem,2.3vw,1rem);
  line-height:1.78;
  color:var(--about-soft);
}

/* 图片容器 */
.page-about .media-frame{
  margin:0;
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:linear-gradient(150deg,var(--ink-800),var(--ink-950));
  overflow:hidden;
}

.page-about .media-frame img{
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-about .media-frame__caption{
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--steel-400);
  border-top:1px solid var(--about-line);
}

.about-timeline-figure{
  margin-top:clamp(24px,4vw,36px);
}

/* 时间线 */
.timeline{
  display:grid;
  gap:16px;
  margin:clamp(24px,4vw,36px) 0 0;
  padding:0;
  list-style:none;
}

.timeline__item{
  padding:20px clamp(18px,3vw,28px);
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:var(--ink-800);
  box-shadow:8px 8px 0 rgba(25,245,208,.07);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}

.timeline__item:nth-child(even){
  background:var(--ink-700);
  box-shadow:8px 8px 0 rgba(242,184,75,.08);
}

.timeline__item:hover{
  transform:translateY(-3px);
  border-color:var(--line-cyan);
}

.timeline__year{
  display:inline-block;
  margin-bottom:10px;
  padding:4px 11px;
  border:1px solid var(--line-cyan);
  border-radius:var(--radius-pill);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--cyan-400);
}

.timeline__item h3{
  font-size:clamp(1.02rem,2.8vw,1.18rem);
  line-height:1.35;
  color:var(--paper-50);
}

.timeline__item p{
  margin-top:9px;
  font-size:14px;
  line-height:1.75;
  color:var(--about-soft);
}

/* 团队 */
.team-grid{
  display:grid;
  gap:clamp(24px,4vw,44px);
}

.team-copy h2{
  margin-top:12px;
  font-size:clamp(1.42rem,4.4vw,2.3rem);
  line-height:1.16;
}

.team-copy p{
  margin-top:14px;
  font-size:clamp(.92rem,2.3vw,1rem);
  line-height:1.78;
  color:var(--about-soft);
}

.team-bars{
  display:grid;
  gap:16px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

.team-bars li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  align-items:baseline;
}

.team-bars__label{
  font-size:14px;
  color:rgba(246,250,245,.85);
}

.team-bars__num{
  font-size:15px;
  font-weight:700;
  color:var(--cyan-400);
}

.team-bars__bar{
  position:relative;
  grid-column:1 / -1;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--ink-600);
  overflow:hidden;
}

.team-bars__bar::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan-600),var(--cyan-400));
}

.team-bars li:nth-child(1) .team-bars__bar::after{ width:36.7%; }
.team-bars li:nth-child(2) .team-bars__bar::after{ width:30%; }
.team-bars li:nth-child(3) .team-bars__bar::after{ width:33.3%; }

.team-figure{
  align-self:start;
}

/* 服务范围与筛选 */
.about-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:clamp(20px,3vw,28px) 0 clamp(18px,3vw,24px);
}

.about-filter__btn{
  padding:8px 16px;
  border:1px solid var(--about-line);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--steel-400);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}

.about-filter__btn:hover{
  border-color:var(--line-cyan);
  color:var(--cyan-400);
}

.about-filter__btn.is-active{
  background:var(--cyan-400);
  border-color:var(--cyan-400);
  color:var(--ink-950);
  font-weight:700;
}

.about-cards{
  display:grid;
  gap:16px;
}

.about-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px,3vw,24px);
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:rgba(10,34,56,.72);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}

.about-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-cyan);
}

.about-card__tag{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan-400);
}

.about-card h3{
  font-size:clamp(1rem,2.7vw,1.12rem);
  line-height:1.35;
  color:var(--paper-50);
}

.about-card p{
  font-size:14px;
  line-height:1.75;
  color:var(--about-soft);
}

.about-card__link{
  margin-top:auto;
  padding-bottom:2px;
  align-self:flex-start;
  font-size:13.5px;
  text-decoration:none;
  color:var(--cyan-400);
  border-bottom:1px solid var(--line-cyan);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}

.about-card__link:hover{
  color:var(--gold-400);
  border-bottom-color:var(--line-gold);
}

/* 认证 */
.cert-grid{
  display:grid;
  gap:clamp(24px,4vw,44px);
}

.cert-copy h2{
  margin-top:12px;
  font-size:clamp(1.42rem,4.4vw,2.3rem);
  line-height:1.16;
}

.cert-copy > p{
  margin-top:14px;
  font-size:clamp(.92rem,2.3vw,1rem);
  line-height:1.78;
  color:var(--about-soft);
}

.cert-stack{
  margin-top:24px;
}

.cert-tier{
  margin-bottom:12px;
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:var(--ink-800);
  overflow:hidden;
  transition:border-color .3s var(--ease);
}

.cert-tier[open]{
  border-color:var(--line-cyan);
}

.cert-tier--gold[open]{
  border-color:var(--line-gold);
}

.cert-tier summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  list-style:none;
  cursor:pointer;
  font-size:15.5px;
  font-weight:700;
  color:var(--paper-50);
}

.cert-tier summary::-webkit-details-marker{
  display:none;
}

.cert-tier summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--cyan-400);
}

.cert-tier[open] summary::after{
  content:"–";
}

.cert-tier--gold summary::after{
  color:var(--gold-400);
}

.cert-tier__no{
  display:grid;
  place-items:center;
  flex:none;
  width:26px;
  height:26px;
  border-radius:6px;
  background:var(--cyan-400);
  color:var(--ink-950);
  font-size:12px;
  font-weight:700;
}

.cert-tier--gold .cert-tier__no{
  background:var(--gold-400);
}

.cert-tier__body{
  padding:0 18px 18px;
  font-size:13.5px;
  line-height:1.78;
  color:var(--about-soft);
}

.cert-perks{
  display:grid;
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.cert-perks li{
  display:flex;
  gap:8px;
  font-size:13.5px;
  line-height:1.7;
}

.cert-perks li::before{
  content:"▸";
  flex:none;
  color:var(--gold-400);
}

.cert-figure{
  align-self:start;
}

/* 合作生态 */
.partner-grid{
  display:grid;
  gap:18px;
  margin-top:clamp(24px,4vw,36px);
}

.about-paper{
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--ink-950);
  border-radius:var(--radius-md);
  background:var(--paper-50);
  color:var(--ink-950);
  box-shadow:10px 10px 0 rgba(25,245,208,.16);
}

.about-paper--plain{
  background:var(--paper-50);
  box-shadow:10px 10px 0 rgba(242,184,75,.18);
}

.about-paper__title{
  margin:0 0 16px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan-600);
}

.about-paper__stats{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-paper__stats li{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:12px;
  border-top:1px solid rgba(4,18,31,.14);
  font-size:13.5px;
  line-height:1.6;
  color:rgba(4,18,31,.76);
}

.about-paper__num{
  font-size:clamp(1.3rem,4vw,1.7rem);
  font-weight:700;
  line-height:1;
  color:var(--ink-950);
}

.about-paper p{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.78;
  color:rgba(4,18,31,.78);
}

.about-paper p:first-of-type{
  margin-top:0;
}

.about-paper a{
  color:var(--ink-950);
  text-decoration:none;
  border-bottom:1px solid var(--cyan-600);
}

.about-paper a:hover{
  color:var(--cyan-600);
}

/* 收尾行动 */
.about-cta{
  display:grid;
  gap:20px;
  margin-top:clamp(36px,6vw,64px);
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--line-cyan);
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--ink-800),var(--ink-600));
  box-shadow:var(--shadow-paper);
}

.about-cta h2{
  font-size:clamp(1.3rem,3.8vw,1.9rem);
  line-height:1.2;
  color:var(--paper-50);
}

.about-cta p{
  margin-top:12px;
  max-width:50ch;
  font-size:14px;
  line-height:1.78;
  color:var(--about-soft);
}

.about-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* 响应式 */
@media (min-width:760px){
  .about-cards{
    grid-template-columns:repeat(2,1fr);
  }

  .partner-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-cta{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (min-width:900px){
  .about-hero{
    grid-template-columns:1.3fr .7fr;
    align-items:start;
  }

  .team-grid{
    grid-template-columns:1.05fr .95fr;
    align-items:start;
  }

  .cert-grid{
    grid-template-columns:.95fr 1.05fr;
    align-items:start;
  }

  .timeline__item:nth-child(odd){
    margin-right:clamp(24px,7vw,88px);
  }

  .timeline__item:nth-child(even){
    margin-left:clamp(24px,7vw,88px);
  }
}

@media (min-width:1024px){
  .about-cards{
    grid-template-columns:repeat(3,1fr);
  }

  .about-facts__num{
    font-size:2.1rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about *,
  .page-about *::after{
    transition:none !important;
    animation:none !important;
  }

  .about-hero h1{
    transform:none;
  }
}

<main id="main-content" class="page-about">
  <div class="wrap">

    <nav class="breadcrumbs" aria-label="面包屑">
      <ol class="breadcrumbs__list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">品牌档案</li>
      </ol>
    </nav>

    <section class="about-hero" aria-labelledby="about-title">
      <div class="about-hero__lead">
        <p class="eyebrow">品牌档案 · 自 2016 年持续运营</p>
        <h1 id="about-title">易倍EMC：把赛事复盘做成一件长期可查的事</h1>
        <p class="lede">2016 年站点刚开的时候，能给到的只有赛事结果和几张基础统计表。九年下来，这里长成了一套围绕赛后复盘的服务：每周四十场以上的复盘卡片、按标签收拢的会员中心、可以回溯的历史版本资料。第一次来的人最常问“你们到底能帮我做什么”，下面按历程、团队、服务、认证和合作依次讲开——首次访问易倍网页、想先做一次服务范围查看的话，从这里开始最省时间。</p>
        <div class="about-hero__actions">
          <a class="btn btn--primary" href="/projects/">看赛事数据服务</a>
          <a class="btn btn--ghost" href="/connect/">找客服聊聊</a>
        </div>
      </div>

      <aside class="about-facts" aria-label="品牌速览">
        <p class="about-facts__title mono">品牌速览</p>
        <ul class="about-facts__list">
          <li>
            <span class="about-facts__num mono">2016</span>
            <span class="about-facts__label">中文站上线年份</span>
          </li>
          <li>
            <span class="about-facts__num mono">60</span>
            <span class="about-facts__label">数据服务团队人数</span>
          </li>
          <li>
            <span class="about-facts__num mono">18</span>
            <span class="about-facts__label">家赛事数据与内容合作机构</span>
          </li>
          <li>
            <span class="about-facts__num mono">5</span>
            <span class="about-facts__label">个历史版本资料库</span>
          </li>
        </ul>
      </aside>
    </section>

    <section class="about-node about-node--wide" id="timeline" aria-labelledby="timeline-title">
      <header class="about-node__head">
        <p class="eyebrow">发展历程</p>
        <h2 id="timeline-title">从一张空表，到每周四十场复盘</h2>
        <p>每一次改版背后的判断都很朴素：上一版哪里让老用户多绕了路，这一版就把它拆掉重排。下面六个节点，是这条线上最主要的几次变化。</p>
      </header>

      <figure class="media-frame media-frame--wide about-timeline-figure">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="易倍EMC从2016年上线到2025年新版首页的品牌发展时间线与关键阶段信息图">
        <figcaption class="media-frame__caption">2016—2025：六个关键阶段构成了今天的复盘数据服务</figcaption>
      </figure>

      <ol class="timeline">
        <li class="timeline__item">
          <span class="timeline__year mono">2016</span>
          <h3>中文站正式上线</h3>
          <p>域名 emc-ebc.com.cn 启用，第一批内容围绕比赛结果与基础统计展开。当时的重点只有一个：让中文用户不用翻外语页面也能看清一场比赛发生了什么。</p>
        </li>
        <li class="timeline__item">
          <span class="timeline__year mono">2018</span>
          <h3>会员中心上线</h3>
          <p>零散的内容第一次被收进个人检索路径。关注同一支队伍、同一种打法的用户，不必每次从头翻，从自己的入口就能接着往下看。</p>
        </li>
        <li class="timeline__item">
          <span class="timeline__year mono">2020</span>
          <h3>赛事分类标签矩阵成型</h3>
          <p>内容按项目、联赛、阶段、战术主题和数据维度重新组织，12 个赛事大类与 68 个分类标签落位。找内容从“翻页”变成“选条件”。</p>
        </li>
        <li class="timeline__item">
          <span class="timeline__year mono">2022</span>
          <h3>数据实验室建立</h3>
          <p>复盘卡片的信息层被拆成可复用的结构：比赛节奏、关键回合、战术板、标签索引各自独立，又能拼在同一个视图里。产能和可读性同时提了一次。</p>
        </li>
        <li class="timeline__item">
          <span class="timeline__year mono">2024</span>
          <h3>品牌认证尊享服务推出</h3>
          <p>面向对外说明合作关系、或需要团队批量使用数据的用户，认证标识和三项尊享权益一并开放，合作关系的表达有了明确落点。</p>
        </li>
        <li class="timeline__item">
          <span class="timeline__year mono">2025</span>
          <h3>新版中文首页发布</h3>
          <p>复盘数据入口、标签检索和版本资料被提到更靠前的位置，从任何一个栏目进来，回到数据内容的路都更短了。</p>
        </li>
      </ol>
    </section>

    <section class="about-node about-node--narrow" id="team" aria-labelledby="team-title">
      <div class="team-grid">
        <div class="team-copy">
          <p class="eyebrow">团队分工</p>
          <h2 id="team-title">六十个人，把一场比赛拆成四层信息</h2>
          <p>一张复盘卡片最后呈现的是四层：比赛节奏、关键回合、战术板和标签索引。写下来的是编辑，画出来的是工程与可视化，交付到你手里的是运营和客服。三拨人围着同一个结构做事，卡片才能稳定地产出。</p>
          <p>数据编辑盯赛事与内容，工程与可视化负责卡片结构、图表渲染和标签系统，客服与运营承接使用问题、会员服务与内容上架。</p>

          <ul class="team-bars">
            <li>
              <span class="team-bars__label">数据编辑</span>
              <span class="team-bars__num mono">22</span>
              <span class="team-bars__bar" aria-hidden="true"></span>
            </li>
            <li>
              <span class="team-bars__label">工程与可视化</span>
              <span class="team-bars__num mono">18</span>
              <span class="team-bars__bar" aria-hidden="true"></span>
            </li>
            <li>
              <span class="team-bars__label">客服与运营</span>
              <span class="team-bars__num mono">20</span>
              <span class="team-bars__bar" aria-hidden="true"></span>
            </li>
          </ul>
        </div>

        <figure class="media-frame media-frame--tall team-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="数据实验室工作台上的屏幕、战术板线条与赛事数据图表局部特写" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">复盘工作台：战术板线条与数据图表同屏对照</figcaption>
        </figure>
      </div>
    </section>

    <section class="about-node about-node--wide" id="services" aria-labelledby="services-title">
      <header class="about-node__head">
        <p class="eyebrow">服务与场景</p>
        <h2 id="services-title">先看你能拿到什么，再决定从哪里进来</h2>
        <p>五个方向对应五类常见处境。按你眼下要解决的事挑一个，点进去就是具体入口。</p>
      </header>

      <div class="about-filter" data-filter-group>
        <button type="button" class="about-filter__btn is-active" data-filter="all">全部</button>
        <button type="button" class="about-filter__btn" data-filter="数据">赛事数据</button>
        <button type="button" class="about-filter__btn" data-filter="检索">内容检索</button>
        <button type="button" class="about-filter__btn" data-filter="服务">账号与服务</button>
      </div>

      <div class="about-cards">
        <article class="about-card" data-filter-item="数据" data-reveal>
          <span class="about-card__tag mono">赛事数据</span>
          <h3>赛后复盘数据</h3>
          <p>比赛节奏、关键回合、战术板、标签索引四层拼成一张完整卡片。赛后想看过程而不只是比分的时候，从这里进去最快。每周更新四十场以上，累计已发布 2,300 篇以上复盘资料。</p>
          <a class="about-card__link" href="/projects/">打开复盘数据入口</a>
        </article>

        <article class="about-card" data-filter-item="检索" data-reveal>
          <span class="about-card__tag mono">内容检索</span>
          <h3>分类标签检索</h3>
          <p>按项目、联赛、阶段、战术主题和数据维度自由组合条件。赛季中反复回看同一支队伍、同一种打法时，常用组合可以存下来，下次一步到位。</p>
          <a class="about-card__link" href="/knowledge/">看标签怎么用</a>
        </article>

        <article class="about-card" data-filter-item="检索" data-reveal>
          <span class="about-card__tag mono">内容检索</span>
          <h3>历史版本资料</h3>
          <p>2019 年以来的界面与栏目资料按批次归档，同一位置在不同阶段的样子可以对照着看。老用户想找回记忆里的入口，或内容合作方想了解栏目演进，都用得上。</p>
          <a class="about-card__link" href="/projects/">查看版本资料</a>
        </article>

        <article class="about-card" data-filter-item="服务" data-reveal>
          <span class="about-card__tag mono">账号与服务</span>
          <h3>问题反馈</h3>
          <p>使用路径、数据内容、版本资料、账号服务四类主题分开提交，工作时段内平均 2 小时响应。遇到入口找不到、内容和预期不一致，走这条线最直接。</p>
          <a class="about-card__link" href="/connect/">提交问题</a>
        </article>

        <article class="about-card" data-filter-item="服务" data-reveal>
          <span class="about-card__tag mono">账号与服务</span>
          <h3>品牌认证尊享服务</h3>
          <p>三层认证对应不同使用深度，最上面一层附带专属标签页、版本资料优先查看与客服快速通道。需要对外说明合作关系，或团队要批量使用数据时，从这里开始谈。</p>
          <a class="about-card__link" href="/connect/">咨询认证</a>
        </article>
      </div>
    </section>

    <section class="about-node about-node--wide about-cert" id="certification" aria-labelledby="cert-title">
      <div class="cert-grid">
        <div class="cert-copy">
          <p class="eyebrow">认证体系</p>
          <h2 id="cert-title">三层认证，按使用深度逐级打开</h2>
          <p>不是所有合作都需要走到最上面一层。先用哪一层，取决于你要把数据用到什么程度。点开每一层，能看到它具体解决什么问题。</p>

          <div class="cert-stack">
            <details class="cert-tier" open>
              <summary>
                <span class="cert-tier__no mono">01</span>
                基础品牌认证
              </summary>
              <div class="cert-tier__body">
                <p>适合刚刚建立联系、需要对外说明合作关系的团队。完成主体与联系信息登记后获得认证标识，可以在自己的渠道里标注与易倍EMC的服务关系，对方一眼就能看懂你们之间是什么关系。</p>
              </div>
            </details>

            <details class="cert-tier">
              <summary>
                <span class="cert-tier__no mono">02</span>
                赛事数据服务认证
              </summary>
              <div class="cert-tier__body">
                <p>面向需要按主题持续调用复盘数据的团队。认证之后，复盘卡片与标签体系可以稳定接进你自己的选题流程或内容产品，不必每次重新找入口、重新对格式。</p>
              </div>
            </details>

            <details class="cert-tier cert-tier--gold">
              <summary>
                <span class="cert-tier__no mono">03</span>
                尊享会员认证
              </summary>
              <div class="cert-tier__body">
                <p>在数据服务认证之上叠加三项权益，适合高频使用、对响应速度有要求的团队。</p>
                <ul class="cert-perks">
                  <li>专属标签页：常用标签组合固定成入口，打开就是你要的那批内容。</li>
                  <li>版本资料优先查看：归档更新后你先看到差异，再决定要不要调整用法。</li>
                  <li>客服快速通道：问题从提出到有人接手的时间明显缩短。</li>
                </ul>
              </div>
            </details>
          </div>
        </div>

        <figure class="media-frame cert-figure">
          <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="易倍EMC服务范围五块能力与三层品牌认证层级结构信息图" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">服务能力与认证层级：从基础标识到尊享权益</figcaption>
        </figure>
      </div>
    </section>

    <section class="about-node about-node--narrow" id="ecosystem" aria-labelledby="eco-title">
      <header class="about-node__head">
        <p class="eyebrow">合作生态</p>
        <h2 id="eco-title">内容从哪里来，凭什么每周都能更新</h2>
        <p>复盘卡片背后是一条稳定的来源链：合作机构给出赛事的原始分类与阶段信息，我们的编辑与工程团队把它整理成统一的标签和卡片结构，再按周发布。链条稳，更新才稳。</p>
      </header>

      <div class="partner-grid">
        <div class="about-paper">
          <p class="about-paper__title mono">合作与覆盖</p>
          <ul class="about-paper__stats">
            <li><span class="about-paper__num mono">18</span><span>家赛事数据与内容机构长期合作</span></li>
            <li><span class="about-paper__num mono">31</span><span>个省区市的用户正在访问</span></li>
            <li><span class="about-paper__num mono">2,300+</span><span>篇赛后复盘资料已发布</span></li>
          </ul>
        </div>

        <div class="about-paper about-paper--plain">
          <p class="about-paper__title mono">使用场景</p>
          <p>赛季密集期内容量会明显上升，标签索引与历史版本资料保持可查，不会因为新内容涌入而找不到旧东西。移动端和桌面端都能完整使用，通勤路上翻标签、回到工位开战术板，看的是同一批内容。</p>
          <p>近期发布的复盘专题与版本动态，可以到<a href="/information/">赛事资讯</a>栏目顺着时间往下看。</p>
        </div>
      </div>
    </section>

    <section class="about-cta" aria-labelledby="cta-title">
      <div>
        <h2 id="cta-title">先看数据，再决定聊什么</h2>
        <p>想直接感受复盘卡片长什么样，进赛事数据服务；有具体问题或合作想法，走联系通道，工作时段内平均 2 小时有人回应。</p>
      </div>
      <div class="about-cta__actions">
        <a class="btn btn--primary" href="/projects/">赛事数据服务</a>
        <a class="btn btn--gold" href="/connect/">联系通道</a>
      </div>
    </section>

  </div>
</main>

.page-about{
  --about-line:rgba(159,177,191,.18);
  --about-soft:rgba(246,250,245,.76);
  background:var(--ink-950);
  color:var(--paper-50);
  font-family:var(--font-sans);
  padding-bottom:clamp(48px,8vw,96px);
  overflow-x:hidden;
}

.page-about *{
  box-sizing:border-box;
}

.page-about h1,
.page-about h2,
.page-about h3{
  margin:0;
  font-weight:800;
  letter-spacing:-.015em;
}

.page-about p{
  margin:0;
}

.page-about a{
  color:inherit;
}

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

/* 面包屑 */
.page-about .breadcrumbs{
  padding-block:18px 0;
}

.page-about .breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--steel-400);
}

.page-about .breadcrumbs__list li+li::before{
  content:"/";
  margin-right:8px;
  color:var(--ink-600);
}

.page-about .breadcrumbs__list a{
  text-decoration:none;
  color:var(--steel-400);
  transition:color .25s var(--ease);
}

.page-about .breadcrumbs__list a:hover{
  color:var(--cyan-400);
}

.page-about .breadcrumbs__list [aria-current]{
  color:var(--cyan-400);
}

/* 首屏 */
.about-hero{
  position:relative;
  display:grid;
  gap:clamp(24px,4vw,40px);
  padding-block:clamp(26px,5vw,52px) clamp(32px,5vw,56px);
  border-bottom:1px solid var(--about-line);
}

.about-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  top:-70px;
  right:-30%;
  width:min(560px,92vw);
  height:360px;
  background:linear-gradient(135deg,rgba(25,245,208,.2),rgba(67,86,214,.14) 48%,rgba(4,18,31,0) 74%);
  border-radius:36px;
  transform:rotate(-9deg);
  pointer-events:none;
}

.about-hero__lead,
.about-facts{
  position:relative;
  z-index:1;
}

.page-about .eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan-400);
  margin:0;
}

.about-hero h1{
  margin-top:14px;
  font-size:clamp(1.95rem,6.2vw,3.7rem);
  line-height:1.05;
  transform:skewY(-1deg);
  transform-origin:left top;
  color:var(--paper-50);
}

.page-about .lede{
  margin-top:18px;
  max-width:46ch;
  font-size:clamp(.95rem,2.4vw,1.05rem);
  line-height:1.78;
  color:var(--about-soft);
}

.about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* 速览面板 */
.about-facts{
  border:1px solid var(--line-cyan);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--ink-800),var(--ink-700));
  box-shadow:var(--shadow-island);
  padding:clamp(18px,3vw,26px);
}

.about-facts__title{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan-400);
}

.about-facts__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 12px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-facts__list li{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:12px;
  border-top:1px solid var(--about-line);
}

.about-facts__num{
  font-size:clamp(1.45rem,4.4vw,1.95rem);
  font-weight:700;
  line-height:1;
  color:var(--gold-400);
}

.about-facts__label{
  font-size:12.5px;
  line-height:1.5;
  color:var(--about-soft);
}

/* 章节骨架 */
.about-node{
  padding-block:clamp(38px,7vw,76px);
}

.about-node + .about-node{
  border-top:1px solid var(--about-line);
}

.about-node__head{
  max-width:64ch;
}

.about-node h2{
  margin-top:12px;
  font-size:clamp(1.42rem,4.4vw,2.35rem);
  line-height:1.16;
  color:var(--paper-50);
}

.about-node__head p:not(.eyebrow){
  margin-top:14px;
  font-size:clamp(.92rem,2.3vw,1rem);
  line-height:1.78;
  color:var(--about-soft);
}

/* 图片容器 */
.page-about .media-frame{
  margin:0;
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:linear-gradient(150deg,var(--ink-800),var(--ink-950));
  overflow:hidden;
}

.page-about .media-frame img{
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-about .media-frame__caption{
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--steel-400);
  border-top:1px solid var(--about-line);
}

.about-timeline-figure{
  margin-top:clamp(24px,4vw,36px);
}

/* 时间线 */
.timeline{
  display:grid;
  gap:16px;
  margin:clamp(24px,4vw,36px) 0 0;
  padding:0;
  list-style:none;
}

.timeline__item{
  padding:20px clamp(18px,3vw,28px);
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:var(--ink-800);
  box-shadow:8px 8px 0 rgba(25,245,208,.07);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}

.timeline__item:nth-child(even){
  background:var(--ink-700);
  box-shadow:8px 8px 0 rgba(242,184,75,.08);
}

.timeline__item:hover{
  transform:translateY(-3px);
  border-color:var(--line-cyan);
}

.timeline__year{
  display:inline-block;
  margin-bottom:10px;
  padding:4px 11px;
  border:1px solid var(--line-cyan);
  border-radius:var(--radius-pill);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--cyan-400);
}

.timeline__item h3{
  font-size:clamp(1.02rem,2.8vw,1.18rem);
  line-height:1.35;
  color:var(--paper-50);
}

.timeline__item p{
  margin-top:9px;
  font-size:14px;
  line-height:1.75;
  color:var(--about-soft);
}

/* 团队 */
.team-grid{
  display:grid;
  gap:clamp(24px,4vw,44px);
}

.team-copy h2{
  margin-top:12px;
  font-size:clamp(1.42rem,4.4vw,2.3rem);
  line-height:1.16;
}

.team-copy p{
  margin-top:14px;
  font-size:clamp(.92rem,2.3vw,1rem);
  line-height:1.78;
  color:var(--about-soft);
}

.team-bars{
  display:grid;
  gap:16px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

.team-bars li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 12px;
  align-items:baseline;
}

.team-bars__label{
  font-size:14px;
  color:rgba(246,250,245,.85);
}

.team-bars__num{
  font-size:15px;
  font-weight:700;
  color:var(--cyan-400);
}

.team-bars__bar{
  position:relative;
  grid-column:1 / -1;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--ink-600);
  overflow:hidden;
}

.team-bars__bar::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan-600),var(--cyan-400));
}

.team-bars li:nth-child(1) .team-bars__bar::after{ width:36.7%; }
.team-bars li:nth-child(2) .team-bars__bar::after{ width:30%; }
.team-bars li:nth-child(3) .team-bars__bar::after{ width:33.3%; }

.team-figure{
  align-self:start;
}

/* 服务范围与筛选 */
.about-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:clamp(20px,3vw,28px) 0 clamp(18px,3vw,24px);
}

.about-filter__btn{
  padding:8px 16px;
  border:1px solid var(--about-line);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--steel-400);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}

.about-filter__btn:hover{
  border-color:var(--line-cyan);
  color:var(--cyan-400);
}

.about-filter__btn.is-active{
  background:var(--cyan-400);
  border-color:var(--cyan-400);
  color:var(--ink-950);
  font-weight:700;
}

.about-cards{
  display:grid;
  gap:16px;
}

.about-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px,3vw,24px);
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:rgba(10,34,56,.72);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}

.about-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-cyan);
}

.about-card__tag{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan-400);
}

.about-card h3{
  font-size:clamp(1rem,2.7vw,1.12rem);
  line-height:1.35;
  color:var(--paper-50);
}

.about-card p{
  font-size:14px;
  line-height:1.75;
  color:var(--about-soft);
}

.about-card__link{
  margin-top:auto;
  padding-bottom:2px;
  align-self:flex-start;
  font-size:13.5px;
  text-decoration:none;
  color:var(--cyan-400);
  border-bottom:1px solid var(--line-cyan);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}

.about-card__link:hover{
  color:var(--gold-400);
  border-bottom-color:var(--line-gold);
}

/* 认证 */
.cert-grid{
  display:grid;
  gap:clamp(24px,4vw,44px);
}

.cert-copy h2{
  margin-top:12px;
  font-size:clamp(1.42rem,4.4vw,2.3rem);
  line-height:1.16;
}

.cert-copy > p{
  margin-top:14px;
  font-size:clamp(.92rem,2.3vw,1rem);
  line-height:1.78;
  color:var(--about-soft);
}

.cert-stack{
  margin-top:24px;
}

.cert-tier{
  margin-bottom:12px;
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:var(--ink-800);
  overflow:hidden;
  transition:border-color .3s var(--ease);
}

.cert-tier[open]{
  border-color:var(--line-cyan);
}

.cert-tier--gold[open]{
  border-color:var(--line-gold);
}

.cert-tier summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  list-style:none;
  cursor:pointer;
  font-size:15.5px;
  font-weight:700;
  color:var(--paper-50);
}

.cert-tier summary::-webkit-details-marker{
  display:none;
}

.cert-tier summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--cyan-400);
}

.cert-tier[open] summary::after{
  content:"–";
}

.cert-tier--gold summary::after{
  color:var(--gold-400);
}

.cert-tier__no{
  display:grid;
  place-items:center;
  flex:none;
  width:26px;
  height:26px;
  border-radius:6px;
  background:var(--cyan-400);
  color:var(--ink-950);
  font-size:12px;
  font-weight:700;
}

.cert-tier--gold .cert-tier__no{
  background:var(--gold-400);
}

.cert-tier__body{
  padding:0 18px 18px;
  font-size:13.5px;
  line-height:1.78;
  color:var(--about-soft);
}

.cert-perks{
  display:grid;
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.cert-perks li{
  display:flex;
  gap:8px;
  font-size:13.5px;
  line-height:1.7;
}

.cert-perks li::before{
  content:"▸";
  flex:none;
  color:var(--gold-400);
}

.cert-figure{
  align-self:start;
}

/* 合作生态 */
.partner-grid{
  display:grid;
  gap:18px;
  margin-top:clamp(24px,4vw,36px);
}

.about-paper{
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--ink-950);
  border-radius:var(--radius-md);
  background:var(--paper-50);
  color:var(--ink-950);
  box-shadow:10px 10px 0 rgba(25,245,208,.16);
}

.about-paper--plain{
  background:var(--paper-50);
  box-shadow:10px 10px 0 rgba(242,184,75,.18);
}

.about-paper__title{
  margin:0 0 16px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan-600);
}

.about-paper__stats{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-paper__stats li{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:12px;
  border-top:1px solid rgba(4,18,31,.14);
  font-size:13.5px;
  line-height:1.6;
  color:rgba(4,18,31,.76);
}

.about-paper__num{
  font-size:clamp(1.3rem,4vw,1.7rem);
  font-weight:700;
  line-height:1;
  color:var(--ink-950);
}

.about-paper p{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.78;
  color:rgba(4,18,31,.78);
}

.about-paper p:first-of-type{
  margin-top:0;
}

.about-paper a{
  color:var(--ink-950);
  text-decoration:none;
  border-bottom:1px solid var(--cyan-600);
}

.about-paper a:hover{
  color:var(--cyan-600);
}

/* 收尾行动 */
.about-cta{
  display:grid;
  gap:20px;
  margin-top:clamp(36px,6vw,64px);
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--line-cyan);
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--ink-800),var(--ink-600));
  box-shadow:var(--shadow-paper);
}

.about-cta h2{
  font-size:clamp(1.3rem,3.8vw,1.9rem);
  line-height:1.2;
  color:var(--paper-50);
}

.about-cta p{
  margin-top:12px;
  max-width:50ch;
  font-size:14px;
  line-height:1.78;
  color:var(--about-soft);
}

.about-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* 响应式 */
@media (min-width:760px){
  .about-cards{
    grid-template-columns:repeat(2,1fr);
  }

  .partner-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-cta{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (min-width:900px){
  .about-hero{
    grid-template-columns:1.3fr .7fr;
    align-items:start;
  }

  .team-grid{
    grid-template-columns:1.05fr .95fr;
    align-items:start;
  }

  .cert-grid{
    grid-template-columns:.95fr 1.05fr;
    align-items:start;
  }

  .timeline__item:nth-child(odd){
    margin-right:clamp(24px,7vw,88px);
  }

  .timeline__item:nth-child(even){
    margin-left:clamp(24px,7vw,88px);
  }
}

@media (min-width:1024px){
  .about-cards{
    grid-template-columns:repeat(3,1fr);
  }

  .about-facts__num{
    font-size:2.1rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about *,
  .page-about *::after{
    transition:none !important;
    animation:none !important;
  }

  .about-hero h1{
    transform:none;
  }
}