:root{
  --color-bg:#0A0E1A;
  --color-text:#E5E7EB;
  --color-dim:#8F9BA8;
  --primary:#05DDFA;
  --secondary:#07495F;
  --container:1200px;
  --radius:12px;
  --radius-sm:8px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --shadow-1:0 8px 24px rgba(0,0,0,0.25);
  --shadow-2:0 16px 40px rgba(0,0,0,0.35);
  --border:1px solid rgba(255,255,255,0.08);
  --glass:rgba(255,255,255,0.04);
}

html,body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-6);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:var(--space-6); top:var(--space-6); width:auto;height:auto;
  background:var(--secondary); color:white; padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
}

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,14,26,0.9), rgba(10,14,26,0.6) 70%, rgba(10,14,26,0));
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px;
}
.brand{ display:flex; align-items:center; gap:var(--space-3); }
.brand__logo{
  width:28px; height:28px; display:grid; place-items:center;
  color:var(--primary);
  border:1px solid rgba(5,221,250,0.35);
  border-radius:6px;
  box-shadow:0 0 24px rgba(5,221,250,0.25) inset;
}
.brand__name{ font-weight:700; letter-spacing:0.2px; }

.main-nav ul{ display:flex; gap:var(--space-6); align-items:center; }
.main-nav a{ color:var(--color-text); opacity:0.9; }
.main-nav a:hover{ opacity:1; color:var(--primary); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px; transition:all .25s ease; font-weight:600;
  border:1px solid transparent;
}
.btn--primary{
  background:linear-gradient(135deg, var(--primary), #4EE9FF);
  color:#041318;
  box-shadow:0 8px 24px rgba(5,221,250,0.25);
}
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(5,221,250,0.35); }
.btn--ghost{
  color:var(--primary);
  border-color:rgba(5,221,250,0.4);
  background:transparent;
}
.btn--ghost:hover{ background:rgba(5,221,250,0.08); }

.nav-toggle{ display:none; position:relative; width:36px; height:32px; }
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:2px; background:var(--color-text);
  transition:transform .25s ease, opacity .25s ease; border-radius:2px;
}
.nav-toggle span:nth-child(1){ top:8px; }
.nav-toggle span:nth-child(2){ top:15px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-drawer{
  background:var(--glass); border-bottom:var(--border); backdrop-filter:blur(12px);
}
.nav-drawer nav{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-6); }
.nav-drawer a{ padding:10px 12px; border-radius:8px; }
.nav-drawer a:hover{ background:rgba(255,255,255,0.06); }

/* HERO */
.hero{
  position:relative; min-height:76vh; display:grid; place-items:center; overflow:hidden;
  border-bottom:var(--border);
}
.hero__content{
  position:relative; z-index:2; text-align:center; padding-block:var(--space-16);
}
.hero h1{
  font-size:clamp(34px, 6vw, 60px);
  line-height:1.1; letter-spacing:-0.02em; margin-bottom:var(--space-4);
}
.hero__subtitle{
  max-width:900px; margin-inline:auto; color:var(--color-dim); font-size:1.1rem;
}
.hero__cta{ margin-top:var(--space-8); display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }
.hero__gradient{
  position:absolute; inset:auto -20% -30% -20%;
  height:60%; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, rgba(5,221,250,0.18), rgba(7,73,95,0.12) 50%, transparent 70%);
  filter:blur(30px);
}
#constellation{
  position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.55;
}

/* SOCIAL PROOF */
.social-proof{ padding-block:var(--space-10); }
.social-proof__title{
  text-align:center; color:var(--color-dim); margin-bottom:var(--space-6);
}
.logos{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-6);
}
.logo{
  padding:18px; text-align:center; border:var(--border); border-radius:var(--radius);
  background:var(--glass); color:#A9B4C2; transition:all .25s ease;
}
.logo:hover{ color:var(--color-text); transform:translateY(-2px); box-shadow:var(--shadow-1); }

/* PROBLEM */
.problem{ padding-block:var(--space-16); }
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-12); align-items:center; }
.section-title, .problem h2{ font-size:clamp(26px, 4.5vw, 40px); line-height:1.2; margin-bottom:var(--space-4); }
.problem p{ color:var(--color-dim); }
.viz{ position:relative; height:260px; border-radius:var(--radius); overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:var(--border); }
.viz__cloud,.viz__structure{ position:absolute; inset:0; }
.viz__cloud{
  background:radial-gradient(120px 80px at 20% 70%, rgba(5,221,250,0.18), transparent 70%),
             radial-gradient(90px 90px at 60% 30%, rgba(7,73,95,0.25), transparent 70%),
             radial-gradient(100px 70px at 80% 80%, rgba(5,221,250,0.14), transparent 70%);
  filter:blur(6px);
}
.viz__structure{
  background:
   repeating-conic-gradient(from 0deg, rgba(5,221,250,0.25) 0 6deg, transparent 6deg 12deg);
  mask-image:radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 70%);
  opacity:.25;
}

/* SERVICES */
.services{ padding-block:var(--space-16); border-top:var(--border); border-bottom:var(--border); background:linear-gradient(180deg, rgba(7,73,95,0.06), rgba(7,73,95,0) 60%); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-8); }
.card{
  background:var(--glass); border:var(--border); border-radius:var(--radius); padding:var(--space-6);
  /* Animation douce au survol: privilégier transform/opacity pour la perf GPU */
  transition:
    transform .28s cubic-bezier(.2,.65,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .28s ease;
  position:relative; overflow:hidden;
  will-change: transform, box-shadow;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 10% 10%, rgba(5,221,250,0.06), transparent 60%);
  transition:opacity .28s ease, transform .28s ease;
  opacity:.85;
}
.card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--shadow-1);
  border-color:rgba(5,221,250,0.25);
  background-color:rgba(255,255,255,0.045);
}
.card:hover::after{
  opacity:1;
  transform:translate3d(0,-2px,0) scale(1.02);
}
.card--active{ border-color:rgba(5,221,250,0.35); box-shadow:var(--shadow-1); }
.card__icon{ width:42px; height:42px; color:var(--primary); margin-bottom:var(--space-4); transition:transform .28s cubic-bezier(.2,.65,.2,1); }
.card:hover .card__icon{ transform:translateY(-2px); }
.icon{ width:100%; height:100%; }

/* BENEFITS */
.benefits{ padding-block:var(--space-16); }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); margin-top:var(--space-8); }
.benefit{
  background:var(--glass); border:var(--border); border-radius:var(--radius);
  padding:var(--space-6);
  transition:
    transform .28s cubic-bezier(.2,.65,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .28s ease;
  position:relative; overflow:hidden;
  will-change: transform, box-shadow;
}
.benefit::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 10% 10%, rgba(5,221,250,0.06), transparent 60%);
  transition:opacity .28s ease, transform .28s ease;
  opacity:.85;
}
.benefit:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--shadow-1);
  border-color:rgba(5,221,250,0.25);
  background-color:rgba(255,255,255,0.045);
}
.benefit:hover::after{
  opacity:1;
  transform:translate3d(0,-2px,0) scale(1.02);
}
.benefit__icon{ font-size:26px; margin-bottom:var(--space-3); transition:transform .28s cubic-bezier(.2,.65,.2,1); }
.benefit:hover .benefit__icon{ transform:translateY(-2px); }

/* CAROUSEL */
.usecases{ padding-block:var(--space-16); border-top:var(--border); border-bottom:var(--border); }
.carousel{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; }
.carousel__ctrl{
  width:44px; height:44px; border-radius:50%; color:var(--color-text);
  border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  will-change: transform, box-shadow;
}
.carousel__ctrl:hover{ border-color:rgba(5,221,250,0.4); color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-1); background-color:rgba(255,255,255,0.06); }
.carousel__track{ overflow:hidden; }
.slide{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8);
  align-items:center; min-height:260px; padding:var(--space-6);
  border:var(--border); border-radius:var(--radius); background:var(--glass);
  transform:translateX(100%); opacity:0; transition:transform .45s cubic-bezier(.2,.65,.2,1), opacity .45s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease;
  will-change: transform, opacity;
  position:relative; overflow:hidden;
}
.slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 10% 10%, rgba(5,221,250,0.06), transparent 60%);
  transition:opacity .28s ease, transform .28s ease;
  opacity:.75;
}
.slide.is-active{ transform:translateX(0); opacity:1; }
.slide:hover{
  box-shadow:var(--shadow-1);
  border-color:rgba(5,221,250,0.25);
  background-color:rgba(255,255,255,0.035);
  transform:translateX(0) translateY(-4px) scale(1.01);
}
.slide:hover::after{
  opacity:.95;
  transform:translate3d(0,-2px,0) scale(1.02);
}
.slide__txt .stat{ color:var(--primary); font-weight:700; margin-top:var(--space-2); }
.mock-chart{
  height:160px; border-radius:10px; border:1px dashed rgba(255,255,255,0.2);
  background:
    linear-gradient(180deg, rgba(5,221,250,0.1), rgba(7,73,95,0.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 32px);
}

/* TESTIMONIALS */
.testimonials{ padding-block:var(--space-16); }
.t-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); margin-top:var(--space-8); }
.t-card{
  background:var(--glass); border:var(--border); border-radius:var(--radius); padding:var(--space-6);
  box-shadow:var(--shadow-1);
  transition:
    transform .28s cubic-bezier(.2,.65,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .28s ease;
  position:relative; overflow:hidden;
  will-change: transform, box-shadow;
}
.t-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 60% at 10% 10%, rgba(5,221,250,0.06), transparent 60%);
  transition:opacity .28s ease, transform .28s ease;
  opacity:.75;
}
.t-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--shadow-1);
  border-color:rgba(5,221,250,0.25);
  background-color:rgba(255,255,255,0.035);
}
.t-card:hover::after{
  opacity:.95;
  transform:translate3d(0,-2px,0) scale(1.02);
}
.t-card p{ font-size:1.05rem; }
.t-card footer{ margin-top:var(--space-4); color:var(--color-dim); }

/* LEAD MAGNET */
.leadmagnet{ padding-block:var(--space-16); border-top:var(--border); border-bottom:var(--border); background:linear-gradient(180deg, rgba(5,221,250,0.06), rgba(5,221,250,0) 60%); }
.leadmagnet__inner{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--space-12); align-items:center; }
.leadmagnet__visual .book{
  width:260px; height:180px; border-radius:12px; border:1px solid rgba(5,221,250,0.25);
  background:linear-gradient(135deg, #03161C, #062B36);
  display:grid; place-items:center; color:#CFEFF6; padding:var(--space-4); text-align:center;
  box-shadow:0 20px 60px rgba(4,19,24,0.6), inset 0 0 40px rgba(5,221,250,0.08);
}
.inline-form{ margin-top:var(--space-6); display:flex; gap:var(--space-4); flex-wrap:wrap; }
.inline-form input{
  flex:1 1 260px; min-width:240px; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04); color:var(--color-text);
}
.inline-form input:focus{ outline:2px solid rgba(5,221,250,0.45); outline-offset:2px; }

/* CONTACT */
.contact{ padding-block:var(--space-16); }
.contact-list{ margin-top:var(--space-4); color:var(--color-dim); }
.contact-form{ background:var(--glass); border:var(--border); border-radius:var(--radius); padding:var(--space-6); box-shadow:var(--shadow-1); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ color:#C9D4DF; font-weight:600; }
.field input, .field textarea{
  padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04); color:var(--color-text);
}
.field textarea{ resize:vertical; }
 
 /* FOOTER */
 .site-footer{ border-top:var(--border); padding-block:var(--space-10); background:rgba(255,255,255,0.02); }
 .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
 .copy.small{ color:var(--color-dim); }
 .footer-nav{ display:flex; gap:var(--space-6); }
 .footer-nav a{ color:var(--color-dim); }
 .footer-nav a:hover{ color:var(--primary); }
 
 /* FOCUS VISIBLE (accessibilité) */
 :focus-visible {
   outline: 2px solid rgba(5,221,250,0.75);
   outline-offset: 3px;
 }
 a:focus-visible,
 button:focus-visible,
 .btn:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
   outline: 2px solid rgba(5,221,250,0.85);
   outline-offset: 3px;
   box-shadow: 0 0 0 2px rgba(5,221,250,0.25);
   border-color: rgba(5,221,250,0.4);
 }
 
 /* ACCESSIBILITY HELPERS */
 .sr-only{
   position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
   clip:rect(0,0,0,0); white-space:nowrap; border:0;
 }
 .small{ font-size:.9rem; }
 .text-dim{ color:var(--color-dim); }
 
 /* RESPONSIVE */
 @media (max-width: 1100px){
  .split{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .t-grid{ grid-template-columns:1fr; }
  .leadmagnet__inner{ grid-template-columns:1fr; text-align:center; }
}
@media (max-width: 720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .logos{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .slide{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}