/* Nuorvex Systems Graphic — responsive, scales with its container */
.nxsg {
  --nxsg-green: #95bf2c;
  --nxsg-bg: #203530;
  --nxsg-text: #b9cbbf;
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 575 / 552;
  background:
    radial-gradient(circle at 50% 45%, #27403a 0%, var(--nxsg-bg) 70%);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  container-type: inline-size;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--nxsg-text);
  box-shadow: 0 20px 50px rgba(15, 30, 25, 0.25);
}
.nxsg *, .nxsg *::before, .nxsg *::after { box-sizing: border-box; }

/* Grid background */
.nxsg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 8.7% 9.1%;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 95%);
          mask-image: radial-gradient(circle at center, #000 30%, transparent 95%);
}

/* Top + bottom text lines */
.nxsg-topline, .nxsg-bottomline {
  position: absolute;
  left: 7%;
  right: 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-size: clamp(7px, 1.65cqw, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
}
.nxsg-topline { top: 5.5%; }
.nxsg-bottomline { bottom: 4.2%; color: #9db5a6; font-size: clamp(6px, 1.5cqw, 10px); }
.nxsg-topline span, .nxsg-bottomline span { display: inline-flex; align-items: center; gap: .7em; }

.nxsg-dot {
  width: 7px; height: 7px;
  width: clamp(5px, 1.2cqw, 8px); height: clamp(5px, 1.2cqw, 8px);
  border-radius: 50%;
  background: var(--nxsg-green);
  display: inline-block;
  animation: nxsg-pulse 2s ease-in-out infinite;
}
.nxsg-bottomline i {
  width: clamp(4px, .9cqw, 6px); height: clamp(4px, .9cqw, 6px);
  background: var(--nxsg-green);
  display: inline-block;
}

/* SVG illustration */
.nxsg-svg {
  position: absolute;
  left: 0;
  top: 8%;
  width: 100%;
  height: auto;
  z-index: 2;
  overflow: visible;
}

/* Info card */
.nxsg-label {
  position: absolute;
  right: 6%;
  bottom: 11.5%;
  width: 46%;
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 2.6% 3%;
  background: rgba(46, 69, 62, .92);
  border: 1px solid rgba(150, 175, 160, .35);
  border-radius: 8px;
  z-index: 3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  backdrop-filter: blur(4px);
}
.nxsg-label-icon {
  flex: 0 0 auto;
  width: 11%;
  min-width: 22px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(149, 191, 44, .5);
  border-radius: 6px;
  color: var(--nxsg-green);
  background: rgba(149, 191, 44, .08);
  padding: 2.5%;
}
.nxsg-label-icon svg { width: 70%; height: 70%; }
.nxsg-label-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.nxsg-label-text strong {
  color: #fff;
  font-size: 13px;
  font-size: clamp(10px, 2.3cqw, 15px);
  line-height: 1.2;
}
.nxsg-label-text span {
  color: #a9bdb1;
  font-size: 11px;
  font-size: clamp(8px, 1.9cqw, 12px);
  line-height: 1.3;
}

/* Animations */
.nxsg-lines path {
  stroke-dasharray: 6 6;
  animation: nxsg-dash 1.6s linear infinite;
}
.nxsg-layer, .nxsg-sat { transform-box: fill-box; transform-origin: center; }
.nxsg-top    { animation: nxsg-float 5s ease-in-out infinite; }
.nxsg-middle { animation: nxsg-float 5s ease-in-out -.6s infinite; }
.nxsg-bottom { animation: nxsg-float 5s ease-in-out -1.2s infinite; }
.nxsg-sat-a  { animation: nxsg-bob 6s ease-in-out infinite; }
.nxsg-sat-b  { animation: nxsg-bob 6s ease-in-out -2s infinite; }
.nxsg-sat-c  { animation: nxsg-bob 6s ease-in-out -4s infinite; }

@keyframes nxsg-dash  { to { stroke-dashoffset: -24; } }
@keyframes nxsg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nxsg-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nxsg-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(149,191,44,.5); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(149,191,44,0); } }

/* Tablet */
@media (max-width: 1024px) {
  .nxsg { max-width: 560px; }
}

/* Mobile: hide long text parts so nothing overlaps */
@media (max-width: 480px) {
  .nxsg { border-radius: 10px; }
  .nxsg-coord { display: none; }
  .nxsg-label { width: 56%; right: 5%; padding: 2.2% 2.6%; }
  .nxsg-label-icon { min-width: 18px; }
}
@media (max-width: 340px) {
  .nxsg-bottomline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nxsg *, .nxsg-dot { animation: none !important; }
}