.page-home{
  --ph-line: rgba(16,38,46,.12);
  --ph-line-soft: rgba(16,38,46,.08);
  --ph-line-dark: rgba(154,163,160,.30);
  --ph-soft: rgba(247,244,236,.80);
  display:block;
  background: var(--pearl);
  color: var(--ink);
}

/* ---------- 通用容器与排版 ---------- */
.page-home .home-wrap{
  width:100%;
  max-width: var(--shell-max);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

.page-home .kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:11px;
  letter-spacing:.22em;
  font-family: var(--font-num);
  color: var(--rock);
}
.page-home .kicker--cyan{ color: rgba(45,226,230,.9); }
.page-home .kicker--gold{ color: var(--gold); }

.page-home .display-1{
  font-family: var(--font-display);
  font-size: clamp(34px,6vw,70px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.012em;
  margin:16px 0 0;
  color: var(--pearl);
}

.page-home .h2{
  font-family: var(--font-display);
  font-size: clamp(25px,3.4vw,42px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.008em;
  margin:12px 0 0;
  color: var(--ink);
}

.page-home .h3{
  font-family: var(--font-display);
  font-size: clamp(17px,1.7vw,21px);
  line-height:1.36;
  font-weight:700;
  margin:0;
  color: inherit;
}

.page-home .lead{
  margin:16px 0 0;
  font-size: clamp(15px,1.5vw,17px);
  line-height:1.85;
  color: var(--ink);
}
.page-home .measure{ max-width: 62ch; }

.page-home .num{
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing:.06em;
}

.page-home .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius: var(--radius);
  font-size:14px;
  letter-spacing:.05em;
  text-decoration:none;
  cursor:pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.page-home .btn--sm{ padding:9px 16px; font-size:13px; }
.page-home .btn--primary{ background: var(--coral); color:#fff; }
.page-home .btn--primary:hover{ background:#e85c3d; }
.page-home .btn--ghost{ border-color: rgba(247,244,236,.36); color: var(--pearl); }
.page-home .btn--ghost:hover{ border-color: var(--cyan); color: var(--cyan); }
.page-home .btn--ink{ background: var(--ink); color: var(--pearl); }
.page-home .btn--ink:hover{ background: var(--tide); }
.page-home .btn--cyan{ background: var(--cyan); color: var(--abyss); }
.page-home .btn--cyan:hover{ background:#25c8cb; }

/* ---------- 首屏框景 ---------- */
.page-home .hero-frame{
  position:relative;
  overflow:hidden;
  padding-top: calc(var(--header-h) + 26px);
  padding-bottom: clamp(34px,5vw,64px);
  background:
    radial-gradient(120% 95% at 78% -10%, rgba(19,90,115,.62) 0%, rgba(6,42,58,0) 62%),
    radial-gradient(80% 70% at 0% 110%, rgba(111,127,98,.28) 0%, rgba(6,42,58,0) 70%),
    var(--abyss);
  color: var(--pearl);
}
.page-home .hero-frame::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(45,226,230,.55), transparent);
}

.page-home .hero-frame__inner{
  position:relative;
  border:1px solid var(--ph-line-dark);
  padding: clamp(18px,3.4vw,48px);
}

.page-home .hero-frame__inner::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(45,226,230,.15);
  pointer-events:none;
}

.page-home .breadcrumbs{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.16em;
  color: rgba(247,244,236,.55);
}
.page-home .breadcrumbs a{
  color: rgba(247,244,236,.78);
  text-decoration:none;
  border-bottom:1px solid rgba(247,244,236,.22);
  padding-bottom:1px;
}
.page-home .breadcrumbs a:hover{ color: var(--cyan); border-bottom-color: var(--cyan); }

.page-home .hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap: clamp(22px,4vw,44px);
  margin-top: clamp(22px,3.6vw,40px);
}

.page-home .hero-copy .lead{
  color: var(--ph-soft);
  max-width: 48ch;
}

.page-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: clamp(20px,3vw,30px);
}

.page-home .hero-visual{
  margin:0;
  position:relative;
}
.page-home .hero-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--ph-line-dark);
  filter: saturate(.82) contrast(1.04);
}
.page-home .hero-visual figcaption{
  margin-top:10px;
  font-family: var(--font-num);
  font-size:11px;
  letter-spacing:.24em;
  color: rgba(247,244,236,.5);
}

.page-home .hero-entries{
  position:relative;
  z-index:1;
  margin-top: clamp(24px,3.6vw,42px);
  display:grid;
  gap:1px;
  background: rgba(154,163,160,.28);
  border:1px solid rgba(154,163,160,.28);
}
.page-home .hero-entries a{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:15px 16px;
  background: rgba(6,42,58,.52);
  text-decoration:none;
  color: var(--pearl);
  transition: background-color .18s var(--ease);
}
.page-home .hero-entries a:hover,
.page-home .hero-entries a:focus-visible{ background: rgba(19,90,115,.9); }
.page-home .hero-entries .num{
  font-size:11px;
  color: rgba(247,244,236,.42);
}
.page-home .hero-entries strong{
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
.page-home .hero-entries em{
  font-style:normal;
  font-size:11px;
  letter-spacing:.13em;
  color: rgba(45,226,230,.82);
}

/* ---------- 主体与章节索引 ---------- */
.page-home .home-body{
  background: var(--pearl);
}

.page-home .home-layout{
  padding-block: clamp(30px,5vw,64px);
}

.page-home .home-index{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:10px;
  margin-bottom: clamp(18px,3vw,26px);
  scrollbar-width:none;
}
.page-home .home-index::-webkit-scrollbar{ display:none; }
.page-home .home-index a{
  flex:0 0 auto;
  padding:7px 12px;
  font-size:12px;
  letter-spacing:.14em;
  text-decoration:none;
  color: var(--tide);
  border:1px solid rgba(19,90,115,.28);
  border-radius: var(--radius);
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.page-home .home-index a:hover{ background: rgba(19,90,115,.1); }
.page-home .home-index a[aria-current="true"]{
  background: var(--abyss);
  border-color: var(--abyss);
  color: var(--pearl);
}
.page-home .chapter-index__label{
  display:none;
}

/* ---------- 区块骨架 ---------- */
.page-home .home-section{
  padding-block: clamp(26px,4vw,46px);
  border-top:1px solid var(--ph-line);
}
.page-home #map{ border-top:0; padding-top:0; }

.page-home .home-head .h2{ margin-top:10px; }

.page-home .home-section--cream{
  background: var(--cream);
  border:1px solid var(--ph-line-soft);
  padding: clamp(22px,3.6vw,42px);
  margin-block: clamp(18px,3vw,32px);
}

.page-home .home-section--abyss{
  background:
    radial-gradient(110% 120% at 90% 0%, rgba(19,90,115,.6) 0%, rgba(6,42,58,0) 60%),
    var(--abyss);
  color: var(--pearl);
  border:0;
  padding: clamp(24px,4vw,46px);
  margin-block: clamp(18px,3vw,32px);
}
.page-home .home-section--abyss .h2,
.page-home .home-section--abyss .h3{ color: var(--pearl); }
.page-home .home-section--abyss .lead{ color: var(--ph-soft); }
.page-home .home-section--abyss .kicker{ color: rgba(45,226,230,.88); }

/* ---------- 版图双轴 ---------- */
.page-home .map-axes{
  display:grid;
  gap:1px;
  margin-top: clamp(20px,3vw,32px);
  background: var(--ph-line);
  border:1px solid var(--ph-line);
}
.page-home .map-axis{
  background: var(--pearl);
  padding: clamp(16px,2.4vw,26px);
}
.page-home .map-axis .h3{ margin-bottom:14px; }

.page-home .region-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1px;
  background: var(--ph-line);
  border:1px solid var(--ph-line);
}
.page-home .region-list li{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:11px 12px;
  background: var(--pearl);
  font-size:15px;
  color: var(--ink);
}
.page-home .region-list .num{
  font-size:12px;
  color: var(--gold);
}

.page-home .axis-note{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.8;
  color: rgba(16,38,46,.66);
}

.page-home .local-steps{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:12px;
  counter-reset: step;
}
.page-home .local-steps li{
  display:grid;
  grid-template-columns: 26px minmax(0,1fr);
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--ph-line);
}
.page-home .local-steps li:last-child{ border-bottom:0; padding-bottom:0; }
.page-home .local-steps .num{
  font-size:13px;
  color: var(--coral);
}
.page-home .local-steps strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
  color: var(--abyss);
}
.page-home .local-steps p{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color: rgba(16,38,46,.68);
}

.page-home .map-figure{
  margin: clamp(18px,3vw,28px) 0 0;
}
.page-home .map-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--ph-line);
  filter: saturate(.85);
}
.page-home .map-figure figcaption{
  margin-top:10px;
  font-family: var(--font-num);
  font-size:11px;
  letter-spacing:.16em;
  color: var(--rock);
}

/* ---------- 栏目索引 ---------- */
.page-home .channel-grid{
  display:grid;
  gap:1px;
  margin-top: clamp(20px,3vw,30px);
  background: var(--ph-line);
  border:1px solid var(--ph-line);
}
.page-home .channel{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: clamp(18px,2.6vw,28px);
  background: var(--pearl);
  text-decoration:none;
  color: var(--ink);
  border-top:3px solid transparent;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.page-home .channel--gold{ border-top-color: var(--gold); }
.page-home .channel--cyan{ border-top-color: var(--cyan); }
.page-home .channel--coral{ border-top-color: var(--coral); }
.page-home .channel--moss{ border-top-color: var(--moss); }
.page-home .channel:hover{ background: var(--cream); }
.page-home .channel__no{
  font-size:12px;
  color: var(--rock);
}
.page-home .channel p{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color: rgba(16,38,46,.72);
}
.page-home .channel__for{
  font-size:12px;
  line-height:1.6;
  color: var(--tide);
  padding-top:8px;
  border-top:1px solid var(--ph-line);
}
.page-home .channel__go{
  margin-top:auto;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color: var(--abyss);
}
.page-home .channel:hover .channel__go{ color: var(--coral); }

/* ---------- 会员等级 ---------- */
.page-home .tier-wrap{
  display:grid;
  gap: clamp(18px,3vw,30px);
  margin-top: clamp(20px,3vw,30px);
}
.page-home .tier-figure{ margin:0; }
.page-home .tier-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid rgba(16,38,46,.16);
}

.page-home .tier-scale{
  display:grid;
  gap:1px;
  background: rgba(16,38,46,.16);
  border:1px solid rgba(16,38,46,.16);
}
.page-home .tier{
  background: var(--pearl);
  padding:14px 16px 14px 20px;
  position:relative;
}
.page-home .tier__bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
}
.page-home .tier--1 .tier__bar{ background: var(--rock); }
.page-home .tier--2 .tier__bar{ background: var(--moss); }
.page-home .tier--3 .tier__bar{ background: var(--gold); }
.page-home .tier--4 .tier__bar{ background: var(--coral); }

.page-home .tier__top{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.page-home .tier__top .num{
  font-size:12px;
  color: rgba(16,38,46,.42);
}
.page-home .tier p{
  margin:8px 0 0;
  font-size:13.5px;
  line-height:1.75;
  color: rgba(16,38,46,.72);
}

.page-home .tier-cta{
  margin: clamp(18px,2.6vw,26px) 0 0;
}

/* ---------- 评测与工具 ---------- */
.page-home .proof-grid{
  display:grid;
  gap: clamp(16px,2.6vw,28px);
  margin-top: clamp(20px,3vw,30px);
}

.page-home .score-card,
.page-home .tool-card{
  border:1px solid var(--ph-line);
  background: var(--pearl);
  padding: clamp(18px,2.6vw,28px);
  box-shadow: var(--shadow-card);
}

.page-home .score-dims{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.page-home .score-dims li{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap:12px;
  align-items:baseline;
  padding-bottom:8px;
  border-bottom:1px dashed var(--ph-line);
  font-size:15px;
}
.page-home .score-dims li:last-child{ border-bottom:0; }
.page-home .score-dims .num{
  font-size:22px;
  color: var(--tide);
}

.page-home .score-note{
  margin:16px 0 18px;
  font-size:13px;
  line-height:1.8;
  color: rgba(16,38,46,.66);
}

.page-home .tool-figure{
  margin:0 0 16px;
}
.page-home .tool-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--ph-line);
}

.page-home .tool-quads{
  list-style:none;
  margin:14px 0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1px;
  background: rgba(19,90,115,.24);
  border:1px solid rgba(19,90,115,.24);
}
.page-home .tool-quads li{
  background: var(--pearl);
  padding:10px 12px;
  font-size:13.5px;
  letter-spacing:.08em;
  color: var(--abyss);
}
.page-home .tool-card p{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.8;
  color: rgba(16,38,46,.72);
}

/* ---------- 开始使用 ---------- */
.page-home .start-grid{
  display:grid;
  gap: clamp(20px,3vw,34px);
  margin-top: clamp(20px,3vw,32px);
}

.page-home .start-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.page-home .start-steps li{
  display:grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(247,244,236,.16);
}
.page-home .start-steps li:last-child{ border-bottom:0; padding-bottom:0; }
.page-home .start-steps__no{
  font-size:15px;
  color: var(--cyan);
}
.page-home .start-steps p{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.8;
  color: rgba(247,244,236,.74);
}

.page-home .checklist{
  border:1px solid rgba(247,244,236,.22);
  padding: clamp(16px,2.4vw,24px);
  background: rgba(11,58,79,.55);
}
.page-home .checklist ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-home .checklist label{
  display:grid;
  grid-template-columns: 18px minmax(0,1fr);
  gap:10px;
  align-items:start;
  font-size:13.5px;
  line-height:1.7;
  color: rgba(247,244,236,.84);
  cursor:pointer;
}
.page-home .checklist input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:3px 0 0;
  accent-color: var(--coral);
  cursor:pointer;
}

.page-home .start-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin: clamp(22px,3vw,32px) 0 0;
}
.page-home .start-link{
  font-size:13px;
  letter-spacing:.04em;
  color: rgba(247,244,236,.82);
  text-decoration:none;
  border-bottom:1px solid rgba(247,244,236,.32);
  padding-bottom:2px;
}
.page-home .start-link:hover{ color: var(--cyan); border-bottom-color: var(--cyan); }

/* ---------- 响应式 ---------- */
@media (min-width: 640px){
  .page-home .hero-entries{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-home .region-list{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 900px){
  .page-home .hero-grid{
    grid-template-columns: 1.06fr .94fr;
    align-items: end;
  }
  .page-home .hero-entries{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .page-home .map-axes{ grid-template-columns: 1fr 1fr; }
  .page-home .channel-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-home .proof-grid{ grid-template-columns: 1.12fr .88fr; align-items:start; }
  .page-home .start-grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
  .page-home .tier-wrap{ grid-template-columns: .68fr 1fr; align-items:start; }
}

@media (min-width: 1100px){
  .page-home .channel-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (min-width: 1024px){
  .page-home .home-layout{
    display:grid;
    grid-template-columns: 92px minmax(0,1fr);
    gap: clamp(24px,3vw,48px);
    align-items:start;
  }
  .page-home .home-index{
    flex-direction:column;
    gap:2px;
    overflow:visible;
    margin-bottom:0;
    padding:0 12px 0 0;
    border-right:1px solid var(--ph-line);
    position:sticky;
    top: calc(var(--header-h) + 28px);
    align-self:start;
  }
  .page-home .chapter-index__label{
    display:block;
    font-size:10px;
    letter-spacing:.24em;
    color: var(--rock);
    padding:0 0 8px 12px;
  }
  .page-home .home-index a{
    border:0;
    border-left:2px solid transparent;
    border-radius:0;
    padding:8px 0 8px 12px;
    font-size:12px;
    color: rgba(16,38,46,.6);
  }
  .page-home .home-index a:hover{
    background: transparent;
    color: var(--abyss);
  }
  .page-home .home-index a[aria-current="true"]{
    background: transparent;
    color: var(--abyss);
    border-left-color: var(--coral);
    font-weight:700;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-home .btn,
  .page-home .channel,
  .page-home .hero-entries a,
  .page-home .home-index a{
    transition:none;
  }
}
<<<END>>>