/* Hero Phones Mockup - Clean Reference Match */
:root {
    --hero-phone-width: min(650px, 45vw);
    --hero-phone-width-mobile: min(220px, 45vw);
}

.hero-phones-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: clamp(-10rem, -8vw, -5rem);
    z-index: -1;
    overflow: visible;
}

.hero-phones-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: clamp(15rem, 30vw, 27rem);
    display: flex;
    justify-content: center;
}

.hero-phone {
    position: absolute;
    width: var(--hero-phone-width);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-phone img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
}

.hero-phone.phone-1 {
    z-index: 5;
    top: 5%;
    transform: translateX(-15%) rotate(6deg);
}

.hero-phone.phone-2 {
    z-index: 4;
    top: 15%;
    left: 50%;
    transform: translateX(-85%) rotate(-8deg);
}

/* Responsive adjustments - Smart breakpoints */
@media (max-width: 1024px) {
    :root {
        --hero-phone-width: min(450px, 45vw);
    }
}

@media (max-width: 768px) {
    .hero-phones-section {
        margin-top: 2rem;
        display: none;
    }

    :root {
        --hero-phone-width: min(280px, 45vw);
    }

    .hero-phone {
        width: var(--hero-phone-width);
    }

    .hero-phone.phone-1 {
        transform: translateX(-10%) rotate(5deg);
    }

    .hero-phone.phone-2 {
        transform: translateX(-90%) rotate(-7deg);
    }
}

@media (max-width: 480px) {
    :root {
        --hero-phone-width: 190px;
    }

    .hero-phones-section {
        margin-top: 3rem;
    }
}