:root {
	--kt-bg: #fff;
	--kt-white: #ffffff;
	--kt-black: #000;
	--kt-accent: #a4d5eb;
	--kt-textAccent: #708ebc;

	--kt-font-xl: 3.75rem;
	--kt-font-lg: 1.75rem;
	--kt-font-rg: 1.18rem;
	--kt-font-md: 1rem;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Mulish', sans-serif;
	background: var(--kt-bg);
}

.ktLogoWrapper {
	display: flex;
	align-items: end;
	gap: 20px;
}

.ktLogoText {
	font-weight: bold;
	font-size: var(--kt-font-xl);
	margin-top: 0.5rem;
}

.ktHighlight {
	color: var(--kt-textAccent);
}

.ktSubtitle {
	margin-bottom: 1.5rem;
}

.ktSubtitle p {
	color: var(--kt-gray);
	font-size: var(--kt-font-lg);
	margin-top: 10px;
	line-height: 1.4;
}

.ktDescription {
	margin-bottom: 1.5rem;
}

.ktDescription p {
	color: var(--kt-gray);
	font-size: var(--kt-font-md);
	margin-top: 10px;
	line-height: 1.4;
}

.ktFeatures p {
	margin: 10px 0;
	font-weight: bold;
}

.ktFeatures ul {
	list-style: none;
	padding-left: 0;
	position: relative;
	z-index: 999;
}

.ktFeatures ul li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--kt-gray);
	font-size: var(--kt-font-md);
	margin: 5px 0;
}

.ktFeatures ul li::before {
	content: '+';
	color: var(--kt-textAccent);
	font-weight: bold;
	font-size: 1.2rem;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 1;
}

/* --- GÓRNA SEKCJA --- */
.ktTop {
	padding: 60px 0 0;
	display: flex;
	justify-content: center;
	background-size: cover;
}

.ktTopInner {
	padding: 60px 0;
	width: 100%;
	height: 100%;
	max-width: 1600px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	position: relative;
	background: url('images/tlo.png') no-repeat center center;
}

.ktTopInner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 300px; /* szerszy obszar efektu */
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.7) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

.ktTopInner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.ktText {
	width: 100%;
	max-width: 700px;
	padding: 0 40px;
}

/* --- DOLNA SEKCJA --- */
.ktBottom {
	display: flex;
	justify-content: center;
	background: var(--kt-white);
}

.ktBottom {
	background: var(--kt-white);
}

.ktBottomInner {
	width: 100%;
	padding: 0 40px;
	max-width: 1600px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	box-sizing: border-box;
}

.ktBox {
	display: flex;
	justify-content: center;
	align-items: center;
}

.ktFwBold {
	font-weight: bold;
}

.ktImgBox img {
	width: 400px;
	height: auto;
	display: block;
	position: relative;
	top: -97px;
}

.ktContactBox {
	max-width: 1000px;
	width: 100%;
	align-self: flex-start; /* opcjonalnie: przyklej u góry, nie równa wysokości obrazka */
	background-color: var(--kt-accent);
	padding: 1rem 2rem;
	color: var(--kt-white);
	box-sizing: border-box;
}

.ktContactText {
	color: var(--kt-black);
	font-size: var(--kt-font-md);
	margin: 0;
	padding: 0;
}

.ktContactText a {
	color: var(--kt-black);
	font-weight: bold;
	text-decoration: underline;
}

.ktKsefMobile,
.ktContactMobile {
	display: none;
}

.ktMobileText {
	color: var(--kt-black);
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 1048px) {
	/* --- DOLNA SEKCJA --- */
	.ktBottom {
		display: none;
	}

	.ktKsefMobile {
		display: block;
	}

	.ktKsefMobile img {
		width: 200px;
		margin: 40px 0;
	}

	.ktContactMobile {
		margin: 40px 0;
		padding: 1rem 2rem;
		display: block;
		width: 100%;
		text-align: left;
		background-color: var(--kt-accent);
	}

	.ktTopInner {
		background: url('images/tloMobile.png') no-repeat center center;
	}

	.ktTopInner::before,
	.ktTopInner::after {
		display: none;
	}

	.ktTop {
		height: auto;
		padding: 0;
	}

	.ktImgBox img {
		display: none;
	}

	.ktMobileText {
		color: var(--kt-textAccent);
	}

	.ktTopInner {
		min-height: 100vh;
		justify-content: center;
	}

	.ktDescription {
		margin: 0.5rem 0;
	}

	.ktSubtitle p,
	.ktDescription p,
	.ktFeatures p,
	.ktFeatures ul {
		list-style: none;
		padding-left: 0;
		position: relative;
		z-index: 999;
		text-align: left;
	}

	.ktText {
		max-width: 100%;
		text-align: center;
	}

	.ktBottom {
		height: auto;
	}

	.ktBottomInner {
		flex-direction: column;
	}

	.ktBottomInner img {
		max-width: 100%;
	}
}

@media (max-width: 450px) {
	:root {
		--kt-font-xl: 2.4rem;
		--kt-font-lg: 1.5rem;
		--kt-font-rg: 1.1rem;
		--kt-font-md: 0.9rem;
	}

	.ktText {
		padding: 0 20px;
	}
}