* { position: relative }

.badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.badge-group--spaced {
    margin-top: var(--space-sm);
}

.badge {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border: 3px solid var(--color-border-strong);
    background: var(--color-primary);
    color: #0a0e27;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.75rem;
    transform: rotate(-2deg);
    box-shadow: var(--shadow-primary);
}

.badge--cyan {
    background: transparent;
    color: var(--color-cyan);
    border-color: var(--color-cyan);
    box-shadow: var(--shadow-cyan);
    transform: rotate(1deg);
}

.badge--yellow {
    background: var(--color-yellow);
    color: #0a0e27;
    border-color: #0a0e27;
    box-shadow: var(--shadow-yellow);
    transform: rotate(-1deg);
}

.badge--purple {
    background: transparent;
    color: var(--color-purple);
    border-color: var(--color-purple);
    box-shadow: var(--shadow-ghost);
    transform: rotate(2deg);
}