/* ========== Base (mobile-first) ========== */
:root{
  --bg:#0b0b0c; --fg:#fff; --muted:#b6b6b6;
  --gold:#facc15; --card:#131315; --stroke:#1f1f22;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45}
img{max-width:100%;display:block}
a{color:var(--fg);text-decoration:none}

/* Containers */
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.header-wrap{display:flex;justify-content:center;align-items:center;height:58px}

/* Header (logo centré) */
.header{
  position:sticky;top:0;z-index:10;
  background:rgba(11,11,12,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stroke);
}

/* Hero */
.hero{padding:28px 0 18px;text-align:center}
.badge{display:inline-block;padding:6px 10px;border:1px solid var(--stroke);border-radius:999px;background:#0f0f11;color:var(--muted);font-size:12px}
.hero h1{margin:10px 0 8px;font-weight:800;line-height:1.15;font-size:clamp(24px,7vw,36px)}
.lead{margin:0 auto 12px;color:var(--muted);font-size:15.5px;max-width:680px}

/* KPIs */
.kpis{
  display:grid;gap:10px;margin:14px auto 16px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  max-width:860px;
}
.kpi{background:#0f0f11;border:1px solid var(--stroke);border-radius:12px;padding:12px;font-size:14px}

/* CTA */
.btn-gold{
  display:inline-block;background:var(--gold);color:#161616;
  font-weight:800;padding:12px 16px;border-radius:10px;border:none;
}
.hero-btn{margin-top:6px}

/* Sections */
.section{padding:22px 0;border-top:1px solid var(--stroke);text-align:center}
.section-wrap{display:flex;flex-direction:column;align-items:center}
.section h2{margin:2px 0 14px;font-size:clamp(20px,5.5vw,28px)}

/* Cards & grid */
.grid{
  display:grid;gap:12px;
  grid-template-columns:1fr;
  width:100%;
}
.card{
  background:var(--card);border:1px solid var(--stroke);
  border-radius:var(--radius);padding:16px;text-align:left
}
.card.center{text-align:center}
.price{font-size:28px;font-weight:800;margin:6px 0 10px;color:var(--gold)}
.small{color:var(--muted);font-size:13px}
ul.checks{margin:0;padding:0;list-style:none}
ul.checks li{margin:6px 0}
ul.checks li::before{content:"✅ ";}

/* Steps */
.steps{display:grid;gap:10px;width:100%}
.step{background:#0f0f11;border:1px dashed var(--stroke);border-radius:12px;padding:12px;font-size:15px}

/* Footer */
.footer{border-top:1px solid var(--stroke);color:var(--muted);text-align:center;padding:16px 0}

/* Sticky CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;gap:10px;justify-content:center;align-items:center;
  padding:10px 12px;background:#0f0f11;border-top:1px solid var(--stroke)
}
.sticky-text{font-size:14px}
.sticky-btn{padding:10px 14px;font-size:14px}
body{padding-bottom:64px}

/* Desktop */
@media (min-width:780px){
  .hero{padding:46px 0 26px}
  .hero h1{font-size:44px}
  .lead{font-size:17px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,1fr)}
  .price{font-size:34px}
}