/* Feature icon chips — 2026-08-14.
   Replaces the flat gradient tile with a tinted glass chip: low-alpha
   primary→accent wash, 1px tinted border, inner top highlight, and the icon
   stroked in a primary-tinted foreground instead of flat white. All colors
   derive from the theme variables, so light/dark both work. Browsers without
   color-mix() drop these declarations per-property and keep the previous
   look — a safe fallback, not a breakage. */
.icon-badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: color-mix(in srgb, var(--primary) 62%, var(--fg));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary) 22%, transparent),
        color-mix(in srgb, var(--accent) 9%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 9%, transparent);
    transition: border-color .2s ease, color .2s ease;
}

/* The card already lifts on hover; the chip answers with a firmer ring. */
.feature-card:hover .icon-badge {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    color: color-mix(in srgb, var(--primary) 78%, var(--fg));
}

@media (prefers-reduced-motion: reduce) {
    .icon-badge {
        transition: none;
    }
}