.hero-role {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.hero-role__prefix {
    color: var(--color-text-secondary);
}

.hero-role__dynamic {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-role__cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--color-primary);
    margin-left: 2px;
    animation: heroCursorBlink 0.9s steps(1) infinite;
}

@keyframes heroCursorBlink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

.hero-role__dynamic--css {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-primary);
    width: 0;
    animation:
        heroTypeCSS 2.2s steps(var(--phrase-steps, 20), end) forwards,
        heroCursorBlink 0.9s steps(1) infinite;
}

@keyframes heroTypeCSS {
    from { width: 0; }
    to { width: 100%; }
}