/* =======================================================================
   KOMPOZICE — VTE Vlček
   Hero = dům v řezu (obývák | technická místnost | koupelna) přes celou
   šířku, ovládaný tlačítky. Znak = tři barevné linky (voda, topení,
   elektro) jako u polepu dodávky. Klidová větev na konci souboru.
   ======================================================================= */

body { color: var(--text); }
h1, h2 { color: var(--indigo); }
.na-plose h2 { color: #fff; }

/* ======================= ZNAK: tři linky ======================= */
.podpis {
	position: relative;
	display: inline-block;
	color: var(--text);
	line-height: inherit;
	padding-bottom: 0.08em;
}
.na-plose .podpis { color: var(--plocha-zvyrazneni); }
.znak {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: grid;
	gap: 3px;
	pointer-events: none;
}
.znak i {
	display: block;
	height: 5px;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 900ms var(--krivka);
}
.znak i:nth-child(1) { background: var(--voda); width: 100%; }
.znak i:nth-child(2) { background: var(--topeni); width: 84%; transition-delay: 150ms; }
.znak i:nth-child(3) { background: var(--elektro); width: 68%; transition-delay: 300ms; }
.znak i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 50%, transparent);
	transform: translateX(-110%);
}
.podpis.ukazany .znak i { transform: scaleX(1); }
.podpis.ukazany .znak i::after { animation: lesk 1.4s 1.1s var(--krivka) both; }
.podpis.ukazany .znak i:nth-child(2)::after { animation-delay: 1.25s; }
.podpis.ukazany .znak i:nth-child(3)::after { animation-delay: 1.4s; }
@keyframes lesk { to { transform: translateX(110%); } }
h1 .znak i { height: 7px; }
h1 .znak { gap: 4px; top: calc(100% + 2px); }

/* ======================= HLAVIČKA ======================= */
.hlavicka {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	box-shadow: 0 1px 0 var(--linka);
}
.hlavicka-vnitrek { display: flex; align-items: center; gap: 32px; height: 88px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--indigo); }
.logo:hover { color: var(--indigo); }
.logo b { display: block; font-weight: 900; font-size: 22px; line-height: 1.1; }
.logo small { display: block; font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--text-tlumeny); }
.menu { display: flex; gap: 32px; margin-left: auto; }
.menu a {
	position: relative;
	color: var(--text);
	font-weight: 800;
	font-size: 17px;
	text-decoration: none;
	padding: 12px 0;
}
.menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13px;
	background:
		linear-gradient(var(--voda), var(--voda)) 0 0 / 100% 3px no-repeat,
		linear-gradient(var(--topeni), var(--topeni)) 0 5px / 80% 3px no-repeat,
		linear-gradient(var(--elektro), var(--elektro)) 0 10px / 60% 3px no-repeat;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 450ms var(--krivka);
}
.menu a:hover::after { transform: scaleX(.4); }
.menu a.aktivni::after { transform: scaleX(1); }
.hlavicka-tel { gap: 8px; }
.menu-prepinac { display: none; }

@media (max-width: 1099px) {
	.hlavicka-vnitrek { height: 72px; gap: 16px; }
	.menu-prepinac {
		display: grid;
		place-content: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		border: 0;
		border-radius: 14px;
		background: var(--podklad-odliseny);
		cursor: pointer;
	}
	.menu-prepinac span { display: block; width: 22px; height: 3px; border-radius: 3px; transition: transform var(--prechod-kratky) var(--krivka), opacity var(--prechod-kratky); }
	.menu-prepinac span:nth-child(1) { background: var(--voda); }
	.menu-prepinac span:nth-child(2) { background: var(--topeni); }
	.menu-prepinac span:nth-child(3) { background: var(--elektro); }
	.otevreno .menu-prepinac span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.otevreno .menu-prepinac span:nth-child(2) { opacity: 0; }
	.otevreno .menu-prepinac span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
	.hlavicka-tel { margin-left: auto; }
	.menu {
		position: fixed;
		inset: 72px 0 0;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 24px;
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka), visibility 0s linear var(--prechod-kratky);
	}
	.otevreno .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.menu a { font-size: 24px; padding: 12px 0; align-self: flex-start; }
}
@media (max-width: 479px) {
	.logo small { display: none; }
	.logo-znak { width: 56px; height: 30px; }
	.hlavicka-tel span { display: none; }
	.hlavicka-tel { padding-inline: 12px; }
}

/* ======================= HERO ======================= */
.hero {
	position: relative;
	background: var(--podklad-odliseny);
	overflow: hidden;
	height: 812px;
}
.hero-text { position: relative; z-index: 3; padding-top: 56px; }
.hero h1 { font-size: 56px; line-height: 1.08; max-width: 600px; text-wrap: wrap; }
.hero-veta { margin-top: 44px; max-width: 460px; color: var(--text-tlumeny); font-weight: 500; }
.scena {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1600px;
	height: 820px;
	transform: translateX(-50%);
}
.scena svg { display: block; width: 100%; height: 100%; }

/* stavy scény: s0 vše vypnuté … s4 doma teplo */
.sc .on1, .sc .on2, .sc .on3, .sc .on4 { opacity: 0; transition: opacity 900ms var(--krivka); }
.sc.s1 .on1, .sc.s2 .on1, .sc.s3 .on1, .sc.s4 .on1,
.sc.s2 .on2, .sc.s3 .on2, .sc.s4 .on2,
.sc.s3 .on3, .sc.s4 .on3,
.sc.s4 .on4 { opacity: 1; }
.paka { transform-box: view-box; transform-origin: 900px 588px; transform: rotate(0deg); transition: transform 800ms cubic-bezier(.3,1.4,.5,1); }
.sc:not(.s0) .paka { transform: rotate(-90deg); }
.sprcha { opacity: 0; transition: opacity 500ms; }
.sc.s3 .sprcha, .sc.s4 .sprcha { opacity: .85; }
.tok { stroke-dasharray: 12 16; animation: tok 1.1s linear infinite; }
.tok-zpet { animation-direction: reverse; }
@keyframes tok { to { stroke-dashoffset: -56; } }
#plameny ellipse { transform-box: fill-box; transform-origin: 50% 100%; animation: plamen .55s ease-in-out infinite alternate; }
@keyframes plamen { to { transform: scaleY(1.25) scaleX(.9); } }
.vrtule { transform-box: fill-box; transform-origin: center; }
.sc.s2 .vrtule, .sc.s3 .vrtule, .sc.s4 .vrtule { animation: tocit .45s linear infinite; }
@keyframes tocit { to { transform: rotate(360deg); } }
.kapky { animation: kapky .6s linear infinite; }
@keyframes kapky { to { stroke-dashoffset: -20; } }
.obl { transform-box: fill-box; transform-origin: center; animation: obl 4s ease-out infinite; animation-delay: -1s; }
.obl.b { animation-delay: -2.3s; } .obl.c { animation-delay: -3.4s; } .obl.d { animation-delay: -.2s; }
@keyframes obl { 0% { transform: translateY(30px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-110px) scale(1.4); opacity: 0; } }
.vlna { animation: vlna 2.2s -.5s ease-out infinite; }
.vlna.b { animation-delay: -1.2s; } .vlna.c { animation-delay: -1.9s; }
@keyframes vlna { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-36px); opacity: 0; } }
.snih circle { animation: snih 5s linear infinite; }
.snih circle:nth-child(2n) { animation-duration: 6.5s; animation-delay: -2s; }
.snih circle:nth-child(3n) { animation-duration: 4.2s; animation-delay: -3s; }
@keyframes snih { from { transform: translate(0, -30px); } to { transform: translate(-10px, 120px); } }

.stitek {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	background: #fff;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 800;
	font-size: 15px;
	box-shadow: 0 8px 24px rgba(27,23,71,.12);
	white-space: nowrap;
}
.stitek i { width: 10px; height: 10px; border-radius: 50%; background: var(--voda); transition: background-color 600ms; }
.stitek.teplo i { background: var(--topeni); }
.stitek-venku { left: 530px; top: 360px; min-height: 30px; padding: 4px 14px; }
.stitek-venku i { background: #9fc4e8; }
.stitek-doma { left: 548px; top: 600px; }
.stitek-voda { left: 1300px; top: 220px; }
.bublina {
	position: absolute;
	z-index: 3;
	left: 1040px;
	top: 96px;
	width: 320px;
	background: #fff;
	border-radius: 20px;
	padding: 16px 24px;
	box-shadow: 0 16px 40px rgba(27,23,71,.14);
	color: var(--text-tlumeny);
	font-size: 16px;
	line-height: 1.45;
}
.bublina b { display: block; color: var(--text); font-size: 20px; line-height: 1.25; margin-bottom: 4px; }

.ovladani {
	position: absolute;
	z-index: 4;
	left: max(24px, calc(50% - 616px));
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: 24px;
	padding: 16px 16px 16px 24px;
	box-shadow: 0 20px 44px rgba(27,23,71,.16);
}
.ovladani-nadpis { font-weight: 900; color: var(--indigo); font-size: 15px; line-height: 1.3; width: 136px; }
.ovladani-tlacitka { display: flex; gap: 8px; }
.ovladani button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 8px 16px 8px 8px;
	font: 800 16px/1.25 var(--pismo-text);
	color: var(--text);
	background: #fff;
	border: 2px solid var(--linka);
	border-radius: 16px;
	cursor: pointer;
	transition: background-color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka), color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka);
}
.ovladani button i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--podklad-odliseny); }
.ovladani button svg * { stroke: var(--indigo); }
.ovladani button:hover { border-color: var(--indigo); }
.ovladani button:active { transform: scale(var(--stisk)); }
.ovladani button.hotovo { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ovladani button.hotovo i { background: rgba(255,255,255,.16); }
.ovladani button.hotovo svg * { stroke: #fff; }
.ovladani button.dalsi { border-color: var(--topeni); position: relative; }
.ovladani button.dalsi::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 16px;
	border: 2px solid var(--topeni);
	animation: puls 1.6s ease-out infinite;
}
@keyframes puls { from { transform: scale(1); opacity: .8; } to { transform: scale(1.12, 1.3); opacity: 0; } }
.ovladani .znovu { padding: 8px; min-width: 56px; justify-content: center; border-color: transparent; }

/* tablet a mobil: text, pod ním scéna, pod ní ovládání */
@media (max-width: 1199px) {
	.hero { height: auto; padding-bottom: 32px; }
	.hero-text { padding-top: 48px; }
	.hero h1 { font-size: 56px; }
	.hero-veta { margin-top: 48px; }
	.scena { position: relative; left: auto; transform: none; width: 100%; height: auto; margin-top: 24px; }
	.scena svg { height: auto; aspect-ratio: 1450 / 760; }
	.stitek { display: none; }
	.bublina { position: relative; left: auto; top: auto; width: auto; max-width: 640px; margin: 16px var(--okraj) 0; }
	.ovladani { position: relative; left: auto; bottom: auto; margin: 16px var(--okraj) 0; flex-wrap: wrap; }
	.ovladani-nadpis { width: 100%; }
	.ovladani-tlacitka { flex-wrap: wrap; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.bublina, .ovladani { margin-inline: auto; width: fit-content; max-width: calc(100% - 2 * var(--okraj)); }
	.bublina { min-width: 560px; }
}
@media (max-width: 767px) {
	.hero h1 { font-size: 40px; }
	.scena svg { aspect-ratio: 5 / 4; }
	.ovladani { padding: 16px; }
	.ovladani-tlacitka { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.ovladani button { font-size: 15px; }
	.ovladani .znovu { grid-column: 1 / -1; min-height: 48px; }
}

/* ======================= PŘECHOD: tři trubky ======================= */
.prechod { height: 64px; background: var(--podklad); }
.prechod-hero { background: linear-gradient(var(--podklad-odliseny) 0 30px, var(--podklad) 30px); }
.prechod svg { display: block; width: 100%; height: 100%; }
.prechod-kontakt { background: linear-gradient(var(--podklad-odliseny) 0 30px, var(--plocha) 30px); }

/* ======================= SEKCE obecně ======================= */
.hlava-sekce { margin-bottom: 56px; }
.hlava-sekce h2 { margin-bottom: 24px; }
.hlava-sekce .veta { margin-top: 32px; }
.veta { font-weight: 500; }

/* ======================= SLUŽBY ======================= */
.sluzba { height: 100%; cursor: default; }
.sluzba .ilu {
	display: block;
	width: 100%;
	height: 136px;
	border-radius: 16px;
	background: var(--podklad-odliseny);
	padding: 16px;
	overflow: visible;
}
.sluzba p { font-size: 16px; line-height: 1.6; }
.sluzba * { transform-box: fill-box; }
.i-plamen { transform-origin: 50% 100%; transform: scale(.6); transition: transform 500ms var(--krivka); }
.i-vrtule { transform-origin: center; }
.i-teplo { transition: opacity 500ms; }
.i-vlny { opacity: 0; transition: opacity 400ms; }
.i-kapka { transform: translateY(-8px); opacity: 0; }
.i-kruh { opacity: 0; transform-origin: center; }
.i-kour circle { opacity: .25; }
.i-slunce { transform-origin: center; }
.i-postrik { opacity: .2; transform-origin: 50% 100%; }
.i-jiskry { opacity: 0; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-plamen { transform: scale(1); animation: plamen .5s .4s ease-in-out infinite alternate; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-vrtule { animation: tocit .5s linear infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-teplo { opacity: .14; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-vlny { opacity: 1; animation: vlna 1.8s ease-out infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-kapka { animation: kapka 1.2s ease-in infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-kruh { animation: kruh 1.2s ease-out infinite; }
@keyframes kapka { 0% { transform: translateY(-8px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(18px); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes kruh { 0%, 78% { transform: scale(.2); opacity: 0; } 82% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.sluzba:is(:hover, :focus-visible, .zivy) .i-kour circle { animation: kour 1.8s ease-out infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-kour circle:nth-child(2) { animation-delay: .3s; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-kour circle:nth-child(3) { animation-delay: .6s; }
@keyframes kour { from { opacity: .9; transform: translate(0, 6px) scale(.7); } to { opacity: 0; transform: translate(8px, -14px) scale(1.4); } }
.sluzba:is(:hover, :focus-visible, .zivy) .i-slunce { animation: tocit 6s linear infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-postrik { opacity: 1; animation: postrik 1.6s ease-in-out infinite alternate; }
@keyframes postrik { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.sluzba:is(:hover, :focus-visible, .zivy) .i-jiskry { animation: jiskry .35s steps(2) infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-zar { opacity: .7; }
@keyframes jiskry { 50% { opacity: 1; } }
.znacky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.znacky span { padding: 8px 16px; border-radius: 999px; background: var(--podklad-odliseny); font-weight: 700; color: var(--text-tlumeny); font-size: 15px; }

/* ======================= PROHLÍDKA (scroll) ======================= */
.prohlidka .veta { color: var(--plocha-tlumeny); }
.prohlidka-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.prohlidka-obraz { position: sticky; top: 120px; align-self: start; text-align: center; }
.kotel-velky { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.prohlidka-cena { margin: 16px auto 0; color: var(--plocha-tlumeny); font-size: 18px; }
.prohlidka-cena b { color: #fff; }
.kroky { list-style: none; padding: 0; margin: 0; max-width: none; position: relative; }
.kroky::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 40vh; width: 3px; background: rgba(255,255,255,.18); }
.krok { display: grid; grid-template-columns: 48px 1fr; gap: 24px; min-height: 52vh; padding-bottom: 32px; opacity: .45; transition: opacity 500ms var(--krivka); }
.krok:last-child { min-height: 40vh; }
.krok.aktivni, .krok.hotovy { opacity: 1; }
.krok-cislo { position: relative; z-index: 1; width: 48px; height: 48px; padding: 0; color: #fff; font-family: var(--pismo-text); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; background: var(--plocha); border: 3px solid rgba(255,255,255,.35); transition: background-color 400ms, border-color 400ms; }
.krok.hotovy .krok-cislo { background: #fff; color: var(--indigo); border-color: #fff; }
.krok.aktivni .krok-cislo { background: var(--topeni); border-color: var(--topeni); color: #fff; }
.krok .nazev { color: #fff; }
.krok p { margin-top: 8px; color: var(--plocha-tlumeny); font-size: 18px; }

/* stavy velkého kotle */
.kotel-velky * { transform-box: fill-box; }
.kryt { transition: transform 900ms var(--krivka), opacity 700ms; transform-origin: 50% 0; }
.kotel-velky:is(.k1, .k2, .k4, .k3) .kryt { transform: translate(-60px, -30px) rotate(-8deg); opacity: 0; }
.spina { transition: opacity 1.2s 600ms; }
.kotel-velky:is(.k4, .k3, .k5) .spina { opacity: 0; }
.kotel-velky.k2 .spina { opacity: 0; }
.kartac { opacity: 0; transition: opacity 300ms; }
.kotel-velky.k2 .kartac { opacity: 1; animation: kartac 1.2s ease-in-out infinite alternate; }
@keyframes kartac { from { transform: translateX(0); } to { transform: translateX(170px); } }
.k-plamen { opacity: 0; transition: opacity 500ms; }
.kotel-velky:is(.k4, .k5) .k-plamen { opacity: 1; }
.k-plamen ellipse { transform-origin: 50% 100%; animation: plamen .55s ease-in-out infinite alternate; }
.k-plamen ellipse:nth-child(2n) { animation-delay: .2s; }
.analyzator { opacity: 0; transition: opacity 500ms; }
.kotel-velky.k4 .analyzator { opacity: 1; }
.graf { stroke-dasharray: 60; stroke-dashoffset: 60; }
.kotel-velky.k4 .graf { animation: graf 1.6s .4s var(--krivka) forwards; }
@keyframes graf { to { stroke-dashoffset: 0; } }
.tesnost { opacity: 0; transition: opacity 500ms; }
.kotel-velky.k3 .tesnost { opacity: 1; }
.tesnost circle { animation: bublina 1.4s ease-out infinite; }
.tesnost circle:nth-child(2n) { animation-delay: .5s; }
@keyframes bublina { from { transform: translateY(6px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
.rucicka { transform-origin: 50% 100%; transform: rotate(-80deg); transition: transform 1s cubic-bezier(.3,1.4,.5,1); }
.kotel-velky:is(.k3, .k4, .k5) .rucicka { transform: rotate(0deg); }
.razitko { opacity: 0; transform: scale(.4) rotate(-20deg); transform-origin: center; transition: transform 600ms cubic-bezier(.3,1.6,.5,1), opacity 300ms; }
.kotel-velky.k5 .razitko { opacity: 1; transform: none; }

/* ======================= CENÍK ======================= */
.zalozky { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.zalozky button {
	min-height: 48px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 2px solid var(--linka);
	background: #fff;
	color: var(--text);
	font: 800 16px/1.25 var(--pismo-text);
	cursor: pointer;
	transition: background-color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka), color var(--prechod-kratky) var(--krivka);
}
.zalozky button:hover { border-color: var(--indigo); }
.zalozky button[aria-selected="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.cenik-tabulka { background: #fff; border-radius: 24px; padding: 8px 32px; box-shadow: 0 24px 48px rgba(27,23,71,.08); }
.radek { display: grid; grid-template-columns: 1fr 280px 120px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linka); font-weight: 600; font-size: 17px; line-height: 1.4; }
.radek:last-child { border-bottom: 0; }
.radek-mezi { padding: 16px 0 0; font-weight: 900; color: var(--indigo); border-bottom: 0; }
.pruh { height: 12px; border-radius: 12px; background: var(--podklad-odliseny); overflow: hidden; }
.pruh i { display: block; height: 100%; width: 100%; border-radius: 12px; background: linear-gradient(90deg, var(--voda), var(--topeni) 60%, var(--elektro)); background-size: var(--plna) 100%; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--krivka); }
.cenik-tabulka.ukaz .pruh i { transform: scaleX(var(--p)); }
.pruh--dohodou i { background: repeating-linear-gradient(90deg, var(--linka) 0 8px, transparent 8px 14px); }
.radek b { text-align: right; font-weight: 900; font-size: 20px; color: var(--indigo); white-space: nowrap; }
.cenik-pozn { margin-top: 24px; font-size: 15px; }
@media (max-width: 767px) {
	.cenik-tabulka { padding: 4px 16px; }
	.radek { grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 16px; }
	.radek .pruh { grid-column: 1 / -1; grid-row: 2; }
	.zalozky { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--okraj)); padding: 0 var(--okraj) 8px; scrollbar-width: none; }
	.zalozky button { flex: none; }
}

/* ======================= JÍZDNÉ ======================= */
.cesta { background: var(--podklad-odliseny); border-radius: 32px; padding: 40px 48px 56px; }
.cesta-vysledek { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
.cesta-km { font-size: 24px; font-weight: 800; }
.cesta-cena { font-size: 72px; font-weight: 900; color: var(--topeni); line-height: 1; font-variant-numeric: tabular-nums; }
.cesta-pasmo { font-weight: 700; font-size: 18px; }
.cesta-silnice { position: relative; height: 160px; margin-top: 16px; }
.silnice-svg { position: absolute; left: 0; right: 0; top: 24px; width: 100%; height: 120px; }
.pasma { position: absolute; left: 0; right: 0; top: 148px; display: flex; }
.pasma span { flex: 1; text-align: right; font-weight: 800; font-size: 14px; color: var(--text-tlumeny); border-right: 3px solid var(--linka); padding-right: 8px; }
.rapotin { position: absolute; left: 0; top: -8px; font-weight: 900; color: var(--indigo); }
.dodavka { position: absolute; left: 0; top: 44px; width: 120px; height: 64px; transform: translateX(var(--x, 0px)); pointer-events: none; transition: transform 120ms linear; }
.dodavka svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
#km { position: absolute; inset: 24px 0 auto; width: 100%; height: 120px; opacity: 0; cursor: grab; margin: 0; touch-action: none; }
#km:focus-visible + .ruka { outline: 2px solid var(--text); }
.ruka { position: absolute; left: 0; top: 116px; display: flex; align-items: center; gap: 8px; pointer-events: none; transform: translateX(var(--x, 0px)); transition: opacity 400ms; }
.ruka svg { animation: ruka 1.6s ease-in-out infinite; }
.ruka-text { background: var(--indigo); color: #fff; font-weight: 800; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.ruka em { font-style: normal; }
.na-prst { display: none; }
@media (hover: none) { .na-mys { display: none; } .na-prst { display: inline; } }
@keyframes ruka { 50% { transform: translateX(24px); } }
.cesta.zkuseno .ruka { opacity: 0; }
@media (max-width: 767px) {
	.cesta { padding: 24px 16px 48px; border-radius: 24px; }
	.cesta-cena { font-size: 56px; }
	.dodavka { width: 84px; height: 45px; top: 58px; }
	.pasma span { font-size: 12px; padding-right: 4px; }
}

/* ======================= O MNĚ ======================= */
.omne { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.omne-foto img { aspect-ratio: 1000 / 613; }
.omne h2 { margin-bottom: 24px; }
.omne h2 + .veta { margin-top: 48px; }
.omne .veta + p { margin-top: 16px; }
.omne .tlacitka { margin-top: 32px; }

/* ======================= KONTAKT ======================= */
.kontakt .veta { color: var(--plocha-tlumeny); }
.kontakt-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.kontakt-karty { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kontakt-karta {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 112px;
	padding: 24px;
	border-radius: 24px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka);
}
a.kontakt-karta:hover { background: rgba(255,255,255,.16); color: #fff; transform: scale(var(--zvetseni)); }
.kk-ikona { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--indigo); }
.kontakt-karta small { display: block; font-size: 14px; font-weight: 700; color: var(--plocha-tlumeny); }
.kontakt-karta b { display: block; font-size: 19px; line-height: 1.3; font-weight: 900; }
.mapa { min-height: 360px; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.08); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

/* ======================= PATIČKA ======================= */
.paticka { background: #1d1856; color: #d9d6f5; padding: 48px 0; font-size: 15px; }
.paticka-vnitrek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.paticka b { color: #fff; }
.cookies-odkaz { min-height: 48px; padding: 0 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: none; color: #fff; font: 700 15px var(--pismo-text); cursor: pointer; }

/* ======================= COOKIES ======================= */
.cookies-lista {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	max-width: 920px;
	margin-inline: auto;
	padding: 24px;
	border-radius: var(--karta-radius);
	background-color: var(--plocha);
	background-image:
		linear-gradient(var(--voda), var(--voda)), linear-gradient(var(--topeni), var(--topeni)), linear-gradient(var(--elektro), var(--elektro));
	background-size: 100% 4px, 84% 4px, 68% 4px;
	background-position: 0 0, 0 7px, 0 14px;
	background-repeat: no-repeat;
	box-shadow: 0 24px 48px rgba(0,0,0,.3);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 300ms var(--krivka), transform 300ms var(--krivka);
}
.cookies-lista.vidi { opacity: 1; transform: none; }
.cookies-vnitrek { display: flex; align-items: center; gap: 24px; padding-top: 8px; }
.cookies-nadpis { font-weight: 900; font-size: 18px; }
.cookies-text { font-size: 15px; line-height: 1.5; color: var(--plocha-tlumeny); margin-top: 4px; }
.cookies-tlacitka { display: flex; gap: 8px; flex: none; }
.cookies-lista .tlacitko--primarni { background: #fff; color: var(--indigo); border-color: #fff; }
.cookies-lista .tlacitko--sekundarni { color: #fff; border-color: #fff; }
.cookies-lista .tlacitko--sekundarni:hover { background: #fff; color: var(--indigo); }

/* ======================= ZLOMY ======================= */
@media (max-width: 1099px) {
	.prohlidka-mrizka { gap: 32px; }
	.kontakt-mrizka { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.prohlidka-mrizka { grid-template-columns: 1fr; }
	.prohlidka-obraz { top: 80px; z-index: 2; background: var(--plocha); padding-bottom: 8px; }
	.kotel-velky { max-width: 180px; }
	.prohlidka-cena { font-size: 15px; margin-top: 4px; }
	.krok { min-height: 34vh; gap: 16px; grid-template-columns: 40px 1fr; }
	.krok-cislo { width: 40px; height: 40px; font-size: 17px; }
	.kroky::before { left: 19px; }
	.omne { grid-template-columns: 1fr; gap: 32px; }
	.kontakt-karty { grid-template-columns: 1fr; }
	.kontakt-karta { min-height: 88px; padding: 16px; }
	.cookies-vnitrek { flex-direction: column; align-items: stretch; }
	.cookies-tlacitka > * { flex: 1; }
	.hlava-sekce { margin-bottom: 40px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
	.omne { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ======================= ÚPRAVY 2. KOLO (20. 10.) ======================= */

/* znak: jedna čára, která se „napustí“ zleva — voda → topení → elektro */
.znak { gap: 0; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--indigo) 10%, transparent); overflow: hidden; top: calc(100% + 2px); }
.na-plose .znak { background: rgba(255,255,255,.14); }
.znak i { width: 100% !important; height: 100% !important; border-radius: 8px; background: linear-gradient(90deg, var(--voda), var(--topeni) 55%, var(--elektro)) !important; transition: transform 1.6s cubic-bezier(.6,0,.2,1) !important; transition-delay: 0s !important; }
h1 .znak { height: 10px; }
.menu a::after { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--voda), var(--topeni) 55%, var(--elektro)); }
.cookies-lista { background-image: linear-gradient(90deg, var(--voda), var(--topeni) 55%, var(--elektro)); background-size: 100% 5px; background-position: 0 0; }

/* charakteristické pozadí: výkres rozvodů */
.vzor { background-image: url("../obrazky/rozvody-svetle.svg"); background-size: 320px 320px; }
.na-plose.vzor { background-image: url("../obrazky/rozvody-tmave.svg"); }

/* služby: barevná podložka podle oboru */
.sluzba .ilu { background: #fff; border: 2px solid var(--linka); }
.sluzby > :nth-child(1) .ilu, .sluzby > :nth-child(3) .ilu { background: #fdeeed; border-color: #f8d4d1; }
.sluzby > :nth-child(2) .ilu, .sluzby > :nth-child(4) .ilu, .sluzby > :nth-child(7) .ilu { background: #e8f3fc; border-color: #cfe5f7; }
.sluzby > :nth-child(5) .ilu, .sluzby > :nth-child(8) .ilu { background: #fff3e6; border-color: #fde0c2; }
.sluzby > :nth-child(6) .ilu { background: #fef8dc; border-color: #f9eaa6; }
.sluzba { box-shadow: 0 12px 32px rgba(27,23,71,.06); }
.znacky span { background: #fff; border: 1px solid var(--linka); }

/* kontakt: bílé karty s barevnými ikonami */
.kontakt-karta { background: #fff; color: #1b1747; border: 0; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
a.kontakt-karta:hover { background: #fff; color: #1b1747; }
.kontakt-karta small { color: #55527a; }
.kontakt-karta b { color: #1b1747; }
.kontakt-karta em { display: inline-block; margin-top: 8px; font-style: normal; font-weight: 800; font-size: 15px; color: var(--indigo); }
.kontakt-karta em::after { content: " →"; }
.kontakt-karta em.tlumene { color: #55527a; font-weight: 600; }
.kontakt-karta em.tlumene::after { content: none; }
.kk-ikona { width: 56px; height: 56px; border-radius: 18px; color: #fff; }
.kk-tel { background: var(--topeni); }
.kk-mail { background: var(--voda); }
.kk-doba { background: var(--elektro); }
.kk-mapa { background: var(--indigo); }
.kontakt-karty { align-content: start; }
.mapa { box-shadow: 0 16px 40px rgba(0,0,0,.18); background: #fff; }

/* ceník: zkrácený, rozbalovací */
.cenik-tabulka.zkracene .radek:nth-child(n+6) { display: none; }
.cenik-vse { margin-top: 16px; }
.zalozky button { display: inline-flex; align-items: center; }

/* jízdné: táhnout prstem */
.cesta-silnice { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cesta-silnice.tahne { cursor: grabbing; }
.dodavka { transition: none; }
#km { position: absolute; width: 1px; height: 1px; opacity: 0; inset: auto; pointer-events: none; }
#km:focus-visible ~ .dodavka svg { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 8px; }

/* hero: krátké popisky tlačítek jen na mobilu */
.tx-kr { display: none; }

@media (max-width: 767px) {
	.hero { padding-bottom: 16px; }
	.hero-text { padding-top: 24px; }
	.hero h1 { font-size: 34px; }
	.hero-veta { margin-top: 32px; font-size: 16px; line-height: 1.5; }
	.scena { margin-top: 16px; }
	.scena svg { aspect-ratio: 1470 / 720; }
	.bublina { margin: 8px var(--okraj) 0; padding: 12px 16px; font-size: 14px; border-radius: 16px; }
	.bublina b { font-size: 16px; display: inline; margin-right: 4px; }
	.bublina b::after { content: " —"; font-weight: 600; color: var(--text-tlumeny); }
	.ovladani { margin: 8px var(--okraj) 0; padding: 8px; border-radius: 18px; }
	.ovladani-nadpis { display: none; }
	.ovladani-tlacitka { display: grid; grid-template-columns: repeat(4, 1fr) 40px; gap: 6px; width: 100%; }
	.ovladani button { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 2px; font-size: 13px; border-radius: 14px; }
	.ovladani button i { width: 30px; height: 30px; border-radius: 10px; }
	.ovladani .znovu { grid-column: auto; min-height: 64px; min-width: 0; padding: 0; }
	.ovladani button.dalsi::after { border-radius: 14px; }
	.tx-dl { display: none; }
	.tx-kr { display: inline; }

	/* prohlídka: přepínač kroků místo scrollu */
	.prohlidka-obraz { position: static; background: none; padding: 0; }
	.kotel-velky { max-width: 220px; }
	.kroky { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 8px; margin-top: 8px; }
	.prohlidka-mrizka { gap: 16px; }
	.kroky::before { left: 10%; right: 10%; top: 24px; bottom: auto; width: auto; height: 3px; }
	.krok { display: contents; }
	.krok > div { grid-row: 2; grid-column: 1 / -1; display: none; padding-top: 16px; min-height: 120px; }
	.krok.aktivni > div { display: block; }
	.krok-cislo { justify-self: center; width: 48px; height: 48px; cursor: pointer; }

	/* ceník bez posouvání do strany */
	.zalozky { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding: 0; gap: 8px; }
	.zalozky button { justify-content: center; text-align: center; padding: 8px 12px; font-size: 15px; }
	.radek { padding: 12px 0; }
	.radek .pruh { height: 6px; }
	.radek b { font-size: 18px; }

	.kontakt-karta { min-height: 0; }
}
@media (min-width: 768px) {
	.krok-cislo { pointer-events: none; }
}

/* koupelna: proudy, pára, orosené sklo */
#proudy path { animation: proud .36s linear infinite; }
@keyframes proud { to { stroke-dashoffset: -60; } }
.spritz circle { transform-box: fill-box; transform-origin: center; animation: spritz .5s ease-out infinite; }
.spritz circle:nth-child(2n) { animation-delay: -.25s; }
@keyframes spritz { 0% { transform: translate(0, 0) scale(.6); opacity: .9; } 100% { transform: translate(6px, -14px) scale(1); opacity: 0; } }
.obl { animation: pa 5s ease-out infinite; }
.obl.b { animation-delay: -1.2s; } .obl.c { animation-delay: -2.4s; } .obl.d { animation-delay: -3.4s; } .obl.e { animation-delay: -4.2s; }
@keyframes pa { 0% { transform: translateY(40px) scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-240px) scale(1.6); opacity: 0; } }
.kapicky circle { animation: kapicka 6s linear infinite; }
.kapicky circle:nth-child(2n) { animation-delay: -3s; }
@keyframes kapicka { from { transform: translateY(0); } to { transform: translateY(60px); } }

/* ======================= ÚPRAVY 3. KOLO ======================= */
/* čára: modrá, červená, žlutá jdou vidět, pořád přechodem */
.znak i { background: linear-gradient(90deg, var(--voda) 0 26%, var(--topeni) 40% 60%, var(--elektro) 74% 100%) !important; }
.menu a::after { background: linear-gradient(90deg, var(--voda) 0 26%, var(--topeni) 40% 60%, var(--elektro) 74% 100%); }
.cookies-lista { background-image: linear-gradient(90deg, var(--voda) 0 26%, var(--topeni) 40% 60%, var(--elektro) 74% 100%); }

/* modrá pozadí se znakem z polepu auta (oblouky kolem ikon) */
.modra {
	background-color: #24409a;
	background-image: url("../obrazky/oblouky.svg"), linear-gradient(150deg, #1e8fd6 0%, #2a5bb8 38%, #2f2483 100%);
	background-size: cover, auto;
	background-position: center, center;
}
.modra .veta { color: #e3ecfb; }
#sluzby .karta, .cenik-sekce .cenik-tabulka { --text: #1b1747; --text-tlumeny: #55527a; color: #1b1747; }
#sluzby .karta { border: 0; box-shadow: 0 18px 40px rgba(10,20,70,.28); }
#sluzby .znacky span { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.kontakt .veta { color: #e3ecfb; }

/* prohlídka: světle modrá */
.prohlidka { background: #e9f2fb; }
.prohlidka .veta { color: var(--text-tlumeny); }
.prohlidka-cena { color: var(--text-tlumeny); }
.prohlidka-cena b { color: var(--indigo); }
.kroky::before { background: rgba(47,36,131,.16); }
.krok .nazev { color: var(--indigo); }
.krok p { color: var(--text-tlumeny); }
.krok-cislo { background: #fff; color: var(--indigo); border-color: #c9c6e6; }
.krok.hotovy .krok-cislo { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.krok.aktivni .krok-cislo { background: var(--topeni); color: #fff; border-color: var(--topeni); box-shadow: 0 0 0 8px rgba(224,50,43,.15); }
.kotel-velky { filter: drop-shadow(0 30px 40px rgba(27,23,71,.18)); }
@media (min-width: 768px) { .kotel-velky { max-width: 460px; } }

/* prohlídka: víc pohybu v každém kroku */
.srouby circle { transition: opacity 400ms; }
.kotel-velky:not(.k0):not(.k5) .srouby { opacity: 0; }
.sroubovak { opacity: 0; transition: opacity 300ms; }
.kotel-velky.k1 .sroubovak { opacity: 1; animation: sroubovak 2.4s ease-in-out infinite; }
.sroubovak-tocit { transform-origin: 80px 30px; }
.kotel-velky.k1 .sroubovak-tocit { animation: sroub .4s ease-in-out infinite alternate; }
@keyframes sroubovak { 0%, 20% { transform: translate(0,0); } 30%, 45% { transform: translate(240px,0); } 55%, 70% { transform: translate(240px,360px); } 80%, 100% { transform: translate(0,360px); } }
@keyframes sroub { to { transform: rotate(25deg); } }
.prach { opacity: 0; }
.kotel-velky.k2 .prach { opacity: 1; }
.kotel-velky.k2 .prach circle { animation: prach 1.4s ease-in infinite; }
.prach circle:nth-child(2n) { animation-delay: -.5s !important; }
.prach circle:nth-child(3n) { animation-delay: -.9s !important; }
@keyframes prach { from { transform: translateY(0); opacity: 1; } to { transform: translateY(60px); opacity: 0; } }
.spaliny { opacity: 0; transition: opacity 400ms; }
.kotel-velky:is(.k4, .k5) .spaliny { opacity: 1; }
.spaliny circle { animation: kour 2s ease-out infinite; }
.spaliny circle:nth-child(2) { animation-delay: -.7s; } .spaliny circle:nth-child(3) { animation-delay: -1.3s; }
.tlak { opacity: 0; transform-origin: center; }
.kotel-velky.k3 .tlak { animation: tlak 1.4s ease-out infinite; }
@keyframes tlak { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.displej { opacity: 0; transition: opacity 500ms 400ms; }
.kotel-velky.k5 .displej { opacity: 1; }
.kotel-velky.k5 .k-plamen { opacity: 1; }
.kotel-velky:is(.k2, .k4, .k3) .kartac ~ * { }

/* ceník na tmavé ploše */
.cenik-sekce { background: var(--plocha); }
.cenik-sekce .veta { color: #d9d6f5; }
.cenik-sekce .zalozky button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.cenik-sekce .zalozky button:hover { border-color: #fff; }
.cenik-sekce .zalozky button[aria-selected="true"] { background: #fff; color: var(--indigo); border-color: #fff; }
.cenik-sekce .cenik-tabulka { color: var(--text); box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.cenik-sekce .cenik-pozn { color: #d9d6f5; }
.cenik-sekce .cenik-vse { color: #fff; border-color: #fff; }
.cenik-sekce .cenik-vse:hover { background: #fff; color: var(--indigo); }

/* jízdné: teplá žlutá */
.jizdne-sekce { background: #fff8e3; }
.jizdne-sekce .cesta { background: #fff; box-shadow: 0 18px 40px rgba(120,90,0,.08); }

/* hero: tmavší podklad v modrých tónech (stěna obýváku = tapeta) */
.hero { background: #e8dcc9; }
.hero-veta { color: #44416b; }

/* ======================= ÚPRAVY 4. KOLO ======================= */
/* hero: klidná stěna obýváku, ať vyniká nadpis */
.hero { background: #faf7f2; }
@media (min-width: 1200px) {
	.hero { background: #fff; }
	.stena-obyvak { fill: #fff; }
	.okno { transform-box: view-box; transform-origin: 330px 546px; transform: scale(.74); }
}

/* hero: tlačítka */
.ovladani { border-radius: 28px; padding: 14px 18px 14px 24px; gap: 20px; box-shadow: 0 24px 50px rgba(27,23,71,.2); }
.ovladani-nadpis { width: 150px; font-size: 14px; font-weight: 600; color: var(--text-tlumeny); line-height: 1.35; }
.ovladani-nadpis b { display: block; font-size: 18px; font-weight: 900; color: var(--indigo); margin-bottom: 2px; }
.ovladani-tlacitka { gap: 12px; }
.ovladani button[data-krok]:not(.znovu) { position: relative; min-height: 60px; padding: 10px 18px 10px 10px; border-radius: 18px; gap: 10px; box-shadow: 0 6px 14px rgba(27,23,71,.06); }
.ovladani button em { position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; background: var(--indigo); color: #fff; box-shadow: 0 0 0 3px #fff; }
.ovladani button i { width: 40px; height: 40px; border-radius: 13px; }
.ovladani button:hover { transform: scale(1.03); }
.b-plyn i { background: #fff4c7; } .b-plyn i svg * { stroke: #a88400; }
.b-kotel i { background: #fde3e1; } .b-kotel i svg * { stroke: #e0322b; }
.b-sprcha i { background: #e1f0fb; } .b-sprcha i svg * { stroke: #1e8fd6; }
.b-topeni i { background: #ffe9d9; } .b-topeni i svg * { stroke: #f07a2a; }
.ovladani button.hotovo { color: #fff; }
.ovladani .b-plyn.hotovo { background: var(--elektro); border-color: var(--elektro); color: #1b1747; }
.ovladani .b-kotel.hotovo { background: var(--topeni); border-color: var(--topeni); }
.ovladani .b-sprcha.hotovo { background: var(--voda); border-color: var(--voda); }
.ovladani .b-topeni.hotovo { background: var(--plyn); border-color: var(--plyn); }
.ovladani button.hotovo i { background: rgba(255,255,255,.28); }
.ovladani button.hotovo i svg * { stroke: #fff; }
.ovladani .b-plyn.hotovo i svg * { stroke: #1b1747; }
.ovladani button.dalsi { border-color: var(--indigo); }
.ovladani button.dalsi::after { border-color: var(--indigo); border-radius: 18px; }
@media (max-width: 767px) {
	.ovladani { padding: 12px; border-radius: 22px; }
	.ovladani button[data-krok]:not(.znovu) { padding: 10px 2px 8px; min-height: 72px; }
	.ovladani button em { top: -6px; left: -6px; width: 20px; height: 20px; font-size: 11px; }
	.ovladani button i { width: 34px; height: 34px; }
}

/* služby: bílá s oblouky z polepu dodávky */
.sluzby-sekce { background: #fff url("../obrazky/oblouky-svetle.svg") center / cover no-repeat; }
.sluzby-sekce .karta { border: 1px solid var(--linka); box-shadow: 0 18px 40px rgba(27,23,71,.08); }
.sluzba .ilu { height: 168px; padding: 8px; }
.sluzba .i-teplo { transition: opacity 500ms; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-teplo { opacity: 1; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-zar { opacity: 1; }
.i-odlesk { transform: translateX(-40px) skewX(-20deg); }
.sluzba:is(:hover, :focus-visible, .zivy) .i-odlesk { animation: odlesk 1.8s ease-in-out infinite; }
@keyframes odlesk { from { transform: translateX(-40px) skewX(-20deg); } to { transform: translateX(220px) skewX(-20deg); } }
.znacky-blok { margin-top: 64px; }
.znacky-nadpis { font-size: 24px; color: var(--indigo); margin-bottom: 24px; }
.znacky { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.znacky li { background: #fff; border: 1px solid var(--linka); border-radius: 18px; padding: 16px 20px; box-shadow: 0 10px 24px rgba(27,23,71,.06); }
.znacky b { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.01em; color: var(--text); line-height: 1.2; }
.znacky span { display: block; font-size: 14px; font-weight: 700; color: var(--text-tlumeny); background: none; border: 0; padding: 0; margin-top: 4px; }
@media (max-width: 1099px) { .znacky { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .znacky { grid-template-columns: 1fr 1fr; } .znacky b { font-size: 17px; } }

/* ceník: charakteristická tmavě modrá s oblouky */
.tmava { background: url("../obrazky/oblouky.svg") center / cover no-repeat, linear-gradient(160deg, #2f2483 0%, #1c1658 100%); }
.dohoda { justify-self: start; font-size: 14px; font-weight: 800; color: var(--indigo); background: #eeedf7; border-radius: 999px; padding: 4px 12px; }
@media (max-width: 767px) { .dohoda { grid-column: 1 / -1; grid-row: 2; } }

/* čára na tmavých plochách v bílém pouzdře, ať barvy jdou vidět */
.na-plose .znak { background: #fff; padding: 2px; height: 12px; border-radius: 12px; }
.na-plose .znak i { border-radius: 10px; }

/* prohlídka: krok 1 vyšroubování, krok 5 kryt zpátky */
.sroub { transform-box: fill-box; transform-origin: center; }
.kotel-velky.k1 .kryt { transition-delay: 2.7s; }
.kotel-velky:not(.k0):not(.k5) .srouby { opacity: 1; }
.kotel-velky.k1 .sroub { animation: vysroubovat .5s ease-in forwards; }
.kotel-velky.k1 .s1 { animation-delay: .3s; } .kotel-velky.k1 .s2 { animation-delay: .95s; } .kotel-velky.k1 .s3 { animation-delay: 1.6s; } .kotel-velky.k1 .s4 { animation-delay: 2.25s; }
@keyframes vysroubovat { 0% { transform: rotate(0) scale(1); opacity: 1; } 60% { transform: rotate(-540deg) scale(1.3); opacity: 1; } 100% { transform: rotate(-720deg) scale(1.6) translateY(-10px); opacity: 0; } }
.kotel-velky:is(.k2, .k4, .k3) .sroub { opacity: 0; }
.kotel-velky.k5 .sroub { animation: zasroubovat .5s ease-out both; }
.kotel-velky.k5 .s1 { animation-delay: 1s; } .kotel-velky.k5 .s2 { animation-delay: 1.4s; } .kotel-velky.k5 .s3 { animation-delay: 1.8s; } .kotel-velky.k5 .s4 { animation-delay: 2.2s; }
@keyframes zasroubovat { 0% { transform: rotate(720deg) scale(1.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
.kotel-velky.k1 .sroubovak { opacity: 1; animation: sroubovak1 2.6s ease-in-out forwards; }
@keyframes sroubovak1 { 0%, 18% { transform: translate(0,0); } 30%, 43% { transform: translate(240px,0); } 55%, 68% { transform: translate(240px,360px); } 80%, 95% { transform: translate(0,360px); opacity: 1; } 100% { transform: translate(0,360px); opacity: 0; } }
.kotel-velky.k5 .sroubovak { opacity: 1; animation: sroubovak5 2.8s ease-in-out forwards; }
@keyframes sroubovak5 { 0%, 30% { transform: translate(0,0); opacity: 0; } 36%, 46% { transform: translate(0,0); opacity: 1; } 50%, 60% { transform: translate(240px,0); } 64%, 74% { transform: translate(240px,360px); } 78%, 92% { transform: translate(0,360px); opacity: 1; } 100% { transform: translate(0,360px); opacity: 0; } }
.kotel-velky.k5 .kryt { transition: transform 900ms cubic-bezier(.3,1.2,.5,1), opacity 400ms; }
.kotel-velky.k5 .k-plamen, .kotel-velky.k5 .spaliny, .kotel-velky.k5 .displej { transition-delay: 2.6s; }
.kotel-velky.k5 .razitko { transition-delay: 3s; }

/* ======================= ÚPRAVY 5. KOLO ======================= */
/* značky: drobné štítky, ne velké obdélníky */
.znacky-blok { margin-top: 48px; }
.znacky-nadpis { font-size: 18px; margin-bottom: 16px; }
.znacky { display: flex; flex-wrap: wrap; gap: 8px; }
.znacky li { padding: 8px 16px; border-radius: 999px; box-shadow: none; }
.znacky b { font-size: 15px; font-weight: 800; }
.znacky span { display: none; }

/* svařování plastů: trubka a tvarovka se nahřejí na svářečce a spojí */
.sv-l, .sv-r, .sv-tep, .sv-svar { transform-box: view-box; }
.sv-svar { opacity: 0; }
.sv-zar { opacity: 0; }
.sluzba:is(:hover, :focus-visible, .zivy) .sv-l { animation: svL 3.2s ease-in-out infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .sv-r { animation: svR 3.2s ease-in-out infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .sv-tep { animation: svTep 3.2s ease-in-out infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .sv-zar { animation: svZar 3.2s ease-in-out infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .sv-svar { animation: svSvar 3.2s ease-in-out infinite; }
@keyframes svL { 0%, 8% { transform: translateX(0); } 25%, 55% { transform: translateX(4px); } 70%, 100% { transform: translateX(26px); } }
@keyframes svR { 0%, 8% { transform: translateX(0); } 25%, 55% { transform: translateX(-4px); } 70%, 100% { transform: translateX(-20px); } }
@keyframes svTep { 0%, 55% { transform: translateY(0); opacity: 1; } 66%, 92% { transform: translateY(80px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes svZar { 0%, 15% { opacity: 0; } 30%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes svSvar { 0%, 68% { opacity: 0; } 76%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* prohlídka na mobilu: obrazovka se zastaví, kroky se mění scrollem */
@media (max-width: 767px) {
	.prohlidka-mrizka { display: block; height: 340vh; }
	.prohlidka-obraz { position: sticky; top: 72px; z-index: 2; background: #e9f2fb; padding-top: 48px; }
	.kotel-velky { max-width: min(210px, 32vh); }
	.prohlidka-cena { margin-top: 4px; font-size: 14px; }
	.kroky { position: sticky; top: calc(72px + var(--vo, 250px)); z-index: 2; background: #e9f2fb; margin-top: 0; padding: 12px 0 24px; }
	.krok > div { min-height: 112px; padding-top: 12px; }
	.krok .nazev { font-size: 22px; }
	.krok p { font-size: 16px; }
}

/* ======================= ÚPRAVY 6. KOLO ======================= */
/* prohlídka: překlikávání místo zastavení scrollu (všechna zařízení) */
.prohlidka-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; height: auto; }
.prohlidka-obraz { position: static; padding: 0; background: none; }
.kotel-velky { max-width: 420px; }
.kroky { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 8px; margin: 0; padding: 0; position: relative; background: none; }
.kroky::before { left: 10%; right: 10%; top: 24px; bottom: auto; width: auto; height: 3px; }
.krok { display: contents; opacity: 1; min-height: 0; }
.krok > div { grid-row: 2; grid-column: 1 / -1; display: none; padding-top: 24px; min-height: 150px; }
.krok.aktivni > div { display: block; animation: krokIn 450ms var(--krivka); }
@keyframes krokIn { from { opacity: 0; transform: translateY(12px); } }
.krok .nazev { font-size: 32px; }
.krok p { font-size: 19px; margin-top: 12px; }
.krok-cislo { justify-self: center; width: 52px; height: 52px; cursor: pointer; pointer-events: auto; transition: background-color 300ms, border-color 300ms, transform 200ms; }
.krok-cislo:hover { transform: scale(1.08); }
.krok-nav { display: flex; gap: 12px; margin-top: 24px; }
.krok-nav .tlacitko { min-height: 56px; padding-inline: 28px; font-size: 17px; }
.krok-nav .tlacitko:disabled { opacity: .35; cursor: default; }
.krok-nav #krok-dal::after { content: "\00a0→"; }
@media (max-width: 767px) {
	.prohlidka-mrizka { display: block; height: auto; }
	.prohlidka-obraz { position: static; padding-top: 32px; }
	.kotel-velky { max-width: 200px; }
	.kroky { position: static; top: auto; margin-top: 16px; padding: 0; }
	.krok > div { min-height: 140px; padding-top: 16px; }
	.krok .nazev { font-size: 22px; }
	.krok p { font-size: 16px; }
	.krok-cislo { width: 44px; height: 44px; }
	.kroky::before { top: 22px; }
	.krok-nav .tlacitko { flex: 1; padding-inline: 12px; }
}

/* ======================= ÚPRAVY 7. KOLO ======================= */
/* prohlídka na mobilu: celé na jednu obrazovku */
@media (max-width: 767px) {
	.prohlidka .hlava-sekce { margin-bottom: 16px; }
	.prohlidka-obraz { padding-top: 24px; }
	.kotel-velky { max-width: min(140px, 20vh); }
	.prohlidka-cena { margin-top: 2px; font-size: 13px; }
	.kroky { margin-top: 8px; }
	.krok-cislo { width: 40px; height: 40px; font-size: 16px; }
	.kroky::before { top: 20px; }
	.krok.aktivni .krok-cislo { box-shadow: 0 0 0 5px rgba(224,50,43,.15); }
	.krok > div { min-height: 96px; padding-top: 10px; }
	.krok .nazev { font-size: 20px; }
	.krok p { font-size: 15px; line-height: 1.45; margin-top: 4px; }
	.krok-nav { margin-top: 8px; }
	.krok-nav .tlacitko { min-height: 48px; font-size: 16px; }
}

/* ======================= ÚPRAVY 8. KOLO ======================= */
/* menu: při najetí se podtrhne celá položka */
.menu a:hover::after { transform: scaleX(1); }

/* hero na počítači: zjemnit okolí, ať vynikne nadpis */
@media (min-width: 1200px) {
	.sc .zdi-hero, .sc rect[fill="url(#omitka)"], .sc rect[fill="url(#blok)"] { opacity: .55; }
	.sc rect[fill="url(#beton)"], .sc rect[fill="url(#obklad)"] { opacity: .55; }
	.hero-text::before { content: ""; position: absolute; z-index: -1; left: -40px; top: 20px; width: 620px; height: 420px; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events: none; }
}

/* hero: tlačítka jednotná a výraznější */
.ovladani { padding: 14px; gap: 0; }
.ovladani-tlacitka { gap: 12px; }
.ovladani button[data-krok]:not(.znovu) { min-height: 64px; padding: 10px 22px 10px 12px; font-size: 17px; background: #fff; border: 2px solid var(--linka); color: var(--indigo); }
.ovladani button i { width: 42px; height: 42px; background: var(--podklad-odliseny) !important; }
.ovladani button i svg * { stroke: var(--indigo) !important; }
.ovladani button[data-krok].hotovo { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ovladani button.hotovo i { background: rgba(255,255,255,.16) !important; }
.ovladani button.hotovo i svg * { stroke: #fff !important; }
.ovladani button[data-krok].dalsi { border-color: var(--topeni); color: var(--topeni); }
.ovladani button.dalsi i { background: #fde3e1 !important; }
.ovladani button.dalsi i svg * { stroke: var(--topeni) !important; }
.ovladani button.dalsi::after { border-color: var(--topeni); }
.ovladani button em { background: var(--topeni); }
.ovladani button.hotovo em { background: #fff; color: var(--indigo); }
@media (max-width: 767px) {
	.ovladani { padding: 10px; }
	.ovladani button[data-krok]:not(.znovu) { padding: 10px 2px 8px; font-size: 13px; min-height: 72px; }
}

/* služby: lehce béžové pozadí s oblouky */
.sluzby-sekce { background: #cfe3f6 url("../obrazky/oblouky-svetle.svg") center / cover no-repeat; }
.sluzby-sekce .karta { border-color: #bcd5ee; }
/* prohlídka hned pod službami: odlišit bílou */
.prohlidka { background: #fff; }

/* kontakt: jedna karta jako tabulka, stejně vysoká jako mapa */
.kontakt-mrizka { align-items: stretch; }
.kontakt-tabulka { background: #fff; color: #1b1747; border-radius: 24px; padding: 8px 28px; box-shadow: 0 16px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; justify-content: space-between; }
.kt-radek { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid #ebe9f4; flex: 1; }
.kt-radek:last-child { border-bottom: 0; }
.kt-udaj small { display: block; font-size: 14px; font-weight: 700; color: #55527a; }
.kt-udaj b { display: block; font-size: 20px; font-weight: 900; line-height: 1.3; color: #1b1747; }
.kt-akce { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.kontakt-tabulka .tlacitko--primarni { background: #e0322b; border-color: #e0322b; color: #fff; }
.kontakt-tabulka .tlacitko--primarni:hover { background: #b9221c; border-color: #b9221c; color: #fff; }
.kontakt-tabulka .tlacitko--sekundarni { color: var(--indigo); border-color: #d6d3ea; }
.kontakt-tabulka .tlacitko--sekundarni:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.kt-pozn { font-size: 14px; font-weight: 700; color: #55527a; background: #f3f2f8; border-radius: 999px; padding: 6px 12px; }
.mapa { min-height: 0; height: 100%; }
.mapa iframe { height: 100%; min-height: 380px; }
@media (max-width: 1099px) { .mapa iframe { min-height: 320px; } }
@media (max-width: 767px) {
	.kontakt-tabulka { padding: 4px 16px; }
	.kt-radek { grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; }
	.kt-radek .kk-ikona { width: 44px; height: 44px; border-radius: 14px; }
	.kt-radek { grid-template-columns: 44px 1fr auto; }
	.kt-udaj b { font-size: 16px; }
	.kt-akce { padding: 8px 14px; min-height: 40px; font-size: 14px; }
	.kt-pozn { grid-column: 2 / -1; justify-self: start; font-size: 13px; padding: 4px 10px; }
}

/* značky s odkazem na výrobce */
.znacky li { padding: 0; }
.znacky a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--text); transition: background-color var(--prechod-kratky), color var(--prechod-kratky); }
.znacky a::after { content: "↗"; font-size: 13px; font-weight: 800; color: var(--voda); }
.znacky a:hover { background: var(--indigo); color: #fff; }
.znacky a:hover b { color: #fff; }
.znacky a:hover::after { color: #fff; }
/* klimatizace: proudění vzduchu */
.i-vzduch path { stroke-dasharray: 6 8; opacity: .35; }
.i-vlocka { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-vzduch path { opacity: 1; animation: vzduch .9s linear infinite; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-vlocka { opacity: 1; animation: tocit 4s linear infinite; }
@keyframes vzduch { to { stroke-dashoffset: -28; } }
@media (min-width: 1280px) { .mrizka--3.sluzby { grid-template-columns: repeat(3, 1fr); } }
.sluzby > :nth-child(5) .ilu { background: #e8f3fc; border-color: #cfe5f7; }
.sluzby > :nth-child(6) .ilu { background: #eeedf7; border-color: #dcd9ee; }
.sluzby > :nth-child(8) .ilu { background: #fff; border-color: var(--linka); }

/* o mně: místo fotky znak VTE */
.omne { grid-template-columns: 1.2fr 1fr; }
.omne-znak { background: #fff; border-radius: var(--karta-radius); padding: 40px; box-shadow: 0 18px 40px rgba(27,23,71,.08); display: grid; justify-items: center; gap: 24px; }
.omne-znak svg { width: 100%; max-width: 260px; height: auto; }
.omne-znak ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.omne-znak li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--indigo); }
.omne-znak li i { width: 14px; height: 14px; border-radius: 50%; }
@media (max-width: 767px) { .omne { grid-template-columns: 1fr; } .omne-znak { padding: 28px; } }
.vte-ikony { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.vte-ik { margin: 0; text-align: center; }
.vte-ik svg { width: 100%; max-width: 110px; height: auto; display: block; margin: 0 auto; }
.vte-ik figcaption { font-weight: 900; font-size: 15px; letter-spacing: .02em; margin-top: 2px; }
@media (max-width: 400px) { .vte-ik figcaption { font-size: 12px; } }

/* revize: karta ve službách */
.i-razitko { transform-box: fill-box; transform-origin: center; transform: scale(.4) rotate(-30deg); opacity: 0; transition: transform 450ms cubic-bezier(.3,1.6,.5,1), opacity 250ms; }
.sluzba:is(:hover, :focus-visible, .zivy) .i-razitko { transform: none; opacity: 1; }
.sluzby > :nth-child(8) .ilu { background: #eeedf7; border-color: #dcd9ee; }
.revize { display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: center; margin-top: 24px; background: #fff; border: 1px solid #bcd5ee; border-radius: var(--karta-radius); padding: 24px 32px; box-shadow: 0 18px 40px rgba(27,23,71,.08); }
.revize-ikona { width: 72px; height: 72px; border-radius: 20px; background: #eeedf7; display: grid; place-items: center; }
.revize .nazev { color: var(--indigo); }
.revize ul { list-style: none; padding: 0; margin: 8px 0 0; max-width: none; }
.revize li { position: relative; padding: 3px 0 3px 20px; color: var(--text-tlumeny); font-weight: 600; font-size: 17px; }
.revize li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--topeni); }
@media (max-width: 767px) {
	.revize { grid-template-columns: 56px 1fr; padding: 20px; gap: 16px; align-items: start; }
	.revize-ikona { width: 56px; height: 56px; }
	.revize .tlacitko { grid-column: 1 / -1; justify-self: start; }
	.revize li { font-size: 15px; }
}

/* ======================= KLIDOVÁ VĚTEV ======================= */
@media (prefers-reduced-motion: reduce) {
	.znak i { transform: scaleX(1); transition: none; }
	.znak i::after { display: none; }
	.tok, .kapky, .obl, .vlna, .i-vzduch path, .i-vlocka, .krok.aktivni > div, .sv-l, .sv-r, .sv-tep, .sv-zar, .sv-svar, .sroub, .i-odlesk, .sroubovak, .sroubovak-tocit, .prach circle, .spaliny circle, .tlak, #proudy path, .spritz circle, .kapicky circle, .snih circle, #plameny ellipse, .vrtule, .k-plamen ellipse, .tesnost circle, .ruka svg, .kartac,
	.ovladani button.dalsi::after, .sluzba * { animation: none !important; }
	.sc .on1, .sc .on2, .sc .on3, .sc .on4, .paka, .kryt, .spina, .rucicka, .krok, .razitko, .pruh i, .dodavka, .menu a::after { transition: none; }
	.graf { stroke-dashoffset: 0; }
	.cenik-tabulka .pruh i { transform: scaleX(var(--p)); }
}

/* nejmenší telefony (320 px): tlačítka v heru se vejdou */
@media (max-width: 359px) {
	.ovladani { margin-inline: 12px; padding: 8px; }
	.ovladani-tlacitka { grid-template-columns: repeat(4, 1fr) 32px; gap: 4px; }
	.ovladani button[data-krok]:not(.znovu) { font-size: 12px; }
	.ovladani button i { width: 28px; height: 28px; }
}
@media (max-width: 359px) {
	.logo b { font-size: 18px; white-space: nowrap; }
	.logo-znak { width: 48px; height: 26px; }
	.hlavicka-vnitrek { gap: 10px; }
}
/* tablet: tlačítka v heru v jedné řadě */
@media (min-width: 768px) and (max-width: 1199px) {
	.ovladani { width: auto; max-width: none; margin-inline: var(--okraj); }
	.ovladani-tlacitka { display: grid; grid-template-columns: repeat(4, 1fr) 48px; width: 100%; gap: 10px; flex-wrap: nowrap; }
	.ovladani button[data-krok]:not(.znovu) { padding: 8px 10px 8px 8px; font-size: 15px; }
}

/* logo: čtyři ikony z dodávky */
.logo-ikony { display: inline-flex; gap: 2px; }
.logo-ikony svg { width: 34px; height: 33px; display: block; }
@media (max-width: 1099px) { .logo-ikony svg { width: 28px; height: 27px; } }
@media (max-width: 479px) { .logo-ikony svg { width: 22px; height: 21px; } .logo b { font-size: 18px; white-space: nowrap; } }
@media (max-width: 359px) { .logo-ikony svg { width: 18px; height: 17px; } }
.omne-znak { gap: 0; padding: 48px 32px; }
.vte-ik svg { max-width: 120px; }
.vte-ik figcaption { font-size: 16px; }

/* logo s popisky VODA · TOPENÍ · ELEKTRO · PLYN */
.logo-ikony { gap: 6px; align-items: flex-start; }
.logo-ikony .li { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.logo-ikony .li small { display: block; font-size: 9px; font-weight: 900; color: var(--indigo); letter-spacing: .02em; line-height: 1; margin: 0; }
.logo-ikony svg { width: 32px; height: 31px; }
.logo > span:last-child { border-left: 2px solid var(--linka); padding-left: 14px; }
@media (max-width: 1099px) { .logo-ikony .li small { display: none; } .logo > span:last-child { border-left: 0; padding-left: 0; } }
.paticka-logo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo-ikony--pata { background: #fff; border-radius: 14px; padding: 8px 10px 6px; }
.logo-ikony--pata small { display: block !important; }

/* ======================= ÚPRAVY: originální logo z dodávky ======================= */
.logo { gap: 14px; }
.logo-obr { display: block; flex: none; }
.logo-obr img { display: block; height: 46px; width: auto; }
.logo > span:last-child { border-left: 2px solid var(--linka); padding-left: 14px; }
@media (max-width: 1099px) {
	.logo-obr img { height: 34px; }
	.hlavicka-vnitrek { gap: 12px; }
	.menu-prepinac { flex: none; background: var(--indigo); }
	.menu-prepinac span { width: 22px; height: 3px; background: #fff !important; }
	.hlavicka-tel { flex: none; }
}
@media (max-width: 479px) {
	.logo > span:last-child { display: none; }
	.logo-obr img { height: 30px; }
	.hlavicka-tel { padding-inline: 0; width: 48px; }
}
@media (max-width: 359px) { .logo-obr img { height: 24px; } }
.omne-znak { padding: 48px 40px; }
.omne-logo { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.pata-logo { display: block; height: 52px; width: auto; background: #fff; border-radius: 14px; padding: 8px 12px; box-sizing: content-box; }

/* velké tlačítko zavolat */
.velke-volani { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px; padding: 12px 22px 12px 12px; border-radius: 20px; background: var(--topeni); color: #fff; text-decoration: none; box-shadow: 0 16px 32px rgba(224,50,43,.3); transition: transform var(--prechod-kratky) var(--krivka), background-color var(--prechod-kratky); }
.velke-volani:hover { background: var(--akcent-tmavy); color: #fff; transform: translateY(-2px); }
.vv-ikona { position: relative; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.vv-ikona::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(255,255,255,.7); animation: vvPuls 2s ease-out infinite; }
@keyframes vvPuls { from { transform: scale(1); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.vv-text b { display: block; font-size: 22px; font-weight: 900; line-height: 1.2; }
.vv-text small { display: block; font-size: 15px; font-weight: 700; opacity: .9; }
.vv-sipka { font-size: 24px; font-weight: 900; margin-left: 8px; transition: transform var(--prechod-kratky); }
.velke-volani:hover .vv-sipka { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .vv-ikona::after { animation: none; } }
@media (max-width: 479px) { .velke-volani { display: flex; } .vv-doba { display: block; }  .vv-text b { font-size: 20px; } }
@media (max-width: 479px) { .vv-tecka { display: none; } } .vv-tecka { font-style: normal; }
@media (max-width: 479px) { .vv-sipka { margin-left: auto; } .omne-znak { padding: 28px 20px; } }

/* iPhone: číslo v kontaktu (Safari z něj dělal bílý odkaz) a e-mail na jeden řádek */
.kontakt-tabulka a:not(.tlacitko), .kt-udaj a { color: inherit !important; text-decoration: none; }
.kt-udaj b { white-space: nowrap; }
@media (max-width: 479px) {
	.kontakt-tabulka { padding: 4px 14px; }
	.kt-radek { gap: 10px; }
	.kt-udaj b { font-size: 15px; }
	.kt-akce { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 359px) { .kt-udaj b { font-size: 13.5px; } }
@media (max-width: 359px) { .kt-radek { grid-template-columns: 38px 1fr auto; gap: 8px; } .kt-radek .kk-ikona { width: 38px; height: 38px; border-radius: 12px; } .kt-akce { padding: 6px 10px; font-size: 12px; min-height: 36px; } }
.male-volani { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--topeni); color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 8px 18px rgba(224,50,43,.22); transition: background-color var(--prechod-kratky), transform var(--prechod-kratky); }
.male-volani:hover { background: var(--akcent-tmavy); color: #fff; transform: translateY(-1px); }

/* patička: údaje pod sebou, Safari z nich nedělá odkazy */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }
.paticka-logo { align-items: center; gap: 24px; }
.pata-udaje { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; color: #d9d6f5; }
.pata-udaje b { color: #fff; }
@media (max-width: 767px) {
	.paticka { padding: 40px 0 32px; }
	.paticka-vnitrek { flex-direction: column; align-items: flex-start; gap: 24px; }
	.paticka-logo { flex-direction: column; align-items: flex-start; gap: 20px; }
	.pata-logo { height: 44px; }
	.pata-udaje { flex-direction: column; gap: 4px; font-size: 15px; }
	.cookies-odkaz { min-height: 40px; font-size: 14px; padding: 0 14px; }
}

/* podpis autora webu */
.autor { margin: 0 auto; padding: 14px 0 18px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font: 500 13px var(--pismo-text); color: rgba(255,255,255,.55); max-width: none; }
.autor a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }
.autor a:hover { color: #fff; }