.hero {
    background: radial-gradient(circle at 85% 28%, #f3e4c5 0%, transparent 35%), linear-gradient(130deg, #f9f5ea, #fffdf8 70%);
    overflow: hidden
}

.hero-layout {
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    padding: 70px 0
}

.hero h1 {
    font-size: clamp(36px, 4.4vw, 60px);
    letter-spacing: -.05em;
    margin: 16px 0 22px
}

.hero p {
    font-size: 17px;
    max-width: 540px
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.hero-trust {
    margin-top: 26px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: .04em
}

.hero-visual {
    position: relative;
    height: 460px;
    background: radial-gradient(circle, #e9d6b0 0%, #f7efe0 62%, transparent 63%);
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px) scale(.95);
    transition: opacity .7s, transform .7s;
    display: flex;
    justify-content: center;
    align-items: center
}

.hero-slide.active {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.hero-slide img {
    max-height: 430px;
    max-width: 76%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(77, 44, 28, .22));
    border-radius: 18px
}

.hero-dots {
    display: flex;
    gap: 9px;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.hero-dots button {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    background: #c8b99c;
    cursor: pointer
}

.hero-dots button.active {
    background: var(--green);
    width: 26px;
    border-radius: 9px
}

@media(max-width:780px) {
    .hero-layout {
        grid-template-columns: 1fr;
        padding: 50px 0;
        gap: 15px
    }

    .hero-content {
        order: 2;
    }

    .hero-visual {
        height: 500px;
        order: 1;
    }

    .hero-slide img {
        max-height: 500px;
        height: 500px;
    }

    .hero h1 {
        font-size: clamp(36px, 8vw, 50px)
    }
}