/* Lumira Academy — nc-fx: cursor-reveal dot grid + ambient hero polish.
   Add-only. Works on any .hero (dark) or [data-ncfx="grid"] dark section.
   Each host owns a stacking context; the grid sits behind the host content. */

.hero,[data-ncfx="grid"]{position:relative;isolation:isolate}

.hero{overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,#16213c 0%,#0F172A 42%,#0B1120 100%)}
.hero > .hero-bg-grid{display:none}

/* faint ambient light on the hero, drifting slowly */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;z-index:-1}
.hero::before{width:520px;height:520px;left:-160px;top:-120px;opacity:.32;
  background:radial-gradient(circle,rgba(99,102,241,.5),transparent 65%);animation:ncfxA 24s ease-in-out infinite}
.hero::after{width:440px;height:440px;right:-140px;top:20px;opacity:.2;
  background:radial-gradient(circle,rgba(245,158,11,.4),transparent 65%);animation:ncfxB 28s ease-in-out infinite}
@keyframes ncfxA{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,44px)}}
@keyframes ncfxB{0%,100%{transform:translate(0,0)}50%{transform:translate(-44px,36px)}}

/* dot grid: faint everywhere, brighter under the pointer (only mask-position moves) */
.ncfx-gridbase,.ncfx-grid{position:absolute;inset:0;pointer-events:none;z-index:-1}
.ncfx-gridbase{background-image:radial-gradient(rgba(165,180,252,.11) 1px,transparent 1.5px);background-size:26px 26px}
.ncfx-grid{background-image:radial-gradient(rgba(165,180,252,.6) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at center,#000 0%,rgba(0,0,0,.6) 42%,transparent 70%);
          mask-image:radial-gradient(circle at center,#000 0%,rgba(0,0,0,.6) 42%,transparent 70%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:520px 520px;mask-size:520px 520px;
  -webkit-mask-position:var(--ncfx-mx,50%) var(--ncfx-my,34%);mask-position:var(--ncfx-mx,50%) var(--ncfx-my,34%);
  will-change:-webkit-mask-position;transform:translateZ(0)}

/* hero free-trial CTA + supporting lines */
.btn-amber-hero{display:inline-block;background:linear-gradient(180deg,#F8CE7A,#F59E0B);color:#3a2a06;
  font-weight:500;font-size:15px;padding:14px 28px;border-radius:10px;text-align:center;text-decoration:none;
  box-shadow:0 8px 24px rgba(245,158,11,.28);transition:transform .15s,box-shadow .25s}
.btn-amber-hero:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,158,11,.4)}
.hero-freeline{margin-top:14px;font-size:13px;color:#8A97AD}
.hero-freeline strong{color:#C9D3E4;font-weight:500}
.hero-getintouch{display:inline-block;margin-top:18px;color:#8A97AD;font-size:14px;text-decoration:none;border-bottom:1px solid transparent}
.hero-getintouch:hover{color:#E7ECF6;border-bottom-color:rgba(148,163,184,.16)}

@media (prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}