.btn{

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    padding: 15px 34px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    font-size: .95rem;

    font-weight: 600;

    transition: .35s ease;

    white-space: nowrap;

}

.btn-primary{

    color: var(--white);

    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );

    box-shadow: 0 15px 35px rgba(59,130,246,.25);

}

.btn-primary:hover{

    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(59,130,246,.35);

}

.btn-secondary{

    color: var(--white);

    background: rgba(255,255,255,.05);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(15px);

}

.btn-secondary:hover{

    background: rgba(59,130,246,.12);

    border-color: rgba(59,130,246,.35);

    color: var(--white);

    transform: translateY(-5px);

}

.btn-outline{

    background: transparent;

    color: var(--primary-color);

    border: 1px solid var(--primary-color);

}

.btn-outline:hover{

    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-5px);

}

.btn-icon{

    width: 52px;

    height: 52px;

    padding: 0;

    border-radius: 50%;

}

.btn-sm{

    padding: 10px 22px;

    font-size: .85rem;

}

.btn-lg{

    padding: 18px 40px;

    font-size: 1rem;

}

.btn:active{

    transform: scale(.96);

}

.btn i{

    font-size: 1rem;

}

.btn:disabled{

    opacity: .6;

    cursor: not-allowed;

    pointer-events: none;

}