/* ====================================================================
 * VIPLANET - ESTILOS E TEMA FUTURISTA CYBER-FIBRA
 * Visual de alta tecnologia, limpo, sofisticado e focado em conversão
 * ==================================================================== */

:root {
  --primary-blue: #0284c7;
  --primary-dark: #030712;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --cyber-glow: rgba(56, 189, 248, 0.25);
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #030712;
}

body {
  position: relative;
  background-color: #030712;
  overflow-x: hidden;
}

/* Custom Scrollbar Futurista */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #030712;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0284c7 0%, #06b6d4 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

/* ================= FUNDO FUTURISTA CYBER SPACE ================= */

.cyber-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Gradiente de Profundidade Cósmica / Deep Space */
.bg-cyber-space {
  background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(14, 165, 233, 0.16), rgba(3, 7, 18, 0.98) 75%), #030712;
}

/* Grade Geométrica de Fibra Óptica (Subtil e com máscara radial suave) */
.bg-cyber-grid {
  background-size: 55px 55px;
  background-image: 
    linear-gradient(to right, rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 85%);
}

/* Vinheta de Foco Central */
.bg-cyber-vignette {
  background: radial-gradient(circle at center, transparent 45%, rgba(3, 7, 18, 0.7) 100%);
}

/* Animações de Pulso das Auras de Luz de Fundo */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.10;
    transform: scale(1) translate(0, 0);
  }
  50% {
    opacity: 0.18;
    transform: scale(1.08) translate(10px, -10px);
  }
}

@keyframes pulse-slow-reverse {
  0%, 100% {
    opacity: 0.14;
    transform: scale(1.05) translate(0, 0);
  }
  50% {
    opacity: 0.07;
    transform: scale(0.95) translate(-10px, 15px);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 14s infinite ease-in-out;
}

.animate-pulse-slow-reverse {
  animation: pulse-slow-reverse 18s infinite ease-in-out;
}

/* ================= GLASSMORPHISM & CARDS ================= */

.glass-nav {
  background: rgba(3, 7, 18, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.glass-card {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.12);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 18px 40px -10px rgba(2, 132, 199, 0.22);
  transform: translateY(-3px);
}

/* Cyber Border Accent (fina borda iluminada) */
.cyber-card {
  position: relative;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.cyber-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.28);
}

/* ================= EFEITOS DE GLOW E LUZ ================= */

.glow-effect {
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
}

.glow-hover:hover {
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.45), 0 0 15px rgba(6, 182, 212, 0.3);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.fiber-glow {
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

/* Animação suave para botão WhatsApp */
@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.55);
  }
}

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

/* Gradientes de Texto Ultranítidos */
.text-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 45%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #c084fc 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Modal styles */
.modal-backdrop {
  background-color: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Tab active styles */
.tab-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
  border-color: rgba(56, 189, 248, 0.5);
}

/* Redução de Movimento para Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse-slow,
  .animate-pulse-slow-reverse,
  .animate-pulse-subtle {
    animation: none !important;
  }
  #cyber-bg-canvas {
    display: none !important;
  }
}