:root{ --navy:#01233f; --orange:#ff7f00; --bg:#f3f6fb; --card:#ffffff; --muted:#6b7280; --line:rgba(2,6,23,.10); }
*{box-sizing:border-box}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:#0b1220;}

/* Header (reprend le style validé) */
.topbar{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(1,35,63,.96), rgba(1,35,63,.86)); border-bottom:1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px);}
/* Header: align logo (left) and role button (right) on the same line */
/* Full-width header like the reference capture (logo left, role button right) */
.topbar .inner{width:100%; margin:0 auto; padding:14px 22px; display:flex; gap:14px; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:10px;}
.brand .logo{width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; overflow:hidden}
.brand .logo img{width:22px; height:22px; object-fit:contain}
.brand .txt{display:flex; flex-direction:column; justify-content:center; line-height:1.05}
.brand .txt b{color:#fff; font-size:14px; letter-spacing:.3px}
.brand .txt span{color:rgba(255,255,255,.7); font-size:12px}

/* Public home page: no promoter navigation tabs in header */
.right{display:flex; align-items:center; gap:10px; justify-content:flex-end;}
.pill{display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:700; cursor:pointer; user-select:none}
.pill .dot{width:10px; height:10px; border-radius:999px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0)), linear-gradient(180deg, rgba(255,127,0,1), rgba(255,127,0,.55)); box-shadow:0 0 0 4px rgba(255,127,0,.18)}

/* Layout */
.wrap{max-width:1180px; margin:0 auto; padding:22px 16px 40px;}
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:stretch;}
@media(max-width: 980px){.hero{grid-template-columns:1fr;}}

.card{background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px rgba(17,24,39,.10);}
.hero-left{padding:22px 22px 18px;}
.badge{display:inline-flex; align-items:center; gap:10px; padding:7px 12px; border-radius:999px; background:rgba(255,127,0,.10); border:1px solid rgba(255,127,0,.25); color:#7a3a00; font-weight:700; font-size:12px}
.title{margin:12px 0 8px; font-size:40px; letter-spacing:-.7px; line-height:1.05}
.title span{color:var(--orange)}
.sub{margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:56ch}

.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 16px; border-radius:14px; font-weight:800; text-decoration:none; border:1px solid transparent}
.btn.primary{background:linear-gradient(180deg, rgba(255,127,0,1), rgba(255,127,0,.85)); color:#1a1100;}
.btn.ghost{background:#fff; border-color:rgba(2,6,23,.12); color:#0b1220}
.btn:hover{transform: translateY(-1px)}

.quick{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.chip{padding:10px 12px; border-radius:14px; background:rgba(1,35,63,.06); border:1px solid rgba(1,35,63,.14); font-weight:700; font-size:12px; color:#0b1220}

/* Carousel */
.hero-right{padding:14px; display:flex; flex-direction:column; gap:12px;}
.carousel{position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(2,6,23,.10); background:radial-gradient(900px 380px at 70% 10%, rgba(255,127,0,.18), transparent 45%), linear-gradient(180deg, rgba(1,35,63,.06), rgba(1,35,63,0));}
.slides{display:flex; transition: transform .5s ease;}
.slide{min-width:100%; display:grid; grid-template-columns:1fr;}
.slide img{width:100%; height:360px; object-fit:cover; display:block}
@media(max-width: 980px){.slide img{height:320px}}

.navbtn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(1,35,63,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.navbtn:hover{background:rgba(1,35,63,.70)}
.navbtn.prev{left:12px}
.navbtn.next{right:12px}

.dots{display:flex; gap:8px; justify-content:center; padding:10px 0 2px}
.dot{width:8px; height:8px; border-radius:999px; background:rgba(1,35,63,.25); cursor:pointer}
.dot.active{background:var(--orange)}

.hero-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media(max-width: 640px){.hero-kpis{grid-template-columns:1fr;}}
.kpi{padding:12px 14px; border-radius:16px; border:1px solid rgba(2,6,23,.10); background:#fff}
.kpi b{display:block; font-size:18px}
.kpi span{color:var(--muted); font-size:12px; font-weight:700}

/* Sections */
.section{margin-top:18px;}
.section h2{margin:0 0 10px; font-size:20px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width: 980px){.grid3{grid-template-columns:1fr}}

.feat{padding:16px;}
.feat .icon{width:40px; height:40px; border-radius:14px; background:rgba(255,127,0,.12); border:1px solid rgba(255,127,0,.25); display:flex; align-items:center; justify-content:center; font-weight:900}
.feat h3{margin:10px 0 6px; font-size:15px}
.feat p{margin:0; color:var(--muted); line-height:1.55; font-size:13px}

.trust{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.logo-pill{padding:10px 12px; border-radius:14px; background:#fff; border:1px solid rgba(2,6,23,.10); font-weight:900; color:rgba(1,35,63,.86)}

.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width: 980px){.testis{grid-template-columns:1fr}}
.quote{padding:16px;}
.quote p{margin:0; color:#0b1220; line-height:1.6}
.quote .who{margin-top:10px; color:var(--muted); font-weight:800; font-size:12px}

.cta-band{margin-top:18px; padding:16px; border-radius:18px; background:linear-gradient(90deg, rgba(1,35,63,1), rgba(1,35,63,.92)); border:1px solid rgba(255,255,255,.10); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px}
.cta-band p{margin:0; color:rgba(255,255,255,.85)}

.footer{margin-top:20px; padding:18px 2px; color:rgba(2,6,23,.55); font-weight:700; font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}