.hero-bg {
    position: relative;
    overflow: hidden;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/doomer.png') center bottom / auto 80% no-repeat;
    opacity: 0.16;
    pointer-events: none;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/doomer.png') center bottom / auto 80% no-repeat;
    opacity: 0.22;
    pointer-events: none;
    clip-path: inset(100% 0 0 0);
    animation: glitch-bg 8s steps(1) infinite;
}

.hero-bg > * {
    position: relative;
}

@keyframes glitch-bg {
    0%   { clip-path: inset(100% 0 0 0);    transform: translateX(0); }

    7%   { clip-path: inset(28% 0 54% 0);   transform: translateX(5px); }
    8%   { clip-path: inset(62% 0 18% 0);   transform: translateX(-4px); }
    9%   { clip-path: inset(100% 0 0 0);    transform: translateX(0); }

    11%  { clip-path: inset(44% 0 40% 0);   transform: translateX(3px); }
    12%  { clip-path: inset(100% 0 0 0);    transform: translateX(0); }

    53%  { clip-path: inset(12% 0 72% 0);   transform: translateX(-5px); }
    54%  { clip-path: inset(100% 0 0 0);    transform: translateX(0); }

    80%  { clip-path: inset(50% 0 32% 0);   transform: translateX(4px); }
    81%  { clip-path: inset(100% 0 0 0);    transform: translateX(0); }

    100% { clip-path: inset(100% 0 0 0);    transform: translateX(0); }
}

@media (max-width: 767.98px) {
    .btn-mobile-full {
        width: 100%;
    }
}
@media (max-width: 767.98px) {
    .btn-mobile-full {
        width: 100%;
    }
    .btn-gap {
      margin-bottom: 16px;
    }
    h1 {line-height: 1.2;
        font-size: 2.7rem;
    }
}