/* Jokko Pro Africa — Design System v5 */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --o:#E85D04;--oh:#D45200;--ol:#FF8534;--obg:rgba(232,93,4,.04);--obg2:rgba(232,93,4,.08);--obg3:rgba(232,93,4,.12);
  --b:#0D0D0D;--bl:#1A1A1A;--bs:#444;--bm:#888;--bf:#BBB;
  --w:#FFFFFF;--ow:#FAFAFA;--wm:#F8F6F3;
  --bd:#EBEBEB;--bdl:#F3F3F3;
  --sh:0 4px 20px rgba(0,0,0,.06);--shl:0 16px 48px rgba(0,0,0,.08);--sho:0 6px 24px rgba(232,93,4,.18);
  --r:10px;--rl:16px;--rx:24px;--rf:999px;
  --f:'Instrument Sans',system-ui,sans-serif;--fd:'Newsreader',Georgia,serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--w);color:var(--b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none}img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.label{font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--o);margin-bottom:10px;display:inline-flex;align-items:center;gap:8px}
.label::before{content:'';width:20px;height:2px;background:var(--o);border-radius:2px}
.title{font-family:var(--fd);font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.12;font-weight:700;color:var(--b);margin-bottom:12px}
.subtitle{font-size:.98rem;line-height:1.7;color:var(--bs);max-width:520px}

/* TOPBAR */
.topbar{background:var(--o);color:rgba(255,255,255,.7);font-size:.75rem;padding:7px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.topbar a{color:rgba(255,255,255,.6);transition:.2s;display:inline-flex;align-items:center;gap:4px;font-weight:500}
.topbar a:hover{color:var(--ol)}
.topbar-left{display:flex;gap:16px}
.topbar-right{display:flex;gap:8px;align-items:center}
.topbar-right a{padding:3px 10px;border-radius:var(--rf);border:1px solid rgba(255,255,255,.12);font-size:.7rem}
.topbar-right .accent{background:var(--o);color:#fff;border-color:var(--o)}
.sdot{width:6px;height:6px;border-radius:50%;background:#34D399;display:inline-block;margin-right:2px}

/* NAVBAR */
.navbar{background:rgba(255,255,255,.95);backdrop-filter:blur(16px);padding:14px 0;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--bdl)}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo-m{width:38px;height:38px;border-radius:10px;background:var(--o);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff}
.logo-n{font-weight:700;font-size:1.15rem;line-height:1}.logo-n span{color:var(--o)}
.logo-s{font-size:.58rem;color:var(--bm);font-weight:500;letter-spacing:.8px;text-transform:uppercase}
.nav-l{display:flex;gap:2px;align-items:center}
.nav-l a{font-size:.88rem;font-weight:500;color:var(--bs);padding:7px 14px;border-radius:var(--rf);transition:.2s}
.nav-l a:hover,.nav-l a.active{color:var(--o);background:var(--obg)}
.nav-c{display:flex;gap:8px}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--b);margin:5px 0;border-radius:2px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:var(--rf);font-weight:600;font-size:.87rem;border:none;cursor:pointer;transition:all .25s;font-family:var(--f);text-decoration:none}
.btn-o{background:var(--o);color:#fff}.btn-o:hover{background:var(--oh);transform:translateY(-1px);box-shadow:var(--sho)}
.btn-b{background:var(--b);color:#fff}.btn-b:hover{background:var(--bl);transform:translateY(-1px)}
.btn-ol{background:transparent;color:var(--b);border:1.5px solid var(--bd)}.btn-ol:hover{border-color:var(--o);color:var(--o);background:var(--obg)}
.btn-w{background:#fff;color:var(--o)}.btn-w:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.btn-sm{padding:7px 16px;font-size:.82rem}
.btn-lg{padding:13px 28px;font-size:.92rem}
.btn-purple{background:#6B4C9A;color:#fff}.btn-purple:hover{background:#5a3f85;transform:translateY(-1px)}

/* PAGE HEADER */
.page-header{padding:120px 0 48px;position:relative;overflow:hidden}
.page-header.ph-startup{background:linear-gradient(135deg,#FFF5EB,#FFF0E0)}
.page-header.ph-entreprise{background:linear-gradient(135deg,#F0F2F8,#E8ECF4)}
.page-header.ph-institution{background:linear-gradient(135deg,#F3EFF8,#EDE6F5)}
.page-header.ph-partenaires{background:linear-gradient(135deg,#FFF8ED,#FFF3E0)}
.page-header.ph-apropos{background:linear-gradient(135deg,var(--ow),var(--wm))}
.page-header .container{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.ph-breadcrumb{font-size:.82rem;color:var(--bm);margin-bottom:16px;display:flex;align-items:center;gap:6px}
.ph-breadcrumb a{color:var(--bm);transition:.2s}.ph-breadcrumb a:hover{color:var(--o)}
.page-header h1{font-family:var(--fd);font-size:clamp(2rem,4vw,3rem);line-height:1.1;font-weight:700;margin-bottom:14px}
.page-header h1 em{color:var(--o);font-style:italic}
.ph-desc{font-size:1rem;line-height:1.7;color:var(--bs);max-width:480px;margin-bottom:24px}
.ph-visual{border-radius:var(--rx);overflow:hidden;aspect-ratio:4/3}
.ph-visual img{width:100%;height:100%;object-fit:cover}

/* PRICING */
.pricing{padding:80px 0}
.pricing.alt{background:var(--ow)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.pcard{background:var(--w);border:1px solid var(--bd);border-radius:var(--rx);padding:32px 24px;text-align:center;position:relative;transition:.3s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shl)}
.pcard.pop{border:2px solid var(--o)}.pcard.pop-b{border:2px solid var(--b)}.pcard.pop-p{border:2px solid #6B4C9A}
.badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:var(--rf);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#fff}
.badge-o{background:var(--o)}.badge-b{background:var(--b)}.badge-p{background:#6B4C9A}.badge-g{background:#B8860B}
.pcard h3{font-family:var(--fd);font-size:1.1rem;font-weight:700;margin-bottom:2px}
.psub{font-size:.76rem;color:var(--bm);margin-bottom:16px}
.price{font-family:var(--fd);font-size:2.2rem;font-weight:700;color:var(--b);letter-spacing:-.02em}
.price small{font-size:.82rem;font-weight:400;color:var(--bm)}
.period{font-size:.76rem;color:var(--bm);margin-bottom:20px}
.feats{text-align:left;margin-bottom:24px}
.feat{padding:6px 0;font-size:.82rem;color:var(--bs);border-bottom:1px solid var(--bdl);display:flex;align-items:center;gap:7px}
.feat:last-child{border:none}
.ck{font-weight:700;font-size:.82rem}

/* EXPERT BANNER */
.expert{padding:48px 0;background:var(--ow)}
.expert-box{background:var(--w);border:1px solid var(--bd);border-radius:var(--rx);padding:36px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.expert-icon{width:56px;height:56px;border-radius:16px;background:var(--obg2);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.expert-box h3{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-bottom:4px}
.expert-box p{font-size:.88rem;color:var(--bs);line-height:1.5}

/* SLA TABLE — redesigned */
.sla{padding:80px 0;position:relative;overflow:hidden}
.sla-bg{position:absolute;inset:0;z-index:0}
.sla-bg img{width:100%;height:100%;object-fit:cover}
.sla-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,13,13,.92),rgba(13,13,13,.85))}
.sla .container{position:relative;z-index:1}
.sla .title{color:#fff}
.sla .label{color:var(--ol)}
.sla .label::before{background:var(--ol)}
.sla-subtitle{font-size:.95rem;color:rgba(255,255,255,.6);max-width:480px;margin:0 auto 36px;text-align:center}
.sla-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:32px}
.sla-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--rl);padding:24px 20px;text-align:center;transition:.35s;backdrop-filter:blur(8px)}
.sla-card:hover{background:rgba(232,93,4,.1);border-color:rgba(232,93,4,.25);transform:translateY(-3px)}
.sla-card-icon{font-size:1.6rem;margin-bottom:10px;display:block}
.sla-card-value{font-family:var(--fd);font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:4px;display:block}
.sla-card-label{font-size:.72rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;display:block}
.sla-card-desc{font-size:.82rem;color:rgba(255,255,255,.55);margin-top:8px;line-height:1.45;display:block}
.sla-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--rf);background:rgba(232,93,4,.15);color:var(--ol);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.sla-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--o);animation:sla-pulse 2s infinite}
@keyframes sla-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* MARQUEE */
.marquee{padding:40px 0;border-top:1px solid var(--bdl);border-bottom:1px solid var(--bdl);overflow:hidden}
.marquee-label{text-align:center;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--bf);margin-bottom:16px}
.marquee-track{display:flex;gap:56px;align-items:center;animation:mq 35s linear infinite;width:max-content}
.marquee-item{font-size:.95rem;font-weight:700;color:var(--bf);white-space:nowrap;display:flex;align-items:center;gap:6px}
.marquee-logo:hover{opacity:.9!important;filter:grayscale(0)!important}
.mqdot{width:6px;height:6px;border-radius:50%;background:var(--o);opacity:.5}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* CTA */
.cta{padding:80px 0}
.cta-box{background:var(--o);border-radius:var(--rx);padding:60px 48px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta-box::after{content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;border-radius:50%;background:rgba(0,0,0,.08)}
.cta-box h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;margin-bottom:10px;position:relative;z-index:1}
.cta-box p{font-size:.98rem;color:rgba(255,255,255,.8);margin-bottom:24px;max-width:460px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* FOOTER */
.footer{background:#1E2A3A;color:rgba(255,255,255,.6);padding:48px 0 18px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.3fr;gap:28px;margin-bottom:36px}
.footer h4{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--o);margin-bottom:14px}
.footer a{color:rgba(255,255,255,.45);font-size:.84rem;transition:.2s}
.footer a:hover{color:var(--ol)}
.footer li{margin-bottom:7px}
.footer-brand p{font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.35);margin-top:10px;max-width:250px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:16px;display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.25)}

/* FAQ */
.faq{padding:80px 0;background:var(--w)}
.faq-header{text-align:center;margin-bottom:48px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto}
.faq-item{background:var(--ow);border:1px solid var(--bdl);border-radius:var(--rl);overflow:hidden;transition:.3s}
.faq-item.open{border-color:var(--o);box-shadow:var(--sho)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--b);gap:12px;user-select:none}
.faq-q:hover{color:var(--o)}
.faq-icon{width:28px;height:28px;min-width:28px;border-radius:50%;background:var(--obg2);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--o);transition:transform .3s;font-weight:700}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--o);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 20px 18px;font-size:.88rem;line-height:1.65;color:var(--bs)}
.faq-a-inner a{color:var(--o);font-weight:600}

/* PILL */
.pill{padding:3px 10px;border-radius:var(--rf);font-size:.7rem;font-weight:600;border:1px solid}
.pill-o{background:var(--obg);color:var(--o);border-color:var(--obg3)}
.pill-b{background:rgba(0,0,0,.04);color:var(--bs);border-color:rgba(0,0,0,.08)}
.pill-p{background:rgba(107,76,154,.06);color:#6B4C9A;border-color:rgba(107,76,154,.12)}

/* TESTIMONIALS */
.testi{padding:80px 0;background:var(--ow)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.tcard{background:var(--w);border:1px solid var(--bd);border-radius:var(--rl);padding:28px 24px}
.tcard-stars{color:var(--o);font-size:.85rem;margin-bottom:10px;letter-spacing:1px}
.tcard-text{font-family:var(--fd);font-size:.95rem;line-height:1.6;color:var(--bs);margin-bottom:16px;font-style:italic}
.tcard-author{display:flex;align-items:center;gap:10px}
.tcard-av{width:36px;height:36px;border-radius:50%;background:var(--obg2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--o)}
.tcard-name{font-size:.85rem;font-weight:700}.tcard-role{font-size:.72rem;color:var(--bm)}

/* RESPONSIVE */
@media(max-width:968px){
  .page-header .container{grid-template-columns:1fr}
  .pricing-grid,.testi-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .expert-box{grid-template-columns:1fr;text-align:center}
  .hero-arrow{display:none}
}
@media(max-width:768px){
  .topbar-left,.nav-l,.nav-c{display:none}
  .mobile-toggle{display:block}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center}
}