/* Homepage vision panel with rotating statements */

.vision-section {
    background: #fff;
    padding: 40px 0 88px;
}

.vision-section .container {
    max-width: 1140px;
}

.vision-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: 56px 56px 72px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(8, 145, 222, 0.55) 0%, rgba(44, 44, 116, 0) 60%),
        radial-gradient(90% 120% at 0% 100%, rgba(26, 229, 190, 0.22) 0%, rgba(44, 44, 116, 0) 55%),
        var(--brand-navy, #2C2C74);
    overflow: hidden;
}

.vision-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-blue, #0891DE) 0%, var(--brand-mint, #1AE5BE) 50%, var(--brand-yellow, #F9CE30) 100%);
}

.vision-slide[x-cloak] {
    display: none;
}

.vision-copy {
    min-height: 220px;
}

.vision-panel .vision-lead {
    margin: 0 0 10px;
    color: var(--brand-yellow, #F9CE30);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.vision-panel .vision-body {
    margin: 0;
    max-width: 460px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.vision-art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.vision-art img {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.vision-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vision-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.vision-dot:hover,
.vision-dot:focus {
    background: rgba(255, 255, 255, 0.6);
    outline: none;
}

.vision-dot.is-active {
    background: var(--brand-mint, #1AE5BE);
    transform: scale(1.15);
}

@media (max-width: 991px) {
    .vision-section {
        padding: 24px 0 56px;
    }

    .vision-panel {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 40px 28px 64px;
    }

    .vision-copy {
        min-height: 190px;
    }

    .vision-panel .vision-body {
        max-width: none;
        font-size: 16px;
    }

    .vision-art img {
        max-width: 420px;
    }
}

@media (max-width: 575px) {
    .vision-panel {
        padding: 32px 20px 56px;
    }

    .vision-panel .vision-lead {
        font-size: 18px;
    }

    .vision-copy {
        min-height: 210px;
    }
}