/* ==========================================================================
   THEIA – Aerial Intelligence
   Jeden vizuálny jazyk: bodová mriežka dát + skenovacia línia.
   Mobile-first. Všetky hodnoty idú z tokenov nižšie.
   ========================================================================== */

/* ---------- Písma (self-hosted, OFL) ---------- */
@font-face {
	font-family: "Michroma";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Michroma";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/michroma-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokeny ---------- */
:root {
	/* Farby – úzka paleta: antracit, neutrálne sivé, jedna červená. */
	--c-bg: #24272a;          /* antracit – plocha stránky */
	--c-screen: #1b1d20;      /* „obrazovka“ – vizualizácie, formulár */
	--c-raise: #2c3034;       /* hover plochy */
	--c-text: #f2f3f4;
	--c-text-2: #a3a7ab;      /* sekundárny text, kontrast 6,1 : 1 */
	--c-text-3: #8c9195;      /* popisky, kontrast 4,7 : 1 */
	--c-line: rgba(242, 243, 244, 0.09);
	--c-line-2: rgba(242, 243, 244, 0.18);
	--c-dot: rgba(242, 243, 244, 0.06);
	--c-dot-2: rgba(242, 243, 244, 0.12);
	--c-red: #f5333f;         /* jediný akcent: nález, akcia, odhalenie */
	--c-red-ink: #141517;     /* text na červenej (kontrast 4,8 : 1) */
	--c-red-text: #ff6b74;    /* drobný červený text na tmavom (kontrast 5,4 : 1) */
	--c-red-soft: rgba(245, 51, 63, 0.16);

	/* Typografia – dve rodiny. */
	--font-display: "Michroma", "Eurostile", "Arial Black", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
	--fs-h3: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	--fs-h2: clamp(1.5rem, 1.05rem + 1.9vw, 2.625rem);
	--fs-h1: clamp(1.625rem, 0.6rem + 3.2vw, 3.25rem);
	--lh-tight: 1.18;
	--lh-body: 1.6;
	--track-caps: 0.16em;

	/* Mriežka a rytmus – násobky 8 px, motív stojí na 24 px. */
	--grid: 24px;
	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 32px;
	--s5: 48px;
	--s6: 64px;
	--s7: 96px;
	--s8: 128px;
	--section: clamp(88px, 10vw, 144px);
	--container: 1240px;
	--gutter: clamp(16px, 4vw, 48px);
	--header-h: 72px;

	/* Tvary – linka jednej hrúbky, minimálne zaoblenie. */
	--stroke: 1px;
	--radius: 2px;

	/* Pohyb – jediný zdroj (číta ho aj motion-config.js). */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 0.24s;
	--dur-base: 0.6s;
	--dur-slow: 1.2s;
	--dist: 16px;
	--stagger: 0.06s;
}

/* ---------- Základ ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background-color: var(--c-bg);
	/* Motív: bodová mriežka dát pod celou stránkou. */
	background-image: radial-gradient(circle at center, var(--c-dot) 1px, transparent 1.25px);
	background-size: var(--grid) var(--grid);
	background-position: calc(var(--grid) / -2) calc(var(--grid) / -2);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--c-red);
	color: var(--c-red-ink);
}

:focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 3px;
	border-radius: var(--radius);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: var(--s2);
	left: var(--s2);
	z-index: 100;
	padding: var(--s1) var(--s2);
	background: var(--c-red);
	color: var(--c-red-ink);
	font-weight: 600;
	border-radius: var(--radius);
	transform: translateY(-200%);
	transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus {
	transform: none;
}

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main:focus {
	outline: none;
}

/* ---------- Ikony ---------- */
.icon {
	width: 20px;
	height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--stroke);
	stroke-linecap: square;
}

.icon path {
	vector-effect: non-scaling-stroke;
}

/* ---------- Tlačidlá a odkazy ---------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 20px;
	overflow: hidden;
	border: var(--stroke) solid transparent;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* Hover: skenovacia línia prejde tlačidlom zľava doprava. */
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent calc(100% - 1px), currentColor 0);
	opacity: 0;
	transform: translateX(-100%);
	pointer-events: none;
}

.btn:hover::after {
	animation: btn-scan var(--dur-base) var(--ease) forwards;
}

@keyframes btn-scan {
	0% {
		opacity: 0.55;
		transform: translateX(-100%);
	}
	100% {
		opacity: 0;
		transform: translateX(0);
	}
}

.btn .icon {
	transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .icon--arrow {
	transform: translateX(4px);
}

.btn:hover .icon--down {
	transform: translateY(3px);
}

.btn--primary {
	background: var(--c-red);
	color: var(--c-red-ink);
	font-weight: 600;
}

.btn--ghost {
	border-color: var(--c-line-2);
	color: var(--c-text);
}

.btn--ghost:hover {
	border-color: var(--c-text-2);
	background: var(--c-raise);
}

.btn--sm {
	min-height: 40px;
	padding: 0 16px;
	font-size: var(--fs-sm);
}

.btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Podčiarknutie sa „vykreslí“ – rovnaký pohyb ako linky v sekciách. */
.link,
.site-footer__nav a,
.prose a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}

.link:hover,
.site-footer__nav a:hover,
.prose a:hover {
	background-size: 100% 1px;
}

/* ---------- Logo ---------- */
.logo-i {
	fill: var(--c-red);
}

.brand,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--c-text);
}

.brand__emblem {
	width: 60px;
	height: auto;
}

.brand__wordmark {
	width: 92px;
	height: auto;
}

.custom-logo {
	width: auto;
	max-height: 40px;
}

.logo-stack {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	color: var(--c-text);
}

.logo-stack .logo-emblem {
	width: 132px;
}

.logo-stack .logo-wordmark {
	width: 148px;
}

.logo-stack__tag {
	margin-top: -6px;
	padding-left: 0.32em;
	font-family: var(--font-display);
	font-size: 8.5px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c-text-3);
}
/* ---------- Hlavička ---------- */
/* Prihlásený používateľ: hlavička pod panelom WordPressu (32 px, na mobile 46 px). */
body.admin-bar {
	--wp-bar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wp-bar: 46px;
	}
}

.site-header {
	position: fixed;
	inset: var(--wp-bar, 0px) 0 auto;
	z-index: 50;
	height: var(--header-h);
	border-bottom: var(--stroke) solid transparent;
	transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

/* Rozmazané pozadie je na pseudo-elemente: backdrop-filter na samotnej hlavičke
   by z nej urobil kontajner pre position: fixed a mobilné menu by sa orezalo. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(36, 39, 42, 0.86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease);
}

.site-header.is-scrolled,
.site-header.is-open {
	border-bottom-color: var(--c-line);
}

.site-header.is-scrolled::before,
.site-header.is-open::before {
	opacity: 1;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--s3);
}

/* Postup skenu = postup scrollu. Červená linka pod hlavičkou. */
.scan-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--c-red);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

.nav-toggle .icon {
	width: 24px;
	height: 24px;
}

.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--menu {
	display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
	display: block;
}

.site-nav {
	position: fixed;
	inset: calc(var(--header-h) + var(--wp-bar, 0px)) 0 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s5);
	padding: var(--s5) var(--gutter) var(--s6);
	background-color: var(--c-bg);
	background-image: radial-gradient(circle at center, var(--c-dot) 1px, transparent 1.25px);
	background-size: var(--grid) var(--grid);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}

.site-nav.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--dur-base) var(--ease), visibility 0s;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
}

.site-nav__list li {
	border-bottom: var(--stroke) solid var(--c-line);
}

.site-nav__list a {
	display: block;
	padding: var(--s3) 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: color var(--dur-fast) var(--ease);
}

.site-nav__list a:hover {
	color: var(--c-text-2);
}

.site-nav__cta {
	align-self: flex-start;
}

/* Prepínač jazykov: SK / EN / DE. */
.lang-switch {
	display: flex;
	gap: var(--s1);
	margin: 0 0 0 -12px;
	padding: 0;
	list-style: none;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--c-text-2);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 50% 78%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}

.lang-switch a:hover,
.lang-switch a[aria-current] {
	color: var(--c-text);
	background-size: 40% 1px;
}

/* Bez JS je menu vždy viditeľné. */
html:not(.js) .site-nav {
	position: static;
	visibility: visible;
	opacity: 1;
	padding: 0;
	background: none;
}

html:not(.js) .nav-toggle {
	display: none;
}

@media (min-width: 960px) {
	.nav-toggle {
		display: none;
	}

	.site-nav,
	html:not(.js) .site-nav {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: var(--s5);
		padding: 0;
		background: none;
		visibility: visible;
		opacity: 1;
		transition: none;
	}

	.site-nav__list {
		flex-direction: row;
		gap: var(--s4);
	}

	.site-nav__list li {
		border: 0;
	}

	.site-nav__list a {
		padding: 4px 0;
		font-family: var(--font-body);
		font-size: var(--fs-sm);
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0.01em;
		color: var(--c-text-2);
		background-image: linear-gradient(currentColor, currentColor);
		background-size: 0% 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
	}

	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a {
		color: var(--c-text);
		background-size: 100% 1px;
	}

	.site-nav__cta {
		align-self: auto;
	}

	.lang-switch {
		gap: 0;
		margin-left: calc(var(--s2) * -1);
	}

	.lang-switch a {
		min-width: 32px;
	}
}

/* ---------- Sekcie: spoločné ---------- */
.section {
	position: relative;
	padding-block: var(--section);
}

.section__head {
	max-width: 48rem;
	margin-bottom: var(--s6);
}

.section__title,
.page__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.section__lead,
.page__lead {
	max-width: 38rem;
	margin-top: var(--s3);
	font-size: var(--fs-lg);
	color: var(--c-text-2);
	text-wrap: pretty;
}

/* Šev skenu: index · popis · linka. Opakuje sa na začiatku každej sekcie. */
.kicker {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-bottom: var(--s4);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-2);
}

.kicker__idx {
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	color: var(--c-text-3);
}

.kicker__line {
	position: relative;
	flex: 1;
	max-width: 240px;
	height: 1px;
	background: var(--c-line-2);
	transform-origin: 0 50%;
}

.kicker__line::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: var(--s3);
	height: 1px;
	background: var(--c-red);
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: calc(var(--header-h) + var(--s6));
	overflow: hidden;
	isolation: isolate;
}

.hero__canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 66%);
	mask-image: linear-gradient(to bottom, transparent 34%, #000 66%);
}

.hero__inner {
	flex: 1;
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-bottom: var(--s4);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-2);
}

.hero__eyebrow::before {
	content: "";
	width: var(--s3);
	height: 1px;
	background: var(--c-red);
}

.hero__title {
	max-width: 15em;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Nemčina: najdlhšie slovo nadpisu (ENTSCHEIDUNGEN) sa musí zmestiť aj na 320 px. */
.hero__title:lang(de) {
	font-size: min(var(--fs-h1), calc(7vw - 2.5px));
}

/* Maska riadku – priestor navyše, aby diakritika nebola orezaná. */
.line {
	display: block;
	overflow: hidden;
	padding-block: 0.14em 0.04em;
	margin-block: -0.14em -0.04em;
}

.line__inner {
	display: block;
}

.hero__lead {
	max-width: 34rem;
	margin-top: var(--s4);
	font-size: var(--fs-lg);
	color: var(--c-text-2);
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s5);
}

.hero__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s3);
	padding-block: var(--s6) var(--s4);
	font-size: var(--fs-xs);
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-3);
}

.hero__scope {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) var(--s3);
}

.hero__scope li {
	position: relative;
}

.hero__scope li + li::before {
	content: "";
	position: absolute;
	left: calc(var(--s3) / -2 - 1.5px);
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	background: var(--c-text-3);
}

.hero__readout {
	display: none;
	gap: var(--s2);
	font-variant-numeric: tabular-nums;
}

.hero__readout span:last-child {
	min-width: 5ch;
	text-align: right;
	color: var(--c-text-2);
}

@media (min-width: 768px) {
	.hero {
		padding-top: calc(var(--header-h) + 14vh);
	}

	.hero__canvas {
		-webkit-mask-image: linear-gradient(to right, transparent 16%, #000 56%), linear-gradient(to bottom, transparent 34%, #000 64%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent 16%, #000 56%), linear-gradient(to bottom, transparent 34%, #000 64%);
		mask-composite: intersect;
	}

	.hero__title {
		max-width: none;
	}

	.line__inner {
		white-space: nowrap;
	}

	.hero__readout {
		display: flex;
	}
}

/* ---------- Služby ---------- */
.service {
	display: grid;
	gap: var(--s5);
	padding-block: var(--s6);
	border-top: var(--stroke) solid var(--c-line);
}

.service__meta {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	margin-bottom: var(--s3);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-2);
}

.service__idx {
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	color: var(--c-text-3);
}

.service__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.service__desc {
	max-width: 32rem;
	margin-top: var(--s2);
	color: var(--c-text-2);
}

.service__label {
	margin-top: var(--s4);
	margin-bottom: var(--s1);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-3);
}

/* Výstupy ako riadky dátovej tabuľky. */
.outputs li {
	display: flex;
	gap: var(--s2);
	padding: 12px 0;
	border-top: var(--stroke) solid var(--c-line);
	font-size: var(--fs-sm);
}

.outputs li::before {
	content: "";
	flex: none;
	width: 12px;
	height: 1px;
	margin-top: 0.75em;
	background: var(--c-text-3);
}

@media (min-width: 960px) {
	.service {
		grid-template-columns: 5fr 7fr;
		align-items: center;
		gap: var(--s7);
		padding-block: var(--s7);
	}
}

/* ---------- Platňa: spoločný rámec všetkých vizualizácií ---------- */
.plate {
	background: var(--c-screen);
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--radius);
}

.plate__bar,
.plate__foot {
	display: flex;
	justify-content: space-between;
	gap: var(--s2);
	padding: 12px var(--s2);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}

.plate__bar {
	border-bottom: var(--stroke) solid var(--c-line);
}

.plate__foot {
	border-top: var(--stroke) solid var(--c-line);
	color: var(--c-text-2);
}

.plate__alert {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	color: var(--c-text);
}

.plate__alert::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--c-red);
}

.plate__view {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-image: radial-gradient(circle at center, var(--c-dot-2) 1px, transparent 1.25px);
	background-size: 20px 20px;
	background-position: -10px -10px;
}

/* Rohové značky hľadáčika. */
.plate__view::after {
	--m: var(--c-line-2);
	content: "";
	position: absolute;
	inset: 12px;
	pointer-events: none;
	background:
		linear-gradient(var(--m), var(--m)) top left / 12px 1px,
		linear-gradient(var(--m), var(--m)) top left / 1px 12px,
		linear-gradient(var(--m), var(--m)) top right / 12px 1px,
		linear-gradient(var(--m), var(--m)) top right / 1px 12px,
		linear-gradient(var(--m), var(--m)) bottom left / 12px 1px,
		linear-gradient(var(--m), var(--m)) bottom left / 1px 12px,
		linear-gradient(var(--m), var(--m)) bottom right / 12px 1px,
		linear-gradient(var(--m), var(--m)) bottom right / 1px 12px;
	background-repeat: no-repeat;
}

.plate__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Skenovacia línia s jemnou stopou. */
.plate__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--c-red);
	opacity: 0;
	pointer-events: none;
}

.plate__line::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	height: 56px;
	background: linear-gradient(to bottom, transparent, var(--c-red-soft));
}

/* Nález: zameriavací štvorec + popis. */
.plate__flag {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
	pointer-events: none;
}

.plate__flag::before {
	content: "";
	position: absolute;
	left: -11px;
	top: -11px;
	width: 22px;
	height: 22px;
	border: var(--stroke) solid var(--c-red);
}

.plate__flag::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 0;
	width: 10px;
	height: 1px;
	background: var(--c-red);
}

.plate__flag--left::after {
	left: -21px;
}

.plate__flag--left .plate__flag-text {
	left: auto;
	right: 21px;
}

.plate__flag-text {
	position: absolute;
	left: 21px;
	top: -13px;
	padding: 5px 8px;
	background: var(--c-bg);
	border: var(--stroke) solid var(--c-line-2);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

/* SVG triedy – rovnaké linky a výplne vo všetkých vizualizáciách. */
.plate svg * {
	vector-effect: non-scaling-stroke;
	stroke-width: var(--stroke);
}

/* Kreslené cesty: dash + pathLength nefunguje spolu s non-scaling-stroke (Chrome). */
.plate svg [data-draw-path] {
	vector-effect: none;
	stroke-width: 1.15;
}

.pl-line,
.pl-grid,
.pl-stroke,
.pl-stroke-dim,
.pl-plan,
.pl-dim,
.pl-red-line,
.pl-red-dash {
	fill: none;
}

.pl-line { stroke: rgba(242, 243, 244, 0.14); }
.pl-grid { stroke: rgba(242, 243, 244, 0.08); }
.pl-stroke { stroke: rgba(242, 243, 244, 0.7); }
.pl-stroke-dim { stroke: rgba(242, 243, 244, 0.24); }
.pl-plan { stroke: rgba(242, 243, 244, 0.3); stroke-dasharray: 3 4; }
.pl-dim { stroke: rgba(242, 243, 244, 0.38); }
.pl-red { fill: var(--c-red); }
.pl-red-line { stroke: var(--c-red); }
.pl-red-dash { stroke: var(--c-red); stroke-dasharray: 3 3; }
.pl-point { fill: rgba(242, 243, 244, 0.55); }
.pl-box { fill: rgba(242, 243, 244, 0.07); stroke: rgba(242, 243, 244, 0.34); }
.pl-tag { fill: rgba(242, 243, 244, 0.45); }

.pl-txt {
	fill: var(--c-text-2);
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.04em;
}

/* Teplotná škála v sivej – farba je vyhradená pre nálezy. */
.pl-heat-0 { fill: rgba(242, 243, 244, 0.05); }
.pl-heat-1 { fill: rgba(242, 243, 244, 0.09); }
.pl-heat-2 { fill: rgba(242, 243, 244, 0.13); }
.pl-heat-3 { fill: rgba(242, 243, 244, 0.18); }
.pl-heat-4 { fill: rgba(242, 243, 244, 0.26); }
/* ---------- Postup ---------- */
.steps {
	position: relative;
	display: grid;
	gap: var(--s5);
	padding-left: var(--s5);
}

.steps__track {
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 0;
	width: 1px;
	background: var(--c-line-2);
}

.steps__fill {
	position: absolute;
	inset: 0;
	background: var(--c-red);
	transform: scaleY(var(--p, 1));
	transform-origin: 50% 0;
}

.step {
	position: relative;
}

.step__node {
	position: absolute;
	left: calc(var(--s5) * -1);
	top: 0;
	width: 11px;
	height: 11px;
	background: var(--c-bg);
	border: var(--stroke) solid var(--c-line-2);
	transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.step.is-active .step__node {
	background: var(--c-red);
	border-color: var(--c-red);
}

.step__idx {
	display: block;
	margin-bottom: var(--s2);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	color: var(--c-text-3);
	transition: color var(--dur-base) var(--ease);
}

.step.is-active .step__idx {
	color: var(--c-text-2);
}

.step__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.step__text {
	max-width: 22rem;
	margin-top: var(--s1);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

@media (min-width: 960px) {
	.steps {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s4);
		padding-left: 0;
		padding-top: var(--s5);
	}

	.steps__track {
		left: 0;
		right: 0;
		top: 5px;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.steps__fill {
		transform: scaleX(var(--p, 1));
		transform-origin: 0 50%;
	}

	.step__node {
		left: 0;
		top: calc(var(--s5) * -1);
	}
}

/* ---------- Výstup ---------- */
.dash__body {
	display: grid;
}

.dash__map {
	aspect-ratio: 400 / 220;
	border-bottom: var(--stroke) solid var(--c-line);
}

.dash__side {
	display: grid;
	align-content: start;
}

.dash__kpis {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-bottom: var(--stroke) solid var(--c-line);
}

.dash__kpis > div {
	padding: var(--s2);
	border-right: var(--stroke) solid var(--c-line);
	border-bottom: var(--stroke) solid var(--c-line);
}

.dash__kpis > div:nth-child(2n) {
	border-right: 0;
}

.dash__kpis > div:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.dash__kpis dt {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.dash__kpis dd {
	margin-top: 6px;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.dash__kpis dd.is-alert {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dash__kpis dd.is-alert::after {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--c-red);
}

.dash__list li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px var(--s2);
	border-bottom: var(--stroke) solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
	font-variant-numeric: tabular-nums;
}

.dash__list li span:last-child {
	color: var(--c-text);
}

.prio {
	width: 6px;
	height: 6px;
	border: var(--stroke) solid var(--c-text-3);
}

.prio--high {
	background: var(--c-red);
	border-color: var(--c-red);
}

.dash__chart {
	display: grid;
	gap: 12px;
	padding: var(--s3) var(--s2);
	border-top: var(--stroke) solid var(--c-line);
}

.bar {
	display: grid;
	grid-template-columns: 7rem 1fr 2ch;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-xs);
	color: var(--c-text-2);
	font-variant-numeric: tabular-nums;
}

.bar__track {
	position: relative;
	height: 8px;
	border-bottom: var(--stroke) solid var(--c-line);
}

.bar__fill {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: calc(var(--v) * 100%);
	height: 8px;
	background: rgba(242, 243, 244, 0.16);
	border-bottom: var(--stroke) solid var(--c-text-2);
	transform-origin: 0 50%;
}

.bar__value {
	text-align: right;
	color: var(--c-text);
}

@media (min-width: 960px) {
	.dash__body {
		grid-template-columns: 3fr 2fr;
	}

	.dash__map {
		aspect-ratio: auto;
		min-height: 320px;
		border-bottom: 0;
		border-right: var(--stroke) solid var(--c-line);
	}

	.dash__chart {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s3);
	}

	.bar {
		grid-template-columns: 1fr auto;
	}

	.bar__track {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

.specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s4) var(--s3);
	margin-top: var(--s6);
}

.spec {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--s1);
	padding-top: var(--s2);
	border-top: var(--stroke) solid var(--c-line-2);
}

.spec__value {
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
	line-height: 1.25;
}

.spec__label {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.formats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	margin-top: var(--s5);
}

.formats li {
	padding: 6px 12px;
	border: var(--stroke) solid var(--c-line-2);
	border-radius: var(--radius);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	color: var(--c-text-2);
}

@media (min-width: 960px) {
	.specs {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Kontakt ---------- */
.contact__grid {
	display: grid;
	gap: var(--s6);
}

.contact__direct {
	margin-top: var(--s5);
	border-top: var(--stroke) solid var(--c-line);
}

.contact__direct li {
	border-bottom: var(--stroke) solid var(--c-line);
}

.contact__link {
	display: flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2) 0;
	font-size: var(--fs-lg);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.contact__link .icon {
	color: var(--c-text-3);
	transition: color var(--dur-fast) var(--ease);
}

.contact__link:hover .icon {
	color: var(--c-red);
}

.form {
	position: relative;
	display: grid;
	gap: var(--s4);
	align-content: start;
	padding: var(--s4) var(--s3);
	background: var(--c-screen);
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--radius);
}

.form__row {
	display: grid;
	gap: var(--s4);
}

.form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.field {
	display: grid;
	gap: 6px;
}

.field__label {
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-2);
}

.field__opt {
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--c-text-3);
}

.field__input {
	width: 100%;
	min-height: 44px;
	padding: 10px 0;
	background: transparent;
	border: 0;
	border-bottom: var(--stroke) solid var(--c-line-2);
	border-radius: 0;
	font-size: var(--fs-base);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.field__input:hover {
	border-bottom-color: var(--c-text-3);
}

.field__input:focus-visible {
	outline: none;
	border-bottom-color: var(--c-red);
	box-shadow: 0 1px 0 0 var(--c-red);
}

.field__select {
	appearance: none;
	padding-right: var(--s4);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a7ab'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 20px;
}

.field__select option {
	background: var(--c-screen);
	color: var(--c-text);
}

.field__textarea {
	min-height: 132px;
	resize: vertical;
	line-height: var(--lh-body);
}

.field.is-invalid .field__input {
	border-bottom-color: var(--c-red);
}

.field__error {
	font-size: var(--fs-xs);
	color: var(--c-red-text);
}

.field__error:empty {
	display: none;
}

.form__foot {
	display: grid;
	gap: var(--s2);
	justify-items: start;
}

.form__note {
	font-size: var(--fs-xs);
	color: var(--c-text-3);
}

.form__status {
	font-size: var(--fs-sm);
}

.form__status:empty {
	display: none;
}

.form__status.is-ok,
.form__status.is-error {
	display: flex;
	gap: 12px;
	padding: 12px var(--s2);
	border: var(--stroke) solid var(--c-line-2);
}

.form__status.is-ok::before,
.form__status.is-error::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.55em;
	background: var(--c-text-2);
}

.form__status.is-error::before {
	background: var(--c-red);
}

@media (min-width: 640px) {
	.form {
		padding: var(--s5);
	}

	.form__row {
		grid-template-columns: 1fr 1fr;
	}

	.form__foot {
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: var(--s3);
	}
}

@media (min-width: 960px) {
	.contact__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--s7);
	}
}

/* ---------- Pätička ---------- */
.site-footer {
	padding-bottom: var(--s4);
}

.site-footer__seam {
	display: block;
	height: 1px;
	background: var(--c-line-2);
	transform-origin: 0 50%;
}

.site-footer__grid {
	display: grid;
	gap: var(--s5);
	padding-block: var(--s6);
}

.site-footer__brand {
	display: grid;
	gap: var(--s3);
	justify-items: start;
}

.site-footer__tagline {
	max-width: 22rem;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.site-footer__title {
	margin-bottom: var(--s2);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--c-text-3);
}

.site-footer__list {
	display: grid;
	gap: 10px;
	font-size: var(--fs-sm);
}

.site-footer__list a {
	color: var(--c-text-2);
	transition: background-size var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}

.site-footer__list a:hover {
	color: var(--c-text);
}

.site-footer__legal {
	margin-top: var(--s2);
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--c-text-3);
}

.form__note .link {
	color: var(--c-text-2);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s1);
	padding-top: var(--s3);
	border-top: var(--stroke) solid var(--c-line);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}
/* ---------- Podstránky a obsah z editora ---------- */
.page {
	padding-top: calc(var(--header-h) + var(--s7));
}

.page__head {
	max-width: 48rem;
	margin-bottom: var(--s6);
}

.page--404 .btn {
	margin-top: var(--s5);
}

.prose {
	max-width: 46rem;
	font-size: 1.0625rem;
	color: var(--c-text-2);
}

.prose > * + * {
	margin-top: 1.25em;
}

.prose h2,
.prose h3 {
	margin-top: 2em;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-tight);
	text-transform: uppercase;
	color: var(--c-text);
}

.prose h2 {
	font-size: 1.5rem;
}

.prose h3 {
	font-size: 1.125rem;
}

.prose a {
	color: var(--c-text);
	background-image: linear-gradient(var(--c-red), var(--c-red));
	background-size: 100% 1px;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
	list-style: revert;
}

.prose strong {
	color: var(--c-text);
}

.prose blockquote {
	margin-inline: 0;
	padding-left: var(--s3);
	border-left: var(--stroke) solid var(--c-red);
	color: var(--c-text);
}

.prose figure,
.prose .wp-block-image {
	margin-block: var(--s5);
}

.prose figcaption {
	margin-top: var(--s1);
	font-size: var(--fs-xs);
	color: var(--c-text-3);
}

.prose .alignwide {
	width: min(calc(100vw - 2 * var(--gutter)), var(--container));
	max-width: none;
}

.post-list {
	border-top: var(--stroke) solid var(--c-line);
}

.post-list__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--s1) var(--s3);
	padding: var(--s3) 0;
	border-bottom: var(--stroke) solid var(--c-line);
}

.post-list__link time {
	grid-column: 1 / -1;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	color: var(--c-text-3);
}

.post-list__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	text-transform: uppercase;
}

.post-list__link .icon {
	transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.post-list__link:hover .icon {
	transform: translateX(4px);
	color: var(--c-red);
}

.pagination {
	margin-top: var(--s5);
}

.pagination .nav-links {
	display: flex;
	gap: var(--s1);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border: var(--stroke) solid var(--c-line-2);
	border-radius: var(--radius);
}

.pagination .current {
	border-color: var(--c-red);
}

/* ---------- Médiá do budúcnosti (obrázky, video) ----------
   Triedy: t-reveal, t-scan, t-parallax, t-zoom, t-loop, t-duotone
   alebo štýly blokov is-style-theia-* (viď inc/media.php). */
.t-media,
[class*="is-style-theia-"] {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}

.t-media img,
.t-media video,
[class*="is-style-theia-"] img,
[class*="is-style-theia-"] video {
	display: block;
	width: 100%;
	height: auto;
}

.t-parallax img,
.is-style-theia-parallax img {
	transform: scale(1.14);
}

.t-scanline {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2;
	height: 1px;
	background: var(--c-red);
	opacity: 0;
	pointer-events: none;
}

.t-scanline::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	height: 72px;
	background: linear-gradient(to bottom, transparent, var(--c-red-soft));
}

.t-duotone img {
	filter: grayscale(1) contrast(1.05) brightness(0.9);
}

/* ---------- Počiatočné stavy animácií (len s JS) ---------- */
.js [data-reveal],
.js [data-hero-in] {
	opacity: 0;
	transform: translateY(var(--dist));
}

.js [data-hero-line] {
	transform: translateY(110%);
}

.js [data-draw-line] {
	transform: scaleX(0);
}

.js [data-scan-layer] {
	clip-path: inset(0 0 100% 0);
}

.js [data-scan-find] {
	opacity: 0;
}

.js [data-draw-path] {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.js .t-reveal img,
.js .t-reveal video,
.js .is-style-theia-reveal img {
	clip-path: inset(0 0 100% 0);
}

/* Obmedzený pohyb: žiadne posuny, len prelínanie. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.js [data-reveal],
	.js [data-hero-in],
	.js [data-hero-line],
	.js [data-draw-line] {
		transform: none;
		opacity: 0;
	}

	.js [data-scan-layer],
	.js .t-reveal img,
	.js .t-reveal video,
	.js .is-style-theia-reveal img {
		clip-path: none;
		opacity: 0;
	}

	.js [data-draw-path] {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.t-parallax img,
	.is-style-theia-parallax img {
		transform: none;
	}
}

/* ---------- Tlač ---------- */
@media print {
	body {
		background: #fff;
		color: #000;
	}

	.site-header,
	.hero__canvas,
	.form,
	.scan-progress {
		display: none;
	}

	.js [data-reveal],
	.js [data-hero-in],
	.js [data-hero-line] {
		opacity: 1;
		transform: none;
	}
}
