/* ===== GLOBAL RESETS & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: #0F172A; color: #e2e8f0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0F172A; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #14B8A6; }
html { scrollbar-color: #374151 #0F172A; scrollbar-width: thin; }

/* Glassmorphism nav */
.nav-glass { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-solid { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Hero gradient mesh background */
.hero-gradient { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(20,184,166,0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(20,184,166,0.08), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(20,184,166,0.05), transparent); }

/* Accent glow effects */
.glow-border { box-shadow: 0 0 0 1px rgba(20,184,166,0.2), 0 0 20px rgba(20,184,166,0.1); }
.glow-border:hover { box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 0 30px rgba(20,184,166,0.15); }

/* Card hover lift */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-4px) scale(1.01); }

/* Focus indicators - WCAG AAA */
.focus-ring:focus-visible { outline: 3px solid #14B8A6; outline-offset: 3px; border-radius: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #14B8A6; outline-offset: 3px; }

/* Animated counter */
.counter-value { font-variant-numeric: tabular-nums; }

/* Range slider custom styling */
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: #1F2937; outline: none; cursor: pointer; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #14B8A6; cursor: pointer; box-shadow: 0 0 10px rgba(20,184,166,0.4); transition: box-shadow 0.2s; }
input[type='range']::-webkit-slider-thumb:hover { box-shadow: 0 0 20px rgba(20,184,166,0.6); }
input[type='range']::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #14B8A6; cursor: pointer; border: none; box-shadow: 0 0 10px rgba(20,184,166,0.4); }

/* Progress steps */
.step-connector { position: relative; }
.step-connector::after { content: ''; position: absolute; top: 50%; left: 100%; width: 100%; height: 2px; background: linear-gradient(to right, #14B8A6, #374151); }

/* Multi-step form */
.form-step { display: none; }
.form-step.active { display: block; animation: fadeInUp 0.4s ease-out; }

/* Cookie consent slide up */
.cookie-banner { transform: translateY(100%); transition: transform 0.4s ease-out; }
.cookie-banner.visible { transform: translateY(0); }

/* Sticky floating CTA */
.floating-cta { position: fixed; bottom: 24px; right: 24px; z-index: 40; animation: float 3s ease-in-out infinite; }

/* Comparison table styling */
.comparison-table th { text-align: left; }
.comparison-table tr:nth-child(even) { background: rgba(31, 41, 55, 0.5); }

/* Accordion / Progressive disclosure */
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.accordion-content.open { max-height: 2000px; }

/* Timeline */
.timeline-line { background: linear-gradient(to bottom, #14B8A6, #374151, #374151); }

/* File upload drop zone */
.drop-zone { border: 2px dashed #374151; transition: border-color 0.3s, background 0.3s; }
.drop-zone.dragover { border-color: #14B8A6; background: rgba(20,184,166,0.05); }

/* Success animation */
@keyframes checkmark { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } }
.success-checkmark path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: checkmark 0.6s ease-out 0.2s forwards; }

/* Confetti particles */
.confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* Prefers reduced motion */
@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; }
  .floating-cta { animation: none; }
  .cookie-banner { transition: none; }
}

/* Print */
@media print {
  .nav-glass, .nav-solid, .floating-cta, .cookie-banner, #site-header, footer { display: none !important; }
  body { background: white; color: black; }
}

/* Vapi active state */
body.vapi-call-active .floating-cta { display: none; }