/* Solution — Mockup links, Zielgruppen-Liste rechts */

.solution {
    padding: 80px var(--content-padding) 96px;
}

.solution__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(40px, 6vw, 72px);
    max-width: var(--content-max);
    margin: 0 auto;
}

.solution__visual {
    min-width: 0;
}

.solution-mockup-wrap {
    position: relative;
    padding: clamp(32px, 4vw, 44px) clamp(28px, 3.5vw, 40px) clamp(22px, 2.8vw, 32px);
    border-radius: 24px;
    background: #ececf1;
    border: 1px solid rgba(15, 15, 35, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 1px 2px rgba(15, 15, 35, 0.06),
        0 8px 24px rgba(15, 15, 35, 0.08),
        0 12px 28px -24px rgba(15, 15, 35, 0.13);
}

.solution-devices {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: clamp(230px, 32vw, 290px);
    margin: clamp(10px, 1.8vw, 18px) auto clamp(2px, 0.4vw, 6px);
}

.solution-devices__img {
    position: absolute;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 14px 32px rgba(15, 15, 35, 0.24));
}

.solution-devices__img--macbook {
    width: 86%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.solution-devices__img--ipad {
    width: 48%;
    left: 4%;
    bottom: 6%;
    z-index: 2;
}

.solution-devices__img--iphone {
    width: 30%;
    right: 2%;
    bottom: 10%;
    z-index: 3;
}

.solution__content {
    text-align: left;
}

.solution__title {
    margin-bottom: 18px;
}

.solution__lead {
    margin-bottom: 32px;
}

.solution-audiences {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 32px;
    list-style: none;
}

.solution-audiences li::before {
    content: '→';
    margin-right: 8px;
    color: #9a9aad;
    font-weight: 400;
}

@media (max-width: 960px) {
    .solution__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

}

@media (max-width: 520px) {
    .solution {
        padding: 56px var(--content-padding) 72px;
    }

    .solution-mockup-wrap {
        border-radius: 18px;
    }

    .solution-audiences {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}