@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  background-color: #1F2937;
}

header video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Animation au scroll */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1F2937; }
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #4338ca; }

/* Responsive video container */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
/* Gradient text */
.gradient-text {
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Card hover effect */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
              0 10px 10px -5px rgba(0,0,0,0.04);
}

/* Button pulse animation */
.pulse-button { animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* Section spacing */
section { scroll-margin-top: 80px; }

.hovered-element { position: relative; }
.floating-image { z-index: 20; }

/* Gradient transitions between sections */
.section-gradient {
  position: relative;
  overflow: hidden;
}

.section-gradient::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4f46e5, #7c3aed, #4f46e5, transparent);
  background-size: 200% 100%;
  animation: gradientShift 3s linear infinite;
  z-index: 10;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Enhanced section dividers */
.py-20 {
  position: relative;
}

.py-20:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.3), transparent);
  opacity: 0.6;
}
/* Button text size */
#cta-hero, #cta-bottom { font-size: 1.5rem; }

/* Impactful pulsating CTA button */
#cta-hero {
  background: linear-gradient(45deg, #FF8C00, #FFA500, #FF4500);
  background-size: 200% 200%;
  animation: pulseGradient 2s ease infinite, impactPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.7);
  border: none;
  color: white;
  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
@keyframes pulseGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes impactPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,140,0,0.7); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255,140,0,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,140,0,0.7); }
}
#cta-hero:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 30px rgba(255,140,0,0.9) !important;
  background: linear-gradient(45deg, #FF4500, #FF8C00, #FFA500) !important;
}
/* Typing effect */
.typing-effect {
  display: inline-block;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .05em;
  animation: blink-caret 1s step-end infinite;
  word-wrap: break-word;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
/* ✅ FAQ polish */
.faq-question { cursor: pointer; }
.faq-icon { transition: transform 0.2s ease; }
.faq-question.active .faq-icon { transform: rotate(45deg); }

/* ✅ Réponse FAQ : espacement (évite “collé en haut”) */
.faq-answer { padding-top: 0.75rem; }

/* =========================================
   ✅ DRONE: ne bloque jamais les clics
   ========================================= */
#drone-image-container,
#drone-image {
  pointer-events: none;
}

/* Fluidité pour banking + scale */
#drone-image-container { will-change: transform, left, top; transform-origin: 50% 55%; }
#drone-image { will-change: transform; }

/* =========================================
   ✅ Layering: petits éléments au-dessus du drone (quand il est loin)
   (on ne touche pas aux sections => le drone ne passe pas derrière elles)
   ========================================= */
#cta-hero, #cta-bottom,
.faq-question, .faq-answer,
section img {
  position: relative;
  z-index: 50;
}

/* =========================================
   💥 Explosion drone
   ========================================= */
@keyframes droneExplode {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
  35%  { transform: scale(1.35) rotate(10deg); filter: brightness(2); }
  100% { transform: scale(0.2) rotate(35deg); opacity: 0; filter: blur(6px) brightness(1.5); }
}
.drone-exploding #drone-image {
  animation: droneExplode 520ms ease-out forwards;
}

/* =========================================
   ✅ Halo FAQ (si tu l'avais ajouté)
   (optionnel: conserve si tu l’utilises)
   ========================================= */
.faq-question.active {
  position: relative;
  border-radius: 0.75rem;
  z-index: 2;
}
.faq-question.active::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 1.4rem;
  background: radial-gradient(circle,
    rgba(99,102,241,0.45) 0%,
    rgba(99,102,241,0.25) 35%,
    rgba(99,102,241,0.05) 60%,
    rgba(99,102,241,0) 75%
  );
  filter: blur(22px);
  opacity: 0.95;
  z-index: -2;
  pointer-events: none;
  animation: faqHaloPulse 1.8s ease-in-out infinite;
}
.faq-question.active::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 0.85rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35),
    0 0 12px rgba(255,255,255,0.45),
    0 0 28px rgba(99,102,241,0.55);
  pointer-events: none;
  z-index: -1;
}
@keyframes faqHaloPulse {
  0%   { transform: scale(0.96); opacity: 0.6; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0.6; }
}