:root{
    --orange:#ed9121; --orange-soft:#f5a948; --orange-light:#fef0dc;
    --ink:#262628; --ink-soft:#3a3a3d; --line:#e6e6e6; --muted:#7a7a7d;
    --bg:#fafafa; --region-fill:#f1f1f1;
    --radius:14px;
    --font:'Montserrat', system-ui, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}

  .geo-section{position:relative;padding:64px 24px 96px;max-width:1280px;margin:0 auto;overflow:hidden}
  .geo-decor-line{position:absolute;pointer-events:none;opacity:.4}
  .geo-decor-line.top{top:48px;left:46px}
  .geo-decor-line.bottom{bottom:34px;right:62px;transform:rotate(180deg)}

  .geo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:36px;position:relative;z-index:2}
  .geo-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
  .geo-eyebrow::before{content:"";width:28px;height:2px;background:var(--orange)}
  .geo-title{margin:0;font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.01em}
  .geo-title span{color:var(--orange)}
  .geo-sub{margin:8px 0 0;font-size:15px;color:var(--muted);max-width:520px}

  .geo-stats{display:flex;gap:28px}
  .geo-stat{text-align:right}
  .geo-stat b{display:block;font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
  .geo-stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}

  .map-wrap{position:relative;background:#fff;border-radius:var(--radius);padding:24px;
    box-shadow:0 2px 0 rgba(38,38,40,.04),0 30px 80px -40px rgba(38,38,40,.25);
    border:1px solid var(--line);}
  .map-wrap::before{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
    background-image:radial-gradient(circle at 12% 20%,rgba(237,145,33,.05),transparent 40%),radial-gradient(circle at 88% 80%,rgba(38,38,40,.04),transparent 45%)}

  .map-canvas{position:relative;width:100%;aspect-ratio:1.55/1;min-height:400px}
  .map-svg{width:100%;height:100%;display:block;cursor:pointer}

  .region-subject{
    fill:var(--region-fill); stroke:#fff; stroke-width:.6;
    transition: fill .25s ease;
  }
  /* Highlight whole district on hover */
  .map-svg[data-hover="cfo"] .region-subject[data-district="cfo"],
  .map-svg[data-hover="szfo"] .region-subject[data-district="szfo"],
  .map-svg[data-hover="pfo"] .region-subject[data-district="pfo"],
  .map-svg[data-hover="yfo"] .region-subject[data-district="yfo"],
  .map-svg[data-hover="skfo"] .region-subject[data-district="skfo"],
  .map-svg[data-hover="ufo"] .region-subject[data-district="ufo"],
  .map-svg[data-hover="sfo"] .region-subject[data-district="sfo"],
  .map-svg[data-hover="dfo"] .region-subject[data-district="dfo"]{
    fill: var(--orange);
  }
  /* All districts that have cases get warm-orange tint by default */
  .region-subject.has-cases{ fill:#ffe0b8; }
  .region-subject.is-active{ fill:var(--orange) !important; }
  /* Округ города текущего поддомена — мягкий акцент */
  .region-subject.is-home{ fill:#ffd08a; stroke:var(--orange); stroke-width:1; }

  .district-label-text{
    pointer-events:none;
    fill:var(--ink); font-size:9px; font-weight:700;
    text-anchor:middle; letter-spacing:.05em;
    text-transform:uppercase;
    paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round;
  }
  .district-count-text{
    pointer-events:none;
    fill:var(--orange); font-size:7px; font-weight:700;
    text-anchor:middle;
    paint-order:stroke; stroke:#fff; stroke-width:2.5px; stroke-linejoin:round;
  }

  .map-legend{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:18px;padding:0 4px}
  .legend-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
  .legend-key{display:inline-flex;align-items:center;gap:8px}
  .legend-key i{width:14px;height:14px;border-radius:3px;display:inline-block}
  .legend-key.has i{background:#ffe0b8}
  .legend-key.no i{background:var(--region-fill)}
  .legend-hint{font-size:12px;color:var(--muted)}
  .legend-hint b{color:var(--ink)}

  /* Tooltip */
  .map-tooltip{
    position:absolute; pointer-events:none;
    background:var(--ink); color:#fff; font-size:12px; font-weight:600;
    padding:6px 10px; border-radius:6px; white-space:nowrap;
    transform:translate(-50%, -130%);
    opacity:0; transition:opacity .15s;
    z-index:10;
  }
  .map-tooltip.show{opacity:1}
  .map-tooltip::after{
    content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%) rotate(45deg);
    width:8px;height:8px;background:var(--ink);
  }
  .map-tooltip span{color:var(--orange-soft);font-weight:500}

  /* City picker */
  .city-picker-backdrop{position:fixed;inset:0;background:rgba(20,20,22,.55);backdrop-filter:blur(4px);
    display:none;align-items:flex-end;justify-content:center;z-index:900;padding:24px;opacity:0;transition:opacity .25s}
  @media(min-width:760px){.city-picker-backdrop{align-items:center}}
  .city-picker-backdrop.show{display:flex;opacity:1}
  .city-picker{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:520px;overflow:hidden;
    box-shadow:0 -10px 60px rgba(0,0,0,.3);
    transform:translateY(40px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  @media(min-width:760px){.city-picker{border-radius:18px;transform:translateY(20px) scale(.97)}}
  .city-picker-backdrop.show .city-picker{transform:translateY(0) scale(1)}

  .picker-head{padding:24px 24px 18px;border-bottom:1px dashed var(--line);
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .picker-head-text{flex:1;min-width:0}
  .picker-back{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;font-weight:600;color:var(--muted);
    background:none;border:none;cursor:pointer;padding:0;
    margin-bottom:10px;font-family:var(--font);
    transition:color .2s;
  }
  .picker-back:hover{color:var(--orange)}
  .picker-back svg{width:14px;height:14px;stroke:currentColor}
  .picker-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--orange);margin-bottom:8px}
  .picker-tag::before{content:"";width:18px;height:2px;background:var(--orange)}
  .picker-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
  .picker-sub{margin:4px 0 0;font-size:13px;color:var(--muted)}
  .picker-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
    background:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:all .2s}
  .picker-close:hover{background:var(--ink);border-color:var(--ink)}
  .picker-close:hover svg{stroke:#fff}
  .picker-close svg{width:14px;height:14px;stroke:var(--ink);transition:stroke .2s}

  .picker-list{max-height:60vh;overflow-y:auto;padding:8px}
  .city-card{display:flex;gap:14px;padding:12px;border-radius:10px;cursor:pointer;align-items:center;
    transition:background .2s;border:none;width:100%;background:transparent;text-align:left;font-family:var(--font)}
  .city-card:hover{background:var(--orange-light)}
  .city-card-img{width:64px;height:64px;border-radius:8px;background:#eee center/cover no-repeat;flex-shrink:0;position:relative}
  .city-card-badge{
    position:absolute; top:-6px; right:-6px;
    background:var(--orange); color:#fff;
    font-size:10px; font-weight:800;
    width:22px; height:22px; border-radius:50%;
    display:grid; place-items:center;
    box-shadow:0 2px 6px rgba(237,145,33,.5);
    border:2px solid #fff;
  }
  .city-card-body{flex:1;min-width:0}
  .city-card-name{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 2px}
  .city-card-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
    display:flex;gap:8px;align-items:center}
  .city-card-meta b{color:var(--orange);font-weight:700}
  .city-card-arrow{color:var(--muted);flex-shrink:0;transition:transform .2s, color .2s}
  .city-card:hover .city-card-arrow{transform:translateX(4px);color:var(--orange)}

  /* Modal */
  .modal-backdrop{position:fixed;inset:0;background:rgba(20,20,22,.6);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;z-index:1000;padding:24px;opacity:0;transition:opacity .25s}
  .modal-backdrop.show{display:flex;opacity:1}
  .modal{background:#fff;border-radius:18px;width:100%;max-width:920px;max-height:90vh;overflow:hidden;
    display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 40px 100px rgba(0,0,0,.5);
    transform:translateY(20px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .modal-backdrop.show .modal{transform:translateY(0) scale(1)}

  .carousel{position:relative;background:#1a1a1c;overflow:hidden}
  .carousel-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .carousel-slide{min-width:100%;height:100%;background:#1a1a1c center/cover no-repeat;position:relative}
  .carousel-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55))}
  .carousel-counter{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.55);color:#fff;
    font-size:11px;font-weight:600;letter-spacing:.1em;padding:6px 10px;border-radius:20px;backdrop-filter:blur(8px);z-index:3}
  .carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.92);border:none;cursor:pointer;display:grid;place-items:center;z-index:3;
    box-shadow:0 6px 20px rgba(0,0,0,.3);transition:background .2s, transform .2s}
  .carousel-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
  .carousel-btn.prev{left:14px}
  .carousel-btn.next{right:14px}
  .carousel-btn svg{width:18px;height:18px;stroke:var(--ink)}
  .carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
  .carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .2s}
  .carousel-dot.active{width:22px;border-radius:3px;background:var(--orange)}

  .modal-info{padding:36px 36px 28px;overflow-y:auto;position:relative;display:flex;flex-direction:column}
  .modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
    border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:all .2s;z-index:5}
  .modal-close:hover{background:var(--ink);border-color:var(--ink)}
  .modal-close:hover svg{stroke:#fff}
  .modal-close svg{width:14px;height:14px;stroke:var(--ink);transition:stroke .2s}
  .modal-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);
    background:none;border:none;cursor:pointer;padding:0;margin-bottom:16px;font-family:var(--font);transition:color .2s;align-self:flex-start}
  .modal-back:hover{color:var(--orange)}
  .modal-back svg{width:14px;height:14px;stroke:currentColor}
  .modal-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--orange);margin-bottom:12px}
  .modal-tag::before{content:"";width:18px;height:2px;background:var(--orange)}
  .modal-city{font-size:30px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
  .modal-region{font-size:13px;color:var(--muted);margin:0 0 22px}
  .modal-text{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px}
  .modal-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 0;
    border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin-bottom:22px}
  .modal-fact{display:flex;flex-direction:column;gap:2px}
  .modal-fact b{font-size:18px;font-weight:800;color:var(--ink)}
  .modal-fact span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
  .modal-services{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
  .service-chip{font-size:11px;font-weight:600;padding:6px 10px;border-radius:20px;background:#262628;color:#fff}
  .service-chip.alt{background:var(--orange)}

  @media (max-width: 760px){
    .geo-section{padding:40px 16px 64px}
    .geo-decor-line{display:none}
    .geo-head{margin-bottom:24px;gap:20px}
    .geo-stats{width:100%;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px dashed var(--line)}
    .geo-stat{text-align:left}
    .geo-stat b{font-size:24px}
    .map-wrap{padding:14px}
    .map-canvas{aspect-ratio:1.45/1;min-height:300px}
    .district-label-text{font-size:8px}
    .district-count-text{display:none}
    .map-legend{font-size:11px;gap:10px;margin-top:14px}
    .map-tooltip{display:none}

    .modal-backdrop{padding:0}
    .modal{grid-template-columns:1fr;max-height:100vh;height:100vh;border-radius:0;max-width:100%;grid-template-rows:42vh 1fr}
    .carousel{height:auto;min-height:0}
    .modal-info{padding:24px 20px}
    .modal-city{font-size:24px}
    .carousel-btn{width:48px;height:48px}
    .carousel-btn.prev{left:10px}
    .carousel-btn.next{right:10px}
    .modal-close{width:44px;height:44px;top:12px;right:12px}
    .carousel-dot{width:8px;height:8px}
    .carousel-dot.active{width:24px}
    .modal-facts{gap:10px;padding:14px 0}
    .modal-fact b{font-size:16px}

    .city-picker-backdrop{padding:0}
    .city-picker{max-width:100%;border-radius:18px 18px 0 0}
  }
  @media (max-width:380px){
    .geo-stats{flex-wrap:wrap}
    .geo-stat{flex:1 1 30%}
  }