/* =====================================================================
   平小潭 · 官网展示版 v2 — 设计系统与样式
   定位：现代海岛编辑风 + 旅游科技感 + 克制的高级感
   仅本地/测试使用，本文件不部署生产。
   ===================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 色彩 */
  --deep-sea: #086FAF;   /* 深海蓝（主品牌） */
  --island-teal: #21C6C7;/* 海岛青（点缀/光晕） */
  --teal-text: #0E98A0;  /* 深海青（用于白底文字，保证对比度） */
  --sunset: #FFB547;     /* 日落橙（点缀） */
  --mist: #F5FAFC;       /* 雾白背景 */
  --ink: #16354A;        /* 深色正文 */
  --ink-2: rgba(22, 53, 74, .74);
  --ink-3: rgba(22, 53, 74, .52);
  --line: rgba(22, 53, 74, .10);
  --surface: #FFFFFF;
  --primary-ink: #FFFFFF;

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, var(--deep-sea) 0%, #0E98A0 100%);
  --grad-number: linear-gradient(92deg, #086FAF 10%, #0E98A0 88%);

  /* 圆角 */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  /* 阴影 */
  --shadow-s: 0 1px 2px rgba(22, 53, 74, .06), 0 2px 8px rgba(22, 53, 74, .05);
  --shadow-m: 0 2px 6px rgba(22, 53, 74, .07), 0 12px 32px rgba(22, 53, 74, .10);
  --shadow-l: 0 6px 16px rgba(8, 111, 175, .16), 0 24px 64px rgba(22, 53, 74, .16);

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* 字号（ fluid ） */
  --fs-hero: clamp(30px, 5.2vw, 54px);
  --fs-sub: clamp(15px, 1.6vw, 18px);
  --fs-num: clamp(64px, 17vw, 132px);

  /* 动效 */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-roll: 1350ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* 字体 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
    "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--mist);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* 双保险：任何视口不出现横向滚动 */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid rgba(8, 111, 175, .5);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. 顶部品牌条 + 主导航 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border-bottom: 1px solid var(--line);
}
.topbar-brandlink {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
.topbar-logo {
  width: 32px; height: 32px;
  border-radius: 50%;
  box-shadow: var(--shadow-s);
}
.topbar-brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* 桌面导航（默认隐藏，≥768px 显示） */
.topnav {
  display: none;
  align-items: center;
  gap: 2px;
}
.topnav a {
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.topnav a:hover { color: var(--deep-sea); background: rgba(8, 111, 175, .07); }

/* 进入小程序按钮 */
.topbar-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(8, 111, 175, .26);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.topbar-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(8, 111, 175, .34); }
.topbar-cta:active { transform: translateY(0); }
.cta-desk { display: none; }
.cta-mob { display: inline; }

/* ---------- 4. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 420px at 82% 6%, rgba(33, 198, 199, .14), transparent 62%),
    radial-gradient(560px 380px at 4% 92%, rgba(8, 111, 175, .10), transparent 60%),
    var(--mist);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) clamp(20px, 4vw, 48px) var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

/* 文案列 */
.hero-copy { max-width: 560px; }
.hero-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.hero-logo {
  width: clamp(52px, 7vw, 68px);
  height: auto;
  border-radius: 50%;
  box-shadow: var(--shadow-m);
}
.hero-brand-name {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: .06em;
}
.hero-title {
  font-size: var(--fs-hero);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: .01em;
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  color: var(--deep-sea);
}
.hero-sub {
  margin-top: var(--space-4);
  font-size: var(--fs-sub);
  color: var(--ink-2);
  max-width: 30em;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}
.hero-tags li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-s);
}
.hero-tags .tag-icon { color: var(--deep-sea); flex: none; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease);
}
.btn-primary {
  color: var(--primary-ink);
  background: var(--grad-brand);
  box-shadow: 0 8px 20px rgba(8, 111, 175, .32);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(8, 111, 175, .40); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  color: var(--deep-sea);
  background: var(--surface);
  border-color: rgba(8, 111, 175, .35);
  box-shadow: var(--shadow-s);
}
.btn-ghost:hover { background: rgba(8, 111, 175, .06); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }

/* 视觉列 */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* 装饰：虚线航线 + 定位点（仅宽屏，克制） */
.hero-route {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--deep-sea);
  opacity: .5;
}
.hero-route svg { width: 100%; height: 100%; }
.hero-glow {
  position: absolute;
  width: 420px; height: 420px;
  right: 6%; top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 198, 199, .18), transparent 66%);
  filter: blur(4px);
  animation: breathe 7s var(--ease) infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* 手机模型 */
.phone {
  position: relative;
  z-index: 1;
  width: min(288px, 78vw);
  border-radius: 42px;
  background: linear-gradient(180deg, #0C2438, #12354E);
  padding: 10px;
  box-shadow: var(--shadow-l), inset 0 0 0 2px rgba(255, 255, 255, .06);
  flex: none;
}
.phone-screen {
  position: relative;
  border-radius: 33px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 20px;
  border-radius: var(--radius-pill);
  background: #0C2438;
  z-index: 2;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.phone-status .ps-icons { display: inline-flex; gap: 4px; color: var(--ink); }
.phone-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.phone-brand img { width: 22px; height: 22px; border-radius: 50%; }
.phone-brand span { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.phone-hero {
  margin: 12px 12px 0;
  padding: 18px 16px;
  border-radius: 18px 18px 18px 4px;
  background: var(--grad-brand);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.phone-hero::after {
  content: "";
  position: absolute;
  right: -26px; bottom: -30px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.ph-tagline { font-size: 15.5px; font-weight: 800; letter-spacing: .02em; }
.ph-sub { margin-top: 6px; font-size: 10.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.phone-cards {
  padding: 12px 12px 8px;
  display: grid;
  gap: 9px;
  flex: 1;
  align-content: start;
}
.ph-card {
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F2F8FB, #E9F3F7);
  border: 1px solid rgba(22, 53, 74, .06);
  position: relative;
  overflow: hidden;
}
.ph-card::after {
  content: "";
  position: absolute;
  left: 12px; top: 14px;
  width: 46%; height: 8px;
  border-radius: 4px;
  background: rgba(22, 53, 74, .10);
  box-shadow: 0 16px 0 rgba(22, 53, 74, .06);
}
.phone-tabbar {
  display: flex;
  justify-content: space-around;
  padding: 8px 14px 14px;
}
.phone-tabbar i {
  width: 34px; height: 6px;
  border-radius: 3px;
  background: rgba(22, 53, 74, .14);
}
.phone-tabbar i:first-child { background: var(--deep-sea); opacity: .8; }

/* 小程序码卡片 */
.qr-card {
  position: relative;
  z-index: 1;
  width: 216px;
  padding: 18px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  text-align: center;
  flex: none;
}
.qr-frame {
  width: 156px; height: 156px;
  margin: 0 auto;
  border-radius: var(--radius-m);
  background: var(--mist);
  border: 1.5px dashed rgba(8, 111, 175, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
}
.qr-placeholder svg { width: 44px; height: 44px; color: rgba(8, 111, 175, .55); }
.qr-placeholder b { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .1em; }
.qr-note { margin-top: 12px; font-size: 14px; font-weight: 700; }
.qr-todo {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* ---------- 5. 信任数据条 ---------- */
.trust {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.trust::before {
  content: "";
  position: absolute;
  left: 50%; top: -120px;
  transform: translateX(-50%);
  width: 820px; height: 240px;
  background: radial-gradient(ellipse at center, rgba(33, 198, 199, .10), transparent 68%);
  pointer-events: none;
}
.trust-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-9) clamp(20px, 4vw, 48px);
  text-align: center;
}
.trust-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--teal-text);
  text-transform: uppercase;
}
.trust-eyebrow::before, .trust-eyebrow::after {
  content: "";
  width: 26px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(14, 152, 160, .55));
}
.trust-eyebrow::after { background: linear-gradient(270deg, transparent, rgba(14, 152, 160, .55)); }

.trust-line {
  margin-top: var(--space-4);
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(10px, 2vw, 22px);
  line-height: 1;
}
.trust-prefix, .trust-suffix {
  font-size: clamp(19px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
}
.trust-num {
  font-size: var(--fs-num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  background: var(--grad-number);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 0 18px 44px rgba(8, 111, 175, .18);
}
.trust-num.is-loading { color: rgba(22, 53, 74, .28); background: none; -webkit-text-fill-color: currentColor; }
.trust-sub {
  margin-top: var(--space-4);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .14em;
}
.trust-fallback {
  font-size: clamp(19px, 3.2vw, 30px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
/* 里程表数字 */
.od-col {
  display: inline-block;
  width: 1ch;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
}
.od-strip {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-roll) var(--ease-out);
}
.od-digit {
  height: 1em;
  line-height: 1;
  width: 1ch;
  text-align: center;
  display: block;
}

/* ---------- 6. 游客体验场景 ---------- */
.stories {
  position: relative;
  overflow: hidden;
  padding: var(--space-9) 0;
  background:
    radial-gradient(720px 360px at 10% 0%, rgba(33, 198, 199, .12), transparent 64%),
    radial-gradient(680px 340px at 92% 100%, rgba(8, 111, 175, .10), transparent 62%),
    linear-gradient(180deg, #F8FCFD 0%, #EDF7FA 100%);
  border-bottom: 1px solid var(--line);
}
.stories::before,
.stories::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 150px;
  bottom: 54px;
  width: clamp(26px, 7vw, 110px);
  pointer-events: none;
}
.stories::before { left: 0; background: linear-gradient(90deg, #F3FAFC, rgba(243, 250, 252, 0)); }
.stories::after { right: 0; background: linear-gradient(270deg, #F1F9FB, rgba(241, 249, 251, 0)); }
.stories-head {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin: 0 auto var(--space-7);
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
.stories-title {
  margin-top: var(--space-3);
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  text-wrap: balance;
}
.stories-sub {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-sub);
}
.stories-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(8, 111, 175, .18);
  border-radius: var(--radius-pill);
  color: var(--deep-sea);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.stories-toggle:hover { transform: translateY(-1px); background: #fff; }
.stories-toggle-icon { font-size: 12px; font-weight: 900; letter-spacing: -.12em; }
.stories-toggle-text { font-size: 13px; font-weight: 700; }
.stories-rows { display: none; gap: 24px; }
.stories.stories-enhanced .stories-rows { display: grid; }
.stories.stories-enhanced .stories-list { display: none; }
.stories-row { width: 100%; }
.stories-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: stories-scroll 42s linear infinite;
}
.stories-row-reverse .stories-track { animation-direction: reverse; animation-duration: 46s; }
.stories-row:hover .stories-track,
.stories-row:focus-within .stories-track,
.stories.is-paused .stories-track { animation-play-state: paused; }
.stories-group {
  display: flex;
  flex: none;
  gap: 20px;
  padding-right: 20px;
}
.stories-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.story-card {
  width: clamp(310px, 31vw, 420px);
  min-height: 224px;
  padding: 24px 26px;
  border: 1px solid rgba(8, 111, 175, .11);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 34px rgba(22, 53, 74, .08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}
.stories-list .story-card { width: auto; }
.story-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--teal-text);
  background: rgba(33, 198, 199, .11);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}
.story-card blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.78;
}
.story-card footer { display: flex; align-items: center; gap: 12px; }
.story-card footer > span:last-child { display: grid; gap: 1px; }
.story-card footer strong { color: var(--ink); font-size: 13px; line-height: 1.4; }
.story-card footer small { color: var(--ink-3); font-size: 11.5px; }
.story-avatar {
  width: 48px;
  height: 48px;
  flex: none;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #EEF4F7;
  border: 1px solid rgba(22, 53, 74, .10);
  box-shadow: 0 1px 3px rgba(22, 53, 74, .10);
}
.stories-note {
  max-width: 1200px;
  margin: var(--space-4) auto 0;
  padding: 0 clamp(20px, 4vw, 48px);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.7;
}
.stories-swipe-hint { display: none; }
@keyframes stories-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* 预览卡片首次进入：淡入 + 上移 20px，仅播放一次 */
@keyframes featCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 7. 核心功能滚动叙事区 ---------- */
.features {
  position: relative;
  background:
    radial-gradient(680px 360px at 92% 4%, rgba(33, 198, 199, .10), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, #F2F9FC 100%);
  border-top: 1px solid var(--line);
  scroll-margin-top: 76px;   /* 锚点/平滑滚动时不被 sticky 顶栏遮挡 */
}
.feat-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-9) clamp(20px, 4vw, 48px) var(--space-6);
}
.feat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--teal-text);
  text-transform: uppercase;
}
.feat-eyebrow::before {
  content: "";
  width: 26px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(14, 152, 160, .55));
}
.feat-title {
  margin-top: var(--space-3);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
}
.feat-sub {
  margin-top: var(--space-3);
  font-size: var(--fs-sub);
  color: var(--ink-2);
}

.feat-stage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px) var(--space-9);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* 左列：滚动叙事 */
.feat-copy { display: flex; flex-direction: column; }
.feat-scene {
  position: relative;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line);
}
.feat-scene:first-child { border-top: none; }
.feat-scene-body { max-width: 30em; }
.feat-num {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--deep-sea);
  background: rgba(8, 111, 175, .10);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.feat-scene:nth-child(2) .feat-num { color: var(--teal-text); background: rgba(33, 198, 199, .14); }
.feat-scene:nth-child(3) .feat-num { color: #B4730E; background: rgba(255, 181, 71, .18); }
.feat-scene:nth-child(4) .feat-num { color: var(--deep-sea); background: rgba(8, 111, 175, .10); }

.feat-scene-title {
  margin-top: var(--space-4);
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
  text-wrap: balance;
}
.feat-scene-lead {
  margin-top: var(--space-3);
  font-size: 15.5px;
  color: var(--ink-2);
}
.feat-points {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feat-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}
.feat-points li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--island-teal);
  box-shadow: 0 0 0 3px rgba(33, 198, 199, .16);
}
.feat-points li strong { color: var(--ink); font-weight: 700; }
.feat-points .feat-tag-preview {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--teal-text);
  background: rgba(33, 198, 199, .10);
  padding-left: 12px;
}
.feat-points .feat-tag-preview::before { display: none; }

/* 悬浮预览卡片：桌面右栏与移动端内联共用（不使用手机外壳 / 刘海 / 状态栏） */
/* ---------- 小程序界面演示：iPhone 风格设备（纯 CSS 构建，无任何品牌标识） ---------- */
.feat-demo-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(33, 198, 199, .26);
  background: rgba(33, 198, 199, .10);
  color: var(--teal-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.feat-preview {
  /* 设备宽度：先按断点给上限 --dev-w-max，再由 --dev-w 统一派生
     （所有内部尺寸都 = calc(var(--dev-w) * 比例)，改一处整机等比缩放，不使用 transform:scale） */
  --dev-w-max: 320px;      /* ≥1280px：320 */
  --dev-w: var(--dev-w-max);
  position: relative;      /* 装饰层（光晕/风机）的定位基准 */
  isolation: isolate;      /* 装饰 z-index:0、设备与分页 z-index:1/2，不会串到其他区块 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 设备与分页必须压在装饰之上 */
.feat-preview > .device { position: relative; z-index: 1; }
.feat-preview > .feat-pager { position: relative; z-index: 2; }
.feat-preview > .feat-demo-tag { position: relative; z-index: 2; }

/* 设备宽度断点（按 max-width 从大到小书写，后者覆盖前者） */
@media (max-width: 1279px) { .feat-preview { --dev-w-max: 300px; } }                 /* 1024–1279 */
@media (max-width: 1023px) { .feat-preview { --dev-w-max: 282px; } }                 /* 768–1023 */
@media (max-width: 767px)  { .feat-preview { --dev-w-max: clamp(240px, 66vw, 270px); } } /* 481–767 */
@media (max-width: 480px)  { .feat-preview { --dev-w-max: clamp(232px, 66vw, 250px); } } /* 361–480 */
@media (max-width: 360px)  { .feat-preview { --dev-w-max: clamp(214px, 66vw, 228px); } } /* ≤360 */

/* ---------- 平潭氛围装饰：海面光晕 / 远景风机 / 抽象海浪（纯 SVG + CSS，背景层） ---------- */
.features { --feat-sea-h: clamp(76px, 8vw, 116px); padding-bottom: var(--feat-sea-h); }
.features > .feat-head,
.features > .feat-stage,
.features > .feat-swipe-hint { position: relative; z-index: 1; }

/* 海浪：只占区块底部留白带，不进入文案区 */
.feat-sea {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--feat-sea-h);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.feat-sea-svg { display: block; width: 100%; height: 100%; }

/* 光晕 + 风机：跟随设备列的装饰层 */
.feat-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.feat-glow {
  position: absolute;
  left: 50%;
  top: calc(var(--dev-w) * -0.06);
  width: calc(var(--dev-w) * 2.05);
  max-width: 100%;         /* 光晕不越出设备列，避免窄屏横向溢出 */
  height: calc(var(--dev-w) * 1.5);
  transform: translateX(-50%);
  background:
    radial-gradient(52% 50% at 50% 46%, rgba(33, 198, 199, .10), rgba(33, 198, 199, 0) 72%),
    radial-gradient(38% 38% at 68% 64%, rgba(255, 181, 71, .06), rgba(255, 181, 71, 0) 74%);
}

/* 近设备海岸线：机身下半部后方，从左侧留白横穿到右侧风机区
   注意：SVG 是替换元素，只给 left/right 时宽度会取内在比例，必须显式写 width */
.feat-shore {
  position: absolute;
  left: -60px;
  width: calc(100% + 90px);
  bottom: 130px;
  height: 120px;
  display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%);
}
@media (min-width: 1440px) {
  .feat-shore { width: calc(100% + 115px); }
}
@media (max-width: 1023px) {
  .feat-shore { left: -20px; width: calc(100% + 40px); bottom: 105px; height: 76px; }
}
@media (max-width: 480px) {
  .feat-shore { bottom: 95px; height: 64px; }
}

/* 风机：叶片绕轮毂 (30,21) 匀速旋转；透明度直接给颜色（rgba），父级不再叠 opacity */
.wt {
  position: absolute;
  color: rgba(8, 111, 175, .18);
  overflow: visible;
  pointer-events: none;
}
.wt-blades {
  transform-box: view-box;
  transform-origin: 30px 21px;
}
/* ≥1280：86×140 / 64×104 / 48×80，向手机右上后方展开 */
.wt--near { width: 86px; height: 140px; top: 500px; left: calc(50% + var(--dev-w) / 2 - 18px); color: rgba(8, 111, 175, .19); }
.wt--mid { width: 64px; height: 104px; top: 372px; left: calc(50% + var(--dev-w) / 2 + 18px); color: rgba(19, 160, 177, .15); }
.wt--far { width: 48px; height: 80px; top: 250px; left: calc(50% + var(--dev-w) / 2 + 48px); color: rgba(8, 111, 175, .11); }

@media (prefers-reduced-motion: no-preference) {
  .wt-blades { animation: turbine-spin 26s linear infinite; }
  /* 错开相位，避免三台同步转（必须写在 animation 简写之后） */
  .wt-blades--b { animation-delay: -8s; }
  .wt-blades--c { animation-delay: -15s; }
}
@keyframes turbine-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 1024–1279：2 座（64×104 / 44×72） */
@media (max-width: 1279px) {
  .wt--near { width: 64px; height: 104px; top: 300px; left: calc(50% + var(--dev-w) / 2 + 2px); color: rgba(8, 111, 175, .18); }
  .wt--far { width: 44px; height: 72px; top: 176px; left: calc(50% + var(--dev-w) / 2 + 26px); color: rgba(8, 111, 175, .13); }
  .wt--mid { display: none; }
  .feat-shore { right: -30px; }
}
/* 平板 768–1023：同样 2 座，留出更大间距 */
@media (max-width: 1023px) {
  .wt--near { width: 64px; height: 104px; top: 360px; left: calc(50% + var(--dev-w) / 2 + 10px); color: rgba(8, 111, 175, .18); }
  .wt--far { display: block; width: 44px; height: 72px; top: 236px; left: calc(50% + var(--dev-w) / 2 + 110px); color: rgba(8, 111, 175, .13); }
  .feat-sea-far { display: none; }
}
/* 手机 481–767：1 座 42×68 */
@media (max-width: 767px) {
  .wt--near { width: 42px; height: 68px; top: 330px; left: calc(50% + var(--dev-w) / 2 - 2px); color: rgba(8, 111, 175, .14); }
  .wt--far { display: none; }
}
@media (max-width: 480px) {
  .wt--near { width: 42px; height: 68px; top: 300px; left: calc(50% + var(--dev-w) / 2 - 2px); color: rgba(8, 111, 175, .14); }
}
/* ≤360：保留一座 30×48 小风机（只露上半部分也可） */
@media (max-width: 360px) {
  .wt--near { width: 30px; height: 48px; top: 280px; left: calc(50% + var(--dev-w) / 2 - 4px); color: rgba(8, 111, 175, .10); }
  .features { --feat-sea-h: 68px; }
}

/* 外壳：深空钛灰；比例 410:872，保证内屏恰为 390:852 */
.device {
  position: relative;
  width: var(--dev-w);
  max-width: 100%;
  aspect-ratio: 410 / 872;
  padding: calc(var(--dev-w) * 0.02439);   /* 10 / 410；用 calc 避免百分比 padding 相对父元素解析 */
  border-radius: calc(var(--dev-w) * 0.1366);
  background: linear-gradient(152deg, #4C525A 0%, #262A2F 34%, #171A1E 62%, #33373E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1.5px 0 rgba(255, 255, 255, .20),
    0 2px 4px rgba(15, 23, 42, .16),
    0 20px 44px -16px rgba(12, 34, 52, .34),
    0 52px 96px -46px rgba(12, 34, 52, .48);
}

/* 侧键 */
.device-key {
  position: absolute;
  width: calc(var(--dev-w) * 0.0088);
  border-radius: 2px;
  background: linear-gradient(180deg, #4E545D 0%, #22262B 100%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14);
}
.device-key--mute { left: calc(var(--dev-w) * -0.0072); top: 15.4%; height: 3.3%; }
.device-key--vol-up { left: calc(var(--dev-w) * -0.0072); top: 20.6%; height: 7.2%; }
.device-key--vol-down { left: calc(var(--dev-w) * -0.0072); top: 29.4%; height: 7.2%; }
.device-key--power { right: calc(var(--dev-w) * -0.0072); top: 24.8%; height: 10.2%; }

/* 内屏 */
.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--dev-w) * 0.1122);
  overflow: hidden;
  background: #1299E3;     /* 与小程序导航栏同色，状态栏区域无缝衔接 */
  isolation: isolate;
}

/* 小程序页面：位于状态栏之下，截图自带导航栏与页面标题 */
.device-page {
  position: absolute;
  top: 5.164%;             /* 44 / 852 */
  left: 0;
  right: 0;
  bottom: 0;
}
.feat-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 内屏与截图同为 390:852，等比且无裁切 */
  object-position: top center;
  opacity: 0;
  transform: translateX(calc(var(--slide-dir, 1) * 10px));
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.feat-preview[data-dir="-1"] .feat-shot { --slide-dir: -1; }
.feat-shot.is-active { opacity: 1; transform: translateX(0); }

/* iOS 状态栏（设备层；截图不含，仅此一套） */
.ios-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5.164%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7.4%;
  color: #fff;
  font-size: calc(var(--dev-w) * 0.0365);
  font-weight: 600;
  letter-spacing: .01em;
  z-index: 3;
  pointer-events: none;
}
.ios-stat { display: flex; align-items: center; gap: calc(var(--dev-w) * 0.015); }
.ios-ico { display: block; height: calc(var(--dev-w) * 0.0295); width: auto; }
.ios-batt { height: calc(var(--dev-w) * 0.0325); }

/* 灵动岛 */
.device-island {
  position: absolute;
  top: 1.29%;
  left: 50%;
  transform: translateX(-50%);
  width: 29.7%;
  height: 3.76%;
  border-radius: 999px;
  background: #05070A;
  z-index: 4;
  pointer-events: none;
}
.device-cam {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #223449 0%, #0A1018 72%);
}

/* 微信胶囊（界面层；截图不含胶囊；纯展示，无 hover、不可点） */
.wx-capsule {
  position: absolute;
  top: 5.87%;
  right: 2.05%;
  width: 23.1%;
  height: 3.76%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 999px;
  background: rgba(255, 255, 255, .20);
  border: 1px solid rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  z-index: 5;
  pointer-events: none;
}
.wx-dots { display: flex; align-items: center; gap: calc(var(--dev-w) * 0.0105); }
.wx-dots i {
  display: block;
  width: calc(var(--dev-w) * 0.0135);
  height: calc(var(--dev-w) * 0.0135);
  border-radius: 50%;
  background: currentColor;
}
.wx-divider { width: 1px; height: 42%; background: rgba(255, 255, 255, .48); }
.wx-ring {
  width: calc(var(--dev-w) * 0.031);
  height: calc(var(--dev-w) * 0.031);
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

/* Home 指示条 */
.device-home {
  position: absolute;
  left: 50%;
  bottom: 0.94%;
  transform: translateX(-50%);
  width: 34.4%;
  height: 0.55%;
  border-radius: 999px;
  background: rgba(13, 30, 48, .32);
  z-index: 5;
  pointer-events: none;
}

/* 分页控件 */
.feat-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: var(--dev-w);
  max-width: 100%;
  margin: var(--space-5) auto 0;
}
.feat-progress { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.feat-progress-cur { font-size: 22px; font-weight: 800; line-height: 1; color: var(--deep-sea); }
.feat-progress-total { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.feat-dots { display: flex; align-items: center; gap: 7px; }
.feat-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 111, 175, .22);
  cursor: pointer;
  transition: background 180ms var(--ease), width 180ms var(--ease);
}
.feat-dot.is-on { width: 18px; background: var(--deep-sea); }
.feat-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(8, 111, 175, .30); }
.feat-arrows { display: flex; gap: 6px; }
.feat-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(8, 111, 175, .18);
  background: rgba(255, 255, 255, .92);
  color: var(--deep-sea);
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.feat-arrow svg { width: 16px; height: 16px; }
.feat-arrow:hover { background: #fff; border-color: rgba(8, 111, 175, .34); transform: translateY(-1px); }
.feat-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(8, 111, 175, .35); }
.feat-swipe-hint { display: none; }

/* 锚点跳转时避开 sticky 顶栏 */
#qr-entry { scroll-margin-top: 76px; }

/* ---------- 7. 通用区块头（why / spots 共用） ---------- */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--teal-text);
  text-transform: uppercase;
}
.sec-eyebrow::before {
  content: "";
  width: 26px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(14, 152, 160, .55));
}
.sec-title {
  margin-top: var(--space-3);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: .01em;
  text-wrap: balance;
}
.sec-sub {
  margin-top: var(--space-3);
  font-size: var(--fs-sub);
  color: var(--ink-2);
  max-width: 38em;
}

/* ---------- 8. 为什么更懂平潭 ---------- */
.why {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--space-9) 0;
  scroll-margin-top: 76px;
}
.why-head,
.why-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.why-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* 路线推演图 + 时间轴 */
.why-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
.why-map { display: none; max-width: 480px; }
.why-map-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.map-area {
  font-size: 15px;
  font-weight: 700;
  fill: rgba(22, 53, 74, .38);
  letter-spacing: .12em;
}
.pin-label {
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--ink);
}
.map-north {
  font-size: 11px;
  font-weight: 800;
  fill: var(--deep-sea);
}
.map-pin circle { filter: drop-shadow(0 2px 4px rgba(8, 111, 175, .28)); }
/* 路线绘制动画（一次性，reduced-motion 下关闭） */
.map-route-line {
  stroke-dasharray: 7 6;
  animation: routeDash 22s linear infinite;
}
.map-route-south { stroke-dasharray: 6 7; animation-duration: 26s; }
@keyframes routeDash {
  to { stroke-dashoffset: -260; }
}
.why-map-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

/* 手机端区域方位列表（替代缩小版桌面地图） */
.why-areas ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why-areas li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(8, 111, 175, .05);
  border-left: 3px solid rgba(8, 111, 175, .32);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.why-areas b {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--deep-sea);
  letter-spacing: .04em;
}
.why-areas span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.why-areas-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}

/* 时间轴 */
.why-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: 20px;
  border-left: 2px solid rgba(8, 111, 175, .14);
}
.wt-item { position: relative; }
.wt-item::before {
  content: "";
  position: absolute;
  left: -27px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--deep-sea);
  box-shadow: 0 0 0 3px rgba(8, 111, 175, .12);
}
.wt-dawn::before { background: var(--sunset); box-shadow: 0 0 0 3px rgba(255, 181, 71, .20); }
.wt-dusk::before { background: var(--teal-text); box-shadow: 0 0 0 3px rgba(14, 152, 160, .16); }
.wt-end::before { background: var(--ink-3); box-shadow: 0 0 0 3px rgba(22, 53, 74, .10); }
.wt-time {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.wt-name {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.wt-desc {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* 规则说明 */
.rule-list { display: flex; flex-direction: column; }
.rule {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.rule:first-child { border-top: none; padding-top: 0; }
.rule-no {
  flex: none;
  height: fit-content;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--deep-sea);
  background: rgba(8, 111, 175, .10);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.rule:nth-child(2) .rule-no { color: var(--teal-text); background: rgba(33, 198, 199, .14); }
.rule:nth-child(3) .rule-no { color: #B4730E; background: rgba(255, 181, 71, .18); }
.rule-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}
.rule-desc {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- 8.5 3D 平潭（纯静态介绍模块） ----------
   注意：这里只有静态 SVG 视觉，不承载任何 3D 渲染 / iframe / 交互地图。 */
.p3dx {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--space-9) 0;
  scroll-margin-top: 76px;
}
.p3dx-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.p3dx-head { max-width: 46em; }

.p3dx-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: var(--space-7);
}

/* 沙盘视觉：深海底色 + 浮起的岛，暗示 3D 沙盘的俯视角 */
.p3dx-frame {
  position: relative;
  height: 560px;
  border-radius: var(--radius-l);
  overflow: hidden;
  /* 与 SVG 内部海面同一条竖向渐变，避免等比缩放后左右露出色差竖带 */
  background: linear-gradient(180deg, #12637F 0%, #093F5E 46%, #04283C 100%);
  box-shadow: 0 10px 24px rgba(4, 40, 60, .18), 0 28px 64px rgba(4, 40, 60, .22);
  border: 1px solid rgba(8, 111, 175, .18);
}
.p3dx-svg { display: block; width: 100%; height: 100%; }
.p3dx-badge {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #CFF3F6;
  background: rgba(4, 40, 60, .55);
  border: 1px solid rgba(143, 240, 238, .3);
  backdrop-filter: blur(6px);
}
.p3dx-note {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}
.p3dx-nw { white-space: nowrap; }

/* 三条说明 */
.p3dx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.p3dx-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.p3dx-no {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--deep-sea);
  background: rgba(8, 111, 175, .08);
  border: 1px solid rgba(8, 111, 175, .16);
}
.p3dx-step-t {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}
.p3dx-step-d {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-2);
}

/* 小程序入口提示 */
.p3dx-enter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: var(--space-7);
  padding: 16px 18px;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, rgba(8, 111, 175, .07), rgba(33, 198, 199, .10));
  border: 1px solid rgba(8, 111, 175, .14);
}
.p3dx-enter-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--primary-ink);
  background: var(--grad-brand);
}
.p3dx-enter-t {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}
.p3dx-enter-d {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 说明：不宣称全部景点均已精准定位 */
.p3dx-disclaimer {
  margin-top: 16px;
  padding-left: 12px;
  border-left: 2px solid rgba(14, 152, 160, .34);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-3);
}
.p3dx-disclaimer strong { color: var(--ink-2); font-weight: 700; }

@media (max-width: 900px) {
  .p3dx-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-top: var(--space-6);
  }
  .p3dx-visual { order: 1; }
  .p3dx-copy { order: 2; }
  .p3dx-frame {
    height: auto;
    aspect-ratio: 5 / 6;
  }
  .p3dx-steps { gap: var(--space-4); }
  .p3dx-enter { margin-top: var(--space-6); }
  .p3dx-note { font-size: 12px; }
}

/* ---------- 9. 精选景点（编辑式排版） ---------- */
.spots {
  background: linear-gradient(180deg, #F2F9FC 0%, var(--mist) 100%);
  border-top: 1px solid var(--line);
  padding: var(--space-9) 0;
  scroll-margin-top: 76px;
}
.spots-head,
.spots-grid,
.spots-cta {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.spots-grid {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 卡片基础（手机端：图 + 白卡流式） */
.spot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-s);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.spot-card.in-view { opacity: 1; transform: none; }
.spot-fig {
  position: relative;
  margin: 0;
  height: 220px;
  overflow: hidden;
  background: #E6F1F6;
}
.spot-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s var(--ease);
}
.spot-info {
  position: relative;
  z-index: 1;
  padding: 16px 18px 18px;
  color: var(--ink);
}
.spot-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.spot-line {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--deep-sea);
  background: rgba(8, 111, 175, .10);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
}
.spot-book {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal-text);
  background: rgba(33, 198, 199, .12);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
}
.spot-book.is-need {
  color: #B4730E;
  background: rgba(255, 181, 71, .18);
}
.spot-name {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.spot-tagline {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.spot-tags li {
  font-size: 11px;
  color: var(--ink-2);
  background: rgba(22, 53, 74, .06);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
}
.spot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.spot-stay { font-weight: 600; color: var(--ink-2); }
.spot-src {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.spot-more {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--deep-sea);
  background: rgba(8, 111, 175, .08);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.spot-more::after {
  content: "▾";
  font-size: 10px;
  transition: transform var(--dur-fast) var(--ease);
}
.spot-card.is-open .spot-more::after { transform: rotate(180deg); }
.spot-extra {
  display: none;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}
.spot-card.is-open .spot-extra { display: block; }

.spots-cta {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.spots-cta-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 44em;
}

/* ---------- 10. 民宿老板专区 ---------- */
.homestay {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--space-9) 0;
  overflow: hidden;
  scroll-margin-top: 76px;
}
.homestay-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* 三步流程 */
.hs-steps {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
}
.hs-step {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.hs-step:last-child { padding-bottom: 0; }
.hs-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(8, 111, 175, .30), rgba(33, 198, 199, .16));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s var(--ease) .12s;
}
.homestay-copy.in-view .hs-step:not(:last-child)::before { transform: scaleY(1); }

.hs-no {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--deep-sea);
  background: rgba(8, 111, 175, .10);
  font-variant-numeric: tabular-nums;
}
.hs-step:nth-child(2) .hs-no { color: var(--teal-text); background: rgba(33, 198, 199, .14); }
.hs-step:nth-child(3) .hs-no { color: #B4730E; background: rgba(255, 181, 71, .18); }
.hs-step-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}
.hs-step-desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.hs-actions { margin-top: var(--space-6); }
.hs-note {
  margin-top: var(--space-3);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* 右侧深色面板 */
.homestay-visual { position: relative; }
.hs-panel {
  position: relative;
  border-radius: var(--radius-l);
  padding: 22px;
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(33, 198, 199, .20), transparent 62%),
    linear-gradient(150deg, #0C2438 0%, #103A4C 60%, #0E4A52 100%);
  color: #fff;
  box-shadow: var(--shadow-l);
  overflow: hidden;
}
.hs-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hs-roof {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 198, 199, .16);
  color: #7FE6E7;
}
.hs-panel-title b { display: block; font-size: 15px; font-weight: 800; }
.hs-panel-title span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .62);
}
.hs-route {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
}
.hs-route-label {
  font-size: 11px;
  font-weight: 700;
  fill: rgba(255, 255, 255, .74);
}
.hs-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.hs-state {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hs-state b {
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, .86);
}
.hs-state span { font-size: 12px; color: rgba(255, 255, 255, .62); }
.hs-state.is-ok {
  background: rgba(33, 198, 199, .14);
  border-color: rgba(33, 198, 199, .28);
}
.hs-state.is-ok b { color: #7FE6E7; }
.hs-state.is-ok span { color: rgba(255, 255, 255, .80); }
.hs-meta-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
}

/* ---------- 11. 最终扫码转化区 ---------- */
.scan-final {
  position: relative;
  padding: var(--space-9) 0;
  background:
    radial-gradient(700px 380px at 50% 0%, rgba(33, 198, 199, .14), transparent 64%),
    linear-gradient(180deg, var(--mist) 0%, #EDF7FB 100%);
  border-top: 1px solid var(--line);
  overflow: hidden;
  scroll-margin-top: 76px;
}
.scan-final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -90px;
  transform: translateX(-50%);
  width: 620px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(33, 198, 199, .12), transparent 68%);
  animation: breathe 9s var(--ease) infinite;
  pointer-events: none;
}
.scan-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
.scan-points {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.scan-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.scan-points svg { flex: none; color: var(--teal-text); }
.scan-qr { display: flex; justify-content: center; }
.qr-card-lg {
  width: 240px;
  padding: 22px 18px 20px;
}
.qr-card-lg .qr-frame {
  width: 176px;
  height: 176px;
}

/* 小程序入口卡：暂未配置正式小程序码，统一用「微信搜索」指引 */
.qr-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px 18px 22px;
}
.guide-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-text);
  background: rgba(33, 198, 199, .12);
  border: 1px solid rgba(33, 198, 199, .22);
}
.qr-card-lg .guide-ico {
  width: 64px;
  height: 64px;
}
.guide-title {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}
.guide-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
/* 正式小程序码（430×430 源图，按卡片宽度等比缩小） */
.guide-qr {
  display: block;
  width: 168px;
  height: 168px;
  margin: 2px auto 10px;
  border-radius: 12px;
  background: #fff;
}
.qr-card-lg .guide-qr {
  width: 190px;
  height: 190px;
}

/* ---------- 12. 页脚 ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--space-8) 0 var(--space-7);
  scroll-margin-top: 76px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.footer-brand { min-width: 220px; }
.footer-brandlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-brandlink img {
  width: 30px; height: 30px;
  border-radius: 50%;
  box-shadow: var(--shadow-s);
}
.footer-brandlink span {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
}
.footer-intro {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: 24em;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-top: 4px;
}
.footer-nav a {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer-nav a:hover { color: var(--deep-sea); }
.footer-legal {
  font-size: 12.5px;
  color: var(--ink-3);
  align-self: flex-end;
}
.footer-meta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.footer-icp,
.footer-tel,
.footer-police {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-bottom-color var(--dur-fast) var(--ease);
}
.footer-icp:hover,
.footer-tel:hover,
.footer-police:hover {
  color: var(--deep-sea);
  border-bottom-color: rgba(8, 111, 175, .35);
}

/* 公安备案：图标 + 编号同一行，手机上不换行 */
.footer-police {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.5;
  vertical-align: middle;
}
.footer-police-ico {
  height: 17px;
  width: auto;
  flex: none;
  display: block;
}

/* ---------- 13. 进场淡入（新章节） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- 14. 预留板块（暂未使用，保留占位能力） ---------- */
.reserved { min-height: 0; }
.reserved-empty { display: none; }

/* ---------- 7. 页脚容器 ---------- */
.site-footer { min-height: 0; }

/* ---------- 8. 响应式 ---------- */
@media (min-width: 768px) {
  .hero-inner { padding-top: var(--space-9); }
  .hero-tags li { font-size: 14px; }

  /* 导航：桌面显示 */
  .topnav { display: flex; margin-left: auto; }
  .topbar-cta { margin-left: 0; }
  .cta-desk { display: inline; }
  .cta-mob { display: none; }

  /* 最终转化区：左右布局 */
  .scan-inner { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-9); }
  .qr-card-lg { width: 258px; }
  .qr-card-lg .qr-frame { width: 190px; height: 190px; }
}

@media (max-width: 767px) {
  .stories { padding: var(--space-8) 0; }
  .stories::before,
  .stories::after,
  .stories-rows,
  .stories-toggle { display: none !important; }
  .stories-head { margin-bottom: var(--space-5); align-items: flex-start; }
  .stories.stories-enhanced .stories-list,
  .stories-list {
    max-width: none;
    margin: 0;
    padding: 2px 20px 18px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stories-list::-webkit-scrollbar { display: none; }
  .stories-list .story-card {
    flex: 0 0 min(82vw, 336px);
    width: auto;
    min-height: 236px;
    scroll-snap-align: start;
    padding: 22px;
  }
  .story-avatar { width: 44px; height: 44px; }
  .stories-note { padding: 0 20px; }
  .stories-swipe-hint {
    display: block;
    margin-top: 4px;
    padding: 0 20px;
    color: var(--ink-3);
    font-size: 12px;
    text-align: center;
  }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .footer-legal { align-self: flex-start; }
}

/* ---------- 平板/手机：设备在上、四步文案在下；设备可左右滑动 ---------- */
@media (max-width: 1023px) {
  .feat-stage {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-6);
  }
  /* 设备宽度由 --dev-w-max 断点统一控制（282 / 270 / 250 / 228），此处不再写死 */
  .feat-demo-tag { margin-bottom: 18px; }   /* 标签与设备之间 16–24px */
  .feat-pager { margin-top: var(--space-4); }
  .feat-scene {
    padding: var(--space-6) 0;
  }
  .feat-scene-body { max-width: none; }
  .feat-swipe-hint {
    display: block;
    margin: 6px 0 0;
    padding: 0 20px;
    color: var(--ink-3);
    font-size: 12px;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-8);
    padding-bottom: var(--space-9);
  }
  .hero-copy { max-width: 520px; }
  .hero-visual { flex-wrap: nowrap; }

  /* 核心功能：文案为主（约 62%），右侧设备为辅（约 38%），设备在列内居中 */
  .feat-stage {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  .feat-scene { padding: var(--space-8) 0; min-height: clamp(300px, 42vh, 400px); }
  .feat-scene-body { max-width: 40em; }

  /* 设备：短视口下按可视高度反算宽度，保证「设备 + 分页」整体不超出可视区 */
  .feat-preview {
    --dev-w: min(var(--dev-w-max), calc((100vh - 200px) / 2.1268));
    position: sticky;
    top: 80px;
    opacity: 0;
    transform: translateY(20px);
  }
  .feat-preview.is-in { animation: featCardIn 600ms var(--ease-out) forwards; }
  .feat-arrow { width: 42px; height: 42px; }
  .feat-arrow svg { width: 18px; height: 18px; }
  .feat-arrow:hover { background: #fff; border-color: rgba(8, 111, 175, .34); transform: translateY(-1px); }
  .feat-arrow:active { transform: translateY(0); }
  .feat-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(8, 111, 175, .35); }

  /* 为什么更懂平潭：左图右规则 */
  .why-body {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-9);
    align-items: start;
  }
  .why-visual {
    grid-template-columns: minmax(0, 1fr) 196px;
    gap: var(--space-5);
  }
  .why-map { display: block; max-width: none; }
  .why-areas { display: none; }

  /* 民宿专区：左文右面板 */
  .homestay-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-9); }

  /* 精选景点：编辑式 12 列（1 大 + 2 中 + 3 紧凑） */
  .spots-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 200px 200px 260px;
    gap: 18px;
  }
  .spot-main { grid-column: 1/7; grid-row: 1/3; }
  .spot-mid:nth-child(2) { grid-column: 7/10; grid-row: 1/3; }
  .spot-mid:nth-child(3) { grid-column: 10/13; grid-row: 1/3; }
  .spot-compact:nth-child(4) { grid-column: 1/5; grid-row: 3/4; }
  .spot-compact:nth-child(5) { grid-column: 5/9; grid-row: 3/4; }
  .spot-compact:nth-child(6) { grid-column: 9/13; grid-row: 3/4; }

  /* 桌面端卡片：图满铺 + 底部渐变 + 白字 */
  .spot-card { justify-content: flex-end; }
  .spot-fig { position: absolute; inset: 0; height: auto; }
  .spot-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 26, 40, 0) 40%, rgba(8, 26, 40, .76) 100%);
  }
  .spot-info { color: #fff; padding: 20px; }
  .spot-line { color: #fff; background: rgba(255, 255, 255, .22); }
  .spot-book { color: #fff; background: rgba(255, 255, 255, .18); }
  .spot-book.is-need { color: #FFD98A; background: rgba(255, 181, 71, .26); }
  .spot-name { color: #fff; font-size: 20px; }
  .spot-tagline { color: rgba(255, 255, 255, .84); }
  .spot-tags li { color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .16); }
  .spot-foot { color: rgba(255, 255, 255, .72); }
  .spot-stay { color: rgba(255, 255, 255, .92); }
  .spot-src { color: rgba(255, 255, 255, .55); }
  .spot-more { display: none; }
  .spot-extra { display: none !important; }

  /* 三级文字层级 */
  .spot-main .spot-name { font-size: 25px; }
  .spot-main .spot-tagline { font-size: 14.5px; }
  .spot-mid .spot-name { font-size: 17px; }
  .spot-mid .spot-tagline { font-size: 12.5px; }
  .spot-compact .spot-name { font-size: 16px; }
  .spot-compact .spot-tagline { display: none; }
  .spot-compact .spot-info { padding: 16px; }
  .spot-compact .spot-tags li { font-size: 10.5px; }

  /* 悬停：只做轻微放大 + 文字上移 */
  @media (hover: hover) {
    .spot-card { cursor: default; }
    .spot-card:hover .spot-fig img { transform: scale(1.04); }
    .spot-card:hover .spot-info { transform: translateY(-3px); }
    .spot-info { transition: transform var(--dur-base) var(--ease); }
  }
}

@media (max-width: 420px) {
  .hero-inner { padding-top: var(--space-7); padding-bottom: var(--space-7); gap: var(--space-6); }
  .hero-route { display: none; }   /* 小屏收起装饰航线，避免拥挤 */
  .phone { width: min(258px, 82vw); }
  .qr-card { width: min(216px, 86vw); }
  .qr-frame { width: 132px; height: 132px; }
  .trust-inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .feat-head { padding-top: var(--space-8); }
  .feat-scene { padding: var(--space-6) 0; }
}

/* 超小屏 320px：进一步收紧 */
@media (max-width: 340px) {
  .hero-cta .btn { width: 100%; }
  .trust-prefix, .trust-suffix { font-size: 16px; }
}

/* ---------- 9. 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .wt-blades { animation: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .od-strip { transition: none !important; }
  .stories-track { animation: none !important; }
  .hero-glow { animation: none; }
  .map-route-line { animation: none; }
  .spot-card { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .scan-final::before { animation: none; }
  .homestay-copy .hs-step:not(:last-child)::before { transform: scaleY(1); }
  /* 减少动态：预览卡片不位移、不淡入动画，切换瞬时完成，但功能仍可手动切换 */
  .feat-preview { opacity: 1; transform: none; animation: none !important; }
  .feat-shot { transition: none !important; transform: none !important; }
}