/* 6.0 浅色系统与连续路径。最后加载，专用于已确认的纯浅色版。
   语义约定：--brand 品牌蓝 = 主路径 / 强调；--warn 警告红 = 断点 / 故障；--orange 橙 = 点缀。
   橙与红不混用 —— 红一旦被当成强调色用，警告就失去警告感。 */
:root{--deep:#0D2B66;--brand:#2563EB;--orange:#FF7A21;--sky:#E8F2FF;--mist:#F7F8FB;--bg:#FFFFFF;--bg-alt:#F5F7FB;--rule:rgba(13,43,102,.12);--line:rgba(13,43,102,.14);--accent-soft:rgba(37,99,235,.10);--warn:#DC2626;--warn-ink:#B91C1C;--warn-soft:#FEF2F2;--warn-line:#F5A9A9;--warn-rgb:220,38,38;--accent:#2563EB;--accent-hover:#174FCA;--accent-rgb:37,99,235;--ink:#0D2B66;--ink-dim:#324A73;--ink-mute:#6F7D94;--font-display:'Bricolage Grotesque','Noto Sans SC','Microsoft YaHei',sans-serif;--font-body:'Inter','Noto Sans SC','Microsoft YaHei',sans-serif;color-scheme:light}
/* 5.0 基底（yuegang.css）里那套同义变量是**湾流青**色系，本版此前没有覆盖它们，
   于是任何"漏改到 var() 引用"的规则都会露出青色 —— 实测确实漏了：
   .timeline__marker / .trust-emphasis / .filter-chip 等 6 个页面上都渲染出了
   rgb(20,72,72)（--line）与 rgb(20,157,157)（--accent-soft / --color-accent）。
   这里把同义变量按蓝白配色显式对齐一次，青色彻底断根。
   （对比：gpt 配色版当初改暖色时已经补过同一段，蓝白版是这一路搬迁时漏掉的。） */
:root{--color-accent:#2563EB;--color-bg:#FFFFFF;--color-surface:#FFFFFF;--color-border:#E5EAF3;--color-muted:#6F7D94}
body{background:#fff}body::before,body::after{display:none}.nav{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,43,102,.10)}.nav__logo img{display:block;height:52px;width:auto;max-width:190px;object-fit:contain;object-position:left center}.nav__logo{height:52px}.nav__cta{color:#fff;background:var(--brand);box-shadow:0 8px 20px rgba(37,99,235,.2)}.nav__cta::after{content:'↗';color:var(--orange);margin-left:6px}.nav__links a.is-active{color:var(--brand)}.nav__links a.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--orange)}

/* ---------- 导航：首屏上的「毛玻璃」态 → 滚动后白底实心 ----------
   2026-10-09 复刻 7.0 的头部状态机。7.0 的做法是两态硬切：
     · 未滚动（首屏上）→ 透明底 + 白字 + 白 logo + 白色描边 CTA；
     · 已滚动        → 近白底 .97 + 深色 logo + 深色链接 + 品牌蓝 CTA。
   你要的"毛玻璃质感"落在未滚动那一态：透明底 + backdrop-filter 模糊 + 半透明白描边，
   这样深蓝首屏从导航后面透出来、被磨砂柔化，而不是一块实心条。
   注意 backdrop-filter 在没有滚动、背景是纯色时看不出效果 ——
   这里靠 .nav::after 的一层极淡白色薄膜把"玻璃"的边界感补出来（7.0 是 1px 白线）。 */
.nav{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
/* 透明毛玻璃态**只属于首页首屏** —— 那里 hero 是深藏青，白字才看得见。
   ⚠️ 这组规则原先漏了 body.is-home 前缀，于是内页顶部也套上了"透明导航 + 白字"，
   而内页的 .page-hero 继承的是 body{background:#fff} —— 白字白底，导航整条消失，
   只有往下滚动、.nav.scrolled 接管之后才恢复正常。
   加 :not(.scrolled) 是为了不与下面的 .nav.scrolled 抢优先级（0-3-1 会压过 0-2-0）。 */
body.is-home .nav:not(.scrolled){background:transparent;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.10)}
.nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom-color:#edf1f7;box-shadow:0 8px 30px rgba(16,42,82,.05)}
/* 两套 logo 互斥显示：白标只用于首页深色首屏，其余情况一律用彩色组合标 */
.nav__logo--light{display:none}
.nav.scrolled .nav__logo--dark{display:none}
.nav.scrolled .nav__logo--light{display:flex}
/* 内页（非首页）未滚动时也是白底，必须用彩色标 —— 白 logo 在白底上同样看不见 */
body:not(.is-home) .nav__logo--dark{display:none}
body:not(.is-home) .nav__logo--light{display:flex}
.nav__logo--dark{display:flex;align-items:center;gap:11px;height:auto}
.nav__logo--dark .nav__logo-mark{display:flex;align-items:center;justify-content:center;width:35px;height:35px;flex:none}
.nav__logo--dark .nav__logo-mark img{height:35px;width:auto;max-width:35px;object-fit:contain;filter:brightness(0) invert(1)}
.nav__logo--dark .nav__logo-mark svg{width:30px;height:30px;color:#fff}
.nav__logo--dark .nav__logo-text{display:flex;flex-direction:column;gap:5px}
.nav__logo--dark .nav__logo-cn{color:#fff;font-size:20px;font-weight:820;letter-spacing:.08em;line-height:1}
.nav__logo--dark .nav__logo-en{color:rgba(255,255,255,.48);font-size:7px;letter-spacing:.18em;line-height:1}
/* 首页首屏上：链接白字、CTA 白底深字（7.0 未滚动态的 .navcta）。
   同样必须限定 is-home —— 内页白底上白字等于把导航藏起来。
   内页未滚动时回到 yuegang.css 的默认：深色链接 + 品牌蓝 CTA。 */
body.is-home .nav:not(.scrolled) .nav__links{color:rgba(255,255,255,.66)}
body.is-home .nav:not(.scrolled) .nav__links a:hover,
body.is-home .nav:not(.scrolled) .nav__links a.is-active{color:#fff}
body.is-home .nav:not(.scrolled) .nav__links a.is-active::after{background:#fff}
body.is-home .nav:not(.scrolled) .nav__cta{background:#fff;color:var(--deep);box-shadow:none}
body.is-home .nav:not(.scrolled) .nav__cta::after{color:var(--orange)}
:focus-visible{outline:3px solid var(--accent);outline-offset:5px}p{text-wrap:pretty}

/* ---------- 首屏：复刻 7.0 的深蓝港湾 ---------- */
/* 2026-10-09：首屏由「白底照片」改为 7.0 的「深蓝港湾」。
   复刻的三层结构（与 7.0 的 .hero-v3 一一对应）：
     ::before  → 整块深蓝底 + 港湾图；图只铺右侧 62%（inset:0 0 0 38%），
                 左侧留给深蓝，这是它"往深蓝过渡"能自然的原因；
     ::after   → 左侧由不透明深蓝向右渐隐的横向渐变，把图与底"缝"在一起；
     .hero__v7-inner → 文案层。
   与 7.0 的差异仅两处，且都是刻意的：
     ① 背景图走 /assets/img/hero-harbour.png（同一张图，本地资产、可缓存），
        而不是 7.0 那样内联 base64 把首页撑到 1.7MB；
     ② 尺寸单位用本站既有体系（min-height/clamp），不写死 825px。
   7.0 原来的 .hero--with-bg 白底方案整套保留在下方，改回只需换 class。 */
.hero{isolation:isolate;min-height:100vh;min-height:100svh;padding:clamp(116px,15vh,164px) 0 clamp(72px,11vh,116px);background:#fff;display:flex;align-items:center}
.hero__inner{width:100%;position:relative}
/* 高度：必须是**满屏**，不是固定 825px。
   7.0 写死 min-height:825px，在 1440×900 这类视口下会短于屏幕、首屏铺不满；
   这里改回 .hero 的 100vh/100svh 体系（100svh 覆盖移动端地址栏收放），
   内容用 .hero__v7-inner 的 min-height 兜住，两者取大值 → 永远≥一屏且不裁内容。 */
.hero--v7{background:#0B203B;color:#fff;padding:0;display:block;min-height:100vh;min-height:100svh;margin-top:-76px;padding-top:76px;position:relative;overflow:hidden;isolation:isolate}
.hero--v7::before{content:"";position:absolute;inset:0 0 0 38%;z-index:-2;background-image:linear-gradient(90deg,rgba(11,32,59,.98) 0%,rgba(11,32,59,.86) 20%,rgba(11,32,59,.48) 48%,rgba(11,32,59,.18) 100%),linear-gradient(180deg,rgba(5,17,34,.02),rgba(5,17,34,.32)),url('/assets/img/hero-harbour.png');background-size:auto,auto,cover;background-position:0 0,0 0,center center;background-repeat:no-repeat}
.hero--v7::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0B203B 0%,#0B203B 29%,rgba(11,32,59,.96) 37%,rgba(11,32,59,.48) 58%,rgba(11,32,59,.06) 84%)}
.hero__v7-inner{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);display:flex;align-items:center}
.hero__v7-copy{width:min(720px,58vw);padding:58px 0 84px}
.hero--v7 .hero__eyebrow{color:#72A1FF;font-size:13px;letter-spacing:.08em;font-weight:800;margin:0 0 25px}
.hero--v7 .hero__title{color:#fff;font-size:clamp(2.86rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.055em;font-weight:840;margin:0}
.hero--v7 .hero__title .hero__hl{color:#6FA0FF}
/* 副文案 + 强调句：7.0 用一行的 <strong> 且是 display:block 另起一行，
   所以这里也按块级渲染，保持"两行"的观感。 */
.hero--v7 .hero__sub{margin:28px 0 0;font-size:16px;line-height:1.75;color:rgba(255,255,255,.66)}
.hero--v7 .hero__sub strong{display:block;margin-top:8px;color:rgba(255,255,255,.92);font-weight:700}
.hero--v7 .hero__actions{display:flex;align-items:center;gap:14px;margin-top:31px;flex-wrap:wrap}
.hero--v7 .hero__v7-btn--primary{padding:14px 23px;border-radius:999px;background:#2563EB;color:#fff;font-size:13px;font-weight:800;box-shadow:0 12px 28px rgba(37,99,235,.25);border:0}
.hero--v7 .hero__v7-btn--primary:hover{background:#1755D7}
.hero--v7 .hero__v7-btn--secondary{padding:13px 20px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.78);font-size:12px;background:transparent}
.hero--v7 .hero__v7-btn--secondary:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.hero--v7 .hero__v7-btn--secondary .btn__arrow{display:inline}
/* 三条信任点：7.0 用「空心小圆 + 文字」的横向排列（.hero-v3-trust），不是圆点列表 */
.hero--v7 .hero__trust{display:flex;align-items:center;gap:22px;flex-wrap:wrap;max-width:700px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.hero--v7 .hero__trust span{position:relative;padding-left:18px;color:rgba(255,255,255,.48);font-size:11px}
.hero--v7 .hero__trust span::before{content:"";width:7px;height:7px;border:1px solid #73A2FF;border-radius:50%;position:absolute;left:0;top:4px}
.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);color:rgba(255,255,255,.28);font-size:9px;letter-spacing:.18em}
.hero__scroll::after{content:"";display:block;width:1px;height:28px;margin:8px auto 0;background:rgba(255,255,255,.16)}
/* 首屏与 02 之间的深蓝过渡带（7.0 的 .hero-v3-transition）：
   220px + 1fr 两栏：左侧小字说明英文眉标，右侧一句中文承接。 */
.hero-transition{background:#173657;color:#fff;padding:25px 0 26px;border-top:1px solid rgba(255,255,255,.04)}
.hero-transition__inner{display:grid;grid-template-columns:220px 1fr;gap:42px;align-items:center}
.hero-transition__eyebrow{margin:0;color:#80A6FF;font-size:10px;letter-spacing:.16em;font-weight:800}
.hero-transition__copy{margin:0;color:rgba(255,255,255,.72);font-size:16px;line-height:1.7}
.hero-transition__copy strong{color:#fff;font-weight:760}

/* ---------- 首屏：白底照片方案（保留备用，当前未启用） ---------- */
/* 需求 1：恢复覆盖全屏。用 100vh 打底 + 100svh 覆盖（移动端地址栏收放时不跳动）。
   必须同时给 padding-block，否则内容顶到导航或贴底。 */
/* 背景图铺满整个首屏，不再做斜切裁切 —— 之前 clip-path 只覆盖右侧 62%，才导致"不满屏"。
   图片：1.1 离线版首屏图（1672×941，宽高比 1.78 恰好 16:9）。
   1920 屏需放大 1.15×，属轻微；4K 屏放大 2.3× 会偏糊，这是这张图尺寸的固有限制。
   构图要点：桥体主体在画面偏左中，所以取 66% center —— 把桥推到右侧露出的位置，
   左侧留给渐变与文案；取 center 会让桥压在标题正下方。

   height:auto 是必须的，不是可有可无：yuegang-components.css 里给这个伪元素写过
   `bottom:0;height:34%`（5.0 夜景版的"底部渐隐"），而这里只写 inset:0 覆盖不掉 height。
   绝对定位元素在 top/bottom/height 三者同时存在时 **bottom 被忽略**，
   于是高度被钉死在 34% —— 1440×900 屏上实测只有 306px 高，
   背景图就只铺了顶部一条，不是满屏。这一条曾经真的漏掉了。 */
.hero--with-bg::before{content:"";position:absolute;inset:0;height:auto;z-index:-2;background:url('/assets/img/hero-bridge.jpg') 66% center/cover no-repeat}
/* 遮罩与「桥景选型」里方案 B 的预览逐字一致 —— 用户是按那个预览拍板的，
   改一个字就不是他看过的东西了。左侧 0~30% 是纯白，文案区可读性由它保证。 */
.hero--with-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#fff 0%,#fff 30%,rgba(255,255,255,.93) 44%,rgba(255,255,255,.52) 62%,rgba(255,255,255,.08) 82%,rgba(255,255,255,0) 100%),linear-gradient(0deg,rgba(255,255,255,.86) 0%,transparent 26%)}
/* 5.0 夜景版留下的装饰，浅色版里是纯噪声、必须清掉：
   · .hero__light  → 300px 的蓝色径向光斑（原用于夜景"开灯"）
   · .hero__inner::after → 一条 rotate(-12deg) 的蓝橙渐变斜线，悬在标题右侧
   两者在深色夜景上成立，搬到白底照片上就成了"凭空多出来的一条斜线"。 */
.hero__light,
.hero__inner::after{display:none}
.hero__eyebrow,.hero__support{color:var(--deep)}
.hero__title{font-size:clamp(2.65rem,5.3vw,4.8rem);line-height:1.2;max-width:none;letter-spacing:-.04em;color:var(--ink);text-shadow:none}
/* 需求 2：只把「港澳客」染品牌蓝，其余保持深色。 */
.hero__title .hero__hl{font-style:normal;color:var(--brand)}
.hero__eyebrow{color:var(--accent);font-size:.85rem;letter-spacing:.15em}
.hero__sub{margin-top:24px;color:var(--ink-dim);font-size:18px}
.hero__support{margin-top:12px;color:var(--ink-dim)}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__reassurances{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin-top:24px;color:var(--ink-mute);font-size:13px}

body.is-home :is(.section,.cta-band)::before{display:block;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(620px 280px at 86% 4%,rgba(232,242,255,.8),transparent 70%)}body.is-home :is(.section,.cta-band)::after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.25),transparent)}.section{padding-block:90px;background:#fff;position:relative;isolation:isolate}.section>.wrap,.cta-band>.wrap{position:relative;z-index:1}.problem-section{background:var(--mist)}.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(2.2rem,4vw,3.2rem)}.section-head__meta{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--accent)}.section-head__index{font:600 14px var(--font-mono);border-top:2px solid var(--accent);padding-top:8px;min-width:28px}.section-head__eyebrow{font-size:14px;letter-spacing:.08em}.section .section-head__title{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.2;color:var(--ink);max-width:none}.section-head__sub{font-size:18px;margin-top:14px;color:var(--ink-dim)}.section-head__title .hero__hl{font-style:normal;color:var(--brand)}
/* ---------- 邮箱「点击复制」按钮 ----------
   视觉上保持原来链接的样子（同色、同字号、同下划线行为），只把语义从跳转换成动作；
   复制成功后按钮下方浮出一个短提示，1.8s 自动收回（JS 去掉 .is-copied）。 */
.mail-copy{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  padding:0;margin:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:inherit;color:inherit;line-height:inherit;
  border-radius:4px;-webkit-tap-highlight-color:transparent;
}
.mail-copy__text{border-bottom:1px solid currentColor;transition:opacity .18s var(--ease)}
.mail-copy:hover .mail-copy__text,.mail-copy:focus-visible .mail-copy__text{opacity:.72}
.mail-copy:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.mail-copy__tip{
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,4px);
  padding:5px 10px;border-radius:7px;white-space:nowrap;
  background:var(--deep);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.mail-copy__tip::after{
  content:"";position:absolute;left:50%;top:100%;margin-left:-4px;
  border:4px solid transparent;border-top-color:var(--deep);
}
.mail-copy.is-copied .mail-copy__tip{opacity:1;transform:translate(-50%,0)}
.form__fallback .mail-copy{color:var(--brand)}
@media(prefers-reduced-motion:reduce){
  .mail-copy__text,.mail-copy__tip{transition:none}
}

/* ---------- 02 市场证据：干净大字，无发光 ---------- */
/* 需求 3：深色版靠 text-shadow 做"数字发光"，搬到白底就是一圈蓝雾 = 脏。
   这里显式清掉 text-shadow 与底光伪元素，改为实心数字 + 细线分隔。

   2026-10-09：数据内容整体换成 7.0 参考页的「港澳客，已经不只是『游客』」——
   两组（香港消费者 / 澳门消费者）、共 8 条指标 + 1 段来源。
   **样式照 7.0 走，标题样式保持本站原样**：
     · 大标题/小标题仍由 .section-head__title / __sub 承载，字号、字重、居中、蓝色强调一律不动；
     · 数据区改回 7.0 的「左右两栏 .market-col + 内部 2 列 .metrics」，
       数字用 7.0 那套字号（59px / 长值 47px）、品牌蓝、负字距；
     · 原有的**数字增长滚动动画**（data-count-to）与 hover 原地放大全部保留。
   下面 .stats-grid 的两条旧规则（3 列 flex 均分）对这个新结构不再适用，
   由 .stats-grid--market 覆盖成两栏。 */
.stats-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px}
/* 02 新结构：两栏并列，栏内指标 2 列；整块上下各一条细线，与 7.0 一致 */
.stats-grid--market{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid--market .market-col{padding:38px 44px 42px;min-width:0}
.stats-grid--market .market-col+.market-col{border-left:1px solid var(--line)}
.data-card__group{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.data-card__group-code{font-size:11px;letter-spacing:.18em;color:var(--brand);font-weight:800}
.data-card__group-name{font-size:27px;font-weight:800;color:var(--deep);margin-top:4px}
.data-card__group-note{font-size:11px;color:#9AA6B9}
/* 组头是「代码 + 名称 + 备注」三段，前两段要竖排（7.0 里是两个块），
   所以给它们各自 display:block，并让备注推到最右。 */
.stats-grid--market .data-card__group{flex-direction:column;align-items:stretch;position:relative}
.stats-grid--market .data-card__group-note{position:absolute;right:0;bottom:2px}
.stats-grid--market .metrics{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.stats-grid--market .data-card{flex:none;max-width:none;min-width:0;padding:24px 0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:none}
/* 来源整段（7.0 的 .metric.wide）横跨两列 */
.stats-grid--market .data-card:has(.data-card__source){grid-column:1/-1}
.data-card{position:relative;flex:0 1 calc((100% - 64px)/3);max-width:calc((100% - 64px)/3);min-width:0;padding:28px 0;border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;background:none}
.data-card::before,.data-card::after{display:none!important}
.data-card__rule{display:none}
/* 实景说明与来源：7.0 里是 11px 灰字，这里原样保留（它们不是"标题"） */
.data-card__desc{display:block;font-size:11px;line-height:1.7;color:#8996AA;margin:8px 0 0}
.data-card__source{display:block;font-size:11px;line-height:1.7;color:#8996AA;margin:8px 0 0}
.data-card__source a{color:#56709B;border-bottom:1px solid var(--rule)}
.data-card__source a:hover{color:var(--brand);border-color:var(--brand)}
.data-card__footnote{display:none}
.data-card__scope,.data-card__delta-row{display:none}
/* 数值：改用 7.0 的字号与品牌蓝，仍保留 hover 的 transform 放大 */
.data-card__value{font:700 clamp(2.8rem,4.4vw,4.4rem)/1.1 var(--font-display);font-size:59px;color:var(--brand);margin:19px 0 12px;white-space:nowrap;letter-spacing:-.06em;line-height:.95;text-shadow:none!important;transform-origin:left bottom;transition:transform .34s cubic-bezier(.22,1,.36,1),color .28s var(--ease)}
.data-card__value--long{font-size:47px}
/* 「近 1/2」这种带空格的短值在 59px 下会偏宽，收紧一档以免压到相邻列 */
.stats-grid--market .data-card__value{font-size:52px}
.data-card__label{font-size:16px;line-height:1.45;font-weight:760;color:var(--deep);text-shadow:none!important;transform-origin:left top;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.data-card__sub{font-size:12px;font-weight:730;color:var(--brand);margin:7px 0 0}
.data-card:hover{transform:none}
/* 悬停放大（保留 6.0 原有交互，只把倍数按新字号回收一点）：
   数值仍以自身左下角为原点原地 scale，标签同步跟进；标签现在是 16px（原 19px），
   倍数从 1.10 降到 1.06，保证最长的一句「选择北上消费，因为能体验澳门没有的项目」
   在 2 列窄栏里放大后仍在卡内。 */
.data-card:hover .data-card__value{color:var(--brand);transform:scale(1.08)}
.data-card:hover .data-card__label{transform:scale(1.04)}
.section-conclusion{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:0;padding-top:0}.section-conclusion p{font-size:18px}.section-conclusion .btn{padding:10px 18px;font-size:13px}
/* 02 收尾：逐像素对齐 7.0 的 .market-summary ——
   52×3px 品牌蓝短线居中 → 24px 深藏青加粗主句（line-height 1.5）
   → 900px 上限、13px 灰蓝说明段（line-height 1.75）。
   之前这里是 flex 两栏（左句 + 右按钮），与参考页的居中版式不符，现已改为居中堆叠。 */
.stats-grid--market+.section-conclusion{flex-direction:column;align-items:center;text-align:center;gap:0;padding:30px 20px 0}
.stats-grid--market+.section-conclusion::before{content:"";order:-1;width:52px;height:3px;background:var(--brand);margin:0 auto 16px}
.stats-grid--market+.section-conclusion strong{display:block;font-size:24px;line-height:1.5;color:var(--deep);font-weight:700}
.stats-grid--market+.section-conclusion p{max-width:900px;margin:9px auto 0;color:var(--ink-mute);font-size:13px;line-height:1.75}

/* ---------- 03 问题认知：V3 断点轨道 ---------- */
/* 一条连续的七节点路径；断点处用两条警告红斜切痕把路径"切断"，
   让人一眼看出"路断在这里"，而不是看到一排装饰圆点。

   排版要点：路径行与标签行是**两个平行的 flex 行**，子元素序列完全相同
   （固定宽的节点列 / 固定宽的断点列 / 可伸缩的连接线）。
   因为两行的固定项宽度一致、可伸缩项数量一致，伸缩分配必然相同 → 天然对齐，
   不需要手算坐标，也不会出现"圆点与文字错位"。 */
.problem-section{background:var(--mist);padding-bottom:70px}
/* ---------- 03 问题认知：五个环节 + 一条通线 + 从左到右依次放大 ----------
   2026-10-09 改版：原来是 7 个环节 + 四个红色"断点切口"，
   现对齐 7.0 —— 五个环节（看到 / 看懂 / 预约 / 到店 / 复购），
   其中 02、03、05 挂虚线说明框，不再用红色切口。

   结构要点：
   · 线是**一条通线**（.problem-path__line 绝对定位铺满整行），圆点是白底实心圈，
     压在线上把线"断"成节点。若改成每段各自画线，节点列处会留空隙、看着像虚线。
   · 五个点等宽五列，圆点水平位置 = 各列中心，所以线覆盖整行即可自然穿过所有圆点。 */
.problem-path{position:relative;margin-top:58px}
.problem-path__line{
  position:absolute;left:10%;right:10%;top:19px;height:2px;
  background:#CADCF8;border-radius:2px;
}
.problem-path__steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  position:relative;
}
.problem-path__step{position:relative;text-align:center;min-width:0}
/* 圆点：10% 位置在列中心，因此 5 列的中心正好落在 10%/30%/50%/70%/90%，
   与上面线的 left/right:10% 两端对齐 —— 线的两端就是首尾圆点，不会多出一截。 */
.problem-path__dot{
  width:18px;height:18px;border:3px solid var(--brand);border-radius:50%;
  background:#fff;margin:11px auto 18px;position:relative;z-index:2;
  display:block;
}
.problem-path__step.is-key .problem-path__dot{
  width:26px;height:26px;border-width:4px;
  margin-top:3px;margin-bottom:16px;
  box-shadow:0 0 0 12px rgba(37,99,235,.12);
}
.problem-path__no{
  display:block;font-size:13px;font-weight:800;color:#91ABEA;
  letter-spacing:.04em;margin-bottom:8px;
}
.problem-path__label{
  display:block;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.problem-path__step.is-key .problem-path__label{color:var(--brand)}
/* 断点说明框：虚线上边 + 顶部一个小折角指向圆点 */
.problem-path__callout{
  margin:26px auto 0;width:min(210px,92%);min-height:104px;
  border:1.5px dashed #8CB0FF;border-radius:14px;
  background:rgba(255,255,255,.6);
  padding:14px;position:relative;text-align:center;
}
.problem-path__callout::before{
  content:"⌄";position:absolute;top:-38px;left:50%;transform:translateX(-50%);
  color:var(--brand);font-size:30px;font-weight:800;line-height:1;
}
.problem-path__callout b{display:block;color:var(--brand);font-size:16px;font-weight:800;margin-bottom:7px}
.problem-path__callout span{display:block;color:#7589AA;font-size:12px;line-height:1.6}
.problem-section .section-conclusion{margin-top:56px;color:var(--accent);padding-left:0}

/* ---------- 03 动画：五个圆点从左到右依次放大 ----------
   取自 6.0 那套「节点脉冲」的时序写法：周期 4.5s、步长 0.9s = 周期的 20%，
   关键帧把亮区**严格控制在 20% 以内**（峰值在 10%），于是同一时刻只有一个点在放大，
   五个点依次走完刚好一个周期，末尾留 2.7s 全静 —— 这样才是"依次"，而不是"一起闪"。
   （踩过的坑：亮区一旦超过步长，相邻两个点就会重叠，"依次"变成"乱闪"。）

   相位靠内联的 --i 排：第 n 个点的 delay = n × 0.9s。 */
.problem-path__steps{--cycle:4.5s;--step:.9s}
@keyframes problemDotPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(37,99,235,0)}
  10%{transform:scale(1.55);box-shadow:0 0 0 9px rgba(37,99,235,.16)}
  20%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
.problem-path__dot{animation:problemDotPulse var(--cycle) var(--ease) infinite;animation-delay:calc(var(--i) * var(--step))}
/* 断点圆点本身带常驻光晕，动画里再叠一层会打架，所以让它在脉冲时把外圈光晕一并推大 */
.problem-path__step.is-key .problem-path__dot{animation-name:problemDotPulseKey}
@keyframes problemDotPulseKey{
  0%{transform:scale(1);box-shadow:0 0 0 12px rgba(37,99,235,.12)}
  10%{transform:scale(1.45);box-shadow:0 0 0 18px rgba(37,99,235,.18)}
  20%,100%{transform:scale(1);box-shadow:0 0 0 12px rgba(37,99,235,.12)}
}
/* 悬停：只指到哪个放大哪个，**不动动画**。
   这里用 CSS Transforms L2 的独立变换属性 scale —— 它与动画用的 transform 是叠加关系，
   且不在 @keyframes 作用域内，所以动画的 startTime / delay / 相位一个都不动。
   （用 animation-play-state 或 animation:none 都会重建动画，移开鼠标后相位永久错开。） */
.problem-path__step{transition:scale .22s var(--ease)}
.problem-path__step:hover{scale:1.04}
.problem-path__dot,.problem-path__callout{transition:scale .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.problem-path__step:hover .problem-path__dot{scale:1.5}
.problem-path__step:hover .problem-path__callout{border-color:var(--brand);background:rgba(255,255,255,.9)}
/* 尊重系统的"减少动态效果"设置 —— 动画是装饰，不该成为无障碍障碍 */
@media(prefers-reduced-motion:reduce){
  .problem-path__dot{animation:none}
}

/* 窄屏：通线在竖排下没有意义，收起来，改成左对齐的竖排卡片 */
@media(max-width:900px){
  .problem-path{margin-top:40px}
  .problem-path__line{display:none}
  .problem-path__steps{grid-template-columns:1fr;gap:26px}
  .problem-path__step{display:grid;grid-template-columns:44px 64px 1fr;align-items:center;text-align:left;gap:0}
  .problem-path__dot,.problem-path__step.is-key .problem-path__dot{margin:0 auto;grid-row:1}
  .problem-path__no{margin:0;grid-column:2;grid-row:1;text-align:left}
  .problem-path__label{grid-column:3;grid-row:1}
  .problem-path__callout{
    grid-column:2/4;grid-row:2;margin:14px 0 0;width:100%;
    min-height:0;text-align:left;padding:12px 14px;
  }
  .problem-path__callout::before{display:none}
}
@media(max-width:520px){
  .problem-path__label{font-size:17px}
}

/* ---------- 04 跃港互联怎么做：M3 大数字卡 · 四张并排 ---------- */
/* 来源：参考/03-04款式库.html 的 M3 变体（2026-10-01 由用户指定替换原 M4）。
   取舍见 src/sections/home.mjs 里 approach 的注释：数字升为视觉主体，标题压小，
   步骤名退成底部圆角标签。
   配色映射（参考页 token → 本站 token）：
     --line   #E3E8F0 → var(--rule)（本站卡片体系统一用 rule）
     --muted  #64748B → var(--ink-mute)
     --blue   #2563EB → var(--brand)
   注意：.m3-num 用 background-clip:text + -webkit-text-fill-color:transparent，
   color 属性实际不参与渲染（被裁掉），所以数字上不能再挂基于 color 的动画。
   这正是 M4 那套「序号依次点亮」退役的原因（见 yuegang-components.css）。 */
.m3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.m3-card{background:linear-gradient(180deg,#FFFFFF,#F8FAFF);border:1px solid var(--rule);border-radius:16px;padding:23px 20px 21px;transition:.24s var(--ease)}
.m3-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(13,43,102,.09);border-color:#C9D9F6}
.m3-num{font-size:40px;font-weight:900;letter-spacing:-.055em;line-height:1;color:#1E4FB8;background:linear-gradient(135deg,#2563EB 10%,#7FB2FF 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .26s var(--ease),transform .3s var(--ease)}
.section .m3-card h4{font-size:18px;letter-spacing:-.02em;margin:14px 0 8px;color:var(--ink)}
.m3-card p{margin:0 0 17px;font-size:13.5px;color:var(--ink-mute)}
.m3-tag{display:inline-block;font-size:11.5px;font-weight:800;color:var(--brand);background:#F2F6FF;border-radius:100px;padding:4px 11px;transition:opacity .26s var(--ease),transform .3s var(--ease)}
/* ---- 04 hover：标题 + 描述「居中放大」，顶掉「01」大数字与「诊断」标签 ----
   （2026-10-01 用户要求；上一版做成 translateY(-44px)+scale(1.08) 被否：
     "只是上移了，也没看出来放大" —— 1.08 幅度太小，而 -44px 位移喧宾夺主。）
   这一版按用户原话做两件事：① 放大；② 居中。不动位置。

   怎么放大：
   用 transform（非 font-size）→ 不重排、卡片高度不变、四张卡不抖动。
   放大倍数取 1.28（旧版 1.08 的 3.5 倍幅度，肉眼一眼可见）。

   为什么"居中"反而让倍数能开更大：
   文字左对齐时，scale 只能向左不动、向右长，右缘受卡片右边界卡死
   —— 实测四列最窄态（1081px）卡宽 235.6px、最长一行 175.5px，
   左对齐最多放到 1.22 就顶边。
   改成 text-align:center 后文字以卡片中心为轴两侧对称生长，
   上限 = 卡宽一半 ÷ 文本半宽 = 117.8/87.75 ≈ 1.34，1.28 仍在卡内。

   transform-origin 用 center（不是上一版的 left top）：居中放大必须绕自身中心，
   否则会像上一版那样整体偏移。translateY(-5px) 只做"光学居中"微调
   （文本块天生比卡片正中低约 5px），不是上一版那种 -44px 的位移。 */
.m3-body{transform-origin:center center;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.m3-card:hover .m3-body{transform:translateY(-5px) scale(1.28);text-align:center}
.m3-card:hover .m3-num{opacity:0;transform:translateY(-10px)}
.m3-card:hover .m3-tag{opacity:0;transform:translateY(12px)}

/* ---------- 04「消费已经发生，问题是有没有落到你的店」 ---------- */
/* 2026-10-09：04 整页换成 7.0 参考页的 .transaction 结构。
   来源配色 → 本站 token 映射：
     --blue #2563EB → var(--brand)；--navy #0D2B66 → var(--deep)；
     --muted #7C8BA3 → var(--ink-mute)；#DDE6F4/#DEE7F3 → var(--line)。
   **标题样式一行没改** —— 大标题仍是 .section-head__title，小标签仍是 .section-head__eyebrow；
   这里只负责标题下方那块「交易链路」主体的排版与 hover。
   .tx-card 的 hover 沿用 02 那套「原地放大、不位移」的思路（6.0 已确认的交互语言），
   作用对象换成 .tx-num + .tx-label，倍数按 19px 标签的实测宽度收到 1.06。 */
.tx{margin-top:8px}
.tx-grid{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:stretch}
.tx-card{padding:34px 38px;transition:background .3s var(--ease);min-width:0;display:flex;flex-direction:column}
.tx-card+.tx-card{border-left:1px solid var(--line)}
.tx-num{font:840 56px/1 var(--font-display);color:var(--brand);letter-spacing:-.06em;transform-origin:left bottom;transition:transform .34s cubic-bezier(.22,1,.36,1)}
/* 两个数字必须**同字号、同基线**。
   之前给「80+ 门店 · 5K+」单独挂 .tx-num--long 把字号压到 34px，
   于是左右两个数字一个是 56px、一个是 34px，既不齐高也不齐底 —— 用户指出的就是这个。
   7.0 那张卡是 56px 直接排（它的卡面更宽、字号也是 56），
   所以这里也统一回 56px：不靠改字号，靠**不换行 + 允许收缩**来适配窄栏。
   两行都加 white-space:nowrap + min-width:0，长的那条在空间不足时
   由 .tx-card 的 min-width 触发栏宽重分配，而不是掉字号。
   基线对齐：两个 .tx-card 用 align-items:stretch + .tx-num 固定 line-height:1，
   数字行高度一致，下面的标签就自然落在同一条水平线上。 */
.tx-num--long{font-size:56px;letter-spacing:-.055em}
.tx-label{font-size:19px;color:var(--deep);font-weight:770;line-height:1.45;margin-top:20px;transform-origin:left top;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.tx-desc{font-size:11px;line-height:1.75;color:#8996AA;margin-top:8px}
.tx-card:hover .tx-num{transform:scale(1.06)}
.tx-card:hover .tx-label{transform:scale(1.03)}
/* 五步链路：每一步之间用 → 连接，最后一步品牌蓝 —— 与参考页一致 */
.tx-flow{margin-top:28px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.7)}
.tx-flow div{text-align:center;padding:17px 12px;font-size:12px;color:#647591;font-weight:700;position:relative}
.tx-flow div:not(:last-child)::after{content:"→";position:absolute;right:-5px;color:#A0AEC0}
.tx-flow div:last-child{color:var(--brand)}
/* 04 收尾：逐像素对齐 7.0 的 .tx-close ——
   左侧 20px 深藏青加粗结论（line-height 1.55，两行），
   右侧「查看口径说明」胶囊（11px、#56709B、圆角 999）两端对齐。
   参考页那两行之间的 <br> 不保留：本页窄屏下由容器宽度自然折行，
   避免 390px 时强制断行造成孤字。 */
.tx-close{padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.tx-close strong{font-size:20px;line-height:1.55;color:var(--deep);font-weight:700;max-width:820px}
.tx-close .source-link{align-self:flex-start;flex:0 0 auto;font-size:11px;color:#56709B;border:1px solid #D9E2EF;border-radius:999px;padding:10px 16px;background:#fff;text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease)}
.tx-close .source-link:hover,.tx-close .source-link:focus-visible{color:var(--brand);border-color:var(--brand)}

/* ---------- 05 适合哪些商家：C4 斜光（浅色重做） ---------- */
/* 为什么原来的斜光"看起来没效果"，有三个叠加原因：
   ① 配色直接照搬深色版（白 11% + 蓝 22%）—— 蓝光扫蓝底，等同没有光；
   ② 卡片是窄高列表行（实测 320×120），深色版那条 55% 宽的光带在窄卡上占比失衡；
   ③ 光带 base 色和 hover 背景色太接近，缺少明暗差。
   浅色版的正解是**反相**：hover 底色为浅蓝，光带用白色高光（对应深色版的"深底+白光"），
   再把光带收窄到 34% 并加一道品牌蓝边缘，形成"反光扫过"的层次。 */
/* 2026-10-01 起 05 从 4 个行业扩到 5 个（新增「商场 / 购物 / 消费」并置顶）。
   随之把整块从 480px 抬到 600px（用户选定的"方案 B"）—— 若维持 480px，
   5 张卡每张只剩 96px，正文要压到 12.5px，说明文字明显偏小，不适合"扫一眼选行业"。
   面板 600px 时每张卡 120px，与原来 4 卡时的 120.2px 几乎一致，观感不变。
   联动改动：.industry-panel 移到 600px / 360px；05 序号动画周期 5.6s→7s（见 components.css）。 */
.industries-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:stretch}
/* flex:1 1 auto + 卡片 flex:1 1 0 让 5 张卡均分列表高度（列表被 stretch 撑到 600px）。
   不显式给 grow 的话卡片只按内容高排布，列表底部会空出一截。
   内边距与字号**保持原样**：600/5 = 120px，与原来 4 卡时的 120.2px 基本一致，
   内容自然高约 116px 仍放得下，观感不变。
   ≤900px 会把 .industries-grid 换成 grid 两列，那时 flex 简写对 grid item 不生效，无需额外关闭。 */
.industries-grid{display:flex;flex-direction:column;gap:0;margin:0;flex:1 1 auto}
.industry-card{position:relative;overflow:hidden;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:#fff;box-shadow:none;padding:24px 20px;min-height:110px;color:var(--ink);min-width:0;flex:1 1 0}
.industry-card>*{position:relative;z-index:2}
/* 光带构造：真实的反光有「亮带 + 亮带两侧的相对暗缘」。
   只有一条纯白渐变的话，白(255) 压在浅蓝底(#D3E2FD)上只差约 30 级亮度，几乎看不见；
   所以在白核两侧各加一道深海蓝的低透明暗缘，让亮带"立"起来。
   行程按卡片 320px、光带宽 34%(≈109px) 计算：-130% → 330% 恰好整卡扫过。 */
.industry-card::after{content:"";position:absolute;top:-60%;left:0;width:34%;height:220%;z-index:1;pointer-events:none;opacity:0;transform:rotate(16deg) translateX(-130%);background:linear-gradient(90deg,transparent 0%,rgba(13,43,102,.13) 16%,rgba(255,255,255,.62) 36%,#fff 50%,rgba(255,255,255,.62) 64%,rgba(13,43,102,.13) 84%,transparent 100%)}
/* 扫光必须用近似匀速的缓动。
   项目默认的 --ease 是 cubic-bezier(.16,1,.3,1)（spring 式极快起步），
   用在位移型扫光上会导致主体行程在前 20% 就冲完、剩下时间在卡外空转，
   观感就是"闪了一下就没了"。这里单独用 cubic-bezier(.45,.05,.35,1) 让光带真正匀速走过整卡。 */
.industry-card:is(.is-active,:hover,:focus-visible)::after{animation:sweepLight 1.5s cubic-bezier(.45,.05,.35,1) forwards}
.industry-card__head{display:flex;align-items:center;gap:16px}
/* 这里原来是 animation:none!important —— 当初是为了压掉深色版遗留的序号动画，
   但它把 6.0 自己的「序号依次点亮」（yuegang-components.css 里那组 stepMarquee）
   也一并杀掉了，而且带 !important，无论后面怎么写都覆盖不了：
   于是 05 四个序号始终静止，与 04 四步不同步。现在交还控制权。 */
.industry-card__no{font:600 13px var(--font-mono);color:var(--accent)}
.industry-card__name{font-size:20px;text-shadow:none!important}
.industry-card__text{font-size:14px;margin:10px 0 0 34px;color:var(--ink-dim)}
/* hover 底色加深一档（#D3E2FD），白色光带才有足够明暗差可以"扫"出来。 */
.industry-card:is(.is-active,:hover,:focus-visible){background:#D3E2FD;transform:translateX(5px);border-color:var(--brand);box-shadow:-4px 0 0 var(--orange)}
.industry-card:is(.is-active,:hover,:focus-visible) .industry-card__no{color:var(--orange)}
/* 高度 480→600（5 张卡对齐），图片行按原比例 60%（290/480）放大为 360，副文案区 240。 */
.industry-panel{display:grid;grid-template-columns:1fr;grid-template-rows:360px 1fr;min-height:600px;height:600px;margin:0;border:0;border-radius:14px;background:var(--mist);overflow:hidden}
.industry-panel__image{background:url('/assets/img/industry-spa.jpg') center/cover;min-height:0;transition:opacity .18s ease;position:relative}
.industry-panel__image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,43,102,.06),transparent 55%,rgba(255,122,33,.10))}
.industry-panel__copy{padding:24px 30px}
.section .industry-panel__title{font-size:26px;line-height:1.25;margin:8px 0 18px}
.industry-panel__focus{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.industry-panel__focus li{background:#fff;border:1px solid var(--rule);color:var(--ink-dim);padding:6px 12px;border-radius:4px;font-size:14px}
.industry-panel__kicker{font-size:12px;letter-spacing:.15em;color:var(--accent)}
/* 2026-10-09：右侧文案区只保留「图下署名 + 来源链接」。
   7.0 原文那段「当前实景图：……和官网蓝白体系更统一。」是原型评审用的内部说明，
   交付时不该出现，已删除（用户明确要求），同时把原先为它预留的高度收回来。
   署名必须是「按内容宽度的胶囊」：文案区是 flex 列容器，
   <a> 作为 flex item 会被 stretch 拉满整行，看起来像横条而不是徽章，
   所以显式 align-self:flex-start + width:fit-content。 */
.industry-panel__credit{align-self:flex-start;width:fit-content;display:inline-block;margin-top:20px;font-size:11px;color:#56709B;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;background:#fff;text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease)}
.industry-panel__credit::after{content:" ↗";color:var(--brand)}
.industry-panel__credit:hover,.industry-panel__credit:focus-visible{color:var(--brand);border-color:var(--brand)}

.trust-section{background:linear-gradient(135deg,var(--sky),#fff 72%)}.trust-grid{gap:50px}.trust-emphasis{font-size:14px;color:var(--ink-dim);margin-top:24px}.trust-subhead{color:var(--ink);line-height:1.4}.timeline__item{background:transparent;border-color:var(--rule)}.timeline__label{color:var(--ink-dim)}.trust-cta__footnote{color:var(--ink-mute)}.cta-band{background:#fff;padding:85px 0;text-align:center}.cta-band h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.3;color:var(--ink);text-shadow:none}.cta-band p{color:var(--ink-dim)}.footer{background:var(--mist);color:var(--ink-dim);border-top:1px solid var(--rule)}

/* ---------- 06 初步诊断右栏：整体居中 ----------
   2026-10-09 用户要求：「你将得到什么 / 是否具备进一步测试基础 / 当前值得关注的问题 /
   建议优先解决的事项」这一组文案，要和封面的「《港澳客源经营初步诊断》」居中对齐；
   本页「免费申请初步诊断」按钮也居中。
   原因：这栏原来是「封面在左、标题+清单在右」的两列，清单左对齐、封面标题却是居中的，
   两条竖轴不一样，看起来就是"没对齐"。
   改法：把两列收成一列、统一 text-align:center ——
   封面（含其书名）与清单共用同一条中轴；
   清单的圆点用 ::before 定位，居中后仍要保持"点+文"成组，所以改成 inline-block 行内成组。
   只作用于首页 06，不影响其他页面。 */
body.is-home .trust-grid__deliverable{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
body.is-home .trust-grid__deliverable .trust-subhead{text-align:center}
body.is-home .deliverable-list{display:inline-flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;margin:0 auto}
body.is-home .deliverable-list li{padding-left:20px;position:relative}
body.is-home .deliverable-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
body.is-home .trust-grid__cover{justify-content:center}
body.is-home .report-cover{margin-inline:auto}
/* 06 底部 CTA：按钮与脚注一起居中 */
body.is-home .trust-cta{align-items:center;flex-direction:column;text-align:center;gap:14px}
body.is-home .trust-cta .btn{min-width:220px;justify-content:center}
.choice__input:checked+.choice__label{background:#E3EDFE;color:var(--accent-hover);border-color:var(--accent)}.field__error,.form__status.is-error{color:#B91C1C}.diag-form{box-shadow:0 12px 48px rgba(13,43,102,.05)}.filter-chip:is(:hover,.is-active){color:#fff}.field__input{background:#FBFCFE}.field__input:focus{box-shadow:0 0 0 3px #E3EDFE}.btn--primary,.btn--ghost:hover{color:#fff}

/* M4 的 warnPulse（断点徽章脉动）随 M4 一起移除 —— 它只服务 .m4-badge，
   M3 里没有任何元素消费它，留着就是一帧永不播放的死动画。 */

/* 光带行程按卡片宽度 320px、光带宽 34%(≈109px) 计算：
   translateX 的百分比基准是元素自身宽度，所以位移 320px ≈ 294%。
   -130% 起点：光带整体在卡片左外侧；
   +330% 终点：光带右缘越过卡片右边界，全程扫过整张卡。 */
@keyframes sweepLight{0%{opacity:0;transform:rotate(16deg) translateX(-130%)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:rotate(16deg) translateX(330%)}}

@media(max-width:1080px){.m3{grid-template-columns:repeat(2,minmax(0,1fr))}.m3-card:hover .m3-body{transform:translateY(-5px) scale(1.5)}.data-card{flex-basis:calc((100% - 32px)/2);max-width:calc((100% - 32px)/2)}
/* 02 在中等屏就退回单栏：两栏各占一半后，59px 的数字 + 「HONG KONG」组头挤不下，
   实测 1080 以下开始出现数字被裁、组头备注压到名称上。 */
.stats-grid--market{grid-template-columns:1fr}
.stats-grid--market .market-col+.market-col{border-left:0;border-top:1px solid var(--line)}
.tx-grid{grid-template-columns:1fr}
.tx-card+.tx-card{border-left:0;border-top:1px solid var(--line)}
.tx-close{flex-direction:column;align-items:flex-start;gap:14px}
.tx-close p{max-width:none}
}
@media(max-width:1000px){.section-head{grid-template-columns:135px 1fr}.industries-layout{grid-template-columns:270px 1fr}.v3-band{--col-node:56px;--col-break:126px}.hero__title{font-size:clamp(2.6rem,5.4vw,4.8rem)}
/* 深蓝首屏在 980 以下：图改为铺满（inset:0）并右移取景，
   左右渐变收成一层较重的深蓝，保证文案区对比度。 */
.hero--v7::before{inset:0;background-position:0 0,0 0,65% center}
.hero--v7::after{background:linear-gradient(90deg,rgba(11,32,59,.97),rgba(11,32,59,.70))}
.hero__v7-copy{width:min(760px,86vw)}
.hero--v7 .hero__title{font-size:clamp(2.4rem,5.6vw,3.6rem)}
.hero-transition__inner{grid-template-columns:1fr;gap:10px}
}
@media(max-width:1120px){.v3-hint{display:block}}
@media(max-width:720px){
.hero{min-height:100vh;min-height:100svh;padding:118px 0 68px;align-items:flex-start}
.hero--with-bg::before{background-position:56% center}
.hero--with-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.72) 72%,rgba(255,255,255,.94) 100%)}
/* 深蓝首屏窄屏：与 7.0 的 650px 断点同策略 ——
   图往右推（73% center），左右渐变收成一层均匀的深蓝压暗，
   否则文案会压在画面亮部上、读不清。 */
.hero--v7{min-height:100vh;min-height:100svh;padding:0;padding-top:76px}
.hero--v7::before{inset:0;background-position:0 0,0 0,73% center}
.hero--v7::after{background:rgba(11,32,59,.78)}
.hero__v7-inner{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px)}
.hero__v7-copy{width:100%;padding:78px 0}
.hero--v7 .hero__title{font-size:clamp(2.1rem,7.7vw,3.4rem);line-height:1.15}
.hero--v7 .hero__sub{font-size:14px}
.hero--v7 .hero__actions{align-items:flex-start;flex-direction:column}
.hero--v7 .hero__trust{gap:13px}
.hero-transition__inner{grid-template-columns:1fr;gap:10px}
.hero__title{font-size:clamp(2.1rem,7.7vw,3.4rem);line-height:1.25}
.hero__sub{font-size:15px}
.hero__support{font-size:15px}
.hero__reassurances{display:grid;gap:6px}
.hero__inner::after{display:none}
.section{padding-block:56px}
/* 保持居中，不要退回 display:block —— 那会让 meta 左对齐、标题也左对齐，
   与桌面端的居中表头脱节。这里只收紧间距与字号。 */
.section-head{gap:12px;margin-bottom:30px}
.section-head__meta{margin-bottom:6px}
.section-head__title{line-height:1.28;font-size:clamp(1.9rem,7vw,2.6rem)}
.stats-grid{flex-direction:column;gap:22px}
.data-card{flex:1 1 auto;max-width:none;padding-top:22px;padding-bottom:0}
.data-card__value{font-size:54px;margin:14px 0 8px}
.data-card__label{font-size:18px}
.section-conclusion{flex-wrap:wrap}
.m3{grid-template-columns:1fr;gap:14px}
.m3-num{font-size:36px}
.section .m3-card h4{font-size:17px}
.m3-card:hover .m3-body{transform:translateY(-4px) scale(1.35)}
.industries-layout{grid-template-columns:1fr;gap:24px}
.industries-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.industry-card{padding:16px 12px;min-height:106px;border:1px solid var(--rule);border-radius:8px}
.industry-card__head{gap:8px}
.industry-card__name{font-size:15px}
.industry-card__text{font-size:12px;margin:10px 0 0}
/* 05 面板在窄屏：图 250 + 文案 auto。文案区已只剩标题/标签/署名，比之前更矮，
   所以这里不再需要固定行高，让面板跟着内容长高即可。 */
.industry-panel{height:auto;min-height:0;grid-template-rows:250px auto}
.industry-panel__copy{padding:22px}
.section .industry-panel__title{font-size:23px}
.industry-panel__focus{gap:6px}
.industry-panel__focus li{font-size:12px}
/* 02 窄屏：内部指标也收成一列，数字降到 46px 保证「近 1/2」这类短值不换行溢出。 */
.stats-grid--market .metrics{grid-template-columns:1fr}
.stats-grid--market .market-col{padding:26px 4px 30px}
.stats-grid--market .data-card__value{font-size:46px}
.stats-grid--market .data-card__value--long{font-size:38px}
.stats-grid--market .data-card__group-note{position:static;margin-top:6px}
.stats-grid--market .data-card__group-name{font-size:23px}
/* 04 窄屏：两个数字仍必须同字号（原来给长的单压到 26px，又变成一大一小）。
   统一 34px；「80+ 门店 · 5K+」在 390px 单列布局下整行放得下，不需要再分档。 */
.tx-num{font-size:34px}
.tx-num--long{font-size:34px}
.tx-card{padding:26px 18px}
.tx-label{font-size:16px}
.tx-flow{grid-template-columns:1fr}
.tx-flow div:not(:last-child)::after{content:"↓";right:auto;left:50%;bottom:-9px;transform:translateX(-50%)}
.tx-close strong{font-size:17px}
.trust-grid{grid-template-columns:1fr}
.trust-grid__deliverable{grid-template-columns:1fr}
.report-cover{max-width:210px;margin-inline:auto}
.trust-cta{align-items:flex-start;flex-direction:column;gap:16px}
.cta-band{padding-block:60px}
.nav__logo img{height:44px}
.nav__cta{padding:9px 12px;font-size:12px}
.nav__inner{gap:8px}
.nav__right{gap:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero,.section{opacity:1!important;transform:none!important}.hero__light,.hero__inner:after{animation:none}}

/* ---------- 品牌浅色 UI 1.0 ---------- */
.report-cover__svg rect:first-child{fill:var(--deep);stroke:var(--deep)}
.report-cover__svg rect:nth-child(2){fill:var(--brand);stroke:#fff}
.report-cover__svg path{stroke:var(--orange)}
.report-cover__svg rect:nth-of-type(n+3){fill:#fff}
.cta-band{background:linear-gradient(135deg,var(--deep),#173d84 66%,var(--brand));color:#fff;position:relative;overflow:hidden;padding:85px 0;text-align:center}
.cta-band:before{content:"";position:absolute;inset:auto -10% -70% 35%;height:300px;background:radial-gradient(circle,rgba(255,122,33,.42),transparent 64%);display:block!important}
.cta-band h2,.cta-band p{color:#fff;position:relative}
/* 标题原被 5.0 遗留的 max-width:18ch（在 yuegang.css / hypertree.css 里）
   折断成两行，与 gpt 版同步：收尾标题整行居中，不再限宽。
   与 gpt 版唯一差别是配色 —— 此处保留蓝白版的深藏青→品牌蓝渐变。 */
.cta-band h2{max-width:none}
.cta-band .eyebrow{color:#BCD4FF;position:relative}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
@keyframes heroGlow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.8;transform:scale(1.08)}}
@keyframes heroLine{0%,100%{opacity:.4;transform:rotate(-12deg) scaleX(.72)}50%{opacity:.9;transform:rotate(-12deg) scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero__light,.hero__inner:after{animation:none}}

/* ==========================================================================
   关于我们页 —— 结构与样式取自 1.1 源码
   来源：J:/跃港互联/30-归档/官网-方案汇总/官网1.1.1/
         src/pages/fragments/about.html（结构：page-intro / about-grid / principles / closing）
         assets/styles.css（样式）
   用户决定：「搬 1.1 结构，但强制浅色」——
     1.1 生效的 .page-intro 本就是浅色（background:var(--paper)），
     只有更早那条被覆盖的规则才是深藏青 #081e29，所以这里无需做任何"强制"改造。
   作用域限定 body.is-about：.section / .label 是通用类，不加前缀会改到其他页面。
   容器沿用 6.0 的 .wrap（1.1 用 .shell，宽度机制不同，直接搬会与导航/页脚左右不齐）。

   配色说明（2026-10-01）：本版保留蓝白主题色，未采用 1.1 的暖色体系。
   与暖色版相比仅三处配色不同：
     1. .closing 收尾块   砖橙红渐变 → 品牌蓝实心（方案 A，用户选定）
     2. .closing p 正文   暖白 #fff5ee → 半透明白
     3. .btn.light:hover  暖白 #fff1e9 → 浅蓝 #EAF1FE
   其余全部沿用 var() 引用，换配色自动适用。
   蓝白版此前没有浅色的 --bg / --rule（5.0 遗留为 #FFFFFF / 灰青 #D7E4E4），
   这里在 body.is-about 作用域内补齐，不影响其他页面。
   ========================================================================== */

body.is-about{--bg:#FFFFFF;--rule:rgba(13,43,102,.12)}

/* ---- 页头：1.1 的 .page-intro（浅色版，纯白底 + 底部 1px 分隔线）
        6.0 导航是 position:fixed，顶部必须留避让高度；1.1 原值 66px 会钻到导航底下。 ---- */
.is-about .page-intro{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--rule);
  padding:clamp(118px,15vh,172px) 0 58px}
.is-about .page-intro h1{font-family:var(--font-display);font-weight:800;
  font-size:clamp(36px,4.4vw,58px);line-height:1.45;letter-spacing:-.04em;
  max-width:1000px;margin:22px 0 0;color:var(--ink)}
.is-about .page-intro p{color:var(--ink-dim);font-size:17px;line-height:1.75;
  max-width:720px;margin-top:20px}

/* ---- 小标签：1.1 的 .label（左侧 21px 短横线 + 大写字距） ---- */
.is-about .label{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.is-about .label::before{content:"";width:21px;height:2px;background:var(--accent);flex:0 0 auto}

/* ---- 区块：1.1 是 padding:110px 0 的纯色块，没有 6.0 的光晕与底部渐变线 ---- */
.is-about .section{padding:110px 0;background:var(--bg)}
.is-about .section::before,.is-about .section::after{display:none!important}
.is-about .section.tint{background:var(--mist)}

/* ---- 左标题 / 右正文：1.1 的 .about-grid ---- */
.is-about .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.is-about .about-grid .section-title{margin-top:23px}
.is-about .about-grid p{color:var(--ink-dim);margin-top:20px;font-size:16px;line-height:1.85}

/* ---- 区块标题：1.1 的 .section-title ---- */
.is-about .section-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.5vw,45px);letter-spacing:-.035em;line-height:1.4;color:var(--ink);margin:0}

/* ---- 工作原则：1.1 是 2 栏、顶部细线、斜体衬线序号 ---- */
.is-about .principles{display:grid;grid-template-columns:repeat(2,1fr);gap:45px 80px;margin-top:45px}
.is-about .principles article{border-top:1px solid var(--rule);padding-top:22px}
.is-about .principles .num{font:italic 25px Georgia,"Noto Serif SC","Songti SC","SimSun",serif;
  color:var(--accent)}
.is-about .principles h3{font-family:var(--font-display);font-weight:700;font-size:22px;
  line-height:1.3;margin:10px 0;color:var(--ink)}
.is-about .principles p{color:var(--ink-dim);font-size:15px;line-height:1.8;margin:0}

/* ---- 收尾：1.1 的 .closing。蓝白版改为品牌蓝实心 + 白字 + 白底按钮（方案 A） ---- */
.is-about .closing{background:var(--brand);color:#fff;padding:74px 0}
.is-about .closing .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
.is-about .closing h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;line-height:1.45;color:#fff}
.is-about .closing p{color:rgba(255,255,255,.85);margin-top:15px;font-size:16px}
.is-about .closing .btn{min-width:200px}
.is-about .btn.light{background:#fff;color:var(--brand);border-color:#fff}
.is-about .btn.light:hover{background:#EAF1FE;color:var(--accent-hover)}
.is-about .btn.light svg{width:16px;height:16px}

/* ---- 移动端：1.1 的断点把 about-grid / principles 折成单列 ---- */
@media(max-width:900px){
  .is-about .page-intro{padding:100px 0 42px}
  .is-about .page-intro h1{font-size:34px}
  .is-about .section{padding:63px 0}
  .is-about .about-grid{grid-template-columns:1fr;gap:30px}
  .is-about .section-title{font-size:30px}
  .is-about .principles{grid-template-columns:1fr;gap:30px;margin-top:30px}
  .is-about .principles h3{font-size:18px}
  .is-about .closing{padding:52px 0}
  .is-about .closing .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  .is-about .closing h2{font-size:32px}
}