:root{
    --bg:#07090c;
    --panel:#0d1015;
    --map-brightness:0.9;
    --text:#f4f5f7;
    --muted:rgba(244,245,247,.72);
    --line:rgba(255,255,255,.18);
    --line-active:rgba(255,255,255,.95);
    --pin:#fff;
    --glow:rgba(255,255,255,.25);
  }
  
  *{box-sizing:border-box}
  
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:
      radial-gradient(circle at top, rgba(255,255,255,.07), transparent 36%),
      linear-gradient(180deg, #050608 0%, #0a0c10 100%);
    color:var(--text);
  }
  
  .pj-map-panel{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
  }
  
  .pj-map-panel__inner{
    position:relative;
    width:min(1400px, 100%);
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:28px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%),
      radial-gradient(circle at center, rgba(255,255,255,.05), transparent 58%),
      var(--panel);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      0 30px 90px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,255,255,.04);
  }
  
  .pj-map-panel__map{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1) contrast(1.1) brightness(var(--map-brightness));
    opacity:.95;
    pointer-events:none;
  }
  
  .pj-map-panel__inner::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:80px 80px;
    opacity:.14;
    pointer-events:none;
  }
  
  .pj-map-panel__routes{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:3;
  }
  
  .route{
    fill:none;
    stroke:var(--line);
    stroke-width:2.25;
    stroke-linecap:round;
    stroke-dasharray:10 10;
    opacity:0;
    transition:opacity .25s ease, stroke .25s ease, stroke-width .25s ease;
    filter:drop-shadow(0 0 12px rgba(255,255,255,.12));
  }
  
  .pj-destination:hover ~ .pj-map-panel__routes .route,
  .pj-destination:focus-visible ~ .pj-map-panel__routes .route{
    opacity:0;
  }
  
  .pj-destination--dubai:hover ~ .pj-map-panel__routes .route-dubai-london,
  .pj-destination--ny:hover ~ .pj-map-panel__routes .route-ny-paris,
  .pj-destination--singapore:hover ~ .pj-map-panel__routes .route-singapore-tokyo,
  .pj-destination--london:hover ~ .pj-map-panel__routes .route-london-paris,
  .pj-destination--paris:hover ~ .pj-map-panel__routes .route-london-paris{
    opacity:1;
    stroke:var(--line-active);
    stroke-width:3;
  }
  
  .pj-map-panel__content{
    position:absolute;
    top:28px;
    left:28px;
    z-index:6;
    max-width:340px;
    padding:18px 20px;
    border-radius:18px;
    background:rgba(0,0,0,.24);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
  }
  
  .pj-map-panel__title{
    margin:0 0 8px;
    font-size:28px;
    line-height:1.1;
    letter-spacing:.02em;
  }
  
  .pj-map-panel__text{
    margin:0;
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
  }
  
  .pj-destination{
    position:absolute;
    z-index:5;
    transform:translate(-50%,-50%);
    text-decoration:none;
    color:var(--text);
    outline:none;
  }
  
  .pj-destination__pin{
    position:absolute;
    left:0;
    top:0;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--pin);
    box-shadow:
      0 0 0 8px rgba(255,255,255,.08),
      0 0 22px rgba(255,255,255,.24);
    transform:translate(-50%,-50%);
  }
  
  .pj-destination__pin::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
    opacity:.7;
  }
  
  .pj-destination__label{
    position:absolute;
    left:18px;
    top:-6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    white-space:nowrap;
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
  }
  
  .pj-destination:hover .pj-destination__label,
  .pj-destination:focus-visible .pj-destination__label{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.22);
    transform:translateY(-1px);
  }
  
  .pj-destination:hover .pj-destination__pin,
  .pj-destination:focus-visible .pj-destination__pin{
    box-shadow:
      0 0 0 10px rgba(255,255,255,.12),
      0 0 34px rgba(255,255,255,.38);
  }
  
  .pj-destination:hover,
  .pj-destination:focus-visible{
    z-index:10;
  }
  
  .pj-destination--dubai{left:68%; top:45%}
  .pj-destination--ny{left:19%; top:31%}
  .pj-destination--singapore{left:76%; top:63%}
  .pj-destination--london{left:46%; top:28%}
  .pj-destination--paris{left:49%; top:31%}
  
  @media (max-width: 900px){
    .pj-map-panel__inner{aspect-ratio:4/5}
    .pj-map-panel__title{font-size:22px}
    .pj-map-panel__content{max-width:260px}
  }
  
  @media (max-width: 640px){
    .pj-map-panel{padding:14px}
    .pj-map-panel__inner{
      aspect-ratio:3/4;
      border-radius:20px;
    }
    .pj-map-panel__content{
      top:16px;
      left:16px;
      right:16px;
      max-width:none;
    }
  }
  .pj-map-panel__inner {
    position: relative;
    overflow: hidden;
  }
  
  .pj-map-panel__routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
  }
  
  .group {
    pointer-events: all;
    cursor: pointer;
  }
  
  .group .hit {
    fill: none;
    stroke: transparent;
    stroke-width: 38;
    pointer-events: stroke;
  }
  
  .route {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 10 10;
    opacity: 0;
    transition: opacity 0.25s ease, stroke 0.25s ease, stroke-width 0.25s ease;
  }
  
  .node {
    fill: #fff;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 10;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.22s ease, stroke 0.22s ease, box-shadow 0.22s ease;
  }
  
  .label {
    fill: #f4f6f8;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
    pointer-events: none;
  }
  
  .plane {
    fill: #ffffff;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  
  .group:hover .route,
  .group:focus-within .route {
    opacity: 1;
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 3.2;
  }
  
  .group:hover .node,
  .group:focus-within .node {
    stroke: rgba(255, 255, 255, 0.36);
    transform: scale(1.12);
  }
  
  .group:hover .plane,
  .group:focus-within .plane {
    opacity: 1;
    transform: translate(4px, -4px);
  }
  
  .group:hover .label,
  .group:focus-within .label {
    opacity: 1;
  }
  
  @media (hover: hover) {
    .group:hover {
      z-index: 10;
    }
  }