:root{
  --primary:#1A1352;
  --secondary:#4632DA;
  --accent:#8600c0;
  --text:#1b1b1f;
  --muted:#6b6b76;
  --bg:radial-gradient(circle at top left,#f0f4ff 0%,#fff8f5 45%,#f7f5ff 100%);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --container:1200px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Nunito',system-ui;
  background:var(--bg);
  color:var(--text);
  scroll-behavior:smooth;
}

/* Containers & global */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
h1,h2,h3{color:var(--primary);font-weight:800;margin-bottom:12px}
a{text-decoration: none;}
.subtitle{color:var(--muted);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;font-weight:700;border:0;cursor:pointer;transition:all .25s ease}
.btn-primary{background:var(--secondary);color:#fff;box-shadow:0 8px 16px rgba(70,50,218,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(70,50,218,.35)}
.btn-ghost{background:transparent;border:2px solid var(--secondary);color:var(--secondary)}
.btn-ghost:hover{background:var(--secondary);color:#fff}
.pulse{animation:pulse 2.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid #eee;z-index:20}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0}

/* Hero */
.hero{padding:120px 32px 80px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.title{font-size:clamp(34px,4.5vw,56px);line-height:1.1}
.badge-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.badge{background:#fff;border:1px solid #eee;border-radius:999px;padding:6px 12px;font-weight:700;box-shadow:0 3px 6px rgba(0,0,0,.05)}

/* Sections */
.section{padding:70px 0}
.text-center{text-align:center}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow)}
.highlight{background:#f9f8ff}

/* Features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:30px}
.feature{padding:20px;transition:transform .3s ease, box-shadow .3s ease}
.hover-rise:hover{transform:translateY(-6px);box-shadow:0 12px 25px rgba(70,50,218,.15)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80%,1fr));gap:20px;margin-top:30px}
.faq-card{background:#fff;padding:20px;border-radius:14px;border:1px solid #eee;box-shadow:0 5px 12px rgba(0,0,0,.05);transition:all .25s ease}
.faq-card:hover{transform:translateY(-4px);border-color:var(--secondary);box-shadow:0 10px 20px rgba(70,50,218,.1)}
.faq-card h3{margin-bottom:8px;color:var(--secondary)}

/* Checklist */
.checklist{list-style:none;padding:0;margin:30px auto;max-width:400px;text-align:left;font-weight:600;color:var(--text)}
.big-btn{font-size:18px;padding:16px 24px;margin-top:10px;display:inline-block}

/* Form */
form .row{display:flex;flex-direction:column;gap:12px; max-width: 600px; margin:0 auto;}
form label{font-weight:700;color:var(--primary)}
form input{width:100%;padding:12px 14px;border:1px solid #e5e5ef;border-radius:12px;font:inherit;margin-top:4px}
.alert{padding:10px 12px;border-radius:10px; margin : 12px auto; max-width: 600Px;}
.alert-ok{background:#eafbea;border:1px solid #a8e6a8;color:#116611}
.alert-ko{background:#fff1f1;border:1px solid #ffc7c7;color:#7a0b0b}

/* Footer */
footer{padding:30px 0;color:#676781;font-size:14px;background:#fff;margin-top:60px}

/* Sticky CTA */
#sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:99;background:#fff;padding:10px;border-top:1px solid #eee;box-shadow:0 -4px 12px rgba(0,0,0,.05);text-align:center}

/* Animations */
.fade-in{opacity:0;animation:fadeIn .8s forwards}
@keyframes fadeIn{to{opacity:1}}
.slide-up{opacity:0;transform:translateY(40px);animation:slideUp .9s forwards}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
.pop{animation:popIn .6s ease forwards}
@keyframes popIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}

/* Responsive */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
}