/* AutoFactory — shared cyber-chic polish layer.
   Loads AFTER each page's styles.css, so it only adds/overrides.
   One source of truth so the home + every plugin page feel like one piece. */

/* Backdrop: accent + green glow wash over a faint tech grid */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--accent-glow), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(34, 197, 94, 0.06), transparent 70%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.018) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 40px);
}
/* keep content above the backdrop */
nav, main, footer, section { position: relative; z-index: 1; }

/* Gradient hero word (was flat accent) */
.hero h1 span {
  background: linear-gradient(120deg, #60a5fa, #22d3ee 60%, #3b82f6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Pulsing status dot on the nav badge */
.nav-badge { display: inline-flex; align-items: center; gap: 7px; }
.nav-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px currentColor;
  animation: af-pulse 2s infinite;
}
@keyframes af-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Cards: add a glow on hover (border-accent already exists in styles.css) */
.feature-card:hover { box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-2px); }
.lab-card:hover     { box-shadow: 0 0 30px var(--accent-glow); }

/* Hero visual: glow + scanline top edge */
.hero-visual { box-shadow: 0 0 60px var(--accent-glow); }
.hero-visual::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* CTA buttons: subtle glow so primary actions pop on the dark canvas */
.btn-primary { box-shadow: 0 0 0 0 var(--accent-glow); }
.btn-primary:hover { box-shadow: 0 6px 24px var(--accent-glow); }