:root {
--pd-teal-bg:   #d4f0ed;
--pd-teal-map:  #5bbfb5;
--pd-teal-dark: #2a8f87;
--pd-teal-btn:  #3a8f8a;
--pd-ocean:     #b8e8e4;
--pd-coral:     #f05a38;
--pd-coral-lt:  #ff7a5a;
--pd-text-dark: #1a2e2d;
--pd-text-mid:  #3d5a58;
} .pd-wrap {
background: var(--pd-teal-bg);
border-radius: 20px;
padding: 52px 56px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: center;
position: relative;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
} .pd-title {
font-size: clamp(24px, 3vw, 38px);
font-weight: 700;
color: var(--pd-text-dark);
line-height: 1.15;
margin: 0 0 14px;
}
.pd-subtitle {
font-size: 14px;
color: var(--pd-text-mid);
line-height: 1.75;
margin: 0 0 24px;
max-width: 380px;
} .pd-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.pd-filter-btn {
padding: 9px 22px;
border-radius: 50px;
border: none;
background: var(--pd-teal-btn);
color: #fff;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background .2s, transform .15s, box-shadow .2s;
}
.pd-filter-btn:hover {
background: var(--pd-teal-dark);
transform: translateY(-1px);
}
.pd-filter-btn.active {
background: var(--pd-coral);
box-shadow: 0 4px 16px rgba(240, 90, 56, .3);
} .pd-search-wrap {
display: flex;
align-items: center;
background: #fff;
border-radius: 50px;
border: 2px solid var(--pd-coral);
overflow: hidden;
max-width: 400px;
box-shadow: 0 2px 14px rgba(240, 90, 56, .1);
}
.pd-search-input {
flex: 1;
border: none;
outline: none;
padding: 12px 20px;
font-size: 14px;
color: var(--pd-text-dark);
background: transparent;
}
.pd-search-input::placeholder { color: #aac5c3; }
.pd-search-btn {
background: var(--pd-coral);
border: none;
color: #fff;
padding: 12px 26px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .2s;
}
.pd-search-btn:hover { background: var(--pd-coral-lt); } .pd-result-count {
margin-top: 10px;
font-size: 13px;
color: var(--pd-teal-dark);
font-weight: 500;
min-height: 20px;
} .pd-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 16px;
}
.pd-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--pd-text-mid);
font-weight: 500;
}
.pd-legend-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--pd-teal-btn); } .pd-legend-item[data-type="technology"] .pd-legend-dot { background: #3a8f8a; }
.pd-legend-item[data-type="agency"]     .pd-legend-dot { background: #f05a38; }
.pd-legend-item[data-type="service"]    .pd-legend-dot { background: #f0a030; } .pd-map-wrap {
position: relative;
width: 100%;
border-radius: 16px;
}
#pd-map-svg {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
filter: drop-shadow(0 4px 24px rgba(42, 143, 135, .18));
} .pd-country  { fill: var(--pd-teal-map); stroke: #a8ddd8; stroke-width: .5; transition: fill .2s; }
.pd-country:hover { fill: #4aafa5; }
.pd-graticule { fill: none; stroke: rgba(255,255,255,.15); stroke-width: .3; }
.pd-sphere    { fill: var(--pd-ocean); } .pd-pin-group { cursor: pointer; }
.pd-pin-group:hover .pd-pin-body { filter: brightness(1.15); }
.pd-pin-anim {
animation: pd-pin-drop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes pd-pin-drop {
from { transform: translateY(-18px) scale(.4); opacity: 0; }
to   { transform: translateY(0) scale(1);      opacity: 1; }
} .pd-tooltip {
position: absolute;
background: #fff;
border-radius: 10px;
padding: 8px 13px;
font-size: 12px;
font-weight: 600;
color: var(--pd-text-dark);
box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
pointer-events: none;
opacity: 0;
transition: opacity .15s;
white-space: nowrap;
z-index: 20;
transform: translate(-50%, -100%);
}
.pd-tooltip.show { opacity: 1; }
.pd-tooltip span { font-weight: 400; color: #888; } .pd-map-loading {
display: flex;
align-items: center;
justify-content: center;
height: 260px;
color: var(--pd-teal-dark);
font-size: 14px;
gap: 10px;
}
.pd-spinner {
display: inline-block;
width: 20px; height: 20px;
border: 2px solid var(--pd-teal-map);
border-top-color: var(--pd-teal-dark);
border-radius: 50%;
animation: pd-spin .7s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } } @media (max-width: 900px) {
.pd-wrap {
grid-template-columns: 1fr;
padding: 32px 24px;
gap: 28px;
}
.pd-subtitle { max-width: 100%; }
}
@media (max-width: 480px) {
.pd-filter-btn  { padding: 8px 16px; font-size: 12.5px; }
.pd-search-btn  { padding: 12px 18px; }
h3.pd-pop-name {
font-size: 18px !important;
}
.pd-popover-inner p {
font-size: 13px !important;
}
div#pd-popover {
width: auto;
height: 150px !important;
}
} .pd-popover {
position: absolute;
z-index: 100;
width: 280px;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 4px 6px rgba(0,0,0,0.05),
0 12px 40px rgba(0,0,0,0.18),
0 0 0 1px rgba(0,0,0,0.06);
opacity: 0;
transform: scale(0.88) translateY(6px);
pointer-events: none;
transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.26,.64,1);
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pd-popover.pd-popover-open {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: all;
} .pd-popover-close {
position: absolute;
top: 10px; right: 10px;
width: 26px; height: 26px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.08);
color: #555;
font-size: 13px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
z-index: 2;
}
.pd-popover-close:hover { background: #f05a38; color: white; } .pd-pop-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 16px 14px;
background: linear-gradient(135deg, rgba(var(--accent-rgb), .06), transparent);
border-bottom: 1px solid #f0f0f0;
position: relative;
} .pd-pop-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent, #5bbfb5);
border-radius: 14px 14px 0 0;
} .pd-pop-logo {
width: 52px; height: 52px;
border-radius: 10px;
object-fit: contain;
border: 1px solid #eee;
background: #fff;
padding: 4px;
flex-shrink: 0;
} .pd-pop-logo-placeholder {
width: 40px; 
height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 700;
color: white;
flex-shrink: 0;
text-transform: uppercase;
}
.pd-pop-title-wrap {
flex: 1;
min-width: 0;
} .pd-pop-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.pd-pop-name {
margin: 0 0 3px;
font-size: 15px;
font-weight: 700;
color: #1a2e2d;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pd-pop-location {
margin: 0;
font-size: 11.5px;
color: #7a9a98;
font-weight: 500;
} .pd-popover-inner { }
.pd-pop-tagline {
margin: 0;
padding: 12px 16px 0;
font-size: 12.5px;
font-weight: 600;
color: #2a6a68;
font-style: italic;
line-height: 1.5;
}
.pd-pop-excerpt {
margin: 0;
padding: 8px 16px 0;
font-size: 12px;
color: #555;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .pd-pop-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 14px 16px 16px;
padding: 9px 0;
background: var(--pd-teal-btn, #3a8f8a);
color: white;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background .2s, transform .15s;
}
.pd-pop-btn:hover {
background: var(--pd-teal-dark, #2a8f87);
transform: translateY(-1px);
color: white;
text-decoration: none;
}
.pd-pop-btn span { font-size: 15px; } .pd-pin-group.pd-pin-active .pd-pin-body {
filter: drop-shadow(0 0 8px rgba(240,90,56,0.6)) drop-shadow(0 3px 5px rgba(0,0,0,0.3)) !important;
stroke: white !important;
stroke-width: 2 !important;
} div#pd-popover {
background: rgb(255 255 255 / 30%) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(6.7px) !important;
-webkit-backdrop-filter: blur(6.7px) !important;
border: 1px solid rgba(255, 255, 255, 0.52) !important;
padding: 20px !important;
border-top: 20px solid #f07336 !important;
overflow-y: scroll !important;
height: 230px;
border-radius: 10px !important;
}
.pd-pop-header::before {
display: none;
}
span.pd-pop-badge {
color: #012C5F !important;}
span.pd-pop-badge {
background: transparent !important;
color: #595959 !important;
}
h3.pd-pop-name {
font-size: 18px;
font-weight: 700 !important;
color: #012C5F !important;
}
p.pd-pop-location {
font-size: 12px !important;
color: #595959 !important;
}
.pd-pop-logo-placeholder {
background: #f07336 !important;
color: #FFF !important;
width: 60px;
height: 60px;
border-radius: 10px !important;
font-size: 28px !important;
}
.pd-pop-header {
margin-bottom: 15px !important;
}
.pd-popover-inner p.pd-pop-tagline {
font-size: 13px;
text-transform: capitalize;
font-style: normal;
}
.pd-popover-inner p strong {
font-size: 14px;
color: #012C5F !important;
}
button#pd-popover-close {
background-color: #012C5F;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding-top: 2px;
}
span.pd-pop-badge {
color: #012C5F !important;
}
.pd-popover-inner p {
color: #595959;
font-weight: 600;
font-size: 13px;
}
.pd-popover-inner p a {
color: #e45e9b !important;
font-weight: 600 !important;
font-size: 13px;
}
a.pd-pop-btn {
color: #fff !important;
background-color: #012C5F !important;
display: inline-block;
padding: 8px !important;
margin-top: 15px !important;
text-transform: uppercase !important;
}
div#pd-popover::-webkit-scrollbar {
width: 5px !important;
}
div#pd-popover::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}
div#pd-popover::-webkit-scrollbar-thumb {
background-color: #b3d4fb !important; }
.desc.short {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.desc.full {
-webkit-line-clamp: unset;
overflow: visible;
}
span.read-toggle {
color: #012C5F !important;
font-size: 13px;
}
.read-toggle {
display: inline-block;
margin-top: 4px;
color: #012C5F;
cursor: pointer;
}