.soft-aurora-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(66, 116, 255, 0.34), transparent 38%),
    radial-gradient(circle at 82% 68%, rgba(195, 76, 255, 0.28), transparent 42%),
    #05070b;
}

.soft-aurora-background canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.96;
  filter: saturate(1.18) contrast(1.08);
}

.dark-header,
.dark-portfolio main,
.dark-footer {
  position: relative;
  z-index: 1;
}

.dark-hero {
  background: rgba(5, 7, 11, 0.16) !important;
}

.dark-hero .hero-bg {
  opacity: 0.82;
}

.dark-section {
  background: linear-gradient(180deg, rgba(7, 9, 13, 0.60), rgba(7, 9, 13, 0.42)) !important;
}

.abilities-section-dark,
.visuals-section {
  background: rgba(8, 11, 17, 0.54) !important;
}

.dark-contact {
  background: rgba(7, 9, 14, 0.48) !important;
}

.dark-card {
  background: linear-gradient(145deg, rgba(17, 23, 34, 0.84), rgba(10, 13, 20, 0.70)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (max-width: 760px) {
  .soft-aurora-background canvas { opacity: 0.88; }
  .dark-section { background: rgba(7, 9, 13, 0.54) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .soft-aurora-background canvas { opacity: 0.76; }
}