/* ==========================================================================
   8FO GLOBAL BUSINESS NETWORK — 对外门户站设计系统
   独立命名空间 gbn-*，与 CRM（style.css / portal.css）完全隔离，互不污染。
   沿用品牌 tokens：深海蓝 #060d1e + 主蓝 #4d9bff + 青 #5ad1ff
   ========================================================================== */

:root{
  --bg:#060d1e;
  --bg-2:#081126;
  --bg-3:#0b1730;
  --primary:#4d9bff;
  --primary-d:#1b6bd6;
  --teal:#5ad1ff;
  --gold:#f6c552;
  --text:#e9effb;
  --text-2:#c3d2e8;
  --muted:#93a6c4;
  --dim:#6b7f9e;
  --line:rgba(140,190,255,.16);
  --line-2:rgba(140,190,255,.10);
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.028);
  --glass:linear-gradient(160deg,rgba(19,32,60,.92),rgba(9,17,38,.96));
  --green:#4ade80;
  --red:#ff8080;
  --orange:#fbbf24;
  --radius:14px;
  --radius-s:10px;
  --shadow:0 18px 50px rgba(0,0,0,.38);
  --maxw:1180px;
  --nav-h:62px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(77,155,255,.16),transparent 62%),
    radial-gradient(760px 460px at 92% 4%,rgba(90,209,255,.10),transparent 60%),
    radial-gradient(1100px 700px at 50% 108%,rgba(27,107,214,.12),transparent 65%);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--teal)}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.28;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-inline-start:1.25em}
li{margin:.3em 0}
strong,b{color:#fff;font-weight:650}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(77,155,255,.12);color:#bcd8ff;padding:.12em .42em;border-radius:5px}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

.gbn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:1}
.gbn-narrow{max-width:880px}

/* ===== 顶栏 ===== */
.gbn-top{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(6,13,30,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-2);
}
.gbn-top-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;gap:18px}
.gbn-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--text)}
.gbn-brand:hover{color:var(--text)}
/* 品牌标识：8FO 字标（反白版，白色 + 橙点，专为深色底准备）
   白色字标对头部底色 #060d1e 对比度 17.1:1；原色藏青版仅 1.1:1，故此处不可用原色版。 */
.gbn-logo{height:30px;width:auto;display:block;flex:0 0 auto}
.gbn-brand-txt{display:flex;flex-direction:column;line-height:1.14}
.gbn-brand-txt b{font-size:14px;letter-spacing:.01em}
.gbn-brand-txt em{font-style:normal;font-size:9.5px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase}

.gbn-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;flex-wrap:nowrap}
.gbn-nav a{
  color:var(--text-2);font-size:13px;padding:7px 10px;border-radius:8px;white-space:nowrap;
  transition:background .16s,color .16s;
}
.gbn-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.gbn-nav a[aria-current="page"]{color:#fff;background:rgba(77,155,255,.16);box-shadow:inset 0 0 0 1px rgba(77,155,255,.3)}
.gbn-top-cta{
  margin-inline-start:10px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--primary),var(--primary-d));
  color:#fff !important;font-size:13px;font-weight:600;padding:8px 15px;border-radius:9px;
  box-shadow:0 6px 18px rgba(77,155,255,.32);white-space:nowrap;
}
.gbn-top-cta:hover{filter:brightness(1.1)}
/* 顶栏次入口（登录）。与主 CTA 并排时必须有**视觉层级差**：主 CTA 是实心渐变，
   登录用描边浅字 —— 两者同权重会让「登录」与「加入」争同一个视觉焦点，
   而 PRD 的意图是「想加入的人一眼看到加入，已有账号的人找得到登录」。
   flex:0 0 auto：顶栏固有宽度是实测硬约束（见下方 1280px 档位说明），
   任何新增元素都必须先声明它不参与压缩，否则它会去挤导航。 */
.gbn-top-login{
  margin-inline-start:10px;flex:0 0 auto;
  color:var(--text-2) !important;font-size:13px;font-weight:600;
  padding:7px 13px;border-radius:9px;border:1px solid var(--line);white-space:nowrap;
  transition:color .16s,border-color .16s;
}
.gbn-top-login:hover{color:#fff;border-color:rgba(140,190,255,.45)}
.gbn-login-mobile{display:none}
.gbn-burger{
  display:none;margin-inline-start:auto;width:38px;height:34px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);border-radius:9px;cursor:pointer;padding:0;flex:0 0 auto;
}
.gbn-burger span{display:block;width:16px;height:1.7px;background:var(--text-2);margin:3.4px auto;border-radius:2px}
.gbn-cta-mobile{display:none}

/* 语言切换：五语下拉（<details>，零 JS）。
   折叠态刻意只显示**语言短码**（中文 / EN / RU / ES / AR）而不是语言全名
   （Русский / Español 的字宽是 RU / ES 的 2–3 倍）—— 这样折叠态的宽度与原先
   那个单语言胶囊基本一致。顶栏固有宽度是实测过的硬约束（1141–1280px 是历史溢出区），
   加语言不该把它撑开。展开面板 position:absolute 不参与布局，同理。
   仍然必须 flex:0 0 auto —— 它永远是顶栏溢出的新增风险点。
  ⚠️ 间距已从 10px/11px 收到 8px/10px：折叠态的**中文**是两个汉字，实测比 EN/RU/ES/AR
  宽约 10px，于是**只有中文**（恰好是默认语种）把顶栏顶出 2px（1440–1600px 实测
  scrollWidth 1182 > clientWidth 1180，CTA 右缘越过容器 2px；其余四语为 0）。
  这 2px 落在居中留白里、不裁切也不产生横向滚动，所以只查「越出视口」的检查抓不到它 ——
  是逐档量 `scrollWidth-clientWidth` 才量出来的。收回 4px 后五语一律为 0。 */
.gbn-lang{margin-inline-start:8px;flex:0 0 auto;position:relative}
.gbn-lang>summary{
  display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap;
  transition:color .16s,border-color .16s;
}
.gbn-lang>summary::-webkit-details-marker{display:none}
.gbn-lang>summary::after{
  content:"";width:5px;height:5px;border-inline-end:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);
}
.gbn-lang>summary:hover{color:#fff;border-color:rgba(140,190,255,.4)}
.gbn-lang[open]>summary{color:#fff;border-color:rgba(140,190,255,.4)}
.gbn-lang-pop{
  position:absolute;top:calc(100% + 9px);inset-inline-end:0;z-index:70;min-width:176px;
  display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;
  background:#0a1428;border:1px solid var(--line);box-shadow:0 20px 48px rgba(0,0,0,.55);
}
.gbn-lang-pop a{color:var(--text-2);font-size:13px;padding:8px 10px;border-radius:8px;white-space:nowrap}
.gbn-lang-pop a:hover{color:#fff;background:rgba(255,255,255,.06)}
.gbn-lang-pop a[aria-current="true"]{color:#fff;background:rgba(77,155,255,.16)}
/* 抽屉里那个语言入口在桌面态必须隐藏 —— 否则 >1140px 时它与顶栏那个**同时可见**，
   顶栏上会出现两个一模一样的语言按钮（实测 1440px：x=1127 与 x=1195 并排）。
   这是生成器同时输出两份（一份给抽屉、一份给顶栏）带来的必然副作用。 */
.gbn-nav .gbn-lang{display:none}

/* ===== 页头 ===== */
.gbn-hero{padding:74px 0 40px}
.gbn-hero-h1{font-size:clamp(28px,4.6vw,46px);letter-spacing:-.02em;margin-bottom:16px}
.gbn-hero-h1 .accent{
  background:linear-gradient(100deg,var(--teal),var(--primary) 55%,#8fb8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gbn-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);background:rgba(90,209,255,.09);border:1px solid rgba(90,209,255,.24);
  padding:5px 12px;border-radius:99px;margin-bottom:20px;font-weight:600;
}
.gbn-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);font-style:normal}
.gbn-lead{font-size:clamp(15px,1.7vw,17.5px);color:var(--text-2);max-width:760px}
.gbn-lead b{color:#fff}

/* 页头（内页） */
.gbn-head{padding:52px 0 8px;border-bottom:1px solid var(--line-2)}
.gbn-head h1{font-size:clamp(24px,3.6vw,36px);margin-bottom:12px}
.gbn-head .gbn-lead{font-size:15.5px}
.gbn-crumb{font-size:12px;color:var(--dim);margin-bottom:16px}
.gbn-crumb a{color:var(--muted)}

/* ===== 区块 ===== */
.gbn-sec{padding:52px 0}
.gbn-sec.tight{padding:34px 0}
.gbn-sec-head{margin-bottom:28px;max-width:820px}
.gbn-sec-head h2{font-size:clamp(20px,2.7vw,27px);margin-bottom:10px}
.gbn-sec-head p{color:var(--muted);margin:0}
.gbn-kicker{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);
  font-weight:700;margin-bottom:9px;display:block;
}

/* ===== 卡片与网格 ===== */
.gbn-grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

.gbn-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 18px;position:relative;transition:border-color .18s,transform .18s,background .18s;
}
.gbn-card:hover{border-color:rgba(140,190,255,.3);background:rgba(255,255,255,.062);transform:translateY(-2px)}
.gbn-card h3{font-size:16px;margin-bottom:8px}
.gbn-card h4{font-size:14.5px;margin-bottom:6px;color:#fff}
.gbn-card p{color:var(--muted);font-size:13.5px;margin:0}
.gbn-card p+p{margin-top:8px}
.gbn-card .num{
  font-size:11px;font-weight:800;color:var(--primary);letter-spacing:.1em;
  display:block;margin-bottom:10px;
}

/* 玻璃卡（强调） */
.gbn-card.glass{
  background:var(--glass);border-color:rgba(140,190,255,.22);box-shadow:var(--shadow);
}

/* ===== 数字条 ===== */
.gbn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gbn-stat{background:var(--bg-2);padding:20px 16px;text-align:center}
.gbn-stat b{display:block;font-size:clamp(22px,3vw,30px);color:#fff;line-height:1.1;
  background:linear-gradient(160deg,#fff,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.gbn-stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;letter-spacing:.02em}

/* ===== 闭环链路 ===== */
.gbn-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 0}
.gbn-node{
  font-size:12.5px;color:var(--text-2);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;white-space:nowrap;
}
.gbn-node.key{background:rgba(77,155,255,.16);border-color:rgba(77,155,255,.42);color:#fff;font-weight:600}
.gbn-arw{color:var(--dim);font-size:12px;flex:0 0 auto}

/* 闭环（长链：内容宽于容器时，平板及以上换行、手机横滑） */
.gbn-flow-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
/* ≥821px（平板/笔记本/桌面）：换行铺满，闭环一眼看全。
   实测 1440px 下若沿用 nowrap 会溢出 294px，把「订单→回款→交付→佣金」这几环
   藏在滚动区外，是真实可读性缺陷。
   断点取 821px 是与「手机布局」断点（≤820px：--nav-h 56px、split 单栏）对齐，
   避免在 900/901px 处出现"换行↔突增 574px 横滑"的突变。 */
@media (min-width:821px){
  .gbn-flow-scroll{overflow-x:visible;padding-bottom:0}
  .gbn-flow-scroll .gbn-flow{flex-wrap:wrap;min-width:0}
}
/* ≤820px：保持单行横滑（触屏滑动是自然手势；换行会碎成 4–5 行且箭头悬尾） */
@media (max-width:820px){
  .gbn-flow-scroll .gbn-flow{flex-wrap:nowrap;min-width:max-content}
}

/* ===== 阶梯（六级 Partner） ===== */
.gbn-ladder{display:grid;gap:11px}
.gbn-rung{
  display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:start;
  background:var(--card-2);border:1px solid var(--line);border-inline-start:3px solid var(--primary);
  border-radius:var(--radius-s);padding:15px 18px;
}
.gbn-rung .lv{font-size:17px;font-weight:800;color:var(--primary);letter-spacing:.02em;line-height:1.2}
.gbn-rung .lv em{display:block;font-style:normal;font-size:10px;color:var(--dim);letter-spacing:.1em;margin-top:2px}
.gbn-rung h4{margin-bottom:4px}
.gbn-rung p{margin:0;color:var(--muted);font-size:13.5px}
.gbn-rung:nth-child(3){border-inline-start-color:#3f8ae0}
.gbn-rung:nth-child(4){border-inline-start-color:var(--teal)}
.gbn-rung:nth-child(5){border-inline-start-color:#7bd6a8}
.gbn-rung:nth-child(6){border-inline-start-color:var(--gold)}

/* ===== 步骤条 ===== */
.gbn-steps{counter-reset:s;display:grid;gap:0;margin:0;padding:0;list-style:none}
.gbn-steps li{
  counter-increment:s;position:relative;padding:0 0 22px 44px;margin:0;
  border-inline-start:1px solid var(--line);margin-inline-start:13px;
}
.gbn-steps li:last-child{border-inline-start-color:transparent;padding-bottom:0}
.gbn-steps li::before{
  content:counter(s);position:absolute;inset-inline-start:-13px;top:-2px;width:26px;height:26px;
  border-radius:50%;background:var(--bg-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;color:var(--primary);
}
.gbn-steps b{display:block;font-size:15px;color:#fff;margin-bottom:4px}
.gbn-steps span{color:var(--muted);font-size:13.5px}

/* ===== 表格 ===== */
.gbn-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-2)}
table.gbn-t{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.gbn-t th{
  background:rgba(77,155,255,.09);color:#fff;font-weight:650;text-align:start;
  padding:12px 14px;border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.02em;white-space:nowrap;
}
table.gbn-t td{padding:11px 14px;border-bottom:1px solid var(--line-2);color:var(--text-2);vertical-align:top}
table.gbn-t tr:last-child td{border-bottom:0}
table.gbn-t tr:hover td{background:rgba(255,255,255,.022)}
table.gbn-t td b{color:#fff}
table.gbn-t .price{color:#fff;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
table.gbn-t .num-c{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== 标签 ===== */
.gbn-tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:6px;
  background:rgba(77,155,255,.14);color:#a9cdff;border:1px solid rgba(77,155,255,.28);white-space:nowrap}
.gbn-tag.teal{background:rgba(90,209,255,.13);color:#a5e8ff;border-color:rgba(90,209,255,.3)}
.gbn-tag.gold{background:rgba(246,197,82,.13);color:#ffdd8f;border-color:rgba(246,197,82,.3)}
.gbn-tag.green{background:rgba(74,222,128,.13);color:#9bf0bb;border-color:rgba(74,222,128,.3)}
.gbn-tag.red{background:rgba(255,128,128,.13);color:#ffb0b0;border-color:rgba(255,128,128,.3)}
.gbn-tag.gray{background:rgba(141,152,165,.13);color:#c2cbd6;border-color:rgba(141,152,165,.28)}

/* ===== 公式块 ===== */
.gbn-formula{
  background:linear-gradient(160deg,rgba(13,25,50,.9),rgba(8,15,32,.95));
  border:1px solid rgba(77,155,255,.24);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:2;color:#cfe2ff;overflow-x:auto;
}
.gbn-formula .k{color:var(--teal)}
.gbn-formula .o{color:var(--dim)}
.gbn-formula .v{color:var(--gold);font-weight:700}
.gbn-formula .hi{color:#fff;font-weight:700;background:rgba(77,155,255,.16);padding:1px 7px;border-radius:5px}

/* ===== 状态机 ===== */
.gbn-states{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 4px}
.gbn-state{
  font-size:12.5px;padding:8px 14px;border-radius:8px;font-weight:600;
  background:rgba(77,155,255,.12);border:1px solid rgba(77,155,255,.3);color:#bcd8ff;
}
.gbn-state.end{background:rgba(74,222,128,.13);border-color:rgba(74,222,128,.35);color:#9bf0bb}

/* ===== 提示条 ===== */
.gbn-note{
  border-inline-start:3px solid var(--primary);background:rgba(77,155,255,.07);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:15px 18px;margin:0 0 16px;
}
.gbn-note.warn{border-inline-start-color:var(--orange);background:rgba(251,191,36,.07)}
.gbn-note.red{border-inline-start-color:var(--red);background:rgba(255,128,128,.07)}
.gbn-note.green{border-inline-start-color:var(--green);background:rgba(74,222,128,.07)}
.gbn-note b{color:#fff}
.gbn-note p:last-child{margin-bottom:0}
.gbn-note p{color:var(--text-2);font-size:13.5px}

/* 引用 */
.gbn-quote{
  border-inline-start:3px solid var(--teal);padding:14px 20px;margin:0 0 18px;
  background:rgba(90,209,255,.055);border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:15.5px;color:#e2eeff;font-weight:600;
}

/* ===== 列表（勾选/叉） ===== */
.gbn-list{list-style:none;padding:0;margin:0 0 14px}
.gbn-list li{position:relative;padding-inline-start:24px;margin:.42em 0;color:var(--text-2);font-size:13.5px}
.gbn-list li::before{
  content:"";position:absolute;inset-inline-start:4px;top:.66em;width:8px;height:8px;border-radius:2px;
  background:var(--primary);box-shadow:0 0 0 3px rgba(77,155,255,.14);
}
.gbn-list.ok li::before{background:var(--green);box-shadow:0 0 0 3px rgba(74,222,128,.14)}
.gbn-list.no li::before{background:var(--red);box-shadow:0 0 0 3px rgba(255,128,128,.14)}
.gbn-list.num{counter-reset:n}
.gbn-list.num li::before{
  counter-increment:n;content:counter(n);background:none;box-shadow:none;
  color:var(--primary);font-size:11.5px;font-weight:800;top:.35em;inset-inline-start:0;width:auto;height:auto;
  font-variant-numeric:tabular-nums;
}

/* ===== CTA 区 ===== */
.gbn-cta{
  background:linear-gradient(150deg,rgba(27,107,214,.22),rgba(9,17,38,.9) 62%);
  border:1px solid rgba(77,155,255,.3);border-radius:18px;
  padding:38px 34px;text-align:center;position:relative;overflow:hidden;
}
.gbn-cta::before{
  content:"";position:absolute;inset:-40% -10% auto;height:220px;
  background:radial-gradient(closest-side,rgba(77,155,255,.3),transparent);pointer-events:none;
}
.gbn-cta h2{font-size:clamp(20px,2.8vw,28px);margin-bottom:12px;position:relative}
.gbn-cta p{color:var(--text-2);max-width:620px;margin:0 auto 24px;position:relative}
.gbn-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
.gbn-btn{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  padding:11px 24px;border-radius:10px;transition:filter .16s,transform .16s;
}
.gbn-btn.primary{background:linear-gradient(140deg,var(--primary),var(--primary-d));color:#fff;
  box-shadow:0 10px 26px rgba(77,155,255,.34)}
.gbn-btn.ghost{border:1px solid var(--line);color:var(--text-2);background:rgba(255,255,255,.03)}
.gbn-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.gbn-btn.ghost:hover{color:#fff;border-color:rgba(140,190,255,.4)}

/* ===== 分栏 ===== */
.gbn-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.gbn-split.wide{align-items:start}

/* 页内锚点导航 */
.gbn-anchors{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.gbn-anchors a{font-size:12.5px;color:var(--muted);border:1px solid var(--line);
  padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.03)}
.gbn-anchors a:hover{color:#fff;border-color:rgba(140,190,255,.4)}

/* ===== 页脚 ===== */
.gbn-foot{margin-top:64px;border-top:1px solid var(--line-2);background:rgba(4,9,22,.6);padding:44px 0 30px}
.gbn-foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;margin-bottom:32px}
.gbn-foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.gbn-foot a{display:block;font-size:13px;color:var(--muted);padding:3.5px 0}
.gbn-foot a:hover{color:var(--teal)}
.gbn-foot-brand p{font-size:13px;color:var(--dim);margin:0;max-width:340px;line-height:1.7}
.gbn-foot-brand .gbn-brand{margin-bottom:12px}
.gbn-foot-brand .gbn-logo{height:32px}
.gbn-foot-bot{
  border-top:1px solid var(--line-2);padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--dim);
}
.gbn-foot-bot span{line-height:1.7}

/* ===== 响应式 ===== */
/* 分栏内的表格：解除 520px 最小宽度。该下限本是为「手机端全宽表格宁可横滑、
   也不挤成碎片」而设；但它与 .gbn-split 的分栏冲突——1024px 时每栏仅 478px，
   表格被硬撑出 42px 横滑。>820px 时 split 才会出现多栏（≤820px 已强制单栏），
   故此区间内让分栏里的表格贴合栏宽换行；≤820px 保持原行为不变。 */
@media (min-width:821px){
  .gbn-split table.gbn-t{min-width:0}
}
/* 顶栏内联导航的固有宽度：导航改名（全球网络/全球伙伴/… 9 项）+ 新增语言切换后实测约
   1230px（logo 74 + 品牌字块 209 + 9 项导航 675 + EN 43 + 登录 ~95 + 间距）。视口小于它
   时整条会溢出，而 body{overflow-x:hidden} 把溢出**裁掉而不给滚动条**，于是登录入口被切
   一半甚至整块消失（实测 1200px 右切、1141px 溢出 77px）。
   故设 1280px 专属档位：只收窄间距与字号，把内联导航的可用下限压到 1141px 以上；
   再向下才折叠——宁可折叠，也不要把入口藏掉。 */
@media (max-width:1280px){
  .gbn-top-in{gap:12px}
  .gbn-nav a{padding:7px 8px;font-size:12.5px}
  .gbn-lang{margin-inline-start:6px}
  .gbn-lang>summary{padding:6px 9px}
  .gbn-top-cta{margin-inline-start:6px;padding:8px 12px}
  .gbn-top-login{margin-inline-start:6px;padding:6px 10px;font-size:12.5px}
}
@media (max-width:1080px){
  .gbn-brand-txt em{display:none}
}
/* 1140px 以下折叠为汉堡抽屉。 */
@media (max-width:1140px){
  .gbn-burger{display:block}
  .gbn-top-cta{display:none}
  /* 登录入口必须与主 CTA **同进同出**：主 CTA 在窄屏藏进抽屉，
     而登录留在顶栏的话，窄屏顶栏就又变成「品牌 + 登录 + 汉堡」三件套，
     宽度又回到溢出风险里 —— 而且会出现「桌面看得到加入、手机看不到」这种
     入口不一致。两条一起收进抽屉，由 .gbn-login-mobile 版本承接。 */
  .gbn-top-login{display:none}
  /* 语言切换挪进抽屉：顶栏在窄屏只剩「品牌 + 汉堡」，不给溢出留任何机会。
     此处 display:block 是覆盖上面那条桌面态隐藏规则（同特异性、位置更后）。
     抽屉里**不再嵌套一层下拉**：<summary> 隐藏，五个语言直接铺成两行网格 ——
     手机上一次点开抽屉就能看到全部语言，比「再点一次才展开」少一步。 */
  .gbn-top-in>.gbn-lang{display:none}
  .gbn-nav .gbn-lang{display:block;margin:8px 0 0}
  .gbn-nav .gbn-lang>summary{display:none}
  .gbn-nav .gbn-lang-pop{
    position:static;min-width:0;padding:0;background:none;border:0;box-shadow:none;
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  }
  .gbn-nav .gbn-lang-pop a{
    text-align:center;border:1px solid var(--line);padding:11px 6px;font-size:13.5px;
  }
  .gbn-cta-mobile{display:block;margin:10px 0 0;text-align:center;color:#fff !important}
  /* 抽屉里的登录：与 .gbn-cta-mobile 同一形态（块级、居中），但保留描边以示次入口。
     也覆盖掉上面那条桌面态 `.gbn-top-login{display:none}`（同特异性、位置更后）。 */
  .gbn-login-mobile{display:block;margin:10px 0 0;text-align:center}
  .gbn-nav{
    position:fixed;top:var(--nav-h);inset-inline-start:0;inset-inline-end:0;bottom:auto;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(6,13,30,.985);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);padding:8px 12px 14px;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    display:none;
  }
  .gbn-nav.open{display:flex}
  .gbn-nav a{padding:12px 10px;font-size:15px;border-radius:9px}
}
@media (max-width:900px){
  .gbn-foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:820px){
  :root{--nav-h:56px}
  .gbn-hero{padding:48px 0 28px}
  .gbn-sec{padding:38px 0}
  .gbn-brand-txt b{font-size:12.5px;letter-spacing:0}
  .gbn-logo{height:26px}
  .gbn-foot-brand .gbn-logo{height:28px}
  .gbn-top-in{gap:10px}
  .gbn-ladder .gbn-rung{grid-template-columns:1fr;gap:6px}
  .gbn-cta{padding:28px 20px}
  .gbn-split{grid-template-columns:1fr}
  .gbn-split>*{min-width:0}
  .gbn-grid>*{min-width:0}
}
@media (max-width:560px){
  .gbn-wrap{padding:0 16px}
  .gbn-top-in{padding:0 16px}
  .gbn-foot-grid{grid-template-columns:1fr;gap:20px}
  .gbn-stat b{font-size:22px}
  .gbn-card{padding:17px 16px}
  table.gbn-t{font-size:12.5px}
  .gbn-brand-txt b{font-size:11.5px}
  .gbn-logo{height:24px}
  .gbn-brand-txt em{display:none}
  .gbn-flow{gap:6px}
  .gbn-node{font-size:12px;padding:6px 10px}
}

/* 打印 */
@media print{
  body::before{display:none}
  .gbn-top,.gbn-cta,.gbn-burger{display:none !important}
  body{background:#fff;color:#111}
  .gbn-card,.gbn-table-wrap,.gbn-formula{border-color:#ccc;background:#fff}
}

/* ============================================================================
   阿拉伯语（RTL）适配
   ============================================================================
   镜像工作的大头已经由**逻辑属性**承担了：本文件里所有方向性声明在前文一律写作
   margin-inline-start / padding-inline-* / border-inline-* / inset-inline-* /
   text-align:start|end（见 i18n/logicalize-css.py，LTR 下计算值与物理属性完全等价）。
   因此下面只写「逻辑属性管不了」的四件事：

   1. 字体栈
      中文回退链（"PingFang SC" / "Microsoft YaHei"）不含阿拉伯字形，
      命中失败后回退到系统默认字体，字重与行高都会失准。给 ar 单独一条链。
      不引外部 webfont：站点在多个网络环境下要能离线正确渲染，不新增外部依赖。

   2. letter-spacing 一律归零 —— **这是正确性问题，不是审美问题**
      阿拉伯字母靠连写（contextual joining）成型，加字距会把连写拆开，
      渲染成一串互不相连的孤立字形，看起来像乱码。
      本文件有 20+ 处 letter-spacing（大写标签、eyebrow、数字条、页脚栏目名），
      全部落在这条规则下。不做例外：品牌锁排那处只有 .01em（14px 上约 0.14px），
      视觉上不可察，为它开一个 !important 例外不值得。

   3. 箭头字形
      "→" 是方向性符号，RTL 下应指左。它写在 HTML 文本里，CSS 改不了单个字符 ——
      生成器已把 RTL 页面的每个 "→" 包进 <span class="gbn-arw">，这里镜像它。
      闭环链路（.gbn-flow）另需显式 direction:rtl，否则 flex 顺序在某些浏览器里
      仍按 LTR 排列，与箭头方向打架。

   4. 语言下拉的展开方向与折叠箭头
      面板用 inset-inline-end:0 已自动贴到另一边；折叠箭头是 border 画的，
      需要单独反旋一次。
   ============================================================================ */
[dir="rtl"]{
  --font-ar:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,"Arial",sans-serif;
}
[dir="rtl"] body{font-family:var(--font-ar)}
[dir="rtl"] *{letter-spacing:normal !important}
[dir="rtl"] .gbn-arw{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .gbn-flow{direction:rtl}
[dir="rtl"] .gbn-lang>summary::after{transform:translateY(-2px) rotate(-45deg)}
/* 中阿混排时的数字与代码片段：保持 LTR 走向并保留等宽，否则 "9:00–18:00 GMT+8"
   会被 bidi 算法重排成 "GMT+8 18:00–9:00"。 */
[dir="rtl"] code,[dir="rtl"] kbd,[dir="rtl"] .gbn-num,[dir="rtl"] .gbn-t .num-c{
  direction:ltr;unicode-bidi:embed;
}

/* ===== apex（8fo.com）顶栏密度档 =====
   apex 与 one 门户**共用本文件**。两站顶栏构成不同：
     · one 门户：9 项，标签短（Red / Socios / Поставщики 之类）
     · apex    ：7 项，但含 Mercados / Diagnóstico / Диагностика / 供应商 这类长词，
                 且品牌副标是一句完整短语（不是 "Global B2B Sourcing Network" 这种词组）
   实测：1440px 下 apex 西语顶栏固有宽度 1269px，而可用内宽只有 1136px ——
   **不是只在窄屏溢出，是在桌面全宽上就溢出**（CTA 被右裁 81px）。
   所以 apex 需要一个更早、更紧的收窄档：把 1280px 以下的间距与内边距再压一档。
   用 body 作用域限定：one 门户的 <body> 没有这个类，规则不会外溢。
   注意特异性：`.gbn-apex .gbn-nav a`(0,2,1) 高于媒体查询里的 `.gbn-nav a`(0,1,1)，
   所以本块写在文件末尾即可覆盖，不需要 !important。 */
@media (max-width:1280px){
  .gbn-apex .gbn-top-in{gap:10px}
  .gbn-apex .gbn-nav a{padding:7px 7px;font-size:12.5px}
  .gbn-apex .gbn-lang{margin-inline-start:4px}
  .gbn-apex .gbn-top-cta{margin-inline-start:4px;padding:8px 11px}
  .gbn-apex .gbn-top-login{margin-inline-start:4px;padding:6px 9px}
}

/* ===== 信息图组件 gbn-ig-*（apex 首页「图文并茂」改造）=====
   与既有 gbn-card / gbn-flow 并列，不覆盖任何旧类 —— 旧页面零回归。

   两条约束来自本项目的既有硬规则，不是审美偏好：
     ① **图内零文字**：tools/verify-gbn.py 第 ⑤ 条（非中文页正文零中文）会剥掉
        <script> 与 <style>，但**不剥 <svg>**。也就是说，SVG 里的中文会直接
        触发 en/ru/es 三语的中文泄漏判据。所以这里所有 SVG 只画几何形状，
        标签一律交给 HTML 承载 —— 五语因此共用同一段 SVG 标记，
        结构上就不可能出现「图里的字没翻译」。图例文字走 HTML 才可翻译、可换行。
     ② **移动端不是缩放的移动端**：宽 viewBox 的图在 390px 屏上按比例缩到
        文字只剩几个像素。复杂图一律在窄屏换成竖排 / 双列 HTML 表达。
   方向一律用逻辑属性（inline-start / inline-end），RTL 自动镜像。 */

/* ── 图标 tile 网格：把「卡片 + 一句说明」压成「图标 + 名称 + 微标签」── */
.gbn-ig-tiles{display:grid;gap:13px}
.gbn-ig-tiles.c2{grid-template-columns:repeat(2,1fr)}
.gbn-ig-tiles.c3{grid-template-columns:repeat(3,1fr)}
.gbn-ig-tiles.c4{grid-template-columns:repeat(4,1fr)}
.gbn-ig-tile{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:16px 15px 14px;
  color:inherit;text-decoration:none;
  transition:border-color .18s,transform .18s,background .18s;
}
.gbn-ig-tile:hover{
  border-color:rgba(140,190,255,.34);background:rgba(255,255,255,.045);
  transform:translateY(-2px);color:inherit;
}
.gbn-ig-tile>h4{font-size:13.5px;margin:0;color:#fff;line-height:1.35}
.gbn-ig-tile>small{display:block;font-size:11.5px;color:var(--muted);line-height:1.55}
/* 整块可点（PRD：所有 CTA 移动端可点击）—— 触摸目标从一行文字放大到整张卡 */
.gbn-ig-tile .gbn-lk{
  font-size:12px;font-weight:600;margin-top:auto;padding-top:3px;color:var(--primary);
}
.gbn-ig-tile:hover .gbn-lk{color:var(--teal)}

/* 图标底座。四个色相区分语义（默认=蓝 / gold=门槛·人工 / green=成交 /
   red=风险·禁止），颜色本身承载读数，不是随机装饰。 */
.gbn-ig-ic{
  width:34px;height:34px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(77,155,255,.20),rgba(90,209,255,.06));
  border:1px solid rgba(140,190,255,.26);color:var(--teal);
}
.gbn-ig-ic svg{width:18px;height:18px;display:block}
.gbn-ig-ic.gold{color:var(--gold);
  background:linear-gradient(150deg,rgba(246,197,82,.18),rgba(246,197,82,.05));
  border-color:rgba(246,197,82,.30)}
.gbn-ig-ic.green{color:var(--green);
  background:linear-gradient(150deg,rgba(74,222,128,.18),rgba(74,222,128,.05));
  border-color:rgba(74,222,128,.30)}
.gbn-ig-ic.red{color:var(--red);
  background:linear-gradient(150deg,rgba(255,128,128,.18),rgba(255,128,128,.05));
  border-color:rgba(255,128,128,.30)}

/* ── 分段架构图：把 9–16 个节点的长流程压成「4 阶段 × 阶段内节点」──
   同一批节点改由层级表达：横向滚动条消失，一眼能看出「哪几个节点属于同一段」。 */
.gbn-ig-stages{display:grid;gap:11px;grid-template-columns:repeat(4,1fr)}
.gbn-ig-stage{
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-s);
  border-top:2px solid var(--primary);padding:14px 13px 13px;min-width:0;
}
.gbn-ig-stage:nth-child(2){border-top-color:#3f8ae0}
.gbn-ig-stage:nth-child(3){border-top-color:var(--teal)}
.gbn-ig-stage:nth-child(4){border-top-color:var(--green)}
.gbn-ig-stage>b{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);font-weight:700;margin-bottom:10px;
}
.gbn-ig-stage:nth-child(2)>b{color:#7fb4ef}
.gbn-ig-stage:nth-child(3)>b{color:var(--teal)}
.gbn-ig-stage:nth-child(4)>b{color:var(--green)}
.gbn-ig-stage .n{display:flex;flex-wrap:wrap;gap:6px}
.gbn-ig-stage .n>span{
  font-size:11.5px;color:var(--text-2);background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);border-radius:6px;padding:4px 9px;white-space:nowrap;
}
.gbn-ig-stage .n>span.k{
  background:rgba(77,155,255,.16);border-color:rgba(77,155,255,.4);
  color:#fff;font-weight:600;
}

/* ── 环形图 + 图例：闭环与分配关系 ──
   环只表达「是几段、是闭环、各占多大」，明细全部在图例里（可在窄屏竖排）。 */
.gbn-ig-ring{display:grid;grid-template-columns:minmax(210px,300px) 1fr;
  gap:28px;align-items:center}
.gbn-ig-ring svg{width:100%;height:auto;display:block}
.gbn-ig-ringleg{display:grid;gap:12px;min-width:0}
.gbn-ig-ringleg>div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
/* 色块用**显式类**而不是裸 `i` 选择器。
   裸元素选择器的特异性只有 (0,1,1)，与同文件里任何 `.gbn-x i` 同级，
   于是「后定义的那条赢」—— 本轮就踩到了：`.gbn-ig-num i` 排在本条之后，
   它没写 width/height，于是数字带里的 <i> 继承了这里的 9×9px，
   「线索 → 商机 → 报价 → …」被压成一列 13 行，整段凭空高出 150px。
   页面上完全看不出是 CSS 打架（文字、颜色、对齐都正常，只是每行一个字）。
   显式类让两处彻底不相干。 */
.gbn-ig-sw{width:9px;height:9px;border-radius:3px;display:block;margin-top:6px}
.gbn-ig-ringleg b{display:block;font-size:13px;color:#fff;line-height:1.4}
.gbn-ig-ringleg small{display:block;font-size:11.5px;color:var(--muted);line-height:1.5}

/* ── 抽象球体（hero 背景）：经纬线网格 + 两条反向轨道 + 城市节点 ──
   只画抽象几何，**不画陆地轮廓、不画国界、不引第三方地图瓦片**：
   一旦涉及真实地理边界就必须走地图合规链路，抽象球体不涉及任何边界。 */
.gbn-ig-sprite{position:absolute;width:0;height:0;overflow:hidden}
.gbn-ig-orbit{
  position:absolute;inset-inline-end:-118px;top:-58px;width:520px;max-width:56%;
  z-index:0;pointer-events:none;opacity:.62;
}
/* ── hero 的出血液化层 ──
   装饰球体按设计要**从视口边缘切出去一半**（inset-inline-end:-118px），
   但 `.gbn-hero` 基类里没有 `position:relative`，于是这个绝对定位子元素的
   包含块是**初始包含块（视口）**，`-118px` 就成了「文档右侧多出 118px」——
   实测各视口文档宽度一致多 118px，LTR 往右、RTL 往左（RTL 数值也是 118，
   说明逻辑属性本身是对的，错的是定位上下文）。
   这不是"轻微不整齐"：它给整页加了横向滚动条，且 23 档顶栏宽度普查每一档都判红。

   两个修正缺一不可：
     · `position:relative` —— 让球体锚到 hero 自己，出血量不再随视口漂移；
     · `overflow-x:clip` —— 把出血**裁掉但不产生滚动容器**。
       用 `overflow-x:hidden` 会连带把 `overflow-y` 计算成 `auto`（规范规定
       visible 与 hidden 配对时会强制成 auto），hero 立刻变成可竖向滚动的盒子，
       顶部 -58px 的出血会变成一段能滚出来的空白。
       `clip` 不参与这个配对，所以 `overflow-x:clip` + `overflow-y:visible` 合法，
       正是"只裁横向、竖向上半球照旧露在 hero 外面"想要的效果。
   作用域限定 `.gbn-apex`：one 门户与 partner 也用 `.gbn-hero`，它们没有会出血的
   绝对定位子元素，不该被顺带改成 clip。 */
.gbn-apex .gbn-hero{position:relative;overflow-x:clip}
/* 老浏览器（Safari < 16 等）不认 `clip`：退化为把球体收回视口内。
   宁可少一点出血感，也不要横向滚动条。 */
@supports not (overflow-x:clip){
  .gbn-apex .gbn-hero{overflow-x:hidden}
  .gbn-apex .gbn-ig-orbit{inset-inline-end:0}
}
.gbn-ig-orbit svg{width:100%;height:auto;display:block;overflow:visible}
.gbn-hero .gbn-wrap{position:relative;z-index:1}
.gbn-ig-spin{transform-box:fill-box;transform-origin:center;
  animation:gbnIgSpin 52s linear infinite}
.gbn-ig-spin.rev{animation-duration:78s;animation-direction:reverse}
.gbn-ig-pulse{animation:gbnIgPulse 3.6s ease-in-out infinite}
.gbn-ig-pulse.d1{animation-delay:.9s}
.gbn-ig-pulse.d2{animation-delay:1.8s}
.gbn-ig-pulse.d3{animation-delay:2.7s}
@keyframes gbnIgSpin{to{transform:rotate(360deg)}}
@keyframes gbnIgPulse{0%,100%{opacity:.35}50%{opacity:1}}
/* 截图一律带 --force-prefers-reduced-motion，所以动效必须在这条规则下静止，
   否则每次截图都不一样、无法复现。 */
@media (prefers-reduced-motion:reduce){
  .gbn-ig-spin,.gbn-ig-pulse{animation:none}
  .gbn-ig-pulse{opacity:.75}
}

/* ── 数字带：4 个可核验数字 ──
   ⚠️ 这里每一条都必须用**显式类名**，不能写 `.gbn-ig-num span` / `.gbn-ig-num i`
   这类裸标签选择器。原因不是洁癖，是本页真的踩了两次：
     ① `.gbn-ig-ringleg i{width:9px}` 以 (0,1,1) 的同级特异性打到数字带的 <i>，
        把口径行压成一列；
     ② `.gbn-ig-num span{display:block}` 会命中**生成器注入的** `<span class="gbn-arw">`
        （每个 `→` 都被包成它，见 gbn_site.wrap_arrows），于是
        「线索 → 商机 → 报价 → …」变成每个箭头独占一行、整块高 293px。
   后代选择器分不清「我写的 span」和「引擎注入的 span」，显式类名分得清。
   页面上这两种故障都**看不出是 CSS 打架**：文字、颜色、居中全部正常，
   只是换行位置不对 —— 而「看起来字很多」正是本轮要解决的那个问题。 */
.gbn-ig-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.gbn-ig-num{background:var(--bg-2);padding:18px 15px;text-align:center;min-width:0}
.gbn-ig-num .gbn-ig-big{display:block;font-size:clamp(20px,2.6vw,28px);line-height:1.1;
  background:linear-gradient(160deg,#fff,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gbn-ig-num .gbn-ig-lbl{display:block;font-size:11.5px;color:var(--muted);margin-top:6px}
.gbn-ig-cap{display:block;font-style:normal;font-size:10px;color:var(--dim);
  margin-top:5px;letter-spacing:.08em}

/* ── 四步门槛条：企业档案发布前的四步（现为「进行中」状态）── */
.gbn-ig-gate{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  counter-reset:ig;margin:0;padding:0;list-style:none}
.gbn-ig-gate li{
  counter-increment:ig;position:relative;margin:0;
  /* 序号留白必须和 ::before 的定位属性**同族**：两个都用逻辑属性。
     写成物理 `padding-left:40px` + 逻辑 `inset-inline-start:12px` 时，
     RTL（阿拉伯语）下圆圈镜像到**右边**、文字留白仍在左边 ——
     圆圈直接压在正文第一个词上。这类错在中文/英文页完全看不出来，
     只能靠"同族属性"这条规则提前堵住，而不是等看到阿语截图才发现。 */
  padding:13px 14px;padding-inline-start:40px;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-s);
  font-size:12.5px;color:var(--text-2);min-width:0;
}
.gbn-ig-gate li::before{
  content:counter(ig);position:absolute;inset-inline-start:12px;top:12px;
  width:19px;height:19px;border-radius:50%;background:var(--bg-3);
  border:1px solid rgba(140,190,255,.28);color:var(--primary);
  font-size:10.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ── 六级阶梯的第一列：必须**固定宽度**，不能用 auto ──
   基类 `.gbn-rung` 的第一列是 74px，装不下 apex 这六级写的
   Global HQ / Regional Hub / Country Partner / City Partner /
   Industry Partner / Local Sales Partner（12–20 字符），每级都被折成两行。

   上一版写成 `grid-template-columns:auto 1fr`，注释里声称「列宽由最宽的那一项
   决定、六级互相对齐」—— **那是错的**：`.gbn-rung` 是「每个 rung 一个独立 grid」，
   而 `auto` 轨道在该容器内等于**该项自己的 max-content**，六个容器各算各的，
   没有任何跨容器协调（能做这件事的只有 subgrid）。实测第一列宽度
   en [70,91,109,81,110,131]、ar [67,88,104,77,108,125] —— 六级参差，
   右侧的中文名全部错位，看起来就是"没对齐的一堆字"。
   所以取固定 146px：最宽一项实测 131px（阿语字体栈下 125px），留 15px 余量。
   这六级名字五语一致（品牌词保留英文），不会因翻译而变长。

   ⚠️ 必须套在 @media (min-width:821px) 里。`.gbn-ladder .gbn-rung{
   grid-template-columns:1fr}`（820px 以下折叠成单列）在文件里更靠前，
   而**媒体查询不增加特异性** —— 本规则若裸写在文件末尾就会把它压掉，
   apex 阶梯在最该折叠的手机上反而不折叠。 */
@media (min-width:821px){
  .gbn-apex .gbn-rung{grid-template-columns:146px 1fr}
}
.gbn-apex .gbn-rung>span{white-space:nowrap}

/* ── 窄屏：复杂图换表达方式，而不是等比缩小 ── */
@media (max-width:1080px){
  .gbn-ig-tiles.c4{grid-template-columns:repeat(2,1fr)}
  .gbn-ig-stages{grid-template-columns:repeat(2,1fr)}
  .gbn-ig-nums{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .gbn-ig-orbit{display:none}
  .gbn-ig-ring{grid-template-columns:1fr;gap:20px}
  .gbn-ig-tiles.c3{grid-template-columns:repeat(2,1fr)}
  .gbn-ig-gate{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .gbn-ig-tiles.c2,.gbn-ig-tiles.c3{grid-template-columns:1fr}
  .gbn-ig-stages{grid-template-columns:1fr}
  .gbn-ig-nums{grid-template-columns:1fr}
  .gbn-ig-gate{grid-template-columns:1fr}
}
@media (max-width:400px){
  .gbn-ig-tiles.c4{grid-template-columns:1fr}
}