/* ============================================================
   Service detail pages — page-scoped additions on top of main.css.
   Animated "Tools & Technologies" pills, styled after the site's
   existing at-btn pill language (see Footer2's service tags), used
   across every /services/* page via ServiceDetailLayout.
   ============================================================ */

.tool-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    border: 1px solid var(--at-neutral-100, #dfdfdf);
    background: var(--at-neutral-0, #fefefe);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.tool-grid--visible .tool-pill {
    opacity: 1;
    transform: translateY(0);
}

.tool-pill:hover {
    background: #25843e;
    border-color: #25843e;
    box-shadow: 0 10px 20px -12px rgba(37, 132, 62, 0.5);
}

.tool-pill:hover .tool-pill__label {
    color: #fefefe;
}

.tool-pill:hover .tool-pill__icon {
    transform: scale(1.08) rotate(-4deg);
}

.tool-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: #fefefe;
    border: 1px solid var(--at-neutral-100, #dfdfdf);
    color: #25843e;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tool-pill__icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.tool-pill__icon svg {
    width: 17px;
    height: 17px;
}

.tool-pill__fallback {
    font-weight: 700;
    font-size: 13px;
    color: #25843e;
}

.tool-pill__label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--at-neutral-900, #1d1d1d);
    white-space: nowrap;
    transition: color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .tool-pill {
        transition: opacity 0.3s ease;
        transform: none;
    }
    .tool-pill:hover .tool-pill__icon {
        transform: none;
    }
}