/* ---------- Зал славы ---------- */
.hf { padding-top: 22px; }
.hf-hero { position: relative; min-height: 276px; padding: 16px 14px 40px; background: #fff right center / auto 100% no-repeat; overflow: hidden; }
.hf-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, #fff 34%, rgba(255, 255, 255, .85) 44%, rgba(255, 255, 255, 0) 58%); }
.hf-hero > * { position: relative; }
.hf-bc { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #5d6472; }
.hf-bc a { color: #5d6472; }
.hf-bc svg { color: #5d6472; }
.hf-hero h1 { display: flex; align-items: flex-start; gap: 22px; margin: 26px 0 0 10px; }
.hf-cup { color: var(--o); margin-top: 2px; }
.hf-cup svg { color: var(--o); }
.hf-hero h1 > span:last-child { display: flex; flex-direction: column; font: 400 58px/1 var(--fd); text-transform: uppercase; color: var(--ink); }
.hf-hero h1 em { font-style: normal; background: linear-gradient(180deg, #ff8a2e, #f04e06); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hf-hero p { margin: 22px 0 0 10px; font-size: 17px; line-height: 1.5; color: #5d6472; }
.hf-tabs { display: flex; gap: 20px; margin-top: 14px; padding: 12px 12px; }
.hf-tabs button { display: inline-flex; align-items: center; gap: 18px; height: 46px; padding: 0 30px 0 22px; border: 1px solid #e3e6eb; border-radius: 8px; background: #fff; cursor: pointer; font: 400 16px var(--ff); color: #5d6472; }
.hf-tabs button svg { color: #5d6472; }
.hf-tabs button i { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #eef0f3; color: #6b7280; }
.hf-tabs button.on { padding: 0 54px 0 32px; border-color: transparent; background: linear-gradient(180deg, #ff7a2e, #f05206); color: #fff; font-weight: 600; box-shadow: 0 6px 14px rgba(240, 82, 6, .25); }
.hf-tabs button.on svg { color: #fff; }
.hf-tabs button.on i { background: rgba(255, 255, 255, .25); color: #fff; }
.hf-row { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr auto; align-items: center; margin-top: 18px; padding: 18px 16px 18px 22px; }
.hf-l { display: flex; align-items: center; gap: 22px; padding-right: 20px; }
.hf-li { display: grid; place-items: center; width: 70px; height: 70px; flex: none; border-radius: 10px; background: linear-gradient(160deg, #ff8a3d, #f04e06); color: #fff; }
.hf-li svg { color: #fff; }
.hf-l b { display: block; font: 700 22px var(--ff); color: var(--ink); }
.hf-l small { display: block; margin-top: 4px; font-size: 15px; color: #8b919c; }
.hf-l small + small { color: #6b7280; margin-top: 8px; }
.hf-p { position: relative; height: 80px; display: flex; align-items: center; padding: 0 18px 0 26px; border-left: 1px solid #e9ecf0; }
.hf-p a { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--ink); margin-left: 34px; }
.hf-p .tl { flex: none; border-radius: 8px; }
.hf-p span { min-width: 0; }
.hf-p b { display: block; font: 500 16px var(--ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-p small { display: block; margin-top: 10px; font-size: 14.5px; color: #8b919c; }
.hf-c { position: absolute; left: 18px; top: 4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 13px var(--ff); font-style: normal; color: #fff; }
.hf-c::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; z-index: -1; }
.hf-c.c1 { background: #fde9a6; color: #fff; text-shadow: 0 1px 1px #b07a0b; } .hf-c.c1::before { background: #e9a61e; }
.hf-c.c2 { background: #e6e8ec; text-shadow: 0 1px 1px #6b7280; } .hf-c.c2::before { background: #a3a9b3; }
.hf-c.c3 { background: #f7d9cc; text-shadow: 0 1px 1px #8a3c14; } .hf-c.c3::before { background: #b9653a; }
.hf-c { isolation: isolate; }
.hf-e { color: #b6bbc4; margin-left: 34px; }
.hf-all { display: inline-flex; align-items: center; gap: 10px; padding: 0 8px 0 24px; height: 80px; border-left: 1px solid #e9ecf0; font-size: 15px; color: var(--o); white-space: nowrap; }
.hf-all svg { color: var(--o); }
.hf-empty { margin-top: 18px; padding: 40px; text-align: center; color: #6b7280; font-size: 16px; }
.hf-ms { display: grid; grid-template-columns: 420px 1fr; gap: 26px; margin-top: 18px; padding: 16px 16px 16px 22px; }
.hf-mi { display: flex; gap: 22px; padding-top: 8px; }
.hf-mi > span svg { color: var(--o); }
.hf-mi h2 { margin: 0; font: 700 24px/1.25 var(--ff); color: var(--ink); }
.hf-mi p { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #6b7280; }
.hf-mi .xbtn { margin-top: 24px; height: 44px; padding: 0 22px; gap: 14px; font-size: 16px; }
.hf-mi .xbtn svg { color: #fff; }
.hf-mg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hf-mg a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 14px; border: 1px solid #e9ecf0; border-radius: 8px; background: #fff; color: var(--ink); }
.hf-mg a:hover { border-color: #ffc5a3; color: var(--ink); }
.hf-mg i { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef0f3; font: 500 14px var(--ff); font-style: normal; color: #3c424d; }
.hf-mg .tl { border-radius: 8px; }
.hf-mg b { max-width: 100%; font: 500 16px var(--ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .hf-row { grid-template-columns: 1fr; gap: 10px; } .hf-p, .hf-all { border-left: 0; height: auto; } .hf-ms { grid-template-columns: 1fr; } .hf-mg { grid-template-columns: repeat(2, 1fr); } .hf-hero h1 > span:last-child { font-size: 40px; } .hf-hero::before { background: rgba(255, 255, 255, .85); } }