/* ============================================================================
 * 璇玑 · 产品官网 v2（左文右图 + 中式山水）
 * ----------------------------------------------------------------------------
 * 布局参考用户给的参考图：
 *   顶栏（logo+名称 ｜ 导航 ｜ 右侧标语）
 *   → 左：eyebrow + 两行大标题 + 副标 + 四个图标特性 + 两个大按钮 + 底部小字
 *   → 右：罗盘，背后一圈金色光环、下方水面倒影
 *   → 底部居中「天地之道 · 藏于时间」
 *
 * ⚠️ 背景山水图是**占位**（暂用旧壁纸）。等素材到了换 assets/landscape.webp。
 *    光环和倒影都用 CSS 做 —— 这样它们能随呼吸微动，也比烧进图里灵活。
 * ========================================================================= */

/* ══════════════════ 字体 ══════════════════
 * 标题用毛笔书法体（和参考图一致）。Ma Shan Zheng，OFL 可商用。
 * 源字体 5 MB 全量，这里做了**子集化**：只保留页面用到的 500 个汉字，
 * woff2 后 176 KB。源文件和许可证在 _assets/fonts/。 */
@font-face {
  font-family: 'MaShanZheng';
  src: url('assets/fonts/calligraphy.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg:       #07070a;
  --ink:      #f0ece3;
  --ink-2:    #a9a49a;
  --ink-3:    #6d6960;
  --gold:     #c9a227;
  --gold-lit: #e8c86a;
  --gold-dim: rgba(201, 162, 39, .5);
  --line:     rgba(201, 162, 39, .2);
  --line-2:   rgba(255, 255, 255, .08);

  --calli: "MaShanZheng", "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --wrap: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h2, h3 { font-family: var(--calli); font-weight: 400; }
/* ⚠️ 2026-10-10 用户标注「文字字体换一个」。
   大标题原来跟 h2/h3 一样用手写体 MaShanZheng —— 手写体笔画连绵，
   「天干地支」「罗盘时钟」这种笔画密的词辨识度很差，也不像正经产品标题。
   换成宋体（--serif：Songti SC / STSong / SimSun / Noto Serif SC），
   更接近中式正式排版，也和小节标题的 .rings__list h3 呼应。 */
h1 { font-family: var(--serif); font-weight: 400; }
/* 数据类标题（甲乙丙丁那些行）用衬线，书法体读起来太吃力 */
.rings__list h3 { font-family: var(--serif); }
b { color: var(--gold-lit); font-weight: 500; }

.wrap { width: min(100% - 56px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 56px, 760px); }

/* ══════════════════ 顶栏 ══════════════════ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 18px 0;
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  padding: 12px 0;
  background: rgba(7, 7, 10, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-2);
}
.topbar__in { display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand b { font-family: var(--calli); font-weight: 400; font-size: 19px; letter-spacing: .1em; }
.logo {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--gold);
  background:
    radial-gradient(circle at 50% 50%, rgba(232,200,106,.9) 0 3px, transparent 3px),
    repeating-conic-gradient(from 0deg, rgba(201,162,39,.85) 0 2deg, transparent 2deg 30deg);
  box-shadow: 0 0 16px rgba(201,162,39,.4), inset 0 0 10px rgba(201,162,39,.3);
}

.nav { display: flex; gap: 34px; margin-inline: auto; font-size: 15px; color: var(--ink-2); }
.nav a { position: relative; padding-bottom: 4px; transition: color .2s ease; }
.nav a:hover { color: var(--gold-lit); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
}
.slogan { margin: 0; font-family: var(--calli); font-size: 16px; color: var(--gold-dim); letter-spacing: .12em; flex: none; }

@media (max-width: 1080px) { .slogan { display: none; } }
@media (max-width: 820px) {
  .nav { display: none; }
  .brand b { font-size: 15px; }
}

/* ══════════════════ 首屏 ══════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 0 40px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* ⚠️ 素材里太阳（最亮点）在 y=59%，而罗盘中心在 y≈42% —— 光没落在罗盘上。
     放大 1.28 倍再上移，把太阳抬到罗盘背后（放大留出的上下余量刚好够移）。 */
  transform: scale(1.28) translateY(-11%);
  transform-origin: 50% 50%;
  /* 这张素材自带暖金日落 + 太阳光晕 + 水面反光柱，色温本来就对，只做很轻的增强 */
  filter: saturate(1.10) contrast(1.05) brightness(1.02);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* ① 罗盘背后补一团**饱和**的暖金（原来是 rgba(255,210,110)，太灰像雾） */
    radial-gradient(ellipse 34% 38% at 70% 52%,
      rgba(255, 190, 70, .26) 0%,
      rgba(255, 164, 34, .13) 38%,
      transparent 72%),
    /* ② 左侧压暗给文字让路
       ⚠️ 2026-10-10 用户：「.hero__bg::after 这个背景太黑了 减一点」。
       原来 0% 处 rgba(6,6,9,.94) 基本是纯黑，整幅山水被压得只剩轮廓。
       各档下调约 20~30%：.94->.78 / .82->.64 / .38->.28 / .50->.40。
       保留左重右轻的梯度 —— 左侧是文字区，仍然要够暗才读得清。 */
    linear-gradient(90deg, rgba(6, 6, 9, .78) 0%, rgba(6, 6, 9, .64) 32%, rgba(6, 6, 9, .28) 56%, rgba(6, 6, 9, .40) 100%),
    /* ③ 底部渐隐接下一段（.42 -> .28） */
    linear-gradient(to bottom, rgba(6, 6, 9, .28) 0%, transparent 16%, transparent 70%, var(--bg) 100%);
}

/* 罗盘背后的光 —— 素材自带太阳光晕，这里只「补」不「造」。
   ⚠️ 关键：**必须是真的金色，不能是灰白**。
   实测参考图的光分三档 —— 暗光 #825A2D(暖度85) / 中光 #CC9955(暖度**119**) / 亮核 #F8E1A4(暖度84)。
   我原来用 rgba(255,246,214)（暖度只有 41），出来是「灰茶色的雾」——
   用户一眼就说是「浊气 不是金光」。所以色值全部换成高暖度的金。 */
/* ⚠️ 返工记录：前面几版都用「大半径 radial-gradient + 遮罩」去凑这条弧，
   尺寸和位置极难控制（有过「弧被压在罗盘底下只剩散光」、也有过「整片金光糊成一片」）。
   最后改成**一个带 border 的圆环元素**：尺寸写 118%（相对罗盘），位置 left/top 50% 加
   translate 居中 —— 圆心永远和罗盘同心，弧半径永远是罗盘的 1.18 倍，一眼可控。 */
.hero__halo {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 15px solid rgba(255, 198, 88, .44);
  box-shadow:
    0 0 60px 16px rgba(255, 178, 48, .42),
    inset 0 0 60px 16px rgba(255, 178, 48, .30);
  filter: blur(15px);
  /* 亮部在顶部，往下渐隐 —— 像一道扫过头顶的光弧，而不是一个整圆 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.86) 36%, rgba(0,0,0,.22) 58%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.86) 36%, rgba(0,0,0,.22) 58%, transparent 78%);
  pointer-events: none;
  animation: halo 9s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* ⚠️ 这里**不能用固定上限的 wrap** —— 用 `min(100% - 56px, 1320px)` 时：
     1536 宽屏 → 罗盘落在 72%
     2560 宽屏 → 内容被 1320 卡住居中，罗盘被挤到 63%
   而背景图里太阳的位置是固定的（约 73%），于是宽屏上「太阳在右、罗盘在左」错开了。
   改成**全宽 + 视口百分比内边距**，罗盘位置在各种宽度下稳定在 ~72%，和太阳对齐。 */
.hero__grid {
  /* ⚠️ 2026-10-10 原来这里是 `position: relative; z-index: 2;`。
     非 auto 的 z-index 会**建立 stacking context**，而 mix-blend-mode 的混合组
     只到最近的 stacking context 祖先为止 —— 于是罗盘视频只能跟 .hero__grid
     自己（透明背景）混合，screen 等于什么都没干，画面就是一个黑方块。
     去掉 z-index 即可：.hero__bg 是 z-index:0 的定位元素，.hero__grid 是
     position:relative（z-index auto，不建立 stacking context），
     按 DOM 顺序仍然画在它上面，层次不变。改完实测黑底消失。 */
  position: relative;
  width: 100%; max-width: none;
  padding-inline: clamp(28px, 6vw, 168px);
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 40px; align-items: center;
  flex: 1;
}

/* ── 左栏 ─────────────────────────────────────────────────────────────── */
/* ⚠️ 限宽要够 —— 560px 装不下 68px 的「天干地支罗盘时钟」8 个字（544 + 字距 ≈ 577），
   「钟」会被挤到第三行孤零零一个字。620px 才刚好。 */
.hero__left { max-width: 620px; }

.eyebrow {
  margin: 0 0 22px;
  font-family: var(--calli);
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: .1em; color: var(--gold-dim);
}
.hero h1 {
  margin: 0;
  font-family: var(--calli);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.2;
  letter-spacing: .04em;
}
.hero h1 span {
  display: block;
  /* ⚠️ 采样对比过：参考图标题金色在 #E9CA8E ~ #F9E7B4 之间（偏淡的奶油金），
     我原来那版最深到 #DBB84F —— 蓝通道只有 80，**过饱和了**。
     按参考图的实测值重配。 */
  background: linear-gradient(175deg,
    #fcf2ce 0%,
    #f8e8bc 28%,
    #f2dda8 58%,
    #e9cc90 84%,
    #e3c384 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 42px rgba(255, 206, 110, .30));
}
.hero h1 span:first-child { font-size: 1.28em; letter-spacing: .1em; }

.sub {
  margin: 24px 0 0;
  font-family: var(--calli);
  font-size: clamp(17px, 1.7vw, 23px);
  letter-spacing: .16em; color: var(--ink);
}

/* 四个图标特性 */
.icons {
  list-style: none; margin: 38px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.icons li { text-align: center; }
.ico {
  width: 54px; height: 54px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 40%, rgba(201,162,39,.14), rgba(201,162,39,.02) 70%);
  color: var(--gold-lit);
}
.ico svg {
  width: 32px; height: 32px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.icons b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); letter-spacing: .06em; }
.icons i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* 两个按钮 —— **直接用素材图**（用户生成的那对，双线金框 + 切角六边形 + 侧边菱形细节，
   比我手搓的 CSS 版本精细得多）。
   ⚠️ 只用那张图里的**按钮**，**不用它的 4 个图标** —— 图标上的字是 AI 写坏的
      （「改历节气」应为「农历节气」、「解读盖天」应为「精准显示」、「动态时碑」应为「动态时钟」）。
      4 个功能图标继续用内联 SVG。 */
.cta { margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 560px; }

.btn-img {
  display: block;
  transition: filter .22s ease, transform .15s ease;
  /* 图片是深色描边 + 透明底，浮在深色照片上需要一点点辉光把它托起来 */
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5));
}
.btn-img img { width: 100%; height: auto; display: block; }
.btn-img:hover { filter: drop-shadow(0 4px 26px rgba(255, 196, 80, .42)) brightness(1.1) saturate(1.05); }
.btn-img:active { transform: translateY(1px); }
.btn-img--lg { max-width: 340px; }

.hint {
  margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13px; color: var(--ink-3); letter-spacing: .05em;
}
.hint span { position: relative; }
.hint span + span::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: var(--gold); opacity: .5;
}
.hint--sub { margin-top: 6px; color: var(--ink-3); opacity: .85; }

/* ── 右栏：罗盘 ───────────────────────────────────────────────────────── */
.hero__right { position: relative; display: grid; place-items: center; }

/* ⚠️ 罗盘的环带是半透明的（rgba(0,0,0,.55)），山水会透过来把刻度文字糊掉 ——
   实测右侧刻度几乎读不出。所以罗盘底下垫一层柔和的暗底，只压住罗盘那一圈。
   这层要够实（中心 .94），因为它是「环带看起来是深色」的唯一保证。 */
.hero__right::before {
  content: ""; position: absolute;
  width: min(56svh, 620px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(4, 4, 7, .94) 0%,
    rgba(4, 4, 7, .9) 46%,
    rgba(4, 4, 7, .62) 66%,
    rgba(4, 4, 7, .16) 80%,
    transparent 90%);
  pointer-events: none;
}

.compass { position: relative; width: 100%; aspect-ratio: 1; }
/* ⚠️ 2026-10-10 用户标注：「把黑底加到和罗盘一样」。
   之前 mix-blend-mode:screen 让盘面暗部直接透出山水，罗盘等于浮在风景上。
   这里在视频**下面**垫一块和罗盘同尺寸的黑底（客户端「纯黑」背景的色值 #07070a，
   中心略提一点 #0b0b10，边缘羽化出去），screen 混合才有东西可混，
   罗盘重新变成「黑底上的金盘」，同时不切出一个生硬的方块。
   ⚠️ 这里不能用 z-index:-1 —— 试过，黑底完全看不见。原因：.compass 是
   position:relative 但 z-index:auto，**不建立 stacking context**，所以负 z-index
   的 ::before 会脱离 .compass，跑到最近的祖先 stacking context 里，
   结果排到了 .hero__bg（z-index:0）的**后面**，被山水盖住。
   正确做法是**不写 z-index**：::before 是生成内容，天然排在 <video> 之前，
   两者都是 positioned + z-index:auto，按 DOM 顺序后者在上；而 .hero__bg 在
   .hero__grid 之前，所以黑底又稳稳压在山水之上。
   也不能给 .compass 加 isolation:isolate —— 那会建立 stacking context，
   把视频的 mix-blend-mode:screen 一起关进小黑屋（就是之前黑方块的成因）。 */
.hero__right .compass::before {
  content: "";
  position: absolute; inset: 0;
  /* ⚠️ 2026-10-10 用户：「我说的是那个圆的黑底 你现在改的不透明了」。两处都错：
     ① 形状：原来写 radial-gradient(circle at 50% 50%, ...) —— **不写 size 关键字时
        默认 farthest-corner**，圆半径按**对角线**算，于是撑出方框、四个角也被涂满，
        渲染出来是一个黑方块。必须写 `closest-side` 才是内切圆（方框里半径 = 边长一半）。
        再加 border-radius:50% 双保险。
     ② 不透明度：原来中心是实色 #0b0b10，太死。改成半透明 rgba(7,7,10,.78)
        并让衰减更早开始，罗盘边缘能透出一点背景。 */
  border-radius: 50%;
  /* ⚠️ 2026-10-10 用户：「在这个基础上 我希望罗盘的黑色背景再继续外扩 并渐隐」，
     接着纠正「是外扩 不是收缩」。
     我第一版把盒子从 88vh 放大到 104vh，却同时把渐变摊平（.96 从 76% 挪到 52%），
     结果**实心黑区反而缩小了** —— 盒子大了、黑的反而少了，看起来是收缩。
     正确做法：盒子保持大（104vh），把实心核一起**往外推**。
     算一下半径（104vh=1498px，半径 749px；罗盘 72svh=1037px，半径 519px）：
       旧版 88vh 半径 633px，.96 实心到 76% = 481px
       新版 .96 实心到 65% = 487px，.86 到 74% = 554px，一路淡到 100%（749px）
     即实心核略大于旧版，且往外多出一整圈渐隐带。
     注意覆盖关系：inset:0 给的 top/left 被后面的 top/left 覆盖；
     right/bottom 因为同时给了 width/height 而失效（left+width 已定位）。
     ⚠️ 104vh 已比右栏宽，外圈靠 alpha 收到 0 避免糊到左栏。 */
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(7, 7, 10, .97) 0%,
    rgba(7, 7, 10, .96) 65%,
    rgba(7, 7, 10, .86) 74%,
    rgba(7, 7, 10, .62) 82%,
    rgba(7, 7, 10, .34) 89%,
    rgba(7, 7, 10, .12) 95%,
    rgba(7, 7, 10, 0) 100%);
  width: 104vh;
  height: 104vh;
  top: -12.2vh;
  left: -8.3vw;
}

/* 罗盘下方的金色水面涟漪 —— 参考图里是**多圈同心扁椭圆**（水波扩散，越外间距越大），
   中间还有一道竖直反光柱。
   ⚠️ 这里返工三次，记清楚：
     第一版 156% 宽的一圈硬光环 → 占满右侧、盖到图标区；
     第二版收成一层弥散暖光 → 成了「黄色的气」，用户直接否掉。
     第三版 7 圈细亮椭圆（alphas .26~.88、blur 1.6px）→ **用户 2026-10-10 标注
     「水波不好看重新想想」**：实测就是底部几道又亮又硬的白色弧线，
     最内圈 alpha .88 几乎是纯白，而且 156% 宽被视口左右切掉，像两条断头线。
   ⚠️ 第四版（当前）的三条改动方向：
     ① 圈数 7 → 4，去掉最内那圈 .88 的「白线」，最亮压到 .34；
     ② 模糊 1.6px → 3.2px，让它变成**光晕**而不是**线**；
     ③ 宽度 156% → 128%、更扁（5.8:1 → 7:1），不再被视口切边。 */
.hero__ground {
  position: absolute; left: 50%; bottom: 0;
  width: 128%; aspect-ratio: 7 / 1;
  transform: translate(-50%, 50%);      /* 以罗盘底边为中线，像铺在水面上 */
  pointer-events: none;
  background:
    /* ④ 最外圈 */
    radial-gradient(ellipse at 50% 50%, transparent 0 62.0%, rgba(255,206,102,.13) 63.0%, transparent 65.0%),
    /* ③ */
    radial-gradient(ellipse at 50% 50%, transparent 0 48.0%, rgba(255,214,120,.19) 49.2%, transparent 51.6%),
    /* ② */
    radial-gradient(ellipse at 50% 50%, transparent 0 35.0%, rgba(255,224,150,.26) 36.4%, transparent 39.2%),
    /* ① 最内圈，最亮（原来 .88 太硬，压到 .34） */
    radial-gradient(ellipse at 50% 50%, transparent 0 23.0%, rgba(255,234,178,.34) 24.6%, transparent 27.8%),
    /* 池底暖光 */
    radial-gradient(ellipse at 50% 50%, rgba(255,196,86,.16) 0%, rgba(214,140,36,.05) 42%, transparent 70%);
  filter: blur(3.2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, #000 46%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, #000 46%, #000 100%);
}

/* 竖直反光柱 —— 素材水面**已有太阳反光**，这里只做一点点加强，别叠成两根 */
.hero__beam {
  position: absolute; left: 50%; bottom: 0;
  width: 96px; height: 34%;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 246, 214, .22) 0%,
    rgba(240, 213, 133, .10) 30%,
    transparent 100%);
  filter: blur(18px);
  opacity: .8;
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 22%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 46% 60% at 50% 22%, #000 0%, transparent 78%);
}
.compass .cp-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* ⚠️ 实测对比：参考图右半区「亮度 > 180」的像素有 **29,670** 个，
     我这边只有 1,620（差 18 倍），而且最亮处 229 vs 参考的纯白 255。
     参考图里**罗盘本体是发光的**（环和刻度自发光），产品原图偏暗，
     所以光提亮背景不够，罗盘自己也得提。
     顺序有意义：先调色 → 再提亮 → 最后叠辉光。 */
  /* ⚠️ 踩过两次坑，一起记：
     ① 追「亮像素数」把 brightness 推到 1.62 → 罗盘糊成一片奶白，指标好看画面更差。
        参考图的罗盘是「深色环 + 亮金字」的**高对比**，要提的是 contrast 不是 brightness。
     ② 给罗盘叠三层**亮色 drop-shadow 辉光** → 环带是半透明的，辉光**从环带里透出来**
        把盘面糊亮。辉光只能放在罗盘**外面**（由 .hero__halo 承担），不能透进来。
     所以这里只留一个深色投影，不叠任何亮色辉光。 */
  /* ⚠️ 2026-10-10 用户截图圈出罗盘（几乎看不见了）。根因是 screen 混合：
     它是**加法**，盘面暗部变透明露出背景亮云，金线又跟亮云互相冲淡。
     救不回来只能让视频自己更亮更硬：contrast 1.30 → 1.52、brightness 1.02 → 1.30。
     这不是把暗部找回来（那要靠真 alpha 通道），而是把金线推到明显高于背景。 */
  filter:
    saturate(1.20) sepia(.08) contrast(1.52) brightness(1.30)
    drop-shadow(0 18px 44px rgba(0, 0, 0, .66));
}
/* ⚠️ 录屏素材 flip.webm 的背景是**不透明近黑**，而原来那张 compass-lit.webp 是 RGBA
   （31.4% 全透明）。screen 混合 = 黑色不改变底色、金色照常叠加，正好把黑底去掉。
   取舍：screen 也会让盘面的深色区域变透（露出后面的山水）。不透就得抠像，
   但录屏里盘面本身就是近黑，抠不干净 —— 两害相权取其轻。
   滤镜沿用上面那套（CSS filter 对 video 同样生效）。 */
.compass video.cp-media { mix-blend-mode: screen; }
/* ⚠️ 原来 `min(56svh, 620px)` 在 1440 高的屏上被 620 卡死，罗盘只占画面 43% ——
   用户说「小一圈」。按视口高度给足（60%），上限放宽到 900px。
   ⚠️ 2026-10-10 用户又说「太小了 起码应该站到右侧页面的2/3」：
   再放到 78svh（1440 高 = 1123px），上限 1200px。
   注意录屏素材本身四周留了一圈余量（裁的是 1280 见方、罗盘直径约 1200），
   所以视觉尺寸还要再打个约 94% 的折扣。 */
.hero__right .compass { width: min(72svh, 1200px); }

.hero__foot {
  position: relative; z-index: 2;
  margin: 30px 0 0; text-align: center;
  font-family: var(--calli);
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: .5em; text-indent: .5em;
  color: var(--gold-dim);
}
.hero__foot::before, .hero__foot::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: clamp(40px, 8vw, 120px); height: 1px; margin: 0 20px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__left { max-width: none; }
  .hero__halo { width: 168%; }
  .hero__right .compass { width: min(44svh, 420px); }
  .cta { max-width: none; }
}
@media (max-width: 560px) {
  .icons { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cta { grid-template-columns: 1fr; }
}

/* ══════════════════ 八层环 ══════════════════
   ⚠️ 2026-10-11 用户：「视差的地方 左侧放一个静态的图 你自己在软件里截图
   然后右侧做成方块的刚好8环 两行4列 移动到哪块 左侧对应的高亮相应的圈」
   改动：① 左栏的翻转视频换成客户端截图出来的静态罗盘图（.cp-media--still）
        ② 右栏 8 个 <li> 从纵向长条改成 **2 行 4 列方块**
        ③ 交互从「滚动视差」改成「悬停」——原来的 IntersectionObserver 已删
        ④ .rings__stick 不再是 sticky（视差行为按用户要求移除） */
.rings { padding: clamp(70px, 10vh, 130px) 0; }
.rings__in {
  display: grid;
  /* 左图略窄、右格略宽：方块要放得下「甲乙丙丁…」这种长串 */
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.rings__stick { position: relative; }
.rings__stick .compass { width: min(56vmin, 560px); margin-inline: auto; }

/* 静态罗盘图：素材是 --bg=black 的客户端截图，跟视频一样靠 screen 混合把黑底去掉 */
.compass img.cp-media--still { mix-blend-mode: screen; }

.hl {
  position: absolute; left: 50%; top: 50%;
  width: 38.9%; aspect-ratio: 1;
  margin-left: -19.45%; margin-top: -19.45%;
  border-radius: 50%;
  border: 1.5px solid var(--gold-lit);
  box-shadow: 0 0 0 1px rgba(201,162,39,.28), 0 0 30px rgba(201,162,39,.45),
              inset 0 0 30px rgba(201,162,39,.18);
  opacity: 0; pointer-events: none;
  transition: width .55s cubic-bezier(.3,.8,.3,1), margin .55s cubic-bezier(.3,.8,.3,1), opacity .35s ease;
}
.hl.is-on { opacity: 1; }

/* 2 行 4 列方块 */
.rings__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.rings__list li {
  padding: clamp(12px, 1.5vh, 19px) clamp(10px, 1vw, 15px);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: rgba(12, 11, 9, .42);
  opacity: .46;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}
.rings__list li.is-on {
  opacity: 1;
  border-color: rgba(201, 162, 39, .62);
  background: rgba(201, 162, 39, .09);
}
.rings__list li:last-child { border-bottom: 1px solid var(--line-2); }
.idx { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; color: var(--gold); white-space: nowrap; }
.rings__list h3 {
  margin: 0; font-size: clamp(12px, 1.02vw, 14.5px); line-height: 1.75;
  letter-spacing: .04em; color: var(--ink); word-break: break-all;
}
/* 方块里放不下整段说明（4 列后每格仅约 150px），挪到 title 提示；移动端会恢复显示 */
.rings__list p { display: none; }

@media (max-width: 900px) {
  .rings__in { grid-template-columns: 1fr; }
  /* ⚠️ 窄屏必须收成 2 列：4 列在 400px 手机上每格不到 90px，「甲乙丙丁…」会碎成单字 */
  .rings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄屏恢复说明文字：这里每格够宽了，方块布局下被 display:none 掉的那段补回来 */
  .rings__list p { display: block; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.75; }
  .rings__stick { position: static; }
  .rings__stick .compass { width: min(58vmin, 340px); }
}

/* ══════════════════ 下载 / 获取授权码 ══════════════════ */
.get { padding: clamp(70px, 10vh, 130px) 0; background: #0b0b0f; border-block: 1px solid var(--line-2); }
.get__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); }
.get__col--line { border-left: 1px solid var(--line-2); padding-left: clamp(36px, 5vw, 72px); }
.get__col h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 34px); }
.get__desc { margin: 0 0 30px; color: var(--ink-2); font-size: 15.5px; }
.get__meta { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); }
.get__note { margin: 30px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.95; }
.qr img { width: 240px; height: 240px; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.qr__hint { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 820px) {
  .get__in { grid-template-columns: 1fr; }
  .get__col--line { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 40px; }
}

/* ══════════════════ 页脚 ══════════════════ */
.foot { padding: 60px 0 46px; }
.foot__line {
  margin: 0 0 44px; text-align: center;
  font-family: var(--calli); font-size: 19px;
  letter-spacing: .5em; text-indent: .5em; color: var(--gold-dim);
}
.foot__in { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.foot__brand { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-3); }
.foot__brand b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); letter-spacing: .18em; }
.foot p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.9; }
.copy { opacity: .6; }

/* ══════════════════ 滚动淡入 ══════════════════ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__halo { animation: none; }
  .rings__list li { opacity: 1; transition: none; }
}