:root {
  --sgs-circuit-ink: #020b18;
  --sgs-circuit-deep: #03142a;
  --sgs-circuit-cyan: #21d9f4;
  --sgs-circuit-soft: #8beeff;
  --sgs-circuit-line: rgba(33, 217, 244, .24);
  --sgs-circuit-panel: rgba(3, 14, 31, .68);
  --sgs-circuit-panel-strong: rgba(2, 9, 22, .84);
}

html { background: var(--sgs-circuit-ink); }

body {
  background: var(--sgs-circuit-ink) !important;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

/* One continuous, vertical circuit world behind the full site. */
body::before {
  background:
    radial-gradient(circle at 12% 7%, rgba(40, 225, 255, .2) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 13%, rgba(40, 225, 255, .35) 0 3px, transparent 5px),
    radial-gradient(circle at 87% 38%, rgba(40, 225, 255, .22) 0 2px, transparent 4px),
    radial-gradient(circle at 25% 52%, rgba(40, 225, 255, .28) 0 3px, transparent 5px),
    radial-gradient(circle at 58% 72%, rgba(40, 225, 255, .24) 0 2px, transparent 4px),
    radial-gradient(circle at 15% 90%, rgba(40, 225, 255, .34) 0 3px, transparent 5px),
    linear-gradient(90deg, transparent 0 7%, rgba(33, 217, 244, .2) 7.05% 7.15%, transparent 7.2% 16%, rgba(33, 217, 244, .17) 16.05% 16.15%, transparent 16.2% 33%, rgba(33, 217, 244, .21) 33.05% 33.16%, transparent 33.2% 49%, rgba(33, 217, 244, .18) 49.05% 49.16%, transparent 49.2% 68%, rgba(33, 217, 244, .21) 68.05% 68.16%, transparent 68.2% 86%, rgba(33, 217, 244, .16) 86.05% 86.16%, transparent 86.2%),
    linear-gradient(180deg, #031932 0%, #020c1c 38%, #061c35 66%, #020914 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 260px 580px, 100% 100%;
  opacity: .96;
  animation: sgs-circuit-drift 19s linear infinite;
}

body::after {
  z-index: -1;
  opacity: .72;
  background-image:
    linear-gradient(90deg, transparent 0 10%, var(--sgs-circuit-line) 10.1% 10.22%, transparent 10.3% 100%),
    linear-gradient(90deg, transparent 0 27%, var(--sgs-circuit-line) 27.1% 27.23%, transparent 27.3% 100%),
    linear-gradient(90deg, transparent 0 46%, var(--sgs-circuit-line) 46.1% 46.25%, transparent 46.35% 100%),
    linear-gradient(90deg, transparent 0 69%, var(--sgs-circuit-line) 69.1% 69.25%, transparent 69.35% 100%),
    linear-gradient(90deg, transparent 0 88%, var(--sgs-circuit-line) 88.1% 88.25%, transparent 88.35% 100%),
    repeating-linear-gradient(180deg, transparent 0 106px, rgba(33, 217, 244, .28) 106px 108px, transparent 108px 214px),
    radial-gradient(ellipse at 50% 0%, rgba(20, 153, 218, .18), transparent 48%);
  background-size: 100% 780px, 100% 630px, 100% 890px, 100% 720px, 100% 960px, 100% 460px, 100% 100%;
  animation: sgs-circuit-flow 13s linear infinite;
}

body > * { position: relative; z-index: 1; }

/* Keep every section in the same environment: no opaque image or color swaps. */
body section,
body main,
body .section,
body .page-section,
body .hero,
body .page-hero,
body .footer,
body footer,
body [class*="section"],
body [class*="hero"],
body [style*="background"] {
  background-color: transparent !important;
  background-image: none !important;
}

body header,
body .nav,
body .navbar,
body .site-header {
  background: rgba(2, 9, 21, .82) !important;
  border-color: rgba(33, 217, 244, .23) !important;
  backdrop-filter: blur(18px);
}

body .card,
body .audit-card,
body .audit-panel,
body .form-card,
body .form-panel,
body .service-card,
body .feature-card,
body .faq-item,
body .cta-band,
body .cta-card,
body .stat-card,
body .industry-card,
body .process-card,
body .pricing-card,
body .modal-content,
body form {
  background: var(--sgs-circuit-panel) !important;
  border-color: rgba(33, 217, 244, .25) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(139, 238, 255, .08) !important;
  backdrop-filter: blur(14px);
}

body .card:hover,
body .service-card:hover,
body .feature-card:hover,
body .industry-card:hover,
body .process-card:hover {
  border-color: rgba(139, 238, 255, .68) !important;
  box-shadow: 0 26px 76px rgba(0, 0, 0, .32), 0 0 28px rgba(33, 217, 244, .14) !important;
}

body input,
body textarea,
body select {
  background: rgba(1, 10, 24, .78) !important;
  border-color: rgba(139, 238, 255, .3) !important;
  color: #fff !important;
}

body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--sgs-circuit-cyan) !important;
  box-shadow: 0 0 0 3px rgba(33, 217, 244, .15) !important;
}

body .eyebrow,
body .kicker,
body [class*="eyebrow"],
body [class*="kicker"] { color: var(--sgs-circuit-soft) !important; }

body .btn-primary,
body .button-primary,
body .cta-primary,
body button[type="submit"] {
  background: linear-gradient(135deg, #16bcd8, #32e2f7) !important;
  color: #00111f !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px rgba(33, 217, 244, .24) !important;
}

body .btn-secondary,
body .button-secondary,
body .nav-cta {
  border-color: rgba(139, 238, 255, .48) !important;
  background: rgba(6, 35, 58, .42) !important;
}

/* Keep original words readable above page-specific decorative hero layers. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 { color: #f7fdff !important; text-shadow: 0 3px 24px rgba(0, 0, 0, .58); }

body p,
body li,
body label,
body .lead,
body .muted { color: #d4e9f2 !important; }

body .hero,
body .page-hero,
body [class*="hero"] { isolation: isolate; }

body .hero::before,
body .hero::after,
body .page-hero::before,
body .page-hero::after,
body [class*="hero"]::before,
body [class*="hero"]::after { z-index: -1 !important; opacity: .42 !important; }

body .hero-grid,
body .page-hero > *,
body .hero > *,
body [class*="hero"] > * { position: relative; z-index: 2; }

/* The source site’s optional reveal script is not part of the visual layer; keep its original content visible in the static preview. */
body [data-reveal],
body [data-r] {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes sgs-circuit-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 70px, 0 115px, 0 180px, 0 230px, 0 295px, 0 360px, 0 580px, 0 0; }
}

@keyframes sgs-circuit-flow {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 780px, 0 630px, 0 890px, 0 720px, 0 960px, 0 460px, 0 0; }
}

@media (max-width: 720px) {
  body::before { background-size: 170px 420px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 170px 420px, 100% 100%; }
  body .card,
  body .audit-card,
  body .audit-panel,
  body .form-card,
  body .form-panel,
  body .service-card,
  body .feature-card,
  body .faq-item,
  body .cta-band,
  body .cta-card,
  body form { background: rgba(2, 13, 29, .78) !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none !important; }
}