*{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{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:20px; color:var(--navy); margin-bottom:12px}
.pcard .plabel .dot{width:30px;height:30px;border-radius:8px; display:grid;place-items:center; color:#fff; font-size:13px; font-weight:900}
.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)}
.pcard .pshot{position:relative; height:250px}
.pcard .pshot .pframe{position:absolute; inset:0; box-shadow:0 24px 50px -30px rgba(14,42,71,.32)}
.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}
.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}
}