background-blend-mode: multiply на hero с фото
Текст читаем без сплошного затемнения.
Два слоя `background-image` (фото + фиолетовый градиент) с `background-blend-mode: multiply` дают глубину без тяжёлого overlay-div.
Проверьте контраст заголовка по WCAG — blend не освобождает от проверки цвета текста.
- background-blend-mode — MDN — Режимы наложения фона.
- Blend modes — web.dev — Обзор blend modes.
Печать
В `@media print` отключите blend — ч/б печать может дать грязные пятна.