/* ============================================================================
bizu.cn 对外官网 —— 设计令牌与基础样式
零构建：纯 CSS，无预处理器、无框架、无外链字体。
配色体系 = 「城大双色调」（2026-06-14 定，与 bzcrm 主业务系统一致）
→ 2026-09-19 按两张官方设计参考图的**实测取色**校准，并补入辅色。
主色 城大橙 #FF8236（主） / #E2610A（hover、深底） / #FFA05C（暗底上的文字）
辅色 品红 #C1155F（主强调：kicker、关键标记）
紫 #520184（只出现在渐变末端，不单独大面积用）
金橙 #EA9600（只用于「数字」——靠色相区分「数值」与「可点项」）
深蓝 城大蓝 #3061C0（内容区、标题） / #5745BD（浅一档，偏紫）
页脚 深品红 #631F43 → #9E1853（横向渐变，2026-09-19 按城大官方页脚实测取色）
🔴 改色只改本节 :root，别在组件里写死 hex。
🔴 需要「同一个色的半透明版」时不要写死 rgba(255,130,54,…)：
写 rgba(var(--brand-rgb), …)。写死了的话改 --brand 时阴影/光晕不会跟着变，
而且这种不同步**不会报错**，只是悄悄地不一致（本站 2026-09-19 前有 7 处这样的坑）。
========================================================================== */
:root {
/* 本站是浅色设计：声明 color-scheme 可避免 iOS/Android 在系统深色模式下
把原生控件（下拉框、复选框、滚动条、日期选择器）渲染成深色，出现「白底黑字控件」突兀色块。 */
color-scheme: light;
/* 品牌（2026-09-19 校准到参考图实测值） */
--brand: #FF8236;
--brand-deep: #E2610A;
--brand-soft: #FFA05C;
--brand-tint: #FFF2E8;
--brand-tint-2: #FFE0CC;
/* 辅色（2026-09-19 新增）。三色各有分工，别互相替代：
品红 = 主强调；紫 = 只做渐变的暗端；金橙 = 只给数字，用来把「数值」和「可点项」分开。 */
--magenta: #C1155F;
--purple: #520184;
--gold: #EA9600;
/* 深蓝（城大） */
--navy: #3061C0;
--navy-deep: #2551A5;
--navy-2: #5745BD;
--navy-tint: #EDF2FD;
/* 深色区块（.sec--navy）三段渐变的端点：亮 → 偏紫 → 紫。
g1 2026-09-19 从 #2A57AE 提为主蓝 #3061C0（用户指城大蓝色 slide：「蓝色也可以应用一下」；
取样主蓝 = #3061C0，与 --navy 完全同源）→ 深色区块的亮端真读作「蓝」。
白字对 #3061C0 ≈ 5.8:1，仍过 AA；hover/描边仍用 --navy-deep，不受影响。 */
--navy-g1: #3061C0;
--navy-g2: #3A46A8;
--navy-g3: #4A2E8C;
/* 页脚（2026-09-19 按「城大官方页脚」参考图实测取色）。
实测方法：逐列取纵向中位数 → 迭代剔除离群点 → 线性拟合，
结论是**纯横向渐变、纵向无变化**，端点拟合值即下面两个。
🔴 --foot-a 是最暗端、--foot-b 是最亮端；页脚内所有文字色的对比度
必须以**最亮端 --foot-b** 为判定基准（那里背景最亮、对比度最低）。 */
--foot-a: #631F43;
--foot-b: #9E1853;
/* 上面几个色的「三元组」，专供 rgba(var(--x-rgb), α) 拼半透明版。
🔴 新增/改动上面的 hex 时，这里必须同步改 —— CSS 变量之间没有推导关系，
不同步不会报错，只会让阴影/光晕悄悄停在老色上。 */
--brand-rgb: 255, 130, 54;
--brand-soft-rgb: 255, 160, 92;
--magenta-rgb: 193, 21, 95;
--purple-rgb: 82, 1, 132;
--navy-rgb: 48, 97, 192;
/* 主标题渐变（2026-09-19 按「城大（东莞）」官方宣传图实测取色）。
实测是一条**横向**渐变；三点插值比两端直连更贴近原图
（中段色相明显偏品红，橙紫直连会在 25%/75% 处偏色）：
x=0.00 → #E47001 / x=0.50 → #C62853 / x=1.00 → #870374。 */
--title-g1: #E47001; /* 左端 · 橙 */
--title-g2: #C62853; /* 中段 · 品红 */
--title-g3: #870374; /* 右端 · 紫（同时是「不支持渐变」时的兜底单色） */
/* 中性（2026-09-19 由「带蓝调的 slate」改为**纯中性灰**，对齐参考图正文实测值
#313131 —— R=G=B、无色偏）。顺带一提这样对比度反而更高：
正文 11.0 → 12.6:1、次要 4.99 → 6.45:1、最淡 2.77 → 3.28:1。
这些值仍压在浅底上，深色区块用的是另一套（见 .sec--navy）。 */
--ink: #1f1f1f;
--ink-2: #313131;
--ink-3: #5f5f5f;
--ink-4: #8e8e8e;
--line: #e6eaf0;
--line-2:#d7dee8;
--bg: #f7f9fc;
--bg-2: #f1f5f9;
--card: #ffffff;
/* 语义 */
--ok: #0e9f6e;
--warn: #d97706;
/* 尺度 */
--r-sm: 8px;
--r: 12px;
--r-lg: 16px;
--r-xl: 22px;
--sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
--sh: 0 4px 14px rgba(15, 23, 42, .07);
--sh-lg: 0 14px 40px rgba(15, 23, 42, .10);
--sh-brand: 0 10px 26px rgba(var(--brand-rgb), .30);
--maxw: 1160px;
--nav-h: 64px;
/* 安全区（刘海 / 灵动岛 / 底部横条）。非全面屏设备上恒为 0，不影响任何布局。
🔴 index.html 已声明 viewport-fit=cover —— 没有它，这里的 env() 永远是 0，
全面屏横屏时右侧内容会被圆角与刘海切掉。改 viewport 前先想清楚这一点。 */
--saf-t: env(safe-area-inset-top, 0px);
--saf-r: env(safe-area-inset-right, 0px);
--saf-b: env(safe-area-inset-bottom, 0px);
--saf-l: env(safe-area-inset-left, 0px);
/* 中文黑体栈（2026-09-19 补入思源黑体 / Noto）。
⚠️ 顺序刻意让 PingFang SC 先于思源：参考图那套字确实像思源黑体，
但 macOS 上 PingFang 是与系统 UI 同源的现代黑体、观感更一致；
为「更像参考图」把思源提到最前，只在装了它的机器上有变化，
没装则毫无效果，反而可能和系统不协调。
思源放在 PingFang 之后做跨平台兜底（Linux、部分 Windows 只装思源/Noto）。 */
--ff: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB",
"Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Helvetica Neue", Arial, sans-serif;
--ff-num: "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--ff);
font-size: 15px;
line-height: 1.7;
color: var(--ink-2);
background: var(--card);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* 移动端横向溢出闸门：任何越界元素都不该把整页撑宽。
🔴 只写在 body，不要挪到 html（2026-09-18 实测 + 决策）：
实测把这条挪到 html 上，Chromium 里吸顶依然正常（自检 128 项全绿），
所以「挪上去一定会破坏 sticky」这个说法在 Chromium 上**并不成立**，别照抄；
但 overflow 写在 html 上是被反复报告过的 sticky 失效写法，
而挪上去没有任何收益 —— 维持现状即可。
自检里「顶栏吸顶有效」那条（6 档视口）用来守住它。 */
overflow-x: hidden;
/* 长链接、长英文串（如 BIZU OPEN PLATFORM）在 320px 窄屏不撑破布局 */
overflow-wrap: break-word;
}
h1, h2, h3, h4 { margin: 0; color: var(--navy); line-height: 1.3; font-weight: 700; }
p { margin: 0; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
/* 只在视觉上隐藏，仍给读屏（用于图标按钮的无障碍名） */
.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;
}
/* ---------------------------------------------------------------- 通用容器 */
.wrap {
width: 100%; max-width: var(--maxw); margin: 0 auto;
/* 左右各自加安全区：全面屏横屏时避免内容钻到刘海/圆角下面 */
padding: 0 calc(20px + var(--saf-r)) 0 calc(20px + var(--saf-l));
}
.wrap-narrow { max-width: 900px; }
.sec { padding: 76px 0; }
.sec--tint { background: var(--bg); }
.sec--tint-warm { background: linear-gradient(180deg, #fff 0%, var(--brand-tint) 100%); }
.sec--navy { background: linear-gradient(140deg, var(--navy-g1) 0%, var(--navy-g2) 55%, var(--navy-g3) 100%); }
.sec--navy h2, .sec--navy h3, .sec--navy h4 { color: #fff; }
.sec-head { margin-bottom: 40px; }
.sec-head--center { text-align: center; }
.sec-head h2 { font-size: 27px; letter-spacing: -.4px; }
/* --------------------------------------------------- 主标题渐变（参考图取色） */
/* 「城大（东莞）」官方宣传图的主标题是**整句**「橙 → 品红 → 紫」横向渐变
（不是局部高亮、也不是单色）。这里把两级主标题对齐到它：
.hero h1 —— Hero 主视觉标题
.sec-head h2 —— 各区块标题
🔴 必须用 @supports 包住：不支持 background-clip:text 的浏览器**照样会认**
-webkit-text-fill-color:transparent → 结果是**文字整块消失**（而不是变黑）。
所以 @supports 之外先给单色 --title-g3 兜底，最差也只是「紫色标题」。 */
.hero h1,
.sec-head h2 { color: var(--title-g3); }
/* 深色区块上仍用白字：深蓝底配橙紫渐变辨识度反而更低，参考图里渐变标题
也只出现在浅底上。这条特异度 (0,2,1) > .sec-head h2 (0,1,1)，
支持与不支持两种情况下都能压住（所以刻意放在 @supports 之外）。 */
.sec--navy .sec-head h2 {
background-image: none;
-webkit-text-fill-color: currentColor;
color: #fff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero h1,
.sec-head h2 {
background-image: linear-gradient(90deg,
var(--title-g1) 0%, var(--title-g2) 50%, var(--title-g3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.sec-head .sub { margin-top: 10px; color: var(--ink-3); font-size: 14.5px; line-height: 1.75; }
.sec--navy .sec-head .sub { color: rgba(255, 255, 255, .72); }
/* 小节标题上方的小标签。
2026-09-19：底色改「品红→紫」淡渐变 + 品红字 —— 参考图里最显眼的辅色用法。
🔴 下面 .sec--navy .kicker 必须留在本规则**之后**：两条特异度都是 (0,2,0)，
深色区里必须走白字版；一旦把品红版挪到后面，深底上会出现浅底品红字，糊成一片。 */
.kicker {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
color: var(--magenta);
background: linear-gradient(135deg, rgba(var(--magenta-rgb), .12), rgba(var(--purple-rgb), .10));
border: 1px solid rgba(var(--magenta-rgb), .22);
padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
}
.sec--navy .kicker { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
/* ------------------------------------------------------------------- 按钮 */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px;
font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--brand-deep); }
/* ⚠️ 本类当前无使用者（HTML 里没有 btn--navy）。保留是因为 .btn--primary 的对称位；
一旦启用，注意 hover 要用 --navy-deep 而不是写死的深色 —— --navy 2026-09-19 调亮后，
原来写死的 #142e55 会变成「亮蓝 → 近黑」的跳变。 */
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 26px rgba(var(--navy-rgb), .26); }
.btn--navy:hover { background: var(--navy-deep); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
.btn--onnavy { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn--onnavy:hover { background: rgba(255, 255, 255, .2); }
/* 白底按钮：只能用在深色/彩色底上（如 .cta-strong）。文字色由外层底决定，见 .cta-strong .btn--white */
.btn--white { background: #fff; color: var(--brand-deep); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
/* ------------------------------------------------------------------ 顶栏 */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
/* 右侧的「立即入驻」按钮在全面屏横屏时正好落在刘海/圆角位置，必须让出安全区 */
padding-left: var(--saf-l);
padding-right: var(--saf-r);
}
.nav-in {
height: var(--nav-h); display: flex; align-items: center; gap: 18px;
max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
width: 34px; height: 34px; border-radius: 10px; flex: none;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
color: #fff; display: grid; place-items: center;
font: 800 15px/1 var(--ff-num); letter-spacing: -.5px;
box-shadow: 0 4px 12px rgba(var(--brand-rgb), .3);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 15.5px; font-weight: 700; color: var(--navy); }
.brand-sub { font-size: 11px; color: var(--ink-4); letter-spacing: .06em; }
/* 标签页（两个「页面」）—— 桌面在中间，移动端可横向滚动 */
.tabs {
display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
flex: none; display: inline-flex; align-items: center; gap: 7px;
height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent;
background: transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 600;
cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.tab:hover { background: var(--bg-2); color: var(--navy); text-decoration: none; }
.tab.is-active { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-tint-2); }
.tab.is-active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
/* 🔴 `.nav-link` 已无使用者（顶栏「开放平台」链接 2026-09-18 按用户要求删除，
见 commit 之后的「删除顶栏链接」提交）。要恢复那条链接，需同时加回：
HTML 开放平台
CSS .nav-link { font-size: 14px; color: var(--ink-3); }
.nav-link:hover { color: var(--brand-deep); text-decoration: none; }
@media (max-width:768px) { .nav-link { display: none; } }
—— 保留这段说明是因为「零构建」下没有编译期提示，死 CSS 只能靠注释被发现。 */
/* -------------------------------------------------------------- Hero 区块 */
/* padding-bottom 归零：hero 的底边由 .hero-band（渐变带）收尾，见下。
⚠️ 若将来去掉渐变带，记得把底部留白加回来（否则内容会贴到区块边缘）。 */
.hero { position: relative; overflow: hidden; padding: 64px 0 0; }
.hero--lala {
background:
radial-gradient(900px 420px at 88% -10%, rgba(var(--brand-rgb), .16), transparent 70%),
radial-gradient(700px 380px at 4% 110%, rgba(var(--navy-rgb), .12), transparent 72%),
linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.hero--partner {
background:
radial-gradient(900px 420px at 10% -10%, rgba(var(--navy-rgb), .14), transparent 70%),
radial-gradient(700px 380px at 92% 108%, rgba(var(--brand-rgb), .18), transparent 72%),
linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero h1 { font-size: 40px; letter-spacing: -1px; line-height: 1.22; }
/* Hero 标题里那半句的品牌橙高亮。
⚠️ 标题改成整句渐变后，这条**只在降级分支生效**：渐变生效时
-webkit-text-fill-color（可继承）会压过 color，.hl 继承父级的 transparent、
于是跟着一起显示同一条渐变 —— 这正是参考图「整句渐变」的效果。
所以别为了「让高亮更醒目」给 .hl 单独设 text-fill-color，那会把渐变切断。 */
.hero h1 .hl { color: var(--brand); }
.hero .lead { margin-top: 18px; font-size: 16px; line-height: 1.85; color: var(--ink-3); max-width: 34em; }
.hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-4); }
/* ------------------------------------------------- hero 底部「橙→紫」渐变带 */
/* 学「香港城市大学（东莞）」官网 hero 的 .swiper-footer（2026-09-19 二次实测其计算样式）：
① 渐变 = linear-gradient(271deg, rgb(124,3,120), rgb(191,22,94), rgb(228,112,0))
271deg ≈ to left ⇒ **首个色标落在右端** = 右紫 → 中品红 → 左橙。
（照抄成 90deg 会左右反转，橙紫对调。）
② 🔴🔴 精髓是「锥形缎带」：**两条边反向倾斜、厚度从左端发丝线渐变到右端全厚**。
城大原值：clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 calc(100% - 80px))，
1440 档盒高 156px → 左端厚度 ≈4px（两边几乎相交）、右端 156px。
第一版只把上边斜切 20px、下边压平，厚度恒定 —— 用户批「没学到精髓」的就是这个。
③ 🔴 文案**不能靠左**：白字对比度沿带子是变的 ——
紫端 9.80:1、品红(45%) 6.01:1，但**橙端只有 3.17:1**（不到 AA 的 4.5:1）。
所以整体居中（落在品红区），左端留空当纯色块。
城大也是把文字与圆点全放在中右部，同一个道理。
④ 🔴 上下 padding 都必须 ≥ 斜切量 ×(1 − 文案左缘的横向位置%)，否则文案角被切掉；
且**盒高必须 > 2×斜切量**（H = 上padding+文案+下padding），否则两条边在左端
交叉成蝴蝶结（自相交多边形），左端会出现 X 形豁口 —— 第一版 80px 斜切配
148px 盒高就踩了（leftTh = −12）。
文案左缘约在全宽 33% 处 → padding ≥ 0.67×72 ≈ 48，这里给 68/62 留余量。
斜切量改大时先回工具量（tools/check.js 已有「文案四角在多边形内」断言兜底）。 */
.hero-band {
margin-top: 54px;
background: linear-gradient(271deg, #7C0378 0%, #BF165E 45%, #E47000 100%);
color: #fff;
padding: 68px 0 62px;
clip-path: polygon(0 72px, 100% 0, 100% 100%, 0 calc(100% - 72px));
}
/* 顶部细带：学城大 .swiper-adorn（header 正下方一条 32px 高、右端只有一半厚的锥形细线，
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%)）。
absolute 贴 hero 顶：hero 自身 padding-top 不用动，内容排版零影响。 */
.hero-adorn {
position: absolute; top: 0; left: 0; right: 0; height: 30px;
background: linear-gradient(271deg, #7C0378 0%, #BF165E 45%, #E47000 100%);
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}
.hero-band-in {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; text-align: center;
/* 间距一律用 flex gap，不要给 tag 挂 margin：
换行时 gap 两个方向都生效，不换行时也不会把 tag 顶下去。
（曾写 `margin: 6px 0 0`，小屏单行时 tag 会比 slogan 低约 3px。） */
column-gap: 26px; row-gap: 6px;
}
.hero-band-slogan { font-size: 15.5px; font-weight: 700; letter-spacing: .06em; }
/* 竖线分隔；tag 提到 .9 —— 品红区上 .82 只有约 4.4:1，.9 才稳过 AA */
.hero-band-tag {
padding-left: 26px;
border-left: 1px solid rgba(255, 255, 255, .38);
font-size: 12.5px; color: rgba(255, 255, 255, .9); letter-spacing: .12em;
}
/* Hero 右侧：关键数字 / 卡片 */
.hero-panel {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
box-shadow: var(--sh-lg); padding: 24px; position: relative;
/* 🔴 必须 overflow:hidden：::before 渐变条贴在卡内，不裁剪的话会溢出圆角轮廓。 */
overflow: hidden;
}
/* 顶部渐变胶囊条（橙→品红→蓝）。
🔴 不能做成「贴边通宽的直角条」（第一版 inset:0 0 auto 0 + height:4px）：
4px 高的条被 22px 圆角沿轮廓裁剪，两端各被吃掉约 9px，
渲染成中间鼓、两头捏的「豆荚」形 —— 用户 2026-09-20 截图圈出的就是它，看着像浮着的嘴唇。
通宽贴边的顶部强调条在圆角卡片上**必然**被裁成这个形状（高度堆到 22px 才能避开，不现实），
所以改成左右内缩的完整胶囊：两端自带全圆角、无任何裁切形变，品红描边也随之撤掉
（当初那条 1px 品红顶边是为与贴边条叠层次加的，胶囊条单独承担强调即可，双强调会显乱）。 */
.hero-panel::before {
content: ""; position: absolute; top: 12px; left: 26px; right: 26px; height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand), var(--brand-soft) 55%, var(--navy-2));
}
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kpi {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
padding: 14px 15px;
}
/* 🔴 数字用金橙、不用主橙：主橙在这页已经是「按钮/可点项」的颜色，
数字同色会让人下意识以为它也能点。色相分开 = 视觉上分好类。 */
.kpi .n { font: 800 25px/1.15 var(--ff-num); color: var(--gold); letter-spacing: -.6px; }
.kpi .n small { font-size: 13px; font-weight: 700; margin-left: 2px; }
.kpi .l { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.hero-panel .divider { height: 1px; background: var(--line); margin: 20px 0 16px; }
.hero-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hero-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.hero-list .tick { flex: none; width: 17px; height: 17px; margin-top: 3px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; }
.hero-list .tick svg { width: 11px; height: 11px; }
/* 两列版（用于「晋升规则说明」这类 6 条要点）。≤768px 自动回单列，别用内联 grid 覆盖媒体查询 */
.hero-list--2col { grid-template-columns: 1fr 1fr; gap: 12px 26px; }
/* ------------------------------------------------------------------ 网格 */
.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ------------------------------------------------------------------ 卡片 */
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 24px; box-shadow: var(--sh-sm); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card--hover:hover { box-shadow: var(--sh); transform: translateY(-2px); border-color: var(--brand-tint-2); }
.card h3 { font-size: 16.5px; }
.card h4 { font-size: 15.5px; }
.card p { margin-top: 9px; font-size: 13.5px; line-height: 1.75; color: var(--ink-3); }
.card .tagline { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-deep); }
/* 强 CTA 卡：橙 → 品红 → 紫 的三段渐变（参考图里那条同款色带）。
🔴 为什么必须是类、不能留内联 style：内联 background 的优先于任何不带 !important 的规则，
留着它就成了「改不动的死样式」。原来 index.html 上就是内联写的，本次一并收敛过来。 */
.cta-strong {
background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 34%, var(--magenta) 72%, var(--purple) 100%);
border: 0; color: #fff;
}
.cta-strong h2, .cta-strong h3, .cta-strong h4 { color: #fff; }
.cta-strong p { color: rgba(255, 255, 255, .9); }
.cta-strong .btn--white { background: #fff; color: var(--magenta); }
.cta-strong .btn--white:hover { background: #fff; color: var(--brand-deep); }
.ic-box {
width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
background: var(--brand-tint); color: var(--brand-deep); margin-bottom: 15px;
}
.ic-box svg { width: 21px; height: 21px; }
.ic-box--navy { background: var(--navy-tint); color: var(--navy); }
.ic-box--soft { background: #FFF6E5; color: var(--brand-deep); }
/* ============================ 暖色叙事区块（学城大 swiper 大图，2026-09-20）
参考城大「#52 QS 排名」那张 slide 学三件事：
① 整片暖色打底（不是白底上贴色块）；② 大号紫色数字当视觉主角；
③ 色块上叠半透明斜切几何形做层次。
🔴 对比度约束（为什么渐变**顶上是紫不是橙**）：白字在橙端只有 3.2:1，
14.5px 的 sub 过不了 AA → 标题/副标题必须落在紫端（#7C0378 上白字 ≈9.8:1，
与 .hero-band 紫端同值），橙端留在底部当纯装饰 —— 那里只有白卡片，
没有直接落在底上的文字。设计规则详见 DESIGN.md §2「暖色区块渐变」。 */
.sec--lala-warm {
position: relative; overflow: hidden;
background: linear-gradient(172deg, #7C0378 0%, #BF165E 52%, #E47000 100%);
color: #fff;
}
/* 城大 slide 里的半透明几何叠层：底部一条右高左低的白透明楔形，纯装饰不承载内容。
z-index 让位给 .wrap：楔形只允许盖在渐变底上，不许盖到卡片文字。 */
.sec--lala-warm::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(64px, 11vw, 120px);
background: rgba(255, 255, 255, .08);
clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%);
pointer-events: none;
}
.sec--lala-warm .wrap { position: relative; z-index: 1; }
/* 白字 kicker：与 .sec--navy .kicker 同款半透明白（特异度相同，靠写在它后面胜出） */
.sec--lala-warm .kicker { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
/* 白字标题压过整句渐变标题：写法照抄 .sec--navy 特例（特异度 (0,2,1)、留在 @supports 之外，
支持/不支持 clip:text 两种情况下都压得住 (0,1,1) 的渐变规则）。 */
.sec--lala-warm .sec-head h2 { background-image: none; -webkit-text-fill-color: currentColor; color: #fff; }
.sec--lala-warm .sec-head .sub { color: rgba(255, 255, 255, .88); }
/* 卡片顶行：紫色大数字（视觉主角，城大 #52 的本站译法）+ 右上小图标（保语义） */
.prob-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.prob-top .ic-box { margin-bottom: 0; }
/* 数字渐变 = 紫蓝→深紫→品红（与面板顶条的「橙→品红→蓝」同族辅色词汇）。
兜底色品红：白卡上 5.9:1 达标；渐变规则必须 @supports 包住（同标题渐变的教训：
不支持 clip:text 的浏览器会吃下 text-fill-color:transparent → 文字整块消失）。 */
.prob-n {
font: 800 40px/1 var(--ff-num); letter-spacing: -1px;
color: var(--magenta);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.prob-n {
background-image: linear-gradient(120deg, var(--navy-2) 0%, #7C0378 55%, var(--magenta) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
}
/* ------------------------------------------------------------------ 步骤 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps--h { grid-template-columns: repeat(8, minmax(150px, 1fr)); }
.steps-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
.step { position: relative; padding: 0 14px 0 0; }
.step::after {
content: ""; position: absolute; top: 15px; left: 38px; right: 4px; height: 2px;
background: var(--line-2); border-radius: 2px;
}
.step:last-child::after { display: none; }
.step-dot {
position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center; font: 700 13px/1 var(--ff-num);
background: #fff; color: var(--navy); border: 2px solid var(--line-2);
}
.step.is-gate .step-dot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.step-t { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--navy); }
.step-d { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.step-gate {
display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
font-size: 11px; font-weight: 700; color: var(--brand-deep);
background: var(--brand-tint); border-radius: 999px; padding: 2px 8px;
}
/* 纵向步骤（移动端与「入驻四步」用） */
.steps--v { gap: 18px; }
.steps--v .step { padding: 0 0 0 52px; }
.steps--v .step::after { top: 34px; left: 15px; right: auto; bottom: -18px; width: 2px; height: auto; }
.steps--v .step:last-child::after { display: none; }
.steps--v .step-dot { position: absolute; left: 0; top: 0; }
.steps--v .step-t { margin-top: 0; }
/* ------------------------------------------------------------------ 表格 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
/* 横滑提示：由 site.js 在**实测发生溢出**时才插入（不是按屏宽猜），
否则窄屏上表格没溢出却提示「可滑动」，反而误导用户去滑。 */
.scroll-hint {
display: flex; align-items: center; gap: 5px;
margin: 0 0 7px; font-size: 12px; color: var(--ink-4);
}
.scroll-hint::after { content: "→"; color: var(--brand); font-weight: 700; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.tbl th, table.tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl thead th {
background: var(--bg); color: var(--navy); font-size: 12.5px; font-weight: 700;
white-space: nowrap; letter-spacing: .02em;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: #fcfdff; }
table.tbl .lv-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); }
.lv {
display: inline-grid; place-items: center; width: 30px; height: 24px; border-radius: 7px;
font: 800 12px/1 var(--ff-num); background: var(--navy-tint); color: var(--navy); flex: none;
}
.lv--top { background: rgba(var(--magenta-rgb), .10); color: var(--magenta); }
.tbl .muted { color: var(--ink-4); font-size: 12.5px; }
.tbl-foot { padding: 13px 16px; background: var(--bg); font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
/* 「四方角色」表的列宽。
🔴 为什么放在 CSS 而不是 HTML 内联 style 上：窄屏要能覆写，而内联样式 media query 压不住
（除非上 !important）。原来的 130 / 240 是内联的，等于把列宽焊死了。
原来两个毛病是同一个根因：第三列没有指定宽度 → 它是唯一的 auto 列，**独吞全部剩余宽度**，
于是 ① 第二列只有 208px 可用，「货拉拉（场景与流量）+ 主机厂（车型与产能）」被拆成两行、
「个体户」被拆成「个体 / 户」；② 第三列自己反而空出 350~450px 的右侧空白。
把余量分给第二列，两个毛病一起消失。 */
table.tbl--roles th:nth-child(1) { width: 100px; }
table.tbl--roles th:nth-child(2) { width: 330px; }
/* 第三列也给个宽度（而不是留 auto）：auto 列会独吞全部余量，
造成「一列很空」；三列都参与按比例摊，余量就变成三列均匀的呼吸感。
数值取该列最长一行的实际占宽（≈400px + 左右 padding），不是拍脑袋。 */
table.tbl--roles th:nth-child(3) { width: 430px; }
/* 「五级合伙人通道」表的列宽（2026-09-19）。
🔴 原来这四个宽度是写在 HTML 内联 style 上的（150 / 170 / auto / 190），窄屏压不住 →
三列把 560px 的表格占满后，「核心权益」只剩 **77px**，中文被拆成一字一行（5~8 行）。
实测（改前）：1440 档该列 608px / 1 行 → 390 档 **77px / 8 行**。
搬到这里后窄屏可覆写，见下面 @media (max-width:768px) 里的重分配。 */
table.tbl--levels th:nth-child(1) { width: 150px; }
table.tbl--levels th:nth-child(2) { width: 170px; }
table.tbl--levels th:nth-child(4) { width: 190px; }
/* 第 3 列「核心权益」故意留 auto：它是全表唯一的长文本列，余量应该归它。
（这与「四方角色」表相反 —— 那张表是 auto 列独吞余量成了毛病，这张表却是**必须**让它吃，
因为其余三列都是「短到一行放得下」的标签。判据是「谁是长文本列」，不是「auto 好不好」。） */
/* ------------------------------------------------------------------ 等级卡 */
.levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.level {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px;
box-shadow: var(--sh-sm); position: relative; overflow: hidden;
}
.level::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--line-2); }
.level:nth-child(1)::after { background: #c7d2e0; }
.level:nth-child(2)::after { background: #9db6d8; }
.level:nth-child(3)::after { background: var(--navy-2); }
.level:nth-child(4)::after { background: var(--brand-soft); }
.level:nth-child(5)::after { background: var(--brand); }
.level .lv-no { font: 800 12px/1 var(--ff-num); color: var(--ink-4); letter-spacing: .08em; }
.level h4 { margin-top: 9px; font-size: 16px; }
.level .lv-cms { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand-deep); }
.level ul { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 7px; }
.level li { font-size: 12.5px; color: var(--ink-3); padding-left: 14px; position: relative; line-height: 1.6; }
.level li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-soft); }
/* ------------------------------------------------------------------ 标签云 */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
color: #fff; font-size: 12.5px; font-weight: 500;
}
.chip--light { background: #fff; border-color: var(--line-2); color: var(--ink-2); }
/* ------------------------------------------------------------------ 表单 */
.form-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
box-shadow: var(--sh-lg); padding: 28px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field label .req { color: var(--brand); margin-left: 2px; }
/* 标签行：右挂迷你操作钮（申请表「微信号 · 同手机号码」） */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mini-btn {
border: 0; background: none; padding: 2px 0 2px 8px; cursor: pointer;
font-family: inherit; font-size: 12px; font-weight: 600; color: var(--brand-deep);
white-space: nowrap; flex: none;
}
.mini-btn:hover { text-decoration: underline; }
.mini-btn:active { opacity: .65; }
.input, .select, .textarea {
width: 100%; min-height: 44px; padding: 10px 13px; font-family: inherit; font-size: 14px;
color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm);
outline: none; transition: border-color .18s, box-shadow .18s; appearance: none;
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.65; }
.select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.field .hint { font-size: 12px; color: var(--ink-4); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: #dc2626; }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-3); line-height: 1.7; }
.checkline input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
/* 勾选行里的协议链接（对应参考站那四个书名号）：
🔴 必须看起来「明显可点」——橙色 + 加粗，不能沿用正文的弱化色，
否则用户以为只是几个书名号，勾选同意前根本不会去读。 */
.checkline a { color: var(--brand-deep); font-weight: 600; }
.checkline a:hover { color: var(--brand); text-decoration: underline; }
/* 勾选行的 label 在窄屏要能整段换行，别让链接被挤成竖排 */
.checkline label { min-width: 0; }
.form-foot { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-foot .tip { font-size: 12.5px; color: var(--ink-4); }
.form-err { margin-top: 12px; font-size: 13px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-sm); padding: 10px 13px; display: none; }
.form-err.is-on { display: block; }
/* 提交成功态 */
.done { display: none; text-align: center; padding: 26px 8px; }
.done.is-on { display: block; }
.done .ic {
width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-deep);
}
.done .ic svg { width: 30px; height: 30px; }
.done h3 { font-size: 20px; }
.done p { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; gap: 10px; }
.faq details {
background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.faq summary {
cursor: pointer; list-style: none; padding: 15px 18px; font-size: 14.5px; font-weight: 600;
color: var(--navy); display: flex; align-items: center; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; margin-left: auto; flex: none; width: 18px; height: 18px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .ans { padding: 0 18px 16px 18px; font-size: 13.5px; line-height: 1.8; color: var(--ink-3); }
.faq .ans p + p { margin-top: 9px; }
/* ------------------------------------------------------------------ 提示条 */
.note {
display: flex; gap: 11px; align-items: flex-start;
background: var(--brand-tint); border: 1px solid var(--brand-tint-2);
border-radius: var(--r); padding: 14px 16px; font-size: 13px; color: #8a4a06; line-height: 1.75;
}
.note svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brand-deep); }
.note strong { color: var(--brand-deep); }
/* ------------------------------------------------------------------ 页脚 */
/* 底色 = 城大官方页脚的深品红横向渐变（端点见 :root 的 --foot-a / --foot-b）。
⚠️ 页脚内所有文字色的对比度一律以【渐变最亮端 --foot-b #9E1853】为判定基准
（那里背景最亮、对比度最低）。下面的 .82 / .72 就是按它定的。
🔴 【已移除】顶边 3px 色带（2026-09-19，用户「这条线去掉」）。历史写法：
border-top: 3px solid transparent;
border-image: linear-gradient(90deg, var(--brand) 0%, #EF5F8D 45%, #C08BE8 100%) 1;
为什么它在白底上反而难看：左端是 --brand 橙 #FF8236 —— 这是一条压在
**深品红**页脚上的**异色**横线（不是同色系过渡，而是硬插进来的一笔）。
当时为解决「同色相糊掉」只把中右段提亮成 #EF5F8D / #C08BE8，
左端的橙没动 ⇒ 整条读起来像「页脚残留了一道边框」。
⚠️ 将来若要恢复：border-image **必须**配合 border-style 一起写（只写 border-image
不生效），且 border-image 会盖掉 border-color，所以要用 transparent 占位。 */
.foot {
background: linear-gradient(90deg, var(--foot-a) 0%, var(--foot-b) 100%);
color: rgba(255, 255, 255, .82); font-size: 13px;
/* 底部 padding 归零：页面最底一条深色带由 .foot-bot 收尾（band 要贴住底边） */
padding: 50px 0 0;
}
/* 页脚四列：品牌 / 业务专区 / 平台 / 条款与规则。
🔴 最后一列（条款与规则）文案较长（如「佣金结算与客户保护规则」11 字），
分到的宽度至少要容下它，否则会折行成两行、看起来像排版错误。 */
.foot-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 30px; }
.foot h5 { margin: 0 0 13px; font-size: 13.5px; color: #fff; font-weight: 700; }
/* 友情链接块：跟在「平台」列主链接组下方的第二组（学极贸易页脚），与上组拉开间距 */
.foot .flink { margin-top: 18px; }
.foot .fbrand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* 页脚企微二维码卡：二维码必须白底黑模块才可扫——垫白底圆角卡片，深底上依然醒目 */
.foot .fqr { margin: 0; display: flex; align-items: center; gap: 12px; }
.foot .fqr img {
display: block; width: 88px; height: 88px;
background: #fff; padding: 5px; border-radius: 10px;
}
.foot .fqr figcaption {
display: grid; gap: 3px; font-size: 12.5px;
color: rgba(255, 255, 255, .78); line-height: 1.5;
}
.foot .fqr figcaption b { color: #fff; font-size: 13px; }
.foot .fqr figcaption span { color: rgba(255, 255, 255, .62); }
.foot .fbrand .brand-name { color: #fff; }
.foot .fbrand .brand-sub { color: rgba(255, 255, 255, .72); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a { color: rgba(255, 255, 255, .82); }
/* 页脚链接做触控目标：13px 字号 × 1.7 行高 ≈ 22px，
直接点很容易误触到相邻链接；撑到 ~32px 才够手指用。 */
.foot li a { display: inline-block; padding: 5px 0; }
/* hover 用暖白而非 --brand-soft(#FFA05C)：橙在深品红底上只有 3.85:1，
比正文还低（正文提亮后有 5.62:1），会出现「悬停反而更难看清」。
暖白 #FFE0C2 在最亮端 6.16:1，既明显又是一个偏暖的白。 */
.foot a:hover { color: #FFE0C2; text-decoration: none; }
.foot a:active { color: #FFE0C2; }
/* 页脚最后一行 = 通栏深色条（城大页脚样式）：比渐变底更深一档。
用半透明黑叠加在渐变上——右端最亮处 #9E1853 叠后 ≈ #7B1341，
两端都明显变深且保留渐变走向；文字对比度只会更好不会变差。
🔴 结构上它必须放 .wrap 外面（通栏），对齐由内部再套一层 .wrap 负责。 */
.foot-bot {
margin-top: 36px;
background: rgba(0, 0, 0, .22);
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 15px 0 calc(15px + var(--saf-b));
}
.foot-bot .wrap {
display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between;
font-size: 12.5px; color: rgba(255, 255, 255, .72);
}
/* 页脚最后一行：备案号做成可点链接（新标签打开），用 · 分隔；版权靠右。
学城大页脚最后一行样式：细分隔线 + 小号灰字 + 链接可点。 */
.foot-bot .beian { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.foot-bot .beian a {
color: rgba(255, 255, 255, .72); text-decoration: none;
transition: color .15s ease;
}
.foot-bot .beian a:hover { color: #FFE0C2; text-decoration: underline; }
.foot-bot .beian a:active { color: #FFE0C2; }
.foot-bot .beian .sep { color: rgba(255, 255, 255, .38); user-select: none; }
.foot-bot .cr { color: rgba(255, 255, 255, .55); white-space: nowrap; }
/* ----------------------------------------------------------- 回顶浮钮 */
.to-top {
position: fixed; right: 18px; bottom: calc(20px + var(--saf-b));
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff; border: none; cursor: pointer;
box-shadow: 0 8px 22px rgba(var(--brand-rgb), .35);
z-index: 90;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .22s ease, transform .22s ease, visibility .22s ease, background .15s ease;
}
.to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 22px; height: 22px; }
.to-top:hover { background: var(--brand-deep, #E76A18); }
.to-top:active { transform: translateY(1px); }
.to-top:focus-visible { outline: 2px solid #FFE0C2; outline-offset: 2px; }
/* ------------------------------------------------------------------ Toast */
.toast {
position: fixed; top: calc(20px + var(--saf-t)); left: 50%; transform: translateX(-50%);
z-index: 100; background: var(--brand); color: #fff;
padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
box-shadow: 0 10px 26px rgba(var(--brand-rgb), .3); pointer-events: none; opacity: 0;
transition: opacity .2s, transform .2s;
/* 极窄屏别让提示条超出屏幕 */
max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(4px); }
/* ------------------------------------------------------------- 响应式 */
@media (max-width: 1024px) {
.hero-in { grid-template-columns: 1fr; gap: 34px; }
.hero h1 { font-size: 33px; }
.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot-in { grid-template-columns: 1fr 1fr; }
/* 渐变带中档：桌面 80px 斜切在 600px 宽时，文案左缘只离左边 20%，
文案角会掉进被切区 → 斜切量收到 34、padding ≥ 0.8×34。 */
.hero-band {
padding: 40px 0 34px;
clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 calc(100% - 34px));
}
.hero-adorn { height: 24px; }
/* 「四方角色」表：这里把第三列交回 auto（吸收余量）。
🔴 不能让三列都带指定宽度：一旦「指定宽度之和 > 表格可用宽度」，
Chrome 会把三列**等比压缩**——990px 以下第一列会被压到 86px 甚至 75px，
「生态合伙人」折行。窄屏只钉前两列，第三列吃剩下的。 */
table.tbl--roles th:nth-child(1) { width: 104px; }
table.tbl--roles th:nth-child(2) { width: 300px; }
table.tbl--roles th:nth-child(3) { width: auto; }
}
@media (max-width: 768px) {
.nav-in { gap: 10px; padding: 0 14px; }
.brand-sub { display: none; }
.sec { padding: 52px 0; }
.sec-head { margin-bottom: 28px; }
.sec-head h2 { font-size: 22px; }
/* padding-bottom 归零：底边由 .hero-band 收尾（三个断点都要写 0，漏一个带子就不贴底） */
.hero { padding: 40px 0 0; }
.hero h1 { font-size: 27px; letter-spacing: -.5px; }
.hero .lead { font-size: 15px; }
.wrap { padding: 0 calc(16px + var(--saf-r)) 0 calc(16px + var(--saf-l)); }
.g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
.levels { grid-template-columns: 1fr 1fr; gap: 11px; }
.level { padding: 16px 14px; }
.form-grid { grid-template-columns: 1fr; gap: 14px; }
.form-card { padding: 20px 16px; border-radius: var(--r-lg); }
.card { padding: 20px 18px; }
.kpi .n { font-size: 22px; }
.hero-list--2col { grid-template-columns: 1fr; gap: 9px; }
.steps--v .step { padding-left: 46px; }
/* 表格在窄屏允许横滑，别压缩成不可读 */
table.tbl { min-width: 560px; font-size: 13px; }
table.tbl th, table.tbl td { padding: 11px 13px; }
/* 「四方角色」表在窄屏用回紧凑列宽：不加这句，把「是谁」列放成 330px 后，
min-width 560 的表格里第三列只剩 130px，反而被压成 6~7 行（比优化前更糟）。
96 是「角色」列的硬下限（「生态合伙人」5 字 ≈65px + 左右 padding 26px）。
244 让「司机、物流企业、租赁公司、个体户」在 768 档仍然是 1 行。 */
table.tbl--roles th:nth-child(1) { width: 96px; }
table.tbl--roles th:nth-child(2) { width: 244px; }
/* 「五级合伙人通道」表在窄屏：三列「短标签」收窄，把余量让给唯一的长文本列「核心权益」。
若不收窄，560px 的表里该列只剩 77px ⇒ 中文一字一行（实测 5~8 行），用户反馈「这一列有点挤」。
下面是按**实测内容宽度**倒推的（13px 字号、10px 左右 padding、`box-sizing:border-box` 故 width 含 padding）：
· 级别 122 ：「L1 徽标 + 见习合伙人」的硬下限
（`.lv-badge` 是 inline-flex **不换行**，给窄了它不会折行而是**溢出**；
auto 表格布局里列的 min-content 也会把它顶回来，所以这个值只是"别低于"）
· 佣金比例 128 ：最长一行「基础档 + 认证加成」≈103px + 20 padding
· 晋升条件 174 ：最长一行「年度规模达标 + 平台评审」≈147px + 20 padding
三者 424 + 「核心权益」的 176 = 600 ⇒ 该列正文 156px ⇒ 21 字正好 2 行（改前是 8 行）。
横向 padding 由 13 收到 10px，四列共省 24px，正好用在这儿。 */
table.tbl--levels { min-width: 600px; }
table.tbl--levels th, table.tbl--levels td { padding: 11px 10px; }
table.tbl--levels th:nth-child(1) { width: 122px; }
table.tbl--levels th:nth-child(2) { width: 128px; }
table.tbl--levels th:nth-child(4) { width: 174px; }
.foot-in { grid-template-columns: 1fr; gap: 26px; }
.foot-bot { margin-top: 26px; padding: 13px 0 calc(13px + var(--saf-b)); }
.foot { padding: 38px 0 0; }
}
/* 触屏设备处理。🔴 这里必须用「屏宽 + 指针类型」双条件，不能只写 max-width：
iPhone 12/13 横屏是 844×390，宽度已经超过 768，只按屏宽判断就会漏掉这一档，
而 iOS 的「聚焦自动放大」在横屏同样会触发（用户一横屏点输入框，页面又炸一次）。
① 表单控件字号 ≥16px —— 这是规避 iOS 聚焦自动放大**唯一可靠**的方式；
不要改用 viewport 的 maximum-scale=1：那会连用户的双指缩放一起禁掉，是无障碍缺陷。
② 主要导航的触控目标补到 44px（原 40px）。 */
@media (max-width: 900px), (pointer: coarse) {
.input, .select, .textarea { font-size: 16px; }
.input, .select { min-height: 46px; }
.tab { height: 44px; }
/* 顶栏 CTA 原为 .btn--sm 的 38px —— 触屏上偏小，抬到 44px。
横屏（667/844 宽）不命中 ≤420 那档，只有这条能把它提上去。 */
.nav-actions .btn { height: 44px; }
/* 触屏上 :hover 会「黏住」不消失（点一下就一直保持 hover 样式），
所以额外给一个点按态作反馈，否则点标签时看不出有没有生效。 */
.tab:active { background: var(--bg-2); }
}
/* 窄屏顶栏：品牌名让位给两个标签，保证「货拉拉专区 / 生态合伙人」都完整可见。
🔴 必须排在 ≤420px 之前：媒体查询同优先级时靠后者覆盖，顺序颠倒会把 420 的规则吃掉。 */
@media (max-width: 560px) {
.brand-text { display: none; } /* 只留 BZ 圆标；整品牌名在页脚仍有 */
.nav-actions .btn { padding: 0 14px; font-size: 13.5px; }
.tabs { gap: 2px; }
.tab {
flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13.5px;
justify-content: center;
}
.tab span { overflow: hidden; text-overflow: ellipsis; }
/* hero 渐变带：小屏收紧内边距 + 减小斜切量（锥形比例不变：左薄右厚、两条边反向倾斜）；
竖线分隔去掉（换行后它没有意义）。
🔴 手机上文案可能换成两行、占宽近 85% → 上下 padding ≥ 0.9×斜切量才算安全（34/26 ≥ 0.9×22）。 */
.hero-band {
padding: 34px 0 28px;
clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 calc(100% - 22px));
}
.hero-adorn { height: 18px; clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }
.hero-band-slogan { font-size: 13.5px; }
.hero-band-in { column-gap: 10px; row-gap: 4px; }
.hero-band-tag {
padding-left: 0; border-left: 0; font-size: 11.5px;
}
}
@media (max-width: 420px) {
.hero h1 { font-size: 24px; }
.kpi-grid { gap: 10px; }
.levels { grid-template-columns: 1fr; }
.btn { height: 42px; padding: 0 18px; font-size: 14px; }
}
/* ≤380px（iPhone SE 一代 / 5s 的 320px，以及 360px 的安卓老机型）：
一行塞不下「BZ 圆标 + 两个标签 + 立即入驻」——实测 320px 时两个标签各只剩 78px，
「生态合伙人」5 个字要 88px 才放得下，会被省略号截成「生态合伙…」。
所以这一档把顶栏拆成两行：第一行品牌 + 按钮，第二行两个标签独占、平分宽度。 */
@media (max-width: 380px) {
.nav-in {
flex-wrap: wrap; height: auto; min-height: var(--nav-h);
padding-top: 9px; padding-bottom: 7px; row-gap: 2px;
}
.tabs { order: 3; flex: 1 0 100%; }
.tab { padding: 0 8px; }
/* 极窄屏把次要 CTA 的文案压到最简，避免挤掉品牌位 */
.hero-cta { gap: 10px; }
.hero-cta .btn { flex: 1 1 100%; }
.sec-head h2 { font-size: 20px; }
.form-card { padding: 18px 14px; }
.scroll-hint { font-size: 11.5px; }
}
/* 手机横屏（如 iPhone 12/13 的 844×390、SE 的 667×375）：
宽度够、但高度很小 —— 桌面那套 76px 上下留白会把首屏内容全推出可视区。
🔴 必须放在 ≤768px 之后：667px 宽同时命中这两条，靠后者覆盖。 */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
.nav-in { height: 54px; }
.hero { padding: 26px 0 0; } /* 底部同样归零，见上 */
.hero h1 { font-size: 26px; }
.hero .lead { margin-top: 12px; }
.hero-cta { margin-top: 18px; }
.sec { padding: 40px 0; }
.sec-head { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
}