*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
:root{
  --paper:#ffffff; --paper-2:#f7f8fb; --paper-3:#eef2f7;
  --navy:#0e2a47; --ink:#132c48; --mid:#586a83; --dim:#8b98ac;
  --line:#e8edf3; --line-2:#dbe2ec;
  --orange:#f6631f; --orange-2:#e5530f; --orange-tint:#ffede4;
  --c-hr:#1f6fe5; --c-hr-2:#1559c0; --c-hr-t:#e7f0ff;
  --c-cad:#c23c66; --c-cad-t:#fbeaf1;
  --c-tap:#12a06a; --c-tap-t:#e3f6ee;
  --sky:#dbe8ff; --mint:#d9f0e5; --peach:#ffe6d6;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --maxw:1200px;
}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.6}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}
.eyebrow{font-size:13px; font-weight:700; color:var(--orange); letter-spacing:.09em; text-transform:uppercase; margin:0 0 16px}
h1,h2,h3{font-weight:800; letter-spacing:-.028em; color:var(--navy); text-wrap:balance}

/* buttons */
.btn{font-family:var(--sans); font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:11px; cursor:pointer; border:1px solid transparent; transition:.15s; display:inline-flex; align-items:center; gap:8px}
.btn.solid{background:var(--orange); color:#fff} .btn.solid:hover{background:var(--orange-2)}
.btn.navy{background:var(--navy); color:#fff} .btn.navy:hover{background:#0a2038}
.btn.ghost{color:var(--navy); border-color:var(--line-2)} .btn.ghost:hover{border-color:var(--navy)}
.btn.white{background:#fff; color:var(--navy)} .btn.white:hover{background:var(--paper-2)}
.btn.lg{padding:15px 28px; font-size:15.5px}
.arrow{transition:transform .15s}
a:hover .arrow{transform:translateX(3px)}

/* nav */
nav{position:sticky; top:0; z-index:50; background:#fffffff2; backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.navrow{display:flex; align-items:center; height:76px; gap:32px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; color:var(--navy); letter-spacing:-.02em}
.brand .m{width:32px;height:32px;border-radius:9px; background:var(--navy); color:#fff; display:grid;place-items:center; font-weight:900; font-size:16px; position:relative}
.brand .m::after{content:""; position:absolute; right:5px; bottom:5px; width:7px;height:7px; background:var(--orange); border-radius:2px}
.brand span{color:var(--dim); font-weight:500}
.navlinks{display:flex; gap:26px; font-size:15px; color:var(--ink); font-weight:600; align-items:center}
.navlinks>a:hover{color:var(--orange)}
.navcta{margin-left:auto; display:flex; gap:12px; align-items:center}

/* dropdown */
.hasmenu{position:relative}
.menubtn{font:inherit; font-size:15px; font-weight:600; color:var(--ink); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0}
.menubtn:hover,.hasmenu:hover .menubtn{color:var(--orange)}
.menubtn .cv{transition:.2s; font-size:11px} .hasmenu:hover .menubtn .cv{transform:rotate(180deg)}
.menu{position:absolute; top:calc(100% + 16px); left:-18px; width:320px; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 54px -30px rgba(14,42,71,.35); padding:9px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s}
.menu.narrow{width:230px}
.hasmenu:hover .menu{opacity:1; visibility:visible; transform:none}
.menu::before{content:""; position:absolute; top:-16px; left:0; right:0; height:16px}
.menu a{display:flex; gap:13px; align-items:center; padding:11px 12px; border-radius:11px}
.menu a:hover{background:var(--paper-2)}
.menu .mi{width:38px;height:38px;border-radius:10px; display:grid;place-items:center; color:#fff; font-weight:800; font-size:13px; flex:0 0 auto}
.menu .mt b{display:block; font-weight:700; color:var(--ink); font-size:15px}
.menu .mt span{font-size:12.5px; color:var(--mid); font-weight:400}
.menu.narrow a{padding:10px 12px; font-weight:600; color:var(--ink); font-size:15px}
.bg-hr{background:var(--c-hr)} .bg-cad{background:var(--c-cad)} .bg-tap{background:var(--c-tap)}

/* hero */
header{padding:66px 0 76px; background:linear-gradient(180deg,#fff 0%, var(--paper-2) 100%)}
.hero{display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center}
h1{font-size:clamp(38px,5.2vw,60px); line-height:1.03; margin:0 0 22px}
.lead{font-size:clamp(17px,1.4vw,19.5px); color:var(--mid); max-width:52ch; margin:0 0 30px; line-height:1.6}
.cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.microtrust{margin-top:30px; display:flex; align-items:center; gap:13px; color:var(--mid); font-size:13.5px; font-weight:500}
.faces{display:flex}
.faces .f{width:32px;height:32px;border-radius:50%; border:2px solid #fff; margin-left:-9px; display:grid;place-items:center; color:#fff; font-size:12px; font-weight:700}
.faces .f:first-child{margin-left:0}

/* product frame (abstract UI preview) */
.hero-art{position:relative; height:430px}
.pframe{position:absolute; background:#fff; border:1px solid var(--line-2); border-radius:15px; overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(14,42,71,.42); --pc:var(--c-hr); --pt:var(--c-hr-t)}
.pframe .bar{height:30px; background:var(--paper-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 12px}
.pframe .bar i{width:9px;height:9px;border-radius:50%; background:var(--line-2)}
.pframe .bar i:first-child{background:#ff5f57}.pframe .bar i:nth-child(2){background:#febc2e}.pframe .bar i:nth-child(3){background:#28c840}
.pframe .bar .u{margin-left:auto; font-size:10px; color:var(--dim); font-weight:600}
.pbody{display:flex; height:calc(100% - 30px)}
.pside{width:34%; background:var(--pt); border-right:1px solid var(--line); padding:12px 10px; display:flex; flex-direction:column; gap:8px}
.pside .logo{height:9px; width:60%; background:var(--pc); border-radius:3px; margin-bottom:5px; opacity:.85}
.pside .nav{height:7px; width:80%; background:#ffffff; border-radius:3px}
.pside .nav.on{background:var(--pc); opacity:.55; width:88%}
.pmain{flex:1; padding:12px; display:flex; flex-direction:column; gap:9px}
.pmain .row{display:flex; gap:8px}
.tile{flex:1; background:var(--paper-2); border:1px solid var(--line); border-radius:9px; padding:8px}
.tile .k{height:6px; width:52%; background:var(--line-2); border-radius:3px; margin-bottom:7px}
.tile .v{height:12px; width:70%; background:var(--pc); border-radius:3px; opacity:.85}
.chart{flex:1; background:var(--paper-2); border:1px solid var(--line); border-radius:9px; padding:9px; display:flex; align-items:flex-end; gap:5px}
.chart b{flex:1; background:var(--pc); border-radius:3px 3px 0 0; opacity:.8}
.badge-pv{position:absolute; bottom:10px; right:10px; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 7px}
/* hero cluster placement */
.pf1{width:74%; height:290px; right:0; top:0; z-index:3; --pc:var(--c-hr); --pt:var(--c-hr-t)}
.pf2{width:56%; height:220px; left:0; bottom:34px; z-index:4; --pc:var(--c-tap); --pt:var(--c-tap-t)}
.pf3{width:40%; height:150px; right:8%; bottom:0; z-index:5; --pc:var(--c-cad); --pt:var(--c-cad-t)}

/* trust strip */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; padding:30px 0}
.trust .row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.trust b{display:block; font-size:34px; font-weight:800; color:var(--navy); letter-spacing:-.03em; line-height:1}
.trust b i{font-style:normal; color:var(--orange)}
.trust span{color:var(--mid); font-size:14px; font-weight:600; margin-top:8px; display:block}

section{padding:92px 0}
h2{font-size:clamp(29px,3.5vw,44px); line-height:1.08; margin:0 0 16px}
.ssub{color:var(--mid); font-size:17.5px; max-width:62ch; margin:0; line-height:1.62}
.center{text-align:center} .center .ssub{margin:0 auto}
.sechead{margin-bottom:44px}

/* products */
.pgrid{display:flex; flex-direction:column; gap:26px}
.pcard{display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:40px; transition:.2s}
.pcard:nth-child(even){grid-template-columns:1.05fr 1fr}
.pcard:nth-child(even) .pcopy{order:2}
.pcard:hover{box-shadow:0 30px 60px -38px rgba(14,42,71,.3); transform:translateY(-3px)}
.pcard .plabel, .prod-head .plabel{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:20px; color:var(--navy); margin-bottom:12px}
.pcard .plabel .dot, .prod-head .plabel .dot{width:30px;height:30px;border-radius:8px; display:grid;place-items:center; color:#fff; font-size:13px; font-weight:900}
.pcard .plabel .ptag, .prod-head .plabel .ptag{font-size:11.5px; font-weight:700; color:var(--pc); background:var(--paper-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 11px; letter-spacing:.01em; text-transform:uppercase}

/* Product hero blocks (screenshot-dominant) */
.prod{padding:70px 0; position:relative}
.prod.tint{background:var(--paper-2)}
.prod-head{max-width:640px; margin:0 auto 42px; text-align:center}
.prod-head .plabel{margin-bottom:14px}
.prod-head h3{font-size:33px; line-height:1.12; letter-spacing:-.02em; color:var(--navy); margin:0 0 12px; font-weight:800}
.prod-head > p{color:var(--mid); font-size:18px; line-height:1.55; margin:0 auto 22px; max-width:48ch}
.prod-cta{display:flex; flex-direction:column; align-items:center; gap:13px}
.prod-cta .livedom{margin-top:0}
.prod-shot{position:relative; max-width:1060px; margin:0 auto}
.prod-shot::before{content:""; position:absolute; left:6%; right:6%; top:14%; bottom:-7%; background:var(--pc); filter:blur(72px); opacity:.15; border-radius:999px; z-index:0}
.browser{position:relative; z-index:1; border-radius:16px; overflow:hidden; border:1px solid var(--line-2); background:#fff; box-shadow:0 50px 90px -46px rgba(14,42,71,.5), 0 16px 40px -26px rgba(14,42,71,.26)}
.browser .bbar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.browser .bbar i{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.browser .bbar i:nth-child(1){background:#ff5f57}
.browser .bbar i:nth-child(2){background:#febc2e}
.browser .bbar i:nth-child(3){background:#28c840}
.browser .burl{margin-left:12px; font-size:12.5px; font-weight:600; color:var(--mid); background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 15px; flex:1; max-width:300px}
.browser img{display:block; width:100%; height:auto}

/* Product experience workflow */
.workflow{display:flex; align-items:stretch; justify-content:center; gap:10px; flex-wrap:wrap; max-width:1000px; margin:0 auto 40px}
.wstep{flex:1; min-width:150px; background:var(--paper); border:1px solid var(--line-2); border-radius:14px; padding:20px 18px; box-shadow:0 12px 30px -22px rgba(14,42,71,.3)}
.wstep .wn{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--c-hr); background:var(--c-hr-t); border-radius:7px; padding:3px 9px; margin-bottom:12px}
.wstep b{display:block; color:var(--navy); font-size:18px; font-weight:800; margin-bottom:5px}
.wstep span:last-child{color:var(--mid); font-size:14px}
.warrow{display:flex; align-items:center; color:var(--dim); font-size:18px; font-weight:700}

.microtrust .mtick{color:var(--c-tap); flex:none}

/* Product fit router */
.fitlabel{text-align:center; color:var(--dim); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:38px 0 16px}
.fit{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.fitcard{display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--paper); border:1px solid var(--line-2); border-radius:14px; text-decoration:none; box-shadow:0 12px 30px -26px rgba(14,42,71,.3); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
.fitcard:hover{transform:translateY(-2px); border-color:var(--pc); box-shadow:0 20px 42px -28px rgba(14,42,71,.45)}
.fitcard .fq{color:var(--mid); font-size:14px; font-weight:600}
.fitcard .fa{display:flex; align-items:center; gap:9px; color:var(--navy); font-weight:800; font-size:17px}
.fitcard .fa .dot{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:900; flex:none}
.fitcard .fa .arrow{margin-left:auto; color:var(--pc); font-weight:700}
@media(max-width:900px){.fit{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fit{grid-template-columns:1fr}}

/* Built for Africa specifics */
.africaspecs{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 22px}
.africaspecs li{position:relative; padding-left:26px; color:var(--ink); font-size:15px; line-height:1.5; font-weight:600}
.africaspecs li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--c-tap); font-weight:900}
@media(max-width:560px){.africaspecs{grid-template-columns:1fr}}

/* Legal pages (privacy / terms) */
.legalnav{border-bottom:1px solid var(--line)}
.legalnav .navrow{display:flex; align-items:center; justify-content:space-between; gap:16px}
.legalnav .navcta{display:flex; align-items:center; gap:12px}
.legal-wrap{padding:60px 0 76px}
.legal{max-width:800px; margin:0 auto}
.legal h1{font-size:40px; line-height:1.08; letter-spacing:-.02em; color:var(--navy); margin:6px 0 8px; font-weight:800}
.legal .updated{color:var(--dim); font-size:14px; margin:0 0 20px}
.legal .intro{color:var(--mid); font-size:18px; line-height:1.62; margin:0 0 8px}
.legal h2{font-size:21px; color:var(--navy); margin:36px 0 10px; font-weight:800}
.legal h3{font-size:16.5px; color:var(--navy); margin:22px 0 6px; font-weight:700}
.legal p{color:var(--ink); font-size:16px; line-height:1.72; margin:0 0 14px}
.legal ul{margin:0 0 16px; padding-left:22px}
.legal li{color:var(--ink); font-size:16px; line-height:1.7; margin:0 0 8px}
.legal a{color:var(--orange); text-decoration:none; border-bottom:1px solid transparent}
.legal a:hover{border-bottom-color:currentColor}
@media(max-width:720px){.legal h1{font-size:30px}}

/* Custom software services */
.services-sec{padding:84px 0; background:var(--paper-2); border-top:1px solid var(--line)}
.svcgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px}
.svc{background:var(--paper); border:1px solid var(--line-2); border-radius:16px; padding:26px 22px; box-shadow:0 14px 34px -28px rgba(14,42,71,.35)}
.svc .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--orange-tint); color:var(--orange); margin-bottom:16px}
.svc b{display:block; color:var(--navy); font-size:16.5px; font-weight:800; margin-bottom:8px}
.svc p{color:var(--mid); font-size:14.5px; line-height:1.58; margin:0}
.svc-cta{text-align:center; margin-top:38px}
@media(max-width:900px){.svcgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svcgrid{grid-template-columns:1fr}}

@media(max-width:860px){
  .warrow{display:none}
  .wstep{min-width:calc(50% - 6px)}
}
@media(max-width:720px){
  .prod{padding:50px 0}
  .prod-head h3{font-size:25px}
  .prod-head > p{font-size:16px}
  .browser .burl{display:none}
}
.pcard h3{font-size:24px; margin:0 0 12px; line-height:1.18}
.pcard p{color:var(--mid); font-size:16px; margin:0 0 20px; line-height:1.62}
.pcard .go{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color:var(--pc)}
.livedom{display:flex; align-items:center; gap:9px; margin-top:15px; font-size:13px; font-weight:600; color:var(--mid)}
.livedom b{color:var(--navy); font-weight:800}
.livedom .ld{width:9px; height:9px; border-radius:50%; background:var(--c-tap); flex:none; box-shadow:0 0 0 0 rgba(18,160,106,.5); animation:livepulse 2.2s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(18,160,106,.5)} 70%{box-shadow:0 0 0 8px rgba(18,160,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,160,106,0)}}
@media(prefers-reduced-motion:reduce){.livedom .ld{animation:none}}
.pcard .pshot{position:relative; height:280px}
.pcard .pshot .pframe{position:absolute; inset:0; box-shadow:0 24px 50px -30px rgba(14,42,71,.32)}
/* real desktop screenshot frame */
.shot{position:absolute; inset:0; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 26px 52px -30px rgba(14,42,71,.36); background:#fff}
.shot .bar{height:30px; background:var(--paper-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 12px}
.shot .bar i{width:9px;height:9px;border-radius:50%; background:var(--line-2)}
.shot .bar i:first-child{background:#ff5f57}.shot .bar i:nth-child(2){background:#febc2e}.shot .bar i:nth-child(3){background:#28c840}
.shot .bar .u{margin-left:auto; font-size:10px; color:var(--dim); font-weight:600}
.shot img{width:100%; height:calc(100% - 30px); object-fit:cover; object-position:top left; display:block}
/* real mobile screenshot on a tinted panel */
.pshot.phone{display:grid; place-items:center; border-radius:18px; overflow:hidden}
.pshot.phone.tint-cad{background:var(--c-cad-t)} .pshot.phone.tint-tap{background:var(--c-tap-t)}
.device{width:186px; background:#fff; border-radius:24px; padding:7px; box-shadow:0 26px 50px -24px rgba(14,42,71,.42); border:1px solid var(--line-2)}
.device img{width:100%; border-radius:17px; display:block}
/* spotlight product card on a tinted panel */
.pshot.spot{display:grid; place-items:center; border-radius:18px; padding:20px; overflow:hidden}
.spotcard{background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 46px -24px rgba(14,42,71,.42); padding:13px 15px; width:min(70%, 268px)}
.spotcard img{width:100%; height:auto; border-radius:8px; display:block}
/* real app-dashboard screenshot, clean frame (no fake browser bar) */
.appshot{position:absolute; inset:0; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 26px 52px -30px rgba(14,42,71,.36); background:#fff}
.appshot img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block}
/* real screenshot filling a floating hero frame */
.pframe>.pshotimg{width:100%; height:calc(100% - 30px); object-fit:cover; object-position:top left; display:block}
.shot-tag{position:absolute; bottom:10px; right:10px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 7px}
.pc-hr{--pc:var(--c-hr)} .pc-cad{--pc:var(--c-cad)} .pc-tap{--pc:var(--c-tap)}

/* why */
.why{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px}
.principle{background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px}
.principle .n{font-size:14px; font-weight:800; color:var(--orange); letter-spacing:.06em}
.principle h3{font-size:21px; margin:16px 0 10px}
.principle p{color:var(--mid); font-size:15.5px; margin:0; line-height:1.6}

/* africa */
.africa{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center}
.africa .body p{color:var(--ink); font-size:17.5px; line-height:1.72; margin:0 0 18px}
.pill{display:inline-flex; align-items:center; gap:9px; background:var(--orange-tint); color:var(--orange-2); font-weight:800; font-size:15px; padding:11px 18px; border-radius:999px; margin-top:8px}
.localsupport{display:flex; gap:15px; align-items:flex-start; margin-top:24px; padding:20px 22px; background:var(--paper-2); border:1px solid var(--line-2); border-radius:16px}
.localsupport .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--orange-tint); color:var(--orange); flex:none}
.localsupport b{display:block; color:var(--navy); font-size:16.5px; font-weight:800; margin-bottom:5px}
.localsupport span{display:block; color:var(--mid); font-size:14.5px; line-height:1.58}
.africa .photo{border-radius:22px; overflow:hidden; aspect-ratio:5/4; background:var(--sky)}
.africa .photo img{width:100%; height:100%; object-fit:cover}

/* proof band */
.proof{background:var(--navy); color:#fff}
.proof h2{color:#fff}
.proof .ssub{color:#b9c6da}
.proof .row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px}
.proof .pbox{background:#123a5e; border:1px solid #1d4a72; border-radius:18px; padding:30px; text-align:left}
.proof .pbox b{display:block; font-size:40px; font-weight:800; letter-spacing:-.03em; color:#fff; line-height:1}
.proof .pbox b i{font-style:normal; color:#ffb27a}
.proof .pbox span{color:#a9bcd4; font-size:14.5px; font-weight:600; margin-top:12px; display:block}

/* founder */
.founder{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fgrid{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:center}
.fphoto{border-radius:22px; overflow:hidden; aspect-ratio:4/4.5; background:var(--peach)}
.fphoto img{width:100%; height:100%; object-fit:cover}
.fnote{font-size:clamp(22px,2.5vw,32px); font-weight:800; line-height:1.34; letter-spacing:-.02em; color:var(--navy); margin:22px 0 0; text-wrap:pretty}
.fnote .hl{color:var(--orange)}
.fsign{margin-top:26px}
.fsign .sig{font-family:Georgia,serif; font-style:italic; font-size:26px; color:var(--navy); display:block; line-height:1}
.fsign .frole{color:var(--mid); font-size:14.5px; font-weight:600; margin-top:8px; display:block}

/* mission */
.mvgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px}
.mvcard{border:1px solid var(--line); border-radius:20px; padding:36px; background:#fff}
.mvcard .ic{width:46px;height:46px;border-radius:12px; display:grid;place-items:center; margin-bottom:18px}
.mvcard .ic.o{background:var(--orange-tint); color:var(--orange)} .mvcard .ic.b{background:var(--c-hr-t); color:var(--c-hr-2)}
.mvcard h3{font-size:22px; margin:0 0 10px} .mvcard p{margin:0; color:var(--mid); font-size:16px; line-height:1.62}
.goals{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px}
.goal .g{font-size:14px; font-weight:800; color:var(--orange); display:flex; align-items:center; gap:10px}
.goal .g::after{content:""; flex:1; height:2px; background:var(--line)}
.goal b{display:block; color:var(--navy); font-size:18px; margin:12px 0 7px}
.goal span{color:var(--mid); font-size:14.5px; line-height:1.58}

/* team */
.team{background:var(--paper-2); border-top:1px solid var(--line)}
.lead-h{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap}
.tgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.tcard{background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; transition:.2s}
.tcard:hover{box-shadow:0 26px 50px -34px rgba(14,42,71,.24); transform:translateY(-3px)}
.tcard .av{width:70px;height:70px;border-radius:16px; overflow:hidden; margin-bottom:18px}
.tcard .av img{width:100%; height:100%; object-fit:cover}
.tcard b{display:block; font-size:17px; color:var(--navy); font-weight:800}
.tcard .role{color:var(--orange); font-size:12px; font-weight:700; margin-top:4px; text-transform:uppercase; letter-spacing:.05em}
.tcard .line{color:var(--mid); font-size:14px; margin-top:12px; line-height:1.5}

/* final CTA */
.finalcta{background:var(--navy); color:#fff; text-align:center}
.finalcta h2{color:#fff; max-width:20ch; margin:0 auto 18px}
.finalcta p{color:#b9c6da; font-size:18px; max-width:58ch; margin:0 auto 30px; line-height:1.6}
.finalcta .cta-row{justify-content:center}

/* contact */
.contact{background:var(--paper-2); border-top:1px solid var(--line)}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.cdet{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line-2)}
.cdet .k{font-size:13px; color:var(--mid); min-width:100px; font-weight:700; padding-top:2px}
.cdet a,.cdet .v{color:var(--navy); font-weight:600}
.cform{background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px}
.cform label{display:block; font-size:13px; font-weight:600; color:var(--mid); margin:0 0 7px}
.cform .fld{margin-bottom:15px}
.cform .two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.cform input,.cform textarea,.cform select{width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none; border-color:var(--orange); background:#fff; box-shadow:0 0 0 3px var(--orange-tint)}
.cform textarea{resize:vertical; min-height:104px}
.cform .btn.solid{width:100%; justify-content:center; margin-top:4px}

/* footer */
footer{background:var(--navy); color:#c3d0e2; padding:60px 0 32px}
.fcols{display:grid; grid-template-columns:1.8fr repeat(5,1fr); gap:26px; margin-bottom:42px}
.fcols .brand{color:#fff; grid-column:1} .fcols .brand span{color:#8ba0bd}
.fcols h4{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#7f92ae; margin:0 0 14px; font-weight:700}
.fcols a{display:block; color:#c3d0e2; font-size:14px; padding:5px 0} .fcols a:hover{color:#fff}
.ftag{max-width:34ch; font-size:14.5px; color:#a9b8ce; margin:14px 0 0}
.fbase{display:flex; justify-content:space-between; gap:12px; border-top:1px solid #23405f; padding-top:22px; font-size:13px; color:#8ba0bd; flex-wrap:wrap}

/* reveal */
.rev{opacity:0; transform:translateY(18px); transition:.7s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none} html{scroll-behavior:auto}}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr; gap:44px} .hero-art{height:360px; max-width:520px}
  .pcard,.pcard:nth-child(even){grid-template-columns:1fr; gap:28px}
  .pcard:nth-child(even) .pcopy{order:0}
  .africa,.fgrid,.cgrid{grid-template-columns:1fr; gap:34px}
  .principles,.trust .row,.proof .row,.tgrid{grid-template-columns:1fr 1fr}
  .mvgrid,.goals{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr; gap:24px} .fcols .brand{grid-column:1 / -1}
  .navlinks{display:none}
}
@media(max-width:560px){
  .trust .row,.proof .row,.tgrid,.principles,.cform .two{grid-template-columns:1fr}
  .hero-art{height:320px}
}

/* ===================== v2 additions ===================== */

/* floating hero motion */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pf1{animation:floaty 6s ease-in-out infinite}
.pf2{animation:floaty 7s ease-in-out infinite .5s}
.pf3{animation:floaty 5.5s ease-in-out infinite .9s}
@media(prefers-reduced-motion:reduce){.pf1,.pf2,.pf3{animation:none}}

/* mobile menu */
.menu-toggle{display:none; margin-left:auto; width:44px;height:44px; border:1px solid var(--line-2); border-radius:11px; background:#fff; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--navy); border-radius:2px; transition:.2s}
.menu-toggle.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.on span:nth-child(2){opacity:0}
.menu-toggle.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:none; position:fixed; inset:76px 0 0; background:#fff; z-index:49; padding:22px 30px 40px; overflow-y:auto; border-top:1px solid var(--line)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block; padding:13px 0; font-size:17px; font-weight:600; color:var(--navy); border-bottom:1px solid var(--line)}
.mobile-nav .grp{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); font-weight:700; margin:22px 0 2px; border:0; padding-bottom:4px}
.mobile-nav .btn{margin-top:26px; width:100%; justify-content:center}
body.locked{overflow:hidden}

/* ecosystem message */
.ecosys{text-align:center; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.flow{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:34px}
.flow .step{background:#fff; border:1px solid var(--line); border-radius:13px; padding:15px 22px; font-weight:700; color:var(--navy); font-size:15px}
.flow .sep{color:var(--orange); font-size:18px; font-weight:800}

/* product experience */
.pexp{border-top:1px solid var(--line)}
.pexp .full{margin:38px auto 46px; position:relative; height:340px; max-width:900px}
.pexp .full .pframe{position:absolute; inset:0; box-shadow:0 30px 60px -34px rgba(14,42,71,.34)}
.pexp-feats{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.pexp-feats .f .ic{width:44px;height:44px;border-radius:12px; background:var(--c-hr-t); color:var(--c-hr-2); display:grid;place-items:center; margin-bottom:16px}
.pexp-feats .f h3{font-size:19px; margin:0 0 8px}
.pexp-feats .f p{color:var(--mid); font-size:15.5px; margin:0; line-height:1.6}

/* customer stories */
.stories{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stories .empty{background:#fff; border:1px dashed var(--line-2); border-radius:20px; padding:52px 40px; text-align:center; margin-top:14px}
.stories .empty .ic{width:52px;height:52px;border-radius:14px; background:var(--orange-tint); color:var(--orange); display:grid;place-items:center; margin:0 auto 20px}
.stories .empty h3{font-size:23px; margin:0 0 10px}
.stories .empty p{color:var(--mid); margin:0 auto 24px; max-width:54ch; line-height:1.6}
.valuegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px}
.valcard{background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px; transition:.2s}
.valcard:hover{box-shadow:0 26px 50px -34px rgba(14,42,71,.24); transform:translateY(-3px)}
.valcard .vic{width:46px;height:46px;border-radius:12px; display:grid;place-items:center; margin-bottom:18px}
.valcard .vic.o{background:var(--orange-tint); color:var(--orange)}
.valcard .vic.b{background:var(--c-hr-t); color:var(--c-hr-2)}
.valcard .vic.g{background:var(--c-tap-t); color:var(--c-tap)}
.valcard h3{font-size:20px; margin:0 0 9px}
.valcard p{color:var(--mid); font-size:15.5px; margin:0; line-height:1.6}
.storycta{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-top:32px; padding:22px 26px; background:#fff; border:1px solid var(--line); border-radius:16px}
.storycta span{color:var(--mid); font-size:14.5px; max-width:60ch}
@media(max-width:1000px){.valuegrid{grid-template-columns:1fr}}

/* security */
.security{background:var(--navy); color:#fff}
.security h2{color:#fff} .security .ssub{color:#b9c6da}
.secgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.secitem{background:#123a5e; border:1px solid #1d4a72; border-radius:16px; padding:26px}
.secitem .ic{width:44px;height:44px;border-radius:12px; background:#0e2a47; color:#ffb27a; display:grid;place-items:center; margin-bottom:16px}
.secitem b{color:#fff; font-size:17px; display:block}
.secitem p{color:#a9bcd4; font-size:14.5px; margin:8px 0 0; line-height:1.55}

/* vision */
.vision{border:1px solid var(--line); border-radius:20px; padding:36px; background:#fff; margin-top:24px}
.vision .eyebrow{margin-bottom:10px}
.vision p{font-size:19px; color:var(--ink); margin:0; max-width:62ch; line-height:1.6}

/* count-up tabular */
.trust b,.proof .pbox b{font-variant-numeric:tabular-nums}

/* richer product frame content */
.pside .navspace{flex:1}
.pside .nav.sm{width:60%; opacity:.55}
.pmain{gap:8px}
.ptitle{display:flex; align-items:center; justify-content:space-between; margin-bottom:1px}
.ptitle .tt{height:8px; width:40%; background:var(--pc); opacity:.9; border-radius:3px}
.ptitle .pill{height:15px; width:46px; background:var(--pt); border:1px solid var(--pc); border-radius:20px}
.tile{position:relative}
.tile .v{height:14px}
.tile .up{position:absolute; top:8px; right:8px; width:0;height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid var(--c-tap); opacity:.8}
.split{display:flex; gap:8px; flex:1; min-height:0}
.split .chart{flex:1.25}
.plist{flex:1; display:flex; flex-direction:column; gap:6px; justify-content:center}
.plist .li{display:flex; align-items:center; gap:7px; background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:6px 8px}
.plist .av{width:16px;height:16px;border-radius:50%; background:var(--pc); opacity:.6; flex:0 0 auto}
.plist .lb{height:6px; flex:1; background:var(--line-2); border-radius:3px}
.plist .lb.s{max-width:60%}

@media(max-width:1000px){
  .menu-toggle{display:flex}
  .navcta{display:none}
  .flow{flex-direction:column}
  .pexp-feats,.secgrid{grid-template-columns:1fr 1fr}
  .pexp .full{height:300px}
}
@media(max-width:560px){
  .pexp-feats,.secgrid{grid-template-columns:1fr}
  .pexp .full{height:240px}
}