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

		.nav-header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: rgba(28, 28, 30, 0.95);
			backdrop-filter: blur(10px);
			z-index: 1000;
			padding: 1rem 2rem;
			border-bottom: 1px solid rgba(201, 166, 107, 0.2);
		}

		.nav-container {
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.nav-logo {
			font-size: 1.2rem;
			font-weight: bold;
			color: #C9A66B;
			letter-spacing: 2px;
		}

		.nav-links {
			display: flex;
			gap: 2rem;
		}

		.nav-link {
			color: #A0A0A0;
			text-decoration: none;
			font-weight: 500;
			transition: color 0.3s ease;
		}

		.nav-link:hover {
			color: #C9A66B;
		}

		body {
			font-family: 'Segoe UI', sans-serif;
			background: linear-gradient(135deg, #1C1C1E 0%, #2E2E30 100%);
			color: #fff;
			overflow-x: hidden;
		}

		.hero {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			position: relative;
			background: 
				radial-gradient(circle at 20% 80%, rgba(211, 47, 47, 0.15) 0%, transparent 50%),
				radial-gradient(circle at 80% 20%, rgba(90, 200, 250, 0.1) 0%, transparent 50%),
				linear-gradient(135deg, #1C1C1E 0%, #2E2E30 100%);
		}

		.studio-logo {
			font-size: 1.5rem;
			color: #C9A66B;
			margin-bottom: 2rem;
			font-weight: 300;
			letter-spacing: 3px;
			opacity: 0;
			animation: fadeInUp 1s ease 0.2s forwards;
		}

		.game-title {
			font-size: 4.5rem;
			font-weight: bold;
			color: #D32F2F;
			margin-bottom: 1rem;
			text-shadow: 0 0 30px rgba(211, 47, 47, 0.5);
			opacity: 0;
			animation: fadeInUp 1s ease 0.5s forwards;
		}

		.tagline {
			font-size: 1.8rem;
			color: #C9A66B;
			margin-bottom: 3rem;
			max-width: 800px;
			line-height: 1.4;
			opacity: 0;
			animation: fadeInUp 1s ease 0.8s forwards;
		}

		.cta-container {
			display: flex;
			gap: 2rem;
			margin-bottom: 4rem;
			opacity: 0;
			animation: fadeInUp 1s ease 1.1s forwards;
		}

		.cta-button {
			padding: 1rem 2.5rem;
			border: none;
			border-radius: 8px;
			font-size: 1.2rem;
			font-weight: bold;
			cursor: pointer;
			text-decoration: none;
			display: inline-block;
			transition: all 0.3s ease;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		.cta-primary {
			background: linear-gradient(45deg, #D32F2F, #FF3B30);
			color: white;
			box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
		}

		.cta-primary:hover {
			transform: translateY(-3px);
			box-shadow: 0 12px 35px rgba(211, 47, 47, 0.5);
		}

		.cta-secondary {
			background: transparent;
			color: #C9A66B;
			border: 2px solid #C9A66B;
		}

		.cta-secondary:hover {
			background: #C9A66B;
			color: #1C1C1E;
			transform: translateY(-3px);
		}

		.screenshot-section {
			background: #2E2E30;
			padding: 6rem 2rem;
			text-align: center;
		}

		.section-title {
			font-size: 3rem;
			color: #C9A66B;
			margin-bottom: 2rem;
			font-weight: bold;
		}

		.carousel-container {
			max-width: 1200px;
			margin: 0 auto;
			position: relative;
		}

		.screenshot-carousel {
			display: flex;
			overflow: hidden;
			border-radius: 12px;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
		}

		.screenshot {
			min-width: 100%;
			height: 600px;
			background: linear-gradient(45deg, #636366, #8E8E93);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2rem;
			color: #1C1C1E;
			font-weight: bold;
			transition: transform 0.5s ease;
		}

		.carousel-nav {
			display: flex;
			justify-content: center;
			gap: 1rem;
			margin-top: 2rem;
		}

		.nav-dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #636366;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.nav-dot.active {
			background: #D32F2F;
			transform: scale(1.3);
		}

		.features-section {
			padding: 6rem 2rem;
			background: #1C1C1E;
		}

		.features-grid {
			max-width: 1200px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: 3rem;
		}

		.feature-card {
			background: #2E2E30;
			padding: 2.5rem;
			border-radius: 12px;
			text-align: center;
			border-left: 4px solid #D32F2F;
			transition: transform 0.3s ease;
		}

		.feature-card:hover {
			transform: translateY(-5px);
		}

		.feature-icon {
			font-size: 3rem;
			margin-bottom: 1.5rem;
		}

		.feature-title {
			font-size: 1.5rem;
			color: #C9A66B;
			margin-bottom: 1rem;
			font-weight: bold;
		}

		.feature-desc {
			color: #A0A0A0;
			line-height: 1.6;
		}

		.community-section {
			background: #2E2E30;
			padding: 6rem 2rem;
			text-align: center;
		}

		.social-links {
			display: flex;
			justify-content: center;
			gap: 2rem;
			margin-top: 3rem;
		}

		.social-link {
			padding: 1rem 2rem;
			background: #1C1C1E;
			color: #C9A66B;
			text-decoration: none;
			border-radius: 8px;
			border: 2px solid #C9A66B;
			transition: all 0.3s ease;
			font-weight: bold;
		}

		.social-link:hover {
			background: #C9A66B;
			color: #1C1C1E;
			transform: translateY(-3px);
		}

		.footer {
			background: #1C1C1E;
			padding: 3rem 2rem;
			text-align: center;
			color: #636366;
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@media (max-width: 768px) {
			.game-title {
				font-size: 3rem;
			}
			
			.tagline {
				font-size: 1.4rem;
			}
			
			.cta-container {
				flex-direction: column;
				align-items: center;
			}
			
			.features-grid {
				grid-template-columns: 1fr;
			}
			
			.social-links {
				flex-direction: column;
				align-items: center;
			}
			
			.nav-links {
				flex-direction: column;
				gap: 1rem;
			}
			
			.nav-container {
				flex-direction: column;
				gap: 1rem;
			}
		}

		/* Timeline container: vertical line */
		.timeline {
    position: relative;
    padding-left: 0;
    margin-left: 0;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #C9A66B;
    opacity: 0.4;
    z-index: 0;
}

/* Timeline marker */
.timeline-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid #C9A66B;
    background: #2E2E30;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* Reduce horizontal spacing between timeline columns */
.timeline-item .row {
    margin-left: 0;
    margin-right: 0;
}

.timeline-item .col-md-5,
.timeline-item .col-md-2 {
    padding-left: 0;
    padding-right: 0;
}