/* ═══════════════════════════════════════
   LEADERECOM — Sections
   (hero, steps, features, pricing,
    transport, faq, cta, footer)
═══════════════════════════════════════ */

/* ── HERO ── */
.hero{
  background:linear-gradient(135deg,#060f2a 0%,#094196 60%,#0691DF 100%);
  min-height:92vh;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.hero-grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-accent-bar{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--orange),var(--orange2),var(--blue));
  background-size:300%;
  animation:barShift 4s linear infinite;
}
.hero-content{
  flex:1;display:grid;grid-template-columns:1fr 1fr;
  max-width:1280px;width:100%;margin:0 auto;
  padding:5rem 3rem 4rem;align-items:center;
  gap:4rem;position:relative;z-index:2;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(244,123,32,.12);border:1px solid rgba(244,123,32,.3);
  color:#F9B84E;border-radius:50px;padding:.35rem 1rem;
  font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  margin-bottom:2rem;
}
.pulse{width:6px;height:6px;border-radius:50%;background:#F47B20;animation:p 1.8s infinite;display:inline-block}
@keyframes p{0%,100%{opacity:1}50%{opacity:.3}}
.hero-h1{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size:3rem;line-height:1.1;color:#fff;margin-bottom:1.5rem;
}
.hero-h1 .line2{
  display:block;font-size:3.8rem;color:transparent;
  -webkit-text-stroke:2px var(--orange);letter-spacing:-2px;
}
.hero-h1 .line3{display:block;color:#fff}
.hero-p{font-size:1rem;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:2.5rem;max-width:440px}
.hero-p strong{color:#F9B84E;font-weight:700}
.hero-actions{display:flex;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.hstat-val{font-family:'Sora',sans-serif;font-size:1.7rem;font-weight:600;color:#fff}
.hstat-val span{color:var(--orange)}
.hstat-lbl{font-size:.75rem;color:rgba(255,255,255,.45);margin-top:.1rem;letter-spacing:.5px}
.hero-right{position:relative;height:520px}

/* ── COMMENT ÇA MARCHE ── */
.steps-wrap{background:var(--white);padding:6rem 3rem}
.steps-inner{max-width:1200px;margin:0 auto}
.steps-header{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:center;margin-bottom:4rem;
}
.steps-header .left .sec-h2{text-align:left;margin-bottom:.75rem}
.steps-header .left p{font-size:1rem;color:var(--muted);line-height:1.75;margin:0}
.big-num{
  font-family:'Sora',sans-serif;font-size:6rem;font-weight:700;
  color:transparent;-webkit-text-stroke:2px var(--border);
  line-height:1;text-align:right;
}
.steps-timeline{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps-timeline::before{
  content:'';position:absolute;top:28px;left:12.5%;right:12.5%;
  height:1px;background:var(--border);z-index:0;
}
.step{padding:0 1rem;position:relative;z-index:1}
.step-circle{
  width:56px;height:56px;border-radius:50%;
  background:var(--cream);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:700;
  color:var(--muted);margin-bottom:1.5rem;
}
.step:nth-child(4) .step-circle{
  background:linear-gradient(135deg,var(--orange2),var(--orange));
  border-color:var(--orange);color:#fff;
}
.step-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--blue-light);
  background:#E6F0FB;border-radius:4px;padding:.2rem .6rem;margin-bottom:.6rem;
}
.step:nth-child(4) .step-tag{background:#FFF0E6;color:var(--orange2)}
.step h4{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:.4rem}
.step p{font-size:.83rem;color:var(--muted);line-height:1.65}

/* ── FONCTIONNALITÉS ── */
.feat-wrap{background:var(--cream);padding:6rem 3rem}
.feat-inner{max-width:1200px;margin:0 auto}
.feat-top{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:end;margin-bottom:3.5rem;
}
.feat-top .txt .sec-h2{text-align:left}
.feat-top .txt .sec-p{margin:0;max-width:380px}
.feat-count{
  font-family:'Sora',sans-serif;font-size:4rem;font-weight:700;
  color:transparent;-webkit-text-stroke:2px var(--border);
  text-align:right;line-height:1;
}
.feat-count span{color:var(--blue-light);-webkit-text-stroke:0}
.feat-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:1rem}
.feat-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:1.5rem;transition:all .25s;
}
.feat-card:hover{border-color:var(--blue-light);transform:translateY(-3px);box-shadow:0 8px 24px rgba(6,145,223,.12)}
.feat-card.big{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
.feat-ico{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;margin-bottom:1.1rem;
}
.ico-blue  {background:#E6F0FB;color:var(--blue)}
.ico-orange{background:#FFF0E6;color:var(--orange)}
.ico-ink   {background:#F0F1F5;color:var(--ink)}
.feat-card h5{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.4rem}
.feat-card p{font-size:.82rem;color:var(--muted);line-height:1.65}
.feat-big-visual{
  margin-top:auto;padding-top:1.5rem;
  display:flex;align-items:flex-end;gap:.5rem;height:80px;
}
.fvbar  {flex:1;border-radius:4px 4px 0 0;background:var(--border)}
.fvbar.a{background:var(--blue-light)}
.fvbar.b{background:var(--orange)}

/* ── PRICING ── */
.pricing-wrap{
  background:linear-gradient(135deg,#060f2a 0%,#094196 100%);
  padding:6rem 3rem;position:relative;overflow:hidden;
}
.pricing-wrap::before{
  content:'0,3';
  position:absolute;right:-2rem;top:50%;transform:translateY(-50%);
  font-family:'Sora',sans-serif;font-size:18rem;font-weight:700;
  color:rgba(255,255,255,.03);line-height:1;
  pointer-events:none;user-select:none;
}
.pricing-inner{max-width:1000px;margin:0 auto;position:relative;z-index:2}
.pricing-top{
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;
  align-items:center;margin-bottom:4rem;
}
.pricing-top .left .eyebrow{color:#F9B84E}
.pricing-top .left .sec-h2{color:#fff;text-align:left}
.pricing-top .left .sec-h2 em{color:var(--orange)}
.pricing-top .left p{font-size:1rem;color:rgba(255,255,255,.55);line-height:1.8;margin:0}
.pricing-top .right{text-align:right}
.price-xxl{font-family:'Sora',sans-serif;font-size:6rem;font-weight:700;color:var(--orange);line-height:.9}
.price-xxl-unit{font-size:1.4rem;color:rgba(255,255,255,.4);margin-top:.4rem;font-family:'Sora',sans-serif;font-weight:700}
.price-xxl-note{font-size:.8rem;color:rgba(255,255,255,.3);margin-top:.4rem}
.pricing-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.07);border-radius:16px;overflow:hidden;
  margin-bottom:3rem;
}
.pf{background:rgba(255,255,255,.03);padding:1.5rem;display:flex;align-items:flex-start;gap:.85rem}
.pf-ico{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,123,32,.15);color:#F9B84E;font-size:.95rem;
}
.pf h6{font-family:'Sora',sans-serif;font-weight:700;font-size:.88rem;color:#fff;margin-bottom:.25rem}
.pf p{font-size:.78rem;color:rgba(255,255,255,.4);line-height:1.5}
.pricing-cta{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.pricing-compare{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.4)}
.pricing-compare strong{color:rgba(255,255,255,.7)}
.pricing-compare .hl{color:var(--orange)}

/* ── TRANSPORTEURS ── */
.transport-wrap{background:var(--white);padding:5rem 3rem}
.transport-inner{max-width:1200px;margin:0 auto}
.transport-header{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;margin-bottom:3rem;gap:2rem;
}
.transport-header .sec-h2{text-align:left;margin-bottom:.3rem}
.transport-count{font-family:'Sora',sans-serif;font-size:2.8rem;font-weight:700;color:var(--border);line-height:1}
.tracks-wrap{display:flex;flex-direction:column;gap:1rem;overflow:hidden}
.track-row{overflow:hidden;position:relative}
.track-row::before,.track-row::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.track-row::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.track-row::after {right:0;background:linear-gradient(-90deg,#fff,transparent)}
.track     {display:flex;gap:1rem;width:max-content}
.track.ltr {animation:slide  30s linear infinite}
.track.rtl {animation:slideR 30s linear infinite}
.track.ltr2{animation:slide  36s linear infinite}
.track:hover{animation-play-state:paused}
@keyframes slide {from{transform:translateX(0)}   to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.carrier{
  background:var(--cream);border:1px solid var(--border);border-radius:12px;
  padding:.55rem 1.1rem;font-size:.82rem;font-weight:600;color:var(--muted);
  white-space:nowrap;display:flex;align-items:center;gap:.65rem;
  transition:all .25s;min-width:130px;justify-content:center;cursor:default;
}
.carrier:hover{border-color:var(--blue-light);color:var(--blue);background:var(--white);transform:translateY(-2px)}
.carrier img{
  height:28px;width:auto;max-width:80px;object-fit:contain;
  filter:grayscale(1) opacity(.65);transition:filter .25s;
}
.carrier:hover img{filter:grayscale(0) opacity(1)}
.carrier-name{font-size:.78rem;font-weight:700;color:var(--muted)}
.carrier:hover .carrier-name{color:var(--blue-light)}

/* ── FAQ ── */
.faq-wrap  {background:var(--cream);padding:6rem 3rem}
.faq-inner {max-width:900px;margin:0 auto}
.faq-header{text-align:center;margin-bottom:3.5rem}

/* ── CTA ── */
.cta-wrap{
  background:linear-gradient(135deg,var(--orange2) 0%,var(--orange) 100%);
  padding:6rem 3rem;position:relative;overflow:hidden;
}
.cta-wrap::after{
  content:'';position:absolute;right:-80px;top:-80px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none;
}
.cta-inner{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:2}
.cta-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);border-radius:50px;
  padding:.35rem 1rem;font-size:.78rem;font-weight:600;letter-spacing:.5px;
  margin-bottom:1.5rem;
}
.cta-h2{font-family:'Sora',sans-serif;font-weight:700;font-size:2.4rem;color:#fff;line-height:1.1;margin-bottom:1rem}
.cta-p {font-size:1rem;color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:2.5rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
footer{background:var(--ink2);padding:4rem 3rem 2rem;color:rgba(255,255,255,.5)}
.footer-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2rem;
}
.f-brand-name{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.f-brand-name span{color:var(--orange)}
.f-brand p{font-size:.83rem;line-height:1.75}
.f-col h6{font-family:'Sora',sans-serif;font-weight:700;color:rgba(255,255,255,.8);font-size:.88rem;margin-bottom:.9rem}
.f-col a{display:block;font-size:.82rem;color:rgba(255,255,255,.4);margin-bottom:.5rem;transition:color .2s}
.f-col a:hover{color:var(--orange)}
.footer-bottom{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;font-size:.78rem;
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;padding:4rem 2rem 3rem}
  .hero-right{display:none}
  .steps-timeline{grid-template-columns:1fr 1fr;gap:2rem}
  .steps-timeline::before{display:none}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-card.big{grid-row:span 1}
  .pricing-top{grid-template-columns:1fr}
  .pricing-top .right{text-align:left}
  .pricing-features{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav{padding:0 1.5rem}
  .nav-links{display:none}
  .hero-h1{font-size:2.2rem}
  .hero-h1 .line2{font-size:2.8rem}
  .steps-wrap,.feat-wrap,.pricing-wrap,.transport-wrap,.faq-wrap,.cta-wrap{padding:4rem 1.5rem}
  .steps-header,.feat-top{grid-template-columns:1fr}
  .big-num,.feat-count,.transport-count{display:none}
  .feat-grid{grid-template-columns:1fr}
  .pricing-features{grid-template-columns:1fr}
  .cta-h2{font-size:1.8rem}
  .footer-grid{grid-template-columns:1fr}
}