/* ============================================================
   组件层 —— 全站复用（首页 / 内页 / 后台前端一致）
   ★ 刻意不使用四角 HUD 角标/括号/十字线等装饰件：本项目的"科技感"
     来自经纬网格、玻璃面板、等宽字体、数据密度，而非界面装饰。
     卡片的科技感由左侧 .rail 状态色条承担。
   ============================================================ */

/* ---------- 内页背景层：深空 + 经纬网格 + 扫描线 + 暗角（纯 CSS，零请求） ----------
   ★★ 2026-10-09：这一层是「品牌蓝体现在主题色」的**主载体**。
      用户第 3 条原话：「蓝色、青色这个色系属于比较接近的色系，我们现有的地球
      有光晕（夜晚模式下）、星空背景色都是蓝、青色，所以品牌的蓝色更应该体现在
      整个主题色」。⇒ 蓝色不再做"点"（CTA），而在这里做"面"：
      背景光晕、网格线、扫描线统一由 --tint / --cyan 派生，整页读起来是冷的蓝调，
      但没有任何一个可点击控件因此变蓝。 */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* ★ 网格是"透"的唯一证据：面板透明度再低，背后没东西可看也显不出玻璃。
   所以这一层的可见度要够 —— 透过 panel / 表单能清楚看到它被模糊地折弯。
   ★ 网格用 --tint-hi 的色相（偏结构蓝），不用数据青 —— 青要留给真正的数据元素。 */
.bg-fx .gridbox{position:absolute;inset:0;
  background:
    repeating-linear-gradient(to right,  rgba(77,150,210,.085) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(77,150,210,.085) 0 1px, transparent 1px 80px);
  -webkit-mask-image:radial-gradient(130% 95% at 50% 22%, #000 26%, transparent 86%);
          mask-image:radial-gradient(130% 95% at 50% 22%, #000 26%, transparent 86%)}
/* ★★ 三团光晕 = 主题蓝的"体量"。第一版只有两团且偏青，
   整页读起来是"黑底 + 一点青"，蓝色没有存在感。
   现在改成三团**同一蓝族、明度递减**（主蓝 → 亮蓝 → 青调），
   铺满左上/右中/左下三个方位，让页面无论滚到哪都在冷蓝里。 */
.bg-fx .glow{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;opacity:.5}
.bg-fx .g1{width:74vw;height:50vw;left:-18vw;top:-16vw;background:radial-gradient(circle,rgba(30,120,220,.52),transparent 66%)}
.bg-fx .g2{width:60vw;height:44vw;right:-16vw;top:22vh;background:radial-gradient(circle,rgba(61,155,225,.40),transparent 68%)}
.bg-fx .g3{width:64vw;height:42vw;left:-20vw;bottom:-18vw;background:radial-gradient(circle,rgba(13,122,134,.30),transparent 70%)}
.bg-fx .scan{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.32;
  background:repeating-linear-gradient(to bottom, rgba(5,217,232,.045) 0 1px, transparent 2px, transparent 4px)}
.bg-fx .vig{position:absolute;inset:0;
  /* ★ 暗角从 .62 松到 .52：原值把页面四周压得太黑，主题蓝的光晕被吃掉了 */
  background:radial-gradient(125% 120% at 50% 46%, transparent 52%, rgba(0,0,0,.52) 100%)}

/* ---------- 玻璃面板（导航、卡片、表单、页脚通用） ----------
   ★ 观感优先：低不透明度 + 大模糊 + 顶沿高光 + 内侧冷光。
     品牌石墨黑只以 ~.4 的透明度参与，目的是让面板"透而不空"，不是铺实色。 */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);border-radius:16px;
  box-shadow:0 12px 44px rgba(0,0,0,.42), var(--glass-line), var(--glass-inner)}
/* 左侧状态色条（替代四角角标） */
.glass .rail{position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(5,217,232,0))}

/* ---------- 导航：居中玻璃面板（首页与内页完全一致） ---------- */
.nav-shell{position:fixed;z-index:50;left:50%;top:var(--nav-top);transform:translateX(-50%);
  /* ★ 用 100% 而不是 100vw：100vw 含滚动条宽度，内页有滚动条时导航会比正文宽十几像素 */
  width:min(var(--container-w), calc(100% - var(--gutter) * 2));height:var(--nav-h);border-radius:16px;
  display:flex;align-items:center;gap:22px;padding:0 20px;overflow:hidden;
  /* 比通用面板略厚一点点：导航要压住地球高光保证文字可读，
     但可读性主要靠下面的文字投影，不靠把底铺黑 */
  background:linear-gradient(180deg, rgba(26,29,33,.34) 0%, rgba(13,15,18,.20) 100%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(5,217,232,.24);
  box-shadow:0 12px 44px rgba(0,0,0,.42), var(--glass-line), var(--glass-inner)}
/* 透之后必须给导航文字加投影，否则压在地球亮部上会读不清 */
.nav-shell .nav-logo .txt b,.nav-shell .nav-links a,.nav-shell .nav-logo .txt span{text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* ★ D60：副标也加投影 —— 它有 306px 长，必然有一段压在球体高光/玻璃亮部上，
   没投影时那段字会"沉"进背景（1600 截图放大发现 "SMOOTH CROSS-" 发虚）。 */
.nav-shell::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(5,217,232,.95),transparent)}
.nav-shell::after{content:"";position:absolute;top:0;left:-42%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(5,217,232,.12),transparent);
  animation:navscan 7.5s ease-in-out infinite}
@keyframes navscan{0%{left:-42%}58%,100%{left:124%}}
@media (prefers-reduced-motion:reduce){.nav-shell::after{animation:none;opacity:0}}
/* ★ D60：品牌位整体放大 —— 之前 mark 容器 28px / 图 20px 是「对齐文字」的思路，
   结果 72px 的面板里品牌只占中间一小条，logo 像贴在文字旁边的图标。
   现在 mark 容器 40px、图 30×34（源图 159×179，放大到 30px 仍是 ~5x 密度，不糊）、
   gap 12px —— 读作"品牌区"，不再是"图标+标题"。 */
.nav-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* ★ logo 图形色走 token（模板里不写 stroke 字面量）→ 品牌色定稿只改 tokens.css。
   ★★ 2026-10-09：这里用的是 **--logo-a / --logo-b（logo 专属蓝）**，
      不是 --brand，也不是 --tint —— 三者语义不同，别混：
        · --brand（黄）= 行动色，按钮/CTA
        · --tint（蓝）  = 主题基调，面
        · --logo-*（蓝）= **logo 图形本身**，只属于这一个元素
      理由：用户确认 logo 是蓝色的（浅蓝→深蓝 S 形），但它不能反过来
      把行动色也带成蓝。所以 logo 蓝单独成一组 token：
      将来 logo 定稿要改色，只改 tokens.css 里那两行，别的地方不受影响。 */
/* ★★ D60 终版（用户「logo 没必要用圆角矩形框着，看看设计稿；再弄大点」）：
   VI 应用场景里 mark 就是**裸的立体飘带**，之前的圆角玻璃底衬是我自加的 → 整个去掉，
   图 20×22→30×34→**40×45**（源 159×179 仍 ~4x 密度）。mark 高 45px 在 --nav-h 72px 内。
.nav-logo .mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--logo-b) 32%, transparent), color-mix(in srgb, var(--tint) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--logo-b) 42%, transparent)} */
.nav-logo .mark{display:grid;place-items:center}
/* D59：正式 mark 位图；D60：20×22→30×34→40×45→44×49（裸 mark，无底衬）。
   ★★ D63：mark 高度改收 **--nav-logo-mark-h**（46px = 字标+slogan 的视觉墨迹高，
     见 tokens.css 注释），并用 --nav-logo-mark-dy 下移 3px 对齐墨迹中心 ——
     盒高相等（56）时 mark 视觉上偏大 10px，用户实测后点名要"等高"。
     宽度仍走 auto 按位图固有比例（159×178）跟随。 */
.nav-logo .mark img{display:block;height:var(--nav-logo-mark-h);width:auto;
  transform:translateY(var(--nav-logo-mark-dy))}
.nav-logo .mark svg{stroke:var(--logo-b)}
/* ★★ D62（2026-10-13）：字标 30→**40px**，品牌位整体抬到 56px 高。
   用户的依据很硬：「PC端 logo 文字还可以更大，因为高度还没对齐」——
   事后复盘，D61 的"等高"其实没等齐：mark 位图带了一整块不透明的淡蓝辉光
   （提取脚本阈值太松），图形本体只占盒子的七八成，字块按 49px 的"盒子"去对齐，
   视觉上还是矮一截。本次先修资产（extract-logo.py：阈值 140 + 反混合去白边，
   图形本体紧裁），盒子高才敢抬到 56px：
       SOLODEX 40px × 行高 1.15 = 46px
       slogan   10px × 行高 1.0 = 10px
       合计                      = 56px  ← = var(--nav-logo-h)，与紧裁后的图形等高
   ★ slogan 行高 1.0 是刻意的：slogan 全大写无降部，10px 的行盒足够；
     挤出来的行高全部让给字标 —— 这正是"文字更大"的空间来源。
   ★ .txt 显式 height + justify-content:center：副标在 ≤1289px 被隐藏后只剩一行，
     仍然占满 56px 并垂直居中，品牌区高度不会因为隐藏副标而跳变。 */
.nav-logo .txt{display:flex;flex-direction:column;justify-content:center;height:var(--nav-logo-h)}
.nav-logo .txt b{font-size:40px;font-weight:800;letter-spacing:1px;line-height:1.15;color:var(--ink-1)}
.nav-logo .txt span{font-size:10px;letter-spacing:1.5px;line-height:1;color:var(--dim);font-family:var(--mono);white-space:nowrap}
/* 副标是 VI 英文 slogan（35 字符），字距与字号都按"最宽一行"来配；
   ≤1289px 直接隐藏（见下方媒体查询），把中缝让给横排导航链接。 */
/* ---------- 导航链接：五态分工（改这里前先读下表，别再混着加效果） ----------
   ┌──────────┬────────────────┬────────────┬────────────────────────────────┐
   │ 状态     │ 语义           │ 用色       │ 表现                           │
   ├──────────┼────────────────┼────────────┼────────────────────────────────┤
   │ 默认     │ 可去的其他页面 │ 次级灰蓝   │ 无线、无底，只写字             │
   │ hover    │ 鼠标指到，可点 │ 青（数据色）│ 文字转白 + 极淡底 + 1px 青细线 │
   │ 当前页   │ 你就在这里     │ 青（同色） │ 白字加粗 + 青淡底 + 2px 青粗线 │
   │ hover当前│ 已在当前，不改 │ 青         │ 只把青底加深，不切回细线       │
   │ 焦点     │ 键盘 Tab 抵达  │ 黄         │ 2px 黄描边 + 2px 外偏移        │
   └──────────┴────────────────┴────────────┴────────────────────────────────┘
   规则：hover 与当前页**同用青**，层级靠「线粗 + 底色深浅 + 字重」拉开，不靠换色。
        ★ 品牌黄不进导航 —— 它只属于右上 CTA 和表单提交这类唯一的行动点，
          一旦进导航就会和 CTA 抢注意力（用户已明确否决过一次，勿再改回）。
        当前页状态由 HTML 的 aria-current="page" 承担，class 只是同义兜底。 */
.nav-links{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.nav-links a{position:relative;font-size:13px;font-weight:400;color:var(--nav-link);
  padding:8px 13px;border-radius:8px;white-space:nowrap;
  transition:color .18s ease, background-color .18s ease, font-weight .18s ease}
/* 下划线：默认收起。青＝hover 反馈，也＝当前页标记 —— 两态同色，
   靠「hover 1px 细线 / 当前页 2px 粗线 + 青淡底 + 字重加粗」区分层级。 */
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1px;
  background:var(--accent-data);transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease, height .18s ease, background-color .18s ease}

/* ① hover：可点击反馈 → 青 1px 细线 */
.nav-links a:hover{color:var(--nav-link-hover);background:var(--nav-link-hover-bg)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ② 当前页：定位标记 → 同为青，但线更粗 2px、带青淡底、字重加粗
      （写在 hover 之后，同特异性时后者生效） */
.nav-links a[aria-current="page"],.nav-links a.on{color:#fff;font-weight:600;background:var(--nav-link-cur-bg)}
.nav-links a[aria-current="page"]::after,.nav-links a.on::after{
  transform:scaleX(1);height:2px;bottom:2px;background:var(--accent-data)}

/* ③ hover 落在当前页：保留青粗线，只加深青底 —— 不回退成细线 */
.nav-links a[aria-current="page"]:hover,.nav-links a.on:hover{background:var(--nav-link-cur-bg-hover)}

/* ④ 键盘焦点：行动色描边（Tab 可达性，鼠标点击不触发） */
.nav-links a:focus-visible,.nav-cta:focus-visible,.nav-logo:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
/* ★ margin-left:auto 是**窄屏把右侧按钮顶到最右**的关键。
   桌面端靠 .nav-links{flex:1 1 auto} 撑满 logo 与按钮之间的空间，右侧自然贴边；
   但窄屏（≤900px）.nav-links 整个 display:none 之后就不占位了 ——
   剩下 logo 和 .nav-right 两个 flex:0 0 auto 的元素紧挨着排在左边，
   右边空出一大片，"在线询价 + 汉堡"看起来像浮在导航中间。
   margin-left:auto 在桌面端是空操作（前面已被 flex:1 的菜单占满，没有可吸收的剩余空间），
   所以这一条加在这里对宽屏没有任何影响。 */
.nav-right{flex:0 0 auto;display:flex;align-items:center;gap:14px;margin-left:auto}
/* ★★ D62：LIVE 呼吸绿点**搬进 .nav-cta 里**（文案前面）。
   原来它是独立的 `.nav-live`（绿点 + "LIVE" 字样）挂在按钮左边；
   用户 2026-10-13 指示「移动端、PC端都只留一个绿点呼吸且移到cta按钮上去（get前面）」——
   "LIVE" 文字删掉、独立元素删掉，全站只剩这一颗点，挂在金色按钮里
   （绿在金上对比充足，且"呼吸"本身比文字更省注意力）。 */
.nav-cta .live-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ---------- 语言切换器 ----------
   ★ 位置：**logo 右侧、主导航左侧**（用户 2026-10-12 指定）。
     此前它夹在 LIVE 绿点与「在线询价」之间，用户判定「很扯淡」——
     现在它与右侧的「状态 LIVE + 行动 CTA」彻底分开、紧贴品牌区，
     读作一个**全局工具**：既不混进导航项，也不混进行动区。
   ★ 左侧一道极淡的竖线把它和 logo 分开（用 ::before 而不是 border-left：
     border 会跟着 hover 的 border-color 一起变青，而 hover 只该改自身那圈描边）。
     线取青的低 alpha（数据色），与导航其它分隔线同源，不引入新色相。
   ★ 它是**次级导航**、不是行动入口，所以：
     · 用次级灰蓝（--dim）而不是品牌色 —— 绝不能跟全站唯一那处品牌黄 .nav-cta 抢
     · 字号与内边距都比 CTA 小一档，视觉上主动"退后"
   ★ 交互沿用导航既有语言：hover 用青（数据色）淡底 + 1px 青线，
     与 .nav-links a 的 hover 同源，保持"导航是一套东西"的观感。
   ★ 渲染与否由后台「显示语言切换入口」开关决定（见 inc/i18n.php）。 */
.nav-lang{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--dim);
  text-decoration:none;padding:6px 10px;border-radius:8px;white-space:nowrap;
  border:1px solid transparent;transition:color .18s,border-color .18s,background .18s}
.nav-lang::before{content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(5,217,232,.18)}
.nav-lang:hover{color:#fff;background:rgba(5,217,232,.10);border-color:rgba(5,217,232,.35)}
.nav-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ★ 语言切换器有**两种形态**，同时输出、由断点决定谁显示（模板侧不判断视口）：
     · `.nav-lang`         —— 宽屏：紧贴 logo 右侧那颗（默认显示）
     · `.nav-lang--panel`  —— 窄屏：菜单折叠成下拉面板后，作为面板里的一行
   原因：`.nav-shell` 那一行在 390px 下**放不下** logo + 语言 + LIVE 点 + CTA + 汉堡
   （实测顶出约 56px，「在线询价」被切半个字、汉堡被挤出视口）。 */
.nav-lang--panel{display:none}
@media (min-width:901px){ .menu-item-lang{display:none} }

/* 全站唯一的转化入口，必须是品牌色（当前=品牌蓝） */
.nav-cta{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.5px;
  color:var(--cta-ink);font-weight:700;padding:9px 16px;border-radius:9px;text-decoration:none;
  white-space:nowrap;background:var(--cta-bg);box-shadow:0 0 18px var(--cta-glow);transition:.18s}
.nav-cta:hover{box-shadow:0 0 26px var(--cta-glow-hover)}
/* 接了 WhatsApp 之后文案比「在线询价」长（4 字 → 10 字符），必须给上限：
   宁可省略成 "WhatsApp…"，也不能把导航挤到溢出（768px 实测过菜单被裁）。
   ★ 只在窄屏才收窄，桌面留足空间显示全称。 */
.nav-cta--wa{max-width:200px}
.nav-cta--wa .wa-ico{flex:0 0 auto;color:currentColor}
.nav-cta--wa span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★ 这里原本有两条「响应式」规则：@media(max-width:1080px){.nav-links a.p2{display:none}} 与
   @media(max-width:820px){.nav-links a.p1{display:none}}。
   它们**从未生效过** —— 主导航是后台「外观 → 菜单」里配的，菜单项上没有 p1/p2 这两个 class。
   已删除，改由上面的汉堡折叠接管（见 .nav-burger 与 max-width:1200px 段）。 */

/* ---------- 汉堡按钮（只在窄屏出现） ---------- */
.nav-burger{display:none;width:38px;height:34px;border-radius:9px;cursor:pointer;flex:0 0 auto;
  padding:0;place-content:center;gap:4px;
  border:1px solid rgba(5,217,232,.28);background:var(--ctl-bg);box-shadow:var(--ctl-src)}
.nav-burger span{display:block;width:15px;height:1.5px;border-radius:2px;background:var(--ink-2);
  transition:transform var(--dur-1) var(--e-soft), opacity var(--dur-1) var(--e-soft)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- 窄屏导航：真正的折叠，而不是把链接裁掉 ----------
   ★ 旧写法是给菜单项加 .p1/.p2 再逐级 display:none，但主导航来自后台菜单，
     那两个 class 从来就不存在 → 规则从未命中 → 窄屏只是被 overflow:hidden
     裁掉半截，最右边的「在线询价」被切掉（390px 实测）。 */
@media (max-width:980px){
  .nav-shell{gap:14px}
  /* ★ D62：LIVE 绿点已并入 .nav-cta（见上方 .live-dot），这里不再有独立元素可调。
     窄屏要腾空间的话，收窄 CTA 文案即可，不该砍掉这个 6px 的点。 */
}
/* ★★ D60：副标（VI 英文 slogan）只在 **≥1280px** 显示（D63：原 1290 → 1280）。
   为什么收窄到 1280：用户明确「1280这个分辨率下，也要有SLOGAN，你现在去掉了」
   —— 旧断点 1289 恰好把 1280（最常见的小笔电满宽）划在了隐藏区。
   1280 实测（D63）：slogan 可见时品牌区 312px + lang 46 + 中缝链接 + CTA 124
   在 1216px 壳内仍富余（见 TASKS.md D63 量测），不需要再收。
   ★ 顺序要求：这条必须在下面的折叠块之前（更窄的屏幕折叠块自己也会隐藏副标）。 */
@media (max-width:1279px){
  .nav-logo .txt span{display:none}
}
/* ★ D60：1024–1120 的"紧凑横排"档 —— 目标是把 **iPad 横屏 1024 留在桌面导航**，
   而不是一挤就丢给汉堡。差 5px 也要救，因为牌位放大的代价已经由隐藏副标付过了。
   省宽三件套（实测合计 ~76px，1024 从重叠 5px 变为富余 20px+）：
     shell gap 22→14 · 链接间距 6→2px · 链接 padding 13→9px + 字号 13→12.5px
   ★ 什么都不删除（尤其 LIVE 绿点），只压缩留白。 */
@media (max-width:1120px){
  .nav-shell{gap:14px}
  .nav-links{gap:2px}
  .nav-links a{font-size:12.5px;padding:8px 9px}
  .nav-links a::after{left:9px;right:9px}
}
/* ★ D60：≤1060 极限档。字标放大到 24px 后，1024 的间距从 35px 掉到 17px —— 太险。
   这里再收一档（链接 padding 9→7、字号 12.5→12、shell gap 14→12），省约 26px，
   把 iPad 横屏的富余拉回 40px 以上。仍然**不删任何元素**（LIVE 绿点照旧）。 */
@media (max-width:1060px){
  .nav-shell{gap:12px}
  .nav-links a{font-size:12px;padding:8px 7px}
  .nav-links a::after{left:7px;right:7px}
}
/* ★ 断点演进：720 → 900 → 1200 → **1023**（D60，2026-10-13）。
   900 的由来：实测 768px（iPad 竖屏）时菜单还没折叠，logo + 6 个菜单项 + LIVE + CTA
   + 汉堡根本排不下 —— `.nav-shell` 是 overflow:hidden，最右边的「联系我们」「在线询价」
   被**直接裁掉半截**。900 是当时的真实下限（1024 平板横屏仍完整显示）。
   ★★ 为什么提到 1200：①语言切换器从右侧移到 logo 旁（用户指定，占 ~60px）；
   ②副标换成 VI 英文 slogan（比旧 tagline 宽 ~60px）。两件事把 1000–1150 区间
   挤到 **`.nav-links` 居中溢出**——链接内容宽于中缝时会向两侧均匀外溢（flex 经典坑），
   "Home" 直接压住语言切换器（1024 实测新旧文案都重叠，只是旧文案藏得深没被发现）。
   1150 是临界点（重叠 1px），取 1200 留裕量。折叠后 900–1200 顶行只剩
   logo + LIVE + CTA + 汉堡，绰绰有余。
   ★★ 1200 → **1023**：品牌位放大后曾把断点推到 1200（怕 slogan 挤爆中缝），
   但那是"靠折叠腾空间"的偷懒解法 —— 1280 笔记本被迫用汉堡太可惜。
   改为「≥1290 才显示副标」之后，1024–1289 区间 logo 只剩 mark + SOLODEX（约 130px），
   中缝重新够用，**iPad 横屏 1024 也能保持完整桌面导航**（实测留位见 TASKS.md D60）。
   ★ 为什么全局变量读作 max-width:1023 —— iPad Air/Pro 横屏 CSS 宽正好是 1024，
   要把它算进横排就必须 ≤1023。 */
@media (max-width:1023px){
  /* 下拉面板要能溢出导航条，所以这里必须放开 overflow:hidden；
     代价是那条横扫的 ::after 扫描光会露到圆角外 → 窄屏直接不显示它。 */
  .nav-shell{overflow:visible;gap:10px;padding:0 14px}
  .nav-shell::after{display:none}
  .nav-logo .txt span{display:none}
  /* ★ D63：品牌位窄屏重新配平 —— 用户「移动端的logo可以小一些，现在是logo很大，
     文字很小」。mark 56 → **34px** 高（宽按位图比例自动跟随），字标 40 → **20px**。
     旧版 mark 44×49 配 12px 字标，一头巨大一头很小，就是失衡的来源。
     ★ 窄屏只有一行字标、无 slogan，mark 直接取整盒高（无墨迹差），
     --nav-logo-mark-h 跟随 --nav-logo-h、dy 归零 —— 品牌位规则两套并行：
     桌面=墨迹等高，窄屏=盒高等高。 */
  :root{--nav-logo-h:34px;--nav-logo-mark-h:var(--nav-logo-h);--nav-logo-mark-dy:0px}
  .nav-logo .txt b{font-size:20px;letter-spacing:.6px}
  /* 语言切换器与 logo 之间的分隔线：窄屏 gap 只剩 10px，
     线的偏移要跟着收，否则会压到 logo 上 */
  .nav-lang::before{left:-5px}
  /* ★★ 语言切换器换到面板里 —— 顶行在 390px 下放不下它（实测顶出 56px，
     「在线询价」被切、汉堡被挤出视口）。窄屏本来就是折叠菜单，
     放进面板既省地方、也更像"导航项"。宽屏那颗由 .nav-lang 承担。 */
  .nav-lang{display:none}
  .nav-lang--panel{display:block;padding:13px 14px;font-size:13px;letter-spacing:1px;
    border-radius:10px;border-color:rgba(5,217,232,.22);color:var(--ink-4)}
  .nav-lang--panel::before{display:none}
  .nav-burger{display:grid}

  .nav-links{
    display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
    padding:10px;border-radius:16px;
    background:linear-gradient(180deg, rgba(26,29,33,.86) 0%, rgba(13,15,18,.80) 100%);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid rgba(5,217,232,.30);
    box-shadow:0 18px 50px rgba(0,0,0,.6), var(--glass-line), var(--glass-inner);
  }
  .nav-shell.open .nav-links{display:flex}
  /* 面板里链接变成整行可点，触摸目标 ≥44px 高（移动端可用性的下限） */
  .nav-links a{display:block;padding:13px 14px;font-size:14.5px;border-radius:10px}
  .nav-links a::after{left:14px;right:auto;width:18px;bottom:8px;transform-origin:left center}
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after,.nav-links a.on::after{width:18px}
  .nav-links li{list-style:none}
}
/* ★★ ≤430px：顶行只剩 logo + LIVE 点 + CTA + 汉堡，仍然很挤 ——
   实测 430px 下汉堡被挤出视口约 34px。这里把能收的都收一档。
   ★ 唯一不能动的是 **LIVE 绿点**（信任信号，移动端最不该消失）：
     所以 430 以下只把 LIVE 的**文字**收掉、保留点本身。 */
@media (max-width:430px){
  .nav-shell{padding:0 12px;gap:8px}
  .nav-right{gap:10px}
  .nav-cta{padding:8px 10px;font-size:11.5px}
  /* ★ D62：品牌位移动端重新配平 —— mark 44×49 → 30×34（用户「logo 很大，文字很小」），
     字标 12 → **17px**（此前与 44px 的图形严重失衡）。--nav-logo-h 一并下调。 */
  :root{--nav-logo-h:30px}
  .nav-logo{gap:10px}
  .nav-logo .txt b{font-size:17px;letter-spacing:.4px}
}
/* ★ ≤380px（iPhone SE 375 / 12 mini）：把 logo 文字、CTA 与间距再各收一档 ——
   实测 375px 下还差约 8px。**优先保住品牌文字**（比只留一个占位图形强）。 */
@media (max-width:380px){
  .nav-right{gap:8px}
  .nav-cta{padding:8px 8px;font-size:11px}
  .nav-logo .txt b{font-size:15px;letter-spacing:.2px}
}
/* ★ ≤350px（老安卓 360 以下）：一行里实在放不下「logo 全文 + CTA + 汉堡」。
   取舍：**留 CTA（含呼吸点，信任与转化）**，把 logo 收成图形。
   ★ 正式 mark 已是可辨识的 S 飘带，只留图形是成立的（D62）。 */
@media (max-width:350px){
  .nav-shell{gap:6px}
  .nav-logo .txt{display:none}
  .nav-burger{width:34px}
}

/* ---------- 内页头部：面包屑 + 标题 ----------
   ★ 顶部 padding = 导航安全区（--nav-top + --nav-h，导航是 fixed 压在上面的）
     + 一段呼吸。呼吸原为 76px，实测偏大（面包屑离导航底 76px 显得空），
     收到 40px。
   ★ 底部那 48px 是"头部 → 正文第一块"的呼吸，**由它单独负责**：
     紧随其后的第一块会把各自的 margin-top 归零（见文件下方 .page-head + … 那组规则），
     否则两者的间距会在每页叠出不同数值（曾实测：/about/ 78、/contact/ 108、
     /cases/ 与 /service/ 116 —— 同一件事四种距离）。 */
.page-head{padding:calc(var(--nav-top) + var(--nav-h) + 40px) 0 48px}
.crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.crumb b{color:var(--cyan);font-weight:400}
.page-head h1{margin-top:20px;font-size:clamp(30px,4.4vw,54px);font-weight:800;letter-spacing:1px;line-height:1.15;
  text-shadow:0 0 26px rgba(5,217,232,.34)}
.page-head .lead{margin-top:16px;max-width:680px;font-size:16.5px;line-height:var(--lh-read);color:var(--ink-4)}

/* ---------- 区块标题：序号 + 渐隐短横线 ---------- */
.sec{margin-top:64px}
.sec-head{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;
  border-bottom:1px solid rgba(5,217,232,.16)}
.sec-head .no{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--cyan);opacity:.85}
.sec-head h2{font-size:21px;font-weight:700;letter-spacing:.4px}
.sec-head .bar{flex:1;height:1px;background:linear-gradient(90deg,rgba(5,217,232,.5),transparent)}

/* ---------- KPI 数据卡（大屏核心） ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:26px}
.kpi{position:relative;overflow:hidden;padding:22px 24px 20px}
.kpi .label{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.kpi .val{margin-top:12px;font-family:var(--mono);font-size:38px;font-weight:700;line-height:1;color:var(--ink-1);
  letter-spacing:-.5px;
  text-shadow:0 0 22px rgba(5,217,232,.30)}
.kpi .val em{font-style:normal;font-size:15px;color:var(--accent);margin-left:5px}
.kpi .sub{margin-top:9px;font-size:12.5px;color:var(--ink-6)}

/* ---------- 通用卡片网格 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.card{position:relative;overflow:hidden;padding:26px 24px 24px 28px;transition:.22s}
.card:hover{transform:translateY(-3px);border-color:rgba(5,217,232,.44)}
.card h3{margin-top:10px;font-size:17px;font-weight:700;letter-spacing:.3px;line-height:1.4}
.card p{margin-top:10px;font-size:14.5px;line-height:var(--lh-read);color:var(--ink-5)}
.card .tag{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--cyan);text-transform:uppercase}

/* ---------- 里程碑时间线 ---------- */
.tl{margin-top:28px;position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--cyan),rgba(5,217,232,.08))}
.tl .item{position:relative;padding:0 0 26px 6px}
.tl .item::before{content:"";position:absolute;left:-25px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px rgba(5,217,232,.9)}
.tl .yr{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--cyan)}
.tl .tx{margin-top:6px;font-size:14px;color:var(--ink-3)}
.tl .ds{margin-top:4px;font-size:12.5px;color:#7d9cb6}

/* ---------- 表单（玻璃槽 + 控制台标签） ----------
   ★ 输入框也是玻璃，不是石墨黑实心块：上层半透明白（玻璃面）+ 内侧暗（厚度），
     面板后面的星空/网格仍能透过来；聚焦时边框转青并起辉，像屏幕通电。
     刻意不加 backdrop-filter —— 它已经叠在模糊过的面板上，再滤一层只会发浑。 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--dim);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  padding:12px 14px;border-radius:10px;background:var(--ctl-bg);
  border:1px solid var(--ctl-brd);box-shadow:var(--ctl-src);
  transition:border-color .18s, box-shadow .18s, background-color .18s;outline:none}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(5,217,232,.34)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan);
  background:linear-gradient(180deg, rgba(5,217,232,.07) 0%, rgba(13,15,18,.20) 100%);
  box-shadow:var(--ctl-src), 0 0 0 3px rgba(5,217,232,.10), 0 0 18px rgba(5,217,232,.18)}
.field textarea{min-height:118px;resize:vertical}
.field ::placeholder{color:#4f6b83}
.field.full{grid-column:1/-1}
/* 原生下拉展开后的选项面板由系统绘制，必须显式给色，否则在浅色系统上会白底白字。
   （tokens.css 的 :root{color-scheme:dark} 已让 UA 默认画深色，这条留作双保险。）
   ★ 自动填充的亮底覆盖在 blog.css 末尾 —— 那里是最后一个写 input box-shadow 的文件。 */
.field select option{background:#11151a;color:var(--ink)}
.submit{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.6px;
  color:var(--cta-ink);padding:13px 26px;border:0;border-radius:11px;cursor:pointer;
  background:var(--cta-bg);box-shadow:0 0 24px var(--cta-glow);transition:.18s}
.submit:hover{box-shadow:0 0 34px var(--cta-glow-hover);transform:translateY(-1px)}

/* ---------- 信息坐标卡 ---------- */
.coord{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px dashed rgba(127,168,201,.16)}
.coord:last-child{border-bottom:none}
.coord .k{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--dim);width:66px;flex:0 0 auto;padding-top:3px}
.coord .v{font-size:14px;color:var(--ink-2);line-height:1.7}
.coord .v small{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:1px;margin-top:2px}

/* ---------- 页脚（玻璃，与导航呼应） ---------- */
footer{position:relative;z-index:1;margin-top:92px;padding:0 0 34px}
.foot-glass{width:min(var(--container-w), calc(100% - var(--gutter) * 2));margin:0 auto;padding:26px 28px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  border-radius:16px;background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(5,217,232,.18);box-shadow:0 12px 40px rgba(0,0,0,.44), var(--glass-line)}
.foot-glass .fl{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--dim)}
/* ★ D67：后台「公司简介」字段的落点（About 页 //01 Who we are 区）。
   用 white-space:pre-line 让后台 textarea 里的换行直接生效，不必在模板里 nl2br。 */
.sec-note{margin:0 0 18px;max-width:78ch;color:var(--ink-5);font-size:13.5px;
  line-height:1.85;white-space:pre-line}

.foot-glass .fr{display:flex;gap:20px;font-size:12.5px;color:var(--ink-5)}
/* ★ 2026-10-13 排查：页脚链接实测只有 16px 高（36×16 / 54×16 / 64×16），
   低于 WCAG 2.2 的「目标尺寸最小 24×24」。补纵向内边距把可点区拉到 ≥24px
   （高度由文字撑、宽度本来就够），触屏设备再拉到 44px。
   ★ 只加 padding、不改字号与间距 —— 页脚是横排一行，加高不会挤到版权行。 */
.foot-glass .fr a,.foot-links a{display:inline-flex;align-items:center;min-height:24px;padding:5px 2px}
.foot-glass .fr a:hover,.foot-links a:hover{color:var(--cyan)}
@media (pointer:coarse){
  .foot-glass .fr a,.foot-links a{min-height:44px}
}

/* ============================================================
   内容区（内页正文）—— 大屏密度的版式与数据组件
   设计要点：① 节奏靠不等宽网格，不用清一色的自动填充
             ② 每张卡必须有「数据」，不能只有标题加一段话
             ③ 所有纵向刻度（序号/年份/数值）走等宽字体
   ============================================================ */

/* ---------- 页头运营数据条：进页面第一眼就是"数据在跑" ---------- */
.ops-strip{display:flex;flex-wrap:wrap;margin-top:34px;overflow:hidden;border-radius:14px;
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-line)}
.ops-strip .cell{flex:1 1 150px;padding:15px 20px;border-right:1px solid rgba(127,168,201,.13)}
.ops-strip .cell:last-child{border-right:none}
.ops-strip .cell:not(:last-child){border-right:1px solid rgba(127,168,201,.13)}
.ops-strip .k{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.ops-strip .k i{width:5px;height:5px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint);animation:pulse 2.2s infinite}
.ops-strip .v{margin-top:8px;font-family:var(--mono);font-size:17px;letter-spacing:.5px;color:var(--ink-1)}
.ops-strip .v em{font-style:normal;font-size:11px;color:var(--dim);margin-left:5px;letter-spacing:1px}
@media (max-width:720px){.ops-strip .cell{flex:1 1 50%;border-bottom:1px solid rgba(127,168,201,.13)}}

/* ---------- KPI：加迷你走势线 + 同比 ---------- */
.kpi .spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;opacity:.5;pointer-events:none}
.kpi .head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi .delta{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--mint);
  padding:3px 7px;border-radius:6px;background:rgba(0,255,159,.09);border:1px solid rgba(0,255,159,.22)}
.kpi:hover{border-color:rgba(5,217,232,.42)}

/* ---------- 不等宽网格（Bento）：用 span 制造节奏，别再用清一色自动填充 ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:26px}
.bento>.card{grid-column:span 2}
.bento>.card.wide{grid-column:span 3}
.bento>.card.hero{grid-column:span 6}
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento>.card{grid-column:span 2}
  .bento>.card.wide{grid-column:span 4}
}
@media (max-width:720px){
  .bento{grid-template-columns:1fr 1fr}
  .bento>.card,.bento>.card.wide{grid-column:span 1}
}
@media (max-width:520px){
  .bento{grid-template-columns:1fr}
  .bento>.card,.bento>.card.wide{grid-column:span 1}
}

/* ---------- 卡片：编号 + 标签一行，hover 有光带扫过 ---------- */
.card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .idx{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--ink-7)}
.card:hover .idx{color:var(--cyan)}
.card .rail{transition:box-shadow .24s ease, opacity .24s ease}
.card:hover .rail{box-shadow:0 0 14px rgba(5,217,232,.55)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,rgba(160,240,255,.10) 50%,transparent 68%);
  transition:opacity .3s ease}
.card:hover::before{opacity:1}
.card .fig{margin-top:16px;display:flex;align-items:baseline;gap:8px}
.card .fig b{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink-1);letter-spacing:.5px}
.card .fig span{font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;color:var(--dim)}

/* ---------- 数据条（占比/时效可视化） ---------- */
.bars{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:82px 1fr 44px;gap:12px;align-items:center}
.bar-row .t{font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;color:var(--dim)}
.bar-row .track{height:4px;border-radius:3px;background:rgba(127,168,201,.15);overflow:hidden}
/* ★ 宽度取自 --pct（由模板写成行内自定义属性），而不是靠 JS 事后推。
   这样无 JS、脚本报错、或被爬虫抓时，条形图本身就是对的 —— 数据不依赖动效存在。
   动画只是"从 0 长出来"的呈现方式。 */
.bar-row .fill{display:block;height:100%;width:var(--pct,0);border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),rgba(5,217,232,.3));box-shadow:0 0 10px rgba(5,217,232,.45)}
.bar-row .n{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--ink-1);text-align:right}
/* "暖色条"= 行动色语义（转化率、时效达成率这类"要你注意"的指标）。
   ★ 2026-10-09：收尾色从蓝改回品牌黄的淡版 —— 之前 --accent 已是黄、
     收尾还是蓝，等于一根黄条拖着一条蓝尾，色相打架。现在整条统一黄系。 */
.bar-row.warm .fill{background:linear-gradient(90deg,var(--accent),rgba(223,166,44,.30));
  box-shadow:0 0 10px rgba(223,166,44,.45)}
@keyframes barGrow{from{width:0}to{width:var(--pct,0)}}
@media (prefers-reduced-motion:no-preference){
  .bar-row .fill{animation:barGrow .95s var(--e-out) both}
  @supports (animation-timeline: view()){
    /* 同样是滚动驱动：条形图进入视口时才长出来，且同样没有"永久隐藏"的失败模式 */
    .bar-row .fill{animation-timeline:view();animation-range:entry 10% entry 70%}
  }
}

/* ---------- 里程碑：年份做成独立的刻度列 ---------- */
.tl{margin-top:30px;position:relative;padding-left:0}
.tl::before{display:none}
.tl .item{position:relative;display:grid;grid-template-columns:76px 1fr;gap:22px;padding:0 0 26px}
.tl .item::before{content:"";position:absolute;left:76px;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px rgba(5,217,232,.9)}
.tl .item::after{content:"";position:absolute;left:80.5px;top:24px;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(5,217,232,.55),rgba(5,217,232,.10))}
.tl .item:last-child::after{display:none}
.tl .yr{font-family:var(--mono);font-size:14px;letter-spacing:2px;color:var(--cyan);padding-top:4px;text-align:right}
.tl .body{position:relative;padding-left:26px;transition:.22s}
.tl .item:hover .tx{color:#fff}
.tl .tx{font-size:15.5px;font-weight:600;color:var(--ink-2);letter-spacing:.3px;transition:color .22s}
.tl .ds{margin-top:6px;font-size:14px;line-height:var(--lh-read);color:var(--ink-5);max-width:62ch}
.tl .tagx{margin-top:9px;display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:#7fd8ea;padding:3px 9px;border-radius:6px;border:1px solid rgba(5,217,232,.26);background:rgba(5,217,232,.06)}
@media (max-width:640px){
  .tl .item{grid-template-columns:1fr;gap:6px;padding-left:22px}
  .tl .yr{text-align:left;padding-top:0}
  .tl .item::before{left:0;top:6px}
  .tl .item::after{left:4.5px;top:18px}
  .tl .body{padding-left:0}
}

/* ---------- 步骤条（流程说明） ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.step{position:relative;padding:18px 20px 16px;border-radius:13px;overflow:hidden;
  border:1px solid rgba(5,217,232,.20);background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.step .no{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--cyan)}
.step h3{margin-top:8px;font-size:15px;font-weight:700;letter-spacing:.3px}
.step p{margin-top:7px;font-size:13.5px;line-height:1.68;color:var(--ink-5)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- 资料标签 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:#bfe6ff;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(5,217,232,.26);background:rgba(5,217,232,.06)}

/* ---------- 通用小件：等宽标签 / 右栏 / 坐标列表 / 图注 / 表单尾 ---------- */
.mono-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--dim)}
.side{display:flex;flex-direction:column;gap:20px}
.coord-list{margin-top:16px}
.fig-caption{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;color:var(--dim)}
.form-foot{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#formTip{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--dim)}
#formTip b{font-weight:400;color:var(--cyan)}
/* 排版小工具：避免把同样的数值反复写成行内 style（上 WordPress 后会失控） */
.ok-state{color:var(--mint)}
.sec-gap{margin-top:56px}
.sec-head.tight{padding-bottom:14px}
.sec-head h2.sm{font-size:18px}
.sec-head h2.xs{font-size:16px}
.bars.tight{margin-top:16px}
.card .fig b:not(:first-of-type){margin-left:14px}

/* ---------- 面板 / 表单容器（替掉原先写在 HTML 里的行内 padding） ---------- */
.panel-pad{padding:30px 32px 32px}
.panel-pad-sm{padding:24px 26px 22px}
.panel-inline-head{margin-top:0;padding-bottom:16px}
.h-form{margin-top:26px}
@media (max-width:640px){.panel-pad{padding:24px 20px 26px}}

/* ---------- 合作伙伴墙 ----------
   ★ logo 默认**灰阶 + 降透明度**，指针落上来才恢复原色。
     一排彩色 logo 会把这套「青 = 数据 / 黄 = 行动」的用色秩序冲散；
     灰阶化之后它们退成一层安静的纹理，被指向时才被点亮 —— 识别度和秩序都保住。
   ★ 走 filter 而不是让客户另导一份灰度图：换 logo 时不用重新出素材。
   ★ 没有 logo 时用公司名前两字做文字标识（见 inc/render.php 的说明），
     所以 .p-mark 有 min-height，保证有图/没图两种卡片的对齐基线一致。 */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-top:26px}
.partner{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;
  border-radius:14px;text-decoration:none;transition:border-color .22s,transform .22s,background .22s}
/* ★★ 关于 logo 的两条硬约定（2026-10-08 用户指出"原图颜色都变了"后改）★
   1. **不改图片文件**：底衬由 CSS 给（--logo-plate），后台传官方原件即可。
      早先版本是用 Pillow 给图片垫底再入库 —— 那样每换一家 logo 都要重做一次图，
      而且"文件被改过"本身就容易让人误会品牌色被动了手脚。
   2. **不做 grayscale**：早先版本写了 `filter:grayscale(1) brightness(1.9) contrast(.9)`
      想让一排 logo 颜色统一，结果是把第三方品牌色抹掉了（ISWFA 的橙色对勾变灰）。
      第三方品牌色 > 本站的用色秩序 —— 用色秩序靠"角标自带浅底、与卡片分离"来维持。
   默认态只压一点点不透明度做层级，hover 回到 1，**颜色全程不变**。 */
.partner .p-mark{display:flex;align-items:center;min-height:46px}
.partner .p-mark img{height:46px;width:auto;max-width:100%;object-fit:contain;
  padding:7px 10px;border-radius:9px;background:var(--logo-plate);
  opacity:.9;transition:opacity var(--dur-2)}
.partner:hover .p-mark img{opacity:1}
.partner .p-word{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:2.5px;
  color:var(--ink-4);transition:color .22s}
.partner:hover .p-word{color:var(--ink-1)}
.partner .p-body{display:flex;flex-direction:column;gap:5px}
.partner .p-name{font-size:14.5px;font-weight:700;color:var(--ink-1);line-height:1.4}
.partner .p-region{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;
  color:var(--cyan);text-transform:uppercase}
.partner .p-intro{font-size:13px;line-height:1.7;color:var(--ink-6)}
@media (hover:hover) and (pointer:fine){
  .partner:hover{border-color:rgba(5,217,232,.42);transform:translateY(-3px)}
}

/* ---------- 两栏布局 ---------- */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
@media (max-width:980px){ .split{grid-template-columns:1fr} }

/* ---------- 页面头部之后的第一块：间距归一 ----------
   ★ 为什么需要这组规则：.page-head 自带 48px 底部留白，而紧随其后的第一块
     又各自带 margin-top（.sec 64 / .split.sec-gap 56 / .blog-layout 26 / .kpis 26）。
     两者是**叠加**而不是取代，于是同一个"头部 → 正文"的间距在四类页面上
     分别是 78 / 108 / 116 / 116px —— 同一件事四种距离，而且都不小。
     这里把第一块的 margin 归零，让"头部 → 正文"恒定等于
     .page-head 的 padding-bottom（48px），只此一处定义。
   ★ 只归零**已知会紧跟 page-head 的那几种**。将来若出现新元素漏加，
     它只会沿用自己原来的 margin（不会贴死）—— 失败方向是安全的。
   ★ 规则放在文件这一位置是有意的：`.split.sec-gap` 与 `.page-head + .split`
     特异性相同，靠源码顺序决胜，必须让这组写在后面。 */
.page-head + .sec,
.page-head + .kpis,
.page-head + .split,
.page-head + .blog-layout,
.page-head + .cards,
.page-head + .bento,
.page-head + .empty-state{margin-top:0}

@media (max-width:860px){
  .form-grid{grid-template-columns:1fr}
  /* 容器宽度统一由 --gutter 控制，这里不再重复写宽度，避免再度和 gutter 失步 */
}

/* ---------- 首页 HUD 行动区 ----------
   品牌黄只在这一处出现（首页唯一转化入口），次按钮保持玻璃，不与黄抢注意力。
   ★ .hud/.left-col 是 pointer-events:none，按钮必须显式打开点击。 */
.hero-sub{margin-top:14px;max-width:460px;font-size:14.5px;line-height:var(--lh-read);color:var(--ink-4)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;pointer-events:auto}
/* ★ 类名 .btn-fuel 是载运黄时代的遗留；色值已全部走 token，改名会影响模板引用，
   故保留类名、只让颜色跟随品牌蓝（--cta-* 系列）。 */
.btn-fuel{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;letter-spacing:.6px;
  color:var(--cta-ink);padding:13px 26px;border-radius:11px;cursor:pointer;
  background:var(--cta-bg);box-shadow:0 0 24px var(--cta-glow);transition:.18s}
.btn-fuel:hover{box-shadow:0 0 34px var(--cta-glow-hover);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;letter-spacing:.4px;
  color:var(--ink-2);padding:12px 22px;border-radius:11px;cursor:pointer;
  border:1px solid var(--glass-line);background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:.18s}
.btn-ghost:hover{color:#fff;border-color:rgba(5,217,232,.5);background:rgba(5,217,232,.10)}

/* WhatsApp 入口：与 .btn-ghost 同族（同尺寸、同玻璃、同焦点环），
   唯一区别是左侧一枚品牌图标。
   ★ 图标静止时用次级文字色，而不是满格品牌绿 —— 本站一屏只有两个"被授权"
     的强调色（青=数据 / 黄=行动）。一个常驻的联系按钮不该去和它们抢，
     所以绿只在指针落上来（意图已明确）的那一刻点亮。 */
.btn-wa{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;letter-spacing:.4px;
  color:var(--ink-2);padding:12px 22px;border-radius:11px;cursor:pointer;text-decoration:none;
  border:1px solid var(--glass-line);background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:.18s}
.btn-wa .wa-ico{flex:0 0 auto;color:var(--ink-4);transition:color .18s}
.btn-wa:hover{color:#fff;border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.09)}
.btn-wa:hover .wa-ico{color:#25d366}
.btn-wa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 后台没设菜单时 wp_nav_menu 的 ul 兜底（默认输出 ul/li，不是 div） */
.nav-links{list-style:none}
.foot-links{list-style:none;display:flex;gap:18px}

/* ============================================================
   指针跟随高光（spotlight）
   ------------------------------------------------------------
   鼠标在卡片上移动时，在指针落点亮起一团极淡的冷光，让面板看起来是被
   一束光扫过，而不是一块贴纸 —— 这是把"卡片网格"变成"可触摸界面"
   性价比最高的一处动效。
   ★ 只认 --mx / --my 两个变量，由 tech.js 的 initSpotlight() 写入；
     变量缺省时高光停在中心，所以无 JS 时这条规则完全无害（只是不跟随）。
   ★ 只在真正有指针的设备上开启：触屏没有"跟随"这回事。
   ============================================================ */
.card,.post-card,.kpi,.step,.pnav{position:relative}
@media (hover:hover) and (pointer:fine){
  .card::after,.post-card::after,.kpi::after,.step::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity var(--dur-2) var(--e-soft);
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      rgba(120,225,255,.13), rgba(120,225,255,.045) 42%, transparent 72%);
  }
  .card:hover::after,.post-card:hover::after,.kpi:hover::after,.step:hover::after{opacity:1}
}

/* ============================================================
   滚动驱动的入场（scroll-driven reveal）
   ------------------------------------------------------------
   ★ 为什么用 CSS 的 animation-timeline 而不是 IntersectionObserver：
     JS 版必须先给元素加 opacity:0、再等观察器回调 —— 中间任何一步失败
     （脚本报错、被扩展拦、低端机掉帧）都会让内容**永久不可见**。
     纯 CSS 版没有这个失败模式：浏览器不支持这条时间轴时，整段规则被
     @supports 挡掉，元素照常显示。风险为零，收益相同。
   ★ 为什么只动 opacity 和 translate 这两个**独立属性**、不动 transform：
     卡片 hover 的位移用的是 transform:translateY(-3px)。而 CSS 动画的
     声明优先级高于普通声明，一旦动画也写 transform，hover 的抬升就会被
     动画的 fill 状态永久压住 —— 卡片从此"抬不起来"（这是很容易踩的坑）。
     translate 与 transform 是两套独立属性，会叠加，互不干扰。
   ============================================================ */
@keyframes sxReveal{
  from{opacity:0;translate:0 16px}
  to  {opacity:1;translate:0 0}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bento > .card,
    .cards > .card,
    .kpis > .kpi,
    .tl > .item,
    .steps > .step,
    .split > *,
    .post-list > .post-card,
    .ops-strip{
      animation:sxReveal var(--dur-3) var(--e-out) both;
      animation-timeline:view();
      /* 元素刚进入视口下沿时开始，露出约六成时结束 —— 走完时它已经"站稳"，
         不会出现"内容还在半透明时就已经要滚过去了"。 */
      animation-range:entry 6% entry 62%;
    }
  }
}