:root{
  --bg:#0c0f14;
  --bg-2:#0f131a;
  --surface:#161b22;
  --surface-2:#1b2230;
  --text:#e8ecf3;
  --muted:#a6afbf;
  --line:#273142;
  --accent:#00d0ff;     /* cyan techno */
  --accent-2:#42f5b9;   /* option secondaire */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
}

/* Containers */
.container{
  width:100%;
  max-width:1100px;
  padding:0 20px;
  margin:0 auto;
}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background:rgba(12,15,20,.82);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.nav{
  display:flex; align-items:center; gap:24px; min-height:64px;
}
.brand{
  font-weight:800; letter-spacing:.2px; text-decoration:none;
  color:var(--text); font-size:20px;
}
.menu{display:flex; gap:18px; margin-left:auto}
.menu a{
  color:var(--muted); text-decoration:none; font-weight:600; padding:6px 8px; border-radius:8px;
}
.menu a:hover{ color:var(--text); background:rgba(255,255,255,.04) }

.auth{display:flex; align-items:center; gap:10px; margin-left:8px}
.hello{color:var(--muted); font-size:14px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; padding:10px 14px; font-weight:700; text-decoration:none; line-height:1;
  border:1px solid transparent; transition:transform .04s ease, background .2s ease, color .2s ease, border .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn-primary{ background:var(--accent); color:#001018; }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-outline{ border-color:#2a374a; color:var(--text); background:transparent }
.btn-outline:hover{ border-color:#3b4a62; background:#10151d }
.btn-ghost{ color:var(--muted); background:transparent }
.btn-ghost:hover{ color:var(--text); background:#0f141c }

.btn-lg{ padding:14px 18px; border-radius:14px; font-size:16px }

/* Burger (mobile) */
.burger{ display:none; background:none; border:0; margin-left:8px; cursor:pointer }
.burger span{ display:block; width:22px; height:2px; background:var(--text); margin:5px 0 }
.mobile-menu{ background:var(--surface); border-top:1px solid var(--line); padding:10px 20px }
.mobile-menu a{ display:block; padding:10px 0; color:var(--text); text-decoration:none }
.no-scroll{ overflow:hidden }

/* HERO */
.hero{ position:relative; overflow:hidden; }
.hero .container{ position:relative; z-index:2 }
.hero-content{
  min-height:76vh; padding:96px 0 64px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
}
.hero-title{
  font-size: clamp(40px, 6vw, 72px);
  line-height:1.05; letter-spacing:-.5px; margin:0;
}
.hero-title span{ color:var(--accent) }
.hero-subtitle{ color:var(--muted); max-width:820px; margin:0 auto 8px; font-size:clamp(16px,1.7vw,20px) }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }

.scroll-hint{
  margin-top:14px; color:var(--muted); text-decoration:none; font-size:28px; opacity:.7
}
.scroll-hint:hover{ opacity:1 }

/* Hero background slideshow */
.hero-bg{ position:absolute; inset:0; }
.bg-overlay{
  position:absolute; inset:0;
  background:radial-gradient(1200px 600px at 50% 20%, rgba(0,208,255,.20), transparent 60%),
             linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.72));
  pointer-events:none;
}
.bg-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease;
  filter:saturate(80%) brightness(.55);
}
.bg-slide.is-active{ opacity:1 }

/* How it works */
.how{ padding:80px 0 }
.section-title{
  text-align:center; font-size: clamp(26px, 4vw, 36px); margin:0 0 28px; letter-spacing:-.2px;
}
.steps{
  counter-reset: step; list-style:none; padding:0; margin:0;
  display:grid; gap:16px;
}
.step{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px;
  box-shadow:var(--shadow);
}
.step h3{ margin:0 0 6px; font-size:20px }
.step p{ margin:0 0 6px; color:var(--muted) }
.step .link{ color:var(--accent); text-decoration:none; font-weight:600 }
.step-badge{
  width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:#0d1722; border:1px solid var(--line); color:var(--accent); font-weight:800; margin-bottom:8px;
}

/* Features */
.features{ padding:24px 0 64px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.feature{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.feature h4{ margin:0 0 6px }
.feature p{ margin:0; color:var(--muted) }

/* CTA */
.cta{ padding:56px 0 80px }
.cta-box{
  background:linear-gradient(180deg,#0f1824,#0e1420);
  border:1px solid var(--line); border-radius:18px; padding:26px; text-align:center; box-shadow:var(--shadow);
}
.cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:10px }

/* Footer */
.site-footer{ padding:32px 0 56px; color:#8e9bb1; text-align:center; border-top:1px solid var(--line) }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
.reveal.is-visible{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 920px){
  .menu{ display:none }
  .burger{ display:block; margin-left:auto }
  .grid-3{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none }
}