.seo-hub {
    position: relative;
    width: min(1180px, calc(100% - 36px));
    margin: 42px auto;
    overflow: hidden;
    color: #0a2949;
    border: 1px solid rgba(10, 74, 132, .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(26, 132, 225, .13), transparent 34%),
        linear-gradient(135deg, #f8fbff 0%, #eef6fd 100%);
    box-shadow: 0 18px 48px rgba(8, 47, 82, .09);
}

.seo-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #0868bd 0 48%, #fff 48% 52%, #0c4f8b 52% 100%);
}

.seo-hub__intro { padding: 30px 32px 24px; }
.seo-hub__eyebrow { display: block; margin-bottom: 9px; color: #0872cb; font-size: 11px; font-weight: 950; letter-spacing: .15em; }
.seo-hub h1, .seo-hub h2 { max-width: 850px; margin: 0; color: #072442; font-size: clamp(28px, 4vw, 47px); line-height: 1.02; letter-spacing: -.035em; }
.seo-hub h2 { font-size: clamp(25px, 3.3vw, 39px); }
.seo-hub__intro p { max-width: 880px; margin: 15px 0 0; color: #42627f; font-size: 15px; line-height: 1.7; }

.seo-hub__answers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid rgba(9, 73, 130, .1);
    border-bottom: 1px solid rgba(9, 73, 130, .1);
    background: rgba(9, 73, 130, .1);
}

.seo-hub__answers article { min-height: 138px; padding: 22px 25px; background: rgba(255, 255, 255, .86); }
.seo-hub__answers span { display: block; margin-bottom: 9px; color: #66839d; font-size: 10px; font-weight: 950; letter-spacing: .11em; }
.seo-hub__answers strong { display: block; color: #073b6b; font-size: 19px; line-height: 1.16; }
.seo-hub__answers p { margin: 9px 0 0; color: #5b7288; font-size: 12px; line-height: 1.55; }

.seo-hub__links { display: flex; flex-wrap: wrap; gap: 10px; padding: 19px 32px 25px; }
.seo-hub__links a { display: inline-flex; min-height: 39px; align-items: center; padding: 0 15px; color: #0a5797; border: 1px solid rgba(8, 99, 176, .18); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 850; text-decoration: none; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.seo-hub__links a:hover { color: #063a65; border-color: rgba(8, 99, 176, .48); transform: translateY(-2px); }
.seo-hub--match { background: radial-gradient(circle at 0% 0%, rgba(18, 128, 220, .15), transparent 32%), linear-gradient(135deg, #f8fbff, #eaf4fc); }

@media (max-width: 760px) {
    .seo-hub { width: calc(100% - 20px); margin: 28px auto; border-radius: 20px; }
    .seo-hub__intro { padding: 25px 19px 20px; }
    .seo-hub__intro p { font-size: 14px; }
    .seo-hub__answers { grid-template-columns: 1fr; }
    .seo-hub__answers article { min-height: 0; padding: 19px; }
    .seo-hub__links { display: grid; padding: 17px 19px 21px; }
    .seo-hub__links a { justify-content: center; text-align: center; }
}

.player-avatar.has-player-photo {
    overflow: hidden;
    color: transparent;
    border-color: rgba(12, 86, 151, .18);
    background: linear-gradient(145deg, #eef7ff, #d8ebfb);
    box-shadow: 0 8px 22px rgba(6, 56, 98, .14);
}

.player-avatar.has-player-photo img,
.player-hero__avatar.has-player-photo img,
.profile-avatar.has-player-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
}

.player-card.has-player-photo .player-avatar {
    outline: 3px solid rgba(255, 255, 255, .78);
    outline-offset: -3px;
}