body { margin: 0; font-family: Segoe UI, Arial, sans-serif; background: #0f172a; color: #e2e8f0; }
.wrap { max-width: 980px; margin: 0 auto; padding: 40px 24px 64px; }
.toplinks { margin: 0 0 18px; color: #94a3b8; font-size: 14px; }
.toplinks a { color: #a5b4fc; }
.toplinks span { margin: 0 8px; color: #64748b; }
h1 { margin: 0 0 8px; font-size: 32px; }
.intro { color: #94a3b8; margin-bottom: 28px; line-height: 1.5; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
a.card { display: block; background: #1e293b; border: 1px solid #334155; border-radius: 14px; padding: 18px; color: inherit; text-decoration: none; }
a.card:hover { border-color: #818cf8; background: #1e1b4b; }
.card strong { display: block; font-size: 18px; margin-bottom: 6px; }
.card span { color: #94a3b8; font-size: 14px; }