.graphic-showcase{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center}.graphic-stage{position:relative;width:100%;max-width:820px;height:100%;display:flex;align-items:center;justify-content:center}.svg-world-bg,.hero-canvas-globe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:750px;height:auto;opacity:0.35;filter:drop-shadow(0 0 20px rgba(37,99,235,0.35));z-index:1;pointer-events:auto;cursor:grab}.hero-canvas-globe:active{cursor:grabbing}.svg-platform-graphic{position:relative;z-index:2;width:100%;height:auto;max-height:600px;object-fit:contain;pointer-events:none;user-select:none}.latency-card{position:absolute;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,0.9);border-radius:14px;padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem;box-shadow:0 10px 25px -5px rgba(15,23,42,0.08),0 0 1px 1px rgba(255,255,255,0.8);z-index:10;cursor:pointer;transition:border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.latency-card:hover{box-shadow:0 15px 35px -5px rgba(37,99,235,0.18),0 0 0 2px rgba(59,130,246,0.3);border-color:rgba(147,197,253,0.9)}.card-flag{display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-flag img{width:36px;height:auto;object-fit:contain;border-radius:3px}.card-info{display:flex;flex-direction:column}.card-title{font-size:0.85rem;font-weight:700;color:var(--text-main);line-height:1.25;white-space:nowrap}.card-city-muted{color:#64748b;font-weight:500}.card-ping{display:flex;align-items:center;gap:0.35rem;margin-top:2px}.card-latency-muted{font-size:0.775rem;color:#64748b;font-weight:500}.ping-val{font-size:0.8rem;font-weight:700;color:#16a34a}.ping-dot{width:6px;height:6px;background-color:#22c55e;border-radius:50%;display:inline-block;box-shadow:0 0 6px #22c55e}@media (max-width:992px){.hero-grid{gap:1rem !important}.graphic-showcase{height:auto !important;min-height:0 !important;margin-top:0 !important;padding:0 !important}.graphic-stage{height:auto !important}#rotatingGlobe{width:100% !important;max-width:440px !important;height:auto !important;margin:-1rem auto 0 auto !important;touch-action:pan-y !important}}@media (max-width:640px){.hero-grid{gap:0.5rem !important}.graphic-showcase{margin-top:-0.75rem !important}#rotatingGlobe{max-width:100% !important;margin:-1.25rem auto 0 auto !important}}