/* Priestor pre pohyb (Filip Ferianec), from the prototype of 2026-10-09. The fine line on warm paper: one ink, one
   vermilion for "where it hurts", the painted dark disc of his mark as the one deep surface. Jost speaks, Playpen Sans
   is his hand. */

@font-face { font-family: "Jost"; src: url(fonts/jost-latin.woff2?v=7726a5cd6f) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url(fonts/jost-ext.woff2?v=312ef2b80c) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Playpen Sans, his hand (the owner, 2026-10-27: Shantell's marker edges read jagged at DPR 1), at its one used weight */
@font-face { font-family: "Playpen Sans"; src: url(fonts/playpen-latin.woff2?v=8efd6058ce) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playpen Sans"; src: url(fonts/playpen-ext.woff2?v=b26f490e11) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-017F; }

:root {
  --papier: #f2ebe0;
  --papier-2: #e9dfcf;
  --papier-svetly: #faf6ef;
  --atrament: #1e1b18;
  --atrament-2: #4d463f;
  --linka: rgba(30, 27, 24, 0.16);
  --linka-2: rgba(30, 27, 24, 0.32);
  --akcent: #c4462b;
  --akcent-tmavy: #a33a22;
  --akcent-jemny: #f3d6c8;
  --tma: #24211e;
  --tma-text: #efe7da;
  --tma-text-2: #bcb1a2;
  --pismo: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --ruka: "Playpen Sans", "Comic Neue", "Segoe Print", cursive;
  --hlavicka: 72px;
  --okraj: clamp(16px, 4vw, 56px);
  --sirka: 1320px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hlavicka) + 12px);
  scrollbar-color: var(--atrament-2) var(--papier-2); }
/* a section link cross-fades the page to the section instead of travelling down to it (main.js, as Royal's) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
body { transition: opacity 0.28s ease; }
html.prelinanie body { opacity: 0; transition-duration: 0.2s; }   /* where the browser has no View Transitions */
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
body {
  margin: 0; font-family: var(--pismo); font-size: 1.0625rem; line-height: 1.6; color: var(--atrament);
  background-color: var(--papier); caret-color: var(--akcent); -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .032 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--akcent); color: var(--papier-svetly); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
p { margin: 0; text-wrap: pretty; }
.ruka { font-family: var(--ruka); font-weight: 400; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--atrament); color: var(--papier); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.vnutro { width: min(100% - 2 * var(--okraj), var(--sirka)); margin-inline: auto; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--tmave { background: var(--atrament); color: var(--papier-svetly); }
.btn--tmave:hover { background: var(--akcent); }
.btn--svetle { background: var(--tma-text); color: var(--tma); }
.btn--svetle:hover { background: var(--akcent); color: var(--papier-svetly); }
.btn--obrys { border-color: var(--linka-2); background: transparent; }
.btn--obrys:hover { border-color: var(--atrament); background: var(--papier-svetly); }
.btn--male { min-height: 38px; padding: 0 16px; font-size: 0.9rem; }
.btn-sipka { width: 18px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.btn:hover .btn-sipka { transform: translateX(3px); }

/* ---- the prototype's note ---- */
.prototyp { margin: 0; padding: 6px var(--okraj); background: var(--atrament); color: var(--tma-text-2); font-size: 0.8rem; text-align: center; letter-spacing: 0.02em; }
.prototyp strong { color: var(--tma-text); font-weight: 500; }

/* ---- the header ---- */
.hlavicka {
  position: sticky; top: 0; z-index: 40; height: var(--hlavicka); display: flex; align-items: center; gap: 28px;
  padding-inline: var(--okraj); background: transparent; border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.hlavicka.je-posunuta { border-bottom-color: var(--linka); background: var(--papier); }
.znacka { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.znacka img { width: 42px; height: 42px; border-radius: 50%; transition: transform 0.6s var(--ease); }
.znacka:hover img { transform: rotate(-120deg); }
.znacka-meno { font-size: 1.12rem; font-weight: 500; letter-spacing: 0.01em; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2vw, 30px); }
.nav a { font-size: 0.97rem; text-decoration: none; padding: 6px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav a[aria-current="true"] { color: var(--akcent-tmavy); }
/* at the kontakt (the page's end) "Objednať sa" is the lit item */
.hlavicka-cta[aria-current="true"], .menu .btn[aria-current="true"] { background: var(--akcent-tmavy); }
.menu-btn { display: none; }

.menu { position: fixed; inset: 0; z-index: 80; background: var(--papier); padding: 18px var(--okraj) 40px; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu-hore { display: flex; align-items: center; justify-content: space-between; height: calc(var(--hlavicka) - 18px); }
.menu ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; }
.menu ul a { display: block; font-size: 2.1rem; font-weight: 300; text-decoration: none; padding: 6px 0; letter-spacing: -0.01em; }
.menu .btn { margin-top: auto; }
.menu ul a[aria-current="true"] { color: var(--akcent-tmavy); }
.menu-zavriet { width: 46px; height: 46px; border: 1px solid var(--linka-2); border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.menu-zavriet svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---- Kde to bolí ---- */
.kde {
  position: relative; display: grid; align-items: center; gap: 24px clamp(24px, 3.5vw, 64px);
  grid-template-columns: minmax(300px, 1fr) auto minmax(340px, 1fr);
  min-height: calc(100svh - var(--hlavicka) - 30px); padding: 18px var(--okraj) 40px; max-width: 1480px; margin-inline: auto;
}
.kde-text { align-self: center; max-width: 440px; }
.kde h1 { font-size: clamp(3.3rem, 6.6vw, 6rem); font-weight: 300; letter-spacing: -0.035em; line-height: 0.92; }
.kde-boli { display: block; font-weight: 400; position: relative; width: fit-content; }
.kde-boli-ciara { position: absolute; left: -2%; right: -6%; bottom: -0.12em; height: 0.32em; overflow: visible; }
.kde-boli-ciara path { fill: none; stroke: var(--akcent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.nakreslene-hero .kde-boli-ciara path { animation: tah 1s 0.9s var(--ease) forwards; }
@keyframes tah { to { stroke-dashoffset: 0; } }
.kde-lede { margin-top: 22px; font-size: 1.12rem; color: var(--atrament-2); max-width: 36ch; }
.pre-koho { margin-top: 30px; }
.pre-koho-h { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atrament-2); margin-bottom: 10px; }
.prepinac { display: flex; flex-wrap: wrap; gap: 8px; }
.prepinac button {
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linka-2); background: transparent; cursor: pointer;
  font-size: 0.98rem; display: inline-flex; align-items: center; gap: 8px;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.prepinac button svg { width: 18px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.prepinac button:hover { border-color: var(--atrament); }
.prepinac button[aria-checked="true"], .prepinac button[aria-pressed="true"] { background: var(--atrament); border-color: var(--atrament); color: var(--papier-svetly); }
.kde-podpis { margin-top: 34px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kde-podpis .ruka { font-size: 1.32rem; line-height: 1.3; color: var(--atrament); }
.kde-podpis-meno { font-family: var(--ruka); font-size: 1rem; color: var(--akcent-tmavy); }
/* a quiet way to the videos: a small round play mark and two words */
.kde-video { margin-top: 18px; }
.kde-video a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 0.95rem; color: var(--atrament-2); text-decoration: none; }
.kde-video-znak { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.3px solid var(--akcent); transition: background-color 0.25s var(--ease); }
.kde-video-znak svg { width: 14px; height: 14px; fill: var(--akcent); transition: fill 0.25s var(--ease); }
.kde-video a:hover, .kde-video a:focus-visible { color: var(--atrament); }
.kde-video a:hover .kde-video-znak, .kde-video a:focus-visible .kde-video-znak { background: var(--akcent); }
.kde-video a:hover svg, .kde-video a:focus-visible svg { fill: var(--papier-svetly); }

.kde-telo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#telo { height: clamp(430px, calc(100svh - var(--hlavicka) - 236px), 640px); aspect-ratio: 330 / 630; }
/* the turn is the element's own perspective rotation; its children are flat, so no preserve-3d: with it Firefox paints
   the body's SVG offset by the box's own position (the pre-launch pass, 2026-10-27) */
.telo-otoc { position: relative; width: 100%; height: 100%; transition: transform 0.24s cubic-bezier(0.5, 0, 0.75, 0); }
.telo-otoc.otaca-sa { transform: perspective(1200px) rotateY(90deg); }
.telo-otoc.dootaca-sa { transform: perspective(1200px) rotateY(-90deg); transition: none; }
.telo-svg { width: 100%; height: 100%; overflow: visible; }
.telo-linia { fill: none; stroke: var(--atrament); stroke-width: 1.8; stroke-linejoin: round; }
.telo-detail path, .telo-doplnok { fill: none; stroke: var(--atrament); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.telo-chrbtica circle { fill: var(--atrament); }
.telo-zem { stroke: var(--atrament); stroke-width: 1.1; opacity: 0.45; }
.telo-zem-bodky circle { fill: var(--atrament); opacity: 0.45; }
.telo-detail, .telo-zem, .telo-zem-bodky { transition: opacity 0.7s var(--ease); }
.telo-doplnok { transition: opacity 0.35s var(--ease); }
.telo[data-strana="spredu"] .telo-detail--zozadu, .telo[data-strana="zozadu"] .telo-detail--spredu,
.telo[data-strana="zozadu"] .telo-detail--spredu-doplnok { display: none; }
.kresli-sa .telo-linia { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tah 2.3s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.kresli-sa .telo-detail, .kresli-sa .telo-zem, .kresli-sa .telo-zem-bodky { opacity: 0; }

.telo-body { position: absolute; inset: 0; }
.bod {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transform: scale(0.4); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nakreslene .bod { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }
.telo-body.ukaz .bod { animation: bodIn 0.5s var(--ease) both; animation-delay: calc(0.45s + var(--i, 0) * 60ms); }
@keyframes bodIn { from { opacity: 0; transform: scale(0.4); } }
.bod[hidden] { display: none; }
.bod-kruh { position: absolute; inset: 0; display: grid; place-items: center; }
.bod-kruh svg { width: 40px; height: 40px; overflow: visible; }
.bod-obvod { fill: var(--papier-svetly); stroke: var(--atrament); stroke-width: 1.4; transition: fill 0.25s var(--ease), stroke 0.25s var(--ease), r 0.3s var(--ease); }
.bod-stred { fill: var(--atrament); transition: fill 0.25s var(--ease); }
.bod-luce { fill: none; stroke: var(--akcent); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transform: scale(0.6); transform-origin: center; transform-box: view-box; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.bod::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  border: 1.4px solid var(--akcent); opacity: 0; pointer-events: none;
}
.telo.caka .bod::after { animation: pulz 2.6s var(--ease) infinite; animation-delay: calc(2.4s + var(--i, 0) * 0.32s); }
@keyframes pulz { 0% { opacity: 0.85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.bod:hover .bod-obvod, .bod:focus-visible .bod-obvod { fill: var(--akcent-jemny); stroke: var(--akcent); }
.bod.vybrany .bod-obvod { fill: var(--akcent); stroke: var(--akcent); r: 7.4px; }
.bod.vybrany .bod-stred { fill: var(--papier-svetly); }
.bod.vybrany .bod-luce { opacity: 1; transform: none; }
.bod:focus-visible { outline: none; }
.bod:focus-visible .bod-kruh svg { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 50%; }
.bod-meno {
  position: absolute; left: calc(100% - 6px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none;
  font-family: var(--ruka); font-size: 0.98rem; line-height: 1; padding: 5px 9px 6px; border-radius: 999px; background: var(--papier-svetly);
  border: 1px solid var(--linka); opacity: 0; transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
.bod.vlavo .bod-meno { left: auto; right: calc(100% - 6px); transform: translate(4px, -50%); }
.bod:hover .bod-meno, .bod:focus-visible .bod-meno, .bod.vybrany .bod-meno { opacity: 1; transform: translate(0, -50%); }
.bod.vybrany .bod-meno { color: var(--akcent-tmavy); border-color: var(--akcent); }

.kde-ovladanie { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 420px; }
.strana { display: inline-flex; padding: 3px; border: 1px solid var(--linka-2); border-radius: 999px; }
.strana button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 0.92rem; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.strana button[aria-pressed="true"] { background: var(--atrament); color: var(--papier-svetly); }
.miesta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.miesta button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--linka-2); background: none; cursor: pointer; font-size: 0.88rem; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.miesta button:hover { border-style: solid; border-color: var(--atrament); }
.miesta button[aria-pressed="true"] { border-style: solid; border-color: var(--akcent); color: var(--akcent-tmavy); background: var(--papier-svetly); }

/* the answer */
.odpoved { align-self: center; width: 100%; max-width: 440px; }
.odpoved-zavriet, .odpoved-ucho { display: none; }
.odpoved-prazdna { position: relative; padding: 8px 0 8px 74px; }
.odpoved-prazdna svg { position: absolute; left: -6px; top: -6px; width: 70px; height: 54px; fill: none; stroke: var(--akcent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.odpoved-prazdna .ruka { font-size: 1.55rem; line-height: 1.2; display: block; margin-bottom: 12px; }
.odpoved-prazdna p { color: var(--atrament-2); max-width: 34ch; }
.odpoved-obsah[hidden], .odpoved-prazdna[hidden] { display: none; }
.odpoved-obsah { animation: odpovedIn 0.5s var(--ease); }
@keyframes odpovedIn { from { opacity: 0; transform: translateY(10px); } }
.odpoved-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odpoved-nazov { font-size: clamp(2.3rem, 3.4vw, 3.1rem); }
.odpoved-skupina { font-family: var(--ruka); color: var(--akcent-tmavy); font-size: 1rem; }
.odpoved-co { margin-top: 14px; font-size: 1.08rem; }
.odpoved h3 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--atrament-2); margin: 22px 0 8px; line-height: 1.2; }
.cipy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cipy li { font-size: 0.92rem; padding: 4px 12px 5px; border: 1px solid var(--linka-2); border-radius: 999px; background: var(--papier-svetly); }
.odpoved-trvanie { font-size: 1rem; }
.odpoved-cvik { margin-top: 22px; display: grid; grid-template-columns: 136px 1fr; gap: 6px 16px; align-items: center; padding: 14px 16px 16px; border-radius: 18px; background: var(--papier-svetly); border: 1px solid var(--linka); }
.odpoved-cvik [data-pole="figurka"] { grid-row: 1 / span 3; align-self: center; }
.odpoved-cvik .figurka { width: 136px; height: auto; max-height: 150px; --vypln: var(--papier-svetly); }
.odpoved-cvik-h { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--atrament-2); }
.odpoved-cvik-meno { font-family: var(--ruka); font-size: 1.22rem; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.odpoved-cvik p { font-size: 0.95rem; color: var(--atrament-2); line-height: 1.45; }
.stitok { display: inline-block; font-family: var(--pismo); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; color: var(--akcent-tmavy); border: 1px solid var(--akcent); border-radius: 6px; padding: 2px 7px 3px; transform: rotate(-3deg); white-space: nowrap; background: var(--papier-svetly); }
.odpoved-pozor { margin-top: 14px; display: flex; gap: 10px; font-size: 0.9rem; color: var(--atrament-2); line-height: 1.45; }
.odpoved-pozor[hidden] { display: none; }
.odpoved-pozor svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--akcent); stroke-width: 1.4; stroke-linecap: round; margin-top: 1px; }
.odpoved-akcie { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.zavoj { position: fixed; inset: 0; z-index: 55; background: rgba(30, 27, 24, 0.3); border: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }

/* ---- sections ---- */
.sekcia { padding-block: clamp(80px, 11vw, 150px); }
.sekcia-hlava { max-width: 760px; }
.sekcia-hlava p { margin-top: 18px; font-size: 1.12rem; color: var(--atrament-2); max-width: 58ch; }

/* Filip */
.filip { display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.1fr; gap: clamp(36px, 6vw, 110px); align-items: center; }
.filip-foto { margin: 0; position: relative; }
.filip-ram { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--tma); }
.filip-ram img.filip-farba { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.filip-znak { position: absolute; left: 50%; top: 46%; width: 46%; transform: translate(-50%, -50%); color: var(--tma-text); opacity: 0.92; }
.filip-ram figcaption { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: var(--tma-text); font-size: 1.02rem; padding: 0 18px; }
.filip-text h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.filip-text p { margin-top: 18px; font-size: 1.12rem; max-width: 56ch; }
.filip-podpis { margin-top: 18px !important; font-size: 2rem !important; color: var(--akcent-tmavy); transform: rotate(-4deg); width: fit-content; }
.fakty { margin: 34px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linka); max-width: 560px; }
.fakty div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linka); }
.fakty dt { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--atrament-2); padding-top: 3px; }
.fakty dd { margin: 0; }

/* the way back */
/* the heading sits in the pinned stage, so "Ako to prebieha" and the first step share one screen (the owner's review,
   2026-10-27) */
.cesta-scena { position: relative; height: 330vh; }
.cesta-lepidlo {
  position: sticky; top: var(--hlavicka); height: calc(100svh - var(--hlavicka)); display: grid; align-items: center;
  grid-template-columns: 1.15fr 0.85fr; column-gap: clamp(24px, 4vw, 72px);
  grid-template-rows: 1fr auto auto 1fr auto;
  grid-template-areas: "figurka ." "figurka hlava" "figurka etapy" "figurka ." "postup postup";
}
.cesta-hlava { grid-area: hlava; margin-bottom: 30px; }
.cesta-figurka { position: relative; grid-area: figurka; }
.cesta-figurka .figurka { width: 100%; height: auto; max-height: calc(100svh - var(--hlavicka) - 150px); --vypln: var(--papier-svetly); }
.cesta-etapy { list-style: none; margin: 0; padding: 0; position: relative; min-height: 320px; grid-area: etapy; }
.cesta-etapy li { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(24px); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.cesta-etapy li.je-aktivna { opacity: 1; transform: none; }
.cesta-etapy li.je-za { transform: translateY(-24px); }
.cesta-cislo { display: block; font-size: clamp(4.5rem, 9vw, 8rem); font-weight: 200; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.2px var(--atrament); letter-spacing: -0.04em; }
.cesta-etapy h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 18px; }
.cesta-etapy p { margin-top: 14px; font-size: 1.1rem; max-width: 40ch; }
.cesta-cas { display: inline-block; margin-top: 16px !important; font-size: 1.12rem !important; color: var(--akcent-tmavy); transform: rotate(-2deg); }
.cesta-postup { grid-area: postup; align-self: end; margin-bottom: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.cesta-postup::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1.6px dotted var(--linka-2); }
.cesta-postup-ciara { position: absolute; left: 0; top: 6px; height: 2.4px; width: 100%; background: var(--akcent); transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: 2px; }
.cesta-postup span { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--atrament-2); }
.cesta-postup span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.4px solid var(--atrament); background: var(--papier); flex: none; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.cesta-postup span.je-hotova::before { background: var(--akcent); border-color: var(--akcent); }

/* the flash sheet */
.cviky { background: var(--papier-2); position: relative; }
/* the dots as a small tile, not a gradient: a gradient is computed again for every pixel a playing figure repaints */
.cviky::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='0.8' fill='%231e1b18' fill-opacity='0.09'/%3E%3C/svg%3E"); background-size: 14px 14px; opacity: 0.6; }
.cviky > * { position: relative; }
.flash { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px clamp(18px, 3vw, 44px); }
/* only the circle and the label tilt: a tilted figure's long lines turn into stairs at DPR 1 (the owner's review, 2026-10-27) */
.motiv { position: relative; transform: translateY(var(--y, 0)); outline: none; }
.motiv:nth-child(4n + 2) { --r: 1.4deg; --y: 22px; }
.motiv:nth-child(4n + 3) { --r: -1.2deg; --y: 6px; }
.motiv:nth-child(4n + 4) { --r: 1deg; --y: 28px; }
.motiv:nth-child(4n + 1) { --r: -1.6deg; }
.motiv-ram { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.motiv-ram::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1.4px dashed rgba(30, 27, 24, 0.28); transform: rotate(var(--r, 0deg)); transition: border-color 0.3s var(--ease), transform 1.2s var(--ease); }
.motiv:hover .motiv-ram::before, .motiv:focus-visible .motiv-ram::before, .motiv.hra .motiv-ram::before { border-color: var(--akcent); transform: rotate(calc(var(--r, 0deg) + 40deg)); }
/* a touch screen: the ring takes the colour, not the turn, so a figure starting and stopping costs no 1.2 s transform */
@media (hover: none) { .motiv.hra .motiv-ram::before { transform: rotate(var(--r, 0deg)); } }
.motiv:focus-visible .motiv-ram { outline: 2px solid var(--akcent); outline-offset: 4px; border-radius: 50%; }
.motiv .figurka { width: 88%; height: auto; --vypln: var(--papier-svetly); }
.motiv-cislo { position: absolute; left: 2%; top: 2%; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; color: var(--atrament-2); }
.motiv .stitok { position: absolute; right: -2%; top: 8%; transform: rotate(calc(6deg + var(--r, 0deg))); z-index: 1; }
.motiv-meno { margin-top: 8px; font-family: var(--ruka); font-size: 1.28rem; line-height: 1.15; text-align: center; }
.motiv-oblast { display: block; text-align: center; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--akcent-tmavy); margin-top: 4px; }
.motiv-ako { margin-top: 8px; text-align: center; font-size: 0.93rem; line-height: 1.45; color: var(--atrament-2); max-width: 30ch; margin-inline: auto; }
.cviky-pozn { margin-top: 64px; font-family: var(--ruka); font-size: 1.15rem; text-align: center; }

/* the figures */
.figurka { overflow: visible; }
.figurka .obrys { fill: var(--obrys, var(--atrament)); }
.figurka .vypln { fill: var(--vypln, var(--papier-svetly)); }
.figurka .zem { fill: none; stroke: var(--atrament); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: 0.5; }
.figurka .bodky circle { fill: var(--atrament); opacity: 0.5; }
.figurka .rekvizity path { fill: none; stroke: var(--atrament); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0.75; }
.figurka .rekvizity .srafa { stroke-width: 0.8px; opacity: 0.5; }
.figurka .akcent { fill: var(--akcent); }
.figurka .akcent-kruh { fill: none; stroke: var(--akcent); stroke-width: 0.7; transform-box: fill-box; transform-origin: center; animation: akcentPulz 2.2s var(--ease) infinite; }
@keyframes akcentPulz { 0% { opacity: 0.9; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(2.8); } }

/* the videos (Filip's, through Správca): phone clips, upright; the section is hidden while its list is empty */
.videa:not(:has(.video)) { display: none; }
/* the menu's "Videá" and the first screen's "Pozri video" exist only while the section has a video (the owner, 2026-10-27) */
:root:not(:has(#videa .video)) .len-s-videom { display: none; }
.videa-zoznam { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 34px clamp(18px, 3vw, 40px); }
.videa-zoznam { align-items: start; }
.videa-zoznam > .video:first-child { grid-column: 1 / -1; max-width: 960px; }
.video-ram { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--tma) url(img/disk.webp?v=c9d88946c3) center / cover; box-shadow: 0 24px 50px -30px rgba(30, 27, 24, 0.55); }
.video-ram--na-vysku { aspect-ratio: 9 / 16; }
.video-ram iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-spusti { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; display: grid; place-items: center; }
.video-spusti svg { width: 64px; height: 64px; padding: 18px 15px 18px 21px; border-radius: 50%; background: var(--akcent); fill: var(--papier-svetly); transition: transform 0.25s var(--ease); }
.video-spusti:hover svg, .video-spusti:focus-visible svg { transform: scale(1.08); }
.video-spusti:focus-visible { outline: 2px solid var(--akcent); outline-offset: -4px; }
.video-ram--odkaz { display: grid; place-items: center; }
.video-ram--subor { aspect-ratio: auto; background: var(--tma); }
.video-ram--subor video { display: block; width: 100%; height: auto; }
.video-nazov { margin-top: 12px; font-family: var(--ruka); font-size: 1.2rem; line-height: 1.2; text-align: center; }

/* the groups: a ring of figures on the dark disc, a note in its middle */
.skupiny { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 100px); align-items: center; }
.skupiny-text p.skupiny-lede { margin-top: 18px; font-size: 1.15rem; max-width: 38ch; }
.skupiny-zoznam { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--linka); max-width: 460px; }
.skupiny-zoznam li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linka); }
.skupiny-zoznam li span:last-child { color: var(--atrament-2); font-variant-numeric: tabular-nums; }
.skupiny-text .btn { margin-top: 28px; }
.skupiny-disk { position: relative; width: min(100%, 600px); aspect-ratio: 1; justify-self: center; border-radius: 50%; }
.skupiny-disk img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 30px 60px -28px rgba(30, 27, 24, 0.55); }
.skupiny-kruh { position: absolute; inset: 0; }
.skupiny-kruh .clen { position: absolute; width: 25%; left: calc(50% + var(--x) - 12.5%); top: calc(50% + var(--y) - 10.4%); }
.skupiny-kruh .figurka { width: 100%; height: auto; --vypln: var(--tma-text); --obrys: var(--tma); }
.skupiny-kruh .figurka .rekvizity path { stroke: var(--tma-text); }   /* the chair and the wall in light ink on the dark disc */
.skupiny-nota { position: absolute; left: 50%; top: 50%; width: 15%; transform: translate(-50%, -50%) rotate(-6deg); fill: none; stroke: var(--akcent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.skupiny-nota .plne { fill: var(--akcent); stroke: none; }

/* the specials: a week with its weekend circled */
.specialy { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 90px) 0; }
.specialy svg { width: 100%; height: auto; fill: none; stroke: var(--atrament); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.specialy svg .akcent-bod { fill: var(--akcent); stroke: none; }
.specialy svg .bodka { fill: var(--atrament); stroke: none; }
.specialy svg .kruzok { stroke: var(--akcent); stroke-width: 1.6; }
.specialy h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.specialy p { margin-top: 16px; font-size: 1.1rem; max-width: 58ch; color: var(--atrament-2); }

/* the prices */
/* at least one screen, its content centred: from the menu it lands with no strip of the section above or of the dark
   kontakt below (the owner's review, 2026-10-27) */
.cennik { min-height: calc(100svh - var(--hlavicka)); display: flex; flex-direction: column; justify-content: center; }
.cennik .vnutro { max-width: 820px; }
.cennik-zoznam { list-style: none; margin: 40px 0 0; padding: 0; }
.cennik-zoznam li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: 16px 0; }
.cennik-zoznam li::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1.6px dotted var(--linka-2); transform: translateY(-5px); }
.c-nazov { grid-column: 1; font-size: 1.22rem; }
.c-nazov small { display: block; font-size: 0.9rem; color: var(--atrament-2); }
.c-cena { grid-column: 3; font-size: 1.35rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-cena:has(> .placeholder) { font-size: 1rem; font-style: italic; color: var(--atrament-2); }
.cennik-pozn { margin-top: 26px; color: var(--atrament-2); }

/* contact, on the dark */
.kontakt { background: var(--tma); color: var(--tma-text); position: relative; overflow: hidden; }
.kontakt::before { content: ""; position: absolute; inset: -10%; background: url(img/farba.webp?v=d401726df1) center / cover; opacity: 0.2; filter: blur(1px); pointer-events: none; }
.kontakt .vnutro { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 110px); align-items: start; }
.kontakt h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.kontakt-lede { margin-top: 18px; font-size: 1.12rem; color: var(--tma-text-2); max-width: 40ch; }
.kontakt .fakty { border-top-color: rgba(239, 231, 218, 0.18); }
.kontakt .fakty div { border-bottom-color: rgba(239, 231, 218, 0.18); }
.kontakt .fakty dt { color: var(--tma-text-2); }
.kontakt .fakty .placeholder { color: var(--tma-text-2); font-style: italic; }
.kontakt ::selection { background: var(--akcent); color: var(--papier-svetly); }
.objednanie { background: rgba(239, 231, 218, 0.05); border: 1px solid rgba(239, 231, 218, 0.14); border-radius: 26px; padding: clamp(22px, 3vw, 36px); }
.objednanie-cast { display: grid; justify-items: start; gap: 10px; padding: 24px 0; border-bottom: 1px solid rgba(239, 231, 218, 0.14); }
.objednanie-cast:first-child { padding-top: 0; }
/* the last part has no rule under it: in the release the prototype note goes and the rule hung empty (R2.5) */
.objednanie-cast:last-of-type { padding-bottom: 0; border-bottom: 0; }
.objednanie-cast h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.objednanie-cast p { color: var(--tma-text-2); }
.objednanie-cast .btn { margin-top: 8px; }
.objednanie-pozn { margin-top: 18px; font-size: 0.85rem; color: var(--tma-text-2); }
/* the kontakt, the closing line and the footer are one screen on the kontakt's own background, with no line between
   them; the closing line sits under the card in two lines, at the card's left edge, so the two columns end level, and
   the footer runs full width under both; on a phone they follow one another (the owner, 2026-10-27, R2.5) */
.kontakt { display: flex; flex-direction: column; min-height: calc(100svh - var(--hlavicka)); padding-block: clamp(56px, 6vw, 84px) 0; }
.kontakt-veta { margin: 22px 0 0; font-size: clamp(1.9rem, 2.4vw, 2.4rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.kontakt-veta .ruka { display: block; color: var(--akcent); letter-spacing: 0; white-space: nowrap; }
.kontakt .pata { background: none; padding: 40px 0 30px; width: min(100% - 2 * var(--okraj), var(--sirka)); margin: auto auto 0; }
.kontakt .pata-udaje { margin-top: 16px; }

.pata { background: var(--tma); color: var(--tma-text); padding: 10px var(--okraj) 34px; position: relative; }
.pata-veta { font-size: clamp(2.2rem, 6.4vw, 5.6rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.03em; padding: clamp(40px, 7vw, 90px) 0 clamp(36px, 5vw, 70px); border-top: 1px solid rgba(239, 231, 218, 0.16); max-width: var(--sirka); margin: 0 auto; }
.pata-veta .ruka { display: block; color: var(--akcent); font-size: 0.82em; letter-spacing: 0; margin-top: 0.08em; }
.pata-riadok { max-width: var(--sirka); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 1rem; color: var(--tma-text-2); }
.pata-znacka { display: inline-flex; align-items: center; gap: 12px; color: var(--tma-text); margin-right: auto; }
.pata-znacka svg { width: 44px; height: 44px; flex-shrink: 0; color: var(--tma-text); }
.pata a { color: var(--tma-text); }
.pata .placeholder { font-style: italic; }
/* the operator's data the law asks for (P17.5, ZAKON_MINIMUM): one quiet line under the footer's row */
/* the operator's details (law 22/2004 §4(1), ZAKON_MINIMUM) stay in the footer as quiet fine print: small, muted, one
   line where the width allows, no italics and no underlines (the owner, 2026-10-27) */
.pata-udaje { max-width: var(--sirka); margin: 22px auto 0; font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.01em; color: var(--tma-text-2); }
.pata-udaje .placeholder { font-style: normal; }
.pata-udaje a { color: var(--tma-text); text-decoration: none; }
.pata-udaje a:hover, .pata-udaje a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* a page of plain text: the privacy page and the 404 (P17.5) */
.text-stranka { padding-block: clamp(40px, 7vw, 100px) clamp(64px, 9vw, 130px); }
.text-stranka .vnutro { width: min(100% - 2 * var(--okraj), 72ch); }
.text-stranka h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); margin-bottom: 0.5em; }
.text-stranka h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 500; letter-spacing: 0; margin: 1.9em 0 0.45em; }
.text-stranka p, .text-stranka ul { margin: 0 0 0.9em; }
.text-stranka ul { padding-left: 1.2em; }
.text-stranka .btn { margin-top: 1.2em; }
.text-stranka .placeholder { font-style: italic; background: var(--papier-2); padding: 0 0.3em; border-radius: 3px; }

/* reveal on scroll: visible by default, raised only when the script runs */
.js .odhal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.js .odhal.je-videt { opacity: 1; transform: none; }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
  .kde { grid-template-columns: auto minmax(300px, 1fr); grid-template-areas: "text text" "telo odpoved"; align-items: start; }
  .kde-text { grid-area: text; max-width: 760px; }
  .kde-telo { grid-area: telo; }
  .odpoved { grid-area: odpoved; align-self: start; margin-top: 40px; }
  .flash { grid-template-columns: repeat(3, 1fr); }
  .motiv:nth-child(n) { --y: 0; }
}
@media (max-width: 1060px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--linka-2); border-radius: 999px; background: none; cursor: pointer; font-size: 0.95rem; }
}
@media (max-width: 760px) {
  :root { --hlavicka: 62px; }
  body { font-size: 1rem; }
  .hlavicka { gap: 10px; }
  .znacka img { width: 36px; height: 36px; }
  .znacka-meno { font-size: 1rem; }
  .hlavicka-cta { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
  .kde { display: block; min-height: 0; padding-top: 16px; }
  .kde h1 { font-size: clamp(2.9rem, 13vw, 3.6rem); }
  .kde-boli { display: inline; }
  .kde-lede { margin-top: 12px; font-size: 1rem; }
  .pre-koho { margin-top: 18px; }
  .pre-koho-h { display: none; }
  .prepinac { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--okraj)); padding-inline: var(--okraj); }
  .prepinac button { flex: none; min-height: 40px; padding: 0 14px; }
  .kde-podpis { display: none; }
  .kde-telo { margin-top: 14px; }
  #telo { height: min(62svh, 520px); }
  .bod-meno { font-size: 0.9rem; }
  .odpoved {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: none; max-height: 84svh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--papier-svetly); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 50px rgba(30, 27, 24, 0.22);
    padding: 8px 20px calc(26px + env(safe-area-inset-bottom)); transform: translateY(105%); visibility: hidden;
    transition: transform 0.42s var(--ease), visibility 0s linear 0.42s;
  }
  .odpoved.je-otvorena { transform: none; visibility: visible; transition: transform 0.42s var(--ease), visibility 0s; }
  .odpoved-prazdna { display: none !important; }
  .odpoved-ucho { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--linka-2); margin: 4px auto 10px; }
  .odpoved-zavriet { display: grid; place-items: center; position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linka-2); background: var(--papier-svetly); cursor: pointer; z-index: 2; }
  .odpoved-zavriet svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .odpoved-hlava { padding-right: 50px; }
  .odpoved-cvik { grid-template-columns: 112px 1fr; }
  .odpoved-cvik .figurka { width: 112px; }
  .zavoj.je-otvorena { opacity: 1; pointer-events: auto; }
  .filip, .skupiny, .kontakt .vnutro, .specialy { grid-template-columns: 1fr; }
  .filip-foto { max-width: 420px; }
  .cesta-scena { height: 300vh; }
  .cesta-lepidlo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "hlava" "figurka" "etapy" "postup"; align-content: start; align-items: start; gap: 6px; padding-top: 8px; }
  /* the figure takes the height the heading, the step and the progress leave, at most its 40svh */
  .cesta-hlava { margin-bottom: 4px; }
  .cesta-figurka { align-self: stretch; min-height: 0; }
  .cesta-figurka .figurka { height: 100%; max-height: 40svh; width: auto; margin-inline: auto; }
  .cesta-etapy { min-height: 250px; }
  .cesta-cislo { font-size: 3.4rem; }
  .cesta-etapy h3 { margin-top: 8px; font-size: 1.9rem; }
  .cesta-etapy p { margin-top: 8px; font-size: 1rem; }
  .cesta-cas { margin-top: 8px !important; }
  .cesta-postup { margin-bottom: 14px; }
  .cesta-postup span { font-size: 0; gap: 0; }
  .flash { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; margin-top: 36px; }
  .videa-zoznam { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; margin-top: 36px; }
  .video-ram { border-radius: 16px; }
  .video-spusti svg { width: 52px; height: 52px; padding: 14px 12px 14px 17px; }
  .video-nazov { font-size: 1.05rem; }
  .motiv-meno { font-size: 1.1rem; }
  .motiv-ako { font-size: 0.86rem; }
  .motiv .stitok { font-size: 0.72rem; top: auto; bottom: 0; right: -4%; transform: rotate(-5deg); }
  .skupiny-disk { width: min(100%, 440px); }
  .specialy svg { max-width: 300px; }
  .fakty div { grid-template-columns: 100px 1fr; }
  .c-nazov { font-size: 1.08rem; }
}
@media (max-width: 420px) {
  .hlavicka-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .odhal { opacity: 1; transform: none; }
  .cesta-scena { height: auto; }
  .cesta-lepidlo { position: static; height: auto; display: block; }
  .cesta-figurka { display: none; }
  .cesta-etapy { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; min-height: 0; }
  .cesta-etapy li { position: static; opacity: 1; transform: none; }
  .cesta-etapy .figurka { width: 100%; max-width: 200px; --vypln: var(--papier-svetly); }
  .cesta-postup { display: none; }
}