.page-home {
  --home-shadow: 0 20px 44px -30px rgba(14, 42, 36, 0.55);
  --home-gold-line: rgba(201, 164, 92, 0.42);
  --home-ink-soft: rgba(24, 33, 31, 0.74);
  --home-ivory-soft: rgba(247, 243, 234, 0.78);
}

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

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

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  color: var(--ivory);
  background-color: var(--forest);
  background-image:
    linear-gradient(var(--line-dark-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px),
    radial-gradient(ellipse at 74% 8%, rgba(233, 216, 180, 0.18), transparent 64%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
}

.page-home .hero__inner {
  display: grid;
  gap: 36px;
  padding-block: clamp(40px, 7vw, 84px) clamp(48px, 8vw, 96px);
}

.page-home .hero__kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--champagne);
  border-bottom: 1px solid var(--home-gold-line);
}

.page-home .hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 76px);
  line-height: 1.08;
  letter-spacing: 0.04em;
}

.page-home .hero__title-accent {
  display: block;
  color: var(--gold);
}

.page-home .hero__lede {
  max-width: 32em;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--home-ivory-soft);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 30px;
}

.page-home .hero__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 15px;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.page-home .hero__text-link:hover,
.page-home .hero__text-link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.page-home .hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}

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

.page-home .hero__stat dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--haze);
}

.page-home .hero__stat dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--champagne);
}

.page-home .hero__collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: end;
}

.page-home .hero__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-dark);
  background: var(--forest-soft);
}

.page-home .hero__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .hero__shot--main {
  min-height: 300px;
}

.page-home .hero__shot--sub {
  aspect-ratio: 4 / 3;
}

.page-home .hero__status {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, rgba(201, 164, 92, 0.18), rgba(9, 30, 26, 0.92) 72%);
}

.page-home .hero__status-index {
  justify-self: start;
  padding: 2px 11px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid var(--home-gold-line);
  border-radius: 999px;
}

.page-home .hero__status-title {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.page-home .hero__status-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(233, 216, 180, 0.82);
}

/* ---------- 通用区块 ---------- */
.page-home .home-block {
  padding-block: clamp(52px, 8vw, 96px);
}

.page-home .home-block .lede {
  max-width: 36em;
  margin-top: 16px;
  line-height: 1.85;
  color: var(--home-ink-soft);
}

/* ---------- 换新入口 ---------- */
.page-home .entry {
  background: var(--ivory);
}

.page-home .entry__inner {
  display: grid;
  gap: 30px;
}

.page-home .entry__media {
  margin: 0;
}

.page-home .entry__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}

.page-home .entry__points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.page-home .entry__points li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line-light);
}

.page-home .entry__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  color: var(--gold-ink);
  border: 1px solid var(--line-light);
  border-radius: 999px;
}

.page-home .entry__points h3 {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-home .entry__points p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--home-ink-soft);
}

/* ---------- 三条常用路径 ---------- */
.page-home .paths {
  background: var(--mist);
}

.page-home .paths__lede {
  margin-bottom: 0;
}

.page-home .paths__grid {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}

.page-home .path {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  background: var(--ivory);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--home-shadow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-home .path:hover,
.page-home .path:focus-within {
  border-color: var(--gold);
  box-shadow: 0 24px 46px -28px rgba(14, 42, 36, 0.5);
}

.page-home .path__index {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
}

.page-home .path__title {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.page-home .path__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--home-ink-soft);
}

.page-home .path__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14.5px;
  color: var(--forest);
  text-decoration: none;
  border-top: 1px solid var(--line-light);
  transition: color 0.25s ease;
}

.page-home .path__link:hover,
.page-home .path__link:focus-visible {
  color: var(--gold-ink);
}

/* ---------- V4 专区 ---------- */
.page-home .v4 {
  background-image: linear-gradient(180deg, var(--champagne) 0%, var(--ivory) 62%);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.page-home .v4__grid {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}

.page-home .v4__card {
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--forest);
  color: var(--ivory);
  box-shadow: var(--home-shadow);
}

.page-home .v4__badge {
  display: inline-block;
  padding: 3px 11px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid var(--home-gold-line);
  border-radius: 999px;
}

.page-home .v4__card-title {
  margin: 16px 0 10px;
  font-size: 22px;
  letter-spacing: 0.04em;
}

.page-home .v4__card-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--home-ivory-soft);
}

.page-home .v4-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-home .v4-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line-light);
}

.page-home .v4-steps li:last-child {
  border-bottom: 0;
}

.page-home .v4-steps__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
}

.page-home .v4-steps h3 {
  margin: 0 0 5px;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-home .v4-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--home-ink-soft);
}

.page-home .v4__lanes {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .v4__lanes li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-light-soft);
}

.page-home .v4__lane-tag {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}

.page-home .v4__cta {
  margin-top: 30px;
}

/* ---------- 小屏简体版 ---------- */
.page-home .small {
  background: var(--ivory);
}

.page-home .small__inner {
  display: grid;
  gap: 32px;
}

.page-home .small__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .small__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--home-ink-soft);
}

.page-home .small__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--gold);
}

.page-home .small__details {
  margin-top: 22px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--mist);
  overflow: hidden;
}

.page-home .small__details summary {
  padding: 14px 18px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--forest);
  cursor: pointer;
  list-style: none;
}

.page-home .small__details summary::-webkit-details-marker {
  display: none;
}

.page-home .small__details summary::after {
  content: "+";
  float: right;
  font-family: var(--font-mono);
  color: var(--gold-ink);
}

.page-home .small__details[open] summary::after {
  content: "−";
}

.page-home .small__details summary:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: -2px;
}

.page-home .small__details ul {
  margin: 0;
  padding: 0 18px 18px;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-home .small__details li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--home-ink-soft);
  padding-top: 10px;
  border-top: 1px dashed var(--line-light);
}

.page-home .small__cta {
  margin-top: 24px;
}

.page-home .small__media {
  margin: 0;
}

.page-home .small__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- 人群指引 ---------- */
.page-home .crowd {
  background-color: var(--forest);
  background-image:
    linear-gradient(var(--line-dark-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
  color: var(--ivory);
}

.page-home .crowd__eyebrow {
  color: var(--champagne);
}

.page-home .crowd__title {
  margin-top: 14px;
  color: var(--ivory);
}

.page-home .crowd__lede {
  color: var(--home-ivory-soft);
}

.page-home .crowd__grid {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.page-home .crowd__card {
  padding: 24px 22px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: rgba(22, 54, 46, 0.66);
  transition: border-color 0.3s ease;
}

.page-home .crowd__card:hover,
.page-home .crowd__card:focus-within {
  border-color: var(--home-gold-line);
}

.page-home .crowd__card-title {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--champagne);
}

.page-home .crowd__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: crowd-step;
  display: grid;
  gap: 10px;
}

.page-home .crowd__steps li {
  counter-increment: crowd-step;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--home-ivory-soft);
}

.page-home .crowd__steps li::before {
  content: counter(crowd-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  padding-top: 3px;
}

.page-home .crowd__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-bottom: 4px;
  font-size: 14.5px;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.page-home .crowd__link:hover,
.page-home .crowd__link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---------- 本周更新 ---------- */
.page-home .weekly {
  background: var(--ivory);
}

.page-home .weekly__grid {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.page-home .weekly__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  background: var(--mist);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--gold);
}

.page-home .weekly__item-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-home .weekly__item-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--home-ink-soft);
}

.page-home .weekly__item-link {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.page-home .weekly__item-link:hover,
.page-home .weekly__item-link:focus-visible {
  color: var(--gold-ink);
  border-color: var(--gold);
}

.page-home .weekly__more {
  margin: 26px 0 0;
}

.page-home .weekly__more a {
  font-size: 14.5px;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--home-gold-line);
  padding-bottom: 3px;
}

/* ---------- 收束 ---------- */
.page-home .next {
  background: var(--mist);
}

.page-home .next__panel {
  padding: clamp(28px, 5vw, 52px);
  background: var(--ivory);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--home-shadow);
}

.page-home .next__eyebrow {
  color: var(--gold-ink);
}

.page-home .next__title {
  margin-top: 14px;
}

.page-home .next__route {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 24px;
  margin: 22px 0 6px;
  color: var(--gold);
}

.page-home .next__actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.page-home .next__action {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-light);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.page-home .next__action:hover,
.page-home .next__action:focus-visible {
  border-color: var(--electric);
  background: rgba(24, 199, 184, 0.08);
}

.page-home .next__action-tag {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
}

.page-home .next__action-text {
  font-size: 15px;
  line-height: 1.6;
}

.page-home .next__note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--home-ink-soft);
}

.page-home .next__note a {
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--home-gold-line);
  padding-bottom: 2px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-home .hero__collage {
    grid-template-columns: 1.12fr 0.88fr;
    grid-template-rows: auto auto;
  }

  .page-home .hero__shot--main {
    grid-row: 1 / span 2;
    min-height: 420px;
  }

  .page-home .hero__shot--sub {
    aspect-ratio: 3 / 4;
  }

  .page-home .v4__lanes {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-home .crowd__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .page-home .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 52px;
    align-items: end;
  }

  .page-home .entry__inner {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 56px;
    align-items: start;
  }

  .page-home .paths__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-home .path:nth-child(2) {
    margin-top: 28px;
  }

  .page-home .path:nth-child(3) {
    margin-top: 56px;
  }

  .page-home .v4__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 40px;
    align-items: start;
  }

  .page-home .small__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
  }

  .page-home .weekly__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .page-home .next__actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .page-home .hero__inner {
    gap: 64px;
  }

  .page-home .hero__shot--main {
    min-height: 480px;
  }

  .page-home .next__panel {
    padding: 56px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .path,
  .page-home .crowd__card,
  .page-home .next__action {
    transition: none;
  }
}


<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <div class="container hero__inner">
      <div class="hero__lead" data-reveal>
        <p class="hero__kicker mono">ALLWINCITY · CN　/　V4　/　换新导视</p>
        <h1 id="hero-title" class="hero__title">换新之后，<span class="hero__title-accent">从第二栏开始</span></h1>
        <p class="hero__lede">万象城ALLWINCITY新版从 3 月 14 日起与您见面。最常用的切换动作移到导航第二栏，无论停在哪一页，都能一步回到自己要看的内容；第一次到访、回来续看、在手机上扫一眼，各有各的入口。</p>
        <div class="hero__actions">
          <a class="btn btn--gold" href="#v4">进入 V4 专区</a>
          <a class="hero__text-link" href="/tutorial/">先看打开指引 <span aria-hidden="true">→</span></a>
        </div>
        <dl class="hero__stats">
          <div class="hero__stat">
            <dt>中文站运营</dt>
            <dd>9 年</dd>
          </div>
          <div class="hero__stat">
            <dt>累计服务访客</dt>
            <dd>120 万+</dd>
          </div>
          <div class="hero__stat">
            <dt>导视信息复核</dt>
            <dd>每季度</dd>
          </div>
        </dl>
      </div>

      <div class="hero__collage">
        <figure class="hero__shot hero__shot--main">
          <img src="{zhanqunpic:h:1500w:1200}" width="1200" height="1500" alt="万象城建筑外立面夜景，暖金光带映在深墨绿夜空与玻璃幕墙上">
        </figure>
        <div class="hero__status" data-reveal data-reveal-delay="120">
          <span class="hero__status-index mono">V4</span>
          <p class="hero__status-title">老用户接着上次看</p>
          <p class="hero__status-note">历史访问记录保留，回访时直接落在上次浏览的位置。</p>
        </div>
        <figure class="hero__shot hero__shot--sub">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="室内中庭弧形光带与楼层导视结构，自下而上的透视视角" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="home-block entry" aria-labelledby="entry-title">
    <div class="container entry__inner">
      <figure class="entry__media" data-reveal>
        <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="商场指引标识特写，暖金箭头与深绿底色形成清晰导视对比" loading="lazy" decoding="async">
        <figcaption class="media-caption">导航第二栏：换新入口所在的位置</figcaption>
      </figure>
      <div class="entry__body" data-reveal data-reveal-delay="60">
        <p class="eyebrow">01 / 入口</p>
        <h2 id="entry-title" class="section-title">换新导视：从第二栏进入</h2>
        <p class="lede">第二栏是页面边框上那条常驻的切换栏。它不随滚动消失，您也不必记住上次是从哪个页面点进来的。</p>
        <ul class="entry__points">
          <li>
            <span class="entry__num mono">01</span>
            <div>
              <h3>位置固定，一直在</h3>
              <p>从首页、专题还是合作页出发，切换入口都停在同一个地方，眼睛不用重新找。</p>
            </div>
          </li>
          <li>
            <span class="entry__num mono">02</span>
            <div>
              <h3>一步到 V4 专区</h3>
              <p>点开即达，不用先绕回首页，也不用在页面里翻找入口。</p>
            </div>
          </li>
          <li>
            <span class="entry__num mono">03</span>
            <div>
              <h3>手机上同样好点</h3>
              <p>窄屏打开后仍是同一个入口，手指点一次就能进。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="home-block paths" aria-labelledby="paths-title">
    <div class="container">
      <p class="eyebrow">02 / 常用路径</p>
      <h2 id="paths-title" class="section-title">您属于哪一种，就走哪一条</h2>
      <p class="lede paths__lede">三条路各配一个动作，看完就能走，不必在页面里来回比较。</p>

      <div class="paths__grid">
        <article class="path" data-reveal>
          <span class="path__index mono">路径 01</span>
          <h3 class="path__title">第一次来</h3>
          <p class="path__body">先认楼层和出入口，再看这趟要逛哪几家。打开指引已经把顺序排好，照着走就行。</p>
          <a class="path__link" href="/tutorial/">看打开指引 <span aria-hidden="true">→</span></a>
        </article>

        <article class="path" data-reveal data-reveal-delay="60">
          <span class="path__index mono">路径 02</span>
          <h3 class="path__title">回来续看</h3>
          <p class="path__body">上次看到一半的品牌和专题，从第二栏进 V4 专区，接着原来那一段往下看。</p>
          <a class="path__link" href="/solutions/">进 V4 专区 <span aria-hidden="true">→</span></a>
        </article>

        <article class="path" data-reveal data-reveal-delay="120">
          <span class="path__index mono">路径 03</span>
          <h3 class="path__title">在手机上扫一眼</h3>
          <p class="path__body">小屏简体版把首屏信息块减了下来，订阅按钮跟着页面底部，想收更新时一步就能点。</p>
          <a class="path__link" href="/tutorial/">看小屏版说明 <span aria-hidden="true">→</span></a>
        </article>
      </div>
    </div>
  </section>

  <section class="home-block v4" id="v4" aria-labelledby="v4-title">
    <div class="container">
      <div class="v4__head" data-reveal>
        <p class="eyebrow">03 / V4 专区</p>
        <h2 id="v4-title" class="section-title">回到您上次看到的地方</h2>
        <p class="lede">老用户的浏览记录会留着，回访时不必从头找起；新访客走三步就能进到里面。</p>
      </div>

      <div class="v4__grid">
        <div class="v4__card" data-reveal>
          <span class="v4__badge mono">老用户</span>
          <h3 class="v4__card-title">不用重新注册</h3>
          <p class="v4__card-body">历史访问记录保留在专区里，回去时直接落在上次浏览的位置。换一台设备再看，入口还是那一个。</p>
        </div>

        <ol class="v4-steps" data-reveal data-reveal-delay="60">
          <li>
            <span class="v4-steps__num mono">1</span>
            <div>
              <h3>打开导航第二栏</h3>
              <p>位于页面顶部常驻，任何位置都能点到。</p>
            </div>
          </li>
          <li>
            <span class="v4-steps__num mono">2</span>
            <div>
              <h3>点进 V4 专区</h3>
              <p>不需要额外账号，也不必填写任何信息。</p>
            </div>
          </li>
          <li>
            <span class="v4-steps__num mono">3</span>
            <div>
              <h3>选一条常用路径</h3>
              <p>到访前查看、场内导览、离场后订阅，挑当下要用的那条。</p>
            </div>
          </li>
        </ol>
      </div>

      <ul class="v4__lanes">
        <li><span class="v4__lane-tag mono">A</span>到访前查看：出发前确认楼层、出入口与营业时段</li>
        <li><span class="v4__lane-tag mono">B</span>场内导览：走到哪一层，都能看到下一站在哪</li>
        <li><span class="v4__lane-tag mono">C</span>离场后订阅：把活动预告与品牌上新留在手边</li>
      </ul>

      <a class="btn btn--forest v4__cta" href="/solutions/">看 V4 专区的完整说明</a>
    </div>
  </section>

  <section class="home-block small" aria-labelledby="small-title">
    <div class="container small__inner">
      <div class="small__body" data-reveal>
        <p class="eyebrow">04 / 小屏阅读</p>
        <h2 id="small-title" class="section-title">屏幕小一点，路也短一点</h2>
        <p class="lede">万象城小屏简体版为 5.5 英寸及以下的屏幕重新排过版，首屏信息块少了约 40%，一屏里只留最要紧的几件事。</p>
        <ul class="small__list">
          <li>订阅按钮跟着页面底部，翻到哪儿都能看见。</li>
          <li>窄屏查找订阅入口，平均步骤由 4 步缩短到 1 步。</li>
          <li>内容每周更新 2 次，覆盖活动预告、品牌上新与导视变更。</li>
        </ul>
        <details class="small__details">
          <summary>每周更新里都有什么</summary>
          <ul>
            <li>活动预告：本周与下周的场内活动时间安排</li>
            <li>品牌上新：新开铺位与换季门店的位置变化</li>
            <li>导视变更：楼层指引、出入口与动线的调整提醒</li>
          </ul>
        </details>
        <a class="btn btn--gold small__cta" href="/tutorial/">看小屏版怎么用</a>
      </div>
      <figure class="small__media" data-reveal data-reveal-delay="60">
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="小屏设备置于商场导视牌前，屏幕显示简体版排版与页面底部订阅条" loading="lazy" decoding="async">
        <figcaption class="media-caption">订阅条跟随在页面底部，翻到哪一段都在</figcaption>
      </figure>
    </div>
  </section>

  <section class="home-block crowd" aria-labelledby="crowd-title">
    <div class="container">
      <p class="eyebrow crowd__eyebrow">05 / 打开指引</p>
      <h2 id="crowd-title" class="section-title crowd__title">常用人群打开指引</h2>
      <p class="lede crowd__lede">四类到访者的路径已经重排，照着编号走，查找的步子更少。</p>

      <div class="crowd__grid">
        <article class="crowd__card" data-reveal>
          <h3 class="crowd__card-title">首次到访</h3>
          <ol class="crowd__steps">
            <li>打开导航第二栏</li>
            <li>进 V4 专区，选到访前查看</li>
            <li>出发前看一眼楼层动线</li>
          </ol>
        </article>
        <article class="crowd__card" data-reveal data-reveal-delay="60">
          <h3 class="crowd__card-title">家庭客群</h3>
          <ol class="crowd__steps">
            <li>进 V4 专区</li>
            <li>看亲子与餐饮所在的楼层</li>
            <li>把动线图留在手边</li>
          </ol>
        </article>
        <article class="crowd__card" data-reveal data-reveal-delay="120">
          <h3 class="crowd__card-title">商务客群</h3>
          <ol class="crowd__steps">
            <li>进 V4 专区</li>
            <li>确认会面楼层与停车出入口</li>
            <li>记下当日的营业时段</li>
          </ol>
        </article>
        <article class="crowd__card" data-reveal data-reveal-delay="180">
          <h3 class="crowd__card-title">夜间到访</h3>
          <ol class="crowd__steps">
            <li>进 V4 专区</li>
            <li>切到夜间动线</li>
            <li>看清各楼层的结束时间</li>
          </ol>
        </article>
      </div>

      <a class="crowd__link" href="/tutorial/">四条路径的完整说明 <span aria-hidden="true">→</span></a>
    </div>
  </section>

  <section class="home-block weekly" aria-labelledby="weekly-title">
    <div class="container">
      <p class="eyebrow">06 / 本周导视更新</p>
      <h2 id="weekly-title" class="section-title">场内正在发生的事</h2>

      <div class="weekly__grid">
        <article class="weekly__item" data-reveal>
          <span class="tag tag--terracotta">换新导视</span>
          <h3 class="weekly__item-title">新版上线首周的现场观察</h3>
          <p class="weekly__item-body">6 篇现场记录与 3 条动线图解，讲清第二栏入口上线后，访客在楼层之间怎么走、又在哪里停下来。</p>
          <a class="weekly__item-link" href="/topics/">读这组专题 <span aria-hidden="true">→</span></a>
        </article>

        <article class="weekly__item" data-reveal data-reveal-delay="60">
          <span class="tag tag--violet">城市夜光</span>
          <h3 class="weekly__item-title">中庭光带与夜间动线怎么配合</h3>
          <p class="weekly__item-body">从外立面到中庭的照明层次，看导视标识在夜色里如何保持清楚，也看夜间到访该从哪一侧进场。</p>
          <a class="weekly__item-link" href="/topics/">读这组专题 <span aria-hidden="true">→</span></a>
        </article>
      </div>

      <p class="weekly__more"><a href="/topics/">去专题中心看全部栏目 <span aria-hidden="true">→</span></a></p>
    </div>
  </section>

  <section class="home-block next" aria-labelledby="next-title">
    <div class="container">
      <div class="next__panel" data-reveal>
        <div class="next__head">
          <p class="eyebrow next__eyebrow">07 / 下一步</p>
          <h2 id="next-title" class="section-title next__title">挑一条现在就能走的</h2>
        </div>
        <svg class="next__route" viewBox="0 0 320 24" role="presentation" aria-hidden="true" focusable="false">
          <line x1="4" y1="12" x2="296" y2="12" stroke="currentColor" stroke-width="1" stroke-dasharray="4 6" />
          <circle cx="8" cy="12" r="4" fill="currentColor" />
          <path d="M292 6 L302 12 L292 18" fill="none" stroke="currentColor" stroke-width="1.4" />
        </svg>
        <div class="next__actions">
          <a class="next__action" href="/solutions/">
            <span class="next__action-tag mono">A</span>
            <span class="next__action-text">进 V4 专区，用到访前查看与场内导览</span>
          </a>
          <a class="next__action" href="/tutorial/">
            <span class="next__action-tag mono">B</span>
            <span class="next__action-text">看使用教程，把几个入口一次认全</span>
          </a>
          <a class="next__action" href="/cooperation/">
            <span class="next__action-tag mono">C</span>
            <span class="next__action-text">谈商务合作，聊档期、形式与权益</span>
          </a>
        </div>
        <p class="next__note">想先了解我们的来路？<a href="/culture/">读一读品牌文化</a></p>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-shadow: 0 20px 44px -30px rgba(14, 42, 36, 0.55);
  --home-gold-line: rgba(201, 164, 92, 0.42);
  --home-ink-soft: rgba(24, 33, 31, 0.74);
  --home-ivory-soft: rgba(247, 243, 234, 0.8);
}

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

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

/* ---------- 首屏拼贴 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  color: var(--ivory);
  background-color: var(--forest);
  background-image:
    linear-gradient(var(--line-dark-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px),
    radial-gradient(ellipse at 76% 6%, rgba(233, 216, 180, 0.2), transparent 62%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
}

.page-home .hero__inner {
  display: grid;
  gap: 36px;
  padding-block: clamp(40px, 7vw, 84px) clamp(46px, 8vw, 96px);
}

.page-home .hero__kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--champagne);
  border-bottom: 1px solid var(--home-gold-line);
}

.page-home .hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 7.4vw, 76px);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.page-home .hero__title-accent {
  display: block;
  color: var(--gold);
}

.page-home .hero__lede {
  max-width: 32em;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--home-ivory-soft);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}

.page-home .hero__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 15px;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.page-home .hero__text-link:hover,
.page-home .hero__text-link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.page-home .hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
}

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

.page-home .hero__stat dt {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--haze);
}

.page-home .hero__stat dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--champagne);
}

.page-home .hero__collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: end;
}

.page-home .hero__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-dark);
  background: var(--forest-soft);
}

.page-home .hero__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .hero__shot--main {
  min-height: 300px;
}

.page-home .hero__shot--sub {
  aspect-ratio: 4 / 3;
}

.page-home .hero__status {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, rgba(201, 164, 92, 0.18), rgba(9, 30, 26, 0.92) 72%);
}

.page-home .hero__status-index {
  justify-self: start;
  padding: 2px 11px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid var(--home-gold-line);
  border-radius: 999px;
}

.page-home .hero__status-title {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.page-home .hero__status-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(233, 216, 180, 0.84);
}

/* ---------- 区块骨架 ---------- */
.page-home .home-block {
  padding-block: clamp(52px, 8vw, 96px);
}

.page-home .home-block .lede {
  max-width: 36em;
  margin-top: 16px;
  line-height: 1.85;
  color: var(--home-ink-soft);
}

/* ---------- 换新入口 ---------- */
.page-home .entry {
  background: var(--ivory);
}

.page-home .entry__inner {
  display: grid;
  gap: 30px;
}

.page-home .entry__media {
  margin: 0;
}

.page-home .entry__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}

.page-home .entry__points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.page-home .entry__points li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line-light);
}

.page-home .entry__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 12px;
  color: var(--gold-ink);
  border: 1px solid var(--line-light);
  border-radius: 999px;
}

.page-home .entry__points h3 {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-home .entry__points p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--home-ink-soft);
}

/* ---------- 三条常用路径 ---------- */
.page-home .paths {
  background: var(--mist);
}

.page-home .paths__lede {
  margin-bottom: 0;
}

.page-home .paths__grid {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.page-home .path {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  background: var(--ivory);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--home-shadow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-home .path:hover,
.page-home .path:focus-within {
  border-color: var(--gold);
  box-shadow: 0 24px 46px -28px rgba(14, 42, 36, 0.5);
}

.page-home .path__index {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
}

.page-home .path__title {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.page-home .path__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--home-ink-soft);
}

.page-home .path__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14.5px;
  color: var(--forest);
  text-decoration: none;
  border-top: 1px solid var(--line-light);
  transition: color 0.25s ease;
}

.page-home .path__link:hover,
.page-home .path__link:focus-visible {
  color: var(--gold-ink);
}

/* ---------- V4 专区 ---------- */
.page-home .v4 {
  background-image: linear-gradient(180deg, var(--champagne) 0%, var(--ivory) 64%);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.page-home .v4__grid {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.page-home .v4__card {
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--forest);
  color: var(--ivory);
  box-shadow: var(--home-shadow);
}

.page-home .v4__badge {
  display: inline-block;
  padding: 3px 11px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid var(--home-gold-line);
  border-radius: 999px;
}

.page-home .v4__card-title {
  margin: 16px 0 10px;
  font-size: 22px;
  letter-spacing: 0.04em;
}

.page-home .v4__card-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--home-ivory-soft);
}

.page-home .v4-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-home .v4-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line-light);
}

.page-home .v4-steps li:last-child {
  border-bottom: 0;
}

.page-home .v4-steps__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
}

.page-home .v4-steps h3 {
  margin: 0 0 5px;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-home .v4-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--home-ink-soft);
}

.page-home .v4__lanes {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .v4__lanes li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line-light-soft);
  border-radius: var(--radius-sm);
}

.page-home .v4__lane-tag {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}

.page-home .v4__cta {
  margin-top: 28px;
}

/* ---------- 小屏简体版 ---------- */
.page-home .small {
  background: var(--ivory);
}

.page-home .small__inner {
  display: grid;
  gap: 32px;
}

.page-home .small__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .small__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--home-ink-soft);
}

.page-home .small__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--gold);
}

.page-home .small__details {
  margin-top: 22px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--mist);
  overflow: hidden;
}

.page-home .small__details summary {
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--forest);
  cursor: pointer;
  list-style: none;
}

.page-home .small__details summary::-webkit-details-marker {
  display: none;
}

.page-home .small__details summary::after {
  content: "+";
  float: right;
  font-family: var(--font-mono);
  color: var(--gold-ink);
}

.page-home .small__details[open] summary::after {
  content: "−";
}

.page-home .small__details summary:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: -2px;
}

.page-home .small__details ul {
  margin: 0;
  padding: 0 18px 18px;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-home .small__details li {
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--home-ink-soft);
  border-top: 1px dashed var(--line-light);
}

.page-home .small__cta {
  margin-top: 24px;
}

.page-home .small__media {
  margin: 0;
}

.page-home .small__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- 人群指引 ---------- */
.page-home .crowd {
  color: var(--ivory);
  background-color: var(--forest);
  background-image:
    linear-gradient(var(--line-dark-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
}

.page-home .crowd__eyebrow {
  color: var(--champagne);
}

.page-home .crowd__title {
  margin-top: 14px;
  color: var(--ivory);
}

.page-home .crowd__lede {
  color: var(--home-ivory-soft);
}

.page-home .crowd__grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.page-home .crowd__card {
  padding: 24px 22px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: rgba(22, 54, 46, 0.68);
  transition: border-color 0.3s ease;
}

.page-home .crowd__card:hover,
.page-home .crowd__card:focus-within {
  border-color: var(--home-gold-line);
}

.page-home .crowd__card-title {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--champagne);
}

.page-home .crowd__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: crowd-step;
  display: grid;
  gap: 10px;
}

.page-home .crowd__steps li {
  counter-increment: crowd-step;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--home-ivory-soft);
}

.page-home .crowd__steps li::before {
  content: counter(crowd-step, decimal-leading-zero);
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
}

.page-home .crowd__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding-bottom: 4px;
  font-size: 14.5px;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.page-home .crowd__link:hover,
.page-home .crowd__link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---------- 本周更新 ---------- */
.page-home .weekly {
  background: var(--ivory);
}

.page-home .weekly__grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.page-home .weekly__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  background: var(--mist);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
}

.page-home .weekly__item-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.page-home .weekly__item-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--home-ink-soft);
}

.page-home .weekly__item-link {
  margin-top: 2px;
  padding-bottom: 3px;
  font-size: 14.5px;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--line-light);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.page-home .weekly__item-link:hover,
.page-home .weekly__item-link:focus-visible {
  color: var(--gold-ink);
  border-color: var(--gold);
}

.page-home .weekly__more {
  margin: 24px 0 0;
}

.page-home .weekly__more a {
  padding-bottom: 3px;
  font-size: 14.5px;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--home-gold-line);
}

/* ---------- 收束 ---------- */
.page-home .next {
  background: var(--mist);
}

.page-home .next__panel {
  padding: clamp(26px, 5vw, 52px);
  background: var(--ivory);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--home-shadow);
}

.page-home .next__eyebrow {
  color: var(--gold-ink);
}

.page-home .next__title {
  margin-top: 14px;
}

.page-home .next__route {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 24px;
  margin: 22px 0 6px;
  color: var(--gold);
}

.page-home .next__actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.page-home .next__action {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.page-home .next__action:hover,
.page-home .next__action:focus-visible {
  border-color: var(--electric);
  background: rgba(24, 199, 184, 0.08);
}

.page-home .next__action-tag {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
}

.page-home .next__action-text {
  font-size: 15px;
  line-height: 1.6;
}

.page-home .next__note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--home-ink-soft);
}

.page-home .next__note a {
  padding-bottom: 2px;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--home-gold-line);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-home .hero__collage {
    grid-template-columns: 1.12fr 0.88fr;
    grid-template-rows: auto auto;
  }

  .page-home .hero__shot--main {
    grid-row: 1 / span 2;
    min-height: 420px;
  }

  .page-home .hero__shot--sub {
    aspect-ratio: 3 / 4;
  }

  .page-home .v4__lanes {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-home .crowd__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .page-home .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 52px;
    align-items: end;
  }

  .page-home .entry__inner {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 56px;
    align-items: start;
  }

  .page-home .paths__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-home .path:nth-child(2) {
    margin-top: 28px;
  }

  .page-home .path:nth-child(3) {
    margin-top: 56px;
  }

  .page-home .v4__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 40px;
    align-items: start;
  }

  .page-home .small__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
  }

  .page-home .weekly__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .page-home .next__actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .page-home .hero__inner {
    gap: 64px;
  }

  .page-home .hero__shot--main {
    min-height: 480px;
  }

  .page-home .next__panel {
    padding: 56px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .path,
  .page-home .crowd__card,
  .page-home .next__action,
  .page-home .hero__text-link,
  .page-home .crowd__link,
  .page-home .path__link,
  .page-home .weekly__item-link {
    transition: none;
  }
}