/* Takealot 专区 & 登录页 — 白底橙统一风格（内容移植自 africakuaicang.com） */
.grad-word{color:var(--primary)}

/* 专区二级导航条 */
.zone-bar{background:var(--primary-soft);border-bottom:1px solid var(--line)}
.zone-bar .wrap{display:flex;align-items:center;gap:22px;height:52px;overflow-x:auto}
.zone-label{color:var(--primary);font-weight:800;font-size:13px;letter-spacing:1px;white-space:nowrap;text-transform:uppercase}
.zone-links{display:flex;gap:20px;font-size:13px;white-space:nowrap}
.zone-links a{color:var(--neutral);font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.zone-links a.active{color:var(--primary);border-bottom-color:var(--primary)}
.zone-links a:hover{color:var(--primary)}

/* 专区页 hero */
.zhero{background:linear-gradient(180deg,var(--primary-soft) 0%,#fff 100%);padding:64px 0 56px;border-bottom:1px solid var(--line)}
.zhero .tag{color:var(--primary);font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.zhero h1{font-size:40px;line-height:1.25;font-weight:800;letter-spacing:-.5px;max-width:860px}
.zhero .lead{margin:20px 0 0;font-size:16.5px;color:var(--neutral);max-width:720px}
.zhero .mini{display:flex;margin-top:38px;border-top:1px solid var(--line);flex-wrap:wrap}
.zhero .mini>div{padding:20px 36px 0 0;margin-right:36px;border-right:1px solid var(--line)}
.zhero .mini>div:last-child{border-right:none;margin-right:0}
.zhero .mini b{display:block;font-size:24px;font-weight:900;color:var(--primary)}
.zhero .mini span{font-size:12.5px;color:var(--neutral)}

/* 垂直时间线 */
.vtimeline{display:flex;flex-direction:column;border-left:2px solid var(--line);margin-left:16px}
.vt-step{position:relative;padding:0 0 34px 34px}
.vt-step:last-child{padding-bottom:0}
.vt-step::before{content:attr(data-i);position:absolute;left:-17px;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-sizing:content-box}
.vt-step h4{font-size:17px;font-weight:700;margin-bottom:6px}
.vt-step p{font-size:13.5px;color:var(--neutral);max-width:620px}
.vt-tags{margin-top:10px}
.vt-tags span{display:inline-block;font-size:11.5px;color:var(--primary-dark);background:var(--primary-soft);border:1px solid var(--primary-a25);padding:4px 12px;border-radius:999px;font-weight:700}

/* 功能行 */
.feat{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px dashed var(--line)}
.feat:last-child{border-bottom:none;padding-bottom:6px}
.feat .ic{width:52px;height:52px;border-radius:12px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:24px}
.feat h4{font-size:16.5px;font-weight:700;margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--neutral)}

/* FAQ 折叠 */
details.faq{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:#fff;overflow:hidden}
details.faq summary{cursor:pointer;padding:17px 22px;font-weight:700;font-size:15.5px;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--primary);font-weight:900;margin-right:10px;font-size:17px;display:inline-block;width:16px}
details.faq[open] summary::before{content:"–"}
details.faq .ans{padding:0 22px 18px 48px}
details.faq .ans p{font-size:14px;color:var(--neutral)}

/* 对比表 */
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1.5px solid var(--line)}
.cmp-table th{background:var(--ink);color:#fff;padding:13px 16px;text-align:left;font-size:13px}
.cmp-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table td.hl{background:var(--primary-soft);font-weight:700;color:var(--primary-dark)}
.cmp-table td.no{color:var(--neutral)}
.case-note{font-size:12.5px;color:var(--neutral);margin-top:14px}

/* CTA 盒 */
.cta-box{background:var(--primary-soft);border:1.5px solid var(--primary-a25);border-radius:16px;padding:44px 40px;text-align:center}
.cta-box h2{font-size:26px;font-weight:800;margin-bottom:12px}
.cta-box p{color:var(--neutral);font-size:15px;margin-bottom:24px}
.cta-box .btn-amber{background:var(--primary);color:#fff;padding:14px 32px;border-radius:8px;font-weight:700;font-size:15px;display:inline-block}
.cta-box .btn-amber:hover{background:var(--primary-dark)}

/* 页内锚点子导航（playbook） */
.subnav-wrap{background:#fff;border-bottom:1px solid var(--line)}
.subnav{display:flex;gap:26px;font-size:13.5px;overflow-x:auto}
.subnav a{color:var(--neutral);font-weight:600;padding:14px 0;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a.active,.subnav a:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* 注册引导卡（signup 页） */
.grad-card{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:20px;padding:40px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;color:#fff;box-shadow:0 20px 44px var(--primary-a25);margin-bottom:56px}
.grad-card .big small{display:block;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;opacity:.85;margin-bottom:8px}
.grad-card .big b{font-size:32px;font-weight:900;line-height:1.25;display:block}
.grad-card .go{background:#fff;color:var(--primary-dark);font-weight:800;font-size:16px;padding:16px 30px;border-radius:12px;white-space:nowrap}
.grad-card .go:hover{background:var(--ink);color:#fff}

/* 三步注册（signup 页） */
.nsteps .nstep{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line)}
.nsteps .nstep:last-child{border-bottom:none}
.nsteps .nnum{width:52px;height:52px;border-radius:14px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.nsteps .nstep:nth-child(2) .nnum{background:var(--ink)}
.nsteps .nstep:nth-child(3) .nnum{background:#2E7D32}
.nsteps h3{font-size:18px;font-weight:700;margin-bottom:8px}
.nsteps p{font-size:14px;color:var(--neutral);max-width:560px}
.nsteps .ntag{display:inline-block;margin-top:10px;font-size:11.5px;color:var(--primary-dark);background:var(--primary-soft);border:1px solid var(--primary-a25);padding:4px 12px;border-radius:999px;font-weight:700}

/* 登录页身份选择 */
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.persona{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;transition:.2s}
.persona:hover{border-color:var(--primary);box-shadow:0 16px 40px var(--primary-a10)}
.persona-head{text-align:center}
.persona .avatar{width:84px;height:84px;margin:0 auto 12px;border-radius:22px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 10px 22px var(--primary-a25)}
.persona-badge{display:inline-block;margin-bottom:14px;font-size:12.5px;font-weight:800;color:#fff;background:var(--primary);padding:6px 16px;border-radius:999px;letter-spacing:.4px;box-shadow:0 4px 12px var(--primary-a25)}
.persona h3{font-size:24px;font-weight:800;margin-bottom:6px}
.persona-why{font-size:15px;color:var(--neutral);font-weight:500;margin-bottom:22px}
.persona-features{list-style:none;margin:0 0 26px;padding:0}
.persona-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink);line-height:1.55;padding:9px 0;border-bottom:1px dashed var(--line)}
.persona-features li:last-child{border-bottom:none}
.persona-features .check{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center}
.persona-features .check::before{content:"";width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.persona-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.persona-actions .btn-amber{background:var(--primary);color:#fff;padding:13px 22px;border-radius:10px;font-weight:700;font-size:14px;flex:1 1 120px;text-align:center}
.persona-actions .btn-amber:hover{background:var(--primary-dark)}
.persona-actions .btn-outline-dk{border:1.5px solid var(--ink);color:var(--ink);padding:13px 22px;border-radius:10px;font-weight:600;font-size:14px;flex:1 1 120px;text-align:center}
.persona-actions .btn-outline-dk:hover{background:var(--ink);color:#fff}
.login-note{margin-top:26px;font-size:13px;color:var(--neutral);background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:16px 22px;text-align:center}

/* 双语内容显隐由 style.css 统一控制（默认显示中文、英文在 body.lang-en / body.lang-zu 下显示）；
   此处不再设置 [data-lang="en"]{display:none}，避免覆盖英文模式下的正常显示。 */

/* 专区首页四模块卡 */
.tcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{display:block;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:28px 24px;text-decoration:none;color:var(--ink);transition:.2s}
.tcard:hover{border-color:var(--primary);box-shadow:0 14px 34px var(--primary-a10);transform:translateY(-2px)}
.tcard .avatar{width:54px;height:54px;border-radius:14px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px}
.tcard h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
.tcard p{font-size:13px;color:var(--neutral);line-height:1.65;margin-bottom:12px}
.tcard .more{color:var(--primary);font-size:13px;font-weight:700}

/* 六大优势三列卡 */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px 22px}
.fcard .ic{width:48px;height:48px;border-radius:12px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.fcard h3{font-size:15.5px;font-weight:800;margin-bottom:8px}
.fcard p{font-size:13px;color:var(--neutral);line-height:1.6}

/* 浅色区块（替代线上 dark-sec） */
.soft-sec{background:var(--tint)}

@media(max-width:1000px){.tcards{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .login-grid{grid-template-columns:1fr}
  .zhero h1{font-size:30px}
  .zhero .mini>div{border-right:none;margin-right:0;padding-right:0}
  .cmp-table{font-size:12.5px;display:block;overflow-x:auto}
  .grad-card{padding:30px 24px}
  .vt-step{padding-left:26px}
  .vt-step::before{left:-15px;width:26px;height:26px;font-size:12px}
  .tcards{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}
/* 非洲快仓 — 三主题配色系统
   主题A（默认）：深海蓝 Deep Navy —— 国际贸易 / 物流的商务信任感
   主题B：非洲墨绿 Emerald —— 呼应品牌 logo 绿色，高级且贴合非洲意象
   主题C：天蓝灰 Sky Blue + Gray ——  screenshot 提取的天蓝 #4098F8 + 高级石墨灰
   通过 html[data-theme] 切换，页脚提供切换按钮，localStorage 记忆 */
:root{
  /* 主题A：深海蓝 */
  --primary:#1A4E8A;
  --primary-dark:#123A6B;
  --primary-soft:#EAF1F9;
  --ink:#0F1B2D;
  --neutral:#5B6675;
  --bg:#FFFFFF;
  --tint:#F7F9FB;
  --line:#E5E9EF;
  /* 深色区块（band / footer / topbar 内） */
  --band-card:#1C2C49;
  --band-card-hi:#243757;
  --band-line:#2E4064;
  --band-muted:#A6B1C2;
  --band-dim:#6E7A8A;
  --cta-soft:#D3E2F5;
  --primary-a10:rgba(26,78,138,.10);
  --primary-a25:rgba(26,78,138,.25);
  --radius:10px;
}
/* 主题B：非洲墨绿 */
html[data-theme="forest"]{
  --primary:#15654C;
  --primary-dark:#0E4A37;
  --primary-soft:#E7F2ED;
  --ink:#101B16;
  --neutral:#5C6862;
  --bg:#FFFFFF;
  --tint:#F6F9F7;
  --line:#E4EAE6;
  --band-card:#1B2E24;
  --band-card-hi:#23392D;
  --band-line:#2F4A3A;
  --band-muted:#A8B5AD;
  --band-dim:#74817A;
  --cta-soft:#D2EADC;
  --primary-a10:rgba(21,101,76,.10);
  --primary-a25:rgba(21,101,76,.25);
}
/* 主题C：天蓝灰（#4098F8 天蓝 + 高级石墨灰） */
html[data-theme="sky"]{
  --primary:#4098F8;
  --primary-dark:#2B6FC8;
  --primary-soft:#EAF4FE;
  --ink:#1E252D;
  --neutral:#5E6875;
  --bg:#FFFFFF;
  --tint:#F6F8FA;
  --line:#E2E7EE;
  --band-card:#2C343E;
  --band-card-hi:#37424D;
  --band-line:#4A5663;
  --band-muted:#A8B3BE;
  --band-dim:#7D8996;
  --cta-soft:#D6E8FC;
  --primary-a10:rgba(64,152,248,.10);
  --primary-a25:rgba(64,152,248,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{text-decoration:none}

/* ===== topbar（南非国旗深绿 + 金色描边）===== */
.topbar{background:#0A3B25;color:#CFE3D6;font-size:12.5px;border-bottom:2px solid #FFB81C}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;padding-left:106px}
.topbar b{color:#FFB81C;font-weight:600}
.lang-switch{display:flex;gap:6px}
.lang-switch button{background:transparent;border:1px solid var(--band-line);color:#fff;padding:3px 12px;border-radius:20px;font-size:12px;cursor:pointer}
.lang-switch button.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.login-link{color:#fff;border:1px solid var(--band-line);padding:3px 14px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.login-link:hover{border-color:var(--primary);color:var(--primary)}

/* ===== 南非国旗五色角标（左上角，demo4 风格）===== */
.sa-corner{position:absolute;top:0;left:0;width:96px;height:96px;z-index:50;pointer-events:none;
background:linear-gradient(135deg,#E03C31 0 24%,#FFB81C 24% 45%,#007749 45% 66%,#001489 66% 85%,#14161A 85% 100%);
clip-path:polygon(0 0,100% 0,0 100%)}
@media(max-width:700px){.sa-corner{width:60px;height:60px}.topbar .wrap{padding-left:68px}}

/* ===== nav ===== */
nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:74px;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;white-space:nowrap}
/* 预留固定宽高盒子，避免 logo 图片加载前宽度为 0 导致菜单左右抖动(CLS)；object-fit 保证任意比例不拉伸变形 */
.logo img{height:46px;width:160px;object-fit:contain;object-position:left center;display:block}
.menu-btn{display:none;background:#fff;border:1.5px solid var(--line);border-radius:8px;font-size:18px;line-height:1;padding:9px 13px;cursor:pointer;color:var(--ink)}
.menu-btn:hover{border-color:var(--primary);color:var(--primary)}
.logo .sub{font-size:11px;color:var(--neutral);font-weight:600;letter-spacing:.5px}

/* 主导航：胶囊悬浮，无下划线 */
.nav-links{display:flex;gap:8px;font-size:14px;align-items:center;flex:1;justify-content:center;height:74px;letter-spacing:.2px}
.nav-links > a,.nav-trigger{
  display:inline-flex;align-items:center;height:40px;
  padding:0 16px;border-radius:10px;font-weight:700;color:var(--ink);
  white-space:nowrap;transition:background .2s,color .2s;cursor:pointer
}
.nav-links > a:hover,.nav-drop:hover .nav-trigger,.nav-trigger:hover{background:var(--primary-soft);color:var(--primary)}
.nav-trigger{gap:6px}
.nav-trigger > a{color:inherit;font-weight:inherit;padding:0;margin:0;height:auto;display:inline;background:transparent}
.nav-trigger > a:hover{color:inherit}

.nav-drop{position:relative;display:inline-flex;align-items:center;height:74px}
.nav-drop .caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .25s}
.nav-drop:hover .caret{transform:rotate(180deg);opacity:1}

/* EN/ZU 导航天然比中文长，桌面端统一略微压缩 */
body.lang-en .nav-links,body.lang-zu .nav-links{font-size:12.5px;gap:6px}
body.lang-en .nav-links > a,body.lang-en .nav-trigger,body.lang-zu .nav-links > a,body.lang-zu .nav-trigger{padding:0 12px}
body.lang-en .nav-cta,body.lang-zu .nav-cta{padding:10px 20px;font-size:13px}

/* 小屏桌面端（901-1160px）EN/ZU 进一步压缩，避免顶导航溢出 */
@media(min-width:901px) and (max-width:1160px){
  body.lang-en .nav-links,body.lang-zu .nav-links{font-size:11.5px;gap:5px}
  body.lang-en .nav-links > a,body.lang-en .nav-trigger,body.lang-zu .nav-links > a,body.lang-zu .nav-trigger{padding:0 9px}
  body.lang-en .nav-drop .caret,body.lang-zu .nav-drop .caret{border-top-width:4px}
  body.lang-en .nav-cta,body.lang-zu .nav-cta{padding:8px 14px;font-size:11.5px}
}

/* Zulu 专属：中宽屏（1161-1320px）再压一档，导航绝不超出边界 */
@media(min-width:1161px) and (max-width:1320px){
  body.lang-zu .nav-links{font-size:11.5px;gap:5px}
  body.lang-zu .nav-links > a,body.lang-zu .nav-trigger{padding:0 10px}
  body.lang-zu .nav-cta{padding:9px 16px;font-size:12px}
}

.drop-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 56px rgba(35,39,46,.14);padding:10px;min-width:252px;display:none;flex-direction:column;z-index:90}
/* 透明桥：鼠标从 trigger 移到菜单时不丢失 hover */
.nav-drop::before{content:"";position:absolute;top:100%;left:0;width:100%;height:10px;background:transparent}
.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{display:flex}
.drop-menu a{display:block;padding:12px 18px;font-size:14px;color:var(--ink);font-weight:600;border-radius:8px;white-space:nowrap;text-align:left;transition:padding .2s,background .2s,color .2s}
.drop-menu a:hover{background:var(--primary-soft);color:var(--primary);padding-left:24px}
.drop-menu a.zone-home{color:var(--primary);font-weight:700;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:6px}

/* ===== page hero (subpages) ===== */
.phero{background:linear-gradient(180deg,var(--primary-soft) 0%,#fff 100%);padding:72px 0 60px;border-bottom:1px solid var(--line)}
.phero .kicker{color:var(--primary);font-size:13px;font-weight:800;letter-spacing:2px;margin-bottom:16px;text-transform:uppercase}
.phero h1{font-size:42px;line-height:1.25;font-weight:800;letter-spacing:-.5px;max-width:820px;margin:0}
.phero h1 em{font-style:normal;color:var(--primary);display:block}
/* 居中版 phero：标题/副文案整体居中（修复首屏错位） */
.phero .wrap[style*="text-align:center"] h1,
.phero .wrap[style*="text-align:center"] p{margin-left:auto;margin-right:auto}
.phero p{margin:22px 0 32px;font-size:17px;color:var(--neutral);max-width:680px}
.btn-primary{background:var(--primary);color:#fff;padding:14px 32px;border-radius:8px;font-weight:700;font-size:15px;display:inline-block}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);padding:14px 32px;border-radius:8px;font-weight:600;font-size:15px;display:inline-block}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ===== sections ===== */
section{padding:72px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-tag{display:inline-block;color:var(--primary);font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.sec-tag.line{border:1.5px solid var(--primary);border-radius:20px;padding:3px 14px}
h2.sec-title{font-size:32px;font-weight:800;line-height:1.3;letter-spacing:-.3px}
.sec-sub{color:var(--neutral);font-size:16px;margin-top:12px;max-width:640px}

/* card grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.2s}
.card:hover{border-color:var(--primary);background:#fff;box-shadow:0 10px 26px var(--primary-a10)}
.card .cicon{width:46px;height:46px;border-radius:10px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.card p{font-size:13.5px;color:var(--neutral)}
.card .more{display:inline-block;margin-top:14px;color:var(--primary);font-weight:700;font-size:13.5px}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps.st3{grid-template-columns:repeat(3,1fr)}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;border-top:4px solid var(--primary)}
.step .snum{font-size:30px;font-weight:900;color:var(--primary);opacity:.3;line-height:1;margin-bottom:10px}
.step h3{font-size:16.5px;font-weight:700;margin-bottom:8px}
.step p{font-size:13px;color:var(--neutral)}

/* checklist row */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:8px}
.checklist li{list-style:none;font-size:15px;padding:8px 0 8px 30px;position:relative;border-bottom:1px dashed var(--line)}
.checklist li::before{content:"✓";position:absolute;left:0;top:8px;width:20px;height:20px;background:var(--primary);color:#fff;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800}

/* dark band */
.band{background:var(--ink);color:#fff;border-bottom:none}
.band .sec-tag{color:var(--primary)}
.band h2{color:#fff}
.band .sec-sub{color:var(--band-muted)}
.band .card{background:var(--band-card);border-color:var(--band-line)}
.band .card:hover{background:var(--band-card-hi);border-color:var(--primary)}
.band .card h3{color:#fff}
.band .card p{color:var(--band-muted)}
.band .step{background:var(--band-card);border-color:var(--band-line);border-top-color:var(--primary)}
.band .step h3{color:#fff}
.band .step p{color:var(--band-muted)}

/* home hero */
.hero{padding:88px 0 70px;background:linear-gradient(180deg,var(--primary-soft) 0%,#fff 100%)}
.hero .kicker{color:var(--primary);font-size:14px;font-weight:800;letter-spacing:2px;margin-bottom:18px;text-transform:uppercase}
.hero h1{font-size:52px;line-height:1.2;font-weight:800;letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero p{margin:24px 0 34px;font-size:18px;color:var(--neutral);max-width:660px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;margin-top:56px;border-top:1px solid var(--line)}
.hero-stats>div{flex:1;padding:22px 26px 0;border-left:1px solid var(--line)}
.hero-stats>div:first-child{border-left:none;padding-left:0}
.hero-stats .num{font-size:30px;font-weight:900}
.hero-stats .lbl{font-size:13px;color:var(--neutral);margin-top:4px}

/* home category cards */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative;transition:.2s}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(35,39,46,.10);border-color:var(--primary)}
.cat-card .cat-badge{position:absolute;top:16px;right:16px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px}
.cat-card .cicon{width:50px;height:50px;border-radius:12px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:16px}
.cat-card h3{font-size:17.5px;font-weight:700}
.cat-card .cen{font-size:11.5px;color:var(--neutral);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin:2px 0 12px}
.cat-card p{font-size:13px;color:var(--neutral);min-height:84px}

/* partner cards */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.partner-card{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;border-top:4px solid var(--primary)}
.partner-card .picon{font-size:28px;margin-bottom:14px}
.partner-card h3{font-size:19px;font-weight:700}
.partner-card .pen{font-size:11px;color:var(--neutral);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin:2px 0 14px}
.partner-card p{font-size:13.5px;color:var(--neutral);margin-bottom:12px}
.partner-card ul{list-style:none;margin-bottom:16px}
.partner-card li{font-size:13.5px;padding:5px 0 5px 22px;position:relative}
.partner-card li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.partner-card .more{color:var(--primary);font-weight:700;font-size:14px}

/* services grid (home) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* FAQ */
.faq{max-width:760px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;background:#fff}
.faq-item .q{font-size:16px;font-weight:700;padding:18px 22px;color:var(--ink)}
.faq-item .a{font-size:14.5px;color:var(--neutral);padding:0 22px 18px}

/* CTA */
.cta-band{background:var(--primary);color:#fff;text-align:center;padding:64px 24px}
.cta-band h2{font-size:30px;font-weight:800}
.cta-band p{margin:14px 0 30px;font-size:16px;color:var(--cta-soft)}
.cta-band .btn-white{background:#fff;color:var(--primary-dark);padding:14px 34px;border-radius:8px;font-weight:800;font-size:15px;display:inline-block}
.cta-band .btn-outline{border:1.5px solid rgba(255,255,255,.7);color:#fff;padding:14px 34px;border-radius:8px;font-weight:600;font-size:15px;display:inline-block;margin-left:12px}

/* ===== 三语切换（data-lang）：中文 / 英文 / 祖鲁语 ===== */
/* 默认隐藏所有 data-lang 文案，仅显示与当前 body 语言类匹配的一份 */
[data-lang]{display:none}
body.lang-zh [data-lang="zh"],
body.lang-en [data-lang="en"],
body.lang-zu [data-lang="zu"]{display:revert}
/* 兜底：body 未带任何 lang 类时（如 JS 未执行）默认显示中文，避免整页空白 */
body:not(.lang-zh):not(.lang-en):not(.lang-zu) [data-lang="zh"]{display:revert}

/* ===== v3：新版底部（南非国旗深蓝 + 金色点缀） ===== */
footer{background:#0A1B3D;color:var(--band-muted);padding:52px 0 0;font-size:13.5px;position:relative;overflow:hidden}
footer .wrap{display:block}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr 1.1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--band-line)}
.footer-grid .ft-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;color:#fff;margin-bottom:14px}
.footer-grid .ft-logo .mark{width:32px;height:32px;background:var(--primary);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.footer-grid .ft-logo .sub{font-size:10.5px;color:var(--band-muted);font-weight:600;letter-spacing:.5px}
.footer-grid p.ft-brief{max-width:280px;font-size:13.5px;line-height:1.7;margin-top:6px}
.footer-grid h5{color:#FFB81C;font-size:13.5px;font-weight:700;margin-bottom:14px;letter-spacing:.5px}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:9px}
.footer-grid li a{color:var(--band-muted);font-size:13px}
.footer-grid li a:hover{color:#FFB81C}
.footer-grid li.plain{color:var(--band-muted);font-size:13px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:18px 112px 18px 0;font-size:12.5px;color:var(--band-dim)}

/* ===== 南非国旗五色角标（右下角，与左上角呼应）===== */
.sa-corner-br{position:absolute;right:0;bottom:0;width:96px;height:96px;z-index:5;pointer-events:none;
background:linear-gradient(45deg,#14161A 0 15%,#001489 15% 34%,#007749 34% 53%,#FFB81C 53% 72%,#E03C31 72% 100%);
clip-path:polygon(100% 0,100% 100%,0 100%)}
@media(max-width:700px){.sa-corner-br{display:none}.footer-bottom{padding-right:0}}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}.footer-bottom{justify-content:center;text-align:center}}

/* ===== 浮动 WhatsApp ===== */
.float-whatsapp{position:fixed;bottom:24px;right:24px;z-index:60;background:#25D366;color:#fff;border-radius:50px;padding:12px 20px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-decoration:none}
.float-whatsapp:hover{background:#128C7E}
.float-whatsapp svg{width:22px;height:22px;fill:#fff}

/* ===== 页脚配色切换器（三主题：深海蓝 navy / 墨绿 forest / 天蓝 sky）=====
   说明：主题色变量由 :root 与 html[data-theme="..."] 定义（见本文件上方），
   切换器仅负责展示按钮与写入 localStorage(ak-theme)，逻辑见 site.js / theme_init.js */
.theme-switch{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.theme-switch .ts-label{font-size:12px;color:var(--band-dim);font-weight:600;letter-spacing:.5px}
.theme-switch button{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1.5px solid var(--band-line);color:var(--band-muted);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;cursor:pointer;transition:.2s;font-family:inherit}
.theme-switch button:hover{border-color:var(--primary);color:#fff}
.theme-switch button.active{border-color:var(--primary);color:#fff;background:rgba(255,255,255,.07)}
.theme-switch .sw{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.sw-navy{background:#1A4E8A}
.sw-forest{background:#15654C}
.sw-sky{background:linear-gradient(135deg,#4098F8 0%,#5A7A94 100%)}
@media(max-width:560px){.theme-switch{width:100%;justify-content:center}}

/* ===== zone bars (horizontal secondary nav) ===== */
.zone-bar{background:var(--primary-soft);border-bottom:1px solid var(--line)}
.zone-bar .wrap{display:flex;align-items:center;gap:22px;height:52px;overflow-x:auto}
.zone-label{color:var(--primary);font-weight:800;font-size:13px;letter-spacing:1px;white-space:nowrap;text-transform:uppercase}
.zone-links{display:flex;gap:20px;font-size:13px;white-space:nowrap}
.zone-links a{color:var(--neutral);font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.zone-links a.active{color:var(--primary);border-bottom-color:var(--primary)}
.zone-links a:hover{color:var(--primary)}

/* ===== logo / image helpers ===== */
.logo-img{height:42px;width:auto;object-fit:contain;display:block}
.partner-logo{height:48px;width:auto;object-fit:contain;display:block;margin:0 auto 12px}
.platform-shot{width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(35,39,46,.08)}
.gov-logo{height:56px;width:auto;object-fit:contain;display:block;margin-bottom:14px}

/* ===== link cards ===== */
.doc-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:.2s}
.doc-card:hover{border-color:var(--primary);box-shadow:var(--primary-a10)}
.doc-card h3{font-size:18px;font-weight:800}
.doc-card p{font-size:13.5px;color:var(--neutral);line-height:1.7;flex:1}

@media(max-width:900px){
  .hero h1,.phero h1{font-size:32px}
  .grid2,.grid3,.grid4,.cat-grid,.partner-grid,.svc-grid{grid-template-columns:1fr}
  .steps,.steps.st3{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap}
  .hero-stats>div{min-width:45%;padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:16px}
  .nav-links{display:none}
  .checklist{grid-template-columns:1fr}
  .cta-band .btn-outline{margin-left:0;margin-top:12px}
}

/* ===== mobile nav menu ===== */
@media(max-width:900px){
  .menu-btn{display:block;order:3}
  nav .wrap{height:auto;min-height:66px;padding:11px 0;flex-wrap:wrap;gap:10px}
  .logo{order:1}
  .nav-cta{order:2;margin-left:auto}
  .nav-links{order:4;display:none;flex-direction:column;align-items:stretch;gap:0;height:auto;width:100%;flex-basis:100%;border-top:1px solid var(--line);margin-top:4px}
  .nav-drop.active .drop-menu{display:flex}
  body.menu-open .nav-links{display:flex}
  .nav-links>a,.nav-trigger{height:auto;width:100%;border-radius:0;padding:13px 4px;border-bottom:1px solid var(--line);justify-content:flex-start;background:transparent}
  .nav-trigger > a{padding:0;height:auto}
  .nav-drop{height:auto;width:100%;display:flex;align-items:center;flex-wrap:wrap}
  .nav-drop .caret{margin-left:auto;margin-right:6px;flex:none}
  .nav-drop.active .caret{transform:rotate(180deg)}
  .drop-menu{position:static;transform:none;box-shadow:none;border:none;border-top:none;border-radius:0;min-width:0;width:100%;padding:0 0 8px 18px;display:none}
  .nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{display:flex}
  .drop-menu a{border-bottom:none;padding:11px 4px}
  .drop-menu a:hover{padding-left:10px}
  .drop-menu a.zone-home{border-bottom:none;margin-bottom:0}
}

/* EN/ZU 在中等屏幕（901-1160px）也切为汉堡菜单，避免顶导航文字溢出 */
@media(max-width:1160px){
  body.lang-en .menu-btn,body.lang-zu .menu-btn{display:block;order:3}
  body.lang-en nav .wrap,body.lang-zu nav .wrap{height:auto;min-height:66px;padding:11px 0;flex-wrap:wrap;gap:10px}
  body.lang-en .logo,body.lang-zu .logo{order:1}
  body.lang-en .nav-cta,body.lang-zu .nav-cta{order:2;margin-left:auto}
  body.lang-en .nav-links,body.lang-zu .nav-links{order:4;display:none;flex-direction:column;align-items:stretch;gap:0;height:auto;width:100%;flex-basis:100%;border-top:1px solid var(--line);margin-top:4px}
  body.lang-en.menu-open .nav-links,body.lang-zu.menu-open .nav-links{display:flex}
  body.lang-en .nav-links>a,body.lang-en .nav-trigger,body.lang-zu .nav-links>a,body.lang-zu .nav-trigger{height:auto;width:100%;border-radius:0;padding:13px 4px;border-bottom:1px solid var(--line);justify-content:flex-start;background:transparent}
  body.lang-en .nav-trigger>a,body.lang-zu .nav-trigger>a{padding:0;height:auto}
  body.lang-en .nav-drop,body.lang-zu .nav-drop{height:auto;width:100%;display:flex;align-items:center;flex-wrap:wrap}
  body.lang-en .nav-drop .caret,body.lang-zu .nav-drop .caret{margin-left:auto;margin-right:6px;flex:none}
  body.lang-en .nav-drop.active .caret,body.lang-zu .nav-drop.active .caret{transform:rotate(180deg)}
  body.lang-en .drop-menu,body.lang-zu .drop-menu{position:static;transform:none;box-shadow:none;border:none;border-top:none;border-radius:0;min-width:0;width:100%;padding:0 0 8px 18px;display:none}
  body.lang-en .nav-drop.active .drop-menu,body.lang-zu .nav-drop.active .drop-menu{display:flex}
  body.lang-en .nav-drop:hover .drop-menu,body.lang-en .nav-drop:focus-within .drop-menu,body.lang-zu .nav-drop:hover .drop-menu,body.lang-zu .nav-drop:focus-within .drop-menu{display:none}
  body.lang-en .nav-drop::before,body.lang-zu .nav-drop::before{display:none}
}

/* 超小屏手机：EN/ZU 顶部 CTA 和 logo 再压缩，避免顶栏一行溢出 */
@media(max-width:420px){
  body.lang-en .nav-cta,body.lang-zu .nav-cta{padding:8px 10px;font-size:11px}
  body.lang-en .logo img,body.lang-zu .logo img{height:38px}
}

/* ===== homepage hero texture & quick stats ===== */
.hero-photo{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 55%,#fff 100%),url('assets/img/new/hero-bg.jpg');background-size:cover;background-position:center 40%}
.quickstats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.quickstats .qs-num{font-size:28px;font-weight:900;color:var(--primary)}
.quickstats .qs-lbl{font-size:13px;color:var(--neutral);margin-top:4px}
@media(max-width:700px){.quickstats{grid-template-columns:repeat(2,1fr);gap:24px 12px}}

/* ===== responsive photo gallery ===== */
.photo-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-grid3-mt{margin-top:30px}
@media(max-width:700px){.photo-grid3{grid-template-columns:1fr}}

/* ===== nav login CTA ===== */
/* 提升优先级以压过移动端 .nav-links>a{background:transparent}，确保登录按钮始终保持深蓝实心底色 */
.nav-links > a.nav-cta{background:var(--primary);color:#fff !important;padding:10px 24px;border-radius:8px;font-weight:700;font-size:14.5px;letter-spacing:.3px;box-shadow:0 4px 14px var(--primary-a25);transition:.2s;white-space:nowrap}
.nav-cta{background:var(--primary);color:#fff !important;padding:10px 24px;border-radius:8px;font-weight:700;font-size:14.5px;letter-spacing:.3px;box-shadow:0 4px 14px var(--primary-a25);transition:.2s;white-space:nowrap}
/* 提升优先级以压过 .nav-links > a:hover（hover 时背景必须是 primary-dark 深蓝，否则白字贴在 primary-soft 浅蓝上会“变白”看不见） */
.nav-links > a.nav-cta:hover{background:var(--primary-dark);box-shadow:0 6px 18px var(--primary-a25)}
.nav-cta:hover{background:var(--primary-dark);box-shadow:0 6px 18px var(--primary-a25)}

/* ===== zone hero（Takealot / Makro 专区首屏） ===== */
.zhero{padding:72px 0 60px;background:linear-gradient(180deg,var(--primary-soft) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.zhero .tag,.hero .tag{display:inline-block;color:var(--primary);font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}
.zhero h1{font-size:40px;line-height:1.3;font-weight:800;letter-spacing:-.5px;max-width:880px}
.zhero .lead,.hero .lead{margin:20px 0 30px;font-size:17px;color:var(--neutral);max-width:700px;line-height:1.75}
.zhero .mini{display:flex;gap:40px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.zhero .mini div{display:flex;flex-direction:column}
.zhero .mini b{font-size:26px;font-weight:900;color:var(--primary);line-height:1.2}
.zhero .mini span{font-size:13px;color:var(--neutral);margin-top:2px}
.grad-word{color:var(--primary)}
@media(max-width:900px){.zhero h1{font-size:30px}.zhero .mini{gap:26px}}

/* ===== 首页透明定价条 ===== */
.trust-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.trust-strip>div{flex:1;min-width:180px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:8px;padding:14px 18px;font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px}
.trust-strip .ts-ico{width:22px;height:22px;flex:none;background:var(--primary);color:#fff;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800}
@media(max-width:700px){.trust-strip>div{min-width:100%}}

/* ===== 移动端 hero-stats 优化 ===== */
@media(max-width:700px){
  .hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px;border-top:1px solid var(--line)}
  .hero-stats>div{border-left:none;border-top:none;padding:10px 4px 0;min-width:0}
}

/* ===== 销售网络页：渠道选择（修复首屏排版） ===== */
.tab-bar{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.tab-bar a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:15px;padding:13px 30px;border-radius:10px;transition:.2s}
.tab-bar a:hover{border-color:var(--primary);color:var(--primary);box-shadow:0 8px 22px var(--primary-a10)}
.tab-bar .arr{color:var(--primary);font-weight:800}
.channel-choice{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.choice-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:44px 36px;text-align:center;transition:.2s}
.choice-card:hover{border-color:var(--primary);box-shadow:0 14px 34px var(--primary-a10);transform:translateY(-3px)}
.choice-card .cicon{font-size:42px;line-height:1;margin-bottom:16px}
.choice-card h3{font-size:22px;font-weight:800;margin-bottom:12px}
.choice-card p{font-size:14.5px;color:var(--neutral);max-width:420px;margin:0 auto 24px}
@media(max-width:700px){.channel-choice{grid-template-columns:1fr}}

/* ===== 页脚主题切换器 ===== */
.theme-switch{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.theme-switch .ts-label{font-size:12px;color:var(--band-dim);font-weight:600;letter-spacing:.5px}
.theme-switch button{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1.5px solid var(--band-line);color:var(--band-muted);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;cursor:pointer;transition:.2s;font-family:inherit}
.theme-switch button:hover{border-color:var(--primary);color:#fff}
.theme-switch button.active{border-color:var(--primary);color:#fff;background:rgba(255,255,255,.07)}
.theme-switch .sw{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.sw-navy{background:#1A4E8A}
.sw-forest{background:#15654C}
.sw-sky{background:linear-gradient(135deg,#4098F8 0%,#5A7A94 100%)}
@media(max-width:560px){.theme-switch{width:100%;justify-content:center}}


/* 页脚官方 logo 反白（深色页脚背景上显示为白色） */
.ft-logo-img{filter:brightness(0) invert(1);}