.kdot{
  position:relative;
  --kdot-gap:15px;
  --kdot-r:0.9px;
  --kdot-dim:#323232;      /* puncte de bază */
  --kdot-bright:rgba(233,255,205,0.95);  /* puncte reveal */
  --kdot-reach:150px;
  --mx:50%; --my:50%;
}

/* BAZA: puncte dim pe fundalul secțiunii — mereu vizibile.
   .kdot.kdot = specificitate dublă ca să bată Elementor */
.kdot.kdot{
  background-image:radial-gradient(circle,var(--kdot-dim) var(--kdot-r),transparent calc(var(--kdot-r) + 0.6px));
  background-size:var(--kdot-gap) var(--kdot-gap);
  background-repeat:repeat;
}

/* HOVER: puncte luminoase dezvăluite sub cursor */
.kdot::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--kdot-bright) var(--kdot-r),transparent calc(var(--kdot-r) + 0.6px));
  background-size:var(--kdot-gap) var(--kdot-gap);
  opacity:0;transition:opacity .4s ease;
  -webkit-mask-image:radial-gradient(circle var(--kdot-reach) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.5) 48%,transparent 76%);
          mask-image:radial-gradient(circle var(--kdot-reach) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.5) 48%,transparent 76%);
}
.kdot > *{position:relative;z-index:1;}
.kdot.is-hovering::after{opacity:1;}
@media (prefers-reduced-motion:reduce){.kdot::after{transition:none;}}