/* ============================================================================
   Creek Labs 溪栈 · 视觉语言 v4 "Deepwater"
   ----------------------------------------------------------------------------
   单一样式表，无构建步骤。分为五层：
     01 TOKENS      设计变量（唯一真源）
     02 RESET+BASE  归零与排版基线
     03 MOTION      动效原语（进场 / 滚动进度 / 微交互）
     04 COMPONENTS  组件（按钮、卡片、导航、表格…）
     05 SECTIONS    页面区块
   ========================================================================== */

/* ══════════════════════════ 01 TOKENS ══════════════════════════ */
:root{
  /* —— 品牌绿：以 logo 实测色 #00CC8D 为 500 展开 ——
     深色底上 400–500 对比度 ≥ 7:1，可以承载文字；
     浅色底上仅 2.1:1，只能做图形。这条差异是本方案选择深色为主的直接原因。 */
  --g-50:#E8FBF4;  --g-100:#C6F6E4; --g-200:#93EBCB; --g-300:#57DDAF;
  --g-400:#20D29B; --g-500:#00CC8D; --g-600:#00B27B; --g-700:#009368;
  --g-800:#007353; --g-900:#00563F; --g-950:#02291F;

  /* —— 深水中性：hue 163，饱和度 8–20%，与品牌绿同源 —— */
  --d-1000:#040B08; --d-950:#06110D; --d-900:#091712; --d-850:#0C1E17;
  --d-800:#11271E;  --d-750:#163025; --d-700:#1C3A2D; --d-600:#264A3B;
  --d-500:#33604D;

  /* —— 日间中性 —— */
  --l-0:#FFFFFF; --l-50:#F4F8F6; --l-100:#EAF1ED; --l-200:#DCE6E1;
  --l-300:#C2D2CA; --l-400:#9DB2A8;

  /* —— 琥珀：wordmark 里那个橙色的 R。全站唯一的第二色，每屏最多出现一次 —— */
  --amber:#F5821F; --amber-soft:#FFB268; --amber-deep:#8A4405;
}

/* ══════════ 01.1 主题 ══════════
   全站只有两套底，不再有"深色页里挖一条亮带"这种混合排版——
   深浅之间任何形式的过渡带，中点都会落在灰上，怎么调都脏。
   组件一律只引用下面这层语义变量，不要直接写 --d-* / --l-* 或色值，
   否则换主题时它就会掉队。 */
:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#091712;
  --bg-2:#0C1E17;
  --surface:#0C1E17;
  --surface-2:#11271E;

  --fg:#ECF4F0; --fg-2:#B6C8C0; --fg-3:#82988E; --fg-4:#5A6E66;

  --line:rgba(236,244,240,.09);
  --line-strong:rgba(236,244,240,.16);
  --line-brand:rgba(0,204,141,.28);

  --brand:var(--g-500);        /* 图形、描边、发光 */
  --brand-soft:var(--g-300);   /* 大面积柔光 */
  --tint-brand:rgba(0,204,141,.055);  /* 表格高亮行等极淡底 */
  --brand-ink:var(--g-400);    /* 能承载文字的那一档：底上 7.8:1 */
  --brand-fill:var(--g-500);   /* 实心按钮底 */
  --on-brand:var(--g-950);     /* 压在实心绿上的字 */

  --sheen:rgba(255,255,255,.06);        /* 卡片顶边内高光 */
  --sheen-btn:rgba(255,255,255,.28);
  /* 深色底靠「面比底浅」就能分层，静止态不需要投影 */
  --elev:0 0 transparent;
  --shadow-card:0 30px 60px -34px rgba(0,0,0,.9);
  --shadow-nav:0 18px 44px -26px rgba(0,0,0,.9);
  --shadow-btn:0 14px 38px -16px rgba(0,204,141,.75);
  --shadow-btn-h:0 18px 46px -14px rgba(0,204,141,.9);
  --glow:0 0 0 1px rgba(0,204,141,.16), 0 0 44px -12px rgba(0,204,141,.45);

  --glass:rgba(9,23,18,.72);
  --drawer-bg:rgba(6,17,13,.94);
  --track-bg:rgba(236,244,240,.08);
  --foot-bg:#040B08;
  --panel-bg:linear-gradient(165deg,#11271E,#091712);
  --card-bg:var(--surface);

  --hero-scrim:linear-gradient(100deg,#091712 4%,rgba(9,23,18,.72) 42%,transparent 78%);
  --cta-glow:radial-gradient(72% 82% at 50% 118%,rgba(0,204,141,.24),transparent 68%);

  --grain-op:.13;
  --grain-blend:overlay;
  --vignette:radial-gradient(128% 96% at 50% 36%,transparent 54%,rgba(4,11,8,.62) 100%);

  /* 第三方标里既有彩色符号也有纯黑字标。要保留原色就不能再滤镜，
     而黑字标压在深底上会看不见——所以底板固定给浅色，两个主题一致。 */
  --logo-tile:#EEF3F1;
  --logo-tile-line:rgba(8,18,14,.10);
  --logo-op:1;

  /* 首屏流场：加色混合，线条越叠越亮 */
  --field-mode:lighter;
  --field-cool:0,204,141;
  --field-warm:245,130,31;
  --field-alpha:.055;
}

:root[data-theme="light"]{
  color-scheme:light;
  /* 底色要比卡片明显暗一档：白卡放在近白底上等于没有卡片。
     这里给到约 6 个 L* 的差，再叠 --elev 的投影才立得住。 */
  --bg:#EDF2EF;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F8F6;

  --fg:#08120E; --fg-2:#2C3D36; --fg-3:#55685F; --fg-4:#7C9086;

  --line:rgba(8,18,14,.10);
  --line-strong:rgba(8,18,14,.18);
  --line-brand:rgba(0,147,104,.34);

  --brand:var(--g-600);
  --brand-soft:var(--g-200);
  --tint-brand:rgba(0,147,104,.07);
  --brand-ink:var(--g-800);    /* #007353 在 #F4F8F6 上 5.2:1 */
  --brand-fill:var(--g-500);   /* 薄荷绿实心 + 深字，两套主题里保持同一个招牌 */
  --on-brand:var(--g-950);

  --sheen:rgba(255,255,255,.9);
  --sheen-btn:rgba(255,255,255,.42);
  /* 浅色底上白卡与白底几乎同色，必须靠投影把面抬起来，否则卡片会消失 */
  --elev:0 1px 2px rgba(8,18,14,.06),0 16px 34px -20px rgba(8,18,14,.26);
  --shadow-card:0 24px 48px -32px rgba(8,18,14,.34);
  --shadow-nav:0 16px 40px -28px rgba(8,18,14,.30);
  --shadow-btn:0 10px 26px -14px rgba(0,147,104,.5);
  --shadow-btn-h:0 14px 32px -12px rgba(0,147,104,.62);
  --glow:0 0 0 1px rgba(0,147,104,.2), 0 0 40px -14px rgba(0,178,123,.35);

  --glass:rgba(237,242,239,.78);
  --drawer-bg:rgba(237,242,239,.96);
  --track-bg:rgba(8,18,14,.06);
  --foot-bg:#E3EAE6;
  --panel-bg:linear-gradient(165deg,#FFFFFF,#F7FAF8);
  --card-bg:var(--surface);

  --hero-scrim:linear-gradient(100deg,#EDF2EF 4%,rgba(237,242,239,.74) 42%,transparent 78%);
  --cta-glow:radial-gradient(72% 82% at 50% 118%,rgba(0,178,123,.16),transparent 68%);

  /* 白底上 overlay 噪点几乎不显色，还会发脏；换成极轻的 multiply */
  --grain-op:.05;
  --grain-blend:multiply;
  --vignette:radial-gradient(128% 96% at 50% 36%,transparent 60%,rgba(8,18,14,.07) 100%);

  --logo-tile:#FFFFFF;
  --logo-tile-line:rgba(8,18,14,.10);
  --logo-op:1;

  /* 白底上不能用加色：线条越叠越白，等于消失。改成正常混合 + 深绿 */
  --field-mode:source-over;
  --field-cool:0,115,83;
  --field-warm:176,86,10;
  --field-alpha:.075;
}

/* ══════════ 01.2 与主题无关的量 ══════════ */
:root{
  /* —— 字体 ——
     刻意不加载 webfont：站点面向中国大陆 + 海外双市场，
     Google Fonts / jsDelivr 在大陆均不稳定，FOIT 的代价远大于字形收益。
     系统栈在 macOS/iOS 得到 SF + 苹方，Windows 得到 Segoe + 微软雅黑，
     两条路径的字重与字宽都已对齐，视觉一致性可控。 */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",
         "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style","Songti SC","Source Han Serif SC","Noto Serif SC",
          Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;

  /* —— 字阶：流体，1200px 处落在设计稿值 —— */
  --t-display:clamp(33px,7.4vw,102px);
  --t-h1:clamp(28px,4.9vw,62px);
  --t-h2:clamp(23px,3.3vw,42px);
  --t-h3:clamp(18px,1.6vw,21px);
  --t-lead:clamp(16.5px,1.5vw,20px);
  --t-body:16px;
  --t-sm:14px;
  --t-xs:12.5px;
  --t-meta:11px;

  /* —— 间距：4px 基数 —— */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:88px; --s10:120px; --s11:160px; --s12:220px;

  /* —— 圆角 —— */
  --r-xs:5px; --r-sm:9px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-full:999px;

  /* —— 动效曲线 ——
     out    收尾极缓，用于进场；末段导数趋零，是「丝滑」的来源
     io     两端对称，用于位移与变形
     spring 轻微过冲 (≤6%)，只用于点击反馈这类 <200ms 的微交互 */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
  --e-glide:cubic-bezier(.16,1,.3,1);
  --d-fast:160ms; --d-base:280ms; --d-mid:520ms; --d-slow:820ms; --d-epic:1200ms;

  /* —— 布局 —— */
  --wrap:1240px;
  --gut:clamp(20px,4vw,56px);
  --rail-reserve:130px;   /* 右侧章节轨占位；1180px 以下轨道隐藏，此值归零 */
  --nav-h:64px;
}

/* ══════════════════════════ 02 RESET + BASE ══════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 32px);
}
/* 惯性滚动接管时交回控制权，否则两套缓动叠加会变糊 */
html.has-lerp{scroll-behavior:auto}

body{
  background:var(--bg);
  color:var(--fg-2);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.8;
  letter-spacing:.008em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
/* 注意：不要在 html/body 上写 overflow-x:hidden。
   它会切断 body→视口的 overflow 传播，使根元素不再是合法滚动容器。
   溢出的装饰元素各自用 fixed/clip 容器裁剪。 */

h1,h2,h3,h4,h5{color:var(--fg);font-weight:650;line-height:1.18;letter-spacing:-.018em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em;line-height:1.35}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--brand);color:var(--on-brand)}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════════════════════ 03 MOTION ══════════════════════════ */

/* —— 3.1 进场原语 ——
   基线是「可见」。只有当 <html class="js"> 时才隐藏，
   因此 JS 失效或被拦截时内容照常呈现，只是没有动效。 */
.rv{opacity:1}
html.js .rv{
  opacity:0;
  transform:translate3d(0,var(--rv-y,26px),0) scale(var(--rv-s,1));
  filter:blur(var(--rv-b,6px));
  transition:
    opacity var(--d-slow) var(--e-out) var(--rv-d,0ms),
    transform var(--d-slow) var(--e-out) var(--rv-d,0ms),
    filter var(--d-slow) var(--e-out) var(--rv-d,0ms);
}
/* 刻意不写 will-change。整页有三十多个 .rv，若每个都常驻
   will-change:filter，浏览器会为尚未进场的元素预先分配同样多的合成层，
   在长页面上足以耗尽层预算，反而掉帧。交给浏览器在过渡开始时按需提层。 */
html.js .rv.in{opacity:1;transform:none;filter:blur(0)}
html.js .rv.done{transition:none}

/* 变体 */
.rv--up{--rv-y:44px}
.rv--soft{--rv-y:14px;--rv-b:3px}
.rv--zoom{--rv-y:0px;--rv-s:.965;--rv-b:8px}
.rv--left{--rv-y:0px}
html.js .rv--left{transform:translate3d(-30px,0,0);filter:blur(var(--rv-b,6px))}
html.js .rv--left.in{transform:none}

/* 组内错峰：让 JS 只写一个 --i，延迟由 CSS 计算 */
html.js [data-stagger] > *{--rv-d:calc(var(--i,0) * 90ms)}
html.js [data-stagger="tight"] > *{--rv-d:calc(var(--i,0) * 55ms)}
html.js [data-stagger="loose"] > *{--rv-d:calc(var(--i,0) * 140ms)}

/* —— 3.2 逐行文字升起 ——
   JS 把每行包进 .ln > i，遮罩由 .ln 的 overflow 提供。
   位移带 8% 的过冲余量，配合 --e-glide 读起来像纸张落定。 */
.kin{display:block}
.kin .ln{display:block;overflow:hidden;padding-block:.06em}
.kin .ln > i{
  display:block;font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform 1s var(--e-glide) var(--ln-d,0ms);
  will-change:transform;
}
.kin.in .ln > i{transform:none}
.kin.done .ln > i{will-change:auto}

/* —— 3.3 滚动进度 ——
   JS 给注册元素写 --p（0→1）。所有连续动效都读这一个变量，
   不用 scroll-timeline：Firefox 尚未默认开启，微信 webview 版本参差，
   rAF + 单次批量读写在这里更可控，也更容易统一节奏。 */
[data-progress]{--p:0}

/* 视差：位移量由 --par 控制（px），正值下行、负值上行 */
[data-par]{transform:translate3d(0,calc((var(--p) - .5) * var(--par,60px) * -1),0)}

/* 文字随滚动点亮：整段暗，读到哪亮到哪 */
.fill{
  background-image:linear-gradient(to right,var(--fg) 0 50%,var(--fg-4) 50% 100%);
  background-size:200% 100%;
  background-position:calc((1 - var(--p)) * 100%) 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fill{color:var(--fg);background:none}
}

/* —— 3.4 微交互原语 —— */
.mag{transition:transform var(--d-base) var(--e-out)}
.mag[data-mag-active]{transition:transform 90ms linear}

/* 光标跟随高光：JS 写 --mx/--my（px，相对元素） */
.spot{position:relative;isolation:isolate}
.spot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;opacity:0;
  transition:opacity var(--d-mid) var(--e-out);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(0,204,141,.13),transparent 62%);
}
.spot:hover::after{opacity:1}

/* 链接下划线扫入 */
.ul{background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--d-base) var(--e-out);padding-bottom:2px}
.ul:hover{background-size:100% 1px}

/* —— 3.5 无障碍：一次性关掉全部动效 —— */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  html.js .rv{opacity:1;transform:none;filter:none}
  .kin .ln > i{transform:none}
  [data-par]{transform:none}
  .fill{color:var(--fg);background:none;-webkit-text-fill-color:currentColor}
}

/* ══════════════════════════ 04 COMPONENTS ══════════════════════════ */

/* —— 4.1 材质层：颗粒 + 暗角 ——
   深色大面积渐变必然有色带，颗粒是最省的解法（比 dithering 便宜得多）。 */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:var(--vignette)}

/* —— 4.2 元信息标签 —— */
.eyebrow{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.24em;
  text-transform:uppercase;color:var(--brand-ink);display:inline-flex;align-items:center;
  gap:11px;font-weight:500}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--brand);box-shadow:0 0 0 4px rgba(0,204,141,.16)}

.secnum{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.2em;
  color:var(--fg-4);display:block;margin-bottom:var(--s4)}

/* —— 4.3 按钮 —— */
.btn{
  --btn-bg:transparent;--btn-fg:var(--fg);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-full);
  font-size:15px;font-weight:550;letter-spacing:.012em;line-height:1;
  background:var(--btn-bg);color:var(--btn-fg);
  isolation:isolate;overflow:hidden;white-space:nowrap;
  transition:color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             background var(--d-base) var(--e-out);
}
.btn > *{position:relative;z-index:2}
.btn svg{width:15px;height:15px;flex:none;
  transition:transform var(--d-base) var(--e-out)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:90ms}

.btn-primary{--btn-bg:var(--brand-fill);--btn-fg:var(--on-brand);font-weight:600;
  box-shadow:0 1px 0 var(--sheen-btn) inset,var(--shadow-btn)}
/* 悬停时一圈更亮的绿从中心扩开，而不是整块换色 —— 换色会有跳变感 */
.btn-primary::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:radial-gradient(120% 160% at 50% 118%,var(--brand-soft),transparent 70%);
  opacity:0;transition:opacity var(--d-mid) var(--e-out)}
.btn-primary:hover{box-shadow:0 1px 0 var(--sheen-btn) inset,var(--shadow-btn-h)}
.btn-primary:hover::before{opacity:1}

.btn-ghost{--btn-fg:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:var(--fg);opacity:0;transition:opacity var(--d-base) var(--e-out)}
.btn-ghost:hover{--btn-fg:var(--on-brand);box-shadow:inset 0 0 0 1px transparent}
.btn-ghost:hover::before{opacity:1}


.btn-sm{padding:11px 18px;font-size:13.5px}

/* 文字箭头链接 */
.alink{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);
  font-weight:500;color:var(--brand-ink);transition:gap var(--d-base) var(--e-out)}
.alink:hover{gap:13px}
.alink svg{width:13px;height:13px}

/* —— 4.4 卡片 —— */
.card{
  position:relative;border-radius:var(--r-lg);padding:var(--s6);
  background:var(--card-bg);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--sheen),var(--elev);
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out);
}
.card:hover{box-shadow:inset 0 0 0 1px var(--line-brand),inset 0 1px 0 var(--sheen),
  var(--shadow-card)}
/* 3D 倾斜由 JS 写 --rx/--ry，容器提供透视 */
.tilt-host{perspective:1100px}
.tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transform-style:preserve-3d;transition:transform var(--d-mid) var(--e-out)}
.tilt[data-tilt-active]{transition:transform 120ms linear}

/* —— 4.5 导航 —— */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:var(--s4) var(--gut);
  pointer-events:none;transition:transform var(--d-mid) var(--e-out)}
.nav.hide{transform:translateY(-118%)}
.nav-in{
  max-width:var(--wrap);margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;gap:var(--s6);
  padding:0 10px 0 18px;border-radius:var(--r-lg);pointer-events:auto;
  background:transparent;box-shadow:inset 0 0 0 1px transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out),
             -webkit-backdrop-filter var(--d-mid) var(--e-out),
             backdrop-filter var(--d-mid) var(--e-out);
}
/* 只有滚动离开首屏后才凝结出玻璃，首屏保持纯净 */
.nav.stuck .nav-in{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--sheen),
             var(--shadow-nav);
}
.nav-brand{flex:none;display:flex;align-items:center;height:100%}
.nav-brand img{height:36px;width:auto}
.nav-brand .brand-mark{display:none;height:34px;width:34px}
/* 必须 position:relative：滑块是 absolute，若这里不定位，滑块的包含块和
   链接的 offsetLeft 参照都会退到 .nav-in，而滑块自身的静态位置又落在
   .nav-links 的起点上——两者相加等于把偏移算了两遍，滑块会甩到右边，
   在 CTA 旁边留下一枚灰色小胶囊。 */
.nav-links{position:relative;display:flex;gap:var(--s2);margin-left:auto;align-items:center}
.nav-links a{position:relative;padding:9px 14px;border-radius:var(--r-full);
  font-size:14px;color:var(--fg-3);letter-spacing:.01em;
  transition:color var(--d-base) var(--e-out)}
.nav-links a:hover{color:var(--fg)}
.nav-links a.on{color:var(--fg)}
/* 活动指示器是一个共享的滑块，由 JS 定位 —— 移动比淡入淡出更有连续感 */
.nav-pill{position:absolute;top:0;left:0;z-index:-1;border-radius:var(--r-full);
  background:var(--track-bg);box-shadow:inset 0 0 0 1px var(--line);
  opacity:0;transition:transform var(--d-mid) var(--e-out),
    width var(--d-mid) var(--e-out),opacity var(--d-base) var(--e-out)}
.nav-pill.on{opacity:1}
.nav-right{display:flex;align-items:center;gap:var(--s3);flex:none}

/* 语言开关 */
.lang{position:relative;display:flex;padding:3px;border-radius:var(--r-full);
  box-shadow:inset 0 0 0 1px var(--line)}
.lang-thumb{position:absolute;top:3px;left:3px;bottom:3px;border-radius:var(--r-full);
  background:var(--brand);
  transition:transform var(--d-mid) var(--e-spring),width var(--d-mid) var(--e-out)}
.lang button{position:relative;z-index:2;padding:6px 13px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:600;color:var(--fg-3);letter-spacing:.02em;
  transition:color var(--d-base) var(--e-out)}
.lang button[aria-pressed="true"]{color:var(--on-brand)}

/* —— 主题开关 —— */
.theme-swap,.theme-swap *,.theme-swap *::before,.theme-swap *::after{
  transition:none!important;animation-play-state:paused!important}
.themetog{width:38px;height:38px;flex:none;border-radius:var(--r-full);display:grid;
  place-items:center;color:var(--fg-3);box-shadow:inset 0 0 0 1px var(--line);
  transition:color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             background var(--d-base) var(--e-out)}
.themetog:hover{color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--line-brand)}
.themetog:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.themetog svg{width:18px;height:18px;grid-area:1/1;
  transition:opacity var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out)}
/* 深色下给出"点它会变亮"的预告，所以显示太阳；浅色下反之 */
.themetog .i-moon{opacity:0;transform:rotate(-40deg) scale(.7)}
.themetog .i-sun{opacity:1;transform:none}
:root[data-theme="light"] .themetog .i-moon{opacity:1;transform:none}
:root[data-theme="light"] .themetog .i-sun{opacity:0;transform:rotate(40deg) scale(.7)}

/* 选择器要写成 .drawer a.drawer-cta：.drawer a 的 display/padding/font-size/border 特异性更高，
   只写 .drawer-cta 会被它盖掉，按钮就成了通栏 26px 的左对齐绿条。 */
.drawer a.drawer-cta{display:none;align-self:flex-start;margin-top:var(--s5);padding:13px 24px;
  font-size:15px;color:var(--on-brand);border-bottom:0;justify-content:center}
/* 断点里会把它切成 display:flex，所以主轴必须显式竖起来——
   否则三根横杠会并排成一行，下面的 margin-top 也变成交叉轴外边距而失效。 */
.burger{display:none;flex-direction:column;width:42px;height:42px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;color:var(--fg)}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform var(--d-base) var(--e-out),opacity var(--d-fast) linear}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* 移动端抽屉 */
.drawer{position:fixed;inset:0;z-index:190;background:var(--drawer-bg);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity var(--d-mid) var(--e-out),visibility var(--d-mid)}
.drawer.open{opacity:1;visibility:visible}
/* 26px 在 390 上勉强算"大菜单"风格，但在 500–640 的窄窗口里就是夸张了；
   19px 配 14px 上下内边距，触控高度仍有 ~62px。 */
.drawer a{display:block;padding:14px 0;font-size:19px;font-weight:600;color:var(--fg);
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(20px);
  transition:opacity var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out)}
.drawer.open a{opacity:1;transform:none}
/* 逐条从上到下进场。延迟必须覆盖抽屉里的全部条目：之前只写到第 5 个，
   后来加的「联系我们」「提交项目」没有延迟，0ms 就出现，反而跑在前面。
   这里写到第 8 个，给以后再加条目留余量。 */
.drawer.open a:nth-child(1){transition-delay:60ms}
.drawer.open a:nth-child(2){transition-delay:110ms}
.drawer.open a:nth-child(3){transition-delay:160ms}
.drawer.open a:nth-child(4){transition-delay:210ms}
.drawer.open a:nth-child(5){transition-delay:260ms}
.drawer.open a:nth-child(6){transition-delay:310ms}
.drawer.open a:nth-child(7){transition-delay:360ms}
.drawer.open a:nth-child(8){transition-delay:410ms}

/* —— 4.6 章节轨（右侧进度）—— */
/* 轨道是一个 top:0/bottom:0 的满高窄盒，本身不该有任何底色。
   配色全部走 --fg-* 语义变量，换主题时自动跟随。 */
.rail{position:fixed;right:calc(var(--gut) * .55);top:0;bottom:0;
  z-index:150;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s1);align-items:flex-end;pointer-events:none}
.rail a{pointer-events:auto}
.rail a{display:flex;align-items:center;gap:10px;padding:6px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--fg-4);
  transition:color var(--d-base) var(--e-out)}
.rail a span{opacity:0;transform:translateX(6px);white-space:nowrap;
  transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out)}
.rail:hover a span{opacity:1;transform:none}
.rail i{display:block;width:12px;height:1px;background:currentColor;
  transition:width var(--d-mid) var(--e-out),background var(--d-mid) var(--e-out)}
.rail a:hover{color:var(--fg-2)}
.rail a.on{color:var(--brand-ink)}
.rail a.on i{width:26px;background:var(--brand)}
.rail a.on span{opacity:1;transform:none}

/* —— 4.7 走马灯 —— */
.marquee{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;flex:none;gap:var(--s8);padding-right:var(--s8);
  animation:slide var(--mq-dur,42s) linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translate3d(-100%,0,0)}}

/* —— 4.8 分隔与装饰 —— */
.hr{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line-strong) 18%,
  var(--line-strong) 82%,transparent)}
/* 从中心向两侧拉开的线，配合 --p 使用 */
.hr-grow{height:1px;background:var(--line-strong);transform:scaleX(var(--p,0));
  transform-origin:0 50%}

/* 数字 */
.stat-n{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--fg)}

/* ══════════════════════════ 05 SECTIONS ══════════════════════════ */

/* —— 5.0 节奏 ——
   全站单一底色。深浅只由主题切换整体决定，页面内部不再插入对比色带：
   任何深↔浅的过渡带，中点都会落在灰上，长短都救不回来。
   节奏改由留白、字号层级和卡片密度来给。 */
.sec{position:relative;padding-block:var(--s11)}
.sec-head{max-width:74ch;margin-bottom:var(--s9)}
.sec-head h2{margin-top:var(--s4)}
.sec-head .desc{margin-top:var(--s5);font-size:var(--t-lead);color:var(--fg-3);
  line-height:1.85;max-width:60ch}
/* 相邻同底的区块之间给一条极淡的分隔，代替原来的明暗切换 */
.sec + .sec::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);
  height:1px;background:var(--line)}

/* —— 5.1 首屏 —— */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + var(--s10)) var(--s10);overflow:hidden;isolation:isolate}
/* 画布：流场焦散。透明底，颜色全部来自 canvas 的加色混合 */
.hero-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  opacity:0;transition:opacity 1.6s var(--e-out) 260ms}
.hero-canvas.on{opacity:1}
/* 画布之上压一层深色渐变，保证文字区域始终有足够对比 */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--hero-scrim)}
.hero > .wrap{position:relative;z-index:2}
.hero-in{max-width:1000px}

.hero h1{font-size:var(--t-display);line-height:1.06;letter-spacing:-.035em;
  font-weight:680;margin-top:var(--s6);max-width:16ch}
/* 品牌绿在 #091712 上对比度 8.4:1，可以放心承载标题。
   不要给它加 text-shadow 辉光 —— 逐行遮罩用的是 overflow:hidden，
   会把辉光沿行边界裁成一个硬邦邦的矩形。环境光交给 .hero-field。 */
.hero h1 em{font-style:normal;color:var(--brand-ink)}
.hero-lede{margin-top:var(--s7);max-width:46ch;font-size:var(--t-lead);
  color:var(--fg-2);line-height:1.9}
.hero-note{margin-top:var(--s5);font-family:var(--serif);font-size:15.5px;
  color:var(--fg-3);letter-spacing:.08em;padding-left:var(--s4);
  border-left:1px solid var(--line-brand)}
.hero-acts{margin-top:var(--s8);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* 信任条 */
.trust{margin-top:var(--s11);padding-top:var(--s6);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.trust-item .k{font-family:var(--mono);font-size:26px;font-weight:400;color:var(--fg);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.trust-item .k em{font-style:normal;color:var(--brand-ink)}
.trust-item .v{margin-top:var(--s3);font-size:var(--t-xs);color:var(--fg-3);
  line-height:1.7;max-width:22ch}

/* 滚动提示 */
.cue{position:absolute;bottom:var(--s6);left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--fg-4);
  text-transform:uppercase}
.cue i{display:block;width:1px;height:44px;background:var(--line-strong);
  position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--brand);
  animation:cueRun 2.4s var(--e-io) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* —— 5.2 活动条（走马灯 + 常驻 CTA）—— */
.ticker{position:relative;z-index:3;border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(0,204,141,.05),rgba(245,130,31,.045));
  padding-block:var(--s4);overflow:hidden}
.ticker-in{display:flex;align-items:center;gap:var(--s6)}
.ticker .tag{flex:none;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-soft);padding:5px 11px;border-radius:var(--r-full);
  box-shadow:inset 0 0 0 1px rgba(245,130,31,.34)}
.ticker .tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,130,31,.5)}
  50%{opacity:.7;box-shadow:0 0 0 6px rgba(245,130,31,0)}}
.ticker .marquee{flex:1;min-width:0}
.ticker-track span{font-size:var(--t-sm);color:var(--fg-2);white-space:nowrap}
.ticker-track span b{color:var(--fg);font-weight:600}
.ticker .lnks{flex:none;display:flex;gap:var(--s4)}

/* —— 5.3 对比表 —— */
.cmp{font-size:var(--t-sm);margin-top:var(--s2)}
.cmp thead th{text-align:left;padding:0 var(--s5) var(--s4);font-family:var(--mono);
  font-size:var(--t-meta);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-4);font-weight:500}
.cmp tbody th{text-align:left;padding:var(--s5);font-size:16px;font-weight:600;
  color:var(--fg-2);white-space:nowrap;vertical-align:top}
.cmp td{padding:var(--s5);color:var(--fg-3);vertical-align:top;line-height:1.75;
  border-top:1px solid var(--line)}
.cmp tbody th{border-top:1px solid var(--line)}
/* 自己那一行：加底、加左侧品牌色条，并在 hover 时轻微抬起 */
.cmp tr.self{position:relative}
.cmp tr.self th,.cmp tr.self td{background:var(--tint-brand);color:var(--fg-2);
  border-top-color:var(--line-brand)}
.cmp tr.self th{color:var(--brand-ink);font-weight:700;border-left:2px solid var(--brand);
  border-radius:var(--r-sm) 0 0 var(--r-sm)}
.cmp tr.self td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.cmp-foot{margin-top:var(--s7);font-size:var(--t-lead);color:var(--fg-3);max-width:62ch;
  line-height:1.85}
.cmp-foot b{color:var(--fg);font-weight:600}

/* —— 5.3 分工三段 —— */
.pact{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pact-item{padding:var(--s6);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--sheen),var(--elev)}
.pact-item .n{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.22em;
  color:var(--brand-ink);display:block}
.pact-item h3{margin:var(--s4) 0 var(--s3);font-size:22px;letter-spacing:-.02em}
.pact-item p{font-size:var(--t-sm);color:var(--fg-3);line-height:1.8}
@media (max-width:900px){.pact{grid-template-columns:1fr}}

/* —— 5.4 中台舞台（滚动钉住 + 横向推进）—— */
.stage{position:relative;height:340vh}
.stage-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.stage-head{max-width:var(--wrap);margin-inline:auto;width:100%;
  padding-inline:var(--gut);margin-bottom:var(--s7)}
/* 左内边距和 .wrap 的内容起点落在同一条竖线上，卡片才与标题对齐起步。
   右边额外留出 --rail-reserve，把内容盒收在章节轨左侧；遮罩的两个不透明
   端点直接用这两个内边距，卡片就正好在内容盒内实边、出了盒才开始淡。 */
.stage-viewport{overflow:hidden;
  --pad-l:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));
  --pad-r:calc(var(--gut) + var(--rail-reserve));
  padding-left:var(--pad-l);padding-right:var(--pad-r);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--pad-l),
    #000 calc(100% - var(--pad-r)),transparent calc(100% - var(--gut) - 16px));
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--pad-l),
    #000 calc(100% - var(--pad-r)),transparent calc(100% - var(--gut) - 16px))}
.stage-track{display:flex;gap:var(--s5);
  transform:translate3d(calc(var(--p,0) * var(--shift,0) * -1px),0,0);
  will-change:transform}
.panel{flex:none;width:min(440px,78vw);padding:var(--s7) var(--s6);border-radius:var(--r-lg);
  background:var(--panel-bg);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--sheen),var(--elev)}
.panel .n{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.22em;
  color:var(--brand-ink);display:block}
.panel h3{margin:var(--s4) 0 var(--s5);font-size:26px;letter-spacing:-.02em}
.panel ul li{position:relative;padding-left:var(--s5);margin-bottom:var(--s4);
  font-size:var(--t-sm);color:var(--fg-3);line-height:1.75}
.panel ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;
  background:var(--brand)}
.panel-fig{margin-top:var(--s6);height:112px;border-radius:var(--r-md);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.stage-bar{max-width:var(--wrap);margin:var(--s7) auto 0;width:100%;padding-inline:var(--gut)}
.stage-bar .rail-line{height:1px;background:var(--line);position:relative}
.stage-bar .rail-line::after{content:"";position:absolute;inset:0;background:var(--brand);
  transform:scaleX(var(--p,0));transform-origin:0 50%}

/* —— 5.5 EIR —— */
.eirs{display:grid;gap:var(--s5)}
.eir{display:grid;grid-template-columns:290px 1fr;gap:var(--s7);align-items:start;
  padding:var(--s7)}
.eir-stat .no{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.2em;
  color:var(--fg-4)}
.eir-stat .big{margin-top:var(--s3);font-size:clamp(24px,2.6vw,34px);font-weight:650;
  letter-spacing:-.025em;color:var(--brand-ink);line-height:1.15}
.eir-stat .cap{margin-top:var(--s2);font-size:var(--t-xs);color:var(--fg-4)}
.eir-body h3{margin-bottom:var(--s3)}
.eir-body p{font-size:var(--t-sm);color:var(--fg-3);line-height:1.85;max-width:56ch}
.eir-social{margin-top:var(--s5);display:flex;gap:var(--s2)}
.eir-social a{width:32px;height:32px;border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--fg-3);box-shadow:inset 0 0 0 1px var(--line);
  transition:color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out)}
.eir-social a:hover{color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--line-brand);
  transform:translateY(-2px)}

/* —— 5.6 网络 —— */
.band{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10)}
.band h3{font-size:var(--t-h3)}
.band .sub{margin-top:var(--s3);font-size:var(--t-sm);color:var(--fg-3);max-width:42ch;
  line-height:1.8}
.logos{margin-top:var(--s6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.logos div{height:84px;border-radius:var(--r-md);display:grid;place-items:center;
  padding:var(--s4);box-shadow:inset 0 0 0 1px var(--logo-tile-line),var(--elev);
  background:var(--logo-tile);
  transition:box-shadow var(--d-base) var(--e-out),transform var(--d-base) var(--e-out)}
.logos div:hover{box-shadow:inset 0 0 0 1px var(--line-brand);transform:translateY(-3px)}
/* 素材里既有横向锁定组合（约 3.4:1）也有近方形的符号（约 1.2:1）。
   只卡高度会让方形标看着比横标小一半，所以高、宽各给一个上限：
   横标被宽度卡住，方形标被高度卡住，两者的视觉面积才接近。 */
.logos img{max-height:44px;max-width:min(130px,100%);width:auto;object-fit:contain;
  opacity:var(--logo-op);
  transition:transform var(--d-mid) var(--e-out)}
.logos div:hover img{transform:scale(1.04)}
/* 只剩资本一组时给大一号的展示位 */
.logos-lg{margin-top:var(--s7);grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
.logos-lg div{height:104px}
.logos-lg img{max-height:52px;max-width:170px}
@media (max-width:640px){.logos-lg div{height:76px}}

/* —— 5.6b 资本联盟 —— */
.allies{display:grid;grid-template-columns:1fr 2fr;gap:var(--s8);align-items:start}
.ally h3{font-size:var(--t-h3);margin-bottom:var(--s5);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line)}
.ally .logos{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.allies > .ally:first-child .logos{grid-template-columns:1fr}
.ally .logos div{height:104px}
/* 上限要同时受卡片内容区约束：390px 下 2×2 卡片内容区只有约 133px，168px 会溢出裁切 */
.ally .logos img{max-height:46px;max-width:min(168px,100%)}

/* 语言相关的显隐：中文环境下英文入口收起，避免看起来像两场不同的活动 */
:root[lang="zh-CN"] .only-en{display:none}

@media (max-width:900px){
  .allies{grid-template-columns:1fr;gap:var(--s7)}
  .ally .logos div{height:86px}
}

/* —— 5.7 引述 —— */
/* 行宽不能用 ch：ch 是字符 "0" 的前进宽度，中日韩字体里它约等于半个汉字，
   22ch 实际只排得下五六个汉字，整段会碎成一条窄柱。汉字宽约 1em，
   直接用 em 计数，17em 即约十七个汉字一行。 */
/* 外层不能也用 em——它自己的 font-size 还是正文 16px，20em 只有 320px，
   会反过来把 blockquote 卡死。外层用 px，行宽交给 blockquote 自己的 em。 */
.quote{max-width:1000px;margin-inline:auto;text-align:center}
.quote blockquote{font-family:var(--serif);font-size:clamp(26px,4vw,52px);line-height:1.42;
  letter-spacing:-.01em;font-weight:400;max-width:17em;margin-inline:auto;text-wrap:balance}
.quote-by{margin-top:var(--s8);display:flex;align-items:center;gap:var(--s3);
  justify-content:center}
.quote-by img{width:44px;height:44px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px var(--line)}
.quote-by h4{font-size:var(--t-sm);font-weight:600}
.quote-by a{font-family:var(--mono);font-size:var(--t-xs);color:var(--fg-4);
  transition:color var(--d-base) var(--e-out)}
.quote-by a:hover{color:var(--brand-ink)}

/* —— 5.8 转化 —— */
.cta{position:relative;padding-block:var(--s12) var(--s10);overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--cta-glow)}
.cta > .wrap{position:relative;z-index:1}
/* 同 .quote：容器自己的 font-size 是正文 16px，24ch 只有约 210px，
   会把里面 56px 的标题挤成每行三四个字。容器一律用 px 定行宽。 */
.cta-in{max-width:780px;text-align:center;margin-inline:auto}
.cta-in h2{font-size:var(--t-h1);letter-spacing:-.03em;line-height:1.14}
.cta-in p{margin-top:var(--s6);font-size:var(--t-lead);color:var(--fg-3);
  max-width:52ch;margin-inline:auto;line-height:1.9}
.cta-acts{margin-top:var(--s8);display:flex;gap:var(--s3);justify-content:center;
  flex-wrap:wrap}
.offices{margin-top:var(--s11);padding-top:var(--s7);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.office .c{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.2em;
  color:var(--brand-ink)}
.office h4{margin-top:var(--s3);font-size:15px;font-weight:600}
.office p{margin-top:var(--s1);font-size:var(--t-xs);color:var(--fg-4);line-height:1.7}

/* —— 5.9 页脚 —— */
.foot{background:var(--foot-bg);padding-block:var(--s9) var(--s6);
  border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s8);
  padding-bottom:var(--s8);border-bottom:1px solid var(--line)}
.foot-brand img{height:30px;width:auto;opacity:.9}
.foot-brand p{margin-top:var(--s5);font-size:var(--t-xs);color:var(--fg-4);max-width:34ch;
  line-height:1.8}
.foot-col h5{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-4);font-weight:500;margin-bottom:var(--s4)}
.foot-col a{display:block;padding:5px 0;font-size:var(--t-sm);color:var(--fg-3);
  transition:color var(--d-base) var(--e-out)}
.foot-col a:hover{color:var(--fg)}
.foot-col a.out{display:inline-flex;align-items:center;gap:6px}
.foot-col a.out svg{width:12px;height:12px;flex:none;color:var(--fg-4);
  transition:transform var(--d-base) var(--e-out),color var(--d-base) var(--e-out)}
.foot-col a.out:hover svg{color:var(--brand-ink);transform:translate(1px,-1px)}
.qrs{display:flex;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap}
/* 宽度跟着图走，说明文字才不会比图窄；换行由 <b>/<span> 两行结构决定，
   不再依赖 max-width 去"挤"出折行 */
/* 92px 是按最长的英文标签「WeChat concierge」定的：再窄它就会折行，
   而中文标签最长只有 5 个字（约 53px），有富余。品牌栏宽约 410px，放得下三枚。 */
.qr{width:92px;text-align:center}
.qr img{width:92px;height:92px;border-radius:var(--r-sm);background:#fff;padding:5px;
  object-fit:contain}
/* 小红书是横向字标（约 2.8:1），塞进方形卡要留出上下留白，否则会顶到边 */
.qr--mark img{padding:29px 10px}
.qr p{margin-top:var(--s2);font-size:10.5px;line-height:1.5;color:var(--fg-4)}
.qr p b{display:block;font-weight:600;color:var(--fg-3)}
/* 号码整体不折断；tabular-nums 让数字等宽，视觉上更齐 */
.qr p span{display:block;font-variant-numeric:tabular-nums;word-break:keep-all}
.foot-bot{padding-top:var(--s5);display:flex;justify-content:space-between;
  align-items:center;gap:var(--s5);flex-wrap:wrap}
.foot-bot p{font-size:var(--t-xs);color:var(--fg-4)}
.socials{display:flex;gap:var(--s2)}
.socials a{width:34px;height:34px;border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--fg-4);box-shadow:inset 0 0 0 1px var(--line);
  transition:color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out)}
.socials a:hover{color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--line-brand);
  transform:translateY(-2px)}

/* ══════════════════════════ 05.9 活动动态页 ══════════════════════════ */
.pagehead{padding-block:calc(var(--nav-h) + var(--s10)) var(--s9);position:relative}
.pagehead h1{margin-top:var(--s5);font-size:var(--t-display);letter-spacing:-.035em;
  line-height:1.06;font-weight:680}
.pagehead-lede{margin-top:var(--s6);font-size:var(--t-lead);color:var(--fg-3);
  max-width:56ch;line-height:1.9}
.jump{margin-top:var(--s8);display:flex;gap:var(--s3);flex-wrap:wrap}
.jump a{padding:9px 18px;border-radius:var(--r-full);font-size:var(--t-sm);color:var(--fg-2);
  box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);
  transition:color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out)}
.jump a:hover{color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--line-brand);
  transform:translateY(-2px)}

/* 单场活动卡 */
.ev{padding:var(--s7)}
.ev + .ev{margin-top:var(--s5)}
.ev-head{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.ev-mark{width:52px;height:52px;flex:none;border-radius:var(--r-sm)}
.ev-head h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;line-height:1.3}
.ev .tag{flex:none;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.16em;
  padding:5px 11px;border-radius:var(--r-full);color:var(--on-brand);background:var(--brand-fill)}
.ev .tag-past{background:transparent;color:var(--fg-4);box-shadow:inset 0 0 0 1px var(--line)}
.ev-lede{margin-top:var(--s5);color:var(--fg-3);line-height:1.9;max-width:76ch}
.ev-meta{margin-top:var(--s6);display:flex;gap:var(--s7);flex-wrap:wrap;
  padding-top:var(--s5);border-top:1px solid var(--line)}
.ev-meta dt{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-4)}
.ev-meta dd{margin-top:6px;font-size:var(--t-sm);color:var(--fg-2);font-weight:500}
.ev-acts{margin-top:var(--s6);display:flex;gap:var(--s3);flex-wrap:wrap}

.ev-notes{margin-top:var(--s7)}
.ev-notes h4,.sub-h{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-4);margin-bottom:var(--s5)}
.sub-h{margin-top:var(--s9)}
.sub-lede{margin:calc(var(--s5) * -1 + 4px) 0 var(--s6);color:var(--fg-3);font-size:var(--t-sm)}
.ev-notes ul li{position:relative;padding-left:var(--s5);margin-bottom:var(--s4);
  font-size:var(--t-sm);color:var(--fg-3);line-height:1.85;max-width:80ch}
.ev-notes ul li::before{content:"";position:absolute;left:0;top:.78em;width:8px;height:1px;
  background:var(--brand)}

/* 获奖名单 */
.wins{display:grid;gap:var(--s6)}
.win-block h5{font-size:var(--t-sm);color:var(--brand-ink);font-weight:600;
  margin-bottom:var(--s3)}
.win-block .logos{grid-template-columns:repeat(4,minmax(0,1fr));max-width:660px;margin-top:0}
.win-block .logos div{height:78px}

/* 要点四栏 */
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s6)}
.notes h5{font-size:15px;margin-bottom:var(--s2)}
.notes p{font-size:var(--t-xs);color:var(--fg-4);line-height:1.8}

.host-logos{display:flex;flex-wrap:wrap;gap:var(--s3)}
.host-logos > div{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;
  border-radius:var(--r-full);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),var(--elev)}
.host-logos img{width:30px;height:30px;object-fit:contain;flex:none;border-radius:6px}
.host-logos span{font-size:var(--t-sm);color:var(--fg-2)}

/* 相册 */
.gallery{margin-top:var(--s8);display:grid;gap:var(--s3);
  grid-template-columns:repeat(4,1fr)}
.gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
  box-shadow:inset 0 0 0 1px var(--line),var(--elev);background:var(--surface-2)}
/* 相册里绝大多数是竖构图（3:4 甚至 2:3），塞进 4:3 的框后纵向只剩五成，
   而 object-position 默认 center 会从上下等量地切——站着的人头就没了。
   把取景窗上移到 15%，等于「优先保留上半部分」。
   横构图（宽高比 ≥ 4/3）本来就不做纵向裁切，这个值对它们无影响。 */
.gallery img{width:100%;height:100%;object-fit:cover;object-position:center 15%;
  transition:transform 620ms var(--e-out),filter var(--d-mid) var(--e-out)}
.gallery figure:hover img{transform:scale(1.05)}

@media (max-width:900px){
  .notes{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .win-block .logos{grid-template-columns:repeat(2,1fr)}
  .ev{padding:var(--s6)}
}
@media (max-width:640px){
  .notes{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .ev-meta{gap:var(--s5)}
}

/* ══════════════════════════ 06 RESPONSIVE ══════════════════════════ */
@media (max-width:1180px){
  :root{--rail-reserve:0px}
  .rail{display:none}
  .band{grid-template-columns:1fr;gap:var(--s9)}
}
@media (max-width:900px){
  :root{--s11:110px;--s12:140px;--s10:88px}
  .nav-links{display:none}
  /* 把右侧一组顶到最右：靠右的 margin:auto 原本挂在 .nav-links 上，
     它一隐藏就没人撑开剩余空间，logo 和按钮会挤在左边留出一大片空白。 */
  .nav-right{margin-left:auto}
  .burger{display:flex}
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + var(--s9)) var(--s9)}
  .hero h1{max-width:none}
  .cue{display:none}
  .trust{grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s9)}
  .eir{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6)}
  .offices{grid-template-columns:1fr;gap:var(--s5)}
  .foot-top{grid-template-columns:1fr;gap:var(--s7)}
  .ticker-in{flex-wrap:wrap;gap:var(--s3)}
  .ticker .marquee{order:3;flex-basis:100%}
  /* 舞台在窄屏退回竖向堆叠：横向推进在触摸设备上会和原生滚动打架 */
  .stage{height:auto}
  .stage-sticky{position:static;height:auto;padding-block:var(--s11)}
  .stage-viewport{overflow:visible;-webkit-mask-image:none;mask-image:none;
    padding-inline:0}
  .stage-track{flex-direction:column;transform:none!important;gap:var(--s4)}
  .panel{width:100%}
  .stage-bar{display:none}
  .stage-head{padding-inline:0}
  .stage-sticky > .stage-head,.stage-sticky > .stage-viewport{max-width:var(--wrap);
    margin-inline:auto;padding-inline:var(--gut);width:100%}
}
@media (max-width:640px){
  :root{--t-body:15.5px}
  /* 390px 上 logo(130)+语言(86)+CTA(110)+汉堡(42) 一行装不下，
     主 CTA 收进抽屉底部，顶栏只留 logo / 语言 / 汉堡 */
  .nav-right > .btn{display:none}
  .drawer a.drawer-cta{display:inline-flex}
  /* 横版 logo 在这里只剩 119px，已低于规范的 140px 下限，且和右侧三件挤不进一行
     （375/360/320 分别超出 37/44/64px）。改用符号后连 320 都有余量。 */
  .nav-brand .brand-lockup{display:none}
  .nav-brand .brand-mark{display:block}
  /* 桌面的 32px 品牌间距在 320px 上仍会挤出 13px，窄屏收到 12px */
  .nav-in{gap:var(--s3);padding:0 8px 0 14px}
  .nav-brand{padding:0 3px}
  /* 触控目标：Apple HIG 44pt、Material 48dp，这里统一抬到 ≥40px */
  .lang button{padding:9px 13px}
  .themetog,.burger{width:42px;height:42px}
  .eir-social a{width:40px;height:40px}
  .foot-col a{padding:8px 0}
  .alink{padding:8px 0}
  .quote-by a{display:inline-block;padding:10px 6px;margin:-10px -6px}
  .socials a{width:40px;height:40px}
  .cmp thead{display:none}
  .cmp tbody tr{display:block;padding:var(--s5) 0;border-top:1px solid var(--line)}
  .cmp tbody th,.cmp td{display:block;padding:0;border:0;background:none!important}
  .cmp tbody th{font-size:18px;margin-bottom:var(--s3)}
  .cmp tr.self th{border-left:0;padding-left:0;color:var(--brand-ink)}
  .cmp td{margin-bottom:var(--s3);padding-left:var(--s5);position:relative}
  .cmp td::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4);
    margin-bottom:3px}
  .cmp td::after{content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:1px;
    background:var(--line)}
  .trust{grid-template-columns:1fr}
  /* 22ch 的行宽是给桌面四列用的；ch 对汉字只有半个字宽，单列时会在 11 个字处折行 */
  .trust-item .v{max-width:none}
  .logos{grid-template-columns:repeat(2,1fr)}
  .quote blockquote{max-width:none}
}

/* 打印时把整站翻成浅色，省墨且可读 */
@media print{
  .grain,.vignette,.nav,.rail,.hero-canvas,.cue,.ticker{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding-block:24px;break-inside:avoid}
}

/* ══════════════════════════ 07 首屏光场 ══════════════════════════
   canvas 只负责水流线条；大块的光交给 CSS —— 它由合成器处理，
   不占主线程，而且渐变本身就是软的，不需要为了柔化再上一遍模糊。 */
.hero-field{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  filter:blur(6px);opacity:.9}
.hero-field span{position:absolute;border-radius:50%;display:block;
  will-change:transform}
.hero-field .b1{width:56vw;height:56vw;left:-8%;top:-6%;
  background:radial-gradient(circle,rgba(0,204,141,.30),transparent 66%);
  animation:drift1 26s var(--e-io) infinite alternate}
.hero-field .b2{width:44vw;height:44vw;right:2%;top:6%;
  background:radial-gradient(circle,rgba(0,147,104,.30),transparent 64%);
  animation:drift2 34s var(--e-io) infinite alternate}
.hero-field .b3{width:36vw;height:36vw;right:20%;bottom:-8%;
  background:radial-gradient(circle,rgba(245,130,31,.13),transparent 62%);
  animation:drift3 42s var(--e-io) infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-11vw,10vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(7vw,-9vh,0) scale(1.22)}}
@media (prefers-reduced-motion:reduce){.hero-field span{animation:none}}

/* 深水区块之间的「水面线」：一条从中心亮起的极细光带 */
.seam{position:relative;height:1px;background:var(--line)}
.seam::after{content:"";position:absolute;left:50%;top:0;height:1px;width:0;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  transform:translateX(-50%);
  transition:width 1.4s var(--e-out)}
.seam.in::after{width:min(560px,70%)}