body {
  background-color: var(--color-bg);
}

.roulette-hero {
  padding-block: var(--space-16);
}

.roulette-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.roulette-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05) brightness(0.8);
}

.section-alt {
  background: radial-gradient(circle at top left, rgba(25, 184, 184, 0.08), transparent 55%), var(--color-bg-elevated);
}

.roulette-experience .roulette-bullets li,
.roulette-checklist li {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.roulette-bullets li + li,
.roulette-checklist li + li {
  margin-top: var(--space-2);
}

.roulette-image-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.roulette-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roulette-timeline {
  counter-reset: roulette-step;
}

.roulette-timeline > li {
  position: relative;
  padding-left: var(--space-6);
}

.roulette-timeline > li + li {
  margin-top: var(--space-4);
}

.roulette-timeline > li::before {
  counter-increment: roulette-step;
  content: counter(roulette-step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(25, 184, 184, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}

.roulette-timeline h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-1);
}

.roulette-form-grid {
  gap: var(--space-4);
}

.roulette-gallery .gallery-item {
  box-shadow: var(--shadow-soft);
}

.roulette-client-grid {
  gap: var(--space-4);
}

.faq-item .faq-answer {
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item .faq-question {
  background: transparent;
  color: var(--gray-50);
}

.faq-item .faq-question:focus-visible {
  box-shadow: var(--shadow-outline);
}