.page-home{
  --home-gap:clamp(14px,2.4vw,20px);
  --home-band-fade:linear-gradient(90deg,var(--hy-red) 0%,var(--hy-red) 42%,rgba(200,16,46,.18) 78%,rgba(200,16,46,0) 100%);
  --home-card-sh:0 18px 38px -30px rgba(30,26,23,.55);
}

.page-home .home-hero{
  padding:clamp(20px,3.4vw,40px) 0 clamp(44px,6vw,76px);
  background:
    radial-gradient(120% 78% at 10% -6%,rgba(212,175,55,.16),transparent 62%),
    radial-gradient(90% 60% at 100% 8%,rgba(42,157,143,.10),transparent 58%),
    linear-gradient(180deg,var(--hy-cream) 0%,#fffdfa 100%);
  border-bottom:1px solid var(--hy-line-soft);
}

.page-home .hero-head{max-width:880px;margin:clamp(18px,3vw,30px) 0 clamp(24px,3.4vw,38px);}
.page-home .hero-head h1{
  margin:10px 0 0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(34px,6.2vw,68px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--hy-ink);
}
.page-home .hero-lead{
  margin:18px 0 0;
  max-width:30em;
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.85;
  color:var(--hy-muted);
}

.page-home .hero-collage{display:grid;grid-template-columns:1fr;gap:var(--home-gap);}

.page-home .hero-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--hy-r-xl);
  border:1px solid var(--hy-line-soft);
  background:var(--hy-cream);
  box-shadow:var(--home-card-sh);
  padding:22px;
  transition:transform .32s ease,box-shadow .32s ease,border-radius .32s ease;
}
.page-home .hero-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--hy-shadow-2);
  border-radius:22px;
}
.page-home .hero-card h2{
  margin:10px 0 0;
  font-family:var(--hy-font-display);
  font-weight:800;
  font-size:clamp(20px,2.6vw,24px);
  letter-spacing:-.01em;
  color:var(--hy-ink);
}
.page-home .hero-card p{margin:10px 0 0;font-size:15px;line-height:1.8;color:var(--hy-muted);}
.page-home .hero-card .hy-btn{margin-top:16px;}

.page-home .hero-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:58px;
  padding:0 12px;
  border-radius:var(--hy-r-md);
  background:var(--hy-sand);
  border:1px solid rgba(212,175,55,.55);
  font-family:var(--hy-font-num);
  font-size:40px;
  font-weight:700;
  line-height:1;
  color:var(--hy-red);
  letter-spacing:.02em;
}
.page-home .hero-num--sm{min-width:62px;height:46px;font-size:28px;}

.page-home .hero-a{height:300px;padding:0;background:var(--hy-red-deep);}
.page-home .hero-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.page-home .hero-a__veil{
  position:absolute;
  inset:auto 0 0 0;
  padding:26px 22px 22px;
  background:linear-gradient(180deg,rgba(30,26,23,0) 0%,rgba(30,26,23,.72) 62%,rgba(30,26,23,.86) 100%);
  color:#fff;
}
.page-home .hero-a__word{
  margin:0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(26px,4vw,38px);
  letter-spacing:.06em;
}
.page-home .hero-a__sub{margin:6px 0 0;font-size:13px;letter-spacing:.14em;color:var(--hy-gold-light);}

.page-home .hero-b{background:linear-gradient(160deg,#fff 0%,var(--hy-cream) 58%,rgba(242,227,179,.34) 100%);}
.page-home .hero-c{padding:16px 16px 18px;}
.page-home .hero-c__shot{position:relative;height:150px;border-radius:18px;overflow:hidden;background:var(--hy-sand);}
.page-home .hero-c__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.page-home .hero-c__status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0;
  padding:8px 12px;
  border-radius:var(--hy-r-pill);
  background:var(--hy-teal-light);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:#1f6f66;
}
.page-home .hero-c__text{margin:10px 2px 0;font-size:13.5px;color:var(--hy-muted);}

.page-home .home-dot{
  width:8px;height:8px;flex:0 0 8px;
  border-radius:50%;
  background:var(--hy-teal);
  box-shadow:0 0 0 0 rgba(42,157,143,.5);
  animation:home-pulse 2.4s ease-in-out infinite;
}
@keyframes home-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(42,157,143,.45);}
  50%{box-shadow:0 0 0 6px rgba(42,157,143,0);}
}

.page-home .hero-d{background:var(--hy-sand);border-color:rgba(30,26,23,.08);}
.page-home .hero-d__title{font-size:clamp(19px,2.4vw,22px);}

.page-home .hero-path{position:relative;margin-top:clamp(26px,4vw,46px);padding-top:8px;}
.page-home .hero-path__svg{display:none;width:100%;height:90px;}
.page-home .hero-path__line{
  fill:none;
  stroke:var(--hy-gold);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:home-draw 2.2s ease-out .25s forwards;
}
@keyframes home-draw{to{stroke-dashoffset:0;}}
.page-home .hero-path__list{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-home .hero-path__list li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--hy-muted);
}
.page-home .hero-path__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--hy-red);
  border:2px solid var(--hy-gold);
  font-family:var(--hy-font-num);
  font-size:13px;
  font-weight:700;
  color:#fff;
}
.page-home .hero-path__t{font-weight:600;color:var(--hy-ink);}

.page-home .home-section{padding:clamp(40px,6vw,74px) 0;background:var(--hy-cream);}
.page-home .home-section--sand{background:var(--hy-sand);}
.page-home .home-rule{
  height:8px;
  border-radius:var(--hy-r-pill);
  background:var(--home-band-fade);
  margin-bottom:clamp(22px,3vw,34px);
}

.page-home .sec-head{max-width:64ch;margin-bottom:clamp(24px,3.4vw,38px);}
.page-home .sec-head h2,
.page-home .split__main h2{
  margin:10px 0 0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(24px,4.4vw,44px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--hy-ink);
}
.page-home .sec-lead{
  margin:14px 0 0;
  font-size:16px;
  line-height:1.85;
  color:var(--hy-muted);
}

.page-home .order-list{margin:0;padding:0;list-style:none;display:grid;gap:14px;}
.page-home .order-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  padding:22px;
  border-radius:var(--hy-r-xl);
  background:#fff;
  border:1px solid var(--hy-line-soft);
  border-left:5px solid var(--hy-red);
  transition:border-left-color .3s ease,transform .3s ease;
}
.page-home .order-item:hover{border-left-color:var(--hy-gold);transform:translateX(4px);}
.page-home .order-item__num{
  font-family:var(--hy-font-num);
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--hy-gold);
  letter-spacing:.02em;
}
.page-home .order-item__body h3{
  margin:0;
  font-family:var(--hy-font-display);
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--hy-ink);
}
.page-home .order-item__body p{margin:8px 0 0;font-size:15px;line-height:1.85;color:var(--hy-muted);}

.page-home .split{display:grid;grid-template-columns:1fr;gap:clamp(22px,3.4vw,40px);}
.page-home .split__next{margin:18px 0 0;font-size:15px;line-height:1.85;color:var(--hy-muted);}
.page-home .split__main .hy-btn{margin-top:18px;}

.page-home .state-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.page-home .state-list li{
  padding:12px 14px;
  border-radius:var(--hy-r-md);
  background:#fff;
  border:1px solid var(--hy-line-soft);
  font-size:14.5px;
  line-height:1.8;
  color:var(--hy-muted);
}
.page-home .state-list .hy-tag{margin-right:8px;}

.page-home .snap-card{
  margin:0;
  padding:14px;
  border-radius:var(--hy-r-xl);
  background:#fff;
  border:1px solid var(--hy-line-soft);
  box-shadow:var(--home-card-sh);
}
.page-home .snap-card img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  background:var(--hy-sand);
}
.page-home .snap-card figcaption{
  margin:12px 4px 0;
  font-size:13px;
  line-height:1.7;
  color:var(--hy-muted);
}
.page-home .tip-card{
  margin-top:16px;
  padding:18px 20px;
  border-radius:var(--hy-r-md);
  background:linear-gradient(135deg,rgba(242,227,179,.6),rgba(253,251,247,.9));
  border:1px solid rgba(212,175,55,.42);
}
.page-home .tip-card__k{margin:0;font-family:var(--hy-font-display);font-weight:800;font-size:15px;color:var(--hy-red-deep);}
.page-home .tip-card__v{margin:8px 0 0;font-size:13.5px;line-height:1.8;color:var(--hy-muted);}

.page-home .fact-list{margin:20px 0 0;padding:0;display:grid;gap:0;}
.page-home .fact-list__row{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:14px 0;
  border-bottom:1px dashed rgba(30,26,23,.14);
}
.page-home .fact-list__row:first-child{border-top:1px dashed rgba(30,26,23,.14);}
.page-home .fact-list dt{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--hy-gold);
  font-weight:700;
}
.page-home .fact-list dd{margin:0;font-size:15px;line-height:1.8;color:var(--hy-ink);}

.page-home .device-frame{
  padding:16px;
  border-radius:var(--hy-r-xl);
  background:linear-gradient(170deg,#fff 0%,var(--hy-cream) 100%);
  border:1px solid var(--hy-line-soft);
  box-shadow:var(--hy-shadow-1);
  max-width:340px;
  margin:0 auto;
}
.page-home .device-frame__bar{display:flex;gap:6px;padding:2px 4px 14px;}
.page-home .device-frame__bar span{width:8px;height:8px;border-radius:50%;background:var(--hy-sand);}
.page-home .device-frame__bar span:first-child{background:var(--hy-red);}
.page-home .device-frame__bar span:nth-child(2){background:var(--hy-gold);}
.page-home .device-frame__bar span:nth-child(3){background:var(--hy-teal);}
.page-home .device-frame__grid{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.page-home .device-frame__grid li{
  padding:12px 10px;
  border-radius:14px;
  background:var(--hy-sand);
  font-size:12.5px;
  color:var(--hy-ink);
  text-align:center;
  border:1px solid rgba(255,255,255,.7);
}
.page-home .device-frame__foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 0;
  padding:9px 12px;
  border-radius:var(--hy-r-pill);
  background:var(--hy-teal-light);
  font-size:12px;
  font-weight:600;
  color:#1f6f66;
}

.page-home .quick-pair{display:grid;grid-template-columns:1fr;gap:var(--home-gap);}
.page-home .quick-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--hy-r-xl);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--hy-line-soft);
  box-shadow:var(--home-card-sh);
}
.page-home .quick-card__art{height:170px;overflow:hidden;background:var(--hy-sand);}
.page-home .quick-card__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.page-home .quick-card:hover .quick-card__art img{transform:scale(1.04);}
.page-home .quick-card__body{padding:22px;flex:1 1 auto;}
.page-home .quick-card__body h3{
  margin:0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(19px,2.6vw,23px);
  color:var(--hy-ink);
}
.page-home .quick-card__body p{margin:10px 0 0;font-size:15px;line-height:1.85;color:var(--hy-muted);}
.page-home .quick-card__body .hy-btn{margin-top:16px;}
.page-home .quick-card__note{
  margin:0 22px 22px;
  padding:14px 16px;
  border-radius:var(--hy-r-md);
  background:var(--hy-teal-light);
  border-left:4px solid var(--hy-teal);
}
.page-home .quick-card__k{margin:0;font-size:13.5px;font-weight:700;color:#1f6f66;}
.page-home .quick-card__v{margin:6px 0 0;font-size:13px;line-height:1.7;color:#2f6f68;}

.page-home .home-band{
  padding:clamp(26px,4vw,40px) 0;
  background:linear-gradient(120deg,var(--hy-red) 0%,var(--hy-red-deep) 100%);
}
.page-home .band-list{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 14px;
}
.page-home .band-list li{display:flex;flex-direction:column;gap:6px;}
.page-home .band-num{
  font-family:var(--hy-font-num);
  font-size:clamp(24px,3.6vw,34px);
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
  line-height:1;
}
.page-home .band-label{font-size:12.5px;letter-spacing:.06em;color:rgba(253,251,247,.82);}

.page-home .shortcut-list{
  margin:0;padding:0;list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-home .shortcut{
  display:inline-block;
  padding:11px 20px;
  border-radius:var(--hy-r-pill);
  background:#fff;
  border:1px solid var(--hy-line);
  font-size:14px;
  color:var(--hy-ink);
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.page-home .shortcut:hover{
  background:var(--hy-red);
  border-color:var(--hy-red);
  color:#fff;
  transform:translateY(-2px);
}
.page-home .shortcut-hint{
  margin:20px 0 0;
  padding:14px 18px;
  border-radius:var(--hy-r-md);
  background:var(--hy-teal-light);
  font-size:14px;
  line-height:1.8;
  color:#2f6f68;
}

@media (min-width:720px){
  .page-home .hero-collage{grid-template-columns:1fr 1fr;}
  .page-home .hero-a{grid-column:1 / 2;height:360px;}
  .page-home .hero-b{grid-column:2 / 3;}
  .page-home .hero-c{grid-column:1 / 2;}
  .page-home .hero-d{grid-column:2 / 3;}
  .page-home .hero-c__shot{height:186px;}
  .page-home .order-item{grid-template-columns:auto 1fr;padding:26px 28px;}
  .page-home .order-item__num{font-size:42px;}
  .page-home .fact-list__row{grid-template-columns:130px 1fr;gap:14px;align-items:baseline;}
  .page-home .quick-pair{grid-template-columns:1fr 1fr;}
  .page-home .band-list{grid-template-columns:repeat(4,1fr);}
  .page-home .hero-path__svg{display:block;}
  .page-home .hero-path__list{position:absolute;left:0;right:0;bottom:14px;}
}

@media (min-width:960px){
  .page-home .hero-collage{grid-template-columns:repeat(12,1fr);gap:18px;}
  .page-home .hero-a{grid-column:1 / 6;grid-row:1 / 3;height:auto;min-height:420px;}
  .page-home .hero-b{grid-column:6 / 10;grid-row:1;min-height:240px;}
  .page-home .hero-c{grid-column:10 / 13;grid-row:1 / 3;align-self:start;margin-top:120px;min-height:300px;}
  .page-home .hero-d{grid-column:6 / 10;grid-row:2;min-height:220px;}
  .page-home .hero-c__shot{height:170px;}
  .page-home .split{grid-template-columns:1.15fr .85fr;align-items:start;}
  .page-home .split--flip{grid-template-columns:.9fr 1.1fr;}
  .page-home .split--flip .split__main{order:1;}
  .page-home .split--flip .split__aside{order:2;}
  .page-home .order-item{grid-template-columns:96px 1fr;gap:22px;}
  .page-home .order-item__num{font-size:52px;}
  .page-home .quick-card__art{height:200px;}
}

@media (min-width:1200px){
  .page-home .hero-b{padding:26px 28px;}
  .page-home .hero-d{padding:24px 28px;}
  .page-home .hero-num{min-width:92px;height:64px;font-size:46px;}
  .page-home .hero-num--sm{min-width:70px;height:50px;font-size:30px;}
}

@media (prefers-reduced-motion:reduce){
  .page-home .hero-path__line{animation:none;stroke-dashoffset:0;}
  .page-home .home-dot{animation:none;}
  .page-home .hero-card,
  .page-home .order-item,
  .page-home .shortcut,
  .page-home .quick-card__art img{transition:none;}
  .page-home .hero-card:hover{transform:none;}
  .page-home .order-item:hover{transform:none;}
  .page-home .shortcut:hover{transform:none;}
  .page-home .quick-card:hover .quick-card__art img{transform:none;}
}

<main id="main-content" class="page-home">
  <section class="home-hero" aria-labelledby="hero-title">
    <div class="hy-container">
      <nav class="hy-breadcrumb" aria-label="当前位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">入口顺位</li>
        </ol>
      </nav>

      <div class="hero-head">
        <p class="hy-eyebrow">鸿运国际 · 二〇二五年三月版入口</p>
        <h1 id="hero-title">今天先点哪里，一眼就有答案</h1>
        <p class="hero-lead">出门前用手机扫一眼栏目有没有动，坐回工位再对着两个版本逐条找差异。鸿运国际把这两个动作放在最前面，你不必记菜单，也不用先问人从哪儿进去。</p>
      </div>

      <div class="hero-collage">
        <article class="hero-card hero-a">
          <img src="{zhanqunpic:h:1100w:900}" width="900" height="1100" alt="抽象光带穿过对称门廊，暖白与鸿运红交界处透出鎏金光，画面无人像与文字">
          <div class="hero-a__veil">
            <p class="hero-a__word">一路澄明</p>
            <p class="hero-a__sub">入口有序，路径不断</p>
          </div>
        </article>

        <article class="hero-card hero-b">
          <span class="hero-num" aria-hidden="true">01</span>
          <h2 class="hero-b__title">会员中心</h2>
          <p class="hero-b__text">进来先落在这里。2016 年上线至今，两个版本并排摆开，按栏目结构、入口位置、内容条目三条线找差异。</p>
          <a class="hy-btn hy-btn--primary" href="/tools/">看版本差异</a>
        </article>

        <article class="hero-card hero-c">
          <div class="hero-c__shot">
            <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="手持设备屏幕局部，屏幕内整齐排列的栏目格子上悬着一条澄明青状态条，无可辨识面部">
          </div>
          <p class="hero-c__status"><span class="home-dot" aria-hidden="true"></span>刚刚校验 · 86 个二级栏目已对齐</p>
          <p class="hero-c__text">手机竖屏和桌面横屏，看到的是同一批栏目。</p>
        </article>

        <article class="hero-card hero-d">
          <span class="hero-num hero-num--sm" aria-hidden="true">02</span>
          <h2 class="hero-d__title">检索框在第 2 位</h2>
          <p class="hero-d__text">会员中心、帮助中心、资料下载三类内容一次搜到，命中结果按所属栏目分组，单页最多列 20 条。</p>
        </article>
      </div>

      <div class="hero-path">
        <svg class="hero-path__svg" viewBox="0 0 1200 90" preserveAspectRatio="none" aria-hidden="true" focusable="false">
          <path class="hero-path__line" d="M12 72 C 250 8, 430 86, 620 42 S 980 6, 1188 54"></path>
        </svg>
        <ol class="hero-path__list">
          <li><span class="hero-path__n">01</span><span class="hero-path__t">会员中心</span></li>
          <li><span class="hero-path__n">02</span><span class="hero-path__t">检索框</span></li>
          <li><span class="hero-path__n">03</span><span class="hero-path__t">底部快捷区</span></li>
        </ol>
      </div>
    </div>
  </section>

  <section class="home-section" id="order" aria-labelledby="sec-order" data-reveal>
    <div class="hy-container">
      <div class="home-rule" aria-hidden="true"></div>
      <div class="sec-head">
        <p class="hy-eyebrow">入口顺位</p>
        <h2 id="sec-order">从 01 走到 03，中间不用折返</h2>
        <p class="sec-lead">顺序不是随手排的：最常做的一步放最前，找具体东西的一步放中间，需要文件或需要人回应的一步收在页面尾部。你顺着往下走，每一步都接着上一步的结果。</p>
      </div>

      <ol class="order-list">
        <li class="order-item">
          <span class="order-item__num" aria-hidden="true">01</span>
          <div class="order-item__body">
            <h3>会员中心：先把进度看明白</h3>
            <p>每天固定打开的人，第一件事往往不是找资料，是确认这一批栏目有没有变。会员中心把这个判断放在最显眼处，两个版本的差异直接标出来，新增、调整、下线各有自己的颜色，不用逐页翻。</p>
          </div>
        </li>
        <li class="order-item">
          <span class="order-item__num" aria-hidden="true">02</span>
          <div class="order-item__body">
            <h3>检索框：知道名字就直接搜</h3>
            <p>导航栏第二位常驻一个检索框，输入栏目名、文档名或问题里的关键词都行。结果按会员中心、帮助中心、资料下载三组归类，第一页就能判断该点哪一条，不必在栏目之间绕。</p>
          </div>
        </li>
        <li class="order-item">
          <span class="order-item__num" aria-hidden="true">03</span>
          <div class="order-item__body">
            <h3>底部快捷区：要文件、要人回应</h3>
            <p>资料下载和帮助中心联系入口并排收在页面底部，一张卡管文件，一张卡管提问。前面两步没解决的事，走到这里基本能收尾。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="home-section home-section--sand" id="compare" aria-labelledby="sec-compare" data-reveal>
    <div class="hy-container">
      <div class="home-rule" aria-hidden="true"></div>
      <div class="split">
        <div class="split__main">
          <p class="hy-eyebrow">版本对照</p>
          <h2 id="sec-compare">两个版本差在哪，三种颜色告诉你</h2>
          <p class="sec-lead">并排打开之后，先看栏目结构有没有增减，再看入口位置有没有挪动，最后看内容条目改了哪几句。三种维度各自成列，互不干扰。</p>
          <ul class="state-list">
            <li><span class="hy-tag hy-tag--red">新增</span>这一版才出现的栏目或条目，通常伴随入口位置的调整。</li>
            <li><span class="hy-tag">调整</span>名字没变、位置或说法变了，对照时最容易被漏掉的一类。</li>
            <li><span class="hy-tag hy-tag--teal">下线</span>已经撤掉的内容，仍保留记录，方便你回头查为什么找不到。</li>
          </ul>
          <p class="split__next">想直接上手比对，可以到工具中心切换双列并排、单列查看或只看差异三种视图。</p>
          <a class="hy-btn hy-btn--primary" href="/tools/">进入对照查找</a>
        </div>
        <aside class="split__aside">
          <figure class="snap-card">
            <img src="{zhanqunpic:h:760w:1200}" width="1200" height="760" alt="左右并排的两列界面示意，差异处用红、金、青三色小标签标注，不含真实品牌标识" loading="lazy" decoding="async">
            <figcaption>差异标注按新增、调整、下线三态区分，扫一眼就知道哪几行要重点看。</figcaption>
          </figure>
          <div class="tip-card">
            <p class="tip-card__k">每季度一次小版本，每年一次大版本</p>
            <p class="tip-card__v">累计已发布 27 个版本，每次更新的说明文档都能在资料下载区按批次找到。</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="home-section" id="sync" aria-labelledby="sec-sync" data-reveal>
    <div class="hy-container">
      <div class="home-rule" aria-hidden="true"></div>
      <div class="split split--flip">
        <div class="split__main">
          <p class="hy-eyebrow">多端同步</p>
          <h2 id="sec-sync">手机上看到的，电脑上也一样</h2>
          <p class="sec-lead">通勤路上用手机翻，回到工位换成大屏继续，栏目不会换一批。同步状态每十五分钟校验一次，页面上会写明最近一次对齐了多少个栏目。</p>
          <dl class="fact-list">
            <div class="fact-list__row">
              <dt>栏目规模</dt>
              <dd>12 个一级栏目、86 个二级栏目，两端展示同一套结构</dd>
            </div>
            <div class="fact-list__row">
              <dt>校验节奏</dt>
              <dd>每十五分钟比对一次，状态条变青即表示已对齐</dd>
            </div>
            <div class="fact-list__row">
              <dt>访问稳定</dt>
              <dd>双节点部署，年度可用性维持在 99.95%</dd>
            </div>
          </dl>
          <p class="split__next">想了解同步机制怎么运转、什么时候会有变化，可以看主题专栏里的系列观察。</p>
          <a class="hy-btn hy-btn--ghost" href="/topics/">看同步观察</a>
        </div>
        <aside class="split__aside">
          <div class="device-frame">
            <div class="device-frame__bar" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
            <ul class="device-frame__grid">
              <li>品牌与历程</li>
              <li>工具与资料</li>
              <li>专题与答疑</li>
              <li>合作与联系</li>
              <li>版本说明</li>
              <li>操作清单</li>
              <li>常见问题</li>
              <li>入口指引</li>
            </ul>
            <p class="device-frame__foot"><span class="home-dot" aria-hidden="true"></span>两端栏目一致 · 最近一次校验 15 分钟内</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="home-section home-section--sand" id="quick" aria-labelledby="sec-quick" data-reveal>
    <div class="hy-container">
      <div class="home-rule" aria-hidden="true"></div>
      <div class="sec-head">
        <p class="hy-eyebrow">底部快捷区 · 03</p>
        <h2 id="sec-quick">要文件去左边，要人回话去右边</h2>
        <p class="sec-lead">翻到页面最下面，两张宽卡并排。手里缺材料就走资料那一张，问题没找到答案就走答疑那一张。</p>
      </div>

      <div class="quick-pair">
        <article class="quick-card">
          <div class="quick-card__art">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="半开的档案夹与层叠资料卡，卡面有分类色边，浅灰金桌面，光线自右上方进入" loading="lazy" decoding="async">
          </div>
          <div class="quick-card__body">
            <h3>资料下载</h3>
            <p>240 余份文档分四类归档：入口指引看第一步点哪里，版本说明看这一版改了什么，常见问题应对临时状况，操作清单适合打印出来贴在手边。可按栏目、文档类型、更新批次三种方式筛。</p>
            <a class="hy-btn hy-btn--quiet" href="/tools/">去找文档</a>
          </div>
        </article>

        <article class="quick-card quick-card--teal">
          <div class="quick-card__body">
            <h3>帮助中心联系入口</h3>
            <p>320 条问答按九个主题整理，从对照结果对不上到手机端看起来没更新，多数情况读一条就能继续往下走。确实需要人来跟进，页面下方给出邮箱和电话，工作日九点到十八点有人值守。</p>
            <a class="hy-btn hy-btn--ghost" href="/knowledge/">提问与排障</a>
          </div>
          <div class="quick-card__note">
            <p class="quick-card__k">四十六人服务团队 · 工作日在线</p>
            <p class="quick-card__v">邮件咨询在工作日四小时内给出首次回复。</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="home-band" aria-label="服务规模" data-reveal>
    <div class="hy-container">
      <ul class="band-list">
        <li><span class="band-num">96 万</span><span class="band-label">累计注册会员</span></li>
        <li><span class="band-num">31 个</span><span class="band-label">省级行政区覆盖</span></li>
        <li><span class="band-num">46 人</span><span class="band-label">会员服务团队</span></li>
        <li><span class="band-num">27 个</span><span class="band-label">已发布版本</span></li>
      </ul>
    </div>
  </section>

  <section class="home-section" id="shortcut" aria-labelledby="sec-shortcut" data-reveal>
    <div class="hy-container">
      <div class="home-rule" aria-hidden="true"></div>
      <div class="sec-head">
        <p class="hy-eyebrow">常用动作速查</p>
        <h2 id="sec-shortcut">手上有明确目标，直接跳过去</h2>
        <p class="sec-lead">常来的访客大多已经知道自己要做什么，下面几个入口对应最常见的几种情形。</p>
      </div>
      <ul class="shortcut-list">
        <li><a class="shortcut" href="/tools/">比对两个版本的差异</a></li>
        <li><a class="shortcut" href="/tools/">确认手机端栏目是否同步</a></li>
        <li><a class="shortcut" href="/knowledge/">对照结果对不上，找答案</a></li>
        <li><a class="shortcut" href="/cooperation/">找会员中心对接人</a></li>
        <li><a class="shortcut" href="/topics/">追版本迭代与入口调整</a></li>
        <li><a class="shortcut" href="/culture/">了解品牌沿革与团队</a></li>
      </ul>
      <p class="shortcut-hint">记不清名字也没关系，导航栏第二位的检索框里输入你印象中的说法，结果会按栏目归类排出来。</p>
    </div>
  </section>
</main>

.page-home{
  --home-gap:clamp(14px,2.4vw,20px);
  --home-band-fade:linear-gradient(90deg,var(--hy-red) 0%,var(--hy-red) 42%,rgba(200,16,46,.18) 78%,rgba(200,16,46,0) 100%);
  --home-card-sh:0 18px 38px -30px rgba(30,26,23,.55);
}

.page-home .home-hero{
  padding:clamp(20px,3.4vw,40px) 0 clamp(44px,6vw,76px);
  background:
    radial-gradient(120% 78% at 10% -6%,rgba(212,175,55,.16),transparent 62%),
    radial-gradient(90% 60% at 100% 8%,rgba(42,157,143,.10),transparent 58%),
    linear-gradient(180deg,var(--hy-cream) 0%,#fffdfa 100%);
  border-bottom:1px solid var(--hy-line-soft);
}

.page-home .hero-head{max-width:880px;margin:clamp(18px,3vw,30px) 0 clamp(24px,3.4vw,38px);}
.page-home .hero-head h1{
  margin:10px 0 0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(34px,6.2vw,68px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--hy-ink);
}
.page-home .hero-lead{
  margin:18px 0 0;
  max-width:30em;
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.85;
  color:var(--hy-muted);
}

.page-home .hero-collage{display:grid;grid-template-columns:1fr;gap:var(--home-gap);}

.page-home .hero-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--hy-r-xl);
  border:1px solid var(--hy-line-soft);
  background:var(--hy-cream);
  box-shadow:var(--home-card-sh);
  padding:22px;
  transition:transform .32s ease,box-shadow .32s ease,border-radius .32s ease;
}
.page-home .hero-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--hy-shadow-2);
  border-radius:22px;
}
.page-home .hero-card h2{
  margin:10px 0 0;
  font-family:var(--hy-font-display);
  font-weight:800;
  font-size:clamp(20px,2.6vw,24px);
  letter-spacing:-.01em;
  color:var(--hy-ink);
}
.page-home .hero-card p{margin:10px 0 0;font-size:15px;line-height:1.8;color:var(--hy-muted);}
.page-home .hero-card .hy-btn{margin-top:16px;}

.page-home .hero-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:58px;
  padding:0 12px;
  border-radius:var(--hy-r-md);
  background:var(--hy-sand);
  border:1px solid rgba(212,175,55,.55);
  font-family:var(--hy-font-num);
  font-size:40px;
  font-weight:700;
  line-height:1;
  color:var(--hy-red);
  letter-spacing:.02em;
}
.page-home .hero-num--sm{min-width:62px;height:46px;font-size:28px;}

.page-home .hero-a{height:300px;padding:0;background:var(--hy-red-deep);}
.page-home .hero-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.page-home .hero-a__veil{
  position:absolute;
  inset:auto 0 0 0;
  padding:26px 22px 22px;
  background:linear-gradient(180deg,rgba(30,26,23,0) 0%,rgba(30,26,23,.72) 62%,rgba(30,26,23,.86) 100%);
  color:#fff;
}
.page-home .hero-a__word{
  margin:0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(26px,4vw,38px);
  letter-spacing:.06em;
}
.page-home .hero-a__sub{margin:6px 0 0;font-size:13px;letter-spacing:.14em;color:var(--hy-gold-light);}

.page-home .hero-b{background:linear-gradient(160deg,#fff 0%,var(--hy-cream) 58%,rgba(242,227,179,.34) 100%);}
.page-home .hero-c{padding:16px 16px 18px;}
.page-home .hero-c__shot{position:relative;height:150px;border-radius:18px;overflow:hidden;background:var(--hy-sand);}
.page-home .hero-c__shot img{width:100%;height:100%;object-fit:cover;display:block;}
.page-home .hero-c__status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0;
  padding:8px 12px;
  border-radius:var(--hy-r-pill);
  background:var(--hy-teal-light);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:#1f6f66;
}
.page-home .hero-c__text{margin:10px 2px 0;font-size:13.5px;color:var(--hy-muted);}

.page-home .home-dot{
  width:8px;height:8px;flex:0 0 8px;
  border-radius:50%;
  background:var(--hy-teal);
  box-shadow:0 0 0 0 rgba(42,157,143,.5);
  animation:home-pulse 2.4s ease-in-out infinite;
}
@keyframes home-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(42,157,143,.45);}
  50%{box-shadow:0 0 0 6px rgba(42,157,143,0);}
}

.page-home .hero-d{background:var(--hy-sand);border-color:rgba(30,26,23,.08);}
.page-home .hero-d__title{font-size:clamp(19px,2.4vw,22px);}

.page-home .hero-path{position:relative;margin-top:clamp(26px,4vw,46px);padding-top:8px;}
.page-home .hero-path__svg{display:none;width:100%;height:90px;}
.page-home .hero-path__line{
  fill:none;
  stroke:var(--hy-gold);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:home-draw 2.2s ease-out .25s forwards;
}
@keyframes home-draw{to{stroke-dashoffset:0;}}
.page-home .hero-path__list{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-home .hero-path__list li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--hy-muted);
}
.page-home .hero-path__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--hy-red);
  border:2px solid var(--hy-gold);
  font-family:var(--hy-font-num);
  font-size:13px;
  font-weight:700;
  color:#fff;
}
.page-home .hero-path__t{font-weight:600;color:var(--hy-ink);}

.page-home .home-section{padding:clamp(40px,6vw,74px) 0;background:var(--hy-cream);}
.page-home .home-section--sand{background:var(--hy-sand);}
.page-home .home-rule{
  height:8px;
  border-radius:var(--hy-r-pill);
  background:var(--home-band-fade);
  margin-bottom:clamp(22px,3vw,34px);
}

.page-home .sec-head{max-width:64ch;margin-bottom:clamp(24px,3.4vw,38px);}
.page-home .sec-head h2,
.page-home .split__main h2{
  margin:10px 0 0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(24px,4.4vw,44px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--hy-ink);
}
.page-home .sec-lead{
  margin:14px 0 0;
  font-size:16px;
  line-height:1.85;
  color:var(--hy-muted);
}

.page-home .order-list{margin:0;padding:0;list-style:none;display:grid;gap:14px;}
.page-home .order-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  padding:22px;
  border-radius:var(--hy-r-xl);
  background:#fff;
  border:1px solid var(--hy-line-soft);
  border-left:5px solid var(--hy-red);
  transition:border-left-color .3s ease,transform .3s ease;
}
.page-home .order-item:hover{border-left-color:var(--hy-gold);transform:translateX(4px);}
.page-home .order-item__num{
  font-family:var(--hy-font-num);
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--hy-gold);
  letter-spacing:.02em;
}
.page-home .order-item__body h3{
  margin:0;
  font-family:var(--hy-font-display);
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--hy-ink);
}
.page-home .order-item__body p{margin:8px 0 0;font-size:15px;line-height:1.85;color:var(--hy-muted);}

.page-home .split{display:grid;grid-template-columns:1fr;gap:clamp(22px,3.4vw,40px);}
.page-home .split__next{margin:18px 0 0;font-size:15px;line-height:1.85;color:var(--hy-muted);}
.page-home .split__main .hy-btn{margin-top:18px;}

.page-home .state-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.page-home .state-list li{
  padding:12px 14px;
  border-radius:var(--hy-r-md);
  background:#fff;
  border:1px solid var(--hy-line-soft);
  font-size:14.5px;
  line-height:1.8;
  color:var(--hy-muted);
}
.page-home .state-list .hy-tag{margin-right:8px;}

.page-home .snap-card{
  margin:0;
  padding:14px;
  border-radius:var(--hy-r-xl);
  background:#fff;
  border:1px solid var(--hy-line-soft);
  box-shadow:var(--home-card-sh);
}
.page-home .snap-card img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  background:var(--hy-sand);
}
.page-home .snap-card figcaption{
  margin:12px 4px 0;
  font-size:13px;
  line-height:1.7;
  color:var(--hy-muted);
}
.page-home .tip-card{
  margin-top:16px;
  padding:18px 20px;
  border-radius:var(--hy-r-md);
  background:linear-gradient(135deg,rgba(242,227,179,.6),rgba(253,251,247,.9));
  border:1px solid rgba(212,175,55,.42);
}
.page-home .tip-card__k{margin:0;font-family:var(--hy-font-display);font-weight:800;font-size:15px;color:var(--hy-red-deep);}
.page-home .tip-card__v{margin:8px 0 0;font-size:13.5px;line-height:1.8;color:var(--hy-muted);}

.page-home .fact-list{margin:20px 0 0;padding:0;display:grid;gap:0;}
.page-home .fact-list__row{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:14px 0;
  border-bottom:1px dashed rgba(30,26,23,.14);
}
.page-home .fact-list__row:first-child{border-top:1px dashed rgba(30,26,23,.14);}
.page-home .fact-list dt{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--hy-gold);
  font-weight:700;
}
.page-home .fact-list dd{margin:0;font-size:15px;line-height:1.8;color:var(--hy-ink);}

.page-home .device-frame{
  padding:16px;
  border-radius:var(--hy-r-xl);
  background:linear-gradient(170deg,#fff 0%,var(--hy-cream) 100%);
  border:1px solid var(--hy-line-soft);
  box-shadow:var(--hy-shadow-1);
  max-width:340px;
  margin:0 auto;
}
.page-home .device-frame__bar{display:flex;gap:6px;padding:2px 4px 14px;}
.page-home .device-frame__bar span{width:8px;height:8px;border-radius:50%;background:var(--hy-sand);}
.page-home .device-frame__bar span:first-child{background:var(--hy-red);}
.page-home .device-frame__bar span:nth-child(2){background:var(--hy-gold);}
.page-home .device-frame__bar span:nth-child(3){background:var(--hy-teal);}
.page-home .device-frame__grid{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.page-home .device-frame__grid li{
  padding:12px 10px;
  border-radius:14px;
  background:var(--hy-sand);
  font-size:12.5px;
  color:var(--hy-ink);
  text-align:center;
  border:1px solid rgba(255,255,255,.7);
}
.page-home .device-frame__foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 0;
  padding:9px 12px;
  border-radius:var(--hy-r-pill);
  background:var(--hy-teal-light);
  font-size:12px;
  font-weight:600;
  color:#1f6f66;
}

.page-home .quick-pair{display:grid;grid-template-columns:1fr;gap:var(--home-gap);}
.page-home .quick-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--hy-r-xl);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--hy-line-soft);
  box-shadow:var(--home-card-sh);
}
.page-home .quick-card__art{height:170px;overflow:hidden;background:var(--hy-sand);}
.page-home .quick-card__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.page-home .quick-card:hover .quick-card__art img{transform:scale(1.04);}
.page-home .quick-card__body{padding:22px;flex:1 1 auto;}
.page-home .quick-card__body h3{
  margin:0;
  font-family:var(--hy-font-display);
  font-weight:900;
  font-size:clamp(19px,2.6vw,23px);
  color:var(--hy-ink);
}
.page-home .quick-card__body p{margin:10px 0 0;font-size:15px;line-height:1.85;color:var(--hy-muted);}
.page-home .quick-card__body .hy-btn{margin-top:16px;}
.page-home .quick-card__note{
  margin:0 22px 22px;
  padding:14px 16px;
  border-radius:var(--hy-r-md);
  background:var(--hy-teal-light);
  border-left:4px solid var(--hy-teal);
}
.page-home .quick-card__k{margin:0;font-size:13.5px;font-weight:700;color:#1f6f66;}
.page-home .quick-card__v{margin:6px 0 0;font-size:13px;line-height:1.7;color:#2f6f68;}

.page-home .home-band{
  padding:clamp(26px,4vw,40px) 0;
  background:linear-gradient(120deg,var(--hy-red) 0%,var(--hy-red-deep) 100%);
}
.page-home .band-list{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 14px;
}
.page-home .band-list li{display:flex;flex-direction:column;gap:6px;}
.page-home .band-num{
  font-family:var(--hy-font-num);
  font-size:clamp(24px,3.6vw,34px);
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
  line-height:1;
}
.page-home .band-label{font-size:12.5px;letter-spacing:.06em;color:rgba(253,251,247,.82);}

.page-home .shortcut-list{
  margin:0;padding:0;list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-home .shortcut{
  display:inline-block;
  padding:11px 20px;
  border-radius:var(--hy-r-pill);
  background:#fff;
  border:1px solid var(--hy-line);
  font-size:14px;
  color:var(--hy-ink);
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.page-home .shortcut:hover{
  background:var(--hy-red);
  border-color:var(--hy-red);
  color:#fff;
  transform:translateY(-2px);
}
.page-home .shortcut-hint{
  margin:20px 0 0;
  padding:14px 18px;
  border-radius:var(--hy-r-md);
  background:var(--hy-teal-light);
  font-size:14px;
  line-height:1.8;
  color:#2f6f68;
}

@media (min-width:720px){
  .page-home .hero-collage{grid-template-columns:1fr 1fr;}
  .page-home .hero-a{grid-column:1 / 2;height:360px;}
  .page-home .hero-b{grid-column:2 / 3;}
  .page-home .hero-c{grid-column:1 / 2;}
  .page-home .hero-d{grid-column:2 / 3;}
  .page-home .hero-c__shot{height:186px;}
  .page-home .order-item{grid-template-columns:auto 1fr;padding:26px 28px;}
  .page-home .order-item__num{font-size:42px;}
  .page-home .fact-list__row{grid-template-columns:130px 1fr;gap:14px;align-items:baseline;}
  .page-home .quick-pair{grid-template-columns:1fr 1fr;}
  .page-home .band-list{grid-template-columns:repeat(4,1fr);}
  .page-home .hero-path__svg{display:block;}
  .page-home .hero-path__list{position:absolute;left:0;right:0;bottom:14px;}
}

@media (min-width:960px){
  .page-home .hero-collage{grid-template-columns:repeat(12,1fr);gap:18px;}
  .page-home .hero-a{grid-column:1 / 6;grid-row:1 / 3;height:auto;min-height:420px;}
  .page-home .hero-b{grid-column:6 / 10;grid-row:1;min-height:240px;}
  .page-home .hero-c{grid-column:10 / 13;grid-row:1 / 3;align-self:start;margin-top:120px;min-height:300px;}
  .page-home .hero-d{grid-column:6 / 10;grid-row:2;min-height:220px;}
  .page-home .hero-c__shot{height:170px;}
  .page-home .split{grid-template-columns:1.15fr .85fr;align-items:start;}
  .page-home .split--flip{grid-template-columns:.9fr 1.1fr;}
  .page-home .split--flip .split__main{order:1;}
  .page-home .split--flip .split__aside{order:2;}
  .page-home .order-item{grid-template-columns:96px 1fr;gap:22px;}
  .page-home .order-item__num{font-size:52px;}
  .page-home .quick-card__art{height:200px;}
}

@media (min-width:1200px){
  .page-home .hero-b{padding:26px 28px;}
  .page-home .hero-d{padding:24px 28px;}
  .page-home .hero-num{min-width:92px;height:64px;font-size:46px;}
  .page-home .hero-num--sm{min-width:70px;height:50px;font-size:30px;}
}

@media (prefers-reduced-motion:reduce){
  .page-home .hero-path__line{animation:none;stroke-dashoffset:0;}
  .page-home .home-dot{animation:none;}
  .page-home .hero-card,
  .page-home .order-item,
  .page-home .shortcut,
  .page-home .quick-card__art img{transition:none;}
  .page-home .hero-card:hover{transform:none;}
  .page-home .order-item:hover{transform:none;}
  .page-home .shortcut:hover{transform:none;}
  .page-home .quick-card:hover .quick-card__art img{transform:none;}
}