/* Technique 4 — designed backgrounds: blurred glow blobs + noise texture */

.dc-hero {
  position: relative;
  overflow: hidden;
  color: var(--dc-white);
  background: var(--dc-grad-hero);
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(90px, 12vh, 140px);
}

.dc-glow-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.dc-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: dc-float 16s ease-in-out infinite;
}
/* Blob colors swapped 2026-08-30 to follow the reversed --dc-grad-hero corners:
   the top-left corner is now magenta, so it gets the hot-pink glow; the
   bottom-right is now teal, so it gets the lime glow (mirrors the original
   harmony onto the flipped gradient instead of clashing). */
.dc-glow--1 { width: 460px; height: 460px; top: -120px; left: -80px; background: var(--dc-hot-pink); animation-delay: 0s; }
.dc-glow--2 { width: 520px; height: 520px; bottom: -180px; right: -120px; background: var(--dc-lime); animation-delay: -5s; }
.dc-glow--3 { width: 360px; height: 360px; top: 40%; left: 55%; background: var(--dc-turquoise); animation-delay: -10s; }

@keyframes dc-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(24px, -30px) scale(1.08); }
}

.dc-noise {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dc-hero__inner, .dc-hero .dc-container { position: relative; z-index: 2; }

/* The hero content carries .dc-container, so it shares the exact same width
   token (min(1320px, 94%)) and `margin: 0 auto` centering as the nav and
   every body section. A previous `width: 80%` override made the hero 80% of
   the full viewport instead — which is a DIFFERENT width from the 1320px
   container, so the hero's left/right edges never lined up with the nav
   above or the sections below (it poked out ~108px each side at 1920px and
   pulled IN at ~1440px). No override here: the hero now aligns pixel-for-
   pixel with the rest of the page at every viewport. */

/* .dc-lede normally caps at 62ch for readability; in the hero let the
   subtext stretch to the full container width so it matches the headline. */
.dc-hero__content .dc-lede { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dc-glow { animation: none; }
}

/* Glassmorphic card variant used on dark/gradient sections layers above glow */
.dc-section--dark .dc-glow-field,
.dc-hero .dc-glow-field { z-index: 0; }

/* Signature graphic placement (DC Nervous System Map) */
.dc-signature-graphic {
  position: relative;
  border-radius: var(--dc-radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(12,64,107,0.45);
}
.dc-signature-graphic img { width: 100%; height: auto; display: block; }