/* ======================================================================
   zenn.studio — vlastní vrstva nad _kit/kit.css
   ----------------------------------------------------------------------
   kit.css říká, jak se to CHOVÁ. Tenhle soubor říká, jak to VYPADÁ.

   Směr: nosleephouse.cz — tmavá lesní zeleň, hairline linky, číslovaný
   proces na světlých kartách, obří wordmark v patičce. Akcent je ale
   NAŠE zelená, ne jejich neonová limetka — nechceme kopii.
   Rozbor předlohy: SecondBrain-OS/.../reference-nosleephouse-design.md

   PRAVIDLA DOMU, která předloha porušuje a my ne:
   - Žádné kickery nad nadpisy. .eyebrow z kitu se tu NEPOUŽÍVÁ.
   - Žádná vymyšlená čísla. Copy stojí jen na tom, co jde doložit.
   ====================================================================== */

:root {
  /* --- barvy ------------------------------------------------------- */
  --bg:       #1a2f2f;   /* tmavá lesní zeleň — hlavní plocha */
  --bg-2:     #141414;   /* CTA pásy a patička, tmavší než plocha */
  --surface:  #22403c;   /* karty na tmavém */
  --ink:      #ffffff;
  --ink-2:    rgba(255,255,255,.66);
  --ink-3:    rgba(255,255,255,.42);
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.17);
  --accent:   #3ee68a;   /* zenn zelená */
  --accent-2: #5df0a2;

  --cream:     #f7f5ee;  /* světlé sekce a karty procesu */
  --cream-2:   #e9e5df;
  --cream-ink: #16181c;

  /* --- typografie -------------------------------------------------- */
  --f-display: "Instrument Sans", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* --- layout ------------------------------------------------------ */
  --wrap: 1232px;
  --gut:  clamp(20px, 4.6vw, 48px);
}

/* Displaye jsou u předlohy hustší a těžší, než má kit ve výchozím stavu. */
.display { font-weight: 600; letter-spacing: -0.042em; }
h1.display { font-size: clamp(2.6rem, 6.6vw, 5.1rem); }
h2.display { font-size: clamp(2rem, 5vw, 3.75rem); }

body { background: var(--bg); }

/* ==================================================== 1. SVĚTLÁ SEKCE
   Sekce se přebarví jen výměnou proměnných. Všechno uvnitř (kit i naše
   komponenty) se přizpůsobí samo, protože nic nemá barvu natvrdo. */
.inv {
  --bg:      #f7f5ee;
  --bg-2:    #e9e5df;
  --surface: #ffffff;
  --ink:     #16181c;
  --ink-2:   #5b6068;
  --ink-3:   #8b9099;
  --line:    rgba(22,24,28,.13);
  --line-2:  rgba(22,24,28,.20);
  background: var(--bg);
  color: var(--ink);
}

/* Tmavší pás — na CTA. Sytější než plocha, takže vystoupí dopředu. */
.tmavy {
  --bg:      #141414;
  --surface: #1e1e1e;
  background: var(--bg);
}

/* ======================================================= 2. HLAVIČKA
   Používáme .hdr z kitu. Tady jen značka a tlačítko v pravém rohu. */
.brand__tec {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--accent); flex: none;
}
.hdr .btn { padding: 12px 20px; font-size: .88rem; }

/* Aktivní položka v navigaci — na vícestránkovém webu musí být vidět,
   kde člověk je. Podtržítko je stejné jako hover, jen natrvalo. */
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.mnav__kont {
  margin-top: 26px; display: grid; gap: 6px;
  font-size: .95rem; color: var(--ink-2);
}

/* ============================================================ 3. HERO */
.hero { padding: clamp(120px, 15vw, 190px) 0 clamp(40px, 6vw, 80px); }
.hero__sub {
  margin-top: clamp(20px, 2.6vw, 30px);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  color: var(--ink-2);
  max-width: 52ch;
  line-height: 1.6;
  text-wrap: pretty;
}
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Fotka teče za okraj obrazovky, nesedí v rámečku. */
.hero__foto {
  margin-top: clamp(44px, 6vw, 78px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.hero__foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .hero__foto img { aspect-ratio: 4 / 3; } }

/* Hero na podstránkách — menší, s drobečkem. */
.hero--pod { padding-bottom: clamp(30px, 4vw, 54px); }
.hero--pod h1.display { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }

.drobek {
  display: flex; gap: 8px; align-items: center;
  font-size: .84rem; color: var(--ink-3);
  margin-bottom: 22px;
}
.drobek a:hover { color: var(--accent); }

/* ================================================== 4. HLAVA SEKCE */
.sec__head { max-width: 60ch; margin-bottom: clamp(36px, 4.6vw, 60px); }
.sec__head p { color: var(--ink-2); margin-top: 16px; font-size: 1.05rem; line-height: 1.6; }

/* Nadpis vlevo, odstavce vpravo. Rozbíjí to sloupec textu pod nadpisem,
   který Lukášovi vadil — text tam předtím jenom visel. */
.dvojhlava { display: grid; gap: clamp(20px, 3vw, 46px); margin-bottom: clamp(36px, 4.6vw, 60px); }
@media (min-width: 900px) {
  .dvojhlava { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; }
}
.dvojhlava__txt p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.62; }
.dvojhlava__txt p + p { margin-top: 14px; }

/* =============================================== 5. KARTY SLUŽEB
   Na domovské stránce je každá služba jen proklik. Žádné mockupy —
   ty žijí až na své podstránce. */
.sluzby { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 700px)  { .sluzby { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1060px) { .sluzby { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.sluzba {
  background: var(--bg);
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px) clamp(30px, 3.4vw, 44px);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 250px;
  transition: background var(--t-base) var(--e-io);
}
.has-hover .sluzba:hover { background: var(--surface); }
.no-motion .sluzba { transition: none; }
.sluzba h3 { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.sluzba p { color: var(--ink-2); font-size: .97rem; line-height: 1.58; margin: 0; }
.sluzba__sip {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: .88rem; font-weight: 600;
}
.sluzba__sip svg { width: 13px; height: 13px; transition: transform var(--t-base) var(--e-out); }
.has-hover .sluzba:hover .sluzba__sip svg { transform: translate(3px, -3px); }
.no-motion .sluzba__sip svg { transition: none; }

/* Štítek u služby — co v ní je. Je to obsah, ne ozdoba nad nadpisem. */
.pilly { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-tag {
  border: 1px solid var(--line-2); color: var(--ink-2);
  border-radius: 999px; padding: 4px 11px; font-size: .74rem;
}

/* ======================================================= 6. PORTFOLIO */
.bento { display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px) { .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px){ .bento--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1000px){ .bento--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.tile {
  display: block; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-io);
}
.has-hover .tile:hover { transform: translateY(-4px); border-color: var(--line-2); }
.no-motion .tile { transition: none; }
.tile img {
  width: 100%; aspect-ratio: 16/11; object-fit: cover; object-position: top center;
  transition: transform var(--t-slow) var(--e-out);
}
.has-hover .tile:hover img { transform: scale(1.03); }
.no-motion .tile img { transition: none; }
.tile__cap { display: block; padding: 14px 16px 18px; }
.tile__cap b { display: block; font-family: var(--f-display); font-size: 1rem; font-weight: 600; }
.tile__cap span { font-size: .82rem; color: var(--ink-2); }

.stred { text-align: center; margin-top: clamp(24px, 3vw, 38px); }

/* =============================================== 7. PROCES 01–05
   Světlé karty na tmavém pozadí. Tenhle kontrast dělá u předlohy
   ten drahý dojem víc než cokoli jiného. */
.proces { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.krok {
  background: #f7f5ee; color: #16181c;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 32px);
  display: grid; gap: 8px;
}
@media (min-width: 860px) {
  .krok { grid-template-columns: 70px minmax(0, 290px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 40px); align-items: start; }
}
.krok__n { font-family: var(--f-display); font-size: 1.02rem; font-weight: 700; color: #0f7d4a; }
.krok h3 { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.krok p { margin: 0; color: #4d525a; line-height: 1.62; font-size: .98rem; }
.krok p + p { margin-top: 10px; }
.krok b { color: #16181c; font-weight: 600; }

/* ============================================================ 8. CTA PÁS */
.cta { padding: clamp(56px, 8vw, 110px) 0; }
.cta__in { display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .cta__in { grid-template-columns: minmax(0,1.2fr) auto; } }
.cta h2 { margin: 0; }
.cta p { color: var(--ink-2); margin-top: 16px; max-width: 46ch; line-height: 1.6; }
.cta__acts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (max-width: 899px) { .cta__acts { flex-direction: row; flex-wrap: wrap; } }

/* ========================================================= 9. REFERENCE */
.citace { border-left: 3px solid var(--accent); padding-left: clamp(20px, 3vw, 32px); }
.citace p {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.42; color: var(--ink);
  font-family: var(--f-display); letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.citace cite { font-style: normal; display: block; font-size: .95rem; font-weight: 600; }
.citace small { font-size: .82rem; color: var(--ink-3); }

/* ============================================ 10. SEZNAM CO DOSTANETE
   Zelené čtverečky, ne kolečka. Drží to hranatou linku webu. */
.body-list { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.body-list li { position: relative; padding-left: 22px; color: var(--ink-2); line-height: 1.55; }
.body-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--accent);
}
.body-list b { color: var(--ink); font-weight: 600; }

/* ============================================================ 11. CENÍK */
.cenik { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 780px)  { .cenik { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1060px) { .cenik--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cena {
  background: var(--bg); padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 14px;
}
.cena--hlavni { background: var(--surface); }
.cena h3 { margin: 0; font-size: 1.3rem; }
.cena__c {
  font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 600; letter-spacing: -0.04em; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.cena__c small {
  display: block; font-size: .8rem; color: var(--ink-3);
  font-family: var(--f-body); letter-spacing: 0; font-weight: 400; margin-top: 6px;
}
.cena p { color: var(--ink-2); font-size: .95rem; line-height: 1.56; margin: 0; }
.cena .body-list li { font-size: .93rem; }
.cena__pat { margin-top: auto; padding-top: 8px; }

.cenik__pozn { font-size: .84rem; color: var(--ink-3); margin-top: 18px; max-width: 64ch; line-height: 1.6; }

/* ================================================= 12. UKÁZKY ROZHRANÍ
   Mockupy z původní jednostránky. Přesunuté na podstránky služeb —
   na domovské stránce se Lukášovi nelíbily a měl pravdu, tříští ji. */
.mok {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px 20px;
}
.mok__hd {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--ink-3);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.mok__tec { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.mok__pozn { font-size: .76rem; color: var(--ink-3); margin: 12px 0 0; }
.moky { display: grid; gap: 14px; }
@media (min-width: 620px) { .moky--2 { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } }

.mok--chat { display: grid; gap: 8px; }
.bub { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.45; margin: 0; }
.bub--in  { background: rgba(255,255,255,.08); border-bottom-left-radius: 5px; }
.bub--out { background: var(--accent); color: #10241d; margin-left: auto; border-bottom-right-radius: 5px; font-weight: 500; }

.kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.kal span { font-size: .82rem; padding: 7px 0; border-radius: 8px; font-variant-numeric: tabular-nums; }
.kal__h { font-size: .68rem !important; color: var(--ink-3) !important; text-transform: uppercase; }
.kal__d--plno { background: rgba(255,255,255,.07); color: var(--ink-3) !important; text-decoration: line-through; }
.kal__d--sedy { color: var(--ink-3) !important; opacity: .5; }
.kal__d--dnes { background: var(--accent); color: #10241d !important; font-weight: 600; }
.sloty { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.slot { border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; font-size: .8rem; }
.slot--pryc { color: var(--ink-3); opacity: .55; text-decoration: line-through; }

.dash { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.dash__k { background: rgba(255,255,255,.06); border-radius: 11px; padding: 12px; }
.dash__k b { display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; }
.dash__k span { font-size: .72rem; color: var(--ink-3); }
.graf { display: flex; align-items: flex-end; gap: 5px; height: 58px; margin-top: 14px; }
.graf span { display: block; flex: 1; height: var(--v); border-radius: 4px; background: var(--accent); opacity: .8; }

/* ==================================================== 13. TÝDNY (brand 30) */
.tydny { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 560px) { .tydny { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .tydny { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tyden { background: var(--bg); padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 10px; align-content: start; }
.tyden__n { font-family: var(--f-display); font-size: .84rem; font-weight: 700; color: var(--accent); }
.tyden h3 { margin: 0; font-size: 1.18rem; }
.tyden p { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }

/* ================================================== 14. DVOJICE TEXT+FOTO */
.duo { display: grid; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .duo--obraceny .duo__txt { order: 2; }
}
/* Když je jeden sloupec o dost vyšší (formulář vedle kontaktů), centrování
   vytlačí ten kratší doprostřed a nad ním zůstane díra. */
.duo--nahoru { align-items: start; }
.duo__txt p { color: var(--ink-2); line-height: 1.62; font-size: 1.04rem; }
.duo__txt p + p { margin-top: 14px; }
.duo__foto { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.duo__foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* =========================================================== 15. FORMULÁŘ */
.formbox {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(24px, 3vw, 38px);
}
.kont-list { display: grid; gap: 14px; list-style: none; padding: 0; margin: 24px 0 0; }
.kont-list a { display: inline-flex; align-items: center; gap: 11px; font-size: 1.02rem; }
.kont-list a:hover { color: var(--accent); }
.kont-list svg { width: 19px; height: 19px; color: var(--accent); flex: none; }

/* ============================================================ 16. PATIČKA */
.ftr { border-top: 1px solid var(--line); background: #141414; overflow: hidden; }
.ftr a:hover { color: var(--accent); }
.ftr__cols { gap: 34px; }
.ftr h4 {
  font-family: var(--f-body); font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 500;
}
.ftr__odkazy { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.ftr__kont { display: grid; gap: 8px; }
.ftr__kont a { font-size: 1.02rem; color: var(--ink); }

/* Identifikační blok — právní minimum provozovatele. */
.ftr__ico { margin-top: 18px; font-size: .8rem; color: var(--ink-3); line-height: 1.6; }

.ftr__spod {
  margin-top: clamp(22px, 3vw, 34px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between;
  font-size: .8rem; color: var(--ink-3);
}
.ftr__pravni { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* ==================================================== 17. PRÁVNÍ STRÁNKY */
.pravni { max-width: 76ch; }
.pravni h2 { font-family: var(--f-display); font-size: 1.4rem; margin-top: 2.2em; }
.pravni h3 { font-size: 1.08rem; margin-top: 1.8em; }
.pravni p, .pravni li { color: var(--ink-2); line-height: 1.68; }
.pravni p { margin-top: 14px; }
.pravni ul, .pravni ol { margin: 14px 0 0 20px; display: grid; gap: 8px; }
.pravni strong { color: var(--ink); }
.pravni__datum { font-size: .85rem; color: var(--ink-3); margin-top: 34px; }

/* Zástupný text, který se nesmí přehlédnout. */
.doplnit {
  background: rgba(255,196,0,.16); color: #ffd970;
  border: 1px dashed rgba(255,196,0,.5);
  padding: 1px 7px; border-radius: 5px; font-size: .9em; font-weight: 600;
}

/* ============================================================ 18. MOBIL */
@media (max-width: 599px) {
  .mok { padding: 13px 14px 16px; border-radius: 13px; }
  .dash { gap: 6px; }
  .dash__k { padding: 9px; }
}

/* Tlačítko s kolečkem a šipkou — z předlohy. */
.btn-sip {
  display: inline-flex; align-items: center; gap: 12px;
  align-self: flex-start;
  padding: 5px 6px 5px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #10241d;
  font-weight: 600;
  font-size: .97rem;
  transition: gap var(--t-base) var(--e-out), background var(--t-base) var(--e-io);
}
.btn-sip__k {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: #10241d; color: var(--accent);
  transition: transform var(--t-base) var(--e-out);
}
.btn-sip__k svg { width: 15px; height: 15px; }
.has-hover .btn-sip:hover { gap: 18px; background: var(--accent-2); }
.has-hover .btn-sip:hover .btn-sip__k { transform: rotate(-45deg); }
.no-motion .btn-sip, .no-motion .btn-sip__k { transition: none; }

/* Hlavička nad hero je na tmavém vždycky, i než se odscrolluje. */
.hdr--hero .brand { color: #fff; }
.hdr--hero .nav a { color: rgba(255,255,255,.72); }
.hdr--hero .nav a:hover { color: #fff; }

/* ==================================================== 20. ZVÝRAZNĚNÝ TEXT
   Lukášovi se líbí ta svislá čára u citace. Tohle je ta samá věc,
   ale pro běžný odstavec — používá se tam, kde by text jinak jen visel. */
.cara {
  border-left: 3px solid var(--accent);
  padding-left: clamp(18px, 2.6vw, 28px);
  /* Na plné šířce kontejneru měl řádek přes 130 znaků a nedal se číst. */
  max-width: 70ch;
}
.cara p {
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 1.7vw, 1.45rem);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.cara p + p { margin-top: 14px; }
.cara em { font-style: normal; color: var(--accent); }
.cara small {
  display: block; margin-top: 14px;
  font-size: .88rem; color: var(--ink-3); line-height: 1.55;
  font-family: var(--f-body); letter-spacing: 0;
}

/* ============================================================= 21. FAQ
   Vzor: faq-tabs z 21st.dev. Záložky nahoře, pod nimi rozbalovací otázky.
   Přeloženo na čisté HTML — žádný React, žádný framer-motion.
   Postavené na <details>, takže bez JS se otázky pořád dají rozbalit. */
.faq__zal {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(26px, 3.4vw, 40px);
}
.faq__z {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .88rem; font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-base) var(--e-io), border-color var(--t-base) var(--e-io);
}
.faq__z span { position: relative; z-index: 1; }
/* Výplň naběhne zdola, stejně jako u .btn z kitu — jeden pohybový jazyk. */
.faq__z::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 420ms var(--e-out);
}
.faq__z[aria-selected="true"] { color: #10241d; border-color: var(--accent); }
.faq__z[aria-selected="true"]::before { transform: none; }
.has-hover .faq__z:not([aria-selected="true"]):hover { color: var(--ink); border-color: var(--ink-3); }
.no-motion .faq__z::before { transition: none; }

/* ⚠ display:grid přebije [hidden] z resetu, takže se skryté panely pořád
   kreslily a FAQ ukazovalo všechny otázky najednou. */
.faq__panel { display: grid; gap: 10px; }
.faq__panel[hidden] { display: none; }

.faq__o {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-base) var(--e-io);
}
.faq__o[open] { border-color: var(--line-2); }
.faq__o summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--e-io);
}
.faq__o summary::-webkit-details-marker { display: none; }
.faq__o[open] summary { color: var(--ink); }
.has-hover .faq__o summary:hover { color: var(--ink); }

/* Plus se otočí na křížek. */
.faq__plus { position: relative; width: 18px; height: 18px; flex: none; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink-2);
  transition: transform var(--t-base) var(--e-out), background var(--t-fast) var(--e-io);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__o[open] .faq__plus::before { transform: rotate(45deg); background: var(--accent); }
.faq__o[open] .faq__plus::after  { transform: rotate(135deg); background: var(--accent); }
.no-motion .faq__plus::before, .no-motion .faq__plus::after { transition: none; }

.faq__o div { padding: 0 20px 20px; }
.faq__o p { color: var(--ink-2); line-height: 1.62; margin: 0; max-width: 68ch; }
.faq__o p + p { margin-top: 12px; }

/* ======================================================================
   23. PŘILEPENÉ VRSTVY (úvod stránky)
   ----------------------------------------------------------------------
   Vzor: parallax-scrolling a smooth-scroll z 21st.dev. Sekce se nescrollují
   pryč — zůstanou přilepené nahoře a další sekce se na ně nasune odspodu
   jako karta. Celé je to `position: sticky` a pořadí v DOMu, nic víc.

   ⚠ Lenis (knihovna z předlohy) NEPOUŽÍVÁME. Kit si scroll schválně nepřebírá:
   transform scroller rozbíjí právě tohle `position: sticky`. Plynulost dělá
   samotné lepení, ne přebraný scroll.
   ====================================================================== */
.stoh { position: relative; }

.pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

/* --- vrstva 1: video s logem, nic jiného --------------------------- */
.pin--hero { z-index: 0; background: #0d1a1a; }

.pin__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Pozadí se při odjezdu lehce přiblíží — tím vznikne ta hloubka. */
  transform: scale(calc(1 + var(--hp, 0) * .14));
  transform-origin: 50% 45%;
}
.no-motion .pin__vid { transform: none; }

.pin__stin {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, transparent 40%, rgba(0,0,0,.45) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 22%, transparent 74%, rgba(0,0,0,.6) 100%);
}

/* ⚠ Dřív se logo skládalo přes mix-blend-mode: screen. Vypadalo to stejně,
   ale prohlížeč musel při každém snímku scrollu přepočítat prolnutí přes
   celé video — a to viditelně sekalo. Teď má logo vlastní průhledný soubor
   (`logo-a-alpha.webp`) a žádné prolínání se nedělá. */
.pin__logo {
  position: absolute;
  left: 50%; top: 47%;
  width: min(52vh, 76vw, 520px);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(1 - var(--hp, 0) * .16));
  opacity: calc(1 - var(--hp, 0) * 1.15);
}
.no-motion .pin__logo { transform: translate(-50%, -50%); opacity: 1; }
.pin__logo img { width: 100%; }

/* Šipka dolů. Zmizí, jakmile se začne scrollovat — pak už je zbytečná. */
.pin__dolu {
  position: absolute;
  left: 50%; bottom: clamp(22px, 4vh, 46px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  opacity: calc(1 - var(--hp, 0) * 3);
  pointer-events: none;
}
.pin__dolu svg { width: 15px; height: 15px; animation: pin-dolu 2.4s var(--e-io) infinite; }
@keyframes pin-dolu { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.no-motion .pin__dolu svg { animation: none; }

/* --- vrstva 2: úvodní text, nasune se přes video ------------------- */
.pin--intro {
  z-index: 1;
  background: #141414;
  border-radius: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0;
  box-shadow: 0 -34px 70px rgba(0,0,0,.62);
  display: grid;
  align-content: center;
}
.pin--intro h1 {
  font-family: var(--f-display);
  font-weight: 600; letter-spacing: -0.055em; line-height: .86;
  margin: 0;
  font-size: clamp(2.9rem, 10.4vw, 8rem);
}
.pin--intro .lede {
  margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  color: rgba(255,255,255,.72);
  max-width: 50ch; line-height: 1.55;
}
.pin--intro .btn-sip { margin-top: clamp(26px, 3.4vw, 40px); }

/* --- zbytek stránky: nasune se přes úvod --------------------------- */
.zbytek {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-radius: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0;
  box-shadow: 0 -34px 70px rgba(0,0,0,.62);
}

/* ======================================================================
   24. KROKY S OBRÁZKEM (Jak to u nás chodí)
   ----------------------------------------------------------------------
   Vzor: feature-section z 21st.dev. Vlevo seznam kroků, vpravo fotka,
   která se mění. Sám se posouvá dál; kliknutím se dá skočit kamkoli.
   ⚠ Když je pohyb vypnutý, nic se samo nepřepíná a všechny kroky jsou
   čitelné — jinak by z toho byl nepoužitelný seznam v 35% opacity.
   ====================================================================== */
.kroky { display: grid; gap: clamp(26px, 4vw, 60px); align-items: center; }
@media (min-width: 900px) { .kroky { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.kroky__list { display: grid; gap: clamp(14px, 1.8vw, 22px); }

.krokr {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
  text-align: left;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  opacity: .34;
  transition: opacity var(--t-base) var(--e-io);
}
.krokr[aria-current="true"] { opacity: 1; }
.has-hover .krokr:hover { opacity: .78; }
.has-hover .krokr[aria-current="true"]:hover { opacity: 1; }
.no-motion .krokr { opacity: 1; transition: none; }

/* Kolečko s číslem. U hotových kroků se číslo vymění za fajfku. */
.krokr__k {
  position: relative;
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-2);
  color: var(--ink-2);
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  transition: background var(--t-base) var(--e-io), border-color var(--t-base) var(--e-io),
              color var(--t-base) var(--e-io), transform var(--t-base) var(--e-back);
}
.krokr[data-hotovo="1"] .krokr__k { border-color: var(--accent); color: var(--accent); }
.krokr[aria-current="true"] .krokr__k {
  background: var(--accent); border-color: var(--accent); color: #10241d;
  transform: scale(1.08);
}
.no-motion .krokr__k { transform: none; transition: none; }
.krokr__k svg { width: 17px; height: 17px; }

/* Tenký prstenec ukazuje, kolik zbývá do přeskočení na další krok. */
.krokr__kruh { position: absolute; inset: -5px; transform: rotate(-90deg); }
.krokr__kruh circle {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: var(--obvod); stroke-dashoffset: var(--obvod);
  opacity: 0;
}
.krokr[aria-current="true"] .krokr__kruh circle {
  opacity: .55;
  stroke-dashoffset: calc(var(--obvod) * (1 - var(--kp, 0)));
}
.no-motion .krokr__kruh { display: none; }

.krokr h3 { margin: 0 0 5px; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.krokr p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.58; }
.krokr b { color: var(--ink); font-weight: 600; }

/* Fotka vpravo. Nová přijede zespodu, stará odjede nahoru. */
.kroky__foto {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.kroky__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: translateY(7%);
  transition: opacity 520ms var(--e-out), transform 520ms var(--e-out);
}
.kroky__foto img[data-on] { opacity: 1; transform: none; }
.no-motion .kroky__foto img { transition: none; }
/* Bez JS zůstane vidět ta jedna fotka, co má data-on přímo v HTML. */

@media (max-width: 899px) { .kroky__foto { order: -1; } }

/* ==================================== 25. ÚVODNÍ KARTA — TEXT A FOTKA
   Druhá přilepená vrstva. Vlevo text, vpravo fotka. */
.pin__in { display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) {
  .pin__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.pin__foto {
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.pin__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
@media (max-width: 999px) { .pin__foto { display: none; } }

/* ========================================= 26. FOTKA S PARALAXOU
   Fotka přes celou šířku, uvnitř se posouvá pomaleji než stránka.
   Hodnotu --p dodává kit ([data-p]); tady se jen přeloží na posun. */
.parafoto {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(300px, 58vh, 620px);
  overflow: hidden;
}
.parafoto img {
  position: absolute;
  left: 0; right: 0; top: 50%;
  width: 100%;
  height: 128%;                       /* přesah, ze kterého se ukusuje */
  object-fit: cover;
  transform: translateY(calc(-50% + (var(--p, .5) - .5) * -14%));
  will-change: transform;
}
.no-motion .parafoto img { transform: translateY(-50%); }

/* Text pod fotkou, na střed. */
.stred-blok {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.stred-blok p { color: var(--ink-2); margin-top: 18px; font-size: 1.06rem; line-height: 1.62; }
.stred-blok .display { text-wrap: balance; }

/* ============================================================ 27. ČÍSLA
   Vzor: stats-bento z 21st.dev.
   ⚠ Všechna čísla tady musí jít doložit. Žádné „150+ projektů" ani
   „spokojenost 98 %" — na webu, který prodává poctivost, je vymyšlené
   číslo to nejhorší, co může být. Viz feedback-nehrat-si-nelhat. */
.cisla { display: grid; gap: clamp(10px, 1.2vw, 16px); }
@media (min-width: 760px)  { .cisla { grid-template-columns: repeat(6, minmax(0,1fr)); } }

.cis {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
}
.cis__c {
  font-family: var(--f-display);
  font-weight: 600; letter-spacing: -0.05em; line-height: .92;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  color: var(--ink);
}
.cis__l { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cis p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }

/* Velká dlaždice — jiné pozadí, ať je vidět, co je hlavní číslo. */
@media (min-width: 760px) {
  .cis--velka { grid-column: span 3; grid-row: span 2; }
  .cis--sirs  { grid-column: span 3; }
  .cis--uzka  { grid-column: span 2; }
  .cis--mala  { grid-column: span 1; }
}
.cis--velka {
  position: relative; overflow: hidden;
  background: var(--accent); border-color: var(--accent);
  justify-content: space-between;
  min-height: 260px;
}
.cis--velka .cis__c { color: #0e2119; font-size: clamp(3.4rem, 7vw, 5.6rem); }
.cis--velka .cis__l { color: rgba(14,33,25,.6); }
.cis--velka p { color: rgba(14,33,25,.72); max-width: 34ch; }
/* Šrafování z předlohy — jen jemné, ať to není tapeta. */
.cis--velka::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(14,33,25,.14) 0 1px, transparent 1px 11px);
  mask-image: radial-gradient(ellipse 80% 60% at 100% 0%, #000 55%, transparent 100%);
}
.cis--velka > * { position: relative; }

/* Číslo a popisek vedle sebe. ⚠ nowrap — „900 Kč" se v úzké dlaždici
   lámalo na dva řádky a vypadalo to jako chyba. */
.cis--radek { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
.cis--radek .cis__c { white-space: nowrap; }
.cis--uzka .cis__c { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.cis--uzka p { font-size: .88rem; }
.cis--stred { text-align: center; align-items: center; }

/* ================================================= 28. NABÍDKA V MENU
   Vzor: navigation-menu z 21st.dev (Radix). Přeloženo na <button> +
   panel, nula knihoven. Otevírá se najetím myší i klávesnicí. */
.nav__drop { position: relative; }

.nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink-2);
  background: none; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast) var(--e-io);
}
.nav__btn:hover, .nav__drop.is-open .nav__btn { color: var(--ink); }
.nav__btn svg { width: 11px; height: 11px; transition: transform 320ms var(--e-out); }
.nav__drop.is-open .nav__btn svg { transform: rotate(180deg); }
.no-motion .nav__btn svg { transition: none; }

.nav__panel {
  position: absolute;
  top: calc(100% + 10px); left: 50%;
  width: min(620px, 92vw);
  transform: translateX(-50%) translateY(-8px);
  background: rgba(12, 26, 24, .97);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 10px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity 220ms var(--e-io), transform 320ms var(--e-out), visibility 220ms;
  box-shadow: 0 28px 60px -22px rgba(0,0,0,.8);
}
@media (min-width: 620px) { .nav__panel { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.nav__drop.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateX(-50%); }
.no-motion .nav__panel { transition: none; }

.nav__pol {
  display: grid; gap: 3px;
  padding: 11px 13px;
  border-radius: 12px;
  transition: background var(--t-fast) var(--e-io);
}
.nav__pol:hover { background: rgba(255,255,255,.07); }
.nav__pol b { font-family: var(--f-display); font-size: .96rem; font-weight: 600; color: var(--ink); }
.nav__pol span { font-size: .82rem; color: var(--ink-3); line-height: 1.45; }

/* Na mobilu se dropdown nepoužívá — tam je celoobrazovkové menu z kitu. */
@media (max-width: 900px) { .nav__drop { display: none; } }

/* ================================================ 29. LOGO V PATIČCE
   ⚠ Obří nápis ZENN.STUDIO nahradilo logo. Je to render na černé,
   takže se pokládá přes mix-blend-mode: screen — patička je #141414,
   černá se v ní ztratí a chrom si nechá odlesky. */
.ftr__logo {
  display: block;
  width: min(300px, 58vw);
  margin: clamp(44px, 6vw, 78px) auto 0;
}
.ftr__logo img { width: 100%; }

/* ======================================================================
   30. OPRAVY PO KONTROLE OČIMA
   ====================================================================== */

/* --- úvodní karta má vlastní prostor na scroll ----------------------
   ⚠ Bez tohohle obalu se karta přilepí jen na okamžik a `.zbytek` ji
   přejede v půlce nadpisu — fotka i text jsou pak useknuté napůl.
   Obal je dvakrát vyšší než obrazovka, takže karta chvíli stojí. */
.pin-wrap { position: relative; z-index: 1; height: 200svh; }
.pin-wrap .pin--intro { z-index: auto; }

/* --- značka v hlavičce = logo, ne text ------------------------------
   Render na černé → skládá se přes mix-blend-mode: screen. V heru je
   schované (velké logo je uprostřed), vyjede až s odjezdem hera. */
/* ⚠ Tady se NEPOUŽÍVÁ mix-blend-mode. Hlavička je fixed a má vlastní
   stacking context — blend by neviděl na to, co je pod ní, a zůstal by
   z něj černý čtverec. Proto má logo v hlavičce vlastní průhledný soubor
   (`logo-a-alpha.webp`), kde je alfa udělaná z jasu. */
.brand--logo {
  display: block;
  padding: 0;
  line-height: 0;
}
.brand--logo img { height: clamp(38px, 4vw, 48px); width: auto; }
.hdr--hero .brand--logo {
  opacity: clamp(0, calc((var(--hp, 0) - .55) * 3.4), 1);
  transition: none;
}
.no-motion .hdr--hero .brand--logo { opacity: 1; }

/* --- vyznačený odstavec na střed ------------------------------------ */
.cara--stred { margin-inline: auto; }

/* --- nadpis sekce na střed ------------------------------------------ */
.hl-stred {
  text-align: center;
  max-width: 18ch;
  margin: 0 auto clamp(34px, 4.6vw, 62px);
  text-wrap: balance;
}

/* --- video: plynulejší přiblížení ----------------------------------- */
.pin__vid { will-change: transform; backface-visibility: hidden; }

/* --- odkaz na celý ceník pod dlaždicemi ----------------------------- */
.cenik__pozn { text-align: center; max-width: none; margin-top: clamp(26px, 3vw, 40px); }
.body-list--sirsi li { margin-bottom: 14px; }
.body-list--sirsi { max-width: 76ch; margin-inline: auto; }

/* ======================================================================
   31. DRUHÉ KOLO: PŘILEPENÁ FOTKA, PÁSY, SKLENĚNÁ HLAVIČKA
   ====================================================================== */

/* --- úvodní karta: kratší dojezd ------------------------------------
   200svh bylo moc — půl obrazovky se scrollovalo a nic se nedělo. */
.pin-wrap { height: 150svh; }

/* Fotka v úvodní kartě se během dojezdu lehce zvedne, ať se něco děje. */
.pin--intro .pin__foto img {
  transform: translateY(calc(var(--hp2, 0) * -3.2%)) scale(calc(1 + var(--hp2, 0) * .05));
}
.no-motion .pin--intro .pin__foto img { transform: none; }

/* --- fotka „hledá v telefonu" jako přilepená vrstva ------------------
   Stejný trik jako hero: fotka drží, text se na ni nasune jako karta.
   Mezi nimi schválně není žádná mezera. */
.pin-wrap--foto { height: 168svh; z-index: 0; }

.pin--foto {
  position: sticky; top: 0;
  height: 100svh; min-height: 480px;
  margin: 0; overflow: hidden;
  background: #0f1c1b;
}
.pin--foto img {
  position: absolute; inset: 0;
  will-change: transform;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1 + var(--fp, 0) * .12));
  transform-origin: 50% 42%;
}
.no-motion .pin--foto img { transform: none; }
.pin--foto .pin__stin {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.5) 0%, transparent 26%, transparent 62%, rgba(10,22,21,.9) 100%);
}

/* Karta, která na fotku najede. */
.prekryv {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0;
  box-shadow: 0 -34px 70px rgba(0,0,0,.62);
}

/* --- dvojice vět místo vyznačeného odstavce -------------------------
   ⚠ Předtím tu visel dlouhý odstavec za zelenou čárou a Lukášovi tam
   neseděl. Teď je to postavené proti sobě: krátké tvrzení, delší
   odpověď. Čára zůstala jen u té druhé půlky. */
.dvojice {
  display: grid;
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(52px, 7vw, 96px);
  max-width: 980px; margin-inline: auto;
  align-items: start;
}
@media (min-width: 860px) { .dvojice { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }

.dvojice__a {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1.28; letter-spacing: -0.02em;
  color: var(--ink-3);
}
.dvojice__b {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding-left: clamp(18px, 2.6vw, 28px);
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.26; letter-spacing: -0.025em;
  color: var(--ink);
}

/* --- pásy: aby pozadí nebylo všude stejné ---------------------------
   Jen dva odstíny navíc a jeden měkký přísvit. Víc by z toho byl
   proužkovaný guláš. */
.pas { position: relative; z-index: 1; }
.pas--tmavy  { background: #142624; }
.pas--svetly { background: #1f3936; }
.pas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 0%,
              rgba(62,230,138,.07), transparent 70%);
}
.pas > * { position: relative; z-index: 1; }

/* --- skleněná hlavička ----------------------------------------------
   ⚠ Úplně nahoře v heru žádné sklo není — objeví se, až se odjede.
   Třídu `is-stuck` sází kit (y > 24 px), proto má hlavička `data-hdr`. */
.hdr.is-stuck::before { opacity: 0; }        /* pruh přes celou šířku nechceme */
.hdr.is-away { transform: none; }            /* hlavička se neschovává */

.hdr__in {
  border: 1px solid transparent;
  border-radius: 999px;
  padding-inline: 0;
  transition: background var(--t-base) var(--e-io),
              border-color var(--t-base) var(--e-io),
              padding var(--t-base) var(--e-io),
              box-shadow var(--t-base) var(--e-io);
}
.hdr.is-stuck .hdr__in {
  background: rgba(20, 38, 36, .78);
  border-color: rgba(255,255,255,.14);
  padding-inline: clamp(14px, 1.6vw, 22px);
  box-shadow: 0 14px 40px -18px rgba(0,0,0,.75),
              inset 0 1px 0 rgba(255,255,255,.10);
}
.no-motion .hdr__in { transition: none; }

/* ⚠ Rozostření se zapíná až nad klidným pozadím. Nad běžícím videem by
   ho prohlížeč počítal znovu každý snímek — stálo to měřitelných pět
   snímků za vteřinu. Třídu `hdr--sklo` sází skript na stránce; podstránky
   žádné video nemají, takže sklo mají rovnou. */
.hdr.hdr--sklo.is-stuck .hdr__in,
.hdr:not(.hdr--hero).is-stuck .hdr__in {
  background: rgba(20, 38, 36, .55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

/* Rozbalená nabídka se drží pod pilulkou, ne pod okrajem obrazovky. */
.hdr.is-stuck .nav__panel { top: calc(100% + 18px); }

/* --- logo v patičce jako vodoznak ------------------------------------
   ⚠ Dřív viselo úplně dole pod vším. Teď leží za textem, zeslabené
   a odbarvené, takže dělá pozadí a nekrade pozornost. */
.ftr { position: relative; overflow: hidden; }
.ftr__znak {
  position: absolute;
  left: 50%; bottom: -14%;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  opacity: .05;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
  z-index: 0;
}
.ftr__znak img { width: 100%; }
.ftr > .wrap { position: relative; z-index: 1; }

/* ======================================================================
   32. TŘETÍ KOLO: STOH VRSTEV, KROKY NA SCROLL, MOBIL NA STŘED
   ====================================================================== */

/* --- fotka je teď třetí karta stohu --------------------------------
   Přejede „Stavíme značky" úplně stejně, jako ta karta přejela video. */
.pin-wrap--foto { z-index: 2; height: 175svh; }
.zbytek { z-index: 3; }

.pin--foto {
  border-radius: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0;
  box-shadow: 0 -34px 70px rgba(0,0,0,.62);
}
.prekryv { display: none; }          /* nahradil ji .zbytek */

/* --- jedno tvrzení místo dvojice vět --------------------------------
   ⚠ „Web je jedna stránka na internetu." šla pryč — Lukášovi tam neseděla.
   Zůstala jen ta druhá půlka, vyznačená čárou. */
.tvrzeni {
  margin: clamp(52px, 7vw, 96px) auto 0;
  max-width: 42ch;
  border-left: 3px solid var(--accent);
  padding-left: clamp(18px, 2.6vw, 28px);
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.26; letter-spacing: -0.025em;
  color: var(--ink);
  text-align: left;
}

/* --- kroky: přilepená sekce řízená scrollem -------------------------
   Obal dává délku (jeden krok ≈ 62 svh), sekce uvnitř stojí. */
.pin-wrap--kroky { position: relative; height: calc(100svh + 5 * 62svh); }
.pin--kroky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; align-content: center;
  overflow: visible;
  /* Nahoře musí zůstat místo na hlavičku, jinak nadpis leze pod pilulku. */
  padding-block: clamp(96px, 13vh, 136px) clamp(36px, 6vh, 64px);
}
.pin--kroky .kroky__foto { max-height: 62svh; }
.pin--kroky .kroky__list { gap: clamp(12px, 1.5vh, 20px); }
/* Vypnutý pohyb = žádné lepení, sekce je prostě dlouhá a celá čitelná. */
.no-motion .pin-wrap--kroky { height: auto; }
.no-motion .pin--kroky { position: static; min-height: 0; }

/* ======================================================================
   33. MOBIL — všechno na střed
   ----------------------------------------------------------------------
   ⚠ Na malé obrazovce se text zarovnaný doleva s krátkými řádky rozpadá.
   Na střed to drží pohromadě. Výjimky: odrážkové seznamy a rozbalovací
   otázky zůstávají zleva — vycentrovaná odrážka vypadá jako chyba.
   ====================================================================== */
@media (max-width: 760px) {

  /* --- žádné sklo v hlavičce ---------------------------------------
     Rozostření je na mobilu drahé a Lukášovi se tam nelíbí. Místo
     pilulky je normální pruh. */
  .hdr.is-stuck::before { opacity: 1; }
  .hdr.is-stuck .hdr__in,
  .hdr.hdr--sklo.is-stuck .hdr__in,
  .hdr:not(.hdr--hero).is-stuck .hdr__in {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    border-radius: 0;
    padding-inline: 0;
    box-shadow: none;
  }

  .zbytek { text-align: center; }
  .zbytek .sluzba,
  .zbytek .cena,
  .zbytek .cis,
  .zbytek .tile__cap,
  .zbytek .ftr__cols > div { text-align: center; }

  .cis { align-items: center; }
  .cis p { max-width: none !important; }

  /* Seznamy zůstávají zleva, jen se celé posadí na střed. */
  .zbytek .body-list {
    display: inline-block;
    text-align: left;
  }

  /* Otázky se rozbalují — vycentrovaný odstavec by v nich skákal. */
  .zbytek .faq details,
  .zbytek .faq summary,
  .zbytek .faq details > div { text-align: left; }

  /* Vyznačené tvrzení: čára nahoru, text na střed. */
  .tvrzeni {
    border-left: 0;
    border-top: 3px solid var(--accent);
    padding: clamp(18px, 5vw, 26px) 0 0;
    text-align: center;
  }

  /* Kroky pod sebou a na střed. */
  .krokr {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
  }

  /* --- čísla 2×2 -----------------------------------------------------
     Čtyři obdélníky pod sebou vypadaly jako seznam, ne jako přehled. */
  .cisla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cis { padding: 18px 14px; }
  .cis--velka { min-height: 0; }
  .cis--velka .cis__c { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .cis--radek { flex-direction: column; align-items: center; gap: 10px; }
  .cis p { font-size: .84rem; line-height: 1.5; }
  .cis--velka p { font-size: .84rem; }

  /* --- vybrané práce po dvou ---------------------------------------- */
  .bento--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bento--3 .tile__cap { padding: 11px 11px 14px; }
  .bento--3 .tile__cap b { font-size: .86rem; line-height: 1.25; }
  .bento--3 .tile__cap span { font-size: .72rem; }
}

/* --- kroky na mobilu: bez lepení -----------------------------------
   ⚠ Přilepená sekce je na malé obrazovce vyšší než obrazovka. Obsah
   pak `align-content: center` rozlije nad i pod rámeček sekce a nadpis
   přeleze do předchozí sekce. Na mobilu proto žádné lepení — všech pět
   kroků je prostě pod sebou a všechny jsou čitelné. */
@media (max-width: 900px) {
  .pin-wrap--kroky { height: auto; }
  .pin--kroky {
    position: static;
    min-height: 0;
    padding-block: 0;
  }
  .pin--kroky .kroky__foto { max-height: none; }
  .krokr { opacity: 1; }
  .krokr__kruh { display: none; }
}

@media (max-width: 760px) {
  .faq__zal    { justify-content: center; }
  .ftr__spod   { justify-content: center; text-align: center; }
  .ftr__pravni { justify-content: center; }
  .ftr__kont   { align-items: center; }
  .cta .btn, .sec .btn { margin-inline: auto; }
}