:root {
  --background: 220 20% 98%;
  --foreground: 222 47% 11%;
  --primary: 210 100% 20%;
  --secondary: 40 100% 50%;
  --border: 220 13% 91%;
}

body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.2) 100%);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-delayed {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom styles for simulator */
.slider-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 9999px;
  position: relative;
}

.slider-range {
  height: 100%;
  position: absolute;
  border-radius: 9999px;
}

.slider-thumb {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Transitions */
.transition-all {
  transition: all 0.3s ease;
}

/* Custom button states */
.active-scale:active {
  transform: scale(0.95);
}