@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

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

:root {
	--primary-color: #ff4136;

	--dark-color: #191618;
	--light-color: #eef0fc;
}

:focus {
	outline: none;
}

html {
	scroll-behavior: smooth;
	font-size: 62.5%; /* 1rem = 10px */
	font-family: "Roboto", Arial, sans-serif;

	@media (max-width: 1200px) {
		font-size: 56.25%; /* 1rem = 9px */
	}
}

body {
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--dark-color);
	background-color: var(--dark-color);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	overflow-x: hidden;

	min-height: 100vh;

	&.menu-open {
		overflow: hidden;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 800;
	color: var(--dark-color);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

h1 {
	font-size: 3.6rem;
}

h2 {
	font-size: 3.2rem;
}

h3 {
	font-size: 2.8rem;
}

h4 {
	font-size: 2.4rem;
}

h5 {
	font-size: 2rem;
}

h6 {
	font-size: 1.8rem;
}

a {
	text-decoration: none;
	color: inherit;
}

p,
a {
	letter-spacing: 0.025em;
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	display: block;
}

img.emoji {
	height: 1em;
	width: 1em;
	margin: 0 0.05em 0 0.1em;
	vertical-align: -0.1em;
	display: inline-block;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

main {
	background-color: var(--light-color);
}

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

footer,
header {
	background-color: var(--dark-color);
	color: var(--light-color);
	text-align: center;
	padding: 2rem 0;
}

header {
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	background-color: color-mix(in srgb, var(--dark-color) 85%, transparent);
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;

	.logo {
		position: relative;
		font-size: 2.4rem;
		font-weight: 600;
		line-height: 1;

		&::after {
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 2px;
			background-color: var(--primary-color);
			position: absolute;
			bottom: 4px;
			right: -8px;
			vertical-align: text-bottom;
			font-size: 3.6rem;
			font-weight: 800;
			line-height: 1;
		}
	}

	nav {
		@media (max-width: 768px) {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: linear-gradient(135deg, var(--dark-color) 0%, #2a2629 100%);
			padding: 0;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease, visibility 0.3s ease;
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: center;

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

	ul {
		display: flex;
		gap: 1.5rem;

		@media (max-width: 768px) {
			flex-direction: column;
			gap: 1rem;
			width: 100%;
			max-width: 400px;
			padding: 2rem;
			align-items: center;
		}

		li {
			@media (max-width: 768px) {
				width: 100%;
				transform: translateY(20px);
				opacity: 0;
				transition: transform 0.4s ease, opacity 0.4s ease;
			}

			@media (max-width: 768px) {
				nav.active & {
					transform: translateY(0);
					opacity: 1;
				}

				nav.active &:nth-child(1) {
					transition-delay: 0.1s;
				}

				nav.active &:nth-child(2) {
					transition-delay: 0.15s;
				}

				nav.active &:nth-child(3) {
					transition-delay: 0.2s;
				}

				nav.active &:nth-child(4) {
					transition-delay: 0.25s;
				}
			}
		}

		a {
			color: var(--light-color);
			font-weight: 500;
			border-radius: 0.5rem;
			padding: 0.75rem 1rem;
			transition: all 0.3s ease;
			position: relative;

			@media (max-width: 768px) {
				display: block;
				width: 100%;
				text-align: center;
				padding: 1.8rem 2rem;
				font-size: 2rem;
				font-weight: 600;
				border-radius: 1.2rem;
				background-color: rgba(255, 255, 255, 0.05);
				border: 2px solid rgba(255, 255, 255, 0.1);
				backdrop-filter: blur(10px);
			}

			&:hover {
				background-color: var(--light-color);
				color: var(--dark-color);

				@media (max-width: 768px) {
					background-color: rgba(255, 255, 255, 0.15);
					border-color: rgba(255, 255, 255, 0.3);
					color: var(--light-color);
					transform: translateY(-2px);
					box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
				}
			}

			&.active {
				background-color: var(--primary-color);
				color: var(--light-color);

				@media (max-width: 768px) {
					background-color: var(--primary-color);
					border-color: var(--primary-color);
					box-shadow: 0 4px 15px rgba(255, 65, 54, 0.4);
				}
			}
		}
	}
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1001;
	padding: 0;
	border-radius: 8px;
	transition: background-color 0.3s ease;

	@media (max-width: 768px) {
		display: flex;
	}

	&:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	span {
		display: block;
		width: 26px;
		height: 2.5px;
		background-color: var(--light-color);
		border-radius: 3px;
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transform-origin: center;
	}

	&.active {
		background-color: transparent;
	}

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

	&.active span:nth-child(2) {
		transform: scaleX(0);
		opacity: 0;
	}

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

.mobile-menu-overlay {
	display: none;

	@media (max-width: 768px) {
		/* Overlay no longer needed since menu is full-screen */
		&.active {
			display: none;
		}
	}
}

.btn {
	display: inline-block;
	border: 2px solid var(--dark-color);
	background-color: transparent;
	color: var(--dark-color);
	font-weight: 600;
	padding: 0.8rem 1.5rem;
	border-radius: 0.7rem;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	-webkit-tap-highlight-color: transparent;

	&:hover {
		background-color: var(--dark-color);
		color: var(--light-color);
		border-color: transparent;
	}

	&.btn-filled {
		background-color: var(--dark-color);
		color: var(--light-color);
		border-color: transparent;

		&:hover {
			background-color: transparent;
			color: var(--dark-color);
			border-color: var(--dark-color);
		}
	}

	&.btn-primary {
		background-color: var(--primary-color);
		color: var(--light-color);
		border-color: transparent;

		&:hover {
			background-color: transparent;
			color: var(--primary-color);
			border-color: var(--primary-color);
		}
	}

	@media (max-width: 768px) {
		padding: 1rem 2rem;
		font-size: 1.6rem;
	}
}

footer {
	font-size: 1.4rem;

	a:hover {
		text-decoration: underline;
	}

	@media (max-width: 768px) {
		p:not(:last-child) {
			margin-bottom: 0.5rem;
		}
	}
}