/*
=========================================================
Hero
=========================================================
*/

.hero {
    position: relative;
    overflow: hidden;

    padding-block:
        clamp(
            var(--space-xl),
            4vw,
            var(--space-2xl)
        );

    background:
        radial-gradient(
            circle at 7% 15%,
            rgba(255, 209, 102, .24),
            transparent 25rem
        ),
        radial-gradient(
            circle at 94% 12%,
            rgba(154, 214, 157, .20),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            var(--color-background-alt) 0%,
            var(--color-primary-light) 100%
        );
}

.hero::before,
.hero::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.hero::before {
    top: -90px;
    right: -75px;

    width: 250px;
    height: 250px;

    background-color:
        rgba(110, 198, 255, .15);
}

.hero::after {
    bottom: -105px;
    left: -70px;

    width: 215px;
    height: 215px;

    background-color:
        rgba(255, 138, 101, .10);
}

.hero__inner {
    position: relative;
    z-index: 1;

    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, .88fr)
        minmax(420px, 1.12fr);

    align-items: center;

    gap:
        clamp(
            var(--space-xl),
            5vw,
            var(--space-3xl)
        );
}

.hero__content {
    max-width: 680px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: var(--space-lg);

    padding:
        var(--space-sm)
        var(--space-md);

    border:
        1px solid
        rgba(77, 181, 247, .14);

    border-radius: var(--radius-round);

    color: var(--color-text);

    background-color:
        rgba(110, 198, 255, .22);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    box-shadow: var(--shadow-sm);
}

.hero__slogan {
    display: flex;
    flex-direction: column;

    gap: var(--space-xs);

    margin-bottom: var(--space-xl);
}

.hero__slogan p {
    margin: 0;
}

.hero__slogan-kz {
    color: var(--color-text);

    font-size:
        clamp(
            var(--font-size-md),
            1.5vw,
            var(--font-size-lg)
        );

    font-weight: var(--font-weight-bold);
}

.hero__slogan-ru {
    color: var(--color-text-light);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.hero__title {
    max-width: 660px;

    margin-bottom: var(--space-lg);

    color: var(--color-text);

    font-size:
        clamp(
            3rem,
            5.5vw,
            5.25rem
        );

    line-height: .98;
    letter-spacing: -.05em;
}

.hero__title-accent {
    display: block;

    margin-top: var(--space-sm);

    color: var(--color-primary-strong);
}

.hero__description {
    max-width: 620px;

    margin-bottom: var(--space-lg);

    color: var(--color-text-light);

    font-size:
        clamp(
            var(--font-size-md),
            1.6vw,
            var(--font-size-lg)
        );

    line-height: 1.7;
}

.hero__highlight {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: var(--space-sm);

    margin-bottom: var(--space-xl);

    padding:
        var(--space-sm)
        var(--space-md);

    border:
        1px solid
        rgba(255, 138, 101, .16);

    border-radius: var(--radius-md);

    color: var(--color-text);

    background-color:
        rgba(255, 138, 101, .10);

    font-weight: var(--font-weight-bold);

    box-shadow: var(--shadow-sm);
}

.hero__highlight-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--color-text);

    background-color: var(--color-accent);

    font-size: var(--font-size-sm);
    line-height: 1;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-md);
}

.hero__media {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__media::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 88%;
    height: 88%;

    border-radius:
        45% 55% 48% 52% /
        52% 44% 56% 48%;

    background:
        rgba(110, 198, 255, .18);

    filter: blur(2px);

    transform:
        translate(
            4%,
            5%
        );
}

.hero__image-frame {
    position: relative;

    width: 100%;
    max-width: 720px;

    overflow: hidden;

    border:
        3px solid
        rgba(77, 181, 247, .45);

    border-radius:
        46% 54% 48% 52% /
        52% 45% 55% 48%;

    background-color: var(--color-background);

    box-shadow: var(--shadow-lg);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.hero__image-frame:hover {
    transform:
        translateY(-4px)
        scale(1.01);

    box-shadow:
        0 24px 50px
        rgba(45, 55, 72, .14);
}

.hero__image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 3 / 2;

    object-fit: cover;
}

@media (max-width: 1199.98px) {
    .hero__inner {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(390px, 1.05fr);
    }

    .hero__title {
        font-size:
            clamp(
                2.8rem,
                5vw,
                4.5rem
            );
    }
}

@media (max-width: 991.98px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__content {
        max-width: 760px;
    }

    .hero__media {
        width: 100%;
        max-width: 720px;

        margin-inline: auto;
    }

    .hero__image-frame {
        max-width: 680px;
    }
}

@media (max-width: 767.98px) {
    .hero__title {
        font-size:
            clamp(
                2.6rem,
                11vw,
                3.8rem
            );
    }

    .hero__highlight {
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .hero {
        padding-block: var(--space-xl);
    }

    .hero__eyebrow {
        margin-bottom: var(--space-md);
    }

    .hero__slogan {
        margin-bottom: var(--space-lg);
    }

    .hero__title {
        font-size:
            clamp(
                2.35rem,
                12vw,
                3.25rem
            );
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__image-frame {
        border-radius: var(--radius-xl);
    }

    .hero__image {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__image-frame {
        transition: none;
    }

    .hero__image-frame:hover {
        transform: none;
    }
}/*
=========================================================
Hero image alignment
=========================================================
*/

@media (min-width: 1200px) {
    .hero__media {
        transform: translateX(32px);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero__media {
        transform: translateX(16px);
    }
}

@media (max-width: 991.98px) {
    .hero__media {
        transform: none;
    }
}