/* ─── STEP SYSTEM ─── */
.step {
  min-height: 100vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px 24px;
  transition: opacity var(--transition);
}
.step.active  { display: flex; }
.step.hidden  { display: none; }
.step.dark    { background: var(--bg-dark); color: var(--text-primary); }
.step.light   { background: var(--bg-light); color: var(--text-dark); }

/* ─── CONTAINER ─── */
.container {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
.container.narrow { max-width: 560px; }
.container.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* ─── LOGO TOP ─── */
.logo-top {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 0.7;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
  .step { padding: 48px 20px; }
  .logo-top { top: 16px; }
}