/* ==========================================================================
   GHOSTFLOW · SEITENHINTERGRUND UND FUNKEN
   Wird NACH landing.css geladen und überschreibt nur den Seitengrund.
   landing.css bleibt unangetastet — diese Datei wieder auszuhängen stellt
   den alten Zustand her.

   1) Der Grund übernimmt die Farben des Dashboard-Screenshots
      (#191828 Fläche, #201f33 Karten — beide am Screenshot gemessen).
   2) Über der ganzen Seite liegen wenige kleine Funken in der Farbe des
      "Demo anfragen"-Buttons (#c4b5fd → #a78bfa).

   body::before ist in landing.css vom Maus-Glow belegt, deshalb sitzt das
   Funken-Layer auf body::after.
   ========================================================================== */

/* Der Verlauf sitzt auf html, nicht auf body: ein body::after mit
   z-index: -1 würde sonst vom Body-Hintergrund verdeckt und die Funken
   wären unsichtbar. */
/* Seitengrund 1:1 auf die GhostSuite-Familie (#0a0a12) — der alte
   Screenshot-Verlauf (#191828/#201f33) hat die komplette Seite aufgehellt
   und lag als Letztgeladener über allen landing.css-Tokens. */
html {
  background: #0a0a12;
}
body { background: transparent; }

/* Funken über die gesamte Seite. z-index: -1 hält sie hinter allem Inhalt,
   aber über dem Seitengrund — sie legen sich also nie über Text. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.7px 1.7px at 18% 24%, rgba(196, 181, 253, .95), transparent),
    radial-gradient(1.3px 1.3px at 71% 12%, rgba(167, 139, 250, .85), transparent),
    radial-gradient(1.9px 1.9px at 44% 70%, rgba(196, 181, 253, .8),  transparent),
    radial-gradient(1.2px 1.2px at 88% 52%, rgba(167, 139, 250, .8),  transparent),
    radial-gradient(1.5px 1.5px at 9%  78%, rgba(196, 181, 253, .7),  transparent),
    radial-gradient(1.3px 1.3px at 62% 90%, rgba(167, 139, 250, .75), transparent);
  /* Weite Raster = wenige Punkte; sechs verschiedene Größen, damit sich
     kein Muster abzeichnet. */
  background-size: 540px 540px, 680px 680px, 460px 460px,
                   760px 760px, 620px 620px, 840px 840px;
  opacity: .85;
  animation: gf-site-twinkle 7s ease-in-out infinite alternate;
}

@keyframes gf-site-twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* Sektionen mit deckendem Grund leicht öffnen, damit die Funken auch dort
   durchscheinen. */
.trust-strip { background: rgba(17, 16, 26, .55); }
.pricing-matrix-wrap { background: rgba(13, 13, 22, .45); }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: .8; }
}