.hero .hero-content>.hero-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    min-width: 305px;
    padding: 19px 36px;
    font-size: clamp(13px, 1.15vw, 16px);
    font-weight: 800;
    letter-spacing: 3.2px;
    line-height: 1.35;
    text-align: center;
    color: var(--trident-color-white);
    border: 1px solid var(--trident-color-64b9ff);
    border-radius: 9px;
    background: linear-gradient(115deg, rgba(18, 59, 108, .94), rgba(7, 23, 50, .96));
    box-shadow: 0 0 0 1px rgba(105, 187, 255, .12), 0 0 22px rgba(40, 145, 255, .24), inset 0 0 22px rgba(49, 130, 234, .10);
    text-shadow: 0 0 12px rgba(170, 218, 255, .34);
    animation: trident-hero-invite 3.2s ease-in-out infinite;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.hero .hero-content>.hero-button:hover,
.hero .hero-content>.hero-button:focus-visible {
    transform: translateY(-4px) scale(1.035);
    background: linear-gradient(115deg, var(--trident-color-348bdb), var(--trident-color-6bc4ff));
    color: var(--trident-color-031024);
    box-shadow: 0 0 0 2px rgba(155, 217, 255, .40), 0 0 38px rgba(68, 169, 255, .55);
    animation-play-state: paused;
}

.hero .hero-content>.hero-button:focus-visible {
    outline: 2px solid var(--trident-color-e3b54e);
    outline-offset: 4px;
}

@keyframes trident-hero-invite {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(105, 187, 255, .12), 0 0 16px rgba(40, 145, 255, .20), inset 0 0 22px rgba(49, 130, 234, .10);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(105, 187, 255, .40), 0 0 34px rgba(40, 145, 255, .48), inset 0 0 24px rgba(49, 130, 234, .18);
    }
}

@media (max-width: 480px) {
    .hero .hero-content>.hero-button {
        min-width: 0;
        width: min(100%, 340px);
        padding: 18px 16px;
        letter-spacing: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero .hero-content>.hero-button {
        animation: none;
        transition: none;
    }
}
