.page-home{
  --home-frame-pad: clamp(20px, 4vw, 44px);
  --home-indent: clamp(18px, 3.4vw, 34px);
  --home-block-gap: clamp(56px, 9vw, 120px);
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
  overflow-x: clip;
}

.page-home [id]{
  scroll-margin-top: 92px;
}

.page-home .hx-title{
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: .35em 0 .6em;
}

/* ---------- 框景首屏 ---------- */
.page-home .home-hero{
  padding-top: clamp(20px, 5vw, 48px);
}

.page-home .home-frame{
  position: relative;
  border: 1px solid var(--edge);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(108, 60, 233, .30), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(0, 229, 208, .10), transparent 66%),
    var(--violet-deep);
  padding: var(--home-frame-pad);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-home .home-frame__tick{
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--cyan);
  opacity: .7;
  pointer-events: none;
}
.page-home .home-frame__tick--tl{ top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.page-home .home-frame__tick--tr{ top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.page-home .home-frame__tick--bl{ bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.page-home .home-frame__tick--br{ bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

.page-home .home-frame__sweep{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(42%, 170px);
  background: linear-gradient(100deg, rgba(108, 60, 233, 0) 0%, rgba(108, 60, 233, .42) 46%, rgba(0, 229, 208, .20) 100%);
  clip-path: polygon(0 100%, 0 60%, 100% 8%, 100% 44%);
  pointer-events: none;
  animation: home-sweep 8s var(--ease) infinite alternate;
}

@keyframes home-sweep{
  from{ transform: translate3d(-5%, 0, 0); }
  to{ transform: translate3d(5%, 0, 0); }
}

.page-home .home-frame__head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: clamp(20px, 4vw, 34px);
}

.page-home .home-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  align-items: center;
}

.page-home .home-hero h1{
  font-size: clamp(2.35rem, 8.4vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 .55em;
}
.page-home .home-hero h1 em{
  display: block;
  font-style: normal;
  color: var(--lime);
}

.page-home .home-hero__lede{
  max-width: 32em;
  color: var(--text-dim);
  font-size: clamp(.98rem, 1.6vw, 1.06rem);
  line-height: 1.85;
  margin: 0 0 clamp(22px, 3.4vw, 32px);
}

.page-home .home-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .home-hero__dial{
  display: grid;
  gap: 16px;
  justify-items: center;
}

.page-home .home-dial__wrap{
  position: relative;
  width: min(232px, 62vw);
  aspect-ratio: 1 / 1;
}

.page-home .home-dial{
  width: 100%;
  height: 100%;
  display: block;
}
.page-home .home-dial__track{
  fill: none;
  stroke: var(--edge);
  stroke-width: 7;
}
.page-home .home-dial__bar{
  fill: none;
  stroke: var(--lime);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 540;
  stroke-dashoffset: 132;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
}

.page-home .home-dial__readout{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 4px;
  margin: 0;
}
.page-home .home-dial__readout span{
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  color: var(--text);
  letter-spacing: -.02em;
}
.page-home .home-dial__readout em{
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .14em;
  color: var(--phantom-soft);
}

.page-home .home-dial__notes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-dim);
  text-align: center;
}
.page-home .home-dial__notes li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-home .home-dial__notes li::before{
  content: "";
  width: 5px;
  height: 5px;
  background: var(--cyan);
  transform: rotate(45deg);
  flex: none;
}

.page-home .home-hero__figure{
  position: relative;
  margin: clamp(24px, 4vw, 36px) calc(var(--home-frame-pad) * -1) calc(var(--home-frame-pad) * -1);
  overflow: hidden;
}
.page-home .home-hero__figure img{
  display: block;
  width: 100%;
  height: clamp(170px, 30vw, 300px);
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(.85) contrast(1.06) brightness(.78);
}
.page-home .home-hero__figure::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 31, .92), rgba(20, 16, 31, 0) 44%, rgba(11, 7, 16, .88));
  pointer-events: none;
}

/* ---------- 通用区块 ---------- */
.page-home .home-block{
  padding-top: var(--home-block-gap);
}
.page-home .home-block__head{
  max-width: 44em;
  margin-bottom: clamp(26px, 4vw, 46px);
}
.page-home .home-block__head .hx-lede{
  color: var(--text-dim);
  max-width: 36em;
  margin: 0;
}

/* ---------- 三层索引树 ---------- */
.page-home .home-tree{
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--home-indent);
  position: relative;
}
.page-home .home-tree::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--phantom), var(--cyan) 55%, var(--lime));
  opacity: .6;
}

.page-home .home-tree__sub{
  list-style: none;
  margin: clamp(14px, 2.4vw, 22px) 0 0;
  padding: 0 0 0 var(--home-indent);
  position: relative;
}
.page-home .home-tree__sub::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 8px;
  width: 1px;
  background: var(--edge);
}

.page-home .home-tree__branch{
  position: relative;
}
.page-home .home-tree__branch::before{
  content: "";
  position: absolute;
  left: calc(var(--home-indent) * -1);
  top: 13px;
  width: calc(var(--home-indent) - 8px);
  height: 1px;
  background: var(--edge);
}

.page-home .home-tree__dot{
  position: absolute;
  left: calc(var(--home-indent) * -1 - 4px);
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--phantom);
  transform: rotate(45deg);
}
.page-home .is-lv2 .home-tree__dot{ background: var(--cyan); }
.page-home .is-lv3 .home-tree__dot{ background: var(--lime); }

.page-home .home-tree__branch h3{
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin: 0 0 .4em;
  letter-spacing: -.01em;
}
.page-home .home-tree__branch h4{
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  margin: 0 0 .4em;
  color: var(--phantom-soft);
}
.page-home .home-tree__branch h5{
  font-size: clamp(.98rem, 2vw, 1.06rem);
  margin: 0 0 .4em;
  color: var(--cyan);
}

.page-home .home-tree__desc{
  color: var(--text-dim);
  font-size: .96rem;
  line-height: 1.78;
  max-width: 34em;
  margin: 0;
}

/* ---------- 阵容确认 ---------- */
.page-home .home-lineup__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 4vw, 46px);
}
.page-home .home-lineup__figure{
  margin: 0;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  background: var(--violet-deep);
}
.page-home .home-lineup__figure img{
  display: block;
  width: 100%;
  height: clamp(240px, 50vw, 380px);
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(.68) brightness(.76) contrast(1.08);
}

.page-home .home-lineup__lede{
  color: var(--text-dim);
  line-height: 1.85;
  max-width: 34em;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.page-home .hx-tabs__panel{
  background: var(--ink);
  border: 1px solid var(--edge);
  padding: clamp(18px, 3vw, 28px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.page-home .hx-tabs__panel h3{
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  margin: 0 0 .6em;
  color: var(--text);
}
.page-home .hx-tabs__panel p{
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.8;
  margin: 0;
  max-width: 34em;
}

.page-home .home-lineup__facts{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .84rem;
  color: var(--text-dim);
}
.page-home .home-lineup__facts li{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.page-home .home-lineup__facts .hx-mono{
  color: var(--lime);
  font-size: .9rem;
}

/* ---------- 分布面板 ---------- */
.page-home .home-spread__board{
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 40px);
  background: var(--violet-deep);
}
.page-home .home-spread__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  pointer-events: none;
}
.page-home .home-spread__grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
}
.page-home .home-spread__cap{
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--phantom-soft);
  margin: 0 0 16px;
}
.page-home .home-spread__note{
  color: var(--text-dim);
  font-size: .86rem;
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 28em;
}

.page-home .home-bar{
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr) 3.2em;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  font-size: .9rem;
  color: var(--text);
}
.page-home .home-bar__track{
  display: block;
  height: 10px;
  background: var(--ink);
  border: 1px solid var(--edge);
  overflow: hidden;
}
.page-home .home-bar__fill{
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--phantom), var(--cyan));
}
.page-home .home-bar__val{
  text-align: right;
  color: var(--cyan);
  font-size: .84rem;
}

.page-home .home-scatter__plot{
  position: relative;
  height: 168px;
  border-left: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background-image: linear-gradient(var(--edge) 1px, transparent 1px);
  background-size: 100% 25%;
}
.page-home .home-scatter__pt{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 255, 61, .14);
  transform: translate(-50%, -50%);
}

/* ---------- 时区对照 ---------- */
.page-home .home-tz__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-home .home-tz__head{
  margin-bottom: 0;
}
.page-home .home-tz__head .hx-btn{
  margin-top: 8px;
}

.page-home .home-tz__list{
  list-style: none;
  margin: 0;
  padding: 1px;
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.page-home .home-tz__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4em 3.6em;
  gap: 10px;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--violet-deep);
  font-size: .92rem;
  color: var(--text);
}
.page-home .home-tz__zone{
  color: var(--text-dim);
  font-size: .8rem;
}
.page-home .home-tz__time{
  text-align: right;
  color: var(--lime);
}

/* ---------- V4 客户端 ---------- */
.page-home .home-v4__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.page-home .home-v4__lede{
  color: var(--text-dim);
  line-height: 1.85;
  max-width: 34em;
  margin: 0 0 clamp(18px, 3vw, 26px);
}
.page-home .home-v4__specs{
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  font-size: .88rem;
  color: var(--text-dim);
}
.page-home .home-v4__specs li{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 14px;
  position: relative;
}
.page-home .home-v4__specs li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  transform: rotate(45deg);
}
.page-home .home-v4__specs .hx-mono{
  color: var(--text);
  font-size: .9rem;
  min-width: 3.4em;
}
.page-home .home-v4__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .home-v4__figure{
  margin: 0;
  background: var(--violet-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.page-home .home-v4__figure img{
  display: block;
  width: 100%;
  height: clamp(200px, 34vw, 320px);
  object-fit: cover;
  filter: saturate(.8) brightness(.85);
}

/* ---------- 规模数字 ---------- */
.page-home .home-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.page-home .home-stat{
  background: var(--ink);
  padding: clamp(18px, 3vw, 30px);
}
.page-home .home-stat__num{
  display: block;
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--lime);
  margin-bottom: .45em;
}
.page-home .home-stat p{
  margin: 0;
  color: var(--text-dim);
  font-size: .88rem;
  line-height: 1.7;
}

.page-home .home-scale__note{
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 46em;
  color: var(--text-dim);
  font-size: .94rem;
  line-height: 1.85;
  border-left: 2px solid var(--phantom);
  padding-left: 16px;
}

/* ---------- 赛事日志 ---------- */
.page-home .home-journal__head{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  max-width: none;
}
.page-home .home-journal__head .hx-title{
  margin-bottom: 0;
}

.page-home .home-log{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(238px, 78%);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.page-home .home-log__card{
  scroll-snap-align: start;
  background: var(--violet-deep);
  border: 1px solid var(--edge);
  border-top: 2px solid var(--phantom);
  padding: clamp(18px, 3vw, 26px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
}
.page-home .home-log__meta{
  margin: 0 0 10px;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--cyan);
}
.page-home .home-log__card h3{
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  margin: 0 0 .6em;
  line-height: 1.4;
}
.page-home .home-log__card p{
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.75;
}
.page-home .home-log__link{
  margin-top: auto;
  color: var(--phantom-soft);
  font-size: .86rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 2px;
}
.page-home .home-log__link:hover,
.page-home .home-log__link:focus-visible{
  color: var(--lime);
}

/* ---------- 收尾行动带 ---------- */
.page-home .home-actions{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.page-home .home-action{
  background: var(--violet-deep);
  padding: clamp(20px, 3.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-home .home-action--accent{
  background: linear-gradient(150deg, var(--phantom), #3D2288 78%);
}
.page-home .home-action h3{
  font-size: clamp(1.06rem, 2.4vw, 1.24rem);
  margin: 0;
}
.page-home .home-action p{
  margin: 0;
  color: var(--text-dim);
  font-size: .92rem;
  line-height: 1.75;
}
.page-home .home-action--accent p{
  color: rgba(244, 235, 217, .86);
}
.page-home .home-action .hx-btn{
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px){
  .page-home .home-tz__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-home .home-v4__specs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px){
  .page-home .home-hero__grid{
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
    align-items: center;
  }
  .page-home .home-lineup__grid{
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: start;
  }
  .page-home .home-lineup__figure{
    margin-top: clamp(30px, 5vw, 64px);
  }
  .page-home .home-lineup__figure img{
    height: 520px;
  }
  .page-home .home-spread__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
  .page-home .home-tz__grid{
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 72px);
  }
  .page-home .home-v4__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .page-home .home-v4__figure img{
    height: 360px;
  }
}

@media (min-width: 820px){
  .page-home .home-stats{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-home .home-actions{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .home-log{
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
    gap: 18px;
  }
  .page-home .home-log__card:nth-child(2){
    transform: translateY(28px);
  }
  .page-home .home-log__card:nth-child(3){
    transform: translateY(12px);
  }
  .page-home .home-journal__head{
    margin-bottom: clamp(38px, 5vw, 60px);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-home .home-frame__sweep{
    animation: none;
  }
}

.page-home {
  --w: 1rem;
  --x: inherit;
  --y: inherit;
}
