.page-about {
  --about-brass-light: #E0B36A;
  --about-on-dark: rgba(251, 246, 238, 0.94);
  --about-on-dark-soft: rgba(251, 246, 238, 0.7);
  --about-dark-line: rgba(232, 214, 190, 0.22);
}

/* ---------- 封面 ---------- */
.page-about .about-cover {
  padding-top: 26px;
}

.page-about .about-cover__grid {
  display: grid;
  gap: 28px;
  margin-top: 14px;
}

.page-about .about-cover__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(29px, 6.6vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.page-about .about-lede {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 42em;
}

.page-about .about-cover__aside {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-soft);
}

.page-about .about-cover__asideTitle {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--tu-hong);
}

.page-about .about-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.page-about .about-index__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}

.page-about .about-index__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--brass);
  letter-spacing: 0.02em;
}

.page-about .about-index__label {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- 起步故事 ---------- */
.page-about .about-story__grid {
  display: grid;
  gap: 26px;
}

.page-about .about-story__body .fg-title {
  margin-top: 10px;
}

.page-about .about-story__p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-about .about-story__body .fg-note {
  margin-top: 22px;
}

.page-about .about-story__figure {
  margin: 0;
}

.page-about .about-story__figure img,
.page-about .about-review__figure img,
.page-about .about-eco__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

.page-about .about-story__figure img {
  aspect-ratio: 3 / 2;
}

.page-about .about-review__figure img {
  aspect-ratio: 10 / 7;
}

.page-about .about-eco__figure img {
  aspect-ratio: 3 / 4;
}

/* ---------- 发展节点 ---------- */
.page-about .about-timeline {
  position: relative;
  margin-top: 30px;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(180deg, var(--tu-hong), rgba(185, 138, 60, 0.28));
}

.page-about .about-timeline .fg-accordion__item {
  position: relative;
  margin-left: 26px;
  margin-bottom: 12px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease;
}

.page-about .about-timeline .fg-accordion__item:hover {
  border-color: var(--line);
}

.page-about .about-timeline .fg-accordion__item::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 18px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--tu-hong);
  box-sizing: border-box;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.page-about .about-timeline .fg-accordion__item[data-open]::before {
  background: var(--tu-hong);
  box-shadow: 0 0 0 4px rgba(158, 61, 47, 0.14);
}

.page-about .about-timeline__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.page-about .about-year {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: var(--brass);
}

.page-about .about-timeline__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.page-about .about-timeline .fg-accordion__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink-soft);
}

/* ---------- 审核与团队 ---------- */
.page-about .about-steps {
  margin-top: 28px;
}

.page-about .about-review__grid {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.page-about .about-roles {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-about .about-role {
  position: relative;
  padding: 16px 18px 16px 22px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.page-about .about-role::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--green);
}

.page-about .about-role:hover,
.page-about .about-role:focus-within {
  transform: translateY(-2px);
  border-color: var(--line);
}

.page-about .about-role__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.page-about .about-role__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--brass);
}

.page-about .about-role__unit {
  font-size: 13px;
  color: var(--gray-sand);
}

.page-about .about-role__name {
  margin-left: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.page-about .about-role__duty {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}

.page-about .about-review__figure {
  margin: 0;
}

/* ---------- 覆盖能力 ---------- */
.page-about .about-reach .fg-title,
.page-about .about-reach .fg-lede {
  color: var(--about-on-dark);
}

.page-about .about-reach .fg-kicker {
  color: var(--about-brass-light);
}

.page-about .about-stats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.page-about .about-stat {
  padding-top: 12px;
  border-top: 1px solid var(--about-dark-line);
  min-width: 0;
}

.page-about .about-stat__num {
  display: block;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(25px, 5.2vw, 36px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--about-brass-light);
}

.page-about .about-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--about-on-dark-soft);
}

.page-about .about-map {
  position: relative;
  margin-top: 30px;
  padding: 18px 14px 10px;
  border: 1px solid var(--about-dark-line);
  border-radius: var(--radius);
  background: rgba(31, 74, 66, 0.4);
}

.page-about .about-map__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-about .about-map__pins {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}

.page-about .about-map__pin {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid var(--about-dark-line);
  outline-offset: 3px;
}

.page-about .about-map__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--about-brass-light);
  box-shadow: 0 0 0 4px rgba(224, 179, 106, 0.16);
}

.page-about .about-map__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--about-on-dark);
}

.page-about .about-map__tags {
  display: block;
  width: 100%;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--about-brass-light);
}

/* ---------- 合作生态 ---------- */
.page-about .about-eco__grid {
  display: grid;
  gap: 26px;
}

.page-about .about-eco__figure {
  margin: 0;
}

.page-about .about-eco__body .fg-title {
  margin-top: 10px;
}

.page-about .about-eco__p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-about .about-eco__body .fg-note {
  margin-top: 22px;
}

/* ---------- 做事方式与下一步 ---------- */
.page-about .about-wayGrid {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.page-about .about-way {
  padding: 20px 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  border-top: 3px solid var(--tu-hong);
  box-shadow: var(--shadow-soft);
}

.page-about .about-way:nth-child(2) {
  border-top-color: var(--green);
}

.page-about .about-way:nth-child(3) {
  border-top-color: var(--brass);
}

.page-about .about-way__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}

.page-about .about-way__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-about .about-ways .fg-rule {
  margin: 34px 0 26px;
}

.page-about .about-next__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.page-about .about-next__text {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46em;
}

/* ---------- 中等屏幕 ---------- */
@media (min-width: 720px) {
  .page-about .about-cover__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

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

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

  .page-about .about-map {
    min-height: 330px;
    padding: 26px 18px;
  }

  .page-about .about-map__pins {
    position: absolute;
    inset: 0;
    display: block;
  }

  .page-about .about-map__pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 0;
    padding: 0;
    border-bottom: 0;
    transform: translate(-50%, -50%);
    overflow: visible;
  }

  .page-about .about-map__pin:nth-child(1) { left: 85%; top: 24%; }
  .page-about .about-map__pin:nth-child(2) { left: 71%; top: 40%; }
  .page-about .about-map__pin:nth-child(3) { left: 53%; top: 47%; }
  .page-about .about-map__pin:nth-child(4) { left: 40%; top: 58%; }
  .page-about .about-map__pin:nth-child(5) { left: 28%; top: 68%; }
  .page-about .about-map__pin:nth-child(6) { left: 16%; top: 78%; }

  .page-about .about-map__name {
    display: block;
    order: 2;
    width: max-content;
    padding: 3px 8px;
    font-size: 12.5px;
    white-space: nowrap;
    background: rgba(31, 74, 66, 0.92);
    border: 1px solid rgba(224, 179, 106, 0.35);
    border-radius: 2px;
  }

  .page-about .about-map__tags {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    order: 1;
    width: max-content;
    max-width: 190px;
    padding: 7px 10px;
    padding-left: 10px;
    text-align: center;
    background: rgba(31, 74, 66, 0.97);
    border: 1px solid rgba(224, 179, 106, 0.5);
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 3;
  }

  .page-about .about-map__pin:hover .about-map__tags,
  .page-about .about-map__pin:focus .about-map__tags,
  .page-about .about-map__pin:focus-within .about-map__tags {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- 宽屏错位与悬停展开 ---------- */
@media (min-width: 960px) {
  .page-about .about-story__grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: start;
    gap: 52px;
  }

  .page-about .about-story__figure {
    margin-top: 38px;
  }

  .page-about .about-eco__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 48px;
  }

  .page-about .about-eco__figure {
    margin-top: 10px;
  }

  .page-about .about-review__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .page-about .about-review__figure {
    margin-top: 6px;
  }

  .page-about .about-role__duty {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .page-about .about-role:hover .about-role__duty,
  .page-about .about-role:focus-within .about-role__duty {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-role,
  .page-about .about-role__duty,
  .page-about .about-map__tags,
  .page-about .about-timeline .fg-accordion__item::before {
    transition: none;
  }

  .page-about .about-role:hover,
  .page-about .about-role:focus-within {
    transform: none;
  }
}


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

  <section class="fg-section fg-section--cream about-cover">
    <div class="fg-shell">
      <nav class="fg-crumbs" aria-label="当前位置">
        <ol class="fg-crumbs__list">
          <li class="fg-crumbs__item"><a class="fg-crumbs__link" href="/">首页</a></li>
          <li class="fg-crumbs__item"><span class="fg-crumbs__current" aria-current="page">品牌故事</span></li>
        </ol>
      </nav>

      <div class="about-cover__grid">
        <div class="about-cover__main">
          <p class="fg-kicker">品牌故事</p>
          <h1 class="about-cover__title">把街巷里的生活服务，整理成一本查得清的目录</h1>
          <p class="about-lede">凡国网址中心从 2016 年起在兰州做一件事：替家里长辈找个靠谱的保洁或维修师傅时，不用再靠熟人介绍和楼道小广告碰运气。我们把生活服务站点按门类收进来，把服务范围、费用和评价一并写明白，让您先看清，再拨电话。</p>
        </div>

        <aside class="about-cover__aside" aria-label="目录概况">
          <p class="about-cover__asideTitle">目录概况</p>
          <ul class="about-index">
            <li class="about-index__item">
              <span class="about-index__num">2016</span>
              <span class="about-index__label">兰州起步</span>
            </li>
            <li class="about-index__item">
              <span class="about-index__num">1,860</span>
              <span class="about-index__label">收录站点</span>
            </li>
            <li class="about-index__item">
              <span class="about-index__num">14</span>
              <span class="about-index__label">覆盖市州</span>
            </li>
            <li class="about-index__item">
              <span class="about-index__num">18</span>
              <span class="about-index__label">团队人数</span>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <section class="fg-section fg-section--paper about-story">
    <div class="fg-shell">
      <div class="about-story__grid">
        <div class="about-story__body">
          <p class="fg-kicker">起步</p>
          <h2 class="fg-title">一本旧黄页，和一条条问出来的清单</h2>
          <p class="about-story__p">2016 年，我们在兰州做了一件挺笨的事：把街面上能见到的家政、维修、开锁、搬家站点一个个记下来，按门类抄进表格。谁家做管道疏通、谁家能夜里开锁、上门要不要加钱，问清楚了才敢往上写。最早的索引只有几十条，靠的是打电话和上门问价。</p>
          <p class="about-story__p">这份表格长成了今天的目录。现在收录 16 个生活服务门类，范围到甘肃 14 个市州和周边毗邻地区，一共 1,860 个站点。您点开任意一条，能看到它属于哪个门类、服务到哪些区域、费用怎么算，也能看到近 12 个月的评价摘要和履约完成率。</p>
          <p class="fg-note fg-note--green">家里长辈拨电话之前，先有人把话问清楚。</p>
        </div>

        <figure class="about-story__figure fg-media fg-media--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="兰州社区街巷里便民服务招牌的暖色近景，没有可识别人物">
          <figcaption class="fg-media__cap">街面上这些招牌，是这本目录最早的信息来源。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="fg-section fg-section--sand about-road">
    <div class="fg-shell">
      <header class="fg-section__head">
        <p class="fg-kicker">发展节点</p>
        <h2 class="fg-title">四个节点，看这目录怎么一步步变厚</h2>
        <p class="fg-lede">从几十条索引到 1,860 个站点，中间换过几次做法。点开任意一项，是这个阶段具体变了什么。</p>
      </header>

      <div class="fg-accordion about-timeline" data-accordion>
        <div class="fg-accordion__item" data-accordion-item data-open>
          <h3 class="about-timeline__heading">
            <button class="fg-accordion__trigger" type="button" data-accordion-trigger>
              <span class="about-year">2016</span>
              <span class="about-timeline__title">兰州起步，先做本地家政与维修索引</span>
            </button>
          </h3>
          <div class="fg-accordion__panel" data-accordion-panel>
            <div class="fg-accordion__body">
              <p>收录范围锁在兰州本地，门类集中在家政和维修两类。信息靠打电话和上门问价补全，一条站点问下来常常要跑两三趟，遇到说不清的报价就干脆不收。</p>
            </div>
          </div>
        </div>

        <div class="fg-accordion__item" data-accordion-item>
          <h3 class="about-timeline__heading">
            <button class="fg-accordion__trigger" type="button" data-accordion-trigger>
              <span class="about-year">2021</span>
              <span class="about-timeline__title">正式版面板上线，费用说明集中呈现</span>
            </button>
          </h3>
          <div class="fg-accordion__panel" data-accordion-panel>
            <div class="fg-accordion__body">
              <p>收录收费按公布的价格表逐项列明，用户在正式版面板里就能看到每一档包含什么、哪些另算。合作站点提报信息时照同一张表填，报价和包含项不会各说各的。</p>
            </div>
          </div>
        </div>

        <div class="fg-accordion__item" data-accordion-item>
          <h3 class="about-timeline__heading">
            <button class="fg-accordion__trigger" type="button" data-accordion-trigger>
              <span class="about-year">2023</span>
              <span class="about-timeline__title">双周公告启用，进度开始按时发布</span>
            </button>
          </h3>
          <div class="fg-accordion__panel" data-accordion-panel>
            <div class="fg-accordion__body">
              <p>每两周发布一期公告，固定包含审核进度、价格说明、功能更新、区域服务提醒和售后追踪五类内容。您不用天天盯着，隔两周看一次就能跟上变化。同年，平台获得区域生活服务信息平台优秀案例奖。</p>
            </div>
          </div>
        </div>

        <div class="fg-accordion__item" data-accordion-item>
          <h3 class="about-timeline__heading">
            <button class="fg-accordion__trigger" type="button" data-accordion-trigger>
              <span class="about-year">2024</span>
              <span class="about-timeline__title">价格表增加区域分档</span>
            </button>
          </h3>
          <div class="fg-accordion__panel" data-accordion-panel>
            <div class="fg-accordion__body">
              <p>甘肃东西跨度大，兰州与河西走廊的展示成本并不相同。价格表按区域分档后，同一个门类在不同市州的展示费用分开列，合作方按自己所在区域对号入座，不用再按一套标准勉强凑。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fg-section fg-section--cream about-review">
    <div class="fg-shell">
      <header class="fg-section__head">
        <p class="fg-kicker">审核与运营</p>
        <h2 class="fg-title">一条站点从提交到上架，要过四道关</h2>
        <p class="fg-lede">平均 3 个工作日走完初审，后面还有三关。每一关都有具体的人负责，也都有退回的可能。</p>
      </header>

      <div class="fg-steps about-steps">
        <div class="fg-step">
          <h3 class="fg-step__title">资料初审</h3>
          <p class="fg-step__text">营业执照、服务范围、联系方式、报价单是否齐全，缺一项就退回补充，补齐了再往下走。</p>
        </div>
        <div class="fg-step">
          <h3 class="fg-step__title">回访观察</h3>
          <p class="fg-step__text">按留下的电话打一轮，看接不接、说不说得清、报出的价格和表上差多少，通话情况记在档里。</p>
        </div>
        <div class="fg-step">
          <h3 class="fg-step__title">分级上架</h3>
          <p class="fg-step__text">按信息完整度和响应情况定展示级别，对应基础收录、图文展示、区域优先展示三档位置。</p>
        </div>
        <div class="fg-step">
          <h3 class="fg-step__title">定期复核</h3>
          <p class="fg-step__text">已上架的站点按周期回看，服务缩水或电话打不通的，降级或者下架，不留在目录里占位置。</p>
        </div>
      </div>

      <div class="about-review__grid">
        <div class="about-roles">
          <div class="about-role">
            <div class="about-role__head">
              <span class="about-role__num">6</span>
              <span class="about-role__unit">人</span>
              <span class="about-role__name">审核</span>
            </div>
            <p class="about-role__duty">负责初审、回访和定期复看，判断哪家能上、该上到哪一级。</p>
          </div>
          <div class="about-role">
            <div class="about-role__head">
              <span class="about-role__num">5</span>
              <span class="about-role__unit">人</span>
              <span class="about-role__name">客服</span>
            </div>
            <p class="about-role__duty">接电话、回邮件，回答费用、登录、售后和区域订单的问题，工作日 9:00–18:00 有人在。</p>
          </div>
          <div class="about-role">
            <div class="about-role__head">
              <span class="about-role__num">7</span>
              <span class="about-role__unit">人</span>
              <span class="about-role__name">技术与运营</span>
            </div>
            <p class="about-role__duty">维护正式版面板和价格表版本，双周公告里的功能更新、区域提醒也由他们发布。</p>
          </div>
        </div>

        <figure class="about-review__figure fg-media fg-media--square">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async" alt="桌面上摊开的分类档案、印章和手写清单，俯拍构图，暖砂色调">
          <figcaption class="fg-media__cap">分类档案与手写清单，是每条站点进目录前要过的样子。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="fg-section fg-section--green about-reach">
    <div class="fg-shell">
      <header class="fg-section__head">
        <p class="fg-kicker">服务覆盖</p>
        <h2 class="fg-title">甘肃 14 个市州，和它周边的街坊</h2>
        <p class="fg-lede">从兰州一路向西，服务范围覆盖甘肃 14 个市州及周边毗邻地区。16 个门类里，家政、维修、开锁、搬家、保洁、管道疏通、家电清洗和社区便民是查得最多的几类。</p>
      </header>

      <ul class="about-stats">
        <li class="about-stat">
          <span class="about-stat__num">1,860</span>
          <span class="about-stat__label">收录生活服务站点</span>
        </li>
        <li class="about-stat">
          <span class="about-stat__num">620</span>
          <span class="about-stat__label">合作站点，其中家政 210 家、维修 180 家、社区便民 230 家</span>
        </li>
        <li class="about-stat">
          <span class="about-stat__num">4.2 万</span>
          <span class="about-stat__label">累计服务家庭用户</span>
        </li>
        <li class="about-stat">
          <span class="about-stat__num">1,100 次</span>
          <span class="about-stat__label">每月协助查询区域订单</span>
        </li>
      </ul>

      <div class="about-map">
        <svg class="about-map__shape" viewBox="0 0 640 320" aria-hidden="true" focusable="false">
          <path d="M 592 46 C 536 66 498 84 462 104 C 426 124 390 130 354 144 C 318 158 286 170 250 184 C 214 198 176 214 136 244" fill="none" stroke="rgba(232,214,190,0.14)" stroke-width="76" stroke-linecap="round"/>
          <path d="M 592 46 C 536 66 498 84 462 104 C 426 124 390 130 354 144 C 318 158 286 170 250 184 C 214 198 176 214 136 244" fill="none" stroke="rgba(224,179,106,0.55)" stroke-width="1.4" stroke-dasharray="6 8" stroke-linecap="round"/>
        </svg>
        <ul class="about-map__pins">
          <li class="about-map__pin" tabindex="0">
            <span class="about-map__dot" aria-hidden="true"></span>
            <span class="about-map__name">平凉 · 庆阳</span>
            <span class="about-map__tags">家政 · 社区便民 · 家电清洗</span>
          </li>
          <li class="about-map__pin" tabindex="0">
            <span class="about-map__dot" aria-hidden="true"></span>
            <span class="about-map__name">天水 · 陇南</span>
            <span class="about-map__tags">维修 · 搬家 · 管道疏通</span>
          </li>
          <li class="about-map__pin" tabindex="0">
            <span class="about-map__dot" aria-hidden="true"></span>
            <span class="about-map__name">兰州及周边</span>
            <span class="about-map__tags">保洁 · 开锁急修 · 家政</span>
          </li>
          <li class="about-map__pin" tabindex="0">
            <span class="about-map__dot" aria-hidden="true"></span>
            <span class="about-map__name">白银 · 定西</span>
            <span class="about-map__tags">家电清洗 · 维修 · 保洁</span>
          </li>
          <li class="about-map__pin" tabindex="0">
            <span class="about-map__dot" aria-hidden="true"></span>
            <span class="about-map__name">武威 · 金昌 · 张掖</span>
            <span class="about-map__tags">管道疏通 · 家政 · 搬家</span>
          </li>
          <li class="about-map__pin" tabindex="0">
            <span class="about-map__dot" aria-hidden="true"></span>
            <span class="about-map__name">酒泉 · 嘉峪关</span>
            <span class="about-map__tags">开锁急修 · 保洁 · 社区便民</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="fg-section fg-section--paper about-eco">
    <div class="fg-shell">
      <div class="about-eco__grid">
        <figure class="about-eco__figure fg-media fg-media--tall">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" loading="lazy" decoding="async" alt="社区公告栏局部特写，贴着分类标签和生活服务通知，没有真实人物">
          <figcaption class="fg-media__cap">楼下的公告栏，常常是最近也最容易被漏掉的信息源。</figcaption>
        </figure>

        <div class="about-eco__body">
          <p class="fg-kicker">合作生态</p>
          <h2 class="fg-title">和社区服务站、家政公司、维修商一起把话说清楚</h2>
          <p class="about-eco__p">合作方主要是三类：社区便民服务站、家政公司、维修服务商。620 家合作站点里，家政类 210 家、维修类 180 家、社区便民类 230 家，分布在甘肃各市州的居民区周边。</p>
          <p class="about-eco__p">进了目录不是挂个名字就完事。合作站点要按价格表披露服务范围和费用说明；服务范围变了、价格调了，要在下一期公告发布前报上来。用户看到的费用和售后时限，都来自这一步。</p>
          <p class="about-eco__p">社区便民服务站是离得最近的一环。谁负责哪栋楼、周末上不上门、收不收上门费，这些信息最管用，也最难在网上找。我们把它搬进目录，帮您出门之前就知道该找谁。</p>
          <p class="fg-note">问得细一点，写下来，下次别人就不用再问一遍。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fg-section fg-section--cream about-ways">
    <div class="fg-shell">
      <header class="fg-section__head">
        <p class="fg-kicker">做事方式</p>
        <h2 class="fg-title">慢一点，但把话说在前面</h2>
      </header>

      <div class="about-wayGrid">
        <article class="about-way">
          <span class="fg-tag fg-tag--brass">价格</span>
          <h3 class="about-way__title">三档方案，逐项写清</h3>
          <p class="about-way__text">基础收录 680 元/年、图文展示 1,280 元/年、区域优先展示 2,680 元/年。每一档包含什么、哪些另外算，价格表里分开列，按区域还有对应的分档。</p>
        </article>
        <article class="about-way">
          <span class="fg-tag fg-tag--green">评价</span>
          <h3 class="about-way__title">只看最近 12 个月</h3>
          <p class="about-way__text">评价摘要按近 12 个月统计，履约完成率也跟着这个周期更新。几年前的老好评不会一直累积在页面上，您看到的是这家眼下的状态。</p>
        </article>
        <article class="about-way">
          <span class="fg-tag fg-tag--red">售后</span>
          <h3 class="about-way__title">说了时间就按时到</h3>
          <p class="about-way__text">工作日 24 小时内响应，72 小时内给出处理方案，这两条写进合作约定里。真碰上扯皮的事，有个明确的时限可以照着催。</p>
        </article>
      </div>

      <div class="fg-rule"></div>

      <div class="about-next">
        <p class="about-next__title">想接着往下看，这三处最常用</p>
        <div class="about-next__links">
          <a class="fg-btn fg-btn--solid" href="/catalog/">收录与服务目录</a>
          <a class="fg-btn fg-btn--ghost" href="/information/">双周公告</a>
          <a class="fg-btn fg-btn--quiet" href="/inquiry/">联系客服</a>
        </div>
        <p class="about-next__text">想先看有哪些门类、费用怎么分档，去收录与服务目录；想跟上最近的价格变化和审核进度，翻双周公告；有具体的事要问，直接找客服。</p>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-brass-light: #E0B36A;
  --about-on-dark: rgba(251, 246, 238, 0.94);
  --about-on-dark-soft: rgba(251, 246, 238, 0.7);
  --about-dark-line: rgba(232, 214, 190, 0.22);
}

/* ---------- 封面 ---------- */
.page-about .about-cover {
  padding-top: 26px;
}

.page-about .about-cover__grid {
  display: grid;
  gap: 28px;
  margin-top: 14px;
}

.page-about .about-cover__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(29px, 6.6vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.page-about .about-lede {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 42em;
}

.page-about .about-cover__aside {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-soft);
}

.page-about .about-cover__asideTitle {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--tu-hong);
}

.page-about .about-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.page-about .about-index__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}

.page-about .about-index__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--brass);
  letter-spacing: 0.02em;
}

.page-about .about-index__label {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- 起步故事 ---------- */
.page-about .about-story__grid {
  display: grid;
  gap: 26px;
}

.page-about .about-story__body .fg-title {
  margin-top: 10px;
}

.page-about .about-story__p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-about .about-story__body .fg-note {
  margin-top: 22px;
}

.page-about .about-story__figure {
  margin: 0;
}

.page-about .about-story__figure img,
.page-about .about-review__figure img,
.page-about .about-eco__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

.page-about .about-story__figure img {
  aspect-ratio: 3 / 2;
}

.page-about .about-review__figure img {
  aspect-ratio: 10 / 7;
}

.page-about .about-eco__figure img {
  aspect-ratio: 3 / 4;
}

/* ---------- 发展节点 ---------- */
.page-about .about-timeline {
  position: relative;
  margin-top: 30px;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(180deg, var(--tu-hong), rgba(185, 138, 60, 0.28));
}

.page-about .about-timeline .fg-accordion__item {
  position: relative;
  margin-left: 26px;
  margin-bottom: 12px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease;
}

.page-about .about-timeline .fg-accordion__item:hover {
  border-color: var(--line);
}

.page-about .about-timeline .fg-accordion__item::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 18px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--tu-hong);
  box-sizing: border-box;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.page-about .about-timeline .fg-accordion__item[data-open]::before {
  background: var(--tu-hong);
  box-shadow: 0 0 0 4px rgba(158, 61, 47, 0.14);
}

.page-about .about-timeline__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.page-about .about-year {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: var(--brass);
}

.page-about .about-timeline__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.page-about .about-timeline .fg-accordion__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink-soft);
}

/* ---------- 审核与团队 ---------- */
.page-about .about-steps {
  margin-top: 28px;
}

.page-about .about-review__grid {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.page-about .about-roles {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-about .about-role {
  position: relative;
  padding: 16px 18px 16px 22px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.page-about .about-role::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--green);
}

.page-about .about-role:hover,
.page-about .about-role:focus-within {
  transform: translateY(-2px);
  border-color: var(--line);
}

.page-about .about-role__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.page-about .about-role__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--brass);
}

.page-about .about-role__unit {
  font-size: 13px;
  color: var(--gray-sand);
}

.page-about .about-role__name {
  margin-left: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.page-about .about-role__duty {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}

.page-about .about-review__figure {
  margin: 0;
}

/* ---------- 覆盖能力 ---------- */
.page-about .about-reach .fg-title,
.page-about .about-reach .fg-lede {
  color: var(--about-on-dark);
}

.page-about .about-reach .fg-kicker {
  color: var(--about-brass-light);
}

.page-about .about-stats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.page-about .about-stat {
  padding-top: 12px;
  border-top: 1px solid var(--about-dark-line);
  min-width: 0;
}

.page-about .about-stat__num {
  display: block;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(25px, 5.2vw, 36px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--about-brass-light);
}

.page-about .about-stat__label {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--about-on-dark-soft);
}

.page-about .about-map {
  position: relative;
  margin-top: 30px;
  padding: 18px 14px 10px;
  border: 1px solid var(--about-dark-line);
  border-radius: var(--radius);
  background: rgba(31, 74, 66, 0.4);
}

.page-about .about-map__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-about .about-map__pins {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}

.page-about .about-map__pin {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid var(--about-dark-line);
  outline-offset: 3px;
}

.page-about .about-map__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--about-brass-light);
  box-shadow: 0 0 0 4px rgba(224, 179, 106, 0.16);
}

.page-about .about-map__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--about-on-dark);
}

.page-about .about-map__tags {
  display: block;
  width: 100%;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--about-brass-light);
}

/* ---------- 合作生态 ---------- */
.page-about .about-eco__grid {
  display: grid;
  gap: 26px;
}

.page-about .about-eco__figure {
  margin: 0;
}

.page-about .about-eco__body .fg-title {
  margin-top: 10px;
}

.page-about .about-eco__p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.page-about .about-eco__body .fg-note {
  margin-top: 22px;
}

/* ---------- 做事方式与下一步 ---------- */
.page-about .about-wayGrid {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.page-about .about-way {
  padding: 20px 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  border-top: 3px solid var(--tu-hong);
  box-shadow: var(--shadow-soft);
}

.page-about .about-way:nth-child(2) {
  border-top-color: var(--green);
}

.page-about .about-way:nth-child(3) {
  border-top-color: var(--brass);
}

.page-about .about-way__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}

.page-about .about-way__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.page-about .about-ways .fg-rule {
  margin: 34px 0 26px;
}

.page-about .about-next__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.page-about .about-next__text {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46em;
}

/* ---------- 中等屏幕 ---------- */
@media (min-width: 720px) {
  .page-about .about-cover__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

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

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

  .page-about .about-map {
    min-height: 330px;
    padding: 26px 18px;
  }

  .page-about .about-map__pins {
    position: absolute;
    inset: 0;
    display: block;
  }

  .page-about .about-map__pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 0;
    padding: 0;
    border-bottom: 0;
    transform: translate(-50%, -50%);
    overflow: visible;
  }

  .page-about .about-map__pin:nth-child(1) { left: 85%; top: 24%; }
  .page-about .about-map__pin:nth-child(2) { left: 71%; top: 40%; }
  .page-about .about-map__pin:nth-child(3) { left: 53%; top: 47%; }
  .page-about .about-map__pin:nth-child(4) { left: 40%; top: 58%; }
  .page-about .about-map__pin:nth-child(5) { left: 28%; top: 68%; }
  .page-about .about-map__pin:nth-child(6) { left: 16%; top: 78%; }

  .page-about .about-map__name {
    display: block;
    order: 2;
    width: max-content;
    padding: 3px 8px;
    font-size: 12.5px;
    white-space: nowrap;
    background: rgba(31, 74, 66, 0.92);
    border: 1px solid rgba(224, 179, 106, 0.35);
    border-radius: 2px;
  }

  .page-about .about-map__tags {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    order: 1;
    width: max-content;
    max-width: 190px;
    padding: 7px 10px;
    padding-left: 10px;
    text-align: center;
    background: rgba(31, 74, 66, 0.97);
    border: 1px solid rgba(224, 179, 106, 0.5);
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 3;
  }

  .page-about .about-map__pin:hover .about-map__tags,
  .page-about .about-map__pin:focus .about-map__tags,
  .page-about .about-map__pin:focus-within .about-map__tags {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- 宽屏错位与悬停展开 ---------- */
@media (min-width: 960px) {
  .page-about .about-story__grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: start;
    gap: 52px;
  }

  .page-about .about-story__figure {
    margin-top: 38px;
  }

  .page-about .about-eco__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 48px;
  }

  .page-about .about-eco__figure {
    margin-top: 10px;
  }

  .page-about .about-review__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .page-about .about-review__figure {
    margin-top: 6px;
  }

  .page-about .about-role__duty {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .page-about .about-role:hover .about-role__duty,
  .page-about .about-role:focus-within .about-role__duty {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-role,
  .page-about .about-role__duty,
  .page-about .about-map__tags,
  .page-about .about-timeline .fg-accordion__item::before {
    transition: none;
  }

  .page-about .about-role:hover,
  .page-about .about-role:focus-within {
    transform: none;
  }
}