body {

    .hero-background {
        background-image: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%), url('/images/tk/hero.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 1rem;
        padding-top: clamp(4vh, 8vh, 10vh);
        position: relative;
        filter: brightness(1) contrast(1.1);
    }

        .hero-background::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(229, 62, 62, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }
}