/*! 时空涌现 STEMERGE 官网 · 站点代码 © 2026 VaporAviator LLC
 *  依 LICENSE.md 授权 时空涌现 STEMERGE 永久使用与修改。
 *  第三方资产另见 THIRD-PARTY.md 与 LICENSES/ */
/* ============================================================================
   时空涌现 STEMERGE — 官网样式
   中文 = 未来荧黑 Glow Sans SC / 英文数字 = Cascadia Mono，均自托管（国内可用）
   ========================================================================= */

/* ---------- 字体 ---------- */
@font-face{ /* latin */
  font-family:'Cascadia Mono';
  src:url('../assets/fonts/CascadiaMono.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{ /* latin-ext */
  font-family:'Cascadia Mono';
  src:url('../assets/fonts/CascadiaMono-ext.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,
    U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Glow Sans SC';
  src:url('../assets/fonts/GlowSansSC-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glow Sans SC';
  src:url('../assets/fonts/GlowSansSC-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glow Sans SC';
  src:url('../assets/fonts/GlowSansSC-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glow Sans SC';
  src:url('../assets/fonts/GlowSansSC-Heavy.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* ── Surfaces ────────────────────────────────────────── */
  --bg:#000;                --bg-rgb:0,0,0;
  --bg-hero:#050505;
  --hero-sky:#052c40;       /* Hero 顶部的深蓝，取自 --deep 的暗化关系 */
  --grad-hero:linear-gradient(to bottom,
    var(--hero-sky) 0%,#03161f 40%,var(--bg-hero) 74%,var(--bg) 100%);
  --surface:#0d0d0f;                    /* 卡片 */
  --surface-alt:#0b0b0d;                /* 表单卡 */
  --surface-footer:#030304;
  --paper:#fff;                         /* 二维码白底 */

  --ph-1:#161b20; --ph-2:#0a0c0e; --ph-3:#08090a;      /* 场景占位块 */
  --photo-1:#33373b; --photo-2:#25282b; --photo-3:#1e2124; /* 人像占位块，比场景亮一档 */

  /* ── Text ────────────────────────────────────────────── */
  --text:#fff;              --text-rgb:255,255,255;
  --text-secondary:rgba(var(--text-rgb),.60);   /* Hero 次行 */
  --text-body:rgba(var(--text-rgb),.55);        /* 段落正文 */
  --text-muted:rgba(var(--text-rgb),.50);       /* 卡片描述 */
  --text-tertiary:rgba(var(--text-rgb),.45);    /* 标签 */
  --text-placeholder:rgba(var(--text-rgb),.35);
  --text-faint:rgba(var(--text-rgb),.30);
  --text-nav:rgba(var(--text-rgb),.80);
  --text-contact:rgba(var(--text-rgb),.75);
  --text-chip:rgba(var(--text-rgb),.70);
  --text-caption:rgba(var(--text-rgb),.92);     /* 图上说明 */
  --text-copyright:rgba(var(--text-rgb),.32);
  --text-ghost:rgba(var(--text-rgb),.05);       /* 占位块水印 */
  --text-ghost-2:rgba(var(--text-rgb),.07);     /* 人像水印 */

  /* ── Borders ─────────────────────────────────────────── */
  --border:rgba(var(--text-rgb),.09);
  --border-strong:rgba(var(--text-rgb),.15);
  --border-faint:rgba(var(--text-rgb),.05);
  --border-hairline:rgba(var(--text-rgb),.07);
  --border-bottom:rgba(var(--text-rgb),.06);
  --border-field:rgba(var(--text-rgb),.12);
  --border-hover:rgba(var(--text-rgb),.20);
  --border-outline:rgba(var(--text-rgb),.25);
  --border-rule:rgba(var(--text-rgb),.28);
  --border-stat:rgba(var(--text-rgb),.10);

  /* ── Accent（全站唯一强调色）─────────────────────────── */
  --accent:#ea5f24;         --accent-rgb:234,95,36;
  --accent-soft:rgba(var(--accent-rgb),.14);
  --accent-wash:rgba(var(--accent-rgb),.03);
  --accent-line:rgba(var(--accent-rgb),.65);
  --accent-glow:rgba(var(--accent-rgb),.34);
  --accent-glow-hi:rgba(var(--accent-rgb),.50);
  --accent-fg:var(--text);        /* 强调色上面的字（橙底卡片里会翻成橙） */

  /* ── 卡片边缘：渐变描边 + 落影，取代实色 1px ──
     用 padding-box / border-box 双层背景做渐变描边，不需要伪元素。
     实色描边在暗底上会画出一圈生硬的框；渐变描边只在受光的两角亮，像有厚度。 */
  --edge:linear-gradient(158deg,
    rgba(var(--text-rgb),.22) 0%,rgba(var(--text-rgb),.07) 32%,
    rgba(var(--text-rgb),.02) 60%,rgba(var(--text-rgb),.13) 100%);
  --edge-hi:linear-gradient(158deg,
    rgba(var(--text-rgb),.42) 0%,rgba(var(--text-rgb),.14) 34%,
    rgba(var(--text-rgb),.05) 62%,rgba(var(--text-rgb),.26) 100%);
  --lift:0 22px 48px -30px rgba(var(--bg-rgb),.95);
  --lift-hi:0 30px 60px -28px rgba(var(--bg-rgb),1);

  /* ── Brand ───────────────────────────────────────────── */
  --deep:#044362;           --deep-rgb:4,67,98;   /* 仅氛围层与占位块 */
  /* Hero plasma 的中间调：必须亮过 --hero-sky，否则和地色糊在一起 */
  --plasma-mid:#0b82ad;     --plasma-mid-rgb:11,130,173;
  --ink:#262b2f;

  /* ── Semantic ────────────────────────────────────────── */
  --error:#c8452a;
  --error-text:#e0755c;
  --success:var(--accent);

  /* ── Atmosphere ──────────────────────────────────────── */
  --grid-line-fine:rgba(var(--text-rgb),.022);
  --scroll-thumb:#333;
  --scroll-thumb-hi:#555;

  /* ── Type scale（唯一刻度，禁止散值）────────────────── */
  --fs-0:9px;      /* 极小 mono：版权行、二维码副标、统计副标 */
  --fs-1:10px;     /* eyebrow、指标 caption、卡片标签 */
  --fs-2:12px;     /* chips、顶栏语言与按钮、表单副标 */
  --fs-3:13px;     /* 正文、导语、输入框、卡片描述、页脚链接 */
  --fs-4:15px;     /* 导航链接、主按钮、页脚品牌名 */
  --fs-5:17px;     /* 卡片指标数字 */
  --fs-6:20px;     /* 卡片标题、成员名、info 值 */
  --fs-7:26px;     /* Hero 指标值、15+ / 80+ */
  --fs-h2:clamp(30px,3.2vw,42px);
  --fs-h1:clamp(34px,5.2vw,68px);
  --fs-ghost:clamp(48px,9vw,104px);      /* 占位块水印 */
  --fs-ghost-sm:clamp(52px,5vw,74px);

  --lh-tight:1.24;   /* h1 */
  --lh-snug:1.3;     /* h2 / h3 / 大字 */
  --lh-ui:1.6;       /* 默认、输入框 */
  --lh-label:1.7;    /* 多行 mono 标签 */
  --lh-body:1.9;     /* 中文正文 */

  --ls-tight:-.01em; /* 大标题 */
  --ls-1:.08em;      /* 按钮 */
  --ls-2:.16em;      /* 小 mono 标签 */
  --ls-3:.25em;      /* eyebrow、副标 */
  --ls-4:.35em;      /* 章节 EN 标签 */

  /* ── Radius：三层嵌套制，按「离底几层」取值，不按元素类型 ──
     容器层 10px（卡片/面板/图片块）→ 内层 6px（嵌在容器里的输入框/按钮/图片）
     → 微件 4px（浮在图上的小标签、焦点环） */
  --r-xs:4px;               /* 微件：图上标签、焦点环 */
  --r-sm:6px;               /* 内层：输入框、按钮、卡内图片 */
  --r:10px;                 /* 容器：所有卡片与面板 */
  --r-pill:999px;           /* chips */
  --r-round:50%;            /* 圆形按钮、状态点 */

  /* ── Motion（唯一刻度，禁止散值）────────────────────── */
  --dur-1:.2s;              /* 微交互：颜色、透明度 */
  --dur-2:.32s;             /* 标准：hover、边框、位移 */
  --dur-3:.5s;              /* 状态切换：导航收起 */
  --dur-4:.9s;              /* 入场 reveal */
  --ease-out:cubic-bezier(.19,1,.22,1);   /* expo out — 全站签名缓动 */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-pulse:cubic-bezier(.4,0,.6,1);
  /* 整屏手风琴专用：大位移不能用 expo-out，会读成弹开 */
  --ag-dur:1s;
  --ag-ease:cubic-bezier(.62,.02,.16,1);

  /* ── Layout ──────────────────────────────────────────── */
  --gutter:clamp(24px,10.31vw,148px);     /* 1280 视口 = 132px，对齐设计稿 */
  --gutter-hero:clamp(20px,3.13vw,56px);  /* 1280 视口 = 40px */
  --maxw:1440px;

  /* ── Type ────────────────────────────────────────────── */
  --font-en:'Cascadia Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font:'Cascadia Mono','Glow Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}  /* clip 不建立滚动容器，sticky 照常工作；兜住一切 transform 位移 */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:400;
  font-size:var(--fs-4); line-height:var(--lh-ui);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* 注意：横向溢出交给 html 的 overflow-x:clip 兜。
   千万别在 body 上写 overflow-x:hidden —— 那会让 body 变成滚动容器，
   .about__intro 的 position:sticky 会直接失效（2026-08-22 踩过）。 */
h1,h2,h3,h4,p,figure,form{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}

/* Cascadia Mono 的空格是等宽全宽，中英夹缝会被撑开；只在中文模式下收紧 */
html[lang="zh-Hans"] body{word-spacing:-.12em}

/* .25~.35em 的字距是给拉丁小型大写字设计的，压在三四个汉字上会散成一排孤字。
   中文模式下所有小标签统一收一档。 */
html[lang="zh-Hans"] :is(.sec__eyebrow .en,.person .role,.figure span,.info dt,.qr small,.stat__k){
  letter-spacing:.12em;
}

::selection{background:var(--accent);color:var(--text)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hi)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--text);padding:10px 18px;font-size:var(--fs-2);
}
.skip-link:focus{left:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* 英文/数字统一走 Cascadia Mono 的排印标签 */
.mono{font-family:var(--font-en);font-variant-numeric:tabular-nums}
/* 视觉隐藏但读屏可读 —— 图廊面板的活动名靠它承载，同时给 JS 当文案来源 */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.eyebrow{
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-4);text-transform:uppercase;color:var(--text-tertiary);
}

/* ============================ 顶栏 ============================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px var(--gutter-hero);
  /* 首屏完全透明：任何底色或 backdrop-filter 都会给熔金加一层滤色 */
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background var(--dur-3) var(--ease-soft),padding var(--dur-3) ease;
}
/* 滚动后仍是玻璃：加大模糊 + 提饱和 + 顶边一道高光。
   之前直接换成 92% 实色黑，磨砂感全没了。
   走 backdrop-filter 而不是 GlassSurface 的 SVG 位移滤镜 ——
   `backdrop-filter:url()` 目前只有 Firefox 支持，Chrome/Safari 本来就回落到这套；
   固定顶栏是常驻合成层，不值得为一个浏览器上重滤镜。 */
.nav.is-stuck{
  background:linear-gradient(to bottom,rgba(var(--bg-rgb),.60),rgba(var(--bg-rgb),.40));
  backdrop-filter:blur(14px) saturate(165%) brightness(1.06);
  -webkit-backdrop-filter:blur(14px) saturate(165%) brightness(1.06);
  /* 不用 border-bottom —— 一条实线横在首屏上很生硬。
     顶边留一道 inset 高光当玻璃边，下方靠柔和投影自然过渡。 */
  box-shadow:inset 0 1px 0 0 rgba(var(--text-rgb),.07),
             0 18px 40px -24px rgba(var(--bg-rgb),.95);
  padding-block:18px;
}
.nav__left{display:flex;align-items:center;gap:48px;min-width:0}
.brand{display:flex;align-items:center;color:var(--text)}
.brand .logo--h{height:30px}
/* logo 走 CSS mask：外链官方 SVG 原件，同时继承 currentColor */
.logo{display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.logo--h{aspect-ratio:3320.7/769.2;
  -webkit-mask-image:url('../assets/logo/stemerge-horizontal.svg');
  mask-image:url('../assets/logo/stemerge-horizontal.svg')}
.logo--icon{aspect-ratio:1345.2/886.8;
  -webkit-mask-image:url('../assets/logo/stemerge-icon.svg');
  mask-image:url('../assets/logo/stemerge-icon.svg')}
.nav__links{display:flex;align-items:center;gap:32px;font-size:var(--fs-2);color:var(--text)}
.nav__links a{opacity:.85;transition:opacity var(--dur-1)}
.nav__links a:hover{opacity:.45}
.nav__right{display:flex;align-items:center;gap:22px}
.lang{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-2);
  border-right:1px solid var(--border-field);padding-right:22px;
}
.lang button{background:none;border:0;padding:0;cursor:pointer;color:var(--text-tertiary);transition:color var(--dur-1)}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{color:var(--text)}

.btn-line{
  display:inline-block;cursor:pointer;
  font-size:var(--fs-2);font-weight:500;letter-spacing:var(--ls-1);
  padding:11px 22px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:transparent;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2),border-color var(--dur-2);
}
.btn-line:hover{background:var(--paper);color:var(--bg);border-color:var(--text)}

.btn-ghost{
  display:inline-block;cursor:pointer;
  font-family:var(--font-en);font-size:var(--fs-3);font-weight:700;letter-spacing:var(--ls-1);
  padding:14px 36px;border:1px solid var(--border-outline);border-radius:var(--r-sm);
  background:transparent;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2),border-color var(--dur-2);
}
.btn-ghost:hover{background:var(--paper);color:var(--bg);border-color:var(--text)}

.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--text)}
.nav__toggle svg{width:20px;height:20px}

/* ============================ Hero ============================ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--grad-hero);
}
.hero__bg{position:absolute;inset:0;z-index:0}
/* 压暗层。原来这里还叠了一层 50px 工程网格，molten metal 调亮之后两者互相打架，
   2026-08-22 撤掉网格，把首屏留给 plasma。 */
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    /* 内容都在左侧，横向压暗左边保可读；右侧留给 plasma 满强度发挥 */
    linear-gradient(to right,rgba(var(--bg-rgb),.62) 0%,rgba(var(--bg-rgb),.20) 33%,transparent 56%),
    linear-gradient(to top,rgba(var(--bg-rgb),.58) 0%,rgba(var(--bg-rgb),.12) 42%,transparent 66%);
  background-size:100% 100%,100% 100%;
}
.hero__glow{position:absolute;inset:0;opacity:.35}
.hero__glow i{position:absolute;width:420px;height:420px;border-radius:var(--r-round);filter:blur(120px)}
.hero__glow i:nth-child(1){top:16%;left:20%;background:rgba(var(--deep-rgb),.55)}
.hero__glow i:nth-child(2){bottom:22%;right:22%;background:rgba(var(--accent-rgb),.10)}

.hero__inner{
  position:relative;z-index:2;
  padding:0 var(--gutter-hero) 76px;
  max-width:1280px;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.status{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-4);text-transform:uppercase;color:var(--text-faint);
}
.status i{
  width:6px;height:6px;border-radius:var(--r-round);background:var(--accent);
  animation:pulse 2s var(--ease-pulse) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.hero h1{
  font-size:var(--fs-h1);font-weight:900;line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);word-spacing:-.22em;max-width:16em;
}
.hero h1 .dim{color:var(--text-secondary)}

.hero__stats{
  margin-top:26px;width:100%;max-width:1024px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  border-top:1px solid var(--border-stat);padding-top:38px;
}
.stat{display:flex;flex-direction:column;gap:9px}
.stat__k{
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-2);text-transform:uppercase;color:var(--text-faint);
}
.stat__v{font-family:var(--font-en);font-size:var(--fs-7);font-weight:500;font-variant-numeric:tabular-nums}
.stat__bar{position:relative;height:1px;background:rgba(var(--text-rgb),.06);margin-top:6px;overflow:hidden}
.stat__bar i{position:absolute;inset:0 auto 0 0;background:rgba(var(--text-rgb),.4)}

.hero__cta{margin-top:14px}

/* 合作方跑马灯 */
.marquee{
  position:relative;z-index:2;width:100%;
  padding-block:34px;background:rgba(var(--bg-rgb),.5);
  border-top:1px solid var(--border-faint);overflow:hidden;
}
.marquee__track{display:flex;width:max-content;animation:scroll 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__item{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:250px;flex:0 0 250px;
  opacity:.4;filter:grayscale(1);transition:opacity var(--dur-2);
}
.marquee__item:hover{opacity:1}
.marquee__item svg{width:22px;height:22px;flex:none}
.marquee__item span{font-family:var(--font-en);font-size:var(--fs-3);font-weight:700;letter-spacing:var(--ls-tight)}

/* ============================ 通用段落头 ============================ */
.sec{padding-block:128px;position:relative}
.sec__head{
  /* align-items:end —— 右侧导语的末行与左边标题的底边对齐。
     之前是 start + padding-top，导语悬在标题中间，看着不上不下。 */
  display:grid;grid-template-columns:1fr 316px;gap:40px;align-items:end;
  margin-bottom:36px;
}
.sec__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sec__eyebrow .num{
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-3);color:var(--accent);
  text-shadow:0 0 20px rgba(var(--accent-rgb),.85),0 0 42px rgba(var(--accent-rgb),.35);
}
.sec__eyebrow .rule{width:34px;height:1px;background:rgba(var(--text-rgb),.28)}
.sec__eyebrow .en{
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-4);text-transform:uppercase;color:var(--text-tertiary);
}
.sec h2{font-size:var(--fs-h2);font-weight:900;line-height:var(--lh-snug);letter-spacing:var(--ls-tight);word-spacing:-.18em}
.sec__lede{font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-body)}

/* ============================ 占位块 ============================ */
.ph{
  position:relative;overflow:hidden;background:var(--ink);
  background-image:
    radial-gradient(120% 100% at 28% 8%,rgba(var(--deep-rgb),.5) 0%,rgba(var(--deep-rgb),0) 58%),
    linear-gradient(158deg,var(--ph-1) 0%,var(--ph-2) 62%,var(--ph-3) 100%);
}
.ph::before{ /* 细网格。::after 让给扫光用 */
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--grid-line-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-fine) 1px,transparent 1px);
  background-size:26px 26px;
}
/* 真图铺在占位块底层：盖住渐变与细网格，scrim(z1) 与说明文字(z2/z3) 仍在它之上 */
.ph__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.80) saturate(.82);   /* 压一档并降饱和，统一到深色版面的调子里 */
}
.ph__mark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-en);font-size:var(--fs-ghost);font-weight:700;
  color:var(--text-ghost);letter-spacing:var(--ls-1);user-select:none;
}
.ph__cap{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-size:var(--fs-3);color:var(--text-caption);
  text-shadow:0 1px 12px rgba(var(--bg-rgb),.8);
}
.ph__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(var(--bg-rgb),.85) 0%,rgba(var(--bg-rgb),.15) 42%,rgba(var(--bg-rgb),0) 70%);
}

/* ============================ 01 案例 ============================ */
/* 宽屏用等宽三栏：卡片跟着容器变宽、天然居中。
   之前是固定 328px 的 flex 横滑，宽屏上右边会空出一大块，看着整体偏左。 */
.rail{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  padding-bottom:2px;
}
.rail::-webkit-scrollbar{display:none}
.card{
  scroll-snap-align:start;
  border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge) border-box;
  box-shadow:var(--lift);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow var(--dur-2),transform var(--dur-2) var(--ease-out);
}
.card:hover{
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge-hi) border-box;
  box-shadow:var(--lift-hi);transform:translateY(-3px);
}
.card__media{position:relative;aspect-ratio:328/216}
.card__tag{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:var(--fs-1);letter-spacing:var(--ls-1);color:rgba(var(--text-rgb),.9);
  padding:5px 9px;border-radius:var(--r-xs);
  background:rgba(var(--bg-rgb),.55);border:1px solid var(--border-field);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.card__body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__body h3{font-size:var(--fs-6);font-weight:700;line-height:var(--lh-snug)}
.card__body p{font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-muted)}
.card__metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
}
.metric b{
  display:block;font-family:var(--font-en);font-size:var(--fs-5);font-weight:700;
  color:var(--accent);letter-spacing:var(--ls-tight);white-space:nowrap;
}
.metric span{display:block;margin-top:5px;font-size:var(--fs-1);color:var(--text-tertiary)}

.rail-nav{display:none;gap:9px;margin-top:26px}   /* 宽屏三栏不溢出，箭头无意义；窄屏才出现 */
.rail-nav button{
  width:38px;height:38px;border-radius:var(--r-round);cursor:pointer;
  border:1px solid var(--border-strong);background:transparent;color:var(--text);
  display:grid;place-items:center;transition:background var(--dur-2),border-color var(--dur-2),opacity var(--dur-2);
}
.rail-nav button:hover:not(:disabled){background:rgba(var(--text-rgb),.08);border-color:rgba(var(--text-rgb),.3)}
.rail-nav button:disabled{opacity:.28;cursor:default}
.rail-nav svg{width:14px;height:14px}

/* ============================ 02 生态 ============================ */
/*! 整屏手风琴图廊。结构参考 react-bits 的 AccordionGallery（© 2026 David Haz，
   MIT + Commons Clause）与 produx.design 末段：展开的那格铺满全屏，其余收成通高竖条。

   ⚠️ 动画只动 transform —— 面板全部绝对定位、宽度统一为「展开宽」，靠后者叠压前者裁出
   可见宽度，切换时只平移左缘。不要改回 flex-basis / filter / padding / background 那套：
   那四样每帧都要重排或把满屏渐变重新光栅化，是 2026-08-27 之前卡顿的来源。 */
.ag-stage{
  position:relative;min-height:min(100vh,900px);overflow:hidden;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);          /* 满宽出血，跳出 .wrap 的容器约束 */
}
.ag{
  position:absolute;inset:0;z-index:0;
  /* 底部 7% 把画面淡出到透明，露出页面底色，跟 sectionWash 的任何颜色都接得上 */
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 7%);
          mask-image:linear-gradient(to top,transparent 0,#000 7%);
}
.ag__panel{
  position:absolute;top:0;bottom:0;left:0;
  width:var(--ag-open,60%);
  transform:translate3d(var(--ag-x,0px),0,0);
  /* 曲线不用全站的 --ease-out（expo-out）—— 那条前 30% 时间走完 90% 距离，
     这么大的位移会读成「啪一下弹开」。这里要起步平缓、中段推进、末段收住。 */
  transition:transform var(--ag-dur) var(--ag-ease);
  will-change:transform;
  border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;background:var(--ink);
}
/* resize 时 width 瞬时生效而 transform 有 1s 过渡，两者不同步会露出空带。
   JS 在重新量之前挂上 .is-resizing，量完下一帧摘掉。 */
.ag.is-resizing .ag__panel,
.ag.is-resizing ~ .ag__overlay{transition:none}
.ag__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 调暗用一层 opacity，不用 filter —— filter 每帧要把整张大图重绘一遍 */
.ag__dim{
  position:absolute;inset:0;display:block;background:#05070a;
  opacity:.5;transition:opacity .62s var(--ease-soft);
}
.ag__panel.is-active .ag__dim{opacity:0}
.ag__panel:hover .ag__dim{opacity:.24}
/* 全站的 :focus-visible 是 outline+正 offset，在这里三面会被 .ag-stage 的
   overflow:hidden 裁掉，剩下那面又跟下面的装饰橙线同为 --accent → 必须内缩且换色 */
.ag__panel:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 7px rgba(0,0,0,.72);
}
.ag__panel.is-active::after{                 /* 展开格左缘一道橙线 */
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;z-index:3;background:var(--accent);
}
.ag__num{
  position:absolute;left:0;bottom:14px;z-index:2;
  width:var(--ag-collapse,120px);text-align:center;   /* 收起时只露最左一条，编号要落在那条里 */
  font-family:var(--font-en);font-size:var(--fs-0);font-weight:700;letter-spacing:var(--ls-2);
  color:rgba(var(--text-rgb),.78);text-shadow:0 1px 8px rgba(var(--bg-rgb),.95);
  transition:opacity var(--dur-2) var(--ease-soft);
}
.ag__panel.is-active .ag__num{opacity:0}

/* 遮罩只留底部一条 —— 四边压黑会把照片糊掉，只有下面压着文字的地方需要 */
.ag__scrim{
  position:absolute;inset:0;z-index:1;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 7%);
          mask-image:linear-gradient(to top,transparent 0,#000 7%);
  background:linear-gradient(to top,
    rgba(var(--bg-rgb),.95) 0%,rgba(var(--bg-rgb),.88) 13%,
    rgba(var(--bg-rgb),.58) 29%,rgba(var(--bg-rgb),.16) 45%,transparent 60%);
}

.ag__overlay{
  position:relative;z-index:2;pointer-events:none;   /* 鼠标要能穿过去 hover 底下的面板 */
  min-height:min(100vh,900px);
  padding-left:clamp(28px,3.4vw,64px);padding-right:clamp(24px,4vw,72px);
  padding-block:clamp(120px,16vw,180px) clamp(40px,5vw,60px);
  display:flex;flex-direction:column;justify-content:flex-end;
  /* 文字贴住展开格的左缘一起滑，否则会横跨收起条与照片的交界 */
  transform:translate3d(var(--ag-left,0px),0,0);
  transition:transform var(--ag-dur) var(--ag-ease);
  will-change:transform;
}
.ag-stage h2{
  font-size:var(--fs-h2);font-weight:900;line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);word-spacing:-.18em;max-width:16ch;
}
/* 客户会把垫图换成自己的活动照。底部渐变按当前这几张暗调图调的，
   换成亮调照后这几行会掉到 3 点几比一 → 补一层投影兜底，暗照上看不出来。 */
.ag-stage h2,
.ag__lede,
.ag-stage .sec__eyebrow,
.ag__now{text-shadow:0 1px 14px rgba(var(--bg-rgb),.86)}
.ag__lede{margin:18px 0 0;max-width:36ch;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-body)}
.ag__now{
  display:flex;align-items:baseline;gap:14px;
  margin:clamp(30px,4.5vw,48px) 0 0;padding-top:16px;
  border-top:1px solid rgba(var(--text-rgb),.22);max-width:30ch;
}
.ag__nowN{font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;letter-spacing:var(--ls-3);color:var(--accent);flex:none}
.ag__nowT{font-size:var(--fs-4);font-weight:500;line-height:1.4}
.ag__nowN,.ag__nowT{transition:opacity .3s var(--ease-soft),transform .3s var(--ease-out)}
.ag__now.is-swap .ag__nowN,.ag__now.is-swap .ag__nowT{opacity:0;transform:translateY(6px)}

.sec--tight{padding-block:0 128px}

.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.info{
  border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge) border-box;
  box-shadow:var(--lift);
  padding:16px 18px 18px;
}
.info dt{
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-3);text-transform:uppercase;color:var(--text-tertiary);
}
.info dd{margin:10px 0 0;font-size:var(--fs-6);font-weight:500}

/* ==================== 01 补 · 机会雷达详情 ==================== */
.radar{display:grid;grid-template-columns:minmax(280px,2fr) 3fr;gap:48px;
  margin-top:72px;padding-top:56px;border-top:1px solid var(--border)}
.radar__intro h3{font-size:var(--fs-6);font-weight:900;letter-spacing:var(--ls-tight)}
.radar__intro p{margin-top:16px;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-body)}
.radar__chain{margin-bottom:14px}
.radar__src{margin:0 0 18px;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--text-muted)}
.radar__loop{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--border);
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-3);text-transform:uppercase;color:var(--accent);
}

/* ============================ 03 关于我们 ============================ */
.about{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start}
.about__intro p{
  margin-top:20px;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-body);
}
.about__intro h2{margin-top:14px}
.figures{margin-top:38px;border-top:1px solid var(--border)}
.figure{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)}
.figure b{font-family:var(--font-en);font-size:var(--fs-7);font-weight:700;letter-spacing:var(--ls-tight);min-width:64px}
.figure span{
  font-family:var(--font-en);font-size:var(--fs-0);font-weight:700;line-height:var(--lh-label);
  letter-spacing:var(--ls-2);text-transform:uppercase;color:var(--text-tertiary);
}

.people{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.person__photo{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;position:relative;box-shadow:var(--lift);
  background:linear-gradient(160deg,var(--photo-1) 0%,var(--photo-2) 55%,var(--photo-3) 100%)}
.person__photo::after{content:none}
.person__photo .ph__img{filter:brightness(.94) saturate(.88)}   /* 人像别压太暗，脸会发闷 */
.person h3{margin-top:16px;font-size:var(--fs-6);font-weight:700}
.person .role{
  display:block;margin-top:5px;
  font-family:var(--font-en);font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-3);text-transform:uppercase;color:var(--text-tertiary);
}
.person p{margin-top:12px;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-muted)}

/* ============================ 04 联系 ============================ */
/* 左表单卡与右栏等高：右栏拉成 flex 列，联系卡吃掉剩余高度 */
.nexus{display:grid;grid-template-columns:1fr 426px;gap:18px;align-items:stretch}
.nexus__side{display:flex;flex-direction:column}
.nexus__side .contactcard{flex:1;justify-content:center}

.formcard{
  border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(var(--surface-alt),var(--surface-alt)) padding-box,var(--edge) border-box;
  box-shadow:var(--lift);
  padding:24px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.field{position:relative}
.field input,.field textarea{
  width:100%;background:transparent;border:1px solid var(--border-field);
  border-radius:var(--r-sm);padding:8px 13px;font-size:var(--fs-3);line-height:var(--lh-ui);
  transition:border-color var(--dur-1),background var(--dur-1);
}
.field textarea{resize:vertical;min-height:84px;line-height:var(--lh-body)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-placeholder)}
.field input:focus,.field textarea:focus{
  border-color:rgba(var(--accent-rgb),.65);background:rgba(var(--accent-rgb),.03);outline:none;
}
.field.is-error input,.field.is-error textarea{border-color:var(--error)}

.stage{margin:17px 0 0}
.stage__label{
  display:block;font-size:var(--fs-2);color:var(--text-tertiary);margin-bottom:10px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  cursor:pointer;font-size:var(--fs-2);line-height:var(--lh-snug);padding:5px 14px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:transparent;color:var(--text-chip);
  transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1);
}
.chip:hover{border-color:var(--text-placeholder);color:var(--text)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.formcard .field--msg{margin-top:17px}

.btn-solid{
  width:100%;margin-top:17px;cursor:pointer;
  padding:11px 20px;border:0;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-fg);font-size:var(--fs-4);font-weight:700;letter-spacing:var(--ls-1);
  box-shadow:0 0 34px rgba(var(--accent-rgb),.34);
  transition:filter var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1);
}
.btn-solid:hover{filter:brightness(1.08);box-shadow:0 0 44px rgba(var(--accent-rgb),.5)}
.btn-solid:active{transform:translateY(1px)}

.form-note{margin-top:10px;font-size:var(--fs-2);color:var(--text-faint);text-align:center;min-height:0}
.form-note:empty{margin-top:0}
.form-note.is-ok{color:var(--accent)}
.form-note.is-error{color:var(--error-text)}

.qrs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr{
  border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge) border-box;
  box-shadow:var(--lift);
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.qr__img{width:100%;aspect-ratio:1;background:var(--paper);border-radius:var(--r-sm);padding:9px}
.qr__img img{width:100%;height:100%;display:block}
.qr b{font-size:var(--fs-3);font-weight:500}
.qr small{
  font-family:var(--font-en);font-size:var(--fs-0);font-weight:700;
  letter-spacing:var(--ls-3);text-transform:uppercase;color:var(--text-tertiary);margin-top:-9px;
}
.qr__meta{display:flex;flex-direction:column;align-items:center;gap:6px}

.contactcard{
  margin-top:11px;border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--edge) border-box;
  box-shadow:var(--lift);padding:16px 20px;display:flex;flex-direction:column;gap:11px;
}
.contactcard a,.contactcard div{display:flex;align-items:center;gap:11px;font-size:var(--fs-3);color:var(--text-contact)}
.contactcard a:hover{color:var(--text)}
.contactcard svg{width:15px;height:15px;flex:none;color:var(--accent)}

/* ============================ Footer ============================ */
#nexus{padding-bottom:64px}

.footer{border-top:1px solid var(--border-hairline);background:var(--surface-footer);padding-block:52px 34px}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
/* logo 与标语一栏：logo 用 align-self:stretch，
   整栏宽度就由那行标语撑出来，两者自然等宽 */
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer__lock{display:flex;align-items:center;gap:12px}
.footer__lock .logo--icon{height:26px;color:var(--text)}
.footer__lock .zh{font-size:var(--fs-4);font-weight:700;line-height:var(--lh-tight)}
.footer__lock .en{
  display:block;font-family:var(--font-en);font-size:var(--fs-0);font-weight:700;
  letter-spacing:var(--ls-4);color:var(--text-tertiary);margin-top:3px;
}
.footer__tag{font-size:var(--fs-3);color:var(--text-muted)}
.footer__links{display:flex;flex-wrap:wrap;gap:34px;font-size:var(--fs-3);color:var(--text-nav)}
.footer__links a:hover{color:var(--text);opacity:.7}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--border-bottom);
  font-family:var(--font-en);font-size:var(--fs-0);font-weight:700;
  letter-spacing:var(--ls-3);text-transform:uppercase;color:var(--text-copyright);
}

/* ============================ 入场动画 ============================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ============================ 响应式 ============================ */
@media (max-width:1180px){
  .sec__head{grid-template-columns:1fr}
  .sec__lede{padding-top:0;max-width:520px}
  .about{grid-template-columns:1fr}
  .nexus{grid-template-columns:1fr}
  .radar{grid-template-columns:1fr;gap:32px}
}
@media (max-width:900px){
  /* 窄屏放不下整屏手风琴：3 条收起格就要吃掉 276px，展开格只剩 100 出头。
     退回竖排卡片，文字提到最前面，活动名从视觉隐藏改成显示在各自卡上。 */
  .ag-stage{
    min-height:auto;display:flex;flex-direction:column;
    width:auto;margin-left:0;margin-inline:auto;max-width:var(--maxw);
    padding-inline:var(--gutter);padding-block:84px;   /* 跟 .sec 的窄屏节奏一致，别让标题顶到导航下 */
  }
  .ag__overlay{
    order:-1;position:relative;min-height:auto;
    transform:none;will-change:auto;pointer-events:auto;
    padding:0 0 26px;
  }
  .ag{
    position:relative;inset:auto;display:flex;flex-direction:column;gap:8px;
    -webkit-mask-image:none;mask-image:none;
  }
  .ag__panel{
    position:relative;top:auto;bottom:auto;left:auto;width:auto;height:200px;
    transform:none;will-change:auto;border-radius:var(--r);
  }
  .ag__panel::after{display:none}
  /* 每张卡底部一条渐变，保证标题在任何照片上都读得动。
     只靠 text-shadow 现在侥幸能读，客户换成自己的亮调活动照就会糊。 */
  .ag__panel::before{
    content:'';position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
    background:linear-gradient(to top,rgba(var(--bg-rgb),.88) 0%,rgba(var(--bg-rgb),.42) 44%,transparent 100%);
    pointer-events:none;
  }
  /* 窄屏没有展开收起，就不该有哪张被「选中」—— 四张一律同亮度 */
  .ag__dim,
  .ag__panel.is-active .ag__dim,
  .ag__panel:hover .ag__dim{opacity:.16}
  /* 编号挪到左上角：标题折行时（英文版第一张就是两行）编号会跟到第二行边上，脱开就不受影响 */
  .ag__panel .ag__num,
  .ag__panel.is-active .ag__num{width:auto;left:16px;top:14px;bottom:auto;text-align:left;opacity:1}
  .ag__panel .ag__name{               /* 解除视觉隐藏，改成卡上的标题 */
    position:absolute;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;clip-path:none;white-space:normal;
    left:16px;right:16px;bottom:15px;z-index:2;text-align:left;   /* button 默认居中，会把名字推到中间 */
    font-size:var(--fs-3);color:var(--text);text-shadow:0 1px 10px rgba(var(--bg-rgb),.95);
  }
  .ag__scrim{display:none}
  .ag__now{display:none}
  .ag__lede{max-width:none}
  .ag-stage h2{max-width:none}

  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav.is-open .nav__links{
    display:flex;flex-direction:column;align-items:flex-start;gap:20px;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(var(--bg-rgb),.96);padding:24px var(--gutter-hero);
    border-bottom:1px solid var(--border);
  }
  .sec{padding-block:84px}
  .hero__stats{grid-template-columns:1fr;gap:26px;padding-top:28px}
  .infos{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* 窄屏退回真正的横滑轮播 */
  .rail{
    display:flex;overflow-x:auto;scroll-behavior:smooth;
    scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  }
  .card{flex:0 0 min(82vw,340px)}
  .rail-nav{display:flex}
}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr}
  .qrs{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .nav__right .btn-line{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ag__panel,.ag__overlay{will-change:auto}   /* 不动了就别占合成层 */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .rail{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════
   L3 · 动效层
   静态停驻帧与设计稿保持一致，动效只在滚动/悬停时叠加。
   ══════════════════════════════════════════════════════════ */

/* 滚动进度条 */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* Hero WebGL 涌现场 —— 全页唯一的 WebGL scene */
.hero__webgl{position:absolute;inset:0;z-index:0;width:100%;height:100%}
html[data-webgl="off"] .hero__webgl{display:none}
html[data-webgl="on"]  .hero__glow{opacity:0}   /* molten metal 自带氛围，CSS 光晕全撤 */

/* 逐字 reveal（Hero H1 / Section H2） */
.fx-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.fx-char{display:inline-block;white-space:pre}

/* 终端文本：打字机 / 乱码解码 */
.fx-term{white-space:pre}

/* SpotlightCard —— 鼠标跟踪光斑 */
.spot{position:relative;isolation:isolate}
.spot::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  opacity:0;transition:opacity var(--dur-2) var(--ease-soft);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--accent-rgb),.10),transparent 62%);
}
@media (hover:hover){.spot:hover::before{opacity:1}}

/* 磁吸按钮 + 点击火花 */
.magnet{will-change:transform}
.spark{
  position:fixed;width:5px;height:5px;border-radius:var(--r-round);
  background:var(--accent);pointer-events:none;z-index:130;
}

/* 关于我们：左栏 sticky，右栏成员随滚动逐位聚焦 */
/* 左栏用原生 sticky。曾经改成 ScrollTrigger 的 pin，被判「很卡」——
   pin 会冻住整页，sticky 是浏览器自己优化的，平滑得多。 */
@media (min-width:1181px){
  .about__intro{position:sticky;top:124px}
}

/* 触摸目标 ≥ 44×44 —— 只在触摸设备生效，不影响桌面版式 */
@media (pointer:coarse),(max-width:640px){
  .chip{min-height:44px;padding-block:10px}
  .lang button{min-height:44px;display:inline-flex;align-items:center}
  .nav__toggle{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0}
  .rail-nav button{width:44px;height:44px}
  .nav__links a,.footer__links a{min-height:44px;display:inline-flex;align-items:center}
  .contactcard a{min-height:44px}
}

/* 降级：完整回到静态停驻帧 */
@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  .hero__webgl{display:none}
  .fx-char{opacity:1!important;transform:none!important}
  .spot::before{display:none}
  .about__intro{position:static}
  .people .person{opacity:1!important;transform:none!important}
}

/* 标题保持平涂：白 + 灰次行。
   试过金属渐变（高光→暗部→回光）和背后垫 radial-gradient 的氛围辉光，
   评审后判定与暗底大字重中文不搭，全部撤回。这个体量的字，平涂最干净。 */

/* ══════════════════════════════════════════════════════════
   联系区：整体一张橙底卡
   靠重定义 token 翻转整块配色 —— 这是前面做 token 化的回报，
   卡片内所有组件不用逐个改样式，跟着 --text-rgb / --accent-rgb 走。
   ══════════════════════════════════════════════════════════ */
.nexus-card{
  /* ⚠️ 卡片橙比强调色 --accent(#ea5f24) 深一档，不是随便挑的：
     白字压在 #ea5f24 上只有 3.4:1，低于 AA 的 4.5；压到 #c64912 才有 4.82:1。
     亮橙继续做全站强调色，这里只是它的深色兄弟。 */
  --card-bg:#cf4d16;
  --text:#fff;               --text-rgb:255,255,255;
  --accent:#fff;             --accent-rgb:255,255,255;
  --accent-fg:var(--card-bg);              /* 白底按钮上的字回到橙 */
  /* 内层面板压深 + 背景模糊，白字在亮橙与光轨上都立得住 */
  --surface:rgba(0,0,0,.26);
  --surface-alt:rgba(0,0,0,.26);
  --text-placeholder:rgba(var(--text-rgb),.62);
  --text-tertiary:rgba(var(--text-rgb),.72);
  --text-body:rgba(var(--text-rgb),.80);
  --text-muted:rgba(var(--text-rgb),.78);
  /* 底图铺满整卡 —— 之前把图收在右侧，左边会留一条看得见的边界。
     「有自己的区域」不靠底色，靠下面那道强投影 + 渐变描边把卡片从纯黑页面上托起来。
     暗罩偏暖，让卡片仍然是橙色调而不是一块灰。最底下留主色渐变兜底防图挂了露白。 */
  position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(118deg,
      rgba(94,28,6,.60) 0%,rgba(40,14,6,.30) 44%,rgba(24,10,6,.62) 100%),
    url('../assets/img/nexus-bg.webp') center/cover no-repeat,
    linear-gradient(138deg,#ee6526 0%,var(--card-bg) 46%,#a3380b 100%);
  box-shadow:
    0 48px 96px -44px rgba(var(--bg-rgb),1),
    0 14px 34px -20px rgba(var(--bg-rgb),.85);
  border-radius:var(--r);
  padding:clamp(28px,3.4vw,56px);
  color:var(--text);
}
/* 橙底上不要辉光，会糊成一团脏影 */
.nexus-card .sec__eyebrow .num{text-shadow:none}
.nexus-card .btn-solid{box-shadow:none}
.nexus-card .btn-solid:hover{box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}

.footer__mark{align-self:stretch}
.footer__mark .logo--h{width:100%;color:var(--text)}

/* ══════════════════════════════════════════════════════════
   渐变帘幕 —— section 之间的过渡
   原来是仿 runrobrun 的像素格子；像素质感与本站调性不搭，
   改成一整条柔边的橙色光带纵向扫过。用在黑 → 橙这道最大的色彩落差上。
   ══════════════════════════════════════════════════════════ */
.curtain{
  position:fixed;left:0;right:0;top:0;height:100vh;z-index:60;
  pointer-events:none;visibility:hidden;
  background:linear-gradient(180deg,
    rgba(198,73,18,0) 0%,
    rgba(198,73,18,.55) 22%,
    #c64912 40%,
    #c64912 60%,
    rgba(198,73,18,.55) 78%,
    rgba(198,73,18,0) 100%);
}
@media (prefers-reduced-motion:reduce){
  .curtain{display:none}
}

@media (max-width:900px){
  .nexus-card{padding:22px 18px;border-radius:var(--r)}
  .nexus__side{flex-direction:column}
}

/* 插图缩到右侧。先给右半边垫一层暗底再放图 —— 光轨要在深色上才发光；
   试过 mix-blend-mode:screen 直接叠在橙上，右侧糊成一片白，导语都看不清。
   整层再向左淡出，不留生硬的图片边界。 */

/* 导语在右上角，底下可能扫过亮斑。原来垫了一块 radial 暗底，
   但在这张底图上会显出一个看得见的黑方块 —— 改成贴着字形的柔和描边阴影，
   同样提可读性，但没有任何形状。 */
.nexus-card .sec__lede{
  text-shadow:0 1px 14px rgba(var(--bg-rgb),.85),0 0 4px rgba(var(--bg-rgb),.7);
}

/* 联系区的内层面板浮在底图上，做成玻璃 */
.nexus-card .formcard,
.nexus-card .qr,
.nexus-card .contactcard{
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
}