/* Acabamento dos emblemas: discos saturados, separacao escura e luz localizada.
   Os tamanhos e os pontos de quebra continuam definidos em impact.css. */
.hero-feature.green { --neon: #00f578; }
.hero-feature.pink { --neon: #ff169c; }
.hero-feature.purple { --neon: #b91aff; }
.hero-feature.orange { --neon: #ffb600; }
.hero-feature.blue { --neon: #009fff; }
.hero-feature.cyan { --neon: #00baff; }

.hero-feature .feature-orbit {
  color: #fff;
  border-color: var(--neon);
  background:
    radial-gradient(ellipse at 29% 18%, #ffffff2b 0, #ffffff0d 20%, transparent 48%),
    radial-gradient(circle at 43% 37%, var(--neon) 0 49%, color-mix(in srgb, var(--neon) 84%, #00172c) 83%, color-mix(in srgb, var(--neon) 58%, #00172c) 100%);
  box-shadow:
    0 0 0 3px #001226,
    0 0 10px color-mix(in srgb, var(--neon) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--neon) 32%, transparent),
    inset 0 1px 3px #ffffff55,
    inset 0 -3px 6px #0006294d;
}

.hero-feature .feature-orbit::before {
  /* O contorno externo ocupa a mesma area do aro original, agora mais fino. */
  border-width: 2px;
  border-color: var(--neon);
  background: transparent;
  box-shadow:
    0 0 0 2px #001226,
    inset 0 0 0 3px #001226,
    0 0 7px color-mix(in srgb, var(--neon) 80%, transparent),
    0 0 18px color-mix(in srgb, var(--neon) 42%, transparent);
}

.hero-feature .feature-orbit::after {
  /* Tres reflexos pequenos interrompem o aro, como metal iluminado. */
  inset: -8px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 82% 12%, #fff 0 1px, #ffffffdd 1.5px, transparent 3px),
    radial-gradient(circle at 15% 80%, #fff 0 1px, #ffffffbb 1.5px, transparent 3px),
    radial-gradient(circle at 9% 26%, #ffffffd9 0 .7px, transparent 2px);
  box-shadow: none;
  filter: drop-shadow(0 0 2px #fff);
  pointer-events: none;
}

.hero-feature .feature-orbit svg {
  color: #fff;
  opacity: 1;
  filter: drop-shadow(0 1px 1px #00294940);
}