:root{
--mx: 1120px;
--pad: 18px;
--radius: 16px;
--bg: #0f1115; /* fond sombre */
--panel: #151924; /* panneaux */
--text: #e9ecf1; /* texte principal */
--muted: #a6afc3; /* texte secondaire */
--primary: #7c5cff; /* accent */
--primary-2: #2dd4bf; /* accent secondaire */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background:
radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.12), transparent 60%),
radial-gradient(1000px 500px at 90% 0%, rgba(45,212,191,.10), transparent 60%),
linear-gradient(#0d0f14, #0f1115);
}
img{max-width:100%;display:block}
.container{max-width:var(--mx);margin:0 auto;padding:0 var(--pad)}


/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.brand{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.3px}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px}
.nav a:hover{color:var(--text)}


/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:48px 0}
.title{font-size:clamp(28px,4vw,44px);margin:.1em 0 .2em}
.subtitle{color:var(--muted);max-width:48ch}
.benefits{padding-left:18px;margin:16px 0;color:var(--text)}
.hero-img{border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.cta-row{margin-top:18px}
.btn{display:inline-block;border-radius:999px;padding:14px 20px;font-weight:700;text-decoration:none}
.btn-primary{
color:#0b0d12;background: linear-gradient(135deg, var(--primary), var(--primary-2));
box-shadow:0 8px 24px rgba(124,92,255,.3);
}
.btn-primary:hover{filter:saturate(1.1)}
.trust{color:var(--muted);font-size:.95rem;margin-top:8px}


/* Sections */
.features, .details, .faq, .contact{padding:38px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:var(--radius)}
.card h3{margin-top:0}


/* Footer */
.footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:24px}
.legal a{color:var(--muted);text-decoration:none;margin-right:14px}
.legal a:hover{color:var(--text)}
.small{color:var(--muted)}


/* Responsive */
@media (max-width: 980px){
.hero{grid-template-columns:1fr}
}
@media (max-width: 780px){
.grid-3{grid-template-columns:1fr}
}