body {
    font-family: 'Manrope', sans-serif;
    background: #FFFCF8;
    overflow-x: hidden;
}

.hero-heading {
    letter-spacing: -0.08em;
    line-height: 0.88;
}

.grain {
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 4px 4px;
}

.floating {
    animation: floating 5s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -120%;
    width: 200%;
    height: 200%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);

    transform: rotate(25deg);

    animation: shine 6s linear infinite;
}

@keyframes shine {
    100% {
        left: 120%;
        top: 120%;
    }
}