/* ── ROLES GRID ───────────────────────────────────── */

.roles-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 14px;

    margin-top: 50px;

}

/* ── ROLE CARD ────────────────────────────────────── */

.role-full-card {

    background: var(--bg2);

    border:
        1px solid var(--border);

    border-radius: 18px;

    padding: 26px 20px;

    text-align: center;

    cursor: pointer;

    transition: all 0.25s;

    position: relative;

    overflow: hidden;

}

.role-full-card::after {

    content: '';

    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: var(--accent);

    transform: scaleX(0);

    transition: transform 0.25s;

}

.role-full-card:hover {

    border-color:
        rgba(249,115,22,0.4);

    transform: translateY(-4px);

    box-shadow:
        0 14px 40px rgba(249,115,22,0.1);

}

.role-full-card:hover::after {

    transform: scaleX(1);

}

/* ── ICON ─────────────────────────────────────────── */

.rfc-icon {

    font-size: 36px;

    margin-bottom: 14px;

    display: block;

}

/* ── CONTENT ─────────────────────────────────────── */

.rfc-name {

    font-family: 'Syne', sans-serif;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 6px;

    color: var(--text);

}

.rfc-desc {

    font-size: 11px;

    color: var(--muted2);

    line-height: 1.5;

    margin-bottom: 14px;

}

/* ── TAGS ─────────────────────────────────────────── */

.rfc-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    justify-content: center;

}

.rfc-tag {

    font-size: 10px;

    padding: 3px 8px;

    background: var(--bg3);

    border:
        1px solid var(--border);

    border-radius: 6px;

    color: var(--muted2);

}