.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(72vh, 680px);
  padding: 48px 0 32px;
  overflow: visible;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

.hero-visual::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 88% 82% at 50% 48%, rgb(194 122 24 / 7%), transparent 72%);
  content: "";
  pointer-events: none;
}

.hero-visual::after {
  display: none;
}

.hero-visual > .reveal,
.hero-visual.reveal {
  overflow: visible;
}

/* Прозрачная сцена — без белого/кремового прямоугольника поверх фона */
.hero-council-system,
.hero-3d.hero-council {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-height: min(68vh, 660px);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
}

.hero-council-system::before,
.hero-3d.hero-council::before,
.hero-council-veil {
  display: none;
}

.hero-council-stage {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 660px);
  height: min(68vh, 660px);
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 28px;
  overflow: visible;
  transform-style: preserve-3d;
  --orbit-r: min(36vw, 268px);
}

.hero-council-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  max-width: 460px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(194 122 24 / 10%), transparent 62%),
    radial-gradient(circle at 62% 58%, rgb(13 127 120 / 8%), transparent 48%);
  filter: blur(18px);
  transform: translate(-50%, -50%) translateZ(-40px);
  animation: council-halo-breathe 5.6s ease-in-out infinite;
  pointer-events: none;
}

.hero-council-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(194 122 24 / 16%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.hero-council-ring-1 {
  width: 94%;
  max-width: 540px;
  aspect-ratio: 1;
  animation: council-ring-spin 36s linear infinite;
}

.hero-council-ring-2 {
  width: 80%;
  max-width: 460px;
  aspect-ratio: 1;
  border-color: rgb(13 127 120 / 18%);
  animation: council-ring-spin 24s linear infinite reverse;
}

.hero-council-ring-3 {
  width: 66%;
  max-width: 380px;
  aspect-ratio: 1;
  border-color: rgb(194 122 24 / 10%);
  animation: council-ring-spin 18s linear infinite;
}

.hero-council-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(46vw, 400px);
  height: auto;
  transform: translate(-50%, -50%) translateZ(48px);
  filter:
    drop-shadow(0 0 32px rgb(230 184 107 / 20%))
    drop-shadow(0 20px 36px rgb(54 43 28 / 14%));
}

.council-arc path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: council-arc-draw 4.8s ease-in-out infinite;
}

.council-arc-designer path { animation-delay: 0s; }
.council-arc-architect path { animation-delay: 0.35s; }
.council-arc-principal path { animation-delay: 0.7s; }
.council-arc-reviewer path { animation-delay: 1.05s; }
.council-arc-security path { animation-delay: 1.4s; }

.council-core circle:first-child {
  animation: council-core-glow 2.8s ease-in-out infinite;
}

.eye-pupil {
  transition: transform 90ms ease-out;
}

.eye-sclera {
  fill: #e8dcc8;
}

.hero-council-orbit {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: visible;
  pointer-events: none;
  animation: council-orbit-spin 42s linear infinite;
  transform-style: preserve-3d;
}

.hero-council-orbit li {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 6px 12px;
  border: 1px solid rgb(54 43 28 / 18%);
  border-radius: 999px;
  background: rgb(232 220 200 / 92%);
  color: var(--color-muted-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgb(54 43 28 / 10%);
  transform:
    rotate(calc(var(--i) * 72deg))
    translateY(calc(-1 * var(--orbit-r)))
    rotate(calc(var(--i) * -72deg));
  animation: council-orbit-label 42s linear infinite;
}

.hero-council-orbit li:nth-child(1) { --i: 0; }
.hero-council-orbit li:nth-child(2) { --i: 1; }
.hero-council-orbit li:nth-child(3) { --i: 2; }
.hero-council-orbit li:nth-child(4) { --i: 3; }
.hero-council-orbit li:nth-child(5) { --i: 4; }

.hero-council-orbit li.is-lit {
  border-color: rgb(194 122 24 / 44%);
  background: rgb(239 228 212 / 96%);
  color: var(--color-ink);
  box-shadow:
    0 10px 24px rgb(54 43 28 / 14%),
    0 0 20px rgb(194 122 24 / 18%);
  transform:
    rotate(calc(var(--i) * 72deg))
    translateY(calc(-1 * var(--orbit-r)))
    rotate(calc(var(--i) * -72deg))
    scale(1.06);
}

.hero-council-caption {
  position: absolute;
  bottom: 4%;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgb(54 43 28 / 12%);
  border-radius: 999px;
  background: rgb(232 220 200 / 80%);
  color: var(--color-muted-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero-council-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-human);
  box-shadow: 0 0 0 0 rgb(194 122 24 / 50%);
  animation: council-live-pulse 2s ease infinite;
}

@keyframes council-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes council-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes council-orbit-label {
  to {
    transform:
      rotate(calc(var(--i) * 72deg + 360deg))
      translateY(calc(-1 * var(--orbit-r)))
      rotate(calc((var(--i) * -72deg) - 360deg));
  }
}

@keyframes council-arc-draw {
  0%,
  100% {
    stroke-dashoffset: 120;
    opacity: 0.55;
  }

  40%,
  60% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes council-core-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgb(242 184 75 / 0%));
  }

  50% {
    filter: drop-shadow(0 0 16px rgb(242 184 75 / 72%));
  }
}

@keyframes council-halo-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) translateZ(-40px) scale(0.96);
    opacity: 0.72;
  }

  50% {
    transform: translate(-50%, -50%) translateZ(-40px) scale(1.04);
    opacity: 1;
  }
}

@keyframes council-live-pulse {
  0% { box-shadow: 0 0 0 0 rgb(194 122 24 / 45%); }
  70% { box-shadow: 0 0 0 10px rgb(194 122 24 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(194 122 24 / 0%); }
}

@media (max-width: 920px) {
  .hero-visual {
    min-height: 480px;
    padding-top: 24px;
  }

  .hero-council-system,
  .hero-3d.hero-council {
    min-height: 440px;
  }

  .hero-council-stage {
    height: 440px;
    --orbit-r: min(38vw, 188px);
  }

  .hero-council-logo {
    width: min(72vw, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-council-system,
  .hero-3d.hero-council {
    transition: none;
  }

  .hero-council-ring,
  .hero-council-orbit,
  .hero-council-orbit li,
  .council-arc path,
  .council-core circle:first-child,
  .hero-council-halo,
  .hero-council-pulse,
  .eye-pupil {
    animation: none !important;
    transition: none;
  }

  .council-arc path {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}