/* =======================================================================
   KOMPOZICE — David Soják („Podlahovka“, kolo 11)
   Pořadí sekcí a pozadí: hero světlé (ranní slunce) → Co dělám tmavé
   (teplá tma) → Ukázky práce světlé (ranní slunce) → Jak pracuji střední
   (anhydrit) → parťák malý pruh → kontakt tmavý → světlá patička.
   Znak všude stejný: bílá trubka, kterou proteče teplá voda (nadpisy,
   ukazatel v menu, ukazatel záložek služeb, průběh postupu, ventily animace).
   Zlomy: počítač od 1024, tablet 768–1023, mobil do 767.
   ======================================================================= */

body { background: var(--podklad); }
h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); letter-spacing: -.015em; }
.sekce { padding-block: 96px; }

/* ---------- tlačítka: ikona + malý popisek + velký text, obě stejně vysoká ---------- */
.tl { display: inline-flex; align-items: center; gap: 14px; min-width: 272px; padding: 10px 26px 10px 10px; border: 0; border-radius: 999px; text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: transform 450ms var(--krivka), box-shadow 450ms var(--krivka), background-color 300ms; }
.tl:hover { transform: translateY(-2px); }
.tl i { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; }
.tl svg { width: 20px; height: 20px; fill: currentColor; }
.tl small { display: block; font: 500 14.5px/1.15 var(--pismo-text); opacity: .82; }
.tl b { display: block; margin-top: 3px; font: 700 22px/1.1 var(--pismo-text); white-space: nowrap; }
.tl--hlavni { background: var(--akcent); color: var(--akcent-text); box-shadow: 0 20px 36px -22px rgba(60,20,5,.8); }
.tl--hlavni:hover { background: var(--akcent-tmavy); }
.tl--hlavni i { background: rgba(255,255,255,.16); }
.tl--hlavni small { opacity: 1; }
.tl--druhe { background: rgba(255,253,249,.8); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(40,30,20,.14), 0 16px 30px -24px rgba(0,0,0,.5); }
.tl--druhe i { background: var(--text); color: #fff; }
.tl--druhe i svg, .tl--druhe svg { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.na-plose .tl--hlavni { background: #C2552A; color: #FFF8F2; }
.na-plose .tl--hlavni:hover { background: #A94820; }
.na-plose .tl--druhe { background: rgba(255,255,255,.07); color: var(--plocha-text); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.na-plose .tl--druhe i { background: rgba(255,255,255,.14); }
.tl.zkopirovano { box-shadow: inset 0 0 0 2px var(--plocha-akcent); }


/* ---------- hlavička: světlá, ukazatel = trubka, kterou doteče teplo ---------- */
.hlavicka { position: sticky; top: 0; z-index: 50; background: rgba(250,247,242,.9); color: var(--text); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 -1px 0 rgba(40,30,20,.1); transition: box-shadow 300ms, background-color 300ms; }
.hlavicka.posunuto { background: rgba(250,247,242,.96); box-shadow: inset 0 -1px 0 rgba(40,30,20,.1), 0 14px 30px -22px rgba(40,25,10,.45); }
.hlavicka-vnitrek { display: flex; align-items: center; gap: 28px; height: 84px; }
.logo { display: flex; align-items: center; gap: 12px; margin-right: auto; color: inherit; text-decoration: none; }
.logo svg { width: 46px; height: 46px; flex: none; }
/* logo: trubka nakreslí dům, pak se v podlaze stočí do S; po najetí znovu */
.logo .logo-dum, .logo .logo-s { stroke-dasharray: 1; }
.logo .logo-dum { animation: logo-kresli 1.1s .2s cubic-bezier(.45,0,.3,1) both; }
.logo .logo-s { animation: logo-kresli .9s 1s cubic-bezier(.45,0,.3,1) both; }
.logo:hover .logo-dum { animation: logo-kresli2 1.1s cubic-bezier(.45,0,.3,1) both; }
.logo:hover .logo-s { animation: logo-kresli2 .9s .7s cubic-bezier(.45,0,.3,1) both; }
@keyframes logo-kresli { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logo-kresli2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.logo-text b { display: block; font: 700 24px/1 var(--pismo-nadpis); letter-spacing: -.01em; }
.logo-text small { display: block; margin-top: 6px; font: 500 13.5px/1 var(--pismo-text); color: var(--text-tlumeny); }
.menu { position: relative; display: flex; gap: 2px; padding-bottom: 6px; }
.menu a { position: relative; z-index: 1; padding: 14px 18px 12px; color: var(--text); font: 650 17px/1 var(--pismo-text); text-decoration: none; transition: color 400ms; }
.menu a:hover, .menu a.ted { color: var(--akcent); }
.menu-trubka { position: absolute; left: 18px; right: 18px; bottom: 2px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #FFFFFF, #E9E5DF 55%, #C9C3BA); box-shadow: 0 2px 4px -1px rgba(40,30,20,.35), inset 0 0 0 .5px rgba(40,30,20,.12); }
.menu-teplo { position: absolute; left: 1px; top: 2px; bottom: 2px; width: var(--do, 0px); border-radius: 3px; background: linear-gradient(90deg, var(--teplo-1), var(--teplo-2) 60%, var(--teplo-3)); box-shadow: 0 0 8px rgba(240,120,50,.6); transition: width 750ms cubic-bezier(.45,0,.3,1); }
.menu-teplo::after { content: ""; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle, #FFE7B8, #F09A40 55%, rgba(240,120,50,0) 72%); opacity: var(--hlava, 0); transition: opacity 400ms; }
.hl-tel { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--akcent); color: var(--akcent-text); text-decoration: none; font: 700 18px/1 var(--pismo-text); white-space: nowrap; box-shadow: 0 12px 24px -16px rgba(120,40,10,.8); transition: background-color 300ms; }
.hl-tel:hover { background: var(--akcent-tmavy); }
.hl-tel i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16); }
.hl-tel svg { width: 18px; height: 18px; fill: currentColor; }
.menu-prepinac { display: none; width: 52px; height: 48px; padding: 0; border: 0; border-radius: 14px; background: rgba(40,30,20,.07); color: var(--text); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-prepinac span { width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--krivka), opacity 200ms; }
.hlavicka.otevreno .menu-prepinac span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hlavicka.otevreno .menu-prepinac span:nth-child(2) { opacity: 0; }
.hlavicka.otevreno .menu-prepinac span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobil { display: none; }

/* ---------- hero: krátké, čisté pozadí, scéna a pod ní ovládání ---------- */
.hero { position: relative; overflow: hidden; padding-top: 36px; padding-bottom: 56px; background: var(--zrno), radial-gradient(70% 60% at 50% 0%, #F3EBDF, transparent 70%), linear-gradient(180deg, #EAE0D1, #E3D6C4); text-align: center; }
.hero-pozadi { display: none; }
.hero > .blok { position: relative; }
.hero h1 { margin: 0 auto; font-size: clamp(36px, 4.8vw, 70px); line-height: 1.03; }
.hero h1 .znak { display: block; width: fit-content; margin-inline: auto; }
.hero-veta { max-width: 660px; margin: 16px auto 0; font-size: 19px; line-height: 1.55; color: var(--text-tlumeny); }
.akce { display: flex; justify-content: center; gap: 14px; margin-top: 24px; }

/* znak: bílá trubka ohnutá do tvaru písmen, proteče jí teplá voda */
.znak { position: relative; display: inline-block; white-space: nowrap; color: var(--akcent); }
.znak.ma-platno { color: transparent; }
.znak-platno { position: absolute; pointer-events: none; }

.scena-obal { position: relative; margin: 26px auto 0; }
.scena { position: relative; height: clamp(290px, calc(100svh - 530px), 560px); border-radius: 26px 26px 0 0; overflow: hidden; background: #E3DCD2; }
.scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scena-plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms; }
.scena.bezi .scena-plakat { opacity: 0; }
.scena-obal { border-radius: 26px; box-shadow: 0 50px 80px -50px rgba(30,20,10,.7); }

/* ovládání pod scénou: popis vlevo, tři kroky vpravo */
.rizeni { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 16px 16px 16px 26px; border-radius: 0 0 26px 26px; background: #FFFDF9; text-align: left; box-shadow: inset 0 1px 0 rgba(40,30,20,.08); }
.popis-kroku { margin: 0; max-width: 460px; font-size: 15.5px; line-height: 1.45; color: var(--text-tlumeny); }
.popis-kroku b { display: block; margin-bottom: 2px; font: 700 18px/1.2 var(--pismo-nadpis); color: var(--text); }
.popis-kroku.novy { animation: novy-popis 500ms var(--krivka); }
@keyframes novy-popis { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kroky-tl { display: flex; gap: 8px; }
.ventil { all: unset; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-width: 170px; padding: 10px 18px 12px 10px; border-radius: 18px; background: #F2ECE3; cursor: pointer; transition: background-color 400ms, color 400ms, opacity 400ms, box-shadow 400ms; }
.ventil:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }
.ventil-ikona { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: #fff; box-shadow: 0 4px 10px -6px rgba(40,25,10,.5); transition: background-color 400ms, color 400ms; }
.ventil-ikona svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ventil-text small { display: block; font: 500 13px/1.1 var(--pismo-text); color: var(--text-tlumeny); }
.ventil-text b { display: block; margin-top: 3px; font: 700 17px/1.15 var(--pismo-nadpis); white-space: nowrap; }
.ventil-prubeh { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 2px; background: rgba(40,30,20,.08); }
.ventil-prubeh i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--plneni, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--teplo-2), var(--teplo-3)); }
.ventil.na-rade { background: #fff; box-shadow: 0 0 0 2px var(--akcent), 0 14px 26px -16px rgba(120,40,10,.7); animation: zavolej 1.8s ease-in-out infinite; }
.ventil.na-rade .ventil-ikona { background: var(--akcent); color: #fff; }
@keyframes zavolej { 0%, 100% { box-shadow: 0 0 0 2px var(--akcent), 0 0 0 0 rgba(172,69,31,.35); } 50% { box-shadow: 0 0 0 2px var(--akcent), 0 0 0 9px rgba(172,69,31,0); } }
.ventil.bezi { background: #1D1F22; color: #F3EFE9; }
.ventil.bezi .ventil-text small { color: #C9C1B6; }
.ventil.bezi .ventil-ikona { background: #E8702E; color: #fff; }
.ventil.bezi .ventil-prubeh { background: rgba(255,255,255,.14); }
.ventil.hotovo .ventil-ikona { background: #2F6B45; color: #fff; }
.ventil:disabled { cursor: default; opacity: .6; }
.ventil.bezi:disabled, .ventil.hotovo:disabled { opacity: 1; }

/* ---------- hlavičky sekcí ---------- */
.hlava-sekce { margin-bottom: 40px; text-align: center; }
.hlava-sekce h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; }
.hlava-sekce p { max-width: 620px; margin: 16px auto 0; font-size: 19px; color: var(--text-tlumeny); }
.na-plose .hlava-sekce p { color: var(--plocha-tlumeny); }

.sluzby { position: relative; background-color: #1C1916; background-size: cover; background-position: center; color: var(--plocha-text); }

/* šipky (služby, postup) */
.sipka { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background-color 300ms, transform 350ms var(--krivka); }
.sipka:hover { background: #C2552A; transform: scale(1.06); }
.sipka svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sipka--svetla { background: rgba(255,253,249,.92); color: var(--text); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.sipka--svetla:hover { background: var(--akcent); color: #fff; }

/* ---------- Co dělám: dráha — trubka přes celou šířku, vybraná služba přijede doprostřed ---------- */
.sluzby { overflow: clip; }
.dr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr); grid-template-areas: "levy scena pravy" "ovl ovl ovl"; column-gap: 32px; align-items: center; }
.dr-scena { grid-area: scena; position: relative; justify-self: center; width: min(100%, calc(100svh - 250px)); aspect-ratio: 1; touch-action: pan-y; }
.dr-model { position: absolute; z-index: 1; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: transform 1300ms cubic-bezier(.65,0,.25,1), opacity 900ms cubic-bezier(.65,0,.25,1), filter 1300ms; }
.dr-model img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 34px rgba(0,0,0,.55)); }
.dr-model.za { transform: translateX(105%) scale(.62); filter: blur(3px) brightness(.55); }
.dr-model.pred { transform: translateX(-105%) scale(.62); filter: blur(3px) brightness(.55); }
.dr-model.ted { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.dr-levy, .dr-pravy { position: relative; z-index: 2; display: grid; align-self: center; margin-bottom: 12%; }
.dr-levy { grid-area: levy; }
.dr-pravy { grid-area: pravy; }
.dr-text, .dr-detail { grid-area: 1 / 1; visibility: hidden; }
.dr-text.ted, .dr-detail.ted { visibility: visible; }
.dr-text > *, .dr-detail > * { opacity: 0; transform: translateY(18px); transition: opacity 500ms, transform 700ms var(--krivka); }
.dr-text.ted > *, .dr-detail.ted > * { opacity: 1; transform: none; transition-delay: calc(700ms + var(--d, 0ms)); }
.dr-text.ted > :nth-child(2), .dr-detail.ted > :nth-child(2) { --d: 90ms; } .dr-text.ted > :nth-child(3) { --d: 180ms; }
.dr-cislo { display: block; font: 700 16px/1 var(--pismo-nadpis); letter-spacing: .08em; color: #F09A40; }
.dr-cislo::after { content: " / 09"; color: #8F867B; }
.dr-text h3 { margin-top: 12px; font-size: clamp(27px, 2.6vw, 38px); line-height: 1.08; color: #fff; }
.dr-text p { margin-top: 14px; font-size: 17.5px; line-height: 1.6; color: var(--plocha-tlumeny); }
.dr-detail ul { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.dr-detail li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; color: var(--plocha-text); }
.dr-detail li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #F09A40; box-shadow: 0 0 10px rgba(240,140,60,.8); transform: translateY(-2px); }
.dr-detail .tl { min-width: 0; }
.dr-ovladani { grid-area: ovl; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.dr-body { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dr-bod { all: unset; box-sizing: border-box; padding: 10px 13px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #CFC6BA; font: 600 15px/1 var(--pismo-text); cursor: pointer; transition: background-color 400ms, color 400ms, box-shadow 400ms; }
.dr-bod:hover { background: rgba(255,255,255,.12); color: #fff; }
.dr-bod.ted { background: linear-gradient(160deg, #E07A40, #B44B22); color: #fff; box-shadow: 0 10px 22px -12px rgba(224,112,58,.9); }
.dr-bod:focus-visible { outline: 3px solid #F09A40; outline-offset: 2px; }
.dr .dr-sipka { flex: none; background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.dr .dr-sipka:hover { background: var(--akcent); }

/* ilustrace: čáry se nakreslí, výplně se objeví, teplá voda proudí, kapky padají */
@keyframes priblizit { from { transform: scale(1.07); } to { transform: none; } }

/* ---------- Ukázky práce: jeden pás, přední fotka velká ---------- */
.prace { position: relative; overflow: clip; background: var(--zrno), radial-gradient(60% 50% at 50% 55%, #FBF7F1, transparent 75%), #F2ECE3; }
.galerie-scena { position: relative; --gv: clamp(330px, calc(100svh - 470px), 640px); height: calc(var(--gv) + 30px); }
/* ukázky se na počítači vejdou na jednu obrazovku: menší okraje a hlavička */
@media (min-width: 1024px) {
	.prace { padding-block: 56px; }
	.prace .hlava-sekce { margin-bottom: 18px; }
	.prace .hlava-sekce h2 { font-size: clamp(32px, 3.4vw, 48px); }
	.prace .hlava-sekce p { margin-top: 10px; font-size: 17px; }
	.prace .galerie-ovladani { margin-top: 20px; }
	.prace .galerie-prubeh { margin-top: 14px; }
}
.galerie-scena figure { position: absolute; left: 50%; top: 14px; width: calc(var(--gv) * .8); height: var(--gv); margin: 0 0 0 calc(var(--gv) * -.4); overflow: hidden; border-radius: 26px; background: #DCD5CB; box-shadow: 0 30px 50px -40px rgba(30,20,10,.5); cursor: pointer; transition: transform 800ms var(--krivka), opacity 800ms var(--krivka), filter 800ms, box-shadow 800ms; filter: saturate(.25) brightness(1.2) blur(2px); }
.galerie-scena figure.ted { cursor: default; filter: none; box-shadow: 0 0 0 10px #FFFDF9, 0 70px 100px -40px rgba(60,30,10,.75), 0 0 0 11px rgba(40,30,20,.06); }
.galerie-scena img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galerie-ovladani { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; }
.galerie-sipka { display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: var(--text); color: #fff; cursor: pointer; transition: transform 350ms var(--krivka), background-color 300ms; }
.galerie-sipka:hover { transform: scale(1.06); background: var(--akcent); }
.galerie-sipka svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.galerie-pocet { min-width: 74px; text-align: center; font: 500 18px var(--pismo-text); color: var(--text-tlumeny); }
.galerie-pocet b { color: var(--text); font-size: 22px; }
.galerie-prubeh { position: relative; max-width: 360px; height: 10px; margin: 20px auto 0; border-radius: 5px; background: linear-gradient(180deg, #FFFFFF, #E9E5DF 55%, #C9C3BA); box-shadow: 0 2px 5px -1px rgba(40,30,20,.35); }
.galerie-prubeh span { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 5%; border-radius: 3px; background: linear-gradient(90deg, var(--teplo-1), var(--teplo-2) 60%, var(--teplo-3)); box-shadow: 0 0 8px rgba(240,120,50,.6); transition: width 600ms var(--krivka); }

.postup { background: var(--zrno), radial-gradient(70% 60% at 80% 10%, rgba(255,236,214,.6), transparent 70%), linear-gradient(180deg, #E8D3C0, #E2C8B2); }
/* čtyři karty s fotkou z jeho zakázky; uzly spojuje trubka, kterou jednou proteče teplo */
.pk-rada { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: none; margin: 0; padding: 0; list-style: none; }
.pk-rada::before, .pk-rada::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: calc(var(--obr-v) - 4px); height: 12px; border-radius: 6px; z-index: 1; }
.pk-rada { --obr-v: 220px; }
.pk-rada::before { background: linear-gradient(180deg, #FFFFFF, #E9E5DF 55%, #C9C3BA); box-shadow: 0 4px 10px -4px rgba(60,30,10,.4); }
.pk-rada::after { margin: 3px 0; height: 6px; background: linear-gradient(90deg, var(--teplo-2), var(--teplo-3)); box-shadow: 0 0 10px rgba(240,120,50,.7); transform-origin: left; transform: scaleX(0); transition: transform 2600ms cubic-bezier(.45,0,.55,1) 400ms; }
.pk-rada.tece::after { transform: scaleX(1); }
.pk-karta { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: rgba(255,251,245,.78); box-shadow: 0 30px 50px -36px rgba(80,40,15,.7), inset 0 0 0 1px rgba(255,255,255,.6); overflow: visible; transition-delay: calc(var(--i) * 120ms); }
.pk-obr { height: var(--obr-v); border-radius: 24px 24px 0 0; overflow: hidden; }
.pk-obr img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--krivka); }
.pk-karta:hover .pk-obr img { transform: scale(1.05); }
.pk-uzel { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px auto 0; border-radius: 50%; background: #FFFBF5; box-shadow: inset 0 0 0 3px #CBC5BC, 0 8px 18px -10px rgba(60,30,10,.6); font: 700 21px/1 var(--pismo-nadpis); transition: background-color 500ms, color 500ms, box-shadow 500ms; }
.pk-rada.tece .pk-uzel { background: var(--akcent); color: #fff; box-shadow: inset 0 0 0 3px var(--akcent-tmavy), 0 0 0 7px rgba(240,120,50,.2); }
.pk-rada.tece .pk-karta:nth-child(2) .pk-uzel { transition-delay: 1100ms; }
.pk-rada.tece .pk-karta:nth-child(3) .pk-uzel { transition-delay: 1900ms; }
.pk-rada.tece .pk-karta:nth-child(4) .pk-uzel { transition-delay: 2700ms; }
.pk-karta h3 { margin: 14px 22px 0; text-align: center; font-size: 21px; line-height: 1.2; }
.pk-karta p { margin: 8px 22px 24px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--text-tlumeny); }

.partak { padding-block: 72px; background: var(--zrno), linear-gradient(180deg, #E1E6E3, #D8DFDC); box-shadow: inset 0 1px 0 rgba(40,30,20,.08), inset 0 -1px 0 rgba(40,30,20,.08); }
.partak-vnitrek { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: center; }
.partak-stitek { display: inline-flex; align-items: center; gap: 14px; padding: 8px 16px 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -18px rgba(40,30,20,.5); font: 650 15px var(--pismo-text); color: var(--text-tlumeny); }
.partak-stitek img { width: auto; height: 26px; }
.partak-text { text-align: center; justify-self: center; max-width: 560px; }
.partak-text h2 { margin-top: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.partak-jmeno { display: block; margin-top: 6px; font-size: 1.22em; color: var(--akcent); letter-spacing: -.01em; }
.partak-text > p { max-width: 520px; margin: 12px auto 0; font-size: 18.5px; line-height: 1.55; color: var(--text-tlumeny); }
.partak-akce { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.partak-akce .tl { min-width: 0; }
.partak-nahled { display: block; overflow: hidden; border-radius: 18px; background: #1D1F22; box-shadow: 0 50px 80px -46px rgba(30,20,10,.75), 0 0 0 1px rgba(40,30,20,.1); transform: perspective(1500px) rotateY(-7deg) rotateX(2deg); transition: transform 900ms var(--krivka); }
.partak-nahled:hover { transform: none; }
.partak-lista { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; }
.partak-lista i { width: 10px; height: 10px; border-radius: 50%; background: #4A4D52; }
.partak-lista i:first-child { background: #E2694A; }
.partak-lista span { margin-left: 10px; padding: 3px 12px; border-radius: 7px; background: #2B2E33; color: #C9C1B6; font: 500 12.5px var(--pismo-text); }
.partak-nahled img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.kontakt { position: relative; overflow: hidden; color: var(--text); background: var(--zrno), radial-gradient(70% 60% at 50% 45%, #D2BBA1, transparent 75%), linear-gradient(180deg, #C8AE92, #B99B7D); }
.kontakt-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kontakt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: none; }
.kontakt-vnitrek { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.kontakt-karta { display: grid; justify-items: center; max-width: 820px; padding: 40px 48px 36px; border-radius: 32px; background: rgba(255,251,245,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 50px 90px -50px rgba(80,40,15,.55), inset 0 0 0 1px rgba(255,255,255,.7); pointer-events: auto; }
.kontakt-hrat { margin-top: 18px; font: 600 14.5px var(--pismo-text); color: #33291F; }
/* nápověda podle ovládání: myš na počítači, prst na telefonu a tabletu */
.kontakt-hrat .pro-prst { display: none; }
@media (hover: none), (pointer: coarse) { .kontakt-hrat .pro-mys { display: none; } .kontakt-hrat .pro-prst { display: inline; } }
.kontakt-hrat::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #E0703A; box-shadow: 0 0 10px #E0703A; vertical-align: 1px; }
.kontakt-logo { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -16px rgba(40,25,10,.5); font: 700 17px var(--pismo-nadpis); }
.kontakt-logo svg { width: 38px; height: 38px; }
.kontakt h2 { margin-top: 18px; font-size: clamp(32px, 4vw, 56px); line-height: 1.06; }
.kontakt-veta { max-width: 560px; margin-top: 14px; font-size: 19px; color: var(--text-tlumeny); }
.kontakt-cislo { margin-top: 20px; color: inherit; text-decoration: none; font: 750 clamp(52px, 8.5vw, 120px)/1.05 var(--pismo-nadpis); letter-spacing: -.01em; }
.kontakt-akce { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.kontakt-udaje { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 34px 0 0; }
.kontakt-udaje div { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -18px rgba(40,25,10,.5); }
.kontakt-udaje dt { display: flex; align-items: center; gap: 8px; font: 600 15px var(--pismo-text); color: var(--text-tlumeny); }
.kontakt-udaje dt svg { width: 20px; height: 20px; fill: none; stroke: var(--akcent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-udaje dd { margin: 0; font: 700 17px var(--pismo-text); }

/* ---------- patička: grafit s teplým okrajem, logo a tři sloupce ---------- */
.paticka { position: relative; padding-top: 72px; background-color: #1C1916; background-size: cover; background-position: center; color: #EDE6DB; }
.paticka::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--teplo-1), var(--teplo-2) 40%, var(--teplo-3) 70%, var(--teplo-2)); }
.paticka-vnitrek { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px 40px; align-items: start; }
.paticka-logo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.paticka-logo svg { width: 60px; height: 60px; flex: none; }
.paticka-logo b { display: block; font: 750 30px/1 var(--pismo-nadpis); letter-spacing: -.01em; }
.paticka-logo span { font-size: 14px; color: #B3AA9E; }
.paticka-logo p { grid-column: 1 / -1; max-width: 340px; margin-top: 18px; font-size: 16px; line-height: 1.6; color: #B3AA9E; }
.paticka-sloupec { display: grid; gap: 11px; justify-items: start; font-size: 16px; color: #B3AA9E; }
.paticka-sloupec b { margin-bottom: 4px; font: 700 15px var(--pismo-text); letter-spacing: .02em; color: #F09A40; }
.paticka-sloupec a { color: #EDE6DB; text-decoration: none; transition: color 300ms; }
.paticka-sloupec a:hover { color: #F6B48A; }
.paticka-sloupec a[href^="tel"] { font: 750 24px var(--pismo-nadpis); color: #fff; }
.cookies-odkaz { display: inline-flex; align-items: center; min-height: 0; padding: 0; border: 0; background: none; color: #EDE6DB; font: 500 15.5px var(--pismo-text); text-decoration: none; cursor: pointer; }
.cookies-odkaz:hover { color: #F6B48A; }
.autor { max-width: var(--blok); margin: 40px auto 0; padding: 0 var(--okraj) 26px; text-align: center; font: 500 16px var(--pismo-text); color: #B3AA9E; }
.autor::before { content: ""; display: block; height: 1px; margin-bottom: 20px; background: rgba(255,255,255,.12); }
.autor a { color: #EDE6DB; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- cookie lišta s logem ---------- */
.cookies-lista { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 920px; margin-inline: auto; padding: 22px 26px; border-radius: 22px; background: #1D1F22; color: var(--plocha-text); box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transform: translateY(24px); transition: opacity 300ms var(--krivka), transform 300ms var(--krivka); }
.cookies-lista[hidden] { display: none; }
.cookies-lista.vidi { opacity: 1; transform: none; }
.cookies-vnitrek { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.cookies-nadpis { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 700 20px/1.25 var(--pismo-nadpis); color: var(--plocha-akcent-svetly); }
.cookies-nadpis svg { width: 32px; height: 32px; flex: none; }
.cookies-text { margin: 0; font-size: 15px; line-height: 1.6; }
.cookies-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookies-tlacitka { display: flex; gap: 10px; }
.cookies-tlacitka .tlacitko { min-width: 130px; border-radius: 999px; }
.cookies-lista .tlacitko--primarni { background: var(--plocha-akcent); color: var(--plocha-akcent-text); }
.cookies-lista .tlacitko--sekundarni { background: transparent; color: var(--plocha-text); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }

/* ---------- ochrana údajů a 404 ---------- */
.pravni-text { max-width: 760px; }
.pravni-text h2 { margin-top: 2.2em; font-size: clamp(22px, 2.6vw, 28px); }
.pravni-text p, .pravni-text li { margin-top: .75em; line-height: 1.7; }
.pravni-text ul { margin-top: .5em; padding-left: 1.3em; list-style: disc; }
.pravni-text a { color: var(--akcent-odkaz); text-decoration: underline; text-underline-offset: 3px; }
.pravni-text .cookies-odkaz { display: inline; color: var(--akcent-odkaz); font-size: inherit; text-decoration: underline; }
.pravni-karta { margin-top: 1.2em; padding: 18px 22px; border-radius: 16px; background: var(--karta); box-shadow: 0 0 0 1px rgba(40,30,20,.12); }
.pravni-karta p { margin-top: .2em; }
.stranka-404 { min-height: 62vh; display: grid; align-items: center; }
.stranka-404 h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.05; }
.akce--vlevo { justify-content: flex-start; flex-wrap: wrap; }

/* ================= tablet ================= */
@media (max-width: 1023px) {
	.pk-rada { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
	.pk-rada::before, .pk-rada::after { display: none; }
	.pk-rada .pk-uzel { background: var(--akcent); color: #fff; }
	.sekce { padding-block: 88px; }
	.menu, .hl-tel span { display: none; }
	.hl-tel { padding: 8px; }
	.menu-prepinac { display: inline-flex; }
	.hlavicka-vnitrek { gap: 12px; height: 76px; }
	.menu-mobil { display: grid; gap: 4px; max-height: 0; overflow: hidden; padding: 0 var(--okraj); transition: max-height 500ms var(--krivka), padding 500ms var(--krivka); }
	.hlavicka.otevreno .menu-mobil { max-height: 360px; padding-bottom: 18px; }
	.menu-mobil a { display: flex; align-items: center; min-height: 56px; padding: 0 18px; border-radius: 14px; background: rgba(40,30,20,.06); color: var(--text); font: 650 19px var(--pismo-text); text-decoration: none; }
	.galerie-scena { --gv: min(560px, 62svh); }
	.partak-vnitrek { grid-template-columns: 1fr; gap: 40px; }
	.partak-nahled { max-width: 560px; transform: none; }
	.paticka-vnitrek { grid-template-columns: 1fr 1fr; }
	.paticka-logo { grid-column: 1 / -1; }
}

/* ================= mobil ================= */
@media (max-width: 767px) {
	.sekce { padding-block: 72px; }
	.logo svg { width: 40px; height: 40px; }
	.logo-text b { font-size: 21px; }
	.logo-text small { font-size: 12.5px; }
	.hero { padding-top: 34px; padding-bottom: 48px; }
	.hero h1 { font-size: clamp(32px, 10.4vw, 46px); }
	.hero-veta { font-size: 18px; }
	.akce { gap: 10px; }
	.akce .tl { flex: 1 1 0; min-width: 0; gap: 10px; padding: 8px 10px 8px 8px; }
	.akce .tl i { width: 42px; height: 42px; }
	.akce .tl b { font-size: 16px; }
	.akce .tl small { font-size: 12.5px; }
	.scena-obal { margin-top: 26px; margin-inline: calc(var(--okraj) * -1 + 8px); }
	.scena { height: clamp(300px, 48svh, 440px); border-radius: 22px 22px 0 0; }
	.rizeni { grid-template-columns: 1fr; gap: 12px; padding: 14px; border-radius: 0 0 22px 22px; }
	.popis-kroku { font-size: 14.5px; }
	.popis-kroku b { font-size: 16.5px; }
	.kroky-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.ventil { min-width: 0; flex-direction: column; gap: 6px; padding: 10px 6px 14px; text-align: center; }
	.ventil-text small { display: none; }
	.ventil-text b { margin: 0; font-size: 13.5px; white-space: normal; }
	.hlava-sekce { margin-bottom: 36px; }
	.galerie-scena { --gv: min(100vw, 400px); height: calc(var(--gv) + 30px); }
	.galerie-scena figure.ted { box-shadow: 0 0 0 5px #FFFDF9, 0 40px 60px -30px rgba(60,30,10,.6); }
	.paticka-vnitrek { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
	.paticka-odkazy { grid-column: 1 / -1; }
	.partak { padding-block: 56px; }
	.partak-akce .tl { flex: 1 1 100%; }
	.kontakt-cislo { font-size: clamp(40px, 12.5vw, 64px); }
	.kontakt-akce { width: 100%; }
	.kontakt-karta { padding: 28px 18px 24px; }
	.kontakt-akce .tl { flex: 1 1 100%; min-width: 0; }
	.cookies-vnitrek { grid-template-columns: 1fr; gap: 16px; }
	.cookies-tlacitka .tlacitko { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 767px) {
	/* jak pracuji na telefonu: karty pod sebou, fotka vlevo, číslo a text vpravo */
	.pk-rada { grid-template-columns: 1fr; row-gap: 14px; }
	.pk-karta { display: grid; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; }
	.pk-obr { grid-row: 1 / 4; height: 100%; min-height: 160px; border-radius: 22px 0 0 22px; }
	.pk-uzel { width: 38px; height: 38px; margin: 16px 0 0; font-size: 16px; }
	.pk-karta h3 { margin: 10px 16px 0 0; text-align: left; font-size: 19px; }
	.pk-karta p { margin: 6px 16px 18px 0; text-align: left; font-size: 15px; line-height: 1.5; }
}
@media (max-width: 380px) {
	.paticka-sloupec a[href^="tel"] { font-size: 20px; }
	.pk-rada { grid-template-columns: 1fr; }
	.logo-text small { display: none; }
	.akce { flex-direction: column; }
	.ventil-text b { font-size: 12.5px; }
}

@media (min-width: 1024px) and (max-height: 900px) {
	.sekce { padding-block: 76px; }
	.hlava-sekce { margin-bottom: 30px; }
	.partak { padding-block: 56px; }
}
/* nízký notebook: hero i scéna se vejdou */
@media (min-width: 1024px) and (max-height: 760px) {
	.sekce { padding-block: 60px; }
	.hero { padding-top: 32px; padding-bottom: 48px; }
	.hero h1 { font-size: clamp(36px, 4.4vw, 58px); }
	.hero-veta { margin-top: 12px; font-size: 18px; }
	.akce { margin-top: 18px; }
	.scena-obal { margin-top: 24px; }
	.scena { height: clamp(260px, calc(100svh - 470px), 480px); }
}

/* tablet: popis kroku nad tlačítky, ať se nemačká do úzkého sloupce */
@media (max-width: 1023px) and (min-width: 768px) {
	.rizeni { grid-template-columns: 1fr; gap: 14px; }
	.popis-kroku { max-width: none; }
	.kroky-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Co dělám na menších obrazovkách */
@media (max-width: 1180px) and (min-width: 1024px) { .dr { grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); column-gap: 24px; } }
@media (max-width: 1023px) {
	.dr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scena" "ovl" "levy" "pravy"; row-gap: 18px; text-align: center; }
	.dr-levy, .dr-pravy { margin-bottom: 0; }
	.dr-scena { width: min(100%, 520px); }
	.dr-text p { max-width: 560px; margin-inline: auto; }
	.dr-detail ul { justify-items: center; }
	.dr-ovladani { margin: 0 0 10px; }
}
@media (max-width: 767px) {
	/* telefon: celá služba (model, šipky, název, popis, body a tlačítko) na jednu obrazovku */
	.sluzby .hlava-sekce { margin-bottom: 4px; }
	.sluzby .hlava-sekce p { margin-top: 10px; font-size: 16px; line-height: 1.5; }
	.dr { row-gap: 10px; }
	.dr-scena { width: min(100%, 380px); aspect-ratio: 1 / .84; }
	.dr-model img { object-fit: cover; object-position: 50% 100%; }
	.dr-ovladani { margin: 0; }
	.dr .dr-sipka { width: 44px; height: 44px; }
	.dr-text h3 { margin-top: 8px; font-size: 26px; }
	.dr-text p { margin-top: 8px; line-height: 1.5; }
	.dr-detail ul { gap: 6px; margin: 10px 0 16px; }
	.dr-detail li { font-size: 15.5px; }
	.dr-text h3 { margin-top: 10px; }
	.dr-text p { font-size: 16px; }
	.dr-detail ul { margin-bottom: 20px; }
	.dr-detail .tl { width: 100%; }
	.dr-ovladani { gap: 8px; }
	.dr-body { gap: 0; }
	.dr-bod, .dr-bod:hover, .dr-bod.ted { position: relative; width: 24px; height: 24px; padding: 0; background: none; box-shadow: none; }
	.dr-bod.ted { width: 36px; }
	.dr-bod::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 5px; background: rgba(255,255,255,.28); transition: width 400ms, margin 400ms, background-color 400ms; }
	.dr-bod.ted::before { width: 28px; margin-left: -14px; background: linear-gradient(90deg, #E07A40, #B44B22); }
	.dr-bod span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* devět teček a dvě šipky se vejdou do jedné řady i na šířku 360 px */
@media (max-width: 400px) {
	.dr-ovladani { gap: 4px; }
	.dr-bod.ted { width: 24px; }
	.dr-bod.ted::before { width: 20px; margin-left: -10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ventil.na-rade { animation: none !important; }
	.dr-model, .dr-text > *, .dr-detail > * { transition: none !important; animation: none !important; }
	.galerie-scena figure, .pk-rada::after, .pk-uzel, .menu-teplo { transition: none !important; }
	.logo .logo-dum, .logo .logo-s { animation: none !important; stroke-dasharray: none; }
}

/* 3. 11.: obrazovky — scéna nikdy není širší než 2,6 : 1. Výška z obrazovky je jen spodní mez, takže na nízké
   široké obrazovce scéna drží poměr (ovládání je o kousek níž), místo aby se zmáčkla a kamera ořízla vršek a spodek. */
@media (min-width: 1024px) {
	.scena { width: 100%; aspect-ratio: 2.6; height: auto !important; min-height: clamp(260px, calc(100svh - 530px), 560px); }
}