.ns-attraction-layer {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
}

.ns-signal-field {
  position: absolute;
  inset: 0;
  transition: opacity 260ms ease;
}

body.ns-scrolled .ns-signal-field {
  opacity: 0.28;
}

.ns-scan-line,
.ns-scan-line::before,
.ns-scan-line::after {
  position: absolute;
  display: block;
  content: "";
}

.ns-scan-line {
  top: 98px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(63, 165, 218, 0.12),
    rgba(246, 184, 50, 0.72),
    rgba(72, 176, 111, 0.36),
    transparent
  );
  transform-origin: left center;
  animation: ns-scan-drift 7s ease-in-out infinite;
}

.ns-scan-line::before,
.ns-scan-line::after {
  width: 9px;
  height: 9px;
  top: -4px;
  border-radius: 3px;
  background: #f6b832;
  box-shadow: 0 0 0 7px rgba(246, 184, 50, 0.12);
  animation: ns-node-pulse 2.4s ease-in-out infinite;
}

.ns-scan-line::before {
  left: 19%;
}

.ns-scan-line::after {
  right: 23%;
  background: #48b06f;
  box-shadow: 0 0 0 7px rgba(72, 176, 111, 0.12);
  animation-delay: 800ms;
}

.ns-signal-ring {
  position: absolute;
  width: 152px;
  height: 152px;
  border: 1px solid rgba(63, 165, 218, 0.22);
  border-radius: 50%;
  opacity: 0.78;
  animation: ns-ring-breathe 5.4s ease-in-out infinite;
}

.ns-ring-one {
  top: 130px;
  right: 7%;
}

.ns-ring-two {
  bottom: 22%;
  left: 4%;
  width: 116px;
  height: 116px;
  border-color: rgba(246, 184, 50, 0.28);
  animation-delay: 1.2s;
}

.ns-ring-three {
  top: 46%;
  right: 17%;
  width: 96px;
  height: 96px;
  border-color: rgba(72, 176, 111, 0.24);
  animation-delay: 2s;
}

.ns-signal-bar {
  position: absolute;
  width: 34px;
  height: 5px;
  border-radius: 3px;
  background: #3fa5da;
  box-shadow: 0 10px 22px rgba(21, 48, 62, 0.16);
  animation: ns-bar-float 4.8s ease-in-out infinite;
}

.ns-bar-one {
  top: 27%;
  left: 7%;
}

.ns-bar-two {
  top: 59%;
  right: 9%;
  width: 28px;
  background: #f6b832;
  animation-delay: 1s;
}

.ns-bar-three {
  bottom: 17%;
  right: 28%;
  width: 42px;
  background: #48b06f;
  animation-delay: 1.8s;
}

.ns-motion-chip {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  min-width: 156px;
  max-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(38, 63, 78, 0.1);
  border-radius: 8px;
  color: #263f4e;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 42px rgba(19, 54, 73, 0.13);
  backdrop-filter: blur(12px);
  animation: ns-chip-float 6s ease-in-out infinite;
}

.ns-motion-chip i {
  width: 10px;
  height: 34px;
  border-radius: 8px;
  background: #f6b832;
  box-shadow: 0 0 0 6px rgba(246, 184, 50, 0.14);
}

.ns-motion-chip strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1;
  color: #1f3a4a;
}

.ns-motion-chip span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.2;
  color: #547183;
}

.ns-chip-pos {
  top: 124px;
  left: 43%;
}

.ns-chip-schools {
  top: 180px;
  right: 5%;
  animation-delay: 900ms;
}

.ns-chip-schools i {
  background: #3fa5da;
  box-shadow: 0 0 0 6px rgba(63, 165, 218, 0.14);
}

.ns-chip-support {
  bottom: 130px;
  left: 6%;
  animation-delay: 1.6s;
}

.ns-chip-support i {
  background: #48b06f;
  box-shadow: 0 0 0 6px rgba(72, 176, 111, 0.14);
}

.ns-chip-web {
  right: 6%;
  bottom: 155px;
  animation-delay: 2.2s;
}

.ns-chip-web i {
  background: #263f4e;
  box-shadow: 0 0 0 6px rgba(38, 63, 78, 0.12);
}

.ns-attraction-cta {
  box-sizing: border-box;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(38, 63, 78, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 50px rgba(19, 54, 73, 0.18);
  backdrop-filter: blur(14px);
}

.ns-attraction-cta a {
  box-sizing: border-box;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 8px;
  color: #263f4e;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.ns-attraction-cta a:focus-visible {
  outline: 3px solid rgba(63, 165, 218, 0.38);
  outline-offset: 2px;
}

.ns-attraction-cta a:hover {
  transform: translateY(-2px);
}

.ns-attraction-main {
  background: #f6b832;
  box-shadow: 0 10px 24px rgba(246, 184, 50, 0.26);
  animation: ns-main-cta 2.8s ease-in-out infinite;
}

.ns-attraction-whatsapp {
  background: rgba(72, 176, 111, 0.14);
}

.ns-attraction-emergency {
  color: #8c2e2e;
  background: rgba(220, 76, 76, 0.12);
}

@keyframes ns-scan-drift {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(0) scaleX(0.94);
  }
  50% {
    opacity: 1;
    transform: translateY(8px) scaleX(1);
  }
}

@keyframes ns-node-pulse {
  0%,
  100% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.18);
  }
}

@keyframes ns-ring-breathe {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.08);
  }
}

@keyframes ns-bar-float {
  0%,
  100% {
    opacity: 0.54;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    opacity: 0.95;
    transform: translateY(-14px) rotate(3deg);
  }
}

@keyframes ns-chip-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes ns-main-cta {
  0%,
  100% {
    box-shadow: 0 10px 24px rgba(246, 184, 50, 0.24);
  }
  50% {
    box-shadow: 0 12px 30px rgba(246, 184, 50, 0.42), 0 0 0 7px rgba(246, 184, 50, 0.12);
  }
}

@media (max-width: 920px) {
  .ns-chip-web,
  .ns-ring-three,
  .ns-bar-three {
    display: none;
  }

  .ns-motion-chip {
    min-width: 138px;
    padding: 9px 10px;
  }
}

@media (max-width: 700px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #top,
  #top .max-w-7xl,
  #top .text-center,
  #top p {
    box-sizing: border-box;
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #root h1 {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: 1.88rem !important;
    line-height: 1.1 !important;
  }

  #top .inline-flex {
    max-width: calc(100vw - 40px);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #top h1 > .relative.inline-block {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  #top h1 > .relative.inline-block .relative {
    white-space: normal !important;
  }

  .ns-scan-line,
  .ns-signal-ring,
  .ns-signal-bar,
  .ns-motion-chip {
    display: none;
  }

  .ns-attraction-cta {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    grid-template-columns: 1fr 1fr;
  }

  .ns-attraction-cta a {
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    font-size: 0.68rem;
    line-height: 1.08;
    text-align: center;
    white-space: normal;
  }

  .ns-attraction-emergency {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-scan-line,
  .ns-scan-line::before,
  .ns-scan-line::after,
  .ns-signal-ring,
  .ns-signal-bar,
  .ns-motion-chip,
  .ns-attraction-main {
    animation: none;
  }
}