* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
	font-family: 'Playfair Display', serif;
}

a {
	text-decoration: none;
}

.section-title {
	background: linear-gradient(180deg, #3b82f6 0%, #d946ef 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#home {
	background: url('../images/bg.png');
	background-size: cover;
	padding: 20px 8% 110px 8%;

	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(10px);
		padding: 15px 30px;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		margin-bottom: 80px;
		color: #ffffff;

		.logo {
			font-weight: 700;
			font-size: 1.1rem;
			letter-spacing: 0.05em;
			display: flex;
			flex-direction: column;
			gap: 4px;

			> div:first-child {
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.logo-icon {
				width: 34px;
				height: 24px;
				background: url('../images/logo.png');
				border-radius: 6px;
				background-size: cover;
			}

			.logo-slogan {
				font-weight: 600;
				font-size: 0.75rem;
				letter-spacing: 0.02em;
				background: linear-gradient(135deg, #3b82f6 0%, #d946ef 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
		}

		.nav-links {
			display: flex;
			gap: 25px;
			font-size: 0.85rem;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-weight: 500;

			a {
				color: #ffffff;
				opacity: 0.8;
				transition: opacity 0.3s;

				&:hover, &.active {
					opacity: 1;
					color: #3b82f6;
				}
			}
		}

		.minimenu {
			display: none;
			flex-direction: column;
			gap: 5px;
			background: none;
			border: none;
			cursor: pointer;
			padding: 5px;

			span {
				display: block;
				width: 24px;
				height: 2px;
				background: #ffffff;
				border-radius: 2px;
				transition: transform 0.3s, opacity 0.3s;
			}

			&.open span:nth-child(1) {
				transform: translateY(7px) rotate(45deg);
			}

			&.open span:nth-child(2) {
				opacity: 0;
			}

			&.open span:nth-child(3) {
				transform: translateY(-7px) rotate(-45deg);
			}
		}
	}

	.introduction-container {
		display: grid;
		grid-template-columns: 1.2fr 1fr;

		.introduction-text {
			h1 {
				font-size: 3.5rem;
				line-height: 1.2;
				margin-bottom: 25px;
				color: #ffffff;
			}

			p {
				font-size: 1.1rem;
				line-height: 1.6;
				color: #94a3b8;
				margin-bottom: 40px;
			}

			.contact-btn {
				display: inline-block;
				background: linear-gradient(135deg, #3b82f6 0%, #d946ef 100%);
				color: white;
				padding: 14px 35px;
				border-radius: 25px;
				font-weight: 600;
				box-shadow: 0 4px 20px rgba(217, 70, 239, 0.3);
				transition: box-shadow 0.3s;

				&:hover {
					box-shadow: 0 6px 25px rgba(217, 70, 239, 0.5);
				}
			}
		}
	}
}


#services {
	padding: 50px 8%;
	text-align: center;

	.section-title {
		font-size: 2.5rem;
		margin-bottom: 60px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 30px;

		.service-card {
			padding: 40px 30px;
			border-radius: 20px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
			border: 1px solid #e2e8f0;
			text-align: left;
			display: flex;
			flex-direction: column;

			h3 {
				font-family: 'Inter', sans-serif;
				font-size: 1.3rem;
				font-weight: 600;
				margin-bottom: 15px;
			}

			p {
				color: #64748b;
				font-size: 0.95rem;
				line-height: 1.6;
				padding-bottom: 5px;
			}

			.card-icons {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 25px;
				margin-top: auto;
				padding-top: 20px;
				border-top: 1px solid #e2e8f0;

				img {
					width: 32px;
					height: 32px;
					filter: grayscale(1);
				}

				.icon-badge {
					font-size: 1.5rem;
					cursor: default;
				}
			}

			.card-icons.pale {
				img {
					opacity: 0.45;
				}
			}
		}
	}
}


#products {
	padding: 50px 8%;
	background-color: #f8fafc;
	text-align: center;

	.section-title {
		font-size: 2.5rem;
		margin-bottom: 60px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.products-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		text-align: left;

		.product-card {
			background: white;
			border-radius: 20px;
			padding: 40px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.05);
			border: 1px solid #e2e8f0;

			.product-header {
				margin-bottom: 20px;

				h3 {
					font-family: 'Inter', sans-serif;
					font-size: 1.4rem;
					font-weight: 700;
					margin-bottom: 8px;
				}

				.product-badge {
					display: inline-block;
					font-size: 0.8rem;
					font-weight: 600;
					text-transform: uppercase;
					letter-spacing: 0.05em;
					color: #3b82f6;
					background: rgba(59, 130, 246, 0.08);
					padding: 4px 12px;
					border-radius: 20px;
				}
			}

			.product-description {
				color: #475569;
				font-size: 0.95rem;
				line-height: 1.7;
				margin-bottom: 30px;
			}

			.product-features {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 25px;

				.feature-group {
					h4 {
						font-family: 'Inter', sans-serif;
						font-size: 0.85rem;
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: 0.05em;
						margin-bottom: 10px;
						padding-bottom: 8px;
						border-bottom: 2px solid #3b82f6;
					}

					ul {
						list-style: none;

						li {
							font-size: 0.85rem;
							color: #64748b;
							line-height: 1.8;
							padding-left: 16px;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 9px;
								width: 6px;
								height: 6px;
								border-radius: 50%;
								background: linear-gradient(135deg, #3b82f6, #d946ef);
							}
						}
					}
				}
			}
		}
	}
}


#references {
	padding: 50px 0;
	background: #ffffff;
	text-align: center;

	.section-title {
		font-size: 2.5rem;
		margin-bottom: 60px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 0 8%;
	}

	.ref-slider {
		position: relative;
		overflow: hidden;
		padding: 0 8%;

		.ref-arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background: white;
			border: 1px solid #e2e8f0;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			font-size: 1.5rem;
			color: #0f172a;
			cursor: pointer;
			z-index: 10;
			transition: background 0.3s, box-shadow 0.3s, opacity 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;

			&:hover {
				background: #f8fafc;
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
			}

			&.ref-arrow-left {
				left: 20px;
			}

			&.ref-arrow-right {
				right: 20px;
			}
		}

		.ref-track {
			display: flex;
			gap: 30px;
			overflow-x: auto;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
			padding-bottom: 20px;

			&::-webkit-scrollbar {
				height: 6px;
			}

			&::-webkit-scrollbar-track {
				background: #f1f5f9;
				border-radius: 3px;
			}

			&::-webkit-scrollbar-thumb {
				background: linear-gradient(135deg, #3b82f6, #d946ef);
				border-radius: 3px;
			}
		}

		.ref-card {
			flex: 0 0 320px;
			scroll-snap-align: start;
			background: white;
			border-radius: 16px;
			overflow: hidden;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
			border: 1px solid #e2e8f0;
			transition: transform 0.3s, box-shadow 0.3s;
			text-align: left;

			&:hover {
				transform: translateY(-4px);
				box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
			}

			img {
				width: 100%;
				height: 180px;
				object-fit: cover;
			}

			.ref-card-content {
				padding: 20px;

				h3 {
					font-family: 'Inter', sans-serif;
					font-size: 1rem;
					font-weight: 700;
					color: #0f172a;
					margin-bottom: 10px;
				}

				p {
					font-size: 0.85rem;
					color: #64748b;
					line-height: 1.6;
				}
			}
		}
	}
}


#contact {
	background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
	color: white;
	padding: 80px 8% 30px 8%;

	.contact-grid {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 80px;
		margin-bottom: 60px;

		.contact-form {
			h2 {
				font-size: 2rem;
				margin-bottom: 30px;
			}

			.form-group {
				margin-bottom: 20px;

				&.contact-website {
					position: absolute;
					left: -9999px;
					opacity: 0;
					height: 0;
					overflow: hidden;
				}

				input, textarea {
					width: 100%;
					padding: 12px 20px;
					background: rgba(255, 255, 255, 0.05);
					border: 1px solid rgba(255, 255, 255, 0.1);
					border-radius: 8px;
					color: white;
					outline: none;
					transition: border-color 0.3s;

					&:focus {
						border-color: #3b82f6;
					}
				}
			}

			.submit-btn {
				background: linear-gradient(135deg, #3b82f6, #a855f7);
				color: white;
				border: none;
				padding: 12px 40px;
				border-radius: 25px;
				cursor: pointer;
				font-weight: 600;
				width: 100%;
			}

			.form-message {
				margin-top: 15px;
				font-size: 0.9rem;
				min-height: 1.2em;

				&.error {
					color: #f87171;
				}

				&.success {
					color: #4ade80;
				}
			}
		}

		.contact-info {
			h3 {
				font-family: 'Inter', sans-serif;
				font-size: 1.2rem;
				margin-bottom: 25px;
			}

			.info-details {
				margin-bottom: 30px;
				font-size: 0.95rem;
				color: #94a3b8;
				line-height: 1.8;
			}

			.map-container {
				border-radius: 12px;
				overflow: hidden;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.email-btn {
				display: inline-block;
				margin-top: 20px;
				background: linear-gradient(135deg, #3b82f6, #a855f7);
				color: white;
				padding: 12px 30px;
				border-radius: 25px;
				font-weight: 600;
				font-size: 0.9rem;
				transition: box-shadow 0.3s;
				width: 100%;
        		text-align: center;

				&:hover {
					box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
				}
			}
		}
	}
}

.scroll-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6, #a855f7);
	color: white;
	border: none;
	font-size: 1.3rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
	z-index: 1000;

	&.visible {
		opacity: 1;
		visibility: visible;
	}

	&:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
	}
}

@media (max-width: 968px) {
	#home {
		.introduction-container {
			grid-template-columns: 1fr;

			.introduction-text {
				h1 {
					font-size: 2.2rem;
				}
				
				p {
					font-size: 1.1rem;
				}
			}
		}

		nav {
			flex-wrap: wrap;

			.minimenu {
				display: flex;
			}

			.nav-links {
				display: none;
				flex-direction: column;
				width: 100%;
				gap: 15px;
				padding-top: 20px;
				text-align: center;

				&.open {
					display: flex;
				}
			}
		}
	}

	#services .section-title,
	#products .section-title,
	#references .section-title,
	#contact h2 {
		font-size: 1.5rem;
	}

	#services .service-card h3,
	#references h3,
	#contact .contact-info h3 {
		font-size: 1rem;
	}

	#products .products-grid {
		grid-template-columns: 1fr;
	}

	#products .product-features {
		grid-template-columns: 1fr;
	}

	#contact .contact-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	#references .ref-slider {
		padding: 0 5%;

		.ref-arrow {
			display: none;
		}
	}
}

@media (max-width: 500px) {
	#products .products-grid .product-card {
		padding: 25px 20px;
	}

	#products .products-grid .product-card .product-features {
		grid-template-columns: 1fr;
	}

	.logo-slogan {
		font-size: 0.65rem;
	}
}