:root{
  --bg: #f6f8fc;
  --ink: #0b1633;
  --muted: #6b7a94;
  --line: rgba(227,232,244,.9);
  --card: rgba(255,255,255,.78);
  --shadow: 0 18px 60px rgba(16,33,82,.12);
  --shadow2: 0 28px 80px rgba(16,33,82,.18);
  --b1: #2c5bff;
  --b2: #7c3aed;
  --b3: #ec4899;
  --ok: #16a34a;
  --warn: #ef4444;

  /* Variables de parallaxe pour le mouvement de fond */
  --parallaxX: 0px;
  --parallaxY: 0px;
  --mouseX: 50%;
  --mouseY: 50%;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{
  scroll-behavior: smooth;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 70% -10%, rgba(44,91,255,.14), transparent 52%),
              radial-gradient(circle at 15% 18%, rgba(15,181,255,.14), transparent 55%),
              var(--bg);
  overflow-x: hidden;
  letter-spacing: -0.005em;
}

/* Scroll Progress Bar */
#scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3));
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(44,91,255,.5);
}

a{ color: inherit; text-decoration: none; }
.container{ width:min(1100px, 92vw); margin: 0 auto; }

/* Enhanced Cursor Glow */
.cursor-glow{
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(400px 400px at var(--mouseX) var(--mouseY),
    rgba(44,91,255,.22), rgba(124,58,237,.12), transparent 60%);
  mix-blend-mode: multiply;
  opacity: .9;
  transition: opacity .25s ease;
  z-index: 0;
}

/* Live strip */
.live-strip{
  position: relative;
  z-index: 3;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(227,232,244,.7);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}
.live-left{
  display:flex; align-items:center; gap:10px;
  flex: 0 0 auto;
}
.ping{
  width:10px; height:10px; border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: ping 1.5s infinite;
}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.live{ font-weight:800; letter-spacing:.08em; font-size:.75rem; color:#15803d; }
.time{ font-weight:700; color: var(--muted); font-size:.8rem; }

.marquee-wrap{ flex:1; overflow:hidden; }
.marquee{
  display:flex;
  gap: 22px;
  animation: marquee 28s linear infinite;
  width: max-content;
  will-change: transform;
}
.marquee:hover{ animation-play-state: paused; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.marquee-item{
  display:flex; align-items:center; gap:10px;
  white-space: nowrap;
  font-weight: 650;
  font-size:.9rem;
}
.marquee-item strong{ color: var(--ink); font-size:.86rem; }
.marquee-item span{ color: var(--muted); font-weight: 600; font-size:.82rem; }
.marquee-item b{ font-weight: 800; font-size:.86rem; }
.marquee-item.ok{ color: var(--ok); }
.marquee-item.warn{ color: var(--warn); }

/* Navbar */
.nav{
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 0;
  background: transparent;
}
.nav-inner{
  width:min(1200px, 94vw);
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid rgba(227,232,244,.8);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo img,
.logo svg{
  height: auto;
  width: 100px;
  display: block;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text b{ font-size: 1.05rem; }
.brand-text small{ color: var(--muted); font-weight: 650; font-size:.78rem; }

.menu{ display:none; gap: 22px; }
.menu a{
  color: var(--muted);
  font-weight: 650;
  font-size: .93rem;
  position: relative;
  transition: color 0.3s ease;
}
.menu a:hover{ color: var(--b1); }
.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(44,91,255,.0), rgba(44,91,255,.55), rgba(236,72,153,.0));
  opacity:0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.menu a:hover::after{
  opacity:1;
  transform: translateY(0);
}

.nav-cta{ display:flex; align-items:center; gap: 12px; }
.link{ color: var(--b1); font-weight: 750; font-size:.92rem; }
.link:hover{ opacity:.8; }

/* Enhanced Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(227,232,244,.9);
  padding: 10px 14px;
  font-weight: 750;
  cursor:pointer;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .25s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.45), transparent 45%);
  opacity: 0;
  transition: opacity .25s ease;
}
.btn:hover::before{ opacity: 1; }

.btn.primary{
  border: none;
  color: white;
  background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3));
  background-size: 200% 200%;
  box-shadow: 0 16px 30px rgba(44,91,255,.22);
  animation: btnGrad 4s ease infinite;
}
@keyframes btnGrad{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.btn.primary:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 44px rgba(124,58,237,.22);
}
.btn.ghost{
  background: rgba(255,255,255,.75);
  color: var(--ink);
}
.btn.ghost:hover{ transform: translateY(-3px) scale(1.02); }

.btn.big{ padding: 12px 18px; border-radius: 14px; }
.hamburger{
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(227,232,244,.9);
  background: rgba(255,255,255,.75);
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap: 5px;
  padding: 0 12px;
  cursor:pointer;
}
.hamburger span{
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  display:block;
}

.mobile-menu{
  width:min(1200px, 94vw);
  margin: 10px auto 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(227,232,244,.85);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow);
  display:none;
  flex-direction:column;
  gap: 10px;
}
.mobile-menu a{ padding: 10px 10px; border-radius: 12px; color: var(--muted); font-weight: 700; }
.mobile-menu a:hover{ background: rgba(44,91,255,.08); color: var(--b1); }

@media (min-width: 980px){
  .menu{ display:flex; }
  .hamburger{ display:none; }
  .mobile-menu{ display:none !important; }
}

/* Hero */
.hero{ position: relative; z-index: 1; padding: 26px 0 10px; }
.hero-bg{
  position:absolute; inset:-120px -120px auto -120px;
  height: 520px;
  background: radial-gradient(circle at 70% 20%, rgba(44,91,255,.20), transparent 55%),
              radial-gradient(circle at 30% 20%, rgba(236,72,153,.14), transparent 55%);
  filter: blur(6px);
  z-index: -1;
  transform: translate(var(--parallaxX), var(--parallaxY));
  transition: transform .25s ease-out;
  will-change: transform;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  padding: 44px 0 40px;
}
@media (min-width: 980px){
  .hero-grid{ grid-template-columns: 1.12fr .88fr; gap: 34px; }
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(44,91,255,.10);
  border: 1px solid rgba(44,91,255,.16);
  color: #2250ff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 750;
  font-size: .86rem;
  box-shadow: 0 8px 18px rgba(16,33,82,.06);
}
.spark{ filter: drop-shadow(0 10px 18px rgba(44,91,255,.25)); }

h1{
  margin: 14px 0 12px;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.grad{
  background: linear-gradient(90deg, var(--b1), var(--b2), var(--b3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradmove 4s ease infinite;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(44,91,255,.35);
}
.grad2{
  background: linear-gradient(90deg, #06b6d4, var(--b1), var(--b2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes gradmove{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.lead{
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
  text-wrap: pretty;
}

.hero-actions{ display:flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.kpis{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media(min-width: 700px){
  .kpis{ grid-template-columns: repeat(3, 1fr); }
}
.kpi{
  background: var(--card);
  border: 1px solid rgba(227,232,244,.85);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(16,33,82,.08);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1), border-color .45s ease;
  will-change: transform;
}
.kpi:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 22px 65px rgba(16,33,82,.14),
    0 0 0 1px rgba(44,91,255,.16) inset;
  border-color: rgba(44,91,255,.22);
}
.kpi-num{ font-weight: 900; font-size: 1.05rem; }
.kpi-label{ color: var(--muted); font-weight: 650; font-size: .9rem; margin-top: 4px; }

.grad-text{ background: linear-gradient(90deg, var(--b1), #06b6d4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-text2{ background: linear-gradient(90deg, var(--b2), var(--b3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-text3{ background: linear-gradient(90deg, var(--b3), #f97316); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Enhanced Mock */
.mock{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(227,232,244,.9);
  border-radius: 22px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1);
  will-change: transform;
}
.mock:hover{
  box-shadow:
    0 22px 65px rgba(16,33,82,.14),
    0 0 0 1px rgba(44,91,255,.16) inset;
}
.mock-top{
  display:flex; align-items:center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(227,232,244,.9);
  background: rgba(255,255,255,.92);
}
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.r{ background:#fb7185; }
.dot.y{ background:#fbbf24; }
.dot.g{ background:#22c55e; }
.mock-title{ margin-left: 8px; color: var(--muted); font-weight: 750; font-size:.9rem; }
.mock-body{ padding: 16px; display:flex; flex-direction:column; gap: 14px; }
.mini-row{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width: 560px){ .mini-row{ grid-template-columns: 1fr 1fr; } }

.mini-card{
  display:flex; align-items:center; gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(227,232,244,.9);
  background: rgba(255,255,255,.55);
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1), border-color .45s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.mini-card:hover{
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(44,91,255,.22);
  box-shadow: 0 18px 50px rgba(16,33,82,.10);
}
.ic{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(44,91,255,.16), rgba(124,58,237,.10));
  color: #244cff;
}
.ic svg{ width: 20px; height: 20px; }

.mini-card b{ display:block; font-weight: 850; }
.mini-card small{ display:block; color: var(--muted); font-weight: 650; margin-top: 1px; }

.mock-graph{
  border-radius: 18px;
  border: 1px solid rgba(227,232,244,.9);
  background: rgba(255,255,255,.72);
  padding: 14px;
}
.mock-graph-title{
  font-weight: 800;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 10px;
}
.sparkline{ width:100%; height: 160px; display:block; }
.sparkline .grid{ stroke: rgba(107,122,148,.22); stroke-width: 1; }
.sparkline .band{ fill: rgba(44,91,255,.10); }
.sparkline .line{
  fill:none;
  stroke: rgba(44,91,255,.85);
  stroke-width: 3;
  filter: drop-shadow(0 10px 18px rgba(44,91,255,.18));
}
.mock-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.tag{
  background: rgba(44,91,255,.10);
  border: 1px solid rgba(44,91,255,.18);
  color: #2250ff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 750;
  font-size: .78rem;
  box-shadow: 0 8px 18px rgba(16,33,82,.06);
}

/* Sections */
.section{ padding: 74px 0; }
.section.alt{
  background: rgba(255,255,255,.55);
  border-top: 1px solid rgba(227,232,244,.9);
  border-bottom: 1px solid rgba(227,232,244,.9);
}
.section-head{ text-align:center; margin-bottom: 32px; }
.section-head h2{
  margin:0;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.25em;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(44,91,255,.0), rgba(44,91,255,.45), rgba(236,72,153,.0));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
  border-radius: 999px;
}
.section-head h2:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.section-head p{
  margin: 10px auto 0;
  max-width: 70ch;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.7;
  text-wrap: pretty;
}

.grid3{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media(min-width: 920px){
  .grid3{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.feature,.model{
  background: var(--card);
  border: 1px solid rgba(227,232,244,.9);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(16,33,82,.08);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1), border-color .45s ease;
  will-change: transform;
}
.feature:hover,
.model:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 22px 65px rgba(16,33,82,.14),
    0 0 0 1px rgba(44,91,255,.16) inset;
  border-color: rgba(44,91,255,.22);
}
.feature h3,.model h3{ margin: 8px 0 8px; }
.feature p{ margin:0; color: var(--muted); font-weight: 650; line-height:1.7; }

.feature-ic{ display:flex; justify-content:center; }
.bubble{
  display:grid; place-items:center;
  width: 52px; height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(44,91,255,.16), rgba(124,58,237,.10));
  border: 1px solid rgba(44,91,255,.18);
  font-size: 22px;
}

.model ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-weight: 650; line-height: 1.8; }
.chip{
  margin-top: 14px;
  display:inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(236,72,153,.10);
  border: 1px solid rgba(236,72,153,.18);
  color: #b4236a;
  font-weight: 800;
  font-size: .82rem;
  box-shadow: 0 8px 18px rgba(16,33,82,.06);
}

/* Steps */
.steps{ list-style:none; padding:0; margin: 0; display:flex; flex-direction:column; gap: 14px; }
.step{
  display:grid;
  grid-template-columns: 56px 1fr 62px;
  gap: 12px;
  align-items:center;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(227,232,244,.9);
  background: var(--card);
  box-shadow: 0 12px 40px rgba(16,33,82,.08);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1), border-color .45s ease;
  will-change: transform;
}
.step:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 22px 65px rgba(16,33,82,.14),
    0 0 0 1px rgba(44,91,255,.16) inset;
  border-color: rgba(44,91,255,.22);
}
.step:hover .step-n,
.step:hover .step-ic {
  background: linear-gradient(90deg, rgba(44,91,255,.18), rgba(124,58,237,.14));
  border-color: rgba(44,91,255,.25);
  box-shadow: 0 8px 18px rgba(44,91,255,.12);
}
.step-n{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(90deg, rgba(44,91,255,.14), rgba(124,58,237,.10));
  border: 1px solid rgba(44,91,255,.18);
  font-weight: 900;
  color: #244cff;
  transition: all .45s cubic-bezier(.25, 1, .5, 1);
}
.step-body h3{ margin: 0 0 4px; }
.step-body p{ margin: 0; color: var(--muted); font-weight: 650; line-height:1.7; }
.step-ic{
  width: 52px; height: 52px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(227,232,244,.9);
  color: var(--ink);
  transition: all .45s cubic-bezier(.25, 1, .5, 1);
}
.step-ic svg{ width: 22px; height: 22px; }

/* CTA */
.cta{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(227,232,244,.9);
  background: var(--card);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1), border-color .45s ease;
  will-change: transform;
}
.cta:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 22px 65px rgba(16,33,82,.14),
    0 0 0 1px rgba(44,91,255,.16) inset;
  border-color: rgba(44,91,255,.22);
}
@media(min-width: 980px){ .cta{ grid-template-columns: 1.15fr .85fr; } }

.cta-left h2{ margin:0 0 8px; }
.cta-left p{ margin:0; color: var(--muted); font-weight:650; line-height:1.7; }
.cta-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(44,91,255,.10);
  border: 1px solid rgba(44,91,255,.18);
  color:#2250ff;
  font-weight: 800;
  font-size:.85rem;
  box-shadow: 0 8px 18px rgba(16,33,82,.06);
}
.cta-box{
  border-radius: 20px;
  border: 1px solid rgba(227,232,244,.9);
  background: rgba(255,255,255,.78);
  overflow:hidden;
}
.cta-box-top{ padding: 14px; border-bottom: 1px solid rgba(227,232,244,.9); }
.cta-box-top b{ display:block; font-size: 1rem; }
.cta-box-top span{ display:block; color: var(--muted); font-weight:650; margin-top:4px; }
.cta-box-body{ padding: 14px; display:flex; flex-direction:column; gap: 10px; }
.meter{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.meter span{ color: var(--muted); font-weight: 750; }
.bar{
  flex:1;
  height: 10px;
  border-radius: 999px;
  background: rgba(107,122,148,.18);
  overflow:hidden;
}
.bar i{
  display:block; height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--b1), var(--b2));
}

/* Contact form */
.contact{ padding-bottom: 90px; }
.form{
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(227,232,244,.9);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), box-shadow .45s cubic-bezier(.25, 1, .5, 1), border-color .45s ease;
  will-change: transform;
}
.form:hover{
  box-shadow:
    0 22px 65px rgba(16,33,82,.14),
    0 0 0 1px rgba(44,91,255,.16) inset;
  border-color: rgba(44,91,255,.22);
}
.row{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 12px; }
label{ font-weight: 800; font-size:.9rem; color: var(--muted); }
input,select,textarea{
  border-radius: 14px;
  border: 1px solid rgba(227,232,244,.95);
  background: rgba(255,255,255,.82);
  padding: 12px 12px;
  font: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(44,91,255,.35);
  box-shadow: 0 0 0 4px rgba(44,91,255,.12);
}
.fine{ margin: 10px 0 0; color: var(--muted); font-weight: 650; font-size:.86rem; }

/* Footer */
.footer{
  padding: 26px 0;
  border-top: 1px solid rgba(227,232,244,.9);
  background: rgba(255,255,255,.65);
}
.foot{
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:flex-start;
}
.foot b{ font-size: 1.05rem; }
.foot small{ display:block; color: var(--muted); font-weight: 650; margin-top: 4px; }
.foot-links{ display:flex; gap: 14px; flex-wrap:wrap; color: var(--muted); font-weight: 700; }
.foot-links a:hover{ color: var(--b1); }
.copy{ color: rgba(107,122,148,.9); font-weight: 650; }

/* Tooltip */
.tooltip{
  position: fixed;
  z-index: 999;
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(227,232,244,.95);
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 50px rgba(16,33,82,.18);
  color: var(--ink);
  font-weight: 750;
  font-size: .85rem;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .2s ease, transform .2s ease;
}

/* Enhanced Reveal Animations */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.25, 1, .5, 1), transform .8s cubic-bezier(.25, 1, .5, 1);
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }

/* 3D tilt base */
.card-tilt{
  will-change: transform;
  transform-style: preserve-3d;
}

/* Magnetic feel */
.magnetic{
  will-change: transform;
}

/* Focus accessible (clavier) */
:where(a, button, input, select, textarea):focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(44,91,255,.18);
  border-color: rgba(44,91,255,.28);
  border-radius: 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee{ animation: none !important; }
  .btn.primary{ animation: none !important; }
  .reveal{ transition: none !important; opacity: 1; transform: none; }
  .cursor-glow{ display: none; }
  .hero-bg{ transition: none; }
}

/* Form messages */
.form-msg { margin-top: 10px; font-size: 0.9rem; }
.form-msg.error { color: #b00020; }
.form-msg.success { color: #0a7a2f; }

/* Mobile optimizations */
@media (max-width: 980px){
  .nav-inner{
    border-radius: 18px;
    padding: 10px 12px;
    backdrop-filter: blur(12px) saturate(180%);
  }
  .nav-cta{ gap: 10px; }
  .btn{ padding: 10px 12px; }
  .btn.big{ padding: 12px 14px; }
  .logo img, .logo svg{ width: 92px; }
  .mobile-menu{ display:none; }
  .mobile-menu a{ font-size: .95rem; }
}

@media (hover: none) and (pointer: coarse){
  .cursor-glow{ display:none; }
  .card-tilt, .magnetic{ transform: none !important; }
  .feature:hover, .model:hover, .step:hover, .kpi:hover, .mini-card:hover, .mock:hover, .form:hover, .cta:hover{
    transform: none !important;
  }
  .marquee{ animation-duration: 34s; }
}

@media (max-width: 700px){
  .hero{ padding: 18px 0 6px; }
  .hero-grid{ padding: 26px 0 28px; gap: 20px; }
  h1{ font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.12; }
  .lead{ font-size: 1rem; }
  .kpis{ grid-template-columns: 1fr; }
  .mock-body{ padding: 14px; }
  .sparkline{ height: 140px; }
  .section{ padding: 54px 0; }
  .step{ grid-template-columns: 52px 1fr; grid-template-areas:
    "n body"
    "ic ic";
  }
  .step-n{ grid-area: n; }
  .step-body{ grid-area: body; }
  .step-ic{ grid-area: ic; width: 100%; height: 46px; border-radius: 16px; }
}

@media (max-width: 420px){
  .live-strip{ padding: 8px 10px; gap: 10px; }
  .marquee-item{ font-size: .82rem; gap: 8px; }
  .pill{ font-size: .82rem; padding: 7px 10px; }
  .btn{ border-radius: 14px; }
  .form{ padding: 16px; }
  input,select,textarea{ padding: 11px 11px; }
  .mock{ border-radius: 18px; }
  .feature,.model,.step{ border-radius: 18px; }
}

.lead, .section-head p, .feature p, .step-body p{
  overflow-wrap: anywhere;
}
.mobile-menu.is-open{ display:flex; }
body.menu-open{ overflow:hidden; }

@media (max-width: 979px){
  .nav-cta{ gap: 8px; }
  .nav-cta .link{ display:none !important; }
  .nav-cta a.btn.ghost{ display:none !important; }
  .nav-cta .langToggle{
    display:inline-flex !important;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .nav-cta a.btn.primary{
    display:inline-flex !important;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .logo img, .logo svg{ width: 88px; }
  .nav-inner{ gap: 10px; }
}

@media (max-width: 420px){
  .logo img, .logo svg{ width: 78px; }
  .nav-cta .langToggle{ padding: 7px 9px; font-size: 12.5px; }
  .nav-cta a.btn.primary{ padding: 7px 10px; font-size: 12.5px; }
  .hamburger{ width: 40px; height: 40px; }
}

/* =========================
   AI Assistant Widget
========================= */
.ai-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(20,20,26,.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
}
.ai-fab img{
  width: 28px;
  height: 28px;
  display:block;
}

.ai-panel{
  position: fixed;
  right: 16px;
  bottom: 82px;
  width: min(380px, calc(100vw - 32px));
  height: 520px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(20,20,26,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  display: none;
  z-index: 9999;
}

.ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  color:#fff;
}
.ai-title b{display:block;font-size:14px;}
.ai-title small{opacity:.75;font-size:12px;}
.ai-close{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.ai-suggestions{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  overflow:auto;
}
.ai-chip{
  white-space:nowrap;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-size: 12px;
}

.ai-msgs{
  padding: 12px;
  height: calc(520px - 54px - 52px - 50px);
  overflow:auto;
  color:#fff;
}
.ai-bubble{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
}
.ai-user{ margin-left:auto; background: rgba(99,102,241,.35); }
.ai-bot{ background: rgba(255,255,255,.10); }

.ai-form{
  display:flex;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.06);
}
.ai-form input{
  flex:1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  padding: 10px 12px;
  color:#fff;
  outline:none;
}
.ai-form button{
  border:0;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}

@media (max-width: 520px){
  .ai-panel{ height: 500px; }
  .ai-msgs{ height: calc(500px - 54px - 52px - 50px); }
}

/* =========================
   VentesPro AI Chat (PRO)
========================= */
:root{
  --ai-bg: rgba(15, 15, 22, .88);
  --ai-panel: rgba(255,255,255,.06);
  --ai-border: rgba(255,255,255,.12);
  --ai-text: rgba(255,255,255,.92);
  --ai-muted: rgba(255,255,255,.68);
  --ai-shadow: 0 22px 60px rgba(0,0,0,.45);
  --ai-radius: 18px;
}

.ai-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--ai-border);
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 9999;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ai-fab:hover{ transform: translateY(-2px); box-shadow: 0 20px 55px rgba(0,0,0,.42); }
.ai-fab:active{ transform: translateY(0px) scale(.98); }
.ai-fab img{ width: 28px; height: 28px; display:block; }

/* subtle pulse */
.ai-fab::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.10);
  opacity:.0;
  transform: scale(.9);
  animation: aiPulse 2.4s ease infinite;
  pointer-events:none;
}
@keyframes aiPulse{
  0%{ opacity:0; transform:scale(.92); }
  20%{ opacity:.65; }
  100%{ opacity:0; transform:scale(1.12); }
}

.ai-panel{
  position: fixed;
  right: 16px;
  bottom: 86px;
  width: min(395px, calc(100vw - 32px));
  height: 560px;
  border-radius: var(--ai-radius);
  overflow: hidden;
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  box-shadow: var(--ai-shadow);
  backdrop-filter: blur(14px);
  display: none;
  z-index: 9999;
}

/* header */
.ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--ai-text);
}
.ai-title{
  display:flex;
  align-items:center;
  gap: 10px;
}
.ai-avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.14), rgba(255,255,255,.05));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
}
.ai-title b{ display:block; font-size: 13.5px; letter-spacing:.2px; }
.ai-title small{ display:block; font-size: 11.5px; opacity:.72; margin-top:2px; }

.ai-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #fff;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.ai-close:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }

/* suggestions chips */
.ai-suggestions{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  overflow:auto;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ai-suggestions::-webkit-scrollbar{ height: 8px; }
.ai-suggestions::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }

.ai-chip{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--ai-text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-size: 12px;
  transition: transform .15s ease, background .15s ease;
  white-space: nowrap;
}
.ai-chip:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }

/* messages area */
.ai-msgs{
  padding: 14px 12px;
  height: calc(560px - 54px - 52px - 58px);
  overflow:auto;
}
.ai-msgs::-webkit-scrollbar{ width: 10px; }
.ai-msgs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

/* bubble base */
.ai-bubble{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ai-text);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  animation: aiIn .18s ease both;
}
@keyframes aiIn{
  from{ transform: translateY(6px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

/* user bubble */
.ai-user{
  margin-left:auto;
  background: linear-gradient(135deg, rgba(99,102,241,.34), rgba(236,72,153,.22));
}

/* bot bubble */
.ai-bot{
  background: rgba(255,255,255,.06);
}

/* timestamps (optional if you add later) */
.ai-meta{
  font-size: 11px;
  opacity: .6;
  margin-top: 6px;
}

/* typing dots */
.ai-typing{
  display:inline-flex;
  gap: 5px;
  align-items:center;
}
.ai-dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  animation: aiDot 1s infinite ease-in-out;
}
.ai-dot:nth-child(2){ animation-delay: .15s; }
.ai-dot:nth-child(3){ animation-delay: .3s; }
@keyframes aiDot{
  0%, 80%, 100%{ transform: translateY(0); opacity:.5; }
  40%{ transform: translateY(-3px); opacity:1; }
}

/* input area */
.ai-form{
  display:flex;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.06));
  border-top: 1px solid rgba(255,255,255,.08);
}
.ai-form input{
  flex:1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  padding: 11px 12px;
  color: var(--ai-text);
  outline:none;
}
.ai-form input::placeholder{ color: rgba(255,255,255,.55); }

.ai-form button{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(236,72,153,.22));
  color: var(--ai-text);
  border-radius: 14px;
  padding: 11px 12px;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.ai-form button:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.ai-form button:active{ transform: translateY(0); }

/* mobile */
@media (max-width: 520px){
  .ai-panel{ height: 520px; bottom: 80px; right: 12px; width: calc(100vw - 24px); }
  .ai-fab{ right: 12px; bottom: 12px; }
  .ai-msgs{ height: calc(520px - 54px - 52px - 58px); }
}

/* =========================
   CONTACT SECTION
========================= */
.contact-section{
  padding: 70px 0;
}
.contact-wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: start;
}
.contact-title{
  margin-top: 14px;
  font-size: clamp(22px, 2.3vw, 32px);
}
.contact-desc{
  margin-top: 10px;
  opacity: .85;
  max-width: 52ch;
}
.contact-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.contact-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .18s ease, background .18s ease;
}
.contact-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
}
.cc-ic{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.contact-card b{ display:block; }
.contact-card small{ opacity:.75; display:block; }

.contact-calendly{
  margin-top: 16px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.muted{ opacity:.7; }

.contact-form{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.contact-form textarea{
  width:100%;
  resize: vertical;
  min-height: 120px;
  border-radius: 12px;
}

@media (max-width: 920px){
  .contact-wrap{ grid-template-columns: 1fr; }
}