.container {
  margin: 0 auto;
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  position: relative;
  width: 100%;
  z-index: var(--z-content);
}

.section {
  padding-block: var(--space-xl);
  position: relative;
}

.services-section,
.why-section,
.pricing-section {
  background: var(--bg-deep);
}

.process-section,
.tech-section,
.marquee-section,
.cta-banner,
.careers-hero,
.job-listings-section {
  background: var(--bg-dark);
}

.reveal-ready {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.reveal-ready.in-view {
  opacity: 1;
  transform: translateY(0);
}