.preview-frame{
    position:relative;
    height:420px;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(0,61,165,.10);
    box-shadow:0 18px 40px rgba(0,61,165,.12);
}

.desktop-preview{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#f8fbff;
}

.desktop-preview iframe{
    width:1400px;
    height:900px;
    border:none;
    transform:scale(.48);
    transform-origin:top left;
    pointer-events:none;
}

.preview-badge{
    position:absolute;
    top:15px;
    right:15px;
    background:linear-gradient(135deg,#003DA5,#00A651);
    color:#fff;
    padding:8px 14px;
    border-radius:50px;
    font-size:.80rem;
    font-weight:700;
}

.portfolio-card{
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(0,61,165,.10);
    background:rgba(255,255,255,.95);
    box-shadow:0 18px 40px rgba(0,61,165,.10);
    transition:.3s ease;
}

.portfolio-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,61,165,.15);
}

.portfolio-card h3{
    color:#003DA5;
    font-size:1.6rem;
    margin:18px 24px 10px;
}

.portfolio-card p{
    margin:0 24px 20px;
    line-height:1.7;
}

.portfolio-actions{
    padding:0 24px 24px;
}

@media(max-width:768px){
    .preview-frame{
        height:250px;
    }

    .desktop-preview iframe{
        transform:scale(.28);
    }
}