/* ════════════════════════════════════════════════════════════════
徕本 helloleiboo · 企业官网样式
════════════════════════════════════════════════════════════════
色彩与用法依据 brand-vi/品牌规范与页面风格.html 与 tokens.css：
· 品牌红 #E60012 是**强调色**，不是主色。白/黑为主体，红约占 5%。
· 字体走系统字体栈，**不引任何外链字体**（与站点 0 外网请求原则一致）。
· 圆角统一 12px，半径不拆档；**唯一直角例外是 3px 红色左竖条**。
· 数字一律 tabular-nums，保证多行数字纵向对齐。
════════════════════════════════════════════════════════════════ */
:root {
--brand-red: #E60012;
--brand-red-d: #C40010;
--brand-gray: #F1F3F2;
--brand-black: #000000;
--p2368: #6161D3;
--p636: #A1D9F3;
--p7404: #F1DB65;
--p2040: #D64565;
/* ── 宠物线色板 ────────────────────────────────────────────────
来源 brand-pet/tokens.css，色值取自《徕本宠物定位》PDF **渲染后的实测像素**
（第 11 页色卡上的印刷标签是复制模板没改的占位文案，`#41D7FF` / `#304CB9`
在整本 23 页里一个像素都不存在，不能抄）。
⚠️ 这里是**第二处**定义。改任一处必须同步另一处 ——
build_site.py 会读 ../brand-pet/tokens.css 逐值比对，对不上直接报错。
为什么不 brand-pet/tokens.css：
该目录在部署范围之外（deploy.sh 只同步 corporate-site/），
而且本站原则是零外链、少请求，多一个 CSS 文件等于多一次往返。 */
--pet-orange: #FF5A00; /* 第一识别色 rgb(255, 90, 0) 18/23 页出现 */
--pet-orange-d: #E64F00; /* 按压态，由主色降明度派生 */
--pet-orange-bg: #FFF1E9; /* 浅底：标签 / 提示条 */
--pet-yellow: #F9EF00;
--pet-green: #31C77C;
--pet-blue: #274BB7;
--pet-blue-lt: #257DFA;
--pet-grass: #006818; /* Grassland Green，第 4 页印 R0 G104 B24 */
--pet-ip-miaotang: #EDA6C1; /* 喵糖 · 猫系 / 粉底 */
--pet-ip-wando: #0A508F; /* 汪盾 · 狗系 / 蓝底 */
--n0: #FFFFFF; --n25: #FAFBFB; --n50: #F3F5F4; --n100: #E9EDEB;
--n200: #DCE1DF; --n300: #C4CBC8; --n400: #9BA4A1; --n500: #6F7876;
--n600: #4A5350; --n700: #2E3533; --n800: #1B2120; --n900: #000000;
--bg: var(--n0);
--alt: var(--n50);
--line: var(--n200);
--tx: var(--n800);
--tx2: var(--n500);
--tx3: var(--n400);
--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang HK",
"HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
--r: 12px;
--r-s: 8px;
--sh-1: 0 1px 2px rgba(16, 24, 20, .04);
--sh-2: 0 6px 24px rgba(16, 24, 20, .08);
/* ★ 全站**唯一**的内容宽度。
这里原来有两档（--wrap:1200px / --wrap-wide:1320px），两者在同一页里
交替出现（页头/页脚/卡片网格用宽版，两栏图文用窄版），于是同一页
「上半段」和「下半段」的左右边缘落在**两条竖线**上：
1440 视口实测 76.5 / 136.5，1920 视口 316.5 / 376.5，**都差 60px**。
.wrap 与 .wrap-wide 现在是同一个宽度的两个名字（HTML 不用改）。
⚠️ 不要再拆出第二档 —— 拆了就等于把这个 60px 的错位重新引回来。
量它：`tools/align_compare.py`（方案对照）· `tools/probe_align.py`（验收断言）。 */
--wrap: 1320px;
/* ★ 文字行宽上限。原来只写在 .hd 上（760px），现在抽成变量给两处共用：
.hd（区块标题）与 .narrow（失去配图的单栏文字块）。
为什么要给 .narrow：这些文字块原来是 .split 的一半（≈608px），
对侧图片一拿掉，它就变成整幅内容宽（1272px ≈ 一行 80+ 个汉字），
读起来眼睛要来回扫。768 视口以下是满宽，这个上限自然不生效。 */
--measure: 760px;
/* 内容区左右内边距。之所以抽成变量，是因为 .band / .phero 要复用**同一对左右值**：
那两处原来把 24px 直接写死，特异度(0,2,0)高于 620px 断点里的
`.wrap{padding:0 18px}`(0,1,0)，压不住 → 小屏上它们仍是 24px、其余区块是 18px，
手机上凭空多出 6px 错位（390 视口实测 18 / 24）。
现在全站左右内边距只有这一个来源，断点里改它一处即可。 */
--pad-x: 24px;
--hdr: 68px;
/* 邮箱/电话图标：尺寸与间距收在这里，**与说明文字的缩进共用同一对变量** ——
否则改了图标大小、缩进不跟，两者就错开（这正是「没对齐」的常见来源）。 */
--ico-mail-size: 15px;
--ico-mail-gap: 8px;
/* 图标底边相对文字基线的偏移。这个值不是拍出来的：
跑 `tools/probe_mail_align.py` 量「图标几何中心 − 文字墨迹中心」，
把偏差补进来即可（卡片 14.5px / 页脚 14px 两处共用，误差 <0.1px）。 */
--ico-mail-y: -3.5px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.75;
color: var(--tx);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* ── 图片：不让随手另存（摩擦层，**不是防护**）────────────────────
⚠️ 先把定位写清楚，免得以后被当成「防护失效」来查：
图片一旦被渲染出来，字节就已经在访客设备上了，这是 HTTP 的性质。
开发者工具、Ctrl+S 存整页、手机截图、地址栏直接敲图片 URL
—— 四条路都拿得到原图，前端代码封不住。
真正带**强制力**的只有服务器端的防盗链
（deploy/www.leiboocar.com.conf 里的 valid_referers，挡的是
「别的网站直接把我们的图引用过去」）。两层分工不同，缺一不可：
这里挡「随手右键另存」，那里挡「别的网站盗链」。
三条都是标准前缀属性，浏览器不认就整条忽略，**不会影响图片显示**：
· -webkit-user-drag:none —— 禁「把图拖到桌面」落盘
· user-select:none —— 禁长按选中（连带 iOS 长按菜单）
· -webkit-touch-callout:none —— 禁 iOS 长按「存储图像」
⚠️ 只作用于 img / svg / picture，**不作用于文字**：
正文该怎么选中、怎么复制、怎么翻译，一切照旧。
拦得越宽，伤到的越是正常访客 —— 而存心要拿的人按 F12 照样拿到。 */
img, svg, picture {
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wrap, .wrap-wide { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── 页头 ───────────────────────────────────────────────────── */
.hdr {
position: sticky; top: 0; z-index: 50;
height: var(--hdr);
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .2s, box-shadow .2s;
}
.hdr.on { border-bottom-color: var(--line); box-shadow: var(--sh-1); }
.hdr .wrap-wide { display: flex; align-items: center; gap: 32px; height: 100%; }
/* 品牌标志：