/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 1rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--orange);
  transition: all 0.2s;
  background: none;
  color: var(--orange);
}
.btn-primary {
  background: var(--orange);
  color: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover {
  background: var(--orange-d);
  border-color: var(--orange-d);
}
.btn-outline:hover {
  background: var(--orange);
  color: var(--bg);
}
.btn-sm {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}
.btn svg,
.ci svg {
  flex-shrink: 0;
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chips-lg {
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 0.375rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
}
.chips-lg .chip {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.chip.aqua {
  color: var(--aqua);
  border-color: var(--aqua);
}
.chip.red {
  color: var(--red);
  border-color: var(--red);
}
.chip.green {
  color: var(--green);
  border-color: var(--green);
}
.chip.yellow {
  color: var(--yellow);
  border-color: var(--yellow);
}
.chip.purple {
  color: var(--purple);
  border-color: var(--purple);
}
.chip.orange {
  color: var(--orange);
  border-color: var(--orange);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fade-up {
  animation: fadeInUp 0.8s ease both;
}
.reveal {
  opacity: 0;
}
.reveal.visible {
  animation: fadeInUp 0.7s ease both;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
  }
}