/* GorilloBuild signature look - shared across the marketing pages so the
   identity is maintained in ONE place. Three pieces:
     1. Ambient accent blooms on the page background (depth, not flat black).
     2. A faint blueprint dot matrix behind the top of the page (the hero band).
     3. A brighter copy of that dot grid revealed in a soft circle that follows
        the cursor (fed by --mx/--my from the tiny inline spotlight script).

   IMPORTANT: link this AFTER each page's own inline <style> so the html/body
   background rules here win the cascade. The dot layers live on body::before /
   body::after at z-index:-1; they only show because the page background is moved
   onto <html> and <body> is made transparent here - a body background would
   paint over them. */

html {
  background:
    radial-gradient(58% 40% at 82% 14%, rgba(79,125,252,0.07), transparent 62%),
    radial-gradient(52% 42% at 10% 48%, rgba(79,125,252,0.06), transparent 64%),
    radial-gradient(60% 40% at 64% 82%, rgba(96,110,220,0.055), transparent 62%),
    linear-gradient(145deg, #141414 0%, #0f1a2e 100%);
  background-attachment: fixed;
}
body { background: transparent; position: relative; }

/* Base dot matrix - page-anchored (absolute, not fixed) and capped to the hero
   band so it fades out before the content and never bleeds behind lower sections. */
body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 760px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(120,160,255,0.16) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
}

/* Cursor spotlight - the same grid, brighter, revealed only inside a soft circle
   at --mx/--my. Both layers tile from the body origin so the bright dots land
   exactly on the base dots. The circle is intersected with the top-fade so it
   never lights up the sections below. */
body::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 760px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(150,185,255,0.55) 1px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image:
    radial-gradient(circle 150px at var(--mx, -999px) var(--my, -999px), #000 0%, #000 26%, transparent 72%),
    linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 150px at var(--mx, -999px) var(--my, -999px), #000 0%, #000 26%, transparent 72%),
    linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 700px) {
  body::before, body::after { height: 660px; }
}