/* Comment: Micro interactions and utilities. Third person and no accents. */
.badge{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--overlay)}
.icon{font-size:26px;opacity:.95}
.muted{color:var(--muted)}
.center{display:grid;place-items:center}
.round{border-radius:var(--radius)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}

/* Comment: Hero sparkles */
.hero-visual::after,.hero-visual::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent),
                    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.25), transparent),
                    radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,.35), transparent),
                    radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.25), transparent);
  background-repeat:no-repeat;animation:sparkPulse 3.6s ease-in-out infinite
}
@keyframes sparkPulse{0%,100%{opacity:.4}50%{opacity:.8}}