/* ==========================================================================
   JP&Partneři – design tokens
   Koncept: „šedo-zlatá, osobní" – serifová typografie, tichá grafitová
   a papírová paleta, jeden zlatý akcent. Inspirace jansusanka.cz (lidskost)
   + jpmorgan.com/wealth-management (serióznost, přehlednost).
   ========================================================================== */

:root{
  /* barvy – grafit/papír + zlatý akcent */
  --ink:        #1C1B18;
  --ink-2:      #161512;
  --ink-card:   #26241E;
  --paper:      #F6F5F2;
  --white:      #FFFFFF;

  --line:        rgba(28,27,24,.08);
  --line-strong: rgba(28,27,24,.14);
  --line-dark:   rgba(255,255,255,.08);

  --muted:      #6E6A61;
  --muted-2:    #736F66;
  --text-soft:  #3B3830;

  --gold:        #A87F2E;
  --gold-dark:   #8C6A26;
  --gold-bright: #C9A24B;
  --gold-grad-1: #D5AF57;
  --gold-grad-2: #B98D33;

  /* stavy v klientské sekci – tlumená semaforová logika, ne křiklavá */
  --ok:         #2F6B4A;
  --ok-soft:    rgba(47,107,74,.12);
  --wait:       #6E521C;   /* text štítku „řešíme/k dodání" – ztmaveno kvůli AA na papíru */
  --wait-soft:  rgba(140,106,38,.12);
  --neutral:    #605C54;   /* text štítku „ověřuje se/přijde později" – AA i na papíru */
  --neutral-soft: rgba(110,106,97,.10);

  --cream:       #F5F3EE;
  --cream-muted: rgba(245,243,238,.62);
  --cream-faint: rgba(245,243,238,.42);

  /* typografie – 2 fonty, po vzoru Sušánka & partneři (Migra + GeneralSans):
     jeden charakterní serif na nadpisy, jeden sans na vše ostatní včetně
     drobných trackovaných labelů (žádné třetí mono písmo). */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* rytmus */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 4.375rem);

  --shadow-btn:   0 1px 2px rgba(28,27,24,.25);
  --shadow-btn-hover: 0 14px 32px -8px rgba(28,27,24,.45);
  --shadow-card:  0 24px 48px -20px rgba(28,27,24,.3);
  --shadow-panel: 0 16px 40px -12px rgba(28,27,24,.25);
  /* Zlatá plocha je plná barva, ne přechod. Svislý přechod se světlým pruhem
     nahoře a barevnou září pod tlačítkem je nejrychlejší způsob, jak web
     zlevnit — vypadá jako šablona. Stín je proto neutrální a těsný. */
  /* Základní zlatá je ta z ložka (`--gold-bright`), aby plán na webu
     a značka byly stejná barva. Na najetí ztmavne na `--gold`. */
  /* Zlatá plocha je plátek zlata: světlejší vlevo nahoře, hlubší uprostřed,
     lehce rozsvícená vpravo dole. Není to lesk tlačítka, chová se to jako
     materiál — proto diagonála a proto se barva vrací, ne jen tmavne.
     Pozor: `border-color` přechod nepřijme, hrany musí být plná barva. */
  --gold-flat: linear-gradient(135deg,#D9B667,#C09539 55%,#CFA84F);
  --gold-flat-hover: linear-gradient(135deg,#CFA84F,#B58B33 55%,#C39D46);
  --gold-hrana: #C09539;
  --gold-hrana-hover: #B58B33;
  --shadow-gold: 0 1px 2px rgba(28,27,24,.16);
  --shadow-gold-hover: 0 6px 18px rgba(28,27,24,.20);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   Reset & základ
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -.01em;
  overflow-x: hidden;
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }

.wrap{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* skip link */
.skip-link{
  position: absolute;
  top: -100px; left: 1rem;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font: 600 .9rem var(--font-body);
  text-decoration: none;
  z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 0; }

/* focus stavy – konzistentní přes celý web */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Tlačítka
   ========================================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2.1rem;
  border-radius: var(--radius-md);
  font: 600 1rem var(--font-body);
  text-decoration: none;
  border: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active{ transform: translateY(0) !important; }

.btn-dark{
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-btn);
}
.btn-dark:hover{ transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }

.btn-outline{
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(28,27,24,.3);
}
.btn-outline:hover{ border-color: var(--ink); background: rgba(28,27,24,.04); }

.btn-gold{
  background: var(--gold-flat);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{ transform: translateY(-2px); background: var(--gold-flat-hover); box-shadow: var(--shadow-gold-hover); }

.btn-ghost-dark{
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(245,243,238,.25);
}
.btn-ghost-dark:hover{ border-color: rgba(245,243,238,.6); background: rgba(245,243,238,.06); }

.btn-sm{ padding: .7rem 1.4rem; font-size: .9rem; border-radius: var(--radius-sm); }
.btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* eyebrow / mono label */
.eyebrow{
  display: inline-block;
  font: 500 .68rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow.on-dark{ color: var(--gold-bright); }
.eyebrow.on-gold{ color: var(--gold-dark); }

/* ==========================================================================
   Header
   ========================================================================== */

.microbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem var(--pad);
  background: var(--ink);
  color: rgba(255,255,255,.68);
  font: 500 .72rem var(--font-body);
  letter-spacing: .07em;
}
.microbar a{ color: inherit; text-decoration: none; }
.microbar a:hover{ color: var(--gold-bright); }

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
    /* Sklo v liště. Krytí .92 znamenalo, že se pod ní nic neprosvítalo a
     rozostření bylo k ničemu. Na .78 je vidět, jak obsah protéká, a odkazy
     drží 10:1 i nad tmavou sekcí. Sytost se přidává proto, že rozostřením
     barvy zblednou a zlatá by pod sklem zešedla. */
  background: rgba(246,245,242,.78);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid var(--line-strong);
}

.nav{
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: 76px;
  padding-block: .5rem;
}

/* Značka je obrázek, ale text v HTML zůstává — čtečky i vyhledávače ho čtou
   dál. Kdyby se vyměnil za `<img>`, sáhlo by se do devíti stránek místo do
   jednoho pravidla, a alt by stejně říkal totéž co ten text. */
.brand{
  display: block;
  flex-shrink: 0;
  width: calc(34px * 3.41);          /* poměr loga 848 : 249 */
  height: 34px;
  background: url(../img/logo.svg) no-repeat left center / contain;
  font-size: 0;                       /* text zmizí z obrazu, ne z DOM */
  color: transparent;
  text-decoration: none;
}

.nav-links{
  display: flex;
  gap: .35rem;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-links a{
  padding: .5rem .85rem;
  font: 500 .9rem var(--font-body);
  /* Tlumená šedá dávala na papíru 4,94:1 — projde, ale v liště nad bílým
     obsahem odkazy zapadaly. Inkoust má 15,8:1 a čte se jako navigace. */
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
/* Když jsou všechny položky černé, ztmavení na hover už není zpětná vazba.
   Hover proto dostane tichou linku, aktivní stránka zlatou — jinak by po
   zčernání nešlo poznat, na které stránce člověk je. */
.nav-links a:hover,
.nav-links a:focus-visible{ color: var(--ink); border-bottom-color: var(--line-strong); }
.nav-links a.is-active{ color: var(--ink); border-bottom-color: var(--gold); }

.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span{ top: 20px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }
/* Krajní čárky mají jako obsahující blok samotný `span` — je absolutně
   umístěný, takže si dělá vlastní souřadnice. Zděděné `left:10px;right:10px`
   z nich proto uvnitř 22px spanu dělalo 2px pahýly a z celé ikony znaménko
   dělení. Roztahují se na šířku spanu. */
.nav-toggle span::before,
.nav-toggle span::after{ left: 0; right: 0; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  background: var(--paper);
  position: relative;
  overflow-x: hidden;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.hero::before{
  content: '';
  position: absolute;
  top: -180px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,127,46,.14), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: stretch;
}

.hero-copy{ padding-bottom: clamp(2rem, 5vw, 4.5rem); }

.hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.03;
  color: var(--ink);
}
.hero h1 em{ font-style: italic; color: var(--gold); font-weight: 300; }

.hero-lead{
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 540px;
  margin-top: 1.5rem;
}

.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem; }

.hero-stats{
  margin-top: 3rem;
  display: flex;
  gap: 2.75rem;
  flex-wrap: wrap;
}
.hero-stat{ display: flex; flex-direction: column; gap: .3rem; }
.hero-stat .num{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1;
}
.hero-stat .num em{ font-style: italic; color: var(--gold); }
.hero-stat .label{
  font: 500 .68rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.hero-visual{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero-portrait{
  /* Kotví se přímo k .hero (position:relative), ne k vlastnímu .85fr sloupci –
     zóna pro foto je pravá polovina sekce (left:50% až right:0), uvnitř ní
     je foto vystředěné, takže má rovnoměrný odstup od textu i od okraje.
     Spodek zůstává na lince .hero-copy (.hero-grid align-items:stretch –
     výšku řádku určuje jen textový sloupec). */
  position: absolute;
  top: 0; left: 50%; right: 0;
  /* spodek fotky dosedá až na spodní hranu hero sekce */
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.portrait-frame{
  position: relative;
  width: clamp(370px, 37.5vw, 810px);
}
.portrait-photo{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 34px rgba(28,27,24,.22));
}
.portrait-card{
  position: absolute;
  bottom: clamp(16px, 3vw, 40px); left: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-panel);
}
.portrait-card-text{ display: flex; flex-direction: column; }
.portrait-card .name{ font: 400 1.05rem var(--font-display); color: var(--ink); }
.portrait-card .role{
  font: 500 .68rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: .25rem;
}
.li-badge{
  flex-shrink: 0;
  box-sizing: content-box;
  display: inline-flex;
  width: 22px;
  height: 22px;
  padding-left: .85rem;
  border-left: 1px solid var(--line-strong);
  color: var(--ink);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.li-badge:hover,
.li-badge:focus-visible{ color: var(--gold-dark); transform: translateY(-2px); }
.li-badge svg{ width: 100%; height: 100%; display: block; }

/* ==========================================================================
   Sekce – obecné
   ========================================================================== */

.section{ padding-block: clamp(3rem, 7vw, 5rem); }
.section-white{ background: var(--white); border-top: 1px solid var(--line); }
.section-paper{ background: var(--paper); border-top: 1px solid var(--line); }
.section-ink{ background: var(--ink); }

/* Hlavička sekce si nese vlastní odstup dolů.

   Dřív žádný neměla a mezera pod nadpisem vznikala náhodou: podle toho,
   jestli následující blok měl svůj horní margin. Napříč webem z toho bylo
   0, 30, 40 a 44 px — a tam, kde vyšla nula, dosedla mřížka karet na
   nadpis natvrdo.

   Dvě rem jsou spodní hranice, ne pevná hodnota: sousední okraje se slijí,
   takže kde si blok pod nadpisem říká o víc, dostane víc. */
.section-head{
  margin-bottom: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
/* Odstup pod hlavičkou určuje hlavička, ne blok pod ní.
   Bez tohohle řádku si každá sekce nesla vlastní horní okraj a na jedné
   stránce z toho bylo 48, 40 i 32 px. Teď je to všude stejných 40.

   Selektor bere prvek s třídou schválně: `.section-head + *` má stejnou
   váhu jako `.pillars` a prohrával s ním, protože ten stojí v souboru níž.
   `[class]` váhu zvedne a přebije každou jednotřídní deklaraci. */
.section-head + [class]{ margin-top: 0; }
.section-head h2{ max-width: 560px; }
.section-head .desc{ font-size: .95rem; color: var(--muted); line-height: 1.65; max-width: 360px; }

/* Váže se na třídu, ne na h2 – kontaktní stránka má tentýž nadpis jako h1
   a s pravidlem psaným pro h2 zůstala bez serifu i bez velikosti. */
.h-display{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--ink);
}
.h-display em{ font-style: italic; color: var(--gold); }
.section-ink .h-display{ color: var(--cream); }
.section-ink .h-display em{ color: var(--gold-bright); }

/* ==========================================================================
   Tři pilíře / služby
   ========================================================================== */

.pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem;
  margin-top: 3rem;
  border-top: 1px solid var(--ink);
}
.pillar{
  padding-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  position: relative;
  scroll-margin-top: 100px;
}
/* vertikální dělítko uprostřed mezery mezi sloupci, ne krabice s rámečkem */
.pillar:not(:first-child)::before{
  content: '';
  position: absolute;
  left: -1.375rem;
  top: 2.25rem;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.pillar-badge{
  position: static;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font: 600 .68rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.pillar-badge::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-dark);
  margin-right: .55em;
}
.pillar .idx{
  display: block;
  font: 400 4rem/1 var(--font-display);
  font-style: italic;
  color: rgba(28,27,24,.14);
  letter-spacing: -.02em;
  transition: color .35s var(--ease);
}
.pillar:hover .idx{ color: rgba(168,127,46,.55); }
.pillar h3{
  font: 400 1.5rem var(--font-display);
  letter-spacing: -.015em;
  color: var(--ink);
}
.pillar p{ color: var(--muted); font-size: .93rem; line-height: 1.65; }
.pillar .more{
  color: var(--gold-dark);
  font: 600 .88rem var(--font-body);
  text-decoration: none;
  /* Odkaz drží u dolní hrany sloupce, ne pod odstavcem. Pilíře mají různě
     dlouhé texty a "Zjistit více" na třech různých výškách vypadá jako chyba
     sazby. Minimální mezeru nad ním hlídá gap na .pillar. */
  margin-top: auto;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.pillar .more:hover, .pillar:hover .more{ border-color: var(--gold-dark); }

/* ==========================================================================
   Poznejte nás
   ========================================================================== */

.about-grid{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}
/* Jedna fotka, jeden sloupec. Dvousloupcová mřížka tu zbyla z doby, kdy
   byly fotky dvě, a nechávala snímek na půl šířky s prázdnem vedle.
   Strop 460 px je skutečná šířka souboru; víc už by se jen rozmazávalo. */
.about-photos{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 460px;
}
.photo-placeholder{
  aspect-ratio: 3 / 3.8;
  border-radius: 16px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  overflow: hidden;
}
.photo-placeholder.p1{ background: linear-gradient(180deg, #DEDACF, #CBC5B5); }
.photo-placeholder.p2{ background: linear-gradient(180deg, #D8D4C8, #C5BFAF); margin-top: 2rem; }
.photo-placeholder img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.photo-placeholder .mono{
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(28,27,24,.16);
}
.photo-placeholder .tag{
  font: 500 .62rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(28,27,24,.45);
  border: 1px dashed rgba(28,27,24,.3);
  border-radius: 999px;
  padding: .35rem .8rem;
  text-align: center;
}

blockquote.pull-quote{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 1.75rem 0 0;
}
.quote-attr{ display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.quote-attr .rule{ display: inline-block; width: 64px; height: 2px; background: var(--gold); }
.quote-attr .who{ font: 600 .92rem var(--font-body); color: var(--ink); }
.quote-attr .role{
  font: 500 .7rem var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.about-note{ font-size: .97rem; color: var(--muted); line-height: 1.7; margin-top: 1.5rem; max-width: 520px; }

/* ==========================================================================
   Reference
   ========================================================================== */

/* Karusel místo mřížky: tři karty vedle sebe nutily citace krátit na jednu
   větu s [...], a uříznutá pochvala zní jako reklamní slogan. Celý odstavec
   klienta zní jako klient. Do karuselu se jich vejde šest bez toho, aby
   sekce narostla přes celou obrazovku.

   Posouvání dělá prohlížeč sám – `scroll-snap` funguje prstem, kolečkem
   i klávesnicí a bez JavaScriptu. Skript jen dokresluje šipky a počítadlo,
   takže když se nenačte, sekce pořád funguje. */
.ref-karusel{ margin-top: 2.5rem; }

.ref-stopa{
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  /* Lišta pryč – ovládá se šipkami nebo tahem. */
  scrollbar-width: none;
  /* Žádné vnitřní odsazení: posunulo by nulovou pozici o svou šířku a levá
     šipka by na začátku zůstala aktivní. Rámeček fokusu se proto kreslí
     dovnitř (`outline-offset` níž), ne kolem. */
  padding: 0;
  margin: 0;
}
.ref-stopa::-webkit-scrollbar{ display: none; }
.ref-stopa:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: -1px;
  border-radius: var(--radius-lg);
}

/* Další karta vykukuje za okrajem. Bez toho vypadá karusel jako obyčejná
   karta, nikdo netuší, že je čeho listovat, a šipky zůstanou nepovšimnuté. */
.ref-slide{
  flex: 0 0 min(60%, 600px);
  scroll-snap-align: start;
  display: flex;
}
.ref-slide > article{
  width: 100%;
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: border-color .3s var(--ease);
}
.ref-slide > article:hover{ border-color: rgba(201,162,75,.4); }

/* Serifová kurzíva místo trackovaných kapitálek. Uppercase v češtině při
   téhle velikosti požírá háčky a čárky („SROZUMITELNĚ") a Inter v kapitálkách
   je navíc nejběžnější agenturní klišé. Kurzíva je stejný akcent, jaký nese
   `em` v nadpisech, takže popisek patří ke značce, ne k šabloně. */
.ref-tema{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-bright);
}
.ref-slide blockquote{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--cream);
  /* Úvodní uvozovka visí vlevo mimo blok, aby první řádek začínal
     na stejné ose jako popisek nad ním. */
  text-indent: -.4em;
}
.ref-slide footer{
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.ref-kdo{ font: 500 .85rem var(--font-body); color: var(--cream); }
.ref-zdroj{ font-size: .78rem; color: var(--cream-faint); }
.ref-zdroj::before{ content: "· "; color: var(--gold); }

.ref-ovladani{
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ref-pocet{
  font: 500 .8rem var(--font-body);
  color: var(--cream-faint);
  /* Bez tabulkových číslic počítadlo poskakuje při každém posunu. */
  font-variant-numeric: tabular-nums;
}
.ref-pocet b{ color: var(--cream); font-weight: 500; }
.ref-sipky{ display: flex; gap: .5rem; margin-left: auto; }
.ref-sipka{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.ref-sipka:hover:not(:disabled){ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.ref-sipka:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ref-sipka:disabled{ opacity: .28; cursor: default; }
.ref-sipka svg{ width: 15px; height: 15px; }

/* Dokud skript nepřevezme ovládání, šipky by nic nedělaly – proto se
   ukazují až s třídou, kterou nasadí JS. Počítadlo zůstává, to je jen text. */
.ref-sipky{ visibility: hidden; }
.ref-karusel.je-ziva .ref-sipky{ visibility: visible; }

@media (max-width: 720px){
  .ref-slide{ flex: 0 0 86%; }
  .ref-ovladani{ margin-top: 1.25rem; }
}
@media (prefers-reduced-motion: reduce){
  .ref-stopa{ scroll-behavior: auto; }
}

/* ==========================================================================
   Proč my / hodnoty
   ========================================================================== */

.why-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
.why-checks{ margin-top: 2rem; display: flex; flex-direction: column; gap: .6rem; }
.why-checks li{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font: 500 .9rem var(--font-body);
  color: var(--text-soft);
  line-height: 1.5;
}
.why-checks li::before{ content: '✓'; color: var(--gold); flex-shrink: 0; }

.why-list{ display: flex; flex-direction: column; }
.why-item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  padding-bottom: 2.25rem;
  position: relative;
}
.why-item:last-child{ padding-bottom: 0; }
/* spojnice mezi kroky, ne opakovaná vodorovná linka */
.why-item::before{
  content: '';
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.why-item:last-child::before{ display: none; }
.why-item .idx{
  width: 56px;
  height: 56px;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(140,106,38,.45);
  background: var(--paper);
  box-shadow: inset 0 0 0 5px rgba(168,127,46,.06), 0 2px 10px rgba(28,27,24,.05);
  font: 400 1.1rem var(--font-display);
  font-style: italic;
  color: var(--gold-dark);
  position: relative;
  z-index: 1;
}
.why-item h3{ font: 400 1.2rem var(--font-display); color: var(--ink); margin-bottom: .35rem; padding-top: .65rem; }
.why-item p{ font-size: .92rem; color: var(--muted); line-height: 1.65; }

/* ==========================================================================
   Partner bar (banky)
   ========================================================================== */

.partner-bar{
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 2.25rem var(--pad);
  text-align: center;
}
.partner-bar .eyebrow{ margin-bottom: 1.25rem; }
/* Pás log bank: šest sad za sebou a posun přesně o šestinu šířky, takže
   smyčka navazuje bez viditelného skoku. Dvě sady nestačily — na širokém
   monitoru by se konec pásu ukázal dřív, než se stihne vrátit. */
.partner-marks{
  overflow: hidden;
  /* Okraje se rozplývají, aby loga nevyskakovala z ničeho a nemizela o hranu. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partner-stopa{
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: max-content;
  animation: partner-jizda 38s linear infinite;
}
@keyframes partner-jizda{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(calc(-100% / 6), 0, 0); }
}
/* Kdo si chce logo prohlédnout, pás zastaví najetím myší. */
.partner-marks:hover .partner-stopa{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .partner-stopa{
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.5rem;
  }
  .partner-marks{ -webkit-mask-image: none; mask-image: none; }
}
.partner-marks span{
  font: 600 .82rem var(--font-body);
  color: var(--muted-2);
  padding: .4rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.partner-marks span:hover{ color: var(--ink); border-color: var(--gold); }
.partner-marks img.bank-logo{
  flex: 0 0 auto;
  height: auto;
  max-height: 34px;
  max-width: 118px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.partner-marks img.bank-logo:hover{ filter: none; opacity: 1; }

/* ==========================================================================
   Lead magnet
   ========================================================================== */

.lead-magnet{
  background: var(--ink-card);
  border-top: 1px solid var(--line-dark);
}
.lead-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  padding-block: 2.5rem;
}
.lead-copy h3{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--cream);
  letter-spacing: -.015em;
}
.lead-copy h3 em{ font-style: italic; color: var(--gold-bright); }
.lead-copy p{ color: var(--cream-muted); font-size: .9rem; margin-top: .4rem; }

.lead-form{ display: flex; gap: .6rem; flex-wrap: wrap; }
.lead-form input[type="email"]{
  min-width: 240px;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245,243,238,.2);
  background: rgba(245,243,238,.06);
  color: var(--cream);
  font: 500 .92rem var(--font-body);
}
.lead-form input[type="email"]::placeholder{ color: var(--cream-faint); }
.lead-form input[type="email"]:focus-visible{ outline-color: var(--gold-bright); }
.form-msg{
  font: 500 .85rem var(--font-body);
  margin-top: .6rem;
  min-height: 1.2em;
}
.form-msg.ok{ color: var(--gold-bright); }
.form-msg.err{ color: #E29A6B; }
.section-white .form-msg.ok,
.section-paper .form-msg.ok{ color: var(--gold-dark); }
.section-white .form-msg.err,
.section-paper .form-msg.err{ color: #B4502A; }

/* ==========================================================================
   Kontakt
   ========================================================================== */

.contact-section{
  position: relative;
  overflow: hidden;
}
/* Rozmazaná zlatá skvrna nad kontaktní sekcí je prryč. Na tmavém podkladu
   z ní byl jen mlhavý flek, který sekci nijak neorganizoval. */

.contact-grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 3.5rem;
  align-items: start;
  position: relative;
}

/* `text-wrap: balance` rozdělí nadpis na stejně dlouhé řádky, aby na
   posledním nezůstalo viset jedno slovo. */
.contact-intro h1,
.contact-intro h2{ color: var(--cream); text-wrap: balance; }
.contact-lead{
  font-size: 1.02rem;
  color: var(--cream-muted);
  line-height: 1.7;
  margin-top: 1.25rem;
  max-width: 460px;
}
.contact-facts{ display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.contact-facts a,
.contact-facts span{
  display: flex;
  align-items: center;
  gap: .6rem;
  font: 500 .95rem var(--font-body);
  color: var(--cream);
  text-decoration: none;
}
.contact-facts a:hover{ color: var(--gold-bright); }
.contact-facts .fact-label{
  font: 500 .64rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  min-width: 92px;
}

.contact-card{
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.field{ margin-bottom: 1.15rem; }
.field label{
  display: block;
  font: 600 .78rem var(--font-body);
  color: var(--text-soft);
  margin-bottom: .4rem;
}
.field .req{ color: var(--gold-dark); }
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: .8rem .95rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  font: 500 .95rem var(--font-body);
  color: var(--ink);
  transition: border-color .2s var(--ease);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ border-color: var(--gold); }
.field textarea{ resize: vertical; min-height: 90px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field-check{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1.35rem;
}
.field-check input{ margin-top: .25rem; accent-color: var(--gold); flex-shrink: 0; }
.field-check label{ font-size: .83rem; color: var(--muted); line-height: 1.55; }
.field-check a{ color: var(--gold-dark); text-decoration: underline; }

.field-error{
  display: block;
  font: 500 .78rem var(--font-body);
  color: #B4502A;
  margin-top: .35rem;
  min-height: 1em;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{ background: var(--ink-2); padding: 3.5rem var(--pad) 2rem; }
.footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
/* V patičce je podklad tmavý, takže inkoustová část loga by zmizela.
   Vlastní soubor, ne filtr: `invert()` by převrátil i zlatou. */
.footer-brand{
  display: block;
  width: calc(30px * 3.41);
  height: 30px;
  background: url(../img/logo-inverzni.svg) no-repeat left center / contain;
  font-size: 0;
  color: transparent;
  text-decoration: none;
}
.footer-tag{ font: 300 1.05rem var(--font-display); color: rgba(245,243,238,.8); margin-top: .85rem; max-width: 320px; line-height: 1.5; }
.footer-tag em{ font-style: italic; color: var(--gold-bright); }
.footer-col h4{
  font: 500 .7rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1rem;
}
.footer-col ul{ display: flex; flex-direction: column; gap: .55rem; }
.footer-col a,
.footer-col span{ font-size: .9rem; color: rgba(245,243,238,.6); text-decoration: none; }
.footer-col a:hover{ color: var(--cream); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: rgba(245,243,238,.4);
}
.footer-bottom a{ color: rgba(245,243,238,.4); }
.footer-bottom a:hover{ color: var(--cream); }

/* ==========================================================================
   Reveal on scroll – jeden zrežírovaný nástup, ne deset mikrointerakcí
   ========================================================================== */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-1{ transition-delay: .05s; }
.reveal-2{ transition-delay: .15s; }
.reveal-3{ transition-delay: .25s; }

/* ==========================================================================
   Responzivita
   ========================================================================== */

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; }
  .hero-portrait{
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: 100%;
    justify-content: center;
    height: auto;
  }
  .portrait-frame{ width: min(380px, 82%); }
  .pillars{ grid-template-columns: 1fr; gap: 0; border-top: none; }
  .pillar{ padding-top: 2rem; border-top: 1px solid var(--line-strong); }
  .pillar:first-child{ padding-top: 0; border-top: none; }
  .pillar:not(:first-child)::before{ display: none; }
  .pillar .idx{ font-size: 2.75rem; }
  .about-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photos{ max-width: 360px; }
  .ref-slide{ flex: 0 0 min(72%, 520px); }
  .why-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 720px){
  .microbar{ font-size: .64rem; gap: .5rem; }
  .microbar > span:first-child{ display: none; }
  .microbar-right{ width: 100%; justify-content: space-between; }

  .nav{ flex-wrap: wrap; }
  .nav-toggle{ display: block; margin-left: auto; order: 2; }
  .nav-links{
    order: 4;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav-links a{ width: 100%; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-cta{ order: 3; }
  .nav.is-open .nav-links{ max-height: 420px; }
  .nav-cta .btn{ padding: .65rem 1.1rem; font-size: .88rem; }

  .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .field-row{ grid-template-columns: 1fr; }
  .lead-inner{ flex-direction: column; align-items: flex-start; }
  .lead-form{ width: 100%; }
  .lead-form input[type="email"]{ flex: 1; min-width: 0; }
}

@media (max-width: 400px){
  .hero h1{ font-size: 2.1rem; }
  .hero-stats{ gap: 1.5rem; }
}

/* ==========================================================================
   Podstránky – sdílené komponenty
   ========================================================================== */

/* Hlavička podstránky */
.page-hero{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-hero .eyebrow{ display: block; margin-bottom: 1rem; }
.page-hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--ink);
  max-width: 18ch;
}
.page-hero h1 em{ font-style: italic; color: var(--gold); }
.page-hero .lead{
  font-size: 1.08rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
  margin-top: 1.25rem;
}

/* Aktivní položka navigace na podstránkách */
.nav-links a[aria-current="page"]{ color: var(--ink); border-bottom-color: var(--gold); }
.nav-links a[aria-current="page"]::after{ opacity: 1; }

/* FAQ – nativní details/summary */
.faq-list{ max-width: 760px; }
.faq-item{
  border-bottom: 1px solid var(--line-strong);
}
.faq-item summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font: 500 1.02rem var(--font-body);
  color: var(--ink);
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+';
  flex-shrink: 0;
  font: 300 1.5rem var(--font-display);
  color: var(--gold-dark);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary:hover{ color: var(--gold-dark); }
.faq-item p{
  padding: 0 0 1.25rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 65ch;
}

/* Srovnávací tabulka banka vs. my */
.compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.compare-col{
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 1.75rem;
  background: var(--white);
}
.compare-col.is-us{
  background: var(--ink-card);
  border-color: transparent;
  color: var(--cream, #F6F5F2);
}
.compare-col h3{
  font: 400 1.35rem var(--font-display);
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
}
.compare-col.is-us h3 em{ font-style: italic; color: var(--gold-bright); }
.compare-col ul{ display: flex; flex-direction: column; gap: .8rem; }
.compare-col li{
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
}
.compare-col.is-us li{ color: rgba(246,245,242,.82); }
.compare-col li::before{
  content: '✗';
  flex-shrink: 0;
  color: var(--muted-2);
}
.compare-col.is-us li::before{ content: '✓'; color: var(--gold-bright); }

/* --- Srovnání ve třech panelech: úvod | banka | my ------------------------
   Vlevo důvod a akce, uprostřed výchozí stav, vpravo tmavá karta, která
   opticky vyhrává. Klient čte zleva doprava a skončí u nás.
   -------------------------------------------------------------------------- */
.compare3{
  display: grid;
  grid-template-columns: .95fr 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.c3-intro{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-right: clamp(0rem, 2vw, 1.5rem);
}
.c3-intro p{
  font-size: .95rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Osobní poznámka poradce. Psací písmo (Dancing Script) je pryč — při té
   velikosti se špatně četlo a je to nejrozšířenější „rukopisný“ font webu.
   Text drží Newsreader kurzivou, ručně psaný zůstal jen podpis, a ten je
   skutečný, ne vysázený.
   Pointa má selektor .rukopis .rukopis-pointa schválně: .c3-intro p výš
   nastavuje .95rem a šedou, a jednotřídní selektor by proti němu prohrál. */
.rukopis{ margin:.2rem 0 0; max-width:34rem }
.rukopis-list{
  position:relative; background:#FDFCF7;
  border:1px solid rgba(28,27,24,.09); border-radius:3px;
  padding:1.3rem 1.5rem 1.35rem 3.1rem;
  box-shadow:0 1px 2px rgba(28,27,24,.05), 0 10px 24px -14px rgba(28,27,24,.35);
  transform:rotate(-.5deg);
}
/* okrajová linka jako v poznámkovém bloku */
.rukopis-list::before{ content:''; position:absolute; left:2rem; top:.5rem; bottom:.5rem; width:1px; background:rgba(168,127,46,.45) }
.rukopis-body{ list-style:none; margin:0; padding:0 }
.rukopis-body li{
  font-family:var(--font-display); font-style:italic; font-size:1.125rem; line-height:1.65; color:var(--ink);
  position:relative; padding-left:1.15rem; margin:0 0 .3rem;
}
.rukopis-body li::before{ content:'–'; position:absolute; left:0; top:0; color:var(--gold) }
.rukopis .rukopis-pointa{
  font-family:var(--font-display); font-style:italic; font-size:1.25rem; line-height:1.5; color:var(--ink);
  margin:.5rem 0 0; display:inline-block; padding-bottom:.7rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4C42 2.2 80 6.6 118 4.1S180 2.2 198 4.9' fill='none' stroke='%23A87F2E' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .5rem;
}
/* Souvislý text místo odrážek — citace a osobní vzkazy odrážky nesnesou. */
.rukopis .rukopis-text{ font-family:var(--font-display); font-style:italic; font-size:1.125rem; line-height:1.65; color:var(--ink); margin:0 0 .55rem }
.rukopis .rukopis-text:last-child{ margin-bottom:0 }
/* Podpis. Kde máme sken vlastnoručního podpisu, je tam obrázek a při
   dorolování se nakreslí zleva doprava. `clip-path` je na to levnější než
   tahat obrysy písmen z fontu — a u skutečného podpisu je to i pravdivější
   než script font. Kde sken nemáme (Petr Mareš), zůstává jméno textem
   v Newsreaderu; cizí podpis se nevymýšlí. */
.rukopis-podpis{ margin:.95rem 0 0 .2rem; display:flex; align-items:center; gap:.75rem }
.rukopis-podpis::before{ content:''; flex:none; width:3.25rem; height:2px; background:var(--gold) }
.rukopis-jmeno{ font-family:var(--font-display); font-style:italic; font-size:1.125rem; line-height:1.2; color:var(--ink) }
.rukopis-jmeno img{ display:block; width:7.5rem; height:auto }
/* Výchozí stav je bez ořezu, takže bez skriptu je podpis rovnou celý.
   Schová ho až `backwards` ve chvíli, kdy se animace opravdu spustí. */
.is-visible .rukopis-jmeno img{ animation:podpis-pise 1.5s cubic-bezier(.33,0,.15,1) .35s backwards }
@keyframes podpis-pise{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@media (prefers-reduced-motion:reduce){ .is-visible .rukopis-jmeno img{ animation:none } }
/* Podepsaný člověk může být odkaz na svůj profil. Zlatá s podtržením by
   z podpisu udělala tlačítko, takže barvu dědí a linka je až na najetí. */
.rukopis-jmeno a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent }
.rukopis-jmeno a:hover, .rukopis-jmeno a:focus-visible{ border-bottom-color:var(--gold) }
.rukopis-role{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
/* Na úzké obrazovce je karta přes celou šířku a natočení by vystrčilo roh
   za okraj okna, což udělá vodorovný posuvník. */
@media (max-width:600px){
  .rukopis-list{ transform:none; padding:1.1rem 1.1rem 1.15rem 2.4rem }
  .rukopis-list::before{ left:1.4rem }
  .rukopis-body li{ font-size:1.25rem }
  .rukopis .rukopis-pointa{ font-size:1.3125rem }
  .rukopis .rukopis-text{ font-size:1.25rem }
  .rukopis-jmeno{ font-size:1.1875rem }
}
.c3-actions{ display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.c3-actions .btn{ justify-content: center; }
.c3-fine{
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8rem !important;
  line-height: 1.6;
  color: var(--muted-2) !important;
}

.c3-col{
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  border-radius: var(--radius-lg);
}
.c3-col.is-bank{
  background: var(--white);
  border: 1px solid var(--line-strong);
}
.c3-col.is-us{
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  box-shadow: 0 30px 60px -45px rgba(28,27,24,.75);
}
.c3-title{
  font: 400 1.5rem var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
/* V našem sloupci je značka logem, u banky zůstává obyčejný nadpis — tam
   žádné logo nepatří. Pozadí, ne pevná šířka: element si musí udržet plnou
   šířku sloupce, jinak by se pod ním zkrátila dělicí linka. */
.is-us .c3-title{
  /* Text se odsune, ne zmenší na nulu: výška řádku musí zůstat stejná jako
     u nadpisu „Banka“ vedle, jinak se dělicí linky obou sloupců rozejdou. */
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  background: url(../img/logo-inverzni.svg) no-repeat left center / auto 26px;
  border-bottom-color: var(--line-dark);
}

.c3-list{ display: flex; flex-direction: column; gap: .85rem; }
.c3-list li{
  position: relative;
  padding-left: 2rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.is-us .c3-list li{ color: var(--cream-muted); }
.c3-list li::before{
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  line-height: 1;
}
.is-bank .c3-list li::before{
  content: '✕';
  border: 1px solid rgba(162,66,42,.3);
  color: #A2422A;
}
.is-us .c3-list li::before{
  content: '✓';
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 1020px){
  .compare3{ grid-template-columns: 1fr 1fr; }
  .c3-intro{ grid-column: 1 / -1; padding-right: 0; }
  .c3-actions{ flex-direction: row; flex-wrap: wrap; }
  .c3-fine{ margin-top: 0; }
}
@media (max-width: 700px){
  .compare3{ grid-template-columns: 1fr; }
  .c3-actions .btn{ flex: 1 1 100%; }
}

/* --- NEPOUŽITO od 28. 7. 2026 -------------------------------------------
   Graf úspory (.saving*) a řádkové srovnání (.versus*) nahradilo .compare3.
   Necháno pro případ návratu; když se do měsíce nevrátí, smaž to.
   ------------------------------------------------------------------------ */

/* --- Graf úspory ----------------------------------------------------------
   Jeden obrázek, který odpoví na „proč s vámi": dva pruhy zaplacených úroků
   a zlatě vyznačený rozdíl. Osa začíná na nule, nic se neořezává – jinak by
   to bylo hezké, ale nepoctivé.
   -------------------------------------------------------------------------- */
.saving{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
}
.saving-graf{ display: flex; flex-direction: column; gap: 1.35rem; }
.sv-row{
  display: grid;
  grid-template-columns: 10.5rem 1fr auto;
  align-items: center;
  gap: 1.25rem;
}
.sv-lbl{
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font: 500 .8rem var(--font-body);
  color: var(--cream-muted);
}
.sv-lbl em{
  font: 400 1.05rem var(--font-display);
  font-style: normal;
  color: var(--cream);
}
.sv-track{ display: flex; align-items: stretch; height: 46px; }
.sv-bar{
  width: var(--w);
  border-radius: 4px;
  animation: sv-grow .9s var(--ease) both;
}
.sv-bar.is-bank{ background: rgba(246,245,242,.16); }
.sv-bar.is-us{
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 4px 0 0 4px;
}
/* zlatě šrafovaný zbytek = to, co u banky odteče na úrocích navíc */
.sv-diff{
  width: var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(201,162,75,.55);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(201,162,75,.14) 0 6px,
    transparent 6px 12px
  );
  animation: sv-grow .9s .15s var(--ease) both;
}
.sv-diff span{
  font: 500 .62rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
}
@keyframes sv-grow{ from{ transform: scaleX(0); transform-origin: left; } to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .sv-bar, .sv-diff{ animation: none; }
}
.sv-val{
  font: 400 1rem var(--font-display);
  color: var(--cream);
  white-space: nowrap;
  min-width: 7.5rem;
  text-align: right;
}
.sv-axis{
  margin-top: .25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-dark);
  font: 500 .66rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

.saving-claim{
  padding-left: clamp(0rem, 2vw, 2rem);
  border-left: 1px solid var(--line-dark);
}
.sc-num{
  display: block;
  font: 300 clamp(2.2rem, 4.5vw, 3.1rem) var(--font-display);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold-bright);
}
.sc-num em{ font-style: normal; font-size: .42em; color: rgba(246,245,242,.65); }
.sc-lbl{
  display: block;
  margin-top: .5rem;
  font: 500 .7rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-muted);
}
.sc-note{
  margin-top: 1rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--cream-faint);
}

.versus-lead{
  margin: 3rem 0 .5rem;
  font: 400 clamp(1.2rem, 2.2vw, 1.55rem) var(--font-display);
  color: var(--cream);
  letter-spacing: -.02em;
}
.versus-cta{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-ghost-ink{
  border: 1.5px solid rgba(246,245,242,.3);
  color: var(--cream);
  background: none;
}
.btn-ghost-ink:hover{ border-color: var(--gold-bright); color: var(--gold-bright); }

@media (max-width: 900px){
  .saving{ grid-template-columns: 1fr; }
  .saving-claim{
    padding-left: 0;
    padding-top: 1.5rem;
    border-left: none;
    border-top: 1px solid var(--line-dark);
  }
  .sv-row{ grid-template-columns: 1fr; gap: .5rem; }
  .sv-lbl{ flex-direction: row; align-items: baseline; gap: .5rem; }
  .sv-track{ height: 38px; }
  .sv-val{ text-align: left; min-width: 0; font-size: .95rem; }
}

/* --- Srovnání pobočka vs. my --------------------------------------------
   Ne dvě krabice vedle sebe, ale jedna osa: téma sedí na svislé lince,
   vlevo tlumeně banka, vpravo inkoustově my. Oko čte po řádcích, ne po
   sloupcích, takže se srovnává skutečně bod po bodu.
   ------------------------------------------------------------------------ */
.versus{
  --vs-gap: clamp(1.25rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line-strong);
}
.versus-head,
.versus-row{
  display: grid;
  grid-template-columns: 1fr minmax(7.5rem, auto) 1fr;
  gap: 0 var(--vs-gap);
  align-items: center;
}
.versus-head{ padding: .9rem 0 .5rem; }
.vs-h{
  font: 600 .66rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.vs-h-bank{ text-align: right; }
.vs-h-us{ color: var(--gold-dark); }

.versus-row{
  position: relative;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}
/* svislá osa vede řádkem, štítek ji svým pozadím přeruší */
.versus-row::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.versus-row .vs-l,
.versus-row .vs-r{
  font-size: .95rem;
  line-height: 1.6;
  max-width: 38ch;
}
.versus-row .vs-l{
  text-align: right;
  justify-self: end;
  color: var(--muted-2);
}
.versus-row .vs-r{ color: var(--text-soft); }

/* štítek tématu drží střed a nese svislou linku */
.vs-t{
  position: relative;
  justify-self: center;
  padding: .3rem .85rem;
  font: 400 .95rem var(--font-display);
  color: var(--ink);
  white-space: nowrap;
  background: var(--white);
}
/* tmavá varianta srovnání (sekce section-ink) */
.section-ink .desc{ color: var(--cream-muted); }
.section-ink .versus{ border-top-color: var(--line-dark); }
.section-ink .vs-h{ color: var(--cream-faint); }
.section-ink .vs-h-us{ color: var(--gold-bright); }
.section-ink .versus-row{ border-top-color: var(--line-dark); }
.section-ink .versus-row::before{ background: rgba(246,245,242,.16); }
.section-ink .versus-row .vs-l{ color: var(--cream-faint); }
.section-ink .versus-row .vs-r{ color: var(--cream-muted); }
.section-ink .vs-t{ background: var(--ink); color: var(--cream); }
.section-ink .versus-note{ color: var(--cream-muted); border-left-color: var(--gold); }
@media (max-width: 820px){
  .section-ink .versus-row .vs-l::before{ color: var(--cream-faint); }
  .section-ink .versus-row .vs-r::before{ color: var(--gold-bright); }
}

.versus-note{
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 62ch;
}

@media (max-width: 820px){
  /* na mobilu osa nedává smysl: téma nahoru, pod něj obě strany se štítky */
  .versus-head{ display: none; }
  .versus-row{
    grid-template-columns: 1fr;
    gap: .7rem;
    padding: 1.5rem 0;
  }
  .versus-row .vs-t{
    order: -1;
    justify-self: start;
    padding: 0;
    background: none;
    font-size: 1.15rem;
  }
  .versus-row::before{ display: none; }
  .versus-row .vs-l,
  .versus-row .vs-r{
    text-align: left;
    justify-self: stretch;
    max-width: none;
    padding-left: 1.6rem;
    position: relative;
  }
  .versus-row .vs-l::before,
  .versus-row .vs-r::before{
    position: absolute;
    left: 0;
    top: 0;
    font-size: .9rem;
  }
  .versus-row .vs-l::before{ content: '✗'; color: var(--muted-2); }
  .versus-row .vs-r::before{ content: '✓'; color: var(--gold-dark); }
}

/* Tým */
/* Tři pevné sloupce podle počtu členů týmu.
     Dřív tu byl auto-fit se stropem 22rem. Vypadá chytře, ale má tichou
     poruchu: jakmile kontejneru chybí byť pár pixelů na 3 × 352 + 2 × 24,
     spadne na dva sloupce a třetí karta zůstane sama na druhém řádku.
     Na širokém okně to nikdo nevidí, na 1300 px ano.
     Když přibude nebo ubude člen týmu, přepiš tu trojku. */
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 1.5rem;
}
.team-card{
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
}
.team-card .photo{
  aspect-ratio: 3/3.2;
  background: linear-gradient(160deg, #ECEAE4, #DDD9D0);
  position: relative;
  overflow: hidden;
}
.team-card .photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

/* Oční linka napříč řadou.
   `50% 12%` je společné nastavení pro všechny; Jan Pavlík ale na svém
   snímku stojí o dost níž (oči v 45 % výšky originálu proti 34 % u
   ostatních), takže mu v rámu vycházely oči o 84 px pod sousedy a řada
   se rozjížděla. 91 % posune výřez dolů po zdroji, tedy fotku nahoru,
   a oční linky sednou na stejnou výšku. Nad hlavou zůstává 70 px.
   Až přibude další fotka, srovnávat se má vždycky podle očí, ne podle
   temene — to je u každého jinde podle účesu. */
.team-card .photo img[src*="jan-pavlik"]{ object-position: 50% 91%; }
.team-card .photo .mono{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 300 3rem var(--font-display);
  color: var(--muted-2);
}
.team-card .body{ padding: 1.25rem 1.4rem 1.5rem; }
.team-card .name{
  font: 400 1.2rem var(--font-display);
  color: var(--ink);
  display: flex; align-items: center; gap: .6rem;
}
.team-card .name .li-badge{
  width: 18px; height: 18px;
  padding-left: .6rem;
  border-left: 1px solid var(--line-strong);
}
.team-card .role{
  font: 500 .68rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: .3rem;
}
.team-card .bio{
  margin-top: .75rem;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Recenze – formát rozhovoru */
.review{
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 820px;
  box-shadow: var(--shadow-card);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.review .review-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.review-who{ display: flex; align-items: center; gap: 1rem; }
.review .client{ display: block; font: 400 1.3rem var(--font-display); color: var(--ink); line-height: 1.15; }
.review-topic{ display: block; font-size: .85rem; color: var(--muted); margin-top: .12rem; }
.review-rating{ display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.review .stars{ color: var(--gold); letter-spacing: .18em; font-size: 1.05rem; }
.review-since{ font-size: .74rem; color: var(--muted-2); }
.review dl{ margin: 0; }
.review dt{
  font: 600 .72rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: 1.7rem;
}
.review dt:first-of-type{ margin-top: .25rem; }
.review dd{
  margin: .6rem 0 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--gold);
  color: var(--text-soft);
  line-height: 1.55;
  font: 400 clamp(1.05rem, 1.6vw, 1.2rem) var(--font-display);
  font-style: italic;
}
.review-source{
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted-2);
}
.review-source a{ color: var(--gold-dark); }
@media (max-width: 560px){
  .review-head{ align-items: flex-start; }
  .review-rating{ align-items: flex-start; }
}

/* Kalkulačka */
.section-head.is-stacked{ flex-direction: column; align-items: flex-start; }
.section-head.is-stacked .desc{ max-width: 640px; margin-top: .85rem; }

.calc{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: stretch;
}
.calc-form{
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.calc-form .field{ margin-bottom: 1.1rem; }
.calc-form label{
  display: block;
  font: 500 .82rem var(--font-body);
  color: var(--text-soft);
  margin-bottom: .4rem;
}
.calc-form input[type="number"],
.calc-form input[type="text"]{
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: 500 1rem var(--font-body);
  color: var(--ink);
  background: var(--paper);
}
.calc-form input:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.calc-form .hint{
  font-size: .74rem;
  color: var(--muted-2);
  margin-top: .3rem;
}
.calc-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.calc-check{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.calc-check input{ width: 18px; height: 18px; accent-color: var(--gold-dark); }
.calc-check label{ margin: 0; font-size: .9rem; color: var(--text-soft); }

.calc-result{
  background: var(--ink-card);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: rgba(246,245,242,.85);
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
/* prázdný stav vertikálně vycentrovat, vyplněný zarovnat nahoru */
.calc-result:has(.calc-empty){ justify-content: center; }
.calc-eyebrow{
  display: block;
  font: 600 .66rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.15rem;
}
/* skeleton náhled – signalizuje „tady se objeví výsledek" */
.calc-skeleton{ display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.25rem; }
.calc-skeleton span{
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(246,245,242,.06), rgba(246,245,242,.16), rgba(246,245,242,.06));
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
}
.calc-skeleton .sk-lg{ height: 32px; width: 86%; }
.calc-skeleton .sk-md{ height: 16px; width: 52%; margin-bottom: .4rem; }
.calc-skeleton .sk-row{ height: 13px; width: 100%; }
.calc-skeleton .sk-row:nth-of-type(4){ width: 90%; }
.calc-skeleton .sk-row:nth-of-type(5){ width: 74%; }
@keyframes sk-shimmer{ 0%{ background-position: 150% 0; } 100%{ background-position: -150% 0; } }
.calc-result .verdict{
  font: 300 clamp(1.6rem, 2.6vw, 2.2rem) var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: #F6F5F2;
}
.calc-result .verdict em{ font-style: italic; color: var(--gold-bright); }
.calc-result .calc-figures{
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(246,245,242,.14);
}
.calc-figure{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: .92rem;
}
.calc-figure .val{
  font: 400 1.15rem var(--font-display);
  color: #F6F5F2;
  white-space: nowrap;
}
.calc-figure.is-limit .val{ color: var(--gold-bright); }
.calc-note{
  margin-top: 1.35rem;
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(246,245,242,.55);
}
.calc-result .btn{ margin-top: 1.35rem; }
.calc-empty{
  color: rgba(246,245,242,.55);
  font-size: .95rem;
  line-height: 1.65;
}

/* --- JEDEN PANEL kalkulačky: vstupy | výsledek + kontakt ------------------ */
.calcbox{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 30px 70px -50px rgba(28,27,24,.55);
}
.cb-in{
  padding: clamp(1.4rem, 2.8vw, 2.3rem);
  display: flex;
  flex-direction: column;
}
/* metodika drží spodek levého sloupce, ať tam nezůstává prázdno */
.cb-method{
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted-2);
}
.cb-method strong{ color: var(--text-soft); font-weight: 600; }
.cb-out{
  background: var(--ink-card);
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.8vw, 2.3rem);
}
/* uvnitř panelu si dílčí bloky nedrží vlastní rámeček */
.calcbox .calc-form{ background: none; border: 0; border-radius: 0; padding: 0; }
.calcbox .calc-result{ background: none; border-radius: 0; padding: 0; min-height: 0; }
.calcbox .calc-result .btn{ display: none; }

/* číslované kroky – klient vidí, že je to jeden průchod */
.cb-step{
  display: flex;
  align-items: center;
  gap: .6rem;
  font: 600 .68rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.cb-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: .7rem;
  letter-spacing: 0;
  flex-shrink: 0;
}
.cb-step-dark{ color: rgba(246,245,242,.55); }
.cb-step-dark .cb-num{ background: var(--gold); color: var(--ink); }

/* kontaktní část uvnitř tmavé poloviny */
.cb-out .calc-lead-form{
  margin-top: auto;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246,245,242,.14);
}
.cb-out .calc-lead-form input[type="text"],
.cb-out .calc-lead-form input[type="tel"],
.cb-out .calc-lead-form input[type="email"]{
  flex: 1 1 100%;
  background: rgba(246,245,242,.06);
  border: 1px solid rgba(246,245,242,.18);
  color: #F6F5F2;
}
.cb-out .calc-lead-form input::placeholder{ color: rgba(246,245,242,.42); }
.cb-out .calc-lead-form input:focus-visible{ border-color: var(--gold-bright); background: rgba(246,245,242,.1); }
.cb-out .cl-consent{ color: rgba(246,245,242,.5); }
.cb-out .cl-consent a{ color: var(--gold-bright); }
.cb-out .calc-lead-done{ color: var(--gold-bright); }
.cb-assure{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin-top: 1.1rem;
  list-style: none;
  font-size: .76rem;
  color: rgba(246,245,242,.55);
}
.cb-assure li{ display: flex; align-items: center; gap: .4rem; }
.cb-assure li::before{ content: '✓'; color: var(--gold-bright); font-size: .8rem; }

/* --- Jak dál: zavoláme vám / vyberu si termín -----------------------------
   Dvě karty vedle sebe. Rezervace je zvýrazněná, protože termín, který si
   klient vybere sám, drží líp než slib, že někdo zavolá.
   -------------------------------------------------------------------------- */
.nextstep{
  margin-top: 2.25rem;
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--ink);
  border: 1px solid var(--line-dark);
  box-shadow: 0 40px 80px -60px rgba(28,27,24,.9);
  /* jemné příchozí vyplutí – panel má zaujmout, ne blikat */
  animation: nsIn .5s var(--ease) both;
}
@keyframes nsIn{
  from{ opacity: 0; transform: translateY(14px); }
  to  { opacity: 1; transform: none; }
}
.nextstep-eyebrow{
  font: 600 .66rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: .7rem;
}
.nextstep-title{
  font: 300 clamp(1.4rem, 2.6vw, 1.95rem) var(--font-display);
  color: var(--cream);
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.nextstep-sub{
  font-size: .93rem;
  line-height: 1.6;
  color: var(--cream-muted);
  max-width: 54ch;
  margin-bottom: 1.5rem;
}
.nextstep-opts{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 1rem;
}
.ns-card{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: left;
  padding: 1.5rem 1.6rem 1.35rem;
  border: 1px solid rgba(245,243,238,.16);
  border-radius: var(--radius-lg);
  background: rgba(245,243,238,.04);
  cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ns-card[hidden]{ display: none; }
.ns-card:hover{ border-color: rgba(245,243,238,.4); transform: translateY(-3px); background: rgba(245,243,238,.07); }
.ns-card:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* Rezervace je hlavní cesta: termín, který si klient vybere sám, drží líp
   než slib, že někdo zavolá. Proto plná zlatá, ne jen rámeček. */
.ns-card.is-primary{
  background: var(--gold-flat);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}
.ns-card.is-primary:hover{
  background: var(--gold-flat-hover);
  border-color: transparent;
  box-shadow: var(--shadow-gold-hover);
}
.ns-top{ display: flex; align-items: center; gap: .6rem; }
.ns-ico{ width: 1.35rem; height: 1.35rem; flex: none; color: var(--gold-bright); }
.is-primary .ns-ico{ color: var(--ink); opacity: .75; }
.ns-lbl{
  font: 400 clamp(1.1rem, 1.7vw, 1.28rem) var(--font-display);
  color: var(--cream);
  letter-spacing: -.01em;
}
.ns-desc{ font-size: .87rem; line-height: 1.55; color: var(--cream-muted); }
/* Výzva sedí na dně karty, ne hned pod popiskem.
   Mřížka obě karty natáhne na stejnou výšku, ale text je u každé jinak
   dlouhý — výzva pak u té kratší vyskočila výš a dvojice vypadala
   rozhozeně. `auto` ji stáhne dolů, `stretch` roztáhne přes celou kartu,
   aby linka nad ní šla od kraje ke kraji a ne jen pod nápisem. */
.ns-cta{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  align-self: stretch;
  padding-top: .85rem;
  border-top: 1px solid rgba(245,243,238,.14);
  font: 600 .74rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
/* Na zlaté ploše musí být linka tmavá, jinak zmizí. */
.ns-card.is-primary .ns-cta{ border-top-color: rgba(28,27,24,.20); }

/* Ikona na zlaté nemá důvod blednout do ztracena. */
.ns-card.is-primary .ns-ico{ opacity: .92; }

.ns-cta::after{ content: '→'; transition: transform .25s var(--ease); }
.ns-card:hover .ns-cta::after{ transform: translateX(4px); }
.is-primary .ns-lbl,
.is-primary .ns-desc,
.is-primary .ns-cta{ color: var(--ink); }
.is-primary .ns-desc{ opacity: .78; }
.ns-card:disabled{ opacity: .6; cursor: default; transform: none; }

/* --- Slovo zakladatele ----------------------------------------------------
   Fotka je pozadím sekce, ne obrázkem v rámečku: působí to, jako by mluvil,
   ne jako katalogová karta. Text má vlastní gradient, aby zůstal čitelný
   bez ohledu na to, co je pod ním – stejný princip jako hero na mobilu.
   -------------------------------------------------------------------------- */
.vision-hero{
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
/* Fotka je odbarvená a ztlumená už v souboru; maska ji navíc rozpouští
   do všech stran, aby na podkladu nezůstal viditelný obdélník. */
.vision-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../img/jan-zakladatel.jpg');
  background-repeat: no-repeat;
  /* Lícuje s pravým okrajem: kdyby končila dřív, byla by vidět svislá hrana */
  background-size: auto 150%;
  background-position: right 22%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 10%, rgba(0,0,0,.55) 32%, #000 58%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 74%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 10%, rgba(0,0,0,.55) 32%, #000 58%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 74%, transparent 98%);
  mask-composite: intersect;
}
/* Zleva plná, doprava průhledná – text sedí v plné části, fotka vykoukne */
.vision-hero::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 34%, rgba(28,27,24,.88) 48%, rgba(28,27,24,.55) 68%, rgba(28,27,24,.32) 88%, rgba(28,27,24,.28) 100%),
    linear-gradient(180deg, rgba(28,27,24,.6) 0%, transparent 24%, transparent 74%, var(--ink) 100%);
}
.vision{ max-width: 40rem; }
.vision-hero .eyebrow{ color: var(--gold-bright); }
.vision-title{
  font: 300 clamp(2rem, 4.5vw, 3rem) var(--font-display);
  color: var(--cream);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: .6rem 0 1.5rem;
}
.vision-title em{ font-style: italic; color: var(--gold-bright); }
.vision-text{ border: 0; margin: 0; padding: 0; }
/* Text je krátký, unese proto větší stupeň – v drobném by se v takhle
   velké sekci ztratil. */
.vision-text p{
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.7;
  color: var(--cream-muted);
  text-wrap: pretty;
}
.vision-text p + p{ margin-top: 1.1rem; }
.vision-sign{ margin-top: 2rem; }
.vision-sign img{ display: block; width: 150px; height: auto; margin-bottom: .5rem; }
.vision-name{ font: 500 .95rem var(--font-body); color: var(--cream); }
.vision-role{
  font: 500 .68rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-top: .15rem;
}

/* Na mobilu je fotka nahoře a text pod ní – stejné řešení jako hero na
   úvodní stránce. Vodorovný gradient by tu text položil přes obličej. */
@media (max-width: 860px){
  .vision-hero{ padding-top: min(46vh, 360px); }
  .vision-hero::before{
    background-size: 124% auto;
    background-position: 50% -4vw;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 72%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .vision-hero::after{
    background: linear-gradient(180deg,
      rgba(28,27,24,.28) 0%,
      rgba(28,27,24,.55) 30%,
      rgba(28,27,24,.94) 50%,
      var(--ink) 64%);
  }
  .vision{ max-width: none; }
}

/* --- Dvě cesty na kontaktní stránce ---------------------------------------
   Kdo chce termín hned, jde do kalendáře; kdo radši mluví, nechá číslo.
   Formulář se rozbalí až po volbě – dlouhá pole vedle rezervace odvádějí.
   -------------------------------------------------------------------------- */
.contact-card.is-choose{ display: flex; flex-direction: column; }
.cc-eyebrow{
  font: 600 .68rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1rem;
}
.choice{
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  text-align: left;
  padding: 1.3rem 1.4rem;
  margin-bottom: .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  text-decoration: none;   /* na úvodní stránce je to <a>, na kontaktu <button> */
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.choice:hover{ border-color: var(--gold); transform: translateY(-3px); }
.choice:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
/* Hlavní volba je zlatá, ale plnou barvou — bez přechodu, lesku a záře.
   Texty na ní musí být inkoustové: zlatá na zlaté (`--gold-dark`) měla
   kontrast kolem 1,5:1, což je nečitelné. S inkoustem je to 6,1:1. */
.choice.is-primary{
  background: var(--gold-flat);
  border-color: var(--gold-hrana);
  box-shadow: var(--shadow-gold);
}
.choice.is-primary:hover{
  background: var(--gold-flat-hover);
  border-color: var(--gold-hrana-hover);
  box-shadow: var(--shadow-gold-hover);
}
.choice.is-primary .choice-lbl{ color: var(--ink); }
.choice.is-primary .choice-desc{ color: rgba(28,27,24,.86); }
.choice.is-primary .choice-cta,
.choice.is-primary .choice-ico{ color: var(--ink); }
.choice-top{ display: flex; align-items: center; gap: .6rem; }
.choice-ico{ width: 1.3rem; height: 1.3rem; flex: none; color: var(--gold-dark); }
.choice-lbl{ font: 400 1.15rem var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.choice-desc{ font-size: .87rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.choice-cta{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
  font: 600 .72rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.choice-cta::after{ content: '→'; transition: transform .25s var(--ease); }
.choice:hover .choice-cta::after{ transform: translateX(4px); }
.choice.is-primary .choice-ico{ opacity: .7; }
.choice.is-primary .choice-desc{ color: var(--ink); opacity: .78; }
.choice.is-primary .choice-cta{ color: var(--ink); }
.choice[hidden]{ display: none; }

.cc-direct{ font-size: .85rem; color: var(--muted-2); margin-top: .4rem; }
.cc-direct a{ color: var(--gold-dark); }

.cc-form{ animation: ccIn .35s var(--ease) both; }
.cc-form[hidden]{ display: none; }
.cc-form-title{
  font: 400 1.15rem var(--font-display);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
@keyframes ccIn{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}

/* --- Poděkování s vizitkou ------------------------------------------------ */
.cc-done{ text-align: center; animation: ccIn .45s var(--ease) both; }
.cc-done[hidden]{ display: none; }
.cc-check{
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  animation: ccPop .5s var(--ease) .1s both;
}
.cc-check svg{ width: 1.4rem; height: 1.4rem; }
@keyframes ccPop{
  0%  { opacity: 0; transform: scale(.4); }
  60% { transform: scale(1.08); }
  100%{ opacity: 1; transform: scale(1); }
}
.cc-done-title{
  font: 300 clamp(1.5rem, 3vw, 2rem) var(--font-display);
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.cc-done-text{ font-size: .95rem; line-height: 1.65; color: var(--muted); margin-bottom: 1.75rem; }
.cc-done-text strong{ color: var(--ink); }

.vcard{
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
  animation: ccIn .5s var(--ease) .22s both;
}
.vcard-foto{
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
}
.vcard-podpis{ display: block; width: 120px; height: auto; margin-bottom: .4rem; }
.vcard-name{ font: 600 .98rem var(--font-body); color: var(--ink); letter-spacing: -.01em; }
.vcard-role{
  font: 500 .68rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: .15rem 0 .5rem;
}
.vcard-links{ display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.vcard-links a{ color: var(--gold-dark); text-decoration: none; }
.vcard-links a:hover{ text-decoration: underline; }

/* předvolba je užší než samotné číslo */
.field-row.is-tel{ grid-template-columns: 8.5rem 1fr; }

/* kalendář na kontaktu se načte až po kliknutí */
.booking-start{ margin-bottom: .9rem; }
.booking-alt{ font-size: .88rem; color: var(--muted); }
.booking-alt a{ color: var(--gold-dark); }
#calEmbedKontakt{
  display: grid;
  place-content: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}
#calEmbedKontakt.is-loaded{ display: block; padding: 0; text-align: left; }

@media (max-width: 860px){
  .ways{ grid-template-columns: 1fr; }
}

/* --- Překryv pro kalendář a poděkování ------------------------------------
   Inline blok pod tabulkou variant klient přehlédne. Překryv ho postaví
   doprostřed obrazovky a zbytek stránky ztlumí.
   -------------------------------------------------------------------------- */
.jpmodal{
  position: fixed;
  inset: 0;
  /* nad chatem (300), lištou (250) i cookies (400) – tohle je teď hlavní děj */
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2rem);
}
.jpmodal[hidden]{ display: none; }
.jpmodal-veil{
  position: absolute;
  inset: 0;
    /* Tři pixely rozostření pod tmavým závojem nikdo nepozná. Deset ano,
     a obsah za modálem se čitelně odsune do pozadí. */
  background: rgba(20,19,17,.72);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  animation: jpFade .25s var(--ease) both;
}
.jpmodal-panel{
  position: relative;
  width: min(52rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.6);
  animation: jpPop .32s var(--ease) both;
}
@keyframes jpFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes jpPop{
  from{ opacity: 0; transform: translateY(18px) scale(.985); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .nextstep, .jpmodal-veil, .jpmodal-panel{ animation: none; }
}
.jpmodal-x{
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.jpmodal-x svg{ width: 1.05rem; height: 1.05rem; }
.jpmodal-x:hover{ color: var(--ink); border-color: var(--gold); }
body.jpmodal-open{ overflow: hidden; }
/* plovoucí prvky by přes překryv jen překážely */
body.jpmodal-open .chat-fab,
body.jpmodal-open .chat-panel,
body.jpmodal-open .mobile-cta{ opacity: 0; pointer-events: none; }

/* kalendář */
.booking{ margin-top: 0; }
.booking[hidden]{ display: none; }
.booking-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.booking-head h4{
  font: 400 1.3rem var(--font-display);
  color: var(--ink);
  letter-spacing: -.02em;
}
.booking-embed{
  min-height: 620px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

/* poděkování */
.thanks{
  margin-top: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
}
.thanks[hidden]{ display: none; }
.thanks-eyebrow{
  font: 600 .66rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: .7rem;
}
.thanks-title{
  font: 300 clamp(1.6rem, 3vw, 2.1rem) var(--font-display);
  color: var(--cream);
  letter-spacing: -.02em;
  margin-bottom: .7rem;
}
.thanks-text{
  font-size: .95rem;
  line-height: 1.65;
  color: var(--cream-muted);
  max-width: 58ch;
}
.thanks-text strong{ color: var(--cream); }
.thanks-alt{ margin-top: .9rem; font-size: .88rem; }
.thanks-alt[hidden]{ display: none; }
.thanks-alt .ck-link{ color: var(--gold-bright); font-size: inherit; padding: 0; }

@media (max-width: 700px){
  .nextstep-opts{ grid-template-columns: 1fr; }
  .booking-embed{ min-height: 560px; }
  /* na mobilu ať překryv využije celou plochu – kalendář je na výšku */
  .jpmodal{ padding: 0; place-items: stretch; }
  .jpmodal-panel{
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
    padding: 3rem 1.1rem 1.5rem;
  }
}

/* --- Brány ke nabídkám: e-mail → kód → telefon ----------------------------
   Sedí hned pod čísly, ne v druhém sloupci. Klient dopočítá a rovnou vidí,
   co dál – nemusí hledat tlačítko na druhé straně panelu.
   -------------------------------------------------------------------------- */
.cb-gate{
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
}
.cb-gate[hidden]{ display: none; }
.cb-gate-lbl{
  display: block;
  font: 400 1.1rem var(--font-display);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .8rem;
}
.cb-gate-note{
  font-size: .82rem;
  line-height: 1.6;
  color: var(--muted-2);
  margin-bottom: .9rem;
}
.cb-gate-note strong{ color: var(--text-soft); }
.cb-gate-row{ display: flex; gap: .6rem; flex-wrap: wrap; }
.cb-gate-row input{
  flex: 1 1 12rem;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font: 500 1rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.cb-gate-row input:focus-visible{ outline: none; border-color: var(--gold); }
.cb-gate-row .btn{ flex: 1 1 100%; justify-content: center; }
.cb-gate-fields{ display: flex; gap: .6rem; flex-wrap: wrap; }
.cb-gate-fields input{
  flex: 1 1 12rem;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font: 500 1rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.cb-gate-fields input:focus-visible{ outline: none; border-color: var(--gold); }

/* Telefon = předvolba + číslo. Dvě samostatná pole ve stejném hávu jako
   jméno a příjmení o řádek výš – jen předvolba je užší, číslo dobere zbytek. */
.tel-row{ margin-top: .6rem; }
.tel-row .tel-dial{
  flex: 0 0 7.5rem;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font: 500 1rem var(--font-body);
  color: var(--ink);
  background-color: var(--white);
  cursor: pointer;
  /* vlastní šipka – nativní se v každém prohlížeči kreslí jinak */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .85rem) 55%;
  background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat;
}
.tel-row .tel-dial:focus-visible{ outline: none; border-color: var(--gold); }

.cb-gate-submit{ width: 100%; justify-content: center; margin-top: .6rem; }
/* kód: velké číslice s odstupem, ať je vidět, kolik jich chybí */
#cl-code{
  font: 500 1.3rem var(--font-body);
  letter-spacing: .35em;
  text-align: center;
}
.cb-gate-alt{ display: flex; gap: 1.25rem; margin-top: .8rem; }
.cb-gate-alt .ck-link{ color: var(--muted-2); font-size: .8rem; padding: 0; }
.cb-gate-alt .ck-link:hover{ color: var(--gold-dark); }
.cb-assure.is-light{ color: var(--muted-2); }
.cb-assure.is-light li::before{ color: var(--gold-dark); }

/* ukazatel postupu v tmavé polovině */
.cb-progress{
  list-style: none;
  margin-top: auto;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246,245,242,.14);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.cb-progress li{
  display: flex;
  align-items: center;
  gap: .7rem;
  font: 500 .8rem var(--font-body);
  color: rgba(246,245,242,.4);
  transition: color .25s var(--ease);
}
.cb-progress li span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(246,245,242,.25);
  font-size: .68rem;
  flex-shrink: 0;
}
.cb-progress li.is-active{ color: var(--cream); }
.cb-progress li.is-active span{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.cb-progress li.is-done{ color: rgba(246,245,242,.55); }
.cb-progress li.is-done span{
  background: none;
  border-color: var(--gold-dark);
  color: var(--gold-bright);
  font-size: .7rem;
}
.cb-progress li.is-done span::before{ content: '✓'; }
.cb-progress li.is-done span{ font-size: 0; }
.cb-progress li.is-done span::before{ font-size: .8rem; }

/* --- Číselné pole s tlačítky − / + ---------------------------------------- */
.num-field{ margin-bottom: 1.1rem; }
.num-field label{
  display: block;
  font: 500 .84rem var(--font-body);
  color: var(--text-soft);
  margin-bottom: .45rem;
}
.nf-row{
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}
.nf-btn{
  border: none;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.35rem var(--font-body);
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nf-btn:first-child{ border-right: 1px solid var(--line); }
.nf-btn:last-child{ border-left: 1px solid var(--line); }
.nf-btn:hover{ background: var(--gold); color: var(--ink); }
.nf-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: -2px; }
.nf-input{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .7rem .4rem;
}
.nf-input input{
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  text-align: right;
  font: 400 1.3rem var(--font-display);
  color: var(--ink);
  letter-spacing: -.02em;
  -moz-appearance: textfield;
}
.nf-input input::-webkit-outer-spin-button,
.nf-input input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.nf-input input:focus{ outline: none; }
.nf-row:focus-within{ border-color: var(--gold); }
.nf-unit{
  font: 500 .82rem var(--font-body);
  color: var(--muted-2);
  flex-shrink: 0;
}

/* --- Kompaktní hlavička výsledku: kruh LTV + dvě čísla -------------------- */
.res-top{
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(246,245,242,.14);
}
.ltv-ring{
  --p: 0;
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(246,245,242,.13) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s var(--ease);
}
.ltv-ring.is-over{ background: conic-gradient(#C0563A calc(var(--p) * 1%), rgba(246,245,242,.13) 0); }
.lr-in{
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--ink-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
}
.lr-num{
  font: 400 1.4rem var(--font-display);
  color: var(--cream);
  line-height: 1;
}
.lr-num em{ font-style: normal; font-size: .6em; color: rgba(246,245,242,.6); }
.lr-lbl{
  font: 600 .58rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.res-nums{ display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.rn{ display: flex; flex-direction: column; gap: .1rem; }
.rn-lbl{
  font: 600 .6rem var(--font-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.rn-val{ font: 400 1.15rem var(--font-display); color: var(--cream); white-space: nowrap; }
.rn-val.is-hero{
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-bright);
  letter-spacing: -.02em;
}
.rn-val.is-hero em{ font-style: normal; font-size: .42em; color: rgba(246,245,242,.65); }

.calc-result .verdict.is-ok em{ color: var(--gold-bright); }
.calc-result .verdict.is-warn em{ color: #E0906F; }
.calc-result .verdict{ font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 1.2rem; }

@media (max-width: 420px){
  .res-top{ gap: 1rem; }
  .ltv-ring{ width: 86px; height: 86px; }
  .lr-in{ width: 68px; height: 68px; }
  .lr-num{ font-size: 1.15rem; }
}

/* --- Posuvníky v kalkulačce ---------------------------------------------- */
.slider-field{ margin-bottom: 1.6rem; }
.slider-field label{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}
.slider-field .s-val{
  font: 400 1.35rem var(--font-display);
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.slider-field input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 40%), var(--line-strong) var(--fill, 40%));
  outline: none;
  cursor: pointer;
}
.slider-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold-dark);
  box-shadow: 0 3px 10px rgba(28,27,24,.22);
  cursor: grab;
  transition: transform .15s var(--ease);
}
.slider-field input[type="range"]::-webkit-slider-thumb:active{ transform: scale(1.12); cursor: grabbing; }
.slider-field input[type="range"]::-moz-range-thumb{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold-dark);
  box-shadow: 0 3px 10px rgba(28,27,24,.22);
  cursor: grab;
}
.slider-field input[type="range"]:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }
.s-scale{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
  font: 500 .68rem var(--font-body);
  color: var(--muted-2);
}
.s-scale .s-ltv{
  color: var(--gold-dark);
  font-weight: 600;
  letter-spacing: .04em;
}
.s-scale .s-ltv.is-over{ color: #A2422A; }

/* rozbalovací doplňkové údaje */
.calc-more{ margin-top: .5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.calc-more summary{
  cursor: pointer;
  list-style: none;
  font: 600 .8rem var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.calc-more summary::-webkit-details-marker{ display: none; }
.calc-more summary::after{ content: ' +'; }
.calc-more[open] summary::after{ content: ' −'; }
.calc-more > *:not(summary){ margin-top: 1.1rem; }

/* --- Hlavní číslo ve výsledku (měsíční splátka) -------------------------- */
.calc-hero-num{
  padding-bottom: 1.35rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(246,245,242,.14);
}
.calc-hero-num .chn-label{
  display: block;
  font: 500 .68rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246,245,242,.55);
}
.calc-hero-num .chn-value{
  display: block;
  font: 300 clamp(2.4rem, 6vw, 3.6rem) var(--font-display);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--gold-bright);
  margin-top: .3rem;
}
.calc-hero-num .chn-value em{ font-style: normal; font-size: .45em; color: rgba(246,245,242,.7); }
.calc-hero-num .chn-note{
  display: block;
  font-size: .8rem;
  color: rgba(246,245,242,.55);
  margin-top: .45rem;
}

/* --- Pruh důvěry pod kalkulačkou ----------------------------------------- */
.calc-trust{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
}
.calc-trust .ct-num{
  display: block;
  font: 400 1.5rem var(--font-display);
  color: var(--ink);
  letter-spacing: -.02em;
}
.calc-trust .ct-num em{ font-style: italic; color: var(--gold); }
.calc-trust .ct-lbl{
  display: block;
  font: 500 .66rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: .3rem;
}
.calc-trust .ct-lbl a{ color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.calc-trust .ct-lbl a:hover{ color: var(--gold-dark); text-decoration-color: var(--gold); }

/* Reprezentativní příklad / drobný právní text */
.legal-note{
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 820px;
}
.legal-note strong{ color: var(--text-soft); }

/* CTA pás na konci podstránek */
.cta-band{
  background: var(--ink);
  color: #F6F5F2;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.cta-band .inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2{
  font: 300 clamp(1.7rem, 3vw, 2.4rem) var(--font-display);
  letter-spacing: -.02em;
}
.cta-band h2 em{ font-style: italic; color: var(--gold-bright); }
.cta-band p{ color: rgba(246,245,242,.65); margin-top: .5rem; max-width: 50ch; }

/* Obsahová sekce s textem – právní stránky apod. */
.prose{ max-width: 720px; }
.prose h2{
  font: 400 1.6rem var(--font-display);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 2.25rem 0 .75rem;
}
.prose h3{
  font: 600 .74rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 1.6rem 0 .5rem;
}
.prose p, .prose li{ color: var(--muted); line-height: 1.7; margin-bottom: .85rem; }
.prose code{
  font-size: .88em;
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.prose ul{ list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.prose a{ color: var(--gold-dark); }

@media (max-width: 980px){
  .compare{ grid-template-columns: 1fr; }
  .calc{ grid-template-columns: 1fr; }
  .calc-result{ position: static; }
  .calcbox{ grid-template-columns: 1fr; border-radius: 14px; }
}
@media (max-width: 640px){
  .team-grid{ grid-template-columns: 1fr; }
  .calc-row{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Recenze klientů (mřížka krátkých hodnocení)
   ========================================================================== */

.quote-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.quote-card{
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--white);
  padding: 1.6rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.quote-card .stars{ color: var(--gold); letter-spacing: .15em; font-size: .85rem; }
.quote-card blockquote{ margin: 0; color: var(--text-soft); line-height: 1.65; font-size: .95rem; }
.quote-card footer{ margin-top: auto; display: flex; flex-direction: column; gap: .2rem; }
.quote-card .q-who{ font: 400 1.05rem var(--font-display); color: var(--ink); }
.quote-card .q-src{ font-size: .74rem; color: var(--muted-2); }
.quote-note{ margin-top: 1.75rem; font-size: .85rem; color: var(--muted-2); max-width: 72ch; line-height: 1.6; }
.quote-note a{ color: var(--gold-dark); }

/* Konzistentní rytmus mezi bloky (nahrazuje dřívější inline styly) */
.why-grid .desc{
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 56ch;
}
.why-grid .hero-stats{ margin-top: 0; }
.why-grid .pull-quote{ margin-top: 2rem; }
.more-row{ margin-top: 1.5rem; }
.wrap-narrow{ max-width: 820px; }
.ref-more{ margin-top: 2.5rem; color: rgba(246,245,242,.65); line-height: 1.65; }
.ref-more a{ color: var(--gold-bright); }

@media (max-width: 720px){
  .quote-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   AI asistent (chat widget)
   ========================================================================== */

.chat-fab{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 300;
  width: 58px; height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--gold-flat);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chat-fab:hover{ transform: translateY(-2px); background: var(--gold-flat-hover); box-shadow: var(--shadow-gold-hover); }
.chat-fab svg{ width: 26px; height: 26px; }

.chat-panel{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + 70px);
  z-index: 300;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(600px, calc(100vh - 120px));
  display: none;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.chat-panel.is-open{ display: flex; }

.chat-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
}
.chat-head .t{ font: 400 1.1rem var(--font-display); }
.chat-head .t em{ font-style: italic; color: var(--gold-bright); }
.chat-head .s{ font: 500 .62rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-faint); margin-top: .2rem; }
.chat-close{
  background: none; border: none; color: var(--cream-muted);
  font-size: 1.4rem; line-height: 1; padding: .25rem .4rem;
  border-radius: 6px;
}
.chat-close:hover{ color: var(--cream); }

.chat-msgs{
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-height: 220px;
}
.chat-msg{
  max-width: 85%;
  padding: .65rem .9rem;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: break-word;
}
.chat-msg.from-user{
  align-self: flex-end;
  background: var(--ink);
  color: var(--cream);
  border-bottom-right-radius: 4px;
}
.chat-msg.from-bot{
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
  border-bottom-left-radius: 4px;
}
.chat-msg.from-bot a{ color: var(--gold-dark); }
.chat-msg.is-typing{ color: var(--muted-2); font-style: italic; }

.chat-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 1.1rem .35rem;
  background: var(--paper);
}
.chat-chip{
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--text-soft);
  font: 500 .78rem var(--font-body);
  padding: .4rem .75rem;
  border-radius: 999px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chat-chip:hover{ border-color: var(--gold-dark); color: var(--gold-dark); }

.chat-form{
  display: flex;
  gap: .5rem;
  padding: .8rem 1.1rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.chat-form input{
  flex: 1;
  min-width: 0;
  padding: .6rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: 500 .92rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.chat-send{
  border: none;
  border-radius: 10px;
  padding: 0 .9rem;
  background: var(--gold-flat);
  color: var(--ink);
  display: flex; align-items: center;
}
.chat-send svg{ width: 18px; height: 18px; }
.chat-send[disabled]{ opacity: .55; cursor: not-allowed; }

.chat-note{
  padding: .5rem 1.1rem .75rem;
  background: var(--paper);
  font-size: .66rem;
  line-height: 1.5;
  color: var(--muted-2);
}
.chat-note a{ color: var(--gold-dark); }

@media (max-width: 480px){
  .chat-panel{
    right: .5rem; left: .5rem;
    width: auto;
    bottom: calc(clamp(1rem, 3vw, 1.75rem) + 66px);
  }
}

/* ==========================================================================
   Klientská sekce
   ========================================================================== */

.microbar-right{ display: flex; align-items: center; gap: 1.4rem; }

/* (komponenty klientské zóny jsou jen ve vývojové verzi jp-partneri.test) */

/* ==========================================================================
   Mobilní doladění (celý web)
   ========================================================================== */

@media (max-width: 980px){
  /* Portrét v hero: bez pevné výšky, ať nic nepřetéká do textu */
  .hero-portrait{ height: auto; margin-bottom: 1.25rem; }
  .portrait-frame{ width: min(380px, 82%); }
  .portrait-card{ bottom: clamp(10px, 3vw, 22px); }
}

@media (max-width: 720px){
  /* iOS Safari zoomuje na pole s písmem menším než 16 px */
  .field input, .field select, .field textarea,
  .calc-form input[type="number"], .calc-form input[type="text"],
  .lead-form input[type="email"]{ font-size: 16px; }

  /* Lehčí stín portrétu: drop-shadow na velkém PNG je na mobilech drahý */
  .portrait-photo{ filter: drop-shadow(0 10px 14px rgba(28,27,24,.18)); }

  .btn{ padding: .9rem 1.6rem; }
  .cta-band .inner{ flex-direction: column; align-items: flex-start; }
  .cta-band .btn{ width: 100%; justify-content: center; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}

@media (max-width: 560px){
  .why-item{ grid-template-columns: 44px 1fr; gap: 1rem; padding-bottom: 1.75rem; }
  .why-item::before{ left: 21px; top: 46px; }
  .why-item .idx{ width: 44px; height: 44px; font-size: .95rem; }
  .why-item h3{ padding-top: .4rem; }
  .compare-col{ padding: 1.35rem; }
  .quote-card{ padding: 1.35rem 1.4rem; }
  .review{ padding: 1.35rem 1.4rem; }
  .hero-stats{ gap: 1.25rem 2rem; }
  .section-head .desc{ max-width: none; }
  .legal-note{ padding: 1rem 1.15rem; }
}

/* ==========================================================================
   Konverzní prvky (lead-capture v kalkulačce, trust řádek, mobilní CTA)
   ========================================================================== */

/* Trust řádek u CTA a formulářů */
.trust-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
  margin-top: 1.75rem;
  font-size: .85rem;
  color: var(--muted);
}
.trust-row .stars{ color: var(--gold); letter-spacing: .1em; }
.trust-row .sep{ color: var(--line-strong); }
.trust-row a{ color: var(--gold-dark); text-decoration: none; }
.trust-row a:hover{ text-decoration: underline; }
.trust-row strong{ color: var(--text-soft); font-weight: 600; }
.section-ink .trust-row{ color: rgba(246,245,242,.7); }
.section-ink .trust-row a{ color: var(--gold-bright); }
.section-ink .trust-row strong{ color: var(--cream); }

/* Lead-capture v kalkulačce */
.calc-lead{
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2.5rem;
  align-items: center;
  background: linear-gradient(180deg, #FBF7EE, var(--paper));
  border: 1px solid rgba(168,127,46,.28);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.calc-lead[hidden]{ display: none; }
.calc-lead-copy h3{
  font: 400 clamp(1.3rem, 2.4vw, 1.7rem) var(--font-display);
  letter-spacing: -.015em;
  color: var(--ink);
}
.calc-lead-copy h3 em{ font-style: italic; color: var(--gold); }
.calc-lead-copy p{ margin-top: .6rem; font-size: .93rem; color: var(--muted); line-height: 1.6; }
.cl-fields{ display: flex; gap: .6rem; flex-wrap: wrap; }
.calc-lead-form input{
  flex: 1 1 130px;
  min-width: 0;
  padding: .8rem .95rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: 500 16px var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.calc-lead-form input:focus-visible{ outline: none; border-color: var(--gold); }
.calc-lead-form .btn{ flex: 1 1 100%; justify-content: center; }
/* blokový layout, ať se text souhlasu neláme po flex položkách */
.cl-consent{ display: block; position: relative; padding-left: 1.65rem; margin-top: .8rem; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.cl-consent input{ position: absolute; left: 0; top: .15rem; accent-color: var(--gold); }
.cl-consent a{ color: var(--gold-dark); }
.calc-lead-done{ font: 400 1.1rem var(--font-display); color: var(--gold-dark); }

/* Varianty z kalkulačky */
.variants{
  margin-top: 2rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
.variants[hidden]{ display: none; }
.variants-head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.variants-head h3{ font: 400 clamp(1.4rem, 2.4vw, 1.9rem) var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.variants .v-sub{ font-size: .9rem; color: var(--muted); margin-top: .35rem; max-width: 56ch; }

.fix-switch{ display: flex; gap: .35rem; flex-wrap: wrap; }
.fix-btn{
  font: 600 .78rem var(--font-body);
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .5rem .9rem;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.fix-btn:hover{ color: var(--ink); border-color: var(--gold); }
.fix-btn.is-active{ background: var(--ink); border-color: var(--ink); color: var(--cream); }

.variants-table{ display: flex; flex-direction: column; }
.v-row{
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.v-row:last-child{ border-bottom: none; }
.v-row.is-best{
  background: linear-gradient(90deg, rgba(168,127,46,.07), transparent 70%);
  border-radius: 12px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: .25rem -1rem;
  border-bottom-color: transparent;
}
.v-bank{
  font: 400 1.2rem var(--font-display);
  color: var(--ink);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.v-tag{
  font: 600 .6rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(168,127,46,.12);
  border-radius: 999px;
  padding: .25rem .55rem;
}
.v-cell{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.v-cell .v-l{
  font: 500 .62rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.v-cell .v-v{ font: 400 1.15rem var(--font-display); color: var(--ink); white-space: nowrap; }

.variants-safe{
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}
.variants-safe[hidden]{ display: none; }
.vs-head h4{ font: 400 1.25rem var(--font-display); color: var(--ink); }
.vs-head p{ font-size: .9rem; color: var(--muted); margin-top: .3rem; max-width: 62ch; line-height: 1.6; }
.variants-note{
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted-2);
  line-height: 1.6;
}
.variants .btn{ margin-top: 1.25rem; }

@media (max-width: 720px){
  .v-row{ grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
  .v-bank{ grid-column: 1 / -1; }
  .v-row.is-best{ background: rgba(168,127,46,.06); }
}

/* Mobilní sticky CTA lišta (jen na mobilu) */
/* --- Souhlasová lišta cookies --------------------------------------------
   Pruh přes celou šířku úplně dole. Vkládá ji main.js, není v žádném HTML.
   Svou výšku hlásí do --cookiebar-h, aby se chat i mobilní CTA odsunuly
   přesně o tolik, kolik zabírá – proto se nikdy nepřekrývají.
   -------------------------------------------------------------------------- */
.cookiebar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: var(--ink-card);
  border-top: 1px solid rgba(246,245,242,.16);
  box-shadow: 0 -18px 40px -24px rgba(28,27,24,.7);
  padding: 1.15rem 0 calc(1.15rem + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cookiebar.is-in{ opacity: 1; transform: none; }
.cookiebar-in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2.5rem;
}
.cookiebar-title{
  font: 400 1.15rem var(--font-display);
  color: var(--cream);
  margin-bottom: .35rem;
}
.cookiebar-copy p{
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(246,245,242,.66);
  max-width: 72ch;
}
.cookiebar-copy a{ color: var(--gold-bright); }

.cookiebar-actions{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookiebar-actions .btn{ padding: .7rem 1.25rem; font-size: .85rem; }
/* .btn má display:inline-flex, což by přebilo atribut hidden */
.cookiebar-actions .btn[hidden]{ display: none; }
.cookiebar-actions .btn-outline{
  border-color: rgba(246,245,242,.3);
  color: rgba(246,245,242,.85);
  background: none;
}
.cookiebar-actions .btn-outline:hover{ border-color: var(--gold-bright); color: var(--cream); }
.ck-link{
  background: none;
  border: none;
  padding: .7rem .35rem;
  font: 500 .82rem var(--font-body);
  color: rgba(246,245,242,.6);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ck-link:hover{ color: var(--gold-bright); }

/* rozbalené kategorie */
.cookiebar-opts{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(246,245,242,.12);
}
.cookiebar-opts[hidden]{ display: none; }
.ck-opt{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(246,245,242,.6);
  cursor: pointer;
}
.ck-opt.is-locked{ cursor: default; opacity: .65; }
.ck-opt input{
  margin-top: .15rem;
  width: 16px; height: 16px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.ck-opt strong{
  display: block;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: .15rem;
}

/* odkaz na změnu souhlasu v patičce */
.cookie-reopen{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookie-reopen:hover{ color: var(--gold); }

/* posun plovoucích prvků o výšku lišty */
body.has-cookiebar .chat-fab,
body.has-cookiebar .chat-panel{
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + var(--cookiebar-h, 0px));
}
body.has-cookiebar .mobile-cta{ bottom: var(--cookiebar-h, 0px); }
body.has-cookiebar{ padding-bottom: var(--cookiebar-h, 0px); }

@media (max-width: 900px){
  .cookiebar-in{ grid-template-columns: 1fr; }
  .cookiebar-actions{ justify-content: flex-start; }
  .cookiebar-opts{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .cookiebar{ padding-top: 1rem; }
  .cookiebar-actions .btn{ flex: 1 1 auto; justify-content: center; }
  .ck-link{ flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .cookiebar{ transition: none; }
}

.mobile-cta{ display: none; }
@media (max-width: 720px){
  .mobile-cta{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 250;
    display: flex;
    gap: .6rem;
    padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
        /* Spodní lišta na telefonu: stejný důvod i stejné hodnoty jako nahoře. */
    background: rgba(246,245,242,.78);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid var(--line-strong);
    /* skrytá, dokud je vidět CTA v hero – jinak by tam bylo dvakrát totéž */
    transform: translateY(100%);
    transition: transform .3s var(--ease);
  }
  body.show-mcta .mobile-cta{ transform: none; }
  .mobile-cta a{
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem .5rem;
    border-radius: var(--radius-md);
    font: 600 .95rem var(--font-body);
    text-decoration: none;
  }
  .mobile-cta .m-call{ border: 1.5px solid var(--ink); color: var(--ink); background: var(--white); }
  .mobile-cta .m-cta{ background: var(--ink); color: var(--cream); }
  body:has(.mobile-cta){ padding-bottom: 72px; }
  .chat-fab{ bottom: calc(clamp(1rem,3vw,1.75rem) + 62px); }
  /* na mobilu se sčítá výška sticky lišty i cookie lišty */
  body.has-cookiebar .chat-fab,
  body.has-cookiebar .chat-panel{
    bottom: calc(clamp(1rem,3vw,1.75rem) + 62px + var(--cookiebar-h, 0px));
  }
  body:has(.mobile-cta).has-cookiebar{ padding-bottom: calc(72px + var(--cookiebar-h, 0px)); }
  .chat-panel{ bottom: calc(clamp(1rem,3vw,1.75rem) + 132px); }
}

@media (max-width: 560px){
  .calc-lead{ grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ==========================================================================
   MOBIL – celkové doladění (má přednost, proto je až na konci)
   ========================================================================== */

@media (max-width: 760px){
  /* --- vzdušnost: méně prázdna, obsah dřív na očích ------------------- */
  .section{ padding-block: clamp(2.5rem, 8vw, 3.5rem); }
  .hero{ padding-top: 1.25rem; }
  .hero-copy{ padding-bottom: 1.5rem; }
  .page-hero{ padding: 2.25rem 0 1.75rem; }

  /* --- hero na mobilu: portrét jako pozadí ----------------------------
     Výřez postavy v mřížce se na malém displeji nepovedl (drobný a
     s plovoucí kartičkou). Místo toho fotka vyplní celou plochu hero
     a text leží na jejím tmavém spodku – obličej nahoře zůstane čitelný,
     text taky. Desktop zůstává beze změny. */
  .hero-grid{ gap: 1.25rem; }
  .hero-visual{ display: none; }

  .hero{
    background-color: var(--ink);
    background-image:
      linear-gradient(180deg,
        rgba(28,27,24,.12) 0%,
        rgba(28,27,24,.28) 30%,
        rgba(28,27,24,.72) 46%,
        rgba(28,27,24,.94) 60%,
        var(--ink) 74%),
      url('../img/jan-pavlik.jpg');
    background-size: 100% 100%, 145% auto;
    /* Posun v jednotkách ŠÍŘKY, ne v procentech: obrázek je nižší než hero,
       takže procenta by ho posunula opačně (dolů). -38vw odřízne prázdnou
       zeď nad hlavou a drží obličej hned pod hlavičkou na každé šířce. */
    background-position: 0 0, 50% -38vw;
    background-repeat: no-repeat, no-repeat;
    /* text začíná níž, aby nad ním zbylo místo na obličej */
    padding-top: min(56vh, 440px);
    color: var(--cream);
  }
  .hero::before{ display: none; }

  .hero h1{ font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.08; color: var(--cream); }
  .hero h1 em{ color: var(--gold-bright); }
  /* perex na mobilu pryč: nadpis a tlačítka stačí, fotka dostane prostor */
  .hero-lead{ display: none; }
  .hero-actions{ margin-top: 1.5rem; gap: .6rem; }
  /* tmavé tlačítko by na tmavém pozadí zmizelo */
  .hero-actions .btn-dark{ background: var(--gold-flat); color: var(--ink); }
  .hero-actions .btn-outline{ border-color: rgba(246,245,242,.35); color: var(--cream); }

  /* --- trust řádek: pod sebou, bez rozsypaných teček ------------------- */
  .trust-row{ flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: 1.25rem; font-size: .82rem; }
  .trust-row .sep{ display: none; }
  .hero .trust-row{ color: var(--cream-muted); }
  .hero .trust-row a{ color: var(--gold-bright); }
  .hero .trust-row strong{ color: var(--cream); }

  /* --- statistiky: čitelné řádky místo rozházených sloupců ------------- */
  .hero-stats{
    display: flex; flex-direction: column; gap: 0;
    margin-top: 1.75rem;
    border-top: 1px solid var(--line-dark);
  }
  .hero-stat{
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .7rem 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .hero-stat .num{ font-size: 1.45rem; color: var(--cream); }
  .hero-stat .num em{ color: var(--gold-bright); }
  .hero-stat .label{ font-size: .6rem; text-align: right; color: var(--cream-faint); }

  /* --- nadpisy sekcí ---------------------------------------------------- */
  .h-display{ font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .section-head{ gap: .75rem; }
  .section-head .desc{ font-size: .92rem; }

  /* --- navigace: rozbalovací panel přes celou šířku --------------------- */
  .nav{ min-height: 58px; flex-wrap: wrap; align-items: center; padding-block: .35rem; gap: .75rem; }
  /* Samotný hamburger lidé přehlédnou — je to tři čárky bez jména.
     Vedle nich proto stojí slovo a kolem obojího rámeček, aby to v liště
     četlo jako tlačítko, ne jako ozdoba vedle loga. */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: auto; height: 40px;
    margin-left: auto; order: 2;
    padding: 0 .8rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
  }
  .nav-toggle::after{
    content: 'Menu';
    font: 600 .78rem var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .nav-toggle[aria-expanded="true"]::after{ content: 'Zavřít'; }
  /* Čárky se z absolutního umístění přepínají na normální prvek v řadě,
     jinak by ležely přes popisek. Křížek po otevření z toho vyjde sám. */
  .nav-toggle span{
    position: relative;
    top: auto; left: auto; right: auto;
    width: 18px; flex: none;
  }
  .nav-toggle span::before{ top: -6px; }
  .nav-toggle span::after{ top: 6px; }
  /* Na úzké liště si logo a hamburger jdou po krku, tak o kousek dolů. */
  .brand{ width: calc(28px * 3.41); height: 28px; }
  /* tlačítko v hlavičce je na mobilu zbytečné, stejnou akci nabízí spodní lišta */
  .nav-cta{ display: none; }

  .nav-links{
    order: 3;
    /* `flex: 1` ze základního pravidla nastavuje flex-basis 0, což přebije
       `width: 100%` — menu se pak neroztáhne pod lištu, ale zůstane vmáčklé
       ve sloupci vedle loga. */
    flex: 0 0 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s var(--ease);
  }
  .nav.is-open .nav-links{
    max-height: 640px;
    margin-top: .35rem;
    border-top: 1px solid var(--line-strong);
  }
  .nav-links a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 1.05rem .15rem;
    font: 400 1.15rem var(--font-display);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    opacity: 1;
  }
  /* jemná šipka vpravo, ať je jasné, že položka někam vede */
  .nav-links a::before{
    content: '→';
    order: 2;
    font-size: .9rem;
    color: var(--gold-dark);
    opacity: .55;
  }
  .nav-links a::after{ display: none; }
  .nav-links a:last-child{ border-bottom: none; }
  .nav-links a[aria-current="page"]{ color: var(--gold-dark); }

  .microbar{ font-size: .66rem; padding-block: .5rem; }

  /* --- karty a panely: méně vnitřního odsazení -------------------------- */
  .pillar{ padding-top: 1.5rem; }
  .pillar .idx{ font-size: 2.25rem; }
  .contact-card, .calc-form, .calc-result, .variants, .review, .login-card{
    padding: 1.25rem 1.15rem;
  }
  .calc{ gap: 1.25rem; }
  .calc-result{ min-height: 0; }
  /* posuvníky: větší úchyt pro palec, čísla pod popisek */
  .slider-field{ margin-bottom: 1.35rem; }
  .slider-field label{ gap: .25rem; }
  .slider-field .s-val{ font-size: 1.25rem; }
  .slider-field input[type="range"]{ height: 8px; }
  .slider-field input[type="range"]::-webkit-slider-thumb{ width: 30px; height: 30px; }
  .slider-field input[type="range"]::-moz-range-thumb{ width: 30px; height: 30px; }
  .calc-trust{ grid-template-columns: 1fr 1fr; gap: 1.1rem; padding-top: 1.35rem; }
  .calc-trust .ct-num{ font-size: 1.25rem; }

  /* --- varianty: tři údaje vedle sebe, ať se to nerozpadá -------------- */
  .v-row{ grid-template-columns: repeat(3, 1fr); gap: .6rem .75rem; padding: .95rem 0; }
  .v-bank{ grid-column: 1 / -1; font-size: 1.05rem; }
  .v-cell .v-v{ font-size: .98rem; }
  .v-cell .v-l{ font-size: .55rem; letter-spacing: .06em; }
  .variants-head{ flex-direction: column; align-items: flex-start; }
  .fix-btn{ padding: .45rem .7rem; font-size: .74rem; }

  /* --- tabulka srovnání a citace ---------------------------------------- */
  .compare{ gap: 1rem; }
  .quote-card{ padding: 1.15rem 1.2rem; }
  .cta-band .inner{ gap: 1.25rem; }
}

@media (max-width: 380px){
  .hero h1{ font-size: 1.75rem; }
  .v-row{ grid-template-columns: 1fr 1fr; }
  .hero-stat .num{ font-size: 1.3rem; }
}


/* ==========================================================================
   Kalkulačka po krocích
   Jedna otázka na obrazovku, výsledek zdarma, sazby bank za ověřením.
   Přeneseno z prototypu; názvy tříd byly ověřeny proti zbytku souboru,
   ke kolizi nedochází. Vše je zanořené pod `.kalkulacka-kroky`, aby se
   styly nerozlily do ostatních stránek.
   ========================================================================== */
.kalkulacka-kroky{ max-width: 640px; margin: 0 auto; }
/* --- ukazatel postupu -------------------------------------------------
   Tenká linka bez čísel. „Krok 3 z 6" je pozvánka spočítat si, kolik
   práce zbývá, a odejít. Linka řekne „skoro tam" beze slov. */
/* Pruh sedí napevno pod lištou panelu. Dokud byl `sticky` uvnitř rolující
   oblasti, při rolování poskakoval a nechával za sebou šmouhu. */
.postup{
  height: 2px;
  background: var(--line-strong);
  margin: 0;
}
.postup-vypln{
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width .45s var(--ease);
}

/* --- krok ------------------------------------------------------------- */
.krok{ display: none; }
.krok.je-videt{
  display: block;
  animation: naskok .38s var(--ease) both;
}
@keyframes naskok{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

.otazka{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
.otazka em{ font-style: italic; color: var(--gold); }
.upresneni{
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 2.25rem;
  max-width: 34rem;
}
/* Nadpis dostává fokus při přepnutí kroku, ať čtečka i klávesnice vědí,
   že se obsah vyměnil. Obrys by ale při každém kroku problikl. */
.otazka:focus{ outline: none; }

/* --- volby jako karty -------------------------------------------------
   Karta se sama posune dál. Zvolit a pak ještě klikat „Pokračovat" je
   klik navíc na každém kroku, kde volba sama o sobě nese odpověď. */
.volby{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.volba{
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.volba:hover{
  border-color: rgba(168,127,46,.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(28,27,24,.5);
}
.volba:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.volba.je-zvolena{ border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.volba b{ display: block; font-size: 1.05rem; font-weight: 500; margin-bottom: .2rem; }
.volba span{ display: block; font-size: .85rem; color: var(--muted); line-height: 1.45; }

/* --- číselný krok ----------------------------------------------------- */
.cislo-blok{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.castka{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 7vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: 1.75rem;
}
.castka .jednotka{
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.kalkulacka-kroky input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  border-radius: 2px;
  margin: 0;
  cursor: pointer;
}
.kalkulacka-kroky input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--paper);
  box-shadow: 0 2px 10px rgba(28,27,24,.35);
  cursor: grab;
}
.kalkulacka-kroky input[type=range]::-moz-range-thumb{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--paper);
  box-shadow: 0 2px 10px rgba(28,27,24,.35);
  cursor: grab;
  border-width: 4px;
}
.kalkulacka-kroky input[type=range]:focus-visible{ outline: 2px solid var(--gold); outline-offset: 6px; }

.stupnice{
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .9rem;
}

/* Živý důsledek pod posuvníkem. Tohle je celý motor: číslo, které se hýbe,
   si člověk chce vyzkoušet, a kdo si hraje, ten neodchází. */
.dusledek{
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  color: var(--text-soft);
  min-height: 2.6rem;
}
.dusledek b{ font-weight: 500; color: var(--ink); }
.dusledek.je-pozor b{ color: var(--warn); }

/* --- ovládání --------------------------------------------------------- */
.ovladani{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.dal{
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: .95rem 1.9rem;
  font: 500 .95rem var(--font-body);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.dal:hover{ background: #332F28; transform: translateY(-1px); }
.dal:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.zpet{
  background: none;
  border: none;
  color: var(--muted);
  font: 400 .9rem var(--font-body);
  cursor: pointer;
  padding: .5rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zpet:hover{ color: var(--ink); }
.zpet:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.napoveda{
  margin-left: auto;
  font-size: .78rem;
  color: var(--muted);
}
@media (hover: none){ .napoveda{ display: none; } }

/* --- výsledek ---------------------------------------------------------
   Ukazuje se ZDARMA, bez e-mailu a bez SMS kódu. To je celý rozdíl proti
   konkurenci: oni vybírají mýtné, my dáme odpověď a teprve pak nabídneme
   pomoc. Sazebník zůstává skrytý, banky se nejmenují. */
.vysledek-hlava{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.25rem);
  margin-bottom: 1rem;
}
.prstenec{
  --p: 0;
  flex: 0 0 92px;
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--gold-bright) calc(var(--p) * 1%), rgba(245,243,238,.14) 0);
  position: relative;
}
.prstenec::after{
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.prstenec-text{ position: relative; z-index: 1; text-align: center; line-height: 1; }
.prstenec-cislo{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.prstenec-popis{ display: block; font-size: .6rem; letter-spacing: .12em; color: rgba(245,243,238,.55); margin-top: .3rem; }
.prstenec.je-nad{ background: conic-gradient(#C97A4B calc(var(--p) * 1%), rgba(245,243,238,.14) 0); }

.hlavni-cislo{ flex: 1; }
.hlavni-cislo .stitek{
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,243,238,.55);
  display: block;
  margin-bottom: .35rem;
}
.hlavni-cislo .cislo{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.verdikt{
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.verdikt.je-ok{ background: var(--ok-soft); color: var(--ok); }
.verdikt.je-pozor{ background: var(--warn-soft); color: var(--warn); }
.verdikt svg{ flex: 0 0 18px; margin-top: .15rem; }

.radky{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: .5rem 1.4rem;
  margin-bottom: 1.5rem;
}
.radek{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.radek:last-child{ border-bottom: none; }
.radek span:first-child{ color: var(--muted); }
.radek .hod{ font-weight: 500; font-variant-numeric: tabular-nums; }
.radek.je-strop .hod{ color: var(--gold); }
.radek.je-strop span:first-child::after{
  content: " (tady vás to brzdí)";
  color: var(--gold);
  font-size: .82rem;
}

/* Splatnost si člověk dolaďuje až u výsledku. Jako samostatný krok by to
   byla další překážka; tady je to důvod, proč u výsledku ještě zůstat. */
.doladeni{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  margin-bottom: 2rem;
}
.doladeni-hlava{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.doladeni-stitek{
  font: 500 .7rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.doladeni-cislo{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Rysky místo popisků. Stupnice po pěti letech je čitelná na první pohled
   a nahrazuje větu, která tu dřív vysvětlovala, co posuvník dělá. */
.znacky{
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: .7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.znacky span{ position: relative; padding-top: .65rem; }
.znacky span::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--line-strong);
}

/* --- brána k sazbám ---------------------------------------------------
   Vypadá jako odměna, ne jako mýtná budka: zámek je drobný, nadpis říká,
   co za tím je, a tlačítko slibuje konkrétní věc. Formulář, který působí
   jako překážka, lidi zavřou; formulář, který působí jako klíč, vyplní. */
.brana{
  background: var(--white);
  border: 1px solid rgba(168,127,46,.35);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.25rem);
  margin-bottom: 2rem;
}
.zamek{
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(168,127,46,.10);
  color: var(--gold);
  margin-bottom: 1rem;
}
.brana h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.brana h2 em{ font-style: italic; color: var(--gold); }
.brana-popis{ color: var(--text-soft); font-size: .95rem; margin: 0 0 1.75rem; max-width: 34rem; }

.dvojice{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pole{ display: block; }
.pole label{
  display: block;
  font: 500 .78rem var(--font-body);
  color: var(--muted);
  margin-bottom: .4rem;
}
.pole input{
  width: 100%;
  font: 400 1rem var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: .8rem .9rem;
}
.pole input:focus{ outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.pole input[aria-invalid="true"]{ border-color: #B4472F; }
/* Kód se opisuje z SMS po jednom znaku, proto širší rozpal a čísla
   stejné šířky. Na plnou šířku by pole vypadalo jako další e-mail. */
.pole-kod{ max-width: 12rem; }
.pole-kod input{
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.souhlas{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.souhlas input{ margin-top: .25rem; accent-color: var(--gold); width: 16px; height: 16px; }
.souhlas a{ color: var(--gold); }

/* Citace v bráně k sazbám.
   Stojí mezi popisem a formulářem schválně: v tu chvíli má člověk vydat
   telefon a potřebuje vědět, co se pak stane. Proto je vybraná ta jediná
   recenze ze šesti, která mluví o telefonu, a ne o nejnižší sazbě.

   Zlatá linka vlevo místo rámečku — citace má být tichá poznámka na okraji,
   ne druhá karta soupeřící s formulářem. */
.brana-duvera{
  max-width: 34rem;
  margin: 0 0 1.75rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(168,127,46,.45);
}
/* Popis nad citací drží menší odstup, ať mezi nimi nevznikne díra. */
.brana-popis:has(+ .brana-duvera){ margin-bottom: 1rem; }
.brana-duvera .stars{ font-size: .82rem; letter-spacing: .14em; }
.brana-duvera blockquote{
  margin: .3rem 0 .45rem;
  font: 400 .92rem/1.6 var(--font-body);
  color: var(--text-soft);
}
.brana-duvera figcaption{
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  font-size: .78rem;
  color: var(--muted-2);
}

.brana-akce{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.kod-info{ font-size: .92rem; color: var(--text-soft); margin: 0 0 1.25rem; }
.kod-info b{ font-weight: 500; color: var(--ink); }
.chyba{ color: #B4472F; font-size: .85rem; margin: .9rem 0 0; min-height: 1.2rem; }

/* --- sazby a banky ----------------------------------------------------
   Hlavní lákadlo výsledku. Sazba je největší číslo na obrazovce hned po
   splátce, protože je to jediné, co klient umí porovnat s tím, co slyšel
   v bance. */
.sazby{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 2rem;
}
.sazba-hlava{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sazba-od{
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .1rem;
}
.sazba-cislo{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.sazba-pa{
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold);
  margin-left: .15rem;
}
.sazba-popis{
  color: var(--muted);
  font-size: .85rem;
  margin: .9rem 0 1.75rem;
}

/* Přepínač fixace. Segmenty, ne rozbalovací seznam: tři možnosti se vejdou
   a klient vidí, že má z čeho vybírat, aniž by musel klikat. */
.fixace{
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.fix-tl{
  border: none;
  background: none;
  border-radius: 999px;
  padding: .5rem 1rem;
  font: 500 .82rem var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.fix-tl[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.fix-tl:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

.banky{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.banka{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
  /* Karty naskakují po sobě. Není to ozdoba — postupné objevení říká
     „hledáme za vás" líp než jakýkoli spinner. */
  opacity: 0;
  transform: translateY(8px);
  animation: bankaNaskok .4s var(--ease) forwards;
}
@keyframes bankaNaskok{ to{ opacity: 1; transform: none; } }

/* Pruh na pozadí porovnává splátky mezi sebou. Bez něj jsou to tři čísla
   pod sebou, se kterými musí člověk počítat v hlavě. */
.banka-pruh{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(168,127,46,.07);
  transition: width .8s var(--ease) .25s;
  pointer-events: none;
}
.banka.je-nej{ border-color: var(--gold); background: var(--white); }
.banka.je-nej .banka-pruh{ background: rgba(168,127,46,.12); }

.banka-jmeno{ position: relative; font-weight: 500; font-size: .95rem; }
.banka-znacka{
  display: inline-block;
  margin-left: .55rem;
  font: 500 .62rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(168,127,46,.4);
  border-radius: 999px;
  padding: .18rem .5rem;
  vertical-align: 1px;
}
.banka-sazba, .banka-splatka{ position: relative; text-align: right; }
.banka-sazba .h, .banka-splatka .h{
  display: block;
  font-weight: 500;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.banka-sazba .p, .banka-splatka .p{
  display: block;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .15rem;
}
/* Rozdíl mezi krajními nabídkami. Nejsilnější argument pro poradce vůbec —
   a není to tvrzení, je to odečet z čísel, která má klient před sebou. */
.rozdil{
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  background: rgba(168,127,46,.08);
  border-radius: var(--radius-md);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.rozdil b{ font-weight: 500; color: var(--gold); }

.banky-pozn{
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 1.25rem 0 0;
}

.nabidka{
  border-top: 1px solid var(--line-strong);
  padding-top: 2rem;
}
.nabidka h2 em{ font-style: italic; color: var(--gold); }
.nabidka h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
.nabidka p{ color: var(--text-soft); font-size: .95rem; margin: 0 0 1.5rem; max-width: 34rem; }
.nabidka-akce{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.tl-zlate{
  background: linear-gradient(180deg, #D5AF57, #B98D33);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: .95rem 1.9rem;
  font: 600 .95rem var(--font-body);
  cursor: pointer;
}
.tl-zlate:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.tl-ticha{
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .95rem 1.6rem;
  font: 500 .95rem var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.tl-ticha:hover{ border-color: var(--ink); }

.disclaimer{
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px){
  .volby{ grid-template-columns: 1fr; }
  .vysledek-hlava{ flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .ovladani{ flex-wrap: wrap; }
  /* Tři sloupce se do šířky telefonu nevejdou, aniž by se čísla zlomila.
     Jméno banky nahoru přes celou šířku, čísla vedle sebe pod ním. */
  .banka{ grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
  .banka-jmeno{ grid-column: 1 / -1; }
  .banka-sazba{ text-align: left; }
  .sazba-hlava{ align-items: flex-start; }
  .dvojice{ grid-template-columns: 1fr; }
  .brana-akce .tl-zlate, .brana-akce .tl-ticha{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .krok.je-videt{ animation: none; }
  .postup-vypln{ transition: none; }
  .volba:hover{ transform: none; }
  .banka{ animation: none; opacity: 1; transform: none; }
  .banka-pruh{ transition: none; }
}

/* Odkaz zpět z výsledku. Stojí až pod doladěním splatnosti, aby nesoupeřil
   se sazbami, ale byl na dohled dřív než brána. */
.kalkulacka-kroky .zpet-radek{ margin: 0 0 2rem; }

/* ==========================================================================
   Kalkulačka jako překryv
   Na stránce zůstane pozvánka, otázky běží nad ní. Stránka se pod překryvem
   nehýbe, takže při přepnutí kroku nikam neodskočí.
   ========================================================================== */




.kk-okno{ position: fixed; inset: 0; z-index: 200; }
.kk-plachta{ position: absolute; inset: 0; background: rgba(28,27,24,.55); }
.kk-panel{
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, 780px);
  height: min(100%, 760px);
  background: var(--paper);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(28,27,24,.6);
}
.kk-lista{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.kk-nazev{
  font: 500 .72rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kk-x{
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.kk-x:hover{ background: var(--paper); border-color: var(--ink); }
.kk-x:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* Roluje jen vnitřek panelu. Kdyby rolovala stránka pod ním, klient by se
   po zavření ocitl jinde, než kde začal. */
.kk-telo{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 3rem;
}
body.kk-otevreno{ overflow: hidden; }

/* Ukazatel postupu drží nahoře panelu, ne stránky. */
.kk-panel > .postup{ flex: 0 0 auto; margin: 0; }

@media (max-width: 720px){
  .kk-panel{ width: 100%; height: 100%; border-radius: 0; }
  
  .kk-teaser .btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .kk-telo{ scroll-behavior: auto; }
}

/* --- úvodní obrazovka widgetu ------------------------------------------
   Sazba je největší věc na obrazovce. Je to jediné číslo, které klient umí
   porovnat s tím, co slyšel v bance, takže je to důvod pokračovat. */
.kk-uvod{ text-align: center; padding-top: 1rem; }
.uvod-stitek{
  display: block;
  font: 500 .72rem var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.uvod-sazba{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 13vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gold);
  margin: 0 0 1.5rem;
  font-variant-numeric: tabular-nums;
}
.uvod-pa{ font-family: var(--font-body); font-size: 1rem; font-weight: 500; margin-left: .3rem; }
.kk-uvod .otazka{ font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.kk-uvod .upresneni{ margin-left: auto; margin-right: auto; }
.kk-uvod .ovladani{ justify-content: center; }
.uvod-pozn{ font-size: .82rem; color: var(--muted); margin: 1.25rem 0 0; }





/* --- doladění widgetu ---------------------------------------------------- */

/* Karty stejně vysoké. Popisky mají různý počet řádků, takže bez tohohle
   měla každá buňka jinou výšku a mřížka vypadala rozsypaně. */
/* Karty stejně vysoké. Mřížkovou položkou je `li`, ne tlačítko uvnitř —
   proto samotné `grid-auto-rows: 1fr` nestačilo: `li` se srovnaly, ale
   karta v něm si držela výšku podle svého textu. */
.kalkulacka-kroky .volby{ grid-auto-rows: 1fr; }
.kalkulacka-kroky .volby > li{ display: flex; }
.kalkulacka-kroky .volba{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Popisek odsazený dolů, ať u všech karet začíná na stejné výšce. */
.kalkulacka-kroky .volba span{ margin-top: auto; padding-top: .2rem; }
.kalkulacka-kroky .volba span:empty{ display: none; }

/* Výsledek má být to nejsilnější, co klient uvidí: větší prstenec, větší
   čísla, sazba hned vedle splátky. */
.vysledek-hlava{ gap: 1.75rem; }
.prstenec{ flex: 0 0 108px; width: 108px; height: 108px; }
.prstenec::after{ inset: 9px; }
.prstenec-cislo{ font-size: 1.75rem; }

.hlavni-cisla{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem 1.75rem;
}
.hlavni-cislo .cislo{ font-size: clamp(1.6rem, 4.5vw, 2.15rem); }
/* Sazba svítí zlatě, splátka zůstává krémová: dvě stejně velká čísla vedle
   sebe by soupeřila a klient by nevěděl, kam se dívat dřív. */
.hlavni-cisla .hlavni-cislo:last-child .cislo{ color: var(--gold-bright); }

@media (max-width: 640px){
  .vysledek-hlava{ flex-direction: row; align-items: center; gap: 1.25rem; }
  .prstenec{ flex: 0 0 88px; width: 88px; height: 88px; }
  .hlavni-cisla{ grid-template-columns: 1fr; gap: .9rem; }
}

/* --- sazba jako hlavní číslo výsledku ------------------------------------
   Kruh drží sazbu, ne LTV. Je to jediný údaj, který klient umí porovnat
   s tím, co slyšel v bance, takže má být největší věcí na obrazovce. */
.vysledek-hlava{ gap: clamp(1.25rem, 4vw, 2.25rem); }
.prstenec{
  flex: 0 0 clamp(140px, 34vw, 176px);
  width: clamp(140px, 34vw, 176px);
  height: clamp(140px, 34vw, 176px);
  /* Plný zlatý kruh: sazba nemá stupnici od nuly do sta, takže výseč by
     nic neznamenala. Kruh je tu jako rám, ne jako měřidlo. */
  background: conic-gradient(var(--gold-bright) 100%, rgba(245,243,238,.14) 0);
}
.prstenec::after{ inset: 10px; }
.prstenec-cislo{
  display: block;
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.prstenec-cislo em{
  font-family: var(--font-body);
  font-style: normal;
  font-size: .42em;
  font-weight: 500;
  margin-left: .15em;
  vertical-align: .35em;
}
.prstenec .prstenec-popis{
  margin: 0 0 .45rem;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prstenec.je-nad{ background: conic-gradient(var(--gold-bright) 100%, rgba(245,243,238,.14) 0); }

.hlavni-cisla{ display: block; }
.hlavni-cislo .cislo{ font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
.hlavni-cisla .hlavni-cislo:last-child .cislo{ color: var(--cream); }

/* LTV nad limitem je varování, ale patří k číslu, ne k celé obrazovce. */
.radek.je-vysoke .hod{ color: var(--warn); }
.radek.je-vysoke span:first-child::after{
  content: " (nad běžnou hranicí)";
  color: var(--warn);
  font-size: .82rem;
}

@media (max-width: 640px){
  .vysledek-hlava{ flex-direction: column; align-items: center; text-align: center; }
  .hlavni-cisla{ width: 100%; }
}

/* Předvolba z výběru, ne z klávesnice. Psát „+420" na telefonu je otrava
   a lidé to píšou pokaždé jinak (00420, 420, +420 s mezerami). */
.tel-radek{ display: flex; gap: .5rem; }
.tel-radek select{
  flex: 0 0 auto;
  font: 400 1rem var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: .8rem .6rem;
  cursor: pointer;
}
.tel-radek select:focus{ outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.tel-radek input{ flex: 1 1 auto; min-width: 0; }

/* --- pozvánka na stránce -------------------------------------------------
   Tentýž kruh se sazbou jako ve výsledku. Kdo kalkulačku neotevře, číslo
   přesto uvidí, a je to první věc, které si na stránce všimne. */



/* Světlá varianta kruhu: na papírové stránce musí být střed papírový,
   tmavý by tu vypadal jako díra. */
.prstenec.je-svetly{
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  background: conic-gradient(var(--gold) 100%, var(--line-strong) 0);
}
.prstenec.je-svetly::after{ background: var(--white); inset: 9px; }
.prstenec.je-svetly .prstenec-popis{ color: var(--muted); }
.prstenec.je-svetly .prstenec-cislo{ color: var(--gold); font-size: 2rem; }

@media (max-width: 720px){
  
  
}

/* ==========================================================================
   Rychlý propočet na stránce
   Tři posuvníky vlevo, výsledek vpravo. Slouží jako návnada: klient vidí
   splátku dřív, než cokoli vyplní, a jeho čísla jdou s ním do widgetu.
   Nadpis nese `h2` celé sekce, tady žádný vlastní není.
   ========================================================================== */
.kk-teaser{ margin-top: 2.5rem; }



.kk-teaser{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}









.kk-mini-vysledek{
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 1.85rem);
}
.mini-eyebrow{
  font: 500 .7rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.mini-cisla{ display: flex; align-items: center; gap: 1.35rem; margin-bottom: 1.5rem; }
.mini-stat{ display: grid; gap: .15rem; }
.mini-stitek{ font-size: .8rem; color: var(--muted); }
.mini-stitek-2{ margin-top: .7rem; }
.mini-hodnota{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.mini-hodnota-2{ font-size: 1.15rem; color: var(--text-soft); }
.kk-cta{ width: 100%; justify-content: center; text-align: center; }
.mini-pozn{ font-size: .8rem; color: var(--muted); margin: .8rem 0 0; text-align: center; }

@media (max-width: 860px){
  .kk-teaser{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .mini-cisla{ flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* --- posuvníky rychlého propočtu ----------------------------------------
   Dráha se vlevo od jezdce vybarví zlatě. Bez toho je posuvník jen šedá
   čára s tečkou a nikoho nenapadne s ním hýbat. Podíl plní JS do --vypln. */
.kk-mini{ display: grid; gap: 1.75rem; }
.mini-pole{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .35rem 1rem;
}
.mini-pole label{
  font: 500 1.02rem var(--font-body);
  letter-spacing: .01em;
  color: var(--text-soft);
}
.mini-cislo{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.6vw, 1.95rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kk-mini input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  margin: .7rem 0 0;
  border-radius: 999px;
  background: linear-gradient(to right,
              var(--gold) var(--vypln, 30%),
              rgba(28,27,24,.10) var(--vypln, 30%));
  cursor: pointer;
}
.kk-mini input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(28,27,24,.22);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.kk-mini input[type=range]::-moz-range-thumb{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(28,27,24,.22);
}
.kk-mini input[type=range]:hover::-webkit-slider-thumb,
.kk-mini input[type=range]:active::-webkit-slider-thumb{
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(168,127,46,.4);
}
.kk-mini input[type=range]:focus-visible{ outline: 2px solid var(--gold); outline-offset: 5px; }

.mini-skala{
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   WhatsApp kanál
   Blok stojí mezi logolištěm bank a lead magnetem, tedy mezi papírovou
   a grafitovou plochou – proto bílé pozadí, aby se obě oddělil.
   Náhled telefonu je čistě CSS: žádný screenshot, který by za půl roku
   nesouhlasil s tím, jak WhatsApp doopravdy vypadá.
   ========================================================================== */

.kanal-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.kanal-copy .eyebrow{ margin-bottom: .9rem; }
.kanal-lead{
  max-width: 46ch;
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.kanal-body{
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}
.kanal-body li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.kanal-body .idx{
  font: 500 .72rem var(--font-body);
  letter-spacing: .12em;
  color: var(--gold-dark);
  padding-top: .5rem;
}
.kanal-body h3{
  font: 400 1.1rem var(--font-display);
  color: var(--ink);
  margin: 0 0 .2rem;
}
.kanal-body p{
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.6;
  margin: 0;
}

.kanal-actions{
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}
.kanal-note{
  font: 500 .85rem var(--font-body);
  color: var(--muted);
}

/* --- náhled telefonu --------------------------------------------------- */

.kanal-nahled{ display: grid; justify-items: center; gap: 1rem; }
.kanal-telefon{
  width: 100%;
  max-width: 360px;
  background: var(--ink-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-xl);
  padding: 1.1rem 1.1rem 1.35rem;
  box-shadow: var(--shadow-card);
}
.kanal-hlavicka{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(245,243,238,.10);
}
.kanal-avatar{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold-flat);
  color: var(--ink);
  font: 600 .82rem var(--font-body);
  letter-spacing: .02em;
}
.kanal-jmeno{ display: grid; gap: .12rem; min-width: 0; }
.kanal-jmeno b{
  font: 500 .88rem var(--font-body);
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanal-jmeno em{
  font-style: normal;
  font-size: .74rem;
  color: var(--cream-faint);
}

.kanal-zpravy{ display: grid; gap: .6rem; margin-top: .9rem; }
.kanal-zprava{
  position: relative;
  background: rgba(245,243,238,.07);
  border: 1px solid rgba(245,243,238,.08);
  border-radius: var(--radius-md);
  padding: .8rem .9rem 1.5rem;
}
.kanal-zprava p{
  color: var(--cream);
  font-size: .855rem;
  line-height: 1.5;
  margin: 0;
}
.kanal-zprava.is-nemovitost{ border-left: 2px solid var(--gold); }
.kanal-stitek{
  display: inline-block;
  margin-bottom: .45rem;
  font: 500 .62rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.kanal-cas{
  position: absolute;
  right: .9rem;
  bottom: .6rem;
  font: 400 .68rem var(--font-body);
  color: var(--cream-faint);
}

.kanal-diskretnost{
  max-width: 360px;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

/* --- kompaktní pruh na podstránkách ------------------------------------ */

.kanal-pruh{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.kanal-pruh h3{
  font: 400 1.25rem var(--font-display);
  color: var(--ink);
  margin: 0;
}
.kanal-pruh h3 em{ font-style: italic; color: var(--gold-dark); }
.kanal-pruh p{
  margin: .3rem 0 0;
  font-size: .9rem;
  color: var(--muted);
  max-width: 52ch;
}

/* Na mobilu jde náhled až za text, ne před něj: ukázka cizího chatu bez
   kontextu vypadá jako omylem vložený screenshot. */
@media (max-width: 900px){
  .kanal-grid{ grid-template-columns: 1fr; }
  .kanal-nahled{ margin-top: 1rem; }
  .kanal-telefon{ max-width: 420px; }
  .kanal-diskretnost{ max-width: 420px; }
}
@media (max-width: 560px){
  .kanal-actions{ gap: .8rem; }
  .kanal-actions .btn{ width: 100%; justify-content: center; }
  .kanal-note{ width: 100%; text-align: center; }
  .kanal-pruh{ padding: 1.35rem 1.25rem; }
  .kanal-pruh .btn{ width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------------
   OSOBNÍ POPISEK
   Kurzivní patková antikva místo tiché šedé. Jen tam, kde věta není popis
   sekce, ale názor — proto se to nesmí rozlézt na všechny .desc.

   Zápis .je-osobni[class] není ozdoba: samotná třída má váhu 0,1,0 a prohrála
   by s .lead i s pravidlem
   .section-head .desc má úplně stejnou váhu (0,2,0), takže o vítězi
   rozhoduje pořadí v souboru. Kdyby tenhle blok někdo přesunul výš,
   popisek si vezme zpátky max-width 360px a šedou barvu.
   --------------------------------------------------------------------------- */
.je-osobni[class]{
  font-family:var(--font-display);
  font-size:clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight:300; font-style:italic;
  line-height:1.55; color:var(--ink);
  max-width:34rem;
}
/* Pojistka pro tmavé sekce: --ink by na tmavém podkladu zmizel. */
.section-ink .je-osobni[class]{ color:var(--cream-muted) }


/* ---------------------------------------------------------------------------
   RECENZE S PARAMETRY ÚVĚRU
   Vlevo příběh, vpravo čísla. Podmínka :has() je schválně: karta, ke které
   parametry nemáme, zůstane jednosloupcová a nemusí se přepisovat všech
   dvanáct recenzí naráz. Kde :has() prohlížeč neumí, dl se jen podsadí pod
   text — nic se nerozbije.
   --------------------------------------------------------------------------- */
.quote-card:has(.q-param){
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:1.75rem; align-items:start;
  grid-column:1 / -1;
  padding:1.75rem 1.9rem;
}
.quote-card:has(.q-param) .q-text{ display:flex; flex-direction:column; gap:.9rem }
.q-param{
  margin:0; padding:1.1rem 1.2rem;
  background:var(--paper); border-radius:12px;
  display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem;
}
.q-param-nadpis{
  grid-column:1 / -1; margin:0 0 .25rem;
  font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2);
}
.q-param dt{ font-size:.8125rem; color:var(--muted) }
/* tabular-nums: aby číslice pod sebou stály ve sloupci */
.q-param dd{ margin:0; font-size:.8125rem; font-weight:500; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums }
@media (max-width:720px){
  .quote-card:has(.q-param){ grid-template-columns:1fr; gap:1.1rem; padding:1.35rem 1.4rem }
}


/* ---------------------------------------------------------------------------
   ČLÁNKY
   Sloupec je úmyslně užší než zbytek webu. Souvislý text se čte nejlíp při
   zhruba 65–75 znacích na řádek; přes celou šířku wrapu by jich měl přes sto
   a oko by na konci řádku ztrácelo, kde má pokračovat.
   --------------------------------------------------------------------------- */
.clanek{ background:var(--white); padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem) }
/* Text vlevo, medailonek autora vpravo. Sloupec textu je omezený na 48rem
   (~90 znaků na řádek), zbytek šířky drží medailonek — tím se prostor
   využije, aniž by se text natáhl do nečitelné délky. */
.clanek-mrizka{
  display:grid;
  grid-template-columns:minmax(0,48rem) 19rem;
  justify-content:space-between;
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.clanek-obal{ min-width:0 }

/* Medailonek jede se čtenářem dolů, ale jen dokud se vejde na obrazovku. */
.clanek-bok{ position:sticky; top:6rem; display:grid; gap:1.5rem }
.clanek-autor{
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:1.5rem 1.4rem;
}
.clanek-autor-stitek{ font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 1rem }
.clanek-autor-foto{ width:5.5rem; height:5.5rem; border-radius:50%; overflow:hidden; margin:0 0 1rem }
.clanek-autor-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block }
.clanek-autor-jmeno{ font:400 1.1875rem var(--font-display); color:var(--ink); margin:0 }
.clanek-autor-jmeno a{ display:none }
.clanek-autor-role{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); margin:.3rem 0 .85rem }
.clanek-autor-bio{ font-size:.875rem; line-height:1.65; color:var(--muted); margin:0 0 1.25rem }
/* V medailonku jsou tlačítka pod sebou přes celou šířku: sloupec má 19rem,
   vedle sebe by se text do nich nevešel a lámal by se. */
.clanek-autor-tlacitka{ display:grid; gap:.5rem }
.clanek-autor-tlacitka .btn{ width:100%; justify-content:center }

/* Výzva na konci článku. Odděluje se linkou, ne barevným pruhem — po dvou
   tisících slovech textu je barevná plocha rána, ne pozvání. */
.clanek-cta{
  margin:3rem 0 0; padding:1.75rem 0 0;
  border-top:1px solid var(--line);
}
.clanek-cta-text{ font:300 1.25rem var(--font-display); font-style:italic; color:var(--ink); margin:0 0 1.1rem }
.clanek-cta-tlacitka{ display:flex; flex-wrap:wrap; gap:.75rem }
@media (max-width:520px){
  .clanek-cta-tlacitka{ display:grid }
  .clanek-cta-tlacitka .btn{ width:100%; justify-content:center }
}

/* Pod 900 px se medailonek přesune pod článek a přestane být lepivý. */
@media (max-width:900px){
  .clanek-mrizka{ grid-template-columns:1fr }
  .clanek-bok{ position:static }
  .clanek-autor{ max-width:32rem }
}
.clanek-tema{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .9rem }
.clanek-tema a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-strong) }
.clanek-tema a:hover{ border-bottom-color:var(--gold) }
.clanek h1{ font:300 clamp(1.9rem,3.4vw,2.75rem)/1.15 var(--font-display); letter-spacing:-.01em; margin:0 0 .8rem }
.clanek-datum{ font-size:.8125rem; color:var(--muted-2); margin:0 0 2.25rem }

.clanek-telo{ font-size:1.125rem; line-height:1.75; color:var(--text-soft) }
.clanek-telo h2{ font:400 1.5rem/1.3 var(--font-display); color:var(--ink); margin:2.5rem 0 .8rem }
.clanek-telo h3{ font:500 1.0625rem/1.4 var(--font-body); color:var(--ink); margin:1.9rem 0 .5rem }
.clanek-telo p{ margin:0 0 1.15rem }
.clanek-telo ul, .clanek-telo ol{ margin:0 0 1.15rem; padding-left:1.3rem }
.clanek-telo li{ margin-bottom:.45rem }
.clanek-telo a{ color:var(--gold-dark); text-decoration:underline; text-underline-offset:.18em }
/* Citace v článku je jediné místo, kde se text zvětšuje. Zlatá linka vlevo,
   ne uvozovky navíc — ty už si čtenář domyslí. */
.clanek-telo blockquote{
  margin:1.75rem 0; padding:.15rem 0 .15rem 1.25rem;
  border-left:2px solid var(--gold);
  font:300 italic 1.25rem/1.5 var(--font-display); color:var(--ink);
}
.clanek-telo blockquote p{ margin:0 }
.clanek-zpet{ margin:3rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.875rem }
.clanek-zpet a{ color:var(--muted); text-decoration:none }
.clanek-zpet a:hover{ color:var(--gold-dark) }

/* Rozcestník: řadí se podle tématu, ne podle data. Rada z loňska platí
   stejně jako včerejší, tak ať nevypadá zastarale jen proto, že je dole. */
.clanky-skupina{ margin-bottom:3rem }
.clanky-skupina:last-child{ margin-bottom:0 }
.clanky-tema{ font:400 1.375rem var(--font-display); margin:0 0 1.1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line) }
.clanky-seznam{ list-style:none; margin:0; padding:0 }
.clanek-radek{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:1rem 0; border-bottom:1px solid var(--line) }
.clanek-radek:last-child{ border-bottom:0 }
.clanek-radek a{ display:block; text-decoration:none; color:inherit }
.clanek-nazev{ display:block; font:400 1.125rem var(--font-display); color:var(--ink) }
.clanek-popis{ display:block; margin-top:.25rem; font-size:.9375rem; line-height:1.6; color:var(--muted) }
.clanek-radek a:hover .clanek-nazev, .clanek-radek a:focus-visible .clanek-nazev{ color:var(--gold-dark) }
.clanek-kdy{ flex:none; font-size:.75rem; color:var(--muted-2); font-variant-numeric:tabular-nums }
@media (max-width:600px){
  .clanek-radek{ flex-direction:column; gap:.35rem }
  .clanek-kdy{ order:-1 }
}

/* Obsah článku: orientace, ne ozdoba. */
.clanek-obsah{ border-left:2px solid var(--gold); padding-left:1.1rem }
.clanek-obsah-stitek{ font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 .7rem }
.clanek-obsah ol{ margin:0; padding:0 0 0 1.1rem }
.clanek-obsah li{ margin-bottom:.45rem; font-size:.8125rem; line-height:1.45; color:var(--muted) }
.clanek-obsah li::marker{ color:var(--gold); font-variant-numeric:tabular-nums }
.clanek-obsah a{ color:inherit; text-decoration:none }
.clanek-obsah a:hover{ color:var(--gold-dark) }

/* Perex: první odstavec je větší, aby článek měl kde začít. */
.clanek-telo > p:first-child{ font-size:1.25rem; line-height:1.65; color:var(--ink) }

/* Kapitoly potřebují vzduch a hranici, jinak text splývá v jeden pruh. */
.clanek-telo h2{ font-size:1.75rem; margin:3.25rem 0 1rem; padding-top:1.75rem; border-top:1px solid var(--line); scroll-margin-top:7rem }
.clanek-telo > h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.clanek-telo h3{ margin:2.25rem 0 .6rem }

/* Odstavec s tučným úvodem je pokyn nebo závěr. Zlatá linka z něj udělá
   záchytný bod, aniž by přibyla další barevná plocha. */
.clanek-telo p:has(> strong:first-child){ border-left:2px solid var(--gold); padding-left:1rem; color:var(--ink) }

/* Číslované kapitoly. Čísla se počítají v CSS, ne v textu — když se kapitola
   přidá nebo přehodí, sedí to dál a sedí i s obsahem v bočním sloupci. */
.clanek-telo{ counter-reset:kap }
.clanek-telo h2{ position:relative; padding-left:3rem }
.clanek-telo h2::before{
  counter-increment:kap; content:counter(kap);
  position:absolute; left:0; top:1.85rem;
  font:italic 300 1.5rem var(--font-display); color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* Číslo u podnadpisu: kroužek se zlatou číslicí. Stejný jazyk jako kroky
   na ostatních stránkách, jen menší. */
.clanek-telo h3{ display:flex; align-items:baseline; gap:.7rem }
.clanek-cislo{
  flex:none; width:1.75rem; height:1.75rem; border-radius:50%;
  background:rgba(168,127,46,.1);
  display:inline-flex; align-items:center; justify-content:center;
  font:italic 400 .95rem var(--font-display); color:var(--gold-dark);
  transform:translateY(.15rem);
}

/* Tabulka: linky jen vodorovné, čísla v pravo a v tabulkových číslicích,
   aby šly srovnat okem pod sebou. */
.clanek-tabulka{ margin:1.75rem 0; overflow-x:auto }
.clanek-tabulka table{ width:100%; border-collapse:collapse; font-size:.9375rem }
.clanek-tabulka th{
  text-align:left; padding:.6rem .9rem .6rem 0;
  border-bottom:1px solid var(--line-strong);
  font:500 .68rem var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.clanek-tabulka th:last-child, .clanek-tabulka td:last-child{ text-align:right; padding-right:0 }
.clanek-tabulka td{
  padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--line);
  color:var(--text-soft); font-variant-numeric:tabular-nums;
}
.clanek-tabulka tr:last-child td{ border-bottom:0 }
.clanek-tabulka td strong{ color:var(--gold-dark) }

/* Tip: vsuvka mimo hlavní tok. Jemný podklad, ne barevný rámeček — má se
   dát přeskočit, ne křičet. */
.clanek-tip{
  margin:1.75rem 0; padding:1.15rem 1.35rem;
  background:var(--paper); border-radius:12px;
  border-left:3px solid var(--gold);
}
.clanek-tip p{ margin:0; font-size:1rem; line-height:1.65 }
.clanek-tip-stitek{
  font:500 .65rem var(--font-body) !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dark); margin:0 0 .4rem !important;
}

/* Číst dál: tři odkazy, žádné obrázky. Na konci dlouhého textu je poutavá
   galerie náhledů spíš rušivá než užitečná. */
.clanek-dale{ margin:3rem 0 0; padding-top:1.75rem; border-top:1px solid var(--line) }
.clanek-dale-nadpis{ font:400 1.25rem var(--font-display) !important; margin:0 0 1rem !important; padding:0 !important; border:0 !important }
.clanek-dale-nadpis::before{ content:none !important }
.clanek-dale-seznam{ list-style:none; margin:0; padding:0 }
.clanek-dale-seznam li{ border-bottom:1px solid var(--line) }
.clanek-dale-seznam li:last-child{ border-bottom:0 }
.clanek-dale-seznam a{ display:block; padding:.85rem 0; text-decoration:none }
.clanek-dale-tema{ display:block; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2) }
.clanek-dale-nazev{ display:block; margin-top:.2rem; font:400 1.0625rem var(--font-display); color:var(--ink) }
.clanek-dale-seznam a:hover .clanek-dale-nazev{ color:var(--gold-dark) }

/* Obálka článku. Tmavý podklad kreslí build-clanky.mjs jako SVG, fotka se
   na něj vrství až tady. Uvnitř SVG být nemůže: obrázek vložený přes <img>
   nesmí sáhnout na další soubor a zapečená base64 fotka by každou obálku
   nafoukla o sto kilobajtů. Takhle se fotka stáhne jednou pro celý web. */
.obalka{ position:relative; display:block; aspect-ratio:1200 / 630; background:var(--ink); overflow:hidden }
.obalka-foto{ position:absolute; right:2%; bottom:0; height:88%; width:auto }
/* Clona drží text čitelný nad fotkou. Vlevo skoro plná, vpravo skoro žádná,
   aby krajina za obličejem zůstala vidět. */
.obalka-clona{ position:absolute; inset:0; background:linear-gradient(100deg,
  rgba(28,27,24,.94) 0%, rgba(28,27,24,.80) 40%, rgba(28,27,24,.30) 68%, rgba(28,27,24,.12) 100%) }
.obalka-pozadi{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.obalka-popredi{ position:absolute; inset:0; width:100%; height:100% }
.clanek-obalka{ margin:0 0 2rem; border-radius:var(--radius-md); overflow:hidden }

/* Výpis článků: karty vedle sebe, vpravo medailonek jako u článku. */
.clanky-rozvrzeni{ display:grid; grid-template-columns:minmax(0, 1fr) 19rem;
  gap:clamp(2rem, 4vw, 4rem); align-items:start }
.clanky-bok{ position:sticky; top:6rem }
.clanky-mrizka{ list-style:none; margin:0; padding:0; display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr)) }
.clanek-karta{ display:flex }
.clanek-karta > a{ display:flex; flex-direction:column; width:100%; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease }
.clanek-karta > a:hover, .clanek-karta > a:focus-visible{ transform:translateY(-3px); border-color:var(--gold);
  box-shadow:0 14px 32px rgba(28,27,24,.10) }
/* Pozor: tělo článku má taky .clanek-telo. Karta proto používá vlastní třídu. */
.clanek-karta-telo{ display:flex; flex-direction:column; gap:.5rem; padding:1.375rem 1.5rem 1.5rem }
.clanek-stitek{ align-self:flex-start; padding:.25rem .625rem; border:1px solid var(--line-strong); border-radius:999px;
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2) }
.clanek-nazev{ display:block; font:400 1.1875rem/1.35 var(--font-display); color:var(--ink) }
.clanek-popis{ display:block; font-size:.9375rem; line-height:1.6; color:var(--muted) }
.clanek-kdy{ display:block; margin-top:.25rem; font-size:.75rem; letter-spacing:.04em; color:var(--muted-2);
  font-variant-numeric:tabular-nums }
.clanek-karta > a:hover .clanek-nazev, .clanek-karta > a:focus-visible .clanek-nazev{ color:var(--gold-dark) }
@media (max-width:900px){
  .clanky-rozvrzeni{ grid-template-columns:1fr }
  .clanky-bok{ position:static }
}
@media (prefers-reduced-motion: reduce){
  .clanek-karta > a{ transition:none }
  .clanek-karta > a:hover, .clanek-karta > a:focus-visible{ transform:none }
}

/* Odrážky v článku. Globální reset bere seznamům markery, tady je vracíme —
   zlatým puntíkem, aby výčet patřil k webu a ne k prohlížeči. */
.clanek-telo ul{ list-style:none; padding-left:1.5rem }
.clanek-telo ul > li{ position:relative }
.clanek-telo ul > li::before{ content:""; position:absolute; left:-1.05rem; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--gold) }
.clanek-telo ol{ list-style:decimal; padding-left:1.6rem }
.clanek-telo ol > li::marker{ color:var(--gold); font-weight:600 }

/* Hlavička výpisu článků. Sdílená .page-hero je stavěná na stránky, kde je hero
   nosič sdělení; tady jen uvádí mřížku karet, a její odsazení se sčítalo
   s odsazením následující sekce do zbytečné díry pod menu. */
.page-hero-tesny{ padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem) }
.page-hero-tesny + .section{ padding-top: clamp(1.75rem, 3.5vw, 2.5rem) }

/* Článek na telefonu. Na 390 px zbývá po odsazení 350 px; při 18px písmu to
   vycházelo na 39 znaků na řádek a nadpisy druhé úrovně byly skoro stejně
   velké jako titulek článku. Podnadpisy byly dokonce menší než text. */
@media (max-width:640px){
  .clanek-telo{ font-size:1rem; line-height:1.7 }
  .clanek-telo > p:first-child{ font-size:1.125rem; line-height:1.6 }
  .clanek-telo h2{ font-size:1.375rem; padding-left:2.1rem; padding-top:1.4rem; margin:2.5rem 0 .7rem }
  .clanek-telo h2::before{ font-size:1.125rem; top:1.5rem }
  .clanek-telo h3{ font-size:1.0625rem; font-weight:600; margin:1.8rem 0 .5rem }
  .clanek-telo blockquote{ font-size:1.0625rem; margin:1.5rem 0; padding-left:1rem }
  .clanek-obalka{ margin-bottom:1.5rem }
  /* Obsah článku skončí po zúžení až na konci stránky, kde k ničemu není.
     Medailonek autora tam naopak dává smysl, ten zůstává. */
  .clanek-obsah{ display:none }
}

/* ==========================================================================
   Reference – pohyblivá stěna
   ========================================================================== */

/* Tři sloupce jedou nahoru, každý jinou rychlostí, aby se karty nezarovnaly
   do řádků a stěna vypadala živě. Smyčku dělá posun o −50 % nad zdvojeným
   obsahem; pás má proto dole odsazení přesně o mezeru, jinak by se v místě
   napojení objevila díra. Kopie karet přidává main.js a teprve pak se pás
   rozjede (`je-ziva`) – text tak zůstává v HTML jen jednou a bez skriptu je
   ze sekce čitelný seznam devíti recenzí, ne poloprázdné okno. */
.zed{ display:flex; justify-content:center; gap:1.5rem; margin-top:clamp(2rem,4vw,3rem);
  max-height:41rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent) }
.zed-sloupec{ flex:0 0 clamp(16rem,25vw,21rem) }
.zed-pas{ display:flex; flex-direction:column; gap:1.5rem; padding-bottom:1.5rem }
.zed.je-ziva .zed-pas{ animation:zed-jede var(--doba,52s) linear infinite }
.zed:hover .zed-pas, .zed:focus-within .zed-pas{ animation-play-state:paused }
@keyframes zed-jede{ to{ transform:translateY(-50%) } }

.zed-karta{ display:flex; flex-direction:column; gap:.65rem; background:var(--ink-card);
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:1.5rem 1.6rem 1.35rem }
.zed-tema{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1rem;
  line-height:1.35; color:var(--gold-bright) }
.zed-karta blockquote{ margin:0; font-size:.9375rem; line-height:1.72; color:var(--cream) }
.zed-karta footer{ margin-top:.3rem; display:flex; flex-direction:column; gap:.1rem }
.zed-kdo{ font-weight:500; font-size:.875rem; color:var(--cream) }
.zed-zdroj{ font-size:.6875rem; color:rgba(245,243,238,.42) }

/* Sloupce se ubírají odspodu: pod 1080 px zůstanou dva, na telefonu jeden. */
@media (max-width:1080px){ .zed-treti{ display:none } }
@media (max-width:720px){
  .zed-druhy{ display:none }
  .zed{ max-height:34rem }
  .zed-sloupec{ flex:1 1 auto; max-width:26rem }
}

/* Kdo si vypnul animace, nemá koukat na pohyb ani na zdvojené karty. */
@media (prefers-reduced-motion:reduce){
  .zed{ max-height:none; -webkit-mask-image:none; mask-image:none }
  .zed.je-ziva .zed-pas{ animation:none }
  .zed-pas > [aria-hidden="true"]{ display:none }
}

/* ==========================================================================
   Kde nás najdete
   ========================================================================== */

/* Pás je světlý schválně. Když byl tmavý (starý `lead-magnet`), splýval
   s kontaktní sekcí pod sebou v jednu beztvarou plochu a stránka tím končila
   dvakrát. Světlý pruh mezi loga bank a tmavý závěr rytmus zase srovná. */
.kdenas{ background:var(--white); border-top:1px solid var(--line) }
.kdenas-inner{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem,4vw,3.5rem); padding-block:clamp(2rem,4vw,2.75rem) }

.kdenas-copy h3{ margin:0 0 .4rem; font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.3rem,2.3vw,1.6rem); line-height:1.25; color:var(--ink) }
.kdenas-copy h3 em{ font-style:italic; color:var(--gold) }
.kdenas-copy p{ margin:0; max-width:36rem; font-size:.9375rem; line-height:1.6; color:var(--muted) }

.kdenas-seznam{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0; padding:0; list-style:none; flex:0 0 auto }
.kdenas-seznam > li{ display:flex }
.kdenas-dlazdice{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  width:6.75rem; min-height:6.25rem; padding:.9rem .55rem; text-align:center; text-decoration:none;
  background:var(--paper); border:1px solid rgba(28,27,24,.12); border-radius:14px; color:var(--ink);
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease }
.kdenas-dlazdice svg{ stroke:var(--gold); fill:none; stroke-linecap:round; stroke-linejoin:round }
.kdenas-dlazdice span{ font-size:.75rem; line-height:1.3 }
.kdenas-dlazdice:hover,
.kdenas-dlazdice:focus-visible{ border-color:var(--gold); background:var(--white); transform:translateY(-2px) }

@media (max-width:860px){
  .kdenas-inner{ flex-direction:column; align-items:flex-start }
  .kdenas-seznam{ width:100% }
  /* Na telefonu si dlaždice rozdělí řádek rovným dílem, ať nejsou různě
     široké podle délky popisku. Roztahuje se položka seznamu, ne odkaz:
     flexové dítě je `li`, `a` uvnitř něj jen vyplní místo. */
  .kdenas-seznam > li{ flex:1 1 0; min-width:5rem }
  .kdenas-dlazdice{ width:100%; min-height:5.5rem; padding:.8rem .4rem }
}
@media (prefers-reduced-motion:reduce){
  .kdenas-dlazdice{ transition:none }
  .kdenas-dlazdice:hover{ transform:none }
}