/* ==========================================================================
   Autevo Leasing — design systém
   Světlá editorial base (teplá kost) + tmavé full-bleed pásy.
   ========================================================================== */

:root{
  /* --- barvy: převzato z mercury.com (změřené hodnoty), akcent zůstává náš --- */
  --bg:         #181822;   /* základní plocha webu */
  --bg-2:       #212130;   /* karty a vyvýšené plochy */
  --bg-3:       #2A2A38;   /* třetí stupeň, vstupy */
  --ink:        #12121A;   /* nejtmavší plocha — hlavička, patička */
  --ink-2:      #212130;
  --ink-3:      #32323F;
  --bone:       #181822;   /* zachováno kvůli starším pravidlům */
  --bone-2:     #212130;
  --paper:      #212130;
  --text:       #EDEDF3;   /* hlavní text */
  --text-2:     #C3C3CC;   /* sekundární text */
  --text-3:     #9494A3;   /* popisky */
  /* akcentní odstíny jsou definované níž v bloku „Akcent: limetková" */
  --steel:      #C3C3CC;
  --steel-2:    #9494A3;
  --line:       #33333F;
  --ok:         #4ADE80;

  /* --- typografie: jedna rodina ve dvou rolích, jako arcadia/arcadiaDisplay --- */
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --text-f:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* --- rytmus --- */
  --pad: clamp(20px, 5vw, 48px);
  --maxw: 1128px;          /* mercury drží obsah v ~1128, ne 1280 */
  --r: 4px;                /* nejčastější zaoblení na mercury.com */
  --r-lg: 12px;
  --pill: 999px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--text-f); font-size:17px; line-height:1.55;
  font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; }
::selection{ background:var(--amber); color:#fff; }

/* --- typografická škála --------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:500;
  letter-spacing:-.012em; line-height:1.1; color:var(--text); }
.h-xl{ font-size:clamp(40px, 5.4vw, 74px); line-height:1.04; letter-spacing:-.022em; }
.h-lg{ font-size:clamp(30px, 3.4vw, 46px); line-height:1.12; letter-spacing:-.014em; }
.h-md{ font-size:clamp(23px, 2.2vw, 32px); letter-spacing:-.01em; line-height:1.18; }
.h-sm{ font-size:clamp(18px, 1.4vw, 21px); letter-spacing:-.006em; line-height:1.28; }
.lede{ font-size:clamp(17px, 1.2vw, 19px); line-height:1.45; color:var(--text-2);
  font-weight:400; max-width:62ch; }
.dark .lede,.dark p{ color:var(--text-2); }
.eyebrow{
  font-family:var(--text-f); font-size:12.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); margin:0 0 18px;
}
.dark .eyebrow{ color:var(--amber); }
p{ margin:0 0 1em; }
/* Nadpisy mají margin:0, takže odstavec hned za nimi potřebuje vlastní odstup —
   po zjemnění řádkování se text jinak lepí na nadpis. */
h1+p, h2+p, h3+p, h4+p, h1+ul, h2+ul, h3+ul{ margin-top:14px; }
.hd h2+.lede, .hd h1+.lede{ margin-top:16px; }
.muted{ color:var(--text-3); }

/* --- layout --------------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px, 9vw, 140px); }
.section--tight{ padding-block:clamp(52px, 6vw, 88px); }
.dark{ background:var(--ink); color:var(--text); }
.dark h1,.dark h2,.dark h3{ color:var(--text); }
.grid{ display:grid; gap:clamp(24px,3vw,48px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.dark .rule{ background:var(--ink-3); }

/* --- tlačítka ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:var(--pill); border:1px solid transparent;
  font-family:var(--text-f); font-weight:500; font-size:16px; letter-spacing:-.002em;
  text-decoration:none; cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .12s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--dark{ background:var(--text); color:var(--ink); }
.btn--dark:hover{ background:#fff; }
.btn--ghost{ background:rgba(175,178,206,.16); color:var(--text); border-color:transparent; }
.btn--ghost:hover{ background:rgba(175,178,206,.26); color:#fff; }
.dark .btn--ghost{ color:var(--text); border-color:transparent; }
.dark .btn--ghost:hover{ background:rgba(175,178,206,.26); }
.btn--lg{ padding:16px 30px; font-size:17px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* textový odkaz se šipkou */
.arrow{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:500; font-size:16px; color:var(--amber); border-bottom:1px solid transparent;
  padding-bottom:2px; transition:border-color .18s, gap .18s;
}
.arrow:hover{ border-color:currentColor; gap:12px; }
.arrow::after{ content:"→"; font-family:var(--text-f); }

/* ==========================================================================
   Hlavička
   ========================================================================== */
.hdr{
  position:sticky; top:0; z-index:60; background:rgba(18,18,26,.88);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid rgba(255,255,255,.08);
}
.hdr__in{ display:flex; align-items:center; gap:28px; height:76px; }
.hdr__nav{ display:flex; gap:26px; margin-left:auto; }
.hdr__nav a{
  text-decoration:none; color:var(--text-2); font-size:15px; font-weight:500;
  padding:6px 0; border-bottom:1.5px solid transparent; transition:color .16s, border-color .16s;
}
.hdr__nav a:hover{ color:#fff; }
.hdr__nav a[aria-current="page"]{ color:#fff; border-color:var(--amber); }
.hdr__cta{ display:flex; align-items:center; gap:14px; }
.hdr__tel{
  color:#fff; text-decoration:none; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px;
}
.hdr__tel:hover{ color:var(--amber); }
.burger{
  display:none; width:44px; height:44px; margin-left:auto; background:none;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:19px; height:1.5px; background:#fff; transition:transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.logo__type b{ color:var(--amber); font-weight:700; }
.logo__sub{
  font-family:var(--text-f); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--steel-2); font-weight:600; margin-top:2px;
}

/* mobilní menu */
.mnav{
  position:fixed; inset:76px 0 0; background:var(--ink); z-index:55;
  padding:28px var(--pad) 40px; display:none; flex-direction:column; gap:4px; overflow-y:auto;
}
.mnav.open{ display:flex; }
.mnav a{
  text-decoration:none; color:#fff; font-family:var(--display); font-size:28px;
  letter-spacing:-.03em; padding:14px 0; border-bottom:1px solid var(--ink-3);
}
.mnav .btn{ margin-top:20px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ background:var(--ink); color:var(--text); position:relative; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(18,18,26,.92) 0%, rgba(18,18,26,.74) 38%,
              rgba(18,18,26,.30) 68%, rgba(18,18,26,.12) 100%);
}
.hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,4vw,72px);
  align-items:center; padding-block:clamp(64px,8vw,116px); }
.hero h1{ color:#fff; margin-bottom:24px; }
.hero__lede{ font-size:clamp(17px,1.35vw,20px); color:#C9C5BE; max-width:52ch; margin-bottom:34px; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:28px 40px; margin-top:40px; padding-top:28px; border-top:1px solid var(--ink-3); }
.hero__fact b{ display:block; font-family:var(--display); font-size:clamp(30px,3.4vw,44px); font-stretch:112%;
  letter-spacing:-.03em; line-height:1; color:#fff; }
.hero__fact span{ display:block; font-size:13.5px; color:var(--steel-2); margin-top:8px; letter-spacing:.01em; }

/* ==========================================================================
   Kalkulačka
   ========================================================================== */
.calc{ background:var(--bg-2); color:var(--text); border-radius:var(--r-lg); padding:clamp(24px,2.4vw,34px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55); }
.calc__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.calc__head h2{ font-size:21px; letter-spacing:-.02em; }
.calc__tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--bg-3);
  padding:5px; border-radius:var(--r); margin-bottom:26px; }
.calc__tab{
  border:0; background:transparent; padding:11px 6px; border-radius:3px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--steel); transition:background .16s, color .16s; letter-spacing:-.005em;
}
.calc__tab[aria-selected="true"]{ background:#3A3A49; color:#fff; }
.field{ margin-bottom:22px; }
.field__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.field__lbl{ font-size:13.5px; font-weight:600; color:var(--steel); }
.field__val{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:#3A3A49;
  border-radius:2px; outline:none; margin:0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--amber); border:3px solid var(--bg-2); box-shadow:0 2px 8px rgba(0,0,0,.28); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--amber);
  border:3px solid var(--bg-2); box-shadow:0 2px 8px rgba(0,0,0,.28); cursor:pointer; }
.field__scale{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--steel); margin-top:7px; }
.calc__out{ border-top:1px solid var(--line); margin-top:26px; padding-top:22px; }
.calc__pay{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.calc__pay small{ display:block; font-size:13px; color:var(--steel); margin-bottom:4px; }
.calc__pay b{ font-family:var(--display); font-size:clamp(34px,3.6vw,46px); font-stretch:110%; letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums; }
.calc__meta{ display:flex; gap:22px; margin-top:16px; font-size:13px; color:var(--steel); flex-wrap:wrap; }
.calc__meta b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.calc__note{ font-size:12.5px; color:var(--steel); margin:16px 0 20px; line-height:1.5; }
.calc .btn{ width:100%; }

/* ==========================================================================
   Pás s čísly
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.stat{ padding:clamp(30px,3.4vw,52px) clamp(18px,2vw,36px) clamp(30px,3.4vw,52px) 0; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(46px,6vw,86px); font-stretch:112%;
  letter-spacing:-.045em; line-height:.92; }
.stat span{ display:block; font-size:15px; color:var(--steel); margin-top:14px; max-width:30ch; }
.stat u{ text-decoration:none; color:var(--amber); }

/* ==========================================================================
   Produktové karty
   ========================================================================== */
.prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.prod{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .2s, transform .2s, box-shadow .2s;
  text-decoration:none; color:inherit;
}
.prod:hover{ border-color:var(--text-3); transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(0,0,0,.45); }
.prod__img{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); }
.prod__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.prod:hover .prod__img img{ transform:scale(1.045); }
.prod__body{ padding:clamp(22px,2vw,30px); display:flex; flex-direction:column; flex:1; }

.prod h3{ font-size:23px; letter-spacing:-.022em; margin-bottom:12px; }
.prod p{ font-size:15.5px; color:var(--steel); flex:1; margin-bottom:20px; }
.prod .arrow{ align-self:flex-start; }

/* ==========================================================================
   Kroky procesu
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,40px); counter-reset:s; }
.step{ padding-top:26px; border-top:2px solid var(--ink-3); }
/* kroky se rozlišují nadpisem a linkou nahoře, ne pořadovým číslem */
.step{ padding-top:22px; border-top:2px solid var(--line); }
.step h3{ margin-bottom:10px; }
.step h3{ font-size:20px; margin-bottom:9px; }
.step p{ font-size:15px; color:var(--text-2); margin:0; }

/* ==========================================================================
   Split (foto + text)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/4; background:var(--bg-3); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.checks{ list-style:none; padding:0; margin:26px 0 32px; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:30px; font-size:16px; line-height:1.5; }
.checks li::before{
  content:""; position:absolute; left:0; top:.52em; width:13px; height:7px;
  border-left:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.checks strong{ font-weight:600; }

/* ==========================================================================
   Případy z praxe
   ========================================================================== */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.case{ background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--r-lg); padding:clamp(24px,2.2vw,32px);
  display:flex; flex-direction:column; }
.case__tag{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#F08A5B; margin-bottom:20px; }
.case h3{ font-size:20px; margin-bottom:14px; color:#fff; }
.case p{ font-size:15px; color:var(--steel-2); flex:1; margin-bottom:22px; }
.case__facts{ display:grid; gap:9px; border-top:1px solid var(--ink-3); padding-top:18px; }
.case__facts div{ display:flex; justify-content:space-between; gap:12px; font-size:14px; }
.case__facts dt{ color:var(--steel-2); margin:0; }
.case__facts dd{ margin:0; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:26px 46px 26px 0; position:relative; display:block;
  font-family:var(--display); font-size:clamp(18px,1.7vw,22px); font-weight:500; letter-spacing:-.008em; color:var(--text);
}
.faq__q::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px;
  border-right:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s;
}
.faq__item.open .faq__q::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__a{ display:none; padding:0 clamp(40px,8vw,140px) 28px 0; }
.faq__item.open .faq__a{ display:block; }
.faq__a p{ margin:0; color:var(--steel); font-size:16.5px; }

/* ==========================================================================
   CTA pás
   ========================================================================== */
.cta{ position:relative; overflow:hidden; background:var(--ink); }
.cta__media{ position:absolute; inset:0; }
.cta__media img{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.cta__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,18,26,.94) 4%, rgba(18,18,26,.78) 46%,
              rgba(18,18,26,.34) 100%); }
.cta__in{ position:relative; z-index:2; max-width:860px; }
.cta h2{ color:#fff; margin-bottom:20px; }
.cta p{ color:#C9C5BE; font-size:clamp(17px,1.3vw,20px); max-width:56ch; margin-bottom:34px; }

/* ==========================================================================
   Patička
   ========================================================================== */
.ftr{ background:var(--ink); color:var(--text-2); padding-block:clamp(56px,6vw,84px) 34px; border-top:1px solid var(--ink-3); }
.ftr__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,3vw,52px); padding-bottom:44px; }
.ftr h4{ font-family:var(--text-f); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:18px; }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.ftr a{ color:var(--text-2); text-decoration:none; font-size:15px; transition:color .16s; }
.ftr a:hover{ color:#fff; }
.ftr__about p{ font-size:15px; color:var(--text-2); max-width:40ch; margin:18px 0 0; }
.ftr__bot{ border-top:1px solid var(--ink-3); padding-top:26px; display:flex; flex-wrap:wrap;
  gap:14px 28px; align-items:center; font-size:13.5px; }
.ftr__bot .sep{ margin-left:auto; }
.ftr__legal{ font-size:13px; color:var(--text-3); margin-top:22px; max-width:92ch; line-height:1.55; }

/* ==========================================================================
   Formulář
   ========================================================================== */
.form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,44px); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.form label{ display:block; font-size:13.5px; font-weight:600; color:var(--steel); margin-bottom:8px; }
.form .req{ color:var(--amber); }
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],
.form select,.form textarea{
  width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-3); font-family:var(--text-f); font-size:16px; color:var(--text);
  transition:border-color .16s, background .16s;
}
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--amber); background:var(--bg-2); }
.form textarea{ min-height:130px; resize:vertical; }
.form .full{ grid-column:1 / -1; }
.form__consent{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--steel); line-height:1.5; }
.form__consent input{ margin-top:3px; width:18px; height:18px; accent-color:var(--amber); flex:none; }
.form__consent a{ color:var(--amber); }
.form__err{ color:#F08878; font-size:13px; margin-top:6px; display:none; }
.form .invalid input,.form .invalid select,.form .invalid textarea{ border-color:#F08878; }
.form .invalid .form__err{ display:block; }
.form__msg{ padding:16px 18px; border-radius:var(--r); font-size:15px; margin-bottom:22px; display:none; }
.form__msg--ok{ background:#15251C; color:var(--ok); border:1px solid #24402F; }
.form__msg--bad{ background:#2A1715; color:#F08878; border:1px solid #43241F; }
.form__msg.show{ display:block; }

/* volba typu financování */
.choices{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice span{
  display:block; padding:15px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-3); font-size:15px; font-weight:500; cursor:pointer; transition:all .16s;
}
.choice input:checked + span{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber); }
.choice input:focus-visible + span{ outline:2px solid var(--amber); outline-offset:2px; }

/* ==========================================================================
   Stránkové drobnosti
   ========================================================================== */
.phero{ background:var(--ink); color:var(--text); padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,88px); }
.phero h1{ color:#fff; max-width:20ch; }
.phero .lede{ margin-top:22px; color:#C9C5BE; }
.crumb{ font-size:13px; color:var(--steel-2); margin-bottom:26px; }
.crumb a{ text-decoration:none; color:var(--steel-2); }
.crumb a:hover{ color:#fff; }
.crumb span{ color:#5E6570; margin-inline:8px; }

.cols-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,52px); }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.4vw,34px); }
.card h3{ font-size:21px; margin-bottom:12px; }
.card p:last-child{ margin-bottom:0; }


.hd{ max-width:56ch; margin-bottom:clamp(36px,4vw,60px); }
.hd--wide{ max-width:70ch; }
.hd .lede{ margin-top:18px; }

/* články */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px); }
.post{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.post__meta{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); font-weight:600; margin-bottom:12px; }
.post h3{ font-size:21px; letter-spacing:-.022em; margin-bottom:10px; transition:color .16s; }
.post:hover h3{ color:var(--amber); }
.post p{ font-size:15px; color:var(--steel); margin:0; }
.post__line{ height:1px; background:var(--line); margin-bottom:22px; }

/* článek — obsah */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(24px,2.4vw,32px); margin:48px 0 16px; }
.prose h3{ font-size:21px; margin:34px 0 12px; }
.prose p{ font-size:17.5px; line-height:1.68; }
.prose ul{ padding-left:22px; margin:0 0 1.2em; }
.prose li{ margin-bottom:9px; font-size:17px; line-height:1.6; }
.prose blockquote{ margin:32px 0; padding:22px 26px; background:var(--bg-2); border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0; font-size:18px; }
.prose blockquote p:last-child{ margin:0; }

/* kontaktní bloky */
.contact-list{ display:grid; gap:2px; }
.contact-row{ display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.contact-row dt{ font-size:13.5px; font-weight:600; color:var(--steel); width:140px; flex:none; }
.contact-row dd{ margin:0; font-size:17px; }
.contact-row a{ text-decoration:none; color:var(--text); border-bottom:1px solid var(--line); }
.contact-row a:hover{ color:var(--amber); border-color:var(--amber); }

/* ==========================================================================
   Responsivita
   ========================================================================== */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:44px; }
  .prods,.cases,.cols-3,.posts{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .ftr__top{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:860px){
  .hdr__nav,.hdr__cta{ display:none; }
  .burger{ display:flex; }
  .split,.split--rev .split__media,.cols-2{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--line); padding-right:0; }
  .stat:last-child{ border-bottom:0; }
  .form__grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  body{ font-size:16.5px; }
  .prods,.cases,.cols-3,.posts,.steps,.choices{ grid-template-columns:1fr; }
  .calc__tabs{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .btn-row .btn{ width:100%; }
  .contact-row{ flex-direction:column; gap:6px; }
  .contact-row dt{ width:auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

/* skip link — přístupnost */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amber-hi); color:#fff; padding:14px 22px; border-radius:0 0 var(--r) 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.dark :focus-visible,.hdr :focus-visible{ outline-color:#F08A5B; }

/* dvousloupcové rozvržení stránky s postranním panelem */
.side{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,4vw,64px); align-items:start; }
.side--l{ grid-template-columns:.85fr 1.15fr; }
@media (max-width:980px){ .side,.side--l{ grid-template-columns:1fr; } }

/* Ghost tlačítka na tmavém podkladu (hero, CTA pás, phero) musí být čitelná.
   Bez tohoto by dědila tmavý text z výchozího světlého motivu = neviditelná. */
.hero .btn--ghost,
.cta .btn--ghost,
.phero .btn--ghost{ color:var(--text); border-color:rgba(255,255,255,.28); background:transparent; }
.hero .btn--ghost:hover,
.cta .btn--ghost:hover,
.phero .btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:var(--text); color:#fff; }



/* ==========================================================================
   Z rešerše světových referencí (_inspirace/POZNATKY.md)
   ========================================================================== */

/* --- CTA s mikrocopy uvnitř tlačítka (vzor: Oodle) -----------------------
   Hlavní text a odbourávač obavy na jednom tlačítku. Druhý řádek je
   záměrně tišší, ale stále nad 4.5:1 vůči oranžové i tmavé ploše. */
.btn--stack{ flex-direction:column; gap:3px; padding-block:13px; line-height:1.25;
  white-space:normal; text-align:center; }
.btn--stack b{ font-weight:600; font-size:16.5px; letter-spacing:-.012em; }
.btn--stack small{ font-size:12.5px; font-weight:500; letter-spacing:.005em; }
.btn--primary.btn--stack small{ color:#fff; opacity:.94; }
.btn--dark.btn--stack small{ color:#3A3A49; }
.btn--lg.btn--stack{ padding-block:15px; }

/* --- mikrocopy pod tlačítkem (vzor: iwoca) ------------------------------- */
.microtrust{
  display:flex; align-items:flex-start; gap:9px; margin:14px 0 0;
  font-size:13.5px; line-height:1.45; font-weight:500; color:var(--steel); max-width:46ch;
}
.microtrust::before{
  content:""; flex:none; width:13px; height:7px; margin-top:.42em;
  border-left:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.hero .microtrust,.cta .microtrust,.phero .microtrust,.dark .microtrust{ color:#C9C5BE; }
.hero .microtrust::before,.cta .microtrust::before,.phero .microtrust::before,.dark .microtrust::before{
  border-color:#F08A5B;
}
.phero .microtrust{ margin-top:20px; max-width:56ch; }

/* --- pás faktů pod herem (vzor: iwoca) -----------------------------------
   Bílá karta vytažená přes hranici tmavého hera a světlého těla stránky.
   Obsahuje jen ověřitelné údaje — žádné počty klientů, dokud nejsou reálné. */
.tbar{ position:relative; z-index:5; margin-top:clamp(-64px,-4vw,-40px); }
.tbar__in{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.5);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.tbar__i{ padding:clamp(20px,2vw,28px) clamp(16px,1.6vw,26px); border-right:1px solid var(--line); }
.tbar__i:last-child{ border-right:0; }
.tbar__i b{
  display:block; font-family:var(--display); font-size:clamp(19px,1.7vw,23px); font-weight:600;
  letter-spacing:-.012em; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--text);
}
.tbar__i span{ display:block; font-size:13px; color:var(--steel); margin-top:7px; line-height:1.4; }
@media (max-width:900px){
  .tbar{ margin-top:0; }
  .tbar__in{ grid-template-columns:repeat(2,1fr); }
  .tbar__i:nth-child(2n){ border-right:0; }
  .tbar__i:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:520px){
  .tbar__in{ grid-template-columns:1fr; }
  .tbar__i{ border-right:0; border-bottom:1px solid var(--line); }
  .tbar__i:last-child{ border-bottom:0; }
}

/* --- reprezentativní příklad (vzor: Oodle „Representative APR") ----------
   Jeden modelový výpočet se všemi čísly na očích. Transparentnost, kterou
   konkurence schovává do poznámky pod čarou. */
.repex{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.repex__hd{
  padding:18px clamp(20px,2vw,30px); border-bottom:1px solid var(--line); background:var(--ink);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.repex__hd h3{ font-size:17px; letter-spacing:-.018em; }
.repex__hd span{ font-size:12.5px; color:var(--text-2); font-weight:500; }
.repex__grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.repex__c{ padding:clamp(18px,1.8vw,24px) clamp(14px,1.4vw,22px); border-right:1px solid var(--line); }
.repex__c:last-child{ border-right:0; }
.repex__c dt{ font-size:12.5px; color:var(--text-2); margin:0 0 8px; font-weight:500; }
.repex__c dd{
  margin:0; font-family:var(--display); font-size:clamp(18px,1.6vw,22px); font-weight:600;
  letter-spacing:-.028em; font-variant-numeric:tabular-nums; line-height:1.1;
}
.repex__c--key{ background:#241A15; }
.repex__c--key dd{ color:var(--amber); }
.repex__note{ padding:14px clamp(20px,2vw,30px) 18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--text-2); line-height:1.5; margin:0; }
@media (max-width:860px){ .repex__grid{ grid-template-columns:repeat(2,1fr); }
  .repex__c{ border-bottom:1px solid var(--line); }
  .repex__c:nth-child(2n){ border-right:0; }
  .repex__c:last-child{ grid-column:1 / -1; border-bottom:0; } }
@media (max-width:520px){ .repex__grid{ grid-template-columns:1fr; }
  .repex__c{ border-right:0; } .repex__c:last-child{ grid-column:auto; } }

/* --- kdo stojí za financováním ------------------------------------------
   Náhrada za pás log partnerů, dokud nemáme písemný souhlas s jejich užitím.
   Slot .plogos je připravený — stačí doplnit <img> a zapnout. */
.who{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,72px); align-items:start; }
.who h2{ margin-bottom:20px; }
.who .btn{ margin-top:8px; }
.who__list{ list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
.who__list li{ padding:22px 0; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:auto 1fr; gap:20px; align-items:baseline; }
.who__list b{ font-family:var(--display); font-size:14px; font-weight:700; letter-spacing:.1em;
  color:var(--amber); font-variant-numeric:tabular-nums; }
.who__list span{ font-size:16px; line-height:1.55; }
.who__list strong{ font-weight:600; }
@media (max-width:860px){ .who{ grid-template-columns:1fr; } }

.plogos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,3.5vw,56px);
  padding-top:34px; margin-top:34px; border-top:1px solid var(--line); }
.plogos img{ height:26px; width:auto; opacity:.62; filter:grayscale(1); transition:opacity .18s, filter .18s; }
.plogos img:hover{ opacity:1; filter:none; }
.plogos__lbl{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); width:100%; margin:0; }

/* --- akcenty na tmavých pásech ------------------------------------------
   .hero/.cta/.phero jsou tmavé, ale nenesou třídu .dark — dědily by tak
   oranžovou vyladěnou pro světlý podklad (na tmavém jen 3,6:1). */
.hero .eyebrow,.cta .eyebrow,.phero .eyebrow{ color:var(--amber); }
.crumb span{ color:#8B929E; }
.dark .faq__a p,.dark .faq__a{ color:var(--steel-2); }
.dark .microtrust::before,.hero .microtrust::before,
.cta .microtrust::before,.phero .microtrust::before{ border-color:var(--amber); }

/* Changelog
   - 2026-09-01: vznik — design systém webu
   - 2026-09-01: komponenty z rešerše — .btn--stack, .microtrust, .tbar, .repex, .who, .plogos
   - 2026-09-01: --amber #DD5B25 → #BE4A18, --steel #6C737F → #5F6672, přidán --amber-hi
     pro akcenty na tmavých pásech; celý web splňuje WCAG AA pro text
*/

/* ==========================================================================
   Světlé produktové plochy na tmavém webu
   Mercury drží 7,2 % plochy velmi světlé — jsou to ukázky jejich rozhraní.
   Náš ekvivalent je kalkulačka a reprezentativní příklad: nástroj, který
   na tmavém podkladu vystupuje jako kus produktu.
   ========================================================================== */
.calc,
.repex{
  --sv-bg:    #F7F7F5;
  --sv-bg-2:  #ECECE8;
  --sv-text:  #16161C;
  --sv-mute:  #5A5A66;
  --sv-line:  #DCDCD6;
  background:var(--sv-bg); color:var(--sv-text);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
}
.calc__head h2,
.calc__pay b,
.field__val,
.calc__meta b,
.repex__c dd,
.repex__hd h3{ color:var(--sv-text); }
.calc__head .muted,
.calc__pay small,
.field__lbl,
.calc__meta,
.calc__note,
.repex__c dt,
.repex__hd span,
.repex__note{ color:var(--sv-mute); }
.field__scale{ color:#6A6A77; }
.calc__out,
.repex__hd,
.repex__c,
.repex__note{ border-color:var(--sv-line); }
.repex__hd{ background:var(--sv-bg-2); }
.repex__c{ border-right-color:var(--sv-line); }
.calc__tabs{ background:var(--sv-bg-2); }
.calc__tab{ color:var(--sv-mute); }
.calc__tab[aria-selected="true"]{ background:var(--ink); color:#fff; }
.calc input[type=range]{ background:#D3D3CD; }
.calc input[type=range]::-webkit-slider-thumb{ border-color:var(--sv-bg); }
.calc input[type=range]::-moz-range-thumb{ border-color:var(--sv-bg); }
.calc .btn--dark{ background:var(--ink); color:#fff; }
.calc .btn--dark:hover{ background:#000; }
.calc .btn--dark.btn--stack small{ color:#C3C3CC; }
.repex__c--key{ background:#EDEFFC; }
.repex__c--key dd{ color:#3A48B8; }
.repex__note strong{ color:var(--sv-text); }

/* ==========================================================================
   Světlá pásma
   Mercury nedrží jeden tón — střídá tmavé sekce se světlými (měřeno po pásech:
   světlý hero, kolem 27 % výšky velký světlý blok, pak zase tmavo).
   Tahle třída dělá z celé sekce světlé pásmo.
   ========================================================================== */
.svetla{
  --sv-bg:   #F5F5F2;
  --sv-text: #16161C;
  --sv-mute: #55555F;
  --sv-line: #DEDED8;
  background:var(--sv-bg); color:var(--sv-text);
}
.svetla h1,.svetla h2,.svetla h3,.svetla h4{ color:var(--sv-text); }
.svetla p,.svetla .lede,.svetla li,.svetla dd,.svetla span{ color:var(--sv-mute); }
.svetla .lede{ color:var(--sv-mute); }
.svetla strong{ color:var(--sv-text); }
.svetla .eyebrow{ color:var(--amber-dark); }
.svetla .rule{ background:var(--sv-line); }
.svetla .step{ border-top-color:#C9C9C2; }

.svetla .step h3{ color:var(--sv-text); }
.svetla .step p{ color:var(--sv-mute); }
.svetla .case{ background:#FFFFFF; border-color:var(--sv-line); }
.svetla .case h3{ color:var(--sv-text); }
.svetla .case p{ color:var(--sv-mute); }
.svetla .case__tag{ color:var(--amber-dark); }
.svetla .case__facts{ border-top-color:var(--sv-line); }
.svetla .case__facts dt{ color:var(--sv-mute); }
.svetla .case__facts dd{ color:var(--sv-text); }
.svetla .checks li{ color:var(--sv-mute); }
.svetla .checks strong{ color:var(--sv-text); }
.svetla .btn--ghost{ background:rgba(22,22,28,.07); color:var(--sv-text); }
.svetla .btn--ghost:hover{ background:rgba(22,22,28,.13); color:#000; }
.svetla .arrow{ color:var(--amber-dark); }
.svetla .split__media{ background:#E4E4DE; }

/* --- doplňky světlého pásma pro sekce, které v něm nově leží --- */
.svetla .who__list{ border-top-color:var(--sv-line); }
.svetla .who__list li{ border-bottom-color:var(--sv-line); }
.svetla .who__list b{ color:var(--amber-dark); }
.svetla .who__list span{ color:var(--sv-mute); }
.svetla .who__list strong{ color:var(--sv-text); }
.svetla .post__line{ background:var(--sv-line); }
.svetla .post__meta{ color:var(--amber-dark); }
.svetla .post h3{ color:var(--sv-text); }
.svetla .post p{ color:var(--sv-mute); }
.svetla .post:hover h3{ color:var(--amber-dark); }
.svetla .checks li::before{ border-color:var(--amber-dark); }
.svetla .stat b{ color:var(--sv-text); }
.svetla .stat span{ color:var(--sv-mute); }
.svetla .stats{ border-top-color:var(--sv-line); }
.svetla .stat{ border-right-color:var(--sv-line); }


/* ==========================================================================
   Značka LEASNITO.cz — znak (vůz) a nápis jsou dva soubory, aby se v úzké
   liště daly poskládat vedle sebe; celá kompozice loga je na výšku a v 76px
   liště by byl nápis nečitelný.
   ========================================================================== */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.logo__znak{ height:26px; width:auto; display:block; }
.logo__napis{ height:19px; width:auto; display:block; }
.ftr .logo{ gap:14px; }
.ftr .logo__znak{ height:32px; }
.ftr .logo__napis{ height:24px; }
@media (max-width:620px){
  .logo{ gap:9px; }
  .logo__znak{ height:21px; }
  .logo__napis{ height:16px; }
}

.svetla{ --amber-soft:#E8F3F9; }
.repex__c--key{ background:#E8F3F9; }
.repex__c--key dd{ color:var(--amber-dark); }


/* poslední dlaždice ve výpisu článků — vyplní mřížku a nabídne další krok */
.post--vyzva{ }
.post--vyzva .post__line{ background:var(--amber); }
.post--vyzva .post__meta{ color:var(--amber); }
.svetla .post--vyzva .post__line{ background:var(--amber-dark); }
.svetla .post--vyzva .post__meta{ color:var(--amber-dark); }

/* linka nad každým číslem se natáhne, jakmile se blok objeví */
/* karta příkladu doplňuje pásmo, proto na světlém podkladu jen jemný rám */
@media (max-width:860px){
      }
@media (prefers-reduced-motion:reduce){
    }


/* ==========================================================================
   Akcent: limetková #E4FDC1
   Na tmavém drží 16:1 jako text. Na světlém je nečitelná (1:1), proto tam
   nikdy nefiguruje jako text, ale jako PLOCHA s černým textem (17,5:1).
   ========================================================================== */
:root{
  --limet:      #E4FDC1;   /* akcent na tmavém a plochy */
  --limet-tm:   #C9EE9A;   /* hover plochy */
  --limet-text: #4E6B12;   /* jediná varianta čitelná jako text na světlém (5,6:1) */
  --amber:      #E4FDC1;
  --amber-dark: #4E6B12;
  --amber-hi:   #E4FDC1;
  --amber-soft: #22301A;
}

/* tlačítka: limetková plocha, černý text */
.btn--primary{ background:var(--limet); color:#0D0F12; }
.btn--primary:hover{ background:var(--limet-tm); color:#0D0F12; }
.btn--primary.btn--stack small{ color:#0D0F12; opacity:.72; }
.skip{ background:var(--limet); color:#0D0F12; }
.hdr__tel:hover{ color:var(--limet); }
.hdr__nav a[aria-current="page"]{ border-color:var(--limet); }
::selection{ background:var(--limet); color:#0D0F12; }
.calc .btn--dark,.pocitadlo__box .btn--dark,.scrub__panel .btn--dark{
  background:var(--limet); color:#0D0F12;
}
.calc .btn--dark:hover{ background:var(--limet-tm); color:#0D0F12; }
.calc .btn--dark.btn--stack small,
.scrub__panel .calc .btn--dark.btn--stack small{ color:#0D0F12; opacity:.72; }
.calc__tab[aria-selected="true"]{ background:var(--limet); color:#0D0F12; }

/* ==========================================================================
   Světlé pásmo je nově limetkové — to je ta barva, která web oživuje.
   Text v něm je černý, karty bílé.
   ========================================================================== */
/* Světlá pásma jsou bílá. Limetková je akcent na detailech — nikdy plocha sekce. */
.svetla{
  --sv-bg:   #FFFFFF;
  --sv-text: #10160A;
  --sv-mute: #4A5340;
  --sv-line: #E6E6E0;
}
.svetla .eyebrow{ color:var(--limet-text); }
.svetla .arrow{ color:var(--limet-text); }
.svetla .step b{ color:var(--limet-text); }
.svetla .case{ background:#FBFBF9; border-color:#E6E6E0; }
.svetla .case__tag{ color:var(--limet-text); }
.svetla .post__meta{ color:var(--limet-text); }
.svetla .post:hover h3{ color:var(--limet-text); }
.svetla .who__list b{ color:var(--limet-text); }
.svetla .checks li::before{ border-color:var(--limet-text); }
.svetla .btn--primary{ background:#10160A; color:var(--limet); }
.svetla .btn--primary:hover{ background:#000; color:var(--limet); }
.svetla .btn--ghost{ background:rgba(16,22,10,.07); color:var(--sv-text); }
.svetla .btn--ghost:hover{ background:rgba(16,22,10,.13); }
.svetla .split__media{ background:#F2F2EE; }

/* pás s čísly v limetkové ploše */
.repex__c--key{ background:#F2FCE6; }
.repex__c--key dd{ color:var(--limet-text); }

/* .mnav a přebíjelo barvu textu tlačítka a na limetkové ploše zůstal bílý text */
.mnav .btn--primary{ color:#0D0F12; }
.mnav .btn--ghost{ color:var(--text); }


/* ==========================================================================
   Pás s čísly — tři klikatelné karty na bílé ploše.
   Dřív to byly sloupce oddělené linkami; ty rozdělovaly obsah, ale nic
   nesdělovaly a nedalo se na ně sáhnout.
   ========================================================================== */
.cisla{ background:#FFFFFF; }
.cisla .stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px); border:0;
}
.cisla .stat{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(34px,3.4vw,46px) clamp(20px,2.2vw,32px) clamp(26px,2.6vw,34px);
  background:#FBFBF9; border:1px solid #E6E6E0; border-radius:14px;
  text-decoration:none; color:#10160A;
  transition:background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.cisla .stat:hover{
  background:var(--limet); border-color:#CFEFA6; transform:translateY(-3px);
  box-shadow:0 20px 40px -26px rgba(16,22,10,.4);
}
.cisla .stat b{
  display:flex; align-items:baseline; justify-content:center; gap:.14em;
  font-family:var(--display); font-size:clamp(60px,7vw,92px); font-weight:500;
  letter-spacing:-.04em; line-height:1; color:#10160A;
  font-variant-numeric:tabular-nums;
}
.cisla .stat b span{ font-size:.42em; letter-spacing:-.02em; color:var(--limet-text); }
.cisla .stat:hover b span{ color:#2F4409; }
.cisla .stat p{
  font-size:16px; line-height:1.55; color:#4A5340; margin:20px 0 0; max-width:30ch;
}
.cisla .stat:hover p{ color:#2B3520; }
.cisla .stat__odkaz{
  margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500; color:var(--limet-text);
  transition:gap .22s, color .22s;
}
.cisla .stat__odkaz::after{ content:"→"; }
.cisla .stat:hover .stat__odkaz{ gap:12px; color:#2F4409; }
.cisla .stat:focus-visible{ outline:2px solid var(--limet-text); outline-offset:3px; }

.cisla .repex{
  margin-top:clamp(20px,2.2vw,30px);
  border-color:#E6E6E0; box-shadow:0 18px 44px -30px rgba(16,22,10,.3);
}
.cisla .repex__hd{ background:#FBFBF9; }
@media (max-width:860px){
  .cisla .stats{ grid-template-columns:1fr; }
  .cisla .stat{ padding-block:32px 26px; }
}
@media (prefers-reduced-motion:reduce){
  .cisla .stat{ transition:none; }
  .cisla .stat:hover{ transform:none; }
}


/* --- limetkové detaily ve světlých pásmech (plocha zůstává bílá) --- */
.svetla .step{ border-top:2px solid var(--limet); }
.svetla .case__tag{
  display:inline-block; background:var(--limet); color:#2F4409;
  padding:5px 12px; border-radius:999px; letter-spacing:.1em;
}
.svetla .post__line{ background:var(--limet); height:2px; }
.svetla .post:hover .post__line{ background:var(--limet-text); }
.svetla .who__list li{ border-bottom-color:var(--sv-line); }
.svetla .checks li::before{ border-color:var(--limet-text); }
.svetla .btn--primary{ background:var(--limet); color:#10160A; }
.svetla .btn--primary:hover{ background:var(--limet-tm); color:#10160A; }
.svetla .btn--primary.btn--stack small{ color:#10160A; opacity:.72; }


/* ==========================================================================
   Dotykové ovládání
   Posuvník má vizuálně 3px dráhu, ale prst potřebuje aspoň 44px plochu.
   Výšku proto zvětšuje průhledná výplň, dráha se kreslí přes gradient.
   ========================================================================== */
input[type=range]{
  height:44px; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none; width:100%; margin:0;
  touch-action:pan-y;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:2px; background:#3A3A49;
}
input[type=range]::-moz-range-track{
  height:3px; border-radius:2px; background:#3A3A49;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-11.5px;
  border-radius:50%; background:var(--limet); border:3px solid var(--bg-2);
  box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--limet);
  border:3px solid var(--bg-2); box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:pointer;
}
.calc input[type=range]::-webkit-slider-runnable-track{ background:#D3D3CD; }
.calc input[type=range]::-moz-range-track{ background:#D3D3CD; }
.calc input[type=range]::-webkit-slider-thumb{ border-color:var(--sv-bg); }
.calc input[type=range]::-moz-range-thumb{ border-color:var(--sv-bg); }
.scrub__panel input[type=range]::-webkit-slider-thumb,
.pocitadlo__box input[type=range]::-webkit-slider-thumb{ border-color:#0E1014; }
.scrub__panel input[type=range]::-moz-range-thumb,
.pocitadlo__box input[type=range]::-moz-range-thumb{ border-color:#0E1014; }

/* popisky u posuvníků byly pod hranicí čitelnosti na telefonu */
.field__scale{ font-size:12.5px; }

/* Na dotyku míří prst na plochu, ne na řádek textu. Odkazy proto dostávají
   svislou výplň do zhruba 44 px, aniž by se měnila jejich sazba. */
@media (max-width:900px){
  .hdr__nav a, #mnav a{ display:block; padding-block:12px; }
  .ftr a:not(.logo){ display:inline-block; padding-block:11px; }
  .ftr ul{ gap:0; }
  .ftr__bot{ gap:4px 18px; }
  a.arrow{ padding-block:10px; }   /* pozor: ne inline-block, zrušil by flexový gap před šipkou */
  .calc__tab{ min-height:44px; }
  .scrub__panel .calc__tab{ min-height:0; }
  input[type=checkbox]{ width:22px; height:22px; flex:0 0 auto; }
  label:has(> input[type=checkbox]){ padding-block:8px; }
  .eyebrow{ font-size:12px; }
  .crumb a{ display:inline-block; padding-block:8px; }
  a[href^="mailto:"], a[href^="tel:"]{ display:inline-block; padding-block:11px; }
  .hdr .logo{ min-height:44px; }
  .ftr .logo{ min-height:44px; }

  /* Patička: v úzké mřížce se logo nevejde do sloupce a leze sousedovi
     do nadpisu. Úvodní blok proto zabírá celou šířku a značka se zmenšuje
     stejně jako v hlavičce — pravidlo `.ftr .logo__*` jinak přebije obecné. */
  .ftr__about{ grid-column:1 / -1; }
  .ftr .logo__znak{ height:26px; }
  .ftr .logo__napis{ height:19px; }
  .ftr__about p{ margin-top:14px; }
}