/* ==========================================================================
   Sherpas TECH — design systém
   Tokeny a principy prevzate z produktove stranky app.maileon.site/datahub,
   ktera uz replikuje styl materskeho webu sherpas.cz.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Barva znacky. Na drobny text ani pod bile pismo nestaci - proti bile
     ma pomer 3,8 a WCAG chce na text 4,5. Patri proto jen tam, kde nic
     necte: ramecky, tecky, obrysy, podklady velkych ploch. */
  --red: #fb2942;
  /* Cokoli, co nese text: cerveny popisek, odkaz, pozadi tlacitka pod
     bilym pismem. Proti bile 5,1, bile pismo na ni 5,0. */
  --red-dark: #d81a31;
  /* Hover tlacitka - musi byt jeste tmavsi, aby bile pismo drzelo. */
  --red-deep: #c8172c;
  --ink: #1d1d20;
  --ink-2: #27272a;
  --gray: #52525b;
  /* Ztlumeny text. Puvodnich #7a7a83 melo na svetlem podkladu 3,9,
     coz je pod hranici pro 14px popisky, ve kterych se pouziva. */
  --muted: #6b6b74;
  --line: #e1e1e2;
  --bg: #fcfcfc;
  --bg-soft: #f4f4f5;

  --wrap: 1140px;
  --wrap-narrow: 760px;
  --radius: 8px;
  --radius-sm: 4px;
  --section-y: clamp(56px, 8vw, 104px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Aby cil kotvy neskoncil schovany pod lepivou hlavickou. */
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { color: var(--gray); }
a { color: inherit; }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

/* ---------- tlacitka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--red-dark); color: #fcfcfc; text-decoration: none;
  font-weight: 600; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 15px;
  border: 1px solid var(--red-dark); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Ikona vysilace se pri hoveru rozsviti smerem od stredu - stejny motiv
   jako na sherpas.cz, jen bez Lottie. */
.icon-signal { flex: none; transition: transform .25s ease; }
.btn:hover .icon-signal { transform: scale(1.12); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(251, 41, 66, .32); background: var(--red-deep); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; border-color: var(--ink); box-shadow: none; }

/* ---------- hlavicka ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; padding: 14px 0;
  background: rgba(252, 252, 252, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(225, 225, 226, .7);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Logotyp.
   Materska sherpas.cz ma "SHERPAS" jako vektorove krivky, ale sazene je
   ve stejnem pisme, ktere pouzivame i my (Plus Jakarta Sans - overeno
   z tabulky nazvu v jejich woff2). Aby slovo vypadalo stejne, musi mit
   stejny rez i prostrkani: tucne a stazene, ne lehke a rozstrkane.

   TECH je v lehcim rezu, ale se stejnym prostrkanim jako SHERPAS.
   Drive melo i vlastni prostrkani (.05em) a k tomu se scitala mezera
   z flex gapu - kombinace pusobila jako jine pismo. Ted je rozdil
   jen v tloustce, coz uz cte jako jeden logotyp s podznackou. */
.logo {
  /* Zamerne bez flex "gap" - ten by se uplatnil i mezi SHERPAS a TECH
     a secetl se s jejich vlastni mezerou. Odsazeni znacky proto resi
     margin primo na SVG. */
  display: flex; align-items: center; font-size: 1.3rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo-name,
.logo-sub { letter-spacing: .005em; }
.logo-name { font-weight: 800; }
.logo-sub { font-weight: 500; margin-left: .2em; }
.logo svg { flex: none; margin-right: 12px; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14px;
  padding: 8px 16px; border-radius: 6px; white-space: nowrap;
}
.nav-links a:hover { color: var(--red-dark); background: rgba(251, 41, 66, .07); }
/* Kde uzivatel prave je. Podtrzeni nese informaci i pro toho, kdo
   nerozlisuje barvy. */
.nav-links a.is-active {
  color: var(--ink); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--red);
  border-radius: 0;
}
.nav-links a.is-active:hover { background: transparent; color: var(--ink); }
.nav-links .nav-cta { color: #fcfcfc; margin-left: 8px; }
.nav-links .nav-cta:hover { color: #fcfcfc; background: var(--red-deep); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  padding: 10px; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Zlom navigace je 980, ne 900 jako u zbytku webu. Vodorovna navigace
   potrebuje 966 px okna (logo 206 + odkazy 696 + mezery a odsazeni) a pri
   900 px by mezi 901 a 966 pretekala pres logo. Cislo je zmerene, ne
   odhadnute - kdyz do menu pribude polozka, premerit znovu:
   document.querySelector('.nav-links').scrollWidth. Stejny zlom musi mit
   i pravidlo pro ustupujici logo v hlavicce nize, jinak by logo mizelo
   v rezimu, kde uz je misto nej hamburger. */
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 20px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 16px; }
  .nav-links .nav-cta { margin: 12px 0 0; text-align: center; padding: 14px; }
}

/* ---------- hero ---------- */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red-dark); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 62ch; margin-top: 18px; }

/* Hero bez obrazku: claim na stred, na plnou sirku, s velkym prostorem
   kolem. Vyraz prebrany ze stavajiciho sherpas.tech. */
/* Hero je zamerne bez grafiky - nese ho samotna typografie a prostor. */
.hero {
  padding: clamp(64px, 11vw, 152px) 0 clamp(56px, 8vw, 112px);
  text-align: center;
}
/* Hero dostava sirsi sloupec nez zbytek webu, aby se delsi radek claimu
   (45 znaku) vesel na jeden radek a nadpis mohl zustat velky. */
.hero .wrap { max-width: 1280px; }

/* Vypisovani claimu. Bez JS (a tedy bez tridy .js) se nic neskryva. */
.js .hero-claim {
  visibility: hidden;
  /* Pojistka: kdyby se main.js nenacetl, nadpis se po 2 s ukaze i tak. */
  animation: claimFailsafe 1ms linear 2s forwards;
}
.hero-claim.is-typed { visibility: visible; animation: none; }
@keyframes claimFailsafe { to { visibility: visible; } }

.hero-claim .ch { opacity: 0; animation: charIn 90ms linear forwards; }
@keyframes charIn { to { opacity: 1; } }
.hero-claim {
  /* Zakladni rez lehci, zvyraznena slova tucne - stejny princip jako na
     stavajicim webu.
     Stupen je zamerne nizsi nez u ostatnich H1: claim ma sedet na dva
     radky, jak je zvykly ze stavajiciho webu, a delsi z nich ma 45 znaku.
     Pri vetsim pismu by se zalomil na tri. Sirku drzi .wrap, ne max-width. */
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.25;
  margin: 0 auto;
}
.hero-claim strong { font-weight: 800; }
.hero .lead { margin: 30px auto 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; justify-content: center; }

/* Pod touhle sirkou uz se delsi radek claimu nevejde (clamp narazi na sve
   minimum a pismo dal neklesa), takze zalomeni prenechame prohlizeci. */
@media (max-width: 900px) {
  .hero-break { display: none; }
}

.page-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); }
/* Uzky hero musi mit stejny sloupec jako .wrap-narrow pod nim, jinak
   nadpis a text zacinaji na jine leve hrane. */
.page-hero-narrow .wrap { max-width: var(--wrap-narrow); }
.page-hero-narrow .lead { max-width: 68ch; }
/* Odsazeni hera a odsazeni sekce pod nim se scitaji. Pri plnych hodnotach
   to na siroke obrazovce delalo 152 px mezi perexem a prvnim radkem obsahu
   (48 + 104) - mezera, ktera vypadala jako chybejici kus stranky. Sekce
   pod herem proto bere mensi horni odsazeni; mezi sekcemi navzajem zustava
   plne, tam oddeluje dve rovnocenne casti, ne nadpis od vlastniho obsahu. */
.page-hero + .section { padding-top: clamp(32px, 4vw, 56px); }

/* Hero bez perexu (kontakt) - pod samotnym nadpisem je i tahle mezera
   porad zbytecne velka. */
.page-hero-tight { padding-bottom: 0; }
.page-hero-tight + .section { padding-top: clamp(28px, 3.5vw, 48px); }

.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red-dark); }
.crumbs span[aria-hidden] { margin: 0 4px; opacity: .5; }

/* ---------- KPI ---------- */
.kpi-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 32px; }
/* Na stred, aby pas navazoval na centrovany hero. */
.kpi { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.kpi-value { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
.kpi-label { font-size: 14px; color: var(--muted); line-height: 1.45; }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* Pripadovky maji cisla tri, ne ctyri. Musi stat az za pravidlem vyse -
   specificita je stejna, rozhoduje poradi. Na uzkem displeji jdou pod sebe:
   pri dvou sloupcich by treti cislo zustalo samo na druhem radku. */
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .kpi-grid-3 { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- sekce ---------- */
.section { padding: var(--section-y) 0; }
.section.soft { background: var(--bg-soft); }
/* Pro sekci, ktera konci dlazdicemi misto textu - karty uz samy nesou
   vnitrni odsazeni, takze plna spodni mezera pusobi zbytecne velka. */
.section-tight-bottom { padding-bottom: clamp(32px, 4.5vw, 60px); }
.section-tight-top { padding-top: clamp(32px, 4.5vw, 60px); }
/* Dve sekce za sebou se stejnym pozadim splyvaji do jedne plochy, takze
   mezi nimi nestoji nic nez prazdno - a to bylo 208 px (104 zdola + 104
   shora). Tam, kde se pozadi mezi sekcemi meni, plna mezera smysl dava:
   hranici drzi barva. Proto se sraz jen u dvojic se stejnym pozadim, a to
   pres :not(.soft) na obou stranach, ne jen na te druhe - jinak by pravidlo
   chytlo i bilou sekci po sede. Tyka se skupin modulu na /produkty,
   referenci po studii na homepage a dvojice sekci na /reference. */
.section:not(.soft) + .section:not(.soft),
.section.soft + .section.soft { padding-top: clamp(24px, 3vw, 40px); }
.section-head { margin-bottom: 40px; max-width: 70ch; }
.section-head-sub { margin-top: 64px; }
.group-note { color: var(--muted); margin-top: 6px; }

/* ---------- dva produkty ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Sloupec, aby se odkaz dal pribit ke spodni hrane. Karty jsou v mrizce
   stejne vysoke, takze odkazy pak zacinaji v obou ve stejne urovni -
   driv si kazda karta resila vysku sama a spodek se rozesel pokazde, kdyz
   se v jedne karte zalomila polozka schematu na dva radky. */
.duo-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.duo-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(29, 29, 32, .07); }
.duo-card-wide { max-width: none; }
.duo-dir {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.duo-card :is(h2, h3) { font-size: 1.5rem; margin-bottom: 10px; }
/* Schema vyplni zbyle misto a vystredi se v nem - jinak by u karty s
   nizsim schematem zustala pod nim vetsi dira nez u sousedni. */
.duo-card .flow { margin-top: 20px; flex: 1; align-content: center; }
.duo-more { display: inline-block; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--red-dark); }


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

/* Pas se schematem pod hero produktu. Mezera nad nim je vetsi nez pod
   nim: hero ma nechat vyznit claim a schema patri uz k obsahu stranky,
   ne k nemu. */
.flow-band { padding: clamp(32px, 5vw, 72px) 0 0; }
.flow-band + .section { padding-top: clamp(40px, 5vw, 72px); }

/* ---------- schema toku dat u produktu ---------- */
/* Vstup -> nastroj -> vystup. Delane z textu, ne z obrazku: text se da
   vybrat, prelozit i precist cteckou a roste s velikosti pisma. */
.flow {
  display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr;
  align-items: center; gap: 0 18px;
}
.flow-krok { min-width: 0; }
.flow-popis {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
/* Stejne vysoke radky, at se sloupec nerozjede, kdyz se jedna polozka
   zalomi na dva radky. */
.flow-seznam { list-style: none; display: grid; gap: 6px; grid-auto-rows: 1fr; }
.flow-seznam li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 14px; color: var(--ink-2); line-height: 1.3;
}
/* Vystup je to, co z nastroje leze - odlisen barvou znacky, aby bylo
   videt, kterym smerem se schema cte. */
.flow-seznam-vystup li { border-color: rgba(251, 41, 66, .35); color: var(--ink); font-weight: 600; }

.flow-hub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; min-height: 108px;
  background: var(--ink); border-radius: var(--radius); padding: 20px 16px;
}
.flow-hub-nazev { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.flow-hub-note { color: rgba(252, 252, 252, .7); font-size: 12.5px; }

/* Sipka je jen cara s hrotem, kresli se ramecky - zadny obrazek. */
.flow-sipka { position: relative; width: 34px; height: 2px; background: rgba(251, 41, 66, .5); border-radius: 2px; }
.flow-sipka::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  border: 5px solid transparent; border-left-color: rgba(251, 41, 66, .5);
}

/* Mensi varianta na kartach: bez popisku sloupcu a s uzsimi mezerami. */
.flow-male { gap: 0 10px; }
.flow-male .flow-popis { display: none; }
.flow-male .flow-seznam li { padding: 6px 9px; font-size: 12.5px; }
.flow-male .flow-hub { min-height: 0; padding: 14px 10px; }
.flow-male .flow-hub-nazev { font-size: 14px; }
.flow-male .flow-sipka { width: 14px; }

/* Schema se sklada pod sebe podle mista, ktere ma - ne podle sirky
   okna. Na karte je uzke uz pri sirokem displeji (dva sloupce vedle
   sebe), takze media query podle okna by ho nechala smacknout na
   sedesat pixelu na sloupec. Proto container query. */
.flow-band .wrap,
.duo-card { container-type: inline-size; }

/* 440 px je mez, pod kterou uz tri sloupce vedle sebe nedavaji smysl:
   kazdy by mel kolem stovky pixelu a nazvy by se lamaly po slabikach.
   Karta na desktopu ma uvnitr 472 px, takze zustava vodorovna. */
@container (max-width: 440px) {
  .flow { grid-template-columns: 1fr; gap: 12px 0; justify-items: stretch; }
  /* Specificita musi prebit ".flow-male .flow-sipka" vys, jinak na uzke
     karte zustane sirka 34/14 px a ze sipky je cerveny obdelnik. */
  .flow .flow-sipka { width: 2px; height: 22px; justify-self: center; }
  .flow .flow-sipka::after {
    right: -4px; top: auto; bottom: -6px;
    border-left-color: transparent; border-top-color: rgba(251, 41, 66, .5);
  }
  .flow-seznam { grid-auto-rows: auto; }
}

/* Zaloha pro prohlizece bez container queries - podle okna. */
@supports not (container-type: inline-size) {
  @media (max-width: 620px) {
    .flow { grid-template-columns: 1fr; gap: 12px 0; }
    .flow .flow-sipka { width: 2px; height: 22px; justify-self: center; }
    .flow .flow-sipka::after {
      right: -4px; top: auto; bottom: -6px;
      border-left-color: transparent; border-top-color: rgba(251, 41, 66, .5);
    }
  }
}

/* ---------- mrizka modulu ---------- */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.module-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(29, 29, 32, .07); }
.module-card h3 { font-size: 1.05rem; margin: 12px 0 8px; }
.module-card p { font-size: 14.5px; flex: 1; }
.module-more { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--red-dark); }
@media (max-width: 980px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .module-grid { grid-template-columns: 1fr; } }

.badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px; align-self: flex-start;
}
.badge-data-hub { background: rgba(251, 41, 66, .1); color: var(--red-deep); }
.badge-analytics-hub { background: rgba(29, 29, 32, .07); color: var(--ink); }

/* ---------- karty a kroky ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step-num { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--red-dark); margin-bottom: 12px; }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 14.5px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- detail modulu ---------- */
.use-box {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 48px;
}
.use-box h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.use-box p { color: var(--ink-2); }

.feature-head { margin-bottom: 28px; }
.feature-list { display: grid; gap: 4px; }
.feature { padding: 20px 0; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature dt { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.feature dd { color: var(--gray); margin: 0; }

/* ---------- sluzby ---------- */
.service-list { display: grid; gap: 0; }
.service-row {
  display: grid; grid-template-columns: 1.4fr .6fr; gap: 32px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--line); text-decoration: none;
  transition: padding-left .15s ease;
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row:hover { padding-left: 8px; }
.service-row:hover :is(h2, h3) { color: var(--red-dark); }
.service-row :is(h2, h3) { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 8px; transition: color .15s ease; }
/* Sipka rika, ze radek nekam vede. Je videt i bez najeti - afordance, ktera
   se objevi az pri hoveru, na dotykovem zarizeni neexistuje a mysi uzivatel
   ji najde az nahodou. Stejny znak pouzivaji produktove karty i "Vsechny
   clanky →", takze web nezavadi novy slovnik. */
.service-row :is(h2, h3)::after {
  content: "→"; display: inline-block; margin-left: .4em;
  color: var(--muted); font-weight: 400;
  transition: color .15s ease, transform .15s ease;
}
.service-row:hover :is(h2, h3)::after { color: var(--red-dark); transform: translateX(4px); }
/* Stitky jsou tichy radek, ne bubliny. Ramecky pilulek souperily s linkami
   mezi sluzbami a drobna seda uvnitr nich nedosahovala na kontrast pozadovany
   pro maly text. Takhle je to jen metadata k nadpisu - a sedi to k webu, ktery
   nese vyraz typografii, ne dekoraci. */
.tags { list-style: none; font-size: 13px; line-height: 1.75; color: var(--gray); }
/* nowrap drzi viceslovny stitek pohromade - bez nej se lamal uprostred
   ("komunikacni / plan") a cetlo se to jako dva ruzne stitky. */
.tags li { display: inline-block; white-space: nowrap; }
/* Oddelovac je svetlejsi nez text, aby delil a netahal na sebe pozornost.
   Patri PRED stitek, ne za nej: diky nowrap zustane prilepeny k nasledujicimu
   slovu, takze pri zalomeni zacina novy radek teckou misto aby predchozi radek
   koncil osirelou teckou. */
.tags li:not(:first-child)::before { content: "·"; margin: 0 .45em; color: var(--muted); }

/* V radku sluzby drzi stitky pravou hranu mrizky, jinak by v uzsim sloupci
   plavaly vlevo a vpravo zustavalo prazdno. */
.service-row .tags { text-align: right; transition: color .15s ease; }
.service-row:hover .tags { color: var(--red-dark); }
.service-row:hover .tags li::before { color: var(--red-dark); opacity: .5; }

.tags-hero { margin-top: 24px; }
@media (max-width: 760px) {
  .service-row { grid-template-columns: 1fr; gap: 16px; }
  /* V jednom sloupci uz neni proti cemu pravou hranu drzet - stitky by
     visely na opacne strane nez nadpis i popis nad nimi. */
  .service-row .tags { text-align: left; }
}

/* ---------- problemy ---------- */
.problem-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.problem-list li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px 18px 46px; position: relative; color: var(--ink-2); font-size: 15.5px;
}
/* Cervena odrazka, ne uvozovka. Uvozovka tu drive byla jako dekorace,
   ale otviraci bez zaviraci slibuje citaci, ktera nikdy neskonci. */
.problem-list li::before {
  content: ""; position: absolute; left: 22px; top: 27px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
}
.problem-cta { margin-top: 32px; }
@media (max-width: 760px) { .problem-list { grid-template-columns: 1fr; } }

/* ---------- loga ---------- */
.logo-grid {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; align-items: center;
}
.logo-grid li {
  display: flex; align-items: center; justify-content: center; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; min-height: 96px;
}
.logo-grid img {
  max-height: 40px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease;
}
.logo-grid li:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- pripadove studie ---------- */

/* auto-fit, ne pevny pocet sloupcu: pripadovek je zatim jedna a pri
   pevnych dvou sloupcich by karta zabrala pulku radku a vedle ni zustala
   dira. Takhle se jedina karta roztahne pres celou sirku a vypada to
   zamerne, dve se srovnaji vedle sebe. */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
/* Na homepage stoji karty nad mrizkou log, ktera ma vlastni horni mezeru. */
.case-grid-hp { margin-bottom: 28px; }

.case-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.case-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(29, 29, 32, .07); }

.case-card-cover { position: relative; display: block; background: var(--bg-soft); }
/* Pomer stran drzi ram, obrazek se do nej oreza - snimky obrazovky maji
   ruzne pomery a bez toho by kazda karta byla jinak vysoka. */
.case-card-cover img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
/* Logo klienta v rohu obrazku: samotny snimek obrazovky nerekne, ci je.
   Bily podklad proto, ze loga jsou tmava a pozadi snimku byva pestre. */
.case-card-logo {
  position: absolute; left: 16px; top: 16px; display: flex; align-items: center;
  background: #fff; border-radius: 8px; padding: 8px 12px; box-shadow: 0 2px 10px rgba(29, 29, 32, .12);
}
.case-card-logo img { display: block; max-height: 26px; width: auto; object-fit: contain; }

.case-card-body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 32px; }
.case-card-sector {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.case-card :is(h2, h3) { font-size: 1.5rem; margin-bottom: 10px; }
.case-card p { color: var(--gray); }

/* Stitky sluzeb, jako na materskem webu. Nejsou to odkazy - cela karta uz
   odkazem je a odkaz v odkazu neni platne HTML. */
.case-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.case-card-tags span {
  font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}

/* Osamela karta zabira cely radek a na vysku by z ni byl pruh pres pul
   obrazovky - proto se prekloni na vodorovne rozlozeni. Jakmile pripadovek
   pribude, mrizka je zuzi a plati zase svisle, bez zasahu do sablony.

   Container query tu byla driv a nefungovala: dotaz nikdy neplati na prvek,
   ktery je sam kontejnerem, takze .case-card se sebou merit nemuze.
   :has(> :only-child) resi presne to, o co jde - jestli je karta v mrizce
   sama - a nemusi kvuli tomu pribyt obalujici znacka. */
@media (min-width: 700px) {
  .case-grid:has(> .case-card:only-child) .case-card { flex-direction: row; }
  .case-grid:has(> .case-card:only-child) .case-card-cover { flex: 0 0 42%; }
  .case-grid:has(> .case-card:only-child) .case-card-cover img { height: 100%; aspect-ratio: auto; }
  /* Bez justify-content: odkaz dole ma margin-top: auto a to by se
     s vystredenim pralo - auto margin vyhrava a text by se rozjel. */
  .case-grid:has(> .case-card:only-child) .case-card-body { padding: 36px 40px; }
}

/* Udaje o spolupraci. Popisky jsou uzky sloupec, hodnota vedle nich -
   ctyri radky pod sebou se ctou rychleji nez dlazdice. */
.case-meta {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px;
  padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 40px; font-size: 15px;
}
.case-meta > div { display: contents; }
.case-meta dt { color: var(--muted); }
.case-meta dd { margin: 0; color: var(--ink-2); }
.case-meta a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.case-meta a:hover { color: var(--red-dark); }

.case-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.case-intro h2 { font-size: 1.25rem; margin-bottom: 8px; }
.case-intro p { color: var(--gray); }

/* Jedina veta, ktera shrnuje, proc se do toho slo. Cervena linka vlevo ji
   odlisi od bezneho odstavce, aniz by z ni delala citaci. */
.case-challenge {
  margin-top: 32px; padding-left: 18px; border-left: 3px solid var(--red);
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
}

/* Ukázka z implementace. Rámeček je tu proto, že snímky obrazovky mají bílé
   pozadí a bez něj by splynuly se stránkou a vypadaly jako součást sazby. */
.case-figure { margin: 32px 0 0; }
.case-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.case-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; }

.case-quote { margin: 40px 0 0; padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.case-quote blockquote { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
/* Uvozovky sazi prohlizec podle jazyka dokumentu, tedy cesky "dole a nahore". */
.case-quote blockquote::before { content: open-quote; }
.case-quote blockquote::after { content: close-quote; }
.case-quote figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.case-quote figcaption strong { display: block; color: var(--ink); }
/* Na svetle sekci by bila karta splynula s pozadim. */
.section:not(.soft) .case-quote { background: var(--bg-soft); }

.case-conclusion-head { font-size: 1.25rem; margin-top: 48px; margin-bottom: 10px; }
.case-conclusion { color: var(--gray); }

@media (max-width: 720px) {
  .case-intro { grid-template-columns: 1fr; gap: 24px; }
  /* Popisek nad hodnotou, ne vedle ni. display: contents musi pryc - prvek
     s nim nemuze mit vlastni mezeru a radky by se slily do jednoho bloku. */
  .case-meta { display: block; }
  .case-meta > div { display: block; }
  .case-meta > div + div { margin-top: 14px; }
  .case-quote { padding: 24px; }
}

/* ---------- studie ----------
   Vlastni vyzkum je hlavni zdroj legitimity. Aby se odlisil od ostatniho
   obsahu, je to tmava karta na svetle sekci - tedy jiny utvar nez bile
   karty vyse i nez celoplosny tmavy CTA pas dole. */
.study-box {
  /* center, ne start: sloupec s cisly je vyrazne kratsi nez text vedle
     a u horni hrany by pod nim zustala velka prazdna plocha. */
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center;
  background: var(--ink); border-radius: var(--radius);
  padding: clamp(32px, 4vw, 56px);
  position: relative; overflow: hidden;
}
/* Jemny cerveny nadech v rohu, aby tmava plocha nebyla placata. */
.study-box::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 100% 0%, rgba(251, 41, 66, .22), transparent 70%);
}
.study-box > * { position: relative; }

.study-box h2 { color: #fcfcfc; }
.study-box .lead { color: rgba(252, 252, 252, .74); }
.study-sub {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(252, 252, 252, .5); margin-top: 10px;
}
.study-findings { list-style: none; margin: 28px 0 32px; display: grid; gap: 10px; }
.study-findings li {
  position: relative; padding-left: 26px; font-size: 15.5px;
  color: rgba(252, 252, 252, .88);
}
.study-findings li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
}
.study-note { font-size: 14px; color: rgba(252, 252, 252, .55); }

.study-stats {
  display: grid; gap: 20px; border-radius: var(--radius); padding: 32px;
  background: rgba(252, 252, 252, .06);
  border: 1px solid rgba(252, 252, 252, .12);
}
.study-stat { display: flex; flex-direction: column; gap: 2px; }
.study-stat-value {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: #fcfcfc;
  letter-spacing: -0.03em; line-height: 1.05;
}
.study-stat-label { font-size: 14px; color: rgba(252, 252, 252, .6); line-height: 1.45; }

@media (max-width: 860px) {
  .study-box { grid-template-columns: 1fr; gap: 32px; }
  .study-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) { .study-stats { grid-template-columns: 1fr; } }

/* ---------- zkratky do skupin modulu ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chips a {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 18px; font-size: 14.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.chips a:hover { border-color: var(--red); color: var(--red-dark); }
.chips a span {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--bg-soft); border-radius: 100px; padding: 1px 8px;
}
.chips a:hover span { color: var(--red-dark); }

/* Odkaz "vice" pod sekci. */
.section-more { margin-top: 28px; }
.section-more a { color: var(--red-dark); font-weight: 600; font-size: 15px; text-decoration: none; }
.section-more a:hover { text-decoration: underline; }

/* ---------- clanky z blogu ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.article-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.article-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(29, 29, 32, .07); }
.article-card h3 { font-size: 1.1rem; margin-bottom: 16px; flex: 1; }
.article-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.article-tags li { font-size: 12px; color: var(--red-dark); font-weight: 600; }
/* Nazvy temat jsou viceslovne, bez oddelovace by dva vedle sebe splynuly. */
.article-tags li + li::before { content: "·"; margin-right: 8px; opacity: .5; }
.article-date { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } }

/* ---------- zaverecne CTA ---------- */
.cta-band { background: var(--ink); padding: var(--section-y) 0; }
.cta-band h2 { color: #fcfcfc; max-width: 20ch; }
.cta-band p { color: rgba(252, 252, 252, .72); max-width: 62ch; margin-top: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.cta-mail { color: rgba(252, 252, 252, .72); text-decoration: none; font-size: 15px; }
.cta-mail:hover { color: #fcfcfc; }

/* ---------- formular ---------- */
.contact-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
/* Cervena patri jen hvezdicce u povinnych poli, ne kazdemu spanu
   uvnitr labelu - proto se selektor pta na aria-hidden. */
.field label span[aria-hidden] { color: var(--red-dark); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(251, 41, 66, .12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.error { color: var(--red-dark); font-size: 13.5px; margin-top: 6px; }

.form-note { font-size: 14px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* Honeypot - musi zustat v DOM a byt dostupny botum, ale neviditelny lidem.
   Zamerne ne display:none, nektere boti takova pole preskakuji. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--radius); padding: 24px 28px; margin-bottom: 24px; }
.alert-ok { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red); }
.alert-ok h2 { font-size: 1.4rem; margin-bottom: 8px; }
.alert-error { background: rgba(251, 41, 66, .06); border: 1px solid rgba(251, 41, 66, .25); }
.alert-error p { color: var(--red-dark); margin: 0; }

.contact-side { background: var(--bg-soft); border-radius: var(--radius); padding: 32px; }
.contact-side-head { font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; }
.contact-line { margin-bottom: 20px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.contact-line:last-child { margin-bottom: 0; }
.contact-line a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-line a:hover { color: var(--red-dark); border-color: var(--red); }
.contact-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
/* Adresa je viceradkova - plne podtrzeni z .contact-line a by pod kazdym
   radkem kreslilo silnou linku. Svetle podtrzeni s odsazenim porad rekne,
   ze je to odkaz, ale blok neztezkne. */
.contact-line a.map-link {
  border-bottom: 0; text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px;
}
.contact-line a.map-link:hover { color: var(--red-dark); text-decoration-color: var(--red-dark); }
/* Popisek nad hodnotou, ne vedle ni: sloupec je uzky a IBAN by se ve dvou
   sloupcich lamal uprostred cisla. Tabularni cislice, at neposkakuji. */
.contact-bank { display: grid; gap: 10px; font-variant-numeric: tabular-nums; }
.contact-bank dt {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.contact-bank dd { margin: 0; white-space: nowrap; }
.contact-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* ---------- pravni stranky ----------
   Souvisla proza s nadpisy a definicnimi seznamy. Radek drzime kratsi nez
   u bezneho textu (wrap-narrow) - u delsiho pravniho textu je to rozdil
   mezi "da se to precist" a "presel jsem to". */
.legal h2 { font-size: 1.35rem; margin: 48px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin: 28px 0 8px; }
.legal p { margin-bottom: 14px; }
.legal a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal a:hover { color: var(--red-dark); text-decoration-color: var(--red-dark); }
.legal strong { color: var(--ink); }

/* Dvojice pojem - vysvetleni. Levy sloupec je uzky a pevny, aby pojmy
   drzely spolecnou hranu a text vedle nich zacinal na stejnem miste. */
.legal-list { display: grid; gap: 16px; margin: 18px 0 24px; }
.legal-list > div { display: grid; grid-template-columns: 190px 1fr; gap: 20px; }
.legal-list dt { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.6; }
.legal-list dd { margin: 0; color: var(--gray); }
@media (max-width: 620px) {
  .legal-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Domeny a technicke nazvy - odlisene, ale bez odkazu, protoze na ne
   nechceme posilat kliknutim. */
.legal-mono { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

/* ---------- caste otazky ----------
   Otevrene, ne v rozbalovacich blocích: obsah schovany za klikem ctou
   jazykove modely hur a navstevnik si stejne projede vsechny. */
.faq { display: grid; gap: 28px; }
.faq-item { border-top: 1px solid var(--line); padding-top: 24px; }
.faq-item dt { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.faq-item dd { margin: 0; color: var(--ink-2); line-height: 1.7; }

/* ---------- kontaktni osoby ----------
   Fotky jsou na sirku i na vysku, proto pevny ctvercovy ram a object-fit:
   jinak by kazdy medailonek zacinal jinde a mrizka by se rozpadla. */
.people-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Ne kazdy ma telefon, takze medailonky nemaji stejne vysoky blok kontaktu.
   Flex + margin-top:auto na LinkedInu srovna odkazy na jednu linku. */
.person { display: flex; flex-direction: column; }
.person-photo {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top;
  border-radius: var(--radius); background: #fff; margin-bottom: 20px;
}
.person-photo-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); color: var(--muted);
  font-size: 2rem; font-weight: 700; letter-spacing: .05em;
}
.person-name { font-size: 1.1rem; }
.person-role { color: var(--red-dark); font-weight: 600; font-size: 14.5px; margin-top: 2px; }
.person-contact { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.person-contact a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.person-contact a:hover { color: var(--red-dark); border-color: var(--red); }
.person-social { margin-top: auto; padding-top: 10px; }
.person-social a { color: var(--red-dark); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.person-social a:hover { text-decoration: underline; }
@media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .people-grid { grid-template-columns: 1fr; } }

/* ---------- paticka ---------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1.2fr; gap: 40px; }
.footer-brand p { font-size: 14.5px; margin-top: 16px; max-width: 34ch; }
.footer-head { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer-head a { color: inherit; text-decoration: none; }
.footer-head a:hover { color: var(--red-dark); }
.footer-list { list-style: none; display: grid; gap: 8px; }
.footer-list a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.footer-list a:hover { color: var(--red-dark); }
/* Odkazy na profily. Ctverec 40 px se pocita: samotna ikona ma 20 px,
   takze bez odsazeni by klikaci cil nesplnil 24 px podle WCAG 2.2 -
   totez pravidlo, kvuli kteremu maji odkazy v paticce svisle odsazeni. */
.footer-social { list-style: none; display: flex; gap: 6px; margin: 18px 0 0 -10px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  color: var(--gray); transition: color .15s ease, background .15s ease;
}
.footer-social a:hover { color: var(--red-dark); background: #fff; }

.footer-addr { font-size: 14px; color: var(--gray); margin-top: 18px; line-height: 1.55; }
.footer-addr-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.footer-addr a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px;
}
.footer-addr a:hover { color: var(--red-dark); text-decoration-color: var(--red-dark); }
.footer-contact { margin-bottom: 4px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--red-dark); }
/* Pravni odkazy vedle sebe, na uzkem displeji pod sebou. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- skakani po sekcich pri scrollu ----------
   Dorovnavani na hrany sekci (scroll-snap-type: y proximity) tu bylo
   a bylo odstraneno. Duvod: snap si bere kontrolu nad pozici stranky
   i mimo rolovani. Kdyz na /kontakt dostalo fokus pole formulare,
   prohlizec pozici prepocital a snap ji dorovnal na zacatek sekce
   s formularem - stranka uskocila "presne na prvni radek formulare".
   Ze stejneho duvodu se stranka otvirala odrolovana: nula byla v dosahu
   nejblizsiho snap bodu, tak ji snap stahl k nemu.

   Na ostatnich strankach to videt nebylo, protoze jejich prvni sekce
   zacina az hluboko pod ohybem. Na kontaktu je hero kratke, takze snap
   bod lezel pouhych ~175 px od zacatku.

   Kdyby se snap nekdy vracel, musi se resit i tenhle vedlejsi ucinek. */

/* ---------- velikost klikaciho cile ---------- */
/* WCAG 2.2 chce na cil aspon 24x24 px. Drobeckova navigace i odkazy
   v paticce mely na vysku 15-22 px. Svisle odsazeni u radkoveho odkazu
   zvetsi klikaci plochu, ale nic neposune - do vysky radku se nepocita.
   Peti pixely, ne ctyrmi: nadpis v paticce ma radek 15 px, takze pri
   ctyrech by cil skoncil na 23 px a o pixel by nedosahl. */
.crumbs a,
.footer-head a,
.footer-bottom a { padding: 5px 0; }

/* ---------- prihlaska k odberu ---------- */
/* Stoji nad paticovou mrizkou, oddelena linkou - je to jina akce nez
   navigace pod ni a nema s ni splynout. */
.newsletter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px;
  align-items: start;
  padding-bottom: 40px; margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.newsletter-note { font-size: 14.5px; margin-top: 8px; max-width: 46ch; }
.newsletter-row { display: flex; gap: 10px; }
.newsletter-row input { flex: 1; min-width: 0; }
.newsletter-row .btn { flex: none; }
.newsletter-legal { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.newsletter-legal a { color: var(--muted); }
.newsletter-legal a:hover { color: var(--red-dark); }
/* Hlaska nahrazuje formular, takze si bere jeho misto ve mrizce. */
.newsletter-msg {
  align-self: center; font-weight: 600; color: var(--ink);
  background: var(--bg-soft); border-left: 3px solid var(--red);
  padding: 14px 18px; border-radius: var(--radius-sm);
}
@media (max-width: 760px) {
  .newsletter { grid-template-columns: 1fr; }
  .newsletter-row { flex-direction: column; }
}

/* ---------- logo v lepive hlavicce ---------- */
/* Na konci stranky jsou na jedne obrazovce dve loga naraz, to z menu
   a to z paticky. Tridu prepina IntersectionObserver v main.js.

   Skryva se pres visibility, ne pres display: navigace je zarovnana
   pres space-between, takze pri display:none by odskocila doleva.
   Visibility navic vyradi odkaz z poradi tabulatoru, aby se fokus
   nezastavil na necem neviditelnem.

   Jen na desktopu - na uzkem displeji se obe loga takhle blizko
   nesejdou. Prechod utlumi globalni pravidlo pro prefers-reduced-motion. */
/* Musi sedet se zlomem navigace vyse (980 px). V hamburgerovem rezimu je
   logo jedina vec vedle tlacitka a skryvat ho nedava smysl. */
@media (min-width: 981px) {
  .site-header .logo { transition: opacity .2s ease, visibility .2s ease; }
  .site-header.is-near-footer .logo { opacity: 0; visibility: hidden; }
}

/* ---------- navazujici sluzba ---------- */
/* Oznaceni sluzby, ktera na prave ctenou navazuje. Stejny rez jako
   .eyebrow, jen bez spodni mezery - sedi tesne nad nadpisem radku. */
.service-note {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red-dark); margin-bottom: 6px;
}

/* Pruh nad nahledem nepublikovaneho clanku. Vidi ho jen prihlasena
   redakce, proto smi byt takhle vyrazny - je to varovani, ne dekorace. */
.nahled-pruh {
  background: var(--red-dark); color: #fff; text-align: center;
  padding: 10px 20px; font-size: 14.5px; font-weight: 600;
}
.nahled-pruh a { color: #fff; }

/* ---------- blog ---------- */
/* Vypis zacina rovnou obsahem, ne uvodnim blokem - proto mensi horni
   mezera, nez jakou ma bezna sekce. */
.blog-top { padding: clamp(24px, 3.5vw, 44px) 0 0; }
.blog-title { font-size: clamp(2rem, 4vw, 2.6rem); }
.blog-title span { font-size: .5em; font-weight: 500; color: var(--muted); }
.blog-more-head { font-size: 1.35rem; margin-bottom: 18px; }

/* Nejnovejsi clanek ve velkem. Obrazek a text vedle sebe, na uzkem
   displeji pod sebou. Cela dlazdice je jeden odkaz. */
.blog-lead {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.blog-lead:hover { border-color: var(--red); box-shadow: 0 14px 40px rgba(29, 29, 32, .08); }
/* Obrazek je vytazeny z toku (position: absolute), takze vysku dlazdice
   urcuje text vedle nej a obrazek se k nemu dorovna. S pomerem stran na
   obrazku to bylo naopak - radek mrizky se natahl podle nej a delsi
   perex se orizl. min-height drzi rozumnou vysku u kratkych titulku. */
.blog-lead-media { position: relative; background: var(--bg-soft); min-height: 300px; }
.blog-lead-media img,
.blog-lead-media .article-thumb-empty { position: absolute; inset: 0; }
.blog-lead-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 3vw, 44px);
}
.blog-lead .article-tags { margin: 10px 0 12px; }
.blog-lead-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.2; }
/* Perex nejvyse na tri radky. Delsi text natahne sloupec s textem a s nim
   i obrazek vedle - ten se pak orizne o vic, nez kolik snese graficka
   uvodka s textem a logem u kraje. */
.blog-lead-perex {
  color: var(--gray); margin-top: 14px; max-width: 46ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-lead-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 22px; font-size: 14px; color: var(--muted);
}
.blog-lead-more { color: var(--red-dark); font-weight: 600; }
@media (max-width: 900px) {
  .blog-lead { grid-template-columns: 1fr; }
  .blog-lead-media { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Nahled na karte. Vyska je dana pomerem stran, ne obrazkem - jinak by
   se karty v rade rozjely podle toho, jak vysoky obrazek clanek ma. */
.article-thumb { display: block; aspect-ratio: 16 / 9; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.blog-lead-media img,
.article-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: var(--bg-soft);
}
.article-thumb-empty svg { width: 52px; height: auto; opacity: .3; }
.blog-lead-media .article-thumb-empty svg { width: 84px; }

/* Vypis blogu pouziva stejne karty jako upoutavka na homepage, jen ve
   ctyrech sloupcich misto tri - na plnou stranku se jich vejde vic. */
.article-grid-full { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
@media (max-width: 1100px) { .article-grid-full { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid-full { grid-template-columns: 1fr; } }

.pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.pagination a { color: var(--red-dark); font-weight: 600; text-decoration: none; padding: 8px 0; }
.pagination a:hover { text-decoration: underline; }
.pagination-stav { font-size: 14px; color: var(--muted); }

.chips a.is-active { border-color: var(--red); color: var(--red-dark); font-weight: 700; }

/* Devatenact temat v plne velikosti zabralo tri rady a odsunulo clanky
   pod prehyb. Drobnejsi pilulky se vejdou do dvou a nekonkuruji obsahu.
   Vyska zustava nad 24 px kvuli velikosti cile (WCAG 2.2). */
.chips-compact { gap: 8px; margin-top: 0; }
.chips-compact a { padding: 6px 14px; font-size: 13.5px; font-weight: 500; color: var(--gray); }
.chips-compact a.is-active { font-weight: 700; }

.chips-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 28px; }
.chips-more > summary {
  list-style: none; cursor: pointer;
  padding: 6px 14px; font-size: 13.5px; font-weight: 600; color: var(--red-dark);
  border: 1px dashed var(--line); border-radius: 100px;
}
.chips-more > summary::-webkit-details-marker { display: none; }
.chips-more > summary:hover { border-color: var(--red); }
.chips-more[open] > summary { margin-bottom: 8px; }

.article-meta { font-size: 14.5px; color: var(--muted); margin-top: 14px; }
.article-hero-image { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Telo clanku je HTML prevzate ze stareho webu - nese vlastni inline styly
   vcetne pevnych sirek v pixelech. Sirku proto srazime tvrde, jinak by
   obrazky pretekaly z uzkeho sloupce. */
.article-body { font-size: 17px; line-height: 1.7; }
.article-body p { margin-bottom: 20px; }
.article-body h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.article-body h3 { font-size: 1.25rem; margin: 32px 0 12px; }
.article-body h4 { font-size: 1.05rem; margin: 24px 0 10px; color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 20px 22px; }
.article-body li { color: var(--gray); margin-bottom: 8px; }
.article-body a { color: var(--red-dark); }
.article-body img,
.article-body iframe {
  max-width: 100% !important;
  width: auto !important;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 8px 0;
}
/* Vlozena videa a prezentace maji v puvodnim HTML pevnou velikost. */
.article-body iframe { width: 100% !important; aspect-ratio: 16 / 9; }
.article-body em { color: var(--muted); font-style: italic; }