:root{
  --bg:#0B0F19;
  --card:#151B28;
  --text:#FFFFFF;
  --text2:#B0B3C2;
  --grad:linear-gradient(135deg,#00C6FF,#7C00FF);
  --line:rgba(255,255,255,.08);
}

.home{background:var(--bg);color:var(--text)}
.container{max-width:1120px;margin-inline:auto;padding-inline:16px}

/* HERO */
.hero{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__video,.hero__image,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__fallback{background:radial-gradient(100% 60% at 50% 40%, rgba(124,0,255,.25) 0%, rgba(11,15,19,1) 60%)}
.hero__overlay{position:absolute;inset:0;background:
  radial-gradient(80% 60% at 50% 40%, rgba(11,15,25,0) 0%, rgba(11,15,25,.6) 55%, rgba(11,15,25,.92) 100%);}
.hero__content{position:relative;z-index:1;text-align:center;padding:64px 0}
.hero__brand{display:flex;justify-content:center;margin-bottom:10px}
.hero__logo{height:54px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.hero__logo--text{font-weight:800;letter-spacing:.3px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__title{font-size:clamp(28px,4.6vw,46px);margin:0}
.hero__subtitle{max-width:780px;margin:10px auto 0;color:var(--text2);font-size:clamp(14px,1.8vw,16px)}
.hero__cta{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Sections */
.section{padding:54px 0}
.section__header{margin-bottom:16px}
.section__title{margin:0}
.section__subtitle{margin:6px 0 0;color:var(--text2)}

/* Cards grid */
.cards{display:grid;gap:18px}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--card);
  border-radius:14px;
  padding:18px;
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35);border-color:rgba(124,0,255,.35)}
.card__icon{font-size:2rem}
.card__title{margin:8px 0 6px}
.card__text{margin:0 0 10px;color:var(--text2)}
.card__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Produit highlight */
.card--product{outline:2px solid transparent}
.card--product:hover{outline-color:rgba(124,0,255,.25)}

/* About */
.about__title{margin:0 0 8px}
.about__text{color:var(--text2)}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  border:1px solid var(--line);
  background:#0f172a;
  color:#fff;
}
.btn--solid{background:#0f172a}
.btn--gradient{background:var(--grad);border-color:transparent}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn:hover{filter:brightness(1.08)}