/* ============================================================
   Zenflux — Background Motifs (CSS-only)
   The brand uses three recurring abstract backdrops:
     1. Flowing energy waves (light, calm)  → .zf-bg-waves
     2. Dark surface with directional glow   → .zf-bg-dark
     3. Radar / concentric field (technical) → .zf-bg-radar
   These are pure CSS (gradients) — no raster assets. Layer them
   behind content with low opacity. Photographic product renders
   (cables, data centers) should use real imagery, not these.
   ============================================================ */

/* Dark hero / section surface with a directional blue→cyan glow */
.zf-bg-dark {
  background-color: var(--navy-900);
  background-image: var(--gradient-glow), var(--gradient-hero);
  color: var(--text-inverse);
}

/* Soft flowing energy waves on light — subtle brand texture */
.zf-bg-waves {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(120% 90% at 90% 10%, rgba(0, 194, 255, 0.10) 0%, transparent 55%),
    radial-gradient(120% 90% at 10% 100%, rgba(37, 99, 255, 0.10) 0%, transparent 55%);
}

/* Tinted mint band */
.zf-bg-tint { background-color: var(--surface-tint); }

/* Radar / concentric field for dark technical tiles */
.zf-bg-radar {
  background-color: var(--navy-900);
  background-image:
    repeating-radial-gradient(circle at 70% 50%, rgba(0,194,255,0.16) 0 1px, transparent 1px 34px),
    linear-gradient(0deg, rgba(0,194,255,0.10), rgba(0,194,255,0.10)),
    var(--gradient-hero);
  background-blend-mode: screen, normal, normal;
}

/* Hairline energy underline — accent divider */
.zf-rule-accent {
  height: 2px;
  border: 0;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
}