/* Figma-like reflected yellow CTA style with hover -> blue */
.skill-bloomer-yellow {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
    color: #000;
    border-radius: .75rem; /* rounded-lg */
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15), 0 10px 18px rgba(0,0,0,0.06);
    /* match the transition used for button transforms */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    display: inline-flex; /* keeps icon and text aligned */
    align-items: center;
    gap: .5rem;
    position: relative;
}

/* on hover, turn blue and change text/icon color to white */
.skill-bloomer-yellow:hover {
    background: linear-gradient(135deg, #0745FF 0%, #004ff8 100%);
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

/* a soft, offset shadow backing (Figma-style) */
.skill-bloomer-yellow::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    right: -8px;
    bottom: -8px;
    background: rgba(0,0,0,0.08);
    border-radius: .75rem;
    z-index: -1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.skill-bloomer-yellow:hover::after {
    opacity: 0.2;
    transform: translate(2px, 6px) scale(1.02);
}

/* focus-visible for accessibility */
.skill-bloomer-yellow:focus-visible {
    outline: 2px solid rgba(7, 69, 255, 0.2);
    outline-offset: 2px;
}