/* ============================================================
   Levia – podstránky služeb (/sluzby, /sluzby/*), 23. 10. 2026
   Načítá se až po styles.css a přebírá jeho tokeny, tlačítka, nav, akordeon,
   kroky, kontaktní box i patičku. Tady jsou jen prvky, které homepage nemá.
   Pevné pravidlo: rámeček, stín, pozadí i záře se mění plynule – přechod je
   v základním stavu a stín má ve všech stavech stejný počet vrstev.
   ============================================================ */

::selection { background-color: rgba(109, 94, 252, .45); color: #fff; }


/* ============================ HERO PODSTRÁNKY ============================ */
.sh { position: relative; padding: 132px 0 0; }
.sh__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
}
.sh--stack .sh__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.sh--stack .sh__text { max-width: 820px; }
.sh--stack .sh__grid + * { margin-top: 56px; }

.crumbs { margin-bottom: 26px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; font-size: 13.5px; line-height: 1.3; color: var(--mesic); }
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px; margin: 0 12px;
  border-top: 1.5px solid var(--bridlice); border-right: 1.5px solid var(--bridlice);
  transform: rotate(45deg);
}
.crumbs a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--prach);
  border-radius: 4px;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: color var(--t-odkaz) var(--ease), outline-color var(--t-odkaz) var(--ease);
}
.crumbs a:focus-visible { outline-color: var(--mlhovina); }
@media (hover: hover) { .crumbs a:hover { color: var(--hvezda); } }
.crumbs [aria-current] { color: var(--hvezda); }

.sh__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.1vw, 3rem);
  line-height: 1.1;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}
.sh__lead {
  margin-top: 22px;
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--prach);
  text-wrap: pretty;
}
.sh__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 34px; }

/* Rámeček náhledu: stejný jazyk jako náhledy v rejstříku služeb na homepage */
.frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background-color: var(--grafit);
  box-shadow: 0 0 0 0 rgba(10, 11, 15, 0), 0 0 0 0 rgba(167, 139, 250, 0), 0 30px 70px -40px rgba(109, 94, 252, .55);
}
.frame { display: block; }
.frame img { display: block; width: 100%; height: auto; }
.frame--app { background: radial-gradient(ellipse at 50% 85%, rgba(109, 94, 252, .3), transparent 70%), var(--grafit); }
.frame--app img { width: 78%; margin: 0 auto; }
.media { margin: 0; min-width: 0; }
.frame figcaption, .figcap {
  font-size: 13px; line-height: 1.45; color: var(--mesic); margin-top: 12px;
}

/* ============================ SEKCE ============================ */
.sec { padding: 96px 0 0; }
.sec--last { padding-bottom: 24px; }
.sec__head { max-width: 760px; }
.sec__head .section__lead { max-width: 640px; }
.prose p { color: var(--prach); font-size: 17px; line-height: 1.65; max-width: 66ch; }
.prose p + p { margin-top: 14px; }
.prose strong { color: var(--hvezda); font-weight: 600; }

/* Signály „poznáte to podle toho, že…“: linkovaný seznam ve dvou sloupcích */
.sig {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 40px;
  border-top: 1px solid var(--linka);
}
.sig li {
  position: relative;
  padding: 20px 0 20px 34px;
  border-bottom: 1px solid var(--linka);
  font-size: 16.5px; line-height: 1.5; color: var(--hvezda);
}
/* značka: fajfka Hotovo ze sady Levia (stejná jako v konzultaci na homepage) */
.sig li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 20px; height: 20px; background: var(--mlhovina);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='miter' stroke-miterlimit='10'%3E%3Cpath d='M4 12.5l5.5 5.5L20 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='miter' stroke-miterlimit='10'%3E%3Cpath d='M4 12.5l5.5 5.5L20 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sig__after { margin-top: 26px; color: var(--prach); font-size: 16.5px; line-height: 1.6; max-width: 66ch; }

/* Příklady, co postavíme: dva sloupce, ikona ze sady Levia, bez krabic */
.ex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  margin-top: 44px;
}
.ex__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 20px;
  padding: 28px 0 30px;
  border-top: 1px solid var(--linka);
}
.ex__ico { position: relative; width: 28px; height: 28px; color: var(--mlhovina); }
.ex__ico::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(109, 94, 252, .26), rgba(109, 94, 252, .08) 55%, transparent);
}
.ex__ico svg { position: relative; width: 28px; height: 28px; display: block; }
.ex h3, .h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.2;
  letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; color: var(--hvezda);
  margin-bottom: 10px;
}
.ex p { color: var(--prach); font-size: 15.5px; line-height: 1.6; }

/* Řetěz kroků (cesta leadu, funnel): uzly se šipkou mezi sebou */
.chain {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: chain;
}
.chain li {
  position: relative;
  padding: 18px 16px 18px;
  margin-right: 22px;
  border-radius: 12px;
  background-color: #12131c;
  border: 1px solid var(--linka);
  font-size: 14.5px; line-height: 1.4; color: var(--hvezda);
}
.chain li:last-child { margin-right: 0; border-color: rgba(167, 139, 250, .45); background-color: #16152b; }
.chain li::after {
  content: ""; position: absolute; right: -17px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px;
  border-top: 1.5px solid var(--mlhovina); border-right: 1.5px solid var(--mlhovina);
  transform: rotate(45deg);
}
.chain li:last-child::after { display: none; }
.chain b {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mlhovina);
}
.chain small { display: block; margin-top: 4px; color: var(--mesic); font-size: 13px; line-height: 1.4; }
.chain--hero { margin-top: 8px; }
.chain__band {
  margin-top: 14px; padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(167, 139, 250, .4);
  font-size: 14px; line-height: 1.45; color: var(--prach);
  display: flex; gap: 10px; align-items: center;
}
.chain__band svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mlhovina); }

/* ============================ PŘÍPADOVKA ============================ */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 48px;
  align-items: start;
  margin-top: 44px;
  padding: 44px;
  border-radius: var(--radius);
  background-color: var(--plocha-karty);
  border: 1px solid var(--ramecek-karty);
}
.case + .case { margin-top: 24px; }
.case--text { grid-template-columns: minmax(0, 1fr); }
.case--text > div { max-width: 760px; }
.chain-wrap { margin-top: 36px; }
.case__who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mesic);
  margin-bottom: 14px;
}
.case__who strong { color: var(--mlhovina); font-weight: 500; }
.case h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.18; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance; color: #fff;
}
.case__dl { margin-top: 26px; display: grid; gap: 18px; }
.case__dl dt {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mlhovina); margin-bottom: 6px;
}
.case__dl dd { color: var(--prach); font-size: 16px; line-height: 1.62; }
.case__dl dd strong { color: var(--hvezda); font-weight: 600; }
.case__dl--top { margin-top: 0; padding-top: 4px; }
@media (min-width: 1081px) { .case__dl--top { margin-top: 74px; } }
.case__chain { margin-top: 28px; }
.case__side { display: grid; gap: 24px; min-width: 0; }
.quote-b { margin: 0; }
.quote-b p {
  font-size: 17px; line-height: 1.7; color: rgba(233, 236, 243, .92);
}
.quote-b p + p { margin-top: .8em; }
.quote-b footer {
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .9rem;
}
.quote-b img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(139, 125, 255, .6);
}
/* Avatar s iniciálami, dokud klient nepošle fotku: stejný rozměr i prstenec jako fotka. */
.quote-b__avatar {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; color: var(--hvezda);
  background: radial-gradient(120% 120% at 30% 20%, rgba(139, 125, 255, .45), rgba(109, 94, 252, .14) 70%);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(139, 125, 255, .6);
}
/* Jen osoba bez citace (citace zatím nedorazila): podpis pod výsledkem případovky. */
.quote-b--osoba footer { margin-top: 24px; }
.quote-b cite { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.quote-b cite strong { color: var(--hvezda); font-weight: 600; }
.quote-b cite span { color: var(--text-dim); font-size: .85rem; }
.case__video { display: grid; justify-items: center; }
.case__video .testi__video-wrap { margin-bottom: 0; }
.case__video .testi__video-wrap--siroke { max-width: 100%; }

/* ============================ POZNÁMKA (poctivá hranice) ============================ */
.note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: var(--radius);
  background-color: var(--plocha-karty);
  border: 1px solid rgba(167, 139, 250, .3);
}
.note svg { width: 28px; height: 28px; color: var(--mlhovina); }
.note h3 { margin-bottom: 10px; }
.note p { color: var(--prach); font-size: 16px; line-height: 1.62; max-width: 70ch; }
.note p + p { margin-top: 10px; }

/* ============================ SROVNÁNÍ ============================ */
.cmp-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--linka); }
.cmp thead th {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mesic);
}
.cmp thead th:nth-child(3) { color: var(--mlhovina); }
.cmp tbody th { color: var(--hvezda); font-weight: 600; width: 22%; }
.cmp td { color: var(--prach); }
.cmp td:nth-child(3) { color: var(--hvezda); background-color: rgba(109, 94, 252, .06); }

/* ============================ TECHNOLOGIE ============================ */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* Štítky nástrojů = .chip z homepage (styles.css): v klidu světlé monochromní logo, na hover
   plynule barva značky a záře. Doplněk pro vícebarevná loga (obrázek) a neutrální ikony. */
.chip__img {
  width: 18px; height: 18px; flex-shrink: 0; display: block;
  filter: grayscale(1) brightness(1.9) opacity(.82) drop-shadow(0 0 0 transparent);
  transition: filter var(--t-chip) var(--ease);
}
.chip__ico { display: block; width: 18px; height: 18px; flex-shrink: 0; color: rgba(233, 236, 243, .8); transition: color var(--t-chip) var(--ease); }
.chip__ico svg { width: 18px; height: 18px; display: block; }
@media (hover: hover) {
  .chip:hover .chip__img { filter: grayscale(0) brightness(1) opacity(1) drop-shadow(0 0 8px var(--brand, #fff)); }
  .chip:hover .chip__ico { color: var(--hvezda); }
}

/* ============================ AKCENTY POZADÍ ============================
   Stejný jazyk jako homepage: pás se září (jako sekce nástrojů a statistik) a měkká mlhovina
   za sekcí. Jen CSS přechody, žádné obrázky ani rozmazání; text leží nad nimi. */
.sec.sec--pas {
  position: relative; overflow: hidden;
  margin-top: 96px; padding: 60px 0 64px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(109, 94, 252, .18), transparent 55%),
    linear-gradient(180deg, rgba(139, 125, 255, .05), rgba(109, 94, 252, .06));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sec--pas::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1000px; height: 360px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(109, 94, 252, .3), rgba(109, 94, 252, .1) 55%, transparent);
}
.sec--mlha { position: relative; overflow-x: clip; } /* mlhovina přesahuje do stran, nesmí roztáhnout stránku */
.sec--mlha::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; right: -320px; width: 960px; height: 760px;
  background: radial-gradient(closest-side, rgba(109, 94, 252, .17), rgba(139, 125, 255, .06) 55%, transparent);
}
.sec--mlha-l::before { right: auto; left: -360px; top: 12%; }
.sec--pas > .container, .sec--mlha > .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .sec.sec--pas { margin-top: 72px; padding: 48px 0 52px; }
  .sec--pas::before { width: 600px; height: 300px; }
  .sec--mlha::before { width: 620px; height: 620px; right: -300px; }
  .sec--mlha-l::before { left: -300px; }
}

/* ============================ CENA ============================
   Jeden panel: vlevo „cenovka“ (pevná cena, platba 50/50, volitelně cena „od“), vpravo tři
   faktory bez ikon, dole volitelná poznámka. Panel není klikací, nemá hover. */
.cenovka {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  margin-top: 36px; overflow: hidden;
  border-radius: var(--radius); background-color: var(--plocha-karty); border: 1px solid var(--ramecek-karty);
}
.cenovka__hl {
  padding: 34px 36px 36px; border-right: 1px solid var(--linka);
  background: radial-gradient(120% 110% at 0% 0%, rgba(109, 94, 252, .16), transparent 62%);
}
.cenovka__od { display: grid; gap: 6px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--linka); }
.cenovka__od span { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mlhovina); }
.cenovka__od strong {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; color: #fff;
}
.cenovka__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.12; text-transform: uppercase; color: #fff; }
.cenovka__p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--prach); max-width: 40ch; }
.cenovka__lbl { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mesic); }
.cenovka__hl .cenovka__lbl { margin-top: 26px; }
.cenovka__platba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.cenovka__platba div { padding: 14px 16px 15px; border-radius: 12px; border: 1px solid rgba(167, 139, 250, .26); background-color: rgba(109, 94, 252, .08); }
.cenovka__platba b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; color: #fff; }
.cenovka__platba span { display: block; margin-top: 6px; font-size: 14px; color: var(--prach); }
.cenovka__fak { padding: 34px 36px 30px; }
.cenovka__fak ol { list-style: none; counter-reset: fak; margin-top: 8px; }
.cenovka__fak li { position: relative; counter-increment: fak; padding: 16px 0 16px 40px; border-bottom: 1px solid var(--linka); }
.cenovka__fak li:last-child { border-bottom: 0; padding-bottom: 0; }
.cenovka__fak li::before {
  content: counter(fak, decimal-leading-zero); position: absolute; left: 0; top: 18px;
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--mlhovina);
}
.cenovka__fak b { display: block; font-size: 16.5px; font-weight: 600; color: var(--hvezda); }
.cenovka__fak span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--prach); }
.cenovka__pozn { grid-column: 1 / -1; padding: 16px 36px 18px; border-top: 1px solid var(--linka); font-size: 14.5px; line-height: 1.55; color: var(--prach); }
@media (max-width: 860px) {
  .cenovka { grid-template-columns: minmax(0, 1fr); }
  .cenovka__hl { border-right: 0; border-bottom: 1px solid var(--linka); }
  .cenovka__hl, .cenovka__fak { padding: 26px 22px; }
  .cenovka__pozn { padding: 14px 22px 16px; }
}

/* ============================ TYPICKÉ SITUACE (karty) ============================ */
.sig2 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.sig2__k { padding: 22px 22px 22px; border-radius: 16px; background-color: var(--plocha-karty); border: 1px solid var(--ramecek-karty); }
.sig2__k svg { width: 24px; height: 24px; color: var(--mlhovina); display: block; }
.sig2__k b { display: block; margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--hvezda); }
.sig2__k p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--prach); }
@media (max-width: 900px) { .sig2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sig2 { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sig2__k { padding: 18px 18px 18px; } }

/* ============================ SOUVISEJÍCÍ SLUŽBY ============================
   Jediné karty na stránce, protože jsou to odkazy. Hover: rámeček Mlhovina,
   jemná plocha a stín; šipka se posune. Vše přes transition základního stavu. */
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.rel__card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 100%;
  padding: 26px 26px 24px;
  border-radius: var(--radius);
  background-color: var(--plocha-karty);
  border: 1px solid var(--ramecek-karty);
  outline: none;
  box-shadow: 0 0 0 0 rgba(10, 11, 15, 0), 0 0 0 0 rgba(167, 139, 250, 0), 0 18px 50px -30px rgba(109, 94, 252, 0);
  transition:
    border-color var(--t-karta) var(--ease),
    background-color var(--t-karta) var(--ease),
    box-shadow var(--t-karta) var(--ease);
}
.rel__card h3 { margin-bottom: 0; }
.rel__card p { color: var(--prach); font-size: 15px; line-height: 1.55; }
.rel__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px;
  font-weight: 600; font-size: 14.5px; color: var(--mlhovina);
}
.rel__go svg { width: 18px; height: 18px; transition: transform var(--t-karta) var(--ease); }
.rel__card:focus-visible { box-shadow: var(--ring), 0 18px 50px -30px rgba(109, 94, 252, 0); }
@media (hover: hover) {
  .rel__card:hover {
    border-color: rgba(167, 139, 250, .42);
    background-color: rgba(22, 21, 43, .72);
    box-shadow: 0 0 0 0 rgba(10, 11, 15, 0), 0 0 0 0 rgba(167, 139, 250, 0), 0 18px 50px -30px rgba(109, 94, 252, .55);
  }
  .rel__card:hover .rel__go svg { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .rel__go svg { transition: none; } .rel__card:hover .rel__go svg { transform: none; } }

/* FAQ podstránky: delší odpovědi s odstavci */
.faq-sub .accordion { margin-top: 40px; }

/* ============================ RESPONZIVITA ============================ */
@media (max-width: 1080px) {
  .sh__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sh__media { max-width: 640px; }
  .case { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .case__side { max-width: 620px; }
}
@media (max-width: 900px) {
  .rel { grid-template-columns: minmax(0, 1fr); }
  .chain { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; }
  .chain li { margin-right: 0; }
  .chain li::after { right: auto; left: 50%; top: auto; bottom: -17px; margin: 0 0 0 -5px; transform: rotate(135deg); }
}
@media (max-width: 760px) {
  .sh { padding-top: 104px; }
  .sh__lead { font-size: 17px; }
  .sh--stack .sh__grid + * { margin-top: 40px; }
  .sec { padding-top: 72px; }
  .sig, .ex { grid-template-columns: minmax(0, 1fr); column-gap: 0; gap: 0; }
  .case { padding: 26px 20px; margin-top: 32px; }
  .note { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 20px; }
}
@media (max-width: 640px) {
  /* srovnávací tabulka se na mobilu skládá do bloků po řádcích */
  .cmp-wrap { overflow: visible; }
  .cmp { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 16px 0; border-bottom: 1px solid var(--linka); }
  .cmp th, .cmp td { padding: 0; border: 0; }
  .cmp tbody th { margin-bottom: 10px; font-size: 16px; }
  .cmp td { padding: 10px 12px; border-radius: 10px; }
  .cmp td + td { margin-top: 6px; }
  .cmp td::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mesic);
  }
  .cmp td:nth-child(3)::before { color: var(--mlhovina); }
}
@media (max-width: 600px) {
  .sh__cta .btn-glow-wrap, .sh__cta .btn--ghost { width: 100%; }
  .sh__cta .btn--glow, .sh__cta .btn--ghost { width: 100%; }
}

/* ============================ BALÍČKY (mentoring) ============================
   Dvě pevné varianty vedle sebe, na mobilu pod sebou. Ladí s panelem .cenovka:
   stejná plocha, rámeček a fialový nádech. Karty nejsou klikací, interaktivní je jen CTA
   (tlačítka mají plynulé přechody ze styles.css). Doporučená varianta má jemně silnější
   rámeček a záři – statickou, bez skoku. */
.balicky { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; align-items: stretch; }
.balicek {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 34px 34px; border-radius: var(--radius);
  background-color: var(--plocha-karty); border: 1px solid var(--ramecek-karty);
}
.balicek--dop {
  border-color: rgba(167, 139, 250, .42);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(109, 94, 252, .2), transparent 60%),
    var(--plocha-karty);
  box-shadow: 0 0 0 1px rgba(109, 94, 252, .08), 0 24px 70px -30px rgba(109, 94, 252, .55);
}
.balicek__hl { display: block; }
.balicek__t { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mlhovina); }
.balicek__dop {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  position: absolute; top: 0; right: 28px; transform: translateY(-50%);
  padding: 6px 12px; border-radius: 999px; color: var(--hvezda); white-space: nowrap;
  border: 1px solid rgba(167, 139, 250, .55);
  background: linear-gradient(rgba(109, 94, 252, .28), rgba(109, 94, 252, .28)), #0c0d16;
}
.balicek__cena { margin-top: 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.02; color: #fff; }
.balicek__body { list-style: none; margin: 24px 0 30px; padding-top: 20px; border-top: 1px solid var(--linka); display: grid; gap: 14px; }
.balicek__body li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; color: var(--prach); }
.balicek__body svg { width: 20px; height: 20px; margin-top: 2px; color: var(--mlhovina); }
.balicek__body li:first-child span { color: var(--hvezda); font-weight: 600; }
.balicek__cta { margin-top: auto; align-self: flex-start; }
.balicky__pozn { margin-top: 18px; padding: 16px 4px 0; font-size: 14.5px; line-height: 1.55; color: var(--prach); display: grid; gap: 4px; }
@media (max-width: 860px) {
  .balicky { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .balicek { padding: 26px 22px 26px; }
  .balicek__dop { right: 20px; }
  .balicek__cta { align-self: stretch; }
}

/* ============================ ZAROVNÁNÍ (23. 10. 2026) ============================
   Jedno pravidlo pro všechny podstránky: nadpis sekce a krátký perex na střed, mřížky
   a panely pod nimi přes celou šíři kontejneru, obsah karet, seznamů, FAQ a ukázek vlevo.
   Krátké poznámky pod mřížkou (nejvýš dva řádky) na střed, aby neviselo jedno zarovnání
   vlevo pod centrovaným nadpisem. Hero zůstává dvousloupcové vlevo.
   Na mobilu (do 640 px) zůstává vše vlevo: perexy tam mají 3–5 řádků a centrovaný
   víceřádkový text se čte hůř; karty i seznamy pod nimi stejně začínají u levého okraje. */
@media (min-width: 641px) {
  .sec__head { margin-inline: auto; text-align: center; }
  .sec__head .section__title, .sec__head .section__lead { margin-inline: auto; }
  .faq-sub .section__title { margin-inline: auto; text-align: center; }
  .tags { justify-content: center; }
  .tags + .prose { text-align: center; }
  .tags + .prose p, .sig__after { margin-inline: auto; }
  .sig__after, .balicky__pozn { text-align: center; }
  .note { max-width: 880px; margin-inline: auto; }  /* text má max. 70ch, panel na celou šíři by zůstal vpravo prázdný */
}