.page-home{
  --hx-pad:20px;
  --hx-max:1140px;
  --hx-edge:rgba(11,26,43,.10);
  --hx-edge-soft:rgba(11,26,43,.06);
  background:var(--paper-100);
  color:var(--char-800);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
}

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

.page-home .hx-wrap{
  width:100%;
  max-width:var(--hx-max);
  margin-inline:auto;
  padding-inline:var(--hx-pad);
}

@media (min-width:768px){
  .page-home{--hx-pad:32px;}
}
@media (min-width:1200px){
  .page-home{--hx-pad:40px;}
}

/* ---------- 排版基线 ---------- */
.page-home h1,
.page-home h2,
.page-home h3{
  font-family:var(--font-title);
  font-weight:900;
  letter-spacing:-.015em;
  line-height:1.18;
}
.page-home h2{
  font-size:clamp(23px,4.8vw,34px);
  margin:8px 0 0;
  color:var(--char-800);
}
.page-home h3{
  font-size:17px;
  line-height:1.42;
  font-weight:800;
  margin:12px 0 0;
  color:var(--char-800);
}
.page-home p{margin:0;}
.page-home .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.page-home .eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0;
}

/* ---------- 首屏 ---------- */
.page-home .hx-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(152deg,var(--ink-900) 0%,var(--ink-700) 100%);
  padding:36px 0 96px;
}
.page-home .hx-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:72px;
  background:var(--paper-100);
  clip-path:polygon(0 100%,100% 0,100% 100%);
  z-index:0;
  pointer-events:none;
}
.page-home .hx-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  align-items:center;
}
.page-home .hx-hero .eyebrow{color:var(--cyan-300);}
.page-home .hx-hero h1{
  color:var(--paper-100);
  font-size:clamp(30px,8vw,54px);
  line-height:1.06;
  margin:14px 0 0;
}
.page-home .hx-hero .lead{
  color:rgba(253,251,246,.78);
  font-size:16px;
  line-height:1.75;
  max-width:34ch;
  margin:18px 0 0;
}
.page-home .hx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.page-home .hx-hero-visual{position:relative;}
.page-home .hx-shot{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--ink-700);
}
.page-home .hx-shot img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}
.page-home .hx-shot-hero{
  box-shadow:0 34px 70px -34px rgba(0,0,0,.75);
  outline:1px solid rgba(111,227,236,.30);
  outline-offset:-1px;
}
.page-home .hx-stamp{
  position:absolute;
  left:14px;
  bottom:-16px;
  display:inline-block;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  background:var(--ink-900);
  border:1px solid var(--line-cyan);
  color:var(--cyan-300);
  font-size:13px;
  letter-spacing:.08em;
  white-space:nowrap;
}

@media (min-width:960px){
  .page-home .hx-hero{padding:76px 0 132px;}
  .page-home .hx-hero::after{height:104px;}
  .page-home .hx-hero-grid{
    grid-template-columns:1.02fr .98fr;
    gap:56px;
  }
  .page-home .hx-stamp{left:-18px;bottom:26px;}
}

/* ---------- 页内索引条 ---------- */
.page-home .hx-index{
  background:var(--paper-0);
  border-top:1px solid var(--hx-edge);
  border-bottom:1px solid var(--hx-edge);
}
.page-home .hx-index-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding-block:13px;
  overflow-x:auto;
  scrollbar-width:none;
}
.page-home .hx-index-inner::-webkit-scrollbar{display:none;}
.page-home .hx-index-label{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink-700);
  opacity:.6;
}
.page-home .hx-index ul{
  display:flex;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-home .hx-index a{
  display:inline-block;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--hx-edge);
  color:var(--slate-600);
  font-size:14px;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.page-home .hx-index a:hover,
.page-home .hx-index a:focus-visible,
.page-home .hx-index a[aria-current="true"]{
  background:var(--ink-900);
  border-color:var(--ink-900);
  color:var(--cyan-300);
}

/* ---------- 章节通用 ---------- */
.page-home .hx-sec{padding:56px 0;}
.page-home .hx-sec-head{max-width:52ch;margin-bottom:30px;}
.page-home .hx-sec-head > p:last-child{
  color:var(--slate-600);
  font-size:15.5px;
  margin:14px 0 0;
  max-width:40ch;
}
.page-home .hx-fig{margin:34px 0 0;}
.page-home .figure-cap{
  margin-top:12px;
  font-size:13px;
  line-height:1.7;
  color:var(--slate-600);
}
@media (min-width:900px){
  .page-home .hx-sec{padding:92px 0;}
}

/* ---------- 三步路径 ---------- */
.page-home .hx-path-band{
  padding:48px 0 8px;
}
.page-home .hx-path-head{max-width:52ch;margin-bottom:10px;}
.page-home .hx-path-head .eyebrow{color:var(--slate-600);}
.page-home .hx-path-head > p:last-child{
  color:var(--slate-600);
  font-size:15.5px;
  margin:14px 0 0;
  max-width:40ch;
}
.page-home .hx-spark{
  display:block;
  width:100%;
  height:52px;
  margin:26px 0 4px;
}
.page-home .hx-spark-base{
  fill:none;
  stroke:var(--hx-edge);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:6 9;
}
.page-home .hx-spark-draw{
  fill:none;
  stroke:var(--cyan-500);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:hx-draw 1.5s var(--ease) .15s forwards;
}
@keyframes hx-draw{
  to{stroke-dashoffset:0;}
}
.page-home .hx-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.page-home .hx-step{
  position:relative;
  padding:24px 22px;
  border-radius:var(--radius-md);
  background:var(--paper-0);
  border:1px solid var(--hx-edge);
  box-shadow:0 20px 50px -40px rgba(11,26,43,.75);
}
.page-home .hx-step::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  bottom:24px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--cyan-500),rgba(18,200,214,0));
}
.page-home .hx-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:var(--radius-pill);
  background:var(--ink-900);
  color:var(--cyan-300);
  font-size:14px;
  letter-spacing:.12em;
}
.page-home .hx-step h3{margin-top:16px;}
.page-home .hx-step p{
  margin-top:10px;
  font-size:15px;
  line-height:1.75;
  color:var(--slate-600);
}
@media (min-width:820px){
  .page-home .hx-steps{grid-template-columns:repeat(3,1fr);gap:24px;}
}

.page-home .hx-save-card{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 20px;
  padding:24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--ink-900),var(--ink-700));
  box-shadow:var(--shadow-soft);
}
.page-home .hx-save-icon{
  flex:none;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:rgba(216,160,60,.18);
  border:1px solid rgba(216,160,60,.42);
  color:var(--gold-500);
  font-size:19px;
  line-height:1;
}
.page-home .hx-save-body{flex:1 1 260px;min-width:0;}
.page-home .hx-save-body h3{margin:0;color:var(--paper-100);font-size:17px;}
.page-home .hx-save-body p{
  margin-top:6px;
  font-size:14.5px;
  line-height:1.7;
  color:rgba(253,251,246,.72);
  max-width:46ch;
}

/* ---------- 手机端入场 ---------- */
.page-home .hx-sec-mobile{background:var(--paper-0);}
.page-home .hx-mobile-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:38px;
  align-items:center;
}
.page-home .hx-mobile-copy .eyebrow{color:var(--rose-500);}
.page-home .hx-mobile-copy > p{
  margin-top:14px;
  color:var(--slate-600);
  font-size:15.5px;
  max-width:40ch;
}
.page-home .hx-ticks{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-home .hx-ticks li{
  position:relative;
  padding-left:24px;
  font-size:15px;
  line-height:1.7;
  color:var(--char-800);
}
.page-home .hx-ticks li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:10px;
  height:2px;
  border-radius:2px;
  background:var(--cyan-500);
}
.page-home .hx-mobile-copy .btn{margin-top:26px;}

.page-home .hx-mobile-demo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.page-home .hx-phone{
  position:relative;
  width:196px;
  aspect-ratio:9 / 19;
  padding:22px 18px;
  border-radius:30px;
  border:2px solid var(--ink-900);
  background:var(--paper-100);
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-soft);
}
.page-home .hx-phone-bar{
  height:6px;
  width:44%;
  border-radius:var(--radius-pill);
  background:rgba(11,26,43,.20);
}
.page-home .hx-phone-block{
  height:42px;
  border-radius:var(--radius-sm);
  background:var(--paper-0);
  border:1px solid var(--hx-edge);
}
.page-home .hx-phone-block--hot{
  background:var(--ink-900);
  border-color:var(--ink-900);
}
.page-home .hx-phone-hot{
  position:absolute;
  right:-26px;
  bottom:-26px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle at 58% 58%,rgba(18,200,214,.36),rgba(18,200,214,0) 70%);
  pointer-events:none;
}
.page-home .hx-demo-cap{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--slate-600);
}
@media (min-width:900px){
  .page-home .hx-mobile-grid{grid-template-columns:1.18fr .82fr;gap:56px;}
}

/* ---------- 版本对照预告 ---------- */
.page-home .hx-sec-versions{background:var(--paper-100);}
.page-home .hx-sec-versions .eyebrow{color:var(--slate-600);}
.page-home .hx-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.page-home .hx-compare-col{
  padding:20px 16px 22px;
  border-radius:var(--radius-md);
  background:var(--paper-0);
  border:1px solid var(--hx-edge);
  border-top:4px solid var(--hx-edge);
}
.page-home .hx-compare-col--a{border-top-color:var(--amber-500);}
.page-home .hx-compare-col--b{border-top-color:var(--rose-500);}
.page-home .hx-compare-col h3{font-size:15.5px;margin-top:14px;}
.page-home .hx-compare-col p{
  margin-top:10px;
  font-size:14px;
  line-height:1.7;
  color:var(--slate-600);
}
.page-home .hx-more{margin-top:28px;}
@media (min-width:820px){
  .page-home .hx-compare{gap:30px;}
  .page-home .hx-compare-col{padding:28px 26px 30px;border-radius:var(--radius-lg);}
  .page-home .hx-compare-col h3{font-size:19px;}
  .page-home .hx-compare-col p{font-size:15.5px;}
}

/* ---------- 入口压缩取舍 ---------- */
.page-home .hx-sec-compress{background:var(--paper-0);}
.page-home .hx-sec-compress .eyebrow{color:var(--amber-500);}
.page-home .hx-rules{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.page-home .hx-rules li{
  position:relative;
  padding:24px 22px;
  border-radius:var(--radius-md);
  background:var(--paper-100);
  border:1px solid var(--hx-edge-soft);
}
.page-home .hx-rules li::after{
  content:"";
  position:absolute;
  right:20px;
  top:22px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan-500);
}
.page-home .hx-rule-num{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-700);
  opacity:.62;
}
.page-home .hx-rules h3{margin-top:12px;}
.page-home .hx-rules p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--slate-600);
}
.page-home .hx-tradeoff{
  margin-top:26px;
  padding:22px 24px;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  border-left:3px solid var(--cyan-500);
  background:rgba(18,200,214,.07);
}
.page-home .hx-tradeoff h3{margin:0;font-size:16px;}
.page-home .hx-tradeoff p{
  margin-top:8px;
  font-size:15px;
  line-height:1.75;
  color:var(--slate-600);
  max-width:62ch;
}
@media (min-width:820px){
  .page-home .hx-rules{grid-template-columns:repeat(3,1fr);gap:24px;}
}

/* ---------- 绕路与修正 ---------- */
.page-home .hx-sec-detour{background:var(--paper-100);}
.page-home .hx-sec-detour .eyebrow{color:var(--rose-500);}
.page-home .hx-detours{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
}
.page-home .hx-detour{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  padding:24px 4px;
  border-top:1px solid var(--hx-edge);
}
.page-home .hx-detours li:last-child{border-bottom:1px solid var(--hx-edge);}
.page-home .hx-detour-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line-cyan);
  background:var(--paper-0);
  color:var(--ink-900);
  font-size:13px;
  letter-spacing:.08em;
}
.page-home .hx-detour-body h3{margin-top:0;}
.page-home .hx-detour-body .hx-sym{
  margin-top:8px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--slate-600);
}
.page-home .hx-detour-body .hx-fix{
  margin-top:8px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--ink-900);
  padding-left:14px;
  border-left:2px solid var(--cyan-500);
}
@media (min-width:900px){
  .page-home .hx-detour{
    grid-template-columns:auto minmax(0,1fr);
    gap:26px;
    padding:30px 4px;
  }
}

/* ---------- 收藏落点 ---------- */
.page-home .hx-sec-bookmark{background:var(--paper-0);}
.page-home .hx-sec-bookmark .eyebrow{color:var(--gold-500);}
.page-home .hx-bookmark-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:center;
}
.page-home .hx-bookmark-copy > p{
  margin-top:14px;
  color:var(--slate-600);
  font-size:15.5px;
  max-width:38ch;
}
.page-home .hx-spots{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.page-home .hx-spot{
  padding:20px 22px;
  border-radius:var(--radius-md);
  background:var(--paper-100);
  border:1px solid var(--hx-edge-soft);
}
.page-home .hx-spot--hot{
  border-color:rgba(216,160,60,.42);
  background:linear-gradient(140deg,rgba(240,217,166,.5),rgba(253,251,246,.9));
}
.page-home .hx-spot h3{margin-top:0;font-size:16px;}
.page-home .hx-spot p{
  margin-top:8px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--slate-600);
}
.page-home .hx-bookmark-copy .btn{margin-top:26px;}
.page-home .hx-fig-side{margin:0;}
@media (min-width:900px){
  .page-home .hx-bookmark-grid{grid-template-columns:1.06fr .94fr;gap:56px;}
}

/* ---------- 阅读顺序 ---------- */
.page-home .hx-sec-start{background:var(--paper-100);}
.page-home .hx-sec-start .eyebrow{color:var(--slate-600);}
.page-home .hx-order{
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .hx-order li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px 18px;
  padding:24px 0;
  border-top:1px solid var(--hx-edge);
}
.page-home .hx-order li:last-child{border-bottom:1px solid var(--hx-edge);}
.page-home .hx-order-num{
  font-size:13px;
  letter-spacing:.12em;
  color:var(--cyan-500);
  align-self:start;
  padding-top:2px;
}
.page-home .hx-order-body h3{margin-top:0;}
.page-home .hx-order-body p{
  margin-top:8px;
  font-size:15px;
  line-height:1.75;
  color:var(--slate-600);
  max-width:52ch;
}
.page-home .hx-order-link{
  grid-column:2;
  justify-self:start;
  font-size:14px;
  color:var(--ink-900);
  text-decoration:none;
  border-bottom:1px solid var(--line-cyan);
  padding-bottom:2px;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.page-home .hx-order-link:hover,
.page-home .hx-order-link:focus-visible{
  color:var(--cyan-500);
  border-color:var(--cyan-500);
}
.page-home .hx-footnote{
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--hx-edge-soft);
  font-size:13.5px;
  line-height:1.75;
  color:var(--slate-600);
  max-width:70ch;
}
@media (min-width:820px){
  .page-home .hx-order li{
    grid-template-columns:60px minmax(0,1fr) 132px;
    gap:26px;
    align-items:center;
    padding:28px 0;
  }
  .page-home .hx-order-link{grid-column:3;justify-self:end;}
}

/* ---------- 动效收敛 ---------- */
@media (prefers-reduced-motion:reduce){
  .page-home .hx-spark-draw{
    animation:none;
    stroke-dashoffset:0;
  }
  .page-home .hx-index a,
  .page-home .hx-order-link{transition:none;}
}