/* ===================== Design System ===================== */
:root{
  --bg:#ffffff; --text:#0f172a; --muted:#475569; --muted-2:#64748b;
  --primary:#1d4ed8; --primary-2:#4f46e5; --accent:#f97316; --accent-2:#dc2626;
  --success:#22c55e; --indigo:#6366f1;
  --radius:14px; --shadow-1:0 10px 30px rgba(2,6,23,.10); --shadow-2:0 20px 50px rgba(2,6,23,.14); --shadow-3:0 30px 60px rgba(2,6,23,.18);
  --container:1200px;
}

/* ===================== Reset ===================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg);line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere}
img,svg,video,canvas{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

/* ===================== Utilities ===================== */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.grid{display:grid}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-gap{gap:16px}
.section{padding:80px 0;background:linear-gradient(180deg,#f8fafc,#ffffff)}
.section-alt{background:linear-gradient(180deg,#ffffff,#f8fafc)}
.section-head{text-align:center;max-width:820px;margin:0 auto 48px}
.section-head h2{font-size:36px;margin:0 0 10px;font-weight:800;color:#111827}
.section-head h2 span{background:linear-gradient(90deg,#2563eb,#4f46e5);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head p{font-size:18px;color:var(--muted);margin:0}

/* ===================== Buttons ===================== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;font-weight:700;transition:.25s transform,.25s filter,.25s background;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn-primary{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 20px 40px rgba(249,115,22,.20)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-light{background:#fff;color:var(--primary);box-shadow:var(--shadow-1)}
.btn-small{padding:10px 14px;font-weight:600}
.btn-block{width:100%}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.ico-sm{width:20px;height:20px}
.ico-lg{width:32px;height:32px}

/* ===================== Animations ===================== */
@keyframes pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===================== HERO ===================== */
.hero{position:relative;min-height:70vh;display:flex;align-items:center;background:linear-gradient(135deg,#1e3a8a,#1e40af 45%,#312e81);overflow:hidden}
.hero>*{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;opacity:.2}
.hero-bubble{position:absolute;width:18rem;height:18rem;border-radius:50%;filter:blur(40px);mix-blend:screen;animation:pulse 6s ease-in-out infinite}
.hero-bubble--1{top:20%;left:25%;background:#60a5fa}
.hero-bubble--2{top:70%;right:22%;background:#818cf8;animation-delay:1s}
.hero-bubble--3{bottom:25%;left:55%;background:#c084fc;animation-delay:2s}

.hero-headline{max-width:900px;margin:0 auto;text-align:center;color:#fff;animation:fadeIn .8s ease forwards}
.pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:8px 14px;border-radius:999px;margin-bottom:18px}
.pill .ico{color:#fb923c}
.title{font-size:52px;line-height:1.05;font-weight:900;margin:0 0 14px}
.title-gradient{display:block;background:linear-gradient(90deg,#fb923c,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-size:20px;color:#dbeafe;margin:0 auto 26px;max-width:760px}

.hero-badges{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:10px 14px}
.badge .ico{color:#fb923c}
.badge strong{font-weight:800}
.badge span{color:#dbeafe}

.hero-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}

.hero-logos{text-align:center;color:#d1e0ff}
.hero-logos p{margin:0 0 10px}
.logos-row{display:flex;align-items:center;justify-content:center;gap:16px;opacity:.7}
.logos-row i{display:inline-block;width:6px;height:6px;background:#fff;border-radius:50%}

.scroll-indicator{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:28px;height:48px;border-radius:22px;border:2px solid rgba(255,255,255,.35);background:transparent;display:flex;justify-content:center;align-items:flex-start;cursor:pointer;animation:bounce 1.8s infinite}
.scroll-indicator span{display:block;width:4px;height:12px;border-radius:3px;background:#fff;margin-top:8px}

/* ===================== CARDS / FEATURES ===================== */
.grid.grid-3{gap:24px}
@media (min-width:1200px){.grid.grid-3{gap:28px}}

.card{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:24px;transition:.3s transform,.3s box-shadow}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-3)}
.card h3{margin:10px 0 8px;font-size:20px;font-weight:800;color:#0f172a}
.card p{margin:0 0 12px;color:var(--muted)}
.card-ico{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;color:#fff}
.gradient-blue{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
.gradient-green{background:linear-gradient(90deg,#22c55e,#10b981)}
.gradient-purple{background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.gradient-orange{background:linear-gradient(90deg,#f97316,#ef4444)}
.gradient-indigo{background:linear-gradient(90deg,#6366f1,#8b5cf6)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:24px;color:#334155;margin:6px 0}
.checklist li::before{content:"✔";position:absolute;left:0;top:0;color:#22c55e}

/* ===================== KPI ===================== */
.kpi{margin-top:42px;text-align:center;background:linear-gradient(90deg,#2563eb,#4f46e5);padding:32px;border-radius:24px;color:#fff;box-shadow:var(--shadow-2)}
.kpi h3{margin:0 0 20px;font-size:28px;font-weight:800}
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 18px}
.kpi-item{background:rgba(255,255,255,.12);border-radius:16px;padding:18px}
.kpi-num{font-size:34px;font-weight:900;color:#fb923c;margin-bottom:6px}
.kpi-label{color:#dbeafe}

/* ===================== Facts ===================== */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:28px}
.fact{text-align:center}
.fact-num{font-weight:900;font-size:38px;background:linear-gradient(90deg,#2563eb,#4f46e5);-webkit-background-clip:text;background-clip:text;color:transparent}
.fact-label{color:var(--muted);font-weight:600}

/* ===================== Testimonials ===================== */
.t-card{position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-2);padding:24px;transition:.3s transform,.3s box-shadow}
.t-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-3)}
.t-quote{position:absolute;right:16px;top:16px;opacity:.08;width:48px;height:48px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg>') no-repeat center/contain}
.t-stars{color:#fbbf24;letter-spacing:.2em;margin-bottom:8px}
.t-text{color:#334155;font-style:italic;line-height:1.7;margin-bottom:14px}
.t-user{display:flex;align-items:center;gap:12px}
.t-avatar{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(90deg,#3b82f6,#4f46e5)}
.t-name{font-weight:800;color:#0f172a}
.t-role{font-size:.95rem;color:var(--muted)}
.t-org{font-size:.95rem;color:#2563eb;font-weight:700}

/* ===================== Trust ===================== */
.trust{margin-top:60px;text-align:center;border:2px solid #bbf7d0;border-radius:24px;background:linear-gradient(135deg,#ecfdf5,#f0fdf4);padding:28px}
.trust h3{margin:0 0 10px;font-size:24px;font-weight:900;color:#0f172a}
.trust p{color:#374151;margin:0 0 14px}
.trust-bullets{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;color:#6b7280;font-weight:600}
.trust-bullets span::before{content:"●";color:#22c55e;margin-right:8px}

/* ===================== Contact / Form ===================== */
#contact .grid.grid-2{gap:32px}
@media (min-width:1200px){#contact .grid.grid-2{gap:40px}}

.form-card{background:rgba(255,255,255,.92);border-radius:var(--radius);box-shadow:var(--shadow-3);overflow:hidden}
.form-card__head{padding:20px 24px;background:linear-gradient(90deg,#2563eb,#4f46e5);color:#fff}
.form-card__head h3{display:flex;align-items:center;gap:10px;margin:0;font-weight:900}
.form{padding:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.95rem;font-weight:700;color:#111827}
.field input,.field textarea{border:2px solid #e5e7eb;border-radius:12px;padding:12px 14px;font-size:1rem;outline:none;transition:.2s border-color,.2s box-shadow;background:#fff}
.field input:focus,.field textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.helper{text-align:center;color:#6b7280;font-size:.9rem}

.stack{display:flex;flex-direction:column;gap:28px}
.contact-card{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-2)}
.contact-card h3{margin:0 0 16px;font-size:22px;font-weight:900}
.contact-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.contact-ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.1rem}
.contact-label{font-weight:700}
.contact-val{color:#bfdbfe}

.demo-points{background:#fff7ed;border:2px solid #fed7aa;border-radius:var(--radius);padding:24px}
.demo-points h3{margin:0 0 12px;font-size:18px;font-weight:900;color:#0f172a}
.demo-points ul{margin:0;padding-left:18px}
.demo-points li{margin:8px 0;color:#374151}

/* ===================== Footer ===================== */
.footer{color:#fff;background:linear-gradient(180deg,#0f172a,#000)}
.footer .container{padding-top:96px;padding-bottom:96px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.footer-brand .brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.brand-ico{width:40px;height:40px;border-radius:10px;background:linear-gradient(90deg,#f97316,#ef4444);display:grid;place-items:center}
.footer-brand .brand span{font-size:26px;font-weight:900}
.footer-brand p{color:#cbd5e1;max-width:520px;margin-bottom:24px}
.footer h4{margin:0 0 12px;font-size:18px;font-weight:800}
.footer-list{list-style:none;margin:0;padding:0;color:#cbd5e1}
.footer-list li{margin:8px 0}
.footer-bottom{border-top:1px solid #1f2937;margin-top:32px;padding-top:24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;color:#94a3b8;font-size:.95rem}
.footer-links{display:flex;gap:16px}
.footer-links a{color:#94a3b8}
.footer-links a:hover{color:#fb923c}

.cta-strip{background:linear-gradient(90deg,#f97316,#ef4444);padding:10px 0;height:80px}
.cta-strip__row{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff}
.cta-strip .muted{opacity:.85}

/* ===================== Responsive ===================== */
@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .title{font-size:38px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:2fr 2fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ===================== CTA strip tidy (mobile-friendly) ===================== */
.cta-strip{background:linear-gradient(90deg,#f97316,#ef4444);height:auto;padding:16px 0;margin-top:32px;border-top:1px solid rgba(255,255,255,.12)}
.cta-strip>.container{width:100%;padding:0 24px}
.cta-strip__row{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;width:100%;min-width:0;flex-wrap:wrap}
.cta-strip__row strong{white-space:nowrap}
.cta-strip__row .btn{padding:10px 16px;white-space:nowrap}
@media (max-width:768px){
  .cta-strip__row{flex-direction:column;align-items:flex-start;gap:12px}
  .cta-strip__row .btn{width:100%;text-align:center}
}
.footer .container{padding-bottom:64px}

/* ===================== THEME VIOLET ===================== */
:root{
  --muted:#4b5563;--muted-2:#6b7280;
  --primary:#6b3efd;--primary-2:#5530e8;--accent:#6b3efd;--accent-2:#5530e8;
  --soft:#e5e7eb;
}
.hero{background:linear-gradient(135deg,#3b2bb7,#5530e8 45%,#321f86)}
.hero-bubble--1{background:#7c5cff}
.hero-bubble--2{background:#6b3efd}
.hero-bubble--3{background:#9b7bff}
.pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.pill .ico{color:#c7b7ff}
.title-gradient{background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:#e5e7ff}
.btn-primary{color:#fff;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 20px 40px rgba(107,62,253,.25)}
.btn-light{background:#fff;color:var(--primary)}
.badge .ico{color:var(--soft)}
.card{background:rgba(255,255,255,.92)}
.card p{color:#475569}
.checklist li::before{color:var(--primary)}
.gradient-blue{background:linear-gradient(90deg,#6b3efd,#5530e8)}
.gradient-green{background:linear-gradient(90deg,#7f6bff,#5530e8)}
.gradient-purple{background:linear-gradient(90deg,#7c5cff,#6b3efd)}
.gradient-orange{background:linear-gradient(90deg,#6b3efd,#5530e8)}
.gradient-indigo{background:linear-gradient(90deg,#6b3efd,#7c5cff)}
.kpi{background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.kpi-num{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.1)}
.kpi-label{color:#e9e5ff}
.fact-num{background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.t-quote{opacity:.08;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%236b3efd" stroke-width="2"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg>')}
.trust{border-color:#dcd5ff;background:linear-gradient(135deg,#f6f5ff,#f1efff)}
.trust-bullets span::before{color:var(--primary)}
.form-card__head{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}
.field input,.field textarea{border-color:#e9e9ff}
.field input:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(107,62,253,.15)}
.contact-card{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.contact-val{color:#e5e7ff}
.demo-points{background:#faf8ff;border-color:#e8e2ff}
.footer{background:linear-gradient(180deg,#0d0a1a,#1a1147 60%,#120b36)}
.brand-ico{background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.footer-links a:hover{color:var(--primary)}
.cta-strip{background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.cta-strip__row .btn{color:var(--primary)}
.hero-logos{color:#e5e7ff}
.logos-row i{background:#e5e7ff;opacity:.7}

/* ===================== Demo Video (CTA à la fin) ===================== */
.video-card{background:rgba(255,255,255,.92);border-radius:20px;box-shadow:var(--shadow-3);border:1px solid rgba(99,102,241,.15);overflow:hidden}
.video-card__frame{position:relative;aspect-ratio:16/9;background:
  radial-gradient(120% 120% at 10% 0%,rgba(107,62,253,.20),transparent 40%),
  radial-gradient(120% 120% at 90% 100%,rgba(85,48,232,.18),transparent 40%),
  #0b1020;overflow:hidden}
.video-card__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
#demoBtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:auto;display:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.video-card__frame.is-ended #demoBtn{display:inline-flex}
.video-card__frame.is-ended video{pointer-events:none}

#why .card-ico svg{stroke:#fff;fill:none}
.video-card__meta{padding:16px 18px;border-top:1px solid rgba(15,23,42,.06)}
.video-card__meta h3{margin:0 0 6px;font-size:18px;font-weight:900;color:#0f172a}
.video-card__meta p{margin:0;color:var(--muted)}
.video-copy h2{font-size:32px;margin:0 0 12px;font-weight:900;color:#111827}
.video-copy h2 span{background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}