/* ============================================================================
   ČÍSLOVANIE (Dada, 2026-08-14): klientke idú DVA koncepty, `koncept-1`
   („Plagát") a `koncept-2` („Spojenie", tento súbor). Prieskumných konceptov
   však bolo pôvodne viac a poznámky v kóde sa odvolávajú na ICH čísla —
   1 „Filmový", 2 „Plagát", 3 „2026", 4 „Spojenie". Tri z nich už na disku
   nie sú. Kde teda v komentároch stojí „koncept 1/2/3/4", ide o pôvodné
   prieskumné číslo, nie o názov súboru: dnešný `koncept-1` = pôvodný 2,
   dnešný `koncept-2` = pôvodný 4.
   ============================================================================
   KONCEPT 2 — „Spojenie" (pôvodne 4)
   Art direction: rozhranie konceptu 3 („2026") s úvodom konceptu 1
   („Filmový"). Rozdelenie je zámerné a čitateľné:

     · ÚVOD je PLAGÁT — celoplošná fotka, obrovské meno klubu v Big Shoulders,
       plávajúca sklenená lišta. Presne ako v koncepte 1, len bez blikajúcich
       hodín v pásiku pod ním.
     · VŠETKO POD ÚVODOM je ROZHRANIE — Geist, oblé karty, bento dlaždice,
       lepiace karty priestorov, reflektor pod kurzorom. Jazyk konceptu 3.

   Displejové písmo (Big Shoulders) preto žije LEN v úvode a v lište. Nižšie
   na stránke by rozbíjalo pokojný rytmus rozhrania — a naopak, keby bol úvod
   v Geiste, stratil by plagátovú ranu, kvôli ktorej sa koncept 1 páčil.
   ========================================================================== */

:root{
  --ink:#07090D;
  --surface:#0B0F15;
  --card:#111823;
  --card-2:#151E2B;
  --line:#1D2734;
  --line-2:#2A3648;
  --aqua:#00A1E3;
  --glow:#3DD5FF;
  --indigo:#4F6BFF;
  --paper:#EAF2F8;
  --dim:#8496A8;
  --dim-2:#5C6C7D;
  --ok:#38D18B;
  --warn:#E8B04B;
  --rail:min(78rem, 90vw);
  --nav-h:4.5rem;
}

/* Fluidná veľkosť koreňa — text aj rozostupy sú v rem, takže sa celý layout
   škáluje ako jeden systém a na 27" monitore nevyzerá drobne (pravidlo /design). */
html{font-size:clamp(15px,.42vw + 12.4px,20px);-webkit-text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 2rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:'Geist',system-ui,sans-serif;font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased}
/* `overflow-x` patrí na koreň, NIE na `body`, a musí byť `clip`, nie `hidden`.
   `hidden` na `body` z neho spraví scrollovací kontajner — a v tej chvíli sa
   v Safari rozbije `loading="lazy"`: obrázky nikdy nezistia, že sú v zábere,
   a ostanú nenačítané. Presne to bolo vidieť pri miestnostiach na telefóne —
   jediná fotka, ktorá sa zobrazila, bola funkčná zóna, lebo tá je na stránke
   ešte raz ako pozadie videa, a to sa načítava hneď (Dada, 2026-08-14).
   `clip` reže rovnako, ale scrollovací kontajner nevytvára, takže ostáva
   funkčné aj `position:sticky` na kartách priestorov. */
html{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1rem}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02}

.rail{width:var(--rail);margin-inline:auto}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mono b{color:var(--glow);font-weight:500}

/* zrno cez celú stránku — bez neho pôsobia veľké tmavé plochy pásikovito */
body::after{content:'';position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================================
   NAV — plávajúca sklenená kapsula (prevzaté z konceptu 1)
   Lišta nie je prilepená na hornú hranu; vznáša sa nad obsahom a po zrolovaní
   sa zúži a stmavne, takže na dlhej stránke nezavadzia.
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:.9rem 0;
  transition:padding .3s cubic-bezier(.2,.7,.2,1)}
.nav.zrolovana{padding:.45rem 0}
.nav__in{width:var(--rail);margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;gap:1.2rem;padding-inline:1.1rem;
  border-radius:999px;background:rgba(17,24,35,.55);color:var(--paper);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 .6rem 2rem rgba(0,0,0,.28);
  transition:background .3s,height .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
/* Zrolovaná výška je odvodená od `--nav-h`, nie pevných 3.7rem — na nízkych
   oknách sa `--nav-h` zmenšuje a pevná hodnota by bola VYŠŠIA než pokojný stav. */
.nav.zrolovana .nav__in{height:calc(var(--nav-h) - .8rem);background:rgba(7,9,13,.86);
  border-color:rgba(255,255,255,.14);box-shadow:0 .8rem 2.4rem rgba(0,0,0,.42)}
.nav__logo{display:flex;align-items:center;text-decoration:none;margin-right:auto;padding-block:.3rem}
/* Logo sa vojde do kapsuly aj vtedy, keď je `--nav-h` na nízkom okne stiahnuté
   — preto `min()`, nie pevná výška. Pri základných 4.5rem vyjde 2.5rem, čiže
   sa nič nemení. */
.nav__logo img{height:min(2.5rem,calc(var(--nav-h) - .4rem));width:auto;
  transition:height .3s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 1px 6px rgba(0,161,227,.28))}
.nav.zrolovana .nav__logo img{height:min(2.1rem,calc(var(--nav-h) - 1.2rem))}
.nav__links{display:flex;gap:.3rem;align-items:center}
/* Plachta žije len na mobile — blok „MENU NA CELÚ OBRAZOVKU" nižšie. */
.plach{display:none}
.nav__links a{text-decoration:none;font-weight:500;font-size:.8rem;
  letter-spacing:.02em;color:#D3DCE6;padding:.7rem .85rem;border-radius:999px;
  display:inline-flex;align-items:center;min-height:2.5rem;
  position:relative;transition:color .2s,background .25s}
.nav__links a:hover{color:var(--paper);background:rgba(255,255,255,.09)}
.nav__links a.aktivny{color:#03151E;background:var(--aqua)}
.nav__cta{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--paper);color:var(--ink);text-decoration:none;border-radius:999px;
  font-weight:600;font-size:.8rem;letter-spacing:.01em;
  padding:.7rem 1.15rem;min-height:3rem;transition:transform .2s,background .2s,color .2s}
.nav__cta::before{content:'';width:.5rem;height:.5rem;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px rgba(56,209,139,.25)}
.nav__cta:hover{background:var(--aqua);color:#03151E;transform:translateY(-1px)}
.burger{display:none;background:transparent;color:var(--paper);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  width:3rem;height:3rem;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:1.1rem;height:2px;background:var(--paper);position:relative;
  transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:1.1rem;height:2px;
  background:var(--paper);transition:transform .28s cubic-bezier(.2,.7,.2,1),top .28s}
.burger span::before{top:-.38rem}.burger span::after{top:.38rem}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ============================================================================
   HERO — plagát (prevzaté z konceptu 1)
   Fotka ide cez celú plochu, obsah je ukotvený dole vľavo. Fotka postavy má
   takmer čierne pozadie (#08090C), takže sa nevyrezáva — pravá polovica úvodu
   je stlmená do rovnakej čiernej VODOROVNÝM prechodom cez celú výšku. Taký
   prechod nemá hornú ani dolnú hranu, takže sa nikde neprejaví ako sek.
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--paper);overflow:hidden}
.hero__tma{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 12% 88%,rgba(0,161,227,.16),transparent 70%),
    linear-gradient(90deg,transparent 0,transparent 24%,rgba(7,9,13,.5) 42%,
      rgba(7,9,13,.9) 56%,var(--ink) 68%,var(--ink) 100%)}
/* Rám ide od hornej hrany sekcie a obrázok je v ňom ešte posunutý nahor, takže
   jeho horná hrana leží MIMO obrazovky. V obrázku je nad temenom 13 % voľnej
   tmy práve na to. */
.hero__figura{position:absolute;right:0;top:0;bottom:0;z-index:2;pointer-events:none;
  width:min(56%,52rem);overflow:hidden;
  display:flex;align-items:flex-start;justify-content:flex-end}
.hero__figura::before{content:'';position:absolute;z-index:-1;
  right:2%;top:6%;width:82%;height:72%;filter:blur(60px);
  background:radial-gradient(54% 52% at 56% 48%,rgba(0,161,227,.26),transparent 74%)}
.hero__figura img{height:158%;width:auto;max-width:none;display:block;
  transform:translateY(-4%);
  filter:grayscale(.25) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),
                     linear-gradient(0deg,transparent 0,#000 10%);
          mask-image:linear-gradient(90deg,transparent 0,#000 26%),
                     linear-gradient(0deg,transparent 0,#000 10%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* Na mobile je úvod textový — postava sa tam nezmestila tak, aby to nebilo do
   očí; skúšané a zavrhnuté (koncept 1). S postavou však zmizla aj vrstva
   `.hero__tma`, a s ňou VŠETKO svetlo: úvod na telefóne ostal plochý čierny
   obdĺžnik (Dada, 14. 8. 2026). Vrstva sa preto na mobile nevypína, len
   dostane vlastný gradient.

   Je to ten istý pohyb svetla ako na počítači — modrá žiara zdola zľava —
   len bez vodorovného prechodu, ktorý tam stlmuje pravú polovicu fotky.
   Doplní ju slabšia indigová zhora sprava a jemné stmavenie na hornej
   a dolnej hrane, aby lišta aj informačný pásik mali pod sebou pevnú tmu.
   Sila je zámerne nízka (.2 a .13): úvod má ostať tmavý, nemá zmodrieť. */
@media (max-width:1000px){
  .hero__figura{display:none}
  .hero__tma{background:
    radial-gradient(78% 44% at 10% 86%,rgba(0,161,227,.2),transparent 70%),
    radial-gradient(68% 38% at 90% 8%,rgba(79,107,255,.13),transparent 72%),
    linear-gradient(180deg,rgba(11,15,21,.85) 0,transparent 24%,
      transparent 74%,rgba(7,9,13,.8) 100%)}
}

.hero__grain{position:absolute;inset:0;z-index:3;opacity:.1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* Odsadenie zhora drží nadpis pod plávajúcou lištou, odsadenie zdola oddeľuje
   obsah od informačného pásika. Obe sú viazané na VÝŠKU okna — celý úvod sa
   musí zmestiť nad fold aj s pásikom (Dada, 2026-08-13), viď blok „ÚVOD SA MUSÍ
   ZMESTIŤ NAD FOLD" nižšie. */
.hero__in{position:relative;z-index:4;flex:1;width:var(--rail);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--nav-h) + clamp(.5rem,3svh,4.5rem)) clamp(1.2rem,2.6svh,2.5rem)}

/* Adresa sa píše tak, ako sa píše — verzálky s prestrkaním odtiaľto vypadli
   (Dada, 14. 8. 2026), rovnako ako v koncepte 1. */
.hero__kick{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;
  font-size:clamp(.78rem,1.5vw,.92rem);letter-spacing:.01em;color:#CFDAE4;
  margin:0 0 clamp(.7rem,2.2svh,1.6rem);
  text-shadow:0 .1em .7em rgba(7,9,13,.9)}
.hero__kick i{display:block;width:2.4rem;height:1px;background:var(--aqua);font-style:normal}

/* Jediné miesto na stránke s displejovým písmom — plagátový úder úvodu. */
/* Veľkosť je obmedzená ŠÍRKOU aj VÝŠKOU okna: `min(17vw,25svh)`. Samotné 17vw
   je na nízkych oknách (notebook 1280×720, mobil na šírku) to, čo úvod naťahuje
   pod fold — nadpis rastie so šírkou, ale miesto naň dáva výška. */
.hero h1{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:900;
  text-transform:uppercase;margin:0;
  font-size:clamp(2.6rem,min(17vw,25svh),14rem);line-height:.8;letter-spacing:-.035em;
  text-shadow:0 .1em .8em rgba(7,9,13,.5)}
.hero h1 .small{display:block;font-size:.145em;letter-spacing:.34em;color:#7FD8FA;
  margin-bottom:.85em;font-weight:700;text-shadow:0 .12em .8em rgba(7,9,13,.95)}
/* Riadok sa pri nábehu vysúva spod masky, čiže `overflow:hidden`. Pri
   `line-height:.8` je riadkový box NIŽŠÍ než samotné písmo, takže maska odrezala
   všetko, čo trčí nad verzálky — dĺžne a mäkčene. „AQUA" na hlavnej stránke to
   neodhalilo (žiadna diakritika), „KEDY PRÍSŤ" áno: renderovalo sa „KEDY PRIST".
   Preto má riadok vypchávku hore aj dole a rovnako veľký záporný okraj, takže
   maska má na diakritiku miesto a rytmus riadkov sa nemení. */
.hero h1 .ln{display:block;overflow:hidden;
  padding-top:.2em;margin-top:-.2em;
  padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .ln > i{display:block;font-style:normal}
.js .hero h1 .ln > i{transform:translateY(115%);
  animation:lnUp 1.05s cubic-bezier(.16,.84,.28,1) forwards}
.js .hero h1 .ln:nth-child(1) > i{animation-delay:.12s}
.js .hero h1 .ln:nth-child(2) > i{animation-delay:.26s}
@keyframes lnUp{to{transform:none}}

.hero__bar-line{height:3px;background:var(--aqua);width:0;
  margin:clamp(.7rem,2.2svh,1.6rem) 0 clamp(.6rem,2svh,1.4rem);
  max-width:22rem;animation:draw 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes draw{to{width:100%}}
/* ---------- KREDO KLUBU ----------
   „Tvoje miesto. Tvoj cieľ. Tvoj úspech." — majiteľ ho chce viditeľne na
   stránke (14. 8. 2026); klub ho má vytlačené na cenníku aj ponukovom liste.
   Tu je to podnadpis mena, takže patrí do displejového písma úvodu (Big
   Shoulders) — Geist by ho zrovnal s bežným textom. Zarovnané doľava ako celý
   úvod tohto konceptu. Zvislé deliace linky medzi vetami odtiaľto vypadli
   (Dada, 14. 8. 2026) — vety oddeľuje už len medzera, a preto musí byť väčšia:
   linka niesla polovicu tej práce. */
.kredo{display:flex;flex-wrap:wrap;align-items:center;gap:.2em 1.5em;
  margin:0 0 clamp(.7rem,2svh,1.2rem);padding:0;list-style:none}
.kredo span{position:relative;font-family:'Big Shoulders Display',Impact,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.kredo__z{color:var(--glow)}
/* Farba poslednej vety sa musí prebiť cez `.hero__kredo span` — `.kredo__z`
   má nižšiu špecifickosť a inak by ostala biela. */
.hero__kredo span{font-size:clamp(1.15rem,2.8vw,2.1rem);color:var(--paper)}
.hero__kredo .kredo__z{color:var(--glow)}

.hero__claim{max-width:38ch;color:#DCE5EE;font-size:clamp(.92rem,1.5vw,1.16rem);margin:0}
.hero__claim b{color:var(--paper);font-weight:600}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin-top:clamp(1rem,3.2svh,2.2rem)}
.js .hero__kredo,.js .hero__claim,.js .hero__ctas,.js .hero__kick{opacity:0;
  animation:fadeUp .9s .5s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero__kick{animation-delay:.06s}
/* Kredo nabieha hneď po mene — je to jeho podnadpis, nie ďalší údaj v poradí. */
.js .hero__kredo{animation-delay:.42s}
.js .hero__ctas{animation-delay:.66s}
@keyframes fadeUp{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}

/* Tlačidlá sú oblé ako celé rozhranie nižšie — plagátový je nadpis, nie
   ovládanie, a hranaté tlačidlá z konceptu 1 by pod ním pôsobili ako cudzí
   prvok voči kartám v ďalších sekciách. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;
  font-weight:500;font-size:.9rem;padding:.9rem 1.5rem;min-height:3rem;border-radius:.8rem;
  border:1px solid transparent;
  transition:transform .2s,box-shadow .25s,background .25s,color .25s,border-color .25s}
.btn--fill{background:var(--aqua);color:#03151E;font-weight:600;
  box-shadow:0 .6rem 1.8rem rgba(0,161,227,.3)}
.btn--fill:hover{background:var(--glow);color:#03151E;transform:translateY(-2px);
  box-shadow:0 .9rem 2.4rem rgba(61,213,255,.42)}
.btn--ghost{border-color:rgba(255,255,255,.28);color:var(--paper);background:rgba(17,24,35,.5)}
.btn--ghost:hover{border-color:var(--aqua);color:var(--glow);transform:translateY(-2px)}

/* magnetické tlačidlá — posun je najviac ~6 px, klik sa neminie */
@media (hover:hover) and (pointer:fine){
  .hero__ctas .btn{transform:translate(var(--mx,0),var(--my,0));
    transition:transform .18s cubic-bezier(.2,.7,.2,1),background .18s,color .18s,box-shadow .18s}
  .hero__ctas .btn:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 2px))}
}

/* pásik pod úvodom: stav, dnešné hodiny, hodnotenie, karty.
   ŽIVÝ ČAS TU ZÁMERNE NIE JE — blikajúce hodiny vpravo dole boli z konceptu 1
   odstránené (Dada, 2026-08-13). Nič ich nenahrádza; pásik končí kartami. */
.hero__bar{position:relative;z-index:4;border-top:1px solid var(--line);
  background:rgba(7,9,13,.72);backdrop-filter:blur(8px);color:var(--paper)}
.hero__bar .rail{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  padding-block:clamp(.55rem,1.7svh,1rem);font-size:.85rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:'Geist Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;
  padding:.42rem .9rem;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card);color:var(--paper)}
.pill .dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--dim)}
.pill[data-stav="otvorene"]{border-color:rgba(56,209,139,.45);color:#B6F0D4;background:rgba(56,209,139,.1)}
.pill[data-stav="otvorene"] .dot{background:var(--ok);box-shadow:0 0 0 4px rgba(56,209,139,.16)}
.pill[data-stav="zatvorene"] .dot{background:#E0705C}
.pill[data-stav="nezname"]{border-color:rgba(232,176,75,.45);color:#F3DDAF;background:rgba(232,176,75,.09)}
.pill[data-stav="nezname"] .dot{background:var(--warn)}
.hero__bar .sep{color:var(--dim)}
.hero__bar b.hodn-mini{color:var(--glow);font-weight:600}

@media (prefers-reduced-motion:reduce){.hero__bar-line{animation:none;width:100%}}

/* ============================================================================
   SEKCIE — odtiaľto nadol je to rozhranie konceptu 3
   ========================================================================== */
.sec{position:relative;padding-block:clamp(4rem,8vw,7.5rem);background:var(--ink);color:var(--paper)}
.sec--surface{background:var(--surface);color:var(--paper)}
.sec__head{margin-bottom:2.6rem;max-width:44rem}
.sec__head .mono{display:block;margin-bottom:.9rem}
.sec__head h2{font-size:clamp(1.9rem,4.6vw,3.2rem)}
.sec__head p{color:var(--dim);margin:1rem 0 0}

/* ---------- PREHĽAD: bento dlaždice ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.dl{position:relative;overflow:hidden;border-radius:1.2rem;border:1px solid var(--line);
  background:var(--card);color:var(--paper);padding:1.4rem;
  display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.dl:hover{border-color:var(--line-2);transform:translateY(-3px)}
/* reflektor sleduje kurzor — jemné presvetlenie karty */
.dl::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(20rem 20rem at var(--mx,50%) var(--my,50%),rgba(61,213,255,.14),transparent 65%)}
.dl:hover::before{opacity:1}
.dl__k{font-family:'Geist Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2)}
/* Hodnota sa nesmie zalomiť — „5 €" nám na užších oknách padalo do dvoch riadkov. */
.dl__v{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.04em;line-height:1;
  margin-top:.5rem;white-space:nowrap}
.dl__v em{font-style:normal;color:var(--glow)}
.dl__p{color:var(--dim);font-size:.86rem;margin:.5rem 0 0}
/* Poznámky v jednoduchých dlaždiciach sadajú na spodnú hranu, aby všetky karty
   v rade mali rovnaký rytmus. */
.dl--cena .dl__p,.dl--hodn .dl__p,.dl--karty .dl__p{margin-top:auto;padding-top:.8rem}
.dl--karty .dl__v{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.dl--cena{grid-column:span 2}
.dl--hodn{grid-column:span 2}
.dl--karty{grid-column:span 2}
.dl--sirka{grid-column:span 6}

/* Na mieste, kde mal koncept 3 fotku funkčnej zóny, je teraz údaj: koľko
   priestorov klub má a čo v nich je. Fotky priestorov prichádzajú hneď
   v ďalšej sekcii, takže tu by len predbiehali samy seba. */
.dl--priestory{grid-column:span 3}
.pocet{display:flex;align-items:baseline;gap:.7rem;margin-top:.4rem}
.pocet__c{font-size:clamp(3.4rem,7vw,5.2rem);font-weight:600;letter-spacing:-.05em;
  line-height:.85;color:var(--glow)}
/* Jedno slovo na účaří vedľa čísla — dlhšia veta sa vedľa päťriadkovej číslice
   láme do schodov, preto zvyšok vety žije pod ňou ako bežná poznámka. */
.pocet__t{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:500;letter-spacing:-.03em;
  white-space:nowrap}
.zoz{list-style:none;margin:1.1rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem}
/* Susedná dlaždica narástla o prúžok dňa, takže zoznam priestorov sadá na
   spodnú hranu — inak by pod ním ostala diera vysoká ako pol karty. */
.dl--priestory .zoz{margin-top:auto;padding-top:1.4rem}
.zoz li{font-size:.82rem;color:var(--dim);display:flex;align-items:center;gap:.5rem}
.zoz li::before{content:'';width:.3rem;height:.3rem;border-radius:50%;background:var(--aqua);flex:none}

/* Dnešné hodiny: číslo, kapsula stavu a pod nimi grafický prúžok dňa. Prúžok
   sem prišiel z bývalej podstránky rozvrhu (Dada, 2026-08-13) — koncept 4 je
   jednostránkový a prúžok je najlepšia vec, ktorú tá stránka mala. Rozpis
   celého týždňa ostáva v kontakte, tu sa neopakuje. */
.dl--zive{grid-column:span 3}
.dl--zive .dl__v{font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:normal}
/* Kapsula stavu sedí hneď pod poznámkou, nie na spodnej hrane karty —
   dlaždica je vysoká ako susedná a odsadená kapsula by v nej plávala. */
.dl--zive .pill{align-self:flex-start;margin-top:.4rem}
/* Prúžok dostáva vlastný dych, nech nelepí na kapsulu stavu. */
.dl--zive .den{margin-top:1.4rem}
.vikend{margin-top:auto;padding-top:1.2rem;display:grid;gap:.45rem}
.vikend div{display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);padding-top:.45rem;
  font-size:.86rem;color:var(--dim);font-variant-numeric:tabular-nums}
.vikend .vikend--now,.vikend div.vikend--now{color:var(--paper)}

/* ---------- PRIESTORY: lepiace karty ---------- */
.stoh{display:grid;gap:1.2rem}
.hala{position:sticky;border-radius:1.4rem;overflow:hidden;border:1px solid var(--line);
  background:var(--card);color:var(--paper);min-height:clamp(19rem,42vh,24rem);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.hala:nth-child(1){top:calc(var(--nav-h) + 1.4rem)}
.hala:nth-child(2){top:calc(var(--nav-h) + 2.2rem)}
.hala:nth-child(3){top:calc(var(--nav-h) + 3rem)}
.hala:nth-child(4){top:calc(var(--nav-h) + 3.8rem)}
.hala:nth-child(5){top:calc(var(--nav-h) + 4.6rem)}
.hala:nth-child(6){top:calc(var(--nav-h) + 5.4rem)}
.hala__t{padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center}
.hala__c{font-family:'Geist Mono',monospace;font-size:.68rem;letter-spacing:.16em;color:var(--glow)}
.hala h3{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.7rem 0 .8rem}
.hala p{color:var(--dim);margin:0 0 1.2rem;max-width:34ch}
.hala ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.hala li{border:1px solid var(--line-2);border-radius:999px;padding:.35rem .8rem;
  font-size:.76rem;color:var(--dim)}
.hala figure{margin:0;position:relative;overflow:hidden;background:var(--card-2)}
.hala figure img{width:100%;height:100%;object-fit:cover}

/* ---------- CENNÍK ----------
   Rozloženie je z konceptu 1: karty vedľa seba, v každej veľké číslo a pásik,
   ktorý úsporu UKAZUJE (pomer ceny za jeden vstup k jednorazovému vstupu —
   počítané z reálnych cien, nie odhad). Prevedenie je z konceptu 3: oblé
   karty, Geist, reflektor pod kurzorom. */
/* 11rem, nie viac: pri 12,5rem sa piata karta na 1280 px nezmestila do riadka
   a „Doplnky" ostávali samy na druhom riadku. */
.cen{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem}
.cen__i{position:relative;overflow:hidden;border-radius:1.2rem;border:1px solid var(--line);
  background:var(--card);color:var(--paper);padding:1.4rem;
  display:flex;flex-direction:column;gap:.35rem;
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.cen__i:hover{border-color:var(--line-2);transform:translateY(-3px)}
.cen__i::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(20rem 20rem at var(--mx,50%) var(--my,50%),rgba(61,213,255,.14),transparent 65%)}
.cen__i:hover::before{opacity:1}
.cen__k{font-family:'Geist Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2)}
.cen__v{font-size:clamp(2rem,4vw,2.9rem);font-weight:600;letter-spacing:-.04em;line-height:1;
  margin-top:.35rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.cen__n{font-size:.82rem;color:var(--dim);margin-top:auto;padding-top:.7rem}
.cen__n .usp{color:var(--glow);font-weight:600;white-space:nowrap}
.cen__i--hi{border-color:rgba(0,161,227,.5);
  background:linear-gradient(180deg,rgba(0,161,227,.14),var(--card) 62%);color:var(--paper)}
.cen__i--hi .cen__v{color:var(--glow)}
.save{display:block;margin-top:.8rem;height:.3rem;border-radius:999px;
  background:rgba(255,255,255,.09)}
.save i{display:block;height:100%;border-radius:999px;width:100%;
  background:linear-gradient(90deg,var(--aqua),var(--glow));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rise.in .save i{transform:scaleX(var(--w,1))}
.znacky{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.znacky span{border:1px solid var(--line-2);border-radius:999px;padding:.5rem .95rem;
  font-size:.8rem;color:var(--dim)}
.znacky b{color:var(--glow);font-weight:500}

/* ---------- PONUKOVÝ LIST (občerstvenie) ----------
   Klub predáva na recepcii nápoje, kávu a proteín a má na to vlastný tlačený
   „ponukový list" (majiteľ, 14. 8. 2026) — názov je jeho, nie náš. Tu je to
   jedna karta v reči rozhrania, nie druhý cenník: položky pod sebou, cena
   vpravo, oddelené vlasovou linkou. Do dvoch stĺpcov sa rozdelí až tam, kde
   je na to miesto — šesť riadkov v jednom stĺpci je na širokom okne zbytočne
   vysoký blok. */
.ponukovy{margin-top:clamp(2.2rem,4.5vw,3.4rem);
  border:1px solid var(--line);border-radius:1.2rem;background:var(--card);color:var(--paper);
  padding:clamp(1.3rem,3vw,2rem)}
.ponukovy__hd{margin-bottom:1.2rem}
.ponukovy__hd h3{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.03em;
  margin:.6rem 0 0}
.pl{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:0 clamp(1.4rem,4vw,3rem)}
.pl li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.pl__n{font-size:.92rem;color:#DCE5EE}
.pl__c{font-size:1.05rem;font-weight:600;color:var(--glow);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.note{color:var(--dim-2);font-size:.82rem;max-width:60ch}

/* ---------- VIDEO PÁS ----------
   Prehrávač si svoje ovládanie (pauza, šípky) kreslí do STREDU rámu a robí to
   aj vtedy, keď hlási, že video beží. Preto rám nielen zväčšíme, ale aj
   posunieme nabok, takže jeho stred leží mimo viditeľnej plochy. */
.vpas{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(30rem,70vh,44rem);display:flex;align-items:center;
  background:var(--ink);color:var(--paper)}
.vpas__bg{position:absolute;inset:0;z-index:0}
.vpas__bg img{width:100%;height:100%;object-fit:cover}
.vpas__bg iframe{position:absolute;top:50%;left:50%;
  width:max(260%,178vh);aspect-ratio:16/9;height:auto;
  transform:translate(-74%,-50%);border:0;pointer-events:none;
  opacity:0;transition:opacity .09s linear}
.vpas__bg.bezi iframe{opacity:1;transition:opacity 1.1s ease}
.vpas__bg::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,9,13,.92) 0%,rgba(7,9,13,.6) 48%,rgba(7,9,13,.35) 100%)}
.vpas__in{position:relative;z-index:2;width:var(--rail);margin-inline:auto;padding-block:3.5rem}
.vpas h2{font-size:clamp(1.9rem,4.6vw,3.2rem);max-width:16ch}
.vpas p{color:var(--dim);max-width:40ch;margin:1rem 0 0}
.vpas__credit{position:absolute;right:1rem;bottom:.7rem;z-index:2;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);
  font-family:'Geist Mono',monospace}

/* ---------- U NÁS: mozaika ----------
   Zadanie znelo „nech ich je všetkých naraz vidieť". Preto nie pás ani
   posuvník, ale nepravidelná mriežka 4×3, v ktorej má každá fotka svoje
   miesto a nič sa neschováva. Zaujímavé je to, čo robí kurzor: celá mozaika
   je pritlmená a fotka pod kurzorom sa RÓZSVIETI — vytiahne sa dopredu, naberie
   farbu a ukáže popis. Pozornosť tak vedie ruka návštevníka, nie animácia. */
.moz{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(8rem,13vw,11.5rem);gap:.6rem}
.moz figure{position:relative;margin:0;overflow:hidden;border-radius:1rem;
  border:1px solid var(--line);background:var(--card-2);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s;
  will-change:transform}
/* Pritlmenie musí ostať mierne — pri grayscale(.72) brightness(.72) čítala celá
   mozaika ako sivá mriežka a rozdiel „pred/po" bol síce veľký, ale východiskový
   stav vyzeral mŕtvo. Popisy sú preto vidieť vždy; kurzor pridáva farbu. */
.moz img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.42) brightness(.86) contrast(1.04);
  transition:filter .5s,transform .9s cubic-bezier(.2,.7,.2,1)}
.moz figcaption{position:absolute;left:.7rem;bottom:.7rem;z-index:2;
  background:rgba(7,9,13,.74);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:.55rem;padding:.35rem .7rem;
  font-family:'Geist Mono',monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);
  opacity:.82;transition:opacity .3s,transform .35s}
.moz figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.moz figure:nth-child(4){grid-column:span 2}
@media (hover:hover) and (min-width:901px){
  .moz figure:hover{transform:scale(1.03);z-index:3;border-color:var(--line-2);
    box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.5)}
  .moz figure:hover img{filter:none;transform:scale(1.04)}
  .moz figure:hover figcaption{opacity:1}
}
/* Bez kurzora (dotyk) niet čo rozsvecovať — fotky idú rovno v plnej farbe
   a veta o myši v úvode sekcie sa nezobrazí. */
@media (hover:none),(max-width:900px){
  .moz img{filter:none}
  .moz figcaption{opacity:1}
}

/* ---------- HODNOTENIE ---------- */
.hodn{display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.4rem,3.4vw,2.8rem)}
.hodn > div:first-child{flex:0 1 auto;min-width:0}
.hodn h2{margin:0;font-size:clamp(1.9rem,4.6vw,3.2rem)}
.hodn__v{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.hodn__c{font-size:clamp(3.2rem,6.6vw,4.6rem);font-weight:600;letter-spacing:-.05em;
  line-height:.85;color:var(--glow);font-variant-numeric:tabular-nums}
.hodn__s{color:var(--aqua);letter-spacing:.14em}
.hodn__p{color:var(--dim);font-size:.85rem}
.hodn__p a{color:var(--glow);text-decoration:none}
.hodn__p a:hover{text-decoration:underline}

/* ---------- KONTAKT ----------
   Kontaktný formulár tu nie je (Dada, 2026-08-13) — do posilňovne sa nikto
   neobjednáva, takže vľavo sú údaje a hodiny, vpravo mapa cez celú výšku. */
.kont{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);align-items:stretch}
.kont > div{display:flex;flex-direction:column;gap:.8rem}
.kv{border:1px solid var(--line);border-radius:1.2rem;background:var(--card);color:var(--paper);
  overflow:hidden}
.kv__r{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);align-items:baseline;font-size:.93rem}
.kv__r:last-child{border-bottom:0}
.kv__r .k{font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2)}
.kv__r a{color:var(--glow);text-decoration:none}
.kv__r a:hover{text-decoration:underline}

/* Otváracie hodiny podľa konceptu 1: prostý rozpis celého týždňa, dnešok
   zvýraznený, žiadny graf dňa. */
.hours{border:1px solid var(--line);border-radius:1.2rem;background:var(--card);color:var(--paper);
  overflow:hidden;flex:1}
.hours__r{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 1.2rem;
  border-bottom:1px solid var(--line);font-size:.92rem}
.hours__r:last-child{border-bottom:0}
.hours__r .d{font-family:'Geist Mono',monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim-2)}
.hours__r .t{font-variant-numeric:tabular-nums;text-align:right;line-height:1.45}
.hours__r--now{background:rgba(0,161,227,.1);color:var(--paper)}
.hours__r--now .d{color:var(--glow)}
.hours__r--unknown .t{color:var(--warn)}
.map{border:1px solid var(--line);border-radius:1.2rem;overflow:hidden;background:var(--card-2);
  flex:1;min-height:19rem}
.map iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.88)}

/* ---------- FOOTER ---------- */
.foot{background:var(--surface);color:var(--paper);border-top:1px solid var(--line);
  padding-block:3rem 1.6rem;font-size:.88rem;position:relative;overflow:hidden}
.foot__g{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
.foot h4{font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glow);margin:0 0 .9rem;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--glow)}
.foot img{height:2.9rem;width:auto;margin-bottom:.9rem}
.foot p{color:var(--dim)}
/* Kredo v pätičke je podpis, nie hlas — preto menšie a tlmené. */
.foot__kredo{margin:0 0 .9rem}
.foot__kredo span{font-size:clamp(.85rem,1.6vw,1.05rem);color:var(--dim)}
.foot__kredo .kredo__z{color:var(--aqua)}
.foot__b{position:relative;z-index:2;margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.1em;color:var(--dim-2)}
.foot__b a{color:var(--glow)}

/* ============================================================================
   ROZVRH (koncept 4)
   Koncept 4 je JEDNOSTRÁNKOVÝ (Dada, 2026-08-13) — podstránka `koncept-4-rozvrh`
   bola zrušená a jej dve dobré veci sa presťahovali na hlavnú stránku: prúžok
   dňa do dlaždice „Dnes otvorené" a týždeň ako mriežka kariet dní do vlastnej
   sekcie za priestory. Preto tu už nie sú pravidlá pre hlavičku podstránky
   (`.hero--pod`) ani pre jej bento (`.dl--tyzden`, `.dl--dnes`).
   ========================================================================== */

/* ---------- ÚVOD SA MUSÍ ZMESTIŤ NAD FOLD ----------
   Zadanie (Dada, 2026-08-13): informačný pásik pod úvodom musí byť CELÝ vidno
   hneď po otvorení, na každej obrazovke. `.hero` má `min-height:100svh`, takže
   pásik sedí presne na spodnej hrane okna — ale len dovtedy, kým sa obsah nad
   ním zmestí. Akonáhle prerastie, úvod sa natiahne a pásik spadne pod fold.

   Preto je celý vertikálny rytmus úvodu viazaný na `svh` (odsadenia, medzery
   medzi riadkami, veľkosť nadpisu cez `min(vw,svh)`) — pri nižšom okne sa
   všetko úmerne stiahne namiesto toho, aby to pretieklo. Predtým tu bola
   jediná záplata pre `max-height:780px`; riešila notebook 1280×720 a nič iné.

   Zvyšné dva prípady, ktoré samotné škálovanie nedotiahne, sú nižšie: mobil
   na šírku (veľmi nízke okno) a text nároku, ktorý je pri 38ch najvyšší blok. */
@media (max-height:600px){
  /* Lišta sa zužuje spolu s oknom. Nie je to len kozmetika: `--nav-h` určuje
     aj odsadenie nadpisu zhora, takže je to jediná páka, ktorá uberá výšku
     na oboch koncoch úvodu naraz. */
  :root{--nav-h:3.8rem}
  /* Na nízkom okne sa lišta po zrolovaní už nezužuje — je na minime a ďalších
     .8rem by z nej vytlačilo telefónne tlačidlo. */
  .nav.zrolovana .nav__in{height:var(--nav-h)}
  /* Na širokom a nízkom okne (mobil na šírku) sa nárok pri 38ch láme na päť
     riadkov a je najvyšším blokom úvodu — širší riadok ho zloží na dva. */
  .hero__claim{max-width:70ch;font-size:.86rem}
  .hero__kick{font-size:.64rem}
  /* Odsadenie pod lištu je v rem, čiže rastie so ŠÍRKOU okna — na širokom
     a nízkom okne (1440×500) zožerie pätinu výšky a uberať sa nedá, lebo
     nadpis by vliezol pod lištu. Povoliť teda musí nadpis: strop ide z 25 na
     20 svh, čo je presne to, čo tá pätina stojí. */
  .hero h1{font-size:clamp(2.4rem,min(17vw,20svh),9rem)}
  .hero__ctas{margin-top:clamp(.8rem,2.2svh,1.6rem)}
}
@media (max-height:560px){
  /* Pod 560 px výšky (notebook 1440×500, mobil na šírku) už nepomáha stláčanie:
     nárok ide preč a ostáva to podstatné — meno klubu, čiara, tlačidlá a pásik
     s dnešnými hodinami. Nadpis dostáva prísnejší strop, lebo aj pri 20svh je
     stále najvyšším blokom úvodu.
     Hranica bola 480 px a pri 1440×500 padal pásik 25 px pod fold — čiže
     presne to, čomu má celý tento blok zabrániť (zmerané 14. 8. 2026). */
  :root{--nav-h:3.1rem}
  .hero__claim{display:none}
  .hero h1{font-size:clamp(2.2rem,min(17vw,19svh),7rem)}
  .hero__bar-line{margin-block:.6rem .8rem}
  .hero__ctas{margin-top:.7rem}
}
@media (max-height:420px){
  /* Posledný stupeň — širokouhlý mobil na šírku, okno pritiahnuté k spodnej
     hrane, prehliadač na TV. Fluidný koreň je viazaný na ŠÍRKU, takže na
     širokom a veľmi nízkom okne sedí na strope 20 px a s ním aj každé
     odsadenie, tlačidlo a riadok pásika. Koreň preto ide na 15 px — to isté,
     čo dostane malý mobil. Nižšie sa ísť nedá: pri 3rem tlačidle by cieľ
     kliknutia klesol pod 44 px (pravidlo /design). */
  html{font-size:15px}
  /* 3.2rem = 48 px pri koreni 15 px. Nižšie sa lišta stiahnuť nesmie: telefónne
     tlačidlo v nej má 3rem (45 px) kvôli cieľu kliknutia a pri 2.8rem
     vytŕčalo z kapsuly von. */
  :root{--nav-h:3.2rem}
  .hero h1{font-size:clamp(2rem,min(17vw,17svh),7rem)}
}
/* Úzky A ZÁROVEŇ nízky displej (iPhone SE a spol.): nadpis je tam viazaný
   šírkou, nie výškou, takže sám od seba nepovolí — a pásik pod úvodom sa pri
   320 px láme do troch riadkov. Na vyšších mobiloch sa nič nemení. */
@media (max-width:560px) and (max-height:620px){
  .hero h1{font-size:clamp(2.4rem,min(22vw,24svh),7rem)}
  .hero__ctas{gap:.55rem}
}
/* ---------- GRAFICKÝ PRÚŽOK DŇA ----------
   Nahrádza druhý výpis otváracích hodín: 24 hodín ako os, modré pásy sú
   otvorené zmeny a biela čiara je práve teraz. Povie „kedy dnes prísť"
   jedným pohľadom, čo tabuľka nevie. */
.den{position:relative;height:2.4rem;border-radius:.6rem;background:var(--ink);
  border:1px solid var(--line);overflow:hidden}
.den i{position:absolute;top:0;bottom:0;
  background:linear-gradient(90deg,var(--aqua),var(--glow));opacity:.85}
.den b{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;
  box-shadow:0 0 .5rem rgba(255,255,255,.7)}
.den__ax{position:relative;height:1rem;margin-top:.4rem}
.den__ax span{position:absolute;transform:translateX(-50%);
  font-family:'Geist Mono',monospace;font-size:.6rem;color:var(--dim-2)}
.den__ax span:first-child{transform:none}
.den__ax span:last-child{transform:translateX(-100%)}
.den__note{margin:.5rem 0 0;font-family:'Geist Mono',monospace;font-size:.6rem;
  letter-spacing:.08em;color:var(--dim-2)}
.den__note a{color:var(--glow);text-decoration:none}
.den__note a:hover{text-decoration:underline}


/* Zhrnutie dní bez tréningu — na počítači nemá čo povedať (celý týždeň je
   v mriežke), na mobile nahrádza šesť prázdnych kariet jedným riadkom. */
.volne{display:none;margin:1rem 0 0;font-size:.86rem;color:var(--dim);
  border-top:1px solid var(--line);padding-top:.9rem}
.volne b{color:var(--dim-2);font-weight:500;font-family:'Geist Mono',monospace;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.35rem}

/* ---------- TÝŽDEŇ AKO DLAŽDICE DNÍ (koncept 3) ---------- */
.tyzden{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}
.dn{position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:1rem;background:var(--card);color:var(--paper);
  padding:.9rem .8rem;min-height:11rem;
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.dn:hover{border-color:var(--line-2);transform:translateY(-3px)}
/* rovnaký reflektor ako na dlaždiciach hlavnej stránky */
.dn::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(16rem 16rem at var(--mx,50%) var(--my,50%),rgba(61,213,255,.16),transparent 65%)}
.dn:hover::before{opacity:1}
.dn > *{position:relative}
.dn--dnes{border-color:rgba(0,161,227,.45);
  background:linear-gradient(180deg,rgba(0,161,227,.09),var(--card) 60%);color:var(--paper)}
/* Otváracie hodiny sú v hlavičke dňa zámerne PREČ — sú hneď vyššie v prúžku
   dňa a v kontakte; tu by tretíkrát opakovali to isté a robili z rozvrhu
   tabuľku hodín. Ostáva názov dňa. */
.dn__h{text-align:center;padding-bottom:.7rem;border-bottom:1px solid var(--line);
  margin-bottom:.8rem}
.dn__d{font-weight:600;font-size:.95rem;letter-spacing:-.02em}
.dn--dnes .dn__d{color:var(--glow)}
.dn__z{display:grid;gap:.5rem}
.dn__x{color:var(--dim-2);font-size:.74rem;text-align:center}
/* Tréning je TLAČIDLO — otvára okno s detailom (`trening-okno.js`). Nulujeme
   preto tlačidlový vzhľad prehliadača a dopĺňame `text-align`, inak by Chrome
   text vycentroval. Že sa dá kliknúť, hovorí šípka v rohu a to, že sa karta
   pri prejdení myšou rozsvieti — nie veta s návodom. */
.tr{position:relative;display:flex;flex-direction:column;gap:.15rem;
  border:1px solid transparent;font:inherit;text-align:left;width:100%;cursor:pointer;
  background:var(--card-2);color:var(--paper);border-radius:.7rem;
  padding:.55rem 1.75rem .55rem .6rem;
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.tr:hover{border-color:rgba(0,161,227,.5);background:#1A2536;transform:translateY(-2px)}
.tr:active{transform:none}
.tr__t{font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--glow);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tr__n{font-weight:500;font-size:.82rem;line-height:1.25}
.tr__sip{position:absolute;right:.55rem;top:.5rem;font-size:.78rem;line-height:1;
  color:var(--dim-2);transition:transform .25s,color .25s}
.tr:hover .tr__sip{transform:translateX(2px);color:var(--glow)}

/* ---------- ROZVRH NA UŽŠOM OKNE: DENNÍK, NIE MRIEŽKA ----------
   Sedem stĺpcov sa na telefón nezmestí a filter po dňoch tu bol (Dada,
   2026-08-13) radom ôsmich tlačidiel nad jediným reálnym tréningom. Mriežka sa
   preto mení na zoznam: vľavo skratka dňa, vpravo tréningy pod sebou. Dni bez
   tréningu vypadnú a zhrnie ich riadok `.volne` pod zoznamom, takže návštevník
   vidí celý týždeň bez šiestich prázdnych kariet.

   HRANICA JE 1200 px, nie 1000 (Dada, 14. 8. 2026 — „na iPade to nie je
   vycentrované"). Pri 1024 px na šírku sedem stĺpcov ešte platilo, ale stĺpec
   mal ~90 px: šípka ležala na čase, „Aerobic – Tabata" sa lámalo na dva riadky
   a karta vyzerala rozsypane. Zoznam je na tej šírke čitateľnejší než mriežka,
   do ktorej sa nič nezmestí. */
@media (max-width:1200px){
  .tyzden{grid-template-columns:1fr;gap:.5rem}
  /* 4.6rem = najdlhší názov dňa („Pondelok") v mono na jeden riadok. */
  .dn{min-height:0;display:grid;grid-template-columns:4.6rem 1fr;
    gap:.2rem .8rem;align-items:center;padding:.85rem .9rem}
  /* Hlavička dňa už nie je hlavička, ale ľavý stĺpec — bez čiary a bez odsadenia. */
  .dn__h{text-align:left;padding-bottom:0;border-bottom:0;margin-bottom:0}
  .dn__d{font-size:.82rem;font-family:'Geist Mono',ui-monospace,monospace;
    letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);font-weight:400}
  .dn--dnes .dn__d{color:var(--glow)}
  .dn__z{gap:.4rem}
  .dn__x{text-align:left}
  /* Karta tréningu: ČAS a pod ním NÁZOV, vycentrované (Dada, 14. 8. 2026).
     Predtým stáli vedľa seba a zľava, takže na širokej karte sa oba údaje
     tlačili k ľavej hrane a zvyšok ostal prázdny. Vodorovná vypchávka je na
     oboch stranách rovnaká, aby text sedel v skutočnom strede karty a nie
     v strede plochy, ktorá zvyšuje po šípke. */
  .tr{flex-direction:column;align-items:center;text-align:center;gap:.15rem;
    padding:.7rem 1.7rem}
  .tr__t{font-size:.8rem}
  .tr__n{font-size:.95rem}
  /* Pri vycentrovanom obsahu patrí šípka na stred pravej hrany, nie do rohu. */
  .tr__sip{top:50%;transform:translateY(-50%)}
  .tr:hover .tr__sip{transform:translate(2px,-50%)}
  .dn--prazdny{display:none}
  .volne{display:block}
}

/* ---------- REVEAL ---------- */
.rise{opacity:0;transform:translateY(1.4rem)}
.js .rise{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
html:not(.js) .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise,.js .rise{opacity:1!important;transform:none!important;transition:none}
  .js .hero h1 .ln > i,.js .hero__kredo,.js .hero__claim,.js .hero__ctas,.js .hero__kick{
    animation:none;opacity:1;transform:none}
  .moz figure,.moz img{transition:none}
  /* Otvorené menu sa objaví naraz a bez posunu — ale zatvorené musí ostať
     zatvorené, preto sa nastavuje len stav `.open`. */
  .plach{transition:none}
  .plach.open .plach__nav a,.plach.open .plach__tel{
    opacity:1;transform:none;transition:none}
}

/* ---------- MOBIL ---------- */
@media (max-width:900px){
  :root{--rail:min(78rem, 88vw)}
  /* ---------- MENU NA CELÚ OBRAZOVKU ----------
     Rozbaľovací panel pod kapsulou (pôvodné riešenie) pôsobil na telefóne ako
     prilepený zoznam (Dada, 2026-08-13). Nahrádza ho plachta cez celú obrazovku
     v jazyku konceptu 3: veľké odkazy v strede, ktoré po jednom nabehnú.
     Vlastné konceptu 4 sú poradové čísla — tie isté, aké nesú karty priestorov.
     Kapsula s logom a krížikom pláva NAD plachtou, takže zatvorenie je stále
     na tom istom mieste, kde návštevník menu otvoril. */
  /* Lišta musí byť NAD plachtou (tá má 90), inak sa krížik schová pod ňu
     a menu sa nedá zavrieť inak než klávesom Esc. */
  .nav{z-index:100}
  .nav__in{position:relative}
  .burger{display:inline-flex}
  .nav__links,.nav__cta{display:none}

  /* Plachta je ZAROVNANÁ NA RAIL stránky, nie na stred obrazovky — odkazy tak
     začínajú presne pod logom a menu pôsobí ako pokračovanie stránky, nie ako
     samostatná obrazovka. Žiadne čísla, žiadne rámčeky: len typografia, jedna
     vlásková čiara a telefón (Dada, 2026-08-14). */
  .plach{display:grid;position:fixed;inset:0;z-index:90;
    background:rgba(7,9,13,.96);color:var(--paper);
    backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
    align-content:center;
    /* `safe center` = keď je obsah vyšší než obrazovka, prestane sa centrovať
       a zarovná sa k hornej hrane, takže sa nedá odrezať mimo dosahu. Staršie
       prehliadače, ktoré `safe` nepoznajú, zahodia len tento riadok. */
    align-content:safe center;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    justify-items:stretch;gap:2.4rem;
    padding:calc(var(--nav-h) + 3rem) calc((100vw - var(--rail))/2) 2.6rem;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,visibility 0s linear .3s}
  .plach.open{opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .3s ease,visibility 0s linear 0s}

  .plach__nav{display:flex;flex-direction:column;align-items:flex-start;gap:.05em}
  .plach__nav a{display:block;text-decoration:none;color:var(--paper);
    font-size:clamp(2.1rem,9.5vw,3.6rem);font-weight:500;letter-spacing:-.045em;
    line-height:1.14;
    opacity:0;transform:translateY(.7rem)}
  /* Sekcia, v ktorej návštevník práve je, svieti — plachta tak nie je len
     rozcestník, ale aj poloha na stránke. */
  .plach__nav a.aktivny{color:var(--glow)}
  /* Odkazy nabiehajú po jednom, nie naraz — inak plachta „blikne". */
  .plach.open .plach__nav a{opacity:1;transform:none;
    transition:opacity .4s cubic-bezier(.2,.7,.2,1) var(--d,0s),
               transform .4s cubic-bezier(.2,.7,.2,1) var(--d,0s),color .25s}
  .plach__nav a:nth-child(1){--d:.03s}
  .plach__nav a:nth-child(2){--d:.07s}
  .plach__nav a:nth-child(3){--d:.11s}
  .plach__nav a:nth-child(4){--d:.15s}
  .plach__nav a:nth-child(5){--d:.19s}

  /* V kapsule sa telefónne číslo na mobile nezmestí, v plachte áno — a je to
     to, kvôli čomu sem návštevník ide najčastejšie. Nie je to tlačidlo, ale
     riadok pod čiarou: menu tak ostáva samá typografia. */
  .plach__tel{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
    color:var(--paper);font-size:1.15rem;font-weight:500;letter-spacing:-.01em;
    padding-top:1.5rem;border-top:1px solid var(--line);width:100%;
    opacity:0;transform:translateY(.7rem)}
  .plach__tel::before{content:'';flex:none;width:.5rem;height:.5rem;border-radius:50%;
    background:var(--ok);box-shadow:0 0 0 3px rgba(56,209,139,.22)}
  .plach.open .plach__tel{opacity:1;transform:none;
    transition:opacity .4s cubic-bezier(.2,.7,.2,1) .24s,
               transform .4s cubic-bezier(.2,.7,.2,1) .24s}

  /* Na mobile NA ŠÍRKU je výšky tak málo, že päť odkazov v plnej mierke by
     plachtu pretieklo. Typografia sa preto viaže na výšku okna, rovnako ako
     v úvode stránky. */
  @media (max-height:620px){
    .plach{gap:1.3rem;padding-block:calc(var(--nav-h) + 1.6rem) 1.4rem}
    .plach__nav a{font-size:clamp(1.45rem,5.6svh,2.3rem);line-height:1.2}
    .plach__tel{padding-top:1rem;font-size:1rem}
  }

  /* Bez JavaScriptu sa plachta nemá čím otvoriť. Krížik preto zmizne a odkazy
     ostanú trvale viditeľné ako riadok pod kapsulou. */
  html:not(.js) .burger{display:none}
  html:not(.js) .plach{position:absolute;inset:auto 0 auto 0;top:calc(var(--nav-h) + 1.4rem);
    z-index:59;background:rgba(7,9,13,.96);
    border-block:1px solid rgba(255,255,255,.12);
    padding:.8rem 1.4rem;gap:.6rem;justify-items:center;
    opacity:1;visibility:visible;pointer-events:auto}
  html:not(.js) .plach__nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.2rem .9rem}
  html:not(.js) .plach__nav a{font-size:.95rem;opacity:1;transform:none}
  html:not(.js) .plach__tel{opacity:1;transform:none;border:0;padding-top:0;
    width:auto;font-size:.95rem;justify-content:center}
  /* Na telefóne stojí obsah úvodu ako jedna skupina v strede výšky, nie
     pritlačený k pásiku (Dada, 2026-08-14). Skupina je: adresa → nadpis →
     text → tlačidlá → kapsula stavu; tú do nej presúva skript v `koncept-2.html`.
     Na počítači ostáva `justify-content:flex-end` zo základného pravidla. */
  .hero__in{justify-content:center;
    padding-block:calc(var(--nav-h) + clamp(.4rem,1.6svh,1.4rem)) clamp(1rem,2.2svh,1.8rem)}
  /* Kapsula je v stĺpcovom flexe, takže bez tohto by sa roztiahla na celú
     šírku a prestala vyzerať ako kapsula. */
  .hero__in .pill{align-self:flex-start;margin-top:clamp(1rem,2.8svh,1.7rem)}
  /* na mobile sa pásik zalamuje do riadkov, takže oddeľovacie „·" ostávali
     visieť na koncoch riadkov — na úzkych displejoch ich vypíname */
  .hero__bar .rail{gap:.5rem 1.2rem}
  /* Aj riadok s dnešnými hodinami („Piatok: 07:00 – 12:00 a 14:00 – 20:00")
     ostáva na telefóne vypnutý — pásik mal tri riadky a celý úvod tým sadal na
     seba (Dada, 2026-08-14). Kapsula nad ním povie to podstatné („teraz
     otvorené · do 12:00") a presné hodiny sú hneď v Prehľade, aj s časovou
     osou dňa. `span.sep` ho vypína spolu s „·"; predtým ho ďalšie pravidlo
     vracalo späť. */
  .hero__bar span.sep{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .dl--priestory,.dl--zive,.dl--sirka{grid-column:span 2}
  .dl--cena,.dl--hodn,.dl--karty{grid-column:span 1}
  .zoz{grid-template-columns:1fr 1fr}
  .hala{grid-template-columns:1fr;min-height:0}
  .hala figure{aspect-ratio:16/10;order:-1}
  .hala figure.bez-foto{aspect-ratio:16/9}
  .hala:nth-child(n){position:relative;top:auto}
  /* ---------- MOZAIKA NA MOBILE: VŠETKÝCH OSEM ----------
     VÝNIMKA z pravidla /design č. 8 (na mobile najviac 4 fotky), vyžiadaná
     výslovne pre tento koncept (Dada, 2026-08-13): sekcia stojí na tom, že je
     celý klub vidieť naraz, a orezanie na polovicu jej berie zmysel. Aby to
     nebol nekonečný pás dlaždíc, dve fotky držia väčšiu bunku a mriežka je
     presne 6 riadkov bez jedinej diery:
       riadok 1–2  posilňovňa (2 stĺpce × 2 riadky, fotka je na šírku)
       riadok 3    kardio · box
       riadok 4    telocvičňa (2 stĺpce × 1 riadok — panoráma 3:1)
       riadok 5    funkčná zóna · TRX
       riadok 6    recepcia · šatne
     Ostatné pravidlá platia ďalej: mriežka je zarovnaná (č. 5) a fotky sa
     nedotýkajú okrajov (č. 3). */
  .moz{grid-template-columns:repeat(2,1fr);grid-auto-rows:30vw;gap:.5rem}
  .moz figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .moz figure:nth-child(4){grid-column:span 2;grid-row:span 1}
  .kont{grid-template-columns:1fr}
  .kont .map{min-height:14rem}
  .foot__g{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .dl--priestory,.dl--zive,.dl--sirka,
  .dl--cena,.dl--hodn,.dl--karty{grid-column:span 1}
  .hero h1{font-size:clamp(2.6rem,min(26vw,24svh),7rem)}
  .cen{grid-template-columns:1fr 1fr}
}

/* ---------- VYSKAKOVACIE OKNO S DETAILOM TRÉNINGU ----------
   Značky vyrába `trening-okno.js`, spoločný pre oba koncepty — vzhľad si každý
   rieši sám. Tu je to karta v reči rozhrania: oblé rohy, tenká linka, aurora
   za hlavičkou, mono menovky. Natívny `<dialog>` sa kreslí do vrstvy navrchu,
   takže sa nemusí biť o `z-index` s plávajúcou lištou ani s plachtou menu. */
.tokno{border:0;padding:0;margin:auto;background:transparent;color:var(--paper);
  width:min(40rem,92vw);max-height:min(86svh,54rem);overflow:visible}
.tokno::backdrop{background:rgba(4,6,10,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tokno__k{position:relative;overflow:auto;max-height:min(86svh,54rem);
  background:var(--card);color:var(--paper);
  border:1px solid var(--line-2);border-radius:1.4rem;
  padding:clamp(1.5rem,4vw,2.6rem);
  box-shadow:0 2rem 5rem rgba(0,0,0,.6)}
/* Aurora za hlavičkou — ten istý materiál ako v úvode stránky, len potichu. */
.tokno__k::before{content:'';position:absolute;left:0;right:0;top:0;height:14rem;z-index:0;
  pointer-events:none;border-radius:1.4rem 1.4rem 0 0;
  background:radial-gradient(18rem 10rem at 18% 0%,rgba(0,161,227,.22),transparent 70%),
             radial-gradient(14rem 9rem at 82% 0%,rgba(79,107,255,.16),transparent 70%)}
.tokno__k > *{position:relative;z-index:1}
.tokno__x{position:absolute;top:.75rem;right:.75rem;z-index:3;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:999px;
  background:rgba(11,15,21,.7);color:var(--dim);border:1px solid var(--line-2);cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.tokno__x:hover{color:var(--glow);border-color:rgba(0,161,227,.5);background:var(--card-2)}
.tokno__x svg{width:1.1rem;height:1.1rem}
.tokno__kick{font-family:'Geist Mono',monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glow);margin:0 2.5rem 0 0}
.tokno__n{font-size:clamp(1.7rem,4.4vw,2.5rem);font-weight:600;letter-spacing:-.04em;
  line-height:1.02;margin:.75rem 0 0}
.tokno__lead{color:#DCE5EE;margin:.8rem 0 0}
.tokno h3{font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2);font-weight:400;margin:0 0 .7rem}
.tokno__casy{margin-top:1.8rem;border-top:1px solid var(--line);padding-top:1.4rem}
.tokno__casy ul{list-style:none;margin:0;padding:0}
.tokno__casy li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--line)}
.tokno__casy li:last-child{border-bottom:0}
.tokno__den{font-size:.92rem;color:#DCE5EE}
.tokno__cas{font-family:'Geist Mono',monospace;font-size:.92rem;color:var(--glow);
  font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.tokno__trener{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1.4rem}
.tokno__meno{font-weight:600;margin:0 0 .3rem}
.tokno__popis{color:var(--dim);font-size:.92rem;margin:1.4rem 0 0}
.tokno__fakty{margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line)}
.tokno__f{display:grid;grid-template-columns:9rem 1fr;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--line)}
.tokno__f dt{font-family:'Geist Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2);padding-top:.25em}
.tokno__f dd{margin:0;font-size:.92rem;color:#DCE5EE}
/* --- Škola, ktorá tréning v klube vedie (gymnastika, 14. 8. 2026) ---
   Cudzie logo je stavané na biely papier, preto stojí na svetlej tabuľke a nie
   priamo na tmavej karte — inak by z neho fialový nápis takmer zmizol. */
.tokno__partner{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1.4rem}
/* Logo sedí na výškovom strede textu vedľa seba (Dada, 14. 8. 2026) — nie
   zarovnané na prvý riadok; text je vyšší ako tabuľka a zhora to „padalo". */
.tokno__pk{display:flex;align-items:center;gap:1.2rem}
.tokno__pznak{flex:0 0 auto;width:6.5rem;background:#FFF;border-radius:1rem;
  border:1px solid var(--line-2);padding:.75rem;display:block}
.tokno__pznak img{width:100%;height:auto;display:block}
.tokno__pt{min-width:0}
.tokno__pz{margin:.15rem 0 0;font-family:'Geist Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.tokno__po{margin:.5rem 0 0;font-size:.92rem;color:#DCE5EE}
.tokno__pkont{margin:.35rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.92rem}
.tokno__pl{color:var(--dim);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;transition:color .25s}
.tokno__pl:hover{color:var(--glow)}
/* Odrážky z letáka. Odškrtnutie je nakreslené dvoma hranami, nie znakom — znak
   by v inom písme vyzeral zakaždým inak. */
.tokno__zisk{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1.4rem}
.tokno__zisk ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.tokno__zisk li{position:relative;padding-left:1.7rem;font-size:.92rem;color:#DCE5EE}
.tokno__zisk li::before{content:'';position:absolute;left:.2rem;top:.32em;
  width:.55rem;height:.3rem;border-left:2px solid var(--aqua);border-bottom:2px solid var(--aqua);
  transform:rotate(-45deg)}
.tokno__piliere{list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tokno__piliere li{border:1px solid var(--line);border-radius:1rem;padding:.9rem;
  background:var(--card-2);color:var(--paper)}
.tokno__piliere b{display:block;font-size:.78rem;font-weight:600;letter-spacing:-.01em;
  line-height:1.25}
.tokno__piliere span{display:block;margin-top:.35rem;font-size:.82rem;color:var(--dim)}
@media (max-width:560px){
  .tokno__piliere{grid-template-columns:1fr}
  /* Na telefóne logo NAD text, nie vedľa neho — vedľa ostalo textu asi 55 %
     šírky a meno aj riadok o zápise sa lámali do troch riadkov. */
  .tokno__pk{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* Kým klub text nepotvrdí, okno to povie nahlas — tá istá reč ako pri hodinách. */
.tokno__navrh{margin:1.4rem 0 0;border:1px solid rgba(232,176,75,.32);border-radius:.9rem;
  background:rgba(232,176,75,.07);color:#F1DDB2;padding:.9rem 1.1rem;font-size:.84rem}
.tokno__akcie{margin-top:1.6rem}
.tokno__b{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:var(--aqua);color:#03151E;font-weight:600;font-size:.9rem;border-radius:.8rem;
  padding:.9rem 1.5rem;min-height:3rem;
  transition:background .25s,transform .2s,box-shadow .25s}
.tokno__b:hover{background:var(--glow);transform:translateY(-2px);
  box-shadow:0 .8rem 2rem rgba(0,161,227,.28)}
/* Stránka pod otvoreným oknom sa nesmie rolovať spolu s ním. */
body.tokno-otvorene{overflow:hidden}
@media (max-width:560px){
  .tokno__f{grid-template-columns:1fr;gap:.2rem}
  .tokno__f dt{padding-top:0}
}
@media (prefers-reduced-motion:no-preference){
  .tokno[open]{animation:toknoVstup .3s cubic-bezier(.2,.7,.2,1)}
  @keyframes toknoVstup{from{opacity:0;transform:translateY(1rem) scale(.985)}to{opacity:1;transform:none}}
}


/* --- Menovky reagujú na kurzor (Dada, 14. 8. 2026) ---
   Doteraz to bol jediný zoznam na stránke, ktorý pod kurzorom nerobil nič,
   hoci dlaždice aj karty vedľa neho svietia. Oblý obrys a jemné nadvihnutie —
   reč tohto konceptu, nie pečiatka z konceptu 1. Len pre myš, aby na dotyku
   neostal stav visieť po ťuknutí. */
@media (hover:hover){
  .znacky span{transition:border-color .25s,color .25s,background .25s,transform .25s}
  .znacky span:hover{border-color:rgba(0,161,227,.55);color:var(--paper);
    background:rgba(0,161,227,.1);transform:translateY(-2px)}
}