/* 跃港互联 5.0 —— 首页独有组件。
   这些组件在 Hypertree 原版 CSS 中不存在；结构取自「跃港互联官网预览1.0.html」，
   配色改用 Hypertree 深色基底（--bg / --bg-card / --line / --accent=湾流青）。
   与 yuegang.css 配合使用：yuegang.css 负责基底与换色，本文件负责跃港新增组件。 */

/* 供 rgba() 使用的主题色分量。yuegang.css 是生成物（由 tools/make-theme.mjs 从 hypertree.css
   换色而来），所以这个变量放在这里定义，重新生成主题时不会丢。
   若以后换主题色，改这里的三个数字与 yuegang.css 的 --accent 保持一致即可。 */
:root{
  --accent-rgb:23,184,184;   /* = #17B8B8 湾流青 */
}

/* ---------- 浅色分区（统一白色、深灰与湾流青） ----------
   原来是 section--white(#0C0C0C) 和 section--tint(#0F0F0F) **硬交替**：
   首页 02/03/04/05 四段就是三条生硬的色跳变线，视觉上被切成一块一块，
   完全没有 hypertree 那种一回事读完的柔光连贯感。
   （hypertree 全站 CSS 里 section--alt 只出现 1 次——它根本不靠色块交替分区。）
   现在全部统一到同一个底色，区块之间靠**跨区块连续的柔光**与留白分隔：
   光的落点铺在一个跨越整页的坐标系上（用超大尺寸的 radial-gradient + 低透明度），
   相邻区块自然过渡，不再有可见的接缝。 */
.section--white,
.section--tint,
.section--deep{background:var(--bg)}


/* ---------- 首页整体环境光：柔光（已去掉网格底） ----------
   路线选择（重要，别改回浮层）：一开始尝试挂 body::before / main::before 做页面级浮层，
   实测失败 —— 各 section 有**不透明背景** rgb(12,12,12)：
     · 负 z-index 会被 section 背景盖住（实测开关两张截图 md5 完全相同）；
     · 正 z-index 又会被抬到卡片文字之上（卡片是 position:relative，z-index:auto）。
   所以做法是**把光做进每个 section 内部**，且各区块的光锚点连成一条路径。

   改动记录：原来每个 section 还叠了一层 34px 的白色方格网（A4「网格 + 光」）。
   实测那层网格把每一屏都切成一个个小格子，**反而强化了"一块一块"的割裂感**，
   且和夜景背景图叠在一起很脏。现已整层去掉，只保留柔光；
   相邻区块之间靠光锚点接续 + 缓冲带过渡，另见下方 section--night 的夜景背景。 */
body.is-home .section,
body.is-home .cta-band{position:relative;overflow:hidden}
body.is-home .section::before,
body.is-home .cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(1040px 700px at 84% -6%,rgba(var(--accent-rgb),.15),transparent 66%);
}
body.is-home .section > .wrap,
body.is-home .cta-band > .wrap{position:relative;z-index:2}
/* 光锚点轮换：让"光"在页面里换位置，避免每屏都是同一处亮 */
body.is-home .section:nth-of-type(3)::before{
  background-image:radial-gradient(980px 660px at 8% -6%,rgba(var(--accent-rgb),.13),transparent 64%);
}
body.is-home .section:nth-of-type(4)::before{
  background-image:radial-gradient(1000px 640px at 88% 104%,rgba(var(--accent-rgb),.12),transparent 64%);
}
body.is-home .section:nth-of-type(5)::before{
  background-image:radial-gradient(980px 660px at 14% 108%,rgba(var(--accent-rgb),.12),transparent 64%);
}
body.is-home .section:nth-of-type(6)::before{
  background-image:radial-gradient(1060px 700px at 50% -8%,rgba(var(--accent-rgb),.16),transparent 66%);
}
body.is-home .cta-band::before{
  background-image:radial-gradient(980px 600px at 50% 116%,rgba(var(--accent-rgb),.15),transparent 66%);
}

/* ---------- 区块之间的柔光缓冲带（需求 5 的关键） ----------
   相邻 section 的边缘叠一层极淡的纵向渐变，从/向页面底色过渡，
   让上一段的光淡出、下一段的光淡入，交界处看不出接缝。

   注意（踩过的坑）：
   1) 缓冲带用 ::after，而"夜景底"如果也用 ::after 就会撞车 —— 两者是同一个伪元素，
      且 body.is-home .section::after 优先级更高，会把 .night::after 的整层夜景图盖掉。
      所以夜景底改用真实子元素 .night-bg。
   2) 原写法用两条同优先级规则分别设上/下缓冲，后者覆盖前者，
      结果是**每个 section 只剩顶部缓冲、底部缓冲被吃掉**；现合并为一条规则一次写全。 */
body.is-home .section::after,
body.is-home .cta-band::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:17%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(20,157,157,.025) 72%,rgba(255,255,255,.9));
}

/* ---------- 日间场景背景（浅色版不使用夜景蒙版） ----------
   你说「太多也不好，间隔着放背景图并延续开灯效果」——正是这个思路：
   不是每屏都塞图，而是**隔一屏放一张**，让页面有呼吸的节奏：

     首屏（开灯）→ 02 纯底色 → 03 夜景（开灯）→ 04 纯底色
                 → 05 夜景（开灯）→ 06 纯底色 → 07 夜景（开灯）

   三层结构（与首屏同构，所以"开灯"手感统一）：
     .night-bg     暗化版背景（关灯态）                 z-index:0
     .night-light  提亮版背景 + mask 光斑（开灯）        z-index:1
     ::after       底部缓冲带，让照片向下溶进下一页底    z-index:1
     .wrap         正文，z-index:2，永远在最上
   mask 中心由 JS 写入 --mx/--my（与首屏共用同一段逻辑，见 [data-light]）。
   注意：radial-gradient 的光斑半径按视口算，区块比首屏矮，所以半径略小一档。

   命名用容器无关的 .night（可挂在 .section 或 .cta-band 上），
   变体 .night--macau / .night--harbour 只换图，不改结构。 */
.section.night,
.cta-band.night{position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
/* 浅色版不启用夜景区块层，所有内容保持白底。 */
body.is-home :is(.section,.cta-band).night::before{display:none}
.section.night > .wrap,
.cta-band.night > .wrap{position:relative;z-index:2}

.night-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(245,249,249,.86) 100%),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(245,249,249,.86));
  background-size:cover;
  background-position:center,center 40%;
  background-repeat:no-repeat;
}
.night-light{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.06) 0%,rgba(12,12,12,.10) 55%,rgba(12,12,12,.42) 100%),
    url("/assets/img/night-city.jpg");
  background-size:cover,cover;
  background-position:center,center 40%;
  background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(circle clamp(210px,23vw,380px) at var(--mx,50%) var(--my,44%),#000 0%,rgba(0,0,0,.82) 40%,rgba(0,0,0,.36) 70%,transparent 100%);
  mask-image:radial-gradient(circle clamp(210px,23vw,380px) at var(--mx,50%) var(--my,44%),#000 0%,rgba(0,0,0,.82) 40%,rgba(0,0,0,.36) 70%,transparent 100%);
  transition:opacity .6s var(--ease);
}
/* 05 适合哪些商家 → 澳门夜景（新葡京 + MGM） */
.night--macau .night-bg{
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.92) 0%,rgba(12,12,12,.58) 20%,rgba(12,12,12,.50) 55%,rgba(12,12,12,.72) 84%,rgba(12,12,12,.96) 100%),
    url("/assets/img/night-macau.jpg");
  background-position:center,center 44%;
}
.night--macau .night-light{
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.06) 0%,rgba(12,12,12,.10) 55%,rgba(12,12,12,.42) 100%),
    url("/assets/img/night-macau.jpg");
  background-position:center,center 44%;
}
/* 07 收尾 CTA → 维港，与首屏首尾呼应 */
.night--harbour .night-bg{
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.92) 0%,rgba(12,12,12,.64) 20%,rgba(12,12,12,.58) 58%,rgba(12,12,12,.88) 88%,rgba(12,12,12,.98) 100%),
    url("/assets/img/night-harbour.jpg");
  background-position:center,center 48%;
}
.night--harbour .night-light{
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.04) 0%,rgba(12,12,12,.08) 55%,rgba(12,12,12,.38) 100%),
    url("/assets/img/night-harbour.jpg");
  background-position:center,center 48%;
}
/* 文字压在照片上要更"实"：夜景区块的标题加投影，左边再压一层横向暗幕，
   保证左侧文字栏（标题/副标题都在左边）在照片上依然清晰。

   重要：暗幕必须**两层都加**（.night-bg 关灯层 + .night-light 开灯层）。
   只加在关灯层的话，"开灯"光圈扫到文字上时那一块没有暗幕，文字会瞬间变糊。
   两层各自持有一份，所以不管光斑移到哪，文字栏始终有底。 */
.night-bg::after,
.night-light::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,12,12,.8) 0%,rgba(12,12,12,.52) 34%,rgba(12,12,12,.14) 62%,transparent 82%);
}
.night .section-head__title,
.night .section-head__sub,
.night .section-head__eyebrow{text-shadow:0 2px 18px rgba(0,0,0,.85)}
@media(hover:none){
  .night-light{
    -webkit-mask-image:radial-gradient(circle 78vw at 50% 42%,#000 0%,rgba(0,0,0,.6) 48%,transparent 94%);
    mask-image:radial-gradient(circle 78vw at 50% 42%,#000 0%,rgba(0,0,0,.6) 48%,transparent 94%);
  }
}
@media(prefers-reduced-motion:reduce){
  .night-light{
    -webkit-mask-image:radial-gradient(circle 58vw at 50% 42%,#000 0%,rgba(0,0,0,.58) 50%,transparent 96%);
    mask-image:radial-gradient(circle 58vw at 50% 42%,#000 0%,rgba(0,0,0,.58) 50%,transparent 96%);
    transition:none;
  }
}

/* ---------- 导航吸顶加强（需求 3） ----------
   原来 .nav.scrolled 只是 rgba(12,12,12,.72) + blur(14px)，在夜景图上滚过时辨识度不够。
   这里加强：不透明度提到 .9、模糊加大并加饱和度、底部换成更清晰的边线和投影，
   让导航始终"压"在内容之上、和背景明确分层。注意本文件在 yuegang.css 之后加载，可覆盖之。 */
.nav.scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px -18px rgba(20,72,72,.35);
}

/* ---------- 卡片文字发光（需求 2） ----------
   范围限定在首页卡片内，避免影响内页正文可读性。用同色系柔光而非泛白，
   保持"文字在发光"而非"文字发糊"。 */
body.is-home .data-card__label,
body.is-home .issue-card__title,
body.is-home .industry-card__name,
body.is-home .approach__title{
  text-shadow:none;
}
body.is-home .data-card:hover .data-card__label,
body.is-home .issue-card:hover .issue-card__title,
body.is-home .industry-card:hover .industry-card__name{
  text-shadow:0 0 20px rgba(var(--accent-rgb),.5);
}

/* ---------- 走马灯：序号依次点亮（需求 5-b / 需求 2） ----------
   思路是把"编号"当成仪表盘上的指示灯：同一序列里的编号依次亮起，
   提示"这是一条有序的流程/一组并列的项"，让静态页面有轻微的运行感。
   作用范围：04 四步卡、03 七步漏斗、02 数据卡序号、05 行业卡序号、06 时间线。
   周期与延迟按序列长度算好，保证一圈内每个都轮到、且不会两个同时最亮。
   尊重 prefers-reduced-motion：该设置下不做周期动画，仅保留静态高亮。 */
/* 关键帧的亮区必须**收在一步之内**（亮完即灭，与下一项起步对齐），
   否则前一项还没灭、后一项就亮，视觉上就是"两个一起亮"。
   ⚠️ 周期公式是 **项数 × 1.4s**，关键帧里的百分比是"步长的占比"，
   所以步长恒为 1.4s，5 项的周期就是 7s（4 项时是 5.6s）。
   2026-10-01 05 从 4 项变 5 项时，周期与第 5 个 delay 必须一起加，
   否则第 5 项落到默认 0s、和 01 同时亮。 */
@keyframes stepMarquee{
  0%,17%{color:var(--accent);text-shadow:0 0 12px rgba(var(--accent-rgb),.5);opacity:1}
  20%,100%{color:var(--ink-mute);text-shadow:none;opacity:.7}
}

/* 04 四步：2026-10-01 起从 M4「警告断点外置」换成 M3「大数字卡 · 四张并排」。
   M3 的数字是渐变大字（background-clip:text + -webkit-text-fill-color:transparent），
   color / text-shadow 都被裁切掉不参与渲染，原先套在 .m4-card__no 上的
   stepMarquee「序号依次点亮」在这套结构上没有承载点，整组规则随之退役。
   @keyframes stepMarquee 本体保留 —— 05 行业卡（.industry-card__no）仍在用同一套。 */

/* 05 行业卡：4 个，与四步同一周期，读起来像同一台仪表。
   注意：这条规则确实生效的前提是 yuegang-light.css 里那句
   `.industry-card__no{animation:none!important}` 必须去掉 —— 见该文件注释。 */
/* 05 行业卡：2026-10-01 从 4 个增至 5 个，周期必须同步 5.6s → 7s（5×1.4s），
   并补上第 5 个 delay —— 只加卡片不加 delay 的话，第 5 项会落到默认 0s、与 01 同时亮。
   步长恒为 1.4s，与上方关键帧的 20% 分界严格对应。 */
body.is-home .industry-card .industry-card__no{display:inline-block;animation:stepMarquee 7s var(--ease) infinite}
body.is-home .industry-card:nth-child(2) .industry-card__no{animation-delay:1.4s}
body.is-home .industry-card:nth-child(3) .industry-card__no{animation-delay:2.8s}
body.is-home .industry-card:nth-child(4) .industry-card__no{animation-delay:4.2s}
body.is-home .industry-card:nth-child(5) .industry-card__no{animation-delay:5.6s}

/* 06 时间线：5 个步骤标记。标记本身是带圆框的圆形数字（有 border 与底色），
   直接套 stepMarquee 会把整颗标记的 opacity 压到 .5、看起来脏，所以单独写一版：
   只让文字发光、外框跟着变色，标记本体始终不透明。

   周期必须与**实际项数**匹配：这里一共 5 项，所以是 7.5s / 每项 1.5s。
   早先写成 5.6s（按 4 项算）且只补了 4 个 delay，第 5 项落到默认 0s ——
   于是它和 01 同时亮。（07 之外任何"同序列却撞在一起"的点亮问题，
   基本都是这一个原因：周期按旧项数算死，新增项没跟着补延迟。）
   关键帧把点亮时长收到 1.2s（16%）、1.5s 处完全熄灭（20%）——
   必须 ≤ 单项间隔，否则前一项还没灭、后一项就亮了，同样会看到"两个一起亮"。 */
@keyframes markPulse{
  0%,16%{color:var(--accent);border-color:rgba(var(--accent-rgb),.85);box-shadow:0 0 14px rgba(var(--accent-rgb),.5)}
  20%,100%{color:var(--ink-mute);border-color:var(--line);box-shadow:none}
}
body.is-home .timeline__item .timeline__marker{animation:markPulse 7.5s var(--ease) infinite}
body.is-home .timeline__item:nth-child(1) .timeline__marker{animation-delay:0s}
body.is-home .timeline__item:nth-child(2) .timeline__marker{animation-delay:1.5s}
body.is-home .timeline__item:nth-child(3) .timeline__marker{animation-delay:3s}
body.is-home .timeline__item:nth-child(4) .timeline__marker{animation-delay:4.5s}
body.is-home .timeline__item:nth-child(5) .timeline__marker{animation-delay:6s}

@media(prefers-reduced-motion:reduce){
  body.is-home .industry-card .industry-card__no{animation:none;color:var(--accent);opacity:.85;text-shadow:none}
  body.is-home .timeline__item .timeline__marker{animation:none;color:var(--accent);border-color:rgba(var(--accent-rgb),.6);box-shadow:none}
}

/* ---------- 区块标题：编号 + 眉标 + 标题（+ 副标题） ---------- */
/* 标题区不做宽度限制。
   原来是 max-width:62ch —— 62ch 在 display 字体下约等于 600~620px，
   而 .section-head 用的是 170px + 1fr 的两列栅格，1fr 实际有 900px 以上，
   于是标题明明有位置却仍在 600px 处被硬折行，观感上就是"莫名其妙换行"。
   这里放开：宽度交给栅格决定，换行由文案里的 <br> 显式控制。 */
.section-head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-head__meta{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.section-head__index{font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.section-head__eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.section-head__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
/* 标题里的重点词：品牌蓝，与首屏「港澳客」、页脚强调同一套语义。 */
.section-head__title em{font-style:normal;color:var(--brand)}
.section-head__sub{margin-top:.9rem;font-size:clamp(.98rem,1.2vw,1.08rem);color:var(--ink-dim);line-height:1.6}

/* ---------- 首屏补充 ---------- */
/* 首屏满屏（挑选板 H1）：原来是只给 padding、没有 min-height，高度全靠内容撑，
   所以内容少就矮、一屏能同时看到首页和下一屏的开头。100svh 是移动端更准的单位。 */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.hero__inner{width:100%;z-index:3}
/* 首屏背景：港澳夜景图 + 深色遮罩。
   遮罩整体调暗了一档（需求：开灯对比要更明显）——"关灯"态越暗，"开灯"那一块才越亮。 */
.hero--with-bg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.58) 0%,rgba(12,12,12,.76) 52%,rgba(12,12,12,.99) 100%),
    radial-gradient(78% 62% at 22% 44%,rgba(12,12,12,.86),transparent 72%),
    radial-gradient(70% 60% at 88% 20%,rgba(10,10,10,.7),transparent 70%),
    url("/assets/img/night-harbour.jpg");
  background-size:cover,cover,cover,cover;
  background-position:center,center,center,center 42%;
  background-repeat:no-repeat;
}
/* 底部渐隐（nth 4）：首屏与下一屏之间原来是硬切一条线，看着像"没做完"。
   这里在 hero 最底部叠一层向下渐隐到页面底色，让图片自然溶进下面一屏。
   注意 z-index:1（在 ::after 背景之上、.hero__inner 文字 z-index:2 之下）。 */
.hero--with-bg::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(12,12,12,.55) 46%,var(--bg) 100%);
}

/* ---------- 首屏「开灯」效果（需求 1） ----------
   想要的感觉：背景是繁华港澳夜景，但整体是暗的；鼠标所在处亮起来，像开灯一样。
   既不遮挡文字，又给人"打开港澳市场"的意味。

   做法：同一张夜景图铺两层——
     · .hero--with-bg::after  = 暗化版（重遮罩），作为默认看到的"关灯"状态；
     · .hero__light            = 提亮版（很轻的遮罩），用 mask 只露出鼠标周围一块。
   光斑用 --mx/--my（JS 写入，默认 50%/38%）定位，mask 的径向渐变边缘做了
   两段过渡（实心 → 半透明 → 透明），所以是"渐亮的光圈"而不是硬边圆洞。
   这层在 ::after 之上、::before 底部渐隐和文字之下，因此文字永远清晰可读。 */
.hero__light{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* 提亮版：遮罩比"关灯"态轻很多，并叠一层湾流青柔光，
     让"灯照到"的地方不只是变亮，还带一点暖青色的商铺灯感。 */
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.04) 0%,rgba(12,12,12,.10) 58%,rgba(12,12,12,.44) 100%),
    radial-gradient(46% 46% at 50% 44%,rgba(var(--accent-rgb),.10),transparent 76%),
    url("/assets/img/night-harbour.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center 42%;
  background-repeat:no-repeat;
  /* 光斑：中心完全透出 → 边缘柔和消失。半径随视口宽度自适应。
     亮圈调大了（原来 clamp 180–320px），让"开灯"的感觉更铺得开。 */
  -webkit-mask-image:radial-gradient(circle clamp(230px,26vw,420px) at var(--mx,50%) var(--my,42%),#000 0%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.4) 68%,rgba(0,0,0,.12) 86%,transparent 100%);
  mask-image:radial-gradient(circle clamp(230px,26vw,420px) at var(--mx,50%) var(--my,42%),#000 0%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.4) 68%,rgba(0,0,0,.12) 86%,transparent 100%);
  opacity:1;
  /* 不用 transition：mask 位置要跟手感实时响应，加过渡会拖尾显得迟钝。
     这里只对"进入/离开首屏"时的整体淡入淡出做过渡。 */
  transition:opacity .6s var(--ease);
}
/* 未启用 JS 或指针离开首屏时，光斑回到常驻的默认位置（中心偏上），仍有"开灯"感 */
.hero__light.is-off{opacity:0}
/* 触屏设备没有 hover 概念，改成一个常驻的柔光，避免"永远不亮" */
@media(hover:none){
  .hero__light{
    -webkit-mask-image:radial-gradient(circle 74vw at 50% 34%,#000 0%,rgba(0,0,0,.72) 46%,transparent 94%);
    mask-image:radial-gradient(circle 74vw at 50% 34%,#000 0%,rgba(0,0,0,.72) 46%,transparent 94%);
  }
}
/* 尊重减弱动效偏好：不做跟随，直接给一个静态柔光 */
@media(prefers-reduced-motion:reduce){
  .hero__light{
    -webkit-mask-image:radial-gradient(circle 56vw at 50% 34%,#000 0%,rgba(0,0,0,.7) 50%,transparent 98%);
    mask-image:radial-gradient(circle 56vw at 50% 34%,#000 0%,rgba(0,0,0,.7) 50%,transparent 98%);
    transition:none;
  }
}
.hero__eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hero__eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.hero__support{margin-top:1.25rem;font-size:1.02rem;font-weight:600;color:var(--ink)}
.hero__actions{margin-top:2.2rem;display:flex;gap:.85rem;flex-wrap:wrap}
.hero__reassurances{list-style:none;margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.7rem 1.7rem;border-top:1px solid var(--line);padding-top:1.5rem}
.hero__reassurances li{position:relative;padding-left:1.35rem;font-size:.85rem;color:var(--ink-mute)}
.hero__reassurances li::before{content:"";position:absolute;left:0;top:.44em;width:.62rem;height:.62rem;border-radius:50%;border:1px solid var(--accent)}
.btn__arrow{margin-left:.5em;transition:transform var(--transition)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ---------- 市场证据：3 张数据卡 ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
@media(max-width:820px){.stats-grid{grid-template-columns:1fr}}
/* 动效 C7「底光上涌」：hover 时青光从卡片底部像水一样升上来，托住内容（挑选板 C7） */
.data-card{position:relative;overflow:hidden;isolation:isolate;background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:clamp(1.4rem,2.5vw,2rem);transition:border-color var(--transition),transform .45s var(--ease)}
.data-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;z-index:1;opacity:0;background:linear-gradient(0deg,rgba(var(--accent-rgb),.28),transparent 78%);transition:opacity .5s var(--ease);pointer-events:none}
.data-card>*{position:relative;z-index:2}
.data-card:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-6px)}
.data-card:hover::before{opacity:1}
.data-card__rule{width:34px;height:2px;background:var(--accent);border-radius:2px;margin-bottom:1.2rem}
.data-card__scope{font-size:.76rem;color:var(--ink-mute);line-height:1.5;min-height:2.3em}
.data-card__value{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1;letter-spacing:-.03em;color:var(--accent);margin:.55rem 0}
/* 需求 5-a：数字加发光（静态柔光 + hover 增强），别用动图，避免晃 */
.data-card__value{text-shadow:0 0 18px rgba(var(--accent-rgb),.42),0 0 44px rgba(var(--accent-rgb),.18)}
.data-card:hover .data-card__value{text-shadow:0 0 22px rgba(var(--accent-rgb),.72),0 0 60px rgba(var(--accent-rgb),.34)}
.data-card__label{font-size:.95rem;font-weight:600;color:var(--ink)}
.data-card__delta-row{margin-top:.5rem}
.data-card__delta{display:inline-block;font-size:.78rem;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:100px;padding:3px 11px}
.data-card__desc{margin-top:1rem;font-size:.88rem;color:var(--ink-dim);line-height:1.6}
.data-card__footnote{margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-mute);line-height:1.55}
.data-card__source{margin-top:.5rem;font-size:.72rem;color:var(--ink-mute);opacity:.7}

/* ---------- 问题认知：7 步漏斗 ---------- */
.funnel{margin-top:.4rem;overflow-x:auto;padding-bottom:.6rem}
.funnel__list{list-style:none;display:flex;gap:.55rem;min-width:min-content}
/* 动效 C9「鼠标跟随聚光」：光斑跟着指针走（挑选板 C9）。
   --mx/--my 由 js/yuegang.js 写入；JS 未启用时回落到 50%/50% 的居中柔光。 */
.funnel__item{position:relative;overflow:hidden;isolation:isolate;flex:1 0 auto;min-width:94px;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.1rem 1.1rem;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;transition:border-color var(--transition)}
.funnel__item::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;z-index:1;background:radial-gradient(circle,rgba(var(--accent-rgb),.3),transparent 62%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.funnel__item>*{position:relative;z-index:2}
.funnel__item:hover{border-color:rgba(var(--accent-rgb),.5)}
.funnel__item:hover::before{opacity:1}
.funnel__no{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--accent)}
.funnel__label{font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap}

/* ---------- 问题认知：4 张问题卡 ---------- */
.issues-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem);margin-top:clamp(1.8rem,3vw,2.6rem)}
@media(max-width:720px){.issues-grid{grid-template-columns:1fr}}
/* 动效 S1「底部进度光条」：hover 时卡底一条光从左推到右，呼应「推进到下一步」（挑选板 S1） */
.issue-card{position:relative;overflow:hidden;isolation:isolate;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.7rem;transition:border-color var(--transition),transform .4s var(--ease)}
.issue-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);pointer-events:none}
.issue-card>*{position:relative;z-index:3}
.issue-card:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-5px)}
.issue-card:hover::after{transform:scaleX(1)}
.issue-card__no{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--accent);margin-bottom:.75rem}
.issue-card__title{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em}
.issue-card__text{font-size:.9rem;color:var(--ink-mute);line-height:1.6}

/* ---------- 四步方法 ---------- */
.approach{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
@media(max-width:980px){.approach{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.approach{grid-template-columns:1fr}}
.approach__item{position:relative;border-top:1px solid var(--rule);padding-top:1.35rem;transition:border-color .35s var(--ease)}
/* 原来这里是 2px 实心湾流青长线，四根并排横贯整屏，成了全页最抢眼的元素，喧宾夺主。
   改为：默认只用极低调的灰线（--rule）分隔，鼠标移到某一步时才亮起青光并微微外发光。 */
.approach__item::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease),box-shadow .45s var(--ease);pointer-events:none}
.approach__item:hover{border-color:transparent}
.approach__item:hover::before{transform:scaleX(1);box-shadow:0 0 14px rgba(var(--accent-rgb),.65)}
.approach__head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.85rem}
.approach__no{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--accent)}
.approach__name{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.approach__title{font-family:var(--font-display);font-weight:700;font-size:1.22rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:.6rem}
.approach__text{font-size:.9rem;color:var(--ink-dim);line-height:1.65}

/* ---------- 适合哪些商家 ---------- */
.industries-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
@media(max-width:980px){.industries-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.industries-grid{grid-template-columns:1fr}}
.industry-card{position:relative;overflow:hidden;isolation:isolate;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.5rem;transition:border-color var(--transition),transform .45s var(--ease);outline:none}
.industry-card>*{position:relative;z-index:2}
/* 05 行业卡统一用 C4「斜向光带」（需求 3）：hover 时一条斜光带从左下扫到右上，
   像灯光扫过货架，比原来的上浮更有"被照亮"的感觉。四张卡同一动效，保持整齐。 */
.industry-card::after{
  content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),rgba(var(--accent-rgb),.22),transparent);
  transform:rotate(18deg) translateX(-40%);opacity:0;
}
.industry-card:hover::after,.industry-card:focus-visible::after{animation:sweep 1.15s var(--ease) forwards}
@keyframes sweep{
  0%{opacity:0;transform:rotate(18deg) translateX(-40%)}
  25%{opacity:1}
  100%{opacity:0;transform:rotate(18deg) translateX(320%)}
}
@media(prefers-reduced-motion:reduce){
  .industry-card:hover::after,.industry-card:focus-visible::after{animation:none;opacity:0}
}
.industry-card:hover,.industry-card:focus-visible{border-color:rgba(var(--accent-rgb),.4);transform:translateY(-4px)}
.industry-card__head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.85rem}
.industry-card__no{font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--accent)}
.industry-card__name{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.industry-card__text{font-size:.87rem;color:var(--ink-dim);line-height:1.6}
.industry-card__focus{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.15rem}
.industry-card__focus li{font-size:.74rem;color:var(--ink-mute);border:1px solid var(--line);border-radius:100px;padding:3px 10px}

/* ---------- 诊断信任 ---------- */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr;gap:2.6rem}}
.trust-subhead{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:1.3rem}
.timeline{list-style:none;display:grid;gap:0}
.timeline__item{display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.timeline__item:last-child{border-bottom:0}
.timeline__marker{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--accent);border:1px solid var(--line);border-radius:50%}
.timeline__label{font-size:.95rem;color:var(--ink-dim)}
.trust-emphasis{margin-top:1.4rem;font-size:.87rem;color:var(--accent);background:var(--accent-soft);border-left:2px solid var(--accent);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;line-height:1.6}
.trust-grid__deliverable{display:grid;gap:2rem}
.trust-grid__cover{display:flex;justify-content:center}
.report-cover{max-width:270px;width:100%}
.report-cover__svg{width:100%;height:auto}
.report-cover__caption{margin-top:1rem;text-align:center;font-size:.82rem;color:var(--ink-mute)}
.deliverable-list{list-style:none;display:grid;gap:.7rem}
.deliverable-list li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--ink-dim);line-height:1.6}
.deliverable-list li::before{content:"";position:absolute;left:0;top:.6em;width:.9rem;height:1px;background:var(--accent)}
.trust-cta{margin-top:clamp(2.4rem,5vw,3.6rem);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.trust-cta__footnote{font-size:.85rem;color:var(--ink-mute)}

/* ---------- 区块结论 / 注释 ---------- */
.section-conclusion{margin-top:clamp(1.8rem,3.4vw,2.8rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(1.4rem,2.6vw,2rem)}
.section-conclusion p{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-dim);line-height:1.6;max-width:62ch}
.section-conclusion--strong p{color:var(--ink);font-weight:600}
.section-note{margin-top:1.3rem;font-size:.78rem;color:var(--ink-mute);opacity:.8}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(2.6rem,5vw,4rem) 0 2rem;margin-top:clamp(1rem,3vw,2rem)}
.footer__top{display:grid;grid-template-columns:1.2fr 2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:820px){.footer__top{grid-template-columns:1fr;gap:2.4rem}}
.footer__logo{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
/* 页脚品牌图形标：尺寸按正式图形（brand-mark.svg，202×143 横款）适配，
   高度对齐品牌名的 x-height 视觉重心；宽度自适应保持比例。
   原规则是为 22×22 正方形占位「山形」写的，已随占位标一并作废。 */
.footer__logo__mark{height:30px;width:auto;flex:none;display:block}
.footer__tagline{margin-top:.9rem;font-size:.88rem;color:var(--ink-mute)}
.footer__contact{margin-top:1.4rem;display:grid;gap:.5rem;font-size:.85rem;color:var(--ink-mute)}
.footer__contact a{color:var(--ink-dim);transition:color var(--transition)}
.footer__contact a:hover{color:var(--accent)}
.footer__hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
@media(max-width:560px){.footer__hub{grid-template-columns:1fr 1fr}}
.footer__h{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.footer__col ul{list-style:none;display:grid;gap:.65rem}
.footer__col a{font-size:.88rem;color:var(--ink-mute);transition:color var(--transition)}
.footer__col a:hover{color:var(--accent)}
.footer__inner{margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-mute)}

/* 6.0 浅色版：白底、深灰青色、日间场景与可访问联动。 */
.hero--with-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.2) 100%),url("/assets/img/day-harbour.jpg");background-size:cover;background-position:center}
.hero__light{background-image:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.18)),url("/assets/img/day-harbour.jpg");background-size:cover;background-position:center;opacity:.6}
.hero--with-bg::before{background:linear-gradient(180deg,transparent 72%,var(--bg) 100%)}
.problem-section{background:var(--bg-alt)}
.funnel{overflow:visible}
.funnel__list{position:relative;gap:0;justify-content:space-between}
.funnel__list::before{content:"";position:absolute;left:5%;right:5%;top:50%;height:2px;background:var(--rule);z-index:0}
.funnel__item{z-index:1;background:var(--bg);min-width:0;width:13%;border-radius:50%;aspect-ratio:1;padding:.9rem;justify-content:center}
.funnel__item::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid transparent;transition:border-color .25s,box-shadow .25s}
.funnel__item:hover::after,.funnel__item:focus-visible::after,.funnel__item.is-active::after{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.funnel__no{display:none}
.issue-card__no{font-size:.72rem}
.industry-panel{display:grid;grid-template-columns:1.3fr 1fr;min-height:320px;margin-top:1.5rem;border:1px solid var(--line);background:var(--bg);border-radius:18px;overflow:hidden}
.industry-panel__image{background:url("/assets/img/day-harbour.jpg") center/cover;min-height:260px}
.industry-panel__copy{padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center}
.industry-panel__kicker{font-size:.76rem;color:var(--accent);letter-spacing:.14em;text-transform:uppercase}.industry-panel__title{font-size:clamp(1.5rem,3vw,2.5rem);margin:.6rem 0 1.2rem}.industry-panel__focus{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}.industry-panel__focus li{border:1px solid var(--line);border-radius:999px;padding:.4rem .75rem;color:var(--ink-dim);font-size:.85rem}
.industry-card{width:100%;text-align:left;font:inherit;cursor:pointer}
@media(max-width:720px){.funnel__list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.funnel__list::before{left:calc(25% - 1px);right:auto;top:1rem;bottom:1rem;width:2px;height:auto}.funnel__item{width:auto;aspect-ratio:auto;border-radius:12px;min-height:74px}.funnel__item::after{inset:4px;border-radius:10px}.industry-panel{grid-template-columns:1fr;min-height:0}.industry-panel__image{min-height:180px}.industry-panel__copy{padding:1.4rem}.funnel__item:last-child{grid-column:auto}}

.section--white,.section--tint,.section--deep{background:var(--bg)}
body.is-home .section::before,body.is-home .cta-band::before{background-image:radial-gradient(900px 520px at 86% -8%,rgba(var(--accent-rgb),.07),transparent 70%)}
body.is-home .section::after,body.is-home .cta-band::after{background:linear-gradient(180deg,transparent,rgba(20,72,72,.025) 78%,rgba(20,72,72,.05))}
.section.night,.cta-band.night{background:var(--bg-alt)}
.night-bg{background-image:linear-gradient(180deg,rgba(245,249,249,.91),rgba(245,249,249,.82)),url("/assets/img/night-city.jpg")}
.night-light{background-image:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.86)),url("/assets/img/night-city.jpg");opacity:.75}
.night--macau .night-bg{background-image:linear-gradient(180deg,rgba(245,249,249,.91),rgba(245,249,249,.82)),url("/assets/img/night-macau.jpg")}
.night--macau .night-light{background-image:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.86)),url("/assets/img/night-macau.jpg")}
.night--harbour .night-bg{background-image:linear-gradient(180deg,rgba(245,249,249,.91),rgba(245,249,249,.84)),url("/assets/img/night-harbour.jpg")}
.night--harbour .night-light{background-image:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.88)),url("/assets/img/night-harbour.jpg")}
.night-bg::after,.night-light::after{background:linear-gradient(90deg,rgba(245,249,249,.86),rgba(245,249,249,.4) 42%,transparent 82%)}
.night .section-head__title,.night .section-head__sub,.night .section-head__eyebrow{text-shadow:none}
.funnel__item{background:rgba(255,255,255,.78);border-color:var(--line);box-shadow:0 8px 24px -20px rgba(20,72,72,.55)}
.funnel__label,.industry-card__name{color:var(--ink)}
.issue-card,.industry-card{background:rgba(255,255,255,.82);border-color:var(--line);box-shadow:0 10px 30px -25px rgba(20,72,72,.55)}
.data-card,.approach__item{background:var(--bg-card);border-color:var(--line);box-shadow:0 12px 30px -28px rgba(20,72,72,.6)}
body.is-home .data-card__label,body.is-home .issue-card__title,body.is-home .industry-card__name,body.is-home .approach__title{text-shadow:none}
.trust-section{background:var(--bg-alt)}
.report-cover__svg rect:first-child{fill:#e6f3f3;stroke:#b5d5d5}.report-cover__svg rect:nth-child(2){fill:#fff;stroke:#9bcaca}
.industry-card.is-active,.industry-card:hover,.industry-card:focus-visible{background:#eaf7f7;border-color:rgba(var(--accent-rgb),.55)}
.industry-card{transition:background .4s var(--ease),border-color var(--transition),transform .4s var(--ease)}
@media(max-width:720px){.funnel__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.funnel__item{min-width:0}.funnel__item:last-child{grid-column:1/-1}}