/* ============================================================
   KANZ AI France — Design System
   Inspired by Roodix: Indigo/Purple · Light theme · Modern SaaS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg: #f8fafc;
  --bg-white: #ffffff;
  --bg-dark: #0f172a;
  --bg-card: #ffffff;
  --bg-card-alt: #f1f5f9;
  --bg-muted: #f4f4f5;
  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --primary: #4f46e5;
  --primary-light: #6366f1;
  --primary-dark: #4338ca;
  --primary-glow: rgba(79,70,229,0.12);
  --primary-glow-strong: rgba(79,70,229,0.25);
  --purple: #9333ea;
  --gradient: linear-gradient(135deg, #4f46e5, #9333ea);
  --gradient-text: linear-gradient(135deg, #4f46e5, #7c3aed, #9333ea);
  --gradient-hero: radial-gradient(ellipse at 30% 0%, rgba(79,70,229,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(147,51,234,0.05) 0%, transparent 50%);
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1200px;
  --section-pad: 100px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.07), 0 4px 10px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.04);
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --transition-slow: .4s cubic-bezier(.16,1,.3,1);
}

/* Dark theme */
body.dark-theme {
  --bg: #0f172a;
  --bg-white: #1e293b;
  --bg-card: #1e293b;
  --bg-card-alt: #334155;
  --bg-muted: #1e293b;
  --border: rgba(255,255,255,.1);
  --border-hover: rgba(255,255,255,.18);
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #64748b;
  --primary-glow: rgba(99,102,241,.2);
  --primary-glow-strong: rgba(99,102,241,.35);
  --gradient-hero: radial-gradient(ellipse at 30% 0%, rgba(79,70,229,.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(147,51,234,.1) 0%, transparent 50%);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 4px 6px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.3);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.35);
}
body.dark-theme .navbar.scrolled { background: rgba(15,23,42,.85); }
body.dark-theme .hero__title,
body.dark-theme .cta-section__title,
body.dark-theme .about-hero h1,
body.dark-theme .services-hero h1,
body.dark-theme .blog-hero h1,
body.dark-theme .contact-hero h1,
body.dark-theme .legal-page h1 {
  background: linear-gradient(135deg, #c7d2fe 0%, #e9d5ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Reset */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* Container */
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
.section { padding:var(--section-pad) 0; position:relative; }
.section__header { text-align:center; max-width:680px; margin:0 auto 64px; }
.section__badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:var(--radius-pill); background:var(--primary-glow); border:1px solid rgba(79,70,229,.15); color:var(--primary); font-size:.8125rem; font-weight:600; margin-bottom:20px; }
.section__title { font-size:clamp(2rem,4vw,2.75rem); font-weight:800; line-height:1.15; letter-spacing:-.03em; margin-bottom:16px; color:var(--text); }
.section__subtitle { font-size:1.0625rem; color:var(--text-3); line-height:1.7; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:var(--radius-pill); font-size:.9375rem; font-weight:600; transition:all var(--transition); white-space:nowrap; }
.btn--primary { background:var(--primary); color:#fff; box-shadow:0 4px 14px var(--primary-glow-strong); }
.btn--primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 25px var(--primary-glow-strong); }
.btn--ghost { background:var(--bg-white); color:var(--text); border:1px solid var(--border); }
.btn--ghost:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.btn--outline { background:transparent; color:var(--text); border:1px solid var(--border); padding:12px 24px; }
.btn--outline:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow); }
.btn--small { padding:10px 20px; font-size:.875rem; }
.btn--full { width:100%; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:16px 0; transition:all var(--transition); }
.navbar.scrolled { padding:10px 0; background:rgba(248,250,252,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.navbar__inner { display:flex; align-items:center; justify-content:space-between; max-width:var(--container); margin:0 auto; padding:0 24px; }
.navbar__logo { display:flex; align-items:center; gap:2px; font-size:1.5rem; font-weight:800; letter-spacing:-.04em; z-index:1001; }
.navbar__logo-text { color:var(--text); }
.navbar__logo-accent { color:var(--primary); position:relative; }
.navbar__logo-sparkle { position:absolute; top:-4px; right:-10px; font-size:.6rem; animation:sparkle 2s ease-in-out infinite; }
@keyframes sparkle { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
.navbar__links { display:flex; align-items:center; gap:32px; }
.navbar__link { font-size:.875rem; font-weight:500; color:var(--text-3); transition:color var(--transition); position:relative; }
.navbar__link:hover { color:var(--text); }
.navbar__link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--primary); transition:width var(--transition); border-radius:1px; }
.navbar__link:hover::after { width:100%; }
.navbar__actions { display:flex; align-items:center; gap:12px; }
.navbar__login { font-size:.875rem; font-weight:500; color:var(--text-3); transition:color var(--transition); padding:8px 16px; }
.navbar__login:hover { color:var(--text); }
.lang-toggle { background:var(--bg-white); border:1px solid var(--border); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; font-weight:700; color:var(--text-3); transition:all var(--transition); }
.lang-toggle:hover { border-color:var(--primary); color:var(--primary); }
.navbar__toggle { display:none; flex-direction:column; gap:5px; padding:8px; z-index:1001; }
.navbar__toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all var(--transition); }
.navbar__toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar__toggle.active span:nth-child(2) { opacity:0; }
.navbar__toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.navbar__mobile { display:none; position:fixed; inset:0; background:rgba(248,250,252,.97); backdrop-filter:blur(20px); z-index:1000; flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.navbar__mobile.open { display:flex; }
.navbar__mobile a { font-size:1.5rem; font-weight:600; color:var(--text-3); transition:color var(--transition); }
.navbar__mobile a:hover { color:var(--text); }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; padding-top:100px; padding-bottom:80px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:var(--gradient-hero); pointer-events:none; }
.hero__grid-bg { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(79,70,229,.04) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%); pointer-events:none; }
.hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
.hero__content { max-width:560px; }
.hero__badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:var(--radius-pill); background:var(--primary-glow); border:1px solid rgba(79,70,229,.15); color:var(--primary); font-size:.8125rem; font-weight:600; margin-bottom:28px; }
.hero__title { font-size:clamp(2.5rem,5.5vw,3.75rem); font-weight:900; line-height:1.08; letter-spacing:-.04em; margin-bottom:20px; }
.hero__title .gradient-text { background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero__subtitle { font-size:1.125rem; color:var(--text-3); line-height:1.7; margin-bottom:36px; max-width:480px; }
.hero__ctas { display:flex; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.hero__trust { display:flex; gap:20px; flex-wrap:wrap; font-size:.8125rem; color:var(--text-4); }
.hero__trust span { display:flex; align-items:center; gap:6px; }
.hero__trust .check { color:var(--green); font-weight:700; }

/* Mockup */
.hero__mockup { position:relative; }
.mockup { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xl); }
.mockup__bar { display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--bg-muted); border-bottom:1px solid var(--border); }
.mockup__dots { display:flex; gap:6px; }
.mockup__dot { width:8px; height:8px; border-radius:50%; }
.mockup__dot--red { background:#FF5F57; }
.mockup__dot--yellow { background:#FEBC2E; }
.mockup__dot--green { background:#28C840; }
.mockup__url { flex:1; text-align:center; font-size:.75rem; color:var(--text-4); }
.mockup__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.stat-card { background:var(--bg-card); padding:16px; text-align:center; }
.stat-card__label { font-size:.6875rem; color:var(--text-4); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.stat-card__value { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.stat-card__value--green { color:var(--green); }
.stat-card__value--blue { color:var(--primary); }
.stat-card__value--purple { color:var(--purple); }
.mockup__chat { padding:20px 16px; display:flex; flex-direction:column; gap:12px; min-height:240px; }
.chat-msg { max-width:85%; padding:10px 14px; border-radius:12px; font-size:.8125rem; line-height:1.5; opacity:0; transform:translateY(10px); }
.chat-msg.visible { opacity:1; transform:translateY(0); transition:all .4s cubic-bezier(.16,1,.3,1); }
.chat-msg--user { align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.chat-msg--ai { align-self:flex-start; background:var(--bg-muted); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-msg__sender { font-size:.6875rem; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.chat-msg__sender--user { color:rgba(255,255,255,.8); }
.chat-msg__sender--ai { color:var(--primary); }
.chat-typing { display:flex; gap:4px; padding:10px 14px; align-self:flex-start; opacity:0; }
.chat-typing.visible { opacity:1; }
.chat-typing span { width:6px; height:6px; background:var(--text-4); border-radius:50%; animation:typing-bounce 1.4s infinite; }
.chat-typing span:nth-child(2) { animation-delay:.2s; }
.chat-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes typing-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-8px)} }

/* Comparison */
.comparison { background:var(--bg-white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.comparison__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:64px; }
.comparison__card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 24px; text-align:center; transition:all var(--transition); }
.comparison__card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.comparison__card--highlight { border-color:rgba(79,70,229,.3); background:linear-gradient(180deg,rgba(79,70,229,.04) 0%,var(--bg-card) 100%); box-shadow:0 0 40px var(--primary-glow); }
.comparison__icon { font-size:2.5rem; margin-bottom:16px; }
.comparison__card-title { font-size:1.25rem; font-weight:700; margin-bottom:12px; letter-spacing:-.02em; }
.comparison__card-desc { font-size:.9375rem; color:var(--text-3); line-height:1.6; }

/* Features */
.features__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 28px; transition:all var(--transition); position:relative; overflow:hidden; }
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); opacity:0; transition:opacity var(--transition); }
.feature-card:hover { border-color:var(--border-hover); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feature-card:hover::before { opacity:1; }
.feature-card__icon { font-size:2rem; margin-bottom:20px; display:inline-block; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--primary-glow); }
.feature-card__title { font-size:1.125rem; font-weight:700; margin-bottom:12px; letter-spacing:-.01em; }
.feature-card__desc { font-size:.9375rem; color:var(--text-3); line-height:1.7; }

/* Pricing */
.pricing { background:var(--bg-white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pricing__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; max-width:960px; margin:0 auto; }
.pricing-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px 32px; transition:all var(--transition); position:relative; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pricing-card--featured { border-color:rgba(79,70,229,.3); background:var(--bg-dark); color:#fff; box-shadow:var(--shadow-xl); }
.pricing-card--featured .pricing-card__period,
.pricing-card--featured .pricing-card__feature { color:rgba(255,255,255,.7); }
.pricing-card--featured .check-icon { color:#818cf8; }
.pricing-card--featured .btn--outline { border-color:rgba(255,255,255,.2); color:#fff; }
.pricing-card--featured .btn--outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }
.pricing-card__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:5px 16px; background:var(--gradient); color:#fff; font-size:.75rem; font-weight:700; border-radius:var(--radius-pill); white-space:nowrap; }
.pricing-card__name { font-size:1.25rem; font-weight:700; margin-bottom:8px; }
.pricing-card__price { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; }
.pricing-card__amount { font-size:3rem; font-weight:900; letter-spacing:-.04em; line-height:1; }
.pricing-card__currency { font-size:1.25rem; font-weight:600; color:var(--text-3); }
.pricing-card__unit { font-size:.875rem; color:var(--text-4); }
.pricing-card__period { font-size:.875rem; color:var(--text-4); margin-bottom:28px; }
.pricing-card__features { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.pricing-card__feature { display:flex; align-items:flex-start; gap:10px; font-size:.875rem; color:var(--text-3); line-height:1.5; }
.pricing-card__feature .check-icon { color:var(--primary); flex-shrink:0; margin-top:2px; font-weight:700; }

/* CTA */
.cta-section { position:relative; overflow:hidden; background:var(--bg-dark); }
.cta-section__bg { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(79,70,229,.2) 0%,transparent 60%),radial-gradient(ellipse at 80% 40%,rgba(147,51,234,.1) 0%,transparent 50%); pointer-events:none; }
.cta-section__inner { text-align:center; position:relative; z-index:1; }
.cta-section__title { font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-.04em; line-height:1.1; margin-bottom:16px; color:#fff; background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cta-section__subtitle { font-size:1.0625rem; color:rgba(255,255,255,.7); margin-bottom:40px; max-width:500px; margin-left:auto; margin-right:auto; }
.cta-section__buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* FAQ */
.faq__list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); transition:all var(--transition); overflow:hidden; }
.faq-item:hover { border-color:var(--border-hover); }
.faq-item.open { border-color:rgba(79,70,229,.25); }
.faq-item__question { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; font-size:1rem; font-weight:600; cursor:pointer; user-select:none; gap:16px; }
.faq-item__icon { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-muted); color:var(--text-4); font-size:.875rem; transition:all var(--transition); }
.faq-item.open .faq-item__icon { background:var(--primary-glow); color:var(--primary); transform:rotate(45deg); }
.faq-item__answer { max-height:0; overflow:hidden; transition:max-height var(--transition-slow); }
.faq-item.open .faq-item__answer { max-height:300px; }
.faq-item__answer-inner { padding:0 24px 20px; font-size:.9375rem; color:var(--text-3); line-height:1.7; }

/* Footer */
.footer { padding:80px 0 40px; background:var(--bg-white); border-top:1px solid var(--border); }
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:60px; }
.footer__brand-desc { font-size:.875rem; color:var(--text-4); line-height:1.7; margin-top:16px; max-width:280px; }
.footer__col-title { font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-4); margin-bottom:20px; }
.footer__col a { display:block; font-size:.9rem; color:var(--text-3); padding:6px 0; transition:color var(--transition); }
.footer__col a:hover { color:var(--primary); }
.footer__bottom { border-top:1px solid var(--border); padding-top:24px; text-align:center; font-size:.8125rem; color:var(--text-4); line-height:1.8; }

/* Scroll Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.stagger-children .reveal { transition-delay:calc(var(--i,0) * .1s); }

/* Responsive */
@media(max-width:1024px) {
  :root { --section-pad:80px; }
  .hero__inner { grid-template-columns:1fr; gap:48px; text-align:center; }
  .hero__content { max-width:600px; margin:0 auto; }
  .hero__subtitle { max-width:100%; }
  .hero__ctas,.hero__trust { justify-content:center; }
  .hero__mockup { max-width:520px; margin:0 auto; }
  .comparison__grid { grid-template-columns:1fr; max-width:480px; margin:0 auto 48px; }
  .features__grid { grid-template-columns:repeat(2,1fr); }
  .pricing__grid { grid-template-columns:repeat(2,1fr); max-width:700px; margin:0 auto; }
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:640px) {
  :root { --section-pad:64px; }
  .navbar__links,.navbar__login { display:none; }
  .navbar__toggle { display:flex; }
  .hero { padding-top:80px; min-height:auto; padding-bottom:48px; }
  .hero__title { font-size:2.25rem; }
  .hero__ctas { flex-direction:column; }
  .hero__ctas .btn { width:100%; }
  .hero__trust { flex-direction:column; align-items:center; gap:8px; }
  .section__title { font-size:1.75rem; }
  .features__grid { grid-template-columns:1fr; }
  .pricing__grid { grid-template-columns:1fr; max-width:400px; }
  .footer__grid { grid-template-columns:1fr; gap:24px; }
  .mockup__stats { grid-template-columns:repeat(3,1fr); }
  .stat-card { padding:12px 8px; }
  .stat-card__value { font-size:1.125rem; }
}