/* 跃港互联 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 湾流青 */
}

/* ---------- 深色分区（需求 5：区块之间要连贯，不要"切蛋糕"） ----------
   原来是 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(12,12,12,.62) 72%,rgba(12,12,12,.95));
}

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

     首屏（开灯）→ 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}
/* 夜景区块不再叠加纯色环境光：它本来就被 .night-bg 盖住，这里显式关掉，免得日后误会 */
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(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-city.jpg");
  background-size:cover,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(12,12,12,.9);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 30px -18px rgba(0,0,0,.9);
}

/* ---------- 卡片文字发光（需求 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:0 0 16px rgba(var(--accent-rgb),.28);
}
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：该设置下不做周期动画，仅保留静态高亮。 */
@keyframes stepMarquee{
  0%,22%{color:var(--accent);text-shadow:0 0 12px rgba(var(--accent-rgb),.75);opacity:1}
  30%,100%{color:var(--ink-mute);text-shadow:none;opacity:.5}
}
body.is-home .approach__item .approach__no{
  display:inline-block;animation:stepMarquee 5.6s var(--ease) infinite;
}
body.is-home .approach__item:nth-child(2) .approach__no{animation-delay:1.4s}
body.is-home .approach__item:nth-child(3) .approach__no{animation-delay:2.8s}
body.is-home .approach__item:nth-child(4) .approach__no{animation-delay:4.2s}

/* 03 七步漏斗：7 个节点，8.4s 一轮，每个 1.2s */
body.is-home .funnel__item .funnel__no{animation:stepMarquee 8.4s var(--ease) infinite}
body.is-home .funnel__item:nth-child(2) .funnel__no{animation-delay:1.2s}
body.is-home .funnel__item:nth-child(3) .funnel__no{animation-delay:2.4s}
body.is-home .funnel__item:nth-child(4) .funnel__no{animation-delay:3.6s}
body.is-home .funnel__item:nth-child(5) .funnel__no{animation-delay:4.8s}
body.is-home .funnel__item:nth-child(6) .funnel__no{animation-delay:6s}
body.is-home .funnel__item:nth-child(7) .funnel__no{animation-delay:7.2s}

/* 05 行业卡：4 个，与四步同步 */
body.is-home .industry-card .industry-card__no{display:inline-block;animation:stepMarquee 5.6s 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}

/* 06 时间线：4 个步骤标记。标记本身是带圆框的圆形数字（有 border 与底色），
   直接套 stepMarquee 会把整颗标记的 opacity 压到 .5、看起来脏，所以单独写一版：
   只让文字发光、外框跟着变色，标记本体始终不透明。 */
@keyframes markPulse{
  0%,22%{color:var(--accent);border-color:rgba(var(--accent-rgb),.85);box-shadow:0 0 14px rgba(var(--accent-rgb),.5)}
  30%,100%{color:var(--ink-mute);border-color:var(--line);box-shadow:none}
}
body.is-home .timeline__item .timeline__marker{animation:markPulse 5.6s 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.4s}
body.is-home .timeline__item:nth-child(3) .timeline__marker{animation-delay:2.8s}
body.is-home .timeline__item:nth-child(4) .timeline__marker{animation-delay:4.2s}

@media(prefers-reduced-motion:reduce){
  body.is-home .approach__item .approach__no,
  body.is-home .funnel__item .funnel__no,
  body.is-home .industry-card .industry-card__no{animation:none;color:var(--accent);opacity:.8;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}
}

/* ---------- 区块标题：编号 + 眉标 + 标题（+ 副标题） ---------- */
.section-head{max-width:62ch;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.06;color:var(--ink)}
.section-head__sub{margin-top:.9rem;font-size:clamp(.98rem,1.2vw,1.08rem);color:var(--ink-dim);max-width:54ch;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)}
.footer__logo__mark{width:22px;height:22px;flex:none;color:var(--accent)}
.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)}