/* custom.css */

[data-section=hero] {
    background-image: url(../images/bg/bg.png);
}

@media (min-width: 1200px) {
    [data-section=hero] {
        background-image: url(../images/bg/bg.png);
    }
}

[data-section=news] {
    background-image: url(../images/bg/bg-1.png);
}

[data-section=streams] {
    background-image: url(../images/bg/bg-2.png);
}

.hero__btn-start {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.hero__btn-start img {
    display: block;
    width: clamp(280px, 55vw, 520px);
    height: auto;
    margin: 0 auto;
}

.hero__btn-start-text {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-1);
    font-size: clamp(1.3rem, 4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(var(--color-0), 1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    white-space: nowrap;
}

.hero__btn-start:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.point__title {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.point__desc {
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}