:root{
  --bg:#06111f;--panel:#0d2036;--panel2:#102942;--line:#2d5678;
  --text:#eef6ff;--muted:#9fb5c9;--cyan:#67d0ff;--green:#67e2a7;
  --gold:#ffd27d;--orange:#ffb55e;--violet:#b68cff;--red:#ff8585;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#061120,#07111f 26%,#09182a);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:var(--cyan);text-decoration:none}
.smartafrica-global-nav{position:sticky;top:0;z-index:9999;display:flex;align-items:center;gap:16px;min-height:58px;padding:10px 26px;background:rgba(6,17,31,.985);border-bottom:1px solid #294764}
.smartafrica-global-nav .brand{margin-right:auto;font-weight:800;line-height:1.1}.smartafrica-global-nav .brand small{display:block;font-size:10px;font-weight:500;color:#9fb4ca}
.smartafrica-global-nav a{color:#c8d7e7;font-size:12px;padding:8px 3px;border-bottom:2px solid transparent}
.smartafrica-global-nav a.active{color:#fff;font-weight:800;border-bottom-color:var(--cyan)}
.page{max-width:1500px;margin:auto;padding:32px 26px 58px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}
.panel,.card{background:linear-gradient(180deg,var(--panel),#0a1a2c);border:1px solid var(--line);border-radius:16px;padding:18px}
h1{font-size:39px;line-height:1.08;margin:0 0 12px}h2{font-size:23px;margin:0 0 12px}h3{font-size:16px;margin:0 0 8px}
p{line-height:1.62;color:#dce9f5}.muted{color:var(--muted)}
.kicker{display:inline-block;padding:6px 11px;border-radius:999px;background:#102944;border:1px solid #2f6084;color:#9fe0ff;font-size:11px;font-weight:800;margin-bottom:12px;letter-spacing:.05em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}
.card-link{display:block;color:inherit}.card-link:hover{border-color:#67d0ff;transform:translateY(-2px)}
.card-link .go{margin-top:10px;font-size:11px;color:#67d0ff}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}
.ok{background:#123928;color:#7ce0ad}.info{background:#173853;color:#8fd3ff}.warn{background:#432f14;color:#ffd08c}.violet{background:#2d2450;color:#cab6ff}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #3c6788;background:#0e2842;color:white;font-size:12px;font-weight:800;margin-right:8px}.btn.primary{background:#167dc1;border-color:#2896d8}.btn:hover{filter:brightness(1.08)}
.arch{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.arch .node{background:#091b2e;border:1px solid #315571;border-radius:13px;padding:14px;min-height:102px}.arch b{display:block;margin-bottom:6px}.arch span{font-size:11px;color:#9fb4ca}
.callout{padding:14px;border:1px solid #355a7b;border-radius:12px;background:#0b1e34;line-height:1.6}
.code{background:#04101c;border:1px solid #274762;border-radius:12px;padding:14px;overflow:auto;white-space:pre-wrap;font-family:Consolas,monospace;font-size:11px;color:#d9ebf7;min-height:180px}
table{width:100%;border-collapse:collapse;background:#0a1b2f}th,td{padding:10px 11px;border-bottom:1px solid #27445e;text-align:left;font-size:12px;vertical-align:top}th{background:#112741;color:#c7d8e8}
.sim-shell{display:grid;grid-template-columns:320px 1fr;gap:14px}
.controls label{display:block;font-size:11px;color:#9fb4ca;margin:12px 0 5px}.controls select{width:100%;padding:10px;border-radius:9px;background:#081827;color:white;border:1px solid #315571}
.controls button{width:100%;margin-top:12px;padding:11px;border-radius:10px;border:1px solid #3183b7;background:#167dc1;color:white;font-weight:800;cursor:pointer}.controls button.secondary{background:#0b2338}
.flow{display:flex;gap:10px;align-items:stretch;overflow:auto;padding-bottom:4px}.flow-node{min-width:135px;background:#081827;border:1px solid #315571;border-radius:12px;padding:13px;transition:.25s ease}.flow-node b{font-size:12px;display:block}.flow-node span{display:block;font-size:10px;color:#8fa7ba;margin-top:5px}.flow-node.active{border-color:#67d0ff;box-shadow:0 0 0 2px rgba(103,208,255,.14),0 0 24px rgba(103,208,255,.18);transform:translateY(-3px)}.flow-node.done{border-color:#67e2a7;background:#0b2a25}
.timeline{height:4px;background:#18344c;border-radius:999px;margin:14px 0;overflow:hidden}.timeline>div{height:100%;width:0;background:linear-gradient(90deg,#67d0ff,#67e2a7);transition:width .35s ease}
.output-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.metric{background:#091b2e;border:1px solid #315571;border-radius:10px;padding:11px}.metric small{color:#8fa7ba}.metric b{display:block;font-size:19px;margin-top:4px}
.dev-steps{counter-reset:step}.dev-step{counter-increment:step;position:relative;padding-left:44px}.dev-step:before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:#173853;color:#8fd3ff;display:grid;place-items:center;font-weight:800}
.footer{margin-top:28px;color:#8fa7ba;font-size:11px}
@media(max-width:1100px){.hero,.sim-shell,.grid,.grid.two,.grid.four{grid-template-columns:1fr}.arch{grid-template-columns:repeat(2,1fr)}.output-grid{grid-template-columns:repeat(2,1fr)}.smartafrica-global-nav{flex-wrap:wrap}.smartafrica-global-nav .brand{width:100%;margin-right:0}}