:root {
	--void: #06070F;
	--glass: rgba(14, 16, 34, .55);
	--glass-edge: rgba(255, 255, 255, .14);
	--text: #F2F3FF;
	--muted: #A9ADCB;
	--holo: linear-gradient(100deg, #7CF7FF, #A98BFF 25%, #FF7AD9 50%, #FFD27A 75%, #7CF7FF);
	--display: "Tektur", system-ui, sans-serif;
	--body: "Instrument Sans", system-ui, sans-serif;
	--gutter: clamp(16px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 400 1.0625rem/1.65 var(--body); overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid #7CF7FF; outline-offset: 4px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }

/* Živé pozadí – WebGL shader přes celou stránku */
#fx {
	position: fixed; inset: 0; z-index: -1;
	width: 100vw; height: 100vh; display: block;
	background: radial-gradient(120% 80% at 70% 20%, #2A1F6B, transparent 60%), radial-gradient(90% 70% at 10% 90%, #0F4A63, transparent 60%), var(--void);
}
.grain {
	position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }

/* Hlavička */
.top {
	position: fixed; top: 0; left: 0; right: 0; z-index: 10;
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px var(--gutter);
	font: 600 .95rem/1 var(--display); font-stretch: 80%; letter-spacing: .02em;
}
.top a { text-decoration: none; }
.top nav { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top nav a { padding: 8px 16px; border-radius: 999px; transition: background-color .2s; }
.top nav a:hover { background: rgba(255,255,255,.1); }

/* Úvod */
.hero {
	min-height: 100svh;
	display: grid; grid-template-rows: 1fr auto; align-items: end;
	padding: 120px 0 clamp(28px, 5vh, 56px);
}
.hero h1 {
	margin: 0 0 clamp(20px, 3vh, 40px);
	font: 900 clamp(3.4rem, 14vw, 14rem)/.8 var(--display);
	font-stretch: 75%;
	letter-spacing: -.02em;
	color: var(--text);
	text-shadow: 0 0 40px rgba(6, 7, 15, .9), 0 0 12px rgba(6, 7, 15, .6);
}
.hero h1 span { display: block; }
.hero h1 span + span { padding-left: .55em; }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.pitch {
	max-width: 32rem; padding: 22px 26px; border-radius: 22px;
	background: var(--glass); border: 1px solid var(--glass-edge);
	backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.pitch p { margin: 0; color: var(--muted); }
.pitch strong { display: block; color: var(--text); font: 600 1.3rem/1.25 var(--display); font-stretch: 85%; margin-bottom: 6px; }

/* Běžící pás */
.ticker {
	overflow: hidden; padding: 18px 0;
	border-block: 1px solid var(--glass-edge);
	background: rgba(6,7,15,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transform: rotate(-2deg) scale(1.04); margin: clamp(32px, 6vw, 80px) 0;
}
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker span {
	padding-right: .6em;
	font: 800 clamp(2rem, 5vw, 4rem)/1 var(--display); font-stretch: 75%;
	color: transparent; -webkit-text-stroke: 1.5px rgba(242,243,255,.8);
	white-space: nowrap;
}
.ticker span:nth-child(even) { color: var(--text); -webkit-text-stroke: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Projekty */
.section-title {
	margin: 0 0 clamp(32px, 4vw, 56px);
	font: 800 clamp(2.6rem, 7vw, 6rem)/.9 var(--display); font-stretch: 75%;
}
.work { padding: clamp(48px, 8vw, 120px) 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); perspective: 1200px; }
.card {
	--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --o: 0;
	position: relative; display: block; text-decoration: none;
	padding: 14px 14px 24px; border-radius: 26px;
	background: var(--glass); border: 1px solid var(--glass-edge);
	backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.card.live { transition: transform .08s linear, box-shadow .4s; }
.card:hover { box-shadow: 0 30px 80px -20px rgba(169,139,255,.5); }
/* holografická fólie */
.card::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background:
		repeating-linear-gradient(115deg, #7CF7FF 0%, #A98BFF 6%, #FF7AD9 12%, #FFD27A 18%, #7CF7FF 24%);
	background-size: 300% 300%;
	background-position: var(--mx) var(--my);
	mix-blend-mode: color-dodge; opacity: calc(var(--o) * .28);
	transition: opacity .3s;
}
/* odlesk */
.card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
	background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.35), transparent 45%);
	mix-blend-mode: overlay; opacity: var(--o); transition: opacity .3s;
}
.card img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; transform: translateZ(30px);
	/* screenshot ustoupí do pozadí: převezme barvy karty a dole se rozplyne */
	opacity: .65;
	filter: grayscale(1) brightness(.62) contrast(1.15) sepia(.6) hue-rotate(195deg) saturate(2.2);
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
	transition: opacity .3s, filter .3s;
}
.card:hover img, .card:focus-visible img {
	opacity: .8;
	filter: grayscale(.45) brightness(.78) contrast(1.05);
}
.card h3 { margin: 22px 10px 6px; font: 800 clamp(1.8rem, 3.2vw, 2.6rem)/1 var(--display); font-stretch: 80%; transform: translateZ(50px); }
.card p { margin: 0 10px; color: var(--muted); max-width: 34rem; transform: translateZ(24px); }
.card .url { display: inline-block; margin: 14px 10px 0; font: 600 .9rem/1 var(--display); font-stretch: 85%; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Kontakt */
.contact { padding: clamp(64px, 10vw, 160px) 0 clamp(40px, 5vw, 64px); }
.contact .mail {
	display: inline-block; margin: 0 0 clamp(48px, 7vw, 96px);
	font: 900 clamp(2.4rem, 10vw, 10rem)/.95 var(--display); font-stretch: 75%;
	text-decoration: none; overflow-wrap: anywhere;
	background: var(--holo); background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: sheen 6s linear infinite;
	filter: drop-shadow(0 0 30px rgba(169,139,255,.35));
}
@keyframes sheen { to { background-position: 200% 0; } }
.facts {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0;
	padding: 24px 28px; border-radius: 22px;
	background: var(--glass); border: 1px solid var(--glass-edge);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	font-size: .98rem;
}
.facts dt { color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; }


@media (max-width: 760px) {
	.cards, .facts { grid-template-columns: 1fr; }
	.hero h1 span + span { padding-left: .25em; }
		.hero h1 { font-size: 19vw; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}