/* ============================================================
   XDOBO 喜多宝 · 品牌印象站
   版本: V3 (2026-08-27) · 微信首屏抖动修复（数字区宽度锁定 + 禁文字自动放大 + hero 视口锁高）
   墨金深色科技设计系统 —— 换肤只改 :root 变量
   ============================================================ */
:root {
  /* 品牌色 */
  --gold: #d4a94e;
  --gold-bright: #f0cd7a;
  --gold-dim: rgba(212, 169, 78, .35);
  /* 墨色底 */
  --bg-0: #07090d;
  --bg-1: #0b0e14;
  --bg-2: #10141d;
  --bg-3: #161b27;
  /* 文字 */
  --ink-0: #f4f1e8;
  --ink-1: #c9c6bd;
  --ink-2: #8b8b90;
  /* 功能 */
  --line: rgba(212, 169, 78, .16);
  --line-soft: rgba(244, 241, 232, .08);
  --danger: #e2635f;
  /* 字体 */
  --font-display: "Space Grotesk", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", "Space Grotesk", sans-serif;
  --font-serif: "Noto Serif SC", serif;
  /* 节奏 */
  --radius: 14px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22, .8, .28, 1);
}

/* 全局去掉移动端点按时的半透明方块高亮（尤其音频播放按钮） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* 禁止 WebView（微信 X5 等）自动放大文字，避免布局被意外撑开 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: #14100a; }

/* 双语切换：默认中文，body.show-en 时显示英文
   状态类必须用 show-en 而非 lang-en——否则 .lang-en{display:none} 会命中 body 本身导致整页白屏 */
.lang-en { display: none; }
body.show-en .lang-en { display: inline; }
body.show-en .lang-zh { display: none; }

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.container { width: min(1180px, 92vw); margin: 0 auto; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.9em; border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .04em; transition: all .35s var(--ease);
  border: 1px solid transparent; white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(120deg, var(--gold-bright), var(--gold) 55%, #a97f2f);
  color: #171204; box-shadow: 0 6px 24px rgba(212, 169, 78, .28);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(212, 169, 78, .42); }
.btn-line { border-color: var(--gold-dim); color: var(--gold-bright); }
.btn-line:hover { background: rgba(212, 169, 78, .08); border-color: var(--gold); }
.btn-ghost { color: var(--ink-1); border-color: var(--line-soft); }
.btn-ghost:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.btn-sm { padding: .5em 1.2em; font-size: .85rem; }

/* ---------- 导航 ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7, 9, 13, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  width: min(1280px, 94vw); margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; gap: 2rem;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), #a97f2f);
  color: #171204; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  overflow: hidden;
}
.brand-mark img { width: 26px; height: 26px; object-fit: contain; display: block; }
.brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; font-size: 1.02rem; }
.brand-word em { font-style: normal; font-weight: 400; color: var(--gold); margin-left: .5em; letter-spacing: .3em; font-size: .8rem; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a { color: var(--ink-1); font-size: .88rem; letter-spacing: .05em; transition: color .3s; position: relative; }
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
/* 移动端汉堡按钮（桌面隐藏） */
.nav-burger {
  display: none; width: 38px; height: 38px; border: 1px solid var(--line-soft);
  border-radius: 9px; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .3s;
}
.nav-burger:hover { border-color: var(--gold-dim); }
.nav-burger i { display: block; width: 16px; height: 1.6px; background: var(--ink-1); border-radius: 2px; transition: all .35s var(--ease); }
.nav-burger.open i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); background: var(--gold-bright); }
.nav-burger.open i:nth-child(2) { opacity: 0; }
.nav-burger.open i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); background: var(--gold-bright); }
.lang-toggle { display: flex; align-items: center; gap: .35em; font-size: .82rem; color: var(--ink-2); letter-spacing: .05em; }
.lang-toggle i { font-style: normal; opacity: .4; }
.lang-toggle span { padding: .15em .35em; border-radius: 4px; transition: color .3s; }
.lang-toggle span.on { color: var(--gold-bright); }
.lang-toggle span:hover { color: var(--ink-0); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  /* 微信 WebView 首屏防抖动：app.js 载入后以 --hero-h 像素值锁高，不再随 svh 抖动 */
  min-height: var(--hero-h, 100svh);
  padding: calc(var(--nav-h) + 3rem) 0 5rem; overflow: hidden;
  background: radial-gradient(1200px 600px at 70% -10%, #141a2a 0%, var(--bg-0) 60%);
}
#wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hero-glow {
  position: absolute; width: 60vw; height: 60vw; right: -18vw; top: -20vw;
  background: radial-gradient(circle, rgba(212, 169, 78, .14), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; width: min(1180px, 92vw); margin: 0 auto; }
.hero-kicker {
  font-family: var(--font-display); letter-spacing: .32em; font-size: .78rem;
  color: var(--gold); text-transform: uppercase; margin-bottom: 1.6rem;
}
.hero h1 { font-family: var(--font-display); line-height: 1.06; margin-bottom: 1.8rem; }
.hero-title-line {
  display: block; font-size: clamp(2.6rem, 7.4vw, 5.6rem); font-weight: 700;
  letter-spacing: -.01em;
}
.hero-title-line b {
  background: linear-gradient(100deg, var(--gold-bright) 10%, var(--gold) 45%, #8f6a26 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title-sub {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); color: var(--ink-1);
  letter-spacing: .42em; margin-top: 1rem;
}
.answer-block {
  max-width: 46em; color: var(--ink-1); font-size: 1.02rem;
  border-left: 2px solid var(--gold-dim); padding-left: 1.2rem; margin-bottom: 2.6rem;
}
.hero-stats { display: flex; flex-wrap: wrap; gap: 2.8rem; margin-bottom: 2.8rem; }
.stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--gold-bright); line-height: 1.15;
}
/* 数字滚动期间锁定占位宽度 + 等宽数字：
   否则数字每帧变宽会挤压相邻 stat，在 flex-wrap 下反复跨越换行阈值，
   微信 WebView 文字偏大时表现为整个首屏下半部剧烈抖动 */
.stat b span[data-count] {
  display: inline-block; min-width: 3ch; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* "1,000,000+" = 7 位数字 + 2 逗号 + 加号，预留最终宽度 */
.stat b span[data-format="wan"] { min-width: 9.4ch; }
.stat-label { color: var(--ink-2); font-size: .85rem; letter-spacing: .08em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 14px;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--gold); animation: drip 1.8s infinite var(--ease);
}
@keyframes drip { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 通用分区 ---------- */
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section:nth-of-type(even) { background: linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, var(--bg-1) 70%, var(--bg-0)); }
.sec-kicker {
  font-family: var(--font-display); color: var(--gold); letter-spacing: .3em;
  font-size: .78rem; margin-bottom: 1.1rem; text-transform: uppercase;
}
.section h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem); line-height: 1.25; margin-bottom: 2.2rem;
  max-width: 22em;
}
.section h2 small { display: block; font-size: .5em; font-weight: 400; color: var(--ink-2); margin-top: .5em; letter-spacing: .1em; }
.sec-lead { color: var(--ink-1); max-width: 44em; margin: -1rem 0 2.4rem; }

/* 滚动显现 */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 品牌故事 ---------- */
.story-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 3.5rem; align-items: start; }
.story-text p { color: var(--ink-1); margin-bottom: 1.3rem; }
.founder-quote {
  margin-top: 2rem; padding: 1.4rem 1.6rem; border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(212, 169, 78, .08), transparent 75%);
  font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--gold-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim) 60%, transparent);
}
.tl-item { position: relative; padding-bottom: 1.7rem; }
.tl-item::before {
  content: ""; position: absolute; left: -1.6rem; top: .5em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--bg-0); border: 2px solid var(--gold);
  box-shadow: 0 0 12px var(--gold-dim);
}
.tl-item b { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.25rem; letter-spacing: .06em; }
.tl-item p { color: var(--ink-1); font-size: .94rem; }

/* ---------- X8 Max 产品区 ---------- */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.speaker-stage { text-align: center; }
.speaker { position: relative; display: inline-block; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.speaker-body {
  position: relative; width: min(420px, 80vw); aspect-ratio: 300 / 134;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, #232936 0%, #12151d 55%, #0b0d12 100%);
  border: 1px solid rgba(244, 241, 232, .09);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(244, 241, 232, .08);
}
.speaker-grille {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244, 241, 232, .13) 1px, transparent 1.6px);
  background-size: 9px 9px;
  mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,.35));
  -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,.35));
}
.speaker-driver {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3a4152, #14171f 68%);
  border: 3px solid var(--gold);
  box-shadow: 0 0 22px rgba(212, 169, 78, .3), inset 0 0 14px rgba(0, 0, 0, .7);
}
.speaker-driver::after {
  content: ""; position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #565f74, #1a1e28 70%);
}
.d-left { left: 7%; } .d-right { right: 7%; }
.speaker-plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .42em;
  font-size: clamp(.85rem, 2vw, 1.1rem); color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(212, 169, 78, .5); padding-left: .42em;
}
.speaker-shadow {
  width: 70%; height: 22px; margin: 1.6rem auto 0; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .65), transparent 70%);
}
.stage-note { color: var(--ink-2); font-size: .8rem; margin-top: 1.2rem; letter-spacing: .05em; }
.feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.fcard {
  padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(212, 169, 78, .06), rgba(16, 20, 29, .4));
  transition: transform .4s var(--ease), border-color .4s;
}
.fcard:hover { transform: translateY(-4px); border-color: var(--gold-dim); }
.fcard b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-bright); margin-bottom: .3rem; }
.fcard p { color: var(--ink-1); font-size: .86rem; line-height: 1.6; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table caption {
  text-align: left; font-family: var(--font-display); letter-spacing: .14em;
  color: var(--gold); font-size: .8rem; padding-bottom: .8rem; text-transform: uppercase;
}
.spec-table th, .spec-table td { padding: .68rem .2rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
.spec-table th { color: var(--ink-2); font-weight: 400; width: 46%; }
.spec-table td { color: var(--ink-0); font-family: var(--font-display); font-weight: 500; }

/* ---------- 媒体列：轮播图集 + 横版视频 ---------- */
.media-col { display: flex; flex-direction: column; gap: 1.4rem; }
.gallery {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--bg-2);
}
.gallery-track { display: flex; height: 100%; transition: transform .65s var(--ease); }
.gallery-slide {
  flex: 0 0 100%; display: grid; place-items: center; text-align: center;
  color: var(--ink-2); font-size: .85rem; letter-spacing: .12em; padding: 1rem; position: relative;
}
.gallery-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-1 { background: radial-gradient(90% 90% at 30% 25%, #1c2333, var(--bg-2)); }
.gs-2 { background: radial-gradient(90% 90% at 70% 30%, #25271f, var(--bg-2)); }
.gs-3 { background: radial-gradient(90% 90% at 40% 70%, #1a2430, var(--bg-2)); }
.gs-4 { background: radial-gradient(90% 90% at 60% 60%, #26221a, var(--bg-2)); }
.gallery-slide span { border: 1px dashed var(--line); border-radius: 999px; padding: .5em 1.2em; background: rgba(7, 9, 13, .5); }
.g-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  background: rgba(7, 9, 13, .6); border: 1px solid var(--line); color: var(--gold-bright);
  transition: all .3s; display: grid; place-items: center; padding: 0;
}
.g-arrow:hover { background: rgba(212, 169, 78, .18); border-color: var(--gold); }
.g-prev { left: .9rem; } .g-next { right: .9rem; }
.g-dots { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 2; display: flex; gap: .5rem; }
.g-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 241, 232, .25); transition: all .3s; padding: 0; }
.g-dot.on { background: var(--gold-bright); box-shadow: 0 0 10px var(--gold-dim); transform: scale(1.25); }

/* 16:9 视频占位框（真实 <video> 替换后自动占满） */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); display: grid; place-items: center;
  background:
    radial-gradient(70% 90% at 50% 30%, rgba(212, 169, 78, .07), transparent 70%),
    linear-gradient(160deg, var(--bg-3), var(--bg-1));
}
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-inner { text-align: center; padding: 1rem; }
.vf-play {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto .9rem;
  border-radius: 50%; border: 1px solid var(--gold-dim); color: var(--gold-bright);
  font-size: 1.2rem; padding-left: .2em; background: rgba(7, 9, 13, .5);
  box-shadow: 0 0 30px rgba(212, 169, 78, .15);
}
.vf-cap { color: var(--ink-2); font-size: .84rem; letter-spacing: .1em; }
.vf-wide { max-width: 56rem; margin: 0 auto; }

/* ---------- 全球足迹：音响 + 地图 双栏 ---------- */
.fp-grid { display: grid; grid-template-columns: .85fr 1.5fr; gap: 2.6rem; align-items: center; margin-bottom: 2.6rem; }
.fp-grid .map-wrap { margin-bottom: 0; }
.fp-speaker { text-align: center; }
.fp-speaker .speaker-body { width: min(360px, 78vw); }

/* 视频播放时音响自由起舞（app.js 加 .dancing） */
.speaker.dancing { animation: dance .62s ease-in-out infinite; }
@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  25% { transform: translateY(-15px) rotate(1.6deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
  75% { transform: translateY(-19px) rotate(1.2deg); }
}
.speaker.dancing .speaker-driver { animation: bassPump .31s ease-in-out infinite; }
@keyframes bassPump {
  0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 22px rgba(212, 169, 78, .3), inset 0 0 14px rgba(0, 0, 0, .7); }
  50% { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 44px rgba(212, 169, 78, .7), inset 0 0 14px rgba(0, 0, 0, .7); }
}
.speaker.dancing .speaker-plate { text-shadow: 0 0 26px rgba(240, 205, 122, .95); }

/* ---------- BGM 播放器 ---------- */
.bgm {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  max-width: 380px; margin: 1.8rem auto 0; padding: .8rem 1.2rem .8rem .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(120deg, rgba(212, 169, 78, .08), rgba(16, 20, 29, .5));
}
.bgm-btn {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gold-dim); color: var(--gold-bright);
  display: grid; place-items: center; font-size: .82rem; padding-left: .18em;
  transition: all .3s;
}
.bgm-btn:hover { border-color: var(--gold); background: rgba(212, 169, 78, .1); }
.bgm-btn.playing { background: rgba(212, 169, 78, .16); box-shadow: 0 0 18px rgba(212, 169, 78, .3); padding-left: 0; }
.bgm-info { min-width: 0; }
.bgm-info b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--ink-0); letter-spacing: .05em; }
.bgm-info p { color: var(--ink-2); font-size: .76rem; }

/* ---------- 赢在未来 ---------- */
.future { text-align: center; }
.future h2 { margin-left: auto; margin-right: auto; }
.future-lead { max-width: 44em; margin: 0 auto 2.4rem; color: var(--ink-1); }
.future-slogan {
  margin-top: 2.2rem; font-family: var(--font-display); font-weight: 500;
  color: var(--gold-bright); letter-spacing: .18em; font-size: .95rem;
}

/* 故事区整行居中视频 */
.story-video { max-width: 56rem; margin: 3rem auto 0; }

/* ---------- 全球足迹地图 ---------- */
.map-wrap {
  position: relative; width: 100%; aspect-ratio: 2 / 1; margin-bottom: 2.6rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(80% 90% at 50% 40%, #0e1420, var(--bg-1));
}
.map-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244, 241, 232, .14) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(85% 90% at 50% 45%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(85% 90% at 50% 45%, #000 30%, transparent 95%);
}
.map-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-routes .route {
  fill: none; stroke: var(--gold-dim); stroke-width: 1.2; stroke-dasharray: 6 7;
  animation: routeFlow 9s linear infinite;
}
@keyframes routeFlow { to { stroke-dashoffset: -130; } }
.map-dot { position: absolute; transform: translate(-50%, -50%); }
.map-dot i {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 0 0 rgba(212, 169, 78, .55);
  opacity: 0; transform: scale(.2); transition: all .6s var(--ease);
}
.map-dot.lit i { opacity: 1; transform: scale(1); animation: pulse 2.6s infinite; }
.map-dot.hq i { width: 15px; height: 15px; background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.6); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 169, 78, .5); }
  70% { box-shadow: 0 0 0 16px rgba(212, 169, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 169, 78, 0); }
}
.map-dot span {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; font-size: .72rem; letter-spacing: .06em; color: var(--ink-1);
  background: rgba(7, 9, 13, .78); border: 1px solid var(--line-soft);
  padding: .25em .7em; border-radius: 999px;
  opacity: 0; transition: opacity .5s .2s;
}
.map-dot.lit span { opacity: 1; }
.place-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.pcard {
  padding: 1.3rem 1.35rem; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); transition: border-color .4s, transform .4s var(--ease);
}
.pcard:hover { border-color: var(--gold-dim); transform: translateY(-4px); }
.pcard b { display: block; font-family: var(--font-display); color: var(--gold-bright); margin-bottom: .45rem; letter-spacing: .06em; }
.pcard p { color: var(--ink-1); font-size: .87rem; line-height: 1.65; }

/* ---------- 口碑墙 ---------- */
.voice-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.vcard {
  padding: 1.7rem 1.8rem; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  position: relative; transition: transform .4s var(--ease), border-color .4s;
}
.vcard:hover { transform: translateY(-4px); border-color: var(--gold-dim); }
.vcard::before {
  content: "“"; position: absolute; top: .4rem; right: 1.1rem;
  font-family: var(--font-serif); font-size: 3.4rem; color: var(--gold-dim); line-height: 1;
}
.vcard blockquote { font-size: 1.02rem; color: var(--ink-0); margin-bottom: 1rem; line-height: 1.7; }
.vcard figcaption { color: var(--gold); font-size: .8rem; letter-spacing: .1em; font-family: var(--font-display); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 52rem; }
.faq-list details {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); margin-bottom: .9rem; overflow: hidden;
  transition: border-color .35s;
}
.faq-list details[open] { border-color: var(--gold-dim); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.4rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; color: var(--gold); font-size: 1.3rem; font-weight: 400;
  transition: transform .35s var(--ease); flex: none;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 1.4rem 1.25rem; color: var(--ink-1); font-size: .94rem; }

/* ---------- 会员预告 / 锁定内容 ---------- */
.member-teaser { text-align: center; }
.member-teaser h2 { margin-left: auto; margin-right: auto; }
.locked-content {
  position: relative; max-width: 40rem; margin: 0 auto 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 2rem 2.2rem; text-align: left;
}
.locked-content .teaser-list { list-style: none; }
.locked-content .teaser-list li {
  padding: .8rem 0 .8rem 2rem; position: relative; color: var(--ink-0);
  border-bottom: 1px solid var(--line-soft); font-size: .98rem;
}
.locked-content .teaser-list li:last-child { border-bottom: 0; }
.locked-content .teaser-list li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; top: 1.35em; }
/* 未登录模糊（登录后 app.js 加 .unlocked 解锁） */
.locked-content:not(.unlocked) .teaser-list {
  filter: blur(7px); user-select: none; pointer-events: none;
}
.locked-content:not(.unlocked)::after {
  content: "🔒 邀请制内容 · INVITE ONLY";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); letter-spacing: .22em; font-size: .82rem;
  color: var(--gold-bright); text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.teaser-hint { color: var(--ink-2); font-size: .86rem; margin-bottom: 2rem; }
.final-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 3rem 0; background: var(--bg-1); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.footer-slogan { font-family: var(--font-display); font-weight: 700; color: var(--gold-bright); letter-spacing: .1em; }
.footer-brand p:last-child { color: var(--ink-2); font-size: .85rem; }
.footer-facts { margin-left: auto; text-align: right; color: var(--ink-2); font-size: .82rem; }
.icp { opacity: .7; margin-top: .3rem; }
.to-top {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em;
  color: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: .6em 1.2em; transition: all .3s;
}
.to-top:hover { color: var(--gold-bright); border-color: var(--gold-dim); }

/* ---------- 授权弹窗（契约样式类名保留） ---------- */
.auth-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.2rem; }
.auth-modal[hidden] { display: none; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(4, 5, 8, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.auth-card {
  position: relative; width: min(400px, 100%); border-radius: 18px;
  background: linear-gradient(165deg, var(--bg-3), var(--bg-1));
  border: 1px solid var(--line); padding: 2rem 1.8rem 1.8rem;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
  animation: cardIn .45s var(--ease);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.auth-close {
  position: absolute; top: .7rem; right: .9rem; font-size: 1.5rem; line-height: 1;
  color: var(--ink-2); padding: .3rem; transition: color .3s;
}
.auth-close:hover { color: var(--ink-0); }
.auth-head { text-align: center; margin-bottom: 1.3rem; }
.auth-head b { font-family: var(--font-display); letter-spacing: .3em; color: var(--gold-bright); font-size: 1.15rem; padding-left: .3em; }
.auth-head p { color: var(--ink-2); font-size: .8rem; margin-top: .35rem; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line-soft); margin-bottom: 1.4rem; }
.auth-tabs .tab {
  flex: 1; padding: .75rem 0; color: var(--ink-2); font-size: .95rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .3s;
}
.auth-tabs .tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
.auth-row { margin-bottom: 1rem; }
.auth-row input {
  width: 100%; padding: .85rem 1.05rem; border-radius: 10px;
  background: var(--bg-0); border: 1px solid var(--line-soft); color: var(--ink-0);
  font: inherit; font-size: .95rem; outline: none; transition: border-color .3s;
}
.auth-row input:focus { border-color: var(--gold-dim); }
.auth-row input::placeholder { color: var(--ink-2); }
.auth-sms-row { display: flex; gap: .7rem; }
.auth-sms-row input { flex: 1; min-width: 0; }
.sms-btn {
  flex: none; padding: 0 1.1rem; border-radius: 10px; font-size: .85rem;
  border: 1px solid var(--gold-dim); color: var(--gold-bright); transition: all .3s;
  white-space: nowrap;
}
.sms-btn:hover:not(:disabled) { background: rgba(212, 169, 78, .1); }
.sms-btn:disabled { opacity: .45; cursor: not-allowed; }
.invite-field { overflow: hidden; max-height: 80px; opacity: 1; transition: max-height .4s var(--ease), opacity .35s, margin .35s; }
.invite-field.hidden { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; }
.auth-submit {
  width: 100%; padding: .9rem; border-radius: 10px; margin-top: .4rem;
  background: linear-gradient(120deg, var(--gold-bright), var(--gold) 60%, #a97f2f);
  color: #171204; font-weight: 700; font-family: var(--font-display);
  letter-spacing: .2em; transition: all .3s;
}
.auth-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 2.4rem; transform: translate(-50%, 18px);
  z-index: 120; max-width: min(420px, 88vw); padding: .85rem 1.5rem;
  border-radius: 999px; background: rgba(16, 20, 29, .95);
  border: 1px solid var(--gold-dim); color: var(--ink-0); font-size: .9rem;
  opacity: 0; pointer-events: none; transition: all .4s var(--ease); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 响应式（移动端优先收紧桌面栅格） ---------- */
@media (max-width: 960px) {
  .story-grid, .product-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .fp-grid { grid-template-columns: 1fr; gap: 2rem; }
  .fp-speaker { order: 2; }
  .place-cards { grid-template-columns: repeat(2, 1fr); }
  /* 导航变为汉堡下拉面板 */
  .nav-burger { display: flex; }
  .nav-links {
    display: flex; flex-direction: column; gap: 0; margin-left: 0;
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 59;
    background: rgba(7, 9, 13, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft); padding: .4rem 5vw 1rem;
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: .95rem .2rem; font-size: .98rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }
}
@media (max-width: 640px) {
  .voice-wall, .feature-cards { grid-template-columns: 1fr; }
  .place-cards { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.6rem; }
  .footer-facts { margin-left: 0; text-align: left; }
  .brand-word em { display: none; }
  .answer-block { font-size: .95rem; }
  /* 移动端地图：拉高画布、据点稀疏排布、标签缩小但保留 */
  .map-wrap { aspect-ratio: 1 / 1; }
  .map-dot span {
    display: block; font-size: .58rem; letter-spacing: 0; line-height: 1.35;
    padding: .16em .5em; white-space: normal; max-width: 7em; text-align: center;
  }
  .map-dot[data-place="hq"] { left: 73% !important; top: 33% !important; }
  .map-dot[data-place="ug"] { left: 48% !important; top: 53% !important; }
  .map-dot[data-place="ke"] { left: 69% !important; top: 60% !important; }
  .map-dot[data-place="zm"] { left: 50% !important; top: 71% !important; }
  .map-dot[data-place="pg"] { left: 84% !important; top: 67% !important; }
  .map-dot[data-place="ph"] { left: 78% !important; top: 44% !important; }
  .map-dot[data-place="ke"] span, .map-dot[data-place="pg"] span { top: auto; bottom: calc(100% + 8px); }
  .map-dot[data-place="hq"] span { left: auto; right: 50%; transform: translateX(50%); }
}

.credit-section { padding: 56px 24px; }
.credit-row { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.credit-row img { display: block; height: 150px; width: auto; }
.credit-qr-box { background: #f6f1e2; padding: 10px; border-radius: 12px; }
.credit-card-box { border: 1px solid rgba(197,160,89,.55); background: var(--bg-card, #0a0a0c); padding: 6px; border-radius: 10px; }
.credit-card-box img { border-radius: 6px; }
@media (max-width: 640px) {
  .credit-section { padding: 44px 20px; }
  .credit-row { flex-direction: column; gap: 24px; }
}