/* =========================================================================
   flycatcher.cz
   Jediný stylesheet. Pořadí: fonty - proměnné - reset - typografie -
   layout - komponenty - sekce - patička - responzivita - tisk.
   Hloubku dělají výhradně 1px linky a odstupňovaná pozadí.
   Žádné gradienty, žádné stíny.
   ========================================================================= */

/* --- Fonty ------------------------------------------------------------- */
/* Rajdhani (nadpisy) a Josefin Sans (jen logo) nejsou variabilní - pro každou
   použitou váhu vlastní soubor. Rubik variabilní je, jeden soubor pokrývá
   celý použitý rozsah vah. Logo má vlastní font nezávislý na nadpisech
   (--font-logo), viz inc/partials/logo.php.
   Subset latin-ext je nutný pro českou diakritiku (ř, ž, č, ě, ů, ď, ť, ň). */

@font-face {
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/rajdhani-500-latin-ext.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: 'Rajdhani';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/rajdhani-500-latin.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: 'Rajdhani';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/rajdhani-600-latin-ext.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: 'Rajdhani';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/rajdhani-600-latin.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: 'Rajdhani';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/rajdhani-700-latin-ext.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: 'Rajdhani';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/rajdhani-700-latin.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: 'Rubik';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(../fonts/rubik-latin-ext.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: 'Rubik';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url(../fonts/rubik-latin.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;
}

/* Logo drží svůj vlastní font - nemění se spolu s nadpisy. */
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/josefin-sans-700-latin-ext.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: 'Josefin Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/josefin-sans-700-latin.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;
}

/* --- Proměnné ---------------------------------------------------------- */

:root {
	--bg: #0a0a0a;
	--bg-2: #141414;
	--surface: #131313;
	--surface-hi: #171717;

	--border: rgba(255, 255, 255, .09);
	--border-hi: rgba(255, 255, 255, .22);

	--text: #ffffff;
	--text-mut: #9a9a9a;
	/* Nejtlumenější odstín, jaký ještě splní kontrast 4,5:1 na tmavém pozadí. */
	--text-dim: rgba(255, 255, 255, .55);

	--accent: #0099ff;
	--accent-dim: rgba(0, 153, 255, .12);

	--font-head: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-logo: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 32px;
	--s7: 48px;
	--s8: 64px;
	--s9: 96px;

	--fs-hero: clamp(2.75rem, 8vw, 5.5rem);
	--fs-h2: clamp(1.9rem, 4.2vw, 3rem);
	--fs-h3: clamp(1.15rem, 1.6vw, 1.35rem);
	--fs-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);
	--fs-body: 1.0625rem;
	--fs-sm: .875rem;
	--fs-xs: .8125rem;

	--radius: 16px;
	--radius-sm: 10px;
	--radius-pill: 999px;

	--maxw: 1120px;
	--gutter: clamp(20px, 5vw, 40px);
	--section-y: clamp(72px, 11vw, 144px);
	--nav-h: 68px;
}

/* --- Reset ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Kotvy se nesmí schovat pod lepivou navigaci. */
	scroll-padding-top: calc(var(--nav-h) + var(--s5));
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

/* --- Typografie -------------------------------------------------------- */

h1,
h2,
h3 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-hero);
	font-weight: 700;
	letter-spacing: -.025em;
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
	letter-spacing: 0;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-color: var(--border-hi);
	text-underline-offset: .2em;
}

a:hover {
	text-decoration-color: var(--accent);
}

strong {
	font-weight: 700;
}

::selection {
	background: var(--accent);
	color: #fff;
}

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

/* --- Layout ------------------------------------------------------------ */

.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--section-y);
	border-top: 1px solid var(--border);
}

.section--plain {
	border-top: 0;
}

/* 1px linka odděluje jen sousedy se stejným pozadím. Jakmile se pozadí mění, kreslí
   hranici samo a linka navíc už se čte jako obtah bloku - proto ji nemá ani sekce
   s vlastním pozadím, ani ta hned za ní. */
.section--alt,
.section--alt + .section {
	border-top: 0;
}

.section--alt {
	background: var(--bg-2);
}

.section__head {
	max-width: 62ch;
	margin-bottom: clamp(var(--s7), 6vw, var(--s9));
}

.section__lead {
	margin-top: var(--s5);
	font-size: var(--fs-lead);
	color: var(--text-mut);
	line-height: 1.55;
}

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

/* --- Motiv: tečka a špičaté závorky ------------------------------------ */

/* Tečka jako úlovek, bod, kurzor. Opakuje se za nadpisy, v odrážkách i v navigaci. */
.dot {
	display: inline-block;
	width: .28em;
	height: .28em;
	margin-left: .12em;
	border-radius: 50%;
	background: var(--accent);
	vertical-align: baseline;
}

/* Sekundární motiv: špičaté závorky z kódu. Popisek sekce je uzavřený jako tag. */
.eyebrow {
	display: inline-block;
	margin-bottom: var(--s4);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-mut);
}

.eyebrow::before,
.eyebrow::after {
	color: var(--accent);
	font-weight: 700;
}

.eyebrow::before {
	content: '<';
	margin-right: .35em;
}

.eyebrow::after {
	content: '>';
	margin-left: .35em;
}

/* Uzavírací tag na konci sekce Dohled - drobný vtip pro ty, kdo ho poznají. */
.tag-close {
	display: block;
	margin-top: var(--s7);
	font-size: var(--fs-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.dots {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dots li {
	position: relative;
	padding-left: var(--s5);
	margin-bottom: var(--s3);
	color: var(--text-mut);
}

.dots li::before {
	content: '';
	position: absolute;
	top: .68em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

/* --- Skip link --------------------------------------------------------- */

.skiplink {
	position: absolute;
	left: var(--s4);
	top: -100px;
	z-index: 100;
	padding: var(--s3) var(--s5);
	background: var(--text);
	color: var(--bg);
	border-radius: var(--radius-pill);
	font-weight: 700;
	text-decoration: none;
	transition: top .15s;
}

.skiplink:focus {
	top: var(--s4);
}

/* --- Logo -------------------------------------------------------------- */
/* Komponenta drží výšku sama, aby šla textová verze vyměnit za SVG bez zásahu do layoutu.
   Barvu si drží taky sama: v patičce je okolní text tlumený (--text-mut) a jméno by se
   bez toho dědilo šedé, kdežto v navigaci bílé. */

.logo {
	display: inline-flex;
	align-items: center;
	height: 28px;
	font-family: var(--font-logo);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}

/* Závorky nesou akcent, samotné jméno drží jednu barvu a čte se naráz.
   Modré "FLY" tu schválně není - vyrábělo vizuální prefix Fly*, který brief zakazuje. */
.logo__b {
	color: var(--accent);
	/* Josefin Sans kreslí < > jako matematický operátor: glyf je nižší než verzálka
	   a vycentrovaný na matematické ose. Obě čísla jsou dopočítaná z metrik fontu
	   (verzálka 0.734em, závorka od -0.0156em do 0.5em), ne odhadnutá:
	   font-size srovná výšku závorky na výšku verzálky, translateY posadí její
	   spodní hranu na účaří. Posun je nutný proto, že .logo je flex a align-items
	   centruje boxy, takže větší písmo si s sebou stáhne i účaří.
	   Jednotky musí zůstat relativní, jinak se poměr rozejde ve variantě .logo--lg. */
	font-size: 1.424em;
	line-height: 1;
	transform: translateY(-.0901em);
}

.logo svg {
	height: 100%;
	width: auto;
}

.logo--lg {
	height: 34px;
	font-size: 1.75rem;
}

/* Samostatná značka - zkratka wordmarku. Dědí .logo, mění jen stupeň a rozestup:
   u dvou glyfů se letter-spacing z wordmarku čte jako mezera před závorkou.
   Poměr závorky k písmenu drží .logo__b, jeho hodnoty jsou relativní a platí i tady. */
.logo--mark {
	height: auto;
	font-size: clamp(3.5rem, 9vw, 6rem);
	letter-spacing: 0;
	/* Optické doladění, aby značka stála uprostřed plochy, do které se posadí. Řádek je
	   vyšší než kresba: pod účařím drží místo pro dolní dotažnice, které F> nemá (svisle
	   0.118em), a vlevo sedí levá vlečka F, kdežto vpravo užší vlečka závorky (0.026em).
	   Obě čísla jsou dopočítaná z metrik fontu, ne odhadnutá, proto zůstávají v em. */
	transform: translate(-.026em, .118em);
}

/* --- Navigace ---------------------------------------------------------- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg);
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}

.nav.is-scrolled {
	border-bottom-color: var(--border);
}

.nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	height: var(--nav-h);
}

.nav__links {
	display: none;
	align-items: center;
	gap: var(--s6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__link {
	position: relative;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--text-mut);
	text-decoration: none;
	transition: color .15s;
}

.nav__link:hover,
.nav__link.is-active {
	color: var(--text);
}

/* Aktivní položku značí tečka - stejný motiv jako u nadpisů. */
.nav__link.is-active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--accent);
}

.nav__right {
	display: flex;
	align-items: center;
	gap: var(--s4);
}

.nav .nav__cta {
	display: none;
}

.nav__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav__toggle span {
	display: block;
	height: 1.5px;
	background: var(--text);
	transition: transform .2s, opacity .2s;
}

.nav__toggle[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.nav__toggle[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.nav__panel {
	display: none;
	border-top: 1px solid var(--border);
	padding-block: var(--s5) var(--s6);
}

.nav__panel.is-open {
	display: block;
}

.nav__panel ul {
	list-style: none;
	margin: 0 0 var(--s5);
	padding: 0;
}

.nav__panel li + li {
	margin-top: var(--s2);
}

/* Jen položky seznamu - tlačítko pod nimi si musí udržet vlastní vzhled. */
.nav__panel li a {
	display: block;
	padding: var(--s3) 0;
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 600;
	text-decoration: none;
}

/* --- Tlačítka ---------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	padding: 13px var(--s5);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--text);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.btn:hover {
	background: #e2e2e2;
}

.btn--ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-hi);
}

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

.btn--sm {
	padding: 10px var(--s4);
	font-size: var(--fs-xs);
}

/* Textový odkaz se šipkou. */
.arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--accent);
	text-decoration: none;
}

.arrow::after {
	content: '\2192';
	transition: transform .15s;
}

.arrow:hover::after {
	transform: translateX(4px);
}

/* --- Karty ------------------------------------------------------------- */

.card {
	padding: var(--s6);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: border-color .18s, background-color .18s;
}

.card:hover {
	border-color: var(--border-hi);
	background: var(--surface-hi);
}

.card h3 {
	margin-bottom: var(--s3);
}

.card p {
	color: var(--text-mut);
	font-size: var(--fs-body);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s5);
	list-style: none;
	padding: 0;
}

.tags li {
	padding: 5px 11px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	color: var(--text-mut);
	white-space: nowrap;
}

/* --- Odkrývání při scrollu ----------------------------------------------- */
/* Sekce se objeví, až na ni uživatel doscrolluje. Třídu is-visible přidává JS. */

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --- Hero -------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 13vw, 168px) clamp(72px, 11vw, 144px);
}

/* Dekorativní síť uzlů v pozadí Hera - úlovek much/bugů, viz heading_dot(). */
.hero__net {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
	pointer-events: none;
}

.hero__net svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__net line {
	stroke: var(--border-hi);
	stroke-width: 1;
}

.hero__net circle {
	fill: var(--border-hi);
}

.hero__net .hero__flightpath {
	fill: none;
	stroke: none;
}

.hero__net .hero__bug {
	fill: var(--accent);
}

.hero__net .hero__ring {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1;
}

.hero__net .hero__cross line {
	stroke: var(--accent);
	stroke-width: 1;
}

/* Vzdálená vrstva sítě. Hloubka vzniká jen ustoupeným odstínem a drobnějšími uzly -
   žádný gradient ani rozostření. */
.hero__net .hero__far {
	opacity: .42;
}

/* Uzly mimo úlovek velmi pomalu dýchají, aby síť žila i v pauzách mezi lety.
   Amplituda je schválně nízká - nad sítí se čte nadpis a blikání by rušilo. */
.hero__net .hero__nodes circle:not(.hero__target) {
	animation: hero-node-breathe 9s ease-in-out infinite;
}

.hero__net .hero__nodes circle:nth-child(5n+2) {
	animation-duration: 11s;
	animation-delay: -2s;
}

.hero__net .hero__nodes circle:nth-child(5n+3) {
	animation-duration: 13s;
	animation-delay: -5s;
}

.hero__net .hero__nodes circle:nth-child(5n+4) {
	animation-duration: 8s;
	animation-delay: -7s;
}

.hero__net .hero__nodes circle:nth-child(5n+5) {
	animation-duration: 15s;
	animation-delay: -3s;
}

/* Pět až sedm nezávislých much, každá s vlastní periodou a startem - schválně bez
   společného násobku, aby se lety nikdy nezačaly opakovat ve viditelném rytmu.
   Uzel/hrana zmodrá teprve v okamžik dopadu a pak bledne až do dalšího úlovku;
   animation-duration i animation-delay proto sedí na periodu a start příslušné
   mouchy a dodává je hero_glow() v inc/heronet.php jako inline styl. */
.hero__net .hero__target,
.hero__net .hero__catch {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.hero__net .hero__target {
	animation-name: hero-node-pulse;
}

.hero__net .hero__catch {
	animation-name: hero-edge-pulse;
}

.hero > .container {
	position: relative;
	z-index: 1;
}

.hero h1 {
	max-width: 16ch;
	animation: hero-in .7s ease both;
}

.hero__lead {
	max-width: 54ch;
	margin-top: var(--s6);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--text-mut);
	animation: hero-in .7s ease .1s both;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-top: var(--s7);
	animation: hero-in .7s ease .2s both;
}

@keyframes hero-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Dosvit úlovku běží ve stejné periodě jako let příslušné mouchy a je s ním sfázovaný:
   do 44 % je cíl šedý a tlumený jako zbytek sítě, ve 44 % skokem zmodrá - to je okamžik
   dopadu, viz keyTimes prstenců v hero.php - a pak plynule vybledne, než moucha přiletí
   znovu. Uzel nesmí svítit dřív, než ho něco chytí; jinak dopředu prozradí, kam se dívat.
   Když se v hero.php mění keyTimes dopadu, musí se posunout i 44 % tady. */
@keyframes hero-node-pulse {
	0%, 43.9% { fill: var(--border-hi); opacity: .7; }
	44% { fill: var(--accent); opacity: 1; }
	62% { fill: var(--accent); opacity: 1; }
	100% { fill: var(--border-hi); opacity: .7; }
}

@keyframes hero-edge-pulse {
	0%, 43.9% { stroke: var(--border-hi); stroke-width: 1; }
	44% { stroke: var(--accent); stroke-width: 1.5; }
	62% { stroke: var(--accent); stroke-width: 1.5; }
	100% { stroke: var(--border-hi); stroke-width: 1; }
}

@keyframes hero-node-breathe {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

/* --- Role -------------------------------------------------------------- */

.role__blocks {
	grid-template-columns: 1fr;
	gap: var(--s6);
}

.role__block {
	display: flex;
	flex-direction: column;
	padding-top: var(--s5);
	border-top: 1px solid var(--border);
}

.role__block h3 {
	margin-bottom: var(--s3);
}

.role__block p {
	color: var(--text-mut);
}

/* Odkaz drží spodní hranu i v kratším bloku, aby řádek nevypadal rozházeně. */
.role__block .arrow {
	margin-top: auto;
	padding-top: var(--s4);
	align-self: flex-start;
}

/* --- Dohled ------------------------------------------------------------ */

.oversight__perex {
	max-width: 58ch;
	padding-left: var(--s5);
	border-left: 2px solid var(--accent);
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.oversight__body {
	grid-template-columns: 1fr;
	gap: clamp(var(--s6), 5vw, var(--s8));
	margin-top: var(--s8);
}

.oversight__text p {
	max-width: 62ch;
	color: var(--text-mut);
}

.oversight__text p + p {
	margin-top: var(--s5);
}

.oversight__aside h3 {
	margin-bottom: var(--s5);
}

.oversight__when {
	margin-top: var(--s7);
	padding-top: var(--s5);
	border-top: 1px solid var(--border);
}

.oversight__when p {
	margin-top: var(--s3);
	color: var(--text-mut);
	font-size: var(--fs-sm);
}

.oversight__cta {
	margin-top: var(--s6);
}

/* --- Reference --------------------------------------------------------- */

.ref__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.ref__grid .card p {
	max-width: 62ch;
}

.ref__type {
	display: block;
	margin-bottom: var(--s2);
	font-size: var(--fs-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
}

.ref__more {
	max-width: 62ch;
	margin-top: var(--s8);
	padding-top: var(--s6);
	border-top: 1px solid var(--border);
}

.ref__more > p {
	margin-bottom: var(--s4);
	color: var(--text-mut);
	font-size: var(--fs-sm);
}

/* --- Produkty ---------------------------------------------------------- */

.product {
	padding: clamp(var(--s6), 5vw, var(--s8));
}

.product__name {
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

/*
 * Produkt s vlastní značkou stojí pod svým logem. Wordmark má velké O
 * přesahující nad i pod řádek, takže při výšce nadpisu by malá písmena
 * vyšla opticky drobná – odtud zhruba 1,5násobek.
 */
.product__logo {
	display: block;
	height: clamp(2.6rem, 5.25vw, 3.75rem);
	width: auto;
	max-width: 100%;
}

.product__claim {
	margin-top: var(--s3);
	color: var(--accent);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.product p {
	max-width: 58ch;
	margin-top: var(--s5);
	color: var(--text-mut);
}

.product__link {
	margin-top: var(--s6);
}

/* --- O firmě ----------------------------------------------------------- */

.about__body {
	grid-template-columns: 1fr;
	gap: clamp(var(--s6), 5vw, var(--s8));
}

/* Kdo firmu vede a vedle toho značka - jediné místo, kde je vidět ve velkém. */
.about__founder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
}

/* Velikost dlaždice drží font značky, ne naopak: šířka je v em, takže poměr kresby
   k ploše zůstává stejný jako u loga v hlavičce, ať se stupeň zmenší jakkoliv. */
.about__mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.08em;
	aspect-ratio: 1;
	font-size: clamp(2.25rem, 4.6vw, 3.25rem);
	background: var(--surface);
	border: 1px solid var(--border);
}

.about__mark .logo--mark {
	font-size: 1em;
}

.about__text p {
	max-width: 62ch;
	color: var(--text-mut);
}

.about__text p + p {
	margin-top: var(--s5);
}

.about__meta > * + * {
	margin-top: var(--s6);
}

.meta__label {
	display: block;
	margin-bottom: var(--s2);
	font-size: var(--fs-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mut);
}

.meta__value {
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 600;
}

.meta__note {
	margin-top: var(--s2);
	color: var(--text-mut);
	font-size: var(--fs-sm);
}

.about__tech p {
	margin-bottom: var(--s4);
	color: var(--text-mut);
	font-size: var(--fs-sm);
}

/* --- Kontakt ----------------------------------------------------------- */

.contact__body {
	grid-template-columns: 1fr;
	gap: clamp(var(--s7), 6vw, var(--s8));
}

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

.field label {
	display: block;
	margin-bottom: var(--s2);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.field input[type='text'],
.field input[type='email'],
.field textarea {
	width: 100%;
	padding: 13px var(--s4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	transition: border-color .15s;
}

.field textarea {
	min-height: 148px;
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: rgba(255, 255, 255, .28);
}

.field input:focus,
.field textarea:focus {
	border-color: var(--accent);
	outline: none;
}

.field input:focus-visible,
.field textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.field [aria-invalid='true'] {
	border-color: #ff6b6b;
}

.field__error {
	display: block;
	margin-top: var(--s2);
	font-size: var(--fs-sm);
	color: #ff8f8f;
}

.field--check {
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
}

.field--check input {
	position: relative;
	flex: none;
	width: 19px;
	height: 19px;
	margin-top: 3px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--surface);
	border: 1px solid var(--border-hi);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.field--check input:checked {
	background: var(--accent);
	border-color: var(--accent);
}

.field--check input:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.field--check label {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--text-mut);
	line-height: 1.5;
}

/* Past na roboty. Nesmí se dostat do tab pořadí ani ke čtečkám. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__actions {
	margin-top: var(--s6);
}

.alert {
	padding: var(--s4) var(--s5);
	margin-bottom: var(--s6);
	border: 1px solid var(--border-hi);
	border-left: 2px solid var(--accent);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
}

.alert--error {
	border-left-color: #ff6b6b;
}

.alert--ok {
	border-left-color: #35c77b;
}

.alert ul {
	margin: var(--s2) 0 0;
	padding-left: var(--s5);
}

.contact__direct dl {
	margin: 0;
}

.contact__direct dt {
	margin-top: var(--s5);
	font-size: var(--fs-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mut);
}

.contact__direct dt:first-child {
	margin-top: 0;
}

/* E-mail a telefon nesou hlavní váhu sekce - formulář je vedle jako alternativa. */
.contact__direct dd {
	margin: var(--s1) 0 0;
	font-family: var(--font-head);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 600;
}

.contact__direct dd a {
	text-decoration: none;
	border-bottom: 1px solid var(--border-hi);
}

.contact__direct dd a:hover {
	border-bottom-color: var(--accent);
}

.contact__form-title {
	margin-bottom: var(--s5);
	font-size: var(--fs-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--text-mut);
}

.contact__direct address {
	font-style: normal;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--text-mut);
}

/* --- Patička ----------------------------------------------------------- */

/* Tmavší plocha odděluje patičku od Kontaktu nad ní - proto tu není border-top:
   hranici kreslí změna pozadí a linka navíc by se četla jako obtah bloku. */
.footer {
	padding-block: var(--s8) var(--s7);
	background: var(--bg-2);
	font-size: var(--fs-sm);
	color: var(--text-mut);
}

.footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--s5);
	margin-bottom: var(--s8);
}

.footer__tagline {
	margin-top: var(--s3);
	max-width: 34ch;
}

/* Pod 640 px každý údaj na vlastním řádku a s vlastní tečkou, nad ním jeden řádek,
   kde tečka odděluje jen sousedy. Poslední výskyt motivu tečky. */
.footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer__legal li::before {
	content: '\00b7';
	margin-right: var(--s3);
	color: var(--accent);
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s3);
	margin-top: var(--s5);
	padding-top: var(--s5);
	border-top: 1px solid var(--border);
	font-size: var(--fs-xs);
	color: var(--text-dim);
}

/* --- Responzivita ------------------------------------------------------ */

@media (min-width: 640px) {
	.role__blocks,
	.grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Nad mobilem se údaje v patičce vrátí na jeden řádek a tečka zase jen odděluje. */
	.footer__legal {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--s2) 0;
	}

	.footer__legal li::before {
		margin: 0 var(--s3);
	}

	.footer__legal li:first-child::before {
		content: none;
	}

	.nav .nav__cta {
		display: inline-flex;
	}
}

@media (min-width: 900px) {
	/* Tři role vedle sebe - do 900 px se lámou na 2+1, pod 640 px pod sebe. */
	.role__blocks,
	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.oversight__body {
		grid-template-columns: 1.35fr 1fr;
	}

	.about__body {
		grid-template-columns: 1.5fr 1fr;
	}

	/* Kontakty vlevo v užším sloupci, formulář vpravo - pořadí sedí s DOM. */
	.contact__body {
		grid-template-columns: 1fr 1.4fr;
	}

	.nav__links {
		display: flex;
	}

	.nav__toggle {
		display: none;
	}

	.nav__panel {
		display: none !important;
	}
}

/* --- Přístupnost a tisk ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}

	/* SMIL animace uvnitř SVG (let bodu, pulz úlovku) nejde zastavit přes animation
	   ani transition - vrstvu proto rovnou skrýváme. */
	.hero__net {
		display: none;
	}

	.hero h1,
	.hero__lead,
	.hero__actions {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.nav,
	.skiplink,
	.hero__actions,
	form {
		display: none;
	}
}