/**
 * 首页底栏（同 People / Places / Cities 的幕布底栏）与 How it works。
 * 底栏样式取自 cities-board.css / vision-mobile-adapt.css，选择器换成 .page-home。
 */
.page-home {
  --surface: #f5f7fd;
  --on-surface: #4b4b4b;
  --primary: #181c20;
  --accent: #6c2624;
  --line: #dedede;
  --muted: rgba(75, 75, 75, 0.66);
  --f-sans: "Poppins", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(1rem, 3.2vw, 3.25rem);
}

/* 新底栏已含版权与隐私条款，原首屏底部小条不再需要 */
body.page-home #hero-container .footer-wrap-2 { display: none !important; }

/* —— Footer —— */
.page-home footer {
  --foot-t: linear-gradient(var(--accent), var(--accent));
  position: relative;
  z-index: 2;
  background: var(--surface);
  color: var(--on-surface);
  font-size: 16px;
  font-family: var(--f-sans);
  overflow-anchor: none;
  padding: clamp(3rem, 7vh, 5rem)
    var(--gd-header-inset-right, var(--gutter))
    2rem
    var(--gd-header-inset-left, var(--gutter));
}
.page-home footer *,
.page-home footer *::before,
.page-home footer *::after {
  overflow-anchor: none;
}
.page-home footer a {
  color: var(--on-surface);
}
.page-home .foot-frame {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-home .foot-frame::before,
.page-home .foot-frame::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 2;
}
.page-home .foot-frame::before {
  left: -1px;
  bottom: -1px;
  background:
    var(--foot-t) 0 100% / 11px 2.5px no-repeat,
    var(--foot-t) 0 100% / 2.5px 11px no-repeat;
}
.page-home .foot-frame::after {
  right: -1px;
  top: -1px;
  background:
    var(--foot-t) 100% 0 / 11px 2.5px no-repeat,
    var(--foot-t) 100% 0 / 2.5px 11px no-repeat;
}
.page-home .foot-clip {
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-home .foot-fuel {
  height: 0;
  pointer-events: none;
}
.page-home .foot-grid,
.page-home .foot-base {
  background: var(--surface);
}
.page-home .foot-clip[data-scene="on"] {
  background: var(--surface);
}
.page-home .foot-scene {
  --scene-pos: 50% 44%;
}
.page-home .foot-mark {
  margin: clamp(2.75rem, 7vh, 5rem) 0 clamp(1.75rem, 4vh, 2.75rem);
  background: var(--accent);
  -webkit-mask: url("/images/grdd_logo_webflow-02.svg") center / 100% 100% no-repeat;
  mask: url("/images/grdd_logo_webflow-02.svg") center / 100% 100% no-repeat;
}
.page-home footer[data-curtain="shut"] .foot-grid {
  border-bottom-color: transparent;
}
.page-home footer[data-curtain="shut"] .foot-grid > div + div::before,
.page-home footer[data-curtain="shut"] .foot-grid::before,
.page-home footer[data-curtain="shut"] .foot-cap {
  opacity: 0;
}
.page-home footer:not([data-curtain="shut"]) .foot-rules i + i::before {
  opacity: 0;
}
.page-home .foot-mark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}
.page-home .foot-grid {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-home .foot-grid > div {
  position: relative;
  padding: 2.4rem 2rem;
}
.page-home .foot-grid > div:first-child { padding-left: 2rem; }
.page-home .foot-grid > div:last-child { padding-right: 2rem; }
.page-home .foot-grid > div + div { border-left: 1px solid var(--line); }
.page-home .foot-grid > div + div::before,
.page-home .foot-grid > div + div::after,
.page-home .foot-grid::before,
.page-home .foot-grid::after,
.page-home .foot-cap,
.page-home .foot-base::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.page-home .foot-grid > div + div::before {
  left: -1px;
  bottom: -1px;
  width: 13px;
  height: 11px;
  transform: translateX(-50%);
  background:
    var(--foot-t) 50% 100% / 13px 2.5px no-repeat,
    var(--foot-t) 50% 100% / 2.5px 11px no-repeat;
}
.page-home .foot-grid > div + div::after {
  left: -1px;
  top: -1px;
  width: 13px;
  height: 11px;
  transform: translateX(-50%);
  background:
    var(--foot-t) 50% 0 / 13px 2.5px no-repeat,
    var(--foot-t) 50% 0 / 2.5px 11px no-repeat;
}
.page-home .foot-grid::after {
  top: -1px;
  left: -1px;
  width: 11px;
  height: 11px;
  background:
    var(--foot-t) 0 0 / 11px 2.5px no-repeat,
    var(--foot-t) 0 0 / 2.5px 11px no-repeat;
}
.page-home .foot-grid::before {
  left: -1px;
  bottom: -1px;
  width: 11px;
  height: 13px;
  transform: translateY(50%);
  background:
    var(--foot-t) 0 50% / 11px 2.5px no-repeat,
    var(--foot-t) 0 50% / 2.5px 13px no-repeat;
}
.page-home .foot-cap {
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 13px;
  transform: translateY(50%);
  background:
    var(--foot-t) 100% 50% / 11px 2.5px no-repeat,
    var(--foot-t) 100% 50% / 2.5px 13px no-repeat;
}
.page-home .foot-base::after {
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  background:
    var(--foot-t) 100% 100% / 11px 2.5px no-repeat,
    var(--foot-t) 100% 100% / 2.5px 11px no-repeat;
}
.page-home .foot-grid h4 {
  margin: 0 0 1rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.page-home .foot-grid p {
  margin: 0;
  line-height: 1.55;
  color: var(--muted);
  font-size: 0.9rem;
}
.page-home .foot-grid a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--on-surface);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.22rem 0;
  transition: color 0.3s;
}
.page-home .foot-grid a:hover { color: var(--accent); }
.page-home .foot-grid a .ms { color: var(--muted); font-size: 18px; }
.page-home .foot-grid a:hover .ms { color: var(--accent); }
.page-home .sub-form { display: flex; gap: 0.5rem; align-items: center; }
.page-home .sub-form input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--on-surface);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  padding: 0.5rem 0;
  outline: none;
}
.page-home .sub-form input::placeholder { color: var(--muted); }
.page-home .sub-form input:focus { border-color: var(--accent); }
.page-home .sub-form button {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-home .foot-base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 0;
  padding: 1.35rem 2rem;
  border-top: 1px solid var(--line);
}
.page-home .foot-rules {
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 12px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  pointer-events: none;
}
.page-home .foot-rules i { position: relative; }
.page-home .foot-rules i + i::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 13px;
  height: 11px;
  transform: translateX(-50%);
  background:
    var(--foot-t) 50% 100% / 13px 2.5px no-repeat,
    var(--foot-t) 50% 100% / 2.5px 11px no-repeat;
}
.page-home .foot-rules i:first-child::before,
.page-home .foot-rules i:last-child::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: auto;
  width: 11px;
  height: 13px;
  transform: none;
}
.page-home .foot-rules i:first-child::before {
  left: -1px;
  background:
    var(--foot-t) 0 50% / 11px 2.5px no-repeat,
    var(--foot-t) 0 50% / 2.5px 13px no-repeat;
}
.page-home .foot-rules i:last-child::after {
  right: -1px;
  background:
    var(--foot-t) 100% 50% / 11px 2.5px no-repeat,
    var(--foot-t) 100% 50% / 2.5px 13px no-repeat;
}
.page-home .foot-base .mono {
  margin-right: auto;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-home .foot-base a {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-home .foot-base a:hover { color: var(--accent); }
.page-home .foot-grid .mono {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) {
  .page-home .foot-grid { grid-template-columns: 1fr 1fr; }
  .page-home .foot-grid > div:nth-child(odd) { border-left: 0; }
  .page-home .foot-grid > div:nth-child(odd)::before,
  .page-home .foot-grid > div:nth-child(odd)::after { content: none; }
  .page-home .foot-grid > div:nth-child(-n+2)::before { content: none; }
  .page-home .foot-grid > div:nth-child(n+3)::after { content: none; }
  .page-home .foot-rules { grid-template-columns: 1fr 1fr; }
  .page-home .foot-rules i:nth-child(n+3) { display: none; }
}

/* —— Footer 手机单列 —— */
@media only screen and (max-width: 734px) {
  /*
   * Footer 单列饰件对齐：
   * 不要外扩 grid/base/clip（会盖住 frame 左右/底边框线）。
   * 全部左/右饰件统一 left/right:-1px，与 frame 外角同一竖线。
   * 列宽必须 minmax(0, 1fr)：WebKit 下 Subscribe 输入框的固有宽度会把 1fr 撑出边框，
   * 单元格上的饰件（含 .foot-cap）随之外移。
   */
  body.page-home .foot-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-home .foot-grid > div {
    min-width: 0 !important;
    position: relative !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  body.page-home .foot-grid > div + div {
    border-left: 0 !important;
    border-top: 1px solid var(--line);
  }

  /* 行缝 ├ ┤ */
  body.page-home .foot-grid > div + div::after {
    content: "" !important;
    position: absolute !important;
    left: -1px !important;
    right: auto !important;
    top: -7px !important;
    bottom: auto !important;
    width: 11px !important;
    height: 13px !important;
    transform: none !important;
    z-index: 2;
    background:
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 0 50% / 11px 2.5px no-repeat,
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 0 50% / 2.5px 13px no-repeat !important;
  }

  body.page-home .foot-grid > div + div::before {
    content: "" !important;
    position: absolute !important;
    left: auto !important;
    right: -1px !important;
    top: -7px !important;
    bottom: auto !important;
    width: 11px !important;
    height: 13px !important;
    transform: none !important;
    z-index: 2;
    background:
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 100% 50% / 11px 2.5px no-repeat,
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 100% 50% / 2.5px 13px no-repeat !important;
  }

  body.page-home footer[data-curtain="shut"] .foot-grid > div + div::before,
  body.page-home footer[data-curtain="shut"] .foot-grid > div + div::after {
    opacity: 1 !important;
  }

  body.page-home .foot-rules {
    grid-template-columns: 1fr !important;
  }

  body.page-home .foot-rules i:nth-child(n+2) {
    display: none !important;
  }

  body.page-home .foot-rules i:first-child::before {
    left: -1px !important;
    transform: none !important;
  }

  body.page-home .foot-rules i:first-child::after {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    right: -1px !important;
    left: auto !important;
    width: 11px !important;
    height: 13px !important;
    transform: none !important;
    background:
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 100% 50% / 11px 2.5px no-repeat,
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 100% 50% / 2.5px 13px no-repeat !important;
  }

  /* logo 顶缝左 ├ */
  body.page-home .foot-grid::before {
    content: "" !important;
    position: absolute !important;
    left: -1px !important;
    right: auto !important;
    top: auto !important;
    bottom: -7px !important;
    width: 11px !important;
    height: 13px !important;
    transform: none !important;
    z-index: 2;
    background:
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 0 50% / 11px 2.5px no-repeat,
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 0 50% / 2.5px 13px no-repeat !important;
  }

  body.page-home .foot-grid::after {
    left: -1px !important;
  }

  /*
   * logo 顶缝右 ┤：.foot-cap 在最后一列 cell 内。
   * 定位参考是 cell（非 grid），right 必须与 cell::before / frame 外角同为 -1px。
   */
  body.page-home .foot-cap {
    position: absolute !important;
    left: auto !important;
    right: -1px !important;
    top: auto !important;
    bottom: -7px !important;
    width: 11px !important;
    height: 13px !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 2;
    background:
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 100% 50% / 11px 2.5px no-repeat,
      var(--foot-t, linear-gradient(var(--accent), var(--accent))) 100% 50% / 2.5px 13px no-repeat !important;
  }

  body.page-home .foot-base::after {
    right: -1px !important;
  }

  body.page-home .foot-base {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
  }
}

/* —— How it works（磨砂与 People 核心愿景同参数） —— */
.home-how {
  position: relative;
  z-index: 2;
  font-family: var(--f-sans);
  color: var(--on-surface);
}
.home-how__frost {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(48px);
  backdrop-filter: saturate(1.6) blur(48px);
}
.home-how__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}
.home-how__title {
  margin: 0;
  font-family: var(--f-sans);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--on-surface);
}
.home-how__steps {
  list-style: none;
  margin: 2.4em 0 0;
  padding: 0;
  display: grid;
  gap: 2.2rem;
}
.home-how__n {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.home-how__steps h3 {
  margin: 0.9rem 0 0;
  font-family: var(--f-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--on-surface);
}
.home-how__steps p {
  margin: 0.5rem auto 0;
  max-width: 32ch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}
.home-how__btn { display: none; }

/* 手机 / 平板：卡片区之后的整屏磨砂 */
@media screen and (max-width: 991px) {
  .home-how {
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
  }
  .home-how__panel {
    min-height: inherit;
    display: flex;
    align-items: center;
    padding: 96px 24px 80px;
  }
  html.has-home-flock .page-home footer { scroll-snap-align: end; }
}

/* 桌面：卡片区悬浮按钮，悬停时磨砂盖满卡片区 */
@media screen and (min-width: 992px) {
  .home-how {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: 38.2vw;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
  }
  .home-how__btn {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transform: translateX(-50%);
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--surface);
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(24, 28, 32, 0.18);
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.3s, color 0.3s;
    animation: home-how-breathe 1s ease-in-out infinite alternate;
  }
  .home-how__panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 56px clamp(24px, 3vw, 56px) 96px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .home-how:not([data-hush]) .home-how__btn:hover + .home-how__panel,
  .home-how__btn:focus-visible + .home-how__panel,
  .home-how[data-open] .home-how__panel {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
  }
  .home-how:not([data-hush]) .home-how__btn:hover,
  .home-how__btn:focus-visible,
  .home-how[data-open] .home-how__btn {
    background: var(--accent);
    color: #fff;
  }
  .home-how__btn:hover,
  .home-how__btn:focus-visible,
  .home-how[data-open] .home-how__btn {
    animation: none;
  }
  .home-how__title { font-size: clamp(26px, 2.2vw, 42px); }
  .home-how__steps { margin-top: 2em; gap: clamp(1.4rem, 3.2vh, 2.4rem); }
  .home-how__steps h3 { font-size: clamp(17px, 1.3vw, 24px); }
  .home-how__steps p { font-size: clamp(13px, 0.9vw, 16px); }
}

/* 与应用 BreathingFade 同频：透明度 0.45 ↔ 1.0，单程 1000ms，easeInOut 往返 */
@keyframes home-how-breathe {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-how__panel { transition: none !important; }
  .home-how__btn { animation: none !important; }
}