body {
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(34,211,238,.06), transparent 60%),
              linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.neon-glow { text-shadow: 0 0 3px #00f6ff, 0 0 6px #00f6ff; }
.hover-neon:hover { box-shadow: 0 0 15px #00f6ff, 0 0 30px #00f6ff; transform: translateY(-2px); }

@keyframes pulse { 0%{opacity:1} 50%{opacity:.7} 100%{opacity:1} }
.animate-pulse-slow { animation:pulse 3s ease-in-out infinite; }

/* ==== Promo ribbon ==== */
.promo-ribbon {
  display:flex; align-items:center; gap:.9rem;
  width:100%; max-width:860px;
  padding:.75rem .9rem;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.35)),
    radial-gradient(120% 120% at -10% -40%, rgba(245,158,11,.15), transparent 40%),
    radial-gradient(120% 120% at 110% -40%, rgba(239,68,68,.14), transparent 40%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation:promo-in .35s ease-out both;
}
@keyframes promo-in { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

.promo-chip{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(245,158,11,.35), rgba(239,68,68,.35));
  border:1px solid rgba(245,158,11,.5);
  box-shadow:0 2px 8px rgba(245,158,11,.25);
  font-size:18px; line-height:1;
}
.promo-copy{ text-align:left; flex:1 1 auto; min-width:0 }
.promo-eyebrow{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#ffd7a6; font-weight:900; margin-bottom:2px; }
.promo-line{ color:#f9e7e1; font-size:.9rem; line-height:1.35; text-wrap:balance; }

.btn-cta {
  padding:.55rem .9rem;
  background:#22d3ee; color:#0b1320;
  border-radius:.6rem; font-weight:700;
  transition: transform .05s ease, background-color .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(34,211,238,.25);
}
.btn-cta:hover{ background:#38e4ff; transform:translateY(-1px); }
.promo-cta{ margin-left:auto; white-space:nowrap }

/* Timeline */
.timeline::before { 
  content:''; 
  position:absolute; 
  left:50%; 
  top:0; 
  bottom:0; 
  width:4px; 
  background:#00f6ff; 
  transform:translateX(-50%); 
}
.timeline-item { position:relative; width:50%; padding:20px; }
.timeline-item::before { content:''; position:absolute; width:20px; height:20px; background:#00f6ff; border-radius:50%; top:20px; }
.timeline-item:nth-child(odd){ left:0; text-align:right; }
.timeline-item:nth-child(odd)::before{ right:-10px; }
.timeline-item:nth-child(even){ left:50%; text-align:left; }
.timeline-item:nth-child(even)::before{ left:-10px; }

/* Getting started */
#getting-started {
  position: relative;
  padding-top: 4rem;   /* espace classique */
  padding-bottom: 4rem;
  scroll-margin-top: 0px;  /* ajuste selon hauteur header + promo */
}


/* Wrapper vidéo */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 8px 24px rgba(0,0,0,.25);
}

/* About */
#about {
  margin-top: -20px;
  padding-top: 24px;
  padding-bottom: 4rem;
  position: relative;
  border-top: 1px solid rgba(148,163,184,.15);
}

/* Stats */
.stat-emoji { font-size:2rem; line-height:1; }

/* Marquee */
.marquee {
  position:relative; 
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-track { display:flex; gap:16px; width:max-content; animation:marquee-scroll 28s linear infinite; }
@keyframes marquee-scroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* Testimonial card */
.testimonial-card {
  width:320px; min-height:160px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(34,211,238,.18);
  border-radius:18px; 
  padding:16px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:grid; 
  grid-template-columns:56px 1fr;
  grid-template-areas:"avatar quote" "avatar author";
  column-gap:12px;
}
.testimonial-card .avatar { grid-area:avatar; width:56px; height:56px; border-radius:9999px; border:2px solid rgba(34,211,238,.35); object-fit:cover; align-self:start; }
.testimonial-card .quote { grid-area:quote; color:#d5f6ff; font-size:.95rem; line-height:1.5; margin:2px 0 8px; position:relative; }
.testimonial-card .quote::before,
.testimonial-card .quote::after { content:'“'; color:#67e8f9; font-weight:800; margin-right:4px; }
.testimonial-card .quote::after { content:'”'; margin-left:4px; }
.testimonial-card .author { grid-area:author; color:#94eaff; font-size:.9rem; opacity:.9; }

/* Responsive */
@media(max-width:1024px){
  .timeline::before{ left:12px; transform:none; }
  .timeline-item{ width:100%; padding-left:36px; }
  .timeline-item:nth-child(even){ left:0; text-align:left; }
  .timeline-item:nth-child(odd){ text-align:left; }
  .timeline-item::before{ left:0; right:auto; }
}
@media(max-width:640px){
  .marquee-track{ animation-duration:36s; }
  .testimonial-card{ width:280px; }
  .promo-ribbon{ flex-direction:column; align-items:flex-start; }
  .promo-cta{ margin-left:0 }
}