/* ==========================================================================
   AuralMind · 玻璃实验版（lab-glass）
   叠在主干 ../css/style.css 之上，只改「皮肤」，不动结构与交互。

   设计语言（取自 magicdawn 的几个关键做法，再按我们自己的产品改造）：
   1. 大连屏：四屏整屏翻页——总览 → 产品舞台 → 应用场景 → 收尾 / FAQ / 联系。
   2. 液态玻璃：导航是悬浮胶囊；卡片是半透明 + 高光细边 + 柔和深影。
   3. 屏间毛玻璃：后一屏带着一圈光从下方盖上来，前一屏被虚化、压暗（glass.js 按滚动进度驱动）。
   4. 神秘渐变：全站最底层是一层缓慢流动的「极光」，颜色随当前产品切换。
   5. 暗色 / 亮色两套皮肤，同一套结构（html[data-theme]）。
   ========================================================================== */

/* ---------- 可动画的极光颜色（注册后才能平滑过渡；不支持的浏览器会直接跳变，不影响使用） ---------- */
@property --aur-1 { syntax: '<color>'; inherits: true; initial-value: #2f6bff; }
@property --aur-2 { syntax: '<color>'; inherits: true; initial-value: #7a4dff; }
@property --aur-3 { syntax: '<color>'; inherits: true; initial-value: #00b8ff; }

:root {
  --nav-h: 88px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  transition: --aur-1 1.6s ease, --aur-2 1.6s ease, --aur-3 1.6s ease;
}

/* ---------- 极光配色：每一屏、每个产品各一套 ---------- */
html[data-aurora="hero"]         { --aur-1: #2f6bff; --aur-2: #7a4dff; --aur-3: #00b8ff; --dot: #5b8cff; }
html[data-aurora="translate"]    { --aur-1: #2f7bff; --aur-2: #22c3ff; --aur-3: #5b6bff; }
html[data-aurora="voiceengine"]  { --aur-1: #8b5cf6; --aur-2: #ec4899; --aur-3: #4f46e5; }
html[data-aurora="asr"]          { --aur-1: #4f5bd9; --aur-2: #4f8bff; --aur-3: #7a6cf0; }
html[data-aurora="vui-agent"]    { --aur-1: #6366f1; --aur-2: #38bdf8; --aur-3: #a855f7; }
html[data-aurora="spatialaudio"] { --aur-1: #1d6bff; --aur-2: #7c3aed; --aur-3: #06b6d4; }
html[data-aurora="voiceid"]      { --aur-1: #3a46c8; --aur-2: #5b78ee; --aur-3: #6a4fd6; }
html[data-aurora="stories"]      { --aur-1: #3b6cff; --aur-2: #c04df0; --aur-3: #f472b6; }
html[data-aurora="finale"]       { --aur-1: #2f6bff; --aur-2: #22d3ee; --aur-3: #8b5cf6; }
html[data-aurora="product"]      { --aur-1: #2f7bff; --aur-2: #22c3ff; --aur-3: #5b6bff; }

/* ---------- 暗色皮肤 ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060811;
  --ink: #f4f7ff;
  --ink-2: rgba(236, 241, 255, .9);
  --muted: rgba(214, 223, 248, .7);
  --subtle: rgba(214, 223, 248, .48);
  --line: rgba(255, 255, 255, .11);
  --paper: #060811;
  --wash: rgba(255, 255, 255, .05);
  --accent: color-mix(in srgb, var(--aur-1) 68%, #fff);
  --blue: var(--accent);
  --blue-deep: color-mix(in srgb, var(--aur-1) 45%, #fff);
  --glass: rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .12);
  --glass-border: rgba(255, 255, 255, .15);
  --glass-hi: rgba(255, 255, 255, .34);
  --glass-shadow: 0 40px 90px -42px rgba(0, 0, 0, .9);
  --panel: rgba(16, 19, 34, .8);
  --layer: rgba(7, 9, 18, .42);
  --tile: rgba(255, 255, 255, .055);
  --tile-hover: rgba(255, 255, 255, .1);
  --rim-a: rgba(255, 255, 255, .55);
  --rim-b: rgba(255, 255, 255, .05);
  --rim-c: rgba(255, 255, 255, .26);
  --title-grad: linear-gradient(180deg, #fff 18%, rgba(214, 226, 255, .66) 100%);
  --grid-line: rgba(255, 255, 255, .055);
  --fg-r3: rgba(206, 220, 252, .74);
  --fg-r3-strong: #eef3ff;
  --vignette: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- 亮色皮肤：冷白底 + 通透玻璃 ----------
   设计原则（第二轮收敛）：
   1. 少色：背景只留一个主色相，其余两个光斑往主色相靠，并大量兑白，不再出现蓝 / 粉 / 青同屏。
   2. 玻璃要「通透」而不是「发白」：填充只有 15%~30% 的白，靠 1px 深色发丝边 + 顶部白色高光来成形，
      和暗色版里「一个透明框」是同一个逻辑。
   3. 强调色固定在品牌蓝一带，不再随产品大幅换色（换色只体现在背景光里）。 */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f7;
  --ink: #0e1730;
  --ink-2: #26324d;
  --muted: #4b5876;
  --subtle: #76819b;
  --line: rgba(14, 23, 48, .09);
  --paper: #eef1f7;
  --wash: rgba(255, 255, 255, .4);
  --accent: color-mix(in srgb, color-mix(in srgb, var(--aur-1) 28%, #2456e6) 86%, #0a1a4a);
  --blue: var(--accent);
  --blue-deep: color-mix(in srgb, var(--accent) 70%, #0a1a4a);
  --glass: rgba(255, 255, 255, .16);
  --glass-2: rgba(255, 255, 255, .34);
  --glass-border: rgba(24, 44, 110, .11);
  --glass-hi: rgba(255, 255, 255, .92);
  --glass-shadow: 0 30px 70px -38px rgba(36, 58, 130, .38);
  --panel: rgba(247, 249, 254, .84);
  --layer: rgba(240, 244, 252, .34);
  --tile: rgba(255, 255, 255, .2);
  --tile-hover: rgba(255, 255, 255, .5);
  --rim-a: rgba(255, 255, 255, .95);
  --rim-b: rgba(255, 255, 255, .3);
  --rim-c: rgba(255, 255, 255, .7);
  --title-grad: linear-gradient(180deg, #0b1633 8%, #3a5594 100%);
  --grid-line: rgba(15, 26, 51, .06);
  --fg-r3: #41618f;
  --fg-r3-strong: #204571;
  --cta-bg: linear-gradient(135deg, color-mix(in srgb, var(--aur-1) 26%, #2a5cf0), color-mix(in srgb, var(--aur-1) 22%, #1c40b8));
  --cta-ink: #fff;
  --vignette: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(120, 140, 200, .16) 100%);
}
html[data-theme="dark"] {
  --cta-bg: linear-gradient(135deg, var(--aur-1), var(--aur-2));
  --cta-ink: #fff;
}

/* ---------- 亮色下的「深色岛」：总览屏 + 总览屏上的导航 ----------
   白色标题需要一块够深的底，才有对比度。所以亮色主题的第 0 屏是一片「蓝色黄昏」，
   在它范围内直接套用暗色那套透明玻璃的配色；滚到下一屏，导航自动换回浅色玻璃。 */
html[data-theme="light"] .hero0,
html[data-theme="light"][data-screen="hero"] .nav {
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, .92);
  --muted: rgba(240, 246, 255, .8);
  --subtle: rgba(235, 243, 255, .6);
  --line: rgba(255, 255, 255, .2);
  --glass: rgba(255, 255, 255, .1);
  --glass-2: rgba(255, 255, 255, .2);
  --glass-border: rgba(255, 255, 255, .3);
  --glass-hi: rgba(255, 255, 255, .45);
  --tile: rgba(255, 255, 255, .12);
  --tile-hover: rgba(255, 255, 255, .22);
  --panel: rgba(22, 38, 110, .8);
  --accent: #c4d5ff;
  --title-grad: linear-gradient(180deg, #fff 22%, rgba(228, 238, 255, .86) 100%);
  --grid-line: rgba(255, 255, 255, .09);
  --cta-bg: linear-gradient(180deg, #fff, #dce7ff);
  --cta-ink: #1a3aa8;
}
/* ---------- 全局底色 ---------- */
html { background: var(--bg); }
body { background: transparent; color: var(--ink); }
::selection { background: color-mix(in srgb, var(--aur-1) 40%, transparent); color: var(--ink); }
:focus-visible { outline-color: var(--accent); }

/* ==========================================================================
   极光背景层：固定在所有屏的最底层
   ========================================================================== */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; isolation: isolate; }
.aurora::after { content: ""; position: absolute; inset: 0; background: var(--vignette); }
.aurora__blob {
  position: absolute; border-radius: 50%; will-change: transform;
  translate: calc(var(--mx, 0) * -46px) calc(var(--my, 0) * -34px);
}
.aurora__blob--a {
  width: 82vmax; height: 62vmax; left: -22vmax; top: -26vmax;
  background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--aur-1) 72%, transparent) 0%, transparent 100%);
  animation: auroraA 38s ease-in-out infinite alternate;
}
.aurora__blob--b {
  width: 74vmax; height: 58vmax; right: -24vmax; top: 4vh;
  background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--aur-2) 64%, transparent) 0%, transparent 100%);
  animation: auroraB 46s ease-in-out infinite alternate;
}
.aurora__blob--c {
  width: 90vmax; height: 56vmax; left: 14vw; bottom: -34vmax;
  background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--aur-3) 60%, transparent) 0%, transparent 100%);
  animation: auroraC 52s ease-in-out infinite alternate;
}
/* 亮色：三个光斑往同一个主色相靠、并大量兑白（#f1f4fb），得到「一片带色温的雾」而不是三种颜色 */
html[data-theme="light"] .aurora__blob--a { background: radial-gradient(ellipse closest-side, color-mix(in srgb, color-mix(in srgb, var(--aur-1) 46%, #f1f4fb) 78%, transparent) 0%, transparent 100%); }
html[data-theme="light"] .aurora__blob--b { background: radial-gradient(ellipse closest-side, color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--aur-1) 58%, var(--aur-2)) 40%, #f1f4fb) 62%, transparent) 0%, transparent 100%); }
html[data-theme="light"] .aurora__blob--c { background: radial-gradient(ellipse closest-side, color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--aur-1) 62%, var(--aur-3)) 36%, #f1f4fb) 60%, transparent) 0%, transparent 100%); }/* 颗粒：压住渐变的塑料感，也让玻璃有「磨」的质地 */
.aurora__grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] .aurora__grain { opacity: .14; mix-blend-mode: soft-light; }
@keyframes auroraA { 0% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); } 100% { transform: translate3d(12vmax, 9vmax, 0) rotate(22deg) scale(1.14); } }
@keyframes auroraB { 0% { transform: translate3d(0, 0, 0) rotate(10deg) scale(1.05); } 100% { transform: translate3d(-14vmax, 8vmax, 0) rotate(-18deg) scale(.92); } }
@keyframes auroraC { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(-10vmax, -7vmax, 0) rotate(14deg) scale(1.12); } }

/* ==========================================================================
   导航：悬浮玻璃胶囊
   ========================================================================== */
html[data-theme] .nav {
  top: 14px; inset-inline: 0; margin-inline: auto;
  width: min(1180px, calc(100% - 32px)); height: 62px; border-radius: 999px;
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 50px -20px rgba(0, 0, 0, .55);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
html[data-theme="light"] .nav { box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px -26px rgba(36, 58, 130, .45); }
html[data-theme="light"][data-screen="hero"] .nav { box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px -24px rgba(10, 24, 80, .5); }
html[data-theme] .nav.is-scrolled { border-color: var(--glass-border); }
html[data-theme] .nav__inner { width: 100%; padding: 0 12px 0 24px; gap: 28px; }
html[data-theme] .logo-text { color: var(--ink); }
html[data-theme="dark"] .logo-mark i { background: linear-gradient(180deg, var(--aur-2), var(--aur-1)); box-shadow: 0 0 10px color-mix(in srgb, var(--aur-1) 60%, transparent); }
html[data-theme="light"] .logo-mark i { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
html[data-theme] .nav__links > a, html[data-theme] .nav__dropbtn { color: var(--muted); }
html[data-theme] .nav__links > a:hover, html[data-theme] .nav__links a.is-active,
html[data-theme] .nav__dropbtn.is-active, html[data-theme] .nav__dropbtn:hover { color: var(--ink); }
html[data-theme] .nav__toggle span { background: var(--ink); }
html[data-theme] .dropdown {
  /* 与导航胶囊、总览屏其他透明玻璃同一档：只靠 --glass 渐变（约 10%~20% 的白）+ 发丝边 + 内高光成形，
     不再用 86% 的实心底。blur 收到 10px：足够让文字不被背后的线条干扰，又能透出底下的颜色与网格。 */
  color: var(--ink);   /* 面板自己要声明文字色：否则继承 body 的颜色，在「深色岛」里 --ink 是白、body 却是深色，产品名就成了深字 */
  top: calc(100% + 14px); background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--glass-border); border-radius: 24px;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}html[data-theme] .dropdown a:hover { background: var(--tile-hover); }
html[data-theme] .dropdown h5 { color: var(--subtle); }
html[data-theme] .dropdown span { color: var(--muted); }
html[data-theme] .dropdown .dropdown__all { color: var(--accent); }
html[data-theme="dark"] .scroll-progress { background: linear-gradient(90deg, var(--aur-3), var(--aur-1), var(--aur-2)); box-shadow: 0 0 12px var(--aur-1); }
html[data-theme="light"] .scroll-progress { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #fff), var(--accent)); }

/* 主题开关 */
.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: var(--tile); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-hi); transition: background .25s, transform .35s var(--ease);
}
.theme-toggle:hover { background: var(--tile-hover); transform: rotate(18deg); }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; }
html[data-theme="dark"] .theme-toggle__moon, html[data-theme="light"] .theme-toggle__sun { display: none; }

/* ---------- 按钮 ---------- */
html[data-theme] .btn--ghost, html[data-theme] .btn--line, .btn--glass {
  background: var(--tile); border-color: var(--glass-border); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html[data-theme] .btn--ghost:hover, html[data-theme] .btn--line:hover, .btn--glass:hover { background: var(--tile-hover); border-color: var(--glass-border); }
html[data-theme] .btn--primary, .btn--glow {
  color: var(--cta-ink, #fff); border-color: rgba(255, 255, 255, .28);
  background: var(--cta-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 36px -12px color-mix(in srgb, var(--aur-1) 80%, transparent);
}
html[data-theme] .btn--primary:hover, .btn--glow:hover { background: var(--cta-bg); filter: brightness(1.06); transform: translateY(-2px); }
.btn--glow, .btn--glass { min-height: 50px; padding: 12px 28px; font-size: 15px; gap: 12px; }

/* ==========================================================================
   第 0 屏：全幅总览
   版式参考 magicdawn：上半区留给背景视觉，文案落在下半区视觉中心，
   最底部是一条产品名跑马灯（纯视觉，不可点击）。
   ========================================================================== */
.hero0 {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  padding: calc(var(--nav-h) + 4px) var(--gutter) 0;
}
.hero0__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero0__bg canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62;
  -webkit-mask-image: radial-gradient(ellipse 82% 52% at 50% 36%, #000 18%, transparent 80%);
  mask-image: radial-gradient(ellipse 82% 52% at 50% 36%, #000 18%, transparent 80%);
}
.hero0__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center bottom;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 100%, #000 0%, transparent 72%);
}
/* 亮色：蓝色黄昏。上亮下深，白色标题落在较深的下半区，对比度够 */
html[data-theme="light"] .hero0__bg {
  background:
    radial-gradient(64% 40% at 14% 0%, rgba(255, 255, 255, .22), transparent 62%),
    radial-gradient(58% 46% at 90% 26%, color-mix(in srgb, var(--aur-2) 26%, rgba(150, 180, 255, .4)), transparent 68%),
    linear-gradient(180deg, #5f82ea 0%, #4d73e2 30%, #3d62d0 62%, #2b48a2 100%);
}
html[data-theme="light"] .hero0__bg canvas { opacity: .95; mix-blend-mode: screen; }
/* 亮色的总览屏是蓝天：标题 logo 整体用白色版（与导航在这一屏的处理一致） */
html[data-theme="light"] .hero0__brand { --logo-ink: #fff; --am-icon: #fff; }
html[data-theme="light"] .hero0__title { filter: drop-shadow(0 8px 28px rgba(18, 36, 110, .32)); }

.hero0__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: clamp(10px, 1.9vh, 22px); text-align: center; padding-bottom: clamp(150px, 22vh, 230px);
}
/* 主标题（用户 2026-10-26 二次调整）：品牌名「AuralMind」放进玻璃胶囊，下面是一句话副标题。
   副标题字号收到「副标题」量级；它是长句，宽屏下 nowrap 保证不被拆开，手机太窄才允许断行（见文件末尾窄屏规则）。 */
.hero0__title {
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 24px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.3; white-space: nowrap;
}
.hero0__brand {
  --hl: clamp(30px, min(3.6vw, 6.6vh), 54px);
  display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--hl) * .62) calc(var(--hl) * 1.1); border-radius: 999px;
  line-height: 0; color: var(--ink);
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 44px -22px rgba(10, 24, 80, .5);
}
.hero0__sub {
  font-size: clamp(18px, min(1.9vw, 3.8vh), 30px); font-weight: 500; letter-spacing: .02em; line-height: 1.5;
  color: var(--ink-2); text-wrap: balance;
}
html[data-theme="light"] .hero0__sub { text-shadow: 0 1px 16px rgba(18, 36, 110, .3); }
.hero0__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }

/* 产品名跑马灯 */
.hero0__marquee { position: absolute; left: 0; right: 0; bottom: 34px; }
.hero0__marquee-label { margin-bottom: 12px; text-align: center; font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; letter-spacing: .12em; color: var(--ink-2); }
/* 贯穿全屏宽度的玻璃带（参考 magicdawn「合作伙伴」那一条）：
   · 和导航、按钮是同一套透明玻璃 token，并接入液态玻璃（鼠标进入时高光跟手，见文件末尾液态一节）；
   · 两端渐隐做在「带本身」上（mask 同时作用于填充、发丝线和里面的 logo），所以不会有一条硬切的边；
   · 做得比较矮（上下内边距小），把垂直空间还给上面的标题和按钮。 */
.hero0__marquee { pointer-events: none; }
.hero0__marquee-band {
  /* 要的是「几乎看不见的一层」：填充只有 3% 的白、不增饱和（saturate 会把底下的蓝染深一块，显得突兀）、
     发丝线和高光都压到很淡。存在感靠轻微的背景模糊和两条细线，而不是靠颜色。 */
  position: relative; pointer-events: auto; border-block: 1px solid color-mix(in srgb, var(--glass-border) 45%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
  /* 不加 backdrop-filter：背后的 80px 网格线只有 1px 宽，任何模糊（哪怕 2px）都会把它抹掉，带里就看不到网格了。 */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-hi) 28%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.hero0__marquee-viewport { overflow: hidden; padding-block: clamp(9px, 1.1vw, 14px); }.hero0__marquee-track { display: flex; width: max-content; }
.js .hero0__marquee-track { animation: marquee 70s linear infinite; }
/* 首屏一开始滑走就停掉跑马灯（glass.js 加 .is-paused）：层里还有东西在动，整层每帧都是脏的，
   正在被整层模糊的这一屏就永远没法复用上一次的模糊结果。滚回首屏时会自动恢复。 */
.hero0__marquee.is-paused .hero0__marquee-track { animation-play-state: paused; }
/* 间距固定且紧凑；set 末尾补一个同样的间距，两组首尾相接时节奏不变，-50% 平移才能无缝 */
.hero0__marquee-set { --mq-gap: clamp(48px, 5vw, 92px); display: flex; align-items: center; gap: var(--mq-gap); padding-right: var(--mq-gap); flex: 0 0 auto; list-style: none; }
/* logo 统一是白色扁平。不同 logo 的「视觉重量」差很多（PUBG 又宽又粗、飞车又小又细），
   所以每个 li 带一个 --s（以王者荣耀 = 1）：按「不透明像素面积」开平方算出基准，再目测微调；
   li 的高度按最大比例留够，图片在里面垂直居中。略压不透明度，让它们是一排「信任背书」而不是主角。 */
.hero0__marquee { --mq-h: clamp(26px, 2.4vw, 34px); }
.hero0__marquee-set li { --s: 1; display: flex; align-items: center; white-space: nowrap; height: calc(var(--mq-h) * 1.4); }
.hero0__marquee-set li img { display: block; height: calc(var(--mq-h) * var(--s)); width: auto; opacity: .88; }
@keyframes marquee { to { transform: translateX(-50%); } }

.hero0__scroll {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; color: var(--subtle);
}
.hero0__scroll i { width: 1px; height: 16px; background: currentColor; transform-origin: top; animation: scrollCue 2.2s var(--ease) infinite; }
@keyframes scrollCue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }
.btn--glow, .btn--glass { min-height: 50px; padding: 12px 28px; font-size: 15px; gap: 12px; }
/* 矮屏（笔记本 768 ~ 860 高）：整体收一档 */
@media (min-width: 1081px) and (max-height: 860px) {
  .hero0 { padding-top: calc(var(--nav-h) - 8px); }
  .hero0__body { gap: 12px; padding-bottom: 170px; }
  .hero0__brand { --hl: clamp(28px, min(3.4vw, 6vh), 44px); }
  .hero0__marquee-label { margin-bottom: 7px; font-size: 14px; }
  .hero0__marquee { bottom: 26px; }
  .mq-ico { width: 34px; height: 34px; }
  .btn--glow, .btn--glass { min-height: 44px; padding: 9px 24px; font-size: 14px; }
}

/* ==========================================================================
   前屏：产品舞台
   ========================================================================== */
@media (min-width: 1081px) {
  /* 总览与前屏都恰好一屏高：四个停靠点等距，翻页手感一致 */
  .hero0 { height: 100vh; height: 100dvh; min-height: 0; }
  html.js .front {
    height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) - 8px) 0 20px;
  }
  .section--stage { padding: 0; }
  .feature-stage { height: clamp(360px, 52vh, 600px); min-height: 0; aspect-ratio: auto; }
}

/* 舞台画面：玻璃面板 */
html[data-theme] .feature-stage {
  border-radius: 32px;
  background: linear-gradient(160deg, var(--glass-2), var(--glass) 48%, var(--glass));
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
html[data-theme="dark"] .feature-stage { box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 80px rgba(255, 255, 255, .025), var(--glass-shadow); }
/* 高光细边：用 mask 抠出一圈渐变，上沿亮、下沿暗，像玻璃的斜切边 */
.feature-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--rim-a), var(--rim-b) 32%, transparent 58%, var(--rim-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}


html[data-theme] .feature-visual__light {
  background:
    radial-gradient(ellipse 70% 80% at 22% -10%, color-mix(in srgb, var(--aur-1) 46%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 60% 70% at 100% 105%, color-mix(in srgb, var(--aur-2) 38%, transparent) 0%, transparent 62%);
  transition: opacity .6s;
}
html[data-theme="light"] .feature-visual__light {
  background:
    radial-gradient(ellipse 70% 80% at 22% -10%, color-mix(in srgb, var(--aur-1) 20%, #fff) 0%, transparent 64%),
    radial-gradient(ellipse 60% 70% at 100% 105%, color-mix(in srgb, color-mix(in srgb, var(--aur-1) 60%, var(--aur-2)) 14%, #fff) 0%, transparent 62%);
}
html[data-theme] .feature-visual::after { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 38%, transparent) 0, transparent 38%); }
html[data-theme="light"] .feature-visual::after { background: linear-gradient(0deg, rgba(255, 255, 255, .42) 0, transparent 40%); }

/* 画布颜色跟着产品走：主干画布画的是品牌蓝，这里用色相旋转染成各产品的颜色 */
.stage-slide[data-product="translate"]    { --hue: 0deg; }
.stage-slide[data-product="voiceengine"]  { --hue: 62deg; }
.stage-slide[data-product="asr"]          { --hue: 12deg; }
.stage-slide[data-product="vui-agent"]    { --hue: 26deg; }
.stage-slide[data-product="spatialaudio"] { --hue: -14deg; }
.stage-slide[data-product="voiceid"]      { --hue: 36deg; }
html[data-theme="dark"] .feature-stage canvas { filter: brightness(1.45) saturate(1.3) hue-rotate(var(--hue, 0deg)); }
html[data-theme="light"] .feature-stage canvas { filter: saturate(1.05) hue-rotate(calc(var(--hue, 0deg) * .45)); }

/* reel3 画面里的文字：主干按白底写死了蓝灰色，暗色皮肤下改成浅色 */
html[data-theme="dark"] .r3-kicker, html[data-theme="dark"] .r3-concept, html[data-theme="dark"] .r3-status,
html[data-theme="dark"] .r3-micro, html[data-theme="dark"] .r3-visual-caption, html[data-theme="dark"] .r3-label p,
html[data-theme="dark"] .r3-asr-source p, html[data-theme="dark"] .r3-utterance .r3-sample,
html[data-theme="dark"] .r3-actions > span, html[data-theme="dark"] .r3-legend > span,
html[data-theme="dark"] .r3-caption, html[data-theme="dark"] .r3-identity-labels, html[data-theme="dark"] .r3-phases { color: var(--fg-r3); }
html[data-theme="dark"] .r3-tagline, html[data-theme="dark"] .r3-language--target .r3-sample,
html[data-theme="dark"] .r3-transcription .r3-sample, html[data-theme="dark"] .r3-identity-result { color: var(--fg-r3-strong); }
html[data-theme] .r3-footer { border-top-color: var(--line); }
html[data-theme="dark"] .r3-lines i { background: rgba(255, 255, 255, .24); }
html[data-theme="dark"] .r3-actions i { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .r3-phases i { background: rgba(255, 255, 255, .3); }
html[data-theme] .r3-actions > span.is-lit, html[data-theme] .r3-phases span.is-lit { color: var(--accent); }
html[data-theme] .r3-actions > span.is-lit i { border-color: var(--accent); background: color-mix(in srgb, var(--aur-1) 22%, transparent); }
html[data-theme] .r3-status i, html[data-theme] .r3-live-dot, html[data-theme] .r3-caret { background: var(--accent); }
html[data-theme] .r3-dot { color: var(--accent); }
html[data-theme] .r3-key { border-top-color: var(--accent); }

/* ---------- 产品标签：玻璃胶囊组（选中项下的细线仍是轮播进度条） ---------- */
html[data-theme] .stage-nav__row { justify-content: center; margin-top: 16px; }
html[data-theme] .p-tabs {
  gap: 4px; margin-top: 0; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html[data-theme] .p-tabs button { position: relative; padding: 9px 20px 11px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .3s, background .3s; }
html[data-theme] .p-tabs button:hover { color: var(--ink); }
html[data-theme] .p-tabs button[aria-selected="true"] {
  color: var(--ink); background: var(--glass-2);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px -8px rgba(0, 0, 0, .5);
}
html[data-theme="light"] .p-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 6px 18px -8px rgba(48, 78, 150, .5); }
html[data-theme] .p-tabs button::after { left: 20px; width: calc(100% - 40px); bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* 介绍文案 + 四个特性标签 = 同一个「产品介绍」组（格式塔·亲近性）：
   组内靠得近（文案→标签 12px），与上面的产品标签条隔得远一点（22px），宽度对齐同一条 1000px 栏。
   此前文案→标签有 46px（基础样式 .tag-list 自带 margin-top:28px 叠在容器 18px 上），标签像孤岛。 */
html[data-theme] .stage-detail { margin-top: 22px; text-align: center; }
html[data-theme] .stage-detail__desc { max-width: 1000px; margin-inline: auto; font-size: 15.5px; line-height: 1.85; color: var(--muted); }
html[data-theme] .stage-aside { margin-top: 12px; }
html[data-theme] .stage-aside .tag-list, html[data-theme] .stage-detail .tag-list { max-width: 1000px; margin-top: 0; margin-inline: auto; }
html[data-theme] .stage-detail .tag-list li, html[data-theme] .stage-aside .tag-list li {
  justify-content: center; text-align: center; color: var(--ink-2); font-size: 14px; padding: 13px 16px;
  background: linear-gradient(160deg, var(--tile-hover), var(--tile)); border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html[data-theme] .stage-detail .tag-list li::before, html[data-theme] .stage-aside .tag-list li::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (min-width: 1081px) and (max-height: 820px) {
  html[data-theme] .stage-detail { margin-top: 16px; }
  html[data-theme] .stage-detail__desc { font-size: 14.5px; line-height: 1.75; }
  html[data-theme] .stage-aside { margin-top: 12px; }
  html[data-theme] .stage-detail .tag-list li, html[data-theme] .stage-aside .tag-list li { padding: 10px 14px; font-size: 13px; }
}

/* ==========================================================================
   屏间毛玻璃：后屏 / 第三屏带着一圈光从下方盖上来
   ========================================================================== */
html[data-theme] .back, html[data-theme] .screen3 {
  background: var(--layer);
  -webkit-backdrop-filter: blur(34px) saturate(1.6); backdrop-filter: blur(34px) saturate(1.6);
}
html[data-theme] .js .story-sticky, html[data-theme] .back.is-tinted .story-sticky { background: transparent; }
@media (min-width: 1081px) {
  /* 圆角只在「正在盖上来」的过程中存在，盖满后归零，否则静止时屏幕上角会露出缺口 */
  html[data-theme] .back { border-radius: calc((1 - var(--p1, 1)) * 40px) calc((1 - var(--p1, 1)) * 40px) 0 0; }
  html[data-theme] .screen3 { border-radius: calc((1 - var(--p2, 1)) * 40px) calc((1 - var(--p2, 1)) * 40px) 0 0; padding-top: 100px; }
  html[data-theme] .back, html[data-theme] .screen3 {
    box-shadow: 0 -34px 90px -24px color-mix(in srgb, var(--aur-1) 55%, transparent), inset 0 1px 0 var(--glass-hi);
  }
  html[data-theme="light"] .back, html[data-theme="light"] .screen3 {
    box-shadow: 0 -34px 90px -24px color-mix(in srgb, var(--aur-1) 40%, transparent), inset 0 1px 0 #fff;
  }
}

/* ==========================================================================
   后屏：应用场景（素材轮播）
   ========================================================================== */
html[data-theme] .sec-desc { color: var(--muted); }
html[data-theme] .sec-title { color: var(--ink); }
html[data-theme] .reel-count { color: var(--subtle); }
html[data-theme] .reel-arrow { background: var(--tile); border-color: var(--glass-border); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-hi); }
html[data-theme] .reel-arrow:hover { background: var(--tile-hover); border-color: var(--accent); color: var(--accent); }html[data-theme] .stage-slide--story .feature-stage, html[data-theme] .story-tabs button { color: var(--muted); }

/* ==========================================================================
   第三屏：收尾 + 常见问题 + 联系
   ========================================================================== */
html[data-theme] .stage-finale h2 {
  font-size: clamp(32px, 4.2vw, 64px); font-weight: 600; letter-spacing: -.05em; line-height: 1.2;
  background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme] .stage-finale p { color: var(--muted); }
html[data-theme] .faq { border-top: 0; display: grid; gap: 10px; }
html[data-theme] .faq__item {
  border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, var(--tile-hover), var(--tile));
  box-shadow: inset 0 1px 0 var(--glass-hi); transition: background .3s, border-color .3s;
}
html[data-theme] .faq__item.is-open { background: linear-gradient(160deg, var(--glass-2), var(--tile-hover)); border-color: color-mix(in srgb, var(--aur-1) 45%, var(--glass-border)); }
html[data-theme] .faq__q { padding: 19px 24px; color: var(--ink); }
html[data-theme] .faq__q:hover { color: var(--accent); }
html[data-theme] .faq__a p { padding: 0 24px 22px; color: var(--muted); }
html[data-theme] .contact-link {
  margin: 6px 0 0 12px; padding: 9px 20px; color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: var(--cta-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 32px -12px color-mix(in srgb, var(--aur-1) 80%, transparent);
}
html[data-theme] .contact-link:hover { color: #fff; border-color: rgba(255, 255, 255, .5); filter: brightness(1.1); }
html[data-theme] .contact__hint { color: var(--subtle); }

/* ---------- 页脚 ---------- */
html[data-theme] .footer {
  background: var(--layer); border-top: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
html[data-theme] .footer__brand p, html[data-theme] .footer__copy { color: var(--muted); }

/* ---------- 视频弹窗 ---------- */
html[data-theme] .modal__backdrop { background: rgba(3, 5, 12, .66); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
html[data-theme="light"] .modal__backdrop { background: rgba(214, 224, 245, .6); }
html[data-theme] .modal__panel {
  background: var(--panel); border: 1px solid var(--glass-border); border-radius: 28px;
  -webkit-backdrop-filter: blur(34px) saturate(1.6); backdrop-filter: blur(34px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 50px 120px -30px rgba(0, 0, 0, .7);
}
html[data-theme] .modal__close { background: var(--tile-hover); color: var(--ink); border: 1px solid var(--glass-border); }
html[data-theme] .modal__switch { background: var(--tile); }
html[data-theme] .modal__chip { border-color: var(--glass-border); color: var(--muted); }
html[data-theme] .modal__chip.is-active { background: var(--cta-bg); border-color: transparent; color: #fff; }
html[data-theme] .modal__media { background: #05070d; }
html[data-theme] .modal__placeholder { background: radial-gradient(ellipse at 65% 30%, color-mix(in srgb, var(--aur-1) 30%, transparent), transparent 70%), #080b16; color: #e8efff; }
html[data-theme] .modal__placeholder::before { border-color: rgba(255, 255, 255, .3); color: #d7e5ff; }
html[data-theme] .modal__placeholder span { color: rgba(214, 223, 248, .7); }
html[data-theme] .modal__meta h3 { color: var(--ink); }
html[data-theme] .modal__meta p { color: var(--muted); }


/* ==========================================================================
   窄屏：所有屏回到普通文档流，玻璃与极光照常，只调版式
   ========================================================================== */
@media (max-width: 1200px) {
  html[data-theme] .nav__inner { gap: 20px; }
}
@media (max-width: 1080px) {
  html[data-theme] .nav { border-radius: 30px; height: auto; min-height: 62px; }
  html[data-theme] .nav__inner { height: 62px; padding-right: 10px; }
  html[data-theme] .nav.is-open { border-radius: 30px; }
  html[data-theme] .nav.is-open .nav__links {
    top: calc(100% + 10px); border-radius: 24px; background: var(--panel); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); box-shadow: var(--glass-shadow); padding: 18px 20px;
  }
  .hero0__scroll { display: none; }
  .hero0__marquee { bottom: 28px; }
  .section--stage { padding-top: 30px; }
  html[data-theme] .back, html[data-theme] .screen3 { margin-top: 0; }
  html[data-theme] .stage-nav__row { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .hero0 { padding-top: 92px; }
  .hero0__title { white-space: normal; }
  .hero0__brand { --hl: clamp(24px, 7.4vw, 34px); }
  .hero0__sub { font-size: clamp(16px, 4.6vw, 20px); }
  .hero0__body { padding-bottom: 150px; }
  html[data-theme] .nav { width: calc(100% - 20px); top: 10px; }
  html[data-theme] .theme-toggle { width: 34px; height: 34px; }
  html[data-theme] .nav__actions .btn { display: none; }
  html[data-theme] .nav__actions { gap: 8px; }
  html[data-theme] .stage-detail { text-align: left; }
}

/* ==========================================================================
   亮色：把「实心白」改成通透玻璃（第二轮）
   原因：暗色里的玻璃是「一个透明的框」，亮色里如果直接填 60%~90% 的白，就成了一块白板，
   在淡底上特别扎眼，还会抢走本该属于内容的视线。
   做法：填充降到 12%~25%；形状靠 1px 深色发丝边 + 顶部一条白色高光来表达；
   只有「被选中 / 展开」的状态才允许变白一点，作为层级提示。
   ========================================================================== */
html[data-theme="light"] .stage-detail .tag-list li, html[data-theme="light"] .stage-aside .tag-list li {
  background: rgba(255, 255, 255, .1); border-color: var(--glass-border); box-shadow: none;
  color: var(--muted); font-size: 13px; padding: 11px 14px;
}
html[data-theme="light"] .stage-detail .tag-list li::before, html[data-theme="light"] .stage-aside .tag-list li::before { width: 4px; height: 4px; background: var(--accent); box-shadow: none; opacity: .75; }
html[data-theme="light"] .stage-detail .tag-list li:hover, html[data-theme="light"] .stage-aside .tag-list li:hover { background: rgba(255, 255, 255, .34); color: var(--ink-2); }
html[data-theme="light"] .p-tabs { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
html[data-theme="light"] .p-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(36, 58, 130, .5); }
html[data-theme="light"] .faq__item { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
html[data-theme="light"] .faq__item:hover { background: rgba(255, 255, 255, .24); }
html[data-theme="light"] .faq__item.is-open { background: rgba(255, 255, 255, .38); border-color: color-mix(in srgb, var(--accent) 26%, var(--glass-border)); }
html[data-theme="light"] .feature-stage {
  background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .1) 58%, rgba(255, 255, 255, .18));
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

html[data-theme="light"] .back, html[data-theme="light"] .screen3 { box-shadow: 0 -34px 90px -28px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 1px 0 var(--glass-hi); }

/* ==========================================================================
   液态玻璃交互（默认恒开：html[data-liquid] 由 index.html 固定设为 "on"。
   原导航栏水滴开关已删；所有规则仍带 [data-liquid="on"] 前缀是为保持原有优先级，不是还留着开关）
   三件事：
   1. 高光跟手：鼠标在玻璃上移动时，一团柔光跟着指针走（glass.js 把指针位置写进 --px / --py）。
   2. 弹性反馈：悬浮时轻微「鼓起」，按下时被「压扁」，松手带一点回弹（过冲曲线）。
   3. 靠近即亮：指针进入玻璃才会亮起，离开后 0.4 秒淡出，不会常亮干扰阅读。
   只在「精细指针」设备（鼠标 / 触控板）上生效，触屏和「减少动效」用户不受影响。
   ========================================================================== */
html[data-theme="dark"] { --lq-c: rgba(255, 255, 255, .2); --lq-edge: rgba(255, 255, 255, .5); }
html[data-theme="light"] { --lq-c: rgba(255, 255, 255, .3); --lq-edge: rgba(255, 255, 255, .95); }
html[data-theme="light"] .hero0, html[data-theme="light"][data-screen="hero"] .nav { --lq-c: rgba(255, 255, 255, .26); --lq-edge: rgba(255, 255, 255, .5); }
html[data-theme] .cs-stage__bar { --lq-c: rgba(255, 255, 255, .2); }

html[data-liquid="on"] :is(.p-tabs, .stage-aside .tag-list li, .stage-detail .tag-list li, .faq__item, .btn--glass, .btn--glow, .btn--ghost, .theme-toggle, .reel-arrow,  .contact-link, .hero0__brand, .ver-switch, .cs-tabs,  .cs-clip__btn) { position: relative; }
html[data-liquid="on"] .hero0__marquee-band { position: relative; }
html[data-liquid="on"] :is(.nav, .p-tabs, .stage-aside .tag-list li, .stage-detail .tag-list li, .faq__item, .feature-stage, .btn--glass, .btn--glow, .btn--ghost, .theme-toggle, .reel-arrow,  .contact-link, .hero0__brand, .ver-switch, .cs-tabs,  .cs-clip__btn, .cs-stage__bar, .hero0__marquee-band)::after {
  content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none;
  opacity: calc(var(--lq, 0) * var(--lq-a, 1)); transition: opacity .45s ease;
  /* 缓动衰减：用 5 个渐近到 0 的色标近似高斯光斑，没有「圆的边缘」。
     半径 --lq-r 由 glass.js 按控件大小算（越大的控件光斑越大、越淡），所以不同控件里观感一致。 */
  background: radial-gradient(circle var(--lq-r, 150px) at var(--px, 50%) var(--py, 50%),
    var(--lq-c) 0%,
    color-mix(in srgb, var(--lq-c) 72%, transparent) 16%,
    color-mix(in srgb, var(--lq-c) 44%, transparent) 36%,
    color-mix(in srgb, var(--lq-c) 20%, transparent) 58%,
    color-mix(in srgb, var(--lq-c) 6%, transparent) 80%,
    transparent 100%);
}
/* .cs-stage__bar 是视频底栏本身（已经是玻璃条），需要自己做定位参照 */
html[data-liquid="on"] .cs-stage__bar { position: relative; }html[data-liquid="on"] :is(.feature-stage)::before { opacity: calc(.7 + var(--lq, 0) * .3); }

@media (hover: hover) and (pointer: fine) {
  html[data-liquid="on"] :is(.p-tabs button, .btn, .theme-toggle, .reel-arrow,  .contact-link, .stage-aside .tag-list li, .stage-detail .tag-list li, .faq__item) {
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), background .25s, border-color .25s, color .25s, filter .25s, box-shadow .25s;
  }
  html[data-liquid="on"] :is(.p-tabs button, .btn, .reel-arrow,  .contact-link):hover { transform: translateY(-1px) scale(1.05); }
  html[data-liquid="on"] .theme-toggle:hover { transform: scale(1.1) rotate(10deg); }
  html[data-liquid="on"] :is(.stage-aside .tag-list li, .stage-detail .tag-list li, .faq__item):hover { transform: translateY(-2px) scale(1.012); }
  html[data-liquid="on"] :is(.p-tabs button, .btn, .theme-toggle, .reel-arrow,  .contact-link, .stage-aside .tag-list li, .stage-detail .tag-list li):active { transform: scale(.95, .92); transition-duration: .12s; }
  html[data-liquid="on"] .faq__item:active { transform: scale(.992, .985); transition-duration: .12s; }
}

/* ==========================================================================
   版本切换 V1 / V2 / V3
   V1、V2 是旧版（legacy/ 目录里的两套画面），V3 是当前玻璃版，方便并排对比。
   ========================================================================== */
.ver-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--tile); box-shadow: inset 0 1px 0 var(--glass-hi);
}
.ver-switch a {
  display: grid; place-items: center; min-width: 36px; height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: .03em; color: var(--muted); transition: background .25s, color .25s;
}
.ver-switch a:hover { color: var(--ink); }
.ver-switch a[aria-current="page"] { color: var(--ink); background: var(--glass-2); box-shadow: inset 0 1px 0 var(--glass-hi); }
html[data-theme="light"] .ver-switch a[aria-current="page"] { background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px rgba(36, 58, 130, .5); }
@media (max-width: 1200px) { .ver-switch a { min-width: 32px; padding: 0 8px; } }
@media (max-width: 760px) {
  .ver-switch { padding: 2px; }
  .ver-switch a { min-width: 28px; height: 26px; padding: 0 6px; font-size: 11px; }
}

/* ==========================================================================
   应用场景 · 新版（按业务分类）
   设计要点：
   1. 分类是「玻璃胶囊」，选中项变亮；每个分类只展示自己的视频，不再是 28 条的长队。
   2. 舞台固定 16:9（手机竖屏 4:5），切换视频时页面不上下跳。
   3. 视频 contain 完整显示，不裁字幕；左右多出来的空白用「当前视频自己的封面」模糊放大填充，
      所以竖屏视频（9:16）和超宽视频（2.3:1）都不会出现难看的黑边。
   4. 视频下面是该分类的缩略图条：点哪个播哪个。
   ========================================================================== */
html[data-theme] .sec-head--cases { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
html[data-theme] .sec-head--cases .sec-title { flex: 0 1 auto; }

/* grid 必须显式写列宽：隐式列默认取内容的最大宽度，缩略图条（flex 一行 6 个）会把整列撑到 850px+，
   手机上就变成「容器比屏幕宽、缩略图条不能横滑、点击位置错位」。minmax(0, 1fr) 让列宽受父级约束。 */
.cs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cs-tabs {
  display: flex; gap: 4px; padding: 5px; width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); box-shadow: inset 0 1px 0 var(--glass-hi);
}
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tabs button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; color: var(--muted); white-space: nowrap; transition: color .3s, background .3s;
}
.cs-tabs button:hover { color: var(--ink); }
.cs-tabs button[aria-selected="true"] { color: var(--ink); background: var(--glass-2); box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px -8px rgba(0, 0, 0, .5); }
html[data-theme="light"] .cs-tabs { background: rgba(255, 255, 255, .12); }
html[data-theme="light"] .cs-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(36, 58, 130, .5); }

/* 舞台 */
.cs-stage {
  --stage-h: clamp(260px, 50vh, 520px);
  position: relative; display: grid; grid-template-rows: var(--stage-h) auto; width: min(100%, 980px); margin-inline: auto;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--glass-border); background: #05070d; box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
.cs-stage__bg {
  position: absolute; inset: -40px; z-index: -2; background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.25) brightness(.62); transform: scale(1.1); transition: background-image .5s;
}
.cs-stage__frame { position: relative; z-index: 1; min-height: 0; overflow: hidden; }
.cs-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.cs-stage__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5, 7, 13, .5), transparent 22%); }
.cs-stage__bar {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px 12px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border-top: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #f4f7ff;
}
.cs-now { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-ctrls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cs-ctrls .reel-count { color: rgba(236, 241, 255, .7); }
.cs-ctrls .reel-arrow { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }
.cs-ctrls .reel-arrow:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); color: #fff; }
.cs-stage.is-error .cs-stage__frame::after { content: "视频暂时无法播放"; position: absolute; color: #dfe8ff; font-size: 14px; }

/* 分类说明 + 缩略图条
   分类说明（.cs-panel__tag）放在「分类胶囊」和「视频」中间，让它和类别标签贴得更近、关系更强（亲近性原则）。
   DOM 里它仍在各自的 panel 里（切换分类、翻译、读屏都不用改），这里用 display:contents 把 panel 的子元素
   提到 .cs 网格里，再用 order 排位：胶囊(1) → 说明(2) → 视频(3) → 缩略图条(4)。 */
.cs-panels, .cs-panel { display: contents; }
.cs-panel[hidden] { display: none; }
.cs-tabs { order: 1; }
.cs-panel__tag { order: 2; margin: -6px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.cs-stage { order: 3; }
.cs-clips { order: 4; }
.cs-clips { list-style: none; display: flex; gap: 12px; margin: 0; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: thin; justify-content: safe center; }
.cs-clip { flex: 0 0 auto; }
.cs-clip__btn {
  position: relative; display: grid; gap: 6px; width: 168px; text-align: left; border-radius: 16px; padding: 6px; color: var(--muted);
  border: 1px solid var(--glass-border); background: var(--tile); box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .25s, border-color .25s, color .25s;
}
.cs-clip__btn:hover { background: var(--tile-hover); color: var(--ink); }
.cs-clip__btn.is-current { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, var(--glass-border)); background: var(--glass-2); }
.cs-clip__thumb { display: block; aspect-ratio: 16 / 9; border-radius: 11px; background-size: cover; background-position: center; background-color: #0b1020; }
.cs-clip__btn.is-current .cs-clip__thumb { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -2px; }
.cs-clip__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 4px 4px; font-size: 12.5px; line-height: 1.45; min-height: 2.9em; text-align: center; }
html[data-theme="light"] .cs-clip__btn { background: rgba(255, 255, 255, .14); }
html[data-theme="light"] .cs-clip__btn:hover { background: rgba(255, 255, 255, .4); }

/* 宽屏：整个场景屏要压进一屏高，所以舞台高度随视口高度收缩，缩略图条保持一行 */
@media (min-width: 1081px) {
  /* 一屏高度分配：导航让位 84 + 标题行 ~64 + 分类胶囊 ~48 + 舞台底栏 ~56 + 分类说明 ~34 + 缩略图 ~120 + 间距 ≈ 440 */
  /* 舞台：宽度优先。宽 = min(屏宽的 62%, 980)，高 = 宽 × 9/16；一屏高度不够时只收缩下面的缩略图条，不挤窄舞台 */
  /* 垂直预算（一屏 = 100vh）：导航让位 78 + 标题行 ~50 + 分类胶囊 ~50 + 间距 ~42 + 舞台底栏 ~56 + 分类说明 ~30 + 缩略图条 --cs-below。
     视频区高度 = 剩下的全部，宽度 = 高度 × 16/9（封顶 980）。先定高度、再推宽度，所以任何屏高下都放得进一屏。 */
  .cs-stage { --cs-below: 150px; --stage-h: clamp(220px, calc(100vh - 78px - 50px - 50px - 42px - 56px - 30px - var(--cs-below)), 551px); width: min(calc(var(--stage-h) * 1.7778), 980px); }
  html.js .section--stories .container { padding-top: 78px; }
  html[data-theme] .sec-head--cases { margin-bottom: 10px; }
  html[data-theme] .sec-head--cases .sec-title { font-size: clamp(28px, 2.4vw, 38px); }
}
/* 矮屏（笔记本）：垂直空间不够，缩略图条收成「纯文字小标签」，让出高度给舞台 */
@media (min-width: 1081px) and (max-height: 959px) {
  .cs-stage { --cs-below: 44px; }
  .cs-clip__btn { width: auto; display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; gap: 0; }
  .cs-clip__thumb { display: none; }
  .cs-clip__label { min-height: 0; -webkit-line-clamp: 1; padding: 0; font-size: 12.5px; white-space: nowrap; }
  .cs-clips { flex-wrap: wrap; overflow: visible; padding-bottom: 0; row-gap: 8px; }
}
@media (min-width: 1081px) and (max-height: 700px) {
  .cs-panel__tag { display: none; }
  .cs-stage { --cs-below: 14px; }
}
/* 手机 / 竖屏：舞台改竖版，竖屏视频（9:16）几乎占满，横屏视频上下由模糊背景填充 */
@media (max-width: 760px) {
  html[data-theme] .sec-head--cases { margin-bottom: 14px; }
  .cs-stage { --stage-h: min(112vw, 560px); width: 100%; border-radius: 22px; }
  .cs-tabs button { height: 36px; padding: 0 14px; font-size: 13px; }
  .cs-clip__btn { width: 132px; }
  .cs-now { font-size: 14px; }
  .cs-clips { justify-content: flex-start; }
  .cs-panel__tag { text-align: center; }
}
@media (hover: none) { .cs-clip__btn:hover { background: var(--tile); color: var(--muted); } }


/* ==========================================================================
   Logo（设计同学提供的「图标 + 文字」整体 logo）
   三种背景取三种配色，对应设计同学给的四个文件：
   · 暗色主题                      → 「彩色标志·深色背景」：渐变图标 + 白字
   · 亮色主题（浅色玻璃上）        → 「彩色标志·白色背景」：渐变图标 + 深字
   · 亮色主题的总览屏（蓝色天空上）→ 「白色标志」：整体纯白（渐变图标末端的深蓝落在蓝底上会糊掉）
   最小尺寸：高度不小于 18px（图标里的细竖条在更小时会糊成一团）。
   ========================================================================== */
.nav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.am-logo { display: block; height: 19px; width: auto; aspect-ratio: 1136 / 166; color: var(--logo-ink, var(--ink)); overflow: visible; }
.am-logo--footer { height: 22px; }
html[data-theme="dark"] { --logo-ink: #fff; }
html[data-theme="light"] { --logo-ink: #0b1220; }
/* 暗色主题的导航玻璃会被下面的极光染成蓝色（随产品变），渐变图标末端的深蓝 #1133D6 落在蓝底上会糊掉，
   所以导航里用纯白版；页脚是纯深色底，仍用彩色版。 */
html[data-theme="dark"] .nav { --am-icon: #fff; }
html[data-theme="light"][data-screen="hero"] .nav { --logo-ink: #fff; --am-icon: #fff; }
@media (max-width: 760px) { .am-logo { height: 17px; } .am-logo--hero { height: var(--hl); } }
/* 总览标题里的 logo：比例与导航一致（同一份 SVG，只是放大），放进玻璃胶囊后整体居中。
   胶囊内边距用 logo 高度的倍数，所以任何屏幕下留白比例都一样。 */
.am-logo--hero { height: var(--hl); }

/* ==========================================================================
   语言切换（中 / EN / 日）：与版本切换（已注释）同款的小胶囊，选中项是一块更亮的玻璃。
   ========================================================================== */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: linear-gradient(160deg, var(--glass-2), var(--glass));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.lang-switch button {
  min-width: 34px; height: 28px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); transition: color .25s, background .25s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: var(--ink); background: var(--glass-2); box-shadow: inset 0 1px 0 var(--glass-hi); }
html[data-theme="light"] .lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -8px rgba(36, 58, 130, .5); }
html[data-theme="light"][data-screen="hero"] .lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, .85); color: #1a3aa8; }
@media (max-width: 1200px) { .lang-switch button { min-width: 30px; padding: 0 7px; } }
@media (max-width: 760px) { .lang-switch { padding: 2px; } .lang-switch button { min-width: 28px; height: 26px; padding: 0 6px; font-size: 11px; } }

/* 英文 / 日文的字更长：导航里的几处文字略收一点，避免换行或顶出胶囊 */
html[data-lang="en"] .nav__links > a, html[data-lang="en"] .nav__dropbtn { font-size: 14px; }
html[data-lang="ja"] .nav__links > a, html[data-lang="ja"] .nav__dropbtn { font-size: 13.5px; letter-spacing: 0; }
html[data-lang="ja"] body { word-break: auto-phrase; line-break: strict; }
html[data-lang="en"] .hero0__sub, html[data-lang="ja"] .hero0__sub { white-space: normal; }

/* ==========================================================================
   背景涟漪（js/ripple.js）：鼠标划过背景时沿轨迹留下很透明的多普勒式圆环
   画布放在各屏自己的背景层里，z-index:-1 压在该屏内容下面，文字和控件永远在它上面。
   总览屏的宿主 .hero0__bg 自己就是 z-index:-1 的层，里面按 DOM 顺序叠在波形画布之上即可。
   ========================================================================== */
.ripple-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ripple-cv--hero { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .ripple-cv { display: none; } }