/* Services hub — a simple icon-tile grid, "Coming soon" tiles shown
   muted with a badge rather than hidden, so the section can grow
   incrementally. */

.services-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .7rem;
}

.service-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    padding: 1.1rem .8rem; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    position: relative;
}
a.service-tile:hover {
    transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.18);
    border-color: color-mix(in srgb, var(--indigo) 30%, var(--border));
}

.service-tile-icon {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo-soft, var(--paper)); color: var(--indigo); font-size: 1.15rem;
}
.service-tile-title { font-weight: 700; font-size: .88rem; color: var(--ink); }
.service-tile-desc { font-size: .74rem; color: var(--ink-soft); line-height: 1.3; }

.service-tile-soon {
    opacity: .68; cursor: default;
}
.service-tile-soon .service-tile-icon { background: var(--paper); color: var(--ink-soft); }
.service-tile-badge {
    position: absolute; top: .5rem; right: .5rem;
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    background: var(--marigold-deep); color: #fff; padding: .15rem .45rem; border-radius: 999px;
}

.service-tile-count {
    position: absolute; top: .5rem; right: .5rem;
    font-size: .64rem; font-weight: 700;
    background: var(--indigo-soft, var(--paper)); color: var(--indigo);
    padding: .12rem .45rem; border-radius: 999px;
}

@media (max-width: 480px) {
    .services-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .55rem; }
    .service-tile { padding: .85rem .6rem; }
    .service-tile-icon { width: 40px; height: 40px; font-size: 1rem; }
    .service-tile-title { font-size: .8rem; }
    .service-tile-desc { display: none; }
}