/* ======================================================================
   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 ------------------------------------------------------- */
  /* ⚠ Paleta SMARAGD (paleta 14 z Lukášovy sbírky: Bright Leaf +
     Emerald Green). Předtím byla plocha #1a2f2f a karta #22403c —
     středně tmavá polosytá zeleň, kterou Lukáš popsal jako lacinou.
     Změřeno: odstup karty od plochy problém NEBYL (zenn 1,25 vs.
     Linear 1,09, Vercel 1,11, Stripe 1,16). Problém byla světlost
     a sytost samotné plochy — velká zelená plocha zelenou znehodnotí. */
  --bg:       #0E1E20;   /* skoro černá zeleň — hlavní plocha */
  --bg-2:     #081416;   /* patička a tmavé pásy */
  --surface:  #1F4247;   /* karty na tmavém */
  --ink:      #ffffff;
  --ink-2:    rgba(255,255,255,.66);
  --ink-3:    rgba(255,255,255,.42);
  --line:     rgb(var(--accent-rgb) / .13);
  --line-2:   rgb(var(--accent-rgb) / .24);
  --accent:   #CDFF9B;   /* Bright Leaf */
  --accent-2: #DFFFC0;
  /* ⚠ Tohle je JEDINÉ místo, kde se akcent mění. Všechny průhledné
     odstíny (záře, plakety, tečky u kroků) čtou `--accent-rgb`.
     Když se sem sáhne, MUSÍ se změnit obojí — jinak se rozejdou. */
  --accent-rgb: 205 255 155;

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

  /* --- typografie -------------------------------------------------- */
  /* ⚠ Archivo je promenny rez s osou SIRKY (`wdth`). Vybrana hodnota
     je 112 % — sirsi nez zakladni kresba, to je ten „klidny, siroky"
     dojem z nahledu. Nastavuje se pres `font-stretch` nize; kdyz se
     zapomene, pismo se vykresli uzsi a nadpisy vypadaji jinak. */
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;

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

/* ⚠ Sirka Archiva. Dava se na `:root`, protoze `font-stretch` se dedi —
   jinak by ji musel mit kazdy nadpis zvlast a nekde by se zapomnela.
   Na Inter (bezny text) to nema zadny vliv: Inter osu sirky nema a
   `font-stretch` nikdy pismo nedopocitava umele. Zmereno: tentyz
   odstavec 714,86 px pred i po. */
:root { font-stretch: 112%; }

/* Displaye jsou u předlohy hustší a těžší, než má kit ve výchozím stavu. */
.display { font-weight: 600; letter-spacing: -0.035em; }
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);
  /* ⚠ Bright Leaf na krémové ploše je nečitelný — poměr kontrastu 1,05.
     (Stará zenn zelená na tom byla taky špatně: 1,49.) Světlá sekce
     proto dostane tmavou listovou variantu, 5,88 — projde i na text. */
  --accent:     #356B1C;
  --accent-2:   #2C5E14;
  --accent-rgb: 53 107 28;
  background: var(--bg);
  color: var(--ink);
}

/* Tmavší pás — na CTA. Sytější než plocha, takže vystoupí dopředu. */
.tmavy {
  /* Byla neutrální čerň. Uvnitř smaragdové stránky vypadala jako díra —
     teď je to jen tmavší odstín téže zeleně. */
  --bg:      #071214;
  --surface: #143034;
  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 */
/* ⚠ Býval to jeden rámeček rozdělený vlasovými linkami — přesně ta
   „tabulka“, která Lukášovi vadila. Teď jsou to samostatné karty,
   stejně jako u služeb. */
.cenik { display: grid; gap: clamp(10px, 1.2vw, 16px); }
@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%,
              rgb(var(--accent-rgb) / .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) {

  .zbytek { text-align: center; }
  /* ⚠ Karty služeb jsou výjimka. Lukáš: „dej to doleva." Odstavec má
     v kartě čtyři řádky a pilulky pod ním se na střed rozpadaly do
     schodů. Zleva drží obojí jednu hranu. */
  .zbytek .sluzba { text-align: left; }
  .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; }
}

@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; }
}

/* ======================================================================
   34. ČTVRTÉ KOLO: mrtvý scroll, bloky služeb, kroky i na mobilu
   ====================================================================== */

/* --- stoh karet: pryč s mrtvým scrollem ------------------------------
   ⚠ Obal úvodní karty byl o půl obrazovky delší, než karta potřebuje.
   Těch 50 svh se scrollovalo naprázdno („dám pár scrollů a nic se
   neděje") a teprve pak vyjela fotka. Teď má karta krátký dojezd
   a hned na ni najíždí další. */
.pin-wrap--intro { height: 124svh; }
.pin-wrap--foto  { height: 146svh; }
.pin--foto { z-index: 1; }

/* --- úvodní karta na mobilu na střed --------------------------------- */
@media (max-width: 760px) {
  .pin--intro .pin__in { text-align: center; justify-items: center; }
  .pin--intro .lede { margin-inline: auto; }
  .pin--intro .btn-sip { align-self: center; }
}

/* --- karty služeb jako samostatné bloky ------------------------------
   Dřív to byla mřížka slepená vlasovými linkami — vypadala jako tabulka,
   ne jako věci na rozkliknutí. Teď je každá služba vlastní karta. */
.sluzby { gap: clamp(10px, 1.2vw, 16px); background: none; border-block: 0; }
.sluzba {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: background var(--t-base) var(--e-io),
              border-color var(--t-base) var(--e-io);
}
.has-hover .sluzba:hover { border-color: var(--accent); }
.no-motion .sluzba { transition: none; }

/* --- čísla: čtyři stejné dlaždice ------------------------------------
   Dva vysoké obdélníky a dva čtverečky vedle sebe nedržely řádek.
   Teď mají všechny čtyři stejný tvar i stejnou stavbu: štítek, číslo,
   jedna věta. Zvýrazněná je jen ta první. */
@media (min-width: 760px) { .cisla { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cis--velka { min-height: 0; justify-content: flex-start; }
.cis--velka .cis__c { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.cis--velka p { max-width: none; }

/* --- kroky: přilepená sekce i na mobilu ------------------------------
   ⚠ `.pin` má napevno `height: 100svh`. Když se sekce jen odlepila,
   obsah se vysypal ven z rámečku a přelezl přes „Vybrané práce".
   Proto se tady výška i ořez nastavují vždycky. */
.pin--kroky { height: 100svh; overflow: hidden; }
.no-motion .pin--kroky { height: auto; overflow: visible; }

@media (max-width: 900px) {
  .pin-wrap--kroky { height: calc(100svh + 5 * 58svh); }
  .pin--kroky .kroky { gap: 16px; }
  .pin--kroky .kroky__foto { max-height: 24svh; order: -1; }
  .krokr__kruh { display: none; }
  /* Rozbalený je jen ten krok, na kterém právě jsem — pět odstavců
     najednou se na malou obrazovku nevejde. */
  .pin--kroky .krokr p { display: none; }
  .pin--kroky .krokr[aria-current="true"] p { display: block; }
  .no-motion .pin--kroky .krokr p { display: block; }
}

/* --- kroky na mobilu: vejít se do jedné obrazovky --------------------
   ⚠ Sekce je přilepená a ořezaná. Když je obsah vyšší než obrazovka,
   `align-content: center` ho ustřihne nahoře i dole — zmizel nadpis
   a poslední krok. Proto je tady všechno o něco menší. */
@media (max-width: 900px) {
  .pin--kroky { padding-block: clamp(80px, 11vh, 104px) 14px; }
  .pin--kroky .dvojhlava { margin-bottom: 14px; }
  .pin--kroky .dvojhlava h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); margin: 0; }
  .pin--kroky .kroky { gap: 14px; }
  .pin--kroky .kroky__foto { max-height: 17svh; }
  .pin--kroky .kroky__list { gap: 9px; }
  .pin--kroky .krokr__k { width: 36px; height: 36px; font-size: .82rem; }
  .pin--kroky .krokr h3 { font-size: 1.02rem; margin-bottom: 2px; }
  .pin--kroky .krokr p { font-size: .9rem; line-height: 1.5; }
}

/* ⚠ Obsah nesmí měnit výšku podle toho, který krok je rozbalený —
   jinak se s každým krokem posune nadpis i fotka. Proto se sekce
   zarovná odshora a odstavec má vyhrazené místo na tři řádky. */
@media (max-width: 900px) {
  .pin--kroky { align-content: start; }
  .pin--kroky .krokr[aria-current="true"] p { min-height: 4.5em; }
}

/* Fotka se zmenší podle poměru stran, takže by jinak stála u levého
   okraje. Na mobilu patří doprostřed jako všechno ostatní. */
@media (max-width: 900px) { .pin--kroky .kroky__foto { justify-self: center; } }

/* Zrušení starého rozházeného rastru — všechny čtyři dlaždice mají
   napříště stejné místo. */
@media (min-width: 760px) {
  .cis--velka, .cis--sirs, .cis--uzka, .cis--mala {
    grid-column: auto; grid-row: auto;
  }
}

/* Karty už nejsou pás přes celou šířku, takže se musí posadit do
   stejného sloupce jako zbytek stránky. */
.sluzby { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }

/* ======================================================================
   35. PÁTÉ KOLO: stoh, který se opravdu překrývá
   ====================================================================== */

/* ⚠ Tohle je jádro problému, který Lukáš popisoval třikrát.
   Když má karta obal vysoký H a sama je vysoká 100 svh, přilepí se
   a `odlepí` se přesně v tu chvíli, kdy se v toku objeví další karta.
   Obě se pak hýbou naráz — spodní jede nahoru, horní jede pryč, a nic
   nic nepřekrývá („ono se to jakoby šoupe špatně").

   Oprava: další vrstva začíná o jednu obrazovku dřív (záporný horní
   okraj). Díky tomu stihne celou cestu nahoru ještě v době, kdy ta
   pod ní pořád stojí — takže ji doopravdy přejede, přesně jako karta
   přejíždí hero.

   Rozpočet jedné vrstvy: 100 svh najíždí + 12 svh stojí + 100 svh je
   překrývána = 212 svh. */
.pin-wrap--intro { height: 212svh; }
.pin-wrap--foto  { height: 212svh; margin-top: -100svh; }
.zbytek          { margin-top: -100svh; }

/* --- služby: místo „Podrobně" jen ikonka v rohu ---------------------- */
.sluzba { position: relative; }
.sluzba .pilly { margin-top: auto; }
.sluzba__ik {
  position: absolute;
  top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-3);
  transition: color var(--t-base) var(--e-io),
              border-color var(--t-base) var(--e-io),
              transform var(--t-base) var(--e-out);
}
.sluzba__ik svg { width: 13px; height: 13px; }
.has-hover .sluzba:hover .sluzba__ik {
  color: var(--accent); border-color: var(--accent);
  transform: translate(2px, -2px);
}
.no-motion .sluzba__ik { transition: none; }
.sluzba h3 { padding-right: 48px; }

/* --- mezera pod kroky ------------------------------------------------
   Text pátého kroku končil natěsno u další sekce. */
.pin-wrap--kroky { margin-bottom: clamp(36px, 6vh, 72px); }

/* --- patička se necentruje ------------------------------------------
   Rozcestník a kontakty se čtou líp zleva, i na mobilu. */
@media (max-width: 760px) {
  .zbytek .ftr, .zbytek .ftr__cols > div { text-align: left; }
  .ftr__spod   { justify-content: flex-start; text-align: left; }
  .ftr__pravni { justify-content: flex-start; }
  .ftr__kont   { align-items: start; }
}

/* --- fotka u kroků je na mobilu vidět víc ----------------------------
   ⚠ `aspect-ratio` + `max-height` + `justify-self: center` = fotka se
   smrskne na nulu (obrázek uvnitř je absolutní, takže obsah nemá šířku).
   Na mobilu se proto zadává rovnou šířka. */
@media (max-width: 900px) {
  .pin--kroky .kroky__foto {
    width: min(300px, 74%);
    max-height: none;
    justify-self: center;
  }
}

/* Doladění, aby se kroky i s fotkou vešly do jedné obrazovky. */
@media (max-width: 900px) {
  .pin--kroky { padding-block: clamp(72px, 10vh, 96px) 12px; }
  .pin--kroky .dvojhlava { margin-bottom: 10px; }
  .pin--kroky .kroky { gap: 12px; }
  .pin--kroky .kroky__foto { width: min(224px, 60%); }
  .pin--kroky .kroky__list { gap: 7px; }
}

/* Na nízkém displeji se fotka a pět kroků do jedné obrazovky nevejdou.
   Kroky jsou důležitější, takže fotka ustoupí. */
@media (max-width: 900px) and (max-height: 800px) {
  .pin--kroky .kroky__foto { display: none; }
}

/* ======================================================================
   36. ŠESTÉ KOLO: klid místo čísel, drobné opravy
   ====================================================================== */

/* --- „Levný web bývá ten nejdražší" ----------------------------------
   Nahradilo to dlaždice s čísly. Čtyři bloky, dva vedle sebe. */
.klid {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(38px, 5vw, 66px);
}
@media (min-width: 800px) { .klid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.klid__k {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px);
}
.klid__k h3 {
  margin: 0 0 10px;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
}
.klid__k p {
  margin: 0;
  color: var(--ink-2);
  font-size: .97rem; line-height: 1.6;
}
.klid__pozn {
  margin: clamp(26px, 3vw, 38px) auto 0;
  text-align: center;
  color: var(--ink-3);
  font-size: .92rem;
}

/* --- zelená čára patří nad text, ne vedle něj ------------------------
   Na mobilu to tak bylo už dřív, Lukášovi to sedlo víc. Teď všude. */
.tvrzeni {
  border-left: 0;
  border-top: 3px solid var(--accent);
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}

/* --- vodoznak v patičce byl moc velký -------------------------------- */
.ftr__znak {
  width: min(360px, 62vw);
  bottom: -8%;
  opacity: .045;
}

/* --- kroky: kratší dojezd -------------------------------------------
   Jeden krok byl na pět otoček kolečka. Teď na tři. */
.pin-wrap--kroky { height: calc(100svh + 5 * 38svh); }
@media (max-width: 900px) {
  .pin-wrap--kroky { height: calc(100svh + 5 * 34svh); }
}

/* ======================================================================
   37. SEDMÉ KOLO: text na fotce, blog, jméno v hlavičce
   ====================================================================== */

/* --- jméno vedle loga v hlavičce -------------------------------------
   ⚠ `.hdr__in` je flex se `space-between` a logo je úzké, takže mezi ním
   a rozcestníkem zůstávala díra přes půl obrazovky. Jméno ji zaplní. */
/* ⚠ `.brand--logo` je `display: block` s `line-height: 0` — jméno by
   spadlo pod znak. Proto se tu značka vrací na řádek. */
.brand--logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.brand__txt {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hdr--hero .brand__txt { color: #fff; }
/* Na úzkém displeji je v hlavičce jen logo — jméno by tlačilo na burger. */
@media (max-width: 620px) { .brand__txt { display: none; } }

/* --- text leží na fotce ----------------------------------------------
   Lukáš: „ať se vysune jenom text a ta fotka pod ním víc zčerná."
   `.zbytek` proto přišel o pozadí — to teď nese až `.zbytek__telo`,
   které začíná pod textovou sekcí. */
.zbytek { background: none; border-radius: 0; box-shadow: none; }

/* ⚠ Fotka musí zůstat přilepená po CELOU dobu, co přes ni text jede —
   jinak se odlepí v půlce a text s ní odjede najednou (přesně to Lukáš
   popisoval jako „narazí do sekce a pak už to normálně scrolluje").
   Rozpočet: 100 svh najíždí + 200 svh přes ni jede text = 300 svh.
   `.zbytek` proto startuje o 200 svh dřív, ne o 100. */
/* ⚠ Rozpočet stohu. Obsah nad `.zbytek__telo` jsou teď DVA obaly
   po 180 svh (fotka pod nimi musí držet celou dobu), tedy 360 svh.
   Vzorec: obal fotky = obsah + 200 svh, `.zbytek` = −(obsah + 100 svh).
   Když se výška obalů změní, MUSÍ se přepočítat obojí. */
/* ⚠ Obaly textu jsou 300 + 340 = 640 svh. Vzorec: obal fotky = obsah
   + 200 svh, `.zbytek` = −(obsah + 100 svh). Změna jednoho = přepočet obou. */
.pin-wrap--foto { height: 840svh; }
.zbytek         { margin-top: -740svh; }

.zbytek__telo {
  position: relative;
  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);
}

/* Jedna obrazovka, text uprostřed. Výška je pevná schválně: `.zbytek__telo`
   pak dosedne přesně tam, kde přilepená fotka končí. */
/* ⚠ Text se musí ZASTAVIT, jinak odjede dřív, než dojedou všechny věty.
   Obal dává délku, sekce sama se lepí. 180 − 100 = 80 svh zastávky. */
/* ⚠ Délka obalu NENÍ jen o zastávce. Věta ujede 40 svh; aby šla s prstem
   (1 px pohybu na 1 px scrollu), musí na to dostat taky 40 svh scrollu.
   Když se obal zkrátí, věta zrychlí a začne cukat. */
.txt-wrap { height: 300svh; }
.txt-wrap + .txt-wrap { height: 340svh; }

/* ⚠ `overflow: hidden` tu není kosmetika. Věty vyjíždějí ze SPODNÍHO
   okraje fotky, ne zpod svého vlastního řádku — a ořez, který to schová,
   musí být na celé obrazovce, tedy tady. */
.sec--nafotce {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding-block: clamp(64px, 10vh, 120px);
}
.sec--nafotce .stred-blok p { color: rgba(255,255,255,.86); }
.sec--nafotce .display { text-shadow: 0 2px 30px rgba(0,0,0,.55); }

/* Tmavnutí fotky pod textem. Do třetiny cesty se nic neděje (to fotku
   jenom vidíme), pak rychle ztmavne, ať je text čitelný. */
.pin__tma {
  position: absolute; inset: 0; pointer-events: none;
  /* ⚠ Ne plochý černý list. Tmavne hlavně uprostřed, kde leží text;
     u okrajů zůstává fotka vidět. Jinak z ní byl černý obdélník. */
  background: radial-gradient(ellipse 84% 60% at 50% 50%,
    rgba(7,19,18,.96) 0%, rgba(7,19,18,.74) 54%, rgba(7,19,18,.30) 100%);
  opacity: clamp(0, calc((var(--fp, 0) - .04) * 3), .76);
}
.no-motion .pin__tma { opacity: .74; }

/* --- blog: dvě karty --------------------------------------------------- */
.clanky {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(30px, 4vw, 48px);
}
@media (min-width: 800px) { .clanky { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.clanek-k {
  display: flex; flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 2.8vw, 34px);
  color: inherit; text-decoration: none;
  transition: border-color var(--t-base) var(--e-io),
              transform var(--t-base) var(--e-out);
}
.has-hover .clanek-k:hover { border-color: var(--line-2); transform: translateY(-3px); }
.no-motion .clanek-k { transition: none; }
.no-motion .has-hover .clanek-k:hover { transform: none; }

.clanek-k h3 {
  margin: 0;
  font-size: clamp(1.16rem, 1.9vw, 1.5rem);
  line-height: 1.24;
}
.clanek-k p {
  margin: 0;
  color: var(--ink-2);
  font-size: .97rem; line-height: 1.6;
}
.clanek-k__vic {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent);
  font-size: .92rem; font-weight: 500;
}
.clanek-k__vic svg { width: 14px; height: 14px; }

/* --- článek: text na čtení --------------------------------------------- */
/* Text zarovnany na stejnou levou hranu jako nadpis stranky —
   vycentrovany sloupec pod levym nadpisem vypada jako chyba. */
.clanek { max-width: 68ch; }
.clanek h2 {
  margin: clamp(38px, 4.4vw, 58px) 0 14px;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.92rem);
  line-height: 1.2; letter-spacing: -.02em;
}
.clanek p {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 1.05rem; line-height: 1.72;
}
.clanek p b { color: var(--ink); font-weight: 600; }
.clanek ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.clanek ul li {
  position: relative; padding-left: 22px;
  color: var(--ink-2); font-size: 1.02rem; line-height: 1.62;
}
.clanek ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.clanek__meta {
  color: var(--ink-3); font-size: .88rem;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.clanek__zaver {
  margin-top: clamp(38px, 4.4vw, 58px);
  border-top: 3px solid var(--accent);
  padding-top: clamp(20px, 2.4vw, 28px);
}
.clanek__zaver p { color: var(--ink); font-size: 1.08rem; }

/* --- patička na mobilu: sloupce vedle sebe, ne pod sebou ---------------
   Tři sloupce pod sebou dělaly z patičky další obrazovku scrollu.
   Služby zaberou celou šířku, Studio a Kontakt se dělí o řádek. */
@media (max-width: 760px) {
  .ftr__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
  .ftr__cols > div:first-child { grid-column: 1 / -1; }
  .ftr__cols > div:first-child .ftr__odkazy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ftr h4 { margin-bottom: 10px; }
  .ftr__odkazy a, .ftr__kont a { font-size: .95rem; }
  .ftr__spod {
    display: grid; gap: 14px;
    justify-items: start;
  }
  .ftr__znak { width: min(300px, 74vw); opacity: .06; }
}

/* Na mobilu je celý `.zbytek` na střed — „Číst" musí jít s ním. */
@media (max-width: 760px) { .zbytek .clanek-k__vic { align-self: center; } }

/* --- pilulky u služeb -------------------------------------------------
   Na počítači zleva (a se šipkou v rohu), na mobilu na střed jako
   zbytek stránky. */
.sluzba .pilly { justify-content: flex-start; }
.sluzba h3 { padding-right: 48px; }
@media (max-width: 760px) {
  .sluzba .pilly { justify-content: flex-start; }
  /* ⚠ Šipka se na mobilu SCHOVÁVALA — malé šedé kolečko tam bylo k ničemu.
     Zelený čtvereček ale ano: na dotyku není najetí myší, takže je to
     jediné, co dá najevo, že karta je odkaz. Zůstává i tady. */
}

/* ======================================================================
   38. HÁK: hledá se i v chatu
   ----------------------------------------------------------------------
   Druhá obrazovka na téže fotce. Věty se sypou po jedné, jak se roluje.
   Náběh řídí `--fp` (postup v `.pin-wrap--foto`); každá věta má vlastní
   začátek `--zac`. Bez JS navíc — jen jedna proměnná a `clamp()`.
   ====================================================================== */
.hook .stred-blok { max-width: 54ch; }

/* ⚠ `--v` sází skript na stránce, ne CSS. V CSS se to počítalo přes
   `clamp()` z `--fp`, jenže to je lineární a hrubě odstupňované — pohyb
   pak cukal a dojížděl do zdi. Skript to protáhne měkkou křivkou.
   Vzdálenost je půl obrazovky: věta startuje pod spodní hranou fotky. */
.hook__r__in {
  display: block;
  opacity: var(--v, 0);
  transform: translate3d(0, calc((1 - var(--v, 0)) * var(--vzd, 14svh)), 0);
  will-change: opacity, transform;
}
.hook__r + .hook__r { margin-top: 16px; }
.hook p.hook__r { color: rgba(255,255,255,.86); font-size: 1.06rem; line-height: 1.62; }
.hook .display { margin-bottom: 22px; }

/* Poslední věta je ta, kvůli které to celé je.
   ⚠ Čára MUSÍ být na vnitřním obalu. Na `.hook__z` se neposouvá,
   takže by přejela obrazovku dřív než text, který k ní patří. */
.hook__z { margin-top: 26px !important; }
.hook__z .hook__r__in {
  border-top: 3px solid var(--accent);
  padding-top: 18px;
}

/* Vypnutý pohyb = všechno vidět rovnou, nic nenajíždí. */
.no-motion .hook__r__in { opacity: 1; transform: none; }

/* ======================================================================
   39. TMAVÉ PÁSY: textura místo holé plochy
   ----------------------------------------------------------------------
   ⚠ Aurora (WebGL) šla pryč — sekala se. Tohle je náhrada, která nic
   nepočítá: dva měkké přísvity a jemné zrno. Nula skriptu, nula výkonu,
   a plocha přesto nevypadá jako jednolitý zelený obdélník.
   ====================================================================== */
.pas--tmavy {
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%,   rgb(var(--accent-rgb) / .10), transparent 62%),
    radial-gradient(ellipse 80% 60% at 92% 100%, rgba(30,122,90,.16),  transparent 66%),
    #142624;
}
.pas--svetly {
  background:
    radial-gradient(ellipse 85% 65% at 85% 0%,  rgb(var(--accent-rgb) / .09), transparent 60%),
    radial-gradient(ellipse 90% 70% at 8% 100%, rgba(12,60,64,.30),   transparent 64%),
    #1f3936;
}
.cta.tmavy {
  position: relative;
  background:
    radial-gradient(ellipse 70% 90% at 78% 50%, rgb(var(--accent-rgb) / .09), transparent 62%),
    radial-gradient(ellipse 90% 80% at 0% 100%, rgba(24,92,74,.22),   transparent 60%),
    var(--bg-2);
}

/* ======================================================================
   40. JAK TO U NÁS CHODÍ — přilepená fotka vlevo, text vpravo
   ----------------------------------------------------------------------
   Vzor poslal Lukáš (canopyplanet.org). Nahradilo to přilepenou sekci
   s pěti kroky — ta brala celou obrazovku a musela se do ní vejít.
   Tady roluje text úplně normálně a jen fotka drží.

   ⚠ Levý sloupec je `position: sticky` uvnitř mřížky o JEDNOM řádku.
   Kdyby měla mřížka řádků víc, přilepení by drželo jen ve svém řádku.
   Proto se na mobilu mřížka mění na `display: block`, ne na jeden sloupec.
   ====================================================================== */
.chod { padding-bottom: 0; }
.chod .dvojhlava { margin-bottom: clamp(28px, 4vw, 48px); }

.chod__mriz { display: block; }
@media (min-width: 960px) {
  .chod__mriz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* --- levý sloupec: fotka drží, štítky leží na ní -------------------- */
/* ⚠ `z-index` tu MUSÍ být. Levý sloupec je `position: sticky`, ale pravý
   sloupec je v DOMu za ním — bez pořadí by text prosvítal přes fotku
   (na mobilu, kde jsou pod sebou, to bylo vidět okamžitě). */
.chod__levy {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 44svh;
  overflow: hidden;
  background: #0f1c1b;
}
.chod__pravy { position: relative; z-index: 1; }
@media (min-width: 960px) { .chod__levy { height: 100svh; } }

.chod__obr { position: absolute; inset: 0; }

/* ⚠ Fotky leží na sobě. Ta další najíždí zespoda (`translateY 100% → 0`),
   takže mezi nimi je ostrá vodorovná hrana — přesně jako na předloze.
   Hodnotu sází skript na stránce. */
.chod__ob {
  position: absolute; inset: 0;
  margin: 0;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
.chod__ob[data-ob="0"] { transform: none; }
.chod__ob img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tmavý závoj, aby na fotce byly štítky vždy čitelné. */
.chod__levy::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(8,18,17,.78) 0%, rgba(8,18,17,.42) 46%, rgba(8,18,17,.12) 78%);
}

/* ⚠ Tady stávaly názvy kroků velkým písmem. Lukáš je nechal odstranit:
   stejná slova jsou o pár centimetrů vedle v textu, takže na fotce
   jen překážela. Zůstal holý ukazatel, kolikátý krok právě čteme. */
.chod__stitky {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 3.4vw, 46px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  display: grid;
  gap: clamp(13px, 1.5vw, 20px);
  justify-items: center;
}
.chod__stitky li {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  /* ⚠ Rozsvícení dělá `box-shadow`, ne změna velikosti prvku.
     Stín ani `transform` nespouštějí přepočet rozvržení, takže
     to nedrhne ani na slabším telefonu. */
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0);
  transition: background var(--t-base) var(--e-io),
              box-shadow  var(--t-base) var(--e-io),
              transform   var(--t-base) var(--e-io);
}
.chod__stitky li[data-on="1"] {
  background: var(--accent);
  transform: scale(1.34);
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .15),
              0 0 20px 3px rgb(var(--accent-rgb) / .55);
}
.no-motion .chod__stitky li { transition: none; }

/* --- pravý sloupec: text roluje ------------------------------------- */
/* Doraz na konci: bez něj se fotka odlepí dřív, než se dočte pátý krok. */
.chod__pravy {
  padding-inline: var(--gut);
  padding-bottom: clamp(40px, 12vh, 130px);
}
@media (min-width: 960px) { .chod__pravy { padding-inline: clamp(40px, 5vw, 88px); } }

.chod__krok {
  display: grid;
  align-content: center;
  min-height: 78svh;
  max-width: 46ch;
  padding-block: clamp(48px, 7vh, 90px);
  opacity: .42;
  transition: opacity var(--t-base) var(--e-io);
}
.chod__krok[aria-current="true"] { opacity: 1; }
.no-motion .chod__krok { opacity: 1; transition: none; }
@media (max-width: 959px) { .chod__krok { min-height: 0; } }

.chod__c {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 12px;
}
.chod__krok h3 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.chod__krok p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.65;
}
/* ⚠ Mezera nad seznamem je schválně velká. Když se odstavec a fajfky
   slily dohromady, nešlo poznat, kde končí věta a začíná výčet. */
.chod__body {
  margin: clamp(22px, 3vh, 34px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(13px, 1.8vh, 18px);
}
.chod__body li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-2);
  font-size: .98rem;
  line-height: 1.55;
}
/* Fajfka: zelené kolečko s tmavým odškrtnutím. Kreslí se jako pozadí,
   takže v HTML nepřibyl ani jeden prvek navíc. */
.chod__body li::before {
  content: "";
  position: absolute; left: 0; top: .1em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1a17' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* ======================================================================
   41. BLOG: přilepený nadpis vlevo, karty rolují vpravo
   ====================================================================== */
.lepive__mriz { display: block; }
@media (min-width: 960px) {
  .lepive__mriz {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
}
.lepive__levy { position: static; }
@media (min-width: 960px) {
  .lepive__levy {
    position: sticky;
    top: 22svh;
    padding-block: clamp(20px, 4vh, 60px);
  }
}
.lepive__levy p {
  margin: 18px 0 26px;
  color: var(--ink-2);
  font-size: 1.04rem;
  line-height: 1.62;
  max-width: 34ch;
}
.lepive__pravy { display: grid; gap: clamp(14px, 2vw, 26px); }
@media (min-width: 960px) {
  .lepive__pravy .clanek-k { min-height: 30svh; }
  .lepive__pravy .clanek-k h3 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
  .lepive__pravy .clanek-k p { font-size: 1.05rem; }
}

/* ======================================================================
   42. OSMÉ KOLO: zastávky na mobilu, holá hlavička na mobilu
   ====================================================================== */

/* --- věta o značce jako pokračování odstavce -------------------------
   Dřív měla vlastní sekci pod fotkou. Lukášovi tam nesedělo, že to visí
   samo — patří to k tomu, co je nad tím. */
/* ⚠ Zelená čára musí být na VNITŘNÍM obalu. Na rodiči by byla vidět
   dřív než text, protože rodič se neposouvá — jen se z něj text vysouvá. */
.nav-vetu {
  margin-top: clamp(20px, 2.6vw, 30px);
  display: inline-block;
  color: var(--ink) !important;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.5;
  max-width: 34ch;
  text-align: center;
}

/* --- kroky se na mobilu zastavují ------------------------------------
   Lukáš: „chci, aby se text chvíli zastavil s fotkou, ať se hned
   neskrolluje dál."

   Každý krok se přilepí pod fotku a drží, dokud ho ten další nepřejede.
   ⚠ Krok proto MUSÍ mít neprůhledné pozadí — jinak by se texty sečetly
   přes sebe. A `margin-bottom` je ta zastávka: o kolik svh se dá rolovat,
   než najede další.

   ⚠ Skript kvůli tomu počítá postup z `offsetTop`, ne z polohy na
   obrazovce. Přilepenému prvku poloha zamrzne. */
@media (max-width: 959px) {
  /* Stoh: každý krok se přilepí pod fotku a drží, dokud ho ten další
     nepřejede. ⚠ Neprůhledné pozadí je proto povinné.
     ⚠ Karta se NESMÍ vysunout ven ze svého rodiče dřív, než přijede ta
     další — pak by mezi nimi zůstala prázdná díra. Proto se lepí přímo
     článek uvnitř `.chod__pravy` (ten je vysoký), ne obsah uvnitř článku. */
  .chod__krok {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding-block: 0;
    margin-bottom: 0;
  }
  .chod__krok:last-child { margin-bottom: 0; }
  /* Jen tolik, aby poslední krok dočetl. Víc = prázdná fotka na konci. */
  .chod__pravy { padding-bottom: clamp(14px, 2vh, 26px); }
}

.chod__znak { display: block; height: 0; }

/* --- hlavička na mobilu: jen logo a tlačítko -------------------------
   Lukáš: skleněná pilulka mu na telefonu vizuálně nesedla. */
@media (max-width: 760px) {
  .hdr.is-stuck .hdr__in,
  .hdr.hdr--sklo.is-stuck .hdr__in,
  .hdr:not(.hdr--hero).is-stuck .hdr__in {
    background: none;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-inline: 0;
  }
  /* ⚠ Žádný pruh přes celou šířku. Lukáš: „nechci tam ten blok —
     jenom logo a navigační tlačítko." Stránka je celá tmavá, takže
     bílé logo je čitelné i bez podkladu; přes fotku mu pomůže stín. */
  .hdr.is-stuck::before { opacity: 0; }
  .brand--logo img, .brand__txt {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .65));
  }
  .burger {
    background: rgba(10, 22, 21, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* ======================================================================
   43. DESÁTÉ KOLO: přechod přes celou stránku, vodoznak výš
   ====================================================================== */

/* --- jemný přechod pod celým obsahem ---------------------------------
   Lukáš chtěl ten měkký přísvit, co je pod „Chcete i vy značku",
   po celé stránce — a nahoře pod herem tmu skoro do černa.
   ⚠ Je to jeden `background` na `.zbytek__telo`, ne vrstva navíc.
   Sekce, které mají vlastní pozadí (`.pas`, `.cta`), ho překryjí. */
.zbytek__telo {
  background:
    radial-gradient(ellipse 120% 46% at 50% 0%,   rgba(6,12,11,.92), transparent 60%),
    radial-gradient(ellipse 80% 30% at 8% 14%,    rgb(var(--accent-rgb) / .07), transparent 62%),
    radial-gradient(ellipse 70% 26% at 94% 42%,   rgba(30,122,90,.13), transparent 60%),
    radial-gradient(ellipse 90% 30% at 20% 72%,   rgb(var(--accent-rgb) / .05), transparent 62%),
    linear-gradient(to bottom, #0a1211 0%, var(--bg) 26%, var(--bg) 100%);
}

/* --- vodoznak v patičce byl moc dole --------------------------------- */
.ftr__znak { bottom: 12%; }
/* Na mobilu byl skoro neviditelný a moc nízko. */
@media (max-width: 760px) { .ftr__znak { bottom: 30%; opacity: .06; } }

/* ======================================================================
   44. ZRCADLENÁ SEKCE (fotka vpravo, text vlevo)
   ====================================================================== */
.chod--zrcadlo .stred-blok { margin-bottom: clamp(30px, 5vw, 60px); }

@media (min-width: 960px) {
  /* ⚠ Jen prohození sloupců. Mřížka musí zůstat na JEDNOM řádku,
     jinak se přilepení fotky rozbije. */
  .chod--zrcadlo .chod__levy  { grid-column: 2; grid-row: 1; }
  .chod--zrcadlo .chod__pravy { grid-column: 1; grid-row: 1; }
  /* Závoj i štítky se překlopí, ať jsou u vnějšího okraje. */
  .chod--zrcadlo .chod__levy::after {
    background: linear-gradient(to left,
      rgba(8,18,17,.78) 0%, rgba(8,18,17,.42) 46%, rgba(8,18,17,.12) 78%);
  }
  .chod--zrcadlo .chod__stitky {
    left: auto;
    right: clamp(18px, 3.4vw, 46px);
  }
  /* Blok se přisune k fotce, ale text zůstává zleva —
     zarovnaný doprava se čte hůř a odrážky vypadají jako chyba. */

}

/* ======================================================================
   45. ZÁŘE ZA LOGEM V HERU
   ----------------------------------------------------------------------
   Chromové logo se ztrácelo v tmavých mracích. Za ním je teď měkký
   kruh světla, který pomalu dýchá. Čisté CSS, žádné plátno.
   ⚠ Musí být POD logem (`z-index: -1` uvnitř `.pin__logo`), jinak by
   chrom přesvítilo a byl by z něj plochý flek.
   ====================================================================== */
.pin__logo { position: absolute; isolation: isolate; }
.pin__logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 190%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgb(var(--accent-rgb) / .30) 0%,
    rgba(30,122,90,.16) 34%,
    rgba(10,26,24,0) 68%);
  animation: dych 7.5s var(--e-io, ease-in-out) infinite alternate;
}
@keyframes dych {
  from { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
.no-motion .pin__logo::before { animation: none; opacity: .8; }

/* ======================================================================
   46. DVANÁCTÉ KOLO: oddělení sekcí, bohatší pozadí, plynulost
   ====================================================================== */

/* --- „Vybrané práce" a „Jak to u nás chodí" se slévaly ---------------
   Obě mají stejné pozadí, takže mezi nimi nebyl žádný předěl. */
/* ⚠ Žádné odsazení nahoře. Fotka musí začínat přímo na dělící čáře
   sekce — vzduch dělá až `.chod__uvod` ve sloupci s textem. */
.chod { border-top: 1px solid var(--line); padding-top: 0; }

/* --- pozadí obou sekcí s kroky ---------------------------------------
   Jednolitá zelená plocha vedle fotky vypadala lacině. Tohle je pořád
   jen `background`, nic se nepočítá a nic se nehýbe. */
.chod {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 78% 18%, rgb(var(--accent-rgb) / .07), transparent 62%),
    radial-gradient(ellipse 90% 70% at 12% 88%, rgba(12,58,52,.55),   transparent 66%),
    linear-gradient(to bottom, rgba(9,18,17,.55) 0%, rgba(9,18,17,0) 34%);
}
.chod--zrcadlo {
  background:
    radial-gradient(ellipse 80% 60% at 22% 18%, rgb(var(--accent-rgb) / .07), transparent 62%),
    radial-gradient(ellipse 90% 70% at 88% 88%, rgba(12,58,52,.55),   transparent 66%),
    linear-gradient(to bottom, rgba(9,18,17,.55) 0%, rgba(9,18,17,0) 34%);
}

/* --- plynulejší přejezd fotek ----------------------------------------
   Lukáš: „seká se to." Kromě jemnějšího kroku ve skriptu pomáhá říct
   prohlížeči, že se v tom sloupci nic jiného nepřekresluje. */
.chod__levy { contain: paint; }
.chod__ob {
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.chod__ob img { backface-visibility: hidden; }

/* Čára jde ven i s větou, ne o krok dřív. */
.nav-vetu .hook__r__in {
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 3px solid var(--accent);
}

/* ======================================================================
   47. TŘINÁCTÉ KOLO: náhled u článku
   ----------------------------------------------------------------------
   Lukáš: „ať je vidět, že to je blog." Samotný nadpis vypadal jako
   další odstavec. Obrázek to od zbytku stránky okamžitě odliší.
   ⚠ `aspect-ratio` je povinné — bez něj karta při načtení poskočí.
   ====================================================================== */
.clanek-k { overflow: hidden; padding-top: 0; position: relative; }
.clanek-k__obr {
  margin: 0 0 4px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--r, 14px) - 4px);
  background: #0f1c1b;
}
.clanek-k__obr img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transform: scale(1.02);
  transition: transform var(--t-slow, .6s) var(--e-out, ease);
}
.clanek-k:hover .clanek-k__obr img { transform: scale(1.06); }
/* ⚠ Výchozí `object-position: top center` je pro fotku místa správně —
   u mockupu notebooku by ale uřízl klávesnici. Tenhle obrázek se drží
   středem. */
.clanek-k__obr--stred img { object-position: center; }
.no-motion .clanek-k__obr img { transition: none; transform: none; }

/* ⚠ Dráha věty se NESMÍ zvětšovat. Naměřeno: při 30 svh dráhy na
   stejný scroll ujede text v nejrychlejším bodě 30 px na 20 px
   kolečka. To je to „sekání“, které Lukáš viděl — ne vypadlé snímky.
   Při 12 svh je to 12 px na 20 px, tedy pomaleji než stránka. */
.hook { --vzd: 12svh; }

/* Na mobilu je celý `.zbytek` na střed, ale fajfka musí zůstat u textu.
   Bez tohohle stála fajfka u levého okraje a věta uprostřed obrazovky. */
@media (max-width: 760px) {
  .chod__body { max-width: 30ch; margin-inline: auto; }
  .chod__body li { text-align: left; }
}

/* ======================================================================
   48. ČTRNÁCTÉ KOLO: krok se zamkne, teprve pak jede dál
   ----------------------------------------------------------------------
   Lukáš: „nechci, aby to scrollovalo furt — chci tam vždycky chvilku
   prostor na čtení."

   ⚠ Lepí se KARTA uvnitř článku, ne článek sám. Když se lepil článek,
   zůstal viset na místě a další na něj najel (text se překrýval). Takhle
   se karta zamkne, po `padding-bottom` se odemkne a odjede nahoru —
   a další karta začíná přesně tam, kde ta předchozí končí, takže mezi
   nimi nevznikne prázdné místo.

   ⚠ Článek proto NESMÍ být `display: grid` s `align-content: center` —
   `position: sticky` v takové buňce nedrží.
   ====================================================================== */
/* ⚠⚠ Prostor na zamčení nevznikne ani odsazením článku, ani okrajem
   karty. Sticky se smí pohybovat jen uvnitř obsahového boxu rodiče,
   zmenšeného o VLASTNÍ okraje — obojí se tedy odečte a nezbyde nic.
   Jediné, co funguje: dát článku `min-height`. Stálo nás to dvě kola.
   `flow-root` je tam proto, aby horní okraj karty nepropadl ven. */
/* ⚠ `align-content` musí zpátky na `start`. Chrome ho dnes umí i na
   běžném bloku, takže zděděné `center` vycentrovalo obsah uvnitř
   `min-height` — a tím uřízlo polovinu dráhy, po které se karta lepí.
   Karta pak držela jen 230 px místo 470. */
.chod__krok { display: flow-root; align-content: start; padding-block: 0; }
.chod__karta { position: sticky; }

@media (min-width: 960px) {
  /* ⚠ `margin-top` NENÍ jen vzduch. Je to dráha, po které karta najíždí —
     a přesně po ní jede zároveň fotka. Aby fotka nešla rychleji než prst,
     musí `margin-top + výška karty` zhruba odpovídat výšce fotky (100 svh).
     `min-height` je pak celý krok: najíždění + karta + zámek. */
  .chod__krok  { min-height: 140svh; }
  .chod__karta { top: 22svh; margin-top: 58svh; }
}

/* Na mobilu drží fotka horních 44 svh, karta se zamyká pod ní. */
/* Na mobilu je fotka jen 44 svh vysoká, takže najíždění stačí kratší. */
@media (max-width: 959px) {
  .chod__krok  { min-height: 108svh; }
  .chod__karta { top: 47svh; margin-top: 8svh; }
}

/* Poslední krok se nezamyká na plnou délku — jinak zbyde obrazovka
   prázdné fotky. */
/* ⚠ Poslední krok potřebuje zámek stejně jako ostatní — bez něj
   „Růst" vyletí nahoru dřív, než ho stihne kdokoli přečíst. */
.chod__krok:last-child { min-height: 96svh; }
@media (min-width: 960px) { .chod__krok:last-child { min-height: 130svh; } }

/* ======================================================================
   49. PATNÁCTÉ KOLO: čára nad nadpisem sekce
   ----------------------------------------------------------------------
   Původně to byl 64px pahýl z `::before`. Teď je to hotový prvek, takže
   se dá rozjet: podklad je vlas přes celou šířku bloku a po něm se při
   najetí protáhne zelený pruh.
   ⚠ Táhne se VNITŘEK (`b`), ne sám prvek. Kit sází `.is-in` na `.rv`
   a přitom mu přepíše `transform` — kdyby scaleX bylo na něm, přebil
   by ho.
   ====================================================================== */
.chod__cara {
  display: block;
  position: relative;
  width: min(100%, 300px);
  height: 2px;
  margin: 0 auto clamp(22px, 2.8vw, 32px);
  background: rgba(255, 255, 255, .13);
  overflow: hidden;
  border-radius: 2px;
}
.chod__cara b {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg,
    var(--accent) 0%, var(--accent) 26%, rgb(var(--accent-rgb) / 0) 100%);
  transition: transform 1.1s var(--e-out, cubic-bezier(.16, 1, .3, 1)) .12s;
}
.chod__cara.is-in b { transform: scaleX(1); }
.no-motion .chod__cara b { transform: scaleX(1); transition: none; }

@media (min-width: 960px) { .chod__cara { margin-left: 0; margin-right: auto; } }

/* Úvod sekce nese vzduch, který dřív dávalo odsazení celé sekce.
   ⚠ Leží UVNITŘ sloupce s textem. Zkoušel jsem ho odpoutat
   (`position: absolute`) — na nízkých obrazovkách se ale překryl s první
   kartou, protože jeho výška je v pixelech a odsazení karty v svh.
   V běžném toku si místo udělá sám a překrýt se nemůže. */
.chod__uvod { max-width: 44ch; }
@media (min-width: 960px) {
  .chod__uvod { padding-block: 13svh 0; text-align: left; margin: 0; }
}

/* ⚠ Na mobilu je pořadí v DOMu špatně: fotka je první, takže by nadpis
   sekce vyšel až POD ní. `display: contents` u sloupce s textem vytáhne
   jeho děti přímo do mřížky, takže se dají přeskládat. Odsazení od
   okrajů proto musí přejít z toho sloupce na ty děti. */
@media (max-width: 959px) {
  .chod__mriz  { display: flex; flex-direction: column; }
  .chod__pravy { display: contents; }
  .chod__uvod  { order: 1; padding: clamp(50px,10vh,110px) var(--gut) clamp(26px,4vh,44px); margin-inline: auto; }
  .chod__levy  { order: 2; }
  .chod__znak, .chod__krok { order: 3; }
  .chod__krok  { padding-inline: var(--gut); }
}

/* ⚠ Preloader (sekce 50) se přestěhoval PŘÍMO DO HLAVIČKY `index.html`.
   Když měl někdo v cache starší verzi tohohle souboru, přišla vrstva
   o všechny styly — logo se vykreslilo v původní velikosti rovnou
   v toku stránky. Vrstva, která překrývá celý web, nesmí záviset na
   souboru, který může být starý. Nedávej ji sem zpátky. */

/* ======================================================================
   51. CENÍK: plaketa „povinné / dobrovolné"
   ----------------------------------------------------------------------
   Lukáš: u pravidelných plateb musí být na první pohled vidět, co si
   platit MUSÍTE a co je jen nabídka. Dřív to stálo drobným písmem
   pod cenou a přehlédlo se to.
   ⚠ Plaketa sedí NAD nadpisem karty, ne u ceny — u ceny by splynula
   s poznámkou „ročně / měsíčně" hned pod ní.
   ====================================================================== */
.cena__stav {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.cena__stav::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
/* Povinné = klidná bílá. Nemá to křičet, jen to má být jasné. */
.cena__stav--musi {
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Dobrovolné = zelená. Je to nabídka, ne podmínka. */
.cena__stav--volne {
  color: var(--accent);
  background: rgb(var(--accent-rgb) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .30);
}
@media (max-width: 760px) {
  /* Na mobilu je karta na střed, ať plaketa nevisí v rohu sama. */
  .zbytek .cena .cena__stav { align-self: center; }
}

/* ======================================================================
   52. SKLENĚNÉ KARTY
   ----------------------------------------------------------------------
   Sklo nedělá průhlednost. Dělá ho pět věcí najednou:
     1. průsvitná výplň (jinak je to jen tmavší obdélník)
     2. světlá hrana NAHOŘE — odlesk, kde světlo dopadá
     3. tmavá hrana DOLE — tloušťka skla
     4. měkký stín pod kartou — leží NAD plochou, ne v ní
     5. záře za mřížkou — bez ní je průsvitnost k nerozeznání od plné výplně

   ⚠ ŽÁDNÝ `backdrop-filter`. Změřeno na šesti kartách:
       plná karta            60 snímků/s
       sklo s rozostřením    20 snímků/s (počítač 1440×900)
       sklo bez rozostření   60 snímků/s
   A rozostření nic nepřidá — za kartami leží jen měkká záře a rozmazat
   rozmazané nic nezmění. Blur má smysl jen nad OSTRÝM obsahem.
   ====================================================================== */
.sluzba,
.cena,
.klid__k,
.clanek-k,
.faq__o,
.cis {
  background:
    linear-gradient(150deg,
      rgb(255 255 255 / .075) 0%,
      rgb(255 255 255 / .022) 38%,
      rgb(0 0 0 / .07) 100%),
    rgb(var(--accent-rgb) / .05);
  border: 1px solid rgb(255 255 255 / .10);
  box-shadow:
    inset 0  1px 0 rgb(255 255 255 / .17),
    inset 0 -1px 0 rgb(0 0 0 / .30),
    0 24px 54px -22px rgb(0 0 0 / .60);
}
.cena, .faq__o, .cis { border-radius: 20px; }

.has-hover .sluzba:hover,
.has-hover .clanek-k:hover {
  background:
    linear-gradient(150deg,
      rgb(255 255 255 / .10) 0%,
      rgb(255 255 255 / .03) 38%,
      rgb(0 0 0 / .07) 100%),
    rgb(var(--accent-rgb) / .09);
  border-color: rgb(var(--accent-rgb) / .30);
}

/* --- záře, kterou karty propouštějí ---------------------------------
   ⚠ Je to OBRÁZEK, ne CSS přechody. Tři radiální přechody přes celou
   šířku stránky musel prohlížeč překreslovat při každém snímku
   (+20 zadrhnutých snímků ze 130). Obrázek je jedna textura: nahraje se
   jednou a dál nestojí nic. Má 160×110 px a 2,2 kB — je to měkká skvrna,
   roztažení na ní nikdo nepozná. Vyrobil ho `scratchpad/…` skript
   s knihovnou PIL; kdyby se měnila paleta, musí se vyrobit znovu.
   ⚠ `filter: blur()` se sem NEVRACÍ. Skvrna už měkká je. */
.sluzby, .cenik, .klid, .clanky, .cisla { position: relative; }
.sluzby::before,
.cenik::before,
.klid::before,
.clanky::before,
.cisla::before {
  content: "";
  position: absolute;
  inset: -14% -6%;
  z-index: -1;
  pointer-events: none;
  background: url("../img/zare-karty.webp") center / 100% 100% no-repeat;
}

/* --- světlá sekce: sklo se ruší --------------------------------------
   ⚠ Bílá průsvitná výplň na krému je špinavý flek, ne sklo. Světlé
   sekce zůstávají ploché. Bez tohohle bloku se rozsypou stránky
   s `.inv`. */
.inv .sluzba,
.inv .cena,
.inv .klid__k,
.inv .clanek-k,
.inv .faq__o,
.inv .cis {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.inv .sluzby::before,
.inv .cenik::before,
.inv .klid::before,
.inv .clanky::before,
.inv .cisla::before { display: none; }

/* ======================================================================
   53. ROHOVÉ TLAČÍTKO SE ŠIPKOU
   ----------------------------------------------------------------------
   Zelený zaoblený čtvereček se šipkou ↗ v pravém horním rohu FOTKY.
   ⚠ První pokus ho posadil na roh celé karty a nechal ho z ní čouhat ven
     (podle vzoru, který Lukáš poslal). Ve vzoru je ale karta jenom ta
     fotka — nemá odsazení, takže tlačítko sedí na jejím rohu. U nás má
     karta odsazení, tlačítko tím viselo v prázdnu nad ní a vypadalo jako
     nalepená samolepka. Lukáš: „ta šipka tam moc nesedí ne..?"
     Řešení je posadit ho tam, kam ve vzoru patří: na roh obrázku.
   ⚠ Žádný prstenec ani zářez. Ten měl smysl jen tam, kde tlačítko leželo
     na hraně dvou ploch. Na fotce by z něj byl flek.
   ====================================================================== */
.clanek-k__obr { position: relative; }
.sip-roh {
  position: absolute;
  top: clamp(10px, 1.1vw, 14px);
  right: clamp(10px, 1.1vw, 14px);
  width: clamp(40px, 3.6vw, 48px);
  aspect-ratio: 1;
  border-radius: 30%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #08191b;
  box-shadow: 0 8px 22px -8px rgb(0 0 0 / .55);
  transition: background var(--t-base) var(--e-io),
              transform var(--t-base) var(--e-out);
}
.sip-roh svg { width: 44%; height: 44%; }
.has-hover a:hover .sip-roh { background: var(--accent-2); transform: scale(1.08); }
.no-motion .sip-roh { transition: none; }
.no-motion .has-hover a:hover .sip-roh { transform: none; }

/* --- totéž na kartách služeb -----------------------------------------
   Lukáš: „dej to i držíme krok…na těch 6 tabu."
   ⚠ Karta služby nemá obrázek, takže tlačítko sedí v rohu KARTY, ne fotky.
     Držet se stejného odsazení, jaké mělo staré kolečko — tím zůstane
     zarovnané se šesti kartami vedle sebe.
   ⚠ Nemění se značky, jen se přebarví to, co v rohu už bylo (`.sluzba__ik`).
     Kdyby se přidal nový prvek, byly by v rohu dva. */
.sluzba__ik {
  width: clamp(38px, 3.2vw, 44px); height: auto;
  aspect-ratio: 1;
  border: 0; border-radius: 30%;
  background: var(--accent);
  color: #08191b;
  box-shadow: 0 8px 20px -9px rgb(0 0 0 / .5);
  transition: background var(--t-base) var(--e-io),
              transform var(--t-base) var(--e-out);
}
.sluzba__ik svg { width: 42%; height: 42%; stroke-width: 2.6; }
.has-hover .sluzba:hover .sluzba__ik {
  background: var(--accent-2); color: #08191b;
  transform: scale(1.08);
}
.no-motion .has-hover .sluzba:hover .sluzba__ik { transform: none; }
/* Nadpis nesmí zajet pod tlačítko — bývalo 48 px na menší kolečko. */
.sluzba h3 { padding-right: clamp(52px, 5vw, 62px); }

/* ======================================================================
   36. BOOST DESIGNU (16. 9. 2026)
   ----------------------------------------------------------------------
   Vzor: newlogic.cz — služby ve třech pilířích Digital / Creative / Boost,
   každý s rozbalovacím seznamem dalších služeb. Tři úrovně webu nad
   „Vybrané práce". Studiové mockupy notebooků místo fotek ze stolu.
   ====================================================================== */

/* --- tři pilíře ------------------------------------------------------ */
.pilire__lede {
  max-width: 62ch; margin: clamp(16px, 2vw, 22px) auto 0;
  text-align: center; color: var(--ink-2); line-height: 1.6;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}
.pilire {
  position: relative;
  width: min(var(--wrap), 100% - var(--gut) * 2); margin: clamp(30px, 4vw, 52px) auto 0;
  display: grid; gap: clamp(10px, 1.2vw, 16px); align-items: start;
}
@media (min-width: 980px) { .pilire { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pilire::before {
  content: ""; position: absolute; inset: -14% -6%; z-index: -1; pointer-events: none;
  background: url("../img/zare-karty.webp") center / 100% 100% no-repeat;
}
.pilir {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgb(255 255 255 / .075) 0%, rgb(255 255 255 / .022) 38%, rgb(0 0 0 / .07) 100%),
    rgb(var(--accent-rgb) / .05);
  border: 1px solid rgb(255 255 255 / .10);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .17), inset 0 -1px 0 rgb(0 0 0 / .30), 0 24px 54px -22px rgb(0 0 0 / .60);
  transition: border-color var(--t-base) var(--e-io);
}
.has-hover .pilir:hover { border-color: rgb(var(--accent-rgb) / .30); }
.pilir__hlava { display: grid; gap: 8px; text-decoration: none; color: inherit; padding-right: clamp(52px, 5vw, 62px); }
.pilir__hlava h3 {
  margin: 0; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem); letter-spacing: -.045em; line-height: 1;
}
.pilir__tag { color: var(--accent); font-size: .95rem; font-weight: 500; line-height: 1.35; }
.pilir .sluzba__ik { position: absolute; top: clamp(24px, 2.6vw, 34px); right: clamp(24px, 2.6vw, 34px); display: grid; place-items: center; }
.has-hover .pilir__hlava:hover .sluzba__ik { background: var(--accent-2); transform: scale(1.08); }
.pilir > p { margin: 0; color: var(--ink-2); line-height: 1.58; font-size: .97rem; }

.pilir__vic { border-top: 1px solid rgb(255 255 255 / .10); padding-top: 4px; }
.pilir__vic summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; font-weight: 600; font-size: .95rem;
}
.pilir__vic summary::-webkit-details-marker { display: none; }
.pilir__vic summary svg { width: 16px; height: 16px; margin-left: auto; transition: transform var(--t-base) var(--e-out); }
.pilir__vic[open] summary svg { transform: rotate(180deg); }
.pilir__vic summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.pilir__pocet {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: rgb(var(--accent-rgb) / .14); color: var(--accent);
  font-size: .76rem; font-weight: 600;
}
.pilir__seznam { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 4px; }
.pilir__seznam a {
  display: grid; gap: 3px; padding: 11px 12px; border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: background var(--t-base) var(--e-io);
}
.pilir__seznam b { font-weight: 600; font-size: .95rem; }
.pilir__seznam span { color: var(--ink-3); font-size: .85rem; line-height: 1.45; }
.has-hover .pilir__seznam a:hover { background: rgb(var(--accent-rgb) / .08); }
.has-hover .pilir__seznam a:hover b { color: var(--accent); }
@supports (interpolate-size: allow-keywords) {
  .pilir__vic { interpolate-size: allow-keywords; }
  .pilir__vic::details-content { height: 0; overflow: clip; transition: height .45s var(--e-out), content-visibility .45s allow-discrete; }
  .pilir__vic[open]::details-content { height: auto; }
}
.no-motion .pilir, .no-motion .pilir__vic summary svg, .no-motion .pilir__vic::details-content { transition: none; }
@media (max-width: 760px) {
  .pilire__lede { text-align: center; }
  .pilir { text-align: left; }
}

/* --- tři úrovně webu (sdílí i /sestav/) -------------------------------- */
#urovne .hl-stred { margin-bottom: 0; }
.urovne__lede { text-align: center; color: var(--ink-2); margin: 14px auto clamp(28px, 3.4vw, 44px); max-width: 52ch; }
.sx-urovne .cena { border-radius: 20px; overflow: hidden; }
.sx-shot {
  position: relative; display: block;
  margin: calc(clamp(26px, 3vw, 38px) * -1) calc(clamp(26px, 3vw, 38px) * -1) 6px;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); text-decoration: none;
}
.sx-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .7s var(--e-out); }
.sx-shot__tag {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px;
  background: rgb(8 20 22 / .82); color: var(--ink); font-size: .8rem; font-weight: 500;
}
.has-hover .sx-shot:hover img { transform: scale(1.04); }
.sx-mini { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; padding: 4px; }
.sx-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.no-motion .sx-shot img { transition: none; }

/* --- úvodní karta: mockup s točícím se odznakem ------------------------ */
.pin__foto--mockup { position: relative; overflow: visible; border: 0; border-radius: 22px; }
.pin__foto--mockup img { aspect-ratio: 1 / 1; max-height: 70svh; object-position: 58% 60%; border-radius: 22px; border: 1px solid rgba(255,255,255,.10); }
.odznak {
  position: absolute; right: clamp(-40px, -2.8vw, -22px); bottom: clamp(-40px, -2.8vw, -22px);
  width: clamp(110px, 10vw, 150px); aspect-ratio: 1; pointer-events: none;
}
.odznak__kruh {
  position: absolute; inset: 22%; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6);
}
.odznak__kruh img { width: 62%; height: auto; aspect-ratio: auto; max-height: none; border: 0; border-radius: 0; filter: brightness(0) saturate(100%); opacity: .88; }
.odznak__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: odznak-toc 26s linear infinite; }
.odznak__text text { fill: var(--ink); font: 600 8.6px/1 var(--f-body); text-transform: uppercase; }
@keyframes odznak-toc { to { transform: rotate(360deg); } }
.no-motion .odznak__text { animation: none; }

/* --- stránky pilířů ---------------------------------------------------- */
.pilst__foto { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); }
.pilst__foto img { width: 100%; aspect-ratio: 3 / 2; max-height: 80svh; object-fit: cover; display: block; }
.pilsty { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.pilst {
  display: grid; gap: clamp(14px, 3vw, 48px); align-items: start;
  padding: clamp(24px, 3vw, 40px); border-radius: 22px; scroll-margin-top: 110px;
  background: linear-gradient(150deg, rgb(255 255 255 / .06) 0%, rgb(255 255 255 / .018) 40%, rgb(0 0 0 / .06) 100%), rgb(var(--accent-rgb) / .04);
  border: 1px solid rgb(255 255 255 / .09);
}
@media (min-width: 900px) { .pilst { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.pilst h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.05; }
.pilst__txt > p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.62; }
.pilst__txt > .pilst__odkaz { margin: 24px 0 0; }
@media (max-width: 760px) { .pilst { text-align: left; } }

/* --- 2. kolo: ikonky služeb, čtyři úrovně, karta e-shopu ---------------- */
.pilir__seznam a { grid-template-columns: 40px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.pilir__ik {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgb(var(--accent-rgb) / .10); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .18);
}
.pilir__ik svg { width: 22px; height: 22px; }
.pilir__pol { display: grid; gap: 3px; }
.has-hover .pilir__seznam a:hover .pilir__ik { background: var(--accent); color: #08191b; }

@media (min-width: 780px)  { .cenik--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .cenik--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cenik--4 .cena__c { font-size: clamp(1.6rem, 1.95vw, 2rem); white-space: nowrap; }
.cenik--4 .cena__c small { white-space: normal; }
.sx-shot--ikona {
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 100%, rgb(var(--accent-rgb) / .22), transparent 60%), var(--bg-2);
}
.sx-shot__ik { width: 38%; color: var(--accent); filter: drop-shadow(0 18px 30px rgb(0 0 0 / .45)); }
.sx-shot__ik svg { width: 100%; height: auto; display: block; }

/* Lava Lamp 1 — jedno tiché plátno pod celým webem (WebGPU).
   Plochy se prosvítí jen když shader opravdu běží (html.lava-on),
   jinak zůstává původní vzhled beze změny. */
.lava-fix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.lava-fix.on { opacity: .6; }
/* Na domovské stránce leží plátno UVNITŘ .zbytek__telo (jinak ho přikryjí přilepené vrstvy úvodu).
   Telo se ořízne na svůj tvar, takže přilepené plátno nepřekryje hero. */
.zbytek__telo { isolation: isolate; clip-path: inset(0 round clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0 0); }
.lava-fix--telo { z-index: -1; }
.lava-on .pas--tmavy  { background: radial-gradient(ellipse 90% 70% at 12% 0%, rgb(var(--accent-rgb) / .07), transparent 62%), rgba(20,38,36,.5); }
.lava-on .pas--svetly { background: radial-gradient(ellipse 85% 65% at 85% 0%, rgb(var(--accent-rgb) / .06), transparent 60%), rgba(31,57,54,.5); }
.lava-on .cta.tmavy   { background: radial-gradient(ellipse 70% 90% at 78% 50%, rgb(var(--accent-rgb) / .06), transparent 62%), rgba(8,20,22,.5); }

/* ======================================================================
   POMÁHÁME BUDOVAT ZNAČKY — skladba bez pozadí (průhledné webp)
   ====================================================================== */
.pin__foto--mockup img {
  aspect-ratio: 1200 / 1490; width: auto; max-width: 100%; height: auto; max-height: 82svh;
  margin-inline: auto; object-fit: contain; object-position: center;
  border: 0; border-radius: 0; background: none;
}

/* ======================================================================
   VYBRANÉ PRÁCE — slider se záložkami (vzor image-expansion z 21st.dev)
   ====================================================================== */
.ps { border-radius: 26px; border: 1px solid var(--line); background: rgba(8,18,17,.62); padding: clamp(18px, 2.6vw, 34px); }
.ps__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.ps__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ps__tab { font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-2); background: none; border: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.ps__tab:hover { color: var(--ink); }
.ps__tab[aria-selected="true"] { background: rgba(255,255,255,.1); color: var(--ink); }
.ps__all { font-size: .88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.ps__all:hover { color: var(--accent); }
.ps__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.ps__track::-webkit-scrollbar { display: none; }
.ps__card { position: relative; flex: 0 0 calc((100% - 40px) / 3); aspect-ratio: 1.5 / 1; border-radius: 20px; overflow: hidden; scroll-snap-align: start; cursor: pointer; border: 1px solid var(--line); background: #0b1514; }
.ps__card[hidden] { display: none; }
.ps__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ps__card:hover img { transform: scale(1.05); }
.ps__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.25) 55%, transparent); pointer-events: none; }
.ps__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #e8efeb; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); }
.ps__badge::before { content: "✦ "; color: var(--accent); }
.ps__txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 20px; display: grid; gap: 12px; justify-items: start; }
.ps__txt h3 { margin: 0; font-family: var(--f-display); font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; line-height: 1.2; color: #fff; }
.ps__btn { display: inline-block; padding: 7px 14px; border-radius: 7px; background: #fff; color: #0b1514; font-size: .74rem; font-weight: 700; text-decoration: none; transition: background .2s; }
.ps__btn:hover { background: var(--accent); }
.ps__bot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.ps__dots { display: flex; gap: 6px; align-items: center; }
.ps__dot { height: 6px; width: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.22); cursor: pointer; transition: width .3s, background .3s; }
.ps__dot[aria-current="true"] { width: 32px; background: #fff; }
.ps__arrows { display: flex; gap: 10px; }
.ps__arr { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.ps__arr:hover { background: rgba(255,255,255,.14); }
.ps__box { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; color: #fff; }
.ps__box::backdrop { background: rgba(0,0,0,.9); }
.ps__box img { width: 100%; max-height: 74svh; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); display: block; }
.ps__box figcaption { text-align: center; margin-top: 14px; display: grid; gap: 10px; justify-items: center; }
.ps__box h3 { margin: 0; font-size: 1.2rem; }
.ps__x, .ps__p, .ps__n { position: fixed; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(20,20,20,.7); color: #fff; cursor: pointer; font-size: 1.1rem; }
.ps__x { top: 22px; right: 22px; } .ps__p { left: 18px; top: 50%; } .ps__n { right: 18px; top: 50%; }
@media (max-width: 980px) { .ps__card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 620px) { .ps__card { flex-basis: 86%; } .ps__top { justify-content: center; } .ps__tabs { justify-content: center; } }

/* ======================================================================
   PATIČKA S ODHRNUTÍM — vzor motion-footer z 21st.dev, přeloženo do čistého CSS/JS
   ====================================================================== */
.zf { position: relative; height: 100svh; min-height: 640px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.zf__in { position: fixed; left: 0; bottom: 0; width: 100%; height: 100svh; min-height: 640px; overflow: hidden; background: #060d0c; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; --zp: 0; }
.zf__aur { position: absolute; left: 50%; top: 50%; width: 80vw; height: 58vh; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(80px); pointer-events: none;
  background: radial-gradient(circle, rgba(62,230,138,.16) 0%, rgba(24,92,74,.18) 45%, transparent 70%); animation: zf-dych 8s ease-in-out infinite alternate; }
@keyframes zf-dych { from { transform: translate(-50%,-50%) scale(1); opacity: .6; } to { transform: translate(-50%,-50%) scale(1.12); opacity: 1; } }
.zf__mriz { position: absolute; inset: 0; pointer-events: none; background-size: 60px 60px;
  background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.zf__obri { position: absolute; left: 50%; bottom: -4vh; white-space: nowrap; font-family: var(--f-display); font-weight: 800; font-size: 25vw; line-height: .75; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); pointer-events: none; user-select: none;
  transform: translate(-50%, calc((1 - var(--zp)) * 10vh)) scale(calc(.8 + var(--zp) * .2)); opacity: var(--zp); }
.zf__pas { position: absolute; top: 40px; left: -5%; width: 110%; overflow: hidden; border-block: 1px solid rgba(255,255,255,.1); background: rgba(6,13,12,.7); padding: 14px 0; transform: rotate(-2deg); z-index: 2; }
.zf__pas > div { display: flex; width: max-content; animation: zf-pas 40s linear infinite; font-size: .78rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.zf__pas span { padding: 0 22px; white-space: nowrap; } .zf__pas i { font-style: normal; color: var(--accent); opacity: .7; }
@keyframes zf-pas { to { transform: translateX(-50%); } }
.zf__stred { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 110px 20px 10px; width: min(1000px, 100%); margin: 0 auto;
  transform: translateY(calc((1 - var(--zp)) * 50px)); opacity: calc(.15 + var(--zp) * .85); }
.zf__stred h2 { margin: 0; text-align: center; font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; line-height: .95; font-size: clamp(2.2rem, 6vw, 4.6rem); }
.zf__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(760px, 100%); }
.zf__form .field { margin: 0; } .zf__form .zf__cela { grid-column: 1 / -1; }
.zf__form .field input, .zf__form .field select { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.zf__form .field > span { font-size: .78rem; color: var(--ink-3); }
.zf__form .btn { width: 100%; justify-content: center; }
.zf__pill { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: .86rem; text-decoration: none; cursor: pointer; will-change: transform;
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 1px rgba(255,255,255,.1), 0 10px 30px -10px rgba(0,0,0,.6);
  transition: transform .5s cubic-bezier(.2,.9,.3,1), border-color .3s, color .3s, background .3s; }
.zf__pill:hover { color: #fff; border-color: rgba(255,255,255,.25); background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.zf__odkazy { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.zf__spod { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(20px, 4vw, 48px) 26px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.zf__nahoru { width: 46px; height: 46px; padding: 0; justify-content: center; border: 1px solid rgba(255,255,255,.1); font: inherit; }
@media (max-width: 900px), (max-height: 700px) {
  .zf { height: auto; clip-path: none; }
  .zf__in { position: relative; height: auto; min-height: 0; }
  .zf__obri { font-size: 34vw; }
  .zf__stred { padding-top: 130px; padding-bottom: 40px; }
  .zf__form { grid-template-columns: 1fr; }
  .zf__spod { flex-direction: column; text-align: center; padding-top: 10px; }
}

/* Hero video o 30 % + dalších 30 % a 20 % tmavší */
.pin__vid { filter: brightness(.39); }

/* Sekce se jemně oddělí tenkou čárou, která se k okrajům vytrácí (jako na nezmescall) */
.zbytek__telo > section { position: relative; }
.zbytek__telo > section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 86%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); pointer-events: none; z-index: 3;
}

/* Lava Lamp 1 v sekci „Pomáháme budovat značky" — tmavá kapka za textem */
.lava-intro { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.lava-intro.on { opacity: .85; }
.pin--intro > *:not(canvas) { position: relative; z-index: 1; }

/* Plug na Nezmešcall v patičce — jemná pilulka v barvách jejich značky */
.zf__pill--nez { background: linear-gradient(145deg, rgba(255,140,66,.14), rgba(8,33,44,.6)); border-color: rgba(255,140,66,.35); color: #ffd9bf; gap: 9px; }
.zf__pill--nez i { width: 8px; height: 8px; border-radius: 50%; background: #ff8c42; display: block; }
.zf__pill--nez:hover { border-color: rgba(255,140,66,.7); color: #fff; }