.why-aside {
  background: linear-gradient(155deg, #1f252c 0%, #2d3d50 55%, #354e6b 100%);
}

.sevs-motion {
  position: relative;
  align-self: center;
  width: 250px;
  height: 250px;
  display: grid;
  place-items: center;
}

.sevs-motion img {
  position: relative;
  z-index: 2;
  width: 154px;
  height: auto;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.32));
}

.sevs-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sevs-ring-outer {
  inset: 5px;
  border: 1px solid rgba(254,254,254,.42);
  border-left-color: transparent;
  border-bottom-color: rgba(254,254,254,.08);
  animation: sevs-ring-clockwise 11s linear infinite;
}

.sevs-ring-outer::before,
.sevs-ring-outer::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 15px rgba(254,254,254,.85);
}

.sevs-ring-outer::before { top: 22px; right: 34px; }
.sevs-ring-outer::after { bottom: 27px; left: 27px; }

.sevs-ring-inner {
  inset: 36px;
  border: 1px dashed rgba(88,125,181,.8);
  box-shadow: inset 0 0 22px rgba(88,125,181,.08);
  animation: sevs-ring-anticlockwise 8s linear infinite;
}

@keyframes sevs-ring-clockwise { to { transform: rotate(360deg); } }
@keyframes sevs-ring-anticlockwise { to { transform: rotate(-360deg); } }

@media (max-width: 900px) {
  .why-aside { min-height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .sevs-ring { animation: none; }
}