:root{
  --bg:#000; --fg:#fff;
  --neon-pink:#f600ff; --neon-green:#39ff14; --neon-yellow:#ffff00; --neon-blue:#00bfff;
  --accent: var(--neon-pink);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Montserrat,Arial,sans-serif;
  overscroll-behavior:none;
}

/* 🔧: ahora el canvas está por ENCIMA del fondo del body */
#particle-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0;           /* antes -2 */
  display:block;
}

/* 🔧: la sección y su contenido van por encima del canvas de partículas */
.hero{
  position:relative;   /* crea stacking context */
  z-index:1;
  min-height:100svh; display:grid; place-items:center; text-align:center; padding:2rem;
}

/* 🔧: el HUD va detrás del texto pero visible (no negativo) */
#hud-canvas{
  position:absolute; inset:0; width:min(92vw,1100px); height:56vh;
  margin:auto; top:14vh; filter:blur(.2px); opacity:.95;
  z-index:0;           /* antes -1 */
  pointer-events:none; /* deja pasar clicks al héroe */
}

.box{
  max-width:52rem; margin:auto; line-height:1.55; font-size:1.05rem; color:#e8eaed; text-wrap:balance;
}
h1{ font-weight:900; font-size:clamp(2rem,4.5vw,3.5rem); letter-spacing:.04em; margin-bottom:1.2rem; }
p{ opacity:.92; }
.btn{
  margin-top:1.5rem; background:var(--accent); color:#fff; border:0; padding:.85rem 1.1rem;
  border-radius:.7rem; font-weight:700; cursor:pointer; transition:filter .2s, transform .2s;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.note{ position:fixed; right:.75rem; bottom:.6rem; font-size:.8rem; color:#bdbdbd; opacity:.8 }
@media (max-width:600px){ #hud-canvas{ height:48vh; top:12vh } }