/* =========================================================================
   hikes — web pred spustením
   Od 25. 9. 2026 značka hikes (predtým TIFIPIFI). Logo, farby a písmo sú zo sady
   vo wiki: wiki/zdroje/2026-09-24-Resers-Logo-HIKES.md (cesta ChatGPT, Chladná
   fialová na Hmle) a wiki/zdroje/2026-09-25-Rozhodnutie-Typografia-HIKES.md
   (smer 2: Noto Serif Display 300 na veľké nadpisy, Inter na všetko ostatné).
   Maketa, z ktorej je tento vzhľad: https://claude.ai/artifact/Gr8RUjeutxtfwedNA5Spvj
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Paleta hikes (farby.json zo sady loga) ------------------------------ */
  --brand:       #3a37a6;   /* Chladná fialová — logo, hlavné tlačidlo; na Hmle 8,1 : 1 */
  --brand-hover: #2e2b8c;
  --brand-dark:  #a9a6ff;   /* fialová na Noci, 7,6 : 1 */
  --hmla:        #eef0f5;   /* podklad stránky a lišty — logo stojí na Hmle */
  --noc:         #1a1846;   /* tmavý záver, pätička, formulár; Hmla na Noci 14,6 : 1 */
  --ink:         #1c1b3f;   /* nadpisy a text; na Hmle 14,4 : 1 */
  --muted:       #5b5e78;   /* vedľajší text; na bielej 6,3 : 1 */
  --muted-dark:  #a7a9c9;   /* vedľajší text na Noci, 7,3 : 1 */
  --on-dark:     #eef0f5;
  --line:        #d5d8e3;   /* deliace čiary, len dekoratívne */
  --white:       #ffffff;

  /* --- Staré mená tealovej škály ako aliasy -----------------------------------
     Pravidlá v tomto súbore ich používajú stovkykrát; pri premenovaní značky
     (25. 9. 2026) nesú hodnoty hikes, aby sa nemuselo prepisovať každé pravidlo.
     Význam ostal: 900 = tmavá plocha, 700 = tmavý text, 500 = farba značky,
     300 = akcent na tmavom, 100/50 = svetlá plocha. Nové pravidlá píš cez mená hore. */
  --teal-900: var(--noc);
  --teal-700: var(--ink);
  --teal-500: var(--brand);
  --teal-300: var(--brand-dark);
  --teal-100: var(--hmla);
  --teal-50:  var(--hmla);

  --paper: var(--hmla);     /* stránka */
  --fog:   var(--hmla);     /* polia, chipy */
  --mist:  #e3e4ee;

  --night-sky:  var(--noc);
  --night:      #141238;
  --night-deep: #0d0b29;

  /* --- Svetlo obojka. Jediná teplá hodnota na stránke: v nočnej scéne, na ponuke
     pre prvých a na odoslaní prihlášky. K fialovej je takmer doplnková. ------- */
  --glow:      #f7b955;
  --glow-soft: #ffd8a3;
  --glow-ink:  #8a5410;

  /* --- Funkčné farby ------------------------------------------------------ */
  --success: #2f6b3d;
  --error:   #9c2d2d;

  /* --- Typografia (smer 2 z wiki) -------------------------------------------
     Veľké nadpisy Noto Serif Display 300, najviac jedno slovo kurzívou; má vlasové
     ťahy, preto len vo veľkých stupňoch. Menšie nadpisy, text, štítky, tlačidlá
     a formuláre Inter. Obe SIL OFL 1.1, latinka všetkých mutácií. */
  --display: "Noto Serif Display", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Priestor ----------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  /* 1240 px na celom webe: logo v lište stojí na tej istej osi ako text domovskej
     (Peter 25. 9. 2026: „ľavú stranu loga zarovnať s ľavou stranou textu“). */
  --shell: 1240px;

  /* Rohy: ploché tlačidlo a polia 3 px, fotky 2 px (v pravidlách), kartičky appky
     a formulár 8 px. Bloky vsadené do stránky s rádiusom odišli — celky sú plochy
     cez celú šírku. */
  --r-xs:  3px;
  --r-sm:  3px;
  --r-lg:  3px;
  --r-card: 8px;
  --r-block: 0;

  --rule:        rgb(28 27 63 / 0.11);
  --rule-strong: rgb(28 27 63 / 0.18);

  --lift-1: 0 1px 2px rgb(26 24 70 / 0.04), 0 8px 24px -8px rgb(26 24 70 / 0.10);
  --lift-2: 0 2px 4px rgb(26 24 70 / 0.05), 0 24px 56px -16px rgb(26 24 70 / 0.16);
}

/* ---------------------------------------------------------------- základ -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* Text je na celom webe jeden: Inter 400, 16 px / 1,6 podľa smeru 2 (Peter 25. 9. 2026).
     Podstránky ho mali väčší — list 19 px, článok 17,5 px, ostatné 17 px. */
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--teal-500) 20%, transparent);
}

/* Najťažšia hrúbka na webe je 500 (smer 2, Peter 25. 9. 2026): menšie nadpisy, zvýraznenie,
   štítky aj ovládanie. Do toho dňa mali podstránky a formulár 600, strong 700. */
h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-wrap: balance;
  margin: 0;
}
strong, b { font-weight: 500; }

/* h1 a h2 sú hlas sekcie — serif s optickou osou, takže veľké nadpisy dostanú
   vyšší kontrast ťahov samy. Prevádzkové nadpisy (h3, h4) ostávajú v Inter:
   serif je v pätnástich kartách funkcií príliš rušný a v číslach nečitateľný. */
h1, h2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
/* Zvýraznenie v nadpise je kurzíva jedného slova vo farbe nadpisu — ozvena sklonu loga. */
h1 em, h2 em { font-style: italic; font-weight: 300; color: inherit; }
h3, h4 { font-family: var(--body); }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.dark :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--glow-soft);
}

img, svg { max-width: 100%; }

::selection { background: var(--teal-100); color: var(--teal-900); }

/* ------------------------------------------------------------- pomocníci -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--teal-900);
  color: var(--teal-100);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  font-weight: 500;
  transition: translate 140ms ease;
}
.skip:focus { translate: -50% 0; }

/* Menovka verzálkami. Nad nadpismi sekcií už nestojí (14. 9. 2026): malý label
   nad veľkým nadpisom je jeden z najznámejších znakov webu zo šablóny a nadpis
   sekciu unesie sám. Ostáva na dvoch miestach, kde nie je labelom, ale niečím
   iným: v tmavom formulári ako názov kroku a nad nadpisom článku ako cesta späť
   na rozcestník. */
.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 1.1rem;
}
.dark .eyebrow { color: var(--teal-300); }

.lede {
  max-width: 46ch;
  color: color-mix(in srgb, var(--ink) 82%, var(--paper));
}
.dark .lede { color: var(--teal-100); }

section { scroll-margin-top: 5.5rem; }

/* -------------------------------------------------------------- tlačidlá -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);   /* ploché tlačidlo 3 px (hikes, 25. 9. 2026); dovtedy pilulka */
  font-family: var(--body);
  font-size: 0.90625rem;        /* 14,5 px podľa smeru 2 */
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}
.btn:active { translate: 0 1px; }

/* Hlboký teal namiesto stredného: sýtejší tón na svetlom podklade pôsobí
   drahšie a je aj kontrastnejší. Hover mení farbu a tieň, nie polohu —
   poskakovanie tlačidla je bootstrapový pohyb. */
.btn--primary {
  background: var(--brand);
  color: var(--white);
}
.btn--primary:hover { background: var(--brand-hover); }

.btn--onDark { background: var(--teal-100); color: var(--teal-900); }
.btn--onDark:hover { background: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--teal-100);
  border-color: color-mix(in srgb, var(--teal-300) 55%, transparent);
}
.btn--ghost:hover {
  border-color: var(--teal-300);
  background: color-mix(in srgb, var(--teal-300) 12%, transparent);
}

.btn--outline {
  background: transparent;
  color: var(--teal-700);
  border-color: var(--rule-strong);
}
.btn--outline:hover {
  border-color: var(--teal-500);
  background: color-mix(in srgb, var(--teal-500) 6%, transparent);
}

/* --------------------------------------------------------------- hlavička -- */

/* Hlavička je mliečna lišta nad stránkou, na každej stránke rovnaká; na bielej
   ju odlíši až obsah, ktorý pod ňu vojde pri scrollovaní (blok, fotka). Do 16. 9. 2026
   splývala na domovskej s tmavým hero; nové hero je blok vsadený do papiera,
   takže lišta stojí nad ním ako inde. Na vrchu stránky lišta splýva s hero aj
   s hlavičkou podstránky: nemá vlásočnicu a hrebene pod ňou sa k nej rozpustia
   do Hmly (Peter 25. 9. 2026, ako v náhľade smeru 2 — logo stojí na tej istej
   ploche ako nadpis). `.is-stuck` (skript, sentinel 52 px) pridá vlásočnicu
   a tieň, keď sa scrollovalo. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 0.9rem;
  padding-top: max(0.9rem, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.masthead__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.masthead__logo { display: block; flex: none; line-height: 0; }
/* V lište je od 21. 9. 2026 zostava vedľa seba — symbol pred nápisom, nie nad
   ním. Tak to k novej značke (Montserrat 600, prestrk +6, zaoblené rohy)
   predpisuje wiki: nízka a široká podoba patrí lište, zostava nad sebou pätičke.

   Riadi sa výška a tá je tu zároveň výškou verzálky — vo vedľajšej zostave je
   celok vysoký presne ako písmo (viewBox 754,66 × 100). Z 20 px teda vyjde
   šírka 151 px a verzálka 20 px, o štvrtinu väčšia než predošlých 15,8 px.
   Wiki uvádza v tabuľke miním príklad s 28 px (= 211 px šírky), ale to je údaj
   o odstupe od dna 103 px, nie predpis veľkosti: pri 28 px by mala verzálka
   28 px, teda 1,8× viac než dovtedy, a značka by bola opäť najťažším prvkom
   stránky — práve to korekcia z 21. 9. odstraňovala.

   Výška lišty sa tým nehýbe. Riadok meria 30,4 px a drží ho prepínač jazyka,
   nie logo, takže veľkosť značky nemá na tok stránky vplyv — pri lepkavej lište
   to bol jediný dôvod na opatrnosť.

   Pomer strán tu nie je: nesie ho viewBox súboru. Konštanta by znamenala, že
   každá zmena značky je zásah do CSS.

   Ochranná zóna zostavy je 2 d = 2 × 18,5 % verzálky, teda 7,4 px; padding je
   8 px, aby ju prekryl s rezervou. (Do 21. 9. 2026 bolo d 23 % — rez 700 mal
   hrubší ťah.) */
/* hikes (25. 9. 2026): wordmark 80 × 28 px, vycentrovaný na stred lišty (Peter). Pri 26 px
   pôsobil vedľa navigácie utlačene, pri 32 px mu v 59 px lište chýbal vzduch (14 px nad
   aj pod ním) — 28 px vybral Peter. Riadok lišty drží prepínač jazyka (30,4 px); keby
   bolo logo vyššie, záporný margin ho pustí do paddingu, takže lišta nerastie. */
.masthead__logo { --logo-h: 28px; padding-inline-end: 8px; margin-block: min(0px, (30.4px - var(--logo-h)) / 2); }
.masthead__logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}
/* Zostava má dva súbory, tealový a biely. V hlavičke na lište beží tealový;
   biely ostáva v HTML pre tmavý podklad hlavičky, ktorý do 16. 9. 2026 nieslo
   domovské hero, a pre pätičku. */
.masthead__logo .on-dark { display: none; }

.masthead__nav {
  /* Navigácia je viditeľná vždy — na mobile má vlastný riadok (nižšie). */
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  /* tichá navigácia ako v náhľade smeru 2 (dovtedy 15 px / 500): logo vynikne
     mierou okolo seba, nie vlastnou veľkosťou */
  font-size: 0.875rem;
  font-weight: 400;
}
.masthead__nav a { color: var(--teal-700); text-decoration: none; }
.masthead__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Na vlastnej stránke je z odkazu text — musí zostať rovnako čitateľný.
   Na svetlej hlavičke to znamená najtmavší teal, nie bielu. */
.masthead__nav [aria-current] { color: var(--teal-900); }

/* Prepínač jazyka je rozbaľovací panel, nie riadok. Päť kódov vedľa seba sa
   ešte vojde, dvadsať nie — a panel unesie ľubovoľný počet bez zásahu do
   hlavičky. <details> to zvládne bez skriptu, rovnako ako časté otázky;
   skript pridáva len zavretie Escapom a klikom vedľa. */
.langs {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  font-size: 0.8125rem;
  font-weight: 400;
}
.masthead__nav + .langs { margin-inline-start: 0; }

/* Navigácia a jazyky sú v jednom obale, ale na širokej lište o ňom layout
   nevie: display:contents nechá obe navigácie byť priamo prvkami riadka, teda
   presne tak, ako stáli predtým. Obal je tu kvôli mobilu, kde sa z neho stane
   panel. */
.masthead__drawer { display: contents; }

/* Na úzkych displejoch je lišta jeden riadok: logo a „Menu". Navigácia mala
   do 17. 9. 2026 vlastný riadok pod logom a v piatich zo šiestich jazykov sa
   zalomila na dva — lepkavá lišta tým brala 142 px, sedminu displeja, na každej
   stránke. Teraz má 57 px vo všetkých jazykoch a zvyšok je v paneli.

   Bez skriptu panel neexistuje a platí pôvodné riešenie: navigácia vo vlastnom
   riadku. Preto sú tie pravidlá viazané na .js — hlavička musí fungovať aj
   vtedy, keď skript nedobehne. */
@media (max-width: 47.99rem) {
  html:not(.js) .masthead__nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-inline-start: 0;
    padding-top: 0.7rem;
  }
  html:not(.js) .masthead__nav + .langs { margin-inline-start: auto; }

  /* Tlačidlo je jediné, čo sa v lište trafuje palcom, tak má plochu palca:
     odsadenie mu dá 43 px, záporný okraj tých istých 13 px vráti — rastie do
     prázdneho odsadenia lišty, takže lišta ostáva vysoká 59 px. */
  .js .masthead__menu {
    display: flex;
    margin-inline-start: auto;
    padding-block: 0.7rem;
    margin-block: -0.4rem;
    /* Šípka stojí na pravom okraji obsahu ako logo na ľavom: vnútorné odsadenie
       tlačidla (0,5 rem) ide do okraja stránky, nie do riadka. */
    margin-inline-end: -0.5rem;
  }

  /* Panel je tá istá biela karta ako rozbaľovačka jazyka, len siaha po okraje
     obsahu — nesie celú hlavičku, nie jeden ovládač. */
  .js .masthead__drawer {
    display: none;
    position: absolute;
    inset-inline: var(--gutter);
    top: 100%;
    margin-top: 0.5rem;
    padding: 0.35rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow: var(--lift-2);
  }
  .js .masthead__drawer[data-open] { display: block; }

  /* V paneli sú odkazy ciele, nie riadok textu: každý má vlastný riadok a
     plochu na palec. */
  .js .masthead__drawer .masthead__nav {
    display: grid;
    gap: 0;
    margin: 0;
    font-size: 1rem;
  }
  .js .masthead__drawer .masthead__nav > * {
    padding: 0.7rem 0.65rem;
    border-radius: var(--r-xs);
  }
  .js .masthead__drawer .masthead__nav a:hover {
    background: color-mix(in srgb, var(--teal-500) 10%, transparent);
    text-decoration: none;
  }
  .js .masthead__drawer .masthead__nav [aria-current] {
    font-weight: 500;
    background: color-mix(in srgb, var(--teal-500) 12%, transparent);
  }

  /* Jazyky sú pätka panelu. Rozbaľovačka v rozbaľovačke by bola druhý klik pre
     nič, tak je zoznam rovno vidieť — menovka netreba, jazyky sa volajú samy. */
  .js .masthead__drawer .langs {
    display: block;
    margin: 0.35rem 0 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--rule);
  }
  .js .masthead__drawer .langs__menu summary { display: none; }
  .js .masthead__drawer .langs__menu a,
  .js .masthead__drawer .langs__menu span { padding-block: 0.6rem; }
  .js .masthead__drawer .langs__menu ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

.langs__menu { position: relative; }

/* V lište sú dva ovládače a je to ten istý prvok: meno toho, čo je za ním, a
   šipka, ktorá sa po otvorení otočí. Prepínač jazyka nesie aktuálny jazyk —
   je to jeho hodnota, nie položka zoznamu; jazyky sa pritom píšu tak, ako sa
   volajú samy, lebo pri šiestich sa kód ako „HU" ešte dá uhádnuť, pri
   dvadsiatich už nie. Tlačidlo menu nesie slovo „Menu" a na mobile drží celý
   zvyšok hlavičky. Preto nie hamburger: navigácia aj jazyky sú zoznam cieľov,
   a taký zoznam už na webe jednu podobu má. */
.langs__menu summary,
.masthead__menu {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: 400 0.8125rem/1.6 var(--body);   /* dovtedy 600 — v lište pôsobilo najťažšie */
  color: color-mix(in srgb, var(--teal-700) 82%, var(--paper));
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.langs__menu summary::-webkit-details-marker { display: none; }
.langs__menu summary::after,
.masthead__menu::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--teal-500);
  border-bottom: 2px solid var(--teal-500);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.langs__menu[open] summary::after,
.masthead__menu[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.langs__menu summary:hover,
.masthead__menu:hover {
  background: color-mix(in srgb, var(--teal-500) 10%, transparent);
  color: var(--teal-900);
}

/* Tlačidlo menu je len pre úzke displeje — inde navigácia stojí v lište. */
.masthead__menu { display: none; }

/* Panel je biela karta ako ostatné plávajúce plochy. Strop výšky s vlastným
   scrollom je tu kvôli jazykom, ktoré ešte len pribudnú. */
.langs__menu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 1;
  min-width: 11rem;
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  box-shadow: var(--lift-2);
}
.langs__menu li { margin: 0; }
.langs__menu a,
.langs__menu span {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-xs);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  color: var(--teal-700);
}
.langs__menu a:hover {
  background: color-mix(in srgb, var(--teal-500) 10%, transparent);
  color: var(--teal-900);
}
.langs__menu [aria-current] {
  font-weight: 500;
  color: var(--teal-900);
  background: color-mix(in srgb, var(--teal-500) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .langs__menu summary::after { transition: none; }
}

/* Po odscrollovaní k lište pribudne vlásočnica a tieň — to je jediný rozdiel oproti pokoju.
   Farby loga ani navigácie sa nemenia, takže vyzerá rovnako nad svetlými aj
   nad tmavými pásmi. */
.masthead.is-stuck {
  box-shadow: 0 1px 0 var(--rule), 0 14px 34px -28px rgb(26 24 70 / 0.55);
}

/* --------------------------------------------------- scéna: pes za tmy ---- */

/* Scéna stojí pri troch krokoch, ktoré ovláda — tri tlačidlá pod ňou sú tie
   isté tri kroky v tom istom poradí. Rám nemá: rádius, tieň a linka z nej robili
   predmet položený na stránku. Pás za ňou je ten istý súmrak ako vrch jej oblohy,
   takže bez chrómu je scéna priamo tým priestorom, v ktorom sekcia stojí. Okraje
   drží maska, nie linka. */
.scene {
  position: relative;
  background: none;
  overflow: visible;
}

.scene__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

/* Vrstvy scény sa prepínajú triedou .is-lit / .is-ringing na .scene */
.scene .pool,
.scene .beam,
.scene .grass-lit,
.scene .tracks-lit { opacity: 0; transition: opacity 520ms ease; }
/* Pes je za tmy len tušený — svetlo ho vráti do dohľadu. Na tmavom hero stačilo
   0,07: scéna bola veľká na pol obrazovky. V karte vedľa textu je z toho čierna
   plocha, takže silueta musí byť o stupeň silnejšia — inak sekcia začína
   prázdnym obdĺžnikom a nie psom v tme. */
.scene .dog { opacity: 0.14; transition: opacity 520ms ease; }
.scene .collar-glow { opacity: 0.55; transition: opacity 380ms ease; }

.scene.is-lit .pool { opacity: 1; }
.scene.is-lit .beam { opacity: 0.85; }
.scene.is-lit .dog { opacity: 1; }
.scene.is-lit .grass-lit { opacity: 1; }
/* Stopy na zemi svietia rovnako ako tráva — v tme sú takmer nevidno, čo je
   na stopách v tme správne. Nie sú to dejiny navyše: obojok trasu naozaj vie. */
.scene.is-lit .tracks-lit { opacity: 1; }
.scene.is-lit .collar-glow { opacity: 1; }

.scene .ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.scene.is-ringing .ring { animation: ping 1400ms ease-out forwards; }
.scene.is-ringing .ring--2 { animation-delay: 240ms; }
.scene.is-ringing .ring--3 { animation-delay: 480ms; }

@keyframes ping {
  0%   { opacity: 0.9; transform: scale(0.15); }
  100% { opacity: 0;   transform: scale(1); }
}

/* Poloha na mape. Značka spadne hrotom na obojok a kruh presnosti dýcha —
   poloha sa v živom sledovaní obnovuje, nestojí. */
.scene .fix { opacity: 0; transition: opacity 420ms ease; }
.scene.is-mapped .fix { opacity: 1; }

.scene .fix__pin {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: translateY(-18px) scale(0.86);
  transition: transform 460ms cubic-bezier(0.22, 0.9, 0.28, 1.1);
}
.scene.is-mapped .fix__pin { transform: translateY(0) scale(1); }

.scene .fix__acc { transform-box: fill-box; transform-origin: center; }
.scene.is-mapped .fix__acc { animation: fix-pulse 4200ms ease-in-out infinite; }

@keyframes fix-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.97); }
  50%      { opacity: 1;   transform: scale(1.03); }
}

/* Ovládanie scény má zmysel len s JavaScriptom. */
.scene__bar { display: none; }
/* Lišta nie je spodok karty — karta zmizla. Pás s vlastnou linkou a podkladom
   by scénu znovu orámoval, takže tlačidlá stoja rovno v priestore. */
.js .scene__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.85rem;
}

.scene__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--teal-300) 40%, transparent);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teal-100);
  font: 500 0.9375rem/1.2 var(--body);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.scene__btn:hover { background: color-mix(in srgb, var(--teal-300) 14%, transparent); border-color: var(--teal-300); }
.scene__btn[aria-pressed="true"] {
  background: var(--glow);
  border-color: var(--glow);
  color: #2a1c00;
}
/* Mapa má zapnutý stav chladný. Teplá farba na stránke znamená svetlo obojka
   a nič iné — ani zapnuté tlačidlo. */
.scene__btn[data-act="map"][aria-pressed="true"] {
  background: var(--teal-100);
  border-color: var(--teal-100);
  color: var(--teal-900);
}
.scene__btn .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .scene .pool, .scene .beam, .scene .dog, .scene .tracks-lit,
  .scene .grass-lit, .scene .collar-glow, .scene .fix { transition: none; }
  .scene.is-ringing .ring { animation: none; opacity: 0.5; }
  .scene .fix__pin,
  .scene.is-mapped .fix__pin { transition: none; transform: none; }
  .scene.is-mapped .fix__acc { animation: none; }

  /* Obojok na fotke prestane vysielať, ale signál nezmizne: jeden kruh
     zostane stáť, aby bolo aj bez pohybu vidno, že zo zariadenia niečo ide. */
  .hero__pulse circle { animation: none; opacity: 0; }
  .hero__pulse circle:first-child { opacity: 0.42; transform: scale(0.42); }
}

/* --------------------------------------------------------------- otázky --- */

/* -------------------------------------------------------------- funkcie --- */

/* Funkcie sú zoznam v stĺpci podstránky: ikona, názov a jedna veta pod ním,
   položky delí vzduch. Tvar prvku hovorí, čo prvok robí: tmavá plocha je
   formulár, hárok s linkami sú parametre, zoznam je ikona, nadpis a veta.
   Pätnásť rovnakých bielych kariet s ikonou je najznámejší vzor webu
   z generátora (14. 9. 2026); ako biele kartičky na svetlom bloku sa sem
   vrátili 16. 9. 2026 večer s hravým registrom a v ten istý deň odišli —
   pätnásť bublín a štyri oblúky pod sebou bolo priveľa (Peter). */
.features {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.6rem);
}

.feature { min-width: 0; }
.feature h3 {
  font-size: 1.0625rem;
  color: var(--teal-900);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Veta začína pod názvom, nie pod ikonou. */
.feature p {
  margin-top: 0.3rem;
  padding-left: calc(18px + 0.6rem);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--ink) 76%, var(--white));
}
.feature svg { flex: none; color: var(--teal-500); }

/* ---------------------------------------------------------------- čísla --- */

/* Technické parametre sú hárok: v každom riadku vľavo údaj s menovkou, vpravo
   podmienka, za ktorej platí; riadky delí vlásočnica ako otázky. Do 16. 9. 2026
   stáli údaje v mriežke troch stĺpcov na šírku domovskej, od zjednotenia stĺpca
   podstránok (16. 9. 2026 večer) sedia v tom istom stĺpci ako všetko ostatné.
   V HTML je <dl> mimo .shell, šírku stĺpca mu preto drží toto pravidlo. */
.figures {
  margin: 0 auto;
  width: 100%;
  max-width: var(--shell);
  padding-inline: var(--gutter);
}

.figure {
  display: grid;
  gap: 0.45rem 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.figure:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 34rem) {
  .figure { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: start; }
}
.figure dt, .figure dd { margin: 0; min-width: 0; }
.figure__value,
.tariff__value {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--teal-900);
  font-variant-numeric: tabular-nums;
}
/* V riadku hárku je číslo o stupeň menšie než v bývalej mriežke: musí sa
   vojsť do ľavého stĺpca aj „930 mAh · do 40 g“. */
.figure__value { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem); letter-spacing: -0.015em; }
.figure__label,
.tariff__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.figure__label { margin-top: 0.35rem; }
/* Podmienka nie je poznámka pod čiarou — je súčasťou údaja, preto stojí
   v tom istom riadku vedľa čísla. Vlastnú linku už nemá: riadok ju nesie. */
.figure__cond {
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 74%, var(--fog));
}
@media (min-width: 34rem) { .figure__cond { padding-top: 0.2rem; } }

/* --------------------------------------------------------- podstránka --- */
/* Každá podstránka je jedna šablóna a jeden stĺpec: Funkcie, Náš príbeh,
   Články, jednotlivé články aj Časté otázky majú rovnako široký hlavný stĺpec
   (40 rem) a nič z neho nevystupuje (16. 9. 2026 večer, Peter). Do toho dňa
   mali Funkcie a Články cez `.page--wide` šírku domovskej a parametre šli mimo
   shellu na celú šírku obrazovky. Líši sa len to, čo v stĺpci stojí — list,
   zoznam otázok, zoznam funkcií, hárok parametrov alebo riadky článkov.
   Šírku nesie --shell, .shell si ju zdedí a gutter zostane spoločný so zvyškom
   webu. Širší je len shell domovskej. */

.page {
  --shell: 40rem;
  /* Rovnaký odstup zhora ako svetlé hero. Hlavička je nad listom lišta —
     priehľadná je len nad tmavým hero na domovskej, kde má s čím splynúť. */
  /* hikes: hlavička na Hmle a záver v Noci idú cez celú šírku (kapitola „podstránky
     hikes“ nižšie), obsah stojí na bielej. */
  padding-block: 0;
  background: var(--white);
}

/* Nadpis stránky. Pod ním je vždy rovnaký odstup — či nasleduje list, alebo
   zoznam otázok. */
.page__head { margin-bottom: clamp(1.6rem, 3vw, 2.25rem); }

.page h1 {
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.85rem);
  color: var(--teal-900);
}
.page h1 em { font-style: italic; color: inherit; }

/* Záver podstránky. Nedelí ho iný podklad ako sekcie na domovskej — na jednom
   stĺpci to robí linka. Čo v ňom stojí, si nesie vlastný blok. */
.page__end {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- list --- */
/* Náš príbeh je list, nie sekcie. Preto tu nie je ani jeden pás, medzititulok
   ani karta: čokoľvek by text rozsekalo, ubralo by mu na úprimnosti. Ostáva
   stĺpec podstránky, odseky a na konci podpis s jedinou fotkou na stránke. */

/* Odseky si nesú vlastný odstup — globálne p { margin: 0 } drží mriežku
   všade inde. Písmo je text webu (16 px / 1,6); do 25. 9. 2026 bolo o stupeň
   väčšie, 19 px. Odstup odsekov je rovnaký ako v článku. */
.letter__body {
  display: grid;
  gap: 1.1rem;
}

/* Podpis. Fotka nestojí v texte, ale až pri mene — je jediná na stránke
   a patrí k tomu, kto list píše, nie k niektorému odseku. Odstup a linku nad
   ním nesie .page__end, rovnako ako pri otázkach. */
.letter__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.25rem, 4vw, 2.25rem);
}

.letter__photo {
  flex: none;
  width: clamp(10.5rem, 45vw, 12.5rem);
  margin: 0;
}
.letter__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--teal-300) 20%, transparent);
}

.letter__name { padding-bottom: 0.4rem; }
/* Meno nesie kurzíva serifu. Písankový font by z podpisu spravil klipart. */
.letter__name strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal-700);
}
.letter__name > span {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--ink) 66%, var(--paper));
}

/* ---------------------------------------------------------- časté otázky -- */
/* <details> zvláda zbalenie natívne — bez JS, s klávesnicou a s vyhľadávaním
   v stránke. Preto sem nepribudol žiadny skript. */

.faq { display: grid; gap: 0; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }

.faq__item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  /* otázka je menší nadpis ako h3 na domovskej: Inter 500, 17 px / 1,35 (smer 2) */
  font: 500 1.0625rem/1.35 var(--body);
  letter-spacing: 0;
  color: var(--teal-700);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--teal-500);
  border-bottom: 2px solid var(--teal-500);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
}
.faq__item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__item summary:hover { color: var(--teal-500); }
.faq__item summary:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.faq__body { padding: 0 0 1.35rem; }
.faq__body p + p { margin-top: 0.7rem; }
.faq__body strong { color: var(--teal-700); }

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}

/* Pozvanie napísať uzatvára otázky tak, ako podpis uzatvára list. Nadpis je
   o stupeň nižšie než h1 stránky — je to záver, nie druhá stránka. */
.faq__ask h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  color: var(--teal-700);
}
.faq__ask p { margin-top: 1rem; }
.faq__ask p:last-child { margin-top: 1.75rem; }

/* Pozvanie do prvej série uzatvára obsah každej podstránky (16. 9. 2026), nie
   pätičku: v otázkach a článkoch stojí v ich záverečnom bloku, vo Funkciách za
   vetou o príručke a pod listom pod podpisom. Domovská ho nemá — jej obsah
   končí samotným formulárom. */
.catalog__end p + p { margin-top: 1.75rem; }
.letter__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* -------------------------------------------------------------- formulár -- */

.promise { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.promise li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9688rem;
}
.promise svg { color: var(--teal-500); margin-top: 0.3rem; }

/* --------------------------------------------------------------- cenník --- */
/* Cena je údaj ako každý v „Technických parametroch": číslo v Inter a pod ním
   menovka, za akých podmienok platí. Pri predplatnom je to dĺžka, na ktorú sa
   platí vopred; celkovú sumu ukáže objednávka (rozhodnutie 11. 9. 2026, proti
   pravidlu z wiki zo 4. 9. 2026). DPH je v nadpise stĺpca, nie v poznámke pod
   cenníkom: číslo a podmienka majú stáť pri sebe.

   Jednorazová kúpa a predplatné sú dve rôzne veci, ktoré sa platia inak, a preto
   sú to dva stĺpce jedného hárku: hrubá tmavá linka hore, nič okolo. Biela karta
   odišla (14. 9. 2026) — kartu mal aj obsah aj formulár a nič sa od ničoho nedalo
   odlíšiť. Ikona v hlavičke stĺpca je z toho istého systému obrysových ikon
   (mriežka 24, ťah 2): obojok pre kúpu, signál pre predplatné, lebo predplatné
   platí práve konektivitu. Obojok nesie veľké číslo v Teal 900, plány predplatného
   sú o stupeň menšie a v Teal 700. Pomer stĺpcov 1 : 2 dáva plánom šírku na tri
   stĺpce a obojku presne toľko, koľko jedno číslo potrebuje — nič neostáva prázdne.
   Pokus bez kariet (len hierarchia písma) sa neosvedčil: štyri čísla na čistom
   podklade sa čítali ako jeden rad a sekcia bola dlhá. */
.tariff {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
@media (min-width: 64rem) {
  .tariff { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.tariff__card {
  border-top: 2px solid var(--teal-900);
  padding: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
}
.tariff__card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--teal-700);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.tariff__card h3 svg { flex: none; color: var(--teal-500); }
.tariff__plans {
  display: grid;
  gap: 1.25rem clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 40rem) { .tariff__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tariff__item { min-width: 0; }
.tariff__plans .tariff__value {
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--teal-700);
}
.tariff__plans .tariff__label { margin-top: 0.35rem; font-size: 0.72rem; }
.tariff__unit {
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--teal-700);
  margin-left: 0.1em;
}

/* Formulár je jediný tmavý predmet na svetlom podklade: nočná farba z hera,
   rohy 4 px, žiadny tieň. Nedá sa pomýliť s obsahom a stránka sa ním uzatvára
   tak, ako sa začala. Polia sú biele, popisky v Mist — to isté, čo nesie text
   na nočnom páse „Pes ušiel". Celý pás nočný nebol: zlial by sa s pätičkou. */
.form {
  background: var(--night);
  color: var(--teal-100);
  border-radius: var(--r-xs);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.form .eyebrow,
.form .field > label,
.form legend,
.form .field__hint { color: var(--teal-300); }
.form .field input[type="text"],
.form .field input[type="email"],
.form .field select {
  background: var(--white);
  border-color: transparent;
}
.form .field input:hover, .form .field select:hover { border-color: var(--teal-300); }
.form .consent { color: var(--teal-100); }
.form .chip {
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border-color: rgb(255 255 255 / 0.22);
  color: var(--teal-100);
}
.form .chip:hover { border-color: var(--teal-300); }
.form .chip:has(input:checked) {
  background: var(--teal-100);
  border-color: var(--teal-100);
  color: var(--teal-900);
}
/* Tlačidlo vo formulári je teplé: na tme je to svetlo obojka, nie ďalší teal. */
.form .btn--primary { background: var(--glow); color: var(--night); box-shadow: none; }
.form .btn--primary:hover { background: var(--glow-soft); box-shadow: none; }
.form .btn--outline { color: var(--teal-100); border-color: rgb(255 255 255 / 0.28); }
.form .btn--outline:hover {
  border-color: var(--teal-300);
  background: color-mix(in srgb, var(--white) 8%, transparent);
}

/* Rok predplatného zdarma — jediné teplé miesto na stránke mimo svetla obojka
   a jediné miesto, kde ponuka zoznamu stojí celá (cena, ktorú zastupuje, aj
   dokedy platí). Nie odznak, nie karta a ani rámček: jeden riadok
   v Newsreaderi ako v nadpisoch, pod ním vysvetlenie malým písmom a pod tým
   jedna jemná čiara, ktorá ponuku oddelí od polí formulára. Biela karta
   `.offer` v ľavom stĺpci (14. 9. 2026, ráno) odišla ešte v ten deň: bola tou
   istou kartou, akú mal obsah, a ponuka stála na stránke dvakrát. Dve čiary
   so zaobleným rohom odišli 16. 9. 2026: rádius zakrivil konce čiar, takže
   rámček sa raz strácal a raz bol vidieť (Peter). */
.gift {
  margin: 0 0 1.5rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}
.gift b {
  display: block;
  font: 400 clamp(2rem, 1.5rem + 1.6vw, 2.8rem)/1.05 var(--display);
  letter-spacing: -0.01em;
  color: var(--glow-soft);
}
.gift small {
  display: block;
  margin-top: 0.5rem;
  max-width: 44ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--teal-100);
}

.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__row + .form__row { margin-top: 1.15rem; }

.field { display: grid; gap: 0.4rem; min-width: 0; }
.field > label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.field input[type="text"],
.field input[type="email"],
.field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: 400 1rem/1.4 var(--body);
  color: var(--ink);
  background: var(--fog);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.field select {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a37a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.field input:hover, .field select:hover { border-color: var(--teal-500); }
.field input::placeholder { color: color-mix(in srgb, var(--ink) 48%, var(--white)); }
.field__hint { font-size: 0.8125rem; color: color-mix(in srgb, var(--ink) 64%, var(--white)); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 0.6rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--fog);
  font-size: 0.9063rem;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chip:hover { border-color: var(--teal-500); }
.chip input { accent-color: var(--teal-500); margin: 0; }
.chip:has(input:checked) {
  background: var(--teal-100);
  border-color: var(--teal-500);
  color: var(--teal-900);
  font-weight: 500;
}
.chip:has(input:focus-visible) { outline: 3px solid var(--teal-500); outline-offset: 3px; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 76%, var(--white));
  cursor: pointer;
}
.consent input { accent-color: var(--teal-500); margin-top: 0.25rem; }

.form__submit { margin-top: 1.5rem; width: 100%; }
.form__skip { margin-top: 0.75rem; width: 100%; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* Pole „web“ je pasca na roboty: človek ho nevidí, robot ho vyplní.
   Skrýva sa klipom, nie display:none — na ten sú roboty pripravené. */
.form .hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Privítanie v druhom kroku — e-mail už je uložený, zvyšok je nepovinný. */
.form__welcome { font-size: 1.125rem; color: var(--white); margin-bottom: 0.6rem; }
.form__welcome + p {
  font-size: 0.9375rem;
  color: var(--teal-100);
  margin-bottom: 1.8rem;
}

.field input:user-invalid,
.field select:user-invalid,
[aria-invalid="true"] { border-color: var(--error); }
.consent:has(input:user-invalid) { color: var(--error); }

.form__status { margin-top: 1rem; font-size: 0.9063rem; }
.form__status:empty { margin-top: 0; }
/* Funkčné farby na tme: tie isté odtiene, len zosvetlené, aby držali kontrast. */
.form__status[data-tone="error"] { color: color-mix(in srgb, var(--error) 45%, var(--white)); font-weight: 500; }
.form__status[data-tone="ok"] { color: color-mix(in srgb, var(--success) 40%, var(--white)); }

.done {
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 7%, var(--white));
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.done h3 { font-size: 1.125rem; color: var(--teal-700); margin-bottom: 0.6rem; }
.done p { font-size: 0.9375rem; }
.done p + p { margin-top: 0.7rem; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- pätička -- */

.foot {
  background: var(--noc);
  color: var(--muted-dark);
  border-top: 1px solid rgb(238 240 245 / 0.12);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: max(clamp(3rem, 6vw, 4.5rem), env(safe-area-inset-bottom));
  font-size: 0.9063rem;
}
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: 1.2fr 1fr; } }

/* Kontakt nemá nadpis: prvý riadok je „Kontakt — e-mail", druhý veta.
   Dva riadky proti dvom riadkom popisu vľavo, rovnaké riadkovanie. */
.foot a { color: var(--teal-100); text-decoration-color: color-mix(in srgb, var(--teal-300) 50%, transparent); text-underline-offset: 4px; }
.foot a:hover { text-decoration-color: currentColor; }
/* V pätičke je zostava nad sebou — základná podoba značky; tu má priestor a
   žiadny tlak na veľkosť. Meria sa na ŠÍRKU, nie na výšku, a to zámerne: pri
   danej šírke drží verzálka svoju veľkosť aj po prekreslení symbolu, ktorého
   hrúbka ťahu do pomeru zasahuje. Výšku dopočíta pomer zo súboru.
   Šírka nápisu je od 21. 9. 2026 581,89 jednotky namiesto 557,48 (prestrk +6),
   takže na tých istých 22,6 px verzálky treba 131 px, nie 126.
   Ochranná zóna zostavy je 2 d = 2 × 18,5 % verzálky = 8 px; medzery nižšie
   nechávajú 10 px, teda ju prekrývajú s rezervou. */
.foot__logo {
  width: 112px; height: auto;   /* hikes na Noci: výška x ≈ 24 px */
  display: block;
  margin-bottom: calc(1.25rem + 10px);
}
/* Na desktope stojí popis vedľa zostavy, nie pod ňou: celá pätička je potom
   v jednej rovine — zostava, popis aj nadpis Kontakt začínajú na jednej línii.
   Medzera medzi zostavou a textom drží ochrannú zónu 10 px. */
@media (min-width: 52rem) {
  .foot__grid > div:first-child { display: flex; align-items: flex-start; gap: calc(1.5rem + 10px); }
  .foot__grid > div:first-child .foot__logo { flex: none; margin-bottom: 0; }
  .foot__grid > div:first-child p { margin: 0; }
}
/* ----------------------------------------------------------------- súhlas -- */
/* Lišta je biela doska nad stránkou s lemom hore — rovnaký materiál ako
   hlavička, nie tmavý cudzí pás. Rádius nemá: sedí na hrane okna a netvári sa ako karta.
   Obe tlačidlá sú rovnako veľké, vedľa seba a rovnako ďaleko od textu; plné
   je „Súhlasím" preto, že je to kladná odpoveď, nie preto, aby sa naň kliklo
   omylom. Nad hlavičkou (50) stojí, pod preskočením na obsah (100) ostáva. */

.ck {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: color-mix(in srgb, var(--white) 92%, var(--paper));
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -12px 32px -20px rgb(26 24 70 / 0.35);
  padding-block: 0.9rem;
  padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  font-size: 0.9375rem;
}
.ck__row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ck__text {
  margin: 0; flex: 1 1 22rem;
  color: var(--teal-700); line-height: 1.55;
}
.ck__text a {
  color: var(--teal-900);
  text-underline-offset: 4px; text-decoration-color: var(--rule-strong);
}
.ck__text a:hover { text-decoration-color: currentColor; }
.ck__acts { display: flex; gap: 0.6rem; flex: none; }
/* O stupeň nižšie než tlačidlá stránky: lišta nesmie prekričať prihlášku,
   ktorá pod ňou stojí. */
.ck__btn { padding: 0.68rem 1.35rem; font-size: 0.9375rem; }

@media (max-width: 47.99rem) {
  .ck { font-size: 0.875rem; }
  .ck__row { gap: 0.9rem; }
  .ck__text { flex: 1 1 100%; }
  .ck__acts { width: 100%; }
  .ck__btn { flex: 1; }
}

/* Odkaz na ochranu údajov a tlačidlo, ktorým sa súhlas mení. Tichý riadok
   pod kontaktom — do navigácie to nepatrí. Zmena súhlasu je akcia, nie
   adresa, preto je to tlačidlo, ktoré len vyzerá ako odkaz. */
.foot__legal { margin-top: 1.25rem; }
.foot__legal button {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; color: var(--teal-100);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--teal-300) 50%, transparent);
  text-underline-offset: 4px;
}
.foot__legal button:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- články -- */
/* Články sú tretia podstránka na tej istej šablóne `.page`: rovnaký nábeh
   pod hlavičkou, rovnaký nadpis, na konci rovnaký záverečný blok. Do
   16. 9. 2026 večera mal rozcestník cez `.page--wide` šírku domovskej pre tri
   karty s fotkou vedľa seba; v jednom stĺpci podstránok sú z kariet riadky. */

/* Funkcie a technické parametre sú od 16. 9. 2026 vlastná stránka: katalóg sa
   nečíta medzi dvoma sekciami domovskej, ale keď ho niekto hľadá — a vtedy
   celý, bez tlačidla „zobraziť všetky". Druhá časť stránky začína nadpisom
   o stupeň nižším než h1 v hlavičke: je to druhá kapitola, nie druhá stránka. */
.page__part {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.page__part h2 {
  font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--teal-900);
}

/* Článok v rozcestníku je riadok zoznamu v stĺpci podstránky: fotka vľavo,
   nadpis a veta vpravo, bez boxu; riadky delí vzduch. Fotka je v pomere 4 : 3 —
   všetky fotky článkov sa režú rovnako, aby riadky držali jednu výšku. Celá
   položka je odkaz: pseudo-prvok nadpisu ju pokrýva, takže sa klikne kamkoľvek
   a čítačka číta jeden odkaz. */
.posts {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.25rem);
}

.post {
  position: relative;
  display: grid;
  gap: 0.9rem 1.35rem;
  min-width: 0;
}
@media (min-width: 34rem) {
  .post { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); align-items: start; }
}
.post img {
  display: block;
  width: 100%;
  height: auto;            /* inak drží výšku z atribútu a pomer sa neuplatní */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--mist);
}
.post__body {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.post h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  color: var(--teal-700);
}
.post h2 a { text-decoration: none; color: inherit; }
.post h2 a::after { content: ""; position: absolute; inset: 0; }
.post:hover h2 a { text-decoration: underline; text-underline-offset: 4px; }
.post p { font-size: 0.9375rem; color: color-mix(in srgb, var(--ink) 76%, var(--white)); }

/* --- stránka článku ------------------------------------------------------- */
/* Menovka nad nadpisom je cesta späť na rozcestník. */
.eyebrow a { text-decoration: none; color: inherit; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Úvodná fotka stojí pod nadpisom a nad textom, v tom istom pomere ako na
   karte rozcestníka. Rádius a podklad má ako každá fotka na webe. */
.article__cover { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.article__cover img,
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--teal-300) 20%, transparent);
}

/* Úvodný odsek je od 25. 9. 2026 text webu ako zvyšok článku (predtým 21 px / 500);
   od tela ho delí len odstup. */
.article__lede {
  color: var(--teal-700);
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

/* Telo článku. Odseky si nesú odstup ako v liste; písmo je text webu (16 px / 1,6),
   do 25. 9. 2026 bolo o stupeň väčšie. */
.article__body > * + * { margin-top: 1.1rem; }
.article__body h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.9rem);
  color: var(--teal-700);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.article__body h3 {
  font-size: 1.0625rem;
  color: var(--teal-700);
  margin-top: 1.75rem;
}
.article__body strong { color: var(--teal-700); }
.article__body ul,
.article__body ol {
  margin: 1.1rem 0 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.55rem;
}
.article__body li::marker { color: var(--teal-500); font-weight: 500; }
.article__body li > ul { margin-top: 0.55rem; }
.article__figure { margin: clamp(2rem, 4vw, 2.75rem) 0; }
.article__figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--ink) 66%, var(--paper));
}

/* Tabuľka porovnania. Riadky delí vlásočnica ako údaje v Technických
   parametroch; na úzkej obrazovke sa posúva vo vlastnom ráme, stránka nie. */
.article__table { overflow-x: auto; margin-top: 1.4rem; }
.article__table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.article__table th,
.article__table td {
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.article__table thead th {
  border-top: 0;
  padding-top: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.article__table tbody th { font-weight: 500; color: var(--teal-700); }

/* Záverečná sekcia o produkte je v článku oddelená podkladom: text nad ňou
   platí aj bez nej. Chladná mist je ten istý podklad, aký má cenník. */
.article__ours {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--mist);
  border-radius: var(--r-lg);
}
.article__ours > h2 { margin-top: 0; }

/* Koniec článku: ďalšie články a pozvanie do prvej série. */
.article__next h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  color: var(--teal-700);
}
.article__next ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.article__next li a {
  color: var(--teal-700);
  font-weight: 500;
  text-decoration-color: color-mix(in srgb, var(--teal-500) 45%, transparent);
  text-underline-offset: 4px;
}
.article__next li a:hover { text-decoration-color: currentColor; }
.article__next p:last-child { margin-top: 1.75rem; }

/* ------------------------------------------------------- domovská hikes -- */
/* Od 25. 9. 2026 (premenovanie na hikes). Vzhľad z makety
   https://claude.ai/artifact/Gr8RUjeutxtfwedNA5Spvj (v15) po Petrových kolách:
   - štyri celky, nie striedavé pásy: hero na Hmle → biely stred cez celú šírku →
     Zdravie na Hmle → tmavý záver v Noci (cena, prihláška a pätička);
   - texty sú doslova z predošlej domovskej, žiadne štítky nad nadpismi; jediné, čo
     pribudlo, je odkaz na článok „Ušiel mi pes“ pod krokmi;
   - každý veľký nadpis má jedno slovo kurzívou (kladné: „slobody“, nie „strachu“);
   - „Pes ušiel“ sú tri zábery nočnej scény nad krokmi, nie interaktívna scéna;
   - fotky len tam, kde niečo nesú: retríver so zariadením v hero, žltý pes pod
     kartičkami appky, render zariadenia pri cene.
   Pohyb nesie obraz a produkt, nie odseky; pri „obmedziť pohyb“ a bez podpory
   scroll-driven animácií je stránka hotová a statická. */
.home h1, .home h2 { margin: 0; font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: var(--ink); text-wrap: balance; }
.home h1 { font-size: clamp(2.5rem, 1rem + 4vw, 4.9rem); }
.home h2 { font-size: clamp(2.1rem, 1.1rem + 3vw, 3.9rem); }
.home h3 { margin: 0; font: 500 1.0625rem/1.35 var(--body); letter-spacing: 0; color: var(--ink); }
.home p { margin: 0; }
.home .lede { max-width: 32em; font-size: 1rem; line-height: 1.6; color: var(--muted); }

/* tichý odkaz: druhá výzva vedľa tlačidla a odkaz na článok */
.link-line { color: var(--ink); font: 500 0.90625rem/1.2 var(--body); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.link-line:hover { border-color: currentColor; }

/* --- hero -------------------------------------------------------------------
   Bez rámu (4 : 5 „orezaný nevyzerá dobre“): rozmazané hrebene za súmraku (Unsplash,
   Justin Zhu, Hokkaidó; od 25. 9. 2026 namiesto teplej pláže, ktorá k fialovej a Hmle
   hikes neladila; bez pásu stromov, ktorý robil v rohu šedohnedú šmuhu) cez celú šírku
   pod závojom Hmly — pod textom 86 %, pod psom 28 %, dolu sa rozpustí do stránky. Retríver so zariadením stojí celý vpravo, okolo neho štyri štítky na
   polohách z predošlého hero a signál z obojka. Výška 480–620 px („trošku zmenši“). */
.home-hero { position: relative; isolation: isolate; overflow: clip; }
.home-hero__bg { position: absolute; inset: 0; z-index: -2; }
.home-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: blur(6px) saturate(0.95); transform: scale(1.06); }
/* Prvá vrstva závoja rozpustí hrebene hore do Hmly lišty, aby hlavička a hero boli
   jedna plocha bez hrany; druhá ich rozpustí dolu do stránky. */
.home-hero__bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--hmla) 0, color-mix(in srgb, var(--hmla) 0%, transparent) 110px),
    linear-gradient(180deg, transparent 72%, var(--hmla) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--hmla) 86%, transparent) 0 34%, color-mix(in srgb, var(--hmla) 28%, transparent) 100%); }
.home-hero__grid { display: grid; gap: 1rem; min-height: clamp(480px, 42vw, 620px); }
@media (min-width: 52rem) { .home-hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.home-hero__copy { align-self: center; padding-block: clamp(2rem, 5vw, 4rem) 1rem; }
.home-hero h1 { margin-bottom: 1.5rem; max-width: 14ch; }
/* Zlom za čiarkou len na telefóne: nadpis sa tam skladá po vetách. */
.home-hero__br { display: none; }
@media (max-width: 40rem) { .home-hero__br { display: inline; } }
/* .home-hero, nie samotná trieda: `.home p { margin: 0 }` má väčšiu váhu a veta by ležala na tlačidle */
/* Tri hlasy ako v náhľade smeru 2 (Peter 25. 9. 2026, vrstva A): veľký serif, malé verzálky,
   text Inter 400 tlmený. Nikde tučné — dôraz vety nesie tmavšia farba, nie hrúbka. */
.home-hero .home-hero__sub { max-width: 34em; margin-bottom: 2rem; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.home-hero__sub strong { font-weight: 400; color: var(--ink); }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.home-hero__stage { position: relative; display: grid; align-items: end; justify-items: center; min-height: 380px; }
.home-hero__art { position: relative; margin: 0 0 2%; height: min(92%, 570px); max-height: 570px; aspect-ratio: 639 / 1100; align-self: end; }
@media (max-width: 51.99rem) { .home-hero__art { height: 380px; } }
.home-hero__art img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 26px rgb(26 24 70 / 0.24)); }
.home-hero__art::before { content: ""; position: absolute; left: 50%; bottom: -2%; z-index: -1; width: 84%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(26 24 70 / 0.34), transparent); }
/* Signál z obojka: viewBox je rozmer výrezu, stred je poloha zariadenia na krku. */
.home-hero__pulse { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.home-hero__pulse circle {
  fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: home-pulse 3.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.home-hero__pulse circle:nth-child(2) { animation-delay: 1.2s; }
.home-hero__pulse circle:nth-child(3) { animation-delay: 2.4s; }
@keyframes home-pulse {
  0%   { transform: scale(0.06); opacity: 0.9; }
  70%  { opacity: 0.22; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .home-hero__pulse circle { animation: none; opacity: 0; } .home-hero__pulse circle:first-child { opacity: 0.35; transform: scale(0.5); } }
.home-tag { position: absolute; z-index: 2; padding: 0.5rem 0.65rem; border-radius: var(--r-sm); background: rgb(255 255 255 / 0.84); color: var(--ink); font: 500 0.6875rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.home-tag:nth-of-type(1) { right: 78%; top: 3%; }
.home-tag:nth-of-type(2) { left: 88%; top: 26%; }
.home-tag:nth-of-type(3) { right: 84%; top: 58%; }
.home-tag:nth-of-type(4) { left: 82%; top: 70%; }
/* Telefón: text stojí nad psom, nie vedľa neho — závoj ide zhora nadol (pod textom 86 %,
   pod psom 30 %), inak by za nadpisom ostal tmavý pás hôr. Štítky sedia na okrajoch
   obsahu: ľavé od ľavého, pravé k pravému, ako text nad nimi. Pes má na telefóne
   380 px výšky, teda 380 × 639 / 1100 px šírky, a stojí v strede javiska (100cqw);
   na tablete štítky od psa neodídu ďalej než 6 rem. */
@media (max-width: 51.99rem) {
  .home-hero__bg::after {
    background:
      linear-gradient(180deg, var(--hmla) 0, color-mix(in srgb, var(--hmla) 0%, transparent) 90px),
      linear-gradient(180deg,
        color-mix(in srgb, var(--hmla) 86%, transparent) 0 44%,
        color-mix(in srgb, var(--hmla) 30%, transparent) 64%,
        color-mix(in srgb, var(--hmla) 30%, transparent) 84%,
        var(--hmla) 100%);
  }
  .home-hero__stage { container-type: inline-size; }
  .home-tag { --edge: max(-6rem, (380px * 639 / 1100 - 100cqw) / 2); }
  .home-tag:nth-of-type(odd) { left: var(--edge); right: auto; }
  .home-tag:nth-of-type(even) { right: var(--edge); left: auto; }
}

/* --- biely stred: funkcie ----------------------------------------------------
   Jedna biela plocha cez celú šírku (Peter: „biele plochy nechaj cez celú šírku“)
   so slideboardom. Veľká veta „GPS obojok, ktorý ti povie…“ odišla 25. 9. 2026, jej
   lede stojí pod nadpisom slideboardu. */
.home-sheet { background: var(--white); }
.home-sheet__in { display: grid; gap: clamp(3rem, 6vw, 5rem); padding-block: clamp(3rem, 6vw, 5.5rem); }

/* --- „Pes ušiel“ na Hmle pod Zdravím ------------------------------------------
   Od 25. 9. 2026 (Peter: „Pes ušiel“ pod „O sebe to vieš…“) stojí na tej istej Hmle
   ako Zdravie, oddeľuje ich vlásočnica — nie ďalší pás. Kompaktne (Peter 25. 9. 2026:
   „sprav to kompaktnejšie, na desktop a hlavne aj na mobile“): číslo kroku leží v rohu
   záberu, nie na vlastnom riadku. Telefón: záber ako
   štvorec vľavo, text vedľa, tri kroky na jednu obrazovku. Od 48 rem tri stĺpce so záberom
   16 : 9, od 64 rem odkaz na článok v riadku nadpisu. */
.home-escape { display: grid; gap: 1.5rem; justify-items: start; padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); }
@media (min-width: 64rem) {
  .home-escape { grid-template-columns: 1fr auto; column-gap: 3rem; row-gap: 2rem; }
  .home-escape > .link-line { grid-row: 1; grid-column: 2; align-self: end; align-self: last baseline; }
  .home-steps { grid-column: 1 / -1; }
}
.home-steps { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; gap: 1rem clamp(1.5rem, 3vw, 3rem); }
/* Na telefóne je záber vždy štvorec hore v riadku; text stojí vedľa na strede, a keď
   dlhší preklad prerastie štvorec, pokračuje pod jeho úroveň. */
.home-steps li { --thumb: clamp(6.5rem, 30vw, 9.5rem); display: grid; grid-template-columns: var(--thumb) 1fr; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "frame ." "frame h" "frame p" "frame ."; column-gap: 1rem; row-gap: 0.3rem; }
.home-steps h3 { grid-area: h; }
.home-steps p { grid-area: p; }
@media (min-width: 48rem) {
  .home-steps { grid-template-columns: repeat(3, 1fr); }
  .home-steps li { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "frame" "h" "p"; align-content: start; }
  .home-steps h3 { margin-top: 0.6rem; }
}
/* Tri zábery toho istého príbehu z nočnej scény predošlej domovskej: 1 pes v tme
   a značka na mape, 2 svetlo obojka, 3 zvuk z obojka. Stavy sú triedy scény
   (.is-mapped, .is-lit, .is-ringing) napevno, bez tlačidiel. Scéna má viewBox 4 : 3
   a preserveAspectRatio="xMidYMid slice", takže štvorec aj 16 : 9 orežú prázdnu oblohu,
   trávu a boky okolo obojka (550, 343); značka na mape (hrot 227) ostáva v zábere. */
.home-steps__frame { grid-area: frame; align-self: start; aspect-ratio: 1; border-radius: var(--r-card); overflow: clip; background: #0b0a24; }
@media (min-width: 48rem) { .home-steps__frame { aspect-ratio: 16 / 9; } }
.home-steps__frame .scene__svg { width: 100%; height: 100%; border-radius: 0; }
/* zvuk je vidieť aj bez animácie (náhľad, „obmedziť pohyb“), inak by 3 vyzeral ako 2 */
.home-steps__frame--3 .ring { opacity: 0.35; }
.home-steps__frame--3 .ring--2 { opacity: 0.2; transform: scale(0.72); transform-box: fill-box; transform-origin: center; }
.home-steps__frame--3 .ring--3 { opacity: 0.5; transform: scale(0.45); transform-box: fill-box; transform-origin: center; }
/* Číslo sedí v ľavom dolnom rohu záberu. Na telefóne môže byť oblasť „frame“ vyššia než
   štvorec (dlhý text), preto ho neviaže koniec oblasti, ale výška štvorca: --thumb mínus
   riadok čísla (0,9 em) mínus okraj. */
.home-steps__num { grid-area: frame; align-self: start; justify-self: start; margin: calc(var(--thumb) - 0.9em - 0.55rem) 0 0 0.7rem; font: 300 clamp(1.9rem, 1.5rem + 1vw, 2.4rem)/0.9 var(--display); letter-spacing: -0.02em; color: var(--hmla); pointer-events: none; position: relative; z-index: 1; }
@media (min-width: 48rem) { .home-steps__num { align-self: end; margin: 0 0 0.75rem 0.95rem; } }
.home-steps p { max-width: 34ch; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }

/* --- Zdravie na Hmle: žltý pes a kartičky appky -------------------------------
   Fotka (Unsplash, Yusuf Onuk) je javisko pre kartičky; na širokej obrazovke
   kartičky presahujú fotku a plávajú inou rýchlosťou (--drift číta aj site.js
   pre prehliadače bez scroll-driven animácií). */
.home-health { padding-block: clamp(3rem, 6vw, 5.5rem); }
.home-health__grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 52rem) { .home-health__grid { grid-template-columns: 1fr 1fr; } }
.home-health__copy { display: grid; gap: 1.5rem; justify-items: start; }
.home-health__note { max-width: 44ch; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.home-health__note strong { color: var(--ink); font-weight: 400; }
.home-health__stage { position: relative; }
.home-health__foto { margin: 0; }
.home-health__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
/* Kartička je karta zámerne: ukazuje rozhranie, teda predmet, nie obsah stránky. */
.home-card { background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.35rem 1.4rem 1.2rem; box-shadow: 0 24px 48px -28px rgb(26 24 70 / 0.35); }
.home-card small { display: block; margin-bottom: 0.6rem; font: 500 0.6875rem/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* hodnota v kartičke je veľké slovo serifom 300, ako „74 min“ v náhľade smeru 2 */
.home-card b { display: block; font: 300 1.85rem/1.02 var(--display); letter-spacing: -0.02em; }
.home-card span { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--muted); }
.home-card svg { display: block; width: 100%; height: 40px; margin-top: 0.9rem; }
@media (min-width: 52rem) {
  .home-health__stage { margin-inline: 12% 4%; }
  .home-card { position: absolute; width: min(250px, 60%); }
  .home-card--1 { left: -22%; top: 9%; --drift: 2.25rem; }
  .home-card--2 { right: -12%; top: 40%; --drift: 4rem; }
  .home-card--3 { left: -16%; bottom: 7%; --drift: 1.25rem; }
}
/* Na telefóne je kartička široká ako stĺpec; graf ide od okraja po okraj textu nad ním
   (pri pevnej výške 40 px by sa zmenšil a ostal visieť v strede). Fotka žltého psa
   tu nie je (Peter, 25. 9. 2026: na malom zariadení nemá hodnotu) a poznámka
   „Nehovoríme ti, či je pes chorý…“ ide až pod poslednú kartičku (Tep a dych
   v pokoji): text stĺpca sa rozpustí do mriežky a poznámka dostane poradie za
   kartičkami. Rozostupy ostávajú: 1,5 rem v texte, 3 rem pred kartičkami. */
@media (max-width: 51.99rem) {
  .home-health__grid { gap: 1.5rem; }
  .home-health__copy { display: contents; }
  .home-health__copy .btn { justify-self: start; }
  .home-health__note { order: 1; }
  .home-health__foto { display: none; }
  .home-health__stage { display: grid; gap: 1rem; margin-top: 1.5rem; }
  .home-card svg { height: auto; aspect-ratio: 200 / 44; }
}

/* --- tmavý záver: cena, prihláška (a za nimi tmavá pätička) --------------------
   Jeden súvislý celok v Noci (Peter: „volím modrú na Cena a prihláška“). Teplá je
   v ňom len ponuka pre prvých a odoslanie prihlášky — svetlo obojka. Formulár je
   o stupeň svetlejší predmet, aby sa nezlial s obsahom. */
.home-finale { background: var(--noc); color: var(--on-dark); }
.home-finale h2 { color: var(--on-dark); }
.home-price { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem); }
.home-price__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .home-price__grid { grid-template-columns: 1fr 1fr; } }
.home-price__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(1rem, 3vw, 3rem); max-width: 40rem; margin: 2.5rem 0; }
.home-price__k { margin-bottom: 0.6rem !important; font: 500 0.6875rem/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); }
/* veľké čísla na webe: Noto Serif Display 300, −0,02 em */
/* Číslo sa nezalamuje („2 290 Ft-/tól“); keď sa jednotka nevojde vedľa, spadne pod číslo
   a začína na tom istom okraji — flex, nie odsadenie medzerou. */
.home-price__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.3em; white-space: nowrap; font: 300 clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem)/1 var(--display); letter-spacing: -0.02em; color: var(--on-dark); font-variant-numeric: lining-nums; }
.home-price__v span { font: 400 0.875rem/1 var(--body); letter-spacing: 0; color: var(--muted-dark); }
/* Na telefóne dva stĺpce cien znamenajú 160 px na číslo aj zoznam — stoja pod sebou. */
@media (max-width: 29.99rem) { .home-price__cols { grid-template-columns: 1fr; gap: 2rem; } }
.home-price__d { margin-top: 0.8rem !important; font-size: 0.9375rem; line-height: 1.5; color: var(--muted-dark); }
.home-price__list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.home-price__list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; color: var(--on-dark); }
.home-price__list svg { flex: none; margin-top: 0.2em; color: var(--muted-dark); }
.home-price__tag { background: var(--glow); color: var(--noc); }
.home-price__tag:hover { background: var(--glow-soft); }
.home-price__tag:focus-visible { outline: 3px solid var(--glow-soft); outline-offset: 3px; }
.home-price__fig { margin: 0; }
.home-price__art { position: relative; }
.home-price__art::before { content: ""; position: absolute; left: 50%; bottom: 6%; width: 64%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent); }
.home-price__art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 36px rgb(0 0 0 / 0.45));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
/* Signál zo stopy svetlovodu: viewBox = rozmer renderu (2600 × 1580), stred x = 1114, y = 316. */
.home-price__art .home-hero__pulse circle { stroke: var(--brand-dark); }
.home-price__caption { margin-top: 0.5rem !important; font-size: 0.8125rem; color: var(--muted-dark); text-align: right; }
/* pod textom (jeden stĺpec) drží popis ľavý okraj ako všetko nad ním */
@media (max-width: 61.99rem) { .home-price__caption { text-align: left; } }
.home-signup { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.home-signup__grid { position: relative; display: grid; gap: 3rem; align-items: start; padding-top: clamp(3rem, 6vw, 5.5rem); }
.home-signup__grid::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgb(238 240 245 / 0.14); }
@media (min-width: 62rem) { .home-signup__grid { grid-template-columns: 1fr 1fr; } }
.home-signup .lede { margin-top: 1.25rem; color: var(--muted-dark); }
.home-signup .promise li { color: var(--on-dark); }
.home-signup .promise svg { color: var(--muted-dark); }
.home-signup .form { background: #28265e; border-radius: var(--r-card); }
.home-signup .form .btn--primary { background: var(--glow); color: var(--noc); }
.home-signup .form .btn--primary:hover { background: var(--glow-soft); }
.home-signup .gift b { font-weight: 300; letter-spacing: -0.02em; color: var(--glow-soft); }

/* --- pohyb ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes home-in { from { opacity: 0; transform: translateY(0.6rem); } }
  .home-hero h1, .home-hero__sub, .home-hero__actions { animation: home-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .home-hero h1 { animation-delay: 100ms; }
  .home-hero__sub { animation-delay: 280ms; }
  .home-hero__actions { animation-delay: 400ms; }
  @keyframes home-kenburns { from { transform: scale(1.06); } to { transform: scale(1.12) translateX(-1.5%); } }
  .home-hero__bg img { animation: home-kenburns 24s ease-in-out infinite alternate; }
  @keyframes home-dog-in { from { opacity: 0; transform: translateY(1.5rem); } }
  .home-hero__art { animation: home-dog-in 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both 160ms; }
  /* zábery krokov: značka pulzuje (zo scény), svetlo dýcha, obojok pípa dookola */
  @keyframes home-glow { 50% { opacity: 0.7; } }
  .home-steps__frame--2 .collar-glow, .home-steps__frame--2 .beam { animation: home-glow 3.2s ease-in-out infinite; }
  .home-steps__frame--3.scene.is-ringing .ring { animation: ping 2600ms ease-out infinite; }
  .home-steps__frame--3.scene.is-ringing .ring--2 { animation-delay: 430ms; }
  .home-steps__frame--3.scene.is-ringing .ring--3 { animation-delay: 860ms; }
  /* overflow: clip, nie hidden, na sekciách s pohybom — hidden robí zo sekcie posuvný
     kontajner a animácia viazaná na scroll by sa prichytila k nemu namiesto stránky. */
  @supports (animation-timeline: view()) {
    @keyframes home-rise { from { opacity: 0.15; transform: translateY(1.2rem); } }
    .home-rise { animation: home-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes home-reveal { from { clip-path: inset(10% 10% 10% 10%); transform: scale(1.06); } }
    .home-reveal { animation: home-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes home-float-a { from { transform: translateY(3.5rem); } to { transform: translateY(-2rem); } }
    @keyframes home-float-b { from { transform: translateY(6rem); } to { transform: translateY(-3.5rem); } }
    .home-card--1, .home-card--3 { animation: home-float-a linear both; animation-timeline: view(); }
    .home-card--2 { animation: home-float-b linear both; animation-timeline: view(); }
    @keyframes home-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .home-card polyline, .home-card path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: home-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes home-device { from { transform: translateY(3rem) rotate(-5deg); opacity: 0.4; } }
    .home-price__art { animation: home-device linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@media (max-width: 51.99rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { .home-card--1, .home-card--2, .home-card--3 { animation: none; } }
}

/* ----------------------------------------------------- podstránky hikes -- */
/* Od 25. 9. 2026 idú podstránky rytmom domovskej, aby web nebol dva weby:
   hlavička na Hmle s rozmazanými hrebeňmi cez celú šírku (ako hero), obsah na bielej,
   tmavý záver v Noci a hneď za ním tmavá pätička. Stĺpec obsahu ostáva 40 rem
   (Peter, 16. 9. 2026); hlavička a záver ho presahujú na celú šírku obrazovky
   (okraj 50 % − 50vw) a ich obsah stojí späť v tom istom stĺpci (padding 50vw − 50 %).
   Bloky s rádiusom, hĺbkou a súmrakom v bokehu odišli; tlačidlá sú ploché, fotky
   majú rádius 2 px bez tieňa. Obsah podstránok (list, článok, otázky, funkcie,
   parametre) sa nemení. Vrstvu s fotkou vkladá HTML ako prvé dieťa hlavičky
   (<div class="page__foto" aria-hidden="true">). */
.page:not(:has(.page__end)) { padding-bottom: clamp(3rem, 6vw, 5rem); }
.page__head {
  position: relative; isolation: isolate; overflow: clip;
  margin: 0 calc(50% - 50vw) clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(3rem, 7vw, 5.5rem) calc(50vw - 50%) clamp(2.5rem, 5vw, 4rem);
  background: var(--hmla); border-radius: 0; box-shadow: none; text-shadow: none;
}
.page__head > * { position: relative; z-index: 1; }
.page__head .eyebrow { margin-bottom: 1rem; }
.page h1 {
  position: relative; z-index: 1;
  font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem);
  font-weight: 300; letter-spacing: -0.025em; line-height: 1.02;
  color: var(--ink); text-wrap: balance;
}
.page h2 { font-weight: 300; letter-spacing: -0.02em; }

/* Hrebene za hlavičkou: tá istá fotka ako v hero, celoplošná, rozmazaná, pod závojom
   Hmly (72 → 82 %), aby text držal kontrast. Hlavička je nízka a široká, z fotky ukáže
   pás okolo 38 % výšky: najvyšší hrebeň proti fialovej oblohe, ako za psom v hero.
   Pri 72 % (nastavenie z čias pláže) by ukázala len rovnomerné modré vrstvy a pod závojom sivú. */
.page__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.page__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  filter: blur(6px) saturate(0.95); transform: scale(1.06);
}
.page__foto::after {
  content: ""; position: absolute; inset: 0;
  /* hore sa hrebene rozpustia do Hmly lišty — hlavička podstránky a lišta sú jedna plocha */
  background:
    linear-gradient(180deg, var(--hmla) 0, color-mix(in srgb, var(--hmla) 0%, transparent) 90px),
    linear-gradient(180deg, color-mix(in srgb, var(--hmla) 72%, transparent), color-mix(in srgb, var(--hmla) 82%, transparent));
}
/* Záver je plochá Noc ako na domovskej — súmrak v bokehu tam už nie je. */
.page__end .page__foto--dusk { display: none; }

/* hlavička Funkcií nesie render krytu vpravo; render stojí ako predmet nad fotkou */
.page__head--render { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 40rem) { .page__head--render { grid-template-columns: minmax(0, 1fr) auto; } }
.page__head--render figure { margin: 0; justify-self: end; position: relative; }
.page__head--render figure::before {
  content: ""; position: absolute; left: 50%; bottom: -6%; width: 78%; height: 14%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(26 24 70 / 0.3), transparent); z-index: 0;
}
.page__head--render figure img { position: relative; z-index: 1; display: block; width: clamp(140px, 28vw, 190px); height: auto; transform: rotate(-8deg); filter: drop-shadow(0 20px 30px rgb(26 24 70 / 0.28)); }

/* Záver stránky: plochá Noc cez celú šírku, hneď za ňou tmavá pätička. Jediné teplé
   je tlačidlo — na tme svetlo obojka, ako na domovskej pri prihláške. */
.page__end {
  position: relative; isolation: isolate;
  margin: clamp(3rem, 6vw, 5rem) calc(50% - 50vw) 0;
  padding: clamp(3rem, 6vw, 5rem) calc(50vw - 50%);
  background: var(--noc); color: var(--on-dark);
  border: 0; border-radius: 0; box-shadow: none;
}
.page__end > * { position: relative; z-index: 1; }
.page__end h2, .faq__ask h2, .article__next h2 { color: var(--on-dark); }
.page__end p { color: var(--muted-dark); }
.page__end a:not(.btn) { color: var(--on-dark); text-decoration-color: rgb(238 240 245 / 0.35); text-underline-offset: 4px; }
.page__end a:not(.btn):hover { text-decoration-color: currentColor; }
.article__next li a { color: var(--on-dark); }
.page__end :where(a, button):focus-visible { outline-color: var(--glow-soft); }
.letter__sign { align-items: center; }
.letter__name strong { color: var(--on-dark); }
.letter__name > span { color: var(--brand-dark); }
/* pozvanie je tretia položka flexu podpisu: cez celú šírku, pod fotkou a menom */
.letter__cta { flex-basis: 100%; margin: clamp(1rem, 2vw, 1.5rem) 0 0; }

/* tlačidlá na podstránkach: ploché; na tmavom závere teplé */
.page .btn--primary { background: var(--brand); color: var(--white); box-shadow: none; }
.page .btn--primary:hover { background: var(--brand-hover); }
.page__end .btn--primary { background: var(--glow); color: var(--noc); }
.page__end .btn--primary:hover { background: var(--glow-soft); }
.page .btn--outline { background: transparent; border-color: var(--rule-strong); color: var(--ink); box-shadow: none; }
.page .btn--outline:hover { border-color: var(--ink); background: transparent; }
.page__end .btn--outline { border-color: rgb(238 240 245 / 0.3); color: var(--on-dark); }

/* fotky ako v náhľade smeru 2: rádius 2 px, bez tieňa */
.article__cover img, .article__figure img, .letter__photo img, .post img { border-radius: 2px; box-shadow: none; }
/* box „Ako to vyzerá s hikes“ v článku: Hmla na bielej, kartička 8 px */
.article__ours { background: var(--hmla); border-radius: var(--r-card); box-shadow: none; }
.faq__item:first-child { border-top: 0; }

/* ------------------------------------------------ slideboard na domovskej -- */
/* Peter 25. 9. 2026: „Zoznam funkcií dáva príležitosť na obrázkový slideboard,
   ktorý nám chýba… Myslel som to ako blok na homepage s preklikom na Všetky
   funkcie.“ a potom „uprav dizajn, aby bol modernejší, viac pripomínal Ultrahuman
   alebo Oura prístup“. Otvára biely stred (lede pod nadpisom je bývalá veta pod
   „GPS obojok, ktorý ti povie…“), od „Pes ušiel“ ho delí vlásočnica.

   Karta je fotka cez celú plochu s rohmi 2 px ako ostatné fotky webu. Do 25. 9. 2026
   mala 20 px podľa kariet Oura a Ultrahuman; pri zosúladení s náhľadom smeru 2 Peter
   súhlasil s hranatými rohmi a chcel zachovať ikony. Názov stojí bielou (serif 300)
   priamo na fotke nad tmavým prechodom zdola,
   ikona je v sklenenom krúžku vľavo hore (backdrop-filter; bez neho polopriehľadná
   Noc — tmavé sklo, lebo biele sa na svetlej oblohe stratí). Šípky sú hranaté (3 px)
   na Hmle, pod pásom tenký pruh, ktorý ukazuje, koľko pásu je vidieť a kde sa
   práve stojí, a vedľa neho preklik na stránku Funkcie.

   Pás vybieha zo shellu na celú šírku obrazovky, prvý slide ale stojí na ľavej osi
   textu a ďalšie presahujú doprava — že sa dá posúvať, ukáže obraz sám. Odsadenie
   --bleed je vzdialenosť osi od okraja obrazovky; nepíše sa ako 50vw − 50 %, lebo
   scroll-padding berie percentá zo šírky pásu, nie shellu, a snap by prvý slide
   pritiahol k okraju obrazovky. Posúva sa prstom, trackpadom, klávesnicou (pás je
   fokusovateľný) a od 40 rem aj šípkami. Šípky, pruh a unášanie pridáva skript —
   bez neho nie sú a pás sa posúva natívne. Unášanie: pás ide doľava so scrollom
   stránky (Peter, 25. 9. 2026); vtedy nesmie mať snap, ten by ho v každom snímku
   ťahal na najbližší slide (.is-drift). */
.home-slides { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.home-slides__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
}
.home-slides__title { display: grid; gap: 1.25rem; }
/* Veta pod nadpisom stojí v jednom riadku, kým sa vedľa šípok zmestí (Peter,
   25. 9. 2026: nezalamovať); inak sa láme bez osamoteného slova na konci. */
.home-slides__title .lede { max-width: none; text-wrap: pretty; }
.slides__nav { display: none; gap: 0.625rem; flex: none; }
@media (min-width: 40rem) { .js .slides__nav { display: flex; } }
.slides__btn {
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: var(--hmla); color: var(--ink); cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.slides__btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.slides__btn:disabled { opacity: 0.35; cursor: default; }
.slides__btn:focus-visible { outline-offset: 2px; border-radius: var(--r-sm); }

.slides__track {
  --bleed: calc(max(0px, (100vw - var(--shell)) / 2) + var(--gutter));
  --gap: clamp(0.75rem, 1.4vw, 1.25rem);
  --vidno: 2.2;
  display: flex; gap: var(--gap);
  margin: 0 calc(50% - 50vw); padding: 0 var(--bleed);
  scroll-padding-inline: var(--bleed);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slides__track.is-drift { scroll-snap-type: none; }
.slides__track::-webkit-scrollbar { display: none; }
.slides__track:focus-visible { outline-offset: -3px; }
/* Na telefóne má karta 78 % šírky, vedľa nej kus ďalšej. Od 40 rem sa do výhľadu
   (od osi textu po pravý okraj obrazovky) vojde vždy --vidno kariet — pevná šírka
   by na niektorej obrazovke skončila presne na okraji a nebolo by vidieť, že ďalej
   niečo je. */
.slide { flex: 0 0 78vw; min-width: 0; scroll-snap-align: start; }
@media (min-width: 40rem) {
  .slide { flex-basis: clamp(15rem, (100vw - var(--bleed) - 3 * var(--gap)) / var(--vidno), 28rem); }
}
@media (min-width: 64rem) { .slides__track { --vidno: 2.8; } }

.slide__img {
  position: relative; isolation: isolate; margin: 0;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 2px; background: var(--noc);
  /* vlásočnica po obvode: svetlá obloha by inak splynula s bielou stránkou */
  outline: 1px solid rgb(28 27 63 / 0.07); outline-offset: -1px;
}
.slide__img img {
  position: absolute; inset: 0; z-index: -2; display: block;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* tmavý prechod zdola nesie biely názov na každej fotke, aj na svetlej pláži */
.slide__img::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(13 11 41 / 0.78) 0%, rgb(13 11 41 / 0.34) 30%, rgb(13 11 41 / 0) 55%);
}
.slide__chip {
  position: absolute; top: 1rem; left: 1rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; color: var(--white);
  background: rgb(26 24 70 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.28);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .slide__chip {
    background: rgb(20 18 52 / 0.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
.home .slide__img h3 {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.15rem;
  margin: 0; color: var(--white);
  /* názov na fotke je serif 300 bielou nad tmavým prechodom, ako nadpis v Stories */
  font: 300 clamp(1.6rem, 1.2rem + 0.9vw, 2.05rem)/1.04 var(--display);
  letter-spacing: -0.02em; text-wrap: balance;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .slide:hover .slide__img img { transform: scale(1.045); }
}

.home-slides__foot {
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
}
.slides__bar {
  display: none; position: relative; flex: 1; height: 2px;
  border-radius: 2px; background: #e6e8ef; overflow: hidden;
}
.js .slides__bar { display: block; }
.slides__bar span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  border-radius: 2px; background: var(--ink);
  transition: left 120ms linear;
}
.home-slides__more {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem 0.7rem 1.25rem; border-radius: var(--r-sm);
  background: var(--hmla); color: var(--ink);
  font: 500 0.90625rem/1.2 var(--body); text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.home-slides__more:hover { background: var(--ink); color: var(--white); }
.home-slides__more svg { transition: transform 200ms ease; }
.home-slides__more:hover svg { transform: translateX(2px); }