/* PORIEŠI.ME — ÚVOD DOMOVA = MAPA OKOLIA (2. 10. 2026, Marek vybral návrh 1 z piatich).
   Mapa s ľuďmi je pozadie celého úvodu; vľavo živý riadok, nadpis, jedna veta, vyhľadávanie,
   okruh 5–50 km a dva odkazy. Všetko je pod .hero.hx — majster.html (iné .hero) sa to netýka.
   Súbor sa načítava ZA style.css, preto .hero.hx prebíja staré .hero pravidlá (fotka, kruhy, výška).
   Desktop aj mobil NARAZ — mobilný blok je na konci súboru. */

.hero.hx{--hx-dark:#0C1219; --hx-text:#EEF2F6; --hx-soft:#C9D3DC; --hx-live:#3DDC84;
  background:#0F1720 url(img/home/mapa-ulice.svg) center/cover no-repeat!important;   /* 4. 10. 2026: skutočné ulice (vektor) namiesto AI obrázka s kreslenými tvárami */
  min-height:0!important; display:block!important; padding:76px 0 104px!important}
/* tmavý závoj zľava doprava: text sedí na tichej ľavej strane mapy, piny vpravo ostávajú vidieť */
.hero.hx::before{content:''; position:absolute; inset:0; width:auto; height:auto; border-radius:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(12,18,25,.96) 0%,rgba(12,18,25,.86) 38%,rgba(12,18,25,.28) 72%,rgba(12,18,25,.1) 100%)!important}
.hero.hx .hx-in{max-width:940px}   /* 2. 10. 2026: pás má aj „Kedy“ — širší, nech sa príklad v poli zmestí */

/* ── živý riadok ── */
.hx-pill{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin:0 0 18px; padding:8px 15px 8px 13px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--hx-soft); font:600 .9rem/1.3 "IBM Plex Sans",system-ui,sans-serif}
.hx-pill[hidden]{display:none}
.hx-pill > i{flex:none; width:9px; height:9px; border-radius:50%; background:var(--hx-live); box-shadow:0 0 0 4px rgba(61,220,132,.22)}
.hx-pill a{color:var(--hx-soft); text-decoration:none; border-radius:6px}
.hx-pill a:hover{color:#fff}
.hx-pill a:focus-visible{outline:2px solid rgba(255,255,255,.6); outline-offset:3px}
.hx-pill b{color:#fff; font-weight:700}
.hx-sep{color:rgba(255,255,255,.4)}
@media (prefers-reduced-motion: no-preference){
  .hx-pill > i{animation:hx-live 2.4s ease-in-out infinite}
  @keyframes hx-live{0%,100%{box-shadow:0 0 0 4px rgba(61,220,132,.22)} 50%{box-shadow:0 0 0 7px rgba(61,220,132,.08)}}
}

/* ── nadpis a veta ── */
.hero.hx .hx-h1{margin:0; color:#fff; font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.05; letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero.hx .hx-h1 .hl-logo{max-width:100%}
.hero.hx .hx-lead{margin:16px 0 0; max-width:52ch; color:var(--hx-text); font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.55; text-shadow:0 1px 10px rgba(0,0,0,.55); text-wrap:pretty}

/* ── vyhľadávanie: mesto | čo treba | Hľadať ── */
.hx-bar{position:relative; z-index:3; display:flex; align-items:center; gap:6px; width:min(920px,100%); margin:26px 0 0; padding:7px;
  background:#fff; border-radius:999px; box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hx-bar:has(.citysel.open){z-index:70}
.hero.hx .hx-bar .citysel{flex:0 0 auto; width:auto; min-width:0; max-width:none}
.hero.hx .hx-bar .citysel-btn{justify-content:flex-start; gap:8px; width:auto; height:52px; padding:0 40px 0 16px; border:0; border-radius:999px;
  background:#F1F4F7; color:var(--ink); font:700 .98rem "IBM Plex Sans",system-ui,sans-serif; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
.hero.hx .hx-bar .citysel-btn .ico{color:var(--accent-dark); opacity:1}
.hero.hx .hx-bar .citysel-btn .chev{right:15px; color:var(--muted)}
.hero.hx .hx-bar .citysel-btn:hover,.hero.hx .hx-bar .citysel.open .citysel-btn{background:#E7ECF1; border:0}
.hero.hx .hx-bar .citysel-btn:focus-visible{outline:3px solid rgba(232,115,12,.35); outline-offset:1px}
.hero.hx .hx-bar #home-q{flex:1 1 auto; min-width:0; width:auto; height:52px; margin:0; padding:0 8px 0 14px; border:0!important; border-radius:999px;
  background:transparent!important; background-image:none!important; box-shadow:none!important; outline:0;
  color:var(--ink); font:600 1.02rem "IBM Plex Sans",system-ui,sans-serif}
.hero.hx .hx-bar #home-q::placeholder{color:#66768A; font-weight:600; opacity:1}
.hero.hx .hx-bar #home-q::-webkit-search-cancel-button{filter:none}
.hx-bar:focus-within{box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 3px rgba(247,145,63,.55)}
.hx-go{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 26px; border:1px solid var(--o4); border-radius:999px;
  background:linear-gradient(180deg,var(--o1) 0%,var(--o2) 52%,var(--o3) 100%); color:#fff; cursor:pointer;
  font:800 1.02rem "IBM Plex Sans",system-ui,sans-serif; text-shadow:0 1px 1px rgba(0,0,0,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 6px 16px rgba(217,102,26,.35); transition:background .15s ease, transform .1s ease}
.hx-go:hover{background:linear-gradient(180deg,#FA9A4B 0%,#EE7B14 52%,#D9690B 100%)}
.hx-go:active{transform:translateY(1px)}
.hx-go:focus-visible{outline:3px solid rgba(255,255,255,.7); outline-offset:2px}
.hx-go .ico{width:19px; height:19px}
.hero.hx #hero-sugg{max-width:920px; margin:12px 0 0}

/* ── okruh: klik otvorí mapu s týmto okruhom ── */
.hx-rad{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:16px}
.hx-rad-l{display:inline-flex; align-items:center; gap:6px; margin-right:4px; color:#DCE4EA; font:700 .9rem "IBM Plex Sans",system-ui,sans-serif}
.hx-rad-l .ico{width:17px; height:17px; color:#FFB15E}
.hx-rc{min-height:38px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  font:700 .9rem "IBM Plex Sans",system-ui,sans-serif; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .15s ease, border-color .15s ease}
.hx-rc:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6)}
.hx-rc.on{background:#fff; color:var(--ink); border-color:#fff}
.hx-rc:focus-visible{outline:2px solid #FFB15E; outline-offset:2px}

/* ── dva odkazy pod okruhom ── */
.hx-links{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:18px; font:700 .98rem "IBM Plex Sans",system-ui,sans-serif}
.hx-links a{display:inline-flex; align-items:center; gap:7px; padding-bottom:2px; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.hx-links a:hover{border-bottom-color:#FFB15E}
.hx-links a:focus-visible{outline:2px solid #FFB15E; outline-offset:3px; border-radius:4px}
.hx-links a .ico{width:18px; height:18px; color:#FFB15E}

/* tablet: o niečo menej vzduchu; pás vyhľadávania v dvoch riadkoch (kde + kedy / čo + Hľadať), nech sa príklad zmestí */
@media (max-width:900px){
  .hero.hx{padding:56px 0 96px!important}
}
@media (min-width:641px) and (max-width:1023px){
  .hx-bar{flex-wrap:wrap; border-radius:24px}
  .hero.hx .hx-bar .citysel{flex:1 1 40%}
  .hero.hx .hx-bar .citysel-btn{width:100%}
  .hero.hx .hx-bar .when-btn{flex:1 1 40%; max-width:none}
  .hero.hx .hx-bar #home-q{flex:1 1 55%}
}

/* ── MOBIL: mapa hore, závoj zhora nadol, vyhľadávanie ako karta pod sebou ── */
@media (max-width:640px){
  .hero.hx{background-position:72% top!important; padding:28px 0 92px!important}
  .hero.hx::before{background:linear-gradient(180deg,rgba(12,18,25,.55) 0%,rgba(12,18,25,.82) 34%,rgba(12,18,25,.95) 100%)!important}
  .hx-pill{margin-bottom:14px; padding:7px 13px 7px 11px; font-size:.84rem}
  .hero.hx .hx-h1{font-size:clamp(2rem,9.4vw,2.45rem)}
  .hero.hx .hx-lead{margin-top:10px; font-size:.98rem}
  .hx-bar{flex-wrap:wrap; gap:8px; margin-top:18px; padding:8px; border-radius:22px}
  .hero.hx .hx-bar .citysel{width:100%}
  .hero.hx .hx-bar .citysel-btn{width:100%; height:46px; border-radius:14px; font-size:16px}
  .hero.hx .hx-bar #home-q{flex:1 1 100%; height:52px; padding:0 14px; border-radius:14px; background:#F1F4F7!important; font-size:16px}
  .hx-go{width:100%; border-radius:14px}
  .hero.hx #hero-sugg{max-width:none}
  .hx-rad{gap:5px; margin-top:14px}
  .hx-rad-l{margin-right:2px; font-size:.86rem}
  .hx-rc{min-height:36px; padding:0 11px; font-size:.84rem}
  .hx-links{gap:8px 20px; margin-top:14px; font-size:.94rem}
}
@media (max-width:360px){
  .hx-rad-l > span{display:none}
  .hx-rc{padding:0 10px}
  .hx-sep{display:none} .hx-pill{gap:2px 10px; font-size:.8rem}
  .hero.hx .hx-bar #home-q{padding:0 10px}
  .hero.hx .hx-bar #home-q::placeholder{font-size:14px}
}
@media (prefers-reduced-motion: reduce){ .hx-go,.hx-rc{transition:none} }


/* ══ GRAFIKA ÚVODU: radar + piny služieb nad mapou ulíc (4. 10. 2026) ══
   Všetko je vektor a CSS → ostré na retine, žiadne kreslené tváre. Vrstva .hx-art leží nad závojom a POD obsahom (.wrap má z-index 1).
   Polohy sú v % plochy úvodu; piny sú len tam, kde vedľa textu ostáva miesto:
   ≥ 1440 px všetkých sedem, 1280–1439 px štyri pri pravom okraji, pod 1280 px len radar (text ide cez celú šírku). */
.hero.hx .wrap{position:relative; z-index:1}
.hx-art{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.hx-radar{position:absolute; left:var(--rx,80%); top:var(--ry,54%); width:0; height:0}
.hx-radar i{position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%);
  border:1px solid rgba(255,160,84,.34); background:radial-gradient(circle,rgba(232,115,12,.20) 0%,rgba(232,115,12,.07) 55%,rgba(232,115,12,0) 72%)}
.hx-radar i:nth-child(1){width:170px; height:170px; border-color:rgba(255,160,84,.5)}
.hx-radar i:nth-child(2){width:330px; height:330px; background:none}
.hx-radar i:nth-child(3){width:520px; height:520px; background:radial-gradient(circle,rgba(232,115,12,.12) 0%,rgba(232,115,12,0) 68%); border-color:rgba(255,160,84,.2)}
.hx-pin{position:absolute; left:var(--x); top:var(--y); width:calc(62px*var(--s,1)); height:calc(62px*var(--s,1));
  margin:calc(-75px*var(--s,1)) 0 0 calc(-31px*var(--s,1)); opacity:var(--o,1); display:none}
.hx-pin > b{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%;
  background:linear-gradient(180deg,#FFFFFF 0%,#E9EEF3 100%); color:#1B2430;
  box-shadow:0 0 0 calc(4px*var(--s,1)) rgba(255,255,255,.13), 0 calc(12px*var(--s,1)) calc(26px*var(--s,1)) rgba(0,0,0,.5)}
.hx-pin > b svg{width:46%; height:46%}
/* špic pinu + mäkký tieň na „zemi“ */
.hx-pin::before{content:''; position:absolute; left:50%; bottom:calc(-7px*var(--s,1)); width:calc(18px*var(--s,1)); height:calc(18px*var(--s,1));
  background:#E9EEF3; border-radius:0 0 calc(4px*var(--s,1)) 0; transform:translateX(-50%) rotate(45deg)}
.hx-pin::after{content:''; position:absolute; left:50%; top:calc(100% + 9px*var(--s,1)); width:calc(26px*var(--s,1)); height:calc(8px*var(--s,1));
  border-radius:50%; background:rgba(0,0,0,.5); filter:blur(3px); transform:translateX(-50%)}
/* „ty si tu“ — oranžový stred radaru */
.hx-pin.hx-me{--x:var(--rx,80%); --y:var(--ry,54%); --s:1.12}
.hx-pin.hx-me > b{background:linear-gradient(180deg,#F7913F 0%,#E8730C 55%,#D4650A 100%); color:#fff;
  box-shadow:0 0 0 5px rgba(255,177,94,.28), 0 14px 30px rgba(232,115,12,.5)}
.hx-pin.hx-me::before{background:#D4650A}
/* menovka pri pine (variant s menovkami: #home-hero.hx-tags) */
.hx-tag{position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); display:none; align-items:baseline; gap:7px; white-space:nowrap;
  padding:7px 11px; border-radius:11px; background:rgba(15,23,32,.78); border:1px solid rgba(255,255,255,.16); color:#fff;
  font:700 .82rem/1.2 "IBM Plex Sans",system-ui,sans-serif; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 8px 20px rgba(0,0,0,.35)}
.hx-tags .hx-tag{display:inline-flex}
.hx-pin.p3 .hx-tag,.hx-pin.p4 .hx-tag{left:auto; right:calc(100% + 10px)}   /* pri pravom okraji ide menovka doľava */
.hx-osm{position:absolute; right:14px; top:10px; z-index:1; font:500 .68rem/1 "IBM Plex Sans",system-ui,sans-serif; color:rgba(255,255,255,.45); text-decoration:none}
.hx-osm:hover{color:#fff; text-decoration:underline}
@media (min-width:1280px){
  .hx-art{--rx:88%; --ry:52%}
  .hx-pin.hx-me,.hx-pin.p1,.hx-pin.p3,.hx-pin.p4{display:block}
  .hx-pin.p1{--x:80%; --y:25%; --s:.9}
  .hx-pin.p3{--x:95.5%; --y:27%; --s:1}
  .hx-pin.p4{--x:95%; --y:72%; --s:.84}
  .hx-pin.p1 .hx-tag{left:auto; right:calc(100% + 10px)}   /* užší úvod: menovka doľava, inak by ju prekryla susedná */
}
@media (min-width:1440px){
  .hx-art{--rx:80%; --ry:54%}
  .hx-pin{display:block}
  .hx-pin.p1{--x:63%; --y:31%; --s:1}
  .hx-pin.p1 .hx-tag{left:calc(100% + 10px); right:auto}
  .hx-pin.p2{--x:72%; --y:17%; --s:.8; --o:.92}
  .hx-pin.p3{--x:92%; --y:31%; --s:1.06}
  .hx-pin.p4{--x:94.5%; --y:66%; --s:.9}
  .hx-pin.p5{--x:70.5%; --y:76%; --s:.82; --o:.94}
  .hx-pin.p6{--x:96%; --y:14%; --s:.76; --o:.88}
  .hx-pin.p7{--x:55.5%; --y:17%; --s:.78; --o:.88}
}
/* pod 1280 px: len tlmený radar vpravo hore, aby za textom nič nerušilo */
@media (max-width:1279px){ .hx-art{--rx:86%; --ry:20%} .hx-radar{opacity:.75} }
/* mobil: len mäkká oranžová žiara vpravo hore — kruhy by pretínali nadpis */
@media (max-width:640px){ .hx-art{--rx:92%; --ry:7%} .hx-radar i{border-color:transparent!important; animation:none!important} .hx-radar i:nth-child(1){width:150px; height:150px} .hx-radar i:nth-child(2){display:none} .hx-radar i:nth-child(3){width:380px; height:380px}
  .hx-osm{top:6px; right:10px; font-size:.62rem} }
/* jemný pohyb: jeden kruh radaru sa rozpína, piny sa nehýbu (pokojný, „živý“ dojem bez rozptyľovania) */
@media (prefers-reduced-motion: no-preference){
  .hx-radar i:nth-child(2){animation:hx-ping 3.6s ease-out infinite}
  @keyframes hx-ping{0%{transform:translate(-50%,-50%) scale(.5); opacity:.9} 100%{transform:translate(-50%,-50%) scale(1.5); opacity:0}}
}