/* Finch web funnel (fitnacestach.cz/duffy/) - sdílený styl.
   Tokeny 1:1 podle appky (/opt/fnc-finch/web/styl.css): Nunito, oranžová
   #ff7300, tmavá #131f24 / #2b3a42, lip stíny tlačítek, Caveat eyebrow.
   Tmavý/světlý režim podle prefers-color-scheme (appka má oba). */

:root {
  --pismo: "Nunito", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fnc: #ff7300;
  --fnc-tmava: #cc5c00;
  --tmava: #2b3a42;
  --bg: #131f24;
  --bg-2: #202f36;
  --obrys: #37464f;
  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.64);
  --text-3: rgba(255,255,255,.4);
  --zelena: #16a34a;
  --zelena-popis: #86d9a5;
  --zlata: #ffc800;
  --cervena: #ff4b4b;
  --sirka: 560px;
  --lip: rgba(0,0,0,.22);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) and (min-width: 100000px) {
  :root {
    --bg: #ffffff;
    --bg-2: #f4f4f2;
    --obrys: #e5e5e5;
    --text: rgb(40,38,34);
    --text-2: rgba(40,38,34,.66);
    --text-3: rgba(40,38,34,.42);
    --zelena: #2f9e57;
    --zelena-popis: #2f9e57;
    color-scheme: light;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--pismo); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--fnc); }
button { font: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 900; }
h1 { font-size: 32px; letter-spacing: -.01em; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0; }
.stred { text-align: center; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.male { font-size: 14px; }
.eyebrow {
  font-family: "Caveat", cursive; font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--fnc); transform: rotate(-2deg); transform-origin: left bottom;
  display: inline-block; margin: 0 0 6px 2px;
}
.stred .eyebrow { transform-origin: center bottom; }

/* rozvržení */
.obal { max-width: var(--sirka); margin: 0 auto; padding: 0 16px; }
.sekce { padding: 36px 0 8px; }
.sekce + .sekce { padding-top: 40px; }
.sekce-nadpis { margin: 0 0 18px; }
.sekce-nadpis h2 { margin-top: 2px; }

/* hlavička */
.hlavicka {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 10px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 900; font-size: 22px; }
.logo img { width: 40px; height: 40px; border-radius: 11px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.hlavicka .od { font-size: 13px; font-weight: 800; color: var(--text-3); text-align: right; line-height: 1.2; }

/* tlačítka s lip stínem jako v appce */
.tlacitko {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 18px; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--fnc); color: #fff; font-weight: 900; font-size: 19px; letter-spacing: .01em;
  padding: 18px 16px 21px; box-shadow: inset 0 -6px 0 var(--lip);
  transition: transform .08s ease, box-shadow .08s ease, opacity .15s ease;
}
.tlacitko:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--lip); }
.tlacitko:disabled, .tlacitko[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.tlacitko--sede { background: var(--bg-2); color: var(--text); border: 2px solid var(--obrys); box-shadow: inset 0 -5px 0 var(--obrys); }
.tlacitko--sede:active { box-shadow: inset 0 -2px 0 var(--obrys); }
.tlacitko--zelene { background: #25d366; }
.tlacitko--male { font-size: 16px; padding: 13px 14px 16px; border-radius: 14px; box-shadow: inset 0 -5px 0 var(--lip); }
.pod-tlacitkem { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--text-3); text-align: center; }

/* karty */
.karta {
  background: transparent; border: 2px solid var(--obrys); border-radius: 18px;
  padding: 16px; margin: 0 0 12px;
}
.karta-label {
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}

/* hero */
.hero { padding: 8px 0 12px; text-align: center; }
.hero h1 { font-size: 34px; margin: 6px 0 12px; }
.hero .veta { font-size: 18px; color: var(--text-2); font-weight: 600; margin: 0 auto 8px; max-width: 34em; }
.hero-duffy { display: flex; justify-content: center; margin: 6px 0 14px; }
.hero-duffy .duffy-obal { width: 190px; cursor: pointer; }
@media (min-width: 600px) {
  .hero h1 { font-size: 42px; }
  .hero-duffy .duffy-obal { width: 220px; }
}

/* "jak to vypadá" karty se screenshoty */
.jak-mrizka { display: grid; gap: 14px; }
@media (min-width: 600px) {
  .jak-mrizka { grid-template-columns: repeat(3, 1fr); }
  .jak-karta .jak-hlava { flex-direction: column; align-items: flex-start; gap: 8px; }
  .jak-karta h3 { font-size: 17px; }
  .jak-karta .jak-screen { margin: 0 12px; }
}
.jak-karta { border: 2px solid var(--obrys); border-radius: 20px; overflow: hidden; background: var(--bg-2); }
.jak-karta .jak-hlava { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.jak-karta .jak-hlava img { width: 48px; height: 48px; flex: 0 0 auto; }
.jak-karta h3 { font-size: 18px; }
.jak-karta .jak-popis { padding: 0 16px 14px; font-size: 15px; color: var(--text-2); font-weight: 600; }
.jak-karta .jak-screen { margin: 0 20px; border: 3px solid var(--obrys); border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden; background: #131f24; }
.jak-karta .jak-screen img { width: 100%; aspect-ratio: 390 / 560; object-fit: cover; object-position: top; }

/* testimonial videa */
.videa-mrizka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 600px) { .videa-mrizka { grid-template-columns: repeat(4, 1fr); } }
.video-karta { display: flex; flex-direction: column; gap: 8px; }
.video-ram { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; border: 2px solid var(--obrys); }
.video-ram video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.video-play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px;
  border: 0; border-radius: 14px; background: var(--fnc); background: color-mix(in srgb, var(--fnc) 80%, transparent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.4);
  transition: transform .18s ease;
}
@media (hover: hover) and (pointer: fine) { .video-play:hover { transform: scale(1.06); } }
.video-play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-ram.hraje .video-play { display: none; }
.video-popis { font-family: "Caveat", cursive; font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--fnc); text-align: center; transform: rotate(-2deg); }

/* není / garance / faq */
.blok-neni { border: 2px solid var(--obrys); border-radius: 20px; padding: 18px 18px 20px; background: var(--bg-2); }
.blok-neni p { font-size: 17px; font-weight: 600; color: var(--text-2); margin-top: 6px; }
.blok-neni strong { color: var(--text); }

.faq details { border: 2px solid var(--obrys); border-radius: 16px; padding: 0 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 17px; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fnc); font-weight: 900; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 16px; color: var(--text-2); font-weight: 600; }

/* patička */
.fnc-paticka {
  margin-top: 40px; padding: 28px 16px 36px; text-align: center; font-size: 13px; line-height: 1.7;
  color: var(--text-3); border-top: 2px solid var(--obrys);
}
.fnc-paticka p { margin: 0; }
.fnc-paticka a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.fnc-paticka a:hover { color: var(--fnc); }

/* ---------------- kvíz ---------------- */
.kviz-hlava { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.kviz-zpet {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--obrys);
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 22px; font-weight: 900; line-height: 1;
  box-shadow: inset 0 -4px 0 var(--obrys);
}
.kviz-zpet:disabled { opacity: .3; pointer-events: none; }
.kviz-progress { flex: 1; height: 16px; border-radius: 99px; background: var(--bg-2); border: 2px solid var(--obrys); overflow: hidden; }
.kviz-progress > i { display: block; height: 100%; background: var(--fnc); border-radius: 99px; transition: width .3s ease; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.kviz-cislo { flex: 0 0 auto; font-weight: 900; font-size: 14px; color: var(--text-3); min-width: 44px; text-align: right; }

.kviz-otazka { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 18px; }
.kviz-otazka .duffy-obal { width: 92px; flex: 0 0 auto; cursor: pointer; }
.bublina {
  position: relative; flex: 1; border: 2px solid var(--obrys); border-radius: 18px; padding: 12px 14px 14px; background: var(--bg-2);
}
.bublina::before {
  content: ""; position: absolute; left: -12px; bottom: 22px; width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 12px solid var(--obrys);
}
.bublina::after {
  content: ""; position: absolute; left: -9px; bottom: 22px; width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 12px solid var(--bg-2);
}
.stitek { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.stitek--oranz { color: var(--fnc); }
.bublina h2 { font-size: 21px; }

.odpovedi { display: flex; flex-direction: column; gap: 10px; }
.odpoved {
  width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--obrys); border-radius: 16px;
  background: transparent; color: var(--text); font-weight: 800; font-size: 17px; line-height: 1.3;
  padding: 15px 16px 18px; box-shadow: inset 0 -5px 0 var(--obrys); transition: transform .08s, box-shadow .08s, border-color .1s;
}
.odpoved:active, .odpoved.vybrana { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--obrys); }
.odpoved.vybrana { border-color: var(--fnc); color: var(--fnc); box-shadow: inset 0 -2px 0 var(--fnc); }
.kviz-krok { animation: kviz-in .25s ease; }
@keyframes kviz-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.kviz-pocita { text-align: center; padding: 60px 0; animation: kviz-in .3s ease; }
.kviz-pocita .duffy-obal { width: 170px; margin: 0 auto 18px; }
.kviz-pocita h2 { font-size: 24px; }
.tecky::after { content: ""; display: inline-block; width: 1.4em; text-align: left; animation: tecky 1.2s steps(4) infinite; }
@keyframes tecky { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------------- cena ---------------- */
.vysledek-duffy { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 22px; }
.vysledek-duffy .duffy-obal { width: 110px; flex: 0 0 auto; cursor: pointer; }
.vysledek-duffy .bublina p { font-size: 17px; font-weight: 700; line-height: 1.4; }

.radky { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.radek { display: flex; align-items: center; gap: 12px; border: 2px solid var(--obrys); border-radius: 16px; padding: 12px 14px; background: var(--bg-2); }
.radek .cislo {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px; color: var(--text-2); background: var(--bg); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.radek .nazev { font-weight: 900; font-size: 17px; }
.radek .popis { font-size: 14px; color: var(--text-2); font-weight: 600; }
.radek--prvni { border-color: var(--fnc); }
.radek--prvni .cislo { background: var(--fnc); color: #fff; }
.radek--prvni .nazev { color: var(--fnc); }

.plany { display: grid; gap: 10px; margin: 0 0 14px; }
@media (min-width: 600px) { .plany { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: block; cursor: pointer; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan .plan-tel {
  border: 2px solid var(--obrys); border-radius: 18px; padding: 16px 16px 18px; background: transparent;
  display: flex; align-items: center; gap: 12px; transition: border-color .12s, background .12s;
}
@media (min-width: 600px) { .plan .plan-tel { flex-direction: column; text-align: center; padding-top: 24px; } }
.plan .kolecko {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--obrys); position: relative;
}
.plan input:checked ~ .plan-tel { border-color: var(--fnc); background: rgba(255,115,0,.08); }
.plan input:checked ~ .plan-tel .kolecko { border-color: var(--fnc); }
.plan input:checked ~ .plan-tel .kolecko::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--fnc); }
.plan input:focus-visible ~ .plan-tel { outline: 3px solid var(--fnc); outline-offset: 2px; }
.plan .plan-obsah { flex: 1; }
.plan .plan-nazev { font-weight: 900; font-size: 18px; }
.plan .plan-cena { font-weight: 900; font-size: 24px; color: var(--text); margin: 2px 0 0; }
.plan .plan-den { font-size: 14px; font-weight: 700; color: var(--text-2); }
.plan .plan-usetris { font-size: 13px; font-weight: 800; color: var(--zelena-popis); }
.plan .stitek-top {
  position: absolute; top: -12px; left: 16px; background: var(--fnc); color: #fff; font-size: 12px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px 5px; border-radius: 99px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
}
@media (min-width: 600px) { .plan .stitek-top { left: 50%; transform: translateX(-50%); } }
.plan--top .plan-tel { border-color: rgba(255,115,0,.5); }

.souhlas { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px; cursor: pointer; }
.souhlas input { width: 24px; height: 24px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--fnc); cursor: pointer; }
.souhlas span { font-size: 14px; font-weight: 600; color: var(--text-2); line-height: 1.45; }
.souhlas a { color: var(--fnc); font-weight: 800; }

.garance { border: 2px solid var(--zelena); border-radius: 18px; padding: 16px 18px; background: rgba(22,163,74,.08); }
.garance .karta-label { color: var(--zelena-popis); }
.garance p { font-weight: 700; }

.hlaska {
  border: 2px solid var(--fnc); border-radius: 18px; padding: 16px; margin: 14px 0; background: rgba(255,115,0,.08);
}
.hlaska h3 { margin-bottom: 6px; }
.hlaska p { font-size: 15px; color: var(--text-2); font-weight: 600; margin-bottom: 12px; }
.pole { display: block; font-weight: 800; font-size: 14px; margin: 0 0 10px; }
.pole input {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 17px; font-weight: 700; color: var(--text);
  background: var(--bg); border: 2px solid var(--obrys); border-radius: 12px; padding: 11px 12px;
}
.pole input:focus { outline: none; border-color: var(--fnc); }
.skryte { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hlaska .chyba { color: var(--cervena); font-weight: 800; margin: 8px 0 0; }
.hlaska .ok { color: var(--zelena-popis); font-weight: 800; font-size: 17px; }

/* ---------------- plocha ---------------- */
.kroky { display: flex; flex-direction: column; gap: 12px; }
.krok { display: flex; gap: 14px; align-items: flex-start; border: 2px solid var(--obrys); border-radius: 18px; padding: 14px 16px; background: var(--bg-2); }
.krok .krok-cislo {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--fnc); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; box-shadow: inset 0 -3px 0 var(--lip);
}
.krok h3 { font-size: 17px; margin-bottom: 4px; }
.krok p { font-size: 15px; color: var(--text-2); font-weight: 600; }
.krok .ikona-radek { display: flex; gap: 10px; margin-top: 8px; }
.krok .ikona-radek span {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--text-2);
  border: 2px solid var(--obrys); border-radius: 10px; padding: 5px 9px;
}
.krok .ikona-radek svg { width: 18px; height: 18px; }

/* ---------------- podmínky ---------------- */
.podminky h1 { font-size: 28px; margin: 6px 0 4px; }
.podminky h2 { font-size: 20px; margin: 28px 0 8px; }
.podminky p { margin: 0 0 12px; color: var(--text-2); font-weight: 600; }
.podminky strong { color: var(--text); }
.podminky .doplnit { background: rgba(255,200,0,.22); color: var(--text); border-radius: 6px; padding: 0 5px; font-weight: 800; }
.podminky .stav { border: 2px dashed var(--obrys); border-radius: 14px; padding: 12px 14px; font-size: 14px; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .kviz-krok, .kviz-pocita { animation: none; }
}

/* ---------------- landing v2 (27. 9.): appka, telefon, střídavé sekce ---------------- */
.obal--siroky { max-width: 960px; }
.hero--v2 h1 { margin-bottom: 10px; }
.hero--v2 .hero-pod { font-size: 22px; font-weight: 900; color: var(--fnc); margin: 0 auto 10px; }
.hero--v2 .positioning { font-size: 18px; font-weight: 700; color: var(--text-2); max-width: 34em; margin: 0 auto 6px; }
.hero--v2 .positioning strong { color: var(--text); }
.hero-cta { max-width: 420px; margin: 14px auto 0; }

.telefon-blok { display: flex; justify-content: center; padding: 26px 0 8px; }
.telefon {
  position: relative; width: 290px; border-radius: 44px; padding: 10px; background: var(--tmava);
  box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);
}
.telefon::before {
  content: ""; position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: #0b1115; border-radius: 99px; z-index: 2;
}
.telefon img { width: 100%; border-radius: 34px; display: block; background: #131f24; }
.telefon--maly { width: 250px; }
@media (min-width: 720px) { .telefon { width: 320px; } }

.funkce { display: grid; gap: 22px; align-items: center; padding: 26px 0; }
.funkce-obr { display: flex; justify-content: center; }
.funkce-text h2 { font-size: 26px; margin: 4px 0 10px; }
.funkce-text p { font-size: 17px; font-weight: 600; color: var(--text-2); line-height: 1.5; }
.funkce-text .ikona { width: 56px; height: 56px; margin-bottom: 6px; }
@media (min-width: 720px) {
  .funkce { grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 0; }
  .funkce:nth-child(even) .funkce-obr { order: 2; }
  .funkce-text h2 { font-size: 32px; }
}

.proc-mrizka { display: grid; gap: 12px; }
@media (min-width: 720px) { .proc-mrizka { grid-template-columns: repeat(3, 1fr); } }
.proc-karta { border: 2px solid var(--obrys); border-radius: 18px; padding: 16px 16px 18px; background: var(--bg-2); }
.proc-karta .karta-label { color: var(--fnc); }
.proc-karta h3 { font-size: 18px; margin-bottom: 6px; }
.proc-karta p { font-size: 15px; font-weight: 600; color: var(--text-2); }

.positioning-blok { text-align: center; border: 2px solid var(--fnc); border-radius: 22px; padding: 22px 18px 24px; background: rgba(255,115,0,.07); }
.positioning-blok h2 { font-size: 24px; margin-bottom: 8px; }
.positioning-blok p { font-size: 17px; font-weight: 600; color: var(--text-2); max-width: 36em; margin: 0 auto; }
.positioning-blok strong { color: var(--text); }

/* WhatsApp bubliny */
.wa-chat { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }
.wa-bublina {
  position: relative; max-width: 88%; border-radius: 16px; padding: 10px 12px 8px; font-size: 15px; line-height: 1.45; font-weight: 600;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--obrys); align-self: flex-start; border-top-left-radius: 4px;
}
.wa-bublina--zelena { background: #1f5a3a; border-color: #2a6f49; align-self: flex-end; border-top-left-radius: 16px; border-top-right-radius: 4px; color: #fff; }
@media (prefers-color-scheme: light) and (min-width: 100000px) { .wa-bublina--zelena { background: #d9fdd3; border-color: #bfe8b8; color: rgb(40,38,34); } }
.wa-bublina .wa-jmeno { display: block; font-size: 13px; font-weight: 900; color: var(--fnc); margin-bottom: 2px; }
.wa-bublina--zelena .wa-jmeno { color: #86d9a5; }
@media (prefers-color-scheme: light) and (min-width: 100000px) { .wa-bublina--zelena .wa-jmeno { color: #1f7a45; } }
.wa-bublina .wa-cas { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-3); margin-top: 4px; }
.wa-bublina--zelena .wa-cas { color: rgba(255,255,255,.6); }
@media (prefers-color-scheme: light) and (min-width: 100000px) { .wa-bublina--zelena .wa-cas { color: rgba(40,38,34,.5); } }
.wa-bublina .wa-cas svg { width: 16px; height: 12px; color: #53bdeb; }
.wa-pozn { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-3); margin-top: 12px; }

/* ---------------- kvíz v3: ikony, zaklapnutí, reakce, počítá ---------------- */
.odpoved { display: flex; align-items: center; gap: 12px; }
.odpoved-ikona { flex: 0 0 auto; width: 38px; height: 38px; display: flex; }
.odpoved-ikona svg { width: 38px; height: 38px; }
.odpoved.zaklapla { animation: zaklap .32s ease-out; }
@keyframes zaklap {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(3px) scale(.97); box-shadow: inset 0 -1px 0 var(--fnc); }
  70% { transform: translateY(0) scale(1.03); }
  100% { transform: translateY(3px) scale(1); }
}
.kviz-krok { transition: opacity .18s ease, transform .18s ease; }
.kviz-krok--zpet { animation-name: kviz-in-zpet; }
@keyframes kviz-in-zpet { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.kviz-krok--pryc { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.kviz-duffy { flex: 0 0 auto; width: 92px; }
.bublina-reakce {
  margin-top: 8px; font-family: "Caveat", cursive; font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--fnc);
  animation: kviz-in .25s ease;
}
.kviz-pocita { padding: 34px 0 40px; }
.pocita-kruh { position: relative; width: 210px; height: 210px; margin: 0 auto 18px; }
.pocita-kruh svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pocita-kruh .kruh-pozadi { fill: none; stroke: var(--obrys); stroke-width: 8; }
.pocita-kruh .kruh-plneni { fill: none; stroke: var(--fnc); stroke-width: 8; stroke-linecap: round; }
.pocita-duffy { position: absolute; left: 50%; top: 50%; width: 120px; transform: translate(-50%, -52%); }
.pocita-duffy .duffy-obal { width: 120px; }
.pocita-veta { margin-top: 12px; font-size: 18px; font-weight: 800; color: var(--text-2); min-height: 3em; transition: opacity .22s ease, transform .22s ease; }
.pocita-veta.pryc { opacity: 0; transform: translateY(6px); }
.kviz-pocita .duffy-obal { margin: 0; width: 120px; }

/* ---------------- výsledek ---------------- */
.vysledek-karty { display: grid; gap: 10px; margin: 6px 0 22px; }
.vkarta {
  display: flex; align-items: center; gap: 14px; border: 2px solid var(--obrys); border-radius: 18px; padding: 14px 16px; background: var(--bg-2);
  opacity: 0; transform: translateY(14px) scale(.98); animation: vkarta-in .4s cubic-bezier(.2,.9,.3,1.2) forwards;
}
@keyframes vkarta-in { to { opacity: 1; transform: none; } }
.vkarta .vkarta-ikona { flex: 0 0 auto; width: 46px; height: 46px; }
.vkarta .vkarta-ikona svg { width: 46px; height: 46px; }
.vkarta .vkarta-cislo {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); color: var(--text-2);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.vkarta .vkarta-text { flex: 1; min-width: 0; }
.vkarta h3 { font-size: 18px; }
.vkarta p { font-size: 14px; font-weight: 600; color: var(--text-2); }
.vkarta--prvni { border-color: var(--fnc); background: var(--fnc); color: #fff; padding: 20px 18px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.2); }
.vkarta--prvni .vkarta-cislo { background: #fff; color: var(--fnc); }
.vkarta--prvni h3 { font-size: 24px; color: #fff; }
.vkarta--prvni p { color: rgba(255,255,255,.88); font-size: 15px; }
.vkarta--prvni .vkarta-ikona { width: 60px; height: 60px; }
.vkarta--prvni .vkarta-ikona svg { width: 60px; height: 60px; }
.vysledek-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .vkarta { animation: none; opacity: 1; transform: none; } .odpoved.zaklapla { animation: none; } }

/* ---------------- landing v3 (hero bez telefonu, natočené telefony s blobem) ---------------- */
.hero-dukaz { margin: 12px auto 0; font-size: 14px; font-weight: 700; color: var(--text-3); max-width: 30em; }
.telefon { padding: 12px; }
.telefon::before { display: none; }              /* bez výřezu (dynamic island), zakrýval nadpis */
.telefon img { border-radius: 30px; }
.funkce { padding: 34px 0; }
.funkce-obr { position: relative; padding: 24px 0; order: 2; }
.funkce-text { order: 1; text-align: center; }
.funkce-text .ikona { width: 64px; height: 64px; margin: 0 auto 8px; }
.funkce-text h2 { font-size: 28px; }
.blob {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,115,0,.42) 0%, rgba(255,115,0,.14) 55%, rgba(255,115,0,0) 72%);
  pointer-events: none;
}
.telefon--nakloneny {
  width: 260px; transform: rotate(5deg); box-shadow: 0 34px 60px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.08);
}
.telefon--nakloneny.telefon--vlevo { transform: rotate(-5deg); }
@media (min-width: 720px) {
  .funkce { padding: 48px 0; gap: 48px; }
  .funkce-obr { order: 0; padding: 40px 0; }
  .funkce-text { order: 0; text-align: left; }
  .funkce-text .ikona { margin: 0 0 10px; }
  .funkce-text h2 { font-size: 36px; }
  .funkce:nth-child(even) .funkce-obr { order: 2; }
  .telefon--nakloneny { width: 300px; }
  .blob { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}
@media (prefers-color-scheme: light) and (min-width: 100000px) { .telefon--nakloneny { box-shadow: 0 30px 50px rgba(43,58,66,.28), 0 6px 16px rgba(43,58,66,.15); } }

/* ---------------- kvíz v4: mezi-obrazovky, mezivýsledek, yes-ladder, loader řádky ---------------- */
.bublina-pozn { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--text-3); }
.kviz-mezi { text-align: center; padding: 22px 0 30px; }
.mezi-duffy { width: 200px; margin: 0 auto 14px; }
.mezi-duffy .duffy-obal { width: 200px; margin: 0 auto; }
.mezi-duffy--maly { width: 96px; margin: 0; flex: 0 0 auto; }
.mezi-duffy--maly .duffy-obal { width: 96px; }
.mezi-text { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0 auto 22px; max-width: 22em; }
.mezi-text--maly { font-size: 17px; font-weight: 700; color: var(--text-2); margin: 16px auto 14px; }
.mezi-nadpis { font-size: 24px; margin: 0 auto 22px; max-width: 18em; }
.mezi-hlava { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 14px; }
.mezi-hlava h2 { font-size: 24px; }
.mezi-radky { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.mezi-radek { display: flex; align-items: center; gap: 12px; border: 2px solid var(--obrys); border-radius: 14px; padding: 10px 12px; background: var(--bg-2); }
.mezi-radek-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mezi-radek-text { font-weight: 800; font-size: 16px; }
.loader-radky { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 18px auto 0; text-align: left; }
.loader-radek { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text-3); transition: color .3s; }
.loader-fajfka { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--obrys); position: relative; transition: background .3s, border-color .3s; }
.loader-radek.hotovo { color: var(--text); }
.loader-radek.hotovo .loader-fajfka { background: var(--zelena); border-color: var(--zelena); }
.loader-radek.hotovo .loader-fajfka::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* výsledek: první den */
.prvni-den { margin: 4px 0 20px; }
.den-karta { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--obrys); border-radius: 16px; padding: 14px; background: var(--bg-2); margin-top: 10px; }
.den-karta .den-ikona { width: 44px; height: 44px; flex: 0 0 auto; }
.den-karta h3 { font-size: 17px; margin-bottom: 4px; }
.den-karta p { font-size: 14px; font-weight: 600; color: var(--text-2); }
.den-karta .karta-label { color: var(--fnc); margin-bottom: 2px; }

/* cena: social proof + co je v ceně */
.social-radek { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--text-2); margin: -6px 0 16px; }
.avatary { display: inline-flex; }
.avatary i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.avatary i:first-child { margin-left: 0; }
.v-cene { border: 2px solid var(--obrys); border-radius: 16px; padding: 12px 14px 6px; margin: 0 0 14px; background: var(--bg-2); }
.v-cene-radek { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; font-weight: 800; font-size: 15px; }
.v-cene-radek img { width: 30px; height: 30px; }

/* ---------------- v5: váha slidery, predikce, odpočet, tichá garance ---------------- */
.slider-karta { border: 2px solid var(--obrys); border-radius: 16px; padding: 14px 16px 16px; background: var(--bg-2); margin-bottom: 12px; }
.slider-label { font-size: 15px; font-weight: 800; color: var(--text-2); }
.slider-hodnota { font-size: 40px; font-weight: 900; line-height: 1.1; margin: 4px 0 8px; color: var(--fnc); }
.slider-hodnota span { font-size: 44px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 99px; outline: none; margin: 6px 0 0;
  background: linear-gradient(to right, var(--fnc) 0, var(--fnc) var(--p, 50%), var(--obrys) var(--p, 50%), var(--obrys) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--fnc); box-shadow: 0 3px 0 rgba(0,0,0,.25); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--fnc); cursor: pointer; }
.hlaska-vyprselo { margin: 10px 0 0; border: 2px solid var(--fnc); border-radius: 14px; padding: 10px 14px; font-weight: 800; background: rgba(255,115,0,.1); }

.predikce { border: 2px solid var(--obrys); border-radius: 18px; padding: 14px 16px 12px; background: var(--bg-2); margin: 0 0 14px; }
.predikce .karta-label { color: var(--fnc); }
.predikce-cislo { font-size: 34px; font-weight: 900; line-height: 1.1; margin-bottom: 6px; }
.predikce-cislo span { display: block; font-size: 15px; font-weight: 800; color: var(--text-2); margin-top: 2px; }
.predikce-graf { width: 100%; height: auto; display: block; margin: 4px 0 2px; }
.predikce-osa { font-family: var(--pismo); font-size: 11px; font-weight: 800; fill: var(--text-3); }
.predikce-osa--fnc { fill: var(--fnc); }
.predikce-radek { font-size: 16px; font-weight: 700; margin-top: 4px; }
.predikce-radek strong { color: var(--fnc); font-weight: 900; }
.predikce-pozn { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 6px; }

.odpocet { text-align: center; font-size: 14px; font-weight: 700; color: var(--text-2); border: 2px dashed var(--obrys); border-radius: 12px; padding: 8px 12px; margin: -6px 0 14px; }
.odpocet strong { color: var(--fnc); font-weight: 900; font-variant-numeric: tabular-nums; }
.garance-ticha { margin-top: 4px; font-size: 13px; font-weight: 600; }

/* ---------------- cena v3: shrnutí výsledku, chipy ---------------- */
.shrnuti { display: flex; align-items: center; gap: 12px; border: 2px solid var(--obrys); border-radius: 16px; padding: 10px 14px; background: var(--bg-2); margin: 0 0 22px; }
.shrnuti-duffy { width: 64px; flex: 0 0 auto; }
.shrnuti-duffy .duffy-obal { width: 64px; }
.shrnuti-nadpis { font-weight: 900; font-size: 16px; margin-bottom: 6px; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 9px 4px; border-radius: 99px; border: 2px solid var(--obrys); color: var(--text-2); }
.chip--fnc { background: var(--fnc); border-color: var(--fnc); color: #fff; }
.plan-pozn { font-size: 12px; font-weight: 800; color: var(--fnc); margin-top: 4px; }
.odpocet, .garance-ticha { display: none; }
.social-radek--zpet { margin: -8px 0 18px; }

/* ---------------- výsledek kompaktní (v9) ---------------- */
.vysledek-kompakt h1 { font-size: 26px; margin: 2px 0 8px; }
.vysledek-kompakt .vysledek-duffy { margin: 10px 0 12px; }
.vysledek-kompakt .vysledek-duffy .duffy-obal { width: 84px; }
.vysledek-kompakt .vysledek-duffy .bublina p { font-size: 15px; }
.vysledek-kompakt .vkarta--prvni { padding: 14px 16px; margin-bottom: 10px; }
.vysledek-kompakt .vkarta--prvni h3 { font-size: 21px; }
.vysledek-kompakt .vkarta--prvni p { font-size: 14px; }
.vysledek-kompakt .vkarta--prvni .vkarta-ikona, .vysledek-kompakt .vkarta--prvni .vkarta-ikona svg { width: 50px; height: 50px; }
.ktomu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ktomu-label { font-size: 13px; font-weight: 800; color: var(--text-3); }
.chip--ikona { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; opacity: 0; animation: vkarta-in .35s ease forwards; color: var(--text); }
.chip--ikona svg { width: 20px; height: 20px; }
.den-karta--jedna { display: block; padding: 12px 14px; margin: 0 0 14px; }
.den-karta--jedna .karta-label { color: var(--fnc); margin-bottom: 8px; }
.den-radek { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 4px 0; }
.den-radek img { width: 30px; height: 30px; flex: 0 0 auto; }
.den-radek strong { color: var(--text); font-weight: 800; }
.vysledek-kompakt .tlacitko { padding: 15px 16px 18px; }
@media (prefers-reduced-motion: reduce) { .chip--ikona { animation: none; opacity: 1; } }

/* ---------------- výsledek v10: oddělené sekce ---------------- */
.vsekce { padding: 18px 0 20px; border-top: 2px solid var(--obrys); }
.vsekce .eyebrow { margin-bottom: 8px; }
.vsekce--den { background: var(--bg-2); margin: 0 -16px; padding: 18px 16px 22px; border-radius: 22px 22px 0 0; border-top: 0; }
.mrizka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.vkarta--mala { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 13px; }
.vkarta--mala .vkarta-ikona, .vkarta--mala .vkarta-ikona svg { width: 34px; height: 34px; }
.vkarta--mala h3 { font-size: 16px; }
.vkarta--mala p { font-size: 13px; line-height: 1.35; }
.mrizka-2--den { margin-top: 0; }
.den-karta2 { border: 2px solid var(--obrys); border-radius: 16px; padding: 12px; background: var(--bg); }
.den-karta2 img { width: 40px; height: 40px; margin-bottom: 6px; }
.den-karta2 .karta-label { color: var(--fnc); margin-bottom: 4px; }
.den-karta2 p { font-size: 14px; font-weight: 700; line-height: 1.35; }
@media (prefers-color-scheme: light) and (min-width: 100000px) { .vsekce--den { background: #f4f4f2; } }
.zaruka { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.hlavicka .od { display: inline-flex; align-items: center; gap: 6px; }
.hlavicka .od img { height: 30px; width: auto; display: block; }