/* Modern Chatbot Landing Page Design System */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 262 83% 58%;
  --primary-foreground: 210 40% 98%;
  --primary-glow: 258 100% 75%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 24 95% 53%;
  --accent-foreground: 0 0% 100%;
  --accent-glow: 24 100% 65%;
  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 262 83% 58%;
  
  /* Modern gradients */
  --gradient-hero: linear-gradient(135deg, hsl(262 83% 58%) 0%, hsl(258 100% 75%) 50%, hsl(24 95% 53%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100% / 0.8), hsl(0 0% 100% / 0.4));
  --gradient-button: linear-gradient(135deg, hsl(262 83% 58%), hsl(258 100% 75%));
  --gradient-accent: linear-gradient(135deg, hsl(24 95% 53%), hsl(24 100% 65%));
  
  /* Shadows with brand colors */
  --shadow-primary: 0 20px 40px -10px hsl(262 83% 58% / 0.3);
  --shadow-accent: 0 20px 40px -10px hsl(24 95% 53% / 0.3);
  --shadow-card: 0 10px 30px -5px hsl(222.2 84% 4.9% / 0.1);
  --shadow-glow: 0 0 60px hsl(262 83% 58% / 0.4);

  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-button {
  background: var(--gradient-button);
}

.bg-gradient-accent {
  background: var(--gradient-accent);
}

.shadow-primary {
  box-shadow: var(--shadow-primary);
}

.shadow-accent {
  box-shadow: var(--shadow-accent);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.transition-smooth {
  transition: var(--transition-smooth);
}

.transition-bounce {
  transition: var(--transition-bounce);
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes counter {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-counter {
  animation: counter 0.8s ease-out forwards;
}

/* Custom utilities */
.text-primary {
  color: hsl(var(--primary));
}

.text-accent {
  color: hsl(var(--accent));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.border-primary {
  border-color: hsl(var(--primary));
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* 1) Esconde qualquer .absolute direto dentro do container geral */
.relative.bg-white\/10 > .absolute {
  display: none !important;
}

/* 2) Reexibe o overlay dentro do .aspect-video */
.relative.bg-white\/10 .aspect-video > .absolute {
  display: flex !important;
}

/* só o essencial */
    .aspect-video { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; }
    .aspect-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .aspect-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9999; }
    .play-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.3);
      cursor: pointer;
    }
    .play-overlay:hover { background: rgba(0,0,0,0.2); }

header {
  background-color: rgba(255,255,255,0.95) !important;
}