/* PORIEŠI.ME — VSTUPNÝ FEED (10. 9. 2026): pozadie (Magnific), slogan, dve veľké CTA s vlastnou fotkou.
   Zobrazí sa len na holej adrese bez #hash (assets/vstup.js); po výbere zmizne. Mobil aj desktop.

   PLOCHA SA NEHÝBE (24. 9. 2026): fotka aj tmavý prekryv ležia na pevnej vrstve (#vstup::before,
   position:fixed), NIE v rolovacom prvku — predtým sa prekryv pri potiahnutí posunul spolu s obsahom
   a nad ním sa odhalila surová svetlá fotka. <body> je počas vstupu position:fixed a #vstup má
   overscroll-behavior:none, takže Safari nemá čo natiahnuť (gumový efekt). Obsah je vysoký presne
   ako displej (výškové breakpointy nižšie); rolovanie vnútri #vstup ostáva len ako poistka pre
   veľmi nízke displeje — aj vtedy je pozadie jednotné. */
html.vs-lock, html.vs-lock body{overflow:hidden; overscroll-behavior:none}
html.vs-lock{background:#2E3135}
html.vs-lock body{position:fixed; top:0; right:0; bottom:0; left:0; width:100%}
html.vs-lock .cookie-bar{display:none}                                  /* lišta sa ukáže až po výbere, na ďalšej obrazovke */
#vstup{position:fixed; top:0; right:0; bottom:0; left:0; z-index:90; overflow:auto; overscroll-behavior:none; -webkit-overflow-scrolling:touch;
  color:#fff; background:#2E3135; isolation:isolate; --vs-tint:linear-gradient(180deg,rgba(24,26,30,.62) 0,rgba(24,26,30,.48) 38%,rgba(24,26,30,.72) 100%)}
#vstup::before{content:""; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1; pointer-events:none;
  background:var(--vs-tint), #2E3135 url(img/vstup/bg-desktop-1280.webp) center/cover no-repeat}
@media (min-width:1300px){ #vstup::before{background-image:var(--vs-tint), url(img/vstup/bg-desktop.webp)} }
@media (max-width:640px){ #vstup::before{background-image:var(--vs-tint), url(img/vstup/bg-mobile.webp); background-position:center top} }
.vs-in{min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  padding:max(24px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom)); box-sizing:border-box; width:min(1080px,100%); margin:0 auto}
.vs-top{position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:16px; display:flex; gap:4px}
.vs-top .lang{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#E6EAF0; font:600 .72rem "IBM Plex Sans",sans-serif;
  min-width:0; min-height:32px; padding:4px 10px 4px 7px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:5px}
.vs-top .lang .fl{display:block; line-height:0; border-radius:2.5px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.28); flex:none}
.vs-top .lang .fl svg{display:block; width:16px; height:11px}
.vs-top .lang.on{background:var(--o4,#B95806); border-color:var(--o4,#B95806); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
/* Dotyková plocha ako v hlavičke: 32 px rámec, 48 px cieľ; position:relative je nutné, inak by ::after
   prekrylo všetky tri tlačidlá (.vs-top je absolute). Bočné -2px = polovica gap:4px, plochy sa neprekryjú. */
.vs-top .lang{position:relative}
.vs-top .lang::after{content:''; position:absolute; inset:-8px -2px}
.vs-head{text-align:center; max-width:820px}
.vs-h1{margin:0; color:#fff; font-size:clamp(2.4rem,min(6.6vw,9vh),4.9rem); font-weight:800; line-height:1.05; letter-spacing:-.02em; text-shadow:0 2px 18px rgba(0,0,0,.45); text-wrap:balance}
.vs-h1 .hl-logo{display:inline-block; height:.98em; width:auto; vertical-align:-.12em; margin-left:.06em; filter:drop-shadow(0 2px 12px rgba(0,0,0,.45))}
.vs-sub{margin:12px auto 0; font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,.86); text-shadow:0 1px 8px rgba(0,0,0,.4); max-width:620px; line-height:1.45}
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%}
.vs-cta{position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center; min-height:min(430px,42vh); padding:26px 22px 24px;
  border-radius:24px; overflow:hidden; color:#fff; text-decoration:none; isolation:isolate;
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 2px rgba(247,145,63,.85), 0 0 24px rgba(247,145,63,.28); transform:translateZ(0); transition:transform .25s ease, box-shadow .25s ease}
.vs-cta::before{content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-2; background-size:cover; background-position:center 22%; background-repeat:no-repeat; transition:transform .6s ease}
.vs-cta::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,22,26,.6) 0,rgba(20,22,26,0) 30%,rgba(20,22,26,.55) 62%,rgba(20,22,26,.9) 100%)}
.vs-cta-a::before{background-image:url(img/vstup/hladam.webp)}
.vs-cta-b::before{background-image:url(img/vstup/ponukam.webp); background-position:center 18%}
.vs-cta:hover, .vs-cta:focus-visible{transform:translateY(-3px); box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 3px rgba(255,162,74,1), 0 0 32px rgba(247,145,63,.45); outline:none}
.vs-cta:hover::before{transform:scale(1.05)}
/* Nadpis skupiny bol malý a strácal sa vo fotke. Teraz väčší, s vlastným tmavým podkladom,
   v strede a s jasným kontrastom — číta sa na prvý pohľad. (24. 9. 2026) */
/* ŠTÍTOK SKUPINY (25. 9. 2026, Marek): v HORNEJ časti karty a rovnako veľký ako biely nadpis pod ním
   („Pre zákazníkov“ = „Hľadám pomoc“). margin-bottom:auto ho v stĺpci s obsahom pri dne vytlačí hore. */
.vs-k{display:block; width:100%; font:800 clamp(1.7rem,2.9vw,2.3rem)/1.08 "Manrope","IBM Plex Sans",system-ui,sans-serif; letter-spacing:.01em; text-transform:uppercase; color:#FFA24A; margin:0 auto auto; text-align:center; text-wrap:balance; text-shadow:0 2px 8px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.6)}
/* ikona je súčasť riadku (nie samostatný flex prvok) — pri zalomení ostáva pri prvom slove */
.vs-k .ico{display:inline-block; width:.95em; height:.95em; vertical-align:-.1em; margin-right:.25em; filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.vs-t{margin:0; font:800 clamp(1.7rem,2.9vw,2.3rem)/1.05 "Manrope","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.5)}
.vs-d{margin:8px auto 18px; font-size:clamp(.95rem,1.3vw,1.08rem); color:rgba(255,255,255,.9); line-height:1.4; max-width:34ch; text-shadow:0 1px 8px rgba(0,0,0,.5)}
.vs-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; align-self:center; width:min(280px,100%); min-height:54px; padding:0 22px; border-radius:999px; color:#fff;
  font:700 1.02rem "IBM Plex Sans",system-ui,sans-serif; background:linear-gradient(180deg,var(--o1,#F7913F),var(--o3,#D9661A)); border:1px solid var(--o4,#B95806);
  box-shadow:0 8px 22px rgba(217,102,26,.45), 0 1px 0 rgba(255,255,255,.25) inset; transition:filter .2s ease, transform .2s ease}
.vs-btn .ico{width:20px; height:20px; transition:transform .25s ease}
.vs-cta:hover .vs-btn{filter:brightness(1.06)} .vs-cta:hover .vs-btn .ico{transform:translateX(3px)}
/* 1. 10. 2026 (Marek): tri prvky dôvery pod kartami (Bez provízií · Overení ľudia · Kontakt až po dohode) sú preč —
   úvod má len slogan a dve karty. */
@media (max-width:900px){ .vs-cta{min-height:min(360px,40vh)} }
@media (max-width:640px){
  .vs-in{justify-content:flex-start; gap:clamp(8px,1.6vh,18px); padding:calc(58px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .vs-top{top:calc(12px + env(safe-area-inset-top,0px)); right:12px}
  .vs-h1{font-size:clamp(2rem,min(10.5vw,6vh),2.55rem); line-height:1.02}
  .vs-sub{font-size:clamp(.86rem,2.2vh,.98rem); margin-top:6px}
  /* Mriežka kariet vyplní všetko voľné miesto medzi sloganom a spodkom: na vysokom displeji sú karty
     vyššie, na nízkom presne také, aby sa všetko zmestilo bez rolovania. */
  .vs-grid{grid-template-columns:1fr; grid-template-rows:1fr 1fr; gap:12px; margin-top:4px; flex:1 0 auto; min-height:0; width:100%}
  .vs-cta{min-height:0; padding:16px 16px 14px; border-radius:20px}
  .vs-cta::before{background-position:center 25%}
  .vs-t{font-size:clamp(1.35rem,3.3vh,1.65rem)}
  .vs-d{margin:5px 0 10px; font-size:clamp(.84rem,2vh,.95rem); line-height:1.35}
  .vs-btn{width:min(260px,100%); min-height:clamp(44px,6.5vh,50px); padding:0 18px; font-size:1rem}
  .vs-k{margin-bottom:auto; font-size:clamp(1.35rem,3.3vh,1.65rem); letter-spacing:.01em}
}
@media (max-width:640px) and (max-height:600px){
  .vs-in{padding-top:calc(50px + env(safe-area-inset-top,0px)); padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); gap:6px}
  .vs-k{font-size:1.15rem}
  .vs-grid{gap:10px}
  .vs-sub{display:none}
  .vs-cta{padding:12px 14px 12px}
  .vs-cta::before{background-position:center 30%}
}
@media (prefers-reduced-motion:reduce){ .vs-cta, .vs-cta::before, .vs-btn, .vs-btn .ico{transition:none} .vs-cta:hover::before{transform:none} }

/* Telefón naležato (667–932 × 375–430): obsah sa centruje a H1 vyletí pod absolútne umiestnený prepínač
   jazykov, ktorý má s vlajkami 173 px. Mobilný blok vyššie platí len do 640 px šírky — preto breakpoint
   podľa VÝŠKY. Musí byť za blokom max-width:640px (rovnaká špecifickosť, rozhoduje poradie). */
@media (max-height:560px){
  .vs-in{justify-content:flex-start; padding-top:calc(52px + env(safe-area-inset-top,0px)); gap:12px}
  .vs-sub{display:none}
  .vs-cta{min-height:170px; padding:14px 18px 12px}
  .vs-k{font-size:1.15rem}
  .vs-t{font-size:1.4rem}
}

/* Telefón naležato: karty sú široké a nízke — dlhší popis (1. 10. 2026) ide na šírku do dvoch riadkov a drží odstup od štítka.
   Len pre široké displeje; nízky telefón na výšku (SE v Safari, 375×553) má vlastné pravidlá vyššie. */
@media (max-height:560px) and (min-width:641px){
  .vs-cta{min-height:190px}
  .vs-cta .vs-d{margin:8px auto 10px; max-width:48ch; font-size:.88rem; line-height:1.3}
}

/* Pulz CTA (24. 9. 2026): jemné nadýchnutie raz za 2,8 s — svetlo okolo tlačidla sa rozšíri a stiahne.
   Obe tlačidlá pulzujú striedavo, aby sa oko nepreťažilo. Pri šetrení pohybu vypnuté. */
.vs-btn{animation:vsPulz 2.8s ease-in-out infinite}
.vs-cta-b .vs-btn{animation-delay:1.4s}
@keyframes vsPulz{0%,100%{transform:scale(1); box-shadow:0 8px 22px rgba(217,102,26,.45), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 0 rgba(247,145,63,.55)}
  50%{transform:scale(1.035); box-shadow:0 12px 28px rgba(217,102,26,.55), 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 10px rgba(247,145,63,0)}}
.vs-cta:active .vs-btn{transform:scale(.97); animation:none}
@media (prefers-reduced-motion:reduce){ .vs-btn{animation:none} }

/* JAZYK ako rozbaľovací výber + Prihlásiť sa (25. 9. 2026) — hore vpravo, sklo na fotke. */
.vs-top{gap:8px; align-items:center}
.vs-lang{position:relative}
.vs-lang-btn,.vs-acc{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:5px 12px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#F2F4F7; font:700 .78rem "IBM Plex Sans",system-ui,sans-serif; letter-spacing:.02em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.25); transition:background .15s ease, border-color .15s ease}
.vs-lang-btn:hover,.vs-acc:hover,.vs-lang.open .vs-lang-btn{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55)}
.vs-lang-btn .fl,.vs-lang-o .fl{display:block; line-height:0; border-radius:2.5px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.28); flex:none}
.vs-lang-btn .fl svg,.vs-lang-o .fl svg{display:block; width:18px; height:12px}
.vs-lang-btn .chev{width:14px; height:14px; opacity:.85; transition:transform .18s ease}
.vs-lang.open .chev{transform:rotate(180deg)}
.vs-lang-pop{position:absolute; right:0; top:calc(100% + 8px); min-width:190px; padding:6px; border-radius:14px; background:rgba(24,26,30,.92); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); z-index:5}
.vs-lang-pop[hidden]{display:none}
.vs-lang-o{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:6px 10px; border:0; border-radius:10px; background:none; color:#F2F4F7; font:600 .88rem "IBM Plex Sans",system-ui,sans-serif; text-align:left; cursor:pointer}
.vs-lang-o:hover{background:rgba(255,255,255,.1)}
.vs-lang-o.on{background:rgba(247,145,63,.22); color:#FFC48A}
.vs-lang-o .lc{margin-left:auto; font-size:.72rem; opacity:.7; letter-spacing:.06em}
.vs-acc{background:linear-gradient(180deg,rgba(247,145,63,.28),rgba(217,102,26,.28)); border-color:rgba(255,178,94,.55)}
.vs-acc .ico{width:16px; height:16px}
.vs-acc:hover{background:linear-gradient(180deg,rgba(247,145,63,.45),rgba(217,102,26,.45))}
@media (max-width:360px){ .vs-acc span{display:none} .vs-acc{padding:5px 10px} }

/* PORADIE V KARTE (25. 9. 2026): hore veľký biely nadpis, pod ním menší oranžový štítok; spodok (popis + tlačidlo) pri dne. */
.vs-top-txt{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; margin:0 auto auto; text-align:center}
.vs-top-txt .vs-t{font-size:clamp(1.9rem,3vw,2.6rem); line-height:1.05; text-shadow:0 2px 16px rgba(0,0,0,.6)}
.vs-top-txt .vs-k{display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; margin:0; font:800 clamp(.8rem,1.1vw,.95rem)/1.1 "IBM Plex Sans",system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#FFB25E;
  padding:6px 12px; border-radius:999px; background:rgba(20,22,26,.42); border:1px solid rgba(255,178,94,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); text-shadow:0 1px 4px rgba(0,0,0,.6)}
.vs-top-txt .vs-k .ico{display:inline-block; width:1.15em; height:1.15em; vertical-align:middle; margin:0}
.vs-cta .vs-t{margin:0}
.vs-cta .vs-d{margin-top:0}
@media (max-width:640px){
  .vs-top-txt .vs-t{font-size:clamp(1.55rem,4.2vh,2rem)}
  .vs-top-txt .vs-k{font-size:clamp(.72rem,1.8vh,.82rem); letter-spacing:.12em; padding:5px 11px}
  .vs-top-txt{gap:5px}
}
@media (max-width:640px) and (max-height:600px){ .vs-top-txt .vs-t{font-size:1.4rem} .vs-top-txt .vs-k{font-size:.68rem} }
@media (max-height:560px){ .vs-top-txt .vs-t{font-size:1.35rem} .vs-top-txt .vs-k{font-size:.66rem} }