*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,sans-serif;
background:#f5f5f7;
}

.spc-section{
display:flex;
justify-content:space-between;
gap:100px;
padding:120px 90px;
background:#f5f5f7;
position:relative;
}

.spc-left{
width:42%;
position:sticky;
top:120px;
height:fit-content;
}

.spc-label{
font-size:13px;
font-weight:700;
letter-spacing:3px;
color:#2f6df6;
text-transform:uppercase;
}

.spc-left h2{
margin-top:25px;
font-size:78px;
line-height:0.95;
font-weight:700;
color:#0f172a;
max-width:580px;
}

.spc-right{
width:58%;
display:flex;
flex-direction:column;
gap:180px;
}

.spc-card{
position:sticky;
top:120px;
background:white;
padding:70px;
border-radius:32px;
min-height:340px;
box-shadow:0 25px 70px rgba(0,0,0,0.08);
border:1px solid rgba(0,0,0,0.06);
transition:all .5s ease;
transform-origin:center top;
}

.spc-card:nth-child(2){
transform:rotate(-1deg);
}

.spc-card:nth-child(3){
transform:rotate(1deg);
}

.spc-tab{
position:absolute;
top:-25px;
left:55px;
background:white;
padding:14px 34px;
border-radius:16px 16px 0 0;
border:1px solid rgba(0,0,0,.06);
font-weight:600;
font-size:15px;
}

.spc-card h3{
font-size:44px;
line-height:1.1;
margin-bottom:25px;
color:#111827;
}

.spc-card p{
font-size:18px;
line-height:1.9;
color:#6b7280;
max-width:520px;
}

.spc-card.active{
transform:translateY(0) scale(1);
opacity:1;
}

@media(max-width:991px){

.spc-section{
flex-direction:column;
padding:70px 24px;
gap:60px;
}

.spc-left,
.spc-right{
width:100%;
}

.spc-left{
position:relative;
top:0;
}

.spc-left h2{
font-size:48px;
}

.spc-card{
position:relative;
top:0;
padding:45px 30px;
min-height:auto;
}

.spc-card h3{
font-size:32px;
}

.spc-right{
gap:60px;
}

}