.redesign-solar-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.redesign-dna-stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.redesign-dna-stage__helix {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.redesign-dna-stage__helix canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent;
}

.redesign-dna-rung {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.redesign-dna-rung__core {
  position: relative;
  width: 48px;
  height: 72px;
  transform-style: preserve-3d;
  will-change: transform;
}

.redesign-dna-rung__cylinder,
.redesign-dna-rung__sphere {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.redesign-dna-rung__cylinder {
  width: 8px;
  height: 26px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.redesign-dna-rung__cylinder--top {
  top: 7px;
  background: linear-gradient(180deg, rgba(180, 241, 255, 0.98), rgba(71, 95, 189, 0.92));
}

.redesign-dna-rung__cylinder--bottom {
  bottom: 7px;
  background: linear-gradient(180deg, rgba(249, 219, 255, 0.98), rgba(197, 32, 203, 0.92));
}

.redesign-dna-rung__sphere {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}

.redesign-dna-rung__sphere--top {
  top: 0;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #f9dbff 24%, #b4f1ff 54%, #4f73d3 100%);
}

.redesign-dna-rung__sphere--bottom {
  bottom: 0;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #f9dbff 18%, #c520cb 60%, #5e1aa0 100%);
}

.redesign-solar-system {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Sem deslocamento de container para evitar "vazio" no rodapé do viewport */
  transform: translateY(0);
}

.redesign-solar-system canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 900px) {
  .redesign-solar-hero {
    height: 100vh;
    min-height: 100vh;
  }
}