/* ═══════════════════════════════════════════════════════════════════════
   首页 v4 · 地图居中 + 卡片流
   ---------------------------------------------------------------------
   参考图的结构：一个大标题 → 一张「几乎占满宽度的主视觉」→ 下面一排
   可以横滑的小卡。所以首页不再用 4 格统计条，而是：

     问候 → H1 → 地图（655px 高，居中）→ 浮在地图上的工具栏
       → 双 CTA → 三格指标 → 横滑里程包 → 特性卡 → 横滑流程卡

   地图在中间，两侧留暗，卡片的紫光往地图上「漏」一点，整页才有层次。
   ═══════════════════════════════════════════════════════════════════════ */

.hm-hero {
  position: relative; overflow: hidden;
  padding: 26px 0 4px;
  background:
    radial-gradient(1200px 620px at 50% -18%, rgba(110, 69, 186, .30), transparent 60%),
    radial-gradient(900px 500px at 8% 12%, rgba(81, 66, 135, .22), transparent 66%),
    radial-gradient(900px 560px at 96% 30%, rgba(198, 166, 234, .10), transparent 68%);
}
.hm-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hm-hero-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.hm-hello {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 650; letter-spacing: .01em;
  color: rgba(198, 166, 234, .92);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(198, 166, 234, .08);
  border: 1px solid rgba(198, 166, 234, .2);
  box-shadow: inset 0 1px 0 rgba(241, 231, 249, .14);
  margin-bottom: 14px;
}
.hm-hero h1 {
  font-size: clamp(28px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.042em;
  color: #fff; font-weight: 800; max-width: 15em;
  text-shadow: 0 2px 50px rgba(110, 69, 186, .4);
}
.hm-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #f1e7f9 4%, #c6a6ea 34%, #af85e5 56%, #f1e7f9 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(198, 166, 234, .5));
}

/* ── 地图舞台：整页视觉中心 ── */
.hm-stage {
  margin-top: 22px;
  height: clamp(300px, 40vh, 460px);
  background: #06050e;
  position: relative;
}
.hm-stage .leaflet-container { background: #06050e !important; font: inherit; }
/* 高德栅格瓦片是浅色底图，用滤镜把它压成夜紫，而不是盖一层遮罩（遮罩会糊） */
.hm-stage .hm-tiles {
  /* 高德是浅色底图（白底 + 灰蓝路网）。反相后：底色变深、路网变亮线。
     然后 grayscale 洗掉原色 → sepia 统一成暖调 → hue-rotate 转到紫相。
     sepia 之后整个画面偏黄橙，hue-rotate 206° 刚好把它推回紫，
     再多发红、再少发青。brightness 拉到 2.25 是为了让「路网亮线」
     真的比页面背景亮出两个档——否则地图在整个页面里就是个洞。 */
  filter: invert(1) grayscale(.88) sepia(.46) hue-rotate(206deg)
          saturate(2.4) brightness(2.25) contrast(1.18);
  opacity: .95;
}
/* 瓦片容器到底色：把 Leaflet 那层中性灰换成紫黑，避免 40% 像素是纯灰 */
.hm-stage .leaflet-tile-pane { background: #191026; }
/* 叠一层正向紫光把绿通道压下去（screen 只加不减，所以低透明度就够） */
.hm-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 401; pointer-events: none;
  background:
    radial-gradient(120% 96% at 50% 0%, rgba(104, 54, 186, .30), transparent 62%),
    linear-gradient(180deg, rgba(30, 16, 60, .18), transparent 40%, rgba(16, 8, 34, .30));
  mix-blend-mode: screen;
  opacity: .82;
}
/* 内描边 + 外辉光：让「这是一块嵌入的地图」而不是一个洞 */
.hm-stage { box-shadow: inset 0 0 0 1px rgba(140, 96, 255, .2), 0 30px 90px -40px rgba(110, 60, 220, .6); }
.hm-stage .leaflet-control-attribution { display: none; }
.hm-stage .hm-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(198, 166, 234, .7); font-size: 13px;
}
.hm-tip.leaflet-tooltip {
  background: rgba(9, 8, 26, .9); color: #f1e7f9;
  border: 1px solid rgba(198, 166, 234, .26); border-radius: 10px;
  font-size: 12px; padding: 5px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.hm-tip.leaflet-tooltip::before { border-top-color: rgba(198, 166, 234, .26); }

/* ── 浮在地图下沿的工具栏 ── */
.hm-stage-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -22px 18px 0; padding: 12px 16px;
  border-radius: 18px;
  background: rgba(9, 8, 26, .78);
  border: 1px solid rgba(198, 166, 234, .18);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(241, 231, 249, .12);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
.hm-live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(246, 241, 252, .72); }
.hm-live b { color: #f1e7f9; font-weight: 700; }
.hm-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #b6f06a;
  box-shadow: 0 0 0 0 rgba(182, 240, 106, .6); animation: pulse 2.4s var(--ease-out) infinite;
}
.hm-city {
  font-size: 12.5px; font-weight: 650; color: #f1e7f9;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(110, 69, 186, .34);
  border: 1px solid rgba(198, 166, 234, .3);
  box-shadow: inset 0 1px 0 rgba(241, 231, 249, .2);
  transition: transform 180ms var(--spring), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hm-city:hover { background: rgba(110, 69, 186, .5); box-shadow: 0 0 24px -6px rgba(175, 133, 229, .9), inset 0 1px 0 rgba(241, 231, 249, .28); }
.hm-city:active { transform: scale(.955); }

.hm-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
/* 主按钮旁边那颗「怎么用」在全站 .btn.ghost 的 rgba(255,255,255,.06) 下几乎看不见
   （实测比背景只亮 8 个亮度级）。hero 区给它一层能读出来的紫色玻璃。 */
.hm-cta .btn.ghost {
  background: linear-gradient(180deg, rgba(139, 100, 226, .30), rgba(60, 40, 110, .22));
  border-color: rgba(198, 166, 234, .34);
  box-shadow: inset 0 1px 0 rgba(241, 231, 249, .22), 0 12px 30px -18px rgba(110, 69, 186, .9);
}
.hm-cta .btn.ghost:hover {
  background: linear-gradient(180deg, rgba(160, 122, 240, .40), rgba(72, 50, 128, .28));
  border-color: rgba(214, 186, 246, .5);
}

/* ── 三格指标：像参考图那样细，不占地方 ── */
.hm-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 26px;
}
.hm-metric {
  padding: 14px 16px; border-radius: 16px;
  /* 原来 rgba(81,66,135,.26) 叠出来的卡比背景还暗（实测 lum 24.9 < 背景 28.6），
     卡片等于不存在。底色抬到能从 hero 里浮起来的程度，再靠顶高光和描边定形。 */
  background: linear-gradient(180deg, rgba(108, 84, 176, .34), rgba(28, 20, 54, .46));
  border: 1px solid rgba(198, 166, 234, .18);
  box-shadow: inset 0 1px 0 rgba(241, 231, 249, .14), 0 15px 34px -26px rgba(0, 0, 0, .95);
  transition: transform 200ms var(--ease-ios), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.hm-metric b {
  display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: #fff;
  text-shadow: 0 0 26px rgba(198, 166, 234, .5);
}
.hm-metric b span { font-size: 12px; font-weight: 650; color: rgba(198, 166, 234, .9); margin-left: 2px; }
.hm-metric i { display: block; font-style: normal; font-size: 12px; color: rgba(246, 241, 252, .52); margin-top: 3px; }

/* ── 特性卡 ── */
.hm-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hm-card { padding: 20px; }
.hm-card-ic {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 19px;
  margin-bottom: 13px;
  background: linear-gradient(150deg, rgba(175, 133, 229, .3), rgba(110, 69, 186, .1) 62%, rgba(198, 166, 234, .04));
  border: 1px solid rgba(198, 166, 234, .22);
  box-shadow: inset 0 1px 0 rgba(241, 231, 249, .22), 0 10px 26px -14px rgba(110, 69, 186, .95);
}
.hm-card h4 { font-size: 15.5px; letter-spacing: -.02em; color: #fff; margin-bottom: 6px; }
.hm-card p { font-size: 13.5px; line-height: 1.68; color: rgba(246, 241, 252, .6); }

/* ── 流程卡（横滑） ── */
.hm-flow > .hm-step { width: 282px; padding: 20px; }
.hm-step-n {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  color: rgba(198, 166, 234, .85); margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.hm-step h4 { font-size: 15px; color: #fff; letter-spacing: -.02em; margin-bottom: 6px; }
.hm-step p { font-size: 13px; line-height: 1.66; color: rgba(246, 241, 252, .58); }

/* ── 提示条 ── */
.hm-notice {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-color: rgba(251, 191, 85, .2) !important;
  background: linear-gradient(180deg, rgba(251, 191, 85, .07), rgba(9, 8, 26, .4)) !important;
}
.hm-notice-ic { font-size: 18px; line-height: 1.2; }
.hm-notice h4 { font-size: 14px; color: #fbbf55; margin-bottom: 5px; }
.hm-notice p { font-size: 13px; line-height: 1.7; color: rgba(246, 241, 252, .58); }

@media (max-width: 860px) {
  .hm-hero { padding-top: 22px; }
  .hm-stage {
    height: clamp(260px, 38vh, 400px); margin-top: 18px;
    /* 手机屏幕小、环境光强，同一套滤镜会显得地图更暗更糊。
       这里单独把瓦片再提亮并加对比，让路网在阳光下也能读出来。 */
  }
  .hm-stage .hm-tiles { filter: invert(1) grayscale(.86) sepia(.46) hue-rotate(206deg) saturate(2.5) brightness(2.55) contrast(1.24); opacity: .96; }
  .hm-stage-bar { margin: -16px 10px 0; padding: 10px 13px; border-radius: 16px; }
  /* 三格指标：手机端不做三行堆叠（三条 56px 的横条像通知栏，把首屏撑开还显得空），
     压成一行三列 —— 细、密、一眼扫完，这才是参考图那种密度。 */
  .hm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .hm-metric { display: block; padding: 11px 10px 12px; border-radius: 13px; }
  .hm-metric b { font-size: 17px; letter-spacing: -.035em; }
  .hm-metric b span { font-size: 10.5px; margin-left: 1px; }
  .hm-metric i { margin-top: 2px; font-size: 11px; letter-spacing: -.01em; }
  .hm-cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* ── 首屏节奏 ──
   实测（1440x900）：hero 原本 895px 高，视口 900，打开页面只看得到标题和地图
   开头，CTA 与指标全在第一屏外。参考图那种「一屏之内讲完」的密度才是高级感，
   所以把地图、标题、各处间距一起收一档，让 地图+CTA+指标 挤进首屏。 */
.hm-cta { margin-top: 20px; }
.hm-metrics { margin-top: 20px; }
/* 首页的 4 个 .sect 用统一 34px 上下边距会让模块之间松到发虚，
   这里收成 22px，并让每组标题紧贴内容 */
.hm-hero ~ .sect { margin: 22px 0; }
.hm-hero ~ .sect .sect-h { margin-bottom: 12px; }
.hm-hero ~ .sect:last-of-type { margin-bottom: 0; }

/* ── 横滑手感 ──
   5 张 232px 的卡在 1180 容器里只能滑 76px，等于「名义上能滑、实际上滑不动」。
   把卡加宽到 264px 后露出 4 张多一点，右侧半张卡自然成为「还有更多」的暗示，
   可滑动行程拉到约 200px，横滑这个动作才被真正感知到。
   注意：这里必须写在 .hm-flow > .hm-step 之后（或提高优先级），
   否则同优先级的 `.cx-shelf > *` 会把流程卡宽度改回去。 */
.cx-shelf > * { width: 264px; }
.cx-shelf.hm-flow > .hm-step { width: 300px; }
@media (max-width: 860px) {
  .cx-shelf > * { width: 214px; }
  .cx-shelf.hm-flow > .hm-step { width: 236px; }
}

/* ── 指标：桌面端并成一条，别占三张卡的视觉重量 ── */
.hm-metric {
  transition: transform 220ms var(--spring), border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out);
}
.hm-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(198, 166, 234, .24);
  box-shadow: inset 0 1px 0 rgba(241, 231, 249, .12), 0 18px 40px -24px rgba(110, 69, 186, .9);
}

/* ── 卡片 hove 一致性：全部走同一套弹簧与辉光 ── */
.hm-card { transition: transform 260ms var(--spring), border-color 240ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.hm-card:hover { border-color: rgba(198, 166, 234, .26); }
.hm-card:active { transform: scale(.994); }
.hm-card-ic { transition: transform 260ms var(--spring), box-shadow 260ms var(--ease-out); }
.hm-card:hover .hm-card-ic { transform: translateY(-1px) scale(1.045); box-shadow: inset 0 1px 0 rgba(241, 231, 249, .26), 0 14px 30px -14px rgba(110, 69, 186, 1); }
/* ═══════════════════════════════════════════════════════════════════
   v5：首屏 = 自动跑步工作台（地图铺满），下方 3D 卡片堆
   —— 卡片绕顶边铰链翻面，iOS 那种「往上翻一张」的手感
   ═══════════════════════════════════════════════════════════════════ */

/* ── 首屏：把 .run-stage 从「一页」压成「一屏」 ── */
.hv-top { position: relative; padding: 10px 0 26px; }

.hv-lead {
  display: flex; align-items: center; gap: 8px;
  max-width: var(--max, 1180px); margin: 0 auto 12px; padding: 0 20px;
  font-size: 13px; letter-spacing: .01em; color: var(--violet-100);
  opacity: 0; animation: hvLeadIn 700ms var(--ease-ios) 120ms forwards;
}
.hv-lead b { color: #fff; font-weight: 700; }
.hv-lead .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet-200);
  animation: hvPulse 2.6s ease-out infinite;
}
@keyframes hvPulse {
  0% { box-shadow: 0 0 0 0 rgba(198,166,234,.55); }
  70% { box-shadow: 0 0 0 9px rgba(198,166,234,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,166,234,0); }
}
@keyframes hvLeadIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hv-top .run-stage {
  height: clamp(440px, calc(100vh - 168px), 780px);
  max-width: var(--max, 1180px);
  margin: 0 auto;
  border-radius: 26px;
}
.hv-top .run-stage .run-map { border-radius: inherit; }

.hv-scroll {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(198,166,234,.52);
}
.hv-scroll i {
  width: 1.5px; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(198,166,234,.7), transparent);
  animation: hvScrollLine 2.1s var(--ease-ios) infinite;
}
@keyframes hvScrollLine {
  0% { transform: scaleY(.2) translateY(-6px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scaleY(1) translateY(6px); opacity: 0; }
}

/* ── 卡片堆容器 ── */
.hv-deck-wrap { padding-bottom: 40px; }
.hv-deck-h {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 6px 0 20px; flex-wrap: wrap;
}
.hv-deck-h h2 {
  margin: 0 0 5px; font-size: clamp(20px, 2.3vw, 27px);
  letter-spacing: -.028em; font-weight: 700; color: #fff;
}
.hv-deck-h .sub { font-size: 13px; color: var(--violet-100); opacity: .72; }
.hv-deck-nav { display: flex; gap: 8px; }

.hv-deck {
  position: relative;
  height: 400px;
  perspective: 1600px;
  perspective-origin: 50% 34%;
  outline: none;
  touch-action: pan-y;
}
.hv-deck:focus-visible { box-shadow: 0 0 0 2px rgba(198,166,234,.42); border-radius: 30px; }

/* ── 单张卡：环形定位 + 铰链翻面 ── */
.hv-card {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  padding: 24px 26px 20px;
  border-radius: 30px;
  border: 1px solid rgba(198,166,234,.16);
  background:
    linear-gradient(180deg, rgba(94,72,158,.34), rgba(12,9,26,.9) 62%),
    radial-gradient(120% 90% at 78% -14%, rgba(198,166,234,.20), transparent 58%);
  box-shadow:
    inset 0 1px 0 rgba(241,231,249,.16),
    0 30px 70px -34px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.35);
  transform-origin: 50% 0%;                 /* 铰链在顶边，像翻书 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 620ms cubic-bezier(.34,1.56,.64,1),
    opacity 420ms var(--ease-ios),
    filter 460ms var(--ease-ios),
    box-shadow 420ms var(--ease-ios);
  will-change: transform, opacity;
  overflow: hidden;
}
/* 卡面顶部一道极细高光，翻起来时最亮 */
.hv-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241,231,249,.5), transparent);
  opacity: .8;
}
.hv-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 50% -10%, rgba(198,166,234,.14), transparent 60%);
  opacity: 0; transition: opacity 460ms var(--ease-ios);
}

.hv-card[data-pos="0"] {
  transform: translate3d(0,0,0) rotateX(0deg) scale(1);
  opacity: 1; filter: none; z-index: 4; cursor: default;
}
.hv-card[data-pos="0"]::after { opacity: 1; }
.hv-card[data-pos="1"] {
  transform: translate3d(0,-16px,-52px) rotateX(6deg) scale(.968);
  opacity: .82; filter: saturate(.72) brightness(.86); z-index: 3; cursor: pointer;
}
.hv-card[data-pos="2"] {
  transform: translate3d(0,-29px,-96px) rotateX(11deg) scale(.936);
  opacity: .55; filter: saturate(.5) brightness(.7); z-index: 2; cursor: pointer;
}
.hv-card[data-pos="3"] {
  transform: translate3d(0,-40px,-136px) rotateX(15deg) scale(.906);
  opacity: .3; filter: saturate(.35) brightness(.56); z-index: 1; cursor: pointer;
}
.hv-card[data-pos="back"] {
  transform: translate3d(0,-48px,-168px) rotateX(17deg) scale(.88);
  opacity: 0; pointer-events: none; z-index: 0;
}
@media (hover: hover) {
  .hv-card[data-pos="1"]:hover, .hv-card[data-pos="2"]:hover, .hv-card[data-pos="3"]:hover {
    filter: saturate(.95) brightness(1); opacity: .92;
  }
}

/* ── 卡内排版 ── */
.hv-card-h {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(198,166,234,.12);
}
.hv-card-ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px; font-size: 18px; color: #f2eaff;
  background: linear-gradient(160deg, rgba(160,122,235,.42), rgba(58,38,104,.62));
  box-shadow: inset 0 1px 0 rgba(241,231,249,.3), 0 12px 26px -14px rgba(110,69,186,1);
}
.hv-card-h h3 { margin: 0 0 3px; font-size: 17.5px; letter-spacing: -.012em; color: #fff; }
.hv-card-h .tagline { font-size: 12px; color: rgba(198,166,234,.62); letter-spacing: .01em; }

.hv-card-b { flex: 1; min-height: 0; padding: 16px 0 12px; overflow: auto; scrollbar-width: none; }
.hv-card-b::-webkit-scrollbar { display: none; }

/* 购买里程：两列套餐 */
.hv-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hv-pack {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-radius: 15px;
  border: 1px solid rgba(198,166,234,.13);
  background: linear-gradient(180deg, rgba(198,166,234,.07), rgba(198,166,234,.02));
  transition: border-color 240ms var(--ease-out), transform 240ms var(--spring, cubic-bezier(.34,1.56,.64,1)), background 240ms var(--ease-out);
}
.hv-pack:hover {
  border-color: rgba(198,166,234,.3); transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(198,166,234,.12), rgba(198,166,234,.04));
}
.hv-pack.best {
  border-color: rgba(198,166,234,.34);
  box-shadow: inset 0 1px 0 rgba(241,231,249,.18), 0 0 0 1px rgba(198,166,234,.12);
}
.hv-pack .nm { font-size: 13.5px; color: #fff; }
.hv-pack .km { margin-top: 2px; font-size: 11.5px; color: rgba(198,166,234,.58); }
.hv-pack .pr { text-align: right; white-space: nowrap; }
.hv-pack .pr b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.hv-pack .pr s { display: block; font-size: 11px; color: rgba(198,166,234,.4); }

/* 其余三张：键值行 */
.hv-kv { display: flex; flex-direction: column; gap: 2px; }
.hv-kv .row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px; border-bottom: 1px dashed rgba(198,166,234,.1);
}
.hv-kv .row:last-child { border-bottom: 0; }
.hv-kv .lbl { font-size: 13px; color: rgba(198,166,234,.68); }
.hv-kv b { font-size: 15.5px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.hv-card-f {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid rgba(198,166,234,.12);
}
.hv-card-f .meta { font-size: 11.5px; color: rgba(198,166,234,.5); }
.hv-card-f .go {
  flex: none; padding: 9px 17px; border-radius: 999px;
  font-size: 13px; font-weight: 620; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, rgba(160,122,235,.9), rgba(96,60,176,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px -14px rgba(140,90,240,.95);
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms var(--ease-out);
}
.hv-card-f .go:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 32px -14px rgba(140,90,240,1);
}
.hv-card-f .go:active { transform: scale(.965); }

.hv-empty {
  display: grid; place-items: center; gap: 8px; padding: 26px 0;
  color: rgba(198,166,234,.5); font-size: 13px;
}
.hv-empty .em { font-size: 26px; opacity: .6; }

/* ── 圆点指示 ── */
.hv-dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.hv-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(198,166,234,.26);
  transition: width 340ms cubic-bezier(.34,1.56,.64,1), background 240ms var(--ease-out);
}
.hv-dots button.on { width: 22px; background: linear-gradient(90deg, var(--violet-200), var(--violet-100)); }

/* ── 手机端 ── */
@media (max-width: 860px) {
  .hv-top { padding: 6px 0 20px; }
  .hv-lead { padding: 0 16px; font-size: 12px; }
  .hv-top .run-stage {
    height: clamp(400px, calc(100vh - 150px), 620px);
    border-radius: 22px;
  }
  .hv-deck-wrap { padding-left: 16px; padding-right: 16px; }
  .hv-deck-h { margin-bottom: 16px; }
  .hv-deck-nav { display: none; }
  .hv-deck { height: 372px; perspective: 1200px; }
  .hv-card { padding: 20px 19px 17px; border-radius: 26px; }
  .hv-card[data-pos="1"] { transform: translate3d(0,-12px,-40px) rotateX(5deg) scale(.972); }
  .hv-card[data-pos="2"] { transform: translate3d(0,-22px,-74px) rotateX(9deg) scale(.944); }
  .hv-card[data-pos="3"] { transform: translate3d(0,-30px,-104px) rotateX(12deg) scale(.918); }
  .hv-card[data-pos="back"] { transform: translate3d(0,-36px,-126px) rotateX(14deg) scale(.9); }
  .hv-packs { grid-template-columns: 1fr; }
  .hv-card-h h3 { font-size: 16.5px; }
  .hv-kv b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-card, .hv-dots button, .hv-lead, .hv-scroll i {
    transition-duration: 1ms !important; animation-duration: 1ms !important;
  }
  .hv-card[data-pos="1"], .hv-card[data-pos="2"], .hv-card[data-pos="3"] { transform: none; opacity: .9; filter: none; }
}