body {
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(45, 212, 191, 0.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(251, 146, 60, 0.16),
      transparent 30%
    ),
    linear-gradient(140deg, #09090b 0%, #111315 50%, #101517 100%);
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.2'%3E%3Cpath d='M0 80h160M80 0v160'/%3E%3C/g%3E%3C/svg%3E");
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-step {
  position: relative;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: 0 18px 35px -22px rgba(52, 211, 153, 0.5);
}

.faq-item {
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.faq-item.active {
  border-color: rgba(45, 212, 191, 0.45);
  background-color: rgba(45, 212, 191, 0.05);
}

.faq-icon {
  transition: transform 0.25s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.modal-panel {
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
}

#project-modal.is-open .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}