.erp-eyebrow,
.atlas-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-soft-blue-2);
    color: var(--erp-primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.erp-title,
.atlas-title {
    margin: 18px 0 16px;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
    color: var(--erp-text);
}

.erp-title-md,
.atlas-title-md {
    margin: 14px 0 14px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: var(--erp-text);
}

.erp-subtitle,
.atlas-subtitle {
    max-width: 680px;
    margin: 0;
    color: var(--erp-text-secondary);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.erp-actions,
.atlas-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.erp-btn,
.atlas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--erp-radius-pill);
    font-weight: 700;
    transition: var(--erp-transition);
    border: 1px solid transparent;
}

.erp-btn-primary,
.atlas-btn-primary {
    background: var(--erp-primary);
    color: var(--erp-text-inverse);
    box-shadow: var(--erp-shadow-sm);
}

    .erp-btn-primary:hover,
    .atlas-btn-primary:hover {
        background: var(--erp-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--erp-shadow-md);
    }

.erp-btn-secondary,
.atlas-btn-secondary {
    background: var(--erp-surface);
    color: var(--erp-text);
    border-color: var(--erp-border);
}

    .erp-btn-secondary:hover,
    .atlas-btn-secondary:hover {
        border-color: var(--erp-primary);
        color: var(--erp-primary-dark);
        transform: translateY(-2px);
    }

.erp-card,
.atlas-card {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    padding: 28px;
    box-shadow: var(--erp-shadow-sm);
    transition: var(--erp-transition);
}

    .erp-card:hover,
    .atlas-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--erp-shadow-md);
    }

.erp-card-title,
.atlas-card-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--erp-text);
}

.erp-card-text,
.atlas-card-text {
    margin: 0;
    color: var(--erp-text-secondary);
}

.erp-muted,
.atlas-muted {
    color: var(--erp-text-secondary);
}