/* VIREXA hero interactive dot field (Xcentra-like interaction) */
#hero.dashboard-dots-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

body > .app-container,
body > .article-container {
  position: relative;
  z-index: 1;
}

#hero {
  position: relative;
  overflow: hidden;
}

#hero > * {
  position: relative;
  z-index: 1;
}

#hero .virexa-hero-dots-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

#hero .virexa-hero-dots-wrap::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -180px;
  top: -160px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.2), rgba(0, 229, 255, 0.06) 38%, transparent 68%);
  filter: blur(28px);
}

#hero .virexa-hero-dots-wrap::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  left: -200px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(0, 242, 184, 0.18), rgba(0, 242, 184, 0.05) 42%, transparent 70%);
  filter: blur(32px);
}

#hero .virexa-hero-dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  #hero .virexa-hero-dots-wrap {
    opacity: 0.58;
  }
}