.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 999px;
    min-height: 4.7rem;
    padding: 1rem 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    cursor: pointer;
    transition: transform 0.24s ease, box-shadow 0.24s ease, opacity 0.2s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 18%,
        rgba(255, 255, 255, 0.14) 42%,
        rgba(255, 255, 255, 0.52) 50%,
        rgba(255, 255, 255, 0.16) 58%,
        rgba(255, 255, 255, 0) 76%
    );
    transform: translateX(-145%) skewX(-24deg);
    animation: button-shine 5.29s linear infinite;
    pointer-events: none;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 36%);
    opacity: 0.75;
    pointer-events: none;
}

.btn > i,
.btn > img,
.btn > span {
    position: relative;
    z-index: 1;
}

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

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--button-primary-gradient);
    color: #f6faff;
    box-shadow:
        0 1.4rem 2.4rem rgba(0, 0, 0, 0.1),
        0 0.2rem 0.3rem rgba(11, 32, 103, 0.14),
        0 0.65rem 0.85rem rgba(11, 32, 103, 0.08),
        inset 0 0 0.3rem rgba(255, 255, 255, 0.18);
}

.btn-secondary {
    border: 1px solid rgba(61, 141, 248, 0.24);
    color: var(--brand-primary);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 1rem 2rem rgba(0, 0, 0, 0.06),
        inset 0 0 0.3rem rgba(255, 255, 255, 0.7);
}

.btn-secondary::before {
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 16%,
        rgba(191, 232, 255, 0.06) 40%,
        rgba(191, 232, 255, 0.32) 50%,
        rgba(191, 232, 255, 0.08) 60%,
        rgba(255, 255, 255, 0) 76%
    );
}

.btn-primary:hover {
    box-shadow:
        0 1.7rem 2.8rem rgba(0, 0, 0, 0.13),
        0 0.2rem 0.3rem rgba(11, 32, 103, 0.16),
        0 0.85rem 1rem rgba(11, 32, 103, 0.1),
        inset 0 0 0.45rem rgba(255, 255, 255, 0.22);
}

.btn-secondary:hover {
    border-color: rgba(61, 141, 248, 0.34);
    box-shadow:
        0 1.25rem 2.2rem rgba(0, 0, 0, 0.08),
        inset 0 0 0.35rem rgba(255, 255, 255, 0.78);
}

.btn[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

@keyframes button-shine {
    0% {
        transform: translateX(-145%) skewX(-24deg);
    }

    55% {
        transform: translateX(-145%) skewX(-24deg);
    }

    100% {
        transform: translateX(145%) skewX(-24deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn:active {
        transition: none;
        transform: none;
    }

    .btn::before {
        animation: none;
    }
}

@media (max-width: 640px) {
    .btn {
        width: 100%;
        min-height: 3.9rem;
        padding: 0.85rem 1.25rem;
        font-size: 1rem;
        letter-spacing: -0.03em;
    }

    .btn-primary {
        font-size: 1.5rem;
    }
}