/* Circle floating animations */
@keyframes float1 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(50px, -75px);
    }

    50% {
        transform: translate(-25px, 50px);
    }

    75% {
        transform: translate(40px, 25px);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(-20px, 12.5px);
    }

    66% {
        transform: translate(15px, -17.5px);
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(75px, -40px);
    }
}

.container {
    display: flex;
    min-height: 100vh;
    max-width: 1440px;
    margin: 0 auto;
}

/* Left side with background */
.left {
    max-width: 50%;
    min-height: 100vh;
    flex: 1 0 50%;
    padding:20px;

}

.left__wrapper {
    position: relative;
    min-height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.logo {
    z-index: 1;
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-h2);
    color: var(--gray-gray-9);
}

.slogan {
    max-width: 240px;
    z-index: 1;
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-h2);
    color: var(--gray-gray-9);
    transition: opacity 0.5s ease-in-out;
}

.background-blur {
    position: absolute;
    inset: 0;
}


.circle-wrapper {
    position: absolute;
    top: 128px;
    width: 424px;
    height: 704px;
    left: 0;
    right: 0;
    margin: auto;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(228, 223, 245, 0.20);
    filter: blur(86.5px);
    will-change: transform;
}

.circle3 {
    width: 403px;
    height: 403px;
    background: linear-gradient(180deg, #17A0B4 0%, #0235E2 100%);
    top: 0;
    left: 0;
    animation: float1 16s ease-in-out infinite;
}

.circle2 {
    width: 308px;
    height: 308px;
    background-color: #0235E2;
    top: 289px;
    right: 0;
    animation: float2 20s ease-in-out infinite;
}

.circle1 {
    width: 171px;
    height: 171px;
    background: linear-gradient(195deg, #0235E2 0%, #17A0B4 100%);
    top: 533px;
    left: 150px;
    animation: float3 12s ease-in-out infinite;
}


/* Right side with content */
.right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    padding: var(--spacing-xxl);
    position: relative;
    background-color: var(--brand-brand-0);
}

.content {
    width: 362px;
    margin: auto;
}

.content-wide {
    width: 690px;
}

.copyright {
    width: 362px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--secondary-secondary-0);
}

/* Simple variant - without left part */
.container-simple {
    flex-direction: column;
    padding: var(--spacing-xxl);
}

.back-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--gray-gray-9);
    text-decoration: none;
    margin-bottom: var(--spacing-xxl);
}