/* ========== PHONE MOCKUP — scoped to .landing-v3 ========== */
.landing-v3 .phone-fixed {
    position: absolute;
    bottom: -40px;
    right: max(var(--side-pad), calc((100vw - var(--max-content)) / 2 + var(--side-pad)));
    z-index: 50;
}

.landing-v3 .phone {
    width: var(--phone-width);
    height: var(--phone-height);
    border-radius: 52px;
    background: #e8e8e8;
    box-shadow:
        0 0 0 2px #d0d0d0,
        0 40px 80px rgba(0, 0, 0, 0.25),
        inset 0 0 0 2px #f0f0f0;
    overflow: hidden;
    position: relative;
}
.landing-v3 .phone__screen {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 44px;
    overflow: hidden;
    background: #f5f5f5;
}
.landing-v3 .phone__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #111;
    border-radius: 14px;
    z-index: 5;
}
.landing-v3 .phone__screenshots {
    position: relative;
    width: 100%;
    height: 100%;

    & img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        opacity: 0;
        transition: opacity 0.6s ease;

        &.active { opacity: 1; }
    }
}

/* ========== CAROUSEL (dots) ========== */
.landing-v3 .phone-carousel { display: none; }
.landing-v3 .phone-carousel__dots {
    display: flex;
    gap: 8px;
}
.landing-v3 .phone-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d0d0;
    transition: background 0.3s;
    cursor: pointer;
}
.landing-v3 .phone-carousel__dot--active { background: var(--blue); }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .landing-v3 .phone__screenshots img { transition: none; }
}