/* === Custom fanned screenshots (only for .custom-hero) === */
.custom-hero {
    position: relative;
    min-height: 520px;
}

.custom-hero .img-1,
.custom-hero .img-2,
.custom-hero .img-3 {
    width: clamp(220px, 32vw, 360px);
    height: auto;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
    transform-origin: bottom right;
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Top (front) image */
.custom-hero .img-1 {
    position: relative;
    z-index: 5;
    transform: rotate(-4deg) translate(10px, 0);
}

/* Middle image */
.custom-hero .img-2 {
    position: absolute;
    right: 80px;
    bottom: 0;
    z-index: 3;
    transform: rotate(-10deg) scale(.96) translateY(8px);
}

/* Back image */
.custom-hero .img-3 {
    position: absolute;
    right: 160px;
    bottom: 0;
    z-index: 2;
    transform: rotate(-16deg) scale(.92) translateY(14px);
    box-shadow: 0 20px 45px rgba(0,0,0,.06);
}

/* Hover depth (optional) */
@media (hover:hover) {
    .custom-hero:hover .img-1 { transform: rotate(-3deg) translate(16px, -2px); }
    .custom-hero:hover .img-2 { transform: rotate(-9deg)  scale(.96) translateY(2px); }
    .custom-hero:hover .img-3 { transform: rotate(-15deg) scale(.92) translateY(8px); }
}

/* Mobile tweak */
@media (max-width: 767px) {
    .custom-hero { min-height: 440px; }
    .custom-hero .img-1,
    .custom-hero .img-2,
    .custom-hero .img-3 {
        width: clamp(180px, 44vw, 280px);
    }
    .custom-hero .img-2 { right: 48px;  transform: rotate(-8deg)  scale(.96) translateY(6px); }
    .custom-hero .img-3 { right: 96px;  transform: rotate(-12deg) scale(.92) translateY(12px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .custom-hero .img-1,
    .custom-hero .img-2,
    .custom-hero .img-3 {
        transition: none;
    }
}