.pf-hex-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.pf-hex-svg-wrap {
    position: relative; width: 190px; height: 220px; flex-shrink: 0;
    transition: filter .3s ease, transform .3s ease; cursor: pointer;
}
.pf-hex-item:hover .pf-hex-svg-wrap {
    transform: translateY(-5px) scale(1.03);
    filter: drop-shadow(0 10px 24px rgba(13,148,136,.28));
}
.pf-hex-svg-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-hex-poly-fill { fill: #fff; stroke: #c8d6d3; stroke-width: 2; transition: fill .3s, stroke .3s; }
.dark .pf-hex-poly-fill   { fill: #1e293b; stroke: #334155; }
.pf-hex-item:hover .pf-hex-poly-fill   { fill: #e6f5f1; stroke: #0d9488; }
.dark .pf-hex-item:hover .pf-hex-poly-fill { fill: #0d2d25 !important; stroke: #0d8c6d !important; }
.pf-hex-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding-bottom: 28px; gap: 6px;
}
.pf-hex-name {
    font-size: 11.5px; font-weight: 700;
    color: #4a7268;
    text-align: center; line-height: 1.4;
    max-width: 120px;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    direction: rtl;
    pointer-events: none;
    transition: color .3s;
}
.dark .pf-hex-name { color: #7fb5a8; }
.pf-hex-item:hover .pf-hex-name { color: #0d8c6d; }
.dark .pf-hex-item:hover .pf-hex-name { color: #5ee8c4; }
.pf-hex-logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; transition: transform .3s; }
.pf-hex-item:hover .pf-hex-logo { transform: scale(1.1); }
.pf-hex-initials {
    width: 68px; height: 68px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
    background: #e8f5f1; color: #0d8c6d; transition: transform .3s;
}
.dark .pf-hex-initials { background: #1e293b; color: #5ee8c4; }
.pf-hex-item:hover .pf-hex-initials { transform: scale(1.1); }
.pf-hex-row { display: flex; gap: 8px; margin-bottom: -48px; }
.pf-hex-row:last-child { margin-bottom: 0; }
.pf-hex-row.pf-offset { padding-left: 99px; }
.pf-empty-wrap {
    padding: 80px 0;
    display: flex; flex-direction: column;
    align-items: center; gap: 14px; color: #8fa09c;
}
.pf-empty-wrap p { font-size: 15px; font-weight: 600; }
.dark .pf-empty-wrap { color: #64748b; }

@media (max-width: 900px) {
    .pf-hex-svg-wrap { width: 150px; height: 174px; }
    .pf-hex-row      { gap: 6px; margin-bottom: -43px; }
    .pf-hex-row.pf-offset { padding-left: 78px; }
    .pf-hex-content  { padding-bottom: 22px; gap: 5px; }
    .pf-hex-name     { font-size: 10.5px; max-width: 96px; }
}
@media (max-width: 560px) {
    .pf-hex-svg-wrap { width: 128px; height: 148px; }
    .pf-hex-row      { gap: 5px; margin-bottom: -36px; }
    .pf-hex-row.pf-offset { padding-left: 66px; }
    .pf-hex-content  { padding-bottom: 18px; gap: 4px; }
    .pf-hex-name     { font-size: 10px; max-width: 82px; }
}