.cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 0.95rem 2.2rem; min-width: 240px; border-radius: 999px;
text-decoration:none;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
will-change: transform;
}
.cta-btn__icon{
transition: transform .2s ease;
}
.cta-btn:hover{
transform: translateY(-2px);
}
.cta-btn:hover .cta-btn__icon{
transform: translateX(3px);
}
.cta-btn:active{
transform: translateY(0) scale(.98);
}
.cta-btn:focus-visible{
outline: none;
} .cta-btn--ondark{
background: #0FF2FF;
color: #192139;
border: 1px solid rgba(15, 242, 255, .45);
box-shadow: 0 12px 28px rgba(15, 242, 255, .18);
}
.cta-btn--ondark:hover{
box-shadow:
0 16px 38px rgba(15, 242, 255, .28),
0 0 0 4px rgba(15, 242, 255, .12);
}
.cta-btn--ondark:focus-visible{
box-shadow:
0 0 0 4px rgba(15, 242, 255, .35),
0 16px 38px rgba(15, 242, 255, .22);
} .cta-btn--onwhite{
background: #192139;
color: #0FF2FF;
border: 1px solid rgba(15, 242, 255, .55);
box-shadow: 0 12px 28px rgba(25, 33, 57, .18);
}
.cta-btn--onwhite:hover{
box-shadow:
0 16px 38px rgba(25, 33, 57, .26),
0 0 0 4px rgba(15, 242, 255, .14);
}
.cta-btn--onwhite:focus-visible{
box-shadow:
0 0 0 4px rgba(15, 242, 255, .35),
0 16px 38px rgba(25, 33, 57, .22);
}