.role-page-directory { padding: 112px 24px; background: #f4f7fc; color: #0a1d3b; }
.role-page-directory__shell { width: min(1480px, 100%); margin: 0 auto; }
.role-page-directory__intro { max-width: 850px; margin-bottom: 58px; }
.role-page-directory__intro h2 { margin: 12px 0 18px; font: 800 clamp(2.4rem, 5vw, 5rem)/1.02 "Manrope", sans-serif; letter-spacing: -.055em; }
.role-page-directory__intro > p:last-child { max-width: 720px; color: #53637d; font-size: 1.14rem; line-height: 1.8; }
.role-page-directory__groups { display: grid; gap: 54px; }
.role-page-directory__group h3 { margin: 0 0 20px; font: 800 1.25rem/1.3 "Manrope", sans-serif; }
.role-page-directory__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.role-page-link { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 17px; align-items: start; min-height: 142px; padding: 23px; border: 1px solid #dce5f2; border-radius: 20px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 12px 35px rgba(15, 36, 70, .05); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.role-page-link:hover { transform: translateY(-3px); border-color: #87afff; box-shadow: 0 20px 44px rgba(20, 77, 170, .11); }
.role-page-link__code { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: #e9f1ff; color: #1768f2; font-weight: 800; }
.role-page-link strong, .role-page-link small { display: block; }
.role-page-link strong { margin: 2px 0 8px; font: 800 1.04rem/1.35 "Manrope", sans-serif; }
.role-page-link small { color: #63728b; font-size: .92rem; line-height: 1.55; }
.role-page-link i { color: #1768f2; font-size: 1.25rem; font-style: normal; }
@media (max-width: 800px) { .role-page-directory { padding: 78px 18px; } .role-page-directory__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .role-page-link { grid-template-columns: 46px minmax(0, 1fr); padding: 19px; } .role-page-link__code { width: 46px; height: 46px; } .role-page-link i { display: none; } }