/* Accessibilité — désactive toutes les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes pageFade {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:none }
}
@keyframes float {
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(-16px) }
}
@keyframes blobPulse {
  0%,100% { transform:scale(1); opacity:.45 }
  50%     { transform:scale(1.12); opacity:.28 }
}
@keyframes tickerSlide {
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}
@keyframes stripScroll {
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}
@keyframes partnerScroll {
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}
@keyframes imgEntry {
  from { opacity:0; transform:scale(.92) translateY(16px) }
  to   { opacity:1; transform:none }
}

/* Page load */
body { animation: pageFade .45s ease }

/* Scroll reveal */
.rv   { opacity:0; transform:translateY(38px);   transition:opacity .75s ease,transform .75s ease }
.rv-l { opacity:0; transform:translateX(-38px);  transition:opacity .75s ease,transform .75s ease }
.rv-r { opacity:0; transform:translateX(38px);   transition:opacity .75s ease,transform .75s ease }
.rv.on, .rv-l.on, .rv-r.on { opacity:1; transform:none }
.d1{transition-delay:.1s} .d2{transition-delay:.2s}
.d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* Specific */
.hero-visual       { animation: none } /* individual children float now */
.hero-blob-1       { animation: blobPulse 9s ease-in-out infinite }
.hero-blob-2       { animation: blobPulse 12s ease-in-out infinite reverse }
.ticker-track      { animation: tickerSlide 26s linear infinite }
.ticker-track:hover { animation-play-state:paused }
.strip-track       { animation: stripScroll 25s linear infinite }
.strip-track:hover { animation-play-state:paused }
.partner-track     { animation: partnerScroll 22s linear infinite }
.partner-track:hover { animation-play-state:paused }

/* Nav */
.navbar { transition:all .4s ease }
.navbar.scrolled {
  background:rgba(7,6,31,.95); backdrop-filter:blur(22px);
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 40px rgba(0,0,0,.4);
}
/* Cards */
.real-card { transition:transform .4s ease, box-shadow .4s }
.real-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(41,39,142,.2) }
.svc-item { transition:all .32s ease }
.svc-item:hover { transform:translateX(7px); border-color:rgba(163,212,20,.28) }
.proc-step { transition:all .3s ease }
.proc-step:hover { background:rgba(255,255,255,.13); transform:translateY(-4px) }
.astat { transition:transform .3s }
.astat:hover { transform:translateY(-3px) }
/* Service card top bar */
.svc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.svc-card:hover::before { transform:scaleX(1) }
/* Btn arrow */
.btn-lime .arr { transition:transform .3s; display:inline-block; }
.btn-lime:hover .arr { transform:translateX(5px) }
/* Image hover zoom */
.img-zoom img { transition:transform .6s ease }
.img-zoom:hover img { transform:scale(1.06) }
/* Lightbox */
.lightbox { transition:opacity .3s ease }
.lightbox.open { animation:fadeIn .3s ease; opacity: 1; visibility: visible; }
/* Mobile menu */
.mob-panel.open { animation:pageFade .3s ease }

/* ============================================
   FLOATING MOCKUP — KEYFRAMES
   ============================================ */
@keyframes floatA {
  0%,100% { transform: translateY(0) rotate(0deg) }
  35%      { transform: translateY(-14px) rotate(.35deg) }
  65%      { transform: translateY(-7px) rotate(-.25deg) }
}
@keyframes floatB {
  0%,100% { transform: translateY(0) rotate(0deg) }
  40%      { transform: translateY(-18px) rotate(-.4deg) }
  75%      { transform: translateY(-8px) rotate(.3deg) }
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-8px) }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 18px rgba(163,212,20,.3), 0 10px 32px rgba(0,0,0,.4) }
  50%      { box-shadow: 0 0 38px rgba(163,212,20,.6), 0 10px 32px rgba(0,0,0,.4) }
}
@keyframes ringExpand {
  0%,100% { transform: scale(1); opacity: .18 }
  50%      { transform: scale(1.07); opacity: .07 }
}
@keyframes dotFloat {
  0%,100% { transform: translate(0, 0) }
  33%      { transform: translate(5px, -10px) }
  66%      { transform: translate(-4px, -6px) }
}
@keyframes shimmerSwipe {
  0%   { transform: skewX(-20deg) translateX(-200%) }
  100% { transform: skewX(-20deg) translateX(400%) }
}

/* ============================================
   FLOATING MOCKUP — STYLES
   ============================================ */

.hv-mockup-float {
  will-change: transform;
}

/* Glassmorphism mockup frame */
.hv-mockup {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(12,11,45,.75);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    0 28px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(163,212,20,.07),
    inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  transition: transform .35s cubic-bezier(.2,.8,.4,1), box-shadow .35s ease;
}
.hv-mockup:hover {
  box-shadow:
    0 36px 90px rgba(0,0,0,.6),
    0 0 0 1px rgba(163,212,20,.2),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* macOS-style title bar */
.hv-mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hv-dbar-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hv-dbar-dot.r { background: #ff5f57 }
.hv-dbar-dot.y { background: #febc2e }
.hv-dbar-dot.g { background: #28c840 }
.hv-dbar-label {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  font-family: 'DM Sans', sans-serif;
  margin-left: 8px;
  letter-spacing: .3px;
}

/* Main image inside mockup — remove its own border-radius/shadow */
.hv-mockup .hv-main {
  border-radius: 0;
  box-shadow: none;
  height: 350px;
  display: block;
  width: 100%;
}

/* Shimmer sweep on load */
.hv-mockup-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.hv-mockup-shine::after {
  content: '';
  position: absolute;
  top: -50%; left: 0;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation: shimmerSwipe 2s ease 1.5s both;
}

/* Decorative rings */
.hv-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: ringExpand 8s ease-in-out infinite;
}
.hv-ring-1 {
  width: 360px; height: 360px;
  top: -60px; right: -80px;
  border: 1.5px solid rgba(163,212,20,.18);
}
.hv-ring-2 {
  width: 180px; height: 180px;
  bottom: 50px; left: -30px;
  border: 1.5px solid rgba(41,39,142,.35);
  animation-duration: 11s;
  animation-direction: reverse;
}

/* Floating decorative dots */
.hv-fdot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  animation: dotFloat 5.5s ease-in-out infinite;
}
.hv-fdot-1 {
  width: 10px; height: 10px;
  background: var(--lime);
  opacity: .75;
  top: 18px; left: 8px;
  box-shadow: 0 0 14px rgba(163,212,20,.55);
}
.hv-fdot-2 {
  width: 7px; height: 7px;
  background: rgba(255,255,255,.45);
  bottom: 95px; right: -5px;
  animation-duration: 7s;
  animation-direction: reverse;
}
.hv-fdot-3 {
  width: 8px; height: 8px;
  background: transparent;
  border: 2px solid rgba(163,212,20,.5);
  bottom: 20px; left: 55px;
  animation-duration: 6s;
  animation-delay: .8s;
}

/* ============================================
   CANVAS PARTICLES + OVERLAY
   ============================================ */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,.045) 3px,
    rgba(0,0,0,.045) 4px
  );
}

/* ============================================
   SHOOTING STARS
   ============================================ */
.shooting-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

@keyframes shootAnim {
  0%   { transform: translateX(0) translateY(0); opacity: 1; }
  100% { transform: translateX(340px) translateY(200px); opacity: 0; }
}

.shooting-star {
  position: absolute;
  width: 130px;
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.9) 60%,
    rgba(163,212,20,.6)
  );
  border-radius: 2px;
  animation: shootAnim linear forwards;
  box-shadow: 0 0 5px rgba(255,255,255,.4);
  transform-origin: left center;
  rotate: -30deg;
}

/* ============================================
   TYPEWRITER
   ============================================ */
.hero-typewriter {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,.7);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  min-height: 26px;
}

.tw-text {
  color: var(--lime);
  font-weight: 600;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1 }
  50%       { opacity: 0 }
}

.tw-cursor {
  color: var(--lime);
  font-weight: 300;
  margin-left: 1px;
  animation: cursorBlink .75s step-end infinite;
}

/* ============================================
   H1 SHIMMER GRADIENT
   ============================================ */
@keyframes heroShimmer {
  0%   { background-position: -200% center }
  100% { background-position:  200% center }
}

.hero-h1-shimmer em {
  font-style: normal;
  background: linear-gradient(
    90deg,
    var(--lime) 0%,
    #d6f54a 25%,
    #f0ffaa 50%,
    #d6f54a 75%,
    var(--lime) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroShimmer 2.8s linear infinite;
}

/* ============================================
   CTA BUTTON SWEEP
   ============================================ */
@keyframes ctaSweep {
  0%      { left: -110%; opacity: 0 }
  10%     { opacity: 1 }
  45%, 100% { left: 120%; opacity: 0 }
}

.btn-lime {
  position: relative;
  overflow: hidden;
}

.btn-lime::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  animation: ctaSweep 2.8s ease-in-out 2s infinite;
  pointer-events: none;
}

/* ============================================
   FLOATING STAT CARDS
   ============================================ */
@keyframes floatCard {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-9px) }
}

.hero-stats-row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.hstat-card {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  backdrop-filter: blur(10px);
  animation: floatCard 6s ease-in-out infinite;
  transition: border-color .3s, background .3s;
}
.hstat-card:hover {
  border-color: rgba(163,212,20,.35);
  background: rgba(163,212,20,.06);
}
.hstat-card:nth-child(2) {
  animation-delay: .9s;
  animation-duration: 7.5s;
}
.hstat-card:nth-child(3) {
  animation-delay: 1.7s;
  animation-duration: 5.5s;
}

.hstat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  margin-bottom: 4px;
}
.hstat-val {
  font-family: 'ITC Handel Gothic', 'Exo 2', 'DM Sans', sans-serif;
  font-weight: 900;
  font-size: 26px;
  color: var(--lime);
}
.hstat-suffix {
  font-family: 'ITC Handel Gothic', 'Exo 2', 'DM Sans', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--lime);
}
.hstat-lbl {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .8px;
}