/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;

@layer moderncss {

	@layer misc {
		/* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
		:root {
			overscroll-behavior-y: contain;
		}
	}

	@layer layout {

		@layer product {
			/* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
		}
	}

	@layer components {
		@layer button {

			/* Buttons in .dark containers have inverted colors */
			@scope (.dark) {
				button {
					color: var(--theme-surface-on-surface);
					background: var(--theme-primary-on-primary);
					border: 1px solid var(--theme-outline-variant);

					&:hover,
					&:focus-visible {
						background: var(--theme-button-secondary-hover);
					}

					&.secondary {						
						color: var(--theme-surface-surface);
				    background: var(--theme-nav-button-hover);

						&:hover,
						&:focus-visible {
							background: var(--theme-button-secondary-inverse-hover);
						}
					}
				}
			}
		}

		@layer navbar {	
			/* Anchor the mobile nav underneath the header */
			@layer mobile {
				@media (width < 1024px) {
					header {
						anchor-name: --header;
					}

					header nav {
						position: fixed;
						inset: auto;
						top: 0; /* Undo non-modern-CSS styling */
						position-anchor: --header;
						position-area: bottom;
						justify-self: stretch;
						align-self: stretch;
					}
				}
			}

			/* Animate-in the nav on mobile when showing */
			@layer mobile {
				@media (width < 1024px) {
					header nav {
						transition: opacity .15s ease-in;
						@starting-style {
							opacity: 0;
						}
					}
				}
			}

			/* Don’t scroll page when menu is open */
			@media (width < 1024px) {
				header:has(.menu-checkbox:checked) {
					&,
					& nav {
						overflow: auto;
						overscroll-behavior: contain;
					}
				}
			}

			/* Hidey bar – http://brm.us/hidey-bar-2 */
			@layer hidey-bar {
				html {
					container-type: scroll-state;
				}

				/* Na vrchu stránky je hlavička viditeľná VŽDY.
				 *
				 * `scroll-state(scrolled: …)` hovorí len o poslednom SMERE posunu,
				 * nie o polohe — `top` a `bottom` sa navzájom vylučujú, takže sa
				 * nedajú spojiť do podmienky „som hore". Bez tohto pravidla
				 * hlavička zostala skrytá aj na samom vrchu stránky vždy, keď sa
				 * tam návštevník dostal inak než posunom nahor: odkazom s kotvou,
				 * klávesou Home, návratom späť v histórii alebo obnovením polohy
				 * po reloade. Overené — pri `scrollTo(0)` po posune nadol bola
				 * hlavička na `translate: -100%`, teda mimo obrazovky.
				 *
				 * Animácia po skrolovacej osi vyhrá nad deklaráciou z kontajnerovej
				 * otázky, takže v prvých 80 px drží hlavičku dolu bez ohľadu na
				 * smer. `fill-mode: none` je tu podstatný: za koncom rozsahu sa
				 * animácia neuplatní vôbec a rozhodovanie preberie späť smer.
				 */
				@keyframes hlavicka-na-vrchu {
					from, to { translate: 0 0; }
				}

				.header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked, .mapa-checkbox:checked)) {
					transition: translate 0.25s;
					translate: 0 0;

					@container scroll-state(scrolled: bottom) {
						translate: 0 -100%;
					}

					@supports (animation-timeline: scroll()) {
						animation: hlavicka-na-vrchu linear;
						animation-timeline: scroll(root block);
						animation-range: 0 80px;
						animation-fill-mode: none;
					}
				}
			}
		}

		@layer carousel {
			@layer scroll-snapping {
				@layer base-setup {
					@supports (scroll-padding-inline: 3rem) {
						.carousel {
							/* Zámerne len `-start`, nie skratka: ukážky majú
							   `scroll-snap-align: start`, takže koncový offset sa
							   nepoužíva — a skratkou nastavená hodnota by sa nad
							   1024 px nezhodovala s pravou výplňou karuselu, čo by
							   po prípadnej zmene zarovnania vyzeralo ako chyba
							   v prepočte odsadenia. */
							scroll-padding-inline-start: var(--page-inset);
							scroll-snap-type: x mandatory;

							> * {
								scroll-snap-align: start;
							}

							/* @NOTE: On the orignal page the last item also snaps to the left */
							/* To get this working, I’d manually add some padding to the right */
							/* Odsadenie sprava už nie je odhad: doprava sa dopĺňa presne
							   toľko, aby posledná ukážka dosadla na os obsahu. Viď
							   `@layer co-robime`, kde z toho vychádza aj šírka ukážky. */
						}
					}
				}

				@layer snapped-effects {
					/* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */	

					.carousel > * {
						container-type: scroll-state;

						@supports (container-type: scroll-state) {
							/* Originál susednú ukážku nestlmuje — vidno ju v plnej sýtosti,
							   preto obrázok necháme tak. Skrýva sa len text: pod obrázkom je
							   aj v origináli vždy len jeden popis, ten práve aktívny. */
							> *:not(figure) {
								transition: opacity .5s ease;
								transition-delay: 0s;
								opacity: 0;

								@container scroll-state(snapped: x) {
									transition-delay: 0.2s; /* NOTE: It feels like CSS snapped is triggering while it's still scrolling, so we delay it a bit */
									opacity: 1;
								}
							}
						}
					}
				}
			}

			@layer niceties {
				.carousel {
					scrollbar-width: none;
					overscroll-behavior-x: contain;
				}
			}

			@layer scroll-buttons {
				/* @note: https://chrome.dev/carousel-configurator/ really helps here
				 *
				 * Originál má obe šípky v jednej pilulke 92 × 44 px. `::scroll-button()`
				 * sú dva samostatné pseudoprvky a obal okolo nich CSS karusel neponúka,
				 * takže pilulku skladáme z dvoch dotýkajúcich sa polovíc po 46 px.
				 * Vnútorné 4 px odsadenie posunie ikony presne tam, kde ich má originál
				 * (stredy 25 a 67 px od ľavého okraja pilulky).
				 */
				.carousel {
					position: relative;
					scroll-behavior: smooth;
					anchor-name: --carousel;

					&::scroll-button(*) {
						position: fixed;
						position-anchor: --carousel;
						position-area: center center;
						position-visibility: always;

						inline-size: 46px;
						block-size: 44px;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;

						background: var(--theme-tonal-tonal);
						border: none;
						border-radius: 0;

						font-family: "Google Symbols";
						font-size: 24px;
						line-height: 1;
						color: var(--theme-surface-on-surface);

						transition: color 0.25s ease;
					}

					/* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
					/* Zakázané tlačidlo originál nestlmí priehľadnosťou — len zošedne. */
					&::scroll-button(*):disabled {
						cursor: not-allowed;
						color: var(--theme-surface-on-surface-variant);
					}

					&::scroll-button(left) {
						content: 'keyboard_arrow_left' / 'Predchádzajúce';
						border-start-start-radius: 999px;
						border-end-start-radius: 999px;
						padding-inline-start: 4px;
					}
					&::scroll-button(right) {
						content: 'keyboard_arrow_right' / 'Ďalšie';
						border-start-end-radius: 999px;
						border-end-end-radius: 999px;
						padding-inline-end: 4px;
					}

					/* Pod zlomom je pilulka na stred pod textom — v páse, ktorý jej
					   drží `padding-block-end` karuselu. */
					@media (width < 1024px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							align-self: end;
							justify-self: center;
						}
						&::scroll-button(left) { translate: -50% 0; }
						&::scroll-button(right) { translate: 50% 0; }
					}

					/* Nad zlomom sedí pilulka pri pravom okraji ukážky, v riadku s textom.
					 *
					 * Stačí sa oprieť o `--ukazka` a `--page-inset` z karuselu —
					 * pseudoprvky ich dedia a percentá v nich sa im vyhodnotia voči
					 * tej istej šírke, lebo `position-area` im dáva za obsahujúci blok
					 * práve kotvu, teda karusel. Pravý okraj ukážky je tak
					 * `page-inset + ukazka` a odsadenie zhora výška obrázka
					 * (pomer 848/488) plus 24 px medzera. */
					@media (width >= 1024px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							align-self: start;
							justify-self: start;
							margin-block-start: calc(var(--ukazka) * 488 / 848 + 24px);
						}
						&::scroll-button(left) {
							margin-inline-start: calc(
								var(--page-inset) + var(--ukazka) - 92px);
						}
						&::scroll-button(right) {
							margin-inline-start: calc(
								var(--page-inset) + var(--ukazka) - 46px);
						}
					}
				}
			}
		}
	}

	@layer animations {
		@layer revealing-welcome-items {
			#welcome {
				/* `.logo` tu je od 18. 8. 2026 — dovtedy stačilo `svg`, lebo
				   značka bola vložený SVG. Po zmene na obrázok by hero logo
				   bez tohto selektora nábeh stratilo a ostatné prvky by sa
				   vynárali bez neho. */
				svg, .logo, .cta {
					transition: translate 0.5s ease, opacity 0.5s ease;
					@starting-style {
						translate: 0 50% 0;
						opacity: 0;
					}
				}
			}
		}

		@layer scroll-triggered-typewriter-effect {
			/* @ref https://codepen.io/bramus/pen/JjwxLNM */
			/* BLIKANIE KURZORA — OSTRÉ, NIE PLYNULÉ (11. 9. 2026).
			 *
			 * Pôvodne: `from { opacity: 0 }` s `0.2s ease alternate`. Zmerané
			 * na živej stránke — bežalo to a priehľadnosť sa naozaj menila
			 * (0,07 až 1,00), lenže perióda bola 0,4 s, teda dva a pol cyklu
			 * za sekundu, a `ease` z toho spravil plynulé stmievanie.
			 * Zadávateľ to nahlásil ako „neblika": pri takej frekvencii to oko
			 * nečíta ako blikanie, ale ako chvenie.
			 *
			 * Teraz skok medzi dvoma stavmi (`step-end`) s periódou 1 s —
			 * pol sekundy vidno, pol sekundy nie. Je to kadencia terminálového
			 * kurzora a presne tak sa aj číta. */
			@keyframes blink {
				50% { opacity: 0; }
			}

			/* KURZOR NA KONCI VETY — ZÁMERNE MIMO `@supports` NIŽŠIE.
			 *
			 * Efekt písacieho stroja stojí na `timeline-trigger`, ktorý zatiaľ
			 * pozná len Chrome. Kurzor je ale samostatný prvok návrhu a má byť
			 * všade — keby zostal vnútri, v Safari ani vo Firefoxe by za vetou
			 * nebolo nič. Vnútri `@supports` mu preto zostáva len spúšťač.
			 *
			 * Od 2. 9. 2026 je to PODČIARKOVNÍK, nie zvislá čiarka — dovtedy
			 * tu bol dúhový prechod v oklch (oranžová → azúrová) prevzatý
			 * z pôvodného pena. Na monochromatickom webe to bola jediná dúha
			 * a bilo to do očí.
			 *
			 * Farba prešla dvoma krokmi: najprv sivá (`on-surface-variant`),
			 * od 3. 9. 2026 na želanie ČIERNA — teda `on-surface`, tá istá,
			 * akou je vysádzaný samotný nadpis. Kurzor tak vyzerá ako
			 * pokračovanie vety, nie ako poznámka za ňou.
			 */
			.typewriter::after {
				content: "_";
				color: var(--theme-surface-on-surface);

				/* Perióda 1,2 s na želanie zadávateľa („kľudne daj väčšie
				   časové medzery") — 0,6 s vidno, 0,6 s nie. Oneskorenie je
				   dopočítané tak, aby kurzor začal blikať až po dopísaní
				   vety. */
				animation: blink 1.2s 1.4s step-end infinite;
			}

			/* KURZOR BLIKÁ AJ PRI VYPNUTOM POHYBE (13. 9. 2026).
			 *
			 * Do tohto dňa tu bolo `animation: none` pod
			 * `prefers-reduced-motion: reduce` a kurzor vtedy stál. Zadávateľ
			 * má to nastavenie v systéme zapnuté, takže mu nikdy neblikal —
			 * dvakrát to hlásil ako chybu a dvakrát som hľadal inde.
			 *
			 * Výnimku je tu možné spraviť bez zlého svedomia. Zmyslom toho
			 * nastavenia sú veľkoplošné pohyby, ktoré spôsobujú závrat:
			 * parallax, poletujúce panely, autoplay videá. Podčiarkovník
			 * široký jeden znak medzi tie veci nepatrí. Pri perióde 1,2 s je
			 * to navyše 0,83 Hz, teda hlboko pod hranicou troch bliknutí za
			 * sekundu, od ktorej sa blikanie rieši ako zdravotné riziko.
			 *
			 * Čo pod vypnutým pohybom zostáva vypnuté: úvodné video v paneli
			 * výzvy a réžia scény. Tie do tej kategórie patria. */

			@supports (timeline-trigger-name: --t) {
				@keyframes text {
					from { background-size: 0 }
				}

				/* Typewriter effect */
				.typewriter {
					background: 
						/* highlight text */
						linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat 
						/* faded text */
						transparent;
					-webkit-background-clip: text;
					color: transparent;
					animation: text 2s ease-in both;
				}

				/* Typewriter Trigger in product section */
				#product-uvod *:has(> .typewriter) {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;

					.typewriter {					
						animation-trigger: --t play-once;
						&::after {
							animation-trigger: --t play-once;
							animation-delay: 1.6s;
						}
					}
				}

				/* Typewriter Trigger in Carousel
				 *
				 * Spúšťa vstup sekcie do okna, nie vodorovný posun karuselu: v origináli
				 * má napísaný titulok aj ukážka, ktorá len vykúka spoza pravého okraja.
				 * Pri `view(inline)` sa napísala až po posunutí na ňu. */
				.carousel > * {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;

					.typewriter {
						--typewriter-text-color: white;
						animation-trigger: --t play-once;
						animation-duration: 1.5s;

						&::after {
							/* Titulky v posuvníku sedia na tmavom obrázku, takže
							   sivá z nadpisu by tu zanikla — kurzor musí byť
							   svetlý ako text vedľa neho. */
							color: rgb(255 255 255 / .7);

							animation-trigger: --t play-once;
							animation-delay: 0.9s;
						}
					}
				}

				/* Spúšťač písacieho stroja v sekcii sťahovania bol tu.
				   Sekciu 10. 8. 2026 nahradila kopa smajlíkov, ktorá žiadny
				   text nemá — pravidlo by viselo na neexistujúcom prvku. */
			}
		}

		/* Popisy produktov sa píšu po písmenách — originál to má rovnako.
		 *
		 * Odmerané na antigravity.google: jedno písmeno nábehne za ~90 ms,
		 * odstup medzi písmenami je ~4,3 ms a krivka je kubická dobehová.
		 * Odstavec so 163 znakmi je tak hotový za ~790 ms, presne ako predloha.
		 *
		 * Rozdelenie na písmená robí `app.js`; sem prichádzajú hotové `.znak`
		 * s poradovým číslom v `--i`. Nie je to `sibling-index()`, lebo ten
		 * počíta poradie v rámci rodiča a odstup musí bežať cez celý odstavec.
		 */
		@layer per-znak {
			@keyframes znak-nabeh {
				from { opacity: 0 }
			}

			#features .content p {
				/* Slovo musí byť inline-block, inak by sa riadok mohol zlomiť
				   uprostred slova — každé písmeno je totiž samostatný prvok. */
				.slovo,
				.znak {
					display: inline-block;
				}

				.znak {
					/* Bez `opacity: 0` v pravidle: `both` drží pred spustením
					   hodnotu z `from` a cieľovú si animácia vezme z prvku. */
					animation: znak-nabeh 100ms cubic-bezier(0.33, 1, 0.68, 1) both;
					animation-delay: calc(var(--i) * 4.3ms);
				}
			}

			/* Spúšťa vstup položky do okna, nie načítanie stránky. */
			@supports (timeline-trigger-name: --t) {
				#features .feature {
					timeline-trigger: --t view() cover 15% cover 1000%;
					trigger-scope: --t;

					.znak {
						animation-trigger: --t play-once;
					}
				}
			}
		}

		@layer moving-icons {
			@layer slide-in {
				@keyframes slide-in { from { translate: 100% 0 0; } }
				#product .icons {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;				
					animation: slide-in 1s ease both;
					animation-trigger: --t play-once;
				}
			}
			@layer wobble {
				@keyframes wobble {
					from {
						translate: 0 75%;
					}
					to {
						translate: 0 -75%;
					}
				}

				#product .icon {
					/* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
					animation: wobble 4s ease infinite alternate;
					animation-delay: calc(mod(sibling-index(), 5) * -1s);
				}
			}
		}

		/* Pen tu mal scroll-triggered blednutie textu a obrázkov (fade-a-bit,
		   fake-clip-it, fade-in), naviazané na lepiaci layout. Originál nič
		   také nemá a po prechode na zoznam by tie animácie mierili na prvky,
		   ktoré už neexistujú. Odstránené 10. 8. 2026. */

		@layer scroll-driven-animations {
			/* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
			@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
				@keyframes scale-up {
					from {
						scale: 0.85;
					}
				}
				/* Kopa smajlíkov sa NEVYNÁRA. Predloha ju má statickú a rovnaká
				   krivka ako pri videu by na nej pôsobila ako chyba — je to
				   ozdoba na dne stránky, nie prvok, ktorý si pýta pozornosť.
				   (Do 10. 8. 2026 tu bola karta sťahovania s `scale-up`.) */

				/* Video sa pri vstupe do okna vynára — nie je hneď na celú
				   šírku. Originál to robí JavaScriptom cez vlastný scroller,
				   ktorého hodnoty sa nedali odmerať (v automatizovanom
				   prehliadači sa ten scroller nespustí). Použitá je preto tá
				   istá krivka ako pri karte sťahovania vyššie, aby oba efekty
				   na stránke pôsobili ako jeden systém. */
				#video iframe {
					animation: scale-up linear both;
					animation-timeline: view();
					animation-range: entry 50% entry 100%;
				}
			}
		}
	}
}

@layer components {
	@layer button {
		/* `.cta a` je tu zámerne: prvé tlačidlo v hero vedie od 10. 8. 2026 na
		   iný web, takže musí byť odkaz, nie <button> — ale vyzerať má rovnako
		   ako jeho sused. `text-decoration` a `font` si odkaz pýta navyše,
		   tlačidlo ich nededí. */
		button,
		.cta a {
			background: var(--theme-primary-primary);
   		color: var(--theme-primary-on-primary);
			border: 0px;
			border-radius: 999px;
			padding: 0.6em 1.5em;

			text-decoration: none;
			font-family: inherit;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 0.4rem;

			font-size: 0.9em;

			cursor: pointer;
			transition: .15s background ease-out;

			&:hover,
			&:focus-visible {
				background: var(--theme-button-states-primary-hovered);
			}

			&:has(span + .material-symbols-outlined) {
				padding-inline-end: 1em;
			}

			&:has(.material-symbols-outlined + span) {
				padding-inline-start: 1em;
			}

			&.secondary {
				color: var(--theme-surface-on-surface);
				background: var(--theme-secondary-button);
				border: 1px solid var(--theme-outline-variant);

				&:hover,
				&:focus-visible {
					background: var(--theme-button-secondary-hover);
				}
			}
		}
	}

	@layer navbar {
		@layer shared {
			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.menu-checkbox {
				display: none;
			}

			/* Hlavná akcia hlavičky — rozmery odmerané na antigravity.google.
			 *
			 * Do 10. 8. 2026 tu bolo „Stiahnuť" s ikonou sťahovania a výplň
			 * bola asymetrická (menej sprava), lebo ikona si o to pýtala.
			 * Text je teraz „Zákaznícka zóna", ikona odišla — šípka nadol
			 * by na výzve ku konzultácii klamala — a s ňou aj tá asymetria.
			 */
			.header-cta {
				display: flex;
				flex-direction: row;
				align-items: center;

				/* Výška 36 px je na origináli explicitná, nie odvodená z obsahu.
				   Priehľadný rám drží rovnakú veľkosť ako varianty s rámom. */
				min-height: 36px;
				padding: 6px 16px;
				border: 0.8px solid transparent;
				border-radius: 9999px;
				background: var(--theme-primary-primary);
				color: var(--theme-primary-on-primary);

				font-size: 14.5px;
				line-height: 21.02px;
				font-weight: 450;
				letter-spacing: .11px;
				white-space: nowrap;
				text-decoration: none;

				transition: .15s background ease-out;

				/* Ako `<button>` by inak zdedil systémové písmo prehliadača,
				   nie naše — `font-size` a spol. vyššie riešia veľkosť, toto
				   samotnú rodinu. */
				font-family: inherit;

				&:hover,
				&:focus-visible {
					background: var(--theme-button-states-primary-hovered);
				}

				/* Neaktívny stav — zóna zatiaľ neexistuje.
				 *
				 * Vzhľad sa NEMENÍ: tlačidlo zostáva čierne s bielym textom
				 * presne ako predtým. Rozhodnutie zadávateľa zo 14. 8. 2026 —
				 * skúšali sme stlmenú plochu a nechcel ju.
				 *
				 * Nedostupnosť teda nesie `disabled` v HTML, nie vzhľad: klik
				 * sa nespustí, tabulátor prvok preskočí a čítačka obrazovky ho
				 * ohlási ako nedostupný.
				 *
				 * KURZOR JE VÝNIMKA a prešiel troma verziami. Do 1. 9. 2026 tu
				 * bolo `default` s poznámkou, že `not-allowed` zadávateľ
				 * nechce. Potom sme na jeho želanie skúsili pirátsku lebku
				 * ako vlastný obrázok — nepáčila sa. Odvtedy je tu `not-allowed`,
				 * teda to, čo nad nestlačiteľným tlačidlom očakáva každý:
				 * kreslí ho operačný systém, každý prehliadač ho pozná
				 * a používateľ ho nemusí lúštiť.
				 *
				 * Vlastný obrázok je preč aj zo súborov (`img/kurzor-smrtka.svg`).
				 */
				&:disabled {
					cursor: not-allowed;

					/* Bez tohto by pod myšou zosvetlelo a tvárilo sa, že
					   reaguje. Nereaguje. */
					&:hover {
						background: var(--theme-primary-primary);
					}
				}
			}

			nav a {
				color: var(--theme-surface-on-surface);
				transition: .15s color ease-out, .15s background ease-out;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: #000;
					background: var(--theme-button-states-hovered);
				}
			}
		}
		/* Mobilné menu — 1:1 podľa antigravity.google, odmerané na živej
		   stránke pri 375 px aj 900 px. Hodnoty sú v celom mobilnom pásme
		   PEVNÉ, nie plynulé: riadok má 78 px na oboch šírkach. */
		@layer mobile {
			@media (width < 1024px) {
				/* Prepínač je plná čierna pilulka, nie holá ikona — a je čierna
				   v OBOCH stavoch, nielen po otvorení. Odmerané 63 × 36 px,
				   ikona 18 px, výplň 0. Výška 36 px zároveň drží hlavičku na
				   52 px, rovnako ako tlačidlo „Stiahnuť" na desktope; dovtedy
				   mala na mobile 45 px. */
				.menu-button {
					cursor: pointer;

					display: flex;
					place-content: center;
					align-items: center;

					width: 63px;
					min-height: 36px;
					border-radius: 9999px;

					background: var(--theme-primary-primary);
					color: var(--theme-primary-on-primary);
					font-size: 18px;

					transition: .15s background ease-out;

					&:hover,
					&:focus-visible {
						background: var(--theme-button-states-primary-hovered);
					}
				}

				nav {
					display: none;
				}

				/* Riadok bez panelu. Rovnaké hodnoty má spúšťač `summary`
				   v podvrstve `dropdown` nižšie — musia sedieť spolu.
				   `> ul >` zámerne: od zavedenia rozbaľovacích panelov žijú
				   v nav aj vnorené <li>/<a>, ktoré toto dediť nesmú.

				   Linka patrí RIADKU, nie <li>. Na <li> by sa pri rozbalenej
				   položke nakreslila až pod panelom s odkazmi — predloha ju
				   má medzi riadkom a panelom a pod panelom už žiadnu nemá.
				   Vrchná linka patrí panelu menu, nie prvej položke. */
				/* `.nav-neaktivne` je `<span>` kategórie, ktorá zatiaľ nemá kam
				   viesť. Tvar riadku musí mať ten istý, inak by v rade chýbal. */
				nav > ul > li > :is(a, .nav-neaktivne) {
					display: flex;
					justify-content: space-between;
					align-items: center;

					padding: 24px;
					border-bottom: 0.8px solid var(--theme-surface-surface-container-higher);

					font-size: 18.4px;
					line-height: 29.6px;
					font-weight: 500;
					letter-spacing: -.28px;
					color: var(--theme-surface-on-surface);
				}

				/* When the menu toggle is checked */
				.menu-checkbox:checked {
					/* Show the nav */
					& ~ nav {
						position: fixed;
						inset: 0;
						/* Presne pod hlavičkou. Dovtedy tu bolo 2.75em s
						   poznámkou „guess“ — a naozaj sedelo o 8 px vyššie. */
						top: 52px;
						display: block;
						background: var(--palette-grey-0);

						border-top: 0.8px solid var(--theme-surface-surface-container-higher);
						/* Aby posledná položka nekončila na hrane obrazovky. */
						padding-block-end: 48px;
						overflow-y: auto;
					}

					/* Show the proper icon in the button */
					& ~ .menu-button {
						[data-show-when="closed"] {
							display: none !important;
						}
					}
				}

				/* When the menu toggle is not checked */
				.menu-checkbox:not(:checked) {
						/* Show the proper icon in the button */
						& ~ .menu-button {
						[data-show-when="open"] {
							display: none !important;
						}
					}
				}

				/* Skryť tlačidlo Stiahnuť — od prechodu na 1:1 je to <a>, nie <button> */
				header .header-cta {
					display: none;
				}
			}
		}

		/* Large Menu */
		@layer large {
			@media (width >= 1024px) {
				/* Len horná úroveň je vodorovný rad — zoznamy v paneloch
				   zostávajú pod sebou. */
				nav > ul {
					display: flex;
					flex-direction: row;
					gap: 0.2rem;
					align-self: flex-start;
					/* Položky s panelom sú <details> (blok), obyčajné sú <a>.
					   Bez tohto sedia na inej účiare a menu je „schodovité". */
					align-items: center;
				}

				/* Rozmery presne podľa antigravity.google: 14,5 px / váha 450,
				   pilulka 6px 16px. Pôvodných 16 px robilo menu opticky ťažšie
				   než originál. */
				nav > ul > li > :is(a, .nav-neaktivne) {
					display: flex;
					align-items: center;
					padding: 6px 16px;
					border-radius: 999px;
					font-size: 14.5px;
					font-weight: 450;
					letter-spacing: .11px;
					color: var(--theme-surface-on-surface-variant);
					white-space: nowrap;
				}

				/* Pilulka pri prejdení myšou patrí LEN odkazu. Neaktívna
				   kategória nemá kam viesť, takže sa nesmie rozsvietiť —
				   inak by sľubovala klik, ktorý nepríde. */
				nav > ul > li > a {
					&:hover,
					&:focus-visible {
						color: #000;
						background: var(--theme-nav-button-hover);
					}
				}
				.menu-button {
					display: none;
				}
			}
		}

		/* Rozbaľovacie panely — 1:1 podľa antigravity.google.
		   Deklarované ako POSLEDNÁ podvrstva navbaru zámerne: prepisujú
		   základné štýly položiek menu bez prebíjania špecificitou.

		   Všetky rozmery sú odmerané na živej stránke, nie odhadnuté.
		   Farebné tokeny (--theme-surface-surface-container-high,
		   --theme-outline-variant, --theme-nav-button) sedia s originálom
		   presne — pen ich prebral z toho istého zdroja. */
		@layer dropdown {
			@layer shared {
				/* Spúšťač. Menšia výplň sprava, lebo za textom je šípka. */
				nav summary {
					list-style: none;
					cursor: pointer;

					display: flex;
					flex-direction: row;
					align-items: center;

					padding: 6px 8px 6px 16px;
					border-radius: 999px;
					font-size: 14.5px;
					font-weight: 450;
					letter-spacing: .11px;
					color: var(--theme-surface-on-surface-variant);
					white-space: nowrap;

					transition: .15s color ease-out, .15s background ease-out;

					/* Safari marker nezhasne cez `list-style`. */
					&::-webkit-details-marker {
						display: none;
					}

					&:hover,
					&:focus-visible {
						color: #000;
						background: var(--theme-nav-button-hover);
					}
				}

				/* Šípka pri spúšťači. ZÁMERNE sa neotáča — originál ju necháva
				   smerovať dole aj pri otvorenom paneli (overené: transform aj
				   rotate sú `none` a žiadne pravidlo pre otvorený stav
				   neexistuje). */
				.dropdown-icon {
					font-family: "Google Symbols";
					font-weight: 300;
					font-size: 1.5em;
					/* Bez riadkovania má ikona pri `normal` výšku 26 px namiesto
					   21 a tlačidlo „Stiahnuť" je vyššie než na origináli.
					   POMEROVÁ hodnota, nie pevných 21,02 px: v mobilnom menu
					   dedí ikona veľkosť 44 px a pevný riadok by ju stlačil. */
					line-height: 1;
					margin-inline-start: var(--space-xs);
					display: inline-flex;
					transition: .3s;
				}

				/* Panel: pás cez celú šírku hlavičky, zaoblený len zdola. */
				.dropdown {
					background: var(--palette-grey-0);
					border-top: 1px solid var(--theme-surface-surface-container-higher);
					border-radius: 0 0 var(--shape-corner-lg) var(--shape-corner-lg);
					padding: var(--space-2xl) 0 var(--space-xl);
				}

				/* Vnútro sa drží osi obsahu stránky, rovnako ako hlavička. */
				.dropdown-inner {
					padding-inline: var(--page-inset);
				}

				.dropdown-panel {
					display: flex;
					justify-content: space-between;
					/* Rozostup naozaj sleduje medzeru mriežky — overené rozbalením
					   panelu na predlohe: pri 1440 px má 48 px, pri 1700 px 64 px,
					   presne podľa `--grid-gutter`. */
					gap: var(--grid-gutter);
				}

				.dropdown-title {
					margin: 0;
					font-size: 24px;
					font-weight: 700;
					line-height: 1.08;
					color: var(--theme-surface-on-surface);
					/* Origináll láme nadpis na vyvážené riadky. */
					text-wrap: balance;
				}

				/* Pilulka „Zobraziť prehľad" — rovnaká ako tlačidlá v hlavičke. */
				.nav-cta {
					display: inline-flex;
					align-items: center;

					padding: var(--space-sm) var(--space-md);
					border-radius: 999px;
					border: 1px solid transparent;
					background: var(--theme-nav-button);
					/* Mimo <nav> neplatí základné `nav a { text-decoration: none }`,
					   takže by sa pilulka podčiarkla — napr. „Zobraziť blog". */
					text-decoration: none;

					font-size: 14.5px;
					line-height: 21.02px;
					font-weight: 450;
					letter-spacing: .11px;
					color: var(--theme-surface-on-surface);

					&:hover,
					&:focus-visible {
						background: var(--theme-nav-button-hover);
					}
				}

				.subnav-label {
					margin: 0 0 var(--space-sm);
					padding: var(--space-xs) var(--space-md);
					font-size: 14.5px;
					line-height: 21.02px;
					color: var(--theme-surface-on-surface-variant);
				}

				.subnav {
					display: flex;
					flex-direction: column;
				}

				.subnav-link {
					display: flex;
					align-items: center;
					width: 100%;

					padding: var(--space-xs) var(--space-md);
					border-radius: var(--shape-corner-xs);

					font-size: 17.5px;
					line-height: 25.38px;
					color: var(--theme-surface-on-surface);

					transition: background-color .2s, color .2s;

					&:hover,
					&:focus-visible {
						background: var(--theme-surface-surface-container-high);
						color: var(--palette-blue-600);
						outline: none;
					}
				}

				.link-icon {
					font-family: "Google Symbols";
					font-size: 22px;
					margin-inline-end: var(--space-sm);
					display: inline-flex;
				}

				/* Šípka za textom (Dokumentácia) sa pri prejdení posunie. */
				.link-arrow {
					font-family: "Google Symbols";
					font-size: var(--icon-size-sm);
					margin-inline-start: var(--space-xs);
					transition: .3s;
				}

				.subnav-link:hover .link-arrow,
				.subnav-link:focus-visible .link-arrow {
					translate: 50% 0;
				}
			}

			/* Desktop: panel visí na celej šírke pod hlavičkou. */
			@layer large {
				@media (width >= 1024px) {
					/* Panel sa kotví na .header-wrapper (position: fixed), preto
					   medzi ním a panelom NESMIE byť ďalší pozicovaný predok. */
					.dropdown {
						position: absolute;
						top: 100%;
						left: 0;
						right: 0;
						z-index: 99;

						/* Vstup panelu — originál ho len prepne, nám pridá jemný
						   nábeh cez @starting-style. */
						transition: opacity .15s var(--ease-out-cubic);
						opacity: 1;

						@starting-style {
							opacity: 0;
						}
					}

					/* ZÁMERNE BEZ ZÁCLONY (stav k 27. 8. 2026).
					 *
					 * Predloha stránku pod otvoreným panelom stmavuje —
					 * `.dropdown-overlay.open`, `rgba(0, 0, 0, .07)` cez celé
					 * okno pod hlavičkou aj panelom. Mali sme to dvakrát
					 * a dvakrát to išlo preč:
					 *
					 *   10. 8. — prvá verzia visela na `.dropdown::after`
					 *            a jej dolná hrana končila ostrým šedým
					 *            pásom uprostred stránky;
					 *   27. 8. — druhá verzia (`.header-wrapper::after`,
					 *            `absolute` od spodku hlavičky, `100vh`)
					 *            tú chybu nemala, ale zadanie znie, že
					 *            stránka má pri otvorenom menu zostať biela.
					 *
					 * Keby sa vracalo potretí, patrí to SEM (nie do markupu)
					 * a musí to byť `absolute`, nie `fixed`: `.header-wrapper`
					 * má kvôli skrývacej lište `translate`, a nenulový
					 * `translate` z prvku robí obsahujúci blok aj pre fixné
					 * potomstvo — záclona by dostala výšku hlavičky, nie okna.
					 */

					/* Obsah panelu zaberá 2/3 šírky, zvyšok ostáva prázdny. */
					.dropdown-panel {
						width: 66.6667%;
					}

					.dropdown-col {
						flex: 0 1 25%;
						max-width: 25%;
					}

					.subnav-column {
						flex: 0 1 33.3333%;
						max-width: 33.3333%;
						/* Linka po OBOCH stranách, nielen vľavo. */
						border-inline: 1px solid var(--theme-outline-variant);
						padding-inline: var(--space-sm);
					}

					.subnav-content-container {
						flex: 0 1 25%;
						max-width: 25%;
					}

					/* Nadpis a pilulka sú pod sebou s odsadením ako na origináli. */
					.dropdown-title + div {
						margin-top: var(--space-lg);
					}
				}
			}

			/* Mobil: z panelu je akordeón vnútri hamburger menu.
			   Originál tu nadpis aj prázdny stĺpec skrýva a poradie obracia. */
			@layer mobile {
				@media (width < 1024px) {
					/* Spúšťač vyzerá ako obyčajný riadok menu — bez pilulky
					   a v plnej farbe textu, nie stlmenej ako na desktope.
					   Hodnoty musia sedieť s `nav > ul > li > a` v mobilnej
					   podvrstve navbaru vyššie. */
					nav summary {
						justify-content: space-between;

						padding: 24px;
						border-radius: 0;
						border-bottom: 0.8px solid var(--theme-surface-surface-container-higher);

						font-size: 18.4px;
						line-height: 29.6px;
						font-weight: 500;
						letter-spacing: -.28px;
						color: var(--theme-surface-on-surface);
						white-space: normal;

						&:hover,
						&:focus-visible {
							background: none;
						}
					}

					/* Na mobile sa šípka OTÁČA — na rozdiel od desktopu, kde
					   ju predloha necháva smerovať dole aj pri otvorenom
					   paneli. Overené na živej stránke: otvorená položka má
					   `transform: matrix(-1, 0, 0, -1, 0, 0)`. */
					.dropdown-icon {
						font-size: 18.4px;
						margin-inline-start: 0;
						color: var(--theme-surface-on-surface);
						transition: rotate .2s;
					}

					details[open] > summary .dropdown-icon {
						rotate: 180deg;
					}

					.dropdown {
						border: 0;
						border-radius: 0;
						padding: 24px;
						/* Reset veľkosti zdedenej z riadku menu. */
						font-size: 1rem;
						font-weight: 400;
					}

					.dropdown-inner {
						padding-inline: 0;
					}

					.dropdown-panel {
						flex-direction: column-reverse;
						gap: var(--space-md);
					}

					.dropdown-title,
					.subnav-content-container {
						display: none;
					}

					.subnav-column {
						border-inline: 0;
						padding-inline: 0;
					}

					/* Odkazy v rozbalenom paneli sú menšie než na desktope —
					   15/22 px namiesto 17,5/25,38. Výplň 4/16 px sedí s
					   predlohou už zo spoločnej vrstvy. */
					.subnav-link {
						font-size: 15px;
						line-height: 22px;
						letter-spacing: .16px;
					}
				}
			}
		}
	}

	/* STREDNÉ PÁSMO — navigáciu preberá mapa stránky.
	 *
	 * Vodorovný rad potrebuje spolu s logom, hlavnou akciou a prepínačom mapy
	 * 1422 px.
	 * Zapínal sa ale už na 1024 px, takže medzi tým hlavička pretekala
	 * a hlavná akcia aj prepínač mapy stáli mimo okna — so šiestimi
	 * položkami od 1064 do 1240 px, s ôsmimi až po 1422.
	 *
	 * PRAH JE ODMERANÝ, nie zvolený, a pri každej zmene zoznamu položiek sa
	 * musí premerať znova. „ESG" samo pridalo radu 64 px a prah z 1500 na
	 * 1560; zrušenie „Cenníka" ho vzalo späť na 1480. Skrátenie hlavnej akcie
	 * na „Zákaznícka zóna" uvoľnilo ďalších 33 px — prah zostáva 1480, lebo
	 * 58 px rezervy je lepšie než honiť sa za každým slovom v tlačidle.
	 *
	 * Ako sa to meria: vynútiť `header > nav { display: block }` a hľadať
	 * najmenšiu šírku, pri ktorej `header.scrollWidth === header.clientWidth`.
	 *
	 * Skúsili sme to najprv stiahnuť výplňou pilulky (16 → 6 px) a medzerou
	 * hlavičky (2 → 0,75 rem). Rad sa zúžil z 905 na 761 px, čo na 1280 px
	 * nestačilo — chýbalo ešte 56 px a ďalej sa už dá brať len z písma, teda
	 * zo sádzby predlohy. Preto sa rad v tomto pásme radšej neukazuje vôbec.
	 *
	 * Nič sa tým nestráca: prepínač „celé menu" je tu viditeľný a otvára
	 * mapu so VŠETKÝMI kategóriami aj podúrovňami v mriežke. Je to ten istý
	 * vzor ako na puxdesign.cz, odkiaľ mapa pochádza.
	 *
	 * Rozdelenie zodpovednosti podľa šírky:
	 *
	 *   pod 1024 px … hamburger (mobilný panel), prepínač mapy skrytý
	 *   1024–1480 …… len prepínač mapy
	 *   nad 1480 px … vodorovný rad + prepínač mapy
	 *
	 * Nad 1480 px zostávajú rozmery predlohy NEDOTKNUTÉ (6px 16px, medzera
	 * 2rem) — tam je stránka 1:1 s antigravity.google.
	 *
	 * MUSÍ BYŤ AŽ ZA `@layer dropdown`: `dropdown` je deklarovaná neskôr
	 * a v kaskáde vrstiev vyhráva bez ohľadu na špecificitu.
	 */
	@layer stredne-pasmo {
		@media (1024px <= width < 1480px) {
			/* PRIAMY potomok, nie `header nav`. Podzoznamy v mape sú tiež
			   `<nav class="subnav">`, takže široký selektor schoval spolu
			   s radom aj všetkých 15 podpoložiek mapy — a to práve v pásme,
			   kde je mapa jedinou cestou ďalej. */
			header > nav {
				display: none;
			}
		}
	}

	@layer card {
		.card {
			border-radius: 2em;

			&.dark {
				background: var(--theme-primary-primary);
	   		color: var(--theme-surface-surface);
			}
		}
	}
}

@layer layout {
	@layer grid {
		body {
			margin: 0;
			display: grid;
			/* Tri osi, presne ako na predlohe:
			 *
			 *   fullbleed  0 …………………………………………………………………………………… šírka okna
			 *   row           `--row-margin` …… mriežka 12 stĺpcov …… (1425 → 48)
			 *   main             `--page-margin` …… os obsahu ……      (1425 → 72)
			 *
			 * `row` je základňa 12-stĺpcovej mriežky: stĺpce majú výplň
			 * `--grid-half`, takže ich text dosadne presne na `main`. Sekcia,
			 * ktorá si stĺpce nepočíta, spadne rovno na `main` a je zarovnaná.
			 */
			grid-template-columns:
				[fullbleed-start]
				/* Krajné dráhy sú `--row-margin`, kým sa obsah nedotkne stropu;
				   nad ním rastú a obsah tým vycentrujú. */
				minmax(var(--row-margin), 1fr)
				[row-start]
				var(--grid-half)
				[main-start]
				/* Určitá dĺžka, nie `1fr`. Holé `1fr` znamená `minmax(auto, 1fr)`
				   a to automatické minimum je min-content stĺpca — dráha by teda
				   NEVEDELA klesnúť pod najširší nezlomiteľný obsah. Na 375 px si
				   obsah pýtal 283 px, hoci k dispozícii bolo 279, takže mriežka
				   pretiekla o 4 px. Pevná hlavička sa potom roztiahla na rozšírený
				   layout viewport a presah narástol na 21 px — stránka sa dala
				   vodorovne posúvať. `min()` automatické minimum nemá. */
				min(100% - 2 * var(--page-margin), var(--breakpoint-max))
				[main-end]
				var(--grid-half)
				[row-end]
				minmax(var(--row-margin), 1fr)
				[fullbleed-end];
			grid-auto-rows: min-content;
		}

		body > * {
			grid-column: fullbleed;
		}
	}

	@layer navigation {
		/* Odsadenie sem NESMIE prísť: `.header-wrapper` má v `@layer moderncss`
		   `translate: 0 0` (chovanie skrývacej lišty), a nenulový `translate`
		   robí z prvku obsahujúci blok aj pre potomkov s `position: fixed`.
		   Výplň by teda zúžila panely menu, ktoré sa naň kotvia. Os obsahu si
		   preto dorába až `<header>` a `.dropdown-inner` o úroveň nižšie. */
		.header-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;

			background: var(--theme-surface-surface);
			z-index: 1;
		}

		/* ZÁMERNE ".header-wrapper header", nie holé "header": pôvodné pravidlo
		   z penu robilo flex riadok z KAŽDÉHO <header> na stránke — vrátane
		   hlavičky článku, ktorej rozhodilo nadpis, dátum a perex vedľa seba. */
		.header-wrapper header {
			display: flex;
			flex-direction: row;
			gap: 2rem;
			align-items: center;

			/* Hlavička je `position: fixed`, teda mimo mriežky — na os obsahu
			   sa musí zarovnať vlastnou výplňou. */
			padding-inline: var(--page-inset);
			padding-block: 0.5rem;

			.header-cta,
			.menu-button {
				margin-left: auto;
			}
		}

		/* Logo v hlavičke je odkaz na domov. Obal musí byť flex, inak by
		   `<a>` ako riadkový prvok pridal pod SVG medzeru na účiarku a
		   hlavička by o pár pixelov narástla. Hodnoty sú z predlohy. */
		.logo-link {
			display: flex;
			align-items: center;
			text-decoration: none;
		}

		/* Značka v hlavičke — obrázok, takže výšku drží CSS, šírka ide
		   `width: auto` podľa vlastného pomeru strán súboru.

		   21 px, PRESNE výška predlohy (odmerané: `<svg height="21">`
		   v jej hlavičke).

		   Medzi 24. a 26. 8. 2026 tu bol popri obrázku aj napísaný text
		   „MATPEX SK" (`.logo-text`, dve váhy ako „Google Antigravity" na
		   predlohe, veľkosť odmeraná cez cap-height) — odstránený na
		   želanie, značka je znova sama. Prístupné meno teraz dorába
		   `aria-label` na `.logo-link` (viď `header.blade.php`). */
		.logo-link .logo {
			display: block;
			height: 21px;
			width: auto;
		}
	}

	@layer welcome {
		#welcome {
			/* Jediná sekcia, ktorá sa rozťahuje na výšku okna — predloha to má
			   tiež (`welcome-wrapper` má `min-height: 900px` pri okne 900 px,
			   ostatné sekcie majú 0).

			   CELÁ VÝŠKA OKNA JE ZÁMER A ZOSTÁVA. Hero má byť samostatná
			   obrazovka; tmavý panel `#vyzva` patrí až pod ňu, nie do nej.
			   3. 9. 2026 sme skúsili nechať ten panel vykuknúť nad zlom (tak to
			   robí anthropic.com aj Stripe) — hero sa tým skrátil a prestal byť
			   samostatný, takže je to vrátené. Signál „pokračuje to" nesie
			   `.dalej` na spodku sekcie, viď nižšie. */
			min-height: 100dvh;

			/* Kotva pre `.dalej`, ktorá je `position: absolute` na spodku hera.
			   Patrí sem k ostatnej geometrii sekcie, nie do vlastnej podvrstvy —
			   polohovanie sekcie má byť na jednom mieste. */
			position: relative;

			/* ZNAČKA „POKRAČUJE TO" — obrys myši s koliesskom na spodku hera.
			 *
			 * Hero je na celú výšku okna a ďalšia sekcia teda nikdy nevykukne.
			 * Bez značky nemá návštevník ako vedieť, že stránka pokračuje;
			 * odmerané prázdno pod výzvami je 44 px pri okne 720 px, ale 301 px
			 * pri 1080 — na veľkom monitore je spodná tretina úvodnej obrazovky
			 * prázdna.
			 *
			 * KRESLENÉ V CSS, nie ikonkové písmo. Dva dôvody: Google Fonts
			 * servíruje `.material-symbols-outlined { font-size: 24px }` BEZ
			 * vrstvy, takže to porazí každú `@layer` (projekt preto všade používa
			 * vlastné triedy ikoniek), a myš s koliesskom v Material Symbols
			 * aj tak nie je. Obrys je `border-radius` na prázdnom `<span>`,
			 * koliesko je `::after`. Žiadny súbor, žiadna sieťová požiadavka.
			 *
			 * Je to `aria-hidden` ozdoba, nie odkaz: nepridáva zastávku pre
			 * tabulátor ani hlásenie pre čítačku. Kto stránku ovláda klávesnicou
			 * alebo čítačkou, o pokračovaní vie z osnovy dokumentu — značka je
			 * pomôcka pre oko, nie ovládací prvok. */
			.dalej {
				/* Skrytá, kým sa nepreukáže, že je pre ňu miesto — viď media
				   query nižšie. `display: none`, nie `opacity`, aby v skrytom
				   stave nezaberala nič. */
				display: none;

				position: absolute;
				inset-block-end: 24px;
				inset-inline: 0;
				margin-inline: auto;

				/* Rozmery obrysu myši. `border-radius` je presne polovica šírky,
				   takže z obdĺžnika vyjde pilulka. */
				inline-size: 26px;
				block-size: 40px;
				border: 1.5px solid var(--theme-surface-on-surface-variant);
				border-radius: 13px;

				/* Tá istá šedá ako podnadpis hera. `--theme-outline` (12 %
				   čiernej) by na bielom prakticky nebolo vidno. */
			}

			/* Koliesko. V pokoji stojí hore, počas animácie zíde nadol. */
			.dalej::after {
				content: "";
				position: absolute;
				inset-block-start: 7px;
				inset-inline: 0;
				margin-inline: auto;
				inline-size: 2px;
				block-size: 6px;
				border-radius: 1px;
				background: var(--theme-surface-on-surface-variant);
			}

			/* KEDY SA ZNAČKA UKÁŽE — obe podmienky sú odmerané, nie odhadnuté.
			 *
			 * ŠÍRKA 900 px: plávajúci stĺpec vpravo dole (karta konzultácie,
			 * 396 px) sa značke na strede začne zapletať do cesty pri 864 px —
			 * tam je jeho ľavá hrana na 429 a pravý okraj značky na 445. Pri
			 * 900 px je hrana na 465 a značka končí na 463, teda tesne mimo.
			 * 900 je najbližšie okrúhle číslo nad meraním.
			 *
			 * VÝŠKA 800 px: značka si berie 24 px odsadenia plus 40 px výšky,
			 * teda 64 px z prázdna pod výzvami. Odmerané prázdno: 4 px pri okne
			 * vysokom 640, 44 px pri 720, 68 px pri 768, 84 px pri 800. Pri 768
			 * by teda medzi tlačidlami a značkou zostali 4 px a značka by na
			 * výzvy prakticky dosadla; pri 800 zostane 20 px.
			 *
			 * NA TELEFÓNE ZNAČKA NEBUDE, a nie je to voľba. Karta konzultácie je
			 * tam takmer cez celú šírku a pri načítaní VIDITEĽNÁ (skript ju vie
			 * len zavrieť, viď `app.js`) — pri 375×667 prekrýva obe tlačidlá
			 * hera, takže na spodku hera nie je voľné miesto vôbec. Rieši sa to
			 * samostatne; kým je to tak, čokoľvek umiestnené tam by bolo pod
			 * kartou. */
			@media (width >= 900px) and (height >= 800px) {
				.dalej {
					display: block;
				}
			}

			/* Pohyb sa ZAPÍNA, nezakazuje — `no-preference`, nie `reduce`.
			   Zabudnutá animácia sa tak nemá ako prešmyknúť k človeku, ktorý
			   pohyb nechce; projekt to tak robí aj v `@layer spat-hore`.

			   TRIKRÁT, nie donekonečna. 3 × 1,6 s = 4,8 s, teda tesne pod
			   hranicou 5 s, od ktorej WCAG 2.2.2 (Pause, Stop, Hide) žiada
			   ovládač na zastavenie. Nekonečná slučka by ho potrebovala —
			   a blikajúci prvok na úvodnej obrazovke aj tak po chvíli otravuje.

			   Bez `both`: po dobehnutí sa koliesko vráti do východiskového stavu,
			   teda hore a viditeľné. S `forwards` by zostalo priehľadné a v myši
			   by ostala diera.

			   Odklad 2 s — nadpis sa v tom čase ešte píše po písmenách
			   (`--pisanie-znak`), nech si pohyb nekonkuruje. */
			@media (prefers-reduced-motion: no-preference) {
				.dalej::after {
					animation: dalej-koliesko 1.6s ease-in-out 2s 3;
				}
			}

			@keyframes dalej-koliesko {
				0%   { translate: 0 0;    opacity: 0; }
				25%  { opacity: 1; }
				75%  { opacity: 1; }
				100% { translate: 0 16px; opacity: 0; }
			}

			/* Značka v hero má od 1. 9. 2026 ŠTVRTINU prirodzenej veľkosti
			   súboru: `mdt-znacka.png` má 531 × 261 px, tu z toho vyjde
			   133 × 65. Dovtedy tu bolo 32 px na výšku, teda 1,5× hlavičková
			   značka — na úvodnej obrazovke sa strácala.

			   Plnú veľkosť sme skúšali a je jej priveľa: pri 531 × 261 px
			   hero na okne vysokom 667 px (mobil) aj 720 px (notebook)
			   pretieklo — sekcia má `min-height: 100dvh` a nadpis s výzvami
			   sa už pod značku nezmestili.

			   Šírka, nie výška: `min(100%, 133px)` drží štvrtinu, kým je pre
			   ňu miesto, a na veľmi úzkom okne sa značka zmenší s obsahom.
			   `block-size: auto` si pomer strán dopočíta sám.

			   Štvrtina je zhodou okolností aj bezpečná hranica ostrosti:
			   65 px na výšku zo zdroja s 261 px znamená rezervu presne 2×,
			   takže značka je ostrá aj na dvojnásobnom displeji. Nad ~130 px
			   by sa už naťahovala a chcelo by to väčší podklad, ideálne SVG. */
			h1 .logo {
				inline-size: min(100%, 133px);
				block-size: auto;
				display: block;
				margin: 0 auto;

				/* Na veľmi NÍZKOM okne značka ustúpi. Odmerané pri 320 × 568 px
				   (iPhone SE): pri 133 px skončili obe výzvy 19 px pod okrajom
				   obrazovky, pri pôvodných 32 px boli 15 px nad ním. Zlom je
				   preto na výške okna, nie na šírke — problém je zvislý. */
				@media (height < 600px) {
					inline-size: min(100%, 92px);
				}
			}

			/* Písanie po písmenách. Mechanizmus je v `app.js`, tu je len vzhľad.

			   `--pisanie-znak` je odstup medzi písmenami. Časovanie ZAČIATKU
			   (1 s) a KONCA (0,3 s) je prevzaté z atribútov predlohy
			   `initialdelay` a `enddelay`; túto hodnotu sme im odmerať nevedeli,
			   ich animácia sa spúšťa až pri viditeľnej stránke a automatizovaný
			   prehliadač sa hlási ako skrytý. Je to teda naša voľba a jeden
			   gombík: nižšie = rýchlejšie písanie. */
			--pisanie-znak: 45;

			.pise-slovo {
				display: inline-block;
			}

			/* Znak je od začiatku v toku — má šírku, len ho nevidno. Keby sa
			   pridával až pri odhalení, text by pri písaní poskakoval a menil
			   zalomenie riadkov. */
			.pise-znak {
				opacity: 0;

				&.je {
					opacity: 1;
				}
			}

			/* Kurzor. Predloha má na tom mieste vlastný obrázok so značkou
			   Googlu — správanie sa prevziať dá, cudzí asset nie, takže je to
			   náš obdĺžnik v našom atramente. Posúva sa tak, že ho `app.js`
			   presúva za posledné napísané písmeno; po dopísaní zmizne,
			   rovnako ako v predlohe (`data-cursor-persists="false"`). */
			.pise-kurzor {
				display: inline-block;
				width: 0.06em;
				height: 0.78em;
				margin-inline-start: 0.02em;
				translate: 0 0.06em;
				background: var(--theme-surface-on-surface);
				animation: pise-blikanie 1.06s steps(1, end) infinite;
			}

			@keyframes pise-blikanie {
				0%, 50% { opacity: 1; }
				50.01%, 100% { opacity: 0; }
			}

			p {
				/* Pevných `4.5em` (72 px) je veľkosť predlohy a na širokom okne
				 * zostáva nedotknutá. Na úzkom sa musí zmenšiť — inak text
				 * preteká do strán a tlačidlá vypadnú pod okraj okna.
				 *
				 * Do 14. 8. 2026 tu bolo `19vw` a stačilo to: text bol „Zažite
				 * vzlet / s IDE novej generácie", teda dve krátke frázy.
				 * Odvtedy sú to dve celé vety (~120 znakov) a 19vw prestalo
				 * stačiť — pri 375×667 presahovala stránka o 12 px a tlačidlá
				 * končili 298 px POD oknom.
				 *
				 * 10,5vw je odmerané ako najväčšia hodnota, pri ktorej obe chyby
				 * zmiznú naraz. Namerané pri 320×568, 360×640 a 375×667:
				 *
				 *   19vw ……… presah 12 px, tlačidlá 272–298 px pod oknom
				 *   13vw ……… presah žiadny, tlačidlá stále 17–38 px pod oknom
				 *   11vw ……… v poriadku okrem 320×568, kde ostávalo 6 px
				 *   10,5vw … v poriadku na všetkých troch
				 *
				 * Tých 6 px pri 11vw nie je zaokrúhľovanie — 320×568 je
				 * najmenší bežný telefón (iPhone SE) a tlačidlá v hero sú to
				 * hlavné, čo tam má byť vidno bez scrollovania.
				 *
				 * Nad ~686 px šírky je `4.5em` menšie než 10,5vw, takže `min()`
				 * vyberie 72 px a desktop sa nemení vôbec.
				 *
				 * KEĎ SA TEXT ZMENÍ, TOTO SA MUSÍ PREMERAŤ ZNOVA — hodnota
				 * závisí od najdlhšieho slova aj od celkovej dĺžky. */
				font-size: min(4.5em, 10.5vw);
				text-align: center;
				font-weight: 500;

				color:  var(--theme-surface-on-surface);

				/* Druhá veta. MUSÍ to byť trieda, nie holé `span`.
				 *
				 * Pôvodne tu bolo `span { display: block; font-size: 0.7em }`
				 * a fungovalo to, kým bol v odseku jediný span. Písanie po
				 * písmenách ich ale vyrobí stovku — obal, slová aj jednotlivé
				 * znaky — a pravidlo chytilo všetky: každé písmeno dostalo
				 * vlastný riadok a 0,7 násobok veľkosti rodiča, ktorý sa ešte
				 * vnáraním násobil. Sádzba sa rozsypala úplne.
				 *
				 * `cloneNode` triedy zachováva, takže po rozdelení sedí ďalej. */
				.hero-druhy {
					display: block;
					font-size: 0.7em;
					color: var(--theme-surface-on-surface-variant);
				}
			}

			/* OBE TLAČIDLÁ ROVNAKO ŠIROKÉ (14. 9. 2026).
			 *
			 * Zadávateľ: „veľkosť, dĺžka buttonov Digitálna zrelosť
			 * a Konzultácia zadarmo musia byť rovnaké."
			 *
			 * Výška sedela už predtým (47 px oboje), líšila sa šírka: 209 proti
			 * 230 px, lebo text je rôzne dlhý a prvé tlačidlo má navyše ikonu,
			 * kvôli ktorej má asymetrickú výplň.
			 *
			 * MRIEŽKA S `1fr`, NIE FLEX. Vyskúšané oboje a odmerané:
			 *
			 *   flex: 1 1 0              → 214 a 225 px, teda stále nerovnaké
			 *   grid-auto-columns: 1fr   → 230 a 230 px
			 *
			 * Flex rozdeľuje voľné miesto, ale vychádza z rôznych minimálnych
			 * šírok obsahu, takže sa úplne nevyrovná. Mriežka dá obom stĺpcom
			 * šírku najširšieho z nich, čo je presne to, o čo ide.
			 *
			 * `width: fit-content` a `margin-inline: auto` držia dvojicu na
			 * strede a zároveň jej nedovolia roztiahnuť sa na celú šírku. */
			.cta {
				display: grid;
				grid-auto-flow: column;
				grid-auto-columns: 1fr;
				gap: 0.3em;
				justify-content: center;

				width: fit-content;
				margin-inline: auto;

				/* POD 560 px SA TLAČIDLÁ UKLADAJÚ POD SEBA. Dva stĺpce po
				   230 px potrebujú 466 px plus odsadenie stránky, čo sa na
				   telefón nezmestí — vedľa seba by sa museli zúžiť tak, že by
				   sa text zalomil. Pod sebou sú obe na celú šírku, teda stále
				   rovnaké. */
				@media (width < 560px) {
					grid-auto-flow: row;

					/* Späť na os obsahu a na automatickú šírku, aby dvojica
					   zabrala celý riadok. Pôvodných `width: 90%` bola tretia,
					   plynulá krivka odsadenia: pri 1440 px dala presne 72 px,
					   ale pri 1025 px už 51 px — teda 21 px dnu od zvyšku
					   stránky. */
					width: auto;
					margin-inline: var(--page-inset);
				}

				/* Aj `a`: prvé tlačidlo v hero je odkaz na iný web. Bez toho
				   by malo 14,4 px oproti 18,4 px suseda — a keďže výplň je
				   v `em`, zmenšila by sa s ním. */
				button,
				a {
					font-size: 1.15em;
				}
			}
		}
	}

	@layer video {
		/* Video je od 10. 8. 2026 POSLEDNOU sekciou stránky, hneď nad pätou
		   so smajlíkmi. Vzhľad si ponecháva pôvodný — geometriu
		   antigravity.google aj vynáranie cez `scale`. Prechod z anthropic.com
		   dostala samostatná sekcia `#vyzva`, viď `@layer vyzva`. */
		/* Video NIE JE cez celú šírku okna.
		 *
		 * Do 10. 8. 2026 sedelo na osi `fullbleed` s výplňou 1em, takže pri
		 * okne 2545 px malo 2513 px — o 781 px viac než predloha. Na širokom
		 * monitore to bol pás cez celú stenu.
		 *
		 * Predloha ho posadí do osi obsahu a nechá ho z nej vystúpiť presne
		 * toľko, aby po oboch stranách zostalo **6 px**. Odmerané na živej
		 * stránke (šírka rozloženia, bez `scale` z animácie):
		 *
		 *   okno 2545 → 1732 px   (strop, voľných 406 px po stranách)
		 *   okno 1585 → 1573 px   (voľných 6 px)
		 *   okno 1265 → 1253 px   (voľných 6 px)
		 *   okno  805 →  793 px   (voľných 6 px)
		 *   okno  375 →  363 px   (voľných 6 px)
		 *
		 * Vystúpenie je teda `--page-margin` mínus 6 px — predloha má na tom
		 * mieste presne `-66px` pri okraji 72 px, `-34px` pri 40 px a `-10px`
		 * pri 16 px. Strop 1732 px vyjde sám: os obsahu sa zastropuje na
		 * 1600 px a k tomu 2 × 66.
		 */
		#video {
			grid-column: main;
			margin-inline: calc(6px - var(--page-margin));

			iframe {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 16/9;

				/* 36 px ako na origináli, nie 2em (32 px). Pod 768 px ho
				   predloha sťahuje na 24 px. */
				border-radius: 36px;

				@media (width <= 767px) {
					border-radius: 24px;
				}

				overflow: clip;
			}
		}
	}

	@layer product {
		/* Nadpis „IT partner s osobným prístupom…" — odtrhnutý od zvyšku
		   #product 18. 8. 2026, aby medzi neho a pás ikon mohli vojsť
		   Naše hodnoty. Vlastná sekcia, nie `<h2>` voľne na stránke, lebo
		   potrebuje vlastný subgrid pre `grid-column: row` nižšie. */
		#product-uvod {
			padding-block: 120px 0;

			@media (width < 1024px) {
				padding-block: 40px 0;
			}

			display: grid;
			grid-template-columns: subgrid;

			/* Veľký úvodný nadpis má na predlohe 9 z 12 stĺpcov riadku, nie polovicu
			   hlavného stĺpca ako základné `h2`. Odmerané: pri 1425 px 949 px,
			   pri 2005 px 1184 px. Pod 1024 px ide na celú šírku. */
			> h2 {
				grid-column: row;
				max-width: none;
				padding-inline: var(--grid-half);

				@media (width >= 1024px) {
					width: 75%;
				}
			}
		}

		#product {
			/* Nadpis má odteraz vlastnú sekciu `#product-uvod` nad Našimi
			   hodnotami, takže tu zostáva len spodná polovica pôvodného
			   rytmu 120/120 (nahor spád dorobí `#hodnoty` svojím
			   `padding-block` aj linkou). Na mobile rovnako, len bez
			   horného 40 — to zostalo pri nadpise. */
			padding-block: 0 120px;

			@media (width < 1024px) {
				padding-block: 0 80px;
			}

			/* Pás ikon čaká mimo obrazovky (`slide-in` ho drží na
			   `translate: 100%`), kým ho neodpáli scroll trigger. `.icons`
			   oreže len ikony VNÚTRI seba — seba samého orezať nevie, takže
			   bez tohto riadku vzniká na mobile 375 px vodorovného posuvu.
			   `clip`, nie `hidden`: nevytvára scroll kontajner, takže
			   nezhodí sticky ani scroll-driven animácie v sekcii. */
			overflow-x: clip;

			display: grid;
			grid-template-columns: subgrid;

			> *:not(.icons) {
				grid-column: main;
			}

			.icons {
				grid-column: fullbleed;
			}

			/* Zoznam produktov si stĺpce počíta sám, preto sedí na `row`,
			   nie na osi obsahu — tú si doplní výplňou stĺpca. */
			> #features {
				grid-column: row;
			}

			.icons {
				height: max(24em, 40vb);

				display: flex;
				flex-direction: row;
				gap: 0.5rem;
				align-items: center;

				overflow-x: clip;

				.icon {
					flex: 0 0 clamp(4rem, 10vw, 6rem);
					aspect-ratio: 1;
					border-radius: 50%;

					background: #b7bfd917;
			    border: 1px solid var(--theme-outline-variant);
			    backdrop-filter: blur(5px);

					display: grid;
					place-content: center;

					span {
						font-size: 2em !important;
					}
				}
			}
		}

		/* Pilulka „Preskúmať produkt" pod zoznamom produktov — originál ju má
		   zarovnanú na os obsahu, nie na stred. */
		.product-cta {
			grid-column: main;
			margin-block: 0 4rem;
		}

		/* Zoznam produktov — 1:1 podľa antigravity.google.
		   Pen tu mal LEPIACI obrázok vpravo, ktorý zostával na mieste, kým sa
		   text posúval. Originál nič také nemá: je to obyčajný stĺpec štyroch
		   riadkov s medzerou 24 px, každý so svojím vlastným obrázkom.
		   Overené — v celej sekcii originálu nie je ani jeden `position: sticky`. */
		#features {
			display: flex;
			flex-direction: column;
			gap: var(--space-lg);

			.feature {
				display: flex;
				/* Úzke okno: text nad obrázkom a na stred. */
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: var(--space-lg);

				@media (width >= 1024px) {
					/* Desktop: text 4/12 vľavo, obrázok 6/12 vpravo s odsadením
					   2/12 medzi nimi. Zvisle sa zarovnávajú na stred. */
					flex-direction: row;
					align-items: center;
					text-align: start;
					gap: 0;
				}
			}

			.content {
				display: flex;
				flex-direction: column;
				gap: var(--space-lg);

				/* Výplň stĺpca mriežky — posunie text z `row` na os obsahu.
				   Platí na všetkých šírkach, inak by text pod zlomom stál
				   o polovicu medzery vľavo od zvyšku stránky. */
				padding-inline: var(--grid-half);

				@media (width >= 1024px) {
					flex: 0 0 33.3333%;
					max-width: 33.3333%;
				}
			}

			.img-wrapper {
				/* Zaoblenie je na OBALE, nie na obrázku — originál ho oreže
				   cez `overflow: hidden`, takže sedí aj pri videu. */
				border-radius: 36px;
				overflow: hidden;
				/* Pod zlomom ide obrázok cez celý stĺpec mriežky: šírka riadku
				   mínus obe polovice medzery ho posadí na os obsahu. */
				width: calc(100% - var(--grid-gutter));

				@media (width >= 1024px) {
					/* Polovica medzery je tu VONKAJŠIA medzera, nie výplň: výplň by
					   nechala zaoblenie na vonkajšom okraji a vnútri obrázka
					   by vznikla biela obruba.
					   Šírka = 50 % mínus obe medzery, odsadenie = 2/12 plus jedna. */
					flex: 0 0 calc(50% - var(--grid-gutter));
					max-width: calc(50% - var(--grid-gutter));
					margin-inline: calc(16.6667% + var(--grid-half)) var(--grid-half);
				}
			}

			h3 {
				/* 42 px / 450 / lh 43,68 / ls −0,73 — rovnaká škála ako
				   nadpisy kariet vývojárov na origináli. */
				font-weight: 450;
				font-size: min(2.625em, 11vw);
				line-height: 1.04;
				letter-spacing: -.73px;
				margin: 0;
			}

			p {
				/* Telo textu originálu: 17,5 px / 400 / lh 25,38 / ls 0,18. */
				font-size: 17.5px;
				font-weight: 400;
				line-height: 25.38px;
				letter-spacing: .18px;
				color: var(--theme-surface-on-surface-variant);
				margin: 0;
				text-wrap: pretty;
			}

			img,
			video {
				display: block;
				width: 100%;
				height: auto;
				object-fit: cover;
			}
		}
	}

	@layer co-robime {
		#co-robime {
			width: 100%;
			/* Originál: 0,8 px, farebne to isté ako naša --theme-outline-variant. */
			border-top: 0.8px solid var(--theme-outline-variant);
			padding-block: 72px 120px;

			display: grid;
			grid-template-columns: subgrid;

			@media (width < 1024px) {
				padding-block-end: 80px;
			}

			> *:not(.carousel) {
				grid-column: row;
			}

			/* Hlavička je na origináli 12-stĺpcová mriežka: nadpis v stĺpcoch 1–6,
			   úvodný odstavec pod ním v 9–12. Výplň stĺpca posunie text z `row`
			   na os obsahu, presne ako v origináli. */
			.dev-hlavicka {
				margin-block-end: 60px;

				> * {
					padding-inline: var(--grid-half);
				}

				/* V strednom pásme má predloha 8-stĺpcovú mriežku a nadpis v nej
				   zaberá 6 stĺpcov — teda 3/4 riadku. Odmerané: pri 785 px stĺpec
				   559 z riadku 745, pri 985 px 709 z 945. Úvodný odstavec je tam
				   naopak na celú šírku. Pod 768 px je na celú šírku aj nadpis. */
				@media (width >= 768px) and (width < 1024px) {
					> h2 {
						width: 75%;
					}
				}

				@media (width >= 1024px) {
					display: grid;
					grid-template-columns: repeat(12, 1fr);
					row-gap: 24px;

					> h2 {
						grid-column: 1 / 7;
					}
				}
			}

			/* Nadpis sekcie má na origináli škálu heading-4 — menšiu než základný h2
			   stránky — a láme sa na dva riadky. Škála sa pod zlomom prepína na 28 px;
			   tá istá platí aj pre titulok v obrázku, preto vlastnosť. */
			--heading-4: 28px;
			--heading-4-lh: 29.6px;
			--heading-4-ls: -.28px;

			@media (width >= 1024px) {
				--heading-4: 42px;
				--heading-4-lh: 43.68px;
				--heading-4-ls: -.73px;
			}

			h2 {
				width: auto;
				/* Základné `h2` má `max-width: 25ch`. Nad ~1700 px okna je stĺpec
				   širší než tých 25 znakov, takže by nadpis zaškrtilo na 604 px
				   namiesto 768 — musí sa zrušiť, nestačí prepísať `width`. */
				max-width: none;
				margin: 0;
				font-weight: 450;
				font-size: var(--heading-4);
				line-height: var(--heading-4-lh);
				letter-spacing: var(--heading-4-ls);

				> span {
					display: block;
				}
			}

			/* Úvodný odstavec sekcie. Na origináli sedí v stĺpcoch 9–12 vedľa
			   nadpisu; u nás je pod ním na osi obsahu — nadpis je krátky („Čo
			   robíme") a odstavec dlhší, takže vedľa seba by riadok pôsobil
			   prázdny vľavo a natlačený vpravo.

			   Toto je jediné, čo z krátkeho pokusu o mriežku (2. 9. 2026)
			   zostalo. Pravidlá mriežky odišli spolu s ňou; posuvník nižšie
			   je pôvodný a nedotknutý. */
			.dev-perex {
				max-width: 62ch;
				margin: var(--space-md) 0 0;
				color: var(--theme-surface-on-surface-variant);

				/* Hlavička je nad 1024 px 12-stĺpcová mriežka a nadpis v nej
				   zaberá stĺpce 1–6. Bez tohto riadku odstavec spadol do
				   stĺpca 7 — teda do jednej dvanástiny šírky — a lámal sa po
				   jednom slove. Stĺpce 9–12 sú tie, v ktorých má úvodný
				   odstavec aj predloha. */
				@media (width >= 1024px) {
					grid-column: 9 / 13;
					margin-block-start: 0;
				}
			}

			/* Naraz je vidno jednu ukážku, ďalšia vykúka spoza pravého okraja okna.
			 *
			 * Karusel ide cez celú šírku okna, takže si šírku ukážky musí dopočítať
			 * sám — mriežka `<body>` mu ju nedá. `--ukazka` je 8 z 12 stĺpcov riadku
			 * mínus medzera, pričom riadok je hlavný stĺpec rozšírený o medzeru
			 * a zastropovaný rovnako ako v mriežke. Dáva 838 px pri okne 1425 px
			 * a 1045 px pri 2005 px — v oboch prípadoch zhodne s predlohou.
			 * Ukážke potom stačí `flex-basis: 100%`.
			 */
			.carousel {
				grid-column: fullbleed;
				width: 100%;
				padding-inline: var(--page-inset);

				--ukazka: calc(
					(min(100% - 2 * var(--page-margin), var(--breakpoint-max))
						+ var(--grid-gutter)) * 2 / 3
					- var(--grid-gutter));

				overflow-x: scroll;

				display: flex;
				/* Medzera medzi ukážkami je medzera mriežky — na predlohe 48 px
				   pri 1440 a 40 px pri 785, čo presne sleduje `--grid-gutter`. */
				gap: var(--grid-gutter);

				@media (width >= 1024px) {
					/* Doprava presne toľko, aby posledná ukážka dosadla na os obsahu. */
					padding-inline: var(--page-inset)
						calc(100% - var(--page-inset) - var(--ukazka));
				}

				/* Pod zlomom sa do tohto pásu vojde pilulka so šípkami. */
				@media (width < 1024px) {
					padding-block-end: 68px;
				}

				.developer {
					flex: 0 0 100%;
					overflow: clip;

					/* NA TELEFÓNE VYKUKUJE ĎALŠIA UKÁŽKA (14. 9. 2026).
					 *
					 * Zadávateľ: „v službách vidím len prvú službu, žiadne
					 * tlačidlo na posuvník, aby som si pozrel aj ostatné."
					 *
					 * Šípky tam pritom SÚ a sedia v páse pod posuvníkom, ktorý
					 * im drží `padding-block-end: 68px`. Lenže ten pás je pri
					 * spodku okna a prekrýva ho plávajúca karta konzultácie —
					 * odfotené a overené jej dočasným skrytím.
					 *
					 * Pilulka teda zostáva, ale nemôže byť jediná nápoveda:
					 * je fixná karta, ktorá ju zakryje kedykoľvek, a navyše
					 * `::scroll-button()` pozná zatiaľ len Chrome, takže
					 * v Safari šípky nie sú vôbec.
					 *
					 * Vykúkajúca ukážka funguje všade a nič ju neprekryje.
					 * Pri 375 px má karta 295 px a ďalšia vidno 32 px —
					 * dosť na to, aby bolo jasné, že zoznam pokračuje. */
					@media (width < 768px) {
						flex-basis: 86%;
					}

					figure {
						display: grid;
						margin: 0;
						/* Originál obrázok oreže na 848/488, nie na 16/9. */
						aspect-ratio: 848 / 488;
						border-radius: 36px;
						overflow: hidden;

						> * {
							grid-area: 1 / 1;
						}

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

						figcaption {
							place-self: center start;
							margin-inline-start: 36px;
							/* 280 px ako originál, ale na úzkom obrázku sa titulok nesmie
							   vysypať zaňho — 72 px drží odsadenie zľava aj vzduch sprava. */
							max-width: min(280px, 100% - 72px);
							font-weight: 450;
							font-size: var(--heading-4);
							line-height: var(--heading-4-lh);
							letter-spacing: var(--heading-4-ls);

							/* Pri zapnutom efekte písacieho stroja farbu určuje
							   --typewriter-text-color; bez neho by titulok zostal
							   tmavý na fotke, preto náhrada. */
							@supports not (timeline-trigger-name: --t) {
								color: white;
							}
						}
					}

					/* Text pod obrázkom má na origináli pevných 450 px. */
					> :not(figure) {
						max-width: 450px;
					}

					strong {
						display: block;
						margin-block-start: 24px;
						color: var(--theme-surface-on-surface);
						font-size: 17.5px;
						font-weight: 450;
						line-height: 25.38px;
						letter-spacing: .18px;
					}

					p {
						margin: 0;
						text-wrap: pretty;
						color: var(--theme-surface-on-surface-variant);
						font-size: 17.5px;
						font-weight: 400;
						line-height: 25.38px;
						letter-spacing: .18px;
					}
				}
			}
		}
	}

	/* NAŠE HODNOTY — 1:1 podľa `dexfinity.com/o-nas/`.
	 *
	 * Nad 1024 px je to SCÉNA: plocha s pomerom 1273 : 790, na ktorej sedem
	 * blokov sedí na percentuálnych pozíciách a pozadie nesie stredovú slučku
	 * aj spojnice. Pozície sú v `config/hodnoty.php` a musia sedieť s čiarami
	 * v `img/hodnoty/scena.svg` — keď sa zmení jedno, musí sa aj druhé.
	 *
	 * Scéna sa zapína od 1200 px a sádzba v nej SA ŠKÁLUJE SO ŠÍRKOU.
	 *
	 * Bez škálovania to nešlo. Plocha sa zmenšuje so šírkou obsahu, text nie,
	 * takže si bloky rastú do cesty a nakoniec do slučky — odmerané pri pevnom
	 * písme: okno 1420 malo 51 pixelov slučky priamo na riadkoch textu, 1440
	 * ich malo 37, 1460 deväť a čisto bolo až od 1480.
	 *
	 * Preto `cqw`: veľkosti sú v percentách šírky scény, takže celá kompozícia
	 * je zmenšený model predlohy pri každej šírke.
	 *
	 * Hodnoty sú o niečo nižšie než čistý prepočet z referenčnej scény
	 * (1,26 namiesto 1,375 cqw pri texte, 1,72 namiesto 1,885 pri nadpise).
	 * Rozdiel je odmeraný, nie odhadnutý: pri čistom prepočte dosahoval
	 * posledný riadok Dôvery na slučku — 41 px pri okne 1360, 7 px pri 1240.
	 * Dôvera má najdlhší text a jej blok siaha nad ľavý lalok slučky.
	 *
	 * `min()` drží strop: nad referenčnou šírkou sádzba ďalej nerastie
	 * a zostane na hodnote tokenu. Číslo hodnoty má aj podlahu 12 px.
	 *
	 * Riadkovanie musí byť BEZROZMERNÉ — pevné px z tokenov by pri zmenšenom
	 * písme nechalo riadky rozostúpené. Pomery sú z tých istých tokenov:
	 * telo 25,38/17,5 = 1,45; nadpis-7 25,92/24 = 1,08; popisok rovnako 1,45.
	 */
	/* PARTNERI — rad log pod sekciou služieb.
	 *
	 * Logá majú pomery strán od 2,7 : 1 (Duslo) po 5,1 : 1 (Slovnaft),
	 * takže sa nedajú škálovať na jednu šírku ani na jednu výšku samu
	 * o sebe: pri jednotnej šírke by úzke logá boli obrie, pri jednotnej
	 * výške by tie najširšie zabrali pol riadku.
	 *
	 * Preto DVA stropy naraz — výška 40 px a šírka 170 px — a
	 * `object-fit: contain`. Každé logo sa zmestí do rovnako veľkého
	 * obdĺžnika a uplatní sa ten strop, ktorý naň príde skôr. Odmerané
	 * pri výške 40 px: Slovnaft by mal 202 px, takže ho zastropuje
	 * šírka a klesne na 34 px; Duslo má 108 px a zostane na 40.
	 *
	 * Predpokladom je, že logá sú orezané na obsah — viď poznámka
	 * v `config/partneri.php`. Logo s prázdnom okolo kresby by aj pri
	 * rovnakom boxe vyzeralo menšie.
	 */
	@layer partneri {
		/* Umiestnenie sekcie rieši `.sekcia-doprava` v `@layer sekcia`.
		   Tu by neplatilo: `.sekcia` je v neskoršej vrstve a poradie vrstiev
		   prebíja špecificitu, takže aj `#partneri` by prehralo. */

		/* Veľkosť, váhu aj farbu berie `.nadpis-4` v šablóne — je to tá istá
		   miera, akú majú nadpisy susedných sekcií („Služby", „Najnovšie
		   články"), takže sekcia nevyzerá ako prívesok. */
		.partneri-nadpis {
			margin-block-end: var(--space-2xl);
		}

		.partneri-rad {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			/* OD ĽAVEJ HRANY, NIE NA STRED (13. 9. 2026).
			 *
			 * Do tohto dňa bol rad vycentrovaný, aby posledný zalomený riadok
			 * nemal neúplný „ohryzok" na pravej strane. Zadávateľ chce ľavé
			 * zarovnanie a sekcia zároveň dostala 72 px navyše vpravo, takže
			 * logá dosadnú presne pod nadpis a do riadku sa ich zmestí viac.
			 * Neúplný posledný riadok je teraz vpravo, kde sa stráca. */
			justify-content: flex-start;

			/* Vodorovná medzera je väčšia než zvislá: logá sú široké
			   a nízke, takže bez toho by rad vyzeral ako riedke stĺpce.

			   ZVÄČŠENÉ 7. 9. 2026 na pokyn zadávateľa („loga partnerov —
			   použite väčšie medzery medzi logami"): z 36/48 px na 48/64 px.

			   64 px NIE JE ODHAD. Zvislá medzera na zalamovanie nevplýva, ale
			   vodorovná áno — s každým pixelom navyše hrozí, že posledné logo
			   spadne samo na riadok. Prešiel som šírky radu 905 až 1600 px
			   (t. j. okná od 1000 px vyššie) po jednom pixeli a rátal, pri
			   koľkých vznikne riadok s jediným logom:

			       56 px → 11 šírok · 60 px → 10 · 62 px → 8
			       64 px →  6 šírok · 66 px →  6 · 68 px → 8 · 72 px → 12

			   64 je teda spolu so 66 najlepšie a zároveň viditeľné zväčšenie.
			   Pre porovnanie: pôvodných 48 px malo 11 zlých šírok, takže rad je
			   po zmene aj o niečo stabilnejší než predtým. */
			gap: var(--space-2xl) var(--partner-medzera, 64px);

			margin: 0;

			/* Výplň nahor aj nadol je rezerva na vlnenie nižšie: logo sa
			   hýbe o ±25 % svojej výšky. Najvyššie logo má 69 px, takže
			   rezerva musí byť aspoň 18 px — bez nej by horný rad pri
			   hornej úvrati naliezal na nadpis. */
			padding: 18px 0;

			list-style: none;
		}

		.partner {
			display: flex;
			align-items: center;
			justify-content: center;

			/* Stopa je presne výška, ktorú tomuto logu spočítal
			   `App\Support\Partneri` — príde inline ako `--vyska`.

			   NIE JEDNA VÝŠKA PRE VŠETKY. Pomery strán idú od 1,00 : 1
			   (Rotunda, kruh) po 5,06 : 1 (Slovnaft, široký nápis), takže
			   pri spoločnej výške by široký nápis zabral päťnásobnú plochu
			   oproti kruhu a rad by vyzeral ako pár veľkých a pár drobných.
			   Výška sa preto počíta z pomeru strán tak, aby plocha vyšla
			   podobná — čísla aj stropy sú v tej triede.

			   Stopa je definitívna (nie `auto`), inak by rad pri vlnení
			   poskakoval. */
			block-size: calc(var(--vyska, 48px) * var(--partner-mierka, 1));

			/* Tá istá vlna, akou sa hýbe pás ikoniek vyššie — rovnaká
			   dĺžka (4 s), rovnaké striedanie smeru aj rovnaký rozostup
			   po piatich prvkoch, takže obidva rady bijú v jednom rytme.

			   Výchylka je ale menšia: ikonky majú ±75 % v páse vysokom
			   24 em, kým logo je do 60 px v bežnom toku textu. ±75 % by tu
			   bolo ±45 px — logá by preskakovali cez nadpis aj cez seba
			   navzájom v zalomených radoch. ±25 % sa číta ako to isté
			   jemné kolísanie a zmestí sa do výplne radu.

			   `translate` (nie `top`) zámerne: nemení tok, takže flex
			   riadok sa pri vlnení neprepočítava. */
			animation: partner-vlna 4s ease infinite alternate;
			animation-delay: calc(mod(sibling-index(), 5) * -1s);
		}

		/* Výchylka je premenná, aby sa dala stiahnuť na úzkych oknách —
		   dôvod je pri `--partner-vychylka` v mobilnom pravidle nižšie. */
		@keyframes partner-vlna {
			from {
				translate: 0 var(--partner-vychylka, 25%);
			}

			to {
				translate: 0 calc(var(--partner-vychylka, 25%) * -1);
			}
		}

		/* Kto má vypnuté animácie, dostane rad narovno. */
		@media (prefers-reduced-motion: reduce) {
			.partner {
				animation: none;
			}
		}

		/* Logo je od 4. 9. 2026 ODKAZ na oficiálny web partnera.
		 *
		 * `display: block` a plná výška: `.partner-logo` má `block-size: 100%`
		 * a to sa počíta z obalu. Keby odkaz zostal riadkový, obrázok by nemal
		 * o čo oprieť výšku a stopa spočítaná v `App\Support\Partneri` by
		 * prestala sedieť.
		 *
		 * `max-inline-size` sa dedí z rovnakého dôvodu — poistka pre úzke okno
		 * musí platiť na obale, nie až na obrázku vnútri.
		 *
		 * PRI PREJDENÍ MYŠOU SA NEDEJE NIC — rozhodnutie zadávateľa zo 4. 9. 2026.
		 * Krátko tu bolo stlmenie na 60 %, ale v rade, ktorý sa už aj tak vlní,
		 * je každá ďalšia odozva navyše. Že je logo klikateľné, prezradí kurzor.
		 *
		 * OHNISKO ZOSTÁVA a nie je to to isté: kto ovláda stránku klávesnicou,
		 * inak nevie, kde v rade dvadsiatich jedna log práve stojí. Je to
		 * požiadavka prístupnosti, nie ozdoba. */
		.partner-odkaz {
			display: block;
			block-size: 100%;
			max-inline-size: 100%;

			&:focus-visible {
				outline: 2px solid var(--theme-surface-on-surface);
				outline-offset: 6px;
				border-radius: 2px;
			}
		}

		.partner-logo {
			/* Logo vyplní stopu na výšku a šírku si dopočíta samo zo svojho
			   pomeru strán — o to celé ide, stopa je už na mieru tomuto
			   obrázku. Šírku preto NEZASTROPOVAŤ: strop by pomer strán
			   pokazil a stopa okolo by prestala sedieť. */
			block-size: 100%;
			inline-size: auto;

			/* Poistka pre veľmi úzke okno: logo nikdy nesmie prerásť rad. */
			max-inline-size: 100%;

			object-fit: contain;
		}

		/* Na úzkom okne sa rad zmestí ťažko, tak logá zmenšíme jedným
		   číslom — `App\Support\Partneri` počíta desktopovú veľkosť a mierka
		   drží pomery medzi logami nedotknuté. Medzery idú dole s nimi,
		   inak by z troch riadkov boli ôsme. */
		/* ÚZKY DESKTOP (okno pod 1000 px, teda rad užší ako 905 px). Logá sú
		   ešte v plnej veľkosti, ale 64 px medzi nimi tu už pridá celý riadok
		   navyše — odmerané: pri rade 705 px je to 8 riadkov proti 9. Medzera
		   sa preto vracia na pôvodných 48 px. */
		@media (width < 1000px) {
			.partneri-rad {
				--partner-medzera: var(--space-2xl);
			}
		}

		@media (width < 768px) {
			.partneri-rad {
				--partner-mierka: .58;

				/* LOGÁ SA PRI VLNENÍ TAKMER DOTÝKALI (14. 9. 2026).
				 *
				 * Zadávateľ to nahlásil ako drobnosť a nechal riešenie na mne.
				 * Odmerané pri 375 px: najmenšia zvislá medzera medzi logami
				 * v susedných riadkoch klesla počas vlnenia na 5 px.
				 *
				 * Dôvod: vlna hýbe každým logom o ±25 % jeho výšky, takže dve
				 * logá nad sebou sa k sebe priblížia o dvojnásobok výchylky.
				 * Na širokom okne to nevadí, lebo riadkový odstup je 48 px
				 * a riadky sú dva. Na telefóne je odstup 16 px a riadkov je
				 * sedem, takže sa stretne oveľa viac dvojíc.
				 *
				 * Riešené z oboch strán: polovičná výchylka a väčší odstup.
				 * Samotné zväčšenie odstupu by rad zvisle natiahlo, samotné
				 * stiahnutie výchylky by nestačilo (16 − 10 = 6 px). */
				--partner-vychylka: 12%;

				gap: var(--space-lg) var(--space-lg);
				padding-block: 12px;
			}
		}

		/* Najužšie telefóny majú vlastnú, menšiu mierku. Pri 320 px má obsah
		   len 273 px a dve najširšie značky (Slovnaft, ASBIS) sú pri mierke
		   .58 široké 140 px — dve vedľa seba aj s medzerou 24 px potrebujú
		   304 px, takže každá zostala sama na riadku. Sťahovanie medzery to
		   nezachráni (aj pri 16 px treba 296 px), musí ísť dole mierka.

		   .50 dáva najširšiemu logu 120,5 px a dvojici 265 px — vojde sa
		   s rezervou. Zvislo je to 34,5 px, teda toľko, koľko mal celý rad
		   pred zväčšením o 15 %.

		   Zlom je 360 px, nie 375: pod ním sú už len staré iPhony SE
		   a úzke Androidy, a 360 px si má nechať väčšiu mierku. */
		@media (width < 360px) {
			.partneri-rad {
				--partner-mierka: .5;

				gap: var(--space-md) var(--space-lg);
				padding-block: 9px;
			}
		}
	}

	@layer hodnoty {
		#hodnoty {
			display: grid;
			grid-template-columns: subgrid;
			padding-block: var(--sekcia-rytmus);
			border-top: 0.8px solid var(--theme-outline-variant);

			> * {
				grid-column: main;
			}
		}

		.hodnoty-hlavicka {
			margin-block-end: var(--space-2xl);
		}

		/* Štítok nad nadpisom. Veľkosť je náš `--popisok`, nie číslo natvrdo —
		   inak by pod 1024 px zostal na 14,5 px, kým zvyšok webu ide na 15.
		   Verzálky, preloženie a tučnosť sú z predlohy; je to jediné miesto na
		.hodnoty-perex {
			max-width: 62ch;
			margin-block-start: var(--space-md);
		}

		/* Poradové číslo. Rovnako `--popisok`, nie číslo natvrdo. */
		.hodnota-cislo {
			margin: 0 0 var(--space-sm);
			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: var(--popisok-preloz);
			font-weight: var(--vaha-telo);
			color: var(--theme-surface-on-surface-variant);
			font-variant-numeric: tabular-nums;
		}

		.hodnota-nazov {
			margin: 0 0 var(--space-sm);
			font-size: var(--nadpis-7-velkost);
			line-height: var(--nadpis-7-riadok);
			letter-spacing: var(--nadpis-7-preloz);
			font-weight: var(--vaha-nadpis-7);
			color: var(--theme-surface-on-surface);
		}

		/* Popis hodnoty je PRÓZA, nie popisok — preto `--telo`, rovnako ako
		   text v `#co-robime` alebo perex vo `#vyzva`. Predloha ho má menší,
		   ale tá má celú sekciu ako obrázok; u nás sa to má čítať. */
		.hodnota-text {
			margin: 0;
			font-size: var(--telo-velkost);
			line-height: var(--telo-riadok);
			letter-spacing: var(--telo-preloz);
			font-weight: var(--vaha-telo);
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;
		}

		/* V scéne sa sádzba škáluje so šírkou plochy — viď komentár vyššie.
		   Mimo scény (zoznam pod 1200 px) platia pravidlá s tokenmi. */
		@container (width > 0) {
			.hodnota-cislo {
				font-size: max(12px, min(var(--popisok-velkost), 1.139cqw));
				line-height: 1.45;

				/* Odsadenia MUSIA byť v `em`, nie v `--space-*`.
				   Pevných 8 px sa neškáluje, takže pri menšej scéne bol blok
				   pomerovo vyšší než v predlohe a text dosahoval do slučky —
				   odmerané, pri okne 1400 px 39 pixelov na riadkoch textu, hoci
				   samotné písmo už škálované bolo. 0,55em = 8/14,5. */
				margin-block-end: 0.55em;
			}

			.hodnota-nazov {
				font-size: min(var(--nadpis-7-velkost), 1.72cqw);
				line-height: 1.08;
				margin-block-end: 0.33em;
			}

			.hodnota-text {
				font-size: min(var(--telo-velkost), 1.26cqw);
				line-height: 1.45;
			}
		}

		@media (width >= 1200px) {
			.hodnoty-scena {
				position: relative;
				aspect-ratio: 1273 / 790;

				/* Aby sa dalo sádzbu merať v percentách ŠÍRKY SCÉNY (`cqw`),
				   nie okna. Okno je širšie než scéna a pomer medzi nimi sa
				   s breakpointmi mení. */
				container-type: inline-size;

				/* Slučka a spojnice. `100% 100%` a `preserveAspectRatio="none"`
				   v samotnom SVG idú spolu: scéna sa naťahuje s obsahom a čiary
				   sa musia naťahovať s ňou, inak prestanú dosadať na text. */
				background: url("../img/hodnoty/scena.svg") 0 0 / 100% 100% no-repeat;
			}

			.hodnota {
				position: absolute;
				top: var(--y);

				/* 232 px je rozmer predlohy (ich bloky majú 214 až 238) a NEDÁ
				   sa zväčšiť: sloty sú presne tie, pre ktoré sú nakreslené
				   spojnice, a slučka je hneď vedľa. Pri 22 % už slučka viedla
				   cez text — odmerané, jeden až päť blokov podľa šírky okna.
				   Riadky sú preto pri našom `--telo` kratšie než u nich. */
				width: 18.2%;
			}

			/* Blok visí na svojej linke ĽAVÝM alebo PRAVÝM okrajom.

			   Nie je to detail: v ich `Group-410` (Húževnatosť) zaberá text
			   x 277 až 576 z 587, teda pravú polovicu obrázka. Prvá verzia mala
			   všetko zarovnané doľava a slučka viedla priamo cez texty vpravo —
			   odmerané, 1245 a 1958 modrých pixelov pod textom. */
			.hodnota-l { left: var(--x); }
			.hodnota-r { right: var(--x); }
		}

		/* Pod zlomom obyčajný zoznam. Bez pozadia, s linkou nad každou
		   hodnotou — tá jediná zo scény prežije aj tu. */
		@media (width < 1200px) {
			.hodnoty-scena {
				display: grid;
				gap: var(--space-xl);
			}

			.hodnota {
				padding-block-start: var(--space-md);
				border-top: 0.8px solid var(--theme-outline-variant);

				/* V zozname sa číta zhora nadol, takže hodnoty musia ísť
				   01 až 07. V DOM-e sú v poradí scény — tam ich drží
				   poloha, nie postupnosť. */
				order: var(--poradie);
			}
		}
	}

	/* RECENZIE NA GOOGLE — súhrn hodnotenia hneď za radom partnerov.
	   Logá povedia KTO, recenzie povedia ČO si o tom mysleli. */
	@layer recenzie {
		#recenzie {
			/* Sekcia je nízka zámerne — je to jedno číslo, nie kapitola.
			   Základné pravidlo sekcií dáva výšku okna, tu je to zbytočné. */
			min-height: auto;

			text-align: center;
		}

		.recenzie-nadpis {
			margin-block-end: var(--space-lg);
		}

		/* ODZNAK. Tmavá pilulka so značkou vľavo a hodnotením vpravo — tvar
		   podľa predlohy, ktorú poslal zadávateľ.

		   TMAVÝ PODKLAD JE FUNKCIA, NIE VKUS. Farebné logo Googlu na bielej
		   stránke pláva; na tmavom podklade drží pokope a odznak funguje ako
		   pečiatka. Nadväzuje tým aj na tmavý panel `#vyzva` vyššie, takže to
		   na monochromatickej stránke nie je cudzí prvok.

		   `inline-flex` a `width: fit-content`: odznak má byť široký presne
		   podľa obsahu. Roztiahnutý cez celú sekciu (na 1920 px je to 1600 px)
		   by nevyzeral ako odznak, ale ako ďalší pás stránky. */
		.recenzie-odznak {
			/* `flex`, nie `inline-flex`: `margin-inline: auto` centruje len
			   blokové prvky, na riadkovom sa vypočíta na nulu a odznak sedel
			   pri ľavom okraji. */
			display: flex;
			inline-size: fit-content;
			max-inline-size: 100%;
			margin-inline: auto;

			align-items: center;
			gap: var(--space-sm);

			/* `wrap` je poistka pre úzke okno: radšej dva riadky v odznaku než
			   odznak vytlačený zo stránky. */
			flex-wrap: wrap;
			justify-content: center;

			padding: var(--space-sm) var(--space-md);
			border-radius: var(--shape-corner-lg);
			background: var(--theme-surface-inverse-surface);
			color: var(--theme-surface-inverse-on-surface);

			text-decoration: none;

			/* Odznak je odkaz len vtedy, keď je vyplnená adresa — vtedy má
			   reagovať. Keď je to `<div>`, `:hover` sa nemá čoho chytiť
			   a prechod nič nerobí. */
			transition: .15s opacity ease-out;

			&:is(a):hover,
			&:is(a):focus-visible {
				opacity: 0.88;
			}
		}

		.google-g {
			inline-size: 40px;
			block-size: 40px;
			flex: none;
		}

		.recenzie-odznak-obsah {
			display: flex;
			flex-direction: column;
			gap: 0.1em;
		}

		/* Číslo a hviezdičky VEDĽA SEBA. Pod sebou to čítalo ako tabuľka,
		   vedľa seba ako odznak. */
		.recenzie-suhrn {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
		}

		/* Číslo je to hlavné, preto nesie váhu aj veľkosť. Na tmavom podklade
		   je biele — dedí `color` z odznaku, takže sa tu nenastavuje. */
		.recenzie-cislo {
			font-size: 1.75em;
			font-weight: 600;
			line-height: 1;
		}

		/* Názov zdroja. VERZÁLKY s rozpalom, ako v predlohe — v odznaku je to
		   pätička, nie veta, a rozpal ju odlíši od čísla nad ňou. */
		.recenzie-odznak-nazov {
			font-size: 0.8em;
			font-weight: 600;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			line-height: 1;
		}

		/* Tlačidlo. Vzhľad si berie z globálneho `@layer button` cez triedu
		   `.cta`, tu sa rieši len poloha. */
		.recenzie-akcie {
			margin-block-start: var(--space-md);
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-sm);
		}

		/* HVIEZDIČKY — dve vrstvy nad sebou.
		   Spodná je päť prázdnych, vrchná je päť plných orezaných na podiel
		   hodnotenia (`--podiel` počíta šablóna). Pri 5,0 je orez 100 %, ale
		   zápis počíta aj s tým, že hodnotenie raz klesne: pri 4,7 sa štvrtá
		   hviezda oreže na 70 % a v CSS netreba meniť nič. */
		.recenzie-hviezdy {
			position: relative;
			display: inline-flex;
		}

		/* OBE VRSTVY MUSIA BYŤ `flex`, nie riadkové.
		   Keď boli `<svg>` riadkové prvky, sadali na účiar textu a spodná
		   vrstva mala inú výšku aj polohu než vrchná — odmerané: prázdna
		   vrstva 20 px na y = 565, plná 24 px na y = 556, teda prekryv sedel
		   o 9 px vyššie a hviezdy sa nekryli. Vo `flex` kontajneri sa na účiar
		   nič nezarovnáva a obe vrstvy vyjdú rozmerovo rovnako. */
		.recenzie-hviezdy-prazdne,
		.recenzie-hviezdy-plne {
			display: flex;
		}

		/* Prázdne hviezdičky sú v odznaku na TMAVOM podklade, takže `--theme-outline`
		   (12 % čiernej) by na nich nebolo vidno vôbec. Je to zoslabený biely
		   závoj, nie sémantická farba — preto hodnota a nie token.
		   Pri 5,0 ich aj tak nevidno, ukážu sa až keby hodnotenie kleslo. */
		.recenzie-hviezdy-prazdne {
			color: rgba(255, 255, 255, .28);
		}

		.recenzie-hviezdy-plne {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;

			/* Orez zľava doprava. `overflow: hidden` je to, čo hviezdu naozaj
			   reže — šírka sama by ju len zmenšila. */
			inline-size: calc(var(--podiel, 1) * 100%);
			overflow: hidden;
		}

		.hviezda {
			/* `currentColor` je dôvod, prečo sú obe vrstvy ten istý partial:
			   líšia sa iba farbou textu, kresba je jedna. */
			fill: currentColor;
			inline-size: 24px;
			block-size: 24px;

			/* Bez tohto by sa hviezdy v orezanej vrstve zmestili do zúženej
			   šírky tým, že sa ZMENŠIA — a orez by sa nekonal. */
			flex: none;
		}

		/* GOOGLOVSKÁ ZLATÁ. `#FBBC04` je farba hviezdičiek v hodnoteniach na
		   Google — vybraté 3. 9. 2026 na želanie zadávateľa. Do 3. 9. tu bola
		   čierna, aby zostal web monochromatický; zadávateľ chce, aby recenzia
		   bola na prvý pohľad rozpoznateľná ako googlovská, a to je legitímne:
		   zlaté hviezdičky číta človek ako hodnotenie bez čítania textu.

		   KONTRAST JE NÍZKY A JE TO V PORIADKU — ale len preto, že hviezdičky
		   nie sú jediný nosič informácie. Odmerané na bielom podklade: 1,71 : 1,
		   teda hlboko pod 3 : 1, ktoré WCAG 1.4.11 žiada od grafiky nesúcej
		   význam. Tá istá farba je na bielom aj u Googlu, takže to nie je naša
		   odchýlka — ale nespoliehame sa na ňu:

		     — hodnotenie je vypísané číslicami vedľa, vo veľkosti 3em;
		     — `.sr-only` v šablóne hovorí „Hodnotenie 5,0 z 5“;
		     — pod tým je „z 3 recenzií na Google“.

		   Kto zlatú na bielom nerozozná, dostane to isté textom. Preto sa tá
		   informácia nestráca a WCAG 1.4.1 (nespoliehať sa na farbu) je splnené.
		   Keby hviezdičky mali raz zostať samy, bez čísla, musí farba stmavnúť.

		   Prázdne hviezdičky zostávajú `--theme-outline`; pri 5,0 ich aj tak
		   nevidno, ukážu sa až keby hodnotenie kleslo. */
		.recenzie-hviezdy-plne {
			color: #FBBC04;
		}

		/* Počet recenzií pod odznakom. V odznaku podľa predlohy nie je, ale
		   zamlčať sa nemá — viď komentár v šablóne. */
		.recenzie-popis {
			margin-block-start: var(--space-xs);
			color: var(--theme-surface-on-surface-variant);
			font-size: 0.9em;
		}

		.recenzie-odkaz {
			color: inherit;
			text-underline-offset: 0.2em;
		}

		/* JEDNOTLIVÉ RECENZIE. Kým v `config/recenzie.php` nie sú, sekcia
		   skončí súhrnom a tento blok sa nevykreslí vôbec.

		   `auto-fit` a nie pevný počet stĺpcov: recenzie sú zatiaľ tri, ale
		   pribúdať budú po jednej a mriežka sa nemá prepisovať pri každej. */
		.recenzie-zoznam {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
			gap: var(--space-md);
			margin-block-start: var(--space-xl);
			text-align: start;
		}

		.recenzia {
			padding: var(--space-md);
			border: 0.8px solid var(--theme-outline-variant);
			/* 8 px — rovnaké zaoblenie ako karta konzultácie. `md` v projekte
			   nie je, tokeny sú xs/sm/lg. */
			border-radius: var(--shape-corner-sm);

			display: flex;
			flex-direction: column;
			gap: var(--space-sm);
		}

		/* `<blockquote>` má v prehliadači vlastné odsadenie — preč s ním,
		   karta si odsadenie rieši výplňou. */
		.recenzia-text {
			margin: 0;
			color: var(--theme-surface-on-surface);
		}

		.recenzia-autor {
			margin-block-start: auto;
			display: flex;
			justify-content: space-between;
			gap: var(--space-sm);
			color: var(--theme-surface-on-surface-variant);

			/* `<cite>` je v prehliadači kurzívou. Meno človeka nie je názov
			   diela, takže kurzíva preč. */
			cite {
				font-style: normal;
			}
		}
	}

	/* Latest Blogs — rozmery odmerané na antigravity.google.
	   Štvorcový obrázok so zaoblením 16 px, medzera medzi kartami je celá
	   medzera mriežky. Počet viditeľných kariet sa mení so šírkou okna — viď
	   `.blog-slider`. Sekcia NIE JE na celú výšku okna — originál je vysoký
	   podľa obsahu, preto `min-height: auto` proti základnému pravidlu. */
	@layer blogs {
		#blogs {
			/* Obsahujúci blok pre šípky karuselu — bez toho by ich orezala
			   posuvná plocha, viď komentár pri `::scroll-button`. */
			position: relative;

			/* Predloha má 72 px zhora a spodok rieši vonkajšou medzerou
			   (120 px na desktope, 48 px na mobile). Výplň zdola tu musí
			   zostať aspoň taká, aby sa pod karty zmestili šípky karuselu. */
			padding-block: 72px 6rem;
			margin-block-end: 120px;

			@media (width < 1024px) {
				margin-block-end: 48px;
			}

			overflow-x: clip;

			display: grid;
			grid-template-columns: subgrid;

			> * {
				grid-column: main;
			}
		}

		.blogs-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 1rem;
			margin-block-end: 60px;
		}

		.blogs-title {
			/* `heading-4` originálu, nie základný h2 — preto sa prepisuje aj
			   šírka, ktorú základné pravidlo obmedzuje na 50 %. */
			font-size: min(2.625em, 11vw);
			font-weight: 450;
			line-height: 1.04;
			letter-spacing: -.73px;
			margin: 0;
			width: auto;
			max-width: none;
		}

		.blog-slider {
			display: grid;
			grid-auto-flow: column;

			/* Počet kariet na šírku obsahu. Odmerané na predlohe na štyroch
			   šírkach: 1425 → 4 karty po 284 px, 985 → 3 po 275, 785 → 2 po 332,
			   390 → 1 na 358. Medzera je vždy celá medzera mriežky.
			   Zlom 834 px je vlastný zlom predlohy, nie preklep. */
			grid-auto-columns: calc((100% - 3 * var(--grid-gutter)) / 4);
			gap: var(--grid-gutter);

			@media (width <= 1024px) {
				grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3);
			}

			@media (width <= 833px) {
				grid-auto-columns: calc((100% - var(--grid-gutter)) / 2);
			}

			/* Na telefóne vykukuje ďalší článok — do 14. 9. 2026 tu bolo
			   `100%`, takže bola vidieť presne jedna karta a nič nenaznačovalo,
			   že sú tam ďalšie. Zadávateľ to nahlásil rovnako ako pri službách.
			   Dôvody a meranie sú pri `.developer` v `@layer product`. */
			@media (width <= 767px) {
				grid-auto-columns: 86%;
			}

			overflow-x: auto;
			scrollbar-width: none;
			overscroll-behavior-x: contain;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;

			> * {
				scroll-snap-align: start;
			}

			/* Šípky. Originál ich má pod kartami vľavo, 42×36, priehľadné
			   a plne zaoblené — nie po stranách karuselu ako pri vývojároch.
			   Vlastné kotviace meno je nutné: `--carousel` už patrí karuselu
			   vývojárov a dve rovnaké mená by si tlačidlá pomiešali. */
			anchor-name: --blogs;

			/* Šípky sedia POD kartami, vľavo.
			 *
			 * `position: absolute` s `#blogs` ako obsahujúcim blokom, NIE
			 * `position: fixed` s `position-area: bottom`. Prvá verzia to mala
			 * tak a šípky liezli do textu „Čítať článok": pseudoprvky sú deťmi
			 * posuvnej plochy, ktorá má `overflow-x: auto`, takže všetko pod jej
			 * spodnou hranou sa orezalo a z tlačidiel zostal len pás na okraji
			 * poslednej karty. Absolútne umiestnenie voči sekcii z toho orezania
			 * vystúpi, lebo obsahujúci blok je NAD posuvnou plochou.
			 *
			 * `anchor()` hovorí presne to, čo treba: pod spodnú hranu posuvnej
			 * plochy, zarovnané na jej ľavý okraj. Pri zmene výšky kariet sa
			 * posunie samo.
			 */
			&::scroll-button(*) {
				position: absolute;
				position-anchor: --blogs;
				top: calc(anchor(--blogs bottom) + var(--space-lg));
				left: anchor(--blogs left);

				font-family: "Material Symbols Outlined";
				font-size: 1.5em;
				color: var(--theme-surface-on-surface);
				background: none;
				border: none;
				border-radius: 999px;
				inline-size: 42px;
				block-size: 36px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				transition: background .15s ease-out, opacity .25s ease;
			}

			&::scroll-button(*):hover {
				background: var(--theme-button-states-hovered);
			}

			&::scroll-button(*):disabled {
				cursor: not-allowed;
				opacity: 0.25;
			}

			&::scroll-button(left) {
				content: 'keyboard_arrow_left' / 'Predchádzajúce';
			}

			&::scroll-button(right) {
				content: 'keyboard_arrow_right' / 'Ďalšie';
				/* Vedľa ľavej šípky, o jej šírku. `margin-inline-start` tu už
				   nestačí — poloha je daná `left`, nie tokom. */
				left: calc(anchor(--blogs left) + 42px);
			}
		}

		.blog-card {
			display: block;
			text-decoration: none;
			color: inherit;
		}

		.blog-image {
			aspect-ratio: 1;
			border-radius: 16px;
			overflow: hidden;
			margin-block-end: var(--space-lg);

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
				transition: scale .3s var(--ease-out-cubic);
			}
		}

		.blog-card:hover .blog-image img,
		.blog-card:focus-visible .blog-image img {
			scale: 1.03;
		}

		.blog-title {
			font-size: 28px;
			font-weight: 450;
			line-height: 30.24px;
			letter-spacing: -.1px;
			color: var(--theme-surface-on-surface);
			margin: 0 0 var(--space-md);
			text-wrap: pretty;
		}

		.blog-meta {
			display: flex;
			flex-direction: row;
			gap: var(--space-md);
		}

		.blog-meta span,
		.blog-more {
			font-size: 14.5px;
			font-weight: 400;
			line-height: 21.02px;
			letter-spacing: .16px;
			color: var(--theme-surface-on-surface-variant);
		}

		.blog-more {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			gap: .25em;
			margin-block-start: var(--space-md);

			transition: gap .15s ease-in;

			/* Šípka rovnakou technikou ako pri „Pozrieť prípad" v sekcii vývojárov. */
			&::after {
				content: 'arrow_forward';
				font-family: 'Material Symbols Outlined';
				font-size: 18px;
				line-height: 1;
				font-weight: normal;
				font-style: normal;
				letter-spacing: normal;
				text-transform: none;
				white-space: nowrap;
				word-wrap: normal;
				direction: ltr;
				-webkit-font-feature-settings: 'liga';
			}
		}

		.blog-card:hover .blog-more,
		.blog-card:focus-visible .blog-more {
			gap: .5em;
		}
	}

	/* Stránka článku. V pene neexistovala — pen nemal detail obsahu.
	   Drží sa tej istej typografickej škály ako zvyšok webu, len s väčším
	   riadkovaním: 25,38 px sedí na krátke popisy kariet, na dlhé čítanie je
	   tesné. */
	@layer article {
		/* Telo článku je 12-stĺpcová mriežka a text v nej sedí v stĺpcoch 3–10,
		 * teda 8 z 12 — po dva prázdne z každej strany. Pri okne 1426 px to dáva
		 * mieru 839 px, presne ako predloha.
		 *
		 * Do 10. 8. 2026 bol text zarovnaný vľavo cez celú šírku obsahu (715 px)
		 * a nadpis navyše stlačený na 421 px cez `max-width: 40ch`. Vyzeralo to
		 * nevyvážene — text vľavo, prázdno vpravo — a dlhý riadok sa aj horšie
		 * číta.
		 */
		#clanok {
			min-height: auto;
			grid-column: main;

			display: grid;
			grid-template-columns: repeat(12, 1fr);
			column-gap: var(--grid-gutter);

			/* Hlavička je `position: fixed` — bez odsadenia by pod ňou zmizol
			   nadpis. 150 px je odmerané na predlohe. */
			padding-block: 150px 6rem;

			> * {
				grid-column: 3 / span 8;
			}

			/* Titulný obrázok ide cez celú šírku obsahu, nie cez úzku mieru. */
			> .clanok-obal {
				grid-column: 1 / -1;
			}

			/* Pod zlomom by z 8 z 12 stĺpcov zostal prúžok, takže všetko ide na
			   celú šírku. Predloha tu to isté pravidlo necháva a text jej vybehne
			   k pravému okraju — overené pri 785 px: kontajner 40–745, text
			   206–745. To zámerne nekopírujeme, je to zjavná chyba. */
			@media (width < 1024px) {
				> *,
				> .clanok-obal {
					grid-column: 1 / -1;
				}
			}
		}

		/* Hlavička na stred, telo zarovnané vľavo — tak to má predloha a dáva to
		   zmysel: nadpis sa pozerá, text sa číta. */
		.clanok-hlavicka {
			text-align: center;
			margin-block-end: 60px;

			h1 {
				/* Základné `h1`/`h2` má na desktope `width: 50%`; v článku by
				   nadpis stlačilo na polovicu miery. */
				width: auto;
				max-width: none;
				margin: 0 0 24px;

				/* Škála `heading-4` predlohy: 42 px nad zlomom, 28 px pod ním.
				   Bez toho druhého by na telefóne zostal 42 px nadpis, ktorý
				   zaberie pol obrazovky. */
				font-size: 28px;
				line-height: 29.6px;
				letter-spacing: -.28px;

				@media (width >= 1024px) {
					font-size: 42px;
					line-height: 43.68px;
					letter-spacing: -.73px;
				}

				font-weight: 450;
				color: var(--theme-surface-on-surface);
				text-wrap: balance;
			}
		}

		.clanok-meta {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-md);
			margin-block-end: 24px;

			font-size: 14.5px;
			line-height: 21.02px;
			letter-spacing: .16px;
			color: var(--theme-surface-on-surface-variant);
		}

		.clanok-perex {
			margin: 0;
			font-size: 17.5px;
			line-height: 25.38px;
			letter-spacing: .18px;
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;
		}

		.clanok-obal {
			border-radius: 36px;
			overflow: hidden;

			img {
				display: block;
				width: 100%;

				/* Pevný pomer, nie `height: auto`.
				 *
				 * Predloha má na titulnú fotku článku širokú verziu obrázka
				 * a na kartu v zozname štvorcovú. My držíme jeden obrázok pre
				 * oboje, takže štvorcová fotka cez celú šírku obsahu vyrobila
				 * pás 1282 × 1282 px — obrazovku a pol samého obrázka.
				 * Orezanie na 16:9 to rieši nezávisle od toho, aký pomer má
				 * dodaná fotka; karta si ju rovnakým spôsobom oreže na štvorec.
				 */
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}
		}

		.clanok-telo {
			margin-block-start: 72px;

			> * {
				margin-block: 0 16px;
			}
		}

		.blok-nadpis {
			/* Základné „h2" má na desktope width: 50% a max-width: 25ch —
			   v článku by to dlhší nadpis zbytočne stlačilo. */
			width: auto;
			max-width: none;
			margin-block: 36px 16px;
			font-size: 32px;
			font-weight: 450;
			line-height: 1.1;
			letter-spacing: normal;
			color: var(--theme-surface-on-surface);
			text-wrap: balance;

			/* Nadpis hneď za nadpisom nepotrebuje veľkú medzeru. */
			&:first-child {
				margin-block-start: 0;
			}
		}

		.blok-odsek {
			font-size: 16px;
			font-weight: 400;
			line-height: 1.6;
			letter-spacing: normal;
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;
		}

		/* Zvýraznené slovo je v texte tlmené — nesmie mať silu nadpisu.
		   450 je hmotnosť, ktorú predloha používa na nadpisy; oproti 400 je
		   rozdiel jemný, ale vidno ho. Zosvetlenie farby na plnú robí zvyšok:
		   zvýraznené vystúpi, odsek zostane pokojný. */
		.blok-odsek strong,
		.blok-zoznam strong {
			font-weight: 450;
			color: var(--theme-surface-on-surface);
		}

		.blok-zoznam {
			/* Základný reset zhasína odrážky všetkým zoznamom na stránke —
			   navigácia, päta aj karty sú zoznamy bez značiek. V článku ich
			   naopak potrebujeme, takže sa tu vracajú. */
			list-style: disc;
			margin-block: 0 16px;
			padding-inline-start: 1.25em;

			&:is(ol) {
				list-style: decimal;
			}

			font-size: 16px;
			line-height: 1.6;
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;

			li {
				list-style: inherit;
				margin-block-end: 12px;

				&:last-child {
					margin-block-end: 0;
				}
			}
		}

		.blok-obrazok {
			margin-block: 3rem;

			img {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 1.5em;
			}

			figcaption {
				margin-block-start: var(--space-sm);
				font-size: 14.5px;
				line-height: 21.02px;
				color: var(--theme-surface-on-surface-variant);
			}
		}

		.blok-citat {
			margin-block: 3rem;
			padding-inline-start: var(--space-lg);
			border-inline-start: 2px solid var(--theme-outline);

			blockquote {
				margin: 0;
				font-size: 24px;
				font-weight: 450;
				line-height: 1.3;
				letter-spacing: -.1px;
				color: var(--theme-surface-on-surface);
			}

			figcaption {
				margin-block-start: var(--space-sm);
				font-size: 14.5px;
				color: var(--theme-surface-on-surface-variant);
			}
		}

		.blok-kod {
			margin-block: 2rem;
			padding: var(--space-lg);
			border-radius: 1em;
			background: var(--theme-surface-surface-container-high);
			overflow-x: auto;

			code {
				font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
				font-size: 15px;
				line-height: 1.6;
				color: var(--theme-surface-on-surface);
			}
		}

		.blok-cta {
			margin-block: 2.5rem;
		}

		.clanok-stitky {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-sm);
			margin-block-start: 4rem;
			padding: 0;
			list-style: none;

			li {
				padding: var(--space-xs) var(--space-md);
				border-radius: 999px;
				background: var(--theme-nav-button);
				font-size: 14.5px;
				color: var(--theme-surface-on-surface-variant);
			}
		}
	}

	/* Päta — 1:1 podľa antigravity.google, rozmery odmerané na živej stránke.
	   Stĺpcový model je prevzatý z originálu doslova: flex so základňou
	   v percentách, výplň 24 px na stĺpec a záporná vonkajšia medzera riadku.
	   Vlastná mriežka by dala iné šírky, lebo originál má medzery vnútri
	   stĺpcov, nie medzi nimi. */
	@layer footer {
		footer {
			/* HORNÝ OKRAJ ODIŠIEL 13. 9. 2026 na pokyn zadávateľa. Bol to
			   `1px solid var(--theme-outline-variant)`, teda vlások, ktorý
			   sa na domovskej stránke ukázal tesne pod veľkým videom
			   a pôsobil tam ako zabudnutý oddeľovač.

			   Platí to pre pätu na VŠETKÝCH stránkach, nielen na domovskej —
			   päta je jedna. Oddelenie od obsahu drží `padding-block-start`
			   nižšie, takže bez vlásku nesplynie. */
			padding-block-start: var(--space-lg);
			padding-inline: var(--page-inset);
		}

		.footer-main {
			margin-block-end: 20px;
		}

		.footer-inner,
		.footer-google-inner {
			display: flex;
			flex-wrap: wrap;
			margin-inline: calc(-1 * var(--grid-half));
		}

		.footer-col {
			padding-inline: var(--grid-half);
		}

		.footer-title {
			margin: 0;
			font-size: 32px;
			font-weight: 450;
			line-height: 33.92px;
			letter-spacing: -.15px;
			color: var(--theme-surface-on-surface);
		}

		.footer-nav-section {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			max-width: 288px;

			> a {
				display: block;
				margin: 0;
				padding-block: var(--space-xs);
				font-size: 14.5px;
				/* Riadkovanie originálu. Bez neho dá `normal` o 3 px menej
				   na položku a celý pás je o 21 px nižší než predloha. */
				line-height: 21.02px;
				letter-spacing: .11px;
				font-weight: 500;
				color: var(--theme-surface-on-surface);
				text-decoration: none;

				&:hover,
				&:focus-visible {
					text-decoration: underline;
				}
			}
		}

		/* Osem kategórií vedľa seba. Predloha mala v päte dva zoznamy, tie
		   sedeli ako dve dráhy mriežky — s ôsmimi to už nejde, preto vlastná
		   mriežka. Tri stĺpce sú tie isté ako v mape stránky, nech päta
		   a „celé menu" nevyzerajú ako dve rôzne štruktúry. */
		.footer-nav-mriezka {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			column-gap: var(--grid-gutter);
			row-gap: var(--space-xl);

			/* Kategórie sú rôzne vysoké (Zdroje má šesť podpoložiek, ESG
			   žiadnu) a bez tohto by sa v riadku rozťahovali. */
			align-items: start;

			@media (width < 768px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				column-gap: var(--space-lg);
			}
		}

		/* Kategória je ODKAZ, nie mŕtvy štítok — v menu aj v mape ním tiež je.
		   Vzhľad zostáva pôvodný (stlmená, 14,5 px), pribudlo len podčiarknutie
		   pri prejdení, aby bolo vidno, že sa dá kliknúť. */
		.footer-nav-label {
			display: block;
			margin: 0 0 var(--space-md);
			font-size: 14.5px;
			line-height: 21.02px;
			letter-spacing: .11px;
			font-weight: 500;
			color: var(--theme-surface-on-surface-variant);
			text-decoration: none;

			/* Podčiarknutie patrí len tomu, na čo sa dá kliknúť — kategória
			   bez cieľa (`.nav-neaktivne`) je `<span>`. */
			&:is(:hover, :focus-visible):not(.nav-neaktivne) {
				color: var(--theme-surface-on-surface);
				text-decoration: underline;
			}
		}

		/* Kopa smajlíkov — 1:1 podľa huggingface.co.
		 *
		 * Do 10. 8. 2026 tu bol obrí nápis „Antigravity". Kopa je na jeho mieste:
		 * stredný pás päty, medzi stĺpcami a odkazmi Google.
		 *
		 * Nie je to mnoho prvkov ani plátno, hoci tak vyzerá — predloha má jeden
		 * jediný SVG cez šírku kontajnera a druhý, užší, pod zlomom 1024 px.
		 * Odmerané na huggingface.co pri okne 1905 px: obrázok 1504 × 300 a jeho
		 * spodná hrana sa dotýka päty.
		 */
		#smajlici {
			/* Od 13. 8. 2026 je kopa odkaz na huggingface.co — sú to ich
			   assety. `display: block`, inak by riadkový `<a>` pridal pod
			   obrázkom medzeru na účiarku a päta by o pár pixelov narástla. */
			> a {
				display: block;
			}

			img {
				display: block;
				width: 100%;
				height: auto;

				/* Obrázok sám kliky NEBERIE — prejdú cezeň na rodičovský
				   `<a>`, takže odkaz funguje a kopa sa pritom nedá označiť
				   ťahom myši ako obrázok. Predloha to má rovnako
				   (`pointer-events-none select-none`), len bez odkazu. */
				pointer-events: none;
				user-select: none;
			}

			/* Široká verzia je východisková, úzka sa zapne pod zlomom.
			   Rozmery v atribútoch `width`/`height` držia pomer strán, takže
			   sa pri načítaní nič neposunie. */
			.uzky {
				display: none;
			}

			@media (width < 1024px) {
				.siroky {
					display: none;
				}

				.uzky {
					display: block;
				}
			}
		}

		.footer-google-links {
			border-top: 1px solid var(--theme-outline-variant);
			padding-block: 42px 32px;
		}

		/* Logo dedí farbu textu — SVG má `fill="currentColor"`. */
		/* Logo dedí farbu textu — SVG má `fill="currentColor"`. */
		.footer-google-logo {
			display: inline-flex;
			color: var(--theme-surface-on-surface-variant);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				color: var(--theme-surface-on-surface);
			}
		}

		.footer-google-nav {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-md);

			a {
				font-size: 14.5px;
				line-height: 21.02px;
				letter-spacing: .11px;
				font-weight: 500;
				color: var(--theme-surface-on-surface-variant);
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: var(--theme-surface-on-surface);
					text-decoration: underline;
				}
			}
		}

		/* Rozloženie stĺpcov: nadpis 4 + navigácia 8 = 12.
		   Predloha mala 4 + odsadenie 2 + 3 + 3; odsadenie odišlo, lebo osem
		   kategórií potrebuje celý zvyšok riadka. Vedomá odchýlka. */
		@media (width >= 1024px) {
			.footer-inner {
				row-gap: var(--space-2xl);
			}

			.footer-col-title {
				flex: 1 1 33.3333%;
			}

			.footer-col-nav {
				flex: 1 1 66.6667%;
			}

			.footer-google-logo-col {
				flex: 1 1 25%;
			}

			/* Logo (3) + odsadenie (3) + navigácia (6). */
			.footer-google-nav-col {
				flex: 1 1 50%;
				margin-inline-start: 25%;
			}
		}

		/* Mobil: stĺpce pod seba, odkazy Google do stĺpca, vyššia spodná výplň. */
		@media (width < 1024px) {
			.footer-inner {
				row-gap: var(--space-lg);
			}

			.footer-col {
				flex: 1 1 100%;
			}

			.footer-google-links {
				padding-block-end: 64px;
			}

			.footer-google-inner {
				flex-direction: column;
				align-items: flex-start;
				gap: var(--space-lg);
			}

			.footer-google-nav-col {
				margin-inline-start: 0;
			}

			.footer-google-nav {
				flex-direction: column;
				gap: var(--space-sm);
			}
		}
	}
}

@layer base {
	html {
		/* Skok na kotvu musí skončiť POD pevnou hlavičkou.
		   Hlavička má 52 px na každej šírke (odmerané pri 375, 768, 1024
		   a 1920), k tomu 24 px vzduchu — bez toho dosadne `/#co-robime`
		   presne na jej spodnú hranu a horná linka sekcie zmizne pod ňou. */
		scroll-padding-top: 76px;

		background: var(--theme-surface-surface);
		font-family: "Google Sans Flex", sans-serif;
		font-weight: 400;

		font-size: 16px;

		color: var(--theme-surface-on-surface);
	}

	section {
		/* Sekcie sa NEROZŤAHUJÚ na výšku okna.
		 *
		 * Pen tu mal `min-height: 100dvh` pre každú sekciu („Make sections
		 * fullheight"). Predloha to má len na hero — všetky ostatné sekcie
		 * majú `min-height: 0` a sú vysoké podľa obsahu (odmerané pri 1425 px:
		 * welcome 900 = 100vh, video 397, agent-first 906, use-case 1243…).
		 *
		 * Prejavilo sa to najhoršie pri videu: sekcia bola vysoká na celé okno,
		 * hoci video zaberalo menej, a zvyšok bola prázdna plocha. Pri vysokom
		 * úzkom okne z toho boli stovky pixelov bieleho miesta medzi videom
		 * a nasledujúcim textom. Dve sekcie si to už predtým rušili vlastným
		 * `min-height: auto` — príznak, že pravidlo bolo zle položené.
		 */
		&.center {
			/* Center their contents */
			place-content: safe center;
			justify-items: center;
		}
	}

	h2 {
		/* Škála z antigravity.google: 54 px / váha 450 / lh 56,16 / ls −0,95.
		   `min()` je poistka na úzke displeje — pri pevných 54 px by slovo
		   „Antigravity" pretieklo obsah pod ~400 px šírky. */
		font-size: min(3.375em, 13vw);
		font-weight: 450;
		margin: 0.5rem 0;
		line-height: 1.04;
		letter-spacing: -.95px;

		@media (width >= 1024px) {
			width: 50%;
			max-width: 25ch;
		}
	}

	p {
		color: var(--theme-surface-on-surface-variant);
	}

	@scope (.dark) {
		p {
			color: var(--theme-surface-surface);
		}
	}
}

@layer reset {
	html, body {
		height: 100%;
	}

	* {
		box-sizing: border-box;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	ul[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	input, textarea, select, button {
		font-family: inherit;
		font-size: inherit;
	}

	a:focus-visible,
	button:focus-visible {
		outline-offset: 0.2rem;
	}

	figure {
		margin: 0;
	}
}

@layer util {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}

	.not-sr-only {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

@layer tokens {
	@layer colors {
		:root {
			--palette-grey-900: #2F3034;
			--palette-grey-800: #45474D;
			--palette-grey-50: #E6EAF0;
			--palette-grey-0: #FFFFFF;
			--palette-grey-1000: #212226;
			--palette-grey-20: #EFF2F7;
			--palette-grey-1200: #121317;
			--palette-grey-1100: #18191D;
			--palette-grey-10: #F8F9FC;
			--palette-grey-100: #E1E6EC;
			--palette-grey-200: #CDD4DC;
			--palette-grey-300: #B2BBC5;
			--palette-grey-400: #B7BFD9;
			--palette-grey-600: #AAB1CC4D;
			--palette-grey-1000-12: #dedfe2;
			--palette-grey-50-20: #414347;
			--palette-grey-15: #F0F1F5;
			--palette-grey-0-rgb: 255, 255, 255;
			--palette-grey-50-rgb: 230, 234, 240;
			--palette-grey-400-rgb: 183, 191, 217;
			--palette-grey-600-rgb: 170, 177, 204;
			--palette-grey-1000-rgb: 33, 34, 38;
			--palette-grey-1200-rgb: 18, 19, 23;
			--theme-surface-surface: var(--palette-grey-0);
			--theme-surface-on-surface: var(--palette-grey-1200);
			--theme-surface-on-surface-variant: var(--palette-grey-800);
			--theme-surface-surface-container: var(--palette-grey-10);
			--theme-surface-surface-container-high: var(--palette-grey-20);
			--theme-surface-surface-container-higher: var(--palette-grey-50);
			--theme-surface-surface-container-highest: var(--palette-grey-100);
			--theme-surface-inverse-surface: var(--palette-grey-1200);
			--theme-surface-inverse-on-surface: var(--palette-grey-10);
			--theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
			--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
			--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
			--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
			--theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
			--theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
			--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
			--theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
			--theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
			--theme-inverse-surface: var(--palette-grey-1200);
			--theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
			--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
			--theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
			--theme-outline-outline-variant: rgba(33, 34, 38, .06);
			--theme-primary-primary: var(--theme-surface-on-surface);
			--theme-primary-on-primary: var(--theme-surface-surface);
			--theme-tonal-tonal: var(--theme-surface-surface-container);
			--theme-tonal-on-tonal: var(--theme-surface-on-surface);
			--theme-outlined-outlined: var(--theme-surface-surface-transparent);
			--theme-outlined-on-outlined: var(--theme-surface-on-surface);
			--theme-protected-protected: var(--theme-surface-surface-container);
			--theme-protected-on-protected: var(--theme-surface-on-surface);
			--theme-text-text: var(--theme-surface-surface-transparent);
			--theme-text-on-text: var(--theme-surface-on-surface);
			--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
			--theme-text-link-states-hovered: var(--palette-grey-1000);
			--theme-text-link-states-focused: var(--palette-grey-1100);
			--theme-text-link-states-pressed: var(--palette-grey-1000);
			--theme-text-link-states-disabled: #6A6A71;
			--theme-button-states-primary-enabled: var(--theme-primary-primary);
			--theme-button-states-primary-disabled: var(--palette-grey-10);
			--theme-button-states-primary-hovered: var(--palette-grey-900);
			--theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
			--theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
			--theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
			--theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
			--theme-button-secondary-hover: var(--palette-grey-15);
			--theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
			--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
			--theme-button-states-tonal-disabled: var(--palette-grey-10);
			--theme-button-states-protected-enabled: var(--theme-protected-protected);
			--theme-button-states-protected-hovered: var(--palette-grey-20);
			--theme-button-states-protected-disabled: var(--palette-grey-100);
			--theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
			--theme-button-states-disabled: var(--palette-grey-100);
			--theme-button-states-on-disabled: #6A6A71;
			--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
			--theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
			--theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
			--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
			--divider: var(--theme-outline-outline-variant);

			/* Modrá pre stav :hover v rozbaľovacích paneloch —
			   `--palette-blue-600` z antigravity.google. */
			--palette-blue-600: #3279f9;
		}
	}

	/* Rozostupy a zaoblenia z antigravity.google — odmerané na živej stránke.
	   Držíme ich v px (nie rem), lebo originál je v px a menu má byť 1:1. */
	@layer spacing {
		:root {
			--space-xs: 4px;
			--space-sm: 8px;
			--space-md: 16px;
			--space-lg: 24px;
			--space-xl: 36px;
			--space-2xl: 48px;

			/* Doplnené 15. 9. 2026. Na tento token sa na dvoch miestach
			   odkazovalo so záložnou hodnotou `var(--space-3xl, 64px)` —
			   v mriežke projektov a v podsekcii technológií. Fungovalo to,
			   ale bol to odkaz na niečo, čo neexistovalo: kto by chcel škálu
			   preladiť, tieto dve miesta by mu ušli. 64 px je zároveň
			   prirodzený ďalší krok rady 4-8-16-24-36-48. */
			--space-3xl: 64px;

			/* Bočné odsadenie stránky a medzera medzi stĺpcami mriežky.
			 *
			 * Prevzaté 1:1 z `:root` na antigravity.google vrátane názvov,
			 * hodnôt aj zlomov.
			 *
			 * `--page-margin` je OS OBSAHU: na nej začína text loga, nadpisy
			 * sekcií aj stĺpce päty. Do 10. 8. 2026 sme mali všade natvrdo
			 * 48 px, čo je v skutočnosti poloha *riadku* mriežky (`--row-margin`),
			 * nie osi obsahu — text stránky preto stál o 24 px vľavo od predlohy.
			 *
			 * Zlomy sú písané cez `<=`, teda od najširšieho nadol, hoci zvyšok
			 * stránky je opačný. Je to zámer: predloha ich má takto a pri
			 * neceločíselnej šírke okna (priblíženie stránky, škálovanie
			 * Windows) by prepis na `>= 768/1025/1601` dal v pásmach
			 * 767–768, 1024–1025 a 1600–1601 px inú hodnotu než predloha.
			 */
			--page-margin: 72px;
			--grid-gutter: 64px;

			@media (width <= 1600px) {
				--grid-gutter: 48px;
			}

			@media (width <= 1024px) {
				--page-margin: 40px;
				--grid-gutter: 40px;
			}

			@media (width <= 767px) {
				--page-margin: 16px;
				--grid-gutter: 16px;
			}

			/* Polovica medzery je výplň stĺpca; riadok o ňu presahuje von,
			   takže stĺpec začína presne na osi obsahu. */
			--grid-half: calc(var(--grid-gutter) / 2);
			--row-margin: calc(var(--page-margin) - var(--grid-half));

			/* Strop šírky obsahu. Predloha ho má tiež — `--breakpoint-max: 1600px`
			   a `.grid-container { max-width: calc(1600px + 2 * 72px) = 1744px;
			   margin: 0 auto }`. Nad 1744 px teda obsah prestane rásť a vycentruje sa.
			   Overené pri okne 2005 px: os obsahu je tam 202 px, nie 72 — logo, päta,
			   nadpisy sekcií, ukážka vývojárov aj karty blogov sedia všetky na 202.
			   (2005 − 1600) / 2 = 202,5. */
			--breakpoint-max: 1600px;

			/* Os obsahu pre prvky MIMO mriežky (pevná hlavička, panely menu, päta).
			   Pod stropom je to `--page-margin`, nad ním polovica presahu. */
			--page-inset: max(
				var(--page-margin),
				calc((100% - var(--breakpoint-max)) / 2)
			);

			--shape-corner-xs: 4px;
			/* 8 px — zaoblenie tlačidla na anthropic.com, odmerané. */
			--shape-corner-sm: 8px;
			--shape-corner-lg: 24px;

			--icon-size-sm: 18px;
		}
	}

	@layer animations {
		:root {
			--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
			--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
			--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
			--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
			--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
			--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
			--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
			--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
			--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
			--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
			--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
			--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
			--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
			--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
			--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
			--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
			--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
			--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
			--ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
		}
	}
}

/* ===================================================================
   SLOVNÍK DIZAJN SYSTÉMU
   ===================================================================

   Pomenované triedy, z ktorých sa skladajú NOVÉ sekcie a stránky, aby sa
   pri každej nemuseli znovu vypisovať čísla. Všetky hodnoty sú odmerané
   na živej predlohe (antigravity.google) pri 375 px a 1425 px — nie
   odhadnuté a nie vymyslené.

   Slovník je ADITÍVNY. Sekcie, ktoré sme už doladili na pixel, si
   ponechávajú vlastné pravidlá a nič sa im nemení; slovník je pre to,
   čo príde. Postupne sa naň dá prepisovať, vždy s premeraním.

   Prehľad aj ukážky sú na `/styleguide`, popis v `DESIGN-SYSTEM.md`.
   =================================================================== */

@layer tokens {
	/* Typografická škála predlohy. Má DVA stupne, nie plynulý `clamp()` —
	   overené pri 375, 885, 1085 a 1425 px: hodnoty sa menia raz, na
	   1024 px, teda na tom istom zlome ako zvyšok rozloženia. */
	@layer typografia {
		:root {
			/* pod 1024 px */
			--nadpis-3-velkost: 34px;   --nadpis-3-riadok: 36.04px;  --nadpis-3-preloz: -.68px;
			--nadpis-4-velkost: 28px;   --nadpis-4-riadok: 29.6px;   --nadpis-4-preloz: -.28px;
			--nadpis-5-velkost: 28px;   --nadpis-5-riadok: 29.6px;   --nadpis-5-preloz: -.28px;
			--nadpis-6-velkost: 24px;   --nadpis-6-riadok: 25.92px;  --nadpis-6-preloz: -.14px;
			--nadpis-7-velkost: 24px;   --nadpis-7-riadok: 25.92px;  --nadpis-7-preloz: -.14px;
			--telo-velkost: 15px;       --telo-riadok: 22px;         --telo-preloz: .16px;
			--popisok-velkost: 15px;    --popisok-riadok: 22.5px;    --popisok-preloz: .16px;

			@media (width >= 1024px) {
				--nadpis-3-velkost: 54px;   --nadpis-3-riadok: 56.16px;  --nadpis-3-preloz: -.95px;
				--nadpis-4-velkost: 42px;   --nadpis-4-riadok: 43.68px;  --nadpis-4-preloz: -.73px;
				--nadpis-5-velkost: 32px;   --nadpis-5-riadok: 33.92px;  --nadpis-5-preloz: -.15px;
				--nadpis-6-velkost: 28px;   --nadpis-6-riadok: 30.24px;  --nadpis-6-preloz: -.1px;
				--nadpis-7-velkost: 24px;   --nadpis-7-riadok: 25.92px;  --nadpis-7-preloz: -.07px;
				--telo-velkost: 17.5px;     --telo-riadok: 25.38px;      --telo-preloz: .18px;
				--popisok-velkost: 14.5px;  --popisok-riadok: 21.02px;   --popisok-preloz: .16px;
			}

			/* Váhy. 450 je medzistupeň premenlivého fontu Google Sans Flex —
			   nie omyl a nie 400 ani 500. `nadpis-7` je jediný tučný. */
			--vaha-nadpis: 450;
			--vaha-nadpis-7: 700;
			--vaha-telo: 400;
			--vaha-tlacidlo: 450;

			/* Zvislý rytmus sekcie. Predloha je tu nejednotná (40 až 120 px),
			   toto je jej prevládajúca hodnota. */
			--sekcia-rytmus: 72px;

			@media (width >= 1024px) {
				--sekcia-rytmus: 120px;
			}
		}
	}
}

@layer components {
	/* Deklarované ZÁMERNE až tu: podvrstvy `button`, `navbar` a `card` sú
	   vyššie, takže slovník ich prebíja bez naháňania špecificity. */
	@layer typografia {
		.nadpis-3,
		.nadpis-4,
		.nadpis-5,
		.nadpis-6,
		.nadpis-7 {
			/* Základné `h1`/`h2` má na desktope `width: 50%` — v novej sekcii
			   by nadpis nečakane stlačilo. Trieda šírku vždy uvoľní. */
			width: auto;
			max-width: none;
			margin: 0;

			font-weight: var(--vaha-nadpis);
			color: var(--theme-surface-on-surface);
			text-wrap: balance;
		}

		.nadpis-3 { font-size: var(--nadpis-3-velkost); line-height: var(--nadpis-3-riadok); letter-spacing: var(--nadpis-3-preloz); }
		.nadpis-4 { font-size: var(--nadpis-4-velkost); line-height: var(--nadpis-4-riadok); letter-spacing: var(--nadpis-4-preloz); }
		.nadpis-5 { font-size: var(--nadpis-5-velkost); line-height: var(--nadpis-5-riadok); letter-spacing: var(--nadpis-5-preloz); }
		.nadpis-6 { font-size: var(--nadpis-6-velkost); line-height: var(--nadpis-6-riadok); letter-spacing: var(--nadpis-6-preloz); }

		.nadpis-7 {
			font-size: var(--nadpis-7-velkost);
			line-height: var(--nadpis-7-riadok);
			letter-spacing: var(--nadpis-7-preloz);
			font-weight: var(--vaha-nadpis-7);
		}

		/* Bežný text. Stlmená farba je zámer — plnú má nadpis, aby bol
		   v sekcii vidno hierarchiu. */
		.telo {
			margin: 0;
			font-size: var(--telo-velkost);
			line-height: var(--telo-riadok);
			letter-spacing: var(--telo-preloz);
			font-weight: var(--vaha-telo);
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;
		}

		/* Drobné: dátum, rubrika, popis pod obrázkom. */
		.popisok {
			margin: 0;
			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: var(--popisok-preloz);
			font-weight: var(--vaha-telo);
			color: var(--theme-surface-on-surface-variant);
		}
	}

	/* Tlačidlá. Predloha ich stavia ako pilulku s priehľadným rámom 0,8 px —
	   ten drží rovnakú veľkosť vo všetkých variantoch, aj v tých bez rámu.
	   Písmo ide po škále `telo`, váha 450. */
	@layer tlacidlo {
		.tlacidlo {
			display: inline-flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: var(--space-sm);

			padding: 10px 24px;
			border: 0.8px solid transparent;
			border-radius: 9999px;

			font-size: var(--telo-velkost);
			line-height: var(--telo-riadok);
			letter-spacing: var(--telo-preloz);
			font-weight: var(--vaha-tlacidlo);
			white-space: nowrap;
			text-decoration: none;

			cursor: pointer;
			transition: .15s background ease-out, .15s color ease-out;
		}

		/* Plné — hlavná akcia. Čierna pilulka, biely text. */
		.tlacidlo-plne {
			background: var(--theme-primary-primary);
			color: var(--theme-primary-on-primary);

			&:hover,
			&:focus-visible {
				background: var(--theme-button-states-primary-hovered);
			}
		}

		/* Tiché — vedľajšia akcia. Sotva viditeľná výplň a vlasový rám. */
		.tlacidlo-tiche {
			background: var(--theme-secondary-button);
			border-color: var(--theme-outline-variant);
			color: var(--theme-surface-on-surface);

			&:hover,
			&:focus-visible {
				background: var(--theme-button-secondary-hover);
			}
		}

		/* Navigačné — bez výplne, stlmený text. Menšie písmo (škála
		   `popisok`), používa sa v hlavičke a v paneloch menu. */
		.tlacidlo-navigacne {
			background: transparent;
			color: var(--theme-surface-on-surface-variant);

			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: .11px;

			&:hover,
			&:focus-visible {
				background: var(--theme-nav-button-hover);
				color: var(--theme-surface-on-surface);
			}
		}

		/* Úzke — do hlavičky a k nadpisom sekcií. Výška 36 px je na
		   predlohe explicitná, nie odvodená z obsahu. */
		.tlacidlo-uzke {
			min-height: 36px;
			padding: 6px 16px;
		}

		/* Na tmavom podklade sa plné a tiché prevrátia. */
		.tlacidlo-plne-inverzne {
			background: var(--theme-primary-on-primary);
			color: var(--theme-primary-primary);
		}

		.tlacidlo-tiche-inverzne {
			background: var(--theme-button-secondary-inverse-hover);
			border-color: var(--theme-inverse-outline-variant);
			color: var(--theme-surface-surface);
		}
	}
}

@layer layout {
	/* Kostra sekcie. Tri varianty podľa toho, na ktorú os stránky sadá —
	   viac o osiach v DEVELOPMENT.md („Tri osi mriežky"). */
	@layer sekcia {
		/* Bežná sekcia: text a obsah na osi obsahu. */
		.sekcia {
			grid-column: main;
			padding-block: var(--sekcia-rytmus);
		}

		/* DVOJITÁ VÝPLŇ MEDZI SUSEDNÝMI SEKCIAMI — oprava z 3. 9. 2026.
		 *
		 * `padding-block` dáva rytmus hore aj dole, takže dve sekcie za sebou
		 * vyrobili DVOJNÁSOBOK: 120 + 120 = 240 px prázdna. To nikdy nebol
		 * zámer, len dôsledok toho, že sa rytmus počíta na každej sekcii zvlášť.
		 *
		 * Že je to chyba a nie vkus, ukázalo meranie domovskej stránky. Medzery
		 * medzi jej sekciami boli:
		 *
		 *     0, 120, 120, 120, 192, 240, 240, 192, 96
		 *
		 * Sekcie doladené podľa predlohy majú výplne NESYMETRICKÉ (120/0, 0/120,
		 * 72/120, 72/96) a držia rytmus 96 až 192. Tie dve dvestoštyridsiatky sú
		 * jediné dva výčnelky a sú presne tam, kde sekcia použila holú `.sekcia`
		 * bez doladenia — `partneri` a `recenzie`. Tie mali 55 % a 63 % svojej
		 * výšky prázdnej.
		 *
		 * Najhoršie to bilo do očí na textových stránkach, kde je sekciou jeden
		 * odsek: na `/esg` mal úvod 102 px obsahu a 240 px prázdna okolo seba.
		 *
		 * Rieši sa to tak, že rytmus medzi sekciami nesie SPODNÁ výplň tej
		 * predchádzajúcej, nie obe naraz. Prvá sekcia na stránke si vrchnú
		 * výplň ponechá — tam nie je čo zdvojiť a treba čistinu pod pevnou
		 * hlavičkou.
		 *
		 * `.sekcia-plna` je z pravidla VYNECHANÁ ZÁMERNE: je to farebný pás
		 * (`kariera-cta`) a jeho vrchná výplň je vnútri farby. Vynulovať ju
		 * by nezmenšilo medzeru, ale prilepilo text na horný okraj pásu. */
		section + :is(.sekcia, .sekcia-mriezka) {
			padding-block-start: 0;
		}

		/* Cez celú šírku okna — pre pásy s farebným pozadím alebo obrázkom.
		   Obsah vnútri si os musí dorobiť výplňou `--page-inset`. */
		.sekcia-plna {
			grid-column: fullbleed;
			padding-block: var(--sekcia-rytmus);
		}

		/* ZĽAVA NA OSI OBSAHU, SPRAVA AŽ NA OKRAJ OKNA (13. 9. 2026).
		 *
		 * Pribudlo pre „Dôverovali nám" na pokyn zadávateľa: „sekcia môže ísť
		 * úplne doprava až, vľavo ju daj tak, aby bola zarovnaná maximálne."
		 *
		 * Ľavá hrana teda sadá na `main`, kde stoja nadpisy všetkých ostatných
		 * sekcií, a pravá ide na `fullbleed-end`. Sekcia tým dostane vpravo
		 * `--page-margin` navyše, takže sa do riadku zmestí viac obsahu.
		 *
		 * Pomenované čiary mriežky, nie záporná vonkajšia medzera: tá by pri
		 * zmene `--page-margin` prestala sedieť a na úzkom okne by obsah
		 * vysunula z okna.
		 *
		 * Používa sa SPOLU s `.sekcia`, nie namiesto nej — kvôli rytmu
		 * výplní, ktorý rieši pravidlo `section + :is(...)` vyššie. */
		.sekcia-doprava {
			grid-column: main-start / fullbleed-end;
		}

		/* Pre sekciu, ktorá si počíta 12-stĺpcovú mriežku sama. */
		.sekcia-mriezka {
			grid-column: row;
			padding-block: var(--sekcia-rytmus);

			display: grid;
			grid-template-columns: repeat(12, 1fr);
			column-gap: var(--grid-gutter);
		}

		/* Hlavička sekcie: nadpis vľavo, odkaz vpravo. Rovnaký vzor má
		   „Najnovšie články" aj sekcia vývojárov. */
		.sekcia-hlavicka {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: var(--space-lg);
			margin-block-end: var(--space-2xl);

			@media (width < 768px) {
				flex-direction: column;
				align-items: flex-start;
			}
		}
	}
}

@layer components {
	/* CELÉ MENU — jedno tlačidlo úplne vpravo, ktoré na každej šírke otvorí
	   mapu stránky.
	 *
	 * Myšlienka je z puxdesign.cz: aj na širokom monitore tam zostáva
	 * rozbaľovacie tlačidlo, ktoré ukáže všetko naraz — nemusíš hádať, pod
	 * ktorou položkou sa čo skrýva. Prevzatá je LEN tá myšlienka; vzhľad je
	 * náš, panel je ten istý pás pod hlavičkou ako pri bežných rozbaľovacích
	 * položkách a písmo aj rozostupy sú zo slovníka.
	 *
	 * Celé je to bez JavaScriptu — zaškrtávacie políčko a súrodenecké
	 * selektory, rovnako ako mobilné menu.
	 */
	@layer mapa {
		.mapa-checkbox {
			display: none;
		}

		.mapa-tlacidlo {
			min-height: 36px;
			padding: 6px 12px;
			cursor: pointer;
			user-select: none;

			/* Musí byť NAD záclonou, inak sa cez ňu nedá zavrieť. */
			position: relative;
			z-index: 100;
		}

		.mapa-tlacidlo .dropdown-icon {
			margin-inline-start: 0;
			font-size: 21px;
		}

		/* Prepínanie ikony ☰ / ✕. */
		.mapa-checkbox:not(:checked) ~ .mapa-tlacidlo [data-show-when="open"],
		.mapa-checkbox:checked ~ .mapa-tlacidlo [data-show-when="closed"] {
			display: none;
		}

		.mapa,
		.mapa-zaclona {
			display: none;
		}

		.mapa-checkbox:checked {
			& ~ .mapa {
				display: block;

				/* Panel sa kotví na hlavičku, rovnako ako rozbaľovacie panely.
				   Vzhľad je zhodný: biely pás cez celú šírku, tenká linka
				   navrchu, zaoblený len zdola. */
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				z-index: 99;

				background: var(--palette-grey-0);
				border-top: 1px solid var(--theme-surface-surface-container-higher);
				border-radius: 0 0 var(--shape-corner-lg) var(--shape-corner-lg);
				padding: var(--space-2xl) 0 var(--space-xl);

				transition: opacity .15s var(--ease-out-cubic);
				opacity: 1;

				@starting-style {
					opacity: 0;
				}
			}

			/* Klik vedľa panelu ho zavrie.
			 *
			 * POZOR: `position: fixed` by tu NEFUNGOVALO. `.header-wrapper`
			 * má kvôli skrývaniu pri scrollovaní `translate`, a to z neho
			 * robí kontajner aj pre fixne pozicované potomstvo — záclona by
			 * mala veľkosť hlavičky, nie okna. Preto `absolute` a výška okna. */
			& ~ .mapa-zaclona {
				display: block;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: 100vh;
				z-index: 98;
				cursor: default;
			}
		}

		.mapa-inner {
			/* Hlavička je mimo mriežky, takže si os obsahu dorába výplňou —
			   rovnako ako `.dropdown-inner`. */
			padding-inline: var(--page-inset);
		}

		/* Stĺpce v poradí hlavného menu. Nie na 12-stĺpcovej mriežke stránky —
		 * kategórií je šesť a tie sa do dvanástich nedelia.
		 *
		 * Prečo TRI a nie šesť: najdlhšia kategória („Prípady použitia") má pri
		 * 28 px asi 205 px. Šesť stĺpcov dá aj pri okne 1905 px len 213 px, čo
		 * po odčítaní výplne nestačí a nadpis sa zalomí. Päť stĺpcov by zase
		 * nechalo šiestu kategóriu samú na druhom riadku. Tri stĺpce majú aj pri
		 * 1425 px 395 px a mapa vyjde ako vyrovnaná mriežka 3 × 2.
		 *
		 * Poradie čítania zostáva zľava doprava, po riadkoch.
		 */
		.mapa-mriezka {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			column-gap: var(--grid-gutter);
			row-gap: var(--space-2xl);
		}

		.mapa-skupina {
			/* Kategória a jej zoznam sedia v RADOCH RODIČA, nie vo vlastných.
			   Vďaka tomu začínajú všetky zoznamy na jednej základni aj vtedy,
			   keď sa dlhšia kategória („Prípady použitia") zalomí na dva
			   riadky — bez toho by zoznam pod ňou klesol o 30 px a mapa by
			   sa opticky rozsypala. */
			grid-row: span 2;
			grid-template-rows: subgrid;

			display: grid;
			justify-items: start;
			row-gap: var(--space-sm);

			/* Aby sa obsah držal navrchu. Pri podmriežke výšku radu určuje
			   najvyšší stĺpec (Zdroje, 6 položiek) a bez tohto by sa kratší
			   obsah v rade rozťahoval. */
			align-content: start;
			align-items: start;
		}

		/* HLAVNÁ KATEGÓRIA.
		 *
		 * Všetky vyzerajú rovnako, nech už pod sebou niečo majú alebo nie —
		 * „Produkty" a „Cenník" sú tá istá úroveň menu. Do 10. 8. 2026 boli
		 * skupiny s podúrovňou len drobný stlmený štítok a bez podúrovne
		 * veľký nadpis; z jednej úrovne to robilo opticky dve.
		 *
		 * Výplň zľava je tá istá ako pri `.subnav-link`, aby kategória
		 * a odkazy pod ňou začínali na jednej zvislej čiare.
		 */
		.mapa-odkaz {
			padding-inline: var(--space-md);

			font-size: var(--nadpis-6-velkost);
			line-height: var(--nadpis-6-riadok);
			letter-spacing: var(--nadpis-6-preloz);
			font-weight: var(--vaha-nadpis);
			color: var(--theme-surface-on-surface);
			text-decoration: none;

			transition: .15s color ease-out;

			/* Zvýraznenie patrí len tomu, na čo sa dá kliknúť. Kategória bez
			   cieľa (`.nav-neaktivne`) je `<span>` a nesmie sa rozsvietiť —
			   inak by sľubovala klik, ktorý nepríde. */
			&:is(:hover, :focus-visible):not(.nav-neaktivne) {
				color: var(--palette-blue-600);
			}
		}

		/* PODÚROVEŇ.
		 *
		 * `.subnav-link` je spoločný s rozbaľovacími panelmi v hlavičke,
		 * preto sa mení LEN v mape — inak by sa stlmili aj tam.
		 * Rozdiel proti kategórii je veľkosťou aj farbou, nie výraznejšie:
		 * je to podúroveň, nie iný druh odkazu.
		 */
		.mapa .subnav {
			/* Odkazy v zozname sedia tesne pod sebou — sú to položky jedného
			   celku, nie samostatné kategórie. */
			row-gap: 2px;
		}

		.mapa .subnav-link {
			color: var(--theme-surface-on-surface-variant);

			&:hover,
			&:focus-visible {
				color: var(--palette-blue-600);
			}
		}

		/* Pod 1024 px netreba — tú istú úlohu tam plní hamburger mobilného
		   menu a dve tlačidlá vedľa seba by si len prekážali. */
		@media (width < 1024px) {
			.mapa-tlacidlo,
			.mapa,
			.mapa-zaclona {
				display: none;
			}
		}
	}
}

@layer layout {
	/* Zoznam aktualít — `/aktuality`. Karta je tá istá `.blog-card` ako
	   v sekcii na domovskej stránke, len bez karuselu: tu sa nič neposúva,
	   takže je z toho obyčajná mriežka. Počty stĺpcov sledujú zlomy
	/* AKTUALITY — zoznam článkov s bočným stĺpcom.
	 *
	 * Rozloženie je podľa wireframu od zadávateľa: vľavo články pod sebou
	 * (obrázok vľavo, text vpravo), vpravo rubriky a výber redakcie.
	 * Sádzba a farby sú naše — z wireframu je prevzatá len kostra.
	 *
	 * Pod 1024 px ide bočný stĺpec POD zoznam. Vedľa seba by mal ~200 px
	 * a štítky rubrík by sa lámali po jednom na riadok.
	 */
	@layer aktuality {
		#aktuality {
			display: grid;
			grid-template-columns: subgrid;
			padding-block: 150px var(--sekcia-rytmus);

			> * {
				grid-column: main;
			}
		}

		.aktuality-mriezka {
			display: grid;
			gap: var(--space-2xl) var(--grid-gutter);
			align-items: start;

			/* Wireframe má bočný stĺpec užší než tretinu; 2,6 : 1 sedí
			   s pomerom, ktorý má predloha pri šírke obsahu okolo 1600 px. */
			@media (width >= 1024px) {
				grid-template-columns: 2.6fr 1fr;
			}
		}

		.aktuality-hlavicka {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			justify-content: space-between;
			gap: var(--space-md);

			padding-block-end: var(--space-md);
			margin-block-end: var(--space-2xl);
			border-block-end: 0.8px solid var(--theme-outline-variant);
		}

		.aktuality-spat {
			display: inline-flex;
			align-items: center;
			gap: var(--space-xs);
			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			color: var(--theme-surface-on-surface-variant);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				color: var(--theme-surface-on-surface);
			}
		}

		.aktuality-zoznam {
			display: grid;
			gap: var(--space-2xl);
		}

		/* Jeden článok. Obrázok vľavo, text vpravo — pod 768 px pod sebou. */
		.clanok-riadok {
			display: grid;
			gap: var(--space-lg) var(--grid-gutter);
			align-items: start;

			@media (width >= 768px) {
				/* Obrázok má pevnú stopu, text berie zvyšok. V predlohe je
				   pomer zhruba 1 : 2. */
				grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
			}
		}

		.clanok-obrazok {
			display: block;
			aspect-ratio: 3 / 2;
			border-radius: var(--shape-corner-lg);
			overflow: hidden;
			background: var(--theme-surface-surface-container-high);

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;

				transition: scale .3s ease;
			}
		}

		/* Zväčšenie obrázka pri prejdení po nadpise — obrázok a nadpis sú dva
		   samostatné odkazy na tú istú vec, tak nech reagujú spolu. */
		.clanok-riadok:hover .clanok-obrazok img {
			scale: 1.03;
		}

		.clanok-telo {
			display: grid;
			gap: var(--space-sm);
			align-content: start;
		}

		.clanok-meta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-sm);
			margin: 0;

			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: var(--popisok-preloz);
			color: var(--theme-surface-on-surface-variant);

			/* Oddeľovač medzi rubrikou a dátumom. Bodka, nie pomlčka —
			   pomlčka sa v dátume už vyskytuje. */
			> * + *::before {
				content: "·";
				margin-inline-end: var(--space-sm);
			}
		}

		/* Rubrika je odkaz na svoj zoznam, preto plná farba a podčiarknutie
		   pri prejdení — dátum vedľa nej odkaz nie je. */
		.clanok-rubrika {
			color: var(--theme-surface-on-surface);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				text-decoration: underline;
			}
		}

		.clanok-nadpis {
			margin: 0;
			font-size: var(--nadpis-6-velkost);
			line-height: var(--nadpis-6-riadok);
			letter-spacing: var(--nadpis-6-preloz);
			font-weight: var(--vaha-nadpis);

			a {
				color: var(--theme-surface-on-surface);
				text-decoration: none;

				&:hover,
				&:focus-visible {
					text-decoration: underline;
				}
			}
		}

		.clanok-perex {
			margin: 0;
			max-width: 62ch;
			font-size: var(--telo-velkost);
			line-height: var(--telo-riadok);
			letter-spacing: var(--telo-preloz);
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;
		}

		/* BOČNÝ STĹPEC */
		.aktuality-bok {
			display: grid;
			gap: var(--space-2xl);
			align-content: start;
		}

		.bok-nadpis {
			margin: 0 0 var(--space-md);
			padding-block-end: var(--space-md);
			border-block-end: 0.8px solid var(--theme-outline-variant);

			font-size: var(--nadpis-7-velkost);
			line-height: var(--nadpis-7-riadok);
			letter-spacing: var(--nadpis-7-preloz);
			font-weight: var(--vaha-nadpis-7);
			color: var(--theme-surface-on-surface);
		}

		.bok-stitky {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-sm);
		}

		/* Štítok rubriky. Wireframe má sivé obdĺžniky; u nás je to tichá
		   pilulka ako `.tlacidlo-tiche` — to je náš tvar pre vedľajšiu akciu. */
		.bok-stitok {
			display: inline-flex;
			align-items: center;
			min-height: 32px;
			padding: 4px 12px;
			border: 0.8px solid transparent;
			border-radius: 999px;
			background: var(--theme-surface-surface-container-high);

			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: var(--popisok-preloz);
			color: var(--theme-surface-on-surface);
			text-decoration: none;
			white-space: nowrap;

			transition: background .15s ease-out;

			&:hover,
			&:focus-visible {
				background: var(--theme-nav-button-hover);
			}

			/* Rubrika, ktorá je práve otvorená. */
			&.je-aktivny {
				background: var(--theme-primary-primary);
				color: var(--theme-primary-on-primary);
			}
		}

		.bok-vyber {
			display: grid;
			gap: var(--space-lg);
		}

		.vyber-polozka {
			display: grid;
			grid-template-columns: 88px minmax(0, 1fr);
			gap: var(--space-md);
			align-items: start;
		}

		.vyber-obrazok {
			display: block;
			aspect-ratio: 4 / 3;
			border-radius: var(--shape-corner-sm);
			overflow: hidden;
			background: var(--theme-surface-surface-container-high);

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.vyber-rubrika {
			margin: 0 0 2px;
			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: var(--popisok-preloz);
			color: var(--theme-surface-on-surface-variant);
		}

		.vyber-nadpis {
			margin: 0;
			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			letter-spacing: var(--popisok-preloz);
			font-weight: var(--vaha-nadpis-7);
			text-wrap: pretty;

			a {
				color: var(--theme-surface-on-surface);
				text-decoration: none;

				&:hover,
				&:focus-visible {
					text-decoration: underline;
				}
			}
		}
	}

	/* KARIÉRA — zoznam pozícií a detail inzerátu.
	 *
	 * Rozloženie je 1:1 podľa dexfinity.com/kariera/ a jedného ich
	 * inzerátu (odmerané: karta pozície má rádius 7 px a rám
	 * 0,8 px solid #d2d2d2 — u nás `--shape-corner-sm` a
	 * `--theme-outline-variant`, rovnaká myšlienka, naše tokeny).
	 * Text je náš — pozri `config/kariera.php`. */
	@layer kariera {
		#kariera-hero {
			> * {
				max-width: 62ch;
			}
		}

		.kariera-perex {
			margin-block-start: var(--space-md);
			color: var(--theme-surface-on-surface-variant);
		}

		#kariera-zoznam {
			grid-column: main;
			padding-block-end: var(--sekcia-rytmus);
		}

		.kariera-mriezka {
			display: grid;
			gap: var(--space-lg);

			@media (width >= 768px) {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		/* Karta pozície. Rádius a rám odmerané na predlohe (7 px,
		   0,8 px solid #d2d2d2) — prevedené na naše tokeny. */
		.kariera-karta {
			display: flex;
			flex-direction: column;
			gap: var(--space-sm);

			padding: var(--space-lg);
			border: 0.8px solid var(--theme-outline-variant);
			border-radius: var(--shape-corner-sm);
		}

		.kariera-karta-nazov {
			margin: 0 0 var(--space-xs);
			font-size: var(--nadpis-7-velkost);
			line-height: var(--nadpis-7-riadok);
			letter-spacing: var(--nadpis-7-preloz);
			font-weight: var(--vaha-nadpis-7);
		}

		.kariera-karta-riadok {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
			margin: 0;

			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			color: var(--theme-surface-on-surface-variant);
		}

		/* Ikona v karte pozície. ZÁMERNE NEMÁ triedu
		   `material-symbols-outlined` — Google Fonts ju servíruje
		   s `font-size: 24px` BEZ vrstvy a nezaradená deklarácia prebije
		   každú `@layer` bez ohľadu na špecificitu. Prvá verzia to mala
		   ako `.kariera-karta-riadok .material-symbols-outlined
		   { font-size: 18px }` a odmerané sa vykresľovalo 24 px, teda
		   pravidlo nerobilo nič. Rovnaký problém a rovnaké riešenie ako
		   pri `.dropdown-icon` v menu (viď poznámka na konci súboru):
		   vlastná trieda, vlastná `font-family`, žiadny konflikt. */
		.kariera-ikona {
			font-family: 'Material Symbols Outlined';
			font-size: 18px;
			line-height: 1;
			font-weight: normal;
			font-style: normal;
			letter-spacing: normal;
			text-transform: none;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-webkit-font-feature-settings: 'liga';
		}

		.kariera-karta-tlacidlo {
			margin-block-start: auto;
			align-self: flex-start;
			margin-top: var(--space-sm);
		}

		/* Pred sekciou „Naše hodnoty" nulová spodná výplň — rovnako to robí
		   domovská stránka na `#product-uvod`.

		   `#hodnoty` si nesie vlastných 120 px zhora (má vlastnú vrstvu, nie
		   triedu `.sekcia`), takže by tu vzniklo 240 px prázdna. Pravidlo
		   `section + .sekcia` ho nechytí a chytiť ho ANI NESMIE: na domovskej
		   ide `hodnoty` za sekciou, ktorá spodnú výplň nemá, a vynulovanie
		   vrchnej by ich zlepilo dokopy. Rieši sa to teda na tej sekcii, ktorá
		   je pred ním — tam, kde je to naozaj rozhodnutie o rozložení. */
		#kariera-profil {
			padding-block-end: 0;
		}

		/* TVOJ PROFIL — tri vlastnosti, rovnaký vzor ako číslované
		   hodnoty (číslo, nadpis, text), len bez scény a spojníc. */
		.kariera-profil-hlavicka {
			max-width: 62ch;
			margin-block-end: var(--space-2xl);
		}

		.kariera-profil-stitok {
			margin: 0 0 var(--space-sm);
			text-transform: uppercase;
			letter-spacing: .08em;
			font-weight: var(--vaha-nadpis-7);
			color: var(--theme-surface-on-surface-variant);
		}

		.kariera-profil-mriezka {
			display: grid;
			gap: var(--space-xl) var(--grid-gutter);

			@media (width >= 1024px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		.kariera-profil-vlastnost {
			padding-block-start: var(--space-md);
			border-top: 0.8px solid var(--theme-outline-variant);
		}

		.kariera-profil-cislo {
			margin: 0 0 var(--space-sm);
			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			font-weight: var(--vaha-telo);
			color: var(--theme-surface-on-surface-variant);
			font-variant-numeric: tabular-nums;
		}

		.kariera-profil-nazov {
			margin: 0 0 var(--space-sm);
			font-size: var(--nadpis-7-velkost);
			line-height: var(--nadpis-7-riadok);
			letter-spacing: var(--nadpis-7-preloz);
			font-weight: var(--vaha-nadpis-7);
		}

		/* Záverečné CTA — spoločné pre zoznam aj detail pozície
		   (rovnaké `id`, jedna definícia). Plná šírka s tichým
		   podkladom, obsah vystredený na mieru čítania. */
		#kariera-cta {
			background: var(--theme-surface-surface-container);
			padding-inline: var(--page-inset);
		}

		.kariera-cta-obsah {
			max-width: 62ch;
			margin-inline: auto;
			padding-block: var(--sekcia-rytmus);
			text-align: center;

			display: grid;
			gap: var(--space-md);
			justify-items: center;
		}

		/* DETAIL POZÍCIE — dva stĺpce.
		 *
		 * Odmerané na predlohe pri okne 1440 px: dva stĺpce 50/50 (po 650 px),
		 * vľavo celý hlavný tok (omrvinky, nadpis, popis, meta, tlačidlo,
		 * „3 kľúčové oblasti", výzva), vpravo JEDEN sivý panel, ktorý drží
		 * „Čo ponúkame", „Je táto rola pre vás" aj FAQ.
		 *
		 * Prvá verzia mala tie tri bloky ako samostatné sekcie POD SEBOU —
		 * sivé podfarbenie sedelo, rozloženie nie.
		 *
		 * Pod 1024 px padá panel pod hlavný stĺpec: pri polovičnej šírke by
		 * mal okolo 350 px a jeho vnútorná výplň by z toho ubrala tretinu. */
		.pozicia-mriezka {
			display: grid;
			gap: var(--space-2xl) var(--grid-gutter);
			align-items: start;

			@media (width >= 1024px) {
				grid-template-columns: 1fr 1fr;
			}
		}

		.pozicia-omrvinky {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--space-sm);
			margin-block-end: var(--space-lg);

			font-size: var(--popisok-velkost);
			line-height: var(--popisok-riadok);
			color: var(--theme-surface-on-surface-variant);

			a {
				color: inherit;
				text-decoration: none;

				&:hover,
				&:focus-visible {
					color: var(--theme-surface-on-surface);
					text-decoration: underline;
				}
			}

			[aria-current="page"] {
				color: var(--theme-surface-on-surface);
			}
		}

		.pozicia-popis {
			margin-block-start: var(--space-md);
			color: var(--theme-surface-on-surface-variant);
		}

		/* Meta BEZ rámu — predloha ich má ako obyčajné dvojice názov/hodnota
		   v dvoch rovnakých stĺpcoch (odmerané: názov x 72 š 315, hodnota
		   x 387 š 315), nie ako orámovaný box. */
		.pozicia-meta {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-sm) var(--space-md);
			margin-block: var(--space-2xl) 0;

			@media (width < 480px) {
				grid-template-columns: 1fr;
				gap: 2px var(--space-md);
			}

			dt {
				margin: 0;
				font-weight: var(--vaha-nadpis-7);
			}

			dd {
				margin: 0;
				color: var(--theme-surface-on-surface-variant);
			}
		}

		.pozicia-akcia {
			margin-block: var(--space-xl) 0;
		}

		/* Podnadpisy v ľavom stĺpci — nad nimi väčší odstup než pod nimi,
		   aby sa oddelili od predošlého bloku. */
		.pozicia-podnadpis {
			margin-block: var(--space-2xl) var(--space-lg);
		}

		/* JEDEN stĺpec, nie dva — panel aj ľavý stĺpec sú úzke, dvojstĺpcová
		   mriežka vnútri by nechala v riadku po 3 slová. */
		.pozicia-oblasti-zoznam,
		.pozicia-ponukame-zoznam {
			display: grid;
			gap: var(--space-lg);
		}

		.pozicia-oblast-nazov,
		.pozicia-ponukame-polozka .pozicia-oblast-nazov {
			margin: 0 0 var(--space-sm);
			font-size: var(--nadpis-7-velkost);
			line-height: var(--nadpis-7-riadok);
			letter-spacing: var(--nadpis-7-preloz);
			font-weight: var(--vaha-nadpis-7);
		}

		/* BOČNÝ PANEL.
		 *
		 * Farba `rgba(248, 248, 248, .973)` a rádius 4 px z predlohy sedia
		 * takmer presne na naše `--theme-surface-surface-container` (#F8F9FC)
		 * a `--shape-corner-xs` — netreba vlastné čísla.
		 *
		 * Vodorovná výplň predlohy je 101,65 px na 598 px širokom paneli,
		 * teda 17 % šírky. Toľko si nedávame: náš stĺpec obsahu je užší
		 * (1121 px oproti ich 1300), takže by na text zostalo cez 300 px
		 * a riadky by mali po štyri slová. `--space-2xl` (48 px) drží ten
		 * istý pocit vzdušnosti pri čitateľnom riadku. */
		.pozicia-panel {
			background: var(--theme-surface-surface-container);
			border: 0.8px solid var(--theme-outline-variant);
			border-radius: var(--shape-corner-xs);

			padding: var(--space-xl) var(--space-lg);

			@media (width >= 768px) {
				padding: var(--space-2xl);
			}
		}

		.pozicia-panel-nadpis {
			margin-block: var(--space-2xl) var(--space-lg);
			font-size: var(--nadpis-6-velkost);
			line-height: var(--nadpis-6-riadok);
			letter-spacing: var(--nadpis-6-preloz);
			font-weight: var(--vaha-nadpis-7);

			/* Prvý nadpis v paneli nemá nad sebou čo oddeľovať. */
			&:first-child {
				margin-block-start: 0;
			}
		}

		.pozicia-ponukame-polozka {
			padding-block-start: var(--space-md);
			border-top: 0.8px solid var(--theme-outline-variant);
		}

		.pozicia-faq-zoznam {
			display: grid;
			border-top: 0.8px solid var(--theme-outline-variant);
		}

		.pozicia-faq-polozka {
			border-bottom: 0.8px solid var(--theme-outline-variant);

			summary {
				list-style: none;
				cursor: pointer;

				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: var(--space-md);

				padding-block: var(--space-md);
				font-weight: var(--vaha-nadpis-7);

				&::-webkit-details-marker {
					display: none;
				}

				&::after {
					content: 'add';
					flex: none;
					font-family: 'Material Symbols Outlined';
					font-size: 20px;
					line-height: 1;
					font-weight: normal;
					font-style: normal;
					letter-spacing: normal;
					text-transform: none;
					white-space: nowrap;
					word-wrap: normal;
					direction: ltr;
					-webkit-font-feature-settings: 'liga';
					color: var(--theme-surface-on-surface-variant);
					transition: rotate .15s ease-out;
				}
			}

			&[open] summary::after {
				rotate: 45deg;
			}

			p {
				margin: 0 0 var(--space-lg);
				color: var(--theme-surface-on-surface-variant);
			}
		}

		.pozicia-vyhody-zoznam {
			display: grid;
			gap: var(--space-sm) var(--space-2xl);
			margin: var(--space-lg) 0 0;
			padding: 0;
			list-style: none;

			@media (width >= 768px) {
				grid-template-columns: repeat(2, 1fr);
			}

			li {
				position: relative;
				padding-inline-start: var(--space-lg);

				&::before {
					content: 'check';
					position: absolute;
					inset-inline-start: 0;
					font-family: 'Material Symbols Outlined';
					font-size: 18px;
					line-height: 1;
					font-weight: normal;
					font-style: normal;
					letter-spacing: normal;
					text-transform: none;
					white-space: nowrap;
					word-wrap: normal;
					direction: ltr;
					-webkit-font-feature-settings: 'liga';
					color: var(--theme-surface-on-surface-variant);
				}
			}
		}
	}

	/* REFERENČNÉ PROJEKTY — `/projekty/pre-firmy` a `/projekty/verejna-sprava`.
	 *
	 * Pribudlo 13. 9. 2026. Je to dlhý text, nie karty: projekty majú dva až
	 * štyri odseky a v mriežke by sa buď orezali, alebo by karty mali každá
	 * inú výšku. Zoznam pod sebou je aj rýchlejší na čítanie, keď ide o to,
	 * čo sa kde robilo.
	 */
	@layer projekty {
		/* PREPÍNAČ SEKTOROV pod nadpisom stránky. Dve položky, takže rad,
		   nie výber — je to lacnejšie na jedno kliknutie aj na pochopenie. */
		.projekty-prepinac {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-sm) var(--space-lg);
			margin-block-start: var(--space-xl);
			font-size: 16px;

			a {
				color: var(--theme-surface-on-surface-variant);
				text-decoration: none;
				border-bottom: 1px solid var(--theme-outline-variant);

				&:hover {
					color: var(--theme-surface-on-surface);
					border-bottom-color: currentColor;
				}
			}
		}

		/* Aktívny sektor nie je odkaz, takže potrebuje vlastnú váhu — inak by
		   sa v rade stratil a človek by nevedel, kde je. */
		.projekty-prepinac-aktivny {
			color: var(--theme-surface-on-surface);
			font-weight: 500;
		}

		.projekty {
			/* Číslovanie preč: poradie projektov nie je rebríček a `<ol>` je
			   tu kvôli tomu, aby čítačka ohlásila počet položiek. */
			list-style: none;
			margin: 0;
			padding: 0;

			display: grid;
			gap: var(--space-3xl, 64px);
		}

		.projekt {
			/* Šírka textu v `ch`, nie v px: riadok tak drží čitateľnú dĺžku
			   na každej šírke okna. Tá istá miera ako v článkoch. */
			max-inline-size: 72ch;

			/* Odsadenie a linka vľavo namiesto vodorovného oddeľovača —
			   zoznam sa tým číta ako jeden stĺpec a nie ako sekcie. */
			padding-inline-start: var(--space-lg);
			border-inline-start: 2px solid var(--theme-outline-variant);

			p + p {
				margin-block-start: var(--space-md);
			}
		}

		.projekt-nazov {
			margin-block-end: var(--space-xs);
		}

		/* Podnázov je formálny názov systému alebo zákazky. Menší a tlmený,
		   aby nekonkuroval nadpisu, ale nad prvým odsekom — patrí k názvu. */
		.projekt-podnazov {
			margin-block: 0 var(--space-md);
			font-size: 16px;
			color: var(--theme-surface-on-surface-variant);
		}

		/* Štítok sektora. LEN NA PREHĽADE — na stránke sektora je sektor
		   v nadpise a štítok by opakoval to isté pri každom projekte.
		   Je to odkaz, takže z prehľadu vedie priamo do daného sektora. */
		.projekt-sektor {
			margin-block: 0 var(--space-md);
			font-size: 13px;

			a {
				display: inline-block;
				padding: .15em .7em;
				border: 1px solid var(--theme-outline-variant);
				border-radius: 999px;
				color: var(--theme-surface-on-surface-variant);
				text-decoration: none;

				&:hover {
					color: var(--theme-surface-on-surface);
					border-color: currentColor;
				}
			}
		}

		@media (width < 768px) {
			.projekt {
				padding-inline-start: var(--space-md);
			}
		}
	}
}

@layer layout {
	/* VÝZVA — tmavý panel, ktorý sa pri scrollovaní rozopne zo vsadeného
	 * zaobleného obdĺžnika na celú šírku okna. Stojí na mieste, kde do
	 * 10. 8. 2026 bolo video.
	 *
	 * Prevzaté z anthropic.com, odmerané na živej stránke pri okne 1440 × 900:
	 *
	 *   vrch sekcie 458 px (vstupuje)  →  vsadenie 70 px, zaoblenie 24 px
	 *   vrch sekcie 228 px             →  vsadenie 56 px, zaoblenie 19 px
	 *   vrch sekcie   0 px (na vrchu)  →  vsadenie  0,    zaoblenie  0
	 *
	 * Priebeh NIE JE lineárny: v polovici dráhy je hotová len pätina, teda
	 * pomalý rozbeh a zrýchlenie na konci. Sedí na `--ease-in-cubic`.
	 *
	 * Rozsah je písaný fázami `view()`, nie percentami `cover`, aby sa
	 * neviazal na jednu výšku okna. `exit 0%` je presne okamih, keď vrch
	 * sekcie dosiahne vrch okna — tam je panel na celej šírke, rovnako ako
	 * u nich. `entry 70%` znamená „keď je vidno 70 % panelu"; predloha
	 * začína pri 68,5 %, teda prakticky v tej istej chvíli.
	 *
	 * Odmerané hodnoty obsahu (anthropic.com, okno 1440):
	 *   panel      pozadie rgb(20, 20, 19), výška 645 px
	 *   nadpis     60,87 / 66,95 px, váha 400, farba rgb(250, 249, 245),
	 *              pätkové písmo, na stred, šírka 608 px, 195 px od vrchu
	 *   perex      20 / 28 px, váha 400, medzera 32 px nad aj pod
	 *   tlačidlo   137 × 36 px, pozadie rgb(250, 249, 245), zaoblenie 8 px,
	 *              výplň 8/16 px, písmo 16 px, farba rgb(20, 20, 19)
	 *
	 * Dve vedomé odchýlky: nadpis je v NAŠOM bezpätkovom písme a na našej
	 * škále `--nadpis-3-*` (54 px namiesto ich 60,9 px pätkových) — kvôli
	 * jednému nadpisu nemá zmysel ťahať ďalšiu rodinu písma. A šírka textu
	 * je v `ch` namiesto pevných 608 px, aby sa lámala rovnako na každej
	 * šírke okna.
	 */
	@layer vyzva {
		@property --vyzva-rozopnutie {
			syntax: "<number>";
			inherits: true;
			initial-value: 1;
		}

		@keyframes vyzva-rozopnutie {
			from { --vyzva-rozopnutie: 1; }
			to   { --vyzva-rozopnutie: 0; }
		}

		#vyzva {
			grid-column: fullbleed;

			/* Jedna premenná riadi vsadenie aj zaoblenie, takže sa nemôžu
			   rozísť. Dve samostatné animácie by sa rozchádzali: každá by
			   mala vlastnú `view()` os a tá závisí od výšky prvku, ktorá sa
			   pri rozopínaní mení. */
			padding-inline: calc(var(--page-margin) * var(--vyzva-rozopnutie));

			animation: vyzva-rozopnutie var(--ease-in-cubic) both;
			animation-timeline: view();
			animation-range: entry 70% exit 0%;

			/* Bez podpory scroll animácií zostane panel vsadený a zaoblený —
			   teda v počiatočnom stave, ktorý je sám o sebe v poriadku. */
		}

		.vyzva-panel {
			display: grid;
			place-items: center;

			/* 645 px pri okne 900 px, teda 72 % výšky okna. Pomer, nie pevná
			   hodnota — na nižšom okne by pevných 645 px vytlačilo obsah. */
			min-height: 72dvh;
			padding-block: 120px;

			/* POZADIE JE OBRÁZOK OD ZADÁVATEĽA (14. 9. 2026).
			 *
			 * Predtým tu bola naša kresba `mesto.svg`, ktorá mala kontrast
			 * vyriešený priamo v sebe — pod textom mala tmavý závoj. Nový
			 * obrázok taký závoj nemá, takže ho musí dorobiť CSS.
			 *
			 * ZÁVOJ NIE JE ODHAD. Zmeraný na skutočnom súbore: vzorkovaných
			 * 53 070 bodov v oblasti, kde leží text, a rátaný kontrast voči
			 * bielej podľa WCAG.
			 *
			 *   bez závoja   95. percentil 2,93 : 1   najhorší bod 1,11 : 1
			 *   40 %         95. percentil 6,87 : 1   najhorší bod 3,12 : 1
			 *   55 %         95. percentil 9,81 : 1   najhorší bod 5,15 : 1
			 *
			 * Bez závoja teda nevyhovie ani nadpis (3,0 : 1) a na monitore
			 * v obrázku by bolo biele na skoro bielom. Až pri 55 % vyhovie
			 * perex (4,5 : 1) aj v NAJHORŠOM bode, nielen priemerne.
			 *
			 * Preto pás, nie plocha: 58 % v strednej tretine, kde text sedí,
			 * a 30 % pri hranách, aby robot aj stôl zostali vidieť. Plochých
			 * 58 % by obrázok zhaslo celý.
			 *
			 * Tmavá farba pod obrázkom zostáva: kým sa načíta, panel je tmavý
			 * a svetlý text na ňom drží kontrast.
			 *
			 * WebP a nie PNG: zadávateľov súbor mal 2,78 MB, čo je na pozadie
			 * domovskej stránky priveľa. Pri kvalite 82 má 238 kB, teda o 92 %
			 * menej. Zdrojové PNG zostáva na disku, do repozitára nejde. */
			background:
				linear-gradient(
					to bottom,
					rgb(0 0 0 / .30) 0%,
					rgb(0 0 0 / .58) 28%,
					rgb(0 0 0 / .58) 72%,
					rgb(0 0 0 / .30) 100%
				),
				var(--palette-grey-1100) url("../img/vyzva/platforma-pozadie.webp") center / cover no-repeat;

			border-radius: calc(var(--shape-corner-lg) * var(--vyzva-rozopnutie));
			overflow: clip;

			/* Kotva pre úvodné video, ktoré leží cez celý panel. */
			position: relative;
		}

		/* ÚVODNÉ VIDEO — prekryje oblohu, prehrá sa raz a odíde.
		 *
		 * Prechod 0,8 s a krivka sú odmerané na predlohe. Spúšťa a skrýva ho
		 * `app.js`; sem patrí len to, ako vyzerá.
		 *
		 * `object-fit: cover` zámerne: video je 1920 × 1080, panel má iný
		 * pomer a rozťahovať ho by scénu skreslilo. */
		.vyzva-video {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;

			opacity: 1;
			transition: opacity .8s cubic-bezier(.22, .61, .36, 1);
		}

		/* Po dobehnutí. Nie `display: none` — prechod by nemal čo prelínať. */
		.vyzva-video.je-skryte {
			opacity: 0;
			pointer-events: none;
		}

		/* Kto má vypnuté animácie, video nikdy nedostane. `app.js` ho ani
		   nespustí, toto je poistka, aby neostalo visieť cez oblohu. */
		@media (prefers-reduced-motion: reduce) {
			.vyzva-video {
				display: none;
			}
		}

		.vyzva-obsah {
			/* Nadpis a perex majú od 3. 9. 2026 RÔZNE šírky — dovtedy tu bol
			   jeden spoločný blok 608 px. Odmerané na ich paneli 944 px
			   širokom: nadpis 549 px (58 %), perex 640 px (68 %), teda perex
			   je ŠIRŠÍ než nadpis. Z toho vzniká tvar, ktorý ten panel má.

			   Percentá, nie pevné px: náš panel má inú šírku než ich a rástol
			   by inak. Strop v px drží blok pohromade na širokom monitore. */
			display: grid;
			justify-items: center;
			text-align: center;
			padding-inline: var(--space-lg);
			inline-size: 100%;

			/* Nad úvodným videom, ktoré leží cez celý panel. */
			position: relative;
			z-index: 1;
		}

		/* PORADIE SCÉNY: najprv video, potom prechod, až potom texty.
		 *
		 * Tak to má predloha — jej sekcia dostane triedu `is-copy-shown` až
		 * po dobehnutí videa; dovtedy majú nadpis, perex aj tlačidlo
		 * `opacity: 0`. Overené odobratím tej triedy na ich živej stránke.
		 *
		 * `.je-riadene` pridáva `app.js` hneď pri štarte. Bez JavaScriptu
		 * teda trieda nikdy nepribudne a text je normálne vidno — radšej
		 * text bez réžie než panel, v ktorom nie je nič. To isté robí
		 * tlačidlo „Späť hore", viď `@layer spat-hore`. */
		.vyzva-obsah.je-riadene {
			opacity: 0;
			transition: opacity .6s var(--ease-out-cubic);
		}

		.vyzva-obsah.je-riadene.je-viditelne {
			opacity: 1;
		}

		.vyzva-nadpis {
			/* Základné `h2` má na desktope `width: 50%` — v paneli by nadpis
			   stlačilo na polovicu. */
			width: auto;
			max-width: none;
			margin: 0;

			inline-size: min(58%, 549px);

			/* Serif LEN tu. Pôvod je z predlohy (anthropic.com má tu
			   „Anthropic Serif", my jej Georgia fallback). Panel je od
			   7. 9. 2026 obsahovo náš, ale serif ZOSTÁVA ako vedomá voľba:
			   je to jediné miesto na webe s pätkovým písmom a práve tým
			   ohlasuje, že tu ide o produkt, nie o ďalšiu sekciu textu.
			   Keby sa mal zjednotiť so zvyškom, stačí zmazať tento riadok. */
			font-family: Georgia, "Times New Roman", serif;

			font-size: var(--nadpis-3-velkost);
			line-height: var(--nadpis-3-riadok);
			letter-spacing: var(--nadpis-3-preloz);
			font-weight: var(--vaha-nadpis);
			color: var(--theme-surface-inverse-on-surface);

			/* `balance` tu NIE JE. Riadky sú v značkovaní zadané ručne, lebo
			   druhý sa zarovnáva vpravo — vyvažovač by ich prelámal inak. */
			text-align: start;

			/* Pod 768 px sa diagonála stráca: v úzkom stĺpci by sa každý
			   riadok aj tak zalomil a zarovnanie vpravo by pôsobilo ako chyba
			   sadzby. Tam je nadpis na celú šírku a na stred, ako zvyšok. */
			@media (width < 768px) {
				inline-size: 100%;
				text-align: center;
			}
		}

		.vyzva-riadok {
			display: block;
		}

		/* Druhý riadok vpravo — charakteristické gesto ich panelu. */
		.vyzva-riadok-vpravo {
			text-align: end;

			@media (width < 768px) {
				text-align: center;
			}
		}

		.vyzva-perex {
			/* 20/28 px u nich; naša škála `telo` má 17,5/25,38 — o čosi
			   menšie, ale sedí so zvyškom stránky. Medzera 36 px je naša
			   `--space-xl`, ich 32. */
			inline-size: min(68%, 640px);
			max-width: none;

			/* Percento platí len tam, kde je panel široký. Pod 768 px by
			   68 % z úzkeho panelu dalo 153 px a perex by mal 17 znakov na
			   riadok — presne tá chyba, ktorú má ošetrenú nadpis nad ním.
			   Nájdené auditom responzívnosti 3. 9. 2026. */
			@media (width < 768px) {
				inline-size: 100%;
			}

			margin-block: var(--space-xl);

			/* 24/33,6 px — pôvodne prevzaté z predlohy, ponechané zámerne.
			   24 px sa podľa WCAG ráta ako veľký text, takže mu na scéne
			   stačí kontrast 3 : 1; pri našich 17,5 px by potreboval 4,5 : 1.
			   Nová scéna `mesto.svg` má pod textom tmavý závoj a kontrast
			   vychádza vysoko nad oboma hranicami — odmerané 7. 9. 2026,
			   čísla sú v commite; kompozícia je v hlavičke `mesto.svg`. */
			font-size: 24px;
			line-height: 33.6px;
			letter-spacing: normal;
			color: var(--theme-surface-inverse-on-surface);
			text-wrap: pretty;
		}

		/* Tlačidlo zámerne NIE JE pilulka — predloha má na tomto mieste
		   zaoblenie 8 px, nie 9999. */
		.vyzva-tlacidlo {
			display: inline-flex;
			align-items: center;
			gap: var(--space-sm);

			padding: var(--space-sm) var(--space-md);
			border-radius: var(--shape-corner-sm);

			background: var(--theme-surface-inverse-on-surface);
			color: var(--theme-surface-on-surface);
			text-decoration: none;

			font-size: 16px;
			line-height: 16px;
			font-weight: var(--vaha-telo);

			transition: .15s background ease-out;

			&:hover,
			&:focus-visible {
				background: var(--palette-grey-100);
			}

			/* Šípka sa pri prejdení posunie — rovnaké gesto ako pri odkazoch
			   v paneloch menu. */
			&:hover .link-arrow,
			&:focus-visible .link-arrow {
				translate: 25% 0;
			}
		}
	}
}

@layer layout {
	/* Prompty AI agentov v praxi — `/ai-akademia/prompty-ai-agentov-v-praxi`.
	   Skladá sa zo slovníka: `.sekcia`, `.nadpis-*`, `.telo`, `.popisok`
	   a `.tlacidlo`. Vlastné je tu len rozloženie karty s promptom. */
	@layer prompty {
		#prompty {
			/* Hlavička je `position: fixed` — bez odsadenia by pod ňou zmizol
			   nadpis. 150 px je tá istá hodnota ako na stránke článku. */
			padding-block: 150px var(--sekcia-rytmus);
		}

		.prompty-hlavicka {
			max-width: 62ch;
			margin-block-end: var(--space-2xl);

			h1 {
				margin-block: var(--space-sm) var(--space-md);
			}
		}

		/* TRI stĺpce, nie jedna karta na riadok.
		 *
		 * Pôvodná predloha má pri okne 1440 px tri stĺpce po 421 px
		 * s medzerou 20 px — odmerané, nie odhadnuté. Štyri by pri našej
		 * osi obsahu dali 284 px a 300-znakový prompt by z toho spravil
		 * úzky vysoký stĺpec textu.
		 *
		 * Pod 1280 px dva, pod 768 px jeden.
		 */
		.prompty-zoznam {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-lg);
			margin: 0;
			padding: 0;
			list-style: none;
			counter-reset: prompt;

			@media (width < 1280px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			@media (width < 768px) {
				grid-template-columns: minmax(0, 1fr);
			}
		}

		.prompt {
			/* Karta je stĺpec, aby sa akcie dali pritlačiť na spodok. Karty
			   v jednom riadku sa naťahujú na výšku tej najvyššej (východiskový
			   `stretch`), takže tlačidlá sedia na jednej čiare. */
			display: flex;
			flex-direction: column;

			padding: var(--space-lg);
			border: 0.8px solid var(--theme-surface-surface-container-higher);
			border-radius: var(--shape-corner-lg);
			background: var(--theme-surface-surface);

			/* Karta sa pri prejdení jemne zvýrazní — nie je klikateľná ako
			   celok, takže žiadny posun ani tieň, len linka. */
			transition: border-color .15s ease-out;

			&:hover {
				border-color: var(--theme-outline);
			}
		}

		/* Štítok je malý, stlmený a s číslom poradia — na pôvodnej stránke
		   plní tú istú úlohu (byty, domácnosť, kalkulačka…). */
		.prompt-stitok {
			counter-increment: prompt;
			margin-block-end: var(--space-xs);

			&::before {
				content: counter(prompt, decimal-leading-zero) " · ";
				color: var(--theme-outline);
			}
		}

		.prompt-nadpis {
			margin-block-end: var(--space-md);
		}

		/* Text promptu je to, čo si človek odnáša, takže má vlastnú plochu —
		   ale zostáva prózou, nie kódom: bezpätkové písmo, nie monospace. */
		.prompt-text {
			margin: 0 0 var(--space-lg);
			padding: var(--space-md);
			border-radius: var(--shape-corner-sm);
			background: var(--theme-surface-surface-container);

			font-size: var(--telo-velkost);
			line-height: var(--telo-riadok);
			letter-spacing: var(--telo-preloz);
			color: var(--theme-surface-on-surface-variant);
			text-wrap: pretty;
		}

		/* Tlačidlá pod sebou na celú šírku karty — v stĺpci širokom ~395 px
		   sa vedľa seba nezmestia. `margin-block-start: auto` ich pritlačí na
		   spodok, takže vo vyrovnanom riadku kariet sedia na jednej čiare. */
		.prompt-akcie {
			display: grid;
			gap: var(--space-sm);
			margin-block-start: auto;

			.tlacidlo {
				justify-content: center;
			}
		}

		/* Ikony v tlačidlách sú menšie než ich východiskových 24 px — pri
		   texte 15/17,5 px by inak tlačidlo roztiahli. */
		.prompt-akcie .material-symbols-outlined {
			font-size: 18px;
		}

		/* Po skopírovaní tlačidlo na chvíľu potvrdí, že sa niečo stalo.
		   Bez toho klik nedá spätnú väzbu a človek klikne znova. */
		.tlacidlo[data-kopiruj][data-hotovo] {
			background: var(--theme-surface-surface-container-high);
			color: var(--theme-surface-on-surface);
		}

	}
}

@layer components {
	/* SPÄŤ HORE — koliesko so šípkou, ktoré sa vynorí až po odscrollovaní.
	 *
	 * Je to ODKAZ na kotvu `#top` (na `<body>`), nie tlačidlo s JS:
	 * funguje bez JavaScriptu, klávesnica ho nájde v poradí sama
	 * a plynulý posun spraví prehliadač cez `scroll-behavior`.
	 *
	 * VPRAVO dole — kde ho väčšina stránok má a kde ho oko hľadá.
	 * Krátko (27. 8. 2026) bolo vľavo, na želanie presunuté doprava.
	 */
	@layer spat-hore {
		/* Plynulý posun pre celú stránku — kvôli kotve `#top`. Doteraz ho
		   mali len karusely, každý zvlášť. Pri zapnutom obmedzení pohybu
		   sa vypína: skok je vtedy okamžitý, čo je presne to, čo si
		   nastavenie pýta. */
		@media (prefers-reduced-motion: no-preference) {
			html {
				scroll-behavior: smooth;
			}
		}

		/* Spoločný obal plávajúcich prvkov. Fixovaný je LEN on — šípka
		   a ponuka konzultácie v ňom sedia v bežnom toku, takže sa
		   nemôžu prekryť a po zavretí ponuky si šípka sadne nižšie sama.

		   `align-items: flex-end` — šípka je užšia než karta a má sedieť
		   pri pravom okraji, nie na stred stĺpca.

		   `pointer-events` sa vypína na obale a zapína na deťoch: obal je
		   kvôli karte široký a bez toho by neviditeľný pás vedľa šípky
		   bral kliky obsahu pod sebou. */
		.plavajuce {
			position: fixed;
			inset-block-end: var(--space-lg);
			inset-inline-end: var(--space-lg);
			z-index: 97;

			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: var(--space-md);

			pointer-events: none;

			> * {
				pointer-events: auto;
			}

			/* Odsadenie od okraja rastie s plochou — pri širokom okne by
			   16 px pri kraji vyzeralo prilepene. */
			@media (width >= 1024px) {
				inset-block-end: var(--space-xl);
				inset-inline-end: var(--space-xl);
			}
		}

		.spat-hore {
			/* Polohu drží `.plavajuce`, tu už len tvar. */
			flex: none;

			/* 48 px je najmenší rozumný cieľ pre prst; WCAG žiada 44. */
			inline-size: 48px;
			block-size: 48px;
			border-radius: 50%;

			display: grid;
			place-content: center;

			background: var(--theme-primary-primary);
			color: var(--theme-primary-on-primary);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				background: var(--theme-button-states-primary-hovered);
			}
		}

		/* Ikonu ZÁMERNE nezmenšujeme: Google Fonts servíruje
		   `.material-symbols-outlined { font-size: 24px }` BEZ vrstvy
		   a nezaradená deklarácia prebije každú `@layer` bez ohľadu na
		   špecificitu (viď poznámka na konci súboru). 24 px v 48 px
		   koliesku je aj tak presne to, čo chceme. */

		/* Vynorenie drží JavaScript triedou, NIE skrolovacia os.
		 *
		 * Prvá verzia to skúšala čisto v CSS cez
		 * `animation-timeline: scroll(root block)` s `animation-range:
		 * 200px 400px`. Vyzeralo to elegantne, ale nefungovalo: dĺžky
		 * v `animation-range` sa na skrolovacej osi prepočítajú na
		 * PERCENTO celej rolovateľnej dĺžky, takže prah putuje s výškou
		 * stránky. Odmerané na domovskej stránke (9075 px): tlačidlo
		 * nábehlo až okolo 2000 px namiesto 400. Na krátkej stránke by
		 * naopak nábehlo hneď.
		 *
		 * Prah je teda v `app.js` ako číslo v pixeloch a znamená presne
		 * to, čo hovorí, na každej stránke rovnako.
		 *
		 * `.je-riadene` pridáva skript hneď pri štarte. Bez JavaScriptu
		 * teda trieda nikdy nepribudne a tlačidlo zostane viditeľné —
		 * radšej o prvok navyše na vrchu stránky než nedostupný návrat
		 * hore. */
		.spat-hore.je-riadene {
			opacity: 0;
			translate: 0 12px;
			pointer-events: none;

			transition: opacity .2s var(--ease-out-cubic),
			            translate .2s var(--ease-out-cubic);

			/* Pri obmedzení pohybu zostáva len prelínanie, bez posunu. */
			@media (prefers-reduced-motion: reduce) {
				translate: none;
				transition: opacity .2s var(--ease-out-cubic);
			}
		}

		.spat-hore.je-riadene.je-viditelne {
			opacity: 1;
			translate: 0 0;
			pointer-events: auto;
		}
	}

	/* PONUKA KONZULTÁCIE — plávajúca karta vpravo dole.
	 *
	 * Rozloženie 1:1 podľa `ui42.sk`, odmerané na živej stránke:
	 * karta 345 × 95 px, zaoblenie 8 px, výplň 20 px / 20 px / 16 px,
	 * medzera 24 px medzi textom a krížikom, ikona NAD nadpisom,
	 * nadpis 18 px / 700, krížik 26 px. Obal je `fixed` s odsadením
	 * 16 px od pravého dolného rohu.
	 *
	 * FARBY SÚ ICH, 1:1 — na výslovné želanie zadávateľa. Prvá verzia
	 * mala kartu v našej čiernej; teraz je to ich sýtožltá `#ffc146`
	 * s tmavomodrým textom `#13174b`. Odmerané na živej stránke, vrátane
	 * toho, že karta NEMÁ rám ani tieň a `:hover` mení len kurzor.
	 *
	 * Sú to jediné dve farby na celom webe mimo nášho slovníka, preto
	 * majú vlastné premenné hneď na karte — nech je na jednom mieste
	 * vidno, čo je prevzaté a čo naše.
	 *
	 * Zaoblenie 8 px predlohy sedí na náš `--shape-corner-sm`, takže
	 * ani tam netreba vlastné číslo.
	 */
	@layer konzultacia {
		/* KARTA SA VYNORÍ AŽ PO ODSCROLLOVANÍ — rovnako ako šípka „Späť hore".
		 * Rozhodnutie zadávateľa zo 4. 9. 2026; prah drží `app.js`.
		 *
		 * Do toho dňa sa karta ukazovala hneď a skrývala sa len vtedy, keď sedela
		 * na výzvach v hero — o tom rozhodovalo porovnanie obdĺžnikov v skripte.
		 * Bolo to krehké a pri bežných rozlíšeniach notebooku karta mizla, hoci
		 * zakrývala pár percent. Nové pravidlo ten problém ruší samo: na vrchu
		 * stránky karta nie je vôbec.
		 *
		 * Tu je len vzhľad oboch stavov, rovnaký vzor ako pri `@layer spat-hore`.
		 *
		 * `.je-riadene` pridáva skript hneď pri štarte. Bez JavaScriptu trieda
		 * nikdy nepribudne a karta zostane viditeľná — rovnaké rozhodnutie ako
		 * pri zatváraní krížikom.
		 *
		 * `visibility` navyše oproti `.spat-hore`: karta je v skrytom stave na
		 * PRVEJ obrazovke, takže by ju klávesnica našla a fokus by skočil na
		 * neviditeľný odkaz. Samotné `opacity: 0` prvok z poradia nevyberie. */
		.konzultacia.je-riadene {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;

			/* `visibility` sa prepína až PO dobehnutí prelínania, inak by karta
			   zmizla skokom a prelínanie by nebolo vidieť. */
			transition: opacity .2s var(--ease-out-cubic),
			            visibility 0s linear .2s;
		}

		.konzultacia.je-riadene.je-viditelne {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;

			/* Pri odkrývaní naopak hneď — inak by prvé snímky prelínania
			   prebehli na neviditeľnom prvku. */
			transition: opacity .2s var(--ease-out-cubic),
			            visibility 0s;
		}

		.konzultacia {
			/* Prevzaté farby predlohy. Inde na webe sa nepoužívajú. */
			--konzultacia-podklad: #ffc146;
			--konzultacia-text: #13174b;

			flex: none;
			display: flex;
			align-items: flex-start;

			/* 24 px ako predloha. Vyšlo to až po tom, čo krížik dostal
			   šírku 26 px (viď nižšie) — pri širšom tlačidle sa nadpis
			   zalamoval a karta rástla zo 95 na 123 px. */
			gap: 24px;

			/* 396 px, nie 345 ako predloha (ui42.sk). Text sa 3. 9. 2026
			   zmenil na „Získajte konzultáciu u nás zadarmo" a ten sa do
			   345 px nezmestí: pri 18 px a váhe 700 potrebuje 302 px, kým
			   karta mu po odrátaní výplne, medzery a krížika dávala 255.
			   Zalamoval sa preto na dva riadky.
			   396 = 302 (text) + 20 + 20 (výplň) + 24 (medzera) + 26 (krížik).

			   Rozšírená karta je vedomá odchýlka od predlohy — text má
			   prednosť pred zhodou v pixeloch.

			   `max-width` kvôli úzkym oknám: pod ~440 px sa karta zúži na
			   šírku okna a nadpis sa zalomí na dva riadky. Tak to má byť —
			   na telefóne je dvojriadkový nadpis v poriadku, na monitore
			   pôsobil ako chyba sadzby. */
			inline-size: 396px;
			max-inline-size: calc(100vw - 2 * var(--space-lg));

			padding: 20px 20px 16px;
			border-radius: var(--shape-corner-sm);

			background: var(--konzultacia-podklad);
			color: var(--konzultacia-text);
		}

		/* Hlavná akcia zaberá celú kartu okrem krížika. Je to `<button>`
		   bez vlastného vzhľadu — kartu kreslí rodič.

		   `display: block`, nie flex: predloha má ikonu a nadpis v bežnom
		   toku pod sebou a odstup medzi nimi drží `margin-top` nadpisu
		   (16 px). Rovnaká skladba tu dáva rovnakú výšku bloku (58,9 px). */
		.konzultacia-akcia {
			flex: 1;
			display: block;

			padding: 0;
			border: 0;
			background: none;
			color: inherit;

			/* Od 2. 9. 2026 je to `<a href="mailto:…">`, nie `<button>` —
			   a prehliadač odkazu podčiarkne text. Karta má podčiarknuť až
			   pri prejdení myšou (pravidlo nižšie), takže sa to musí vypnúť.
			   Kým to tu nebolo, nadpis v karte bol podčiarknutý stále. */
			text-decoration: none;

			text-align: start;
			cursor: pointer;

			&:hover .konzultacia-nadpis,
			&:focus-visible .konzultacia-nadpis {
				text-decoration: underline;
			}
		}

		/* 18 px / 700 / riadok 20 px — presne ako predloha. Ich písmo
		   (PP Neue Machina) je licencované, takže zostáva naše; rozmery
		   sú ich.

		   `letter-spacing: -.2px` je jediná pridaná hodnota a má dôvod:
		   Google Sans Flex je širšie než ich písmo, takže tá istá veta
		   pri 18 px potrebuje 259 px, kým stĺpec má 255 (rovnako ako
		   predloha). Zalomila sa na dva riadky a karta narástla zo 95
		   na 118 px.

		   Namiesto zmenšenia písma sa uberá 0,2 px na znak — pri 27
		   znakoch je to 5,4 px, teda presne toľko, koľko treba, a na oko
		   sa to nedá spozorovať. Veľkosť tak zostáva doslova 18 px. */
		.konzultacia-nadpis {
			display: block;
			margin-block-start: 16px;

			font-size: 18px;
			line-height: 20px;
			letter-spacing: -.2px;
			font-weight: var(--vaha-nadpis-7);
		}

		/* Krížik má 26 px ako predloha, ale cieľ pre prst musí mať aspoň
		   44 px (WCAG). Rieši to `::after` s roztiahnutým `inset` —
		   plocha na klikanie narastie, ale ROZLOŽENIE zostane 26 px,
		   takže na nadpis vedľa ostane presne 255 px ako v predlohe.
		   Väčšie tlačidlo by mu 18 px ukrojilo a nadpis by sa zalomil. */
		.konzultacia-zavriet {
			position: relative;
			flex: none;
			display: grid;
			place-content: center;

			inline-size: 26px;
			block-size: 26px;

			padding: 0;
			border: 0;
			background: none;
			color: inherit;
			cursor: pointer;

			&::after {
				content: "";
				position: absolute;
				inset: -9px;
			}

			/* Predloha na `:hover` nemení nič okrem kurzora. Pridané je
			   len stmavenie, aby bolo vidieť, že prvok reaguje —
			   `color-mix` drží odtieň, len uberie jas. */
			&:hover,
			&:focus-visible {
				color: color-mix(in oklab, var(--konzultacia-text) 70%, #fff);
			}
		}

		/* Ikony ZÁMERNE bez triedy `material-symbols-outlined` — Google
		   Fonts ju servíruje s `font-size: 24px` BEZ vrstvy a prebije
		   každú `@layer` (viď poznámka na konci súboru). Krížik má mať
		   26 px podľa predlohy, čo by sa inak nedalo nastaviť. */
		.konzultacia-ikona,
		.konzultacia-ikona-zavriet {
			font-family: 'Material Symbols Outlined';
			line-height: 1;
			font-weight: normal;
			font-style: normal;
			letter-spacing: normal;
			text-transform: none;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-webkit-font-feature-settings: 'liga';
		}

		/* Predloha má vlastný značkový glyf („účko") 32 × 16 px v riadku
		   vysokom 22,86 px. Ten je ICH ASSET, prevziať sa nedá, takže
		   tu je ikona z Material Symbols.

		   `line-height: 22.86px` je z predlohy: spolu s odstupom 16 px
		   a nadpisom (20 px) dáva blok 58,9 px a kartu 94,9 px. Bez neho
		   by karta na tú istú výšku nesadla.

		   `display: block`, nie `inline-flex`: riadková ikona si v bloku
		   vypýta riadkový box podľa `line-height` RODIČA (25,38 px), nie
		   podľa svojho — karta tak bola o 2,8 px vyššia. Blokový prvok
		   žiadny riadkový box nezakladá a výšku si drží sám. */
		.konzultacia-ikona {
			display: block;
			font-size: 22px;
			line-height: 22.86px;
		}

		.konzultacia-ikona-zavriet {
			font-size: 26px;
		}

		/* Zavretú ponuku si pamätá `app.js` v `localStorage`. */
		.konzultacia[hidden] {
			display: none;
		}
	}
}

@layer components {
	/* Kategória navigácie, ktorá zatiaľ nemá kam viesť („Lab").
	   V značkovaní je to `<span>`, nie `<a href="#">` — na span sa nedá
	   kliknúť ani sa naň nedostane tabulátorom, kým odkaz na `#` by sa
	   tváril funkčne a po kliku by len skočil na začiatok stránky. To isté
	   rozhodnutie stojí za `<button disabled>` pri „Zákazníckej zóne".

	   Vzhľad si berie od susedných odkazov (`nav > ul > li > :is(…)`,
	   `.mapa-odkaz`, `.footer-nav-label`), aby v rade nevznikla diera.
	   Odlišuje sa tým, že nereaguje na prejdenie myšou — zvýraznenia sú
	   pri každom z tých troch miest vypnuté cez `:not(.nav-neaktivne)`.

	   `cursor` `<span>` už má správny; je tu napísaný zámerne, aby ho
	   neskoršia zmena pri odkazoch nepritiahla so sebou. */
	.nav-neaktivne {
		cursor: default;
	}
}

/* TEXTOVÉ STRÁNKY — „Kto sme", ESG, „Prípady použitia" a dve právne.
   Pribudlo 2. 9. 2026 z komplexného review.

   JEDNA VRSTVA PRE PÄŤ STRÁNOK ZÁMERNE. Sú to stránky s rovnakou kostrou
   (nadpis, perex, text, prípadne mriežka kariet) a päť samostatných vrstiev
   by znamenalo päťkrát to isté. Čo je naozaj vlastné jednej stránke — časová
   os, piliere ESG — má tu svoj vlastný blok. */
@layer textove-stranky {
	/* Perex pod nadpisom. Šírka na 62 znakov je tá istá miera, akú používa
	   hlavička sekcie partnerov aj hodnôt. */
	.stranka-perex {
		max-width: 62ch;
		margin-block-start: var(--space-md);
		color: var(--theme-surface-on-surface-variant);
	}

	/* Úvodný text textovej stránky — odsek či dva hneď pod nadpisom a perexom,
	   V TEJ ISTEJ SEKCII. Do 3. 9. 2026 to bola samostatná `<section>` a rytmus
	   sekcií z toho robil 120 px prázdna uprostred jednej myšlienky. Odstup od
	   perexu preto nesie tento blok sám.

	   48 px je viac než odstup medzi odsekmi vnútri `.stranka-text` (24 px)
	   a výrazne menej než rytmus medzi sekciami (120 px) — presne to, čo tu
	   má byť: pokračovanie úvodu, nie nová kapitola.

	   Používa to `/esg` aj `/kto-sme`. Na `/pripady-pouzitia` nie je čo zlučovať,
	   tam má každá sekcia vlastný `h2`. */
	.stranka-uvod {
		margin-block-start: var(--space-2xl);
	}

	/* Rozcestie na chybovej stránke 404. Odrážky preč — je to zoznam ciest,
	   nie výpočet v texte, a s bodkami vyzerá ako poznámka pod čiarou. */
	.chyba-rozcestie {
		list-style: none;
		margin: var(--space-lg) 0;
		padding: 0;

		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.stranka-hlavicka {
		margin-block-end: var(--space-2xl);
	}

	/* Blok súvislého textu. `65ch` je horná hranica pohodlnej dĺžky riadka —
	   to isté číslo, ktoré rieši `TODO.md` bod 1 pri článkoch. */
	.stranka-text {
		max-width: 65ch;

		> p + p,
		> p + h2,
		> ul + h2 {
			margin-block-start: var(--space-lg);
		}

		h2 {
			margin-block-end: var(--space-md);
		}
	}

	.stranka-akcia {
		margin-block-start: var(--space-lg);
	}

	/* ŠTÍTOK „DOPLNIŤ" ODIŠIEL 11. 9. 2026 na pokyn zadávateľa — na ostrej
	   doméne pôsobil ako nedokončená stránka. Pravidlo `.produkt-stitok`
	   je preto preč; markup v `sections/product` tiež. Do 7. 9. 2026 ho
	   zdieľali aj míľniky časovej osi na `/kto-sme`, tá sekcia však odišla
	   skôr, takže štítok už nemal druhého používateľa. */

	/* PILIERE ESG — tri karty vedľa seba.

	   Do 3. 9. 2026 to boli tri bloky pod sebou oddelené linkou. Vedľa seba sa
	   E, S a G porovnajú jedným pohľadom, čo je pri tomto členení celý zmysel.

	   `auto-fit` a nie `repeat(3, 1fr)`: keby pribudol štvrtý pilier, mriežka
	   sa nemá prepisovať. `minmax(min(100%, 260px), 1fr)` je ten istý zápis
	   ako pri službách — `min(100%, …)` je poistka proti pretečeniu na
	   najužšom telefóne, kde je 260 px viac než celá šírka obsahu. */
	.piliere-mriezka {
		list-style: none;
		margin: 0;
		padding: 0;

		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		gap: var(--space-lg);
	}

	.pilier {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);

		padding: var(--space-md);
		border: 0.8px solid var(--theme-outline-variant);
		border-radius: var(--shape-corner-lg);
	}

	/* Ilustrácia HORE, nie dole ako v predlohe: karty služieb na domovskej
	   stránke majú obrázok hore a stránky si nemajú odporovať.
	   `aspect-ratio` drží všetky tri karty rovnaké aj pri rôzne dlhých
	   textoch; `object-fit: cover` sa postará o výrez. */
	.pilier-obrazok {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 848 / 488;
		object-fit: cover;
		border-radius: var(--shape-corner-sm);
		margin-block-end: var(--space-xs);
	}

	/* Nadpis vľavo, písmeno vpravo — ako v predlohe, kde je ikonka v pravom
	   hornom rohu karty. */
	.pilier-hlavicka {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-sm);
	}

	/* Veľké písmeno skratky. `aria-hidden` v značkovaní — samo o sebe by ho
	   čítačka prečítala ako hlásku pred nadpisom. */
	.pilier-skratka {
		flex: none;
		margin: 0;
		font-size: var(--nadpis-4-velkost);
		line-height: 1;
		font-weight: var(--vaha-nadpis);
		color: var(--theme-outline-variant);
	}

	.pilier-nazov {
		margin: 0;
	}

	.pilier-perex {
		margin: 0;
		color: var(--theme-surface-on-surface-variant);
	}

	.pilier-body {
		margin: 0;
		padding-inline-start: 1.2em;

		/* `auto` zhora tlačí zoznam na spodok karty, takže odrážky všetkých
		   troch kariet začínajú v rovnakej výške aj pri rôzne dlhých perexoch. */
		margin-block-start: auto;

		> li + li {
			margin-block-start: var(--space-sm);
		}
	}

	/* SITUÁCIE A ODVETVIA („Prípady použitia") — tá istá mriežka ako služby
	   na domovskej stránke, aby si stránky navzájom neodporovali. */
	.situacie,
	.odvetvia {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-2xl) var(--space-xl);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.situacia,
	.odvetvie {
		padding-block-start: var(--space-md);
		border-block-start: 0.8px solid var(--theme-outline-variant);
	}

	.situacia-nazov,
	.odvetvie-nazov {
		margin: 0 0 var(--space-sm);
		max-width: none;
		font-size: var(--nadpis-7-velkost);
		line-height: var(--nadpis-7-riadok);
		letter-spacing: var(--nadpis-7-preloz);
		font-weight: var(--vaha-nadpis-7);
		text-wrap: balance;
	}

	.situacia-text,
	.odvetvie-text {
		margin: 0;
		color: var(--theme-surface-on-surface-variant);
	}

	/* ── SITUÁCIA: ŠTÍTKY SLUŽIEB A DÔKAZ ─────────────────────────────────
	   Pribudlo 15. 9. 2026, keď sa „Prípady použitia" stali mostom medzi
	   službami na domovskej a projektmi na /projekty. Pod textom situácie sú
	   teraz jeden až dva riadky drobného písma: ktoré služby si vyžiada
	   a na ktorom projekte to máme odpracované.

	   13 px je tá istá veľkosť ako `.projekt-sektor` na /projekty. Sú to
	   rovnaké drobné metaúdaje pri obsahu a mali by vyzerať rovnako. */
	.situacia-sluzby,
	.situacia-dokaz {
		margin: var(--space-md) 0 0;
		font-size: 13px;
		line-height: 1.6;
	}

	/* Štítky služieb sú RÁMČEKY, preto `flex` s `wrap`: na úzkom okne sa majú
	   zalomiť pod seba ako celé pilulky, nie sa roztrhnúť uprostred rámčeka. */
	.situacia-sluzby {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-xs) var(--space-sm);
	}

	/* DÔKAZ ZOSTÁVA BEŽNÝM TEXTOM, nie flexom. Pri dvoch projektoch je medzi
	   nimi čiarka a vo flexe sa z nej stane samostatná položka s medzerou
	   pred sebou — na stránke to vyzeralo ako „Dátové integrácie ,". Text
	   v riadku takú vec nepozná a dlhý názov sa aj tak zalomí. */
	.situacia-dokaz {
		text-wrap: pretty;
	}

	.situacia-dokaz .situacia-popis {
		margin-inline-end: .35em;
	}

	/* Prvý riadok metaúdajov drží väčší odstup od textu situácie než druhý
	   od prvého — patria k sebe a od odseku sa majú oddeliť ako blok. */
	.situacia-sluzby + .situacia-dokaz {
		margin-block-start: var(--space-sm);
	}

	/* „Služby:" a „Odpracované na:". Tlmené, lebo nesú význam len ako popis
	   toho, čo je za nimi. */
	.situacia-popis {
		color: var(--theme-surface-on-surface-variant);
	}

	/* Štítok služby. Vyzerá ako `.projekt-sektor`, ale NIE JE ODKAZ — dôvod
	   je v šablóne. Preto ani `:hover`: čo sa nedá kliknúť, nemá reagovať na
	   myš, inak to človek skúsi a nič sa nestane. */
	.situacia-stitok {
		display: inline-block;
		padding: .15em .7em;
		border: 1px solid var(--theme-outline-variant);
		border-radius: 999px;
		color: var(--theme-surface-on-surface-variant);
	}

	.situacia-dokaz a {
		color: var(--theme-surface-on-surface);
		text-decoration: none;
		border-bottom: 1px solid var(--theme-outline-variant);

		&:hover {
			border-bottom-color: currentColor;
		}
	}

	/* ── REFERENCIE NA „PRÍPADOCH POUŽITIA" ───────────────────────────────
	   Šesť projektov po jednej vete. Celé znenie je na /projekty; tu je to
	   rozcestník, preto jedna veta a odkaz, nie odseky.

	   LINKA VĽAVO, nie hore ako pri situáciách. Situácie sú vlastný obsah
	   tejto stránky a majú vrchnú linku ako služby na domovskej; referencie
	   sú výpožička z /projekty, kde má `.projekt` linku vľavo. Návštevník
	   tak hneď vidí, že je to ten istý druh obsahu, len skrátený. */
	.referencie {
		display: grid;

		/* 340 px, nie 280 ako pri situáciách: pri 280 vyšli na monitore ŠTYRI
		   stĺpce a šesť projektov sa rozpadlo na 4 + 2. Pri 340 sú tri a delia
		   sa 3 + 3. Odmerané pri okne 1440: mriežka 1281 px, medzera 36 px,
		   takže tri stĺpce po 403 px a štvrtý sa už nezmestí.

		   `min(100%, …)` je poistka proti pretečeniu na najužšom telefóne —
		   ten istý zápis ako pri pilieroch ESG a pri službách. */
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
		gap: var(--space-xl);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.referencia {
		padding-inline-start: var(--space-md);
		border-inline-start: 2px solid var(--theme-outline-variant);

		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	.referencia-nazov {
		margin: 0;
		max-width: none;
		font-size: var(--nadpis-7-velkost);
		line-height: var(--nadpis-7-riadok);
		letter-spacing: var(--nadpis-7-preloz);
		font-weight: var(--vaha-nadpis-7);
		text-wrap: balance;

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.referencia-text {
		margin: 0;
		color: var(--theme-surface-on-surface-variant);
	}

	/* Sektor je až POD textom, na rozdiel od /projekty, kde je nad ním.
	   Tam je štítok zároveň odkazom do sektora a patrí k hlavičke; tu je to
	   len zaradenie a zhrnutie je dôležitejšie, takže ide prvé. */
	.referencia-sektor {
		margin: 0;

		/* `auto` zhora tlačí zaradenie na spodok karty, takže sektory všetkých
		   kariet v rade sú v jednej výške aj pri rôzne dlhých vetách. */
		margin-block-start: auto;
		padding-block-start: var(--space-sm);
		font-size: 13px;
		color: var(--theme-surface-on-surface-variant);
	}

	/* Odkaz na konci sekcie — „Celý zoznam služieb", „Celé znenie projektov".
	   Vlastná trieda a nie `.stranka-akcia a`: `.stranka-akcia` nesie na
	   `/pripady-pouzitia` aj tlačidlo `.nav-cta` a to si vzhľad rieši samo. */
	.stranka-odkaz {
		color: var(--theme-surface-on-surface);
		text-decoration: none;
		border-bottom: 1px solid var(--theme-outline-variant);

		&:hover {
			border-bottom-color: currentColor;
		}
	}

	/* ── TECHNOLÓGIE ──────────────────────────────────────────────────────
	   Podsekcia pod „Kde sa v tom pohybujeme" na `/pripady-pouzitia`
	   (15. 9. 2026). Rad log, kostrou zhodný s radom partnerov na domovskej,
	   ale tichší — je to podporný údaj k textu nad ním, nie výkladná skriňa.

	   TRI VEDOMÉ ROZDIELY OPROTI PARTNEROM:

	     1. ŽIADNA VLNA. Partnerské logá sa jemne vlnia a je to tam na mieste,
	        lebo sekcia stojí sama cez celú šírku okna. Uprostred čítaného
	        textu by ten istý pohyb ťahal oko preč od viet okolo.
	     2. MENŠIA MIERKA. Čísla sú v `App\Support\Technologie` — plocha
	        5 100 px² oproti 13 225 px² pri partneroch.
	     3. MENŠIE MEDZERY. Pri partneroch je 48/64 px doladených na to, aby
	        v širokom rade nevznikol riadok s jediným logom. Tu je rad kratší
	        a užší (drží sa šírky textu), takže stačí bežný rytmus stránky. */
	.technologie-blok {
		/* Odstup od mriežky odvetví nad ňou. Väčší než medzera medzi kartami
		   (32 px) a menší než rytmus medzi sekciami (120 px) — presne to, čo
		   podsekcia má hovoriť: patrím sem, ale som samostatná myšlienka.
		   Tá istá úvaha ako pri `.stranka-uvod`. */
		margin-block-start: var(--space-3xl, 64px);
	}

	.technologie-nadpis {
		margin: 0;
		max-width: none;
		text-wrap: balance;
	}

	.technologie-perex {
		max-width: 62ch;
		margin-block: var(--space-sm) 0;
		color: var(--theme-surface-on-surface-variant);
	}

	.technologie-rad {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;

		/* Vodorovná medzera je väčšia než zvislá: logá sú široké a nízke,
		   takže bez toho by rad vyzeral ako riedke stĺpce. Ten istý dôvod
		   ako pri partneroch, len o triedu menšie čísla. */
		gap: var(--space-lg) var(--space-xl);

		margin: var(--space-xl) 0 0;
		padding: 0;
		list-style: none;
	}

	.technologia {
		display: flex;
		align-items: center;
		justify-content: center;

		/* Stopa je presne výška, ktorú tomuto logu spočítal
		   `App\Support\Technologie` — príde inline ako `--vyska`. Prečo nie
		   jedna výška pre všetky, je vysvetlené v `App\Support\LogaRad`. */
		block-size: var(--vyska, 36px);

		@media (width < 768px) {
			/* Na telefóne sa rad láme na štyri až päť riadkov a v mierke pre
			   monitor by zabral pol obrazovky. Zmenšenie je v CSS a nie
			   v PHP zámerne — je to čisto vec šírky okna, nie vlastnosť loga.
			   To isté rieši `--partner-mierka` pri partneroch. */
			block-size: calc(var(--vyska, 36px) * .8);
		}
	}

	.technologia-odkaz {
		display: flex;
		align-items: center;
		block-size: 100%;
	}

	.technologia-logo {
		/* Logo vyplní stopu na výšku a šírku si dopočíta z pomeru strán —
		   stopa je už na mieru tomuto obrázku. Šírku preto NEZASTROPOVAŤ:
		   strop by pomer strán pokazil. */
		block-size: 100%;
		inline-size: auto;

		/* ŠÍRKA SA VYHRADÍ EŠTE PRED NAČÍTANÍM OBRÁZKA.
		 *
		 * Logá sú `lazy`. Kým sa stiahnu, `<img>` so zadanou výškou a
		 * `inline-size: auto` je široký 0 px — rad je zbalený do ničoho
		 * a pri načítaní sa roztiahne, teda preskočí pod rukami.
		 *
		 * `--pomer` počíta `App\Support\Technologie` zo súboru, takže
		 * vyhradené miesto sedí na pixel s tým, čo logo nakoniec zaberie.
		 *
		 * KĽÚČOVÉ SLOVO `auto` PRED HODNOTOU nie je ozdoba: znamená „keď má
		 * obrázok vlastný pomer strán, riaď sa ním, a toto použi len dovtedy,
		 * kým sa nenačíta". Bez neho by zadaný pomer platil natrvalo a logo,
		 * ktoré sa nepodarilo odmerať, by zostalo vtlačené do štvorca.
		 * Odmerané pri 1440 px pred scrollovaním: bez tohto riadka 0 × 30
		 * a 0 × 43 px, s ním 150 × 30 a 43 × 43 — teda presne finálne
		 * rozmery. */
		aspect-ratio: auto var(--pomer, 1);

		/* Poistka pre veľmi úzke okno: logo nikdy nesmie prerásť rad. */
		max-inline-size: 100%;

		object-fit: contain;
	}

	/* ── PRODUKTY ─────────────────────────────────────────────────────────
	   Pribudlo 15. 9. 2026, keď každý produkt dostal vlastnú stránku.

	   Prehľad je mriežka kariet, detail je jeden stĺpec s obrázkom navrchu.
	   Obe kostry sú tu, nie vo vlastnej vrstve: sú to textové stránky
	   s rovnakou kostrou ako ESG či „Prípady použitia" a samostatná vrstva
	   by znamenala piaty raz to isté. */
	.produkty {
		display: grid;

		/* 300 px: obrázok je štvorec 736 × 750, takže užšia karta by z neho
		   spravila prúžok. Odmerané pri okne 1440: obsah 1281 px, medzera
		   36 px — štyri stĺpce by potrebovali 1308 px, takže vyjdú tri
		   a päť produktov sa rozdelí 3 + 2. Karty sú vysoké, takže neúplný
		   posledný rad nepôsobí ako chyba.

		   `min(100%, …)` je poistka proti pretečeniu na najužšom telefóne,
		   ten istý zápis ako pri pilieroch ESG a pri referenciách. */
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		gap: var(--space-2xl) var(--space-xl);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.produkt-karta {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	/* Obrázok HORE, rovnako ako pri kartách služieb na domovskej a pri
	   pilieroch ESG. `aspect-ratio` drží všetky karty rovnaké aj pri rôzne
	   dlhých textoch, `object-fit: cover` sa postará o výrez. */
	.produkt-karta-obrazok {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--shape-corner-lg);
		background: var(--theme-surface-surface-container);
	}

	.produkt-karta-nazov {
		margin: 0;
		max-width: none;
		text-wrap: balance;

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.produkt-karta-text {
		margin: 0;
		color: var(--theme-surface-on-surface-variant);
	}

	/* ── DETAIL PRODUKTU ──────────────────────────────────────────────────
	   Obrázok a text vedľa seba na monitore, pod sebou na telefóne.
	   Obrázok je ozdoba, takže dostáva menší podiel než text — pri rovnakom
	   delení by štvorec 736 × 750 zabral polovicu obrazovky a text by sa
	   lámal na úzke riadky. */
	#produkt-obsah {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--space-2xl);
		align-items: start;

		@media (width < 900px) {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
		}
	}

	.produkt-obrazok {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--shape-corner-lg);
		background: var(--theme-surface-surface-container);

		/* Na telefóne sa obrázok cez celú šírku stáva prekážkou medzi
		   nadpisom a textom — polovičná šírka ho nechá ako ozdobu. */
		@media (width < 900px) {
			max-inline-size: 60%;
		}
	}

	/* `65ch` je tá istá miera ako `.stranka-text` a ako telo článku — horná
	   hranica pohodlnej dĺžky riadka. */
	.produkt-text {
		max-width: 65ch;

		> h2 {
			margin-block-end: var(--space-sm);
		}

		> p + h2 {
			margin-block-start: var(--space-xl);
		}
	}

	/* Dve tlačidlá vedľa seba. Prvé je `.nav-cta` a vzhľad si rieši samo;
	   druhé je vedľajšia voľba, takže len podčiarknutý text — dve rovnako
	   silné pilulky vedľa seba by nepovedali, ktorá je tá hlavná. */
	.produkt-akcie {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-md);
	}

	.produkt-akcia-vedlajsia {
		color: var(--theme-surface-on-surface);
		text-decoration: none;
		border-bottom: 1px solid var(--theme-outline-variant);

		&:hover {
			border-bottom-color: currentColor;
		}
	}

	/* PRÁVNE STRÁNKY */
	.pravny-text {
		ul {
			padding-inline-start: 1.2em;
			color: var(--theme-surface-on-surface-variant);

			> li + li {
				margin-block-start: var(--space-sm);
			}
		}
	}

	/* Viditeľné upozornenie, že dokument ešte nie je záväzný. Návštevník to
	   má vedieť hneď, nie sa to dozvedieť až v spore. */
	.pravna-vystraha {
		padding: var(--space-md);
		border: 1px solid var(--theme-outline-variant);
		border-radius: var(--shape-corner-sm);
		background: var(--theme-surface-surface-container);
	}

	/* IDENTIFIKAČNÉ ÚDAJE PREVÁDZKOVATEĽA (7. 9. 2026).
	 *
	 * Dvojice názov–hodnota. Na širokom okne dva stĺpce, na telefóne pod
	 * sebou — `subgrid` netreba, stačí jedna mriežka s `max-content` pre
	 * názvy, ktorá sa pri zlome prepne na jeden stĺpec.
	 *
	 * `max-content` a nie pevná šírka: najdlhší názov je „Zápis v registri"
	 * a keby sa raz pridal dlhší, stĺpec sa prispôsobí sám. */
	.firma-udaje {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: var(--space-sm) var(--space-lg);
		margin-block-start: var(--space-2xl);
		margin-block-end: 0;

		dt {
			color: var(--theme-surface-on-surface-variant);
		}

		dd {
			margin: 0;
		}

		/* Zápis v registri je dlhý reťazec s čiarkami — na úzkom okne sa má
		   lámať slovami, nie pretečieť von. */
		a {
			overflow-wrap: anywhere;
		}

		@media (width < 560px) {
			grid-template-columns: 1fr;
			gap: 0;

			dt {
				margin-block-start: var(--space-md);
			}

			dt:first-of-type {
				margin-block-start: 0;
			}
		}
	}
}

/* POZNÁMKA ku kaskádovým vrstvám a fontom Google.

   Google Fonts servíruje `.material-symbols-outlined { font-size: 24px }` BEZ
   vrstvy a nezaradené deklarácie prebíjajú každú `@layer` bez ohľadu na
   špecificitu. Preto ikony v menu zámerne NENESÚ triedu
   `material-symbols-outlined` — majú vlastné `.dropdown-icon` / `.link-icon`
   s `font-family: "Google Symbols"`. Tým sa konflikt nerieši, ale vôbec
   nevzniká. Rovnako to robí aj originál. */