/* =========================================================
   硬核AI 官网 · 线性叙事 · 样式
   设计令牌在 :root；浅色主题见 [data-theme=light]；
   画布是唯一主角（#fx 固定在底层），文字层与遮罩浮在其上。
   ========================================================= */

:root{
  --deep-0:#0A0D14;--deep-1:#121724;--deep-2:#1C2436;
  --mint:#5B8CFF;--cyan:#7C6BFF;--ice:#A8C4FF;
  --t1:#FFFFFF;--t2:#C3CCE0;--t3:#8A93AC;--line:#24304A;
  /* 主题令牌（深色为默认；浅色见下方）：
     --bg 底色 / --fg-rgb 前景（描边、玻璃层）/ --accent 文字级强调色 / --logo-text 字标色 */
  --bg:var(--deep-0);--bg-rgb:10,13,20;--fg-rgb:255,255,255;
  --accent:var(--mint);--accent-text:#7FA8FF;--accent-rgb:91,140,255;
  --nav-shadow:0 12px 40px rgba(0,0,0,.35);
  --card-grad:linear-gradient(180deg,rgba(18,23,36,.06) 0%,rgba(18,23,36,.28) 55%,rgba(18,23,36,.5) 100%);
  --logo-text:#FFFFFF;
  color-scheme:dark;
  /* 系统字体栈：拉丁取各平台 UI 字体，中文由 PingFang（mac）/ 微软雅黑（Windows）兜底 */
  --font-cn:-apple-system,system-ui,"Helvetica Neue","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-en:"Outfit",var(--font-cn);
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme=light]{
  --bg:#F6F8FC;--bg-rgb:246,248,252;--fg-rgb:16,22,38;
  --t1:#101626;--t2:#414B63;--t3:#6B7690;--line:#D3DAE8;
  --accent:var(--mint);--accent-text:#2B5BD7;--accent-rgb:43,91,215;
  --cyan:var(--mint);
  --nav-shadow:0 12px 40px rgba(16,22,38,.12);
  --card-grad:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.62) 55%,rgba(255,255,255,.88) 100%);
  --logo-text:#121724;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
/* 翻屏：原生 scroll-snap，每屏恰好一个视口高，一次滚动手势翻一屏（滚轮接管见 main.js） */
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
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,.pname,.logo-word em{font-family:var(--font-en)}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.skip{position:fixed;top:-48px;left:16px;z-index:60;padding:10px 16px;border-radius:10px;background:var(--t1);color:var(--bg);font-size:13px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- 画布（唯一主角）与遮罩 ---------- */
#fx{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),.74) 0%,rgba(var(--bg-rgb),.36) 38%,rgba(var(--bg-rgb),0) 62%)}
body[data-scene=values] #vig.on{opacity:0}   /* 价值观屏：三卡横铺，左侧渐暗会压暗第一张卡的粒子簇 */
#vigc{background:radial-gradient(58% 46% at 50% 50%,rgba(var(--bg-rgb),.5),rgba(var(--bg-rgb),0) 100%)}
body[data-scene=s0] #vigc{background:radial-gradient(44% 32% at 50% 48%,rgba(var(--bg-rgb),.74),rgba(var(--bg-rgb),.36) 58%,rgba(var(--bg-rgb),0) 100%)}   /* 开场：文案压在形态正中，中心多压一档 */
.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>")}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:12px;left:0;right:0;z-index:20;margin:0 auto;width:min(1200px,calc(100% - 80px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;white-space:nowrap}
.nav .logo{display:flex;align-items:center;gap:9px;color:var(--logo-text)}
.nav .logo-mark{height:24px;width:24px;display:block}
.nav .logo-word{font-size:19px;font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:baseline}
.nav .logo-word em{font-style:normal;font-weight:700;margin-left:2px}
.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}
/* 中英切换：细描边胶囊 + 独立滑块（JS 按选中按钮摆位，两个词条不等宽） */
.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)}
.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}
/* 导航右侧 CTA：比弹窗里的 .cta-btn 小一号 */
.nav-cta{height:34px;padding:0 16px;font-size:14px;font-family:var(--font-cn)}

/* ---------- 屏与入场 ---------- */
.screen{min-height:100vh;position:relative;scroll-snap-align:start;scroll-snap-stop:always}
.wrap{width:min(1200px,calc(100% - 80px));margin:0 auto;position:relative}
/* .r：本屏入场（.in 由 main.js 按当前场景切换），用独立的 translate 属性，避免占用 transform 供 hover 使用 */
.screen .r{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.screen.in .r{opacity:1;translate:0 0}

/* ---------- S0 开场 ---------- */
#s0{display:flex;flex-direction:column;justify-content:center}
.hero-copy{text-align:center;position:relative;z-index:2}
.kicker{color:var(--accent-text);font-size:11px;letter-spacing:.42em;margin-bottom:22px;opacity:.85}
.hero-copy h1{font-size:clamp(40px,7.2vw,88px);font-weight:600;line-height:1.18;letter-spacing:-.015em}
.hero-copy h1 .slogan-start,.hero-copy h1 .slogan-end{display:block}
.hero-copy h1 em{font-style:normal;font-family:var(--font-en);font-weight:700;color:var(--accent-text)}
.hero-sub{color:var(--t2);font-size:clamp(13px,1.5vw,16px);letter-spacing:.14em;margin-top:20px}
/* 首屏底部：对接的模型与平台（文字标签单排无缝滚动） */
.hero-logos{position:absolute;left:0;right:0;bottom:44px;z-index:2}
.logo-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-track{display:flex;width:max-content;animation:logo-drift 46s linear infinite}
.logos-hidden .logo-track{animation-play-state:paused}
@keyframes logo-drift{to{transform:translateX(-50%)}}
.logo-group{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{display:flex;align-items:center}
.eco-item{display:flex;align-items:center;gap:9px;white-space:nowrap;color:var(--t3);font-size:13.5px;letter-spacing:.02em;opacity:.72;transition:opacity .3s,color .3s}
.eco-item::before{content:"";width:5px;height:5px;background:currentColor;opacity:.5;rotate:45deg}
.hero-logos:hover .eco-item{opacity:1;color:var(--t2)}

/* ---------- 01 能力 ---------- */
#services{display:flex;flex-direction:column;justify-content:center}
#services .txt,#values .txt{margin-bottom:clamp(28px,5vh,56px)}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.01em}
#values .txt h2,#services .txt h2{color:var(--t1)}
.products{display:flex;flex-direction:column;border-top:1px solid rgba(var(--fg-rgb),.08)}
.product{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(120px,200px) 132px;align-items:center;gap:22px;
  padding:17px 6px;border-bottom:1px solid rgba(var(--fg-rgb),.08);position:relative;cursor:default}
.product::before{content:"";position:absolute;left:-14px;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .3s}
.product:hover::before{opacity:.9}
.serial{color:var(--t3);font-size:11px;align-self:start;padding-top:8px;transition:color .3s}
.product:hover .serial{color:var(--accent-text)}
.pbody h3{display:flex;align-items:center;gap:10px;font-weight:600;font-size:clamp(17px,1.6vw,21px)}
.pmark{width:20px;height:20px;color:var(--t3);flex:none;transition:color .3s}
.product:hover .pmark{color:var(--accent-text)}
.pname{font-weight:600;letter-spacing:-.01em}
.pzh{font-weight:400;font-size:.86em;color:var(--t2)}
/* 中文界面不混英文：英文名只在英文界面出现，中文名升为主标题样式 */
:root[lang="zh-CN"] .pname{display:none}
:root[lang="zh-CN"] .pzh{font-size:1em;font-weight:600;color:inherit;letter-spacing:-.01em}
.pbody p{color:var(--t2);font-size:14px;margin-top:4px;max-width:52ch}
.tag{justify-self:end;color:var(--t3);font-size:10.5px;padding:5px 10px;border:1px solid rgba(var(--fg-rgb),.1);border-radius:999px;transition:color .3s,border-color .3s}
.product:hover .tag{color:var(--accent-text);border-color:rgba(var(--accent-rgb),.45)}

/* ---------- 02 愿景 ---------- */
.vision{display:flex;flex-direction:column;justify-content:center}
.vision-copy{text-align:center;margin-bottom:clamp(30px,5.4vh,54px)}
.vision-intro{color:var(--t2);font-size:clamp(14px,1.4vw,17px);letter-spacing:.14em;margin-bottom:14px}
.vision h2{font-size:clamp(36px,5.4vw,72px);font-weight:600;line-height:1.16;letter-spacing:-.012em}
.vision h2 span{display:block}
/* 四段合作流程：一列一段，顶部细线 + 编号 + 一句"发生什么"（文字下的粒子会被压暗，见 main.js terrain()） */
.vsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,32px)}
.vstep{border-top:1px solid rgba(var(--fg-rgb),.16);padding-top:15px}
.vstep .k{color:var(--accent-text);font-size:11px;opacity:.8}
.vstep h3{font-size:clamp(16px,1.35vw,19px);font-weight:600;margin:7px 0 6px}
.vstep p{color:var(--t2);font-size:13.5px;line-height:1.68}
.vision-note{margin-top:clamp(26px,4.6vh,48px);text-align:center;color:var(--t3);font-size:clamp(13px,1.1vw,15px)}

/* ---------- 03 价值观 ---------- */
#values{display:flex;flex-direction:column;justify-content:center}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.values .v{position:relative;border:1px solid rgba(var(--fg-rgb),.1);border-radius:18px;padding:22px 22px 24px;background:var(--card-grad);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;overflow:hidden}
.values .v:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.4)}
/* hover 时跟随指针的一团柔光（--mx/--my 由 main.js 写入） */
.values .v::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(180px 150px at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.12),transparent 70%)}
.values .v:hover::after{opacity:1}
.values .k{display:flex;align-items:center;gap:10px;color:var(--accent-text);font-size:11px;opacity:.75}
/* 卡片顶部留给粒子的舞台（空的，粒子画在底层画布上） */
.values .stage{height:96px;margin:10px 0 6px}
.values h3{font-size:19px;font-weight:600;margin-bottom:6px}
.values p{color:var(--t2);font-size:14px}

/* ---------- 页脚 ---------- */
.foot{display:flex;flex-direction:column;padding-top:104px}
.foot-top{width:min(1200px,calc(100% - 80px))}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
@media (min-width:901px){.foot-cols{justify-content:space-between;width:100%}}   /* 桌面：三列撑到两端，公司地址躲开中间的粒子球 */
.foot-cols b{display:block;font-size:13px;color:var(--t3);font-weight:500;margin-bottom:10px}
.foot-cols a,.foot-cols button,.foot-cols span{display:block;font-size:15px;color:var(--t2);background:none;border:0;padding:2px 0;cursor:pointer;font-family:inherit;transition:color .25s}
.foot-cols a:hover,.foot-cols button:hover{color:var(--accent-text)}
.foot-cols span{cursor:default}
.foot-stage{flex:1;min-height:180px}
.bigmark-wrap{width:min(1200px,calc(100% - 80px));margin:0 auto;user-select:none}
/* 品牌签名行：小字标（硬核与智数之间的品牌点由粒子画成，DOM 元素只提供位置）+ 一行 slogan。
   字号控制品牌点尺寸——main.js 里粒子数按 dotRect().half² 等比缩减，改字号不用改 JS */
.bigmark{display:block;text-align:center;font-size:clamp(38px,4.6vw,68px);font-weight:800;letter-spacing:-.02em;line-height:1.06;color:var(--logo-text)}
.bigmark em{font-style:normal;font-family:var(--font-en);font-weight:800}
.brand-dot{display:inline-block;width:.34em;height:.34em;border-radius:50%;margin:0 .07em;translate:0 -.02em;background:transparent}
.bigmark-sub{text-align:center;color:var(--t3);font-size:clamp(12px,1.05vw,14px);letter-spacing:.3em;padding-left:.3em;margin-top:16px}
.foot-legal{display:flex;justify-content:space-between;gap:20px;color:var(--t3);font-size:11px;padding:20px 0 26px;margin-top:14px;border-top:1px solid rgba(var(--fg-rgb),.07)}
.foot-legal .beian{color:var(--t3);transition:color .25s}
.foot-legal .beian:hover{color:var(--t2)}

/* ---------- 留言弹窗 ---------- */
/* margin:auto 是 <dialog> 的原生居中方式，会被上面的 * reset 清掉，必须显式写回 */
.contact-modal{border:0;border-radius:20px;padding:0;width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;margin:auto;background:transparent;color:var(--t1)}
.contact-modal::backdrop{background:rgba(var(--bg-rgb),.62);backdrop-filter:blur(6px)}
.contact-form{background:color-mix(in srgb,var(--bg) 82%,#000 0%);border:1px solid rgba(var(--fg-rgb),.12);border-radius:20px;padding:34px 34px 28px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.45);animation:cm-in .4s cubic-bezier(.22,1,.36,1)}
:root[data-theme=light] .contact-form{background:#FFFFFF;box-shadow:0 30px 80px rgba(16,22,38,.18)}
@keyframes cm-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.cm-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.1);background:none;color:var(--t2);font-size:18px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.cm-close:hover{color:var(--t1);border-color:rgba(var(--fg-rgb),.3)}
.cm-body h3{font-size:22px;font-weight:600}
.cm-sub{color:var(--t2);font-size:14px;margin:6px 0 22px}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cm-field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.cm-field>span{color:var(--t2)}
.cm-field i{color:var(--accent-text);font-style:normal;margin-left:2px}
.cm-wide{grid-column:1/-1}
.cm-field input{height:42px;border-radius:10px;border:1px solid rgba(var(--fg-rgb),.14);background:rgba(var(--fg-rgb),.04);color:var(--t1);padding:0 12px;font:inherit;font-size:14px;outline:none;transition:border-color .2s,background .2s}
:root[data-theme=light] .cm-field input{background:rgba(16,22,38,.03)}
.cm-field input:focus{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--fg-rgb),.06)}
.cm-field input.bad{border-color:#FF6B57;background:rgba(255,107,87,.08)}
.cm-err{color:#FF8A72;font-size:13px;min-height:20px;margin-top:10px}
.cm-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.cm-note{color:var(--t3);font-size:12px}
.cm-privacy{color:var(--t3);font-size:11.5px;line-height:1.6;margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--fg-rgb),.07)}
.cta-btn{height:44px;padding:0 26px;border-radius:999px;border:0;background:var(--accent);color:#0B1430;font:600 15px/1 var(--font-cn);cursor:pointer;transition:filter .2s,transform .2s}
.cta-btn:hover{filter:brightness(1.08)}
.cta-btn:active{transform:scale(.97)}
.cta-btn:disabled{opacity:.55;cursor:default}
.cm-done{text-align:center;padding:34px 34px 30px}
.cm-done h3{font-size:22px}
.cm-done p{color:var(--t2);font-size:14px;margin:10px 0 24px}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .nav{width:calc(100% - 32px);top:8px}
  .nav .logo-word{display:none}
  .nav-cta{padding:0 12px;font-size:13px}
  .wrap,.foot-top,.bigmark-wrap{width:calc(100% - 40px)}
  .hero-logos{bottom:30px}
  .logo-group{gap:18px;padding-right:18px}
  .eco-item{font-size:12.5px}
  .screen{scroll-snap-stop:normal}   /* 手机：仍按屏对齐，但快速一甩允许连翻几屏 */
  #services{padding-top:74px}   /* 五行内容在窄屏几乎占满一屏，标题要躲开固定导航 */
  #values{padding-top:74px}     /* 三张卡竖排后标题也要躲开固定导航（英文卡描述更长，允许微微超一屏） */
  .product{grid-template-columns:28px minmax(0,1fr) auto;gap:12px;padding:10px 2px}
  .pbody{padding-right:58px}   /* 右侧留给画布上的节点粒子（main.js 里挂在 W*.86），文字右缘 310px 仍不压过去 */
  .pbody p{font-size:13.5px;line-height:1.62}   /* 压紧后五行描述各少一行，五条能力尽量落在一屏内 */
  .pbody h3{flex-wrap:wrap;row-gap:1px}   /* 英文界面双名放不下才换行，省下半屏高度 */
  :root[lang="en"] .pbody h3 .pzh{font-size:.8em}   /* 英文界面：英文名 + 英文补充说明同排 */
  .node-slot{display:none}
  .tag{display:none}
  .serial{padding-top:2px}
  .values{grid-template-columns:1fr;gap:14px}
  .values .stage{height:64px;margin:6px 0 2px}
  /* 愿景屏：四段流程竖排，编号放左侧窄槽，段间距压紧（一屏内要和标题、底句一起放下） */
  .vision-copy{margin-bottom:22px}
  .vision-intro{font-size:13px;margin-bottom:8px}
  .vision h2{font-size:clamp(30px,8vw,40px)}
  .vsteps{grid-template-columns:1fr;gap:0}
  .vstep{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding-top:11px}
  .vstep .k{grid-column:1;grid-row:1/span 2;font-size:12px;padding-top:3px}
  .vstep h3{grid-column:2;grid-row:1;font-size:16px;margin:0 0 3px}
  .vstep p{grid-column:2;grid-row:2;font-size:13px;line-height:1.6}
  .vision-note{margin-top:20px;font-size:13px}
  .foot{padding-top:88px}
  .foot-cols{gap:36px}
  .foot-legal{flex-direction:column;gap:6px}
  .cm-grid{grid-template-columns:1fr}
  .contact-form{padding:26px 22px 22px}
  .bigmark{line-height:1.12}
}

/* ---------- 无动画偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .screen .r{opacity:1;translate:0 0}
  .logo-track{animation:none}
}