/* Hero-only Plasma backdrop. Static colour remains without JS or WebGL. */
.dd-home .dd-hero { position: relative; isolation: isolate; }
.dd-hero-shader {
  position: absolute;
  inset: 0 calc((min(75rem, 100vw - 2rem) - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 35%, #173330, #0b1113 72%);
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent);
}
.dd-hero-shader canvas { display: block; width: 100%; height: 100%; opacity: .72; }
.dd-hero-shader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,17,19,.94), rgba(11,17,19,.74) 42%, rgba(11,17,19,.12));
}
.dd-home .dd-shader-toggle {
  position: absolute;
  bottom: 1.25rem;
  right: 0;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--dd-border);
  border-radius: .4rem;
  background: #11191c;
  color: var(--dd-paper-300);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.dd-shader-toggle[hidden] { display: none; }
.dd-shader-toggle:hover { border-color: var(--dd-cyan-400); color: var(--dd-paper-100); }
.dd-shader-toggle:focus-visible { outline: 2px solid var(--dd-cyan-400); outline-offset: 4px; }
@media (max-width: 780px) {
  .dd-hero-shader::after { background: linear-gradient(180deg, rgba(11,17,19,.82), rgba(11,17,19,.65) 55%, rgba(11,17,19,.15)); }
  .dd-hero-shader canvas { opacity: .6; }
}