:root {
	--orange: #ff6500;
	--orange-light: #ff8a22;
	--orange-yellow: #ffb11b;
	--orange-dark: #d94800;

	--dark: #111111;
	--dark-soft: #191919;
	--dark-card: #202020;

	--white: #ffffff;
	--cream: #fff5eb;

	--text-muted: #bdbdbd;

	--max-width: 1280px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	font-family:
		Inter,
		Arial,
		Helvetica,
		sans-serif;

	background: var(--dark);
	color: var(--white);

	overflow-x: hidden;
}

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

button {
	font: inherit;
}

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

::selection {
	background: var(--orange);
	color: white;
}

.page-noise {
	position: fixed;

	inset: 0;

	pointer-events: none;

	opacity: 0.025;

	z-index: 9999;

	background-image:
		radial-gradient(
			white 1px,
			transparent 1px
		);

	background-size:
		7px 7px;
}

.header {
	position: fixed;

	top: 0;
	left: 0;

	width: 100%;

	z-index: 1000;

	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		backdrop-filter 0.3s ease;
}

.header.scrolled {
	background:
		rgba(15, 15, 15, 0.88);

	backdrop-filter:
		blur(18px);

	border-bottom:
		1px solid rgba(
			255,
			255,
			255,
			0.08
		);
}

.header-container {
	max-width:
		var(--max-width);

	height: 86px;

	margin: auto;

	padding:
		0 30px;

	display: flex;

	align-items: center;
	justify-content: space-between;
}

.brand {
	display: flex;

	align-items: center;

	gap: 12px;

	font-size: 18px;

	font-weight: 900;

	letter-spacing: -0.5px;
}

.brand img {
	width: 42px;
	height: 42px;

	object-fit: contain;
}

.navigation {
	display: flex;

	gap: 34px;
}

.navigation a {
	position: relative;

	color:
		rgba(
			255,
			255,
			255,
			0.72
		);

	font-size: 14px;

	font-weight: 700;

	transition:
		color 0.2s ease;
}

.navigation a::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: -8px;

	width: 0;
	height: 2px;

	background:
		var(--orange);

	transition:
		width 0.25s ease;
}

.navigation a:hover {
	color: white;
}

.navigation a:hover::after {
	width: 100%;
}

.menu-button {
	display: none;

	width: 45px;
	height: 45px;

	border: 0;

	background: transparent;

	cursor: pointer;
}

.menu-button span {
	display: block;

	width: 24px;
	height: 2px;

	margin: 6px auto;

	background: white;
}

.hero {
	position: relative;

	min-height: 100vh;

	overflow: hidden;

	background:
		linear-gradient(
			120deg,
			#ff4f00,
			#ff7800 55%,
			#ff961c
		);
}

.hero::after {
	content: "";

	position: absolute;

	bottom: -150px;
	left: -5%;

	width: 110%;
	height: 260px;

	background: var(--dark);

	border-radius:
		50% 50% 0 0 /
		40% 40% 0 0;
}

.hero-background {
	position: absolute;

	inset: 0;
}

.shape {
	position: absolute;

	background:
		rgba(
			255,
			255,
			255,
			0.055
		);

	transform: rotate(-35deg);

	border-radius: 30px;
}

.shape-one {
	width: 430px;
	height: 110px;

	left: -80px;
	top: 280px;
}

.shape-two {
	width: 500px;
	height: 120px;

	right: -150px;
	top: 150px;
}

.shape-three {
	width: 300px;
	height: 80px;

	left: 40%;
	bottom: 160px;
}

.hero-container {
	position: relative;

	z-index: 3;

	max-width:
		var(--max-width);

	min-height: 100vh;

	margin: auto;

	padding:
		130px 30px 150px;

	display: grid;

	grid-template-columns:
		1.05fr 0.95fr;

	align-items: center;

	gap: 50px;
}

.eyebrow {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 25px;

	font-size: 13px;

	font-weight: 900;

	letter-spacing: 3px;
}

.eyebrow span {
	width: 35px;
	height: 3px;

	background: white;
}

.hero h1 {
	font-size:
		clamp(
			72px,
			8vw,
			125px
		);

	line-height: 0.82;

	letter-spacing: -7px;

	font-weight: 950;

	max-width: 700px;
}

.hero h1 span {
	display: block;

	color:
		var(--dark);
}

.hero-description {
	max-width: 580px;

	margin-top: 35px;

	font-size: 21px;

	line-height: 1.5;

	color:
		rgba(
			255,
			255,
			255,
			0.88
		);
}

.hero-actions {
	display: flex;

	flex-wrap: wrap;

	gap: 14px;

	margin-top: 38px;
}

.button {
	min-height: 54px;

	padding:
		0 25px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 20px;

	border-radius: 12px;

	font-weight: 800;

	transition:
		transform 0.2s ease,
		background 0.2s ease;
}

.button:hover {
	transform:
		translateY(-4px);
}

.button-primary {
	background: var(--dark);
	color: white;
}

.button-primary:hover {
	background: #262626;
}

.button-ghost {
	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.45
		);

	color: white;
}

.button-ghost:hover {
	background:
		rgba(
			255,
			255,
			255,
			0.12
		);
}

.hero-mini-info {
	display: flex;

	align-items: center;

	gap: 22px;

	margin-top: 52px;
}

.hero-mini-info div:not(
	.mini-divider
) {
	display: flex;

	flex-direction: column;
}

.hero-mini-info strong {
	font-size: 27px;
}

.hero-mini-info span {
	font-size: 11px;

	letter-spacing: 1px;

	text-transform: uppercase;

	opacity: 0.72;
}

.mini-divider {
	width: 1px;
	height: 38px;

	background:
		rgba(
			255,
			255,
			255,
			0.25
		);
}

.hero-visual {
	position: relative;

	height: 620px;

	display: flex;

	align-items: flex-end;
	justify-content: center;
}

.hero-glow {
	position: absolute;

	width: 480px;
	height: 480px;

	top: 80px;

	background:
		radial-gradient(
			circle,
			rgba(
				255,
				220,
				100,
				0.9
			),
			rgba(
				255,
				190,
				60,
				0.25
			)
			45%,
			transparent
			70%
		);

	filter: blur(15px);
}

.avatar-wrapper {
	position: relative;

	z-index: 3;

	width: min(
		100%,
		580px
	);

	display: flex;

	align-items: flex-end;
	justify-content: center;
}

.hero-avatar {
	max-height: 620px;

	object-fit: contain;

	filter:
		drop-shadow(
			0 30px 40px
			rgba(
				50,
				15,
				0,
				0.28
			)
		);

	animation:
		floatAvatar
		5s ease-in-out
		infinite;
}

@keyframes floatAvatar {
	0%,
	100% {
		transform:
			translateY(0);
	}

	50% {
		transform:
			translateY(-12px);
	}
}

.card-back {
	position: absolute;

	width: 400px;
	height: 470px;

	right: -20px;
	bottom: 30px;

	background:
		rgba(
			255,
			255,
			255,
			0.12
		);

	border:
		2px solid
		rgba(
			255,
			255,
			255,
			0.25
		);

	border-radius: 30px;

	transform:
		rotate(7deg);
}

.card-back span {
	position: absolute;

	right: -50px;
	top: 50%;

	transform:
		rotate(90deg);

	font-size: 12px;

	letter-spacing: 5px;

	font-weight: 900;
}

.floating-note {
	position: absolute;

	z-index: 5;

	font-weight: 800;

	font-size: 14px;

	line-height: 1.4;

	letter-spacing: 2px;

	transform: rotate(-6deg);

	opacity: 0.85;
}

.note-one {
	top: 70px;
	left: 0;
}

.note-two {
	right: 0;
	bottom: 60px;
}

.scroll-hint {
	position: absolute;

	z-index: 5;

	left: 50%;

	bottom: 65px;

	transform:
		translateX(-50%);

	display: flex;

	align-items: center;

	gap: 12px;

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 4px;
}

.scroll-hint span {
	width: 40px;
	height: 1px;

	background: white;
}

.section {
	position: relative;

	padding:
		130px 30px;
}

.section-container {
	max-width:
		var(--max-width);

	margin: auto;
}

.section-header {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 40px;

	margin-bottom: 60px;
}

.section-label {
	display: inline-block;

	margin-bottom: 15px;

	color: var(--orange);

	font-size: 12px;

	font-weight: 900;

	letter-spacing: 3px;
}

.section-header h2,
.about-content h2 {
	font-size:
		clamp(
			48px,
			6vw,
			84px
		);

	line-height: 0.95;

	letter-spacing: -4px;
}

.section-header h2 span,
.about-content h2 span {
	color: var(--orange);
}

.section-header > p {
	max-width: 360px;

	color: var(--text-muted);

	font-size: 16px;

	line-height: 1.6;
}

.games-section {
	background: var(--dark);
}

.games-grid {
	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	gap: 24px;
}

.game-card {
	background:
		var(--dark-soft);

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.08
		);

	border-radius: 24px;

	overflow: hidden;

	transition:
		transform 0.3s ease,
		border-color 0.3s ease;
}

.game-card:hover {
	transform:
		translateY(-10px);

	border-color:
		var(--orange);
}

.game-image {
	position: relative;

	height: 260px;

	overflow: hidden;
}

.game-image img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.6s ease;
}

.game-card:hover
.game-image img {
	transform:
		scale(1.07);
}

.game-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			transparent,
			rgba(
				0,
				0,
				0,
				0.25
			)
		);
}

.game-number {
	position: absolute;

	top: 18px;
	right: 20px;

	width: 45px;
	height: 45px;

	display: grid;

	place-items: center;

	border-radius: 50%;

	background:
		rgba(
			0,
			0,
			0,
			0.65
		);

	backdrop-filter:
		blur(10px);

	font-size: 12px;

	font-weight: 900;
}

.game-content {
	padding: 28px;
}

.game-category {
	color: var(--orange);

	font-size: 10px;

	font-weight: 900;

	letter-spacing: 2px;

	margin-bottom: 10px;
}

.game-content h3 {
	font-size: 31px;

	margin-bottom: 12px;
}

.game-content p {
	min-height: 75px;

	color:
		var(--text-muted);

	line-height: 1.6;
}

.game-footer {
	display: flex;

	align-items: center;
	justify-content: space-between;

	margin-top: 25px;

	padding-top: 20px;

	border-top:
		1px solid
		rgba(
			255,
			255,
			255,
			0.08
		);
}

.game-footer span {
	font-size: 10px;

	font-weight: 800;

	letter-spacing: 1px;

	opacity: 0.55;
}

.game-footer a {
	color: var(--orange);

	font-size: 13px;

	font-weight: 800;
}

.about-section {
	background: var(--cream);
	color: var(--dark);
}

.about-container {
	display: grid;

	grid-template-columns:
		0.65fr 1.35fr;

	gap: 90px;

	align-items: center;
}

.about-number {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-height: 400px;

	background: var(--orange);

	border-radius: 35px;

	transform:
		rotate(-3deg);

	color: white;

	box-shadow:
		0 30px 80px
		rgba(
			255,
			100,
			0,
			0.2
		);
}

.about-number span {
	font-size: 15px;

	font-weight: 800;

	letter-spacing: 5px;
}

.about-number strong {
	font-size:
		clamp(
			85px,
			9vw,
			140px
		);

	letter-spacing: -8px;
}

.about-content p {
	max-width: 750px;

	margin-top: 27px;

	font-size: 19px;

	line-height: 1.7;

	color: #555;
}

.about-signature {
	margin-top: 40px;

	font-size: 22px;

	font-style: italic;

	color: var(--orange);

	font-weight: 700;
}

.services-section {
	background:
		linear-gradient(
			180deg,
			#111,
			#171717
		);
}

.services-grid {
	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	gap: 16px;
}

.service-card {
	position: relative;

	min-height: 330px;

	padding: 30px;

	background:
		var(--dark-card);

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.07
		);

	border-radius: 24px;

	overflow: hidden;

	transition:
		transform 0.3s ease,
		background 0.3s ease;
}

.service-card::after {
	content: "";

	position: absolute;

	width: 140px;
	height: 140px;

	right: -50px;
	bottom: -50px;

	border-radius: 50%;

	background: var(--orange);

	opacity: 0;

	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.service-card:hover {
	transform:
		translateY(-8px);

	background:
		#242424;
}

.service-card:hover::after {
	opacity: 0.12;

	transform:
		scale(1.3);
}

.service-number {
	position: absolute;

	top: 25px;
	right: 25px;

	font-size: 11px;

	font-weight: 800;

	color:
		rgba(
			255,
			255,
			255,
			0.3
		);
}

.service-icon {
	width: 65px;
	height: 65px;

	display: grid;

	place-items: center;

	margin-bottom: 70px;

	border-radius: 18px;

	background: var(--orange);

	font-size: 26px;

	font-weight: 900;
}

.service-card h3 {
	font-size: 26px;

	margin-bottom: 12px;
}

.service-card p {
	color: var(--text-muted);

	line-height: 1.6;
}

.stats-section {
	background: var(--orange);

	color: white;

	padding:
		80px 30px;
}

.stats-container {
	display: grid;

	grid-template-columns:
		repeat(3, 1fr);

	gap: 50px;
}

.stat {
	text-align: center;
}

.stat strong {
	display: block;

	font-size:
		clamp(
			65px,
			7vw,
			100px
		);

	line-height: 1;

	letter-spacing: -5px;
}

.stat span {
	display: block;

	margin-top: 12px;

	font-size: 11px;

	font-weight: 900;

	letter-spacing: 3px;
}

.contact-section {
	position: relative;

	min-height: 720px;

	padding:
		150px 30px;

	display: flex;

	align-items: center;

	overflow: hidden;

	background: var(--dark);
}

.contact-background-text {
	position: absolute;

	left: 50%;

	transform:
		translateX(-50%);

	font-size:
		clamp(
			130px,
			18vw,
			330px
		);

	font-weight: 950;

	letter-spacing: -15px;

	white-space: nowrap;

	color:
		rgba(
			255,
			255,
			255,
			0.025
		);
}

.contact-container {
	position: relative;

	z-index: 2;

	max-width: 900px;

	margin: auto;

	text-align: center;
}

.section-label.light {
	color: var(--orange);
}

.contact-container h2 {
	font-size:
		clamp(
			55px,
			8vw,
			105px
		);

	line-height: 0.92;

	letter-spacing: -5px;
}

.contact-container h2 span {
	color: var(--orange);
}

.contact-container p {
	margin:
		30px auto;

	color: var(--text-muted);

	font-size: 18px;
}

.contact-button {
	display: inline-flex;

	align-items: center;

	gap: 30px;

	padding:
		18px 28px;

	margin-top: 10px;

	border-radius: 14px;

	background: var(--orange);

	font-weight: 900;

	transition:
		transform 0.2s ease,
		background 0.2s ease;
}

.contact-button:hover {
	transform:
		translateY(-4px);

	background:
		var(--orange-light);
}

.footer {
	background: #0a0a0a;

	border-top:
		1px solid
		rgba(
			255,
			255,
			255,
			0.06
		);
}

.footer-container {
	max-width:
		var(--max-width);

	margin: auto;

	padding:
		55px 30px;

	display: grid;

	grid-template-columns:
		1fr auto;

	gap: 40px;

	align-items: center;
}

.footer-brand {
	display: flex;

	align-items: center;

	gap: 15px;
}

.footer-brand img {
	width: 50px;
	height: 50px;

	object-fit: contain;
}

.footer-brand div {
	display: flex;

	flex-direction: column;
}

.footer-brand strong {
	font-size: 17px;
}

.footer-brand span {
	color: #777;

	font-size: 12px;

	margin-top: 4px;
}

.footer-links {
	display: flex;

	gap: 25px;

	color: #888;

	font-size: 13px;
}

.footer-links a:hover {
	color: var(--orange);
}

.footer-bottom {
	grid-column:
		1 / -1;

	padding-top: 25px;

	border-top:
		1px solid
		rgba(
			255,
			255,
			255,
			0.06
		);

	color: #555;

	font-size: 12px;
}

.reveal {
	opacity: 0;

	transform:
		translateY(40px);

	transition:
		opacity 0.7s ease,
		transform 0.7s
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		);
}

.reveal.visible {
	opacity: 1;

	transform:
		translateY(0);
}

@media (
	max-width: 1050px
) {

	.hero-container {
		grid-template-columns:
			1fr;

		padding-top: 150px;

		text-align: center;
	}

	.hero-content {
		display: flex;

		flex-direction: column;

		align-items: center;
	}

	.hero-visual {
		height: 520px;
	}

	.hero h1 {
		letter-spacing: -5px;
	}

	.games-grid {
		grid-template-columns:
			1fr 1fr;
	}

	.about-container {
		grid-template-columns:
			1fr;
	}

	.about-number {
		min-height: 280px;
	}

	.services-grid {
		grid-template-columns:
			repeat(2, 1fr);
	}

}

@media (
	max-width: 760px
) {

	.navigation {
		position: fixed;

		top: 86px;
		left: 0;

		width: 100%;

		padding:
			30px;

		display: flex;

		flex-direction: column;

		align-items: center;

		background:
			rgba(
				12,
				12,
				12,
				0.98
			);

		transform:
			translateY(-130%);

		transition:
			transform 0.3s ease;
	}

	.navigation.open {
		transform:
			translateY(0);
	}

	.menu-button {
		display: block;
	}

	.hero h1 {
		font-size:
			clamp(
				58px,
				17vw,
				90px
			);

		letter-spacing: -4px;
	}

	.hero-description {
		font-size: 17px;
	}

	.hero-mini-info {
		flex-wrap: wrap;

		justify-content: center;
	}

	.hero-visual {
		height: 420px;
	}

	.note-one,
	.note-two,
	.card-back {
		display: none;
	}

	.section {
		padding:
			95px 22px;
	}

	.section-header {
		flex-direction: column;

		align-items: flex-start;
	}

	.games-grid {
		grid-template-columns:
			1fr;
	}

	.games-grid
	.game-card:last-child {
		grid-column: auto;
	}

	.services-grid {
		grid-template-columns:
			1fr;
	}

	.stats-container {
		grid-template-columns:
			1fr;

		gap: 55px;
	}

	.footer-container {
		grid-template-columns:
			1fr;

		text-align: center;
	}

	.footer-brand {
		justify-content: center;
	}

	.footer-links {
		justify-content: center;

		flex-wrap: wrap;
	}

}

@media (
	max-width: 480px
) {

	.header-container {
		padding:
			0 18px;
	}

	.brand span {
		font-size: 15px;
	}

	.hero-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.hero-actions {
		width: 100%;
	}

	.button {
		width: 100%;
	}

	.hero-mini-info {
		display: none;
	}

	.hero-visual {
		height: 360px;
	}

}

.hero {
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			rgba(255, 132, 0, 0.78),
			rgba(255, 132, 0, 0.82)
		),
		url("images/matshome-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(0px);
	transform: scale(1);
	opacity: 25;
	z-index: 0;
	pointer-events: none;
}

.hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 520px;
}

.avatar-wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.hero-avatar {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto;
	transform: translate(0, 18px);
}

.community-section {
	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(255, 101, 0, 0.12),
			transparent 42%
		),
		var(--dark);
}

.community-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.community-card {
	--community-accent: var(--orange);
	position: relative;
	min-height: 350px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.018)
		);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 26px;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		background 0.3s ease;
}

.community-card:hover {
	transform: translateY(-10px);
	border-color: color-mix(
		in srgb,
		var(--community-accent) 75%,
		white 25%
	);
	box-shadow:
		0 26px 70px rgba(0, 0, 0, 0.3),
		0 0 45px color-mix(
			in srgb,
			var(--community-accent) 18%,
			transparent
		);
}

.community-youtube {
	--community-accent: #ff3b30;
}

.community-discord {
	--community-accent: #5865f2;
}

.community-roblox {
	--community-accent: #ffffff;
}

.community-card-glow {
	position: absolute;
	width: 240px;
	height: 240px;
	right: -95px;
	top: -110px;
	border-radius: 50%;
	background: var(--community-accent);
	filter: blur(65px);
	opacity: 0.08;
	z-index: -1;
	transition:
		opacity 0.3s ease,
		transform 0.4s ease;
}

.community-card:hover .community-card-glow {
	opacity: 0.18;
	transform: scale(1.15);
}

.community-icon {
	width: 78px;
	height: 78px;
	display: grid;
	place-items: center;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow:
		0 16px 35px rgba(0, 0, 0, 0.18);
	transition:
		transform 0.3s ease;
}

.community-card:hover .community-icon {
	transform: rotate(-5deg) scale(1.06);
}

.community-icon img {
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.community-card-content {
	margin-top: 55px;
}

.community-card-content > span {
	display: block;
	margin-bottom: 8px;
	color: var(--community-accent);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 2px;
}

.community-roblox .community-card-content > span {
	color: var(--orange);
}

.community-card-content h3 {
	font-size: 36px;
	letter-spacing: -1.5px;
	margin-bottom: 12px;
}

.community-card-content p {
	max-width: 330px;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.community-card-content strong {
	display: inline-block;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.62);
}

.community-arrow {
	position: absolute;
	top: 28px;
	right: 28px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	font-size: 20px;
	transition:
		transform 0.3s ease,
		background 0.3s ease,
		color 0.3s ease;
}

.community-card:hover .community-arrow {
	transform: rotate(8deg) scale(1.06);
	background: var(--community-accent);
	color: #111;
}

.community-youtube:hover .community-arrow,
.community-discord:hover .community-arrow {
	color: white;
}

@media (max-width: 1050px) {
	.community-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.community-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	.community-grid {
		grid-template-columns: 1fr;
	}

	.community-card,
	.community-card:last-child {
		grid-column: auto;
	}

	.community-card {
		min-height: 320px;
	}
}

.header-tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

.language-toggle {
	position: relative;
	width: 148px;
	height: 42px;
	padding: 4px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	background: rgba(255, 255, 255, 0.93);
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 13px;
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	isolation: isolate;
	overflow: hidden;
}

.language-toggle-indicator {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: 34px;
	background:
		linear-gradient(
			135deg,
			var(--orange),
			var(--orange-light)
		);
	border-radius: 9px;
	box-shadow:
		0 6px 18px rgba(255, 101, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transform: translateX(0);
	transition:
		transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1.15),
		box-shadow 0.25s ease;
	z-index: 0;
}

.language-toggle.is-en .language-toggle-indicator {
	transform: translateX(100%);
}

.language-option {
	position: relative;
	z-index: 2;
	height: 34px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: #111111;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.7px;
	cursor: pointer;
	transition:
		color 0.24s ease,
		transform 0.18s ease,
		opacity 0.18s ease;
}

.language-option:hover {
	transform: translateY(-1px);
}

.language-option.is-active {
	color: white;
}

.language-option:focus-visible {
	outline: 2px solid white;
	outline-offset: -4px;
	border-radius: 8px;
}

main,
.navigation,
.footer {
	transition:
		opacity 0.16s ease,
		filter 0.16s ease;
}

body.language-switching main,
body.language-switching .navigation,
body.language-switching .footer {
	opacity: 0.68;
	filter: blur(1px);
}

@media (max-width: 1180px) {
	.navigation {
		gap: 22px;
	}

	.language-toggle {
		width: 132px;
	}
}

@media (max-width: 900px) {
	.navigation {
		gap: 16px;
	}

	.navigation a {
		font-size: 12px;
	}

	.language-toggle {
		width: 120px;
		height: 38px;
	}

	.language-toggle-indicator,
	.language-option {
		height: 30px;
	}

	.language-option {
		font-size: 9px;
	}
}

@media (max-width: 760px) {
	.header-tools {
		gap: 7px;
	}

	.language-toggle {
		width: 116px;
		height: 38px;
		border-radius: 12px;
	}

	.language-toggle-indicator {
		height: 30px;
		border-radius: 8px;
	}

	.language-option {
		height: 30px;
		font-size: 9px;
		letter-spacing: 0.3px;
	}
}

@media (max-width: 480px) {
	.header-container {
		gap: 8px;
	}

	.brand {
		gap: 8px;
	}

	.brand img {
		width: 38px;
		height: 38px;
	}

	.brand span {
		display: none;
	}

	.language-toggle {
		width: 112px;
	}
}

.game-footer {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
}

.game-footer > span {
	min-width: 0;
}

.trailer-button,
.game-footer > a {
	min-height: 40px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 11px;
	font-size: 11px;
	font-weight: 900;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform 0.22s ease,
		background 0.22s ease,
		border-color 0.22s ease,
		color 0.22s ease,
		box-shadow 0.22s ease;
}

.trailer-button {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.055);
	color: white;
}

.trailer-button > span:first-child {
	color: var(--orange);
	font-size: 10px;
	transition: transform 0.22s ease;
}

.trailer-button:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 101, 0, 0.6);
	background: rgba(255, 101, 0, 0.11);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
}

.trailer-button:hover > span:first-child {
	transform: scale(1.2);
}

.game-footer > a {
	color: #111;
	background: var(--orange);
}

.game-footer > a:hover {
	transform: translateY(-2px);
	background: var(--orange-light);
	box-shadow: 0 10px 28px rgba(255, 101, 0, 0.2);
}

body.modal-open {
	overflow: hidden;
}

/* Modo cinema: reduz efeitos caros enquanto um trailer está tocando. */
body.modal-open .page-noise,
body.modal-open .hero-glow,
body.modal-open .community-card-glow {
	display: none;
}

body.modal-open .hero-avatar {
	animation-play-state: paused;
}

body.modal-open .header.scrolled,
body.modal-open .language-toggle {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.modal-open .work-card::before {
	display: none;
}

.trailer-modal {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: grid;
	place-items: center;
	padding: 28px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.trailer-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.trailer-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.trailer-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(1080px, 100%);
	max-height: calc(100vh - 56px);
	overflow: auto;
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(255, 101, 0, 0.18),
			transparent 34%
		),
		#111;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 28px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
	transform: translateY(22px) scale(0.975);
	transition: transform 0.34s cubic-bezier(0.2, 0.85, 0.2, 1);
}

.trailer-modal.is-open .trailer-modal-dialog {
	transform: translateY(0) scale(1);
}

.trailer-modal-header {
	padding: 26px 28px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
}

.trailer-modal-label {
	display: block;
	margin-bottom: 6px;
	color: var(--orange);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 2.5px;
}

.trailer-modal-header h2 {
	font-size: clamp(28px, 4vw, 48px);
	letter-spacing: -2px;
}

.trailer-modal-close {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: white;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition:
		transform 0.22s ease,
		background 0.22s ease;
}

.trailer-modal-close:hover {
	transform: rotate(8deg) scale(1.05);
	background: var(--orange);
}

.trailer-frame {
	position: relative;
	width: calc(100% - 56px);
	margin: 0 28px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #050505;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
	isolation: isolate;
	contain: layout paint;
}

.trailer-frame iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.trailer-modal-footer {
	padding: 20px 28px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: #777;
	font-size: 12px;
	font-weight: 800;
}

.trailer-modal-footer a {
	color: var(--orange);
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.trailer-modal-footer a:hover {
	color: var(--orange-light);
	transform: translateX(3px);
}

.work-section {
	background:
		radial-gradient(
			circle at 12% 8%,
			rgba(255, 101, 0, 0.12),
			transparent 30%
		),
		linear-gradient(180deg, #171717 0%, #101010 100%);
	overflow: hidden;
}

.work-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.work-card {
	position: relative;
	min-height: 360px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.06),
			rgba(255, 255, 255, 0.018)
		);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 26px;
	overflow: hidden;
	transition:
		transform 0.32s ease,
		border-color 0.32s ease,
		background 0.32s ease,
		box-shadow 0.32s ease;
}

.work-card::before {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	right: -110px;
	bottom: -120px;
	border-radius: 50%;
	background: var(--orange);
	filter: blur(55px);
	opacity: 0;
	transition:
		opacity 0.35s ease,
		transform 0.4s ease;
}

.work-card:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 101, 0, 0.46);
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.075),
			rgba(255, 101, 0, 0.035)
		);
	box-shadow: 0 28px 75px rgba(0, 0, 0, 0.24);
}

.work-card:hover::before {
	opacity: 0.16;
	transform: scale(1.15);
}

.work-card-featured {
	background:
		linear-gradient(
			145deg,
			rgba(255, 101, 0, 0.15),
			rgba(255, 255, 255, 0.025)
		);
	border-color: rgba(255, 101, 0, 0.26);
}

.work-card-top {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.work-index,
.work-type {
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 2px;
}

.work-index {
	color: rgba(255, 255, 255, 0.34);
}

.work-type {
	color: var(--orange);
}

.work-symbol {
	position: relative;
	z-index: 1;
	width: 68px;
	height: 68px;
	margin-top: 42px;
	display: grid;
	place-items: center;
	background: var(--orange);
	border-radius: 19px;
	color: white;
	font-size: 25px;
	font-weight: 950;
	box-shadow: 0 16px 35px rgba(255, 101, 0, 0.18);
	transition: transform 0.3s ease;
}

.work-card:hover .work-symbol {
	transform: rotate(-5deg) scale(1.05);
}

.work-card h3 {
	position: relative;
	z-index: 1;
	margin-top: 42px;
	font-size: clamp(27px, 3vw, 38px);
	letter-spacing: -1.5px;
}

.work-card p {
	position: relative;
	z-index: 1;
	max-width: 540px;
	margin-top: 12px;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.65;
}

.work-tags {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.work-tags span {
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035);
	color: #999;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.contact-section {
	min-height: 820px;
}

.contact-container {
	max-width: 1040px;
}

.contact-container > p {
	max-width: 680px;
	line-height: 1.7;
}

.contact-process {
	width: 100%;
	margin: 46px auto 30px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	text-align: left;
}

.contact-step {
	position: relative;
	min-height: 155px;
	padding: 23px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 20px;
	transition:
		transform 0.28s ease,
		border-color 0.28s ease,
		background 0.28s ease;
}

.contact-step:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 101, 0, 0.36);
	background: rgba(255, 101, 0, 0.055);
}

.contact-step > span {
	display: block;
	margin-bottom: 28px;
	color: var(--orange);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 2px;
}

.contact-step strong {
	display: block;
	font-size: 17px;
}

.contact-step small {
	display: block;
	margin-top: 7px;
	color: #777;
	font-size: 12px;
	line-height: 1.5;
}

.contact-button {
	margin-top: 16px;
	box-shadow: 0 16px 45px rgba(255, 101, 0, 0.16);
}

@media (max-width: 1180px) {
	.navigation {
		gap: 18px;
	}

	.navigation a {
		font-size: 12px;
	}
}

@media (max-width: 900px) {
	.game-footer {
		grid-template-columns: 1fr auto;
	}

	.game-footer > span {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	.work-grid,
	.contact-process {
		grid-template-columns: 1fr;
	}

	.work-card {
		min-height: 330px;
	}

	.game-footer {
		grid-template-columns: 1fr 1fr;
	}

	.game-footer > span {
		grid-column: 1 / -1;
	}

	.trailer-button,
	.game-footer > a {
		width: 100%;
	}

	.trailer-modal {
		padding: 14px;
	}

	.trailer-modal-dialog {
		max-height: calc(100vh - 28px);
		border-radius: 22px;
	}

	.trailer-modal-header {
		padding: 20px 18px 16px;
	}

	.trailer-frame {
		width: calc(100% - 36px);
		margin: 0 18px;
		border-radius: 15px;
	}

	.trailer-modal-footer {
		padding: 16px 18px 20px;
		align-items: flex-start;
		flex-direction: column;
	}

	.contact-section {
		min-height: auto;
		padding-top: 110px;
		padding-bottom: 110px;
	}
}

@media (max-width: 480px) {
	.game-footer {
		grid-template-columns: 1fr;
	}

	.game-footer > span {
		grid-column: auto;
	}

	.work-card {
		padding: 24px;
	}

	.contact-step {
		min-height: 140px;
	}
}

.site-mascot {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.site-mascot img {
	display: block;
	width: 100%;
	height: auto;
	animation: mascotFloat 4s ease-in-out infinite;
	will-change: transform;
}

.mascot-home {
	left: -18px;
	bottom: 54px;
	width: clamp(96px, 9vw, 145px);
	transform: rotate(-7deg);
}

.mascot-home img {
	animation-delay: -0.4s;
}

.mascot-games {
	top: 175px;
	right: clamp(18px, 3vw, 58px);
	width: clamp(110px, 10vw, 165px);
	transform: rotate(7deg);
}

.mascot-games img {
	animation-delay: -1.2s;
}

.mascot-work {
	left: clamp(12px, 3vw, 55px);
	bottom: 42px;
	width: clamp(120px, 11vw, 178px);
	transform: rotate(-6deg);
}

.mascot-work img {
	animation-delay: -2s;
}

.mascot-contact {
	right: clamp(12px, 4vw, 72px);
	bottom: 38px;
	width: clamp(125px, 12vw, 190px);
	transform: rotate(6deg);
}

.mascot-contact img {
	animation-delay: -2.8s;
}

@keyframes mascotFloat {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-9px) rotate(2deg);
	}
}

body.modal-open .site-mascot img {
	animation-play-state: paused;
}

@media (max-width: 1180px) {
	.mascot-games {
		right: 12px;
		width: 120px;
	}

	.mascot-work {
		left: 8px;
		width: 128px;
	}

	.mascot-contact {
		right: 12px;
		width: 145px;
	}
}

@media (max-width: 900px) {
	.site-mascot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-mascot img {
		animation: none;
	}
}

/* =========================================================
   CATNIP SPIRE / STUDIO UPDATES
   ========================================================= */

.game-card-update {
	position: relative;
	border-color: rgba(255, 101, 0, 0.24);
	box-shadow: 0 24px 70px rgba(255, 101, 0, 0.08);
}

.game-card-update:hover {
	border-color: var(--orange);
	box-shadow: 0 28px 90px rgba(255, 101, 0, 0.13);
}

.game-update-badge {
	position: absolute;
	left: 18px;
	top: 18px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.9);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 1.25px;
	color: white;
}

.game-update-dot,
.featured-project-live i,
.news-dot,
.roadmap-active .roadmap-marker i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 0 0 rgba(255, 101, 0, 0.65);
	animation: updatePulse 1.9s ease-out infinite;
}

@keyframes updatePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 101, 0, 0.6);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(255, 101, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 101, 0, 0);
	}
}

.game-update-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 101, 0, 0.2);
	border-radius: 13px;
	background: rgba(255, 101, 0, 0.07);
}

.game-update-note span {
	flex: 0 0 auto;
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 1.5px;
	color: var(--orange);
}

.game-update-note strong {
	font-size: 11px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.82);
}

.updates-section {
	overflow: hidden;
	background:
		radial-gradient(circle at 85% 8%, rgba(255, 101, 0, 0.11), transparent 28%),
		linear-gradient(180deg, #111111 0%, #151515 100%);
}

.updates-section::before {
	content: "";
	position: absolute;
	width: 430px;
	height: 430px;
	left: -260px;
	top: 32%;
	border: 1px solid rgba(255, 101, 0, 0.13);
	border-radius: 50%;
	pointer-events: none;
}

.updates-header {
	position: relative;
	z-index: 2;
}

.featured-project {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	min-height: 520px;
	margin-bottom: 26px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 32px;
	background:
		linear-gradient(120deg, rgba(255, 101, 0, 0.18), transparent 48%),
		#181818;
	box-shadow: 0 35px 100px rgba(0, 0, 0, 0.24);
}

.featured-project::after {
	content: "FEATURED";
	position: absolute;
	left: 36px;
	bottom: -20px;
	font-size: clamp(70px, 9vw, 140px);
	font-weight: 950;
	letter-spacing: -7px;
	color: rgba(255, 255, 255, 0.022);
	pointer-events: none;
}

.featured-project-content {
	position: relative;
	z-index: 3;
	padding: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.featured-project-topline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.featured-project-label,
.featured-project-live {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 0 13px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 1.45px;
}

.featured-project-label {
	background: var(--orange);
	color: white;
}

.featured-project-live {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.72);
}

.featured-project-content h3 {
	font-size: clamp(50px, 6vw, 88px);
	line-height: 0.95;
	letter-spacing: -4px;
}

.featured-project-content > p {
	max-width: 580px;
	margin-top: 24px;
	color: var(--text-muted);
	font-size: 17px;
	line-height: 1.7;
}

.featured-project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.updates-primary-button,
.updates-trailer-button {
	min-height: 52px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	border-radius: 13px;
	font-size: 13px;
	font-weight: 900;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease;
}

.updates-primary-button {
	background: var(--orange);
	color: white;
}

.updates-primary-button:hover,
.updates-trailer-button:hover {
	transform: translateY(-3px);
}

.updates-primary-button:hover {
	background: var(--orange-light);
}

.updates-trailer-button {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.045);
	color: white;
}

.updates-trailer-button:hover {
	border-color: rgba(255, 101, 0, 0.5);
	background: rgba(255, 101, 0, 0.08);
}

.featured-project-visual {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	isolation: isolate;
}

.featured-project-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(90deg, #181818 0%, rgba(24, 24, 24, 0.18) 32%, transparent 60%),
		linear-gradient(0deg, rgba(17, 17, 17, 0.52), transparent 42%);
	pointer-events: none;
}

.featured-project-visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.featured-project:hover .featured-project-visual img {
	transform: scale(1.09);
}

.featured-project-glow {
	position: absolute;
	z-index: 1;
	width: 320px;
	height: 320px;
	right: 2%;
	top: 6%;
	background: radial-gradient(circle, rgba(255, 132, 0, 0.36), transparent 67%);
	pointer-events: none;
}

.featured-project-stamp {
	position: absolute;
	right: 28px;
	bottom: 28px;
	z-index: 4;
	width: 105px;
	height: 105px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.82);
	transform: rotate(8deg);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.featured-project-stamp span {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 2px;
	color: var(--orange);
}

.featured-project-stamp strong {
	margin-top: 2px;
	font-size: 17px;
	letter-spacing: -0.5px;
}

.updates-dashboard {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 24px;
}

.studio-news,
.roadmap-panel {
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 26px;
	background: #181818;
}

.updates-block-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.updates-block-heading > span {
	color: var(--orange);
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 2px;
}

.updates-block-heading h3 {
	font-size: 27px;
	letter-spacing: -1px;
}

.news-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.news-card {
	min-height: 230px;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 19px;
	background: #202020;
	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease;
}

.news-card:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 101, 0, 0.34);
	background: #232323;
}

.news-card-highlight {
	background:
		linear-gradient(145deg, rgba(255, 101, 0, 0.13), transparent 60%),
		#202020;
}

.news-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 18px;
	margin-bottom: 28px;
}

.news-card-meta strong {
	font-size: 8px;
	font-weight: 950;
	letter-spacing: 1.4px;
	color: var(--orange);
}

.news-card h4 {
	font-size: 20px;
	line-height: 1.12;
	letter-spacing: -0.6px;
}

.news-card p {
	margin-top: 12px;
	color: #9d9d9d;
	font-size: 13px;
	line-height: 1.55;
}

.roadmap-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.roadmap-list::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 22px;
	bottom: 22px;
	width: 1px;
	background: rgba(255, 255, 255, 0.09);
}

.roadmap-item {
	position: relative;
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 14px;
	align-items: center;
	min-height: 72px;
	padding: 10px 8px;
}

.roadmap-marker {
	position: relative;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #222;
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	font-weight: 950;
}

.roadmap-active .roadmap-marker {
	border-color: rgba(255, 101, 0, 0.35);
	background: rgba(255, 101, 0, 0.09);
}

.roadmap-active .roadmap-marker i {
	display: block;
}

.roadmap-done .roadmap-marker {
	background: var(--orange);
	border-color: var(--orange);
	color: white;
}

.roadmap-upcoming {
	opacity: 0.55;
}

.roadmap-item strong {
	display: block;
	font-size: 13px;
}

.roadmap-item span {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	letter-spacing: 0.6px;
	color: #777;
}

body.modal-open .game-update-dot,
body.modal-open .featured-project-live i,
body.modal-open .news-dot,
body.modal-open .roadmap-active .roadmap-marker i {
	animation-play-state: paused;
}

@media (max-width: 1050px) {
	.featured-project {
		grid-template-columns: 1fr;
	}

	.featured-project-visual {
		min-height: 380px;
	}

	.featured-project-visual::after {
		background: linear-gradient(0deg, #181818 0%, rgba(24, 24, 24, 0.15) 40%, transparent 70%);
	}

	.updates-dashboard {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.game-update-badge {
		left: 12px;
		top: 12px;
		max-width: calc(100% - 76px);
		font-size: 8px;
	}

	.game-update-note {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.featured-project {
		border-radius: 23px;
	}

	.featured-project-content {
		padding: 30px 22px;
	}

	.featured-project-content h3 {
		font-size: 50px;
		letter-spacing: -3px;
	}

	.featured-project-content > p {
		font-size: 15px;
	}

	.featured-project-actions {
		flex-direction: column;
	}

	.updates-primary-button,
	.updates-trailer-button {
		width: 100%;
	}

	.featured-project-visual {
		min-height: 280px;
	}

	.featured-project-stamp {
		width: 86px;
		height: 86px;
		right: 18px;
		bottom: 18px;
	}

	.studio-news,
	.roadmap-panel {
		padding: 22px;
		border-radius: 21px;
	}

	.updates-block-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.news-list {
		grid-template-columns: 1fr;
	}

	.news-card {
		min-height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.game-update-dot,
	.featured-project-live i,
	.news-dot,
	.roadmap-active .roadmap-marker i {
		animation: none;
	}

	.featured-project-visual img,
	.news-card,
	.updates-primary-button,
	.updates-trailer-button {
		transition: none;
	}
}



/* News navigation + bilingual update polish */
html[lang="pt-BR"] .featured-project-stamp span {
	font-size: 7px;
	letter-spacing: 1.2px;
}

html[lang="pt-BR"] .featured-project-stamp strong {
	max-width: 92px;
	font-size: 11px;
	line-height: 1.05;
	letter-spacing: 0;
	text-align: center;
}

@media (max-width: 1180px) {
	.navigation {
		gap: 15px;
	}
}