/*
* Allintellect — strona główna
*
* Źródło: autorski CSS z widgetów HTML serwisu allintellect.pl, oczyszczony
* i przeniesiony do plików motywu. Zmiany względem oryginału: usunięte @import
* fontów (ładowane przez wp_enqueue_style), ścieżki obrazów wskazują na motyw,
* kolory stref sterowane zmienną --ai-module-color zamiast sześciu duplikatów.
*/

/* Scoping all styles to only affect elements within .ai-hero-section */
.ai-hero-section {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.ai-hero-section .hero {
	position: relative;
	background: var(--ai-hero-bg) no-repeat center center/cover;
	height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	overflow: hidden;
}

.ai-hero-section .hero-content {
	width: 100%;
	max-width: 1200px;
	position: relative;
	z-index: 2;
	padding: 30px;
	border-radius: 15px;
	/* Using a gradient background instead of semi-transparent overlay */
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
	/* Glass effect */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-family: 'Comfortaa', sans-serif;
}

.ai-hero-section .logo-container {
	margin-bottom: 10px; /* Standard small spacing */
	position: relative;
	z-index: 3;
}

.ai-hero-section .logo {
	width: 525px; /* Keeping the larger size */
	display: block;
	margin: 0 auto; /* Center the logo */
	transform: scale(0.1); /* Start small */
	transition: transform 0.8s ease, filter 0.5s ease;
	transition-delay: 0s, 0.8s; /* Delay the color change until after zoom */
	filter: brightness(1); /* Start with original color */
}

.ai-hero-section .logo.active {
	transform: scale(1); /* Zoom to full size */
	filter: brightness(10); /* Change to white after zoom completes */
}
.ai-hero-section h1 {
	font-size: 2.2rem;
	margin: 0 0 30px 0;
	position: relative;
	z-index: 2;
	line-height: 1.2;
	padding: 0;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	letter-spacing: 1px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: 1s; /* Start after logo zoom is mostly complete */
	color: white;
	font-family: 'Comfortaa', sans-serif;
	font-weight: 700;
}

.ai-hero-section h1.active {
	opacity: 1;
	transform: translateY(0);
}
.ai-hero-section .buttons {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: 1.3s; /* Start shortly after the text appears */
}

.ai-hero-section .buttons.active {
	opacity: 1;
	transform: translateY(0);
}

.ai-hero-section .buttons .btn {
	display: inline-block;
	padding: 14px 28px;
	margin: 10px;
	font-size: 1.1rem;
	color: white;
	text-decoration: none;
	background: rgba(255, 69, 0, 0.9);
	border-radius: 6px;
	transition: all 0.3s;
	font-family: 'Comfortaa', sans-serif;
	font-weight: 600;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
}

.ai-hero-section .buttons .btn:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: 0.5s;
}

.ai-hero-section .buttons .btn:hover:before {
	left: 100%;
}

.ai-hero-section .buttons .btn.secondary {
	background: rgba(51, 51, 51, 0.9);
}

.ai-hero-section .buttons .btn:hover {
	background: rgba(51, 51, 51, 1);
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.ai-hero-section .buttons .btn.secondary:hover {
	background: rgba(255, 69, 0, 1);
}

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

body {
	font-family: 'Comfortaa', sans-serif;
	overflow-x: hidden;
}

/* Mobile header styles with unique class names */
.mobile-header {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0,0,0); /* Prevent mobile browser address bar from causing resize */
}

.mobile-header__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--ai-hero-bg) no-repeat center center/cover;
	z-index: 1;
	transform: translateZ(0); /* Force hardware acceleration */
	backface-visibility: hidden; /* Prevent flickering */
	perspective: 1000; /* Enhance performance */
	will-change: transform; /* Hint to browser about animation */
}

.mobile-header__wrapper {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	padding: 20px;
}

.mobile-header__content-container {
	width: 85%;
	max-width: 450px;
	margin: 0 auto;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
	padding: 30px 25px;
}

.mobile-header__logo-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.mobile-header__logo {
	width: 80%;
	max-width: 280px;
	transform: scale(0.1);
	transition: transform 0.8s ease, filter 0.5s ease;
	transition-delay: 0s, 0.8s;
	filter: brightness(1);
}

.mobile-header__logo--animated {
	transform: scale(1);
	filter: brightness(10);
}

.mobile-header__title {
	color: white;
	font-size: 1.7rem;
	text-align: center;
	margin-bottom: 25px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.5px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: 1s;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mobile-header__title--animated {
	opacity: 1;
	transform: translateY(0);
}

.mobile-header__buttons {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 15px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: 1.3s;
}

.mobile-header__buttons--animated {
	opacity: 1;
	transform: translateY(0);
}

.mobile-header__button {
	display: block;
	width: 100%;
	padding: 14px 20px;
	font-size: 1rem;
	text-align: center;
	color: white !important; /* Force white text */
	background: rgba(255, 69, 0, 0.9);
	border-radius: 12px;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mobile-header__button:active {
	transform: scale(0.98);
	background: rgba(255, 69, 0, 1);
}

.mobile-header__button--secondary {
	background: rgba(51, 51, 51, 0.9);
	color: white !important; /* Force white text */
}

.mobile-header__button--secondary:active {
	background: rgba(51, 51, 51, 1);
}

.mobile-header__button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: 0.5s;
}

.mobile-header__button:active::before {
	left: 100%;
}

.mobile-header__scroll-indicator {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	opacity: 0;
	transition: opacity 0.7s ease;
	transition-delay: 1.8s;
}

.mobile-header__scroll-indicator--animated {
	opacity: 0.85;
	animation: mobile-header__bounce 2s infinite;
}

.mobile-header__scroll-icon {
	width: 32px;
	height: 32px;
	fill: white;
}

@keyframes mobile-header__bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
40% {
	transform: translateY(-10px);
}
60% {
	transform: translateY(-5px);
}
}

/* Media queries */
@media (min-width: 480px) {
	.mobile-header__content-container {
		width: 80%;
		padding: 35px 30px;
	}

.mobile-header__logo {
	max-width: 300px;
}

.mobile-header__title {
	font-size: 1.8rem;
}

.mobile-header__buttons {
	flex-direction: row;
	justify-content: center;
	gap: 12px;
}

.mobile-header__button {
	width: auto;
	padding: 14px 24px;
}
}

@media (max-width: 767px) {
	body {
		padding-top: 60px; /* Adjust based on your hamburger menu height */
	}
}

@keyframes mmFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
100% {
	opacity: 1;
	transform: translateY(0);
}
}

@keyframes mmRipple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* Force Comfortaa font with multiple fallbacks and !important */
.ai-services-container,
.ai-services-container * {
	font-family: 'Comfortaa', sans-serif !important;
}

.ai-services-container h2 {
	font-family: 'Comfortaa', 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif !important;
	font-weight: 700 !important;
}

.ai-services-container {
	max-width: 1400px; /* Increased from 1200px */
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

.ai-services-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px; /* Increased from 20px */
	margin-bottom: 30px; /* Increased from 20px */
}

.ai-service-module {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	height: 580px; /* Reduced height for more balanced proportions */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease forwards;
}

/* Different colors for each module */
.ai-service-module:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.ai-module-content {
	position: relative;
	z-index: 2;
	padding: 25px 25px 80px; /* Increased horizontal padding, reduced bottom padding */
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.ai-module-header {
	text-align: center;
	margin-bottom: 15px;
}

.ai-module-header h2 {
	color: white;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.3;
}

.ai-module-description {
	color: white;
	font-size: 14px;
	margin: 0;
	line-height: 1.4;
}

.ai-feature-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px; /* Increased from 12px */
	margin: 25px 0 50px; /* Reduced bottom margin to accommodate shorter height */
}

.ai-feature-item {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 15px; /* Increased from 12px 10px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 110px; /* Reduced height but increased width via container */
	height: auto; /* Allow height to grow as needed */
	transition: background-color 0.3s ease, transform 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden; /* Prevent content from overflowing */
}

.ai-feature-item:hover {
	background-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-3px);
}

.ai-feature-icon {
	color: white;
	font-size: 18px;
	margin-bottom: 6px;
	flex-shrink: 0;
}

.ai-feature-text {
	color: white;
	font-size: 13.5px; /* Slightly reduced size to prevent wrapping */
	line-height: 1.4; /* Slightly reduced line height */
	width: 100%;
	margin-top: 6px;
	word-wrap: normal; /* Changed from break-word to prevent unnecessary wrapping */
	hyphens: none; /* Disabled hyphenation */
	white-space: normal; /* Allow natural wrapping only when necessary */
}

.ai-module-footer {
	text-align: center;
	position: absolute;
	bottom: 35px; /* Moved up from 50px */
	left: 0;
	right: 0;
	padding: 0;
	z-index: 5;
}

.ai-cta-button {
	display: inline-block;
	background-color: white;
	text-decoration: none;
	padding: 16px 30px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	min-width: 200px; /* Increased minimum width */
}

/* Kolor przycisku bierzemy ze zmiennej działu — oryginał powtarzał go
   w sześciu regułach :nth-child, przez co zmiana koloru wymagała edycji CSS. */
.ai-cta-button { color: var(--ai-module-color, var(--ai-orange-1)); }

.ai-cta-button:hover {
	background-color: #333;
	color: white;
	transform: translateY(-2px);
}

.ai-cta-button:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: 0.5s;
}

.ai-cta-button:hover:before {
	left: 100%;
}

.ai-module-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none; /* Ensures clicks pass through to buttons */
}

/* Enhanced particle float animation */
@keyframes floatParticle {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0.2;
	}
25% {
	transform: translateY(-30px) translateX(20px);
	opacity: 0.5;
}
50% {
	transform: translateY(5px) translateX(35px);
	opacity: 0.4;
}
75% {
	transform: translateY(30px) translateX(20px);
	opacity: 0.5;
}
100% {
	transform: translateY(0) translateX(0);
	opacity: 0.2;
}
}

/* Animation for module entrance */
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
100% {
	opacity: 1;
	transform: translateY(0);
}
}

/* Stagger animation for rows */
.ai-services-row:nth-child(1) .ai-service-module:nth-child(1) {
	animation-delay: 0.1s;
}
.ai-services-row:nth-child(1) .ai-service-module:nth-child(2) {
	animation-delay: 0.2s;
}
.ai-services-row:nth-child(1) .ai-service-module:nth-child(3) {
	animation-delay: 0.3s;
}
.ai-services-row:nth-child(2) .ai-service-module:nth-child(1) {
	animation-delay: 0.4s;
}
.ai-services-row:nth-child(2) .ai-service-module:nth-child(2) {
	animation-delay: 0.5s;
}
.ai-services-row:nth-child(2) .ai-service-module:nth-child(3) {
	animation-delay: 0.6s;
}

/* Responsive adjustments */
/* Better responsive adjustments */
@media (max-width: 1200px) {
	.ai-services-container {
		max-width: 1100px;
	}

.ai-feature-text {
	font-size: 13px;
}
}

@media (max-width: 1000px) {
	.ai-services-container {
		max-width: 900px;
	}

.ai-services-row {
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}

.ai-service-module {
	height: 540px;
}
}

@media (max-width: 700px) {
	.ai-services-container {
		padding: 15px;
	}

.ai-services-row {
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.ai-service-module {
	height: auto;
	min-height: 500px;
	animation: fadeIn 0.8s ease forwards;
	padding-bottom: 60px; /* Reduced from 80px */
}

.ai-feature-list {
	margin: 20px 0 40px; /* Reduced margins */
}

.ai-feature-item {
	min-height: 90px; /* Reduced height on mobile */
	padding: 12px;
}

.ai-module-footer {
	bottom: 25px;
}

.ai-cta-button {
	padding: 14px 25px;
	font-size: 15px;
	width: 80%;
	max-width: 220px;
	min-width: 180px;
}

/* Mobile animation */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
100% {
	opacity: 1;
}
}
}

/* Dramatically enhanced animation */
.ai-service-module::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
	circle at 50% 50%,
	rgba(255, 255, 255, 0.15) 0%,
	rgba(255, 255, 255, 0) 60%
	);
	opacity: 0;
	animation: pulse 8s infinite ease-in-out;
	z-index: 1;
}

.ai-service-module::after {
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	background: linear-gradient(
	45deg,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.12) 50%, /* Significantly increased opacity */
	rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(30deg);
	animation: shimmer 10s infinite linear; /* Faster animation */
	z-index: 1;
}

@keyframes pulse {
	0%, 100% {
		opacity: 0;
	}
50% {
	opacity: 1;
}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%) rotate(30deg);
	}
100% {
	transform: translateX(100%) rotate(30deg);
}
}

/* Mobile-specific styles */
@media (max-width: 767px) {
/* Show mobile version */
.ai-services-container {
	display: block;
	font-family: 'Comfortaa', sans-serif;
	max-width: 100%;
	padding: 15px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ai-mobile-header {
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}

.ai-mobile-header h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
}

.ai-services-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ai-service-module {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 15px;
	opacity: 0;
	animation: fadeInMobile 0.5s ease forwards;
}

.ai-module-header {
	margin-bottom: 8px;
}

.ai-module-header h2 {
	color: white;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.ai-module-description p {
	color: white;
	font-size: 14px;
	margin: 0 0 15px;
	line-height: 1.4;
}

.ai-feature-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px;
}

.ai-feature-item {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	transition: background-color 0.3s;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-feature-item:active {
	background-color: rgba(255, 255, 255, 0.25);
}

.ai-feature-icon {
	color: #ffffff !important; /* Forcing white with !important */
	font-size: 16px;
	margin-right: 8px;
	flex-shrink: 0;
	font-weight: bold; /* Making it more visible */
}

.ai-feature-item span:last-child {
	color: white;
	font-size: 14px;
}

.ai-module-footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.ai-cta-button {
	display: inline-block;
	background-color: white;
	color: inherit;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	text-align: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s, background-color 0.3s;
}

.ai-cta-button:active {
	transform: translateY(2px);
	background-color: #f3f3f3;
}

/* Mobile animations */
@keyframes fadeInMobile {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
to {
	opacity: 1;
	transform: translateY(0);
}
}

/* Enhanced particle effect for mobile */
.ai-service-module::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
	circle at 50% 50%,
	rgba(255, 255, 255, 0.12) 0%,
	rgba(255, 255, 255, 0) 70%
	);
	opacity: 0;
	animation: pulseMobile 6s infinite ease-in-out;
	z-index: 0;
	pointer-events: none;
}

@keyframes pulseMobile {
	0%, 100% {
		opacity: 0;
	}
50% {
	opacity: 1;
}
}

/* Button shine effect */
.ai-cta-button::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
	45deg,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.3) 50%,
	rgba(255, 255, 255, 0) 100%
	);
	opacity: 0.5;
	transform: rotate(30deg);
	animation: shimmerMobile 3s infinite;
	pointer-events: none;
}

@keyframes shimmerMobile {
	0% {
		transform: translateX(-100%) rotate(30deg);
		opacity: 0;
	}
15% {
	opacity: 0.3;
}
50% {
	opacity: 0;
}
100% {
	transform: translateX(100%) rotate(30deg);
	opacity: 0;
}
}
}

/* Adjustments for smaller mobile screens */
@media (max-width: 375px) {
	.ai-module-header h2 {
		font-size: 16px;
	}

.ai-module-description p,
.ai-feature-item span:last-child {
	font-size: 13px;
}

.ai-cta-button {
	font-size: 14px;
	padding: 10px 16px;
}
}

.ai-about-module-container {
	font-family: 'Comfortaa', sans-serif;
	max-width: 1200px;
	margin: 30px auto;
	padding: 20px;
	box-sizing: border-box;
}

.ai-about-header {
	position: relative;
	width: 100%;
	margin-bottom: 30px;
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Uwaga: autor napisał tu height:350px z object-fit:cover, ale na produkcji
   regułę zjadało `img { height: auto }` z Divi i zdjęcie renderowało się
   w pełnej wysokości (810×540 przy tej szerokości). Odwzorowujemy stan
   faktyczny ze strony, nie intencję z arkusza. */
.ai-about-image {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(0.85);
}

.ai-about-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 48px;
	font-weight: 700;
	text-align: center;
	margin: 0;
	padding: 0;
	z-index: 2;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	width: 100%;
}

.ai-about-grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.ai-about-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	height: 300px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease forwards;
}

.ai-about-card:nth-child(1) {
	background-color: #FFA500;
	animation-delay: 0.1s;
}

.ai-about-card:nth-child(2) {
	background-color: #FF9000;
	animation-delay: 0.2s;
}

.ai-about-card:nth-child(3) {
	background-color: #FF7B00;
	animation-delay: 0.3s;
}

.ai-about-card:nth-child(4) {
	background-color: #FF6600;
	animation-delay: 0.4s;
}

.ai-about-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.ai-about-card-content {
	position: relative;
	z-index: 2;
	padding: 25px;
	height: 100%;
	color: white;
}

.ai-about-card h3 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 15px 0;
	text-align: center;
	color: white;
}

.ai-about-card p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* New taglines section */
.ai-taglines {
	margin-top: 50px;
	text-align: center;
	position: relative;
	padding: 30px 0;
}

.ai-taglines:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255,102,0,0.1) 0%, rgba(255,165,0,0.7) 50%, rgba(255,102,0,0.1) 100%);
	border-radius: 12px;
	z-index: -1;
	box-shadow: 0 5px 20px rgba(255, 123, 0, 0.3);
}

.ai-taglines p {
	font-size: 22px;
	font-weight: 700;
	margin: 25px 0;
	color: white;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: scale(0.8);
	animation: taglineAnim 0.8s forwards;
}

.ai-taglines p:nth-child(1) {
	animation-delay: 0.2s;
}

.ai-taglines p:nth-child(2) {
	animation-delay: 0.6s;
}

.ai-taglines p:nth-child(3) {
	animation-delay: 1s;
}

@keyframes taglineAnim {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(20px);
	}
60% {
	transform: scale(1.05) translateY(-5px);
}
100% {
	opacity: 1;
	transform: scale(1) translateY(0);
}
}

.ai-about-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

/* Animation for cards */
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
100% {
	opacity: 1;
	transform: translateY(0);
}
}

/* Background animations */
.ai-about-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
	circle at 50% 50%,
	rgba(255, 255, 255, 0.15) 0%,
	rgba(255, 255, 255, 0) 60%
	);
	opacity: 0;
	animation: pulse 8s infinite ease-in-out;
	z-index: 1;
}

.ai-about-card::after {
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	background: linear-gradient(
	45deg,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.12) 50%,
	rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(30deg);
	animation: shimmer 10s infinite linear;
	z-index: 1;
}

@keyframes pulse {
	0%, 100% {
		opacity: 0;
	}
50% {
	opacity: 1;
}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%) rotate(30deg);
	}
100% {
	transform: translateX(100%) rotate(30deg);
}
}

/* Responsive adjustments */
@media (max-width: 900px) {
	.ai-about-grid-container {
		grid-template-columns: repeat(2, 1fr);
	}

.ai-about-card {
	height: 350px;
}
}

@media (max-width: 600px) {
	.ai-about-grid-container {
		grid-template-columns: 1fr;
	}

.ai-about-card {
	height: auto;
	min-height: 320px;
	animation: fadeIn 0.8s ease forwards;
}

.ai-about-title {
	font-size: 32px;
}

.ai-about-image {
	height: 250px;
}

.ai-taglines p {
	font-size: 18px;
	margin: 20px 0;
}

.ai-taglines:before {
	background: linear-gradient(90deg, rgba(255,102,0,0.2) 0%, rgba(255,165,0,0.8) 50%, rgba(255,102,0,0.2) 100%);
}

/* Mobile animation */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
100% {
	opacity: 1;
}
}
}

:root {
	--orange-primary: #ff6b35;
	--orange-light: #ff8a00;
	--orange-bright: #ffa500;
	--orange-pale: #ffcc80;
	--orange-gradient-start: #ff5722;
	--orange-gradient-end: #ff9800;
	--white: #ffffff;
	--black: #222222;
	--text-gray: #666666;
	--font-main: 'Comfortaa', sans-serif;
	--spacing-base: 20px;
	--card-radius: 16px;
	--transition: all 0.3s ease;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-main) !important;
}

body {
	background-color: var(--white);
	color: var(--black);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.section-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: calc(var(--spacing-base) * 3) var(--spacing-base);
}

.career-main-section {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #ff5722 0%, #ff6b35 20%, #ff8a00 50%, #ff9800 80%, #ffa500 100%);
	border-radius: var(--card-radius);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(255, 87, 34, 0.2);
	position: relative;
}

.career-main-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 30% 50%, rgba(255, 138, 0, 0.3) 0%, transparent 60%),
	radial-gradient(circle at 70% 20%, rgba(255, 87, 34, 0.2) 0%, transparent 50%);
	pointer-events: none;
}

.career-main-content {
	flex: 1;
	padding: calc(var(--spacing-base) * 3);
	position: relative;
	z-index: 1;
}

.career-main-image {
	flex: 1;
	max-width: 50%;
	height: 100%;
}

.career-main-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.career-main-title {
	font-size: clamp(32px, 4vw, 42px);
	font-weight: 700;
	color: var(--white);
	margin-bottom: 20px;
	line-height: 1.2;
}

.career-main-description {
	font-size: 18px;
	color: var(--white);
	margin-bottom: 30px;
	line-height: 1.6;
}

.career-areas-list {
	list-style: none;
	margin-bottom: 35px;
}

.career-areas-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	color: var(--white);
	font-size: 16px;
	line-height: 1.5;
}

.career-areas-list li::before {
	content: "•";
	position: absolute;
	left: 12px;
	color: var(--white);
	font-weight: bold;
	font-size: 20px;
}

.career-main-contact {
	font-size: 17px;
	color: var(--white);
	line-height: 1.6;
	margin-bottom: 25px;
}

.career-main-contact strong {
	font-weight: 700;
	color: var(--white);
}

.career-apply-button {
	background-color: var(--white);
	color: var(--orange-primary) !important;
	border: none;
	border-radius: 30px;
	padding: 14px 35px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	display: inline-block;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.career-apply-button:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
	.career-main-section {
		flex-direction: column;
	}

.career-main-image {
	max-width: 100%;
	height: 300px;
}

.career-main-content {
	padding: calc(var(--spacing-base) * 2);
}

.career-main-title {
	font-size: 28px;
}

.career-main-description {
	font-size: 16px;
}

.career-areas-list li {
	font-size: 15px;
}
}

/* ─────────────────────────────────────────────────────────────
* Kolory stref
*
* Oryginał powtarzał te same kolory w sześciu regułach :nth-child (osobno dla
* desktopu i telefonu) i w sześciu regułach [data-color]. Tutaj kolor przychodzi
* ze zmiennej ustawianej w szablonie, więc zmiana koloru strefy w panelu
* działa wszędzie naraz.
* ───────────────────────────────────────────────────────────── */

.ai-service-module { background-color: var(--ai-module-color, var(--ai-orange-1)); }

.ai-cta-button { color: var(--ai-module-color, var(--ai-orange-1)); }

.ai-about-card { --ai-card-accent: var(--ai-card-color, var(--ai-orange-1)); }


.ai-about-card:nth-child(1) { animation-delay: .1s; }
.ai-about-card:nth-child(2) { animation-delay: .2s; }
.ai-about-card:nth-child(3) { animation-delay: .3s; }
.ai-about-card:nth-child(4) { animation-delay: .4s; }

/* Układ siatki usług — dwa wiersze po trzy moduły, dokładnie jak w oryginale.
   Progi i odstępy przepisane z reguł .ai-services-row. */
.ai-services-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

.ai-services-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 30px;
}

@media (max-width: 1200px) {
	.ai-services-container { max-width: 1100px; }
}

@media (max-width: 1000px) {
	.ai-services-container { max-width: 900px; }
	.ai-services-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
}

@media (max-width: 700px) {
	.ai-services-container { padding: 15px; }
	.ai-services-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* ─────────────────────────────────────────────────────────────
 * Przełączanie wariantu desktop / telefon
 *
 * W oryginale robiły to klasy elementor-hidden-desktop / -mobile, czyli
 * mechanizm buildera. Skoro buildera nie ma, próg 767 px zapisujemy wprost.
 * ───────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.mobile-header { display: none; }
}

@media (max-width: 767px) {
	.ai-hero-section { display: none; }
}

/* ─────────────────────────────────────────────────────────────
 * Unoszące się cząsteczki na kafelkach
 *
 * W oryginale każdą kropkę tworzył JavaScript i wpisywał jej style prosto
 * w atrybut style, a klatki kluczowe wstrzykiwał kolejnym <style>. Efekt jest
 * ten sam, ale wygląd opisuje arkusz, a skrypt tylko rozstawia kropki.
 *
 * Uwaga: oryginał deklarował DWIE różne animacje o tej samej nazwie
 * (floatParticle) — dla modułów i dla kart — więc druga nadpisywała pierwszą
 * i moduły dostawały nie swoją animację. Tutaj mają osobne nazwy.
 * ───────────────────────────────────────────────────────────── */

.ai-particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.ai-particle {
	position: absolute;
	border-radius: 50%;
	background-color: #fff;
	filter: blur(2px);
	will-change: transform;
}

@keyframes aiFloatCard {
	0%   { transform: translateY(0) translateX(0); opacity: .2; }
	25%  { transform: translateY(-30px) translateX(20px); opacity: .5; }
	50%  { transform: translateY(5px) translateX(35px); opacity: .4; }
	75%  { transform: translateY(30px) translateX(20px); opacity: .5; }
	100% { transform: translateY(0) translateX(0); opacity: .2; }
}

@keyframes aiFloatModule {
	0%   { transform: translateY(0) translateX(0); }
	25%  { transform: translateY(-20px) translateX(10px); }
	50%  { transform: translateY(0) translateX(20px); }
	75%  { transform: translateY(20px) translateX(10px); }
	100% { transform: translateY(0) translateX(0); }
}

/* Karty i moduły muszą tworzyć kontekst pozycjonowania dla kropek. */
.ai-about-card,
.ai-service-module { position: relative; }

.ai-about-card-content,
.ai-module-content { position: relative; z-index: 2; }

/* ─────────────────────────────────────────────────────────────
 * Tło sekcji „O Nas", „Kariera" i formularza
 *
 * Odwzorowuje kontener z oryginału: zdjęcie z nagłówka powitalnego jako tło
 * (kolor zapasowy #D8D8D8) przykryte nakładką #3D3D3D o kryciu 0,5.
 * Nakładka jest osobną warstwą, żeby nie przygaszała treści.
 * ───────────────────────────────────────────────────────────── */

.ai-tlo-glowna {
	position: relative;
	margin-top: 20px;
	background-color: #D8D8D8;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.ai-tlo-glowna::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #3D3D3D;
	opacity: .5;
	pointer-events: none;
}

.ai-tlo-glowna > * {
	position: relative;
	z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
 * Odstępy pionowe strony głównej
 *
 * W oryginale ustawiały je kontenery Elementora. Wartości zmierzone
 * na produkcji, sekcja po sekcji.
 * ───────────────────────────────────────────────────────────── */

.ai-menu-grid { margin-top: 52px; }

.ai-services-container { margin-top: 20px; }

/*
 * flow-root zamyka kontekst formatowania: bez tego margines sekcji „O Nas"
 * sklejałby się z marginesem kontenera i przesuwał całe tło zamiast treści.
 * Własnego paddingu u góry nie dodajemy — odstęp 30 px daje już sama sekcja.
 */
.ai-tlo-glowna {
	display: flow-root;
	padding-bottom: 50px;
}

.ai-tlo-glowna > .career-main-section,
.ai-tlo-glowna > .section-container { margin-top: 50px; }

.ai-tlo-glowna > .contact-form-wrapper { margin-top: 40px; }