/* ==========================================================================
   wHub - Futuristic Landing Page Stylesheet
   Designed for Accounting Firms (Escritórios Contábeis & BPO)
   Primary Colors: #52b788, #40916c, #74c69d, #2d6a4f
   ========================================================================== */

:root {
  --primary-50: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-200: #bbf7d0;
  --primary-300: #95d5b2;
  --primary-400: #74c69d;
  --primary-500: #52b788;
  --primary-600: #40916c;
  --primary-700: #2d6a4f;
  --primary-800: #1b4332;
  --primary-900: #081c15;

  --bg-deep: #060b08;
  --bg-surface: #0a130e;
  --bg-card: rgba(13, 25, 19, 0.75);
  --border-glow: rgba(82, 183, 136, 0.25);
  --glow-emerald: 0 0 30px rgba(82, 183, 136, 0.35);
  --glow-strong: 0 0 50px rgba(82, 183, 136, 0.6);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-700);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-500);
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-deep);
  color: #f1f5f9;
}

/* Cyber Matrix Background Grid */
.cyber-grid-bg {
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(82, 183, 136, 0.18) 0%, transparent 60%),
    linear-gradient(to right, rgba(82, 183, 136, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(82, 183, 136, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

.radial-glow-top {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 850px;
  height: 480px;
  background: radial-gradient(circle, rgba(82, 183, 136, 0.28) 0%, rgba(64, 145, 108, 0.12) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.radial-glow-accent {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(82, 183, 136, 0.15) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* Futuristic Glass Cards */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
  border-color: rgba(82, 183, 136, 0.5);
  box-shadow: 0 16px 36px -8px rgba(82, 183, 136, 0.15), inset 0 1px 0 rgba(116, 198, 157, 0.2);
}

/* Futuristic Glowing Button */
.btn-futuristic {
  background: linear-gradient(135deg, #40916c 0%, #52b788 50%, #74c69d 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(82, 183, 136, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.btn-futuristic:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(82, 183, 136, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  filter: brightness(1.1);
}

.btn-futuristic::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(25deg);
  animation: shine-sweep 4s infinite;
}

@keyframes shine-sweep {
  0% { left: -60%; }
  25% { left: 140%; }
  100% { left: 140%; }
}

/* Secondary Cyber Button */
.btn-cyber-outline {
  background: rgba(13, 25, 19, 0.6);
  border: 1px solid rgba(82, 183, 136, 0.4);
  color: #e2e8f0;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-cyber-outline:hover {
  border-color: #52b788;
  color: #ffffff;
  background: rgba(82, 183, 136, 0.15);
  box-shadow: 0 0 20px rgba(82, 183, 136, 0.25);
  transform: translateY(-2px);
}

/* Animated Neon Borders */
.neon-border-pulse {
  position: relative;
}
.neon-border-pulse::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(90deg, #40916c, #52b788, #74c69d, #40916c);
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: border-flow 6s linear infinite;
  opacity: 0.7;
}

@keyframes border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Text Gradients */
.text-gradient-emerald {
  background: linear-gradient(135deg, #74c69d 0%, #52b788 50%, #95d5b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-silver {
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pulse Glow Keyframe */
@keyframes neon-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

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

/* Floating animation */
@keyframes float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

/* Chat simulator styles */
.chat-bubble-received {
  background: #15271e;
  border: 1px solid rgba(82, 183, 136, 0.25);
  color: #e2e8f0;
}

.chat-bubble-sent {
  background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
  border: 1px solid rgba(116, 198, 157, 0.35);
  color: #ffffff;
}

/* Range input styling for ROI Calculator */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #122219;
  border-radius: 4px;
  border: 1px solid rgba(82, 183, 136, 0.3);
}

input[type=range]::-webkit-slider-thumb {
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #52b788;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
  box-shadow: 0 0 12px rgba(82, 183, 136, 0.8);
  border: 2px solid #ffffff;
  transition: transform 0.15s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Modal Overlay */
.modal-backdrop-blur {
  background: rgba(4, 8, 6, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}