.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.hero__bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Pour que le contenu passe AU-DESSUS de la vidéo */
.hero .container {
    position: relative;
    z-index: 1;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:center;
}
.kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid #000;
  color: #000;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.hero__proof{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.hero__visual{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}

/* Image mockup */
.hero__mockup{
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 16px;
}

.hero__mockup img{
  width: 100%;
  height: auto;
  display: block;
}

.orb{
  position:absolute;
  width: 340px; height:340px;
  border-radius: 999px;
  filter: blur(0px);
  opacity:.65;
}
.orb--1{left:-120px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.95), transparent 60%)}
.orb--2{right:-140px; bottom:-140px; background: radial-gradient(circle at 60% 50%, rgba(45,226,230,.75), transparent 60%)}

.glass{
  position: relative;          /* ✅ plus absolute */
  margin-top: 20px;            /* espace sous l’image */
  padding: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(10,14,25,.14);

}
.glass__row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.tag{
  font-size:12px;
  color: #000;
  border:1px solid #000;
  background: rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
}
.glass__title{font-weight:800; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size:18px; margin:0 0 6px}
.glass__text{margin:0; color:var(--muted); font-size:13px; line-height:1.5}
.glass__bar{
  height:10px;
  border-radius: 999px;
  margin-top:14px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.glass__bar::after{
  content:"";
  display:block;
  height:100%;
  width: 64%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
}
.glass__media{
  border-radius: 0;
  overflow: visible;
  border: none;
  background: transparent;
}


.glass__media img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width:980px){
  .hero__grid{grid-template-columns: 1fr}
  .hero__visual{min-height: 360px}
}
.hero__mockup img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero__mockup img {
  transform: translateY(-6px); /* position normale légèrement surélevée */
}

.hero__mockup:hover img {
  transform: translateY(-12px); /* hover */
}

.hero__visual,
.hero__mockup {
  overflow: visible;
}