/* Dataelem 首页 · 线性叙事 · 样式
   来源:prototypes/首页原型-线性叙事.html(2026-09-04 确认版)抽出 */
:root{
  --deep-0:#00151C;--deep-1:#001E28;--deep-2:#0A3D4D;--abyss:#002E3C;
  --mint:#39E5B8;--cyan:#23C2C2;--cyan-rgb:35,194,194;--orange:#F78028;
  --t1:#FFFFFF;--t2:#C6D1D4;--t3:#8EA2A8;--line:#1C4552;
  /* 主题令牌(深色为默认;浅色见下方 [data-theme=light]):
     --bg 底色 / --fg-rgb 前景(描边、玻璃层用) / --accent 文字级强调色(浅色下品牌绿在白底上对比不够,换深绿)/ --logo-text 字标文字色 */
  --bg:var(--deep-0);--bg-rgb:0,21,28;--fg-rgb:255,255,255;
  --accent:var(--mint);--accent-text:var(--accent);--accent-rgb:57,229,184;
  --nav-bg:rgba(0,30,40,.58);--nav-shadow:0 12px 40px rgba(0,0,0,.35);
  --card-grad:linear-gradient(180deg,rgba(0,46,60,.08) 0%,rgba(0,46,60,.22) 55%,rgba(0,46,60,.36) 100%);
  --logo-text:#FFFFFF;
  color-scheme:dark;
  --font-cn:-apple-system,system-ui,"Helvetica Neue","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;   /* 系统字体栈:拉丁字取各平台 UI 字体,中文由 PingFang(mac)/ 微软雅黑(Windows)兜底 */
  --font-en:"Objectivity","Geom","Outfit",var(--font-cn);
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme=light]{
  --bg:#F8FAF9;--bg-rgb:248,250,249;--fg-rgb:18,44,49;
  --t1:#122C31;--t2:#3F5A5E;--t3:#5E7477;--line:#C9D8D6;
  --accent:var(--mint);--accent-text:#20C99E;--accent-rgb:57,229,184;
  --cyan:var(--mint);--cyan-rgb:57,229,184;
  --nav-bg:rgba(248,250,249,.72);--nav-shadow:0 12px 40px rgba(18,44,49,.12);
  --card-grad:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.6) 55%,rgba(255,255,255,.85) 100%);
  --logo-text:#002E3C;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:var(--font-cn);color:var(--t1);background:var(--bg);transition:background .35s,color .35s;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.en{font-family:var(--font-en)}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- 画布(唯一主角) ---------- */
#story-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s ease}
.vignette.on{opacity:1}
#vig{background:linear-gradient(90deg,rgba(var(--bg-rgb),.72) 0%,rgba(var(--bg-rgb),.35) 38%,rgba(var(--bg-rgb),0) 60%)}
body[data-scene=values] #vig.on{opacity:0}   /* 价值观屏:三张卡横铺整行,左侧渐暗会把第一张卡的粒子簇压暗一截;标题底下只有稀疏底噪,不需要这层 */
#vigc{background:radial-gradient(60% 50% at 50% 50%,rgba(var(--bg-rgb),.55),rgba(var(--bg-rgb),0) 100%)}
body[data-scene=s0] #vigc{background:radial-gradient(46% 34% at 50% 50%,rgba(var(--bg-rgb),.72),rgba(var(--bg-rgb),.34) 58%,rgba(var(--bg-rgb),0) 100%)}   /* 开场屏:文案压在形态正中,中心再压一档,kicker 和标题才读得清;边缘照旧不压,尖角保持亮 */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- 导航 ---------- */
/* 顶栏:和内容同宽的透明通栏,全程不变形、不带底(2026-09-21 去掉了滚动后收成毛玻璃胶囊的效果) */
.nav{position:fixed;top:12px;left:0;right:0;z-index:20;margin:0 auto;width:min(1200px,calc(100% - 80px));   /* 与 .wrap 同宽:logo 左缘、GitHub 右缘对齐正文 */
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;white-space:nowrap}
.nav .logo{display:flex;align-items:center;color:var(--logo-text)}   /* 字标文字走 currentColor,浅色下换深青 */
.nav .logo svg{height:24px;width:auto;aspect-ratio:2304/428;display:block}
.nav-actions{display:flex;align-items:center;gap:10px}
/* 深浅色切换:收进导航右侧的小圆钮;深色下露太阳(点了变浅),浅色下露月亮 */
.theme-toggle{width:34px;height:34px;border-radius:999px;cursor:pointer;display:grid;place-items:center;color:var(--t2);
  background:transparent;border:1px solid rgba(var(--fg-rgb),.08);transition:background .2s,border-color .2s,color .2s}
.theme-toggle:hover{color:var(--t1);background:rgba(var(--fg-rgb),.06);border-color:rgba(var(--fg-rgb),.18)}
.theme-toggle svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.theme-toggle .moon{opacity:0;transform:rotate(-40deg) scale(.6)}
[data-theme=light] .theme-toggle .sun{opacity:0;transform:rotate(40deg) scale(.6)}
[data-theme=light] .theme-toggle .moon{opacity:1;transform:none}
/* 中英切换:细描边胶囊里两颗按钮,选中那颗垫一层浅底 */
.lang-toggle{position:relative;display:flex;align-items:center;height:34px;padding:3px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.08)}
.lang-toggle button{position:relative;z-index:1;height:100%;padding:0 12px;border:0;border-radius:999px;background:transparent;cursor:pointer;font:500 12px/1 var(--font-cn);color:var(--t3);transition:color .35s ease}
.lang-toggle button:hover{color:var(--t2)}
.lang-toggle button.is-active{color:var(--t1)}
/* 选中底是一颗独立滑块,JS 按选中按钮的 offsetLeft/offsetWidth 摆位;切换时滑过去,宽度一起过渡(「中文」和「EN」不等宽) */
.lang-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:rgba(var(--fg-rgb),.16);box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1)}
.lang-thumb.no-anim{transition:none}
/* GitHub:实心胶囊主按钮(深色下白底黑字,浅色下反过来);hover 从中心扩一圈暗层 */
.gh-btn{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--t1);color:var(--bg);font:500 14px/1 var(--font-en)}
.gh-btn svg{width:15px;height:15px;fill:currentColor}
.gh-btn::after{content:"";position:absolute;top:50%;left:50%;z-index:-1;width:150%;aspect-ratio:1;border-radius:50%;background:rgba(var(--bg-rgb),.18);
  opacity:0;transform:translate(-50%,-50%) scale(0);transition:transform .36s ease-out,opacity .1s}
.gh-btn:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- 叙事屏 ---------- */
.story{position:relative;z-index:2}
/* 参考 fplus:每屏 200vh 的长驻留区,文字用 sticky 钉在视口里;
   粒子形变只发生在两屏文字交接的那一段滚动里(见 scrollPos) */
.scene{min-height:200vh;position:relative}
.scene.short{min-height:240vh}   /* 转场金句:钉住的时间比常规屏更长,让人把这句读完 */
.scene .pin{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;align-items:center;padding:96px 0 80px}
.wrap{width:min(1200px,calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.txt{grid-column:1/8}
.scene.center .txt{grid-column:3/11;text-align:center}
h1,h2{font-weight:400;letter-spacing:-.01em;line-height:1.25;font-size:clamp(40px,4.2vw,64px)}
.scene.short h2{font-size:clamp(30px,3.2vw,44px);line-height:1.4}
.sub{margin-top:22px;font-size:clamp(16px,1.2vw,19px);color:var(--t2);max-width:32em}
.scene.center .sub{margin-inline:auto}

/* ---------- S0 开场:slogan ---------- */
/* 文案整块居中,粒子形态在它背后同心(cloud 的 cx/cy 就是视口中心,见 story.js SHAPES.cloud);
   -8px 抵掉 .pin 上下内边距(96/80)造成的偏移,让文字块的视觉中心正好落在几何中心 */
.scene.center .txt.hero-copy{grid-column:1/13;text-align:center;transform:translateY(-8px)}
.hero-copy h1{font-size:clamp(44px,5.6vw,84px);line-height:1.25;letter-spacing:-.015em;white-space:nowrap}   /* 单行:「卓越组织的 AI 战略伙伴」;字号上限留出两侧余量,不压到粒子形态的尖角 */
.hero-copy h1 .slogan-start,.hero-copy h1 .slogan-end{display:inline}
.hero-copy h1 em{font-style:normal;color:inherit;font-family:var(--font-en);letter-spacing:-.03em}   /* AI 和整句同色(2026-10-12 由品牌绿改白) */
/* 首屏底部的客户 logo 条:通栏单排,钉在 .pin 底边(.pin 是 sticky,本身就是定位参照);
   复用客户屏的 .logo-viewport/.logo-track/.logo-group/.client-logo,但去掉毛玻璃卡片、调暗,只当一条安静的信任背书,不抢标题和粒子 */
.hero-logos{position:absolute;left:0;right:0;bottom:40px}
.hero-logos .logo-track{animation-duration:160s}   /* 卡片样式、尺寸、间距全部沿用客户屏(毛玻璃胶囊 166×48、logo 按面积配平,上限 116×26、间距 26);23 × 192 ≈ 4400px 一组,160s 一圈 ≈ 28px/s,和客户屏同速 */
#s0:not(.in) .logo-track,#s0.logos-hidden .logo-track,.hero-logos:hover .logo-track,.hero-logos:focus-within .logo-track{animation-play-state:paused}   /* 滚离首屏 / 标签页在后台 / 悬停时停 */

/* ---------- 02 愿景:钉住 320vh,两块大字原地交替 ---------- */
.scene.vision-pin{min-height:180vh}   /* 驻留 80vh:三级文案一起在,停住给人读完 */
#vision .vision-intro,#vision .claim,#vision .role{font-size:clamp(13px,1.1vw,16px);font-weight:400;line-height:1.7;color:var(--t1);letter-spacing:.01em}   /* 本屏文字全部用一级色(深色下纯白) */
.vision-copy .vision-intro{margin-bottom:10px}
#vision .txt.vision-copy{transform:translateY(-7vh)}   /* 布那屏:标题块上移到镜头的清晰带(焦平面那一行在屏高约 43% 处,见 story.js terrain 的 zf) */
.vsteps{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
/* 深色:文字块后面垫一层边缘羽化的深色蒙版(椭圆径向渐变),把文字从缠结的粒子线里剥出来;随本屏 .in 淡入。浅色不加,白底上会显脏 */
:root:not([data-theme=light]) .vsteps::before{content:"";position:absolute;z-index:-1;inset:-100% -62%;pointer-events:none;opacity:0;transition:opacity .8s ease;   /* 2026-10-13 布那屏按要求放大、压深:外扩约四成,中心到 .96 */
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--bg-rgb),.96) 0%,rgba(var(--bg-rgb),.88) 40%,rgba(var(--bg-rgb),.55) 66%,rgba(var(--bg-rgb),0) 100%)}
:root:not([data-theme=light]) #vision.in .vsteps::before{opacity:1}
/* 浅色也垫一层,但轻得多(2026-10-13 按要求加):同样的椭圆,中心只压到 .7,边缘很快归零,把字后面的点阵稍微退一点就够 */
:root[data-theme=light] .vsteps::before{content:"";position:absolute;z-index:-1;inset:-100% -62%;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--bg-rgb),.7) 0%,rgba(var(--bg-rgb),.5) 40%,rgba(var(--bg-rgb),.22) 66%,rgba(var(--bg-rgb),0) 100%)}
:root[data-theme=light] #vision.in .vsteps::before{opacity:1}
.vstep{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out}   /* 三级一起随本屏 .in 入场,只做很小的错峰 */
#vision.in .vstep{opacity:1;transform:none}
#vision.in .vstep:nth-child(2){transition-delay:.08s}#vision.in .vstep:nth-child(3){transition-delay:.16s}
#vision h2{font-size:clamp(56px,7.2vw,112px);line-height:1.2;letter-spacing:.02em;white-space:nowrap;color:var(--t1)}   /* 一级:整行白字(2026-10-12 由品牌绿改白) */
/* 二级、三级两句钉在屏底:左下是 .claim、右下是 .role;左右边距和 .wrap 的外边距对齐(max(40px,(100%-1200px)/2)) */
.vision-foot{position:absolute;left:max(40px,calc((100% - 1200px)/2));right:max(40px,calc((100% - 1200px)/2));bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.vision-foot .claim{text-align:left;max-width:26em;text-wrap:balance}
.vision-foot p{text-shadow:0 0 4px var(--bg),0 0 8px var(--bg),0 0 14px var(--bg),0 0 22px var(--bg)}   /* 底色晕一圈:字下面是地面最亮的几行,粒子还在动,光靠 JS 压暗矩形不够,字边再垫一层底色 */
.vision-foot .role{text-align:right;max-width:30em;text-wrap:balance}
#vision.in .vision-foot .claim{transition-delay:.08s}#vision.in .vision-foot .role{transition-delay:.16s}

/* ---------- 01 产品:四行清单 ---------- */
.products{grid-column:1/13;margin-top:48px;border-top:1px solid rgba(var(--fg-rgb),.12)}
.product{position:relative;isolation:isolate;display:grid;grid-template-columns:44px 1fr 1.2fr 190px 24px;align-items:center;gap:16px;padding:26px 16px;border-bottom:1px solid rgba(var(--fg-rgb),.12)}
/* 点亮的底色画在 ::before 上,和行同宽(不探出正文宽度);四行固定留 16px 内边距,点亮与否内容都不挪位,序号 / logo / 文案始终对齐 */
.product::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(var(--accent-rgb),.06);opacity:0;transition:opacity .25s;pointer-events:none}
/* 点亮态:滚动步进(.on)与鼠标 hover 同一套样式;鼠标停在别的行时,滚动点亮的那行让位 */
.product:hover::before,.product.on::before{opacity:1}
.products:has(.product:hover) .product.on:not(:hover)::before{opacity:0}
.product .serial{color:var(--t3)}
.product h3{font-family:var(--font-en);font-size:26px;font-weight:400;letter-spacing:-.02em;line-height:1.3;display:flex;align-items:center;gap:6px;min-height:34px}
/* 产品 logo:取自视觉物料库(192.168.106.173:8090)的 SVG,处理成单色、裁掉留白后当蒙版用,颜色跟着 --t1 走,深浅色都能用。
   每个 logo 的 --h 单独给:字标的字高占比不一样(BISHENG 几乎满高,Clawith 的字只有图形的六成),按字高 ≈19px 配平,不是按总高对齐。
   DSH Desktop 物料库里只有图形标,没有横版,所以是图形 + 文字 */
.product .pname{font-size:22px}   /* DSH Desktop 图形标旁的文字:26px 比另外三个 logo 的字重,收一档 */
.plogo{display:block;flex:none;height:var(--h);width:calc(var(--h)*var(--ar));background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}   /* mask-image 写在元素的行内样式里:放进自定义属性的相对 url() 会按样式表的路径解析,找不到文件 */
.product p{color:var(--t2);font-size:15px}
.product .domain{color:var(--t3);text-align:right;text-transform:none}
.product .arrow{color:var(--accent-text);font-size:18px;transition:transform .25s}
.product:hover .arrow,.product.on .arrow{transform:translate(3px,-3px)}
.products:has(.product:hover) .product.on:not(:hover) .arrow{transform:none}

/* ---------- 客户 logo 流(首屏底部那一条在用;原 04 客户屏已拿掉) ---------- */
.logo-viewport{width:100%;overflow:hidden}   /* 两端不做渐隐遮罩,logo 直接裁在容器边 */
.logo-track{display:flex;width:max-content;animation:client-drift 80s linear infinite;will-change:transform}
.logo-viewport:nth-child(2) .logo-track{animation-duration:73s;animation-direction:reverse}
@keyframes client-drift{to{transform:translateX(-50%)}}
.logo-group{--logo-area:1500;list-style:none;display:flex;align-items:center;gap:26px;width:max-content;flex:none;margin:0;padding:0 26px 0 0}
.logo-group li{width:166px;height:48px;display:flex;align-items:center;justify-content:center;flex:none}
/* 2026-09-23 去掉了 logo 胶囊底(原来和导航胶囊同一套毛玻璃底 / 描边 / 投影,一排投影连起来会在 logo 行后面糊出一条灰带):logo 直接落在粒子画布上 */
/* logo 尺寸按视觉面积配平(story.js sizeLogos):每个 logo 面积 ≈ --logo-area px²,不封顶;
   下面的 max-width/max-height 只是无 JS 时的兜底框(JS 配平时会显式解除) */
/* 每张素材使用同一套三档灰阶;主题切换时换对应素材,保留图形内部的层次。 */
.client-logo{display:block;width:auto;height:auto;max-width:116px;max-height:26px;flex:none;object-fit:contain;opacity:1;transition:filter .25s}
.logo-group li:hover .client-logo{filter:brightness(1.12)}

/* 逐屏渐显:错峰上浮 */
.r{opacity:0;transform:translateY(22px);transition:opacity .52s ease-out,transform .52s ease-out}
.in .r{opacity:1;transform:none}
.in .r:nth-child(1){transition-delay:.15s}.in .r:nth-child(2){transition-delay:.23s}.in .r:nth-child(3){transition-delay:.31s}
.in .r:nth-child(4){transition-delay:.39s}.in .r:nth-child(5){transition-delay:.47s}.in .r:nth-child(6){transition-delay:.55s}

/* 首屏 */

/* 价值观三张卡:上半是透明的"舞台",粒子簇透过来要清晰,所以不加 backdrop 模糊;下半略实衬文字。
   过渡按属性拆开:opacity/transform 走渐显(带错峰延迟 --d),translate/描边/阴影走 hover(不带延迟),两套互不拖累 */
.values{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.values .v{position:relative;overflow:hidden;padding:22px 24px 26px;border:1px solid rgba(var(--fg-rgb),.08);border-radius:16px;
  background:var(--card-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);--mx:50%;--my:35%}
#values .values .v{transition:opacity .52s ease-out var(--d,0s),transform .52s ease-out var(--d,0s),
  translate .45s cubic-bezier(.2,.7,.2,1),border-color .45s,box-shadow .45s,filter .45s}
#values .values .v:nth-child(1){--d:.15s}#values .values .v:nth-child(2){--d:.23s}#values .values .v:nth-child(3){--d:.31s}
/* 跟随鼠标的聚光(--mx/--my 由 JS 写入) */
.values .v::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),0) 62%)}
/* 渐变描边:用 mask 只留 1px 边,hover 时亮起 */
.values .v::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(155deg,rgba(var(--accent-rgb),.95),rgba(var(--accent-rgb),.12) 42%,rgba(var(--cyan-rgb),.25) 70%,rgba(var(--accent-rgb),.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.values .v:hover{translate:0 -6px;border-color:rgba(var(--accent-rgb),.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -24px rgba(var(--accent-rgb),.38)}
.values .v:hover::before,.values .v:hover::after{opacity:1}
.values:has(.v:hover) .v:not(:hover){filter:brightness(.62) saturate(.85)}   /* :has:鼠标停在卡片间的空隙时不压暗任何一张 */
[data-theme=light] .values:has(.v:hover) .v:not(:hover){filter:none;opacity:.6}   /* 浅色:压暗会发灰,改成退淡 */
.values .v .stage{height:140px;margin-bottom:6px}
.values .v h3{font-size:22px;font-weight:400;margin-bottom:10px;transition:color .3s}
.values .v p{color:var(--t2);font-size:15px;line-height:1.7}
.values .v .k{display:flex;align-items:center;gap:10px;color:var(--accent-text);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;opacity:.75;transition:opacity .3s}
.values .v .k::after{content:"";width:0;height:1px;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.values .v:hover .k{opacity:1}.values .v:hover .k::after{width:28px}

/* 键盘焦点:鼠标点击不显形,Tab 走位才显形 */
:focus{outline:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.values .v:focus-visible{outline-offset:2px;border-radius:14px}
.skip{position:fixed;top:-60px;left:20px;z-index:40;padding:10px 18px;border-radius:999px;background:var(--t1);color:var(--bg);
  font-size:14px;font-weight:600;transition:top .2s}
.skip:focus{top:14px}

/* 页脚 */
footer{position:relative;z-index:2;background:transparent;border-top:1px solid rgba(var(--fg-rgb),.06);min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;padding-top:110px}   /* 一整屏,透出粒子画布。信息行贴在导航下方(padding-top),字标贴底,多出来的高度全部给中间的 .foot-stage 吃掉 */
footer .wrap.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}   /* 要压过后面的 footer .wrap{display:block} */
/* 「预约交流」:与 GitHub 同一套实心胶囊,略大一档;hover 箭头右移 */
.cta-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  background:var(--t1);color:var(--bg);font:500 15px/1 var(--font-cn)}
.cta-btn::after{content:"";position:absolute;top:50%;left:50%;z-index:-1;width:150%;aspect-ratio:1;border-radius:50%;background:rgba(var(--bg-rgb),.18);
  opacity:0;transform:translate(-50%,-50%) scale(0);transition:transform .36s ease-out,opacity .1s}
.cta-btn:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cta-btn span[aria-hidden]{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cta-btn:hover span[aria-hidden]{transform:translateX(3px)}
.cta-btn:disabled{opacity:.55;cursor:default}
.foot-stage{flex:1 0 200px;min-height:200px}   /* 信息行与字标之间的留白:至少 200px(小屏刚好是这个值),屏幕再高就把多余高度都撑在这里,信息行不往下掉。粒子球心挂在字标上沿(refreshFooter),不受这段高度影响 */
footer .wrap{display:block}
.foot-cols{display:flex;justify-content:space-between;width:100%;gap:24px 72px;font-size:14px;color:var(--t3)}   /* 业务合作靠左、保持连接靠右(2026-09-23 去掉了左侧「联系我们」标题) */
.foot-cols b{display:block;color:var(--t1);margin-bottom:12px;font-size:14px}
.foot-cols a,.foot-cols button{display:block;margin-bottom:8px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}   /* 「预约交流」是按钮,样式与旁边的链接一致 */
.foot-cols a:hover,.foot-cols button:hover{color:var(--accent-text)}
footer .foot-legal{display:flex;justify-content:space-between;padding:18px 0 22px;font-size:12px;text-transform:none;letter-spacing:0;color:var(--t3)}
.stream{height:6px;background:linear-gradient(90deg,var(--abyss),var(--cyan),var(--mint))}
[data-theme=light] .stream{background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),var(--mint))}
/* 通栏字标:贴在页脚最底部,下面直接接渐变条;不钉住、不拉长滚动 */
.bigmark-wrap{width:min(1200px,calc(100% - 80px));margin:0 auto}   /* 与 .wrap 同宽 */
.bigmark{display:block;width:100%;height:auto;color:var(--logo-text)}   /* 不要给 svg 本身加 padding:粒子归位靠它的盒子反算绿点位置 */

/* ---------- 英文排版(html[lang=en],由 story.js setLang 切) ----------
   中文标题按"单行不换行"调的字号,英文长出一截:标语拆两行、愿景大字按 span 分行并降一档,拉丁字统一走 --font-en */
:root[lang=en] h1,:root[lang=en] h2,:root[lang=en] h3{font-family:var(--font-en);letter-spacing:-.02em}
:root[lang=en] .hero-copy h1{font-size:clamp(40px,4.6vw,72px);line-height:1.12}
:root[lang=en] .hero-copy h1 .slogan-start,:root[lang=en] .hero-copy h1 .slogan-end{display:block}
:root[lang=en] #vision h2{font-size:clamp(48px,5.6vw,88px);line-height:1.1;letter-spacing:-.02em}
:root[lang=en] #vision h2 span{display:block}
/* ---------- 预约交流弹窗 ---------- */
.contact-modal{margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid rgba(var(--fg-rgb),.1);border-radius:24px;
  background:var(--bg);color:var(--t1);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain}
[data-theme=light] .contact-modal{box-shadow:0 30px 80px rgba(18,44,49,.18)}
.contact-modal::backdrop{background:rgba(var(--bg-rgb),.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.contact-modal:focus{outline:none}
.contact-modal[open]{animation:cm-in .35s cubic-bezier(.22,1,.36,1)}
.contact-modal[open]::backdrop{animation:cm-fade .35s ease}
@keyframes cm-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes cm-fade{from{opacity:0}}
.contact-form{position:relative;padding:24px}
.cm-close{position:absolute;top:24px;right:24px;   /* 与标题行同一水平线:标题 26px×1.3≈34px 高,按钮也是 34px,顶部对齐即居中 */
  width:34px;height:34px;border-radius:999px;border:0;background:transparent;color:var(--t2);font-size:20px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.cm-close:hover{color:var(--t1);background:rgba(var(--fg-rgb),.06)}
.contact-form h3{font-size:26px;font-weight:400;line-height:1.3}
.cm-sub{margin-top:8px;color:var(--t3);font-size:14px}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.cm-wide{grid-column:1/-1}
.cm-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--t2)}
.cm-field i{font-style:normal;color:var(--accent-text);margin-left:2px}
.cm-field input{width:100%;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(var(--fg-rgb),.12);background:rgba(var(--fg-rgb),.03);
  color:var(--t1);font:15px/1.5 var(--font-cn);transition:border-color .2s,background .2s}
.cm-field input::placeholder{color:var(--t3);opacity:.7}
.cm-field input:focus{outline:none;border-color:var(--accent);background:rgba(var(--fg-rgb),.05)}
.cm-field .bad{border-color:var(--orange)}
.cm-err{min-height:20px;margin-top:12px;font-size:13px;color:var(--orange)}
.cm-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.cm-note{font-size:12px;color:var(--t3)}
.contact-modal .cta-btn{height:36px;padding:0 18px;font-size:14px}   /* 弹窗里的按钮与 36px 输入框同高 */
.cm-done{padding:24px 0 4px;text-align:center}
.cm-done p{margin:10px 0 28px;color:var(--t2);font-size:15px}
@media (max-width:600px){
  .cm-grid{grid-template-columns:1fr}
  .cm-actions{flex-direction:column-reverse;align-items:stretch}.cm-actions .cta-btn{justify-content:center}
}

@media (max-width:900px){
  .nav{top:8px;width:calc(100% - 40px)}
  .nav .logo svg{height:20px}.nav-actions{gap:6px}.gh-btn span{display:none}.gh-btn{width:34px;padding:0;justify-content:center}
  .wrap,.bigmark-wrap{width:calc(100% - 40px)}
  .txt,.scene.center .txt{grid-column:1/13}
  h1,h2{font-size:clamp(28px,7vw,36px)}
  #vig{background:linear-gradient(180deg,rgba(var(--bg-rgb),.55),rgba(var(--bg-rgb),.25))}
  /* 手机:三张卡竖排,每张改成横版(左边舞台、右边文字),一屏放得下 */
  .values{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .values .v{padding:16px 18px;display:grid;grid-template-columns:88px 1fr;grid-template-rows:auto auto auto;column-gap:16px;align-items:center}
  .values .v .k{grid-column:2;grid-row:1;margin-bottom:6px}
  .values .v .stage{grid-column:1;grid-row:1/4;height:88px;margin:0}
  .values .v h3{grid-column:2;grid-row:2;font-size:18px;margin-bottom:4px}
  .values .v p{grid-column:2;grid-row:3;font-size:13px}
  .foot-top{flex-direction:column;gap:32px}.foot-cols{flex-direction:column;gap:28px}footer{padding-top:90px}.foot-stage{flex-basis:56px;min-height:56px}
  footer .foot-legal{flex-direction:column;gap:6px}
  .hero-copy h1{font-size:clamp(34px,9vw,48px);white-space:normal}   /* 手机放不下一行,拆成「卓越组织的」/「AI 战略伙伴」两行 */
  .hero-copy h1 .slogan-start,.hero-copy h1 .slogan-end{display:block}
  .txt.hero-copy,.scene.center .txt.hero-copy{grid-column:1/13}
  .hero-logos{bottom:28px}
  #vision h2{font-size:clamp(40px,10.5vw,60px);white-space:normal}
  #vision .vision-intro,#vision .claim,#vision .role{font-size:13px}
  .vision-foot{left:20px;right:20px;bottom:22px;flex-direction:column;align-items:stretch;gap:14px}   /* 手机:两句竖排,仍一左一右 */
  .product{grid-template-columns:30px 1fr 24px;gap:6px 12px;padding:20px 12px}
  .plogo{height:calc(var(--h)*.82);width:calc(var(--h)*.82*var(--ar))}
  .product p{grid-column:2;grid-row:2;font-size:14px}
  .product .domain{grid-column:2;grid-row:3;text-align:left}
  .product .arrow{grid-column:3;grid-row:1/4}
  .logo-group{--logo-area:1000;gap:16px;padding-right:16px}.logo-group li{width:140px;height:41px}.client-logo{max-width:96px;max-height:21px}
}
@media (prefers-reduced-motion:reduce){
  .r{transition:none;opacity:1;transform:none}
  .vignette{transition:none}
  #values .values .v{transition:none}
  .logo-viewport{overflow:visible;mask-image:none;-webkit-mask-image:none}
  .logo-track{animation:none;transform:none;display:block;width:100%}
  .logo-group{display:flex;width:100%;flex-wrap:wrap;justify-content:center;gap:16px;padding:0}
  .logo-group[aria-hidden=true]{display:none}
  .hero-logos .logo-viewport{overflow:hidden}
  .hero-logos .logo-group{flex-wrap:nowrap;justify-content:center;gap:26px}
}

@media (max-width:900px){
  :root[lang=en] .hero-copy h1{font-size:clamp(30px,8vw,44px)}
  :root[lang=en] #vision h2{font-size:clamp(34px,9vw,52px);white-space:normal}
}