/* hero-knot: 3D dot torus-knot — now the BACKGROUND of the live "Watch it
   write itself" section (.hl-sec). Sits behind the heading + terminal/agent
   panels; soft + masked so content stays readable. Hero map restored (no knot
   in the hero anymore). */
.hl-sec{position:relative}
.hl-heroknot{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 48%, #000 35%, transparent 82%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 48%, #000 35%, transparent 82%);
}
/* section content sits above the knot */
.hl-sec__wrap{position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){.hl-heroknot{opacity:.4}}