/*
	Moderní vrstva nad šablonou Paradigm Shift (main.css).
	Jen styl: obsah stránky se nemění. Pro návrat stačí odebrat <link> a <script> vylepseni v index.html.
*/

:root {
	--teal: #00ffff;
	--teal-light: #7affff;
	--teal-mid: #00e0eb;
	--teal-deep: #00a9b8;
	--teal-soft: rgba(0, 255, 255, 0.38);
	--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0.2  0 0 0 0 0.25  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	--ink: #0d1414;
	--muted: rgba(13, 20, 20, 0.6);
	--line: rgba(13, 20, 20, 0.1);
	--page: #f2f6f6;
	--card: #ffffff;
	--radius: 0.75rem;
	--radius-lg: 1.75rem;
	--glass: rgba(255, 255, 255, 0.34);
	--glass-line: rgba(255, 255, 255, 0.7);
	--shadow-sm: 0 1px 2px rgba(13, 20, 20, 0.06), 0 2px 8px rgba(13, 20, 20, 0.06);
	--shadow-md: 0 4px 12px rgba(13, 20, 20, 0.06), 0 18px 40px -16px rgba(13, 20, 20, 0.25);
	--shadow-lg: 0 2px 6px rgba(13, 20, 20, 0.04), 0 30px 70px -24px rgba(13, 40, 40, 0.35);
	--panel:
		radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 40%),
		radial-gradient(circle at 90% 60%, rgba(0, 190, 215, 0.4), rgba(0, 190, 215, 0) 55%),
		radial-gradient(circle at 25% 95%, rgba(190, 255, 255, 0.7), rgba(190, 255, 255, 0) 45%),
		linear-gradient(165deg, #6bffff 0%, #00ffff 45%, #00e8f2 100%);
}

/* Základ */

	html {
		scroll-behavior: smooth;
	}

	body {
		background-color: var(--page);
		background-image:
			radial-gradient(55rem 40rem at 95% 5%, rgba(0, 255, 255, 0.16), rgba(0, 255, 255, 0) 65%),
			radial-gradient(45rem 45rem at 100% 75%, rgba(0, 169, 184, 0.1), rgba(0, 169, 184, 0) 65%);
		background-attachment: fixed;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	body, input, select, textarea, strong, b,
	h1, h2, h3, h4, h5, h6 {
		color: var(--ink);
	}

	p, li {
		text-wrap: pretty;
	}

	h1, h2, h3 {
		text-wrap: balance;
	}

	::selection {
		background: var(--teal-soft);
		color: var(--ink);
	}

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

	address {
		font-style: normal;
	}

	img {
		max-width: 100%;
	}

/* Odkazy: jemná linka, která se při najetí rozleje do zvýraznění */

	a {
		border-bottom: 0;
		text-decoration: none;
		background-image: linear-gradient(90deg, var(--teal-mid), var(--teal-deep));
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% 2px;
		padding: 0 0.1em;
		margin: 0 -0.1em;
		transition: background-size 0.3s ease, color 0.2s ease;
	}

		a:hover {
			background-image: linear-gradient(var(--teal-soft), var(--teal-soft));
			background-size: 100% 100%;
		}

	#wrapper > section > header a {
		background-image: linear-gradient(rgba(13, 20, 20, 0.7), rgba(13, 20, 20, 0.7));
		background-size: 100% 1px;
	}

		#wrapper > section > header a:hover {
			background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75));
			background-size: 100% 100%;
		}

	a.arrow, a.icon, .button, .copyright a {
		background-image: none !important;
		padding: 0;
		margin: 0;
	}

/* Tyrkysový panel: místo vzoru plynulý přechod se světly */

	#wrapper:before {
		background-color: var(--teal);
		background-image: var(--grain), var(--panel);
		background-size: 180px 180px, 100% 100vh, 100% 100vh, 100% 100vh, 100% 100vh;
		background-repeat: repeat, no-repeat;
		background-position: 0 0;
		box-shadow: inset -1px 0 0 rgba(13, 20, 20, 0.04);
	}

/* Časová osa: jemně bílá, body s aureolou */

	#wrapper > section > header:before,
	#wrapper > section > header h1:before,
	#wrapper > section > header h2:before {
		background: rgba(0, 70, 85, 0.22);
	}

	#wrapper > section > header h1:after,
	#wrapper > section > header h2:after,
	#wrapper > section:last-of-type > header:after {
		background: #ffffff;
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 2px 10px rgba(0, 70, 85, 0.3);
	}

/* Úvod */

	#wrapper > section.intro h1 {
		font-weight: 600;
		letter-spacing: -0.04em;
		line-height: 1.05;
	}

	/* Řádky pod jménem: text bílý (na #00FFFF s tmavě azurovým obrysem, aby byl vidět), odkazy tmavé */
	#wrapper > section.intro > header h1 + p,
	.intro p {
		color: #ffffff;
		font-weight: 600;
		letter-spacing: 0.175em;
		text-shadow:
			0 0 1px rgba(0, 85, 100, 0.9),
			0 1px 2px rgba(0, 85, 100, 0.65),
			0 0 14px rgba(0, 110, 130, 0.35);
	}

		.intro p a {
			color: var(--ink);
			text-shadow: none;
		}

	/* Logo bílé jako v originále, obrys a stín ho na azurové zviditelní */
	#wrapper > section.intro img.logo {
		height: auto;
		margin-top: 1rem;
		filter:
			drop-shadow(0 0 1px rgba(0, 85, 100, 0.8))
			drop-shadow(0 2px 3px rgba(0, 85, 100, 0.45))
			drop-shadow(0 6px 18px rgba(0, 110, 130, 0.35));
	}

	#wrapper > section.intro > .content {
		z-index: 1;
	}

	/* Fotka jako plovoucí karta, která přesahuje přes hranu panelu */
	#wrapper > section.intro .image.fill {
		top: 2.5rem;
		left: -3rem;
		width: calc(100% + 3rem - 2.5rem);
		height: calc(100% - 5rem);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-lg), 0 40px 90px -30px rgba(0, 200, 220, 0.55);
	}

	/* Rámeček posunutý za fotkou */
	#wrapper > section.intro > .content:before {
		content: '';
		position: absolute;
		top: 4.25rem;
		left: -1.25rem;
		right: 0.75rem;
		bottom: 0.75rem;
		border: 2px solid rgba(0, 169, 184, 0.35);
		border-radius: calc(var(--radius-lg) + 0.25rem);
		pointer-events: none;
	}

	#wrapper > section.intro .image.fill {
		z-index: 1;
	}

		#wrapper > section.intro .image.fill img {
			object-fit: cover;
		}

		#wrapper > section.intro .image.fill:after {
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
			border-radius: inherit;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
			background: linear-gradient(0deg, rgba(13, 20, 20, 0.14), rgba(13, 20, 20, 0) 28%);
		}

	a.arrow {
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.3) !important;
		border: 1px solid var(--glass-line);
		box-shadow: var(--shadow-sm);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.25s ease, background-color 0.25s ease;
	}

		a.arrow:before {
			width: 1.25rem;
			height: 1.25rem;
		}

		a.arrow:hover {
			background-color: rgba(255, 255, 255, 0.6) !important;
			transform: translateY(3px);
		}

/* Záhlaví sekcí na tyrkysové ploše */

	#wrapper > section > header h2 {
		font-size: 1.45rem;
		letter-spacing: 0.08em;
		line-height: 1.35;
	}

	/* První věta pod nadpisem jako úvodní citát */
	#first > h2 + p {
		font-size: 1.3em;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.4;
	}

	/* Skleněné bloky (rozhovory, kontakty) */
	#wrapper > section > header ul.items > li {
		background: var(--glass);
		border: 1px solid var(--glass-line);
		border-radius: 1.25rem;
		padding: 1.4rem 1.6rem;
		margin-bottom: 1rem;
		box-shadow: 0 10px 28px -14px rgba(0, 90, 110, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

		#wrapper > section > header ul.items > li > h3 {
			opacity: 0.75;
			margin-bottom: 0.5rem;
		}

		#wrapper > section > header ul.items > li > ul.alt {
			margin-bottom: 1.25rem;
		}

		#wrapper > section > header ul.items > li > :last-child {
			margin-bottom: 0;
		}

	#wrapper > section > header ul.alt li {
		border-top: 0;
		padding: 0.15rem 0;
	}

/* Obsah jako bílé karty, které přesahují přes hranu panelu */

	#wrapper > section:not(.intro) > .content {
		background:
			linear-gradient(var(--card), var(--card)) padding-box,
			linear-gradient(140deg, rgba(0, 255, 255, 0.9), rgba(0, 255, 255, 0) 35%, rgba(13, 20, 20, 0.06) 100%) border-box;
		border: 1px solid transparent;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		padding: 3.25rem 3.75rem;
		margin: -1.25rem 3.5rem 0 -3rem;
		align-self: start;
	}

	.content h3 {
		border-bottom: 0;
		padding-bottom: 0.7rem;
		margin-bottom: 1.75rem;
		background-image:
			linear-gradient(90deg, var(--teal), var(--teal-deep)),
			linear-gradient(var(--line), var(--line));
		background-repeat: no-repeat;
		background-position: 0 100%, 0 100%;
		background-size: 3rem 3px, 100% 1px;
	}

	.content p strong {
		font-weight: 700;
		background: linear-gradient(transparent 62%, var(--teal-soft) 62%, var(--teal-soft) 92%, transparent 92%);
		padding: 0 0.12em;
		margin: 0 -0.12em;
	}

	.content hr {
		border: 0;
		height: 1px;
		background: linear-gradient(90deg, var(--line), rgba(13, 20, 20, 0));
	}

	.video {
		position: relative;
		aspect-ratio: 16 / 9;
		width: 100%;
		border-radius: 1.1rem;
		overflow: hidden;
		background: #000;
		box-shadow: var(--shadow-md);
		margin-bottom: 0;
	}

		.video iframe {
			display: block;
			width: 100%;
			height: 100%;
			border: 0;
		}

/* Kontakt */

	ul.icons li {
		padding: 0 0.15rem;
	}

		ul.icons li .icon {
			width: 2.75rem;
			height: 2.75rem;
			line-height: 2.75rem;
			background-color: rgba(255, 255, 255, 0.75);
			box-shadow: var(--shadow-sm);
			transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
		}

			ul.icons li .icon:before {
				font-size: 1.05rem;
				margin: 0;
			}

			ul.icons li .icon:hover {
				background-color: #ffffff;
				transform: translateY(-2px);
				box-shadow: 0 8px 20px rgba(13, 20, 20, 0.16);
			}

	input[type="text"],
	input[type="email"],
	textarea {
		background-color: #f3f7f7;
		border: 1px solid transparent;
		border-radius: 0.9rem;
		padding: 0 1.15rem;
		transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	}

	textarea {
		padding-top: 0.9rem;
	}

		input[type="text"]:hover,
		input[type="email"]:hover,
		textarea:hover {
			background-color: #edf3f3;
		}

		input[type="text"]:focus,
		input[type="email"]:focus,
		textarea:focus {
			background-color: #ffffff;
			border-color: var(--teal-deep);
			box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.3);
		}

	::placeholder {
		color: rgba(13, 20, 20, 0.45) !important;
		opacity: 1;
	}

	input[type="submit"].button.primary {
		border-radius: 999px;
		padding: 0 2.75rem;
		background-image: linear-gradient(135deg, var(--teal-light), var(--teal) 50%, var(--teal-mid));
		box-shadow: 0 10px 26px -10px rgba(0, 180, 200, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
		transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	}

		input[type="submit"].button.primary:hover {
			filter: brightness(1.04);
			transform: translateY(-2px);
			box-shadow: 0 16px 34px -12px rgba(0, 180, 200, 1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
		}

		input[type="submit"].button.primary:active {
			transform: translateY(0);
		}

	/* Past na roboty pro Web3Forms, lidem neviditelná */
	.hp {
		position: absolute !important;
		left: -9999px !important;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	#wrapper .copyright {
		color: var(--muted);
		font-size: 0.85rem;
		padding-left: 2rem;
	}

		#wrapper .copyright a {
			border-bottom: 1px solid var(--line);
		}

/* Náběh sekcí při scrollu (třídy přidává vylepseni.js, bez JS je vše vidět hned) */

	.reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

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

/* Na desktopu skleněné bloky o kus širší, ať se odkazy tolik nelámou */

	@media screen and (min-width: 1153px) {

		#wrapper > section > header ul.items {
			margin-left: -3.5rem;
		}

	}

/* Odkazy na rozhovory: šipka ven */

	#wrapper > section > header ul.alt a:after {
		content: '\2197';
		display: inline-block;
		margin-left: 0.35em;
		font-weight: 600;
		opacity: 0.55;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

		#wrapper > section > header ul.alt a:hover:after {
			opacity: 1;
			transform: translate(2px, -2px);
		}

/* Ikony u kontaktů (Font Awesome je už načtený) */

	#wrapper > section:last-of-type > header ul.items > li > h3:before {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		display: inline-block;
		margin-right: 0.6em;
		font-size: 0.95em;
		letter-spacing: 0;
		color: var(--teal-deep);
		filter: brightness(0.55);
	}

	#wrapper > section:last-of-type > header ul.items > li:nth-child(1) > h3:before { content: '\f0e0'; }
	#wrapper > section:last-of-type > header ul.items > li:nth-child(2) > h3:before { content: '\f095'; }
	#wrapper > section:last-of-type > header ul.items > li:nth-child(3) > h3:before { content: '\f3c5'; }
	#wrapper > section:last-of-type > header ul.items > li:nth-child(4) > h3:before { content: '\f1e0'; }

/* Ukazatel posunu stránky (prvek přidává vylepseni.js) */

	.scroll-progress {
		position: fixed;
		top: 0;
		left: 0;
		height: 3px;
		width: 100%;
		transform-origin: 0 50%;
		transform: scaleX(0);
		background: linear-gradient(90deg, var(--teal), var(--teal-deep));
		box-shadow: 0 0 12px rgba(0, 220, 235, 0.8);
		z-index: 100;
		pointer-events: none;
	}

/* Mobil a tablet */

	@media screen and (max-width: 1152px) {

		#wrapper > section > header {
			background-color: var(--teal) !important;
			background-image: var(--grain), var(--panel) !important;
			background-size: 180px 180px, cover, cover, cover, cover !important;
			background-repeat: repeat, no-repeat !important;
			background-attachment: scroll !important;
			padding-bottom: 6rem;
		}

		#wrapper > section.intro > header {
			padding-bottom: 5rem;
		}

		#wrapper > section.intro > .content:before {
			display: none;
		}

		#wrapper > section.intro .image.fill {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		#wrapper > section.intro > .content {
			height: 85vh;
			margin: -3rem 1.25rem 0;
			width: auto;
			border-radius: var(--radius-lg);
			overflow: hidden;
			box-shadow: var(--shadow-lg);
		}

		#wrapper > section:not(.intro) > .content {
			margin: -3.5rem 1.25rem 0;
			width: auto;
			padding: 3rem 2.75rem;
			position: relative;
			z-index: 1;
		}

		#wrapper > section {
			padding-bottom: 2.5rem;
		}

		#wrapper .copyright {
			padding-left: 4rem;
		}

	}

	@media screen and (max-width: 736px) {

		#wrapper > section.intro h1 {
			font-size: 4.5rem;
		}

		#wrapper > section > header {
			padding-bottom: 5rem !important;
		}

		#wrapper > section.intro > .content {
			height: 70vh;
			margin: -2.5rem 1rem 0;
		}

		#wrapper > section:not(.intro) > .content {
			margin: -3rem 0.75rem 0;
			padding: 2.25rem 1.5rem;
			border-radius: 1.4rem;
		}

		#wrapper > section > header ul.items > li {
			padding: 1.1rem 1.25rem;
		}

	}

/* Méně pohybu pro ty, kdo si to nastavili */

	@media (prefers-reduced-motion: reduce) {

		html {
			scroll-behavior: auto;
		}

		*, *:before, *:after {
			transition: none !important;
			animation: none !important;
		}

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

	}