.page-home{
  --home-slant:22px;
  --home-slant-lg:34px;
  display:block;
  color:var(--yh-ink);
}

.page-home *,
.page-home *::before,
.page-home *::after{box-sizing:border-box}

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

.page-home section[id]{scroll-margin-top:132px}

/* ---------- 首屏封面 ---------- */
.home-cover{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "body"
    "art";
  gap:32px;
  max-width:1280px;
  margin-inline:auto;
  padding:30px 20px 62px;
  overflow:hidden;
}

.home-cover::before{
  content:"";
  position:absolute;
  inset:-16% -22% auto -22%;
  height:560px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(52% 66% at 76% 14%, rgba(91,71,214,.5), transparent 70%),
    radial-gradient(42% 56% at 8% 2%, rgba(0,232,206,.16), transparent 74%);
}

.home-cover > *{position:relative;z-index:1}

.home-cover__side{
  grid-area:side;
  display:none;
}

.home-cover__body{grid-area:body;min-width:0}

.home-cover__annot{
  writing-mode:vertical-rl;
  letter-spacing:.26em;
}

.home-cover__index{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.home-cover__index a{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:6px 0 6px 10px;
  border-left:2px solid transparent;
  color:var(--yh-mist);
  text-decoration:none;
  font-size:12px;
  line-height:1.4;
  transition:color .16s var(--yh-ease), border-color .16s var(--yh-ease);
}

.home-cover__index a .yh-mono{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--yh-violet);
  transition:color .16s var(--yh-ease);
}

.home-cover__index a:hover,
.home-cover__index a:focus-visible{
  color:var(--yh-cyan);
  border-left-color:var(--yh-cyan);
}

.home-cover__index a:hover .yh-mono,
.home-cover__index a:focus-visible .yh-mono{color:var(--yh-cyan)}

.home-cover__linktext{white-space:nowrap}

.home-title{
  margin:12px 0 0;
  font-size:clamp(36px,8.6vw,74px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.01em;
  text-shadow:
    0 0 26px rgba(0,232,206,.24),
    0 0 62px rgba(91,71,214,.34);
}

.home-title .yh-accent{
  display:inline-block;
  color:var(--yh-cyan);
  text-shadow:
    0 0 16px rgba(0,232,206,.55),
    0 0 46px rgba(0,232,206,.26);
}

.home-cover__lede{
  margin:22px 0 0;
  max-width:56ch;
  font-size:16px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-cover__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.home-scales{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 20px;
  margin:34px 0 0;
  padding-top:22px;
  border-top:1px solid var(--yh-line);
}

.home-scales__item{min-width:0}

.home-scales dt{
  font-size:12px;
  letter-spacing:.05em;
  color:var(--yh-mist);
}

.home-scales dd{
  margin:6px 0 0;
  font-size:24px;
  font-weight:800;
  color:var(--yh-ink);
  letter-spacing:.06em;
}

.home-cover__art{
  grid-area:art;
  position:relative;
  margin:0;
  border-radius:var(--yh-radius);
  overflow:hidden;
  background:linear-gradient(150deg, rgba(36,28,85,.9), rgba(10,10,28,.35));
  min-height:220px;
}

.home-cover__art img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  opacity:.86;
}

.home-cover__art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,28,0) 38%, rgba(10,10,28,.78) 100%),
    radial-gradient(72% 58% at 78% 18%, rgba(0,232,206,.22), transparent 70%);
}

/* ---------- 通用分段 ---------- */
.home-band{
  position:relative;
  padding:56px 0;
  isolation:isolate;
  overflow:hidden;
}

.home-band__head{
  max-width:660px;
  margin-bottom:34px;
}

.home-band__head .yh-h2{margin:8px 0 0}

.home-band__note{
  margin:14px 0 0;
  font-size:16px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

/* ---------- 进门三步 ---------- */
.home-band--steps{
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(0,232,206,.1), transparent 70%);
}

.home-steps{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  margin:0;
  padding:0;
}

.home-steps__item{
  padding:26px 24px 28px;
  border-radius:var(--yh-radius);
  background:linear-gradient(158deg, rgba(36,28,85,.66), rgba(21,18,56,.34));
  box-shadow:inset 0 0 0 1px var(--yh-line);
  transition:box-shadow .16s var(--yh-ease);
}

.home-steps__item:hover{box-shadow:inset 0 0 0 1px var(--yh-line-strong)}

.home-steps__num{
  display:inline-block;
  padding:4px 11px;
  border-radius:var(--yh-pill);
  background:rgba(255,122,26,.14);
  color:var(--yh-orange);
  font-family:var(--yh-font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
}

.home-steps__title{
  margin:16px 0 8px;
  font-size:19px;
  font-weight:800;
  line-height:1.42;
}

.home-steps__text{
  margin:0;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-steps__text a{
  color:var(--yh-cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(0,232,206,.4);
}

/* ---------- 苹果通道 ---------- */
.home-band--ios{
  padding:66px 0;
}

.home-band--ios::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(178deg, var(--yh-deep) 0%, rgba(10,10,28,.9) 78%);
  clip-path:polygon(0 var(--home-slant), 100% 0, 100% calc(100% - var(--home-slant)), 0 100%);
}

.home-ios{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  align-items:center;
}

.home-ios__figure{
  position:relative;
  margin:0;
  max-width:320px;
  border-radius:var(--yh-radius);
  overflow:hidden;
  background:linear-gradient(168deg, rgba(0,232,206,.16), rgba(36,28,85,.66));
  box-shadow:inset 0 0 0 1px var(--yh-line-strong);
}

.home-ios__figure img{
  width:100%;
  aspect-ratio:2 / 3;
  object-fit:cover;
}

.home-ios__label{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:5px 12px;
  border-radius:var(--yh-pill);
  background:rgba(10,10,28,.78);
  color:var(--yh-cyan);
  font-family:var(--yh-font-mono);
  font-size:12px;
  letter-spacing:.08em;
}

.home-ios__lede{
  margin:16px 0 0;
  font-size:16px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

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

.home-ios__points li{
  position:relative;
  padding-left:24px;
  font-size:15px;
  line-height:1.74;
  color:var(--yh-text-soft);
}

.home-ios__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--yh-cyan);
  box-shadow:0 0 12px rgba(0,232,206,.7);
}

.home-ios__details{margin-top:28px}

/* ---------- 设备自测 ---------- */
.home-compat{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
  align-items:center;
}

.home-compat__list{min-width:0}

.home-check{
  padding:20px 0;
  border-bottom:1px solid var(--yh-line);
}

.home-check:first-child{padding-top:0}
.home-check:last-child{border-bottom:0;padding-bottom:0}

.home-check__k{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0;
}

.home-check__k .yh-mono{
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--yh-orange);
}

.home-check__t{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}

.home-check__d{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-compat__figure{
  position:relative;
  margin:0;
  border-radius:var(--yh-radius);
  overflow:hidden;
  background:linear-gradient(160deg, rgba(91,71,214,.32), rgba(10,10,28,.5));
  box-shadow:inset 0 0 0 1px var(--yh-line);
}

.home-compat__figure img{
  width:100%;
  aspect-ratio:7 / 4;
  object-fit:cover;
}

.home-compat__label{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:5px 12px;
  border-radius:var(--yh-pill);
  background:rgba(10,10,28,.78);
  color:var(--yh-orange);
  font-family:var(--yh-font-mono);
  font-size:12px;
  letter-spacing:.08em;
}

/* ---------- 家庭专区 ---------- */
.home-band--family{
  padding:72px 0;
}

.home-band--family::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(58% 78% at 90% 10%, rgba(255,122,26,.2), transparent 68%),
    linear-gradient(162deg, var(--yh-lift) 0%, var(--yh-deep) 58%, var(--yh-void) 100%);
  clip-path:polygon(0 var(--home-slant-lg), 100% 0, 100% calc(100% - var(--home-slant-lg)), 0 100%);
}

.home-family{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  align-items:center;
}

.home-family__lede{
  margin:16px 0 0;
  font-size:16px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-family__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:28px 0 0;
  padding:20px 0;
  border-top:1px solid var(--yh-line);
  border-bottom:1px solid var(--yh-line);
}

.home-family__stats dt{
  font-size:12px;
  line-height:1.5;
  color:var(--yh-mist);
}

.home-family__stats dd{
  margin:8px 0 0;
  font-size:24px;
  font-weight:800;
  color:var(--yh-gold);
  letter-spacing:.04em;
}

.home-family__note{
  margin:22px 0 0;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-family .yh-btn{margin-top:26px}

.home-family__figure{
  position:relative;
  margin:0;
  border-radius:var(--yh-radius);
  overflow:hidden;
  background:linear-gradient(155deg, rgba(255,200,87,.16), rgba(36,28,85,.6));
  box-shadow:inset 0 0 0 1px rgba(255,200,87,.22);
}

.home-family__figure img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
}

/* ---------- 版本变化 ---------- */
.home-release{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:0;
  padding:0;
}

.home-release__item{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:8px 18px;
  padding:24px 0;
  border-top:1px solid var(--yh-line);
}

.home-release__item:last-child{border-bottom:1px solid var(--yh-line)}

.home-release__num{
  grid-row:1 / span 2;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--yh-violet);
  padding-top:5px;
}

.home-release__item:hover .home-release__num{color:var(--yh-cyan)}

.home-release__t{
  margin:0;
  font-size:19px;
  font-weight:800;
  line-height:1.42;
}

.home-release__d{
  margin:8px 0 0;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-release__more{
  margin:30px 0 0;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}

.home-release__more a{
  color:var(--yh-cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(0,232,206,.4);
}

/* ---------- 栏目路线 ---------- */
.home-band--index{
  padding-bottom:72px;
  background:
    radial-gradient(64% 70% at 82% 100%, rgba(0,232,206,.12), transparent 72%);
}

.home-routes{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}

.home-routes__item{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:4px 12px;
  padding:20px 22px;
  border-radius:var(--yh-radius);
  background:linear-gradient(150deg, rgba(36,28,85,.56), rgba(21,18,56,.26));
  box-shadow:inset 0 0 0 1px var(--yh-line);
  text-decoration:none;
  transition:box-shadow .16s var(--yh-ease), background .16s var(--yh-ease);
}

.home-routes__item:hover,
.home-routes__item:focus-visible{
  box-shadow:inset 0 0 0 1px var(--yh-line-strong);
  background:linear-gradient(150deg, rgba(43,33,98,.72), rgba(21,18,56,.34));
}

.home-routes__num{
  grid-row:1 / span 2;
  align-self:start;
  padding-top:4px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--yh-orange);
}

.home-routes__name{
  font-size:17px;
  font-weight:800;
  color:var(--yh-ink);
  line-height:1.4;
}

.home-routes__desc{
  font-size:14px;
  line-height:1.7;
  color:var(--yh-mist);
}

/* ---------- 桌面布局 ---------- */
@media (min-width:820px){
  .home-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .home-steps__item:nth-child(2){margin-top:26px}
  .home-steps__item:nth-child(3){margin-top:12px}

  .home-release__item{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);align-items:start}
  .home-release__num{grid-row:1}
  .home-release__d{margin-top:0;padding-top:2px}

  .home-routes{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
  .home-routes__item:nth-child(1){grid-column:span 5}
  .home-routes__item:nth-child(2){grid-column:span 7}
  .home-routes__item:nth-child(3){grid-column:span 7}
  .home-routes__item:nth-child(4){grid-column:span 5}
  .home-routes__item:nth-child(5){grid-column:span 4}
  .home-routes__item:nth-child(6){grid-column:span 8}
}

@media (min-width:900px){
  .home-cover{
    grid-template-columns:112px minmax(0,1.15fr) minmax(0,.85fr);
    grid-template-areas:"side .page-home art";
    gap:42px;
    align-items:center;
    padding:56px 40px 84px;
    min-height:min(74vh,700px);
  }

  .home-cover__side{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    height:100%;
  }

  .home-cover__body{padding-block:8px}

  .home-cover__lede{font-size:17px}

  .home-scales{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

  .home-cover__art{min-height:420px}
  .home-cover__art img{min-height:420px}

  .home-ios{
    grid-template-columns:minmax(0,7fr) minmax(0,11fr);
    gap:56px;
  }

  .home-compat{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:48px;
  }

  .home-family{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:52px;
  }
}

@media (prefers-reduced-motion: reduce){
  .home-steps__item:nth-child(2),
  .home-steps__item:nth-child(3){margin-top:0}
}
</main>