/* ═══════════════ BUTTONS ═══════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1px;
    padding: 10px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
    user-select: none;
}

.btn:active {
    transform: scale(.97) translateY(1px) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 76, 129, .28);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 76, 129, .35);
}

.btn-red {
    background: linear-gradient(135deg, var(--red), #ff3a35);
    color: #fff;
    box-shadow: 0 8px 24px rgba(225, 6, 0, .25);
}

.btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(225, 6, 0, .32);
}

.btn-outline {
    background: rgba(255, 255, 255, .8);
    color: var(--black);
    border: 1px solid rgba(17, 17, 17, .12);
    backdrop-filter: blur(8px);
}

.btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh);
}

.btn-outline-white {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
}

.btn-black {
    background: linear-gradient(135deg, #1a1a2e, #444);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.btn-black:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .30);
}

.btn-blue {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 76, 129, .25);
}

.btn-blue:hover {
    transform: translateY(-2px);
}

.btn-dark {
    background: linear-gradient(135deg, #1a1a2e, #444);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .30);
}

.btn-mix {
    background: linear-gradient(135deg, var(--red), var(--blue));
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 76, 129, .25);
}

.btn-mix:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 76, 129, .32);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 15px;
}