.page-home{
  --home-line: rgba(43,43,47,.14);
  --home-line-soft: rgba(43,43,47,.08);
  background: var(--mist);
  color: var(--ink);
}

/* ---------- 首屏：档案目录 ---------- */
.page-home .hero{
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 6vw, 3.9rem) 0 clamp(3.4rem, 8vw, 6rem);
  background:
    radial-gradient(88% 66% at 6% -12%, #1e4b70 0%, rgba(30,75,112,0) 64%),
    linear-gradient(165deg, var(--night) 0%, var(--deep) 56%, var(--reef) 100%);
  color: var(--mist);
}
.page-home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(247,244,239,.045) 0 1px, rgba(247,244,239,0) 1px 84px);
  pointer-events:none;
}
.page-home .hero__glow{
  position:absolute;
  right:-16%;
  bottom:-34%;
  width:min(720px, 96vw);
  height:min(720px, 96vw);
  background: radial-gradient(closest-side, rgba(240,138,138,.26), rgba(240,138,138,0) 72%);
  pointer-events:none;
}
.page-home .hero__wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  width:100%;
  height:72px;
  pointer-events:none;
}
.page-home .hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  gap: clamp(2rem, 5vw, 3.2rem);
}
.page-home .hero__kicker{
  margin:0;
  color: var(--gold);
  letter-spacing:.16em;
}
.page-home .hero__title{
  margin:.85rem 0 1.05rem;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(2rem, 8.2vw, 3.5rem);
  line-height:1.22;
  letter-spacing:.06em;
  color: var(--paper);
}
.page-home .hero__intro{
  margin:0 0 1.6rem;
  max-width:33em;
  font-size:1rem;
  line-height:1.9;
  color: rgba(247,244,239,.84);
}

/* 检索条 */
.page-home .searchbar{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1rem;
  border:1px solid rgba(247,244,239,.26);
  border-radius:2px;
  background: rgba(247,244,239,.07);
  color: var(--mist);
  text-decoration:none;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.page-home .searchbar:hover,
.page-home .searchbar:focus-visible{
  border-color: var(--coral);
  background: rgba(240,138,138,.14);
}
.page-home .searchbar__icon{
  display:inline-flex;
  color: var(--coral);
  flex:none;
}
.page-home .searchbar__text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:.92rem;
  color: rgba(247,244,239,.8);
}
.page-home .searchbar__go{
  flex:none;
  font-family: var(--mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color: var(--gold);
  padding-left:.7rem;
  border-left:1px solid rgba(247,244,239,.2);
}

/* 时间轴三路径 */
.page-home .tline{
  list-style:none;
  margin:1.9rem 0 0;
  padding:0 0 0 1.15rem;
  border-left:1px solid rgba(216,166,87,.42);
}
.page-home .tline__item{
  position:relative;
}
.page-home .tline__link{
  display:grid;
  grid-template-columns:2.3rem minmax(0,1fr);
  gap:0 .2rem;
  padding:.62rem .3rem;
  color: var(--mist);
  text-decoration:none;
}
.page-home .tline__link::before{
  content:"";
  position:absolute;
  left: calc(-1.15rem - 4px);
  top:1.18rem;
  width:7px;
  height:7px;
  border-radius:50%;
  background: rgba(216,166,87,.6);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.page-home .tline__item:hover .tline__link::before,
.page-home .tline__item:focus-within .tline__link::before{
  background: var(--coral);
  box-shadow:0 0 0 4px rgba(240,138,138,.22);
}
.page-home .tline__step{
  color: rgba(216,166,87,.92);
  padding-top:.22rem;
}
.page-home .tline__label{
  font-size:1rem;
  line-height:1.5;
  letter-spacing:.02em;
  transition: color .3s var(--ease);
}
.page-home .tline__item:hover .tline__label,
.page-home .tline__item:focus-within .tline__label{
  color: var(--coral);
}
.page-home .tline__desc{
  grid-column:2;
  max-height:0;
  overflow:hidden;
  opacity:0;
  font-size:.84rem;
  line-height:1.72;
  color: rgba(247,244,239,.64);
  transition: max-height .42s var(--ease), opacity .36s var(--ease), margin-top .42s var(--ease);
}
.page-home .tline__item:hover .tline__desc,
.page-home .tline__item:focus-within .tline__desc{
  max-height:7rem;
  opacity:1;
  margin-top:.3rem;
}

/* 首屏图片窗 */
.page-home .hero__figure{
  margin:0;
  align-self:start;
}
.page-home .hero__frame{
  position:relative;
  padding:.55rem;
  border:1px solid rgba(247,244,239,.2);
  background: rgba(247,244,239,.05);
  box-shadow: 1.3rem 1.3rem 0 -1px rgba(240,138,138,.15), 0 22px 48px -28px rgba(0,0,0,.85);
  transform: rotate(.7deg);
}
.page-home .hero__frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  filter: saturate(.86) contrast(1.03);
}
.page-home .hero__cap{
  margin-top:1.6rem;
  display:grid;
  gap:.4rem;
  max-width:23em;
  font-size:.82rem;
  line-height:1.75;
  color: rgba(247,244,239,.6);
}
.page-home .hero__cap .label-mono{
  color: rgba(216,166,87,.85);
}

/* ---------- 本周更新带 ---------- */
.page-home .update-band{
  background: var(--paper);
  border-top:3px solid var(--coral);
  border-bottom:1px solid var(--home-line);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}
.page-home .update-band__inner{
  display:grid;
  gap: clamp(1.8rem, 4vw, 2.8rem);
}
.page-home .update-band__mono{
  margin:0 0 .8rem;
  color: var(--tide);
  letter-spacing:.14em;
}
.page-home .update-band__title{
  margin:0 0 .8rem;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height:1.35;
  letter-spacing:.05em;
  color: var(--deep);
}
.page-home .update-band__text{
  margin:0 0 1.3rem;
  font-size:.95rem;
  line-height:1.85;
  color: rgba(43,43,47,.82);
  max-width:30em;
}
.page-home .update-band__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background: var(--home-line);
  border:1px solid var(--home-line);
}
.page-home .update-band__item{
  background: var(--paper);
  padding:1.1rem 1rem 1.25rem;
}
.page-home .update-band__item .label-mono{
  margin:0 0 .55rem;
  color: var(--tide);
}
.page-home .update-band__item h3{
  margin:0 0 .45rem;
  font-family: var(--serif);
  font-size:1.02rem;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.02em;
  color: var(--deep);
}
.page-home .update-band__item p:last-child{
  margin:0;
  font-size:.86rem;
  line-height:1.78;
  color: rgba(43,43,47,.78);
}

/* ---------- 适用场景 ---------- */
.page-home .scenes{
  background: var(--mist);
  padding: clamp(2.8rem, 7vw, 5rem) 0;
}
.page-home .scenes__head{
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.page-home .scenes__title{
  margin:.6rem 0 0;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(1.6rem, 4.8vw, 2.4rem);
  line-height:1.34;
  letter-spacing:.05em;
  color: var(--deep);
}
.page-home .scenes__layout{
  display:grid;
  gap: clamp(1.8rem, 4vw, 2.8rem);
}
.page-home .scenes__figure{
  margin:0;
}
.page-home .scenes__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border:1px solid var(--home-line);
  padding:.5rem;
  background: var(--paper);
  box-shadow: .9rem .9rem 0 -1px rgba(216,166,87,.22);
}
.page-home .scenes__figure figcaption{
  margin-top:1.5rem;
  font-size:.82rem;
  line-height:1.75;
  color: rgba(43,43,47,.62);
  max-width:24em;
}
.page-home .scenes__list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .scene{
  padding:1.15rem 0 1.3rem 1.1rem;
  border-left:2px solid rgba(61,110,143,.35);
  border-bottom:1px solid var(--home-line-soft);
  transition: border-left-color .3s var(--ease);
}
.page-home .scene:last-child{
  border-bottom:0;
}
.page-home .scene:hover{
  border-left-color: var(--coral);
}
.page-home .scene__num{
  margin:0 0 .5rem;
  color: var(--gold);
  letter-spacing:.14em;
}
.page-home .scene__title{
  margin:0 0 .5rem;
  font-family: var(--serif);
  font-size:1.12rem;
  font-weight:600;
  letter-spacing:.04em;
  color: var(--deep);
}
.page-home .scene__text{
  margin:0;
  font-size:.92rem;
  line-height:1.85;
  color: rgba(43,43,47,.8);
  max-width:34em;
}
.page-home .scenes__foot{
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
}

/* ---------- iOS 体验 ---------- */
.page-home .ios{
  background: linear-gradient(180deg, var(--mist) 0%, #EFEAE2 100%);
  padding: clamp(2.4rem, 6vw, 4.2rem) 0;
}
.page-home .ios__grid{
  display:grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}
.page-home .ios__panel{
  position:relative;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: linear-gradient(155deg, var(--night) 0%, var(--deep) 72%, var(--reef) 100%);
  color: var(--mist);
  border-top:3px solid var(--gold);
}
.page-home .ios__mono{
  margin:0 0 .9rem;
  color: var(--gold);
  letter-spacing:.14em;
}
.page-home .ios__title{
  margin:0 0 .85rem;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(1.45rem, 4.4vw, 2rem);
  line-height:1.36;
  letter-spacing:.05em;
  color: var(--paper);
}
.page-home .ios__text{
  margin:0 0 1.3rem;
  font-size:.94rem;
  line-height:1.88;
  color: rgba(247,244,239,.82);
  max-width:32em;
}
.page-home .ios__paths{
  list-style:none;
  margin:0 0 1.5rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.55rem .8rem;
}
.page-home .ios__paths li{
  position:relative;
  padding-left:1.05rem;
  font-size:.86rem;
  line-height:1.7;
  color: rgba(247,244,239,.84);
}
.page-home .ios__paths li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62rem;
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--coral);
}
.page-home .ios__figure{
  margin:0;
  border:1px solid var(--home-line);
  padding:.5rem;
  background: var(--paper);
  align-self:stretch;
}
.page-home .ios__figure img{
  display:block;
  width:100%;
  height:100%;
  min-height:180px;
  aspect-ratio:3 / 2;
  object-fit:cover;
}

/* ---------- 回访记录 ---------- */
.page-home .records{
  background: var(--mist);
  padding: clamp(2.8rem, 7vw, 4.8rem) 0;
}
.page-home .records__head{
  margin-bottom: clamp(1.5rem, 4vw, 2.2rem);
  max-width:44em;
}
.page-home .records__title{
  margin:.6rem 0 .9rem;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(1.55rem, 4.6vw, 2.3rem);
  line-height:1.34;
  letter-spacing:.055em;
  color: var(--deep);
}
.page-home .records__intro{
  margin:0;
  font-size:.95rem;
  line-height:1.88;
  color: rgba(43,43,47,.8);
}
.page-home .records__grid{
  display:grid;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.page-home .records__panel .panel__head h3{
  margin:0;
  font-family: var(--serif);
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:.03em;
  color: var(--deep);
}
.page-home .records__keys{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
}
.page-home .records__keys li{
  display:grid;
  gap:.2rem;
  font-size:.88rem;
  line-height:1.75;
  color: rgba(43,43,47,.82);
  padding-bottom:.85rem;
  border-bottom:1px dashed var(--home-line);
}
.page-home .records__keys li:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.page-home .records__keys .label-mono{
  color: var(--tide);
  letter-spacing:.1em;
}
.page-home .records__aside{
  display:grid;
  gap:.9rem;
  align-content:start;
  justify-items:start;
  padding-top:.2rem;
}
.page-home .records__note{
  margin:0;
  font-size:.92rem;
  line-height:1.85;
  color: rgba(43,43,47,.82);
}
.page-home .records__hint{
  margin:.4rem 0 0;
  font-size:.84rem;
  line-height:1.75;
  color: rgba(43,43,47,.62);
  max-width:26em;
}

/* ---------- 五步流程 ---------- */
.page-home .flow{
  background: var(--paper);
  border-top:1px solid var(--home-line);
  padding: clamp(2.8rem, 7vw, 4.8rem) 0;
}
.page-home .flow__head{
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.page-home .flow__title{
  margin:.6rem 0 .7rem;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(1.55rem, 4.6vw, 2.3rem);
  line-height:1.34;
  letter-spacing:.05em;
  color: var(--deep);
}
.page-home .flow__lead{
  margin:0;
  font-size:.94rem;
  line-height:1.85;
  color: rgba(43,43,47,.76);
  max-width:34em;
}
.page-home .steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.1rem;
}
.page-home .step{
  padding-top:1.15rem;
  border-top:1px solid var(--home-line);
}
.page-home .step__num{
  display:block;
  margin-bottom:.5rem;
  color: var(--tide);
  letter-spacing:.14em;
}
.page-home .step__title{
  margin:0 0 .4rem;
  font-family: var(--serif);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.03em;
  color: var(--deep);
}
.page-home .step__text{
  margin:0;
  font-size:.85rem;
  line-height:1.78;
  color: rgba(43,43,47,.76);
}
.page-home .flow__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.4rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-top:1.4rem;
  border-top:1px solid var(--home-line-soft);
}
.page-home .flow__figure{
  margin:0;
  flex:0 0 auto;
  width:104px;
  border:1px solid var(--home-line);
  padding:.35rem;
  background: var(--mist);
}
.page-home .flow__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.page-home .flow__caption{
  margin:0;
  flex:1 1 200px;
  font-size:.86rem;
  line-height:1.78;
  color: rgba(43,43,47,.7);
  max-width:30em;
}

/* ---------- 海南本地信息 ---------- */
.page-home .local{
  background:
    radial-gradient(80% 120% at 92% 0%, rgba(61,110,143,.14) 0%, rgba(61,110,143,0) 60%),
    var(--mist);
  border-top:1px solid var(--home-line);
  padding: clamp(2.6rem, 6.5vw, 4.4rem) 0 clamp(3rem, 7vw, 5rem);
}
.page-home .local__mono{
  margin:0 0 .8rem;
  color: var(--tide);
  letter-spacing:.16em;
}
.page-home .local__title{
  margin:0 0 .9rem;
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(1.55rem, 4.6vw, 2.3rem);
  line-height:1.34;
  letter-spacing:.05em;
  color: var(--deep);
}
.page-home .local__text{
  margin:0 0 1.6rem;
  font-size:.94rem;
  line-height:1.9;
  color: rgba(43,43,47,.82);
  max-width:40em;
}
.page-home .local__facts{
  margin:0 0 1.7rem;
  display:grid;
  gap:1px;
  background: var(--home-line);
  border:1px solid var(--home-line);
}
.page-home .local__fact{
  background: var(--paper);
  padding:.9rem 1rem;
  display:grid;
  gap:.28rem;
}
.page-home .local__fact dt{
  color: var(--tide);
  letter-spacing:.12em;
}
.page-home .local__fact dd{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  color: var(--ink);
}
.page-home .local__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px){
  .page-home .update-band__list{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .page-home .ios__paths{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (min-width: 760px){
  .page-home .steps{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:1.3rem 1.6rem;
  }
  .page-home .local__facts{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .page-home .flow__figure{
    width:128px;
  }
}

@media (min-width: 960px){
  .page-home .hero__grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.86fr);
    align-items:start;
    gap: clamp(2rem, 4vw, 3.4rem);
  }
  .page-home .hero__figure{
    margin-top:1.6rem;
  }
  .page-home .update-band__inner{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);
    align-items:start;
  }
  .page-home .scenes__layout{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    align-items:start;
  }
  .page-home .scenes__figure{
    position:sticky;
    top:2rem;
  }
  .page-home .ios__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);
    align-items:stretch;
  }
  .page-home .records__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
  }
  .page-home .steps{
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:0;
  }
  .page-home .step{
    padding:1.15rem 1rem 0 0;
    border-top:1px solid var(--home-line);
  }
  .page-home .local__text{
    font-size:.96rem;
  }
}

@media (min-width: 1120px){
  .page-home .hero{
    padding-top:4.2rem;
  }
  .page-home .hero__intro{
    font-size:1.04rem;
  }
}

@media (hover: none){
  .page-home .tline__desc{
    max-height:7rem;
    opacity:1;
    margin-top:.3rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-home .searchbar,
  .page-home .tline__link::before,
  .page-home .tline__label,
  .page-home .tline__desc,
  .page-home .scene{
    transition:none;
  }
  .page-home .hero__frame{
    transform:none;
  }
}
<<<END>>>
