/* =========================================================================
   Tifik — web pred spustením
   Od 25. 9. 2026 popoludní značka Tifik (predtým hikes, ešte predtým TIFIPIFI).
   Logo je sada wiki/marketing/logo/tifik/ (wiki/zdroje/2026-09-25-Resers-Logo-TIFIK.md,
   kresba hikes prenesená na slovo tifik). Farby, písmo a celý vzhľad ostávajú
   „vzhľad hikes“: wiki/zdroje/2026-09-24-Resers-Logo-HIKES.md (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 (farby.json zo sady loga, tifik a hikes ju majú zhodnú) ------ */
  --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 */
  --tint:        #dedcf5;   /* svetlý odtieň značky (farby.json) — park na mape v kroku úteku */
  --hmla:        #eef0f5;   /* podklad stránky a lišty — logo stojí na Hmle */
  --noc:         #1a1846;   /* tmavý záver, pätička; Hmla na Noci 14,6 : 1 */
  --noc-2:       #28265e;   /* formulár v tmavom závere: o stupeň svetlejší predmet na Noci */
  --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 */
  --mist:        #e3e4ee;   /* podklad fotky, kým sa načíta; stopa pruhu v slideboarde */
  --white:       #ffffff;

  /* Tie isté farby ako kanály pre priehľadnosť: rgb(var(--noc-rgb) / 0.3). */
  --ink-rgb:  28 27 63;
  --noc-rgb:  26 24 70;
  --hmla-rgb: 238 240 245;
  --deep-rgb: 13 11 41;     /* najhlbšia noc — prechod pod názvom na fotke */

  /* --- Svetlo obojka. Jediná teplá hodnota na stránke: svetlo v kroku „Rozsvietiš
     ho“, ponuka pre prvých a odoslanie prihlášky. K fialovej je takmer doplnková. */
  --glow:      #f7b955;
  --glow-soft: #ffd8a3;

  /* --- 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;

  /* Škála (25. 9. 2026): päť stupňov Interu a štyri serifu. Nová veľkosť písma na
     webe má byť jeden z týchto tokenov, nie ďalšie číslo.
     Inter — štítok verzálkami · popis, nápoveda, drobné · ovládanie (tlačidlá,
     navigácia, voľby) · text · menší nadpis (h3, otázka). */
  --t-label: 0.6875rem;   /* 11 px, vždy 500, verzálky, +0,14 em */
  --t-small: 0.8125rem;   /* 13 px */
  --t-ui:    0.90625rem;  /* 14,5 px, tlačidlá podľa smeru 2 */
  --t-body:  1rem;        /* 16 px / 1,6 — text je na celom webe jeden */
  --t-h3:    1.0625rem;   /* 17 px / 1,35, 500 */
  /* Noto Serif Display 300 — hero · nadpis sekcie a stránky · veľké číslo a menší
     nadpis stránky · nadpis v článku, kartičke a na fotke. */
  --d-xl: clamp(2.5rem, 1rem + 4vw, 4.9rem);
  --d-l:  clamp(2.1rem, 1.1rem + 3vw, 3.9rem);
  --d-m:  clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
  --d-s:  clamp(1.6rem, 1.2rem + 0.9vw, 2.05rem);

  /* --- Priestor ----------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* 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 podľa smeru 2: ovládanie a polia 3 px, fotky 2 px, kartičky appky
     a formulár 8 px. Celky stránky rohy nemajú — sú to plochy cez celú šírku. */
  --r:       3px;
  --r-photo: 2px;
  --r-card:  8px;

  --rule:        rgb(var(--ink-rgb) / 0.11);
  --rule-strong: rgb(var(--ink-rgb) / 0.18);
  --lift-2: 0 2px 4px rgb(var(--noc-rgb) / 0.05), 0 24px 56px -16px rgb(var(--noc-rgb) / 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(--hmla);
  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: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--brand) 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(--brand);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* Na tmavých plochách je obrys fokusu svetlo obojka — fialová by na Noci zanikla. */
:is(.home-finale, .page__end, .foot) :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--glow-soft);
}

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

::selection { background: var(--hmla); color: var(--noc); }

/* ------------------------------------------------------------- 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(--noc);
  color: var(--hmla);
  border-radius: 0 0 var(--r) var(--r);
  text-decoration: none;
  font-weight: 500;
  transition: translate 140ms ease;
}
.skip:focus { translate: -50% 0; }

/* Štítok verzálkami má na celom webe jednu podobu: Inter 500, 11 px, +0,14 em.
   Nesú ho menovky (Poloha, Spánok, Obojok, E-mail…), hárok parametrov, hlavička
   tabuľky, názov kroku vo formulári a cesta späť nad nadpisom článku. Nad nadpismi
   sekcií nestojí (14. 9. 2026): malý label nad veľkým nadpisom je znak šablóny.
   Farbu a odstupy si každé miesto nesie samo. */
.label, .eyebrow, .home-tag, .home-card small, .home-price__k, .figure__label,
.article__table thead th, .field > label, legend {
  font: 500 var(--t-label)/1.3 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow { color: var(--ink); margin: 0 0 1.1rem; }

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

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);
  font: 500 var(--t-ui)/1.2 var(--body);
  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; }

/* Plné tlačidlo je len prihláška (a súhlas v lište cookies): fialové na svetlom,
   jantárové na Noci. Hover mení farbu, nie polohu — poskakovanie tlačidla je
   bootstrapový pohyb. */
.btn--primary {
  background: var(--brand);
  color: var(--white);
}
.btn--primary:hover { background: var(--brand-hover); }

/* Tiché tlačidlo so šípkou: všetko, čo nie je prihláška (Všetky funkcie). Na bielej
   stojí na Hmle, na Hmle na bielej; pri prejdení myšou stmavne. */
.btn--quiet {
  gap: 0.5rem;
  padding: 0.7rem 1.1rem 0.7rem 1.25rem;
  background: var(--hmla);
  color: var(--ink);
}
:is(.home-hero, .home-health, .page__head) .btn--quiet { background: var(--white); }
.btn--quiet:hover { background: var(--ink); color: var(--white); }
.btn--quiet svg { flex: none; transition: transform 200ms ease; }
.btn--quiet:hover svg { transform: translateX(2px); }

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

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

/* Hlavička je na každej stránke rovnaká lišta na Hmle. Na vrchu stránky 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.

   Rozloženie B (Peter 25. 9. 2026, pre tifik, celý web): logo na strednej osi, dve položky
   navigácie vľavo, dve a jazyk vpravo. Kompaktné slovo tifik (2,37 : 1) sedí na osi lepšie
   ako v rohu a os má aj obsah podstránok. Na vrchu stránky je logo 85 × 36 px a lišta 94 px,
   po odscrollovaní sa zbalí na 54 × 23 px a 59 px (logo o 5 % a potom o ďalších 15 % menšie
   ako pri zavedení B, Peter v ten istý deň večer z variantov −10 až −25 %). Zbalená lišta
   si v toku nechá miesto o rozdiel výšok (margin-bottom); padding a margin bežia rovnakou krivkou, súčet stojí,
   takže obsah pod lištou sa pri zbalení nepohne. Bez skriptu sa nezbalí nikdy, preto
   veľký stav platí len s .js. */
.masthead {
  --pad: 0.9rem;
  --pad-stuck: 0.9rem;
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: var(--pad);
  padding-top: max(var(--pad), env(safe-area-inset-top));
  /* plná Hmla, nie priesvitná: nad Nocou by 86 % Hmly zošedlo na #d0d2dc */
  background: var(--hmla);
  transition: box-shadow 200ms ease, padding 280ms ease, margin 280ms ease;
}
.js .masthead { --pad: 2rem; }
.masthead.is-stuck {
  padding-block: var(--pad-stuck);
  padding-top: max(var(--pad-stuck), env(safe-area-inset-top));
  margin-bottom: calc(2 * (var(--pad) - var(--pad-stuck)));
}

.masthead__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
}
/* Logo stojí mimo toku v strede lišty (tá je ako sticky jeho obal — riadok nie, lebo
   od lišty sa meria aj panel menu), riadok drží výšku prepínača jazyka (30,4 px) a logo
   presahuje do paddingu. Pomer strán nesie viewBox súboru, nie CSS. */
.masthead__logo {
  --logo-h: 36px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}
.masthead.is-stuck .masthead__logo,
html:not(.js) .masthead__logo { --logo-h: 23px; }
.masthead__logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
  transition: height 280ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .masthead, .masthead__logo img { transition: none; }
}

.masthead__nav {
  /* Navigácia je viditeľná vždy — na mobile má vlastný riadok (nižšie). Siaha od ľavého
     okraja po jazyk; tretia položka sa odtlačí doprava, takže dve stoja vľavo od loga
     a dve vpravo. */
  display: flex;
  flex: 1;
  gap: 1.75rem;
  /* 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: var(--t-ui);
  font-weight: 400;
}
.masthead__nav > :nth-child(3) { margin-inline-start: auto; }
.masthead__nav a { color: var(--ink); text-decoration: none; }
.masthead__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Na vlastnej stránke je z odkazu text — o odtieň tmavší, nie iná farba. */
.masthead__nav [aria-current] { color: var(--noc); }

/* 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: var(--t-small);
  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 užších displejoch je lišta jeden riadok: logo na stred a „Menu“ vpravo. 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á na vrchu stránky 78 px (logo 64 × 27 px), zbalená 59 px (47 × 20 px)
   vo všetkých jazykoch a zvyšok je v paneli. Hranica je 60 rem, nie 48: navigácia
   rozdelená okolo loga sa pri 960 px zmestí aj po portugalsky (najdlhšie položky).

   Bez skriptu panel neexistuje a platí pôvodné riešenie: logo vľavo a navigácia vo
   vlastnom riadku. Preto sú tie pravidlá viazané na .js — hlavička musí fungovať aj
   vtedy, keď skript nedobehne. Hranicu drží aj site.js (uzke). */
@media (max-width: 59.99rem) {
  .js .masthead { --pad: 1.5rem; }
  .masthead__logo { --logo-h: 27px; }
  .masthead.is-stuck .masthead__logo { --logo-h: 20px; }

  html:not(.js) .masthead__logo { position: static; transform: none; --logo-h: 20px; }
  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 > :nth-child(3) { margin-inline-start: 0; }
  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 výšku lišty určuje len jej odsadenie. */
  .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);
    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: var(--t-body);
  }
  .js .masthead__drawer .masthead__nav > * {
    padding: 0.7rem 0.65rem;
    border-radius: var(--r);
  }
  .js .masthead__drawer .masthead__nav > :nth-child(3) { margin-inline-start: 0; }
  .js .masthead__drawer .masthead__nav a:hover {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    text-decoration: none;
  }
  .js .masthead__drawer .masthead__nav [aria-current] {
    font-weight: 500;
    background: color-mix(in srgb, var(--brand) 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);
  background: none;
  font: 400 var(--t-small)/1.6 var(--body);
  color: color-mix(in srgb, var(--ink) 82%, var(--hmla));
  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(--brand);
  border-bottom: 2px solid var(--brand);
  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(--brand) 10%, transparent);
  color: var(--noc);
}

/* 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);
  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);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}
.langs__menu a:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--noc);
}
.langs__menu [aria-current] {
  font-weight: 500;
  color: var(--noc);
  background: color-mix(in srgb, var(--brand) 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(var(--noc-rgb) / 0.55);
}

/* -------------------------------------------------------------- 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: var(--t-h3);
  color: var(--noc);
  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);
  color: color-mix(in srgb, var(--ink) 76%, var(--white));
}
.feature svg { flex: none; color: var(--brand); }

/* ---------------------------------------------------------------- čí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; }
/* Údaj je veľké číslo webu: Noto Serif Display 300 ako cena na domovskej (25. 9. 2026,
   dovtedy Inter 500). Dlhší údaj („930 mAh · do 40 g“) sa zalomí v ľavom stĺpci. */
.figure__value {
  display: block;
  font: 300 var(--d-s)/1.05 var(--display);
  letter-spacing: -0.02em;
  color: var(--noc);
  font-variant-numeric: lining-nums;
}
.figure__label {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink);
}
/* 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 {
  color: color-mix(in srgb, var(--ink) 74%, var(--hmla));
}
@media (min-width: 34rem) { .figure__cond { padding-top: 0.35rem; } }

/* --------------------------------------------------------- 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,
   Peter 16. 9. 2026). 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 ostane spoločný so zvyškom webu.

   Rytmus je ten istý ako na domovskej (25. 9. 2026): hlavička na Hmle s hrebeňmi
   cez celú šírku, obsah na bielej, tmavý záver v Noci a hneď za ním tmavá pätička.
   Hlavička a záver vybiehajú zo stĺpca na celú šírku obrazovky (okraj 50 % − 50vw)
   a ich obsah vracajú do stĺpca paddingom (50vw − 50 %).

   Os podstránky je stred (Peter 25. 9. 2026, možnosť D): hlavička a záver sú
   centrované, text stojí v stĺpci v strede a ostáva zarovnaný vľavo. Domovská stojí
   na osi loga; podstránka má jednu os, nie dve (nadpis pri logu a text v strede). */
.page {
  --shell: 40rem;
  background: var(--white);
}
.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);
}
.page__head > * { position: relative; z-index: 1; }
.page__head { text-align: center; }
.page__head .eyebrow { margin-bottom: 1rem; }
.page h1 {
  font-size: var(--d-l);
  color: var(--ink);
}
.page__head h1 { margin-inline: auto; max-width: 20ch; }
.page h2 { letter-spacing: -0.02em; }

/* Hrebene za hlavičkou: tá istá fotka ako v hero, rozmazaná, pod závojom Hmly
   (72 → 82 %), aby text držal kontrast. Z fotky ukáže pás okolo 38 % výšky:
   najvyšší hrebeň proti fialovej oblohe, ako za psom v hero. Vrstvu vkladá HTML
   ako prvé dieťa hlavičky (<div class="page__foto" aria-hidden="true">). */
.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));
}

/* hlavička Funkcií nesie render krytu nad nadpisom, na strednej osi */
.page__head--render { display: grid; gap: 1.5rem; justify-items: center; }
.page__head--render figure { margin: 0; position: relative; order: -1; }
.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(var(--noc-rgb) / 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(var(--noc-rgb) / 0.28)); }

/* Záver podstrá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);
}
.page__end > * { position: relative; z-index: 1; }
.page__end { text-align: center; }
.page__end 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(var(--hmla-rgb) / 0.35); text-underline-offset: 4px; }
.page__end a:not(.btn):hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- 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: center;
  justify-content: center;
  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-photo);
  background: color-mix(in srgb, var(--brand-dark) 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: italic 300 var(--d-m)/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
.letter__name > span {
  display: block;
  margin-top: 0.65rem;
  font-size: var(--t-small);
  color: var(--brand-dark);
}

/* ---------------------------------------------------------- č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 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 var(--t-h3)/1.35 var(--body);
  letter-spacing: 0;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  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(--brand); }
.faq__item summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r);
}

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

@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: var(--d-s);
}
.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; }
/* 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; }

/* -------------------------------------------------------------- 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;
}
.promise svg { color: var(--brand); margin-top: 0.3rem; }

/* Formulár je v tmavom závere o stupeň svetlejší predmet (Noc 2, rohy 8 px, bez
   tieňa), aby sa nezlial s obsahom okolo. Polia sú biele, popisky v jemnej fialovej. */
.form {
  background: var(--noc-2);
  color: var(--hmla);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.form .eyebrow,
.form .field > label,
.form legend,
.form .field__hint { color: var(--brand-dark); }
.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(--brand-dark); }
.form .consent { color: var(--hmla); }
.form .chip {
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border-color: rgb(255 255 255 / 0.22);
  color: var(--hmla);
}
.form .chip:hover { border-color: var(--brand-dark); }
.form .chip:has(input:checked) {
  background: var(--hmla);
  border-color: var(--hmla);
  color: var(--noc);
}
/* Na Noci je plné tlačidlo teplé: svetlo obojka, nie ďalšia fialová. */
:is(.home-finale, .page__end) .btn--primary { background: var(--glow); color: var(--noc); }
:is(.home-finale, .page__end) .btn--primary:hover { background: var(--glow-soft); }
.form .btn--outline { color: var(--hmla); border-color: rgb(255 255 255 / 0.28); }
.form .btn--outline:hover {
  border-color: var(--brand-dark);
  background: color-mix(in srgb, var(--white) 8%, transparent);
}

/* Ponuka pre prvých stojí vo formulári raz a celá: veľké číslo serifom v jantárovej
   (jediné teplé miesto mimo svetla obojka), pod ním podmienka a jemná čiara, ktorá ju
   oddelí od polí. Nie odznak, nie karta, nie rámček (14. a 16. 9. 2026, 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: 300 var(--d-m)/1.05 var(--display);
  letter-spacing: -0.02em;
  color: var(--glow-soft);
}
.gift small {
  display: block;
  margin-top: 0.5rem;
  max-width: 44ch;
  color: var(--hmla);
}

.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 { color: var(--ink); }
.field input[type="text"],
.field input[type="email"],
.field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: 400 var(--t-body)/1.4 var(--body);
  color: var(--ink);
  background: var(--hmla);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  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(--brand); }
.field input::placeholder { color: color-mix(in srgb, var(--ink) 48%, var(--white)); }
.field__hint { font-size: var(--t-small); color: color-mix(in srgb, var(--ink) 64%, var(--white)); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend {
  padding: 0;
  color: var(--ink);
  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: var(--r);
  background: var(--hmla);
  font-size: var(--t-ui);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chip:hover { border-color: var(--brand); }
.chip input { accent-color: var(--brand); margin: 0; }
.chip:has(input:checked) {
  background: var(--hmla);
  border-color: var(--brand);
  color: var(--noc);
  font-weight: 500;
}
.chip:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 1.5rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 76%, var(--white));
  cursor: pointer;
}
.consent input { accent-color: var(--brand); 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: var(--t-h3); color: var(--white); margin-bottom: 0.6rem; }
.form__welcome + p {
  color: var(--hmla);
  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; }
.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);
  padding: 1.5rem;
}
.done h3 { font-size: var(--t-h3); color: var(--ink); margin-bottom: 0.6rem; }
.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(var(--hmla-rgb) / 0.12);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: max(clamp(3rem, 6vw, 4.5rem), env(safe-area-inset-bottom));
  font-size: var(--t-ui);
}
.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(--hmla); text-decoration-color: color-mix(in srgb, var(--brand-dark) 50%, transparent); text-underline-offset: 4px; }
.foot a:hover { text-decoration-color: currentColor; }
/* Wordmark v Hmle na Noci, 80 px na šírku (výška x ≈ 24 px ako pri hikes so 112 px);
   výšku dopočíta pomer zo súboru. Okolo neho ostáva aspoň 10 px voľna. */
.foot__logo {
  width: 80px; height: auto;
  display: block;
  margin-bottom: calc(1.25rem + 10px);
}
/* Na desktope stojí popis vedľa loga, nie pod ním: logo, popis aj kontakt
   začínajú na jednej línii. */
@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, 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(--hmla));
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -12px 32px -20px rgb(var(--noc-rgb) / 0.35);
  padding-block: 0.9rem;
  padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  font-size: var(--t-ui);
}
.ck__row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ck__text {
  margin: 0; flex: 1 1 22rem;
  color: var(--ink); line-height: 1.5;
}
.ck__text a {
  color: var(--noc);
  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; }

@media (max-width: 47.99rem) {
  .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(--hmla);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-dark) 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: var(--d-m);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--noc);
}

/* Č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-photo);
  background: var(--mist);
}
.post__body {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
/* Titulok v rozcestníku stojí o stupeň pod škálou serifu (19–22 px): Peter ho
   25. 9. 2026 nechal tak, ako je. */
.post h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  color: var(--ink);
}
.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 { 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-photo);
  background: color-mix(in srgb, var(--brand-dark) 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(--ink);
  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: var(--d-s);
  color: var(--ink);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.article__body h3 {
  font-size: var(--t-h3);
  color: var(--ink);
  margin-top: 1.75rem;
}
.article__body strong { color: var(--ink); }
.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(--brand); font-weight: 500; }
.article__body li > ul { margin-top: 0.55rem; }
.article__figure { margin: clamp(2rem, 4vw, 2.75rem) 0; }
/* Na širokej obrazovke vybiehajú fotky článku zo stĺpca na 58 rem v pomere 16 : 9 —
   text ostáva 40 rem a popis pod fotkou na jeho okraji. Schéma ostáva v stĺpci. */
@media (min-width: 72rem) {
  .article__cover, .article__figure:not(.article__figure--schema) { margin-inline: -9rem; }
  .article__cover img, .article__figure img { aspect-ratio: 16 / 9; }
  .article__figure:not(.article__figure--schema) figcaption { padding-inline: 9rem; }
}
.article__figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--ink) 66%, var(--hmla));
}

/* 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;
}
.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;
  color: var(--ink);
}
.article__table tbody th { font-weight: 500; color: var(--ink); }

/* Záverečná sekcia o produkte („Ako to vyzerá s hikes“) je v článku oddelená
   podkladom: text nad ňou platí aj bez nej. Hmla na bielej, kartička 8 px. */
.article__ours {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--hmla);
  border-radius: var(--r-card);
}
.article__ours > h2 { margin-top: 0; }

/* Koniec článku: ďalšie články a pozvanie do prvej série. */
.article__next h2 {
  font-size: var(--d-s);
}
.article__next ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.article__next ul { justify-items: center; }
.article__next li a { font-weight: 500; }
.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 { line-height: 1; color: var(--ink); }
.home h1 { font-size: var(--d-xl); }
.home h2 { font-size: var(--d-l); }
.home h3 { font: 500 var(--t-h3)/1.35 var(--body); color: var(--ink); }
.home .lede { max-width: 32em; color: var(--muted); }

/* tichý odkaz: druhá výzva vedľa tlačidla a odkaz na článok */
.link-line { color: var(--ink); font: 500 var(--t-ui)/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; } }
/* 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__sub { max-width: 34em; margin-bottom: 2rem; 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(var(--noc-rgb) / 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(var(--noc-rgb) / 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); background: rgb(255 255 255 / 0.84); color: var(--ink); line-height: 1; 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; }
}
/* Kroky úteku sú tri obrazovky appky, tá istá kartička ako v Zdraví (25. 9. 2026,
   dovtedy tri zábery kreslenej nočnej scény): 1 mapa so značkou a stopou, 2 svetlo
   zapnuté dlaždicou a posuvníkom, 3 zvuk tlačidlom s vlnami. Bez textu — slová nesie
   krok pod obrázkom. Kresba má viewBox 16 : 9 a preserveAspectRatio="xMidYMid slice",
   takže na telefóne ostane zo štvorca stred, kde stojí značka, dlaždica aj tlačidlo.
   Jantárová je len svetlo (krok 2), ako všade na webe. */
.home-steps__frame {
  grid-area: frame; align-self: start; aspect-ratio: 1; overflow: clip;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 24px 48px -28px rgb(var(--noc-rgb) / 0.35);
}
@media (min-width: 48rem) { .home-steps__frame { aspect-ratio: 16 / 9; } }
.home-steps__svg { display: block; width: 100%; height: 100%; }
.m-zem { fill: color-mix(in srgb, var(--hmla), var(--mist)); }
.m-park { fill: var(--tint); }
.m-voda { fill: none; stroke: color-mix(in srgb, var(--brand-dark) 32%, var(--white)); stroke-width: 11; stroke-linecap: round; }
.m-cesta, .m-ulica { fill: none; stroke: var(--white); stroke-linecap: round; }
.m-cesta { stroke-width: 9; }
.m-ulica { stroke-width: 4.5; }
.m-stopa { fill: none; stroke: var(--brand-dark); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.m-presnost { fill: color-mix(in srgb, var(--brand) 10%, transparent); stroke: color-mix(in srgb, var(--brand) 32%, transparent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.m-znacka path { fill: var(--brand); }
.m-oko { fill: var(--white); }
.m-tien { fill: rgb(var(--ink-rgb) / 0.18); }
.s-dlazdica { fill: var(--glow); }
.s-ikona, .z-ikona { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-ikona { stroke: var(--noc); }
.s-draha { fill: var(--hmla); }
.s-uroven { fill: var(--glow); }
.s-rukovat { fill: rgb(var(--noc-rgb) / 0.35); }
.z-vlny .ring { fill: none; stroke: var(--brand); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0.18; }
.z-vlny .ring--2 { transform: scale(0.72); opacity: 0.28; }
.z-vlny .ring--3 { transform: scale(0.52); opacity: 0.4; }
.z-uroven { fill: var(--brand-dark); }
.z-tlacidlo { fill: var(--brand); }
.z-ikona { stroke: var(--white); }
/* Čí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 var(--d-s)/0.9 var(--display); letter-spacing: -0.02em; color: var(--ink); 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; 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; 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: var(--r-photo); }
/* 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(var(--noc-rgb) / 0.35); }
.home-card small { display: block; margin-bottom: 0.6rem; 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 var(--d-s)/1.02 var(--display); letter-spacing: -0.02em; }
.home-card span { display: block; margin-top: 0.2rem; font-size: var(--t-small); color: var(--muted); }
/* Graf má na každej šírke 40 px výšky a ide od okraja po okraj textu kartičky: kresba
   sa naťahuje len do šírky (preserveAspectRatio="none"), ťah a bodka ostávajú
   nezdeformované (vector-effect). Farba je farba značky, aj bodka na konci trendu. */
.home-card svg { display: block; width: 100%; height: 40px; margin-top: 0.9rem; color: var(--brand); overflow: visible; }
@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 a graf s ňou (výška ostáva 40 px). 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; }
}

/* --- 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; color: var(--muted-dark); }
/* veľké čísla na webe: Noto Serif Display 300, −0,02 em */
/* Jednotka (s DPH, mesačne) stojí vždy pod číslom, v oboch stĺpcoch a v každom jazyku
   rovnako (25. 9. 2026; dovtedy vedľa čísla, kým sa zmestila). Číslo sa nezalamuje
   („2 290 Ft-/tól“). */
.home-price__v { white-space: nowrap; font: 300 var(--d-m)/1 var(--display); letter-spacing: -0.02em; color: var(--on-dark); font-variant-numeric: lining-nums; }
.home-price__v span { display: block; margin-top: 0.55rem; font: 400 var(--t-small)/1.2 var(--body); letter-spacing: 0; color: var(--muted-dark); white-space: normal; }
/* 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; 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; color: var(--on-dark); }
.home-price__list svg { flex: none; margin-top: 0.2em; color: var(--muted-dark); }
.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; font-size: var(--t-small); 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(var(--hmla-rgb) / 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); }

/* --- 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; }
  /* kroky úteku: kruh presnosti dýcha, svetlo dýcha, vlny zvuku idú pomaly von */
  @keyframes home-presnost { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
  .m-presnost { animation: home-presnost 4.2s ease-in-out infinite; }
  @keyframes home-glow { 50% { opacity: 0.6; } }
  .s-halo { animation: home-glow 3.2s ease-in-out infinite; }
  @keyframes home-vlna { from { opacity: 0.5; transform: scale(0.4); } to { opacity: 0; transform: scale(1); } }
  .z-vlny .ring { animation: home-vlna 2.8s ease-out infinite; }
  .z-vlny .ring--2 { animation-delay: 0.93s; }
  .z-vlny .ring--3 { animation-delay: 1.86s; }
  /* 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-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(); }
    /* graf sa odkryje zľava doprava, bodka na konci trendu až s ním; celý je vtedy,
       keď je celý na obrazovke — polovičný graf by sa čítal ako chyba */
    @keyframes home-draw { from { clip-path: inset(-6px 100% -6px 0); } to { clip-path: inset(-6px -6px -6px 0); } }
    .home-card svg { animation: home-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @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; } }
}

/* ------------------------------------------------ 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);
  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); }

.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: var(--r-photo); background: var(--noc);
  /* vlásočnica po obvode: svetlá obloha by inak splynula s bielou stránkou */
  outline: 1px solid rgb(var(--ink-rgb) / 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(var(--deep-rgb) / 0.78) 0%, rgb(var(--deep-rgb) / 0.34) 30%, rgb(var(--deep-rgb) / 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(var(--noc-rgb) / 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(var(--noc-rgb) / 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 var(--d-s)/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: var(--r); background: var(--mist); overflow: hidden;
}
.js .slides__bar { display: block; }
.slides__bar span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  border-radius: var(--r); background: var(--ink);
  transition: left 120ms linear;
}
/* „Všetky funkcie“ je tiché tlačidlo .btn--quiet, rovnaké ako v Zdraví */
.home-slides__more { flex: none; margin-left: auto; }