.page-home{
  --home-radius:var(--r-lg);
  --home-hair:rgba(14,59,67,.18);
}

/* ---------- 首屏框景 ---------- */
.page-home .hero{
  padding:clamp(14px,3.5vw,30px) 0 clamp(20px,4vw,40px);
}
.page-home .hero__frame{
  position:relative;
  margin:0 var(--gutter);
  max-width:calc(var(--shell) + 80px);
  border:1px solid var(--line-strong);
  border-radius:var(--home-radius);
  background:
    linear-gradient(158deg,var(--mist) 0%,var(--paper) 58%,var(--paper-orange) 140%);
  padding:clamp(24px,5vw,54px) clamp(18px,4vw,48px) clamp(22px,4vw,44px);
  display:grid;
  gap:clamp(20px,3.4vw,38px);
  overflow:hidden;
  box-shadow:var(--shadow-2);
}
@media (min-width:920px){
  .page-home .hero__frame{
    margin-inline:auto;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:center;
  }
}
.page-home .hero__frame::before{
  content:"";
  position:absolute;
  left:clamp(18px,4vw,48px);
  right:clamp(18px,4vw,48px);
  top:clamp(10px,2vw,18px);
  height:10px;
  background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 13px);
  opacity:.55;
  pointer-events:none;
}
.page-home .hero__frame::after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-110px;
  width:260px;
  height:260px;
  border:1px dashed rgba(242,140,56,.45);
  border-radius:50%;
  pointer-events:none;
}
.page-home .hero__copy{position:relative;z-index:1;min-width:0;}
.page-home .hero__copy .eyebrow{margin:0 0 14px;}
.page-home .hero__copy h1{
  margin:0 0 18px;
  font-size:clamp(30px,7.4vw,66px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--deep);
  max-width:20ch;
}
.page-home .hero__copy .lede{
  margin:0 0 24px;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.8;
}
.page-home .hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
}
.page-home .hero__chips{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-home .hero__chips a{
  display:inline-block;
  padding:7px 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  background:rgba(250,244,232,.6);
  color:var(--deep);
  font-size:13px;
  text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.page-home .hero__chips a:hover,
.page-home .hero__chips a:focus-visible{
  background:var(--deep);
  color:var(--on-deep);
  transform:translateY(-2px);
}
.page-home .hero__figure{
  margin:0;
  min-width:0;
  position:relative;
  z-index:1;
}
.page-home .hero__figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--r-md);
  object-fit:cover;
  aspect-ratio:16/10;
  border:1px solid rgba(14,59,67,.2);
}
@media (min-width:920px){
  .page-home .hero__figure{transform:rotate(-1.6deg);}
}
.page-home .hero__caption{
  display:block;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-mute);
}

/* ---------- 服务分类带 ---------- */
.page-home .band{padding-top:clamp(30px,6vw,64px);}
.page-home .band__head{
  display:grid;
  gap:14px;
  margin-bottom:clamp(20px,3vw,30px);
}
@media (min-width:860px){
  .page-home .band__head{
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    align-items:end;
    gap:32px;
  }
}
.page-home .band__head .eyebrow{margin:0 0 10px;}
.page-home .band__head h2{margin:0;color:var(--deep);}
.page-home .band__note{
  margin:0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.8;
  border-left:2px solid var(--orange);
  padding-left:14px;
}
.page-home .band__tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.page-home .band__tools .filter-bar{flex:1 1 auto;min-width:0;}
.page-home .band__list{
  list-style:none;
  margin:0 0 20px;
  padding:0 0 10px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(232px,78%);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.page-home .band__list > li{scroll-snap-align:start;min-width:0;}
@media (min-width:760px){
  .page-home .band__list{
    grid-auto-flow:row;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-columns:auto;
    overflow:visible;
    padding-bottom:0;
  }
}
@media (min-width:1060px){
  .page-home .band__list{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.page-home .band__card{
  display:flex;
  flex-direction:column;
  gap:6px;
  height:100%;
  padding:18px 18px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  text-decoration:none;
  color:var(--ink);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.page-home .band__card:hover,
.page-home .band__card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(242,140,56,.6);
  box-shadow:var(--shadow-1);
}
.page-home .band__no{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--teal);
}
.page-home .band__name{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--deep);
}
.page-home .band__desc{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
  flex:1 1 auto;
}
.page-home .band__fit{
  font-size:11px;
  color:var(--brick);
  letter-spacing:.04em;
  padding-top:8px;
  border-top:1px dashed var(--home-hair);
}
.page-home .band__more{align-self:flex-start;}
.page-home [data-filter-item][hidden]{display:none;}

/* ---------- 版本对照 ---------- */
.page-home .versions{padding-block:clamp(36px,6.5vw,78px);}
.page-home .versions__head{margin-bottom:clamp(20px,3vw,28px);max-width:60ch;}
.page-home .versions__head .eyebrow{margin:0 0 10px;color:var(--on-deep-soft);}
.page-home .versions__head h2{margin:0 0 12px;color:var(--on-deep);}
.page-home .versions__note{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--on-deep-soft);
}
.page-home .versions__panels{
  display:grid;
  gap:12px;
  margin-bottom:22px;
}
@media (min-width:700px){
  .page-home .versions__panels{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.page-home .vpanel{
  padding:18px 20px;
  border-radius:var(--r-md);
  border:1px solid rgba(250,244,232,.16);
}
.page-home .vpanel--classic{background:rgba(59,51,85,.55);}
.page-home .vpanel--new{
  background:linear-gradient(150deg,rgba(242,140,56,.9),rgba(221,117,32,.92));
  color:#221a12;
  border-color:rgba(250,244,232,.35);
}
.page-home .vpanel__ver{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--on-deep-soft);
}
.page-home .vpanel--new .vpanel__ver{color:rgba(34,26,18,.72);}
.page-home .vpanel__desc{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--on-deep);
}
.page-home .vpanel--new .vpanel__desc{color:#241b12;}
.page-home .versions__filter{margin-bottom:14px;}
.page-home .versions__filter .filter-btn{
  border-color:rgba(250,244,232,.28);
  background:rgba(250,244,232,.08);
  color:var(--on-deep);
}
.page-home .versions__filter .filter-btn[aria-pressed="true"]{
  background:var(--paper-orange);
  border-color:var(--paper-orange);
  color:var(--deep);
}
.page-home .vtable{
  border-top:1px solid rgba(250,244,232,.2);
  margin-bottom:22px;
}
.page-home .vrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px 14px;
  padding:16px 0;
  border-bottom:1px solid rgba(250,244,232,.14);
}
.page-home .vrow--head{display:none;}
.page-home .vrow__k{
  grid-column:1/-1;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--paper-orange);
}
.page-home .vrow__v{
  font-size:14px;
  line-height:1.72;
  color:var(--on-deep);
  min-width:0;
}
.page-home .vrow__v--classic::before{
  content:"经典版 ";
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--on-deep-soft);
}
.page-home .vrow__v--new::before{
  content:"焕新版 ";
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--orange);
}
@media (min-width:860px){
  .page-home .vrow{
    grid-template-columns:180px minmax(0,1fr) minmax(0,1fr);
    align-items:start;
    gap:16px 24px;
    padding:14px 0;
  }
  .page-home .vrow--head{display:grid;border-bottom:1px solid rgba(250,244,232,.28);}
  .page-home .vrow--head .vrow__k{grid-column:auto;}
  .page-home .vrow--head .vrow__v{
    color:var(--on-deep-soft);
    font-size:11px;
    letter-spacing:.12em;
  }
  .page-home .vrow__k{grid-column:auto;color:var(--on-deep);font-weight:600;}
  .page-home .vrow__v--classic::before,
  .page-home .vrow__v--new::before{content:none;}
}
.page-home .versions__cta{
  border-color:rgba(250,244,232,.42);
  color:var(--on-deep);
}
.page-home .versions__cta:hover,
.page-home .versions__cta:focus-visible{
  background:var(--paper-orange);
  color:var(--deep);
  border-color:var(--paper-orange);
}

/* ---------- 家庭速查 ---------- */
.page-home .family{padding-block:clamp(34px,6vw,72px);}
.page-home .family__grid{
  display:grid;
  gap:clamp(20px,3.4vw,40px);
}
@media (min-width:900px){
  .page-home .family__grid{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    align-items:start;
  }
}
.page-home .family__figure{
  margin:0;
  min-width:0;
}
.page-home .family__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--r-md);
  border:1px solid rgba(14,59,67,.16);
}
@media (min-width:900px){
  .page-home .family__figure{position:sticky;top:calc(var(--dock-h) + 24px);}
}
.page-home .family__caption{
  display:block;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-mute);
}
.page-home .family__body .eyebrow{margin:0 0 10px;}
.page-home .family__body h2{margin:0 0 12px;color:var(--deep);}
.page-home .family__note{
  margin:0 0 20px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.8;
  max-width:48ch;
}
.page-home .family__cards{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  gap:10px;
}
@media (min-width:620px){
  .page-home .family__cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1180px){
  .page-home .family__cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.page-home .qcard{
  padding:14px 16px;
  border-radius:var(--r-sm);
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  min-width:0;
}
.page-home .qcard:nth-child(2){border-left-color:var(--orange);}
.page-home .qcard:nth-child(3){border-left-color:var(--brick);}
.page-home .qcard:nth-child(4){border-left-color:var(--indigo);}
.page-home .qcard:nth-child(5){border-left-color:var(--deep);}
.page-home .qcard__name{
  margin:0 0 4px;
  font-size:15px;
  font-weight:800;
  color:var(--deep);
}
.page-home .qcard p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
}
.page-home .family__cta{align-self:flex-start;}

/* ---------- 测试版快报 ---------- */
.page-home .beta{padding-block:clamp(26px,4.5vw,54px);}
.page-home .beta__card{
  display:grid;
  gap:clamp(16px,2.6vw,30px);
  padding:clamp(16px,2.6vw,26px);
  border-radius:var(--home-radius);
  border:1px solid rgba(164,74,63,.28);
  background:
    linear-gradient(140deg,rgba(220,234,242,.72),rgba(250,244,232,.86));
  box-shadow:var(--shadow-1);
}
@media (min-width:820px){
  .page-home .beta__card{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:center;}
}
.page-home .beta__figure{margin:0;min-width:0;}
.page-home .beta__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r-md);
  border:1px solid rgba(14,59,67,.14);
}
.page-home .beta__body .eyebrow{margin:0 0 10px;}
.page-home .beta__body .tag{display:inline-block;margin-bottom:12px;}
.page-home .beta__body h2{margin:0 0 12px;color:var(--wine);font-size:clamp(22px,3.4vw,32px);}
.page-home .beta__note{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.82;
  color:var(--ink-soft);
  max-width:52ch;
}
.page-home .beta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- 为什么从这里开始 ---------- */
.page-home .why{padding-block:clamp(34px,6vw,76px);}
.page-home .why__head{max-width:62ch;margin-bottom:clamp(20px,3vw,32px);}
.page-home .why__head .eyebrow{margin:0 0 10px;}
.page-home .why__head h2{margin:0 0 12px;color:var(--deep);}
.page-home .why__note{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--ink-soft);
}
.page-home .why__list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
@media (min-width:760px){
  .page-home .why__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,56px);}
}
.page-home .why__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "no name"
    "no text";
  column-gap:14px;
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.page-home .why__no{
  grid-area:no;
  font-size:13px;
  color:var(--orange-deep);
  padding-top:3px;
}
.page-home .why__name{
  grid-area:name;
  margin:0 0 4px;
  font-size:17px;
  font-weight:800;
  color:var(--deep);
}
.page-home .why__item p{
  grid-area:text;
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--ink-soft);
}
.page-home .why__story{
  margin:0;
  font-size:14px;
  color:var(--ink-mute);
}
.page-home .why__story a{
  color:var(--deep);
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-underline-offset:4px;
}

/* ---------- 底部公告条 ---------- */
.page-home .noticebar{
  background:var(--paper-orange);
  border-top:1px solid rgba(242,140,56,.4);
  border-bottom:1px solid rgba(242,140,56,.4);
  padding:14px 0;
}
.page-home .noticebar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
}
.page-home .noticebar__label{
  margin:0;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--brick);
}
.page-home .noticebar__text{
  margin:0;
  flex:1 1 240px;
  font-size:14px;
  line-height:1.65;
  color:var(--ink);
}
.page-home .noticebar__link{
  font-size:13px;
  font-weight:700;
  color:var(--deep);
  text-decoration:none;
  border-bottom:2px solid var(--orange);
  padding-bottom:1px;
}
.page-home .noticebar__link:hover,
.page-home .noticebar__link:focus-visible{border-bottom-color:var(--deep);}

/* 返回顶部按钮位置微调 */
.page-home .to-top{bottom:calc(var(--dock-h) + 16px);}

@media (prefers-reduced-motion:reduce){
  .page-home .band__card,
  .page-home .hero__chips a{transition:none;}
  .page-home .band__card:hover{transform:none;}
}
<<<END>>>
