/* Qivelo web — NÁVRH v novom brandingu (brand guidelines v1.1, 2. 11. 2026). Len lokálne, nenasadené.
 *
 * Staviame na aktuálnom webe (qivelo.sk): ten istý rytmus, 48 px sklenená lišta, plagátový úvod,
 * eyebrow so štvorčekom, pilulkové tlačidlá, skutočné obrazovky v iPhone. QR pás z pixelov je preč (Alex 2. 11.).
 * Tenké levanduľové kruhy za produktom = kruh zo znaku („smooth minimalizmus“, Alex 2. 11.).
 * Mení sa len značka: Atrament / Noc / Hmla / Levanduľa, nadpisy Sora SemiBold, text DM Sans.
 *
 * Tmavý web (Alex 2. 11.: čierna odlišuje Qivelo od konkurencie, ktorá je svetlá a farebná). Fialová tma (Atrament
 * #1B1433) mu pôsobila divne, preto je tma ČIERNA #0A0910 s grafitovými vrstvami #17151D a život dodáva Levanduľa.
 * Svetlé plochy (Hmla) sú len cenník, kontakt, päta a Menu, aby tma nebola plochá.
 * Tma je v tokenoch --tma-*; fialová verzia = riadky v komentári pri :root. Svetlý variant: ../web-novy-branding-svetly.
 *
 * Pravidlá palety (PDF s. 5):
 *   tmavé plochy   text Hmla, tlmený #BDB3DD, odkaz a tlačidlo Levanduľa (Atrament text)
 *   svetlé plochy  text Atrament, tlmený #5A5272, odkaz a tlačidlo Hlboká fialová (biely text)
 *   Levanduľa sama nie je text na svetlom (2,7 : 1), Hlboká fialová nie je nič na tmavom.
 *   Broskyňa len zriedka, ako teplý akcent (výplň s textom Atrament, nikdy text; chyby vo formulári sú Broskyňa výplň).
 */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/pismo/sora-600.woff2) format("woff2"); }
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(assets/pismo/dm-sans-latin-ext.woff2) format("woff2");
  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;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(assets/pismo/dm-sans-latin.woff2) format("woff2");
  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;
}

:root {
  /* ── Značka ── */
  --atrament: #1B1433;
  --noc: #2A2150;
  --hmla: #F3EFFC;
  --levandula: #A58FE6;
  --levandula-svetla: #D9CEF5;
  --hlboka: #5B3FB5;
  --hlboka-tmava: #48309A;          /* hover na svetlom */
  --broskyna: #FFC9A3;
  --biela: #FFFFFF;
  --tlm-svetly: #5A5272;
  --tlm-tmavy: #BDB3DD;

  /* ── Tma: čierna. Fialová verzia: --tma: var(--atrament); --tma-vrstva: var(--noc); --tma-sklo: rgba(42, 33, 80, .72);
        --tma-lista: rgba(27, 20, 51, .86); --tma-pilulka: rgba(42, 33, 80, .78); --tma-ziara: rgba(165, 143, 230, .34);
        --tma-ziara-2: rgba(165, 143, 230, .1) ── */
  --tma: #0A0910;
  --tma-vrstva: #17151D;
  --tma-sklo: rgba(23, 21, 29, .72);
  --tma-lista: rgba(10, 9, 16, .86);
  --tma-pilulka: rgba(23, 21, 29, .78);
  --tma-ziara: transparent;
  --tma-ziara-2: transparent;

  /* ── Písmo ── */
  --font-nadpis: "Sora", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(38px, 6vw, 86px);
  --fs-h1: clamp(30px, 4.4vw, 62px);
  --fs-h2: clamp(26px, 3vw, 42px);
  --fs-h3: clamp(19px, 1.9vw, 26px);
  --fs-lead: clamp(18px, 1.5vw, 21px);
  --fs-text: 17px;
  --fs-maly: 15px;
  --fs-label: 13px;
  --fs-eyebrow: clamp(12px, 1vw, 13.5px);
  --tr-display: -.035em;
  --tr-h1: -.03em;
  --tr-h2: -.025em;
  --tr-h3: -.015em;

  /* ── Medzery (4 px mriežka), kontajner, polomery — ako na aktuálnom webe ── */
  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 24px; --m-6: 32px; --m-7: 48px; --m-8: 64px;
  --m-blok: clamp(40px, 6vw, 72px);
  --m-stlpce: clamp(32px, 6vw, 96px);
  --sekcia: clamp(88px, 11vw, 144px);
  --sekcia-mala: clamp(56px, 7vw, 96px);
  --obal: 1080px;
  --okraj: 26px;
  --miera: 34em;
  --r-karta: 28px; --r-panel: 20px; --r-pole: 14px; --r-maly: 8px; --r-pilulka: 999px;
  --cas-rychly: .2s; --cas-stredny: .35s; --cas-pomaly: .6s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.25, .1, .25, 1);
}
@media (min-width: 734px) { :root { --okraj: 40px; } }

/* ── Plochy: ten istý komponent funguje na tme aj na svetle ── */
[data-tema="tmava"], :root {
  --bg: var(--tma);
  --text: var(--hmla);
  --tlmeny: var(--tlm-tmavy);
  --akcent: var(--levandula);
  --linka: rgba(243, 239, 252, .14);
  --linka-silna: rgba(243, 239, 252, .3);
  --plocha: var(--tma-vrstva);
  --tl-bg: var(--levandula);
  --tl-text: var(--atrament);
  --tl-hover: var(--levandula-svetla);
  --sklo: var(--tma-sklo);
}
[data-tema="svetla"] {
  --bg: var(--hmla);
  --text: var(--atrament);
  --tlmeny: var(--tlm-svetly);
  --akcent: var(--hlboka);
  --linka: rgba(27, 20, 51, .12);
  --linka-silna: rgba(27, 20, 51, .3);
  --plocha: var(--biela);
  --tl-bg: var(--hlboka);
  --tl-text: var(--biela);
  --tl-hover: var(--hlboka-tmava);
  --sklo: rgba(255, 255, 255, .7);
}

/* ── Základ ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
section[id] { scroll-margin-top: 72px; }
body {
  margin: 0; background: var(--tma); color: var(--hmla);
  font-family: var(--font); font-size: var(--fs-text); line-height: 1.55; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: var(--r-maly); }
main { display: block; }
.obal { max-width: calc(var(--obal) + 2 * var(--okraj)); margin: 0 auto; padding: 0 var(--okraj); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sekcia { background: var(--bg); color: var(--text); padding: var(--sekcia) 0; position: relative; }
.sekcia--mala { padding: var(--sekcia-mala) 0; }
.sekcia--noc { background: var(--tma-vrstva); }
.sekcia--bez-hora { padding-top: 0; }
.sekcia--biela { background: var(--biela); --plocha: var(--hmla); }

/* ── Typografia ── */
h1, h2, h3, .nadpis { font-family: var(--font-nadpis); font-weight: 600; }
/* Popisok z brandu: DM Sans Medium, verzálky, +12 %; pred ním štvorček = modul zo znaku */
.eyebrow {
  display: block; margin-bottom: var(--m-4); color: var(--akcent);
  font-size: var(--fs-eyebrow); font-weight: 500; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .8em; border-radius: .14em;
  background: currentColor; vertical-align: .02em;
}
.eyebrow--bez { font-size: var(--fs-label); margin-bottom: var(--m-2); }
.eyebrow--bez::before { content: none; }
.nadtitul { display: block; margin: 0 0 var(--m-3); font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-h3); letter-spacing: var(--tr-h3); line-height: 1.25; }
.nadpis-hero { font-size: var(--fs-display); line-height: 1.08; letter-spacing: var(--tr-display); text-wrap: balance; }
.nadpis-1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: var(--tr-h1); text-wrap: balance; }
.nadpis-2 { font-size: var(--fs-h2); line-height: 1.18; letter-spacing: var(--tr-h2); text-wrap: balance; }
.perex { margin-top: var(--m-5); max-width: var(--miera); font-size: var(--fs-lead); font-weight: 450; line-height: 1.45; color: var(--tlmeny); text-wrap: pretty; }
.perex strong { color: var(--text); font-weight: 600; }
.zvyrazni { color: var(--akcent); }
.broskyna { display: inline-block; padding: .08em .6em .12em; border-radius: var(--r-pilulka); background: var(--broskyna); color: var(--atrament); font-size: .88em; font-weight: 600; line-height: 1.3; white-space: nowrap; }

/* ── Tlačidlá ── */
.tlacidlo {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--m-2);
  height: 44px; padding: 0 22px; border-radius: var(--r-pilulka); border: 0; text-decoration: none; cursor: pointer;
  background: var(--tl-bg); color: var(--tl-text);
  font-family: inherit; font-size: var(--fs-text); font-weight: 500; line-height: 24px; white-space: nowrap;
  transition: background-color var(--cas-rychly) var(--ease), transform var(--cas-rychly) var(--ease);
}
.tlacidlo:hover { background: var(--tl-hover); }
.tlacidlo:active { transform: scale(.97); }
.tlacidlo--velke { height: 56px; padding: 0 30px; font-size: 19px; }
.tlacidlo--mini { height: 32px; padding: 0 14px; font-size: var(--fs-label); line-height: 16px; }
.tlacidlo--mini::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.tlacidlo--obrys { background: transparent; color: var(--akcent); box-shadow: inset 0 0 0 1.5px currentColor; }
.tlacidlo--obrys:hover { background: color-mix(in srgb, var(--akcent) 12%, transparent); }
.tlacidlo--text { color: var(--akcent); font-weight: 500; text-decoration: none; text-underline-offset: .18em; }
.tlacidlo--text::after { content: "\00a0›"; content: "\00a0›" / ""; }
.tlacidlo--text:hover { text-decoration: underline; }
.tlacidla { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-3) var(--m-5); }
.tlacidla--stred { justify-content: center; }
.tlacidla > .tlacidlo--text { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 480px) {
  .tlacidla { flex-direction: column; align-items: stretch; gap: var(--m-3); }
  .tlacidla > .tlacidlo { width: 100%; }
  .tlacidla > .tlacidlo--text { align-self: center; }
}

/* ── Odznak a kapsula ceny ── */
.odznak {
  display: inline-flex; align-items: center; gap: var(--m-2); height: 32px; padding: 0 14px; border-radius: var(--r-pilulka);
  background: color-mix(in srgb, var(--akcent) 14%, transparent); color: var(--akcent);
  font-size: var(--fs-maly); font-weight: 600; line-height: 1; white-space: nowrap;
}
.odznak::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.kapsula {
  display: inline-flex; align-items: center; gap: var(--m-5); padding: var(--m-3) var(--m-3) var(--m-3) var(--m-5);
  border-radius: var(--r-panel); background: var(--sklo); box-shadow: inset 0 0 0 1px var(--linka);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--text); font-size: var(--fs-maly); line-height: 1.35; font-weight: 500; text-align: left;
}
.kapsula span { display: block; color: var(--tlmeny); font-weight: 400; }
@media (max-width: 480px) {
  .kapsula { flex-direction: column; align-items: stretch; gap: var(--m-3); padding: var(--m-4); text-align: center; }
}

/* ══ Navigácia ═════════════════════════════════════════════════════════════
   Ako teraz: sklenená lišta 48 px, logo vľavo, odkazy v strede, tlačidlo vpravo. Bez panela „Produkty“ —
   produkty sú tri, stačia v lište rovno. */
.gnav { position: sticky; top: 0; z-index: 30; color: var(--hmla); }
.gnav-lista { background: var(--tma-lista); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }
.gnav-vnutro { max-width: calc(var(--obal) + 2 * var(--okraj)); margin: 0 auto; padding: 0 var(--okraj); height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--m-6); }
.gnav-logo { justify-self: start; display: flex; align-items: center; }
.gnav-logo img { width: 104px; height: auto; }
.gnav-odkazy { display: flex; align-items: center; gap: var(--m-7); font-size: var(--fs-label); }
.gnav-odkazy a, .gnav-produkty { display: inline-flex; align-items: center; height: 48px; text-decoration: none; color: var(--tlm-tmavy); font-size: inherit; transition: color var(--cas-rychly); }
.gnav-odkazy a:hover, .gnav-odkazy a[aria-current="page"], .gnav-produkty:hover, .gnav-produkty.je-aktualna, .gnav.je-rozbalena .gnav-produkty { color: var(--hmla); }
.gnav-lista { position: relative; z-index: 2; }

/* Panel „Produkty“ pod lištou (späť 3. 11.): klik aj prejdenie myšou, clona pod ním */
.produkty-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--tma-lista); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgba(243, 239, 252, .1);
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height var(--cas-stredny) var(--ease-out), visibility 0s var(--cas-stredny);
}
.gnav.je-rozbalena .produkty-panel { max-height: 320px; visibility: visible; transition: max-height var(--cas-pomaly) var(--ease-out); }
.produkty-vnutro { max-width: calc(var(--obal) + 2 * var(--okraj)); margin: 0 auto; padding: var(--m-6) var(--okraj) var(--m-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-7); }
.produkt-odkaz { display: block; text-decoration: none; opacity: 0; transform: translateY(-8px); transition: opacity var(--cas-rychly) var(--ease), transform var(--cas-stredny) var(--ease-out); }
.gnav.je-rozbalena .produkt-odkaz { opacity: 1; transform: none; transition: opacity var(--cas-stredny) var(--ease) var(--d, 0s), transform var(--cas-pomaly) var(--ease-out) var(--d, 0s); }
.gnav.je-rozbalena .produkt-odkaz:nth-child(2) { --d: .05s; }
.gnav.je-rozbalena .produkt-odkaz:nth-child(3) { --d: .1s; }
.produkt-nazov { display: block; font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-lead); letter-spacing: var(--tr-h3); line-height: 1.3; color: var(--hmla); }
.produkt-popis { display: block; margin-top: 4px; font-size: var(--fs-maly); line-height: 1.45; color: var(--tlm-tmavy); }
.produkt-odkaz:hover .produkt-nazov, .produkt-odkaz[aria-current="page"] .produkt-nazov { color: var(--levandula); }
.gnav-clona { position: fixed; inset: 0; z-index: 1; background: rgba(10, 9, 16, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity var(--cas-stredny) var(--ease), visibility 0s var(--cas-stredny); }
.gnav.je-rozbalena .gnav-clona { opacity: 1; visibility: visible; transition: opacity var(--cas-stredny) var(--ease); }
.gnav.bez-prechodu *, .gnav.bez-prechodu { transition: none !important; }
.gnav-cta { grid-column: 3; justify-self: end; --tl-bg: var(--levandula); --tl-text: var(--atrament); --tl-hover: var(--levandula-svetla); }
.gnav-mobil { display: none; grid-column: 3; justify-self: end; position: relative; }
.gnav-mobil summary { list-style: none; display: block; width: 44px; height: 44px; margin-right: -10px; position: relative; cursor: pointer; }
.gnav-mobil summary::-webkit-details-marker { display: none; }
.gnav-mobil summary i { position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 2px; background: var(--hmla); transition: transform var(--cas-stredny) var(--ease-out); }
.gnav-mobil summary i:nth-child(1) { top: 18px; }
.gnav-mobil summary i:nth-child(2) { top: 25px; }
.gnav-mobil[open] summary i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.gnav-mobil[open] summary i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.gnav-mobil nav {
  position: fixed; left: 0; right: 0; top: 48px; height: calc(100vh - 48px); height: calc(100dvh - 48px); overflow-y: auto; z-index: 1;
  display: flex; flex-direction: column; padding: var(--m-5) var(--okraj) var(--m-7);
  background: var(--tma);
}
.gnav-mobil nav a { font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-h2); letter-spacing: var(--tr-h2); text-decoration: none; padding: var(--m-3) 0; color: var(--hmla); }
.gnav-mobil nav a span { display: block; font-family: var(--font); font-weight: 400; font-size: var(--fs-maly); letter-spacing: 0; color: var(--tlm-tmavy); margin-top: 2px; }
.gnav-mobil nav a[aria-current="page"] { color: var(--levandula); }
.gnav-mobil-nadpis { margin: var(--m-5) 0 var(--m-1); color: var(--levandula); }
.gnav-mobil-nadpis:first-child { margin-top: 0; }
@media (max-width: 733px) {
  .gnav-odkazy, .gnav-cta, .produkty-panel, .gnav-clona { display: none; }
  .gnav-mobil { display: block; }
}

/* Plávajúca pilulka produktu (po prvej obrazovke) */
.lnav {
  position: fixed; top: 60px; left: 50%; z-index: 25; width: min(560px, calc(100% - 24px)); height: 52px;
  transform: translate(-50%, -14px); opacity: 0; visibility: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 20px; border-radius: var(--r-panel);
  background: var(--tma-pilulka); color: var(--hmla);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 252, .14), 0 16px 40px rgba(27, 20, 51, .3);
  transition: opacity var(--cas-stredny) var(--ease), transform var(--cas-pomaly) var(--ease-out), visibility 0s var(--cas-stredny), background-color var(--cas-pomaly) var(--ease);
  --tl-bg: var(--levandula); --tl-text: var(--atrament); --tl-hover: var(--levandula-svetla); --akcent: var(--levandula);
}
.lnav.je-vidno { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--cas-stredny) var(--ease), transform var(--cas-pomaly) var(--ease-out), background-color var(--cas-pomaly) var(--ease); }
.lnav.je-svetla { background: rgba(255, 255, 255, .78); color: var(--atrament); box-shadow: inset 0 0 0 1px rgba(27, 20, 51, .1), 0 10px 30px rgba(27, 20, 51, .1); --tl-bg: var(--hlboka); --tl-text: var(--biela); --tl-hover: var(--hlboka-tmava); --akcent: var(--hlboka); }
.lnav-nazov { font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-text); letter-spacing: var(--tr-h3); text-decoration: none; color: inherit; }
.lnav-odkazy { display: flex; align-items: center; gap: var(--m-3); }
.lnav-odkaz { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pilulka); font-size: var(--fs-label); font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1px currentColor; opacity: .85; }
.lnav-odkaz:hover { opacity: 1; }
@media (max-width: 480px) { .lnav-odkaz { display: none; } .lnav { top: 56px; } }

/* ══ Úvod stránky: centrovaný plagát ══ */
.hero { background: var(--bg); color: var(--text); text-align: center; padding: calc(var(--sekcia) * .55) 0 0; overflow: hidden; }
.hero .nadpis-hero { margin: 0 auto; max-width: 13em; }
.hero .perex { margin-left: auto; margin-right: auto; }
.hero-kapsula { margin-top: var(--m-6); }
.hero-tlacidla { margin-top: var(--m-6); }
.hero-vizual { position: relative; margin-top: var(--m-8); display: flex; justify-content: center; align-items: flex-start; }
[data-tema="tmava"] .hero-vizual::before { content: ""; position: absolute; left: 50%; top: 0; width: min(720px, 100%); height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 62%, var(--tma-ziara), var(--tma-ziara-2) 46%, transparent 70%); pointer-events: none; }
.hero-vizual > * { position: relative; }
.hero-karta { width: min(340px, 72vw); }
.hero-karta img { width: 100%; height: auto; border-radius: 6% / 4.4%; box-shadow: 0 0 0 1px rgba(243, 239, 252, .2), 0 28px 56px -18px rgba(0, 0, 0, .7); }
.hero-rez { height: clamp(300px, 36vw, 430px); overflow: hidden; }

/* Kruhy zo znaku: tenké levanduľové oblúky so stredom dole v strede úvodu — produkt z nich vychádza ako
   z obežnej dráhy. Najväčší končí tesne pod tlačidlami, cez text nejdú. Bez prechodov a žiary, len plná
   čiara. Pri prvej návšteve stránky v relácii sa nakreslia, po F5 už stoja (html.je-videne). */
.hero-vizual > .ciary { position: absolute; left: 50%; bottom: 0; z-index: 0; height: calc(200% - 24px); width: auto; aspect-ratio: 1; max-width: none; transform: translate(-50%, 50%); overflow: visible; pointer-events: none; }
.ciary circle { fill: none; stroke: var(--levandula); stroke-width: 1.25; vector-effect: non-scaling-stroke; transform: rotate(180deg); transform-origin: 50% 50%; }
.ciary circle:nth-child(1) { opacity: .62; }
.ciary circle:nth-child(2) { opacity: .36; }
.ciary circle:nth-child(3) { opacity: .18; }
html.js:not(.je-videne) .ciary circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciara-kresli 1.8s var(--ease-out) forwards; }
html.js:not(.je-videne) .ciary circle:nth-child(2) { animation-delay: .18s; }
html.js:not(.je-videne) .ciary circle:nth-child(3) { animation-delay: .36s; }
@keyframes ciara-kresli { to { stroke-dashoffset: 0; } }
/* Telefón, ktorý z úvodu vyčnieva (Menu) */
.hero-telefon { width: clamp(250px, 26vw, 330px); }

/* ── Pás dôvery pod úvodom ── */
.dovera { background: var(--tma-vrstva); color: var(--hmla); }
.dovera-vnutro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--m-3) var(--m-6); padding: var(--m-6) 0; text-align: center; }
.dovera .eyebrow { margin: 0; color: var(--tlm-tmavy); }
.dovera .eyebrow::before { content: none; }
.dovera img { height: 26px; width: auto; }
.dovera p { color: var(--tlm-tmavy); font-size: var(--fs-maly); }
.dovera p b { color: var(--hmla); font-weight: 600; }

/* ══ Obsahové sekcie ══ */
.hlava { max-width: 40em; }
.hlava--stred { margin-left: auto; margin-right: auto; text-align: center; }
.hlava--stred .perex { margin-left: auto; margin-right: auto; }
.hlava + * { margin-top: var(--m-blok); }

/* Veta na celú šírku (papierová kartička, papierový lístok) */
.manifest { font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-h2); line-height: 1.28; letter-spacing: var(--tr-h2); color: var(--tlmeny); max-width: 24em; text-wrap: pretty; }
.manifest strong { display: block; margin-top: .6em; color: var(--akcent); font-weight: 600; }

/* Text vľavo, vizuál vpravo — vždy */
.rozdelenie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m-stlpce); align-items: center; }
.rozdelenie > .vizual { justify-self: center; }
@media (max-width: 899px) { .rozdelenie { grid-template-columns: minmax(0, 1fr); } .rozdelenie > .vizual { justify-self: center; } }

/* Pás faktov — vlasová linka hore, najviac tri stĺpce */
.fakty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-5) var(--m-6); padding-top: var(--m-6); border-top: 1px solid var(--linka); }
.fakty--styri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakty--dva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fakty--dva p { max-width: 30em; }
.fakty > * { display: flex; flex-direction: column; align-items: flex-start; }
.fakty h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tr-h3); color: var(--text); }
.fakty p { margin-top: var(--m-2); color: var(--tlmeny); font-size: var(--fs-text); max-width: 22em; }
.fakty--cisla h3 { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--tr-h2); }
.fakty .cislo { margin-bottom: var(--m-4); }
@media (max-width: 899px) { .fakty--styri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 733px) { .fakty, .fakty--styri, .fakty--dva { grid-template-columns: minmax(0, 1fr); row-gap: var(--m-6); } }

/* Číslo kroku — štvorček so zaoblenými rohmi ako modul zo znaku */
.cislo { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--plocha); color: var(--akcent); font-size: var(--fs-maly); font-weight: 700; line-height: 1; letter-spacing: 0; }
.sekcia--noc .cislo, [data-tema="tmava"] .cislo { background: var(--tma-vrstva); }
.sekcia--noc .cislo { background: var(--tma); }

/* Kroky s telefónom: zoznam vľavo, skutočná obrazovka vpravo, klik prepína */
.kroky-tel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m-stlpce); align-items: center; }
.kroky-zoznam { display: grid; gap: var(--m-2); max-width: 30em; }
.krok { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--m-4); padding: var(--m-4) var(--m-5) var(--m-4) var(--m-4); border-radius: var(--r-panel); opacity: .55; transition: opacity var(--cas-stredny) var(--ease), background-color var(--cas-stredny) var(--ease); }
.krok:hover { opacity: .85; }
.krok[aria-pressed="true"] { opacity: 1; background: var(--plocha); }
.krok .cislo { grid-row: 1 / 3; background: var(--bg); }
.krok[aria-pressed="true"] .cislo { background: var(--akcent); color: var(--tl-text); }
.krok h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tr-h3); }
.krok p { margin-top: var(--m-1); color: var(--tlmeny); font-size: var(--fs-text); }
@media (max-width: 899px) { .kroky-tel { grid-template-columns: minmax(0, 1fr); justify-items: center; } .kroky-zoznam { justify-self: stretch; max-width: none; } }

/* Kroky so skrolom ([data-kroky-skrol], Alex 3. 11. na /benefit): kroky s telefónom sa pripnú v strede okna
   a skrol ich prevedie po bodoch. Dráha je dlhšia o (n − 1) × 70vh; --h (výšku pripnutého bloku) dopĺňa
   app.js. Trieda .je-pripnute len keď sa blok zmestí do okna — inak ostáva klikanie po krokoch. */
.je-pripnute .kroky-draha { height: calc(var(--h, 640px) + (var(--n) - 1) * 70vh); }
.je-pripnute .kroky-tel { position: sticky; top: max(124px, calc(50vh - var(--h, 640px) / 2 + 24px)); }   /* pod plávajúcou lištou */
.je-pripnute .kroky-tel .iphone { width: min(clamp(240px, 24vw, 300px), calc((100vh - 148px) * .4846)); }       /* nízke okno: menší telefón */
.je-pripnute .krok { cursor: default; }
@media (max-width: 899px) {
  /* Telefón navrchu, pod ním len aktuálny bod — kroky ležia na sebe, výška je podľa najdlhšieho */
  .je-pripnute .kroky-tel { gap: var(--m-5); }
  .je-pripnute .kroky-tel .iphone { order: -1; width: 190px; }
  .je-pripnute .kroky-tel { top: 116px; }
  .je-pripnute .kroky-zoznam { display: grid; }
  .je-pripnute .krok { grid-area: 1 / 1; align-self: start; }
  .je-pripnute .krok[aria-pressed="false"] { opacity: 0; visibility: hidden; }
}

/* ── iPhone (rám ako na aktuálnom webe, skutočné obrazovky appky) ── */
.iphone { position: relative; width: clamp(240px, 24vw, 300px); aspect-ratio: 439 / 906; isolation: isolate; flex: none; }
.iphone::before { content: ""; position: absolute; left: .57%; right: .57%; top: 0; bottom: 0; border-radius: 16% / 7.7%; box-shadow: 0 26px 44px rgba(27, 20, 51, .22), 0 6px 12px rgba(27, 20, 51, .1); pointer-events: none; }
.iphone-displej { position: absolute; left: 4.2141%; top: 1.766%; width: 91.5718%; height: 96.468%; overflow: hidden; border-radius: 10% / 4.6%; background: #fff; }
.iphone-obr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity var(--cas-stredny) var(--ease); }
.iphone-obr.je-aktivna { opacity: 1; }
.iphone-stav { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 2; color: #000; pointer-events: none; }
.iphone-ram { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ── Upozornenie na zamknutej obrazovke ── */
.notif { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: var(--m-3); align-items: start; width: min(380px, 100%); padding: 14px 16px; border-radius: 22px; background: var(--sklo); box-shadow: inset 0 0 0 1px var(--linka); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); text-align: left; color: var(--text); }
.notif-ikona { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 10px; background: var(--plocha); display: grid; place-items: center; color: var(--akcent); }
.notif-ikona svg { width: 22px; height: 22px; }
.notif b { font-size: var(--fs-maly); font-weight: 600; line-height: 1.3; }
.notif time { font-size: var(--fs-label); color: var(--tlmeny); line-height: 1.5; }
.notif p { grid-column: 2 / 4; margin-top: 2px; font-size: var(--fs-maly); line-height: 1.35; color: var(--text); }
.notif-rad { display: grid; gap: var(--m-3); justify-items: start; }

/* ── Vzorkovník kariet ── */
.vzorky { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--m-4); }
.vzorka { display: block; }
.vzorka img { width: 100%; height: auto; border-radius: 6% / 4.4%; box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.vzorka figcaption { margin-top: var(--m-3); font-size: var(--fs-maly); font-weight: 500; color: var(--text); text-align: center; }
@media (max-width: 899px) {
  .vzorky { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--m-4); margin: 0 calc(-1 * var(--okraj)); padding: 0 var(--okraj) var(--m-4); scrollbar-width: none; }
  .vzorky::-webkit-scrollbar { display: none; }
  .vzorka { flex: none; width: 150px; scroll-snap-align: start; }
}

/* ── Plochy-dlaždice (úvod, Benefit) ── */
.dlazdice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-4); }
.dlazdica { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(420px, 44vw, 560px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-karta); background: var(--plocha); color: var(--text); text-align: center; align-items: center; }
.dlazdica .nadtitul { margin-bottom: var(--m-1); }
.dlazdica .nadpis-2 { max-width: 12em; }
.dlazdica .tlacidla { margin-top: var(--m-5); }
.dlazdica-vizual { margin-top: auto; padding-top: var(--m-6); display: flex; justify-content: center; }
.dlazdica--siroka { grid-column: 1 / -1; min-height: 0; }
.dlazdica--svetla { background: var(--hmla); color: var(--atrament); --tlmeny: var(--tlm-svetly); --akcent: var(--hlboka); --tl-bg: var(--hlboka); --tl-text: var(--biela); --tl-hover: var(--hlboka-tmava); --linka: rgba(27, 20, 51, .12); }
@media (max-width: 733px) { .dlazdice { grid-template-columns: minmax(0, 1fr); } }

/* ── Karta Qivelo Benefit (skutočná karta z Apple Wallet, fotka nahradená siluetou) ── */
.bkarta { display: block; width: min(340px, 78vw); height: auto; aspect-ratio: 838 / 1139; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .6)); }

/* ── Zoznam „Ako to zapadá“ (riadky so stavom) ── */
.riadky { border-top: 1px solid var(--linka); }
.riadky li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m-2) var(--m-5); align-items: baseline; padding: var(--m-5) 0; border-bottom: 1px solid var(--linka); }
.riadky h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); line-height: 1.25; }
.riadky p { grid-column: 1; margin-top: var(--m-1); color: var(--tlmeny); max-width: 36em; }
.riadky .odznak { grid-column: 2; grid-row: 1; }
.stav { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pilulka); font-size: var(--fs-label); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linka-silna); color: var(--tlmeny); }
.stav--hotove { background: var(--levandula); color: var(--atrament); box-shadow: none; }
.stav--navrh { background: var(--broskyna); color: var(--atrament); box-shadow: none; }

/* ══ Cenník ══ */
.cena { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--m-stlpce); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-karta); background: var(--plocha); color: var(--text); box-shadow: inset 0 0 0 1px var(--linka); }
.cena-nazov { font-size: var(--fs-h3); font-family: var(--font-nadpis); font-weight: 600; letter-spacing: var(--tr-h3); }
.cena-popis { margin-top: var(--m-1); color: var(--tlmeny); }
.cena-suma { margin-top: var(--m-5); font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-display); line-height: 1; letter-spacing: var(--tr-display); }
.cena-suma small { display: block; margin-top: var(--m-3); font-family: var(--font); font-weight: 450; font-size: var(--fs-maly); letter-spacing: 0; color: var(--tlmeny); }
.cena-odznaky { display: flex; flex-wrap: wrap; gap: var(--m-2); margin-top: var(--m-5); }
.cena-text { margin-top: var(--m-5); max-width: 28em; color: var(--tlmeny); font-size: var(--fs-maly); }
.cena .tlacidla { margin-top: var(--m-6); }
.cena-zoznam { align-self: center; }
.cena-zoznam .eyebrow { margin-bottom: var(--m-4); }
.cena-zoznam li { position: relative; padding: var(--m-3) 0 var(--m-3) 28px; border-top: 1px solid var(--linka); }
.cena-zoznam li:first-of-type { border-top: 0; }
.cena-zoznam li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 10px; height: 10px; border-radius: 3px; background: var(--akcent); }
.cena-zoznam b { display: block; font-weight: 600; color: var(--text); }
.cena-zoznam span { display: block; color: var(--tlmeny); font-size: var(--fs-maly); }
.cena-priplatok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-3) var(--m-6); margin-top: var(--m-4); padding: var(--m-5) clamp(28px, 4vw, 56px); border-radius: var(--r-karta); box-shadow: inset 0 0 0 1px var(--linka); }
.cena-priplatok b { font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.cena-priplatok span { display: block; color: var(--tlmeny); font-size: var(--fs-maly); }
.cena-pod { margin-top: var(--m-6); text-align: center; color: var(--tlmeny); font-size: var(--fs-maly); }
.cena-pod .tlacidlo--text { margin-left: var(--m-3); }
@media (max-width: 899px) { .cena { grid-template-columns: minmax(0, 1fr); } }

/* Dva balíky vedľa seba (úvod) */
.cennik-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-4); }
.cennik-dva .cena { grid-template-columns: minmax(0, 1fr); gap: var(--m-5); }
.cennik-dva .cena-suma { font-size: var(--fs-h1); }
@media (max-width: 733px) { .cennik-dva { grid-template-columns: minmax(0, 1fr); } }

/* ══ Kontakt a päta ══ */
.kontakt { position: relative; background: var(--hmla); color: var(--atrament); text-align: center; padding: var(--sekcia) 0; }
.cennik-sekcia + .kontakt { padding-top: var(--sekcia-mala); }
.kontakt-obal { display: flex; flex-direction: column; align-items: center; }
.kontakt .perex { margin-left: auto; margin-right: auto; }
.kontakt-tlacidla { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-3); margin-top: var(--m-7); }
.kontakt-formular { margin-top: var(--m-4); }
.kontakt-formular .tlacidlo--text { display: inline-flex; align-items: center; min-height: 44px; }
.kontakt-podpis { margin-top: var(--m-5); color: var(--tlm-svetly); font-size: var(--fs-maly); }
.kontakt[data-tema="tmava"] { background: var(--tma-vrstva); color: var(--hmla); }
.kontakt[data-tema="tmava"] .perex { color: var(--tlm-tmavy); }
.kontakt[data-tema="tmava"] .kontakt-podpis { color: var(--tlm-tmavy); }
@media (max-width: 733px) {
  .kontakt-tlacidla { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 340px; }
}

.pata { background: var(--hmla); color: var(--tlm-svetly); font-size: var(--fs-label); line-height: 1.5; padding: var(--m-6) 0 max(var(--m-5), env(safe-area-inset-bottom)); border-top: 1px solid rgba(27, 20, 51, .12); --akcent: var(--hlboka); }
.pata[data-tema="tmava"] { background: var(--tma); color: var(--tlm-tmavy); border-top-color: rgba(243, 239, 252, .14); --akcent: var(--levandula); }
.pata a { color: inherit; text-decoration: none; }
.pata a:hover { text-decoration: underline; }
.pata-stlpce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr; gap: var(--m-5); padding-bottom: var(--m-5); border-bottom: 1px solid rgba(27, 20, 51, .12); }
.pata[data-tema="tmava"] .pata-stlpce { border-bottom-color: rgba(243, 239, 252, .14); }
.pata h3 { font-family: var(--font); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--akcent); margin-bottom: var(--m-2); }
.pata-stlpce a { display: block; width: max-content; padding: 3px 0; color: var(--tlm-svetly); }
.pata-stlpce a:hover { color: var(--atrament); }
.pata[data-tema="tmava"] .pata-stlpce a { color: var(--tlm-tmavy); }
.pata[data-tema="tmava"] .pata-stlpce a:hover { color: var(--hmla); }
.pata-spodok { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--m-2); padding-top: var(--m-4); }
@media (max-width: 733px) {
  .pata-stlpce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pata-kontakt, .pata-motto { grid-column: 1 / -1; }
}
@media (hover: none), (pointer: coarse) { .pata-stlpce a { display: flex; align-items: center; min-height: 44px; padding: 0; } }

/* ══ Podstránky: Cenník, Otázky, Kto sme, Kontakt ══ */
.hero--text { padding-bottom: var(--sekcia-mala); }
.hero--text .nadpis-hero { max-width: 14em; }
.hero-poznamka { margin-top: var(--m-5); color: var(--tlmeny); font-size: var(--fs-maly); }
.hero-poznamka a { color: var(--akcent); text-decoration: none; font-weight: 500; }
.hero-poznamka a:hover { text-decoration: underline; }

/* Preskok na skupinu otázok */
.chipy { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--m-2); margin-top: var(--m-6); }
.chipy a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--r-pilulka); box-shadow: inset 0 0 0 1px var(--linka-silna); color: var(--text); font-size: var(--fs-maly); font-weight: 500; text-decoration: none; transition: background-color var(--cas-rychly) var(--ease); }
.chipy a:hover { background: var(--plocha); }

/* Otázky: skupina = nadpis vľavo, rozbaľovacie odpovede vpravo */
.skupina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--m-stlpce); align-items: start; }
.skupina > h2 { font-size: var(--fs-h2); line-height: 1.18; letter-spacing: var(--tr-h2); position: sticky; top: 72px; }
@media (max-width: 899px) { .skupina { grid-template-columns: minmax(0, 1fr); gap: var(--m-5); } .skupina > h2 { position: static; } }
.faq { border-top: 1px solid var(--linka); }
.faq details { border-bottom: 1px solid var(--linka); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--m-5); padding: var(--m-5) 0; cursor: pointer; list-style: none; font-family: var(--font-nadpis); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: var(--tr-h3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .porovnanie-plus { content: ""; flex: none; width: 14px; height: 14px; color: var(--akcent); background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--cas-stredny) var(--ease-out); }
.faq details[open] > summary::after, .faq details[open] .porovnanie-plus { transform: rotate(45deg); }
.faq details p { padding: 0 var(--m-7) var(--m-5) 0; max-width: 38em; color: var(--tlmeny); }
.faq details p + p { margin-top: calc(-1 * var(--m-2)); }
.faq details a { color: var(--akcent); text-underline-offset: .18em; }
.faq summary:hover { color: var(--akcent); }

/* Cenník: „V cene“ — porovnanie dvoch balíkov, riadky sa rozbaľujú */
.porovnanie-hlava { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 14px; column-gap: var(--m-4); align-items: end; padding-bottom: var(--m-4); }
.porovnanie-hlava .eyebrow { margin: 0; }
.p-bal { text-align: center; font-size: var(--fs-label); line-height: 1.3; color: var(--tlmeny); }
.p-bal b { display: block; font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-maly); color: var(--text); }
.porovnanie-skupina { margin: var(--m-7) 0 var(--m-3); }
.porovnanie-skupina:first-of-type { margin-top: 0; }
.porovnanie .faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 14px; column-gap: var(--m-4); align-items: center; font-size: clamp(16px, 1.4vw, 19px); }
.porovnanie .faq summary::after { content: none; }
.porovnanie .faq details p { padding-right: 0; }
.znak { justify-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.znak--ano { background: var(--akcent); }
.znak--ano::after { content: ""; width: 11px; height: 6px; margin-top: -2px; border-left: 2px solid var(--tl-text); border-bottom: 2px solid var(--tl-text); transform: rotate(-45deg); }
.znak--nie::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: var(--linka-silna); }
@media (max-width: 733px) {
  .porovnanie-hlava, .porovnanie .faq summary { grid-template-columns: minmax(0, 1fr) 56px 56px 14px; column-gap: var(--m-3); }
  .p-bal { font-size: 11px; }
}

/* Kto sme: veta na celú šírku, údaj o referencii */
.referencia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-5) var(--m-7); }
.referencia img { height: 30px; width: auto; }
.udaj { font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--tr-h1); }
.udaj small { display: block; margin-top: var(--m-2); font-family: var(--font); font-weight: 450; font-size: var(--fs-maly); letter-spacing: 0; color: var(--tlmeny); }

/* Kontakt: formulár po krokoch */
.formular { max-width: 640px; margin: 0 auto; }
.pokrok { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--m-2); margin-bottom: var(--m-6); }
.pokrok i { height: 4px; border-radius: 2px; background: var(--linka-silna); transition: background-color var(--cas-stredny) var(--ease); }
.pokrok i.je-hotovy { background: var(--akcent); }
.formular .eyebrow { margin-bottom: var(--m-3); }
.formular h2 { font-size: var(--fs-h2); line-height: 1.18; letter-spacing: var(--tr-h2); }
.formular-krok[hidden] { display: none; }
.formular-krok > .perex { margin-top: var(--m-3); font-size: var(--fs-text); }
.volby { display: grid; gap: var(--m-3); margin-top: var(--m-6); }
.volba { position: relative; display: block; padding: var(--m-4) var(--m-5); border-radius: var(--r-panel); background: var(--plocha); box-shadow: inset 0 0 0 1px var(--linka); cursor: pointer; transition: box-shadow var(--cas-rychly) var(--ease), background-color var(--cas-rychly) var(--ease); }
.volba:hover { box-shadow: inset 0 0 0 1px var(--linka-silna); }
.volba input { position: absolute; opacity: 0; pointer-events: none; }
.volba b { display: block; font-family: var(--font-nadpis); font-weight: 600; font-size: var(--fs-h3); letter-spacing: var(--tr-h3); line-height: 1.25; }
.volba span { display: block; margin-top: 2px; color: var(--tlmeny); font-size: var(--fs-maly); }
.volba:has(input:checked) { box-shadow: inset 0 0 0 2px var(--akcent); }
.volba:has(input:focus-visible), .pilulky label:has(input:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 3px; }
.pole { margin-top: var(--m-5); }
.pole-nazov { display: block; margin-bottom: var(--m-2); font-weight: 500; }
.pole-nazov small { margin-left: var(--m-2); color: var(--tlmeny); font-weight: 400; font-size: var(--fs-maly); }
.pole input[type="text"], .pole input[type="tel"], .pole input[type="email"], .pole textarea { display: block; width: 100%; height: 52px; padding: 0 var(--m-4); border: 0; border-radius: var(--r-pole); background: var(--plocha); color: var(--text); font: inherit; box-shadow: inset 0 0 0 1px var(--linka-silna); transition: box-shadow var(--cas-rychly) var(--ease); }
.pole textarea { height: 132px; padding: var(--m-3) var(--m-4); resize: vertical; line-height: 1.45; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--tlmeny); opacity: .7; }
.pole input:focus, .pole textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--akcent); }
.pole .je-chybne { box-shadow: inset 0 0 0 2px var(--broskyna); }
.pilulky { display: flex; flex-wrap: wrap; gap: var(--m-2); }
.pilulky label { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 var(--m-4); border-radius: var(--r-pilulka); box-shadow: inset 0 0 0 1px var(--linka-silna); font-size: var(--fs-maly); font-weight: 500; cursor: pointer; transition: background-color var(--cas-rychly) var(--ease); }
.pilulky label:hover { background: var(--plocha); }
.pilulky input { position: absolute; opacity: 0; pointer-events: none; }
.pilulky label:has(input:checked) { background: var(--tl-bg); color: var(--tl-text); box-shadow: none; }
.suhlas { display: flex; gap: var(--m-3); align-items: flex-start; margin-top: var(--m-5); color: var(--tlmeny); font-size: var(--fs-maly); cursor: pointer; }
.suhlas input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--levandula); }
.chyba { display: none; margin-top: var(--m-2); padding: 4px 10px; border-radius: var(--r-maly); background: var(--broskyna); color: var(--atrament); font-size: var(--fs-maly); font-weight: 500; line-height: 1.4; }
.chyba.je-vidno { display: inline-block; }
.formular-akcie { display: flex; align-items: center; justify-content: space-between; gap: var(--m-4); margin-top: var(--m-7); }
.formular [hidden] { display: none !important; }
.formular-hotovo { text-align: center; }
.formular-hotovo .tlacidla { justify-content: center; margin-top: var(--m-6); }
.formular-poznamka { margin-top: var(--m-6); color: var(--tlmeny); font-size: var(--fs-label); text-align: center; }

/* Právne stránky — text v stĺpci ~70 znakov na Hmle; odkazy a odrážky v Hlbokej fialovej */
.pravne { max-width: 70ch; }
.pravne h2 { margin: var(--m-7) 0 var(--m-3); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tr-h3); }
.pravne h2:first-child { margin-top: 0; }
.pravne p, .pravne ul { margin: 0 0 var(--m-4); }
.pravne ul { padding-left: 1.2em; list-style: disc; }
.pravne li { margin-bottom: var(--m-2); }
.pravne li::marker { color: var(--akcent); }
.pravne strong { font-weight: 600; }
.pravne a { color: var(--akcent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.pravne a:hover { text-decoration-thickness: 2px; }

/* ══ Pohyb: jemné vynorenie pri prvom zobrazení (len s JS, nie pri „obmedziť pohyb“) ══ */
html.js [data-vstup] { opacity: 0; transform: translateY(20px); transition: opacity var(--cas-pomaly) var(--ease-out), transform var(--cas-pomaly) var(--ease-out); }
html.js [data-vstup].je-vidno, html.je-videne [data-vstup] { opacity: 1; transform: none; }
html.je-videne [data-vstup] { transition: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-vstup] { opacity: 1; transform: none; transition: none; }
  html.js .ciary circle { animation: none !important; stroke-dashoffset: 0 !important; }
  @view-transition { navigation: none; }
  .iphone-obr, .krok, .lnav, .tlacidlo { transition: none; }
}