:root{
	color-scheme: dark;
	--siteMax: 1400px;

	--serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", Times, serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fontDisplay: var(--sans);
	--fontBody: var(--sans);

	--h1Size: clamp(46px, 5vw, 68px);
	--h1Letter: 1.6px;
	--h2Size: clamp(26px, 3vw, 36px);
	--h2Letter: 1.2px;

	--bg: #050505;
	--text: #f3eee2;
	--muted: #a0a0a0;
	--border: rgba(255,255,255,.15);
	--border2: rgba(255,255,255,.25);
	--separator: rgba(255,255,255,.16);
}

/* Self-hosted heading font (Google Fonts: Bodoni Moda) */
@font-face{
	font-family: 'Bodoni Moda';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/bodoni-moda/BodoniModa-400-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: 'Bodoni Moda';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/bodoni-moda/BodoniModa-400-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: 'Bodoni Moda';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/assets/fonts/bodoni-moda/BodoniModa-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: 'Bodoni Moda';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/assets/fonts/bodoni-moda/BodoniModa-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;
}

*{box-sizing:border-box}

/* Always reserve space for right scrollbar to avoid layout shifts */
html{overflow-y:scroll;scrollbar-gutter:stable;overflow-x:hidden}

body{
	margin:0;
	font-family: var(--fontBody);
	line-height:1.7;
	color:var(--text);
	background:var(--bg);
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bg{
	position:relative;
	min-height:100vh;
	background: #050505;
	max-width: var(--siteMax);
	margin: 0 auto;
}

.container{max-width:1200px;margin:0 auto;padding:0 28px}

/* Header */
.topbar{
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index: 100;
	height: 60px;
	padding: 0;
	background: transparent; /* Transparent header over hero */
	border-bottom: 1px solid var(--separator);
}

.nav{display:flex;gap:18px;align-items:center;height:100%;max-width:1200px;margin:0 auto; padding: 0 28px;}
.nav a{color:var(--text);text-decoration:none;opacity:.8; transition: opacity 0.2s;}
.nav a:hover{opacity:1}
.logo{display:flex;align-items:center;}
.logo img{display:block;height: 85px;width:auto; margin-top: 35px;}
.navLinks{display:flex;gap:34px;align-items:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-left:auto;}

/* Typography */
h1{font-family:var(--fontDisplay);font-size:var(--h1Size);line-height:1.05;margin:0 0 14px;letter-spacing:0.2px;font-weight:400; text-transform:none;}
h2{font-family:var(--fontDisplay);font-size:var(--h2Size);line-height:1.15;margin:0 0 10px;letter-spacing:0.2px;font-weight:400; text-transform:none;}
h3{font-family:var(--fontDisplay);font-size:12px;line-height:1.4;margin:0 0 10px;letter-spacing:2px;font-weight:400; text-transform: uppercase; color: var(--muted);}
p{margin:0 0 10px; color: var(--muted);}

/* Lists + links */
ul{margin: 0 0 10px; padding-left: 18px; color: var(--muted);}
li{margin: 6px 0;}
a{color: var(--text); text-underline-offset: 3px;}
a:hover{opacity: 0.92;}

/* Buttons */
.btn{display:inline-block;border:1px solid var(--border); padding:12px 26px;text-decoration:none;color:var(--text);background:transparent;font-size:10px;letter-spacing:2.6px;text-transform:uppercase; transition: all 0.2s;}
.btn:hover{background: var(--text); color: var(--bg);}

/* Transparent outline button (used for "Zjistit více/víc") */
.btn.btnOutline{border-width:2px; border-color: var(--border2);}

.btnPrimary{background: var(--text); color: var(--bg); border-color: var(--text);}
.btnPrimary:hover{background: transparent; color: var(--text);}

/* Hero Section */
.hero{
	position:relative;
	height: clamp(460px, 60vh, 460px);
	--h1Size: clamp(34px, 4vw, 50px);
	display:flex;
	align-items:center;
	overflow:hidden;
	background-color: #111;
	border-bottom: 1px solid var(--separator);
}
.hero::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.55) 100%),
		radial-gradient(1200px 700px at 18% 46%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.00) 62%),
		radial-gradient(900px 650px at 88% 34%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.00) 58%);
	pointer-events:none;
	z-index: 0;
}
.heroMedia{
	position:absolute;
	inset:0;
	background-image: url('/assets/hero-bg.jpg');
	background-size: cover;
}
/* Gradient overlay for hero */
.heroMedia::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0,0,0,0.86) 0%,
		rgba(0,0,0,0.72) 20%,
		rgba(0,0,0,0.55) 32%,
		rgba(0,0,0,0.34) 41%,
		rgba(0,0,0,0.16) 47%,
		rgba(0,0,0,0.06) 52%,
		rgba(0,0,0,0.00) 56%
	);
	pointer-events:none;
}

.heroInner{position:relative; width: 100%; z-index: 1; padding: 120px 0 70px;}
.heroCopy{max-width:560px; text-align:center;}
.heroCopy h1 { margin-bottom: 18px; max-width: none; white-space: nowrap; }
.heroCopy h1::after{
	content:'';
	display:block;
	height:1px;
	width: 570px;
	margin: 10px auto 0;
	background: var(--separator);
}
.heroCopy .eyebrow{margin:20px 0 28px;color:var(--text);font-size:16px;letter-spacing:3.4px;text-transform:uppercase; opacity: 0.82;}
.heroCopy .actions{display:flex; justify-content:center;}
.actions{margin-top: 0;}

@media(max-width:768px){
	.heroCopy h1{white-space: normal;}
	.heroCopy h1::after{width: 240px; margin-top: 16px;}
	.heroCopy .eyebrow{font-size:11px; letter-spacing:3.2px;}
}

/* Page header (non-home) */
.pageHead{
	position:relative;
	padding: 140px 0 70px; /* clears absolute topbar */
	border-bottom: 1px solid var(--separator);
	overflow:hidden;
}
.pageHead.pageHeadServices{padding: 170px 0 178px;}
.pageHead.pageHeadServices .actions{margin-top: 38px;}
.pageHead::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(to right, rgba(0,0,0,0.32), rgba(0,0,0,0.12)),
		url('/assets/hero-bg.jpg');
	background-size: cover;
	background-position: center;
	opacity: .55;
}
.pageHead > .container{position:relative; z-index:1;}
.pageHead .eyebrow{margin:0 0 14px;color:var(--text);font-size:12px;letter-spacing:3px;text-transform:uppercase; opacity: .8;}
.pageHead h1{margin-bottom: 18px;}
.pageHead .lead{max-width: 70ch; margin-bottom: 22px;}
.pageHead .aboutStack{margin-top: 26px; max-width: 80ch;}

/* Sections */
.section{padding:48px 0; border-bottom: 1px solid var(--separator);}
.section.sectionTop{padding-top: 140px;}
.sectionTitle{display:flex;align-items:center;gap:26px;justify-content:center;margin:0 0 34px;}
.sectionTitle h2{margin:0;font-size:20px;letter-spacing:5px;text-transform:uppercase;color:var(--text);font-family:var(--fontDisplay);font-weight:400;}
.sectionTitle span{height:1px;flex:1;background:rgba(255,255,255,0.14);}
.sectionTitle.left { justify-content: flex-start; }
.sectionTitle.left span { display: none; }

/* Separate hook for the "INSPIRACE & TIPY" heading */
.sectionTitle h2.insightsTitle{
	font-size:30px;
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}
.sectionTitle h2.insightsTitle::after{
	content: '';
	position: absolute;
	left: 0;
	width: 380px;
	bottom: 0;
	height: 1px;
	background: rgba(255,255,255,0.14);
}

@media(max-width:768px){
	.sectionTitle h2{font-size:16px; letter-spacing:4px;}
	.sectionTitle h2.insightsTitle{font-size:16px; padding-bottom: 12px;}
	.sectionTitle h2.insightsTitle::after{width: 240px;}
}

/* Services section panel background (like the reference) */
.servicesSection{position:relative; overflow:hidden;}
.servicesSection::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.55) 100%),
		radial-gradient(1200px 520px at 50% 35%, rgba(255,255,255,0.050) 0%, rgba(255,255,255,0.00) 62%),
		url('/assets/section-services-bg.jpg');
	background-size: cover;
	background-position: center;
	pointer-events:none;
}
.servicesSection > .container{position:relative; z-index:1;}

/* Services Tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media(max-width:768px){.tiles{grid-template-columns:1fr;}}

.tile{display:block;text-decoration:none;color:inherit; overflow:hidden; transition: transform 0.3s;}
.tile:hover{transform: translateY(-5px);}

.tile.tileStatic:hover{transform:none;}

/* Details tiles are informational (no hover interaction) */
.detailsSection .tile{cursor:default;}
.detailsSection .tile:hover{transform:none;}

.tileImg{height:220px;background-size:cover;background-position:center; margin-bottom: 18px; opacity: 0.88; border: 1px solid rgba(255,255,255,0.18);}
.tile:hover .tileImg{border-color: var(--border2);}

.detailsSection .tile:hover .tileImg{border-color: rgba(255,255,255,0.18);}

@media(max-width:768px){
	.tileImg{height:200px;}
}
.tileBody{text-align:center;}
.tileTitle{font-family:var(--serif);font-size:17px;letter-spacing:1.2px; margin-bottom: 6px;}

/* Services tile titles: use the display serif (Bodoni Moda) */
.servicesSection .tileTitle{font-family: var(--fontDisplay); letter-spacing: 1.5px;}
.tileSub{color:var(--muted);font-size:10px;letter-spacing:2px;text-transform:uppercase; position:relative; padding-top: 14px; margin-top: 10px;}
.tileSub::before{
	content:'';
	position:absolute;
	top:0;
	left:50%;
	width:220px;
	height:1px;
	transform: translateX(-50%);
	background: rgba(255,255,255,0.14);
}
.tileText{margin: 14px auto 0; max-width: 46ch; color: var(--muted);}

/* Insights Section */
.insightsSection.section{padding:0;}
.insightsSection{position:relative; overflow:hidden;}
.insightsSection::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.62) 100%),
		radial-gradient(1000px 640px at 18% 46%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.00) 62%),
		url('/assets/insights.jpg');
	background-size: cover;
	pointer-events:none;
}
.insightsSection > .container{position:relative; z-index:1; max-width: var(--siteMax);}

.insightsPanel{
	position: relative;
	border: 0;
	background: transparent;
	min-height: 300px;
	padding: 72px 0;
}
.insightsContent{position:relative; z-index:1; max-width: 520px; margin-left: 7%;}
.insightsContent h3 { font-size: 16px; color: var(--text); margin-bottom: 22px; position: relative; padding-bottom: 14px; }
.insightsContent h3::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 260px;
	height: 1px;
	background: rgba(255,255,255,0.14);
}
.insightsContent p { margin-bottom: 30px; max-width: 46ch; }
@media(max-width:768px){
	.insightsPanel{padding: 44px 0; min-height: 360px;}
	.insightsContent h3{padding-bottom: 12px; margin-bottom: 20px;}
	.insightsContent h3::after{width: 180px;}
}

/* Details Section */
.detailsSection{position:relative; overflow:hidden;}
.detailsSection::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.62) 100%),
		radial-gradient(1200px 520px at 50% 35%, rgba(255,255,255,0.040) 0%, rgba(255,255,255,0.00) 62%),
		url('/assets/section-details-bg.jpg');
	background-size: cover;
	background-position: center;
	pointer-events:none;
}
.detailsSection > .container{position:relative; z-index:1;}
.detailsSection .tileImg { height: 200px; }
.detailsSection .tileTitle { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-family: var(--sans); }

/* Footer */
.footer{padding:20px 0; position: relative; overflow: hidden; background: #050505;}
.footer::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%),
		radial-gradient(900px 420px at 25% 30%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.00) 62%),
		url('/assets/section-footer-bg.jpg');
	background-size: cover;
	background-position: center;
	pointer-events:none;
}
.footer > .container{position:relative; z-index:1;}
.footerGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media(max-width:768px){.footerGrid{grid-template-columns:1fr;}}
.footerCol h3 { font-size: 11px; letter-spacing: 2px; margin-bottom: 2px; color: var(--text); }
.footerCol.right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
@media(max-width:768px){.footerCol.right{align-items: flex-start;}}

.socials { display: flex; gap: 20px; margin-bottom: 20px; }
.socials a { color: var(--text); opacity: 0.7; transition: opacity 0.2s; }
.socials a:hover { opacity: 1; }

/* Form Elements */
input,select,textarea{
	padding:10px 12px;
	border:1px solid var(--border2);
	border-radius:0;
	font:inherit;
	color:var(--text);
	background:rgba(255,255,255,.04);
}

/* Ensure native form controls (notably <select> dropdown) respect dark theme */
select{
	color-scheme: dark;
}

/* Many browsers allow styling option background/text; harmless where ignored */
select option,
select optgroup{
	background-color: var(--bg);
	color: var(--text);
}

select option:disabled{
	color: var(--muted);
}

/* Shared layout primitives used across pages */
.card{
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.02);
	padding: 22px;
}

/* About page: no boxes, just clean vertical rhythm */
.aboutStack{display:grid; gap: 34px;}
.contactList{list-style: disc;}

.grid{display:grid; gap:16px;}
.grid2{grid-template-columns: repeat(2, minmax(0, 1fr));}
@media(max-width:768px){.grid2{grid-template-columns:1fr;}}

.field{display:flex; flex-direction:column; gap:8px; margin: 14px 0;}
.field label{font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color: rgba(255,255,255,0.80);}
.hint{color: var(--muted); font-size: 13px;}

.ok{border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); padding: 18px;}
.error{border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); padding: 18px;}

main > h1{
	padding-top: 130px; /* fallback for pages without .pageHead */
}