/* Fonty hostujeme sami. Dva důvody:
   1. Načítání z Google serverů posouvalo text při swapu, CLS bylo přes 0,1.
   2. Google Fonts z cizí domény posílá IP návštěvníka třetí straně, což je
      u webu s vlastní zpracovatelskou smlouvou zbytečná komplikace.
   Oba soubory jsou variabilní, takže jeden pokryje všechny řezy. */


/* Metricky přizpůsobené záložní fonty.
   Bez nich se po načtení Sory nadpis přeskládal a celý hero vyskočil o 69 px,
   CLS bylo přes 0,1. Poměr šířek změřený v prohlížeči: Sora 108,5 % Arialu,
   Inter 106,7 %. Záložní font tak zabere stejné místo jako ten cílový
   a výměna se na rozložení neprojeví. */
@font-face {
  font-family: 'Sora-zaloha';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 113.2%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter-zaloha';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 106.7%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonty/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonty/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('/fonty/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('/fonty/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* King Energy — vizuální identita.
   Vychází z dnešního webu klienta: černá základna, zlatá #F5BD2D, korunovaný lev.
   Modrá do palety nepatří — na starém webu pocházela z cookie pluginu, ne ze značky.

   Facelift proti dnešku: větší typografický kontrast, vzdušnější rytmus,
   tenké zlaté linky místo silných černých rámů, lev jako struktura, ne dekorace. */

:root {
  --cerna: #101114;
  --cerna-2: #17191d;
  --cerna-3: #23262c;
  --zlata: #f5bd2d;
  --zlata-tmava: #e5b804;
  --zlata-jemna: #fff8e6;
  --ink: #101114;
  --ink-2: #4a4f58;
  --seda: #767c86;
  --linka: #e4e6ea;
  --plocha: #f5f6f8;
  --bila: #fff;
  --ok: #0f7a4f;
  --max: 1180px;
  --r: 4px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 84px }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

body {
  margin: 0;
  font-family: Inter, 'Inter-zaloha', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bila);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .logo, .cena, .cislo .v {
  font-family: Sora, 'Sora-zaloha', Inter, system-ui, sans-serif;
  letter-spacing: -.032em;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 800 }
h2 { font-size: clamp(26px, 3.6vw, 40px) }
h3 { font-size: clamp(19px, 2.2vw, 23px) }
p { margin: 0 0 1.1em }
a { color: inherit; text-decoration: none }
main a:not(.btn):not(.karta) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--zlata); text-decoration-thickness: 2px; text-underline-offset: 3px }
main a:not(.btn):not(.karta):hover { color: var(--zlata-tmava) }
:focus-visible { outline: 3px solid var(--zlata); outline-offset: 3px }
img { max-width: 100%; height: auto }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px }
section { padding: 76px 0 }
section.uzka { padding: 52px 0 }

/* ---------- tmavý pás s levem ---------- */
.tma { background: var(--cerna); color: #fff; position: relative; overflow: hidden }
.tma h1, .tma h2, .tma h3 { color: #fff }
.tma p { color: #b9bec7 }
.tma .wrap { position: relative; z-index: 2 }
.tma::after {
  content: ""; position: absolute; z-index: 1;
  right: -6%; top: 50%; transform: translateY(-50%);
  width: min(680px, 62vw); aspect-ratio: 1;
  background: url('/obrazky/lev.svg') no-repeat center / contain;
  opacity: .05; pointer-events: none;
}
.tma.bez-lva::after { display: none }

/* ---------- hlavička ---------- */
header.hl { position: sticky; top: 0; z-index: 60; background: var(--cerna); border-bottom: 1px solid #262a31 }
header.hl .wrap { display: flex; align-items: center; gap: 22px; min-height: 74px }
.logo { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; white-space: nowrap; text-transform: uppercase }
.logo img { width: 34px; height: 34px; display: block }
.logo b { color: var(--zlata); font-weight: 800 }
nav.hlavni { margin-left: auto; display: flex; gap: 2px; align-items: center; flex-wrap: wrap }
nav.hlavni a { font-size: 14.5px; font-weight: 600; color: #b9bec7; padding: 9px 13px; border-radius: var(--r) }
nav.hlavni a:hover { color: var(--zlata) }
nav.hlavni a[aria-current="page"] { color: var(--zlata) }
nav.hlavni a.btn { margin-left: 8px }
/* Selektor `nav.hlavni a` má vyšší specificitu než `.btn-1` a přebil by barvu textu. */
nav.hlavni a.btn-1 { color: #17140a }
nav.hlavni a.btn-1:hover { color: #17140a }
@media (max-width: 940px) {
  header.hl .wrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; min-height: 0 }
  nav.hlavni { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none }
  nav.hlavni::-webkit-scrollbar { display: none }
  nav.hlavni a.btn { margin-left: 2px }
}

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; font-weight: 700; font-size: 15.5px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  font-family: Sora, 'Sora-zaloha', Inter, sans-serif; letter-spacing: -.01em;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px) }
.btn::after { content: "→"; font-weight: 400 }
.btn.bez-sipky::after { content: none }
.btn-1 { background: var(--zlata); color: #17140a }
.btn-1:hover { background: #ffcf4f }
.btn-2 { background: var(--cerna); color: #fff }
.btn-2:hover { background: var(--cerna-3) }
.btn-3 { background: transparent; color: #fff; border-color: #3a3f48 }
.btn-3:hover { border-color: var(--zlata); color: var(--zlata) }
.btn-4 { background: transparent; color: var(--ink); border-color: var(--linka) }
.btn-4:hover { border-color: var(--zlata) }
.cta-radek { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }

/* ---------- hero ---------- */
.hero { padding: 96px 0 88px }
.hero h1 { max-width: 17ch }
.hero h1 .z { color: var(--zlata); display: block }
.hero p.lead { font-size: clamp(17px, 1.9vw, 20.5px); color: #b9bec7; max-width: 56ch; margin: 0 }
.stitek {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zlata); margin-bottom: 24px;
}
.stitek::before { content: ""; width: 26px; height: 2px; background: var(--zlata) }
.hero-mriz { display: grid; gap: 44px; grid-template-columns: 1.4fr .9fr; align-items: center }
@media (max-width: 940px) { .hero-mriz { grid-template-columns: 1fr; gap: 34px } .hero { padding: 60px 0 56px } }
.hero-box { border: 1px solid #2c3038; border-left: 3px solid var(--zlata); padding: 26px 28px; background: rgba(255, 255, 255, .02) }
.hero-box h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--zlata); margin-bottom: 18px }
.hero-box ul { list-style: none; margin: 0; padding: 0 }
.hero-box li { padding: 11px 0; border-bottom: 1px solid #2c3038; font-size: 15.5px; color: #e6e8ec; font-weight: 600 }
.hero-box li:last-child { border-bottom: none }

/* ---------- nadpis sekce ---------- */
.nadpis-sekce { max-width: 60ch; margin-bottom: 40px }
.nadpis-sekce .oci { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zlata-tmava); margin-bottom: 14px }
.nadpis-sekce .oci::before { content: ""; width: 26px; height: 2px; background: var(--zlata) }
.tma .nadpis-sekce .oci { color: var(--zlata) }
.nadpis-sekce p { color: var(--ink-2); margin-bottom: 0 }

/* ---------- mřížky a karty ---------- */
.mriz { display: grid; gap: 1px }
.m2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.m3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.karta { padding: 30px 28px; background: var(--bila); outline: 1px solid var(--linka) }
.karta h3 { margin-top: 0 }
.karta p:last-child { margin-bottom: 0 }
.karta p { color: var(--ink-2); font-size: 16px }
a.karta { display: block; transition: background .15s }
a.karta:hover { background: var(--plocha); text-decoration: none }
a.karta .vic { color: var(--zlata-tmava); font-weight: 700; font-size: 14.5px; font-family: Sora, sans-serif }
a.karta:hover .vic { color: var(--ink) }
.mriz.na-tme .karta { background: var(--cerna); outline-color: #2c3038 }
.mriz.na-tme .karta p { color: #b9bec7 }

.cislo { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.cislo .p { padding: 26px 24px; background: var(--bila); outline: 1px solid var(--linka) }
.cislo .v { font-size: 38px; font-weight: 800; color: var(--ink); line-height: 1 }
.cislo .l { font-size: 14.5px; color: var(--seda); margin-top: 10px }

/* ---------- nabídkový blok ---------- */
.nabidka { border: 1px solid var(--linka); border-top: 3px solid var(--zlata); padding: 34px 32px; background: var(--bila) }
.nabidka h3 { margin-top: 0; font-size: 25px }
ul.polozky { list-style: none; padding: 0; margin: 22px 0 }
ul.polozky li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linka); font-size: 16px }
ul.polozky li b { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink) }
ul.polozky li.soucet { border-bottom: none; border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 15px; font-weight: 700 }
.cena-radek { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; padding-top: 24px; border-top: 1px solid var(--linka) }
.cena { font-size: 40px; font-weight: 800; color: var(--ink); letter-spacing: -.035em; line-height: 1 }
.cena-popis { font-size: 13.5px; color: var(--seda); letter-spacing: .02em }

/* ---------- rámečky ---------- */
.ram { border-left: 3px solid var(--zlata); background: var(--zlata-jemna); padding: 22px 26px; margin: 26px 0 }
.ram.tichy { background: var(--plocha); border-color: var(--linka) }
.ram .t { font-weight: 700; display: block; margin-bottom: 6px; font-family: Sora, sans-serif }
.ram p:last-child { margin-bottom: 0 }
.tma .ram { background: rgba(245, 189, 45, .07); border-color: var(--zlata) }
.tma .ram p { color: #d5d9df }

ul.cisty { margin: 0 0 1em; padding-left: 22px }
ul.cisty li { margin-bottom: 9px }
ul.odrazky { list-style: none; padding: 0; margin: 0 }
ul.odrazky li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--linka); font-size: 16.5px }
ul.odrazky li:last-child { border-bottom: none }
ul.odrazky li::before {
  content: ""; position: absolute; left: 4px; top: 1.35em; width: 9px; height: 9px;
  border: 2px solid var(--zlata); transform: rotate(45deg);
}
.tma ul.odrazky li { border-color: #2c3038; color: #d5d9df }

details.namitka { border-bottom: 1px solid var(--linka); padding: 20px 0 }
details.namitka summary { font-weight: 700; cursor: pointer; list-style: none; font-family: Sora, 'Sora-zaloha', sans-serif; font-size: 17.5px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start }
details.namitka summary::-webkit-details-marker { display: none }
details.namitka summary::after { content: "+"; color: var(--zlata-tmava); font-weight: 700; font-size: 22px; line-height: 1 }
details.namitka[open] summary::after { content: "–" }
details.namitka p { margin: 14px 0 0; color: var(--ink-2); max-width: 68ch }

blockquote.citace { margin: 0; padding: 26px 30px; background: var(--cerna); color: #e6e8ec; border-left: 3px solid var(--zlata) }
blockquote.citace p { color: #e6e8ec; font-size: 18px; margin-bottom: 0 }
blockquote.citace footer { margin-top: 14px; font-size: 14px; color: var(--seda) }

/* ---------- formulář ---------- */
form.f { display: grid; gap: 16px; max-width: 580px }
form.f label { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); display: grid; gap: 8px }
form.f input, form.f textarea {
  font: inherit; font-size: 16px; letter-spacing: normal; text-transform: none; font-weight: 400;
  padding: 13px 15px; border: 1px solid var(--linka); border-radius: var(--r); background: var(--bila); width: 100%; color: var(--ink);
}
form.f input:focus, form.f textarea:focus { border-color: var(--zlata); outline: none; box-shadow: 0 0 0 3px rgba(245, 189, 45, .22) }
form.f textarea { min-height: 140px; resize: vertical }
form.f .souhlas { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--seda); text-transform: none; letter-spacing: normal }
form.f .souhlas input { width: auto; margin-top: 3px }
.tma form.f label { color: #b9bec7 }
.tma form.f input, .tma form.f textarea { background: var(--cerna-2); border-color: #2c3038; color: #fff }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.stav { font-size: 15px; font-weight: 600; min-height: 1.4em }
.stav.chyba { color: #d64330 }
.stav.hotovo { color: var(--ok) }

/* ---------- patička ---------- */
footer.pt { background: var(--cerna); color: #9aa1ab; padding: 62px 0 30px; font-size: 15px }
footer.pt a { color: #d5d9df }
footer.pt a:hover { color: var(--zlata) }
footer.pt h4 { color: #fff; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; font-family: Sora, sans-serif }
footer.pt .mriz { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 34px }
footer.pt ul { list-style: none; padding: 0; margin: 0 }
footer.pt li { margin-bottom: 9px }
footer.pt .spodek { border-top: 1px solid #262a31; margin-top: 40px; padding-top: 22px; font-size: 13px; color: #6e757f }

/* ---------- cookie lišta ---------- */
#ck {
  position: fixed; inset: auto 18px 18px 18px; z-index: 90; max-width: 440px;
  background: var(--cerna); color: #d5d9df; border-left: 3px solid var(--zlata);
  padding: 22px 24px; box-shadow: 0 16px 44px rgba(0, 0, 0, .35); font-size: 15px;
}
#ck[hidden] { display: none }
#ck b { color: #fff; font-family: Sora, sans-serif }
#ck .tl { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap }
#ck .btn { padding: 10px 18px; font-size: 14px }

@media print {
  header.hl, footer.pt, #ck, .cta-radek { display: none }
  .tma { background: #fff; color: #000 }
  .tma::after { display: none }
  body { font-size: 11px }
}

/* ---------- komponenty uvnitř tmavého pásu ----------
   Řeší se stylem, ne třídou v šabloně — jinak by se na každou sekci muselo myslet zvlášť. */
.tma .karta, .tma .cislo .p { background: var(--cerna); outline-color: #2c3038 }
.tma .karta p, .tma .cislo .l { color: #b9bec7 }
.tma .karta h3, .tma .cislo .v { color: #fff }
.tma a.karta:hover { background: var(--cerna-2) }
.tma a.karta .vic { color: var(--zlata) }
.tma a.karta:hover .vic { color: #fff }

.tma .nabidka { background: var(--cerna-2); border-color: #2c3038; border-top-color: var(--zlata) }
.tma .nabidka h3 { color: #fff }
.tma ul.polozky li { border-color: #2c3038; color: #d5d9df }
.tma ul.polozky li b { color: #fff }
.tma ul.polozky li.soucet { border-top-color: var(--zlata) }
.tma .cena-radek { border-color: #2c3038 }
.tma .cena { color: #fff }
.tma .cena-popis { color: var(--seda) }

.tma details.namitka { border-color: #2c3038 }
.tma details.namitka summary { color: #fff }
.tma details.namitka p { color: #b9bec7 }
.tma blockquote.citace { background: rgba(255,255,255,.04) }
.tma main a:not(.btn):not(.karta), .tma a:not(.btn):not(.karta):not(.logo) { color: #fff }

/* ---------- mobilní menu ---------- */
.menu-tl { display: none; margin-left: auto; background: none; border: 1px solid #3a3f48; border-radius: var(--r); padding: 11px 12px; cursor: pointer }
.menu-tl span { display: block; width: 20px; height: 2px; background: #fff; transition: transform .2s, opacity .2s }
.menu-tl span + span { margin-top: 5px }
.menu-tl[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.menu-tl[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.menu-tl[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

@media (max-width: 940px) {
  .menu-tl { display: block }
  nav.hlavni {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    overflow: visible; gap: 0; padding: 10px 0 4px; border-top: 1px solid #262a31; margin-top: 12px;
  }
  nav.hlavni.otevreno { display: flex }
  nav.hlavni a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid #1d2127 }
  nav.hlavni a:last-of-type { border-bottom: none }
  nav.hlavni a.btn { margin: 12px 0 4px; justify-content: center }
}

/* ---------- konverzní vrstva ---------- */

/* Věta pod tlačítkem. Odpovídá na otázku "co se stane, když kliknu". */
.pod-cta { font-size: 14.5px; color: #8f959f; margin: 14px 0 0 }

/* Proužek důvěry. Doložitelná čísla hned pod heroem, dokud je člověk ještě nahoře. */
.duvera { background: var(--cerna-2); border-top: 1px solid #262a31; border-bottom: 1px solid #262a31 }
.duvera-mriz { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px }
.duvera-mriz > div { padding: 26px 24px 26px 0; display: flex; flex-direction: column; gap: 6px }
.duvera-mriz b { font-family: Sora, 'Sora-zaloha', sans-serif; font-size: 27px; font-weight: 800; color: var(--zlata); letter-spacing: -.03em; line-height: 1 }
.duvera-mriz span { font-size: 14px; color: #9aa1ab; line-height: 1.5 }

/* Kroky procesu. Snižují představu, kolik práce to bude stát zákazníka. */
ol.kroky { list-style: none; counter-reset: k; padding: 0; margin: 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
ol.kroky li { counter-increment: k; padding: 26px 24px 26px 0; position: relative }
ol.kroky li::before {
  content: counter(k); display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--zlata); color: var(--zlata);
  font-family: Sora, 'Sora-zaloha', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 16px;
}
ol.kroky b { display: block; font-family: Sora, 'Sora-zaloha', sans-serif; font-size: 17px; color: #fff; margin-bottom: 6px }
ol.kroky span { font-size: 15.5px; color: #b9bec7; line-height: 1.6 }

/* Bonusy stojí vizuálně jinde než placené položky. Jinak splynou a přestanou fungovat. */
ul.polozky li.bonus i { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--zlata-tmava); margin-right: 10px }
ul.polozky li.bonus b { color: var(--zlata-tmava) }
.tma ul.polozky li.bonus b, .tma ul.polozky li.bonus i { color: var(--zlata) }

/* Záruka přímo u ceny, ne o tři sekce níž. V místě rozhodnutí musí být vidět, kdo nese riziko. */
.zaruka-u-ceny { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; padding: 18px 20px; background: var(--zlata-jemna); border-left: 3px solid var(--zlata) }
.zaruka-u-ceny b { font-family: Sora, 'Sora-zaloha', sans-serif; font-size: 16px }
.zaruka-u-ceny span { font-size: 15px; color: var(--ink-2) }
.tma .zaruka-u-ceny { background: rgba(245, 189, 45, .08) }
.tma .zaruka-u-ceny b { color: #fff }
.tma .zaruka-u-ceny span { color: #b9bec7 }

/* Doporučená úroveň. Bez zvýraznění lidé z nejistoty sáhnou po nejlevnější. */
a.karta.doporucena { outline: 2px solid var(--zlata); position: relative; z-index: 1 }
.odznak { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #17140a; background: var(--zlata); padding: 4px 10px; margin-bottom: 14px }

/* Lepicí lišta na mobilu. U pohotovosti a poruch je telefon nejrychlejší cesta. */
.lista-mobil { display: none }
@media (max-width: 760px) {
  .lista-mobil {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    position: fixed; inset: auto 0 0 0; z-index: 80;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(16, 17, 20, .97); border-top: 1px solid #2c3038;
  }
  .lista-mobil .btn { padding: 13px 10px; font-size: 14.5px }
  body { padding-bottom: 76px }
  #ck { bottom: 84px }
}

/* Uzavírací blok na konci stránky. Kdo dočte až sem, je nejblíž rozhodnutí. */
.zaver { max-width: 620px }
.zaver h2 { margin-bottom: .4em }
.zaver p { font-size: 17.5px }

/* ---------- graf zatížení ---------- */
.graf { margin: 0; padding: 0 }
.graf svg { width: 100%; height: auto; display: block; overflow: visible }
.graf figcaption { margin-top: 20px; font-size: 14.5px; color: #767c86; max-width: 62ch; line-height: 1.6 }
/* Čára se dokreslí, až se graf dostane do záběru. Pohyb sem patří, protože
   ukazuje průběh v čase, ne aby se něco hýbalo. */
.graf-cara { stroke-dasharray: 4000; stroke-dashoffset: 4000 }
.graf.videt .graf-cara { animation: kresli 1.5s ease-out forwards }
@keyframes kresli { to { stroke-dashoffset: 0 } }

/* ---------- příběh firmy ---------- */
.pribeh { background: var(--plocha); padding: 84px 0 }
.pribeh-mriz { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center }
@media (max-width: 900px) { .pribeh-mriz { grid-template-columns: 1fr; gap: 34px } .pribeh { padding: 56px 0 } }
.pribeh-foto { margin: 0; position: relative }
.pribeh-foto img { display: block; width: 100%; filter: grayscale(1) contrast(1.06); position: relative; z-index: 2 }
/* Zlatý rám posunutý za fotku. Stejný motiv má klient na dnešním webu u portrétů. */
.pribeh-foto::after {
  content: ""; position: absolute; z-index: 1; inset: 16px -16px auto 16px; height: 100%;
  border: 2px solid var(--zlata); pointer-events: none;
}
.pribeh-foto figcaption { margin-top: 14px; font-size: 14px; color: var(--seda) }

ol.osa { list-style: none; padding: 0; margin: 0 0 26px }
ol.osa li { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--linka); align-items: baseline }
ol.osa li:last-child { border-bottom: none }
ol.osa b { font-family: Sora, 'Sora-zaloha', sans-serif; font-size: 19px; color: var(--zlata-tmava); letter-spacing: -.02em }
ol.osa span { font-size: 16px; color: var(--ink-2) }

.odznak-tichy { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--seda); margin-bottom: 12px }
.tma .odznak-tichy { color: var(--zlata) }

/* ---------- pohyb při scrollování ----------
   Jemný náběh, ne poskakování. Kdo má v systému vypnuté animace, nedostane žádné. */
.nabeh { opacity: 0; transform: translateY(18px); transition: opacity .5s ease-out, transform .5s ease-out }
.nabeh.videt { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  .nabeh { opacity: 1; transform: none; transition: none }
  .graf-cara { stroke-dashoffset: 0 }
  .graf.videt .graf-cara { animation: none }
}

/* Na úzkém displeji se SVG zmenší i s texty. Popisky proto zvětšíme v uživatelských
   jednotkách a detaily osy schováme, ať zůstane čitelné to podstatné. */
@media (max-width: 760px) {
  .graf svg .g-hlavni { font-size: 30px }
  .graf svg .g-vedlejsi { font-size: 26px }
  .graf svg .g-osa { font-size: 24px }
  .graf svg .g-dny:not(:first-of-type):not(:last-of-type) { display: none }
  .graf svg .g-spicka { display: none }
}

/* Odeslání formuláře je hlavní akce stránky, ne řádek mezi poli. */
.btn.velke { padding: 17px 30px; font-size: 16.5px; width: 100%; justify-content: center }
@media (min-width: 620px) { .btn.velke { width: auto; min-width: 300px } }
form.f .pod-cta { color: var(--seda) }
.tma form.f .pod-cta { color: #8f959f }

/* ---------- stěna log ---------- */
.loga-pas { background: var(--bila); border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); padding: 44px 0 }
.loga-nadpis { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--seda); margin: 0 0 30px }
.loga { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 26px; align-items: center }
.logo-dlazdice { display: flex; align-items: center; justify-content: center; padding: 10px }
.logo-dlazdice img {
  width: auto; max-width: 100%; max-height: 56px; display: block;
  /* Loga mají každé jinou barevnost. Do šedé je srovná, aby stěna působila jako celek,
     a při najetí se rozsvítí, ať je poznat, že jde o skutečné značky. */
  filter: grayscale(1) opacity(.55); transition: filter .2s;
}
.logo-dlazdice:hover img { filter: none }
@media (prefers-reduced-motion: reduce) { .logo-dlazdice img { transition: none } }

/* ---------- výsledky s číslem ---------- */
.vysledky { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px }
.vysledek { padding: 28px 26px 28px 0; display: flex; flex-direction: column; gap: 7px }
.vysledek b { font-family: Sora, 'Sora-zaloha', sans-serif; font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; color: var(--zlata); letter-spacing: -.035em; line-height: 1 }
.vysledek-popis { font-size: 15.5px; color: #d5d9df; line-height: 1.55 }
.vysledek-typ { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--seda); margin-top: 4px }

/* ---------- citace zákazníků ---------- */
.bg-plocha { background: var(--plocha) }
.citace-mriz { columns: 3 300px; column-gap: 22px }
@media (max-width: 700px) { .citace-mriz { columns: 1 } }
.citace-karta {
  break-inside: avoid; margin: 0 0 22px; background: var(--bila);
  border: 1px solid var(--linka); border-top: 3px solid var(--zlata); padding: 24px 26px;
}
.citace-karta p { font-size: 16px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.62 }
.citace-karta footer { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--linka) }
.citace-karta footer b { font-family: Sora, 'Sora-zaloha', sans-serif; font-size: 15.5px }
.citace-karta footer span { font-size: 13.5px; color: var(--seda) }

/* Ikony na kartách. Drží se zpátky: tenká linka, zlatá, žádná výplň ani rámeček.
   Mají kartu odlišit, ne přetáhnout pozornost z nadpisu. */
.ikona { width: 34px; height: 34px; display: block; color: var(--zlata-tmava); margin-bottom: 18px }
.tma .ikona { color: var(--zlata) }
a.karta:hover .ikona { color: var(--ink) }
.tma a.karta:hover .ikona { color: #fff }
@media (prefers-reduced-motion: no-preference) { .ikona { transition: color .15s } }

/* ---------- průchod proudu ----------
   Záměrně NE blesk přes celou obrazovku. Po webu proběhne světlo po lince,
   která už v návrhu je: spodní hrana hlavičky a zlaté vlásečnice u nadpisů.
   Vypadá to jako proud ve vodiči, ne jako bouřka nad krajinou. */

.vodic { position: relative }
.vodic.shora::after { top: -1px; bottom: auto }
.vodic::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245,189,45,.5) 22%, #fff 50%, rgba(245,189,45,.5) 78%, transparent 100%);
  box-shadow: 0 0 12px 1px rgba(245,189,45,.5);
  width: 26%; opacity: 0; pointer-events: none;
  transform: translateX(-45%);
  will-change: transform, opacity;
}
.vodic.proud::after { animation: proud-bezi .8s cubic-bezier(.35,0,.25,1) }
@keyframes proud-bezi {
  0%   { opacity: 0; transform: translateX(-45%) }
  10%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { opacity: 0; transform: translateX(345%) }
}

/* Lev v pozadí se na okamžik rozsvítí. Skokově, ne plynule, jinak to vypadá
   jako stmívač a ne jako výboj. */
.tma.zablesk::after { animation: vyboj .5s steps(1, end) }
@keyframes vyboj {
  0%, 100% { opacity: .05 }
  8%       { opacity: .17 }
  20%      { opacity: .06 }
  32%      { opacity: .13 }
  46%      { opacity: .05 }
}

@media (prefers-reduced-motion: reduce) {
  .vodic::after { display: none }
  .vodic.proud::after, .tma.zablesk::after { animation: none }
}

/* Hero po odstranění pravého boxu.
   Tři segmenty v něm byly dvakrát (seznam i tlačítka), potřetí v sekci pod
   proužkem důvěry a počtvrté v navigaci. Zůstal jeden slib a jedna akce,
   vpravo dýchá lev. */
/* Šířku drží nadpis a odstavec samy, ne obal. Obal ji škrtil na 27 znaků
   a nadpis se lámal na šest řádků. */
.hero-obsah { max-width: 62% }
.hero .lead { max-width: 46ch }
.hero::after { width: min(620px, 46vw); opacity: .06; right: 2% }
@media (max-width: 1000px) {
  .hero-obsah { max-width: none }
  .hero::after { opacity: .04; width: 86vw; right: -20% }
}

/* Drobečková navigace. Tichá, ale na hlubokých stránkách je to jediné,
   co návštěvníkovi řekne, kde je. */
.drobecky { background: var(--plocha); border-bottom: 1px solid var(--linka); font-size: 13.5px }
.drobecky .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 13px; padding-bottom: 13px }
.drobecky a { color: var(--seda); text-decoration: none }
.drobecky a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--zlata) }
.drobecky a + a::before, .drobecky a + span::before { content: "/"; color: var(--linka); margin-right: 8px }
.drobecky span { color: var(--ink); font-weight: 600 }

/* ---------- porovnání úrovní paušálu ---------- */
.tbl-porovnani { overflow-x: auto; -webkit-overflow-scrolling: touch }
table.porovnani { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--bila) }
table.porovnani caption { caption-side: top; text-align: left; font-size: 13.5px; color: var(--seda); padding-bottom: 14px }
table.porovnani th, table.porovnani td { border-bottom: 1px solid var(--linka); padding: 14px 18px; text-align: center; vertical-align: middle }
table.porovnani thead th { border-bottom: 2px solid var(--ink); padding: 20px 18px; vertical-align: bottom }
table.porovnani tbody th[scope="row"] { text-align: left; font-weight: 500; font-size: 15.5px; color: var(--ink-2); width: 38% }
.uroven { display: block; font-family: Sora, 'Sora-zaloha', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase }
.uroven-cena { display: block; font-family: Sora, 'Sora-zaloha', sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -.03em; margin-top: 8px }
.uroven-obdobi { display: block; font-size: 12.5px; color: var(--seda); font-weight: 400; margin-top: 4px }
.doporucena-sl { background: var(--zlata-jemna) }
thead .doporucena-sl { border-bottom-color: var(--zlata) }
table.porovnani .ano { color: var(--zlata-tmava); font-weight: 700; font-size: 18px }
table.porovnani .ne { color: var(--linka); font-weight: 700; font-size: 18px }
.radek-akce td { padding-top: 20px; padding-bottom: 20px }
.radek-akce th, .radek-akce td { border-bottom: none }
.vsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
@media (max-width: 640px) {
  table.porovnani th, table.porovnani td { padding: 11px 12px; font-size: 14px }
  .uroven-cena { font-size: 22px }
}

/* Chyba u konkrétního pole, ne až souhrn po odeslání. */
.pole-chyba { font-size: 13.5px; font-weight: 500; color: #d64330; text-transform: none; letter-spacing: normal }
.tma .pole-chyba { color: #ff8a7a }
form.f input[aria-invalid="true"], form.f textarea[aria-invalid="true"] { border-color: #d64330 }

/* Přímá odpověď hned pod nadpisem. Kdo přišel s otázkou, dostane ji zodpovězenou
   dřív, než začne číst zbytek. Modely citují právě tenhle odstavec. */
.odpoved-hned { border-left: 3px solid var(--zlata); padding: 4px 0 4px 26px }
.odpoved-hned h2 { font-size: clamp(20px, 2.4vw, 25px); margin-bottom: .5em }
.odpoved-hned p { font-size: 18px; color: var(--ink-2); margin: 0; max-width: 62ch }