:root {
  --barva-tmava: #12212e;
  --barva-tmava-svetla: #1d3346;
  --barva-text: #16202a;
  --barva-text-slaby: #5a6874;
  --barva-akcent: #e32718;
  --barva-akcent-tmava: #bd1d12;
  --barva-podklad: #f3f5f7;
  --barva-bila: #fff;
  --barva-linka: #dde3e8;
  --barva-uspech: #1f8a4c;
  --barva-focus: #f3aaa4;
  --sirka-obsahu: 1140px;
  --polomer: 6px;
  --stín: 0 16px 36px rgb(18 33 46 / 12%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  color: var(--barva-text);
  background: var(--barva-bila);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.cela-obrazovka {
  min-height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--barva-focus);
  outline-offset: 3px;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin-top: 0;
}

h1,
h2,
h3 {
  max-width: 24ch;
  margin-bottom: 0.65em;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.1875rem, 3vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
}

p {
  max-width: 68ch;
  margin-bottom: 1.25em;
}

.preskocit {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--barva-tmava);
  background: var(--barva-bila);
  border-radius: var(--polomer);
  transform: translateY(-160%);
}

.preskocit:focus {
  transform: translateY(0);
}

.obal {
  width: min(100% - 40px, var(--sirka-obsahu));
  margin-inline: auto;
}

.sekce {
  padding-block: 56px;
}

.sekce--svetla {
  background: var(--barva-podklad);
}

.sekce--tmava {
  color: var(--barva-bila);
  background: var(--barva-tmava);
}

.uvodni-radek {
  margin-bottom: 10px;
  color: var(--barva-text-slaby);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sekce--tmava .uvodni-radek {
  color: #c8d3dc;
}

.hlavicka {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: 72px;
  color: var(--barva-bila);
  background: var(--barva-tmava);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.hlavicka__obsah {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.znacka {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.navigace {
  display: none;
  align-items: center;
  gap: 26px;
}

.navigace a:not(.tlacitko) {
  position: relative;
  min-height: 44px;
  padding-block: 9px;
  color: #e6edf2;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}

.navigace a:not(.tlacitko)::after {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 2px;
  background: var(--barva-akcent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 140ms ease;
}

.navigace a:not(.tlacitko):hover::after,
.navigace a:not(.tlacitko):focus-visible::after {
  transform: scaleX(1);
}

.navigace a:hover {
  color: var(--barva-bila);
}

.tlacitko {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  color: var(--barva-bila);
  background: var(--barva-akcent);
  border: 2px solid var(--barva-akcent);
  border-radius: var(--polomer);
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.tlacitko:hover {
  background: var(--barva-akcent-tmava);
  border-color: var(--barva-akcent-tmava);
}

.tlacitko--sekundarni {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

.tlacitko--sekundarni:hover {
  color: var(--barva-tmava);
  background: var(--barva-bila);
  border-color: var(--barva-bila);
}

.tlacitko--mobil {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 15px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 64px;
  color: var(--barva-bila);
  background: var(--barva-tmava);
}

.hero::after {
  position: absolute;
  width: 280px;
  height: 280px;
  right: -180px;
  bottom: -140px;
  background: var(--barva-akcent);
  content: "";
  opacity: 0.18;
  transform: rotate(15deg);
}

.hero__mrizka {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 36px;
}

.hero__text {
  max-width: 720px;
}

.hero__text > p {
  color: #dbe5ec;
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
}

.hero__vyhody {
  display: flex;
  flex-wrap: wrap;
  margin: 24px 0 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.hero__vyhody li {
  padding: 6px 10px;
  color: #eaf1f5;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 650;
}

.tlacitko--velke {
  min-height: 58px;
  padding-inline: 26px;
  box-shadow: 0 10px 28px rgb(227 39 24 / 24%);
}

.textovy-odkaz {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  color: #eaf1f5;
  font-size: 16px;
  font-weight: 700;
}

.textovy-odkaz span {
  color: var(--barva-akcent);
  font-size: 22px;
}

.duvera {
  color: var(--barva-bila);
  background: var(--barva-tmava-svetla);
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.duvera__mrizka {
  display: grid;
  padding-block: 20px;
  gap: 14px;
}

.duvera__mrizka div {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 10px;
}

.duvera__mrizka strong {
  color: var(--barva-bila);
  font-size: 15px;
}

.duvera__mrizka span {
  color: #bccbd5;
  font-size: 14px;
}

.akce {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.foto-misto {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--pomer, 3 / 2);
  min-height: 220px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%)),
    var(--barva-tmava-svetla);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--polomer);
}

.foto-misto::before,
.foto-misto::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  height: 1px;
  background: rgb(255 255 255 / 24%);
  content: "";
}

.foto-misto::before {
  transform: translate(-50%, -50%) rotate(24deg);
}

.foto-misto::after {
  transform: translate(-50%, -50%) rotate(-24deg);
}

/* Živější landing-page hero inspirovaný řemeslnými weby */
.info-lista {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 20px;
  color: var(--barva-bila);
  background: #292825;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.info-lista span {
  color: #f05b4f;
  font-size: 11px;
}

.hlavicka {
  color: var(--barva-text);
  background: rgb(255 255 255 / 96%);
  border-bottom-color: var(--barva-linka);
  box-shadow: 0 8px 28px rgb(18 33 46 / 5%);
  backdrop-filter: blur(12px);
}

.navigace a:not(.tlacitko) {
  color: #3f484f;
}

.navigace a:hover {
  color: var(--barva-text);
}

.hero {
  color: var(--barva-text);
  background:
    radial-gradient(circle at 88% 18%, rgb(240 91 79 / 11%) 0 160px, transparent 161px),
    linear-gradient(90deg, #fff 0 64%, #f7f4ef 64% 100%);
}

.hero::before {
  position: absolute;
  top: 76px;
  right: 5%;
  width: 88px;
  height: 88px;
  border-top: 8px solid #f05b4f;
  border-right: 8px solid #f05b4f;
  content: "";
}

.hero::after {
  right: -120px;
  bottom: -190px;
  width: 420px;
  height: 420px;
  background: transparent;
  border: 54px solid rgb(240 91 79 / 8%);
  border-radius: 50%;
  opacity: 1;
}

.hero h1 {
  max-width: 15ch;
  font-weight: 850;
  letter-spacing: -0.045em;
}

.hero__text > p {
  color: #58636b;
}

.hero__vyhody li {
  color: #424c53;
  background: var(--barva-bila);
  border-color: var(--barva-linka);
  box-shadow: 0 5px 18px rgb(18 33 46 / 6%);
}

.textovy-odkaz {
  color: var(--barva-text);
  text-decoration-color: #aab3ba;
}

.hero-vizual {
  position: relative;
  display: grid;
  min-height: 390px;
  align-content: center;
  padding: 52px 34px 34px;
  background:
    linear-gradient(rgb(255 255 255 / 92%), rgb(255 255 255 / 92%)),
    repeating-linear-gradient(0deg, transparent 0 31px, #dce3e7 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, #dce3e7 32px);
  border: 1px solid #d7dde1;
  border-radius: 28px 4px 28px 4px;
  box-shadow: 0 28px 70px rgb(18 33 46 / 18%);
  transform: rotate(1.2deg);
}

.hero-vizual__stit {
  position: absolute;
  top: 22px;
  left: -12px;
  padding: 8px 13px;
  color: var(--barva-bila);
  background: #f05b4f;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.hero-vizual__karta {
  display: grid;
  padding: 24px;
  gap: 5px;
  background: #f7f8f8;
  border-left: 4px solid var(--barva-akcent);
}

.hero-vizual__karta span {
  margin-top: 9px;
  color: var(--barva-text-slaby);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-vizual__karta strong {
  font-size: 17px;
}

.hero-vizual__vysledek {
  position: absolute;
  right: -18px;
  bottom: 22px;
  display: grid;
  min-width: 230px;
  padding: 15px 18px;
  color: var(--barva-bila);
  background: #292825;
  border-radius: 5px;
  box-shadow: 0 12px 30px rgb(18 33 46 / 22%);
}

.hero-vizual__vysledek span {
  color: #d5d6d5;
  font-size: 13px;
}

.mrizka-2,
.mrizka-3,
.kroky,
.ceniky {
  display: grid;
  gap: 20px;
}

.karta {
  padding: 24px;
  background: var(--barva-bila);
  border: 1px solid var(--barva-linka);
  border-radius: var(--polomer);
}

.sekce--tmava .karta {
  background: var(--barva-tmava-svetla);
  border-color: rgb(255 255 255 / 14%);
}

.krok {
  position: relative;
  padding: 26px 24px 24px;
  background: var(--barva-bila);
  border-top: 4px solid var(--barva-akcent);
}

.krok__cislo {
  display: block;
  margin-bottom: 18px;
  color: var(--barva-akcent-tmava);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.seznam {
  display: grid;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.seznam li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 10px;
}

.seznam svg {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--barva-uspech);
}

.seznam--ne svg {
  color: var(--barva-text-slaby);
}

.seznam li:not(:has(svg)) {
  position: relative;
  display: block;
  padding-left: 22px;
  line-height: 1.55;
}

.seznam li:not(:has(svg))::before {
  position: absolute;
  top: 0.65em;
  left: 1px;
  width: 7px;
  height: 7px;
  background: var(--barva-akcent);
  border-radius: 50%;
  content: "";
}

.poptavka {
  padding: 26px;
  color: var(--barva-text);
  background: var(--barva-bila);
  border: 3px solid var(--barva-akcent);
  border-radius: var(--polomer);
  box-shadow: var(--stín);
}

.poptavka dl {
  display: grid;
  margin: 0;
  gap: 14px;
}

.poptavka dt {
  color: var(--barva-text-slaby);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.poptavka dd {
  margin: 2px 0 0;
  font-weight: 650;
}

.cenik {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--barva-bila);
  border: 1px solid var(--barva-linka);
  border-radius: var(--polomer);
  box-shadow: var(--stín);
}

.cenik--hlavni {
  border: 3px solid var(--barva-akcent);
}

.cenik__stitek {
  align-self: flex-start;
  margin: -44px 0 18px;
  padding: 5px 10px;
  color: var(--barva-bila);
  background: var(--barva-akcent);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cenik .tlacitko {
  margin-top: auto;
}

.faq {
  border-top: 1px solid var(--barva-linka);
}

.faq details {
  border-bottom: 1px solid var(--barva-linka);
}

.faq summary {
  position: relative;
  min-height: 60px;
  padding: 18px 48px 18px 0;
  font-weight: 700;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 26px;
  height: 26px;
  color: var(--barva-bila);
  background: var(--barva-akcent);
  border-radius: 50%;
  content: "+";
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  transform: translateY(-50%);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > div {
  padding-bottom: 18px;
}

.formular {
  display: grid;
  padding: 24px;
  gap: 20px;
  background: var(--barva-bila);
  border: 1px solid var(--barva-linka);
  border-radius: var(--polomer);
  box-shadow: var(--stín);
}

.formular--vexe > form,
.formular--vexe form {
  display: grid;
  gap: 20px;
}

.formular--vexe form p,
.formular--vexe form .field,
.formular--vexe form .form-group {
  display: grid;
  margin: 0;
  gap: 7px;
}

.formular--vexe form label {
  font-size: 15px;
  font-weight: 700;
}

.formular--vexe form input:not([type="checkbox"]):not([type="hidden"]),
.formular--vexe form select,
.formular--vexe form textarea {
  width: 100%;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid #d5d0cb;
  border-radius: 9px;
  background: #fbfaf8;
  font: inherit;
}

.formular--vexe form textarea {
  min-height: 132px;
}

.formular--vexe form button,
.formular--vexe form input[type="submit"] {
  width: fit-content;
  min-height: 54px;
  padding: 0 25px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--barva-akcent);
  box-shadow: 0 12px 28px rgb(227 39 24 / 22%);
  font-weight: 800;
  cursor: pointer;
}

.krokovy-formular {
  width: min(100% - 40px, 1120px);
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: stretch;
  border-radius: 28px;
  box-shadow: 0 35px 100px rgb(37 37 37 / 20%);
  overflow: hidden;
}

.krokovy-formular__aside {
  padding: 46px 38px;
  color: #fff;
  background:
    radial-gradient(circle at 115% -10%, rgb(227 39 24 / 34%) 0 135px, transparent 136px),
    #343332;
}

.krokovy-formular__cas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.krokovy-formular__cas strong {
  color: var(--barva-akcent);
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1;
}

.krokovy-formular__cas span {
  color: #c9c4c1;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.krokovy-formular__aside h3 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 28px;
  line-height: 1.15;
}

.krokovy-formular__aside > p {
  color: #bcb7b4;
  font-size: 15px;
  line-height: 1.7;
}

.krokovy-formular__vyhody {
  display: grid;
  gap: 13px;
  margin: 28px 0 34px;
}

.krokovy-formular__vyhody span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #dedad8;
  font-size: 13px;
  font-weight: 700;
}

.krokovy-formular__vyhody i {
  width: 22px;
  height: 22px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--barva-akcent);
  border-radius: 50%;
  font-size: 12px;
  font-style: normal;
}

.krokovy-formular__aside > a {
  display: block;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 13%);
  color: #c6c1be;
  font-size: 13px;
  text-decoration: none;
}

.krokovy-formular__aside > a strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 17px;
}

.formular--kroky {
  max-width: none;
  margin: 0;
  padding: 38px 44px 44px;
  border-radius: 0;
  box-shadow: none;
}

.formular-prubeh {
  display: grid;
  gap: 14px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--barva-linka);
}

.formular-prubeh > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--barva-text-slaby);
  font-size: 12px;
  font-weight: 700;
}

.formular-prubeh > div:first-child span {
  padding: 5px 9px;
  color: var(--barva-akcent-tmava);
  background: #fff2ef;
  border-radius: 999px;
}

.formular-prubeh > div:first-child strong {
  color: var(--barva-text);
}

.formular-prubeh__cara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.formular-prubeh__cara i {
  height: 5px;
  background: #e7e3e0;
  border-radius: 999px;
  transition: background 180ms ease;
}

.formular-prubeh__cara i.aktivni {
  background: var(--barva-akcent);
}

.formular--kroky form {
  display: block;
}

.formular-krok {
  padding-top: 30px;
}

.formular-krok[hidden] {
  display: none !important;
}

.formular-krok__zahlavi {
  margin-bottom: 26px;
}

.formular-krok__zahlavi > span {
  display: block;
  margin-bottom: 7px;
  color: var(--barva-akcent-tmava);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.formular-krok__zahlavi h3 {
  max-width: none;
  margin-bottom: 8px;
  font-size: clamp(27px, 3vw, 36px);
}

.formular-krok__zahlavi p {
  margin: 0;
  color: var(--barva-text-slaby);
  font-size: 14px;
}

.formular--kroky .formular__mrizka {
  gap: 18px;
}

.formular--kroky .pole label {
  font-size: 13px;
}

.formular--kroky .pole input:not([type="checkbox"]),
.formular--kroky .pole select,
.formular--kroky .pole textarea {
  min-height: 50px;
  background: #fbfaf8;
}

.formular--kroky .pole textarea {
  min-height: 96px;
}

.formular-krok__navigace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--barva-linka);
}

.formular-krok__navigace--konec {
  justify-content: flex-end;
}

.formular-krok__navigace > span {
  margin-right: auto;
  color: var(--barva-text-slaby);
  font-size: 12px;
}

.formular-zpet {
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  color: var(--barva-text-slaby);
  background: transparent;
  font-weight: 800;
}

.formular-zpet:hover {
  color: var(--barva-text);
}

.formular--kroky .newsletter {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 10px;
  color: var(--barva-text-slaby);
  font-size: 13px;
}

@media (max-width: 900px) {
  .krokovy-formular {
    grid-template-columns: 1fr;
  }

  .krokovy-formular__aside {
    padding: 32px;
  }

  .krokovy-formular__aside > p,
  .krokovy-formular__vyhody {
    max-width: 620px;
  }

  .krokovy-formular__cas {
    margin-bottom: 20px;
  }
}

@media (max-width: 699px) {
  .krokovy-formular {
    width: min(100% - 24px, 1120px);
    margin-top: 24px;
    border-radius: 20px;
  }

  .krokovy-formular__aside {
    padding: 27px 24px;
  }

  .krokovy-formular__aside h3 {
    font-size: 24px;
  }

  .krokovy-formular__vyhody {
    margin-block: 22px;
  }

  .formular--kroky {
    padding: 25px 20px 28px;
  }

  .formular-prubeh > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .formular-krok {
    padding-top: 24px;
  }

  .formular-krok__navigace {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .formular-krok__navigace .tlacitko,
  .formular-zpet {
    width: 100%;
  }

  .formular-krok__navigace > span {
    display: none;
  }
}

.oznameni {
  position: fixed;
  z-index: 500;
  top: 132px;
  right: 24px;
  width: min(420px, calc(100% - 48px));
}

.oznameni__zprava {
  display: grid;
  padding: 18px 20px;
  gap: 3px;
  color: #fff;
  background: #1f7a4f;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgb(31 29 28 / 24%);
}

.oznameni__zprava span {
  font-size: 14px;
}

.chyba-pole,
.chyba-pole .errorlist {
  margin: 0;
  padding: 0;
  color: #bd1d12;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.formular__zahlavi {
  display: grid;
  padding-bottom: 18px;
  gap: 2px;
  border-bottom: 1px solid var(--barva-linka);
}

.formular__zahlavi strong {
  font-size: 20px;
}

.formular__zahlavi span,
.nepovinne {
  color: var(--barva-text-slaby);
  font-size: 14px;
  font-weight: 500;
}

.formular__mrizka {
  display: grid;
  gap: 18px;
}

.pole {
  display: grid;
  gap: 7px;
}

.pole label,
.legenda {
  font-size: 15px;
  font-weight: 700;
}

.pole input,
.pole select,
.pole textarea {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  background: var(--barva-bila);
  border: 1px solid #98a5af;
  border-radius: 4px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pole textarea {
  min-height: 130px;
  resize: vertical;
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  border-color: var(--barva-akcent-tmava);
  box-shadow: 0 0 0 3px rgb(227 39 24 / 14%);
}

.pole--cela {
  grid-column: 1 / -1;
}

.newsletter {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 10px;
}

.newsletter input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.poznamka {
  color: var(--barva-text-slaby);
  font-size: 15px;
  line-height: 1.5;
}

.poznamka a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.paticka {
  padding: 64px 0 24px;
  color: #bdc8d1;
  background: #101c26;
}

.paticka__mrizka {
  display: grid;
  gap: 38px;
  padding-bottom: 44px;
}

.paticka a {
  color: inherit;
  text-decoration: none;
}

.paticka a:hover {
  color: #fff;
}

.paticka__znacka {
  display: inline-block;
  margin-bottom: 20px;
  color: #fff !important;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.paticka__znacka span {
  color: var(--barva-akcent);
}

.paticka__o-nas p {
  max-width: 36ch;
  margin: 0;
  color: #8f9ca6;
  font-size: 15px;
  line-height: 1.75;
}

.paticka__sloupec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.paticka__sloupec h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paticka__sloupec a,
.paticka__sloupec > span {
  font-size: 14px;
  line-height: 1.55;
}

.paticka__telefon {
  margin-bottom: 1px;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800;
}

.paticka__email {
  margin-bottom: 8px;
  color: #fff !important;
  font-weight: 700;
}

.paticka__kontakt > span {
  position: relative;
  padding-left: 16px;
  color: #8f9ca6;
}

.paticka__kontakt > span::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--barva-akcent);
}

.paticka__cta {
  margin-top: 10px;
  color: #f05b4f !important;
  font-weight: 800;
}

.paticka__spodek,
.paticka__firma {
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #778690;
  font-size: 13px;
}

.paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.paticka__spodek p {
  margin: 0;
}

.paticka__firma {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
}

.paticka__firma strong {
  color: #c9d1d7;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 699px) {
  .info-lista {
    font-size: 12px;
  }

  .hero {
    background:
      radial-gradient(circle at 110% 4%, rgb(240 91 79 / 10%) 0 120px, transparent 121px),
      #fbfaf7;
  }

  .hero::before {
    display: none;
  }

  .hero-vizual {
    min-height: 350px;
    padding: 48px 18px 28px;
    transform: none;
  }

  .hero-vizual__vysledek {
    right: 12px;
    bottom: 14px;
    min-width: 210px;
  }
}

@media (min-width: 700px) {
  body {
    font-size: 18px;
  }

  .obal {
    width: min(100% - 64px, var(--sirka-obsahu));
  }

  .sekce {
    padding-block: 96px;
  }

  .hero {
    padding-block: 96px;
  }

  .akce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .duvera__mrizka {
    grid-template-columns: repeat(3, 1fr);
  }

  .duvera__mrizka div {
    grid-template-columns: 1fr;
    gap: 1px;
    padding-left: 20px;
    border-left: 3px solid var(--barva-akcent);
  }

  .tlacitko {
    width: auto;
  }

  .mrizka-2,
  .formular__mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mrizka-3,
  .kroky,
  .ceniky {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ceniky {
    align-items: stretch;
    padding-top: 18px;
  }

  .paticka__mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 56px;
  }

}

@media (min-width: 1080px) {
  .navigace {
    display: flex;
  }

  .tlacitko--mobil {
    display: none;
  }

  .hero__mrizka {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    align-items: center;
    gap: 64px;
  }

  .paticka__mrizka {
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

/* Vizuální systém inspirovaný šablonou iMontuj */
:root {
  --barva-tmava: #343332;
  --barva-tmava-svetla: #464442;
  --barva-text: #252525;
  --barva-text-slaby: #6f6d6b;
  --barva-akcent: #e32718;
  --barva-akcent-tmava: #bd1d12;
  --barva-podklad: #f6f4f1;
  --barva-linka: #e4e1de;
  --polomer: 18px;
  --stín: 0 24px 70px rgb(38 35 33 / 12%);
  --sirka-obsahu: 1200px;
}

body {
  color: var(--barva-text);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  letter-spacing: -0.035em;
}

h1 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 5.6vw, 5rem);
  line-height: 1.02;
}

h2 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 1.08;
}

.info-lista {
  min-height: 38px;
  background: #343332;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.info-lista span {
  color: var(--barva-akcent);
}

.hlavicka {
  min-height: 78px;
  color: var(--barva-text);
  background: rgb(255 255 255 / 96%);
  border-bottom: 1px solid rgb(228 225 222 / 85%);
  box-shadow: 0 10px 35px rgb(36 33 31 / 5%);
  backdrop-filter: blur(16px);
}

.hlavicka__obsah {
  min-height: 78px;
}

.znacka {
  color: var(--barva-text);
  font-size: 23px;
  letter-spacing: -0.045em;
}

.znacka::after {
  content: ".cz";
  color: var(--barva-akcent);
}

.znacka {
  font-size: 0;
}

.znacka::before {
  content: "Propagacefirmy";
  color: var(--barva-text);
  font-size: 23px;
}

.znacka::after {
  font-size: 23px;
}

.navigace {
  gap: 28px;
}

.navigace > a:not(.tlacitko) {
  position: relative;
  color: #4c4947;
  font-size: 14px;
}

.navigace > a:not(.tlacitko)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--barva-akcent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease;
}

.navigace > a:not(.tlacitko):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.tlacitko {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--barva-akcent);
  box-shadow: 0 12px 28px rgb(227 39 24 / 22%);
  font-size: 14px;
  font-weight: 800;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.tlacitko:hover {
  background: var(--barva-akcent-tmava);
  box-shadow: 0 16px 34px rgb(227 39 24 / 30%);
  transform: translateY(-2px);
}

.tlacitko--velke {
  min-height: 60px;
  padding-inline: 29px;
  font-size: 16px;
}

.hero {
  position: relative;
  padding-block: 80px;
  background:
    linear-gradient(90deg, rgb(246 244 241 / 97%) 0 53%, rgb(246 244 241 / 55%) 53% 100%),
    repeating-linear-gradient(90deg, transparent 0 95px, rgb(64 59 56 / 3.5%) 96px);
  overflow: hidden;
}

.hero::before {
  top: -190px;
  right: -130px;
  width: 500px;
  height: 500px;
  border: 120px solid rgb(227 39 24 / 4.5%);
  border-radius: 50%;
  background: transparent;
}

.hero__mrizka {
  position: relative;
  z-index: 1;
}

.hero__text > p:not(.uvodni-radek) {
  max-width: 610px;
  color: #5e5b58;
  font-size: 18px;
  line-height: 1.75;
}

.uvodni-radek {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--barva-akcent-tmava);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.uvodni-radek::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--barva-akcent);
}

.hero__vyhody li::before {
  background: var(--barva-akcent);
}

.textovy-odkaz {
  color: #4c4947;
  font-weight: 800;
  text-decoration-color: #98938f;
}

.textovy-odkaz span {
  color: var(--barva-akcent);
}

.hero-vizual {
  border: 10px solid #fff;
  border-radius: 8px 40px 8px 8px;
  background: #fff;
  box-shadow: var(--stín);
  transform: rotate(1deg);
}

.hero-vizual::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -26px;
  bottom: -26px;
  width: 54%;
  height: 45%;
  background: var(--barva-akcent);
}

.hero-vizual__stit {
  color: #fff;
  background: var(--barva-akcent);
  border-radius: 8px;
}

.hero-vizual__karta,
.hero-vizual__vysledek {
  border-color: var(--barva-linka);
  border-radius: 12px;
}

.duvera {
  color: #fff;
  background: #343332;
}

.duvera__mrizka div {
  border-color: rgb(255 255 255 / 10%);
}

.duvera__mrizka strong {
  color: #fff;
}

.duvera__mrizka span {
  color: #aaa6a3;
}

.sekce {
  padding-block: 104px;
}

.sekce--svetla {
  background: var(--barva-podklad);
}

.sekce--tmava {
  background: #343332;
}

.karta,
.krok,
.cenik,
.poptavka {
  border: 1px solid var(--barva-linka);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(57 52 49 / 4%);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.karta:hover,
.krok:hover,
.cenik:hover {
  border-color: #efb6b1;
  box-shadow: 0 18px 45px rgb(57 52 49 / 10%);
  transform: translateY(-5px);
}

.karta,
.krok {
  padding: 34px;
}

.karta > :last-child {
  margin-bottom: 0;
}

.karta ol {
  display: grid;
  margin: 0 0 24px;
  padding-left: 22px;
  gap: 10px;
}

.karta .tlacitko {
  margin-top: 8px;
}

.sekce--tmava .karta {
  color: #fff;
  background: #454341;
  border-color: rgb(255 255 255 / 16%);
  box-shadow: none;
}

.sekce--tmava .karta h3 {
  color: #fff;
}

.sekce--tmava .karta .seznam li {
  color: #f1efed;
}

.hero .poptavka .uvodni-radek {
  color: var(--barva-akcent-tmava);
}

.dukaz {
  padding-block: 78px;
  background: #fff;
  border-block: 1px solid var(--barva-linka);
}

.dukaz__obsah {
  display: grid;
  align-items: end;
  gap: 34px;
}

.dukaz__text {
  max-width: 720px;
}

.dukaz__text h2 {
  max-width: 18ch;
}

.dukaz__text p:last-child {
  margin-bottom: 0;
  color: var(--barva-text-slaby);
}

.dukaz__cislo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dukaz__cislo strong {
  color: var(--barva-akcent);
  font-size: clamp(46px, 7vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.dukaz__cislo span {
  color: var(--barva-text-slaby);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.dukaz__firmy {
  display: flex;
  margin-top: 30px;
  padding-top: 24px;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  border-top: 1px solid var(--barva-linka);
}

.dukaz__firmy span {
  color: #55514e;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.015em;
}

.krok__cislo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--barva-akcent);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgb(227 39 24 / 20%);
}

.cenik {
  display: flex;
  flex-direction: column;
  padding: 38px 30px;
}

.cenik-uvod {
  max-width: 68ch;
}

.cenik__nazev > span {
  display: block;
  margin-bottom: 7px;
  color: var(--barva-text-slaby);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cenik__nazev h3 {
  margin-bottom: 0;
}

.cenik__cena {
  display: flex;
  margin: 24px 0 22px;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.cenik__cena strong {
  color: var(--barva-text);
  font-size: clamp(28px, 3vw, 37px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.cenik__cena span {
  color: var(--barva-text-slaby);
  font-size: 13px;
  font-weight: 700;
}

.cenik__seznam {
  display: grid;
  flex: 1;
  margin: 0 0 28px;
  padding: 0;
  gap: 11px;
  list-style: none;
}

.cenik__seznam li {
  position: relative;
  padding-left: 21px;
  color: #4c4947;
  font-size: 14px;
  line-height: 1.5;
}

.cenik__seznam li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--barva-akcent);
  border-radius: 50%;
  content: "";
}

.cenik__poznamka {
  margin: 22px 0 0;
  color: var(--barva-text-slaby);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.cenik--hlavni {
  border-color: var(--barva-akcent);
  box-shadow: 0 22px 56px rgb(227 39 24 / 14%);
}

.cenik__stitek {
  background: var(--barva-akcent);
}

.formular-vybrany-balicek {
  margin: 0 0 22px;
  padding: 11px 14px;
  color: var(--barva-text);
  background: #fff4f2;
  border: 1px solid #f4c7c3;
  border-radius: 10px;
  font-size: 14px;
}

.formular-vybrany-balicek strong {
  color: var(--barva-akcent-tmava);
}

.faq details {
  margin-bottom: 12px;
  border: 1px solid var(--barva-linka);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(57 52 49 / 3%);
}

.faq summary {
  padding: 22px 24px;
}

.faq details > div {
  padding: 0 24px 22px;
}

.formular {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 38px);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 35px 100px rgb(37 37 37 / 18%);
}

.reference-firmy {
  background: #fff;
  border-block: 1px solid var(--barva-linka);
}

.reference-firmy__zahlavi {
  display: grid;
  margin-bottom: 38px;
  align-items: center;
  gap: 32px;
}

.reference-firmy__zahlavi > div:first-child {
  max-width: 680px;
}

.reference-firmy__zahlavi .uvodni-radek {
  color: var(--barva-akcent-tmava);
}

.reference-firmy__zahlavi h2 {
  max-width: 16ch;
  margin-bottom: 14px;
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.reference-firmy__zahlavi p:last-child {
  max-width: 62ch;
  margin-bottom: 0;
  color: var(--barva-text-slaby);
}

.reference-firmy__dekada {
  display: grid;
  min-width: 170px;
  padding-left: 28px;
  gap: 5px;
  border-left: 1px solid var(--barva-linka);
}

.reference-firmy__dekada strong {
  color: var(--barva-akcent);
  font-size: 52px;
  line-height: 1;
}

.reference-firmy__dekada span {
  color: var(--barva-text-slaby);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.reference-firmy__mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 30px 24px;
}

.reference-firmy__polozka {
  display: flex;
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  align-items: center;
  justify-content: center;
  color: var(--barva-text);
  background: transparent;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 180ms ease, transform 180ms ease;
}

.reference-firmy__polozka:hover {
  background: transparent;
  opacity: 1;
  transform: translateY(-2px);
}

.reference-firmy__polozka--tmava {
  background: transparent;
}

.reference-firmy__logo {
  display: flex;
  width: 100%;
  height: 58px;
  align-items: center;
  justify-content: center;
}

.reference-firmy__logo img {
  display: block;
  width: auto;
  max-width: min(100%, 220px);
  max-height: 54px;
  object-fit: contain;
}

.reference-firmy__polozka--tmava img {
  filter: brightness(0);
  opacity: 0.82;
}

@media (min-width: 700px) {
  .dukaz__obsah {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .reference-firmy__mrizka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .reference-firmy__zahlavi {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 1100px) {
  .reference-firmy__mrizka {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px;
  }

  .reference-firmy__logo img {
    max-width: min(100%, 170px);
  }
}

@media (max-width: 699px) {
  .reference-firmy__dekada {
    padding: 18px 0 0;
    border-top: 1px solid var(--barva-linka);
    border-left: 0;
  }

  .reference-firmy__polozka {
    min-height: 76px;
    padding: 10px;
  }
}

.pole input,
.pole select,
.pole textarea {
  border-color: #d5d0cb;
  border-radius: 9px;
  background: #fbfaf8;
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  border-color: var(--barva-akcent);
  box-shadow: 0 0 0 4px rgb(227 39 24 / 10%);
}

@media (max-width: 1079px) {
  .hlavicka,
  .hlavicka__obsah {
    min-height: 70px;
  }

  .hero {
    padding-block: 64px;
    background: var(--barva-podklad);
  }

  .sekce {
    padding-block: 76px;
  }
}

@media (max-width: 699px) {
  .formular {
    max-width: none;
    padding: 24px 20px;
  }
}

@media (max-width: 699px) {
  h1 {
    font-size: clamp(2.5rem, 12vw, 3.6rem);
  }

  h2 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .hero-vizual {
    border-width: 7px;
    border-radius: 7px 28px 7px 7px;
  }

  .hero-vizual::after {
    right: -14px;
    bottom: -14px;
  }

  .sekce {
    padding-block: 64px;
  }

  .karta,
  .krok,
  .cenik {
    padding: 27px 24px;
  }

  .paticka {
    padding-top: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .hlavicka,
  .tlacitko {
    display: none !important;
  }

  .sekce,
  .hero,
  .paticka {
    padding-block: 24px;
    color: #000;
    background: #fff;
  }
}

/* Rozbalovací menu oborů */
.menu-obory { position: relative; }
.menu-obory__spoustec {
  display: inline-flex; min-height: 44px; padding: 9px 0; align-items: center; gap: 6px;
  color: #4c4947; background: transparent; border: 0; font-size: 14px; font-weight: 650;
}
.menu-obory__spoustec span { color: var(--barva-akcent); font-size: 16px; transition: transform 180ms ease; }
.menu-obory__panel {
  position: absolute; z-index: 120; top: calc(100% + 10px); left: 50%;
  display: grid; width: 310px; padding: 18px; gap: 4px; background: #fff;
  border: 1px solid var(--barva-linka); border-radius: 16px; box-shadow: 0 24px 60px rgb(37 37 37 / 16%);
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 160ms ease, transform 160ms ease;
}
.menu-obory:hover .menu-obory__panel,
.menu-obory:focus-within .menu-obory__panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.menu-obory:hover .menu-obory__spoustec span,
.menu-obory:focus-within .menu-obory__spoustec span { transform: rotate(180deg); }
.menu-obory__nadpis { padding: 2px 10px 9px; color: var(--barva-text-slaby); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.menu-obory__panel a {
  display: flex; min-height: 42px; padding: 9px 10px; align-items: center; justify-content: space-between;
  border-radius: 9px; color: var(--barva-text); font-size: 14px; font-weight: 700; text-decoration: none;
}
.menu-obory__panel a:hover { color: var(--barva-akcent-tmava); background: #fff4f2; }
.menu-obory__panel a span { color: var(--barva-akcent); }
.menu-obory-mobil { position: relative; margin-left: auto; }
.menu-obory-mobil summary {
  min-height: 44px; padding: 10px 12px; color: var(--barva-text); border: 1px solid var(--barva-linka);
  border-radius: 10px; font-size: 13px; font-weight: 800; list-style: none; cursor: pointer;
}
.menu-obory-mobil summary::-webkit-details-marker { display: none; }
.menu-obory-mobil > div {
  position: absolute; z-index: 120; top: calc(100% + 8px); right: 0; display: grid; width: min(270px, calc(100vw - 40px));
  padding: 12px; gap: 3px; background: #fff; border: 1px solid var(--barva-linka); border-radius: 14px;
  box-shadow: 0 20px 50px rgb(37 37 37 / 18%);
}
.menu-obory-mobil a { padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.menu-obory-mobil a:hover { background: #fff4f2; }
@media (min-width:1080px) { .menu-obory-mobil { display:none; } }
@media (max-width:520px) {
  .hlavicka__obsah { gap: 8px; }
  .menu-obory-mobil summary { padding-inline: 9px; }
  .tlacitko--mobil { min-height:44px; padding-inline:12px; font-size:12px; }
}

/* Datová vizualizace — modelový přehled */
.data-prehled { overflow: hidden; background: #343332; color: #fff; }
.data-prehled__zahlavi { display:grid; gap:24px; align-items:end; margin-bottom:42px; }
.data-prehled__zahlavi h2 { max-width:17ch; color:#fff; margin-bottom:0; }
.data-prehled__zahlavi p:last-child { margin-bottom:0; color:#c8c4c0; }
.data-prehled__stitky { display:flex; flex-wrap:wrap; gap:8px; }
.data-prehled__stitky span { padding:7px 10px; border:1px solid rgb(255 255 255 / 16%); border-radius:999px; color:#ddd9d5; font-size:12px; font-weight:700; }
.data-dashboard { display:grid; gap:18px; }
.data-panel { min-width:0; padding:24px; background:#403f3d; border:1px solid rgb(255 255 255 / 12%); border-radius:20px; }
.data-panel__hlava { display:flex; margin-bottom:22px; align-items:flex-start; justify-content:space-between; gap:16px; }
.data-panel__hlava h3 { margin:0; color:#fff; font-size:19px; letter-spacing:-.02em; }
.data-panel__hlava span { color:#aaa6a3; font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.data-funnel { display:grid; gap:10px; }
.data-funnel__radek { display:grid; grid-template-columns:105px 1fr auto; align-items:center; gap:12px; }
.data-funnel__radek > span { color:#d3cfcb; font-size:12px; }
.data-funnel__radek strong { min-width:24px; color:#fff; font-size:13px; text-align:right; }
.data-funnel__osa { height:12px; overflow:hidden; background:#53514f; border-radius:999px; }
.data-funnel__osa i { display:block; height:100%; width:var(--sirka); background:linear-gradient(90deg,#e32718,#f06b60); border-radius:inherit; }
.data-trend { position:relative; height:190px; padding:8px 0 28px; }
.data-trend::before { position:absolute; inset:8px 0 28px; content:""; background:repeating-linear-gradient(to bottom,transparent 0 39px,rgb(255 255 255 / 8%) 40px); }
.data-trend svg { position:relative; width:100%; height:150px; overflow:visible; }
.data-trend__popisky { display:flex; justify-content:space-between; color:#aaa6a3; font-size:11px; }
.data-kpi { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.data-kpi div { padding:16px; background:#4a4846; border-radius:13px; }
.data-kpi strong,.data-kpi span { display:block; }
.data-kpi strong { color:#fff; font-size:22px; line-height:1.1; }
.data-kpi span { margin-top:5px; color:#bbb7b3; font-size:11px; line-height:1.4; }
.data-pohyb { display:grid; gap:13px; }
.data-pohyb li { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:11px; color:#ddd9d5; font-size:13px; list-style:none; }
.data-pohyb b { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:var(--barva-akcent); border-radius:50%; font-size:12px; }
.data-poznamka { margin:18px 0 0; color:#aaa6a3; font-size:11px; line-height:1.5; }
@media (min-width:700px) {
  .data-prehled__zahlavi { grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); }
  .data-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .data-panel--trend { grid-column:span 2; }
}
@media (min-width:1080px) {
  .data-dashboard { grid-template-columns:1.05fr 1.3fr .85fr; }
  .data-panel--trend { grid-column:auto; }
}

/* Oficiální logo Propagacefirmy.cz v hlavičce */
.znacka--logo {
  min-width: 0;
  height: 54px;
  padding-block: 4px;
}

.znacka--logo::before,
.znacka--logo::after {
  content: none;
}

.znacka--logo img {
  width: auto;
  height: 46px;
  max-width: min(46vw, 190px);
  object-fit: contain;
}

@media (max-width: 420px) {
  .znacka--logo img {
    height: 40px;
    max-width: 43vw;
  }
}

/* Doplňkové prvky značky */
.hlavicka { position: relative; z-index: 500; }

.paticka__znacka--citelna {
  display: inline-flex;
  margin-bottom: 22px;
  align-items: center;
  gap: 11px;
  color: #fff !important;
  line-height: 1;
}
.paticka__znacka--citelna > img { width: 52px; height: 52px; object-fit: contain; }
.paticka__logotyp { display: grid; gap: 3px; color: #f5f6f7 !important; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.paticka__logotyp strong { color: inherit; font: inherit; white-space: nowrap; }
.paticka__logotyp strong > span { color: var(--barva-akcent) !important; font-weight: 500; }

.plovouci-kontakt { position: fixed; z-index: 900; right: 24px; bottom: 24px; font-family: inherit; }
.plovouci-kontakt__spoustec { position: relative; display: grid; width: 64px; height: 64px; padding: 7px; place-items: center; background: #fff; border: 1px solid var(--barva-linka); border-radius: 50%; box-shadow: 0 10px 30px rgb(37 37 37 / 20%); transition: transform 180ms ease, box-shadow 180ms ease; }
.plovouci-kontakt__spoustec:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgb(37 37 37 / 27%); }
.plovouci-kontakt__spoustec img { width: 48px; height: 48px; object-fit: contain; }
.plovouci-kontakt__stav { position: absolute; right: 1px; bottom: 2px; width: 14px; height: 14px; background: #22a55b; border: 3px solid #fff; border-radius: 50%; }
.plovouci-kontakt__napoveda { position: absolute; top: 50%; right: 78px; display: grid; width: 225px; padding: 11px 14px; gap: 2px; color: #fff; background: rgb(37 37 37 / 96%); border-radius: 10px; box-shadow: 0 8px 24px rgb(37 37 37 / 18%); font-size: 12px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(10px,-50%); transition: opacity 180ms ease, transform 180ms ease; }
.plovouci-kontakt:hover .plovouci-kontakt__napoveda, .plovouci-kontakt:focus-within .plovouci-kontakt__napoveda { opacity: 1; transform: translate(0,-50%); }
.plovouci-kontakt.je-otevreny .plovouci-kontakt__spoustec, .plovouci-kontakt.je-otevreny .plovouci-kontakt__napoveda { opacity: 0; pointer-events: none; }
.plovouci-kontakt__panel { position: absolute; right: 0; bottom: 0; width: 330px; padding: 22px; background: #fff; border: 1px solid var(--barva-linka); border-radius: 18px; box-shadow: 0 24px 70px rgb(37 37 37 / 24%); opacity: 0; pointer-events: none; transform: translateY(14px) scale(.96); transform-origin: right bottom; transition: opacity 180ms ease, transform 180ms ease; }
.plovouci-kontakt.je-otevreny .plovouci-kontakt__panel { opacity: 1; pointer-events: auto; transform: none; }
.plovouci-kontakt__zavrit { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; padding: 0; color: var(--barva-text-slaby); background: transparent; border: 0; border-radius: 50%; font-size: 25px; }
.plovouci-kontakt__zahlavi { display: flex; padding-right: 30px; align-items: center; gap: 12px; }
.plovouci-kontakt__zahlavi img { width: 52px; height: 52px; }
.plovouci-kontakt__zahlavi strong, .plovouci-kontakt__zahlavi span { display: block; }
.plovouci-kontakt__zahlavi span { margin-top: 4px; color: var(--barva-text-slaby); font-size: 12px; }
.plovouci-kontakt__zahlavi i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #22a55b; border-radius: 50%; }
.plovouci-kontakt__panel > p { margin: 18px 0; color: var(--barva-text-slaby); font-size: 14px; line-height: 1.55; }
.plovouci-kontakt__telefon, .plovouci-kontakt__email { display: block; min-height: 38px; font-weight: 800; text-decoration: none; }
.plovouci-kontakt__telefon { color: var(--barva-text); font-size: 19px; }
.plovouci-kontakt__email { color: var(--barva-akcent-tmava); font-size: 14px; }
.plovouci-kontakt__cta { display: flex; min-height: 48px; margin-top: 12px; padding: 10px 16px; align-items: center; justify-content: center; color: #fff; background: var(--barva-akcent); border-radius: 10px; font-size: 14px; font-weight: 800; text-decoration: none; }
@media (max-width: 699px) {
  .plovouci-kontakt { right: 14px; bottom: 14px; }
  .plovouci-kontakt__spoustec { width: 58px; height: 58px; }
  .plovouci-kontakt__spoustec img { width: 43px; height: 43px; }
  .plovouci-kontakt__napoveda { display: none; }
  .plovouci-kontakt__panel { width: min(330px, calc(100vw - 28px)); }
}