:root {
	--bg: #0b0c0e;
	--surface: #14161a;
	--card: rgba(255, 255, 255, 0.02);
	--border: rgba(255, 255, 255, 0.06);
	--muted: #8a8a93;
	--accent: #a78bfa;
	--accent-deep: #7c3aed;
	--text: #f4f4f5;
	--glow: 0 0 40px rgba(167, 139, 250, 0.1);
	--radius: 20px;
}

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

body {
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	background-color: var(--bg);
	background-image:
		radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.05) 0px, transparent 50%),
		radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.03) 0px, transparent 50%);
	color: var(--text);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 36px;
}

header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 32px 0;
	animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.logo {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: opacity 0.2s;
}

.logo:hover {
	opacity: 0.8;
}

.logo img {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: cover;
	filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.8));
	transition: all 0.4s ease;
}

.logo:hover img {
	filter: drop-shadow(0 0 16px rgba(192, 132, 252, 1));
	transform: scale(1.02);
}

.logo .text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.1;
}

.logo .title {
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.5px;
	color: #fff;
	margin-bottom: 1px;
}

.logo .subtitle {
	font-size: 10px;
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}


.nav {
	justify-self: center;
	display: flex;
	gap: 6px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 4px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.05);
	height: 44px;
	box-sizing: border-box;
}

.nav a {
	color: var(--muted);
	text-decoration: none;
	height: 34px;
	padding: 0 18px;
	border-radius: 20px;
	font-size: 13.5px;
	font-weight: 600;
	background: transparent;
	border: 1px solid transparent;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.nav a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, 0.1);
}

.nav a.active {
	color: var(--accent);
	background: rgba(167, 139, 250, 0.08);
	border-color: rgba(167, 139, 250, 0.2);
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.08);
}

.hero {
	padding: 40px 0 20px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

h1 {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -1.5px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #fff 0%, var(--muted) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lead {
	font-size: 18px;
	color: var(--muted);
	margin-bottom: 20px;
}

.cta-row {
	display: flex;
	gap: 16px;
	justify-content: center;
}

.btn {
	padding: 12px 24px;
	min-width: 160px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	cursor: pointer;
	user-select: none;
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #fff;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.btn-primary:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.btn-secondary {
	background: var(--card);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.05);
	transform: translateY(-4px);
	box-shadow: 0 0 25px rgba(167, 139, 250, 0.2);
	border-color: rgba(167, 139, 250, 0.4);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 80px 0 32px;
}

.section-title {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.5px;
}

.servers-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.server-card {
	position: relative;
	height: 340px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	background-size: cover;
	background-position: center;
}

.server-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 12, 14, 0.95) 0%, rgba(11, 12, 14, 0.4) 50%, transparent 100%);
	z-index: 1;
}

.server-card:hover {
	transform: translateY(-8px);
	border-color: var(--accent);
	box-shadow: 0 10px 30px rgba(167, 139, 250, 0.2);
}

.server-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px;
	z-index: 2;
	text-align: center;
}

.server-card h3 {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.server-card .meta {
	display: none;
	/* Hidden simplified view as per request */
}

.server-card-desc {
	display: none;
	/* Also hidden in the main grid view */
}

/* ==========================================
   NEWS SECTION — Modern Grid Layout
   ========================================== */
.news-section {
	padding: 28px 0 20px;
	margin-bottom: 24px;
	animation: fadeIn 1s ease-out 0.2s both;
}

.news-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.news-section-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: var(--accent);
}

.news-label-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
	animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.6;
		transform: scale(0.8);
	}
}

/* News grid: featured (large) + side stack */
.news-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 16px;
	align-items: start;
}

/* Featured (large) card */
.news-featured-card {
	background: rgba(14, 16, 22, 0.8);
	border: 1px solid rgba(167, 139, 250, 0.15);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.news-featured-card:hover {
	border-color: rgba(167, 139, 250, 0.4);
	box-shadow: 0 20px 50px rgba(124, 58, 237, 0.2);
	transform: translateY(-4px);
}

.news-featured-img {
	position: relative;
	height: 210px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(76, 29, 149, 0.4) 0%, rgba(14, 16, 22, 0.95) 100%);
}

.news-featured-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
	opacity: 0.75;
}

.news-featured-card:hover .news-featured-img img {
	transform: scale(1.06);
}

.news-featured-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 12, 14, 0.9) 0%, rgba(11, 12, 14, 0.2) 60%, transparent 100%);
}

.news-featured-content {
	padding: 22px 24px 24px;
}

.news-date-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 10px;
}

.news-featured-title {
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 12px;
	letter-spacing: -0.3px;
	background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.news-featured-desc {
	font-size: 13.5px;
	color: rgba(244, 244, 245, 0.65);
	line-height: 1.6;
	margin-bottom: 20px;
}

/* Tag badges */
.news-tag-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 5;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-tag-badge:hover {
	transform: scale(1.15);
}

.news-tag-launch {
	background: rgba(124, 58, 237, 0.8);
	color: #fff;
	border: 1.5px solid rgba(167, 139, 250, 0.5);
	box-shadow: 0 0 14px rgba(124, 58, 237, 0.5);
}

.news-tag-design {
	background: rgba(14, 165, 233, 0.8);
	color: #fff;
	border: 1.5px solid rgba(56, 189, 248, 0.5);
	box-shadow: 0 0 14px rgba(14, 165, 233, 0.4);
}

.news-tag-update {
	background: rgba(5, 150, 105, 0.8);
	color: #fff;
	border: 1.5px solid rgba(52, 211, 153, 0.5);
	box-shadow: 0 0 14px rgba(5, 150, 105, 0.4);
}

/* Side news stack */
.news-side-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.news-compact-card {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 0;
	background: rgba(14, 16, 22, 0.8);
	border: 1px solid rgba(167, 139, 250, 0.12);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-compact-card:hover {
	border-color: rgba(167, 139, 250, 0.35);
	box-shadow: 0 12px 30px rgba(124, 58, 237, 0.18);
	transform: translateX(4px);
}

.news-compact-img {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(76, 29, 149, 0.4) 0%, rgba(14, 16, 22, 0.9) 100%);
}

.news-compact-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.news-compact-card:hover .news-compact-img img {
	transform: scale(1.1);
	opacity: 0.85;
}

.news-compact-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent, rgba(11, 12, 14, 0.3));
}

.news-compact-img .news-tag-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 26px;
	height: 26px;
}

.news-compact-content {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.news-compact-title {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	line-height: 1.25;
	margin: 0;
}

.news-compact-desc {
	font-size: 12px;
	color: rgba(244, 244, 245, 0.5);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-compact-date {
	font-size: 11px;
	font-weight: 600;
	color: var(--accent);
	opacity: 0.7;
	margin-top: 2px;
}

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

	.news-featured-img {
		height: 180px;
	}
}

@media (max-width: 600px) {
	.news-compact-card {
		grid-template-columns: 90px 1fr;
	}
}

/* ===== OLD CAROUSEL (keep for openNews() JS compatibility) ===== */
.news-carousel {
	display: none;
	/* hidden, replaced by news-grid */
}

/* Legacy carousel rules kept below for reference but overridden by display:none above */

.news-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 24px;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.news-track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
	width: 300%;
	/* 3 slides */
}

.news-slide {
	width: 33.3333%;
	flex-shrink: 0;
	padding: 24px;
	opacity: 0;
	transform: scale(0.95);
	transition: all 0.6s ease;
}

.news-slide.active {
	opacity: 1;
	transform: scale(1);
}

.news-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.news-content {
	text-align: left;
}

.news-date {
	font-size: 13px;
	color: var(--accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
	display: block;
}

.news-title {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 16px;
	background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.news-intro {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 24px;
	line-height: 1.5;
}

.btn-read-more {
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 10px 20px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
}

.btn-read-more:hover {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}

.btn-read-more svg {
	transition: transform 0.3s ease;
}

.btn-read-more:hover svg {
	transform: translateX(4px);
}

.btn-all-news {
	background: rgba(167, 139, 250, 0.1);
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 10px 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
	text-decoration: none;
}

.btn-all-news:hover {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}

.btn-all-news svg {
	transition: transform 0.3s ease;
}

.btn-all-news:hover svg {
	transform: translateX(4px);
}

.news-image {
	position: relative;
	height: 220px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.news-slide.active .news-image img {
	transform: scale(1.05);
}

.carousel-nav {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 10;
}

.nav-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.nav-dot.active {
	background: var(--accent);
	transform: scale(1.3);
	box-shadow: 0 0 10px var(--accent);
}

@media (max-width: 800px) {
	.news-card {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: center;
	}

	.news-content {
		text-align: center;
		order: 2;
	}

	.news-image {
		order: 1;
		height: 200px;
	}

	.news-slide {
		padding: 30px 20px 60px;
	}
}

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 32px;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.team-member {
	display: flex;
	gap: 16px;
	align-items: center;
}

.avatar {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #000;
	flex-shrink: 0;
}

.footer {
	padding: 0;
	background: rgba(167, 139, 250, 0.02);
	border-top: 1px solid rgba(167, 139, 250, 0.1);
	margin-top: 30px;
	width: 100%;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 600px) {
	.footer-inner {
		padding: 0 20px;
	}
}

.footer-compact-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px 40px;
	padding: 15px 0;
}

@media (max-width: 600px) {
	.footer-compact-links {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
}

.social-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity: 0.6;
}

.social-link:hover {
	opacity: 1;
	transform: translateY(-2px);
	color: var(--accent);
}

.social-link svg {
	width: 20px;
	height: 20px;
	transition: all 0.3s ease;
}

.social-link:hover svg {
	filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.4));
}

.footer-separator {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.05);
	margin: 0;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0px;
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
	padding: 20px 0 20px 0;
	text-align: center;
}

.footer-logo {
	font-weight: 900;
	font-size: 20px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.logo-project {
	font-weight: 500;
	font-size: 22px;
	color: var(--accent);
	font-style: normal;
	letter-spacing: 1px;
	text-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
	text-transform: none;
}

.footer-credits {
	font-size: 10px;
	letter-spacing: 1.5px;
	opacity: 0.4;
	font-weight: 400;
	color: var(--muted);
	transition: opacity 0.3s ease;
	user-select: none;
}

.footer-credits:hover {
	opacity: 0.7;
}

/* MODAL */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 0 20px;
	overflow-y: auto;
	z-index: 1000;
}

.modal.active {
	display: flex;
}

.modal-content {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 40px;
	max-width: 500px;
	width: 100%;
	position: relative;
	margin: 60px auto 40px;
	animation: modalSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlide {
	from {
		transform: scale(0.95);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

.modal-close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 24px;
	cursor: pointer;
}

.modal-header h2 {
	font-size: 24px;
	margin-bottom: 16px;
	color: #fff;
	font-weight: 800;
}

.modal-body {
	color: var(--muted);
	font-size: 15px;
}

.modal-version-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.modal-version-badge:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(167, 139, 250, 0.3);
}

.badge-dot {
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--accent);
	display: block;
}

.modal-body p {
	margin-bottom: 12px;
}

.modal-body ul {
	list-style: none;
	margin: 16px 0;
}

.modal-body li {
	margin-bottom: 8px;
	padding-left: 20px;
	position: relative;
}

.modal-body li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--accent);
}

/* ==========================================
   NEWS MODAL — 3D Premium Style
   ========================================== */

/* News modal wrapper — adds perspective for 3D */
.modal.news-modal-active {
	perspective: 1200px;
}

/* News modal content override */
.news-modal-3d {
	max-width: 760px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	overflow: visible !important;
	animation: newsModalEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes newsModalEntry {
	from {
		transform: rotateX(8deg) rotateY(-4deg) scale(0.85) translateY(40px);
		opacity: 0;
	}

	50% {
		transform: rotateX(-2deg) rotateY(1deg) scale(1.02) translateY(-5px);
	}

	to {
		transform: rotateX(0) rotateY(0) scale(1) translateY(0);
		opacity: 1;
	}
}

/* Inner card with glassmorphism and glow border */
.news-modal-inner {
	position: relative;
	background: linear-gradient(165deg, rgba(22, 20, 32, 0.98) 0%, rgba(11, 10, 18, 0.99) 100%);
	border-radius: 28px;
	overflow: hidden;
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.8),
		0 0 0 1px rgba(167, 139, 250, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform-style: preserve-3d;
}

/* Top decorative accent bar */
.news-modal-accent-bar {
	height: 3px;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(167, 139, 250, 0.3) 15%,
			var(--accent) 50%,
			rgba(167, 139, 250, 0.3) 85%,
			transparent 100%);
	position: relative;
}

.news-modal-accent-bar::after {
	content: '';
	position: absolute;
	inset: -4px 0;
	background: inherit;
	filter: blur(8px);
	opacity: 0.6;
}

/* Floating corner decorations */
.news-modal-corner {
	position: absolute;
	width: 80px;
	height: 80px;
	z-index: 0;
	pointer-events: none;
}

.news-modal-corner--tl {
	top: -1px;
	left: -1px;
	border-top: 2px solid rgba(167, 139, 250, 0.3);
	border-left: 2px solid rgba(167, 139, 250, 0.3);
	border-radius: 28px 0 0 0;
	animation: cornerPulseTL 3s ease-in-out infinite;
}

.news-modal-corner--br {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid rgba(124, 58, 237, 0.25);
	border-right: 2px solid rgba(124, 58, 237, 0.25);
	border-radius: 0 0 28px 0;
	animation: cornerPulseBR 3s ease-in-out 1.5s infinite;
}

@keyframes cornerPulseTL {

	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.05);
	}
}

@keyframes cornerPulseBR {

	0%,
	100% {
		opacity: 0.4;
		transform: scale(1);
	}

	50% {
		opacity: 0.9;
		transform: scale(1.06);
	}
}

/* Floating orb particles */
.news-modal-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(30px);
	z-index: 0;
}

.news-modal-orb--1 {
	width: 120px;
	height: 120px;
	background: rgba(167, 139, 250, 0.08);
	top: 10%;
	right: -20px;
	animation: orbFloat1 8s ease-in-out infinite;
}

.news-modal-orb--2 {
	width: 80px;
	height: 80px;
	background: rgba(124, 58, 237, 0.06);
	bottom: 15%;
	left: -10px;
	animation: orbFloat2 10s ease-in-out 2s infinite;
}

.news-modal-orb--3 {
	width: 60px;
	height: 60px;
	background: rgba(192, 132, 252, 0.05);
	top: 50%;
	left: 50%;
	animation: orbFloat3 7s ease-in-out 1s infinite;
}

@keyframes orbFloat1 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	33% {
		transform: translate(-15px, 20px) scale(1.1);
	}

	66% {
		transform: translate(10px, -10px) scale(0.9);
	}
}

@keyframes orbFloat2 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(20px, -15px) scale(1.15);
	}
}

@keyframes orbFloat3 {

	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.5;
	}

	50% {
		transform: translate(-50%, -55%) scale(1.2);
		opacity: 1;
	}
}

@keyframes newsBounceUp {
	0% {
		transform: translateY(45px) scale(0.96);
		opacity: 0;
	}

	60% {
		transform: translateY(-5px) scale(1.015);
		opacity: 0.9;
	}

	85% {
		transform: translateY(1.5px) scale(0.995);
	}

	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Content area */
.news-modal-content-area {
	position: relative;
	z-index: 1;
	padding: 40px 48px 32px;
}

/* Date tag with pill style */
.news-modal-date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: rgba(167, 139, 250, 0.1);
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 1.8px;
	margin-bottom: 22px;
	backdrop-filter: blur(10px);
	opacity: 0;
	animation: newsBounceUp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.news-modal-date-dot {
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--accent);
	animation: dotPulse 2s ease-in-out infinite;
}

/* Title with gradient + 3D text shadow */
.news-modal-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.8px;
	margin-bottom: 26px;
	background: linear-gradient(135deg, #fff 0%, #c4b5fd 60%, #a78bfa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none;
	opacity: 0;
	animation: newsBounceUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
	position: relative;
}

/* Content text */
.news-modal-text {
	color: rgba(244, 244, 245, 0.75);
	line-height: 1.75;
	font-size: 15px;
}

/* Apply bouncy entry to direct children of the text area for a staggered effect */
.news-modal-text>p,
.news-modal-text>ul {
	opacity: 0;
	animation: newsBounceUp 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.news-modal-text>p:nth-child(1) {
	animation-delay: 0.3s;
}

.news-modal-text>p:nth-child(2) {
	animation-delay: 0.4s;
}

.news-modal-text>p:nth-child(3) {
	animation-delay: 0.5s;
}

.news-modal-text>p:nth-child(4) {
	animation-delay: 0.6s;
}

.news-modal-text>ul {
	animation-delay: 0.45s;
}

/* Stagger list items inside the list slightly */
.news-modal-text li {
	margin-bottom: 12px;
	padding-left: 28px;
	position: relative;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: newsBounceUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.news-modal-text li:nth-child(1) {
	animation-delay: 0.5s;
}

.news-modal-text li:nth-child(2) {
	animation-delay: 0.58s;
}

.news-modal-text li:nth-child(3) {
	animation-delay: 0.66s;
}

.news-modal-text li:nth-child(4) {
	animation-delay: 0.74s;
}

.news-modal-text li:nth-child(5) {
	animation-delay: 0.82s;
}

.news-modal-text li:hover {
	transform: translateX(4px);
}

.news-modal-text li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-deep));
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.4);
}

/* Bottom separator + link */
.news-modal-footer {
	position: relative;
	z-index: 1;
	padding: 0 48px 36px;
	opacity: 0;
	animation: newsBounceUp 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s both;
}

.news-modal-divider {
	height: 1px;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(167, 139, 250, 0.2) 20%,
			rgba(167, 139, 250, 0.15) 80%,
			transparent 100%);
	margin-bottom: 24px;
}

/* Close button override for news modal */
.news-modal-3d .modal-close {
	top: 20px;
	right: 20px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	color: var(--muted);
	font-size: 20px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	z-index: 10;
}

.news-modal-3d .modal-close:hover {
	background: rgba(167, 139, 250, 0.15);
	border-color: rgba(167, 139, 250, 0.3);
	color: #fff;
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 0 20px rgba(167, 139, 250, 0.2);
}

/* Hover tilt effect on the whole card */
.news-modal-inner {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.news-modal-inner:hover {
	box-shadow:
		0 40px 100px rgba(0, 0, 0, 0.7),
		0 0 0 1px rgba(167, 139, 250, 0.25),
		0 0 40px rgba(167, 139, 250, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Responsive adjustments for news modal */
@media (max-width: 600px) {
	.news-modal-3d {
		max-width: 100% !important;
	}

	.news-modal-content-area {
		padding: 28px 24px 24px;
	}

	.news-modal-footer {
		padding: 0 24px 24px;
	}

	.news-modal-title {
		font-size: 22px;
	}

	.news-modal-corner {
		width: 50px;
		height: 50px;
	}
}

@media (max-width: 600px) {
	header {
		display: flex;
		justify-content: space-between;
		padding: 20px 0;
	}

	.hero {
		padding: 60px 0 40px;
	}

	.cta-row {
		flex-direction: column;
	}

	.nav {
		display: none;
	}

	.user-cabinet {
		padding-right: 0;
	}
}

/* LAUNCHER & CONTENT */
.download-section {
	text-align: center;
	padding: 20px 0;
}

.download-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.system-item {
	padding: 24px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--border);
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	text-align: center;
	text-decoration: none;
	color: inherit;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	user-select: none;
	-webkit-user-drag: none;
}

.system-item:not(.locked) {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
	border-color: rgba(167, 139, 250, 0.2);
}

.system-item:not(.locked):hover {
	background: rgba(167, 139, 250, 0.05);
	transform: translateY(-8px);
	border-color: var(--accent);
	box-shadow: 0 15px 35px rgba(167, 139, 250, 0.15), 0 0 20px rgba(167, 139, 250, 0.1);
}

.system-item.locked {
	cursor: not-allowed;
	background: rgba(167, 139, 250, 0.03);
	border-color: rgba(167, 139, 250, 0.1);
	backdrop-filter: blur(8px);
}

.system-item.locked::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(167, 139, 250, 0.1), transparent);
	z-index: 0;
}

.system-item.locked *:not(.dev-status):not(.lock-icon) {
	opacity: 0.15;
	filter: grayscale(1) blur(2px);
}

.lock-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 52px;
	color: #fff;
	opacity: 1 !important;
	filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4)) !important;
	z-index: 20;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	pointer-events: none;
	user-select: none;
}

.dev-status {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	opacity: 1 !important;
	filter: none !important;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)) !important;
	z-index: 30;
	pointer-events: none;
	user-select: none;
	width: 100%;
	text-align: center;
}

@keyframes lockShake {

	0%,
	100% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	20% {
		transform: translate(-55%, -50%) rotate(-8deg);
	}

	40% {
		transform: translate(-45%, -50%) rotate(8deg);
	}

	60% {
		transform: translate(-53%, -50%) rotate(-4deg);
	}

	80% {
		transform: translate(-47%, -50%) rotate(4deg);
	}
}

.system-item.locked:active .lock-icon {
	animation: lockShake 0.4s ease-in-out;
}

.system-item.locked:active {
	transform: scale(0.98);
}

.system-icon {
	font-size: 36px;
	margin-bottom: 20px;
	display: block;
	filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.2));
}

.tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.tab-btn {
	padding: 8px 16px;
	border-radius: 10px;
	background: var(--card);
	border: 1px solid var(--border);
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s;
}

.tab-btn.active {
	background: rgba(167, 139, 250, 0.1);
	color: #fff;
	border-color: var(--accent);
}

.content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.content-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	transition: all 0.3s ease;
}

.content-card:hover {
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-4px);
}

.content-tag {
	font-size: 11px;
	font-weight: 800;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 12px;
	display: block;
}

.content-date {
	font-size: 12px;
	color: var(--muted);
	margin-top: 20px;
	display: block;
}

/* Toast Notification */
.toast {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background: var(--accent);
	color: #fff;
	padding: 16px 28px;
	border-radius: 14px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
	z-index: 10000;
	opacity: 0;
	transform: translateX(100px);
	transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	pointer-events: none;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.toast.show {
	opacity: 1;
	transform: translateX(0);
}

/* ==========================================================================
   LAUNCHER PAGE CUSTOM HIGHER-FIDELITY STYLES (UPDATED & CLEANED)
   ========================================================================== */

/* Violet highlight helper */
.violet-highlight {
	color: var(--accent) !important;
	font-weight: 600;
}

/* Step Cards */
.steps-section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 40px auto 40px;
	width: 100%;
	max-width: 100%;
	position: relative;
}

@media (max-width: 768px) {
	.steps-section {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.step-card {
	background: rgba(20, 22, 26, 0.65);
	border: 1px solid rgba(167, 139, 250, 0.15);
	border-radius: 16px;
	padding: 24px 20px 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	position: relative;
}

.step-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	background: rgba(167, 139, 250, 0.02);
	box-shadow: 0 15px 35px rgba(167, 139, 250, 0.1);
}

/* Horizontal connecting line on desktop */
@media (min-width: 769px) {
	.step-card:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 50%;
		right: -25px;
		width: 26px;
		height: 2px;
		background: linear-gradient(90deg, rgba(167, 139, 250, 0.4) 0%, rgba(167, 139, 250, 0.15) 100%);
		transform: translateY(-50%);
		z-index: 2;
	}
}

/* Vertical connecting line on mobile */
@media (max-width: 768px) {
	.step-card:not(:last-child)::after {
		content: '';
		position: absolute;
		bottom: -33px;
		left: 50%;
		width: 2px;
		height: 34px;
		background: linear-gradient(180deg, rgba(167, 139, 250, 0.4) 0%, rgba(167, 139, 250, 0.15) 100%);
		transform: translateX(-50%);
		z-index: 2;
	}
}

.step-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(20, 22, 26, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--accent);
	padding: 4px 14px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid rgba(167, 139, 250, 0.3);
	margin-bottom: 0;
	z-index: 10;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.step-card h3 {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.step-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.5;
	margin: 0;
}

/* Safety Section (VirusTotal Warning) */
.safety-section {
	margin: 40px auto 40px;
	width: 100%;
	max-width: 100%;
}

.safety-card {
	background: rgba(20, 22, 26, 0.6);
	border: 1px solid rgba(167, 139, 250, 0.15);
	border-radius: var(--radius);
	padding: 24px;
	text-align: left;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.safety-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding-bottom: 16px;
	margin-bottom: 24px;
}

.safety-header h2 {
	font-size: clamp(20px, 3.5vw, 24px);
	font-weight: 800;
	color: #fff;
	margin: 0;
	letter-spacing: -0.5px;
}

.safety-status-row {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(167, 139, 250, 0.05);
	border: 1px solid rgba(167, 139, 250, 0.15);
	padding: 14px 20px;
	border-radius: 12px;
	margin-bottom: 28px;
}

.status-badge-violet {
	background: var(--accent);
	color: #0b0c0e;
	padding: 4px 14px;
	border-radius: 8px;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1px;
	box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

.safety-status-row p {
	font-size: 15px;
	font-weight: 600;
	color: #e4e4e7;
	margin: 0;
}

.explanation-lead {
	font-size: 15px;
	color: #d4d4d8;
	margin-bottom: 24px;
	line-height: 1.5;
}

.explanation-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 28px;
}

.exp-point h4 {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}

.exp-point p {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
	margin: 0;
}

.safety-action-tip {
	background: rgba(255, 255, 255, 0.02);
	border-left: 3px solid var(--accent);
	padding: 16px 20px;
	border-radius: 0 12px 12px 0;
	font-size: 14px;
	color: #e4e4e7;
	line-height: 1.6;
}

/* Changelog Section */
.changelog-section {
	margin: 40px auto 40px;
	width: 100%;
	max-width: 100%;
	text-align: left;
}

.changelog-main-title {
	font-size: clamp(24px, 4vw, 28px);
	font-weight: 800;
	color: #fff;
	text-align: center;
	margin-bottom: 24px;
	letter-spacing: -1.5px;
}

.changelog-container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.changelog-block {
	background: rgba(20, 22, 26, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 16px;
	padding: 24px;
	transition: all 0.3s ease;
}

.changelog-block:hover {
	border-color: rgba(167, 139, 250, 0.15);
	background: rgba(20, 22, 26, 0.7);
}

.changelog-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

.version-label {
	color: var(--accent);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.date-label {
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
}

.changelog-body-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.change-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.change-tag {
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: 90px;
	flex-shrink: 0;
	text-align: center;
}

.change-row.added .change-tag {
	background: rgba(74, 222, 128, 0.1);
	color: #4ade80;
	border: 1px solid rgba(74, 222, 128, 0.2);
}

.change-row.fixed .change-tag {
	background: rgba(248, 113, 113, 0.1);
	color: #f87171;
	border: 1px solid rgba(248, 113, 113, 0.2);
}

.change-row.improved .change-tag {
	background: rgba(96, 165, 250, 0.1);
	color: #60a5fa;
	border: 1px solid rgba(96, 165, 250, 0.2);
}

.change-row p {
	font-size: 14px;
	color: #d4d4d8;
	line-height: 1.5;
	margin: 0;
}

/* Changelog Archive & Period Filter Controls */
.changelog-archive-wrapper {
	margin-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

.btn-toggle-changelog {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 28px;
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(124, 58, 237, 0.08) 100%);
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 100px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}

.btn-toggle-changelog:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.22) 0%, rgba(124, 58, 237, 0.16) 100%);
	border-color: rgba(167, 139, 250, 0.4);
	box-shadow: 0 8px 30px rgba(167, 139, 250, 0.25);
}

.btn-toggle-changelog svg {
	transition: transform 0.3s ease;
}

.btn-toggle-changelog.active svg {
	transform: rotate(180deg);
}

.changelog-archive-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.changelog-archive-content.open {
	opacity: 1;
	max-height: 4000px;
	margin-top: 16px;
}

.changelog-period-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.period-tab {
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
}

.period-tab:hover {
	background: rgba(167, 139, 250, 0.1);
	border-color: rgba(167, 139, 250, 0.25);
	color: #fff;
}

.period-tab.active {
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(124, 58, 237, 0.2) 100%);
	border-color: var(--accent);
	color: #fff;
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.2);
}

.changelog-group-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px dashed rgba(167, 139, 250, 0.2);
}

.changelog-group-badge {
	padding: 4px 12px;
	background: rgba(167, 139, 250, 0.12);
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 100px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.changelog-group-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.changelog-fade-in {
	animation: changelogFadeIn 0.4s ease forwards;
}

@keyframes changelogFadeIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 600px) {
	.steps-section {
		grid-template-columns: 1fr;
	}

	.changelog-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.change-row {
		flex-direction: column;
		gap: 6px;
	}

	.change-tag {
		align-self: flex-start;
	}
}

/* ==========================================================================
   PARTNERS SECTION — FUTURISTIC GLOWING LASER RAIL
   ========================================================================== */
.partners-section {
	margin: 40px auto 20px;
	padding: 20px 0;
	position: relative;
	overflow: visible;
	width: 100%;
}

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

.partners-title {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 12px;
	background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.partners-subtitle {
	font-size: 15px;
	color: var(--muted);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

/* The Futuristic Laser Rail Container */
.partners-rail-container {
	position: relative;
	width: 100%;
	padding: 10px 0 80px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* The actual 3D Rail Track with Sleepers and Steel Rails */
.partners-rail-line {
	position: absolute;
	left: -100px;
	right: -100px;
	bottom: 104px;
	/* Perfectly aligned to support the cyber-train wheels with a wider gauge */
	height: 38px;
	/* Prominent wooden ties spaced beautifully */
	background: repeating-linear-gradient(90deg,
			#4a3225 0px,
			#4a3225 24px,
			#271810 24px,
			#271810 32px,
			transparent 32px,
			transparent 96px);
	/* Tilted aggressively forward for an stunning 3D perspective! */
	transform: perspective(200px) rotateX(40deg);
	z-index: 2;
	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	border-bottom: 4px solid rgba(0, 0, 0, 0.95);
}

/* Dual parallel realistic steel rails running on top of sleepers */
.partners-rail-line::before,
.partners-rail-line::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 7px;
	/* Much thicker and heavier steel rails */
	background: linear-gradient(180deg, #ffffff 0%, #d1d5db 30%, #4b5563 70%, #111827 100%);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.6),
		0 0 6px rgba(255, 255, 255, 0.3);
	z-index: 3;
}

.partners-rail-line::before {
	top: 4px;
	/* Positioned nicely from the edges to fit the perspective */
}

.partners-rail-line::after {
	bottom: 4px;
}

/* Laser pulse beaming down the rail */
.rail-laser-beam {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 250px;
	background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.9), rgba(255, 255, 255, 0.95), rgba(192, 132, 252, 0.9), transparent);
	filter: blur(1px);
	animation: laserFlow 6s infinite linear;
	z-index: 4;
}

@keyframes laserFlow {
	0% {
		left: -250px;
	}

	100% {
		left: 100%;
	}
}

/* Infinite Marquee Wrapper */
.partners-marquee {
	width: 100%;
	overflow: hidden;
	z-index: 5;
	display: flex;
	position: relative;
	padding-bottom: 24px;
	/* Fades on the edges for seamless screen blending */
	mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.partners-track {
	display: flex;
	gap: 0;
	/* Gapless! We use couplers to connect them all physically! */
	width: max-content;
	animation: marqueeScroll 30s linear infinite;
	padding: 10px 0;
	align-items: flex-end;
	height: 180px;
}

/* Pause scroll on hover so users can read the description! */
.partners-marquee:hover .partners-track {
	animation-play-state: paused;
}

@keyframes marqueeScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		/* Shift by exactly one third (one whole carriage set) for infinite mathematical loop */
		transform: translateX(-33.3333%);
	}
}

/* Pause the train animations on hover */
.partners-marquee:hover .train-wheel {
	animation-play-state: paused;
}

/* Connected Train Carriage Base */
.train-carriage {
	width: 155px;
	height: 110px;
	border-radius: 12px;
	position: relative;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

/* Unified themed premium carriage style */
.train-carriage {
	background: linear-gradient(180deg, #130f26 0%, #0c081d 100%);
	border: 1.5px solid rgba(167, 139, 250, 0.25);
	border-top: 3px solid #8b5cf6;
	box-shadow:
		0 10px 25px rgba(0, 0, 0, 0.7),
		0 0 15px rgba(139, 92, 246, 0.1);
}

/* Beautiful uniform digital circuit linear decal across all carriages */
.train-carriage::after {
	content: '';
	position: absolute;
	left: 10px;
	bottom: 8px;
	right: 10px;
	height: 20px;
	opacity: 0.15;
	background:
		linear-gradient(90deg, #8b5cf6 1px, transparent 1px),
		linear-gradient(0deg, #8b5cf6 1px, transparent 1px);
	background-size: 8px 8px;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Glowing train window representing passenger cabin - uniform soft purple-violet aura */
.carriage-window {
	border-color: rgba(167, 139, 250, 0.4);
	background: radial-gradient(circle, rgba(167, 139, 250, 0.18) 0%, rgba(10, 6, 25, 0.95) 90%);
	box-shadow: inset 0 0 12px rgba(167, 139, 250, 0.25);
}

/* Premium label beneath the carriage window - uniform glowing text */
.carriage-label {
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	margin-top: 10px;
	padding: 2px 8px;
	border-radius: 6px;
	border: 1px solid rgba(167, 139, 250, 0.25);
	background: rgba(167, 139, 250, 0.08);
	color: #d8b4fe;
	text-shadow: 0 0 5px rgba(167, 139, 250, 0.4);
	text-transform: uppercase;
	transition: all 0.3s ease;
	z-index: 2;
}

/* Inner panels border on all carriages */
.train-carriage::before {
	content: '';
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	right: 4px;
	border: 1px dashed rgba(167, 139, 250, 0.15);
	border-radius: 8px;
	pointer-events: none;
}

/* Highly Subtle & almost invisible coupling joint */
.train-coupler {
	width: 8px;
	/* Extremely subtle and narrow! */
	height: 4px;
	/* Thin coupling bar */
	background: #374151;
	border: 1px solid #111827;
	border-radius: 1px;
	position: relative;
	z-index: 1;
	margin-bottom: 22px;
	/* Aligns flush with bogies */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.train-coupler::before {
	display: none;
	/* Hide the large vertical pin completely for ultimate clean joint aesthetics */
}

/* Universal Wheel Bogies */
.carriage-wheels {
	position: absolute;
	bottom: -12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 24px;
	pointer-events: none;
	z-index: 6;
}

/* Redesigned Highly Realistic & Detailed Spinning Wheels */
.train-wheel {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #111827;
	/* Dark iron tire tread */
	border: 2px solid #374151;
	/* Steel rim edge */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
	position: relative;
	animation: spinWheel 2s linear infinite;
	transform-origin: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes spinWheel {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 6-spoke conic gradient steel turbine plate that creates extremely visible spinning motion! */
.train-wheel .wheel-spoke {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
			#374151 0deg 25deg,
			#9ca3af 25deg 35deg,
			#374151 35deg 85deg,
			#9ca3af 85deg 95deg,
			#374151 95deg 145deg,
			#9ca3af 145deg 155deg,
			#374151 155deg 205deg,
			#9ca3af 205deg 215deg,
			#374151 215deg 265deg,
			#9ca3af 265deg 275deg,
			#374151 275deg 325deg,
			#9ca3af 325deg 335deg,
			#374151 335deg 360deg);
	border: 1.5px solid #111827;
	position: relative;
	box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25);
}

/* Axle center indicator that glows in a matching uniform purple/violet neon glow */
.train-wheel .wheel-hub {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d8b4fe !important;
	z-index: 10;
	border: 1px solid #111827;
	box-shadow: 0 0 8px #d8b4fe, 0 0 15px #d8b4fe;
}

/* Universal Hover State for Uniform Cyber Carriage */
.train-carriage:hover {
	border-color: #a78bfa;
	border-top-color: #c084fc;
	box-shadow:
		0 15px 35px rgba(139, 92, 246, 0.35),
		0 0 25px rgba(139, 92, 246, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transform: translateY(-8px) scale(1.04);
}

.train-carriage:hover .carriage-logo {
	transform: scale(1.1) rotate(2deg);
}

.train-carriage:hover .carriage-window {
	border-color: #c084fc;
	box-shadow:
		0 0 18px rgba(167, 139, 250, 0.5),
		inset 0 0 12px rgba(167, 139, 250, 0.4);
}

.train-carriage:hover .carriage-label {
	background: #8b5cf6;
	color: #fff !important;
	border-color: #a78bfa;
	text-shadow: 0 0 6px #fff;
	box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.train-carriage:hover::after {
	opacity: 0.35;
}

/* ==========================================================================
   PARTNERS MODAL POPUP STYLES
   ========================================================================== */
.partner-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.partner-modal.active {
	opacity: 1;
	pointer-events: auto;
}

.partner-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 3, 10, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.partner-modal-container {
	position: relative;
	width: 90%;
	max-width: 520px;
	background: linear-gradient(135deg, rgba(18, 16, 28, 0.92) 0%, rgba(8, 7, 12, 0.96) 100%);
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 24px;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.75),
		0 0 40px rgba(139, 92, 246, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	z-index: 10;
	transform: scale(0.9) translateY(20px);
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	overflow: hidden;
}

.partner-modal.active .partner-modal-container {
	transform: scale(1) translateY(0);
}

.partner-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.6);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.partner-modal-close:hover {
	background: rgba(167, 139, 250, 0.15);
	border-color: rgba(167, 139, 250, 0.45);
	color: #fff;
	transform: rotate(90deg);
}

.partner-modal-body {
	padding: 36px 30px;
}

.partner-modal-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
}

.partner-modal-logo-wrapper {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	border: 2px solid rgba(167, 139, 250, 0.35);
	overflow: hidden;
	background: rgba(10, 8, 20, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.partner-modal-logo {
	width: 80%;
	height: 80%;
	object-fit: contain;
}

.partner-modal-tag {
	font-size: 11px;
	font-weight: 800;
	color: var(--accent);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 4px;
}

.partner-modal-title {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	margin: 0;
	background: linear-gradient(135deg, #fff 0%, #d8b4fe 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.partner-modal-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 24px;
}

.partner-modal-features {
	margin-bottom: 30px;
}

.partner-modal-features .features-title {
	font-size: 13.5px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.partner-modal-features .features-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.partner-modal-features .features-list li {
	font-size: 13px;
	color: var(--muted);
	padding-left: 20px;
	position: relative;
	line-height: 1.4;
}

.partner-modal-features .features-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--accent);
}

.partner-modal-action-wrapper {
	display: flex;
	gap: 16px;
	width: 100%;
	margin-top: 10px;
}

.partner-modal-action-wrapper .btn-action,
.partner-modal-action-wrapper .btn-discord-action {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	font-weight: 800;
	padding: 14px;
	border-radius: 14px;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.partner-modal-action-wrapper .btn-action {
	background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
	border: 1px solid rgba(167, 139, 250, 0.45);
	color: #fff;
	box-shadow: 0 4px 15px rgba(109, 40, 217, 0.35);
}

.partner-modal-action-wrapper .btn-action:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
	border-color: #fff;
}

.partner-modal-action-wrapper .btn-discord-action {
	background: rgba(88, 101, 242, 0.15);
	border: 1px solid rgba(88, 101, 242, 0.45);
	color: #5865f2;
	box-shadow: 0 4px 15px rgba(88, 101, 242, 0.15);
}

.partner-modal-action-wrapper .btn-discord-action:hover {
	background: #5865f2;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(88, 101, 242, 0.45);
	border-color: #7289da;
}

/* ============================================================
   PFP INTRO SECTION — Головна page hero text
   ============================================================ */
.pfp-intro-section {
	padding: 24px 0 0;
	animation: fadeIn 0.8s ease-out both;
}

.pfp-intro-inner {
	max-width: 100%;
	margin: 0 auto;
}

/* Two-column layout: description left, stats right */
.pfp-intro-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 20px;
	align-items: stretch;
}

@media (max-width: 900px) {
	.pfp-intro-grid {
		grid-template-columns: 1fr;
	}
}

/* Stats column */
.pfp-stats-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pfp-stat-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(14, 16, 22, 0.7);
	border: 1px solid rgba(167, 139, 250, 0.14);
	border-radius: 14px;
	padding: 16px 18px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pfp-stat-card:hover {
	border-color: rgba(167, 139, 250, 0.3);
	background: rgba(167, 139, 250, 0.05);
	transform: translateX(4px);
}

.pfp-stat-discord {
	border-color: rgba(88, 101, 242, 0.3);
	background: rgba(88, 101, 242, 0.06);
}

.pfp-stat-discord:hover {
	border-color: rgba(88, 101, 242, 0.5);
	background: rgba(88, 101, 242, 0.1);
	box-shadow: 0 8px 25px rgba(88, 101, 242, 0.2);
}

.pfp-stat-donate {
	border-color: rgba(236, 72, 153, 0.3) !important;
	background: rgba(236, 72, 153, 0.06) !important;
	cursor: pointer;
}

.pfp-stat-donate:hover {
	border-color: rgba(236, 72, 153, 0.5) !important;
	background: rgba(236, 72, 153, 0.1) !important;
	box-shadow: 0 8px 25px rgba(236, 72, 153, 0.2) !important;
	transform: translateX(4px);
}

.pfp-stat-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(167, 139, 250, 0.12);
	border: 1px solid rgba(167, 139, 250, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	flex-shrink: 0;
}

.pfp-stat-discord .pfp-stat-icon {
	background: rgba(88, 101, 242, 0.15);
	border-color: rgba(88, 101, 242, 0.3);
	color: #7289da;
}

.pfp-stat-donate .pfp-stat-icon {
	background: rgba(236, 72, 153, 0.15);
	border-color: rgba(236, 72, 153, 0.3);
	color: #ec4899;
}

.pfp-stat-donate .pfp-stat-number {
	color: #ec4899;
}

.pfp-stat-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pfp-stat-number {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.5px;
	background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.pfp-stat-label {
	font-size: 12px;
	color: rgba(244, 244, 245, 0.55);
	font-weight: 500;
	line-height: 1.2;
}

.pfp-discord-link {
	color: #7289da !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	transition: opacity 0.2s;
}

.pfp-discord-link:hover {
	opacity: 0.75;
}



/* ── Main card ── */
.pfp-main-card {
	background: rgba(14, 16, 22, 0.7);
	border: 1px solid rgba(167, 139, 250, 0.18);
	border-radius: 16px;
	padding: 24px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 4px 40px rgba(124, 58, 237, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	position: relative;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.pfp-main-card:hover {
	transform: translateY(-4px);
	border-color: rgba(167, 139, 250, 0.38);
	box-shadow: 0 15px 35px rgba(167, 139, 250, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pfp-main-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
	transform: skewX(-25deg);
	transition: 0.75s;
	pointer-events: none;
}

.pfp-main-card:hover::after {
	left: 150%;
	transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}

.pfp-main-card-header {
	margin-bottom: 22px;
}

.pfp-card-title {
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
	letter-spacing: -0.5px;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}

.pfp-accent {
	background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ── Highlight row (badge + text) ── */
.pfp-highlight-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(90deg, rgba(167, 139, 250, 0.08) 0%, rgba(167, 139, 250, 0.02) 100%);
	border: 1px solid rgba(167, 139, 250, 0.15);
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	padding: 14px 20px;
	margin-bottom: 22px;
	overflow: hidden;
}

.pfp-highlight-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(167, 139, 250, 0.15);
	border-radius: 10px;
	color: var(--accent);
	flex-shrink: 0;
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.2);
}

.pfp-highlight-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pfp-highlight-tag {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	background: linear-gradient(135deg, var(--accent), #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.pfp-highlight-text {
	font-size: 14px;
	color: rgba(244, 244, 245, 0.85);
	line-height: 1.4;
	margin: 0;
}

/* ── Description ── */
.pfp-card-desc {
	font-size: 14px;
	color: rgba(244, 244, 245, 0.75);
	line-height: 1.6;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pfp-card-desc p {
	margin: 0;
}

.pfp-card-desc strong {
	color: #f4f4f5;
	font-weight: 700;
}

/* ── Info grid ── */
.pfp-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 24px;
}

.pfp-info-block {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 14px 16px;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.pfp-info-block:hover {
	background: rgba(167, 139, 250, 0.06);
	border-color: rgba(167, 139, 250, 0.2);
}

.pfp-info-block-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(167, 139, 250, 0.1);
	border: 1px solid rgba(167, 139, 250, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--accent);
}

.pfp-info-block-title {
	font-size: 13px;
	font-weight: 700;
	color: #f4f4f5;
	margin-bottom: 3px;
}

.pfp-info-block-desc {
	font-size: 12px;
	color: rgba(244, 244, 245, 0.5);
	line-height: 1.45;
}

/* ── Tip / Discord call-to-action ── */
.pfp-card-tip {
	font-size: 13.5px;
	color: rgba(244, 244, 245, 0.55);
	border-left: 2px solid rgba(167, 139, 250, 0.5);
	padding-left: 14px;
	line-height: 1.6;
}

.pfp-tip-link {
	color: var(--accent);
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s;
}

.pfp-tip-link:hover {
	opacity: 0.75;
}

/* ── Divider ── */
.pfp-intro-divider {
	margin-top: 24px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.35), transparent);
}

@media (max-width: 640px) {
	.pfp-intro-section {
		padding: 40px 0 0;
	}

	.pfp-main-card {
		padding: 24px;
	}

	.pfp-info-grid {
		grid-template-columns: 1fr;
	}

	.pfp-highlight-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ==========================================
   PARTNERS SECTION (HOME PAGE SPLIT LAYOUT)
   ========================================== */
.partners-section {
	padding: 20px 0 10px;
	animation: fadeIn 1s ease-out 0.3s both;
}

.partners-container {
	max-width: 100%;
	margin: 0 auto;
	width: 100%;
}

.partners-section-title {
	font-size: clamp(24px, 4vw, 36px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -1px;
	margin-bottom: 8px;
	text-align: center;
	background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.partners-section-subtitle {
	font-size: 15px;
	color: var(--muted);
	max-width: 600px;
	margin: 0 auto 20px;
	line-height: 1.6;
	text-align: center;
}

/* Matching the about and news containers */
.partners-card {
	background: rgba(14, 16, 22, 0.7);
	border: none;
	border-radius: 16px;
	padding: 24px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 40px var(--partners-card-glow, rgba(124, 58, 237, 0.05));
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: box-shadow 0.5s ease;
}

/* Dynamic outer border that shifts elegantly and morphs colors */
.partners-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 24px;
	padding: 2.5px;
	/* Thicker, highly visible premium border */
	background: var(--partners-card-gradient, rgba(167, 139, 250, 0.18));
	background-size: 200% 200%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition: opacity 0.5s ease, background 0.5s ease;
	opacity: 0.85;
	animation: gradientShift 6s ease infinite;
}

.partners-split {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 32px;
	height: 380px;
	align-items: center;
}

/* Left Pane: Detailed Partner Info */
.partner-info-pane {
	display: flex;
	flex-direction: column;
	text-align: left;
	height: 100%;
	justify-content: center;
}

.partner-info-fade {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-start;
	gap: 12px;
	padding: 4px 0;
}

.partner-info-fade>*:not(.partner-active-btn) {
	flex-shrink: 0;
}



.partner-info-pane.fade-active {
	animation: fadeInPartner 0.4s ease-out forwards;
}

@keyframes fadeInPartner {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.partner-active-category {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 8px;
	align-self: flex-start;
	margin-bottom: 16px;
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
}

.partner-active-title {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	margin: 0 0 14px 0;
	line-height: 1.2;
	display: inline-block;
	align-self: flex-start;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

.partner-active-desc {
	font-size: 14px;
	color: rgba(244, 244, 245, 0.75);
	line-height: 1.6;
	margin: 0 0 24px 0;
}

.partner-features-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 0;
}

.partner-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.partner-feature-bullet {
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
	margin-top: 8px;
	flex-shrink: 0;
	box-shadow: 0 0 8px var(--accent);
}

.partner-feature-content {
	display: flex;
	flex-direction: column;
}

.partner-feature-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
}

.partner-feature-desc {
	font-size: 12px;
	color: rgba(244, 244, 245, 0.5);
	line-height: 1.4;
}

.partner-active-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background-color: rgba(14, 16, 22, 0.75);
	border: 1.5px solid transparent;
	background-image: linear-gradient(rgba(14, 16, 22, 0.75), rgba(14, 16, 22, 0.75)), var(--btn-gradient, var(--accent));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	border-radius: 12px;
	font-size: 13.5px;
	transition: all 0.3s ease, border-color 0.3s ease;
	box-shadow: 0 4px 15px var(--btn-glow, rgba(124, 58, 237, 0.15));
	margin-top: auto;
	margin-left: 130px;
	flex-shrink: 0;
}

.partner-active-btn:hover {
	background-image: var(--btn-gradient, var(--accent));
	background-origin: padding-box;
	background-clip: border-box;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px var(--btn-glow, rgba(124, 58, 237, 0.3));
}

/* Right Pane: Vertical Carousel */
.partner-list-pane {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

.partner-logos-scroller {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin-left: auto;
	height: 310px;
	overflow-y: auto;
	scrollbar-width: none;
	mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.partner-logos-scroller::-webkit-scrollbar {
	display: none;
}

.partner-logos-track {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 16px;
}

/* Partner Mini Cards */
.partner-mini-card {
	background: rgba(14, 16, 22, 0.7);
	border: none;
	border-radius: 16px;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	text-align: left;
	position: relative;
	z-index: 1;
}

/* Beautiful dynamic shifting gradient border for premium feel */
.partner-mini-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 2.5px;
	/* border thickness (expands inwards, preserving card dimensions) */
	background: var(--partner-gradient, rgba(255, 255, 255, 0.08));
	background-size: 200% 200%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition: opacity 0.4s ease;
	opacity: 0.65;
	/* Clear and visible branding when idle */
	animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.partner-mini-card:hover {
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.partner-mini-card:hover::after {
	opacity: 0.85;
}

.partner-mini-card.active {
	background: rgba(255, 255, 255, 0.05);
	box-shadow:
		0 0 10px var(--partner-glow, rgba(139, 92, 246, 0.25)),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.partner-mini-card.active::after {
	opacity: 1;
}

.partner-mini-card.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 25%;
	bottom: 25%;
	width: 3px;
	background: var(--partner-gradient, var(--accent));
	border-radius: 0 4px 4px 0;
	box-shadow: 0 0 10px var(--partner-glow-solid, var(--accent));
}

.partner-logo-mini-circle {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: all 0.3s ease;
}

.partner-mini-card:hover .partner-logo-mini-circle {
	border-color: var(--partner-glow-solid, rgba(167, 139, 250, 0.4));
	box-shadow: 0 0 10px var(--partner-glow, rgba(167, 139, 250, 0.2));
}

.partner-mini-card.active .partner-logo-mini-circle {
	background: var(--partner-glow, rgba(167, 139, 250, 0.15));
	border-color: var(--partner-glow-solid, rgba(167, 139, 250, 0.5));
	color: var(--partner-glow-solid, var(--accent));
}

.partner-mini-info {
	display: flex;
	flex-direction: column;
}

.partner-mini-name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
	transition: color 0.3s ease;
}

.partner-mini-card.active .partner-mini-name {
	color: #fff;
}

.partner-mini-tag {
	font-size: 11px;
	color: var(--muted);
	font-weight: 600;
}

/* Responsive Styling */
@media (max-width: 800px) {
	.partners-split {
		grid-template-columns: 1fr;
		gap: 40px;
		height: auto;
		min-height: auto;
	}

	.partner-logos-scroller {
		height: auto;
		mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
		overflow-x: auto;
		overflow-y: hidden;
		padding: 10px 0;
		scrollbar-width: none;
	}

	.partner-logos-scroller::-webkit-scrollbar {
		display: none;
	}

	.partner-logos-track {
		flex-direction: row;
		width: max-content;
		padding: 12px 10px;
	}

	.partner-mini-card {
		width: 220px;
		flex-shrink: 0;
	}

	.partner-mini-card.active::before {
		left: 25%;
		right: 25%;
		top: auto;
		bottom: 0;
		width: auto;
		height: 3px;
		border-radius: 4px 4px 0 0;
	}
}

@media (max-width: 640px) {
	.partners-card {
		padding: 24px;
	}
}

/* ==========================================================================
   USER CABINET & AUTHENTICATION STYLES
   ========================================================================== */
.user-cabinet {
	justify-self: end;
	position: relative;
	z-index: 101;
	padding-right: 90px;
	box-sizing: border-box;
}

.user-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10px);
	outline: none;
	padding: 0;
	box-sizing: border-box;
}

.user-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-1px);
	border-color: rgba(167, 139, 250, 0.4);
	box-shadow: 0 5px 15px rgba(167, 139, 250, 0.2);
}

.user-btn svg {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
}

.user-btn:hover svg {
	transform: scale(1.05);
}

.user-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 16px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.user-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 200px;
	background: rgba(20, 22, 26, 0.95);
	border: 1px solid rgba(167, 139, 250, 0.2);
	border-radius: 16px;
	padding: 8px;
	backdrop-filter: blur(20px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(167, 139, 250, 0.05);
	transform: translateY(10px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.user-dropdown.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.dropdown-user-info {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	margin-bottom: 4px;
}

.dropdown-username {
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dropdown-role {
	font-size: 11px;
	color: var(--accent);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-radius: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: all 0.2s ease;
}

.dropdown-item:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
}

.dropdown-item.logout-item {
	color: #f87171;
}

.dropdown-item.logout-item:hover {
	background: rgba(248, 113, 113, 0.08);
}

/* AUTH MODAL STYLES */
.pfp-auth-modal {
	background: #17181c !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
	padding: 48px 40px !important;
	border-radius: 20px !important;
	max-width: 420px !important;
}

.auth-modal-content.pfp-auth-modal .modal-close {
	top: 15px;
	right: 15px;
	color: #6b6b70;
}

.auth-modal-content.pfp-auth-modal .modal-close:hover {
	color: #fff;
}

.pfp-auth-header {
	text-align: center;
	margin-bottom: 24px;
}

.pfp-auth-title {
	font-size: 28px;
	font-weight: 800;
	color: #9d81ec;
	text-shadow: 0 0 20px rgba(157, 129, 236, 0.5);
	margin: 0;
	font-family: inherit;
	letter-spacing: -0.5px;
}

.pfp-auth-subtitle {
	color: var(--muted);
	font-size: 14px;
	margin-top: 12px;
	margin-bottom: 0;
	height: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.pfp-auth-view {
	display: none;
	flex-direction: column;
	gap: 16px;
	animation: fadeInPane 0.3s ease-out;
}

.pfp-auth-view.active {
	display: flex;
}

@keyframes fadeInPane {
	from {
		opacity: 0;
		transform: translateY(5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Main screen buttons */
.pfp-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border-radius: 24px;
	background: #8b71d9;
	color: #fff;
	border: none;
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	letter-spacing: 0.5px;
}

.pfp-auth-btn:hover {
	transform: translateY(-2px);
	background: #9d81ec;
	box-shadow: 0 5px 15px rgba(139, 113, 217, 0.3);
}

.pfp-discord-btn {
	background: #8b71d9;
}

.pfp-auth-beta-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.2);
	color: #f59e0b;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 12px;
	margin-top: 14px;
	text-align: center;
	letter-spacing: 0.2px;
}

.pfp-locked-btn {
	position: relative;
	padding-right: 44px !important;
}

.pfp-locked-btn .pfp-lock-icon {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
}

.pfp-locked-btn:hover .pfp-lock-icon {
	color: #fff;
}

/* Inputs */
.pfp-input-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: 12px;
}

.pfp-input {
	width: 100%;
	background: #202226;
	border: 1px solid rgba(255, 255, 255, 0.03);
	padding: 18px 45px 18px 20px;
	border-radius: 24px;
	color: #fff;
	font-size: 15px;
	outline: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.pfp-input::placeholder {
	color: #6b6b70;
}

.pfp-input:focus {
	border-color: #4a4d56;
	background: #25282c;
}

.pfp-eye-btn {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #6b6b70;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s;
}

.pfp-eye-btn:hover {
	color: #fff;
}

/* Actions (Back & Submit) */
.pfp-auth-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.pfp-back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px 14px 14px;
	border-radius: 24px;
	background: #2a2d32;
	color: #fff;
	border: none;
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 0 0 auto;
}

.pfp-back-btn:hover {
	background: #36393f;
}

.pfp-back-icon-wrap {
	background: #52555a;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.pfp-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	border-radius: 24px;
	background: #8b71d9;
	color: #fff;
	border: none;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pfp-submit-btn:hover {
	background: #9d81ec;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(139, 113, 217, 0.3);
}

.auth-error-msg {
	color: #f87171;
	font-size: 13px;
	margin-top: -10px;
	margin-bottom: 12px;
	display: none;
}

.auth-success-msg {
	color: #34d399;
	font-size: 13px;
	margin-top: -10px;
	margin-bottom: 12px;
	display: none;
}

/* PLAYER CABINET STYLES */
.cabinet-modal-content {
	max-width: 500px !important;
	background: rgba(16, 18, 22, 0.96) !important;
	border: 1px solid rgba(167, 139, 250, 0.25) !important;
	box-shadow: 0 0 50px rgba(124, 58, 237, 0.15) !important;
}

.cabinet-grid {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px;
	align-items: center;
}

@media (max-width: 500px) {
	.cabinet-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

.cabinet-skin-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	padding: 16px;
	height: 200px;
	position: relative;
}

.cabinet-skin-img {
	height: 140px;
	object-fit: contain;
	image-rendering: pixelated;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.cabinet-skin-label {
	font-size: 11px;
	color: var(--muted);
	margin-top: 10px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.cabinet-info-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cabinet-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-bottom: 12px;
}

.cabinet-username {
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 4px 0;
	letter-spacing: -0.5px;
}

.cabinet-rank {
	display: inline-flex;
	padding: 4px 10px;
	background: rgba(167, 139, 250, 0.15);
	border: 1px solid var(--accent);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cabinet-stats-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cabinet-stat-item {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}

.cabinet-stat-item .label {
	color: var(--muted);
	font-weight: 500;
}

.cabinet-stat-item .val {
	color: #fff;
	font-weight: 700;
}

/* ADMIN PANEL CABINET STYLES */
@keyframes fadeInPane {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.admin-user-row {
	transition: all 0.2s ease;
}

.admin-user-row:hover {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(16, 185, 129, 0.2) !important;
}

.admin-user-balance:focus,
.admin-user-playtime:focus {
	border-color: #10b981 !important;
	box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   PFP NEXUS GRID — HIGH-TECH CYBER TEAM CONSOLE
   ========================================================================== */
.team-section {
	margin-top: 20px;
	padding-bottom: 80px;
	position: relative;
	width: 100%;
}

.nexus-console-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 28px;
	width: 100%;
	min-height: 580px;
	align-items: stretch;
}

@media (max-width: 1080px) {
	.nexus-console-layout {
		grid-template-columns: 1fr;
	}
}

/* Left Panel: Constellation Orbit Map Container */
.nexus-map-panel {
	position: relative;
	width: 100%;
	min-height: 580px;
	background: radial-gradient(circle at 50% 50%, rgba(26, 28, 42, 0.75) 0%, rgba(10, 11, 16, 0.95) 100%);
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 32px;
	overflow: hidden;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* SVG Laser Beam Canvas Overlay */
.constellation-svg-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.constellation-svg-lines line {
	stroke: rgba(167, 139, 250, 0.22);
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
	transition: stroke 0.4s ease, stroke-width 0.4s ease;
}

.constellation-svg-lines line.active-line {
	stroke: rgba(167, 139, 250, 0.9);
	stroke-width: 2.5;
	stroke-dasharray: none;
	filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.9));
}

/* Central PFP Core Nexus */
.constellation-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(167, 139, 250, 0.25) 0%, rgba(124, 58, 237, 0.05) 70%);
	border: 1.5px solid rgba(167, 139, 250, 0.4);
	box-shadow: 0 0 40px rgba(167, 139, 250, 0.35), inset 0 0 20px rgba(167, 139, 250, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
	animation: corePulse 4s infinite ease-in-out;
}

@keyframes corePulse {

	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		box-shadow: 0 0 40px rgba(167, 139, 250, 0.35);
	}

	50% {
		transform: translate(-50%, -50%) scale(1.06);
		box-shadow: 0 0 65px rgba(167, 139, 250, 0.55);
	}
}

.constellation-core-logo {
	width: 38px;
	height: auto;
	margin-bottom: 3px;
	filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.6));
}

.constellation-core-title {
	font-size: 10.5px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Star Nodes */
.star-node {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(20, 22, 28, 0.85);
	border: 1.5px solid rgba(167, 139, 250, 0.3);
	padding: 3px;
	cursor: pointer;
	z-index: 5;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.star-node img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
}

.star-node:hover,
.star-node.active {
	transform: scale(1.3);
	border-color: var(--accent);
	box-shadow: 0 0 35px rgba(167, 139, 250, 0.7), 0 0 18px rgba(167, 139, 250, 0.5);
	z-index: 10;
}

.star-node-label {
	position: absolute;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11.5px;
	font-weight: 800;
	color: #ffffff;
	white-space: nowrap;
	background: rgba(14, 15, 20, 0.9);
	border: 1px solid rgba(167, 139, 250, 0.3);
	padding: 3px 10px;
	border-radius: 100px;
	pointer-events: none;
	backdrop-filter: blur(8px);
	opacity: 0.85;
	transition: opacity 0.3s ease, border-color 0.3s ease;
}

.star-node:hover .star-node-label,
.star-node.active .star-node-label {
	opacity: 1;
	border-color: var(--accent);
	box-shadow: 0 0 12px rgba(167, 139, 250, 0.3);
}

/* Right Panel: Cyber Dossier Holographic Terminal */
.nexus-dossier-terminal {
	background: linear-gradient(180deg, rgba(22, 24, 34, 0.85) 0%, rgba(12, 13, 18, 0.95) 100%);
	border: 1px solid rgba(167, 139, 250, 0.3);
	border-radius: 32px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nexus-dossier-terminal::before {
	content: '';
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	filter: blur(30px);
}

/* Top Console Header */
.terminal-top-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	z-index: 2;
}

.terminal-status-tag {
	font-size: 11px;
	font-weight: 700;
	color: #4ade80;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(74, 222, 128, 0.1);
	border: 1px solid rgba(74, 222, 128, 0.25);
	padding: 4px 12px;
	border-radius: 100px;
}

.terminal-role-pill {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 100px;
	background: rgba(167, 139, 250, 0.12);
	border: 1px solid rgba(167, 139, 250, 0.3);
	color: #c084fc;
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.15);
}

/* Center Stage Skin Render */
.terminal-skin-stage {
	position: relative;
	width: 100%;
	height: 240px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 12px;
	z-index: 2;
}

.terminal-char-img {
	height: 230px;
	width: auto;
	object-fit: contain;
	image-rendering: pixelated;
	filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.8));
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}

.terminal-char-img:hover {
	transform: scale(1.06) translateY(-4px);
	filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(167, 139, 250, 0.4));
}

.terminal-char-shadow {
	position: absolute;
	bottom: 2px;
	width: 110px;
	height: 14px;
	background: rgba(0, 0, 0, 0.65);
	border-radius: 50%;
	filter: blur(5px);
}

/* Terminal Info */
.terminal-info-box {
	text-align: center;
	width: 100%;
	z-index: 2;
}

.terminal-name {
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -0.4px;
	margin-bottom: 6px;
}

.terminal-bio {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.45;
	margin-bottom: 18px;
	min-height: 38px;
}

/* Action Controls & Navigation */
.terminal-action-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	z-index: 2;
}

.terminal-nav-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.terminal-nav-btn:hover {
	background: rgba(167, 139, 250, 0.15);
	border-color: var(--accent);
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.3);
	transform: scale(1.1);
}

.terminal-copy-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(124, 58, 237, 0.25) 100%);
	border: 1px solid var(--accent);
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(167, 139, 250, 0.2);
}

.terminal-copy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(167, 139, 250, 0.4);
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.3) 0%, rgba(124, 58, 237, 0.35) 100%);
}

/* Toast Copy Notification */
.copy-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(50px);
	background: linear-gradient(135deg, rgba(20, 22, 28, 0.95) 0%, rgba(10, 11, 14, 0.95) 100%);
	border: 1px solid var(--accent);
	color: #ffffff;
	padding: 12px 24px;
	border-radius: 100px;
	font-size: 13.5px;
	font-weight: 700;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(167, 139, 250, 0.3);
	backdrop-filter: blur(12px);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	display: flex;
	align-items: center;
	gap: 8px;
}

.copy-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── PFP Tabs System ── */
.pfp-tabs-container {
	margin-top: 10px;
	margin-bottom: 24px;
}

.pfp-tabs-headers {
	display: flex;
	gap: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-bottom: 14px;
	margin-bottom: 20px;
}

.pfp-tab-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	padding: 8px 18px;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pfp-tab-btn:hover {
	color: #fff;
	background: rgba(167, 139, 250, 0.08);
	border-color: rgba(167, 139, 250, 0.2);
}

.pfp-tab-btn.active {
	color: #fff;
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
	border-color: var(--accent);
	box-shadow: 0 4px 15px rgba(167, 139, 250, 0.15);
}

.pfp-tab-btn.active svg {
	color: var(--accent);
}

.pfp-tabs-content {
	position: relative;
	min-height: 140px;
}

.pfp-tab-panel {
	display: none;
	animation: tabFadeIn 0.4s ease forwards;
}

.pfp-tab-panel.active {
	display: block;
}

.pfp-tab-panel p {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 18px;
}

.pfp-tab-panel p:last-child {
	margin-bottom: 0;
}

.pfp-tab-panel strong {
	color: #ffffff;
	font-weight: 700;
}

.pfp-highlight-accent {
	color: #c4b5fd;
	font-weight: 600;
}

.pfp-welcome-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin-bottom: 16px;
}

.pfp-features-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.pfp-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 255, 255, 0.015);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 10px 14px;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pfp-feature-item:hover {
	background: rgba(167, 139, 250, 0.05);
	border-color: rgba(167, 139, 250, 0.15);
	transform: translateX(4px);
}

.pfp-feature-icon {
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(167, 139, 250, 0.1);
	border-radius: 8px;
	color: var(--accent);
	flex-shrink: 0;
}

.pfp-feature-content {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.5;
}

.pfp-feature-content strong {
	color: #fff;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pfp-tab-highlight {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	border-left: 3px solid var(--accent);
	padding-left: 14px;
	margin-bottom: 16px;
	line-height: 1.5;
	background: linear-gradient(90deg, rgba(167, 139, 250, 0.05) 0%, transparent 100%);
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ── PFP Donate Widget ── */
.pfp-donate-widget {
	background: linear-gradient(145deg, rgba(167, 139, 250, 0.15) 0%, rgba(10, 11, 14, 0.95) 100%);
	border: 1px solid rgba(167, 139, 250, 0.28);
	border-radius: 24px;
	padding: 16px 22px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(167, 139, 250, 0.08);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.pfp-donate-widget::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(167, 139, 250, 0.1) 0%, transparent 60%);
	pointer-events: none;
}

.pfp-donate-widget:hover {
	border-color: rgba(167, 139, 250, 0.48);
	box-shadow: 0 25px 50px rgba(167, 139, 250, 0.25), inset 0 0 30px rgba(167, 139, 250, 0.15);
	transform: translateY(-4px);
}

.pfp-donate-widget::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
	transform: skewX(-25deg);
	transition: 0.75s;
	pointer-events: none;
}

.pfp-donate-widget:hover::after {
	left: 150%;
	transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}


.pfp-donate-sparkle {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--accent);
	display: block;
	margin-bottom: 4px;
}

.pfp-donate-title {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
}

/* ── Glowing Mono Jar ── */
.pfp-jar-container {
	display: flex;
	align-items: center;
	gap: 20px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 16px;
	padding: 16px;
}

.pfp-mono-jar {
	position: relative;
	width: 60px;
	height: 85px;
	flex-shrink: 0;
}

.pfp-jar-lid {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 8px;
	background: linear-gradient(90deg, #555, #888, #555);
	border-radius: 4px 4px 0 0;
	z-index: 2;
}

.pfp-jar-glass {
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	height: calc(100% - 8px);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 12px 12px 18px 18px;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
	box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.pfp-jar-liquid {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 72%;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
	box-shadow: 0 0 15px rgba(167, 139, 250, 0.5);
	border-radius: 0 0 14px 14px;
}

.pfp-liquid-wave {
	position: absolute;
	top: -5px;
	left: 0;
	width: 200%;
	height: 10px;
	background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, var(--accent) 51%, var(--accent) 100%);
	background-size: 50% 100%;
	animation: jarWave 2s infinite linear;
}

@keyframes jarWave {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.pfp-jar-percent {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	z-index: 3;
}

.pfp-jar-info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pfp-info-goal-title {
	font-size: 13px;
	font-weight: 600;
	color: #e4e4e7;
}

.pfp-progress-track {
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 3px;
	overflow: hidden;
}

.pfp-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--accent-deep));
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

.pfp-goal-details {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--muted);
}

.pfp-goal-details strong {
	color: #fff;
}

.pfp-donate-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #fff;
	text-decoration: none;
	padding: 14px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3);
}

.pfp-donate-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5);
	filter: brightness(1.1);
}

/* ── 3D Arc News Carousel ── */
.news-3d-wrapper {
	position: relative;
	width: 100%;
	min-height: 460px;
	margin-top: 10px;
	padding: 30px 0;
	perspective: 1200px;
	perspective-origin: 50% 50%;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Standalone Soft Glass Arrow Buttons */
.news-arc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e4e4e7;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: all 0.3s ease;
}

.news-arc-arrow--left {
	left: 8px;
}

.news-arc-arrow--right {
	right: 8px;
}

.news-arc-arrow:hover {
	transform: translateY(-50%) scale(1.1);
	background: rgba(167, 139, 250, 0.18);
	border-color: rgba(167, 139, 250, 0.38);
	color: #fff;
	box-shadow: 0 10px 30px rgba(167, 139, 250, 0.25);
}

.news-arc-arrow:active {
	transform: translateY(-50%) scale(0.95);
}

.news-3d-stage {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	transform-style: preserve-3d;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-3d-card {
	position: absolute;
	width: 360px;
	height: 375px;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #0d0e12;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	user-select: none;
	transform-origin: center center;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.4, 1),
		opacity 0.6s cubic-bezier(0.25, 1, 0.4, 1),
		filter 0.6s cubic-bezier(0.25, 1, 0.4, 1),
		border-color 0.4s ease,
		box-shadow 0.4s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px;
}

.news-3d-card .news-card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1;
	transform: scale(1.04);
	filter: brightness(0.95) contrast(1.08);
	transition: transform 0.6s ease, filter 0.6s ease;
}

.news-3d-card.pos-center .news-card-bg {
	filter: brightness(1) contrast(1.08);
	transform: scale(1.02);
}

.news-3d-card:hover .news-card-bg {
	transform: scale(1.08);
	filter: brightness(1.1) contrast(1.1);
}

.news-3d-card .news-card-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(10, 11, 15, 0.95) 0%, rgba(10, 11, 15, 0.65) 45%, rgba(10, 11, 15, 0.15) 80%, transparent 100%);
	z-index: 2;
	pointer-events: none;
}

.news-3d-card.pos-center {
	border-color: rgba(167, 139, 250, 0.45);
	box-shadow: 0 20px 45px rgba(167, 139, 250, 0.25), 0 0 35px rgba(167, 139, 250, 0.18);
}

.news-3d-card.pos-center:hover {
	border-color: rgba(167, 139, 250, 0.7);
	box-shadow: 0 25px 55px rgba(167, 139, 250, 0.35), 0 0 45px rgba(167, 139, 250, 0.25);
}

.news-3d-card.pos-blur-left,
.news-3d-card.pos-blur-right {
	filter: blur(5px);
	opacity: 0.45;
	border-color: rgba(255, 255, 255, 0.04);
}

.news-3d-card .news-card-expanded-content {
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 4;
	opacity: 1;
	visibility: visible;
	transform: none;
	max-width: 100%;
}

@media (max-width: 900px) {
	.news-3d-wrapper {
		height: 380px;
	}

	.news-3d-card {
		width: 290px;
		height: 340px;
		padding: 20px;
	}
}

@media (max-width: 600px) {
	.news-3d-wrapper {
		height: 350px;
	}

	.news-3d-card {
		width: 240px;
		height: 310px;
		padding: 16px;
	}
}

/* ── News Accordion Gallery ── */
.news-accordion-container {
	display: flex;
	gap: 16px;
	height: 380px;
	margin-top: 20px;
	width: 100%;
}

.news-accordion-card {
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 80px;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: flex-grow 0.7s cubic-bezier(0.25, 1, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
}

.news-accordion-card.active {
	flex-grow: 3.5;
	border-color: rgba(167, 139, 250, 0.35);
	box-shadow: 0 15px 35px rgba(167, 139, 250, 0.15);
	order: -1;
}

.news-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 0;
	transform: scale(1.08);
	filter: grayscale(30%) brightness(0.6);
	transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

.news-accordion-card:hover .news-card-bg {
	transform: scale(1.12);
	filter: grayscale(15%) brightness(0.7);
}

.news-accordion-card.active .news-card-bg {
	transform: scale(1.03);
	filter: grayscale(0%) brightness(0.75);
}

.news-card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(11, 12, 14, 0.95) 0%, rgba(11, 12, 14, 0.4) 60%, rgba(11, 12, 14, 0.2) 100%);
	z-index: 1;
	transition: background 0.6s ease;
}

.news-accordion-card:not(.active) .news-card-overlay {
	background: linear-gradient(to top, rgba(11, 12, 14, 0.95) 0%, rgba(11, 12, 14, 0.6) 100%);
}

/* Collapsed Info styles */
.news-card-collapsed-info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
	/* Delayed fade-in when closing */
	padding: 20px;
}

.news-accordion-card:hover .news-card-collapsed-info {
	transform: translateY(-5px);
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-accordion-card.active .news-card-collapsed-info {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1) 0s;
	/* Immediate fade-out when opening */
}

/* Dark glass backdrop behind active card text */
.news-accordion-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(11, 12, 14, 0.85) 0%, rgba(11, 12, 14, 0.4) 60%, transparent 100%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 2;
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
}

.news-accordion-card.active::before {
	opacity: 1;
}

.news-collapsed-line {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	opacity: 0.75;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	pointer-events: none;
}

.news-collapsed-line svg {
	width: 26px;
	height: 26px;
	transition: all 0.3s cubic-bezier(0.25, 1, 0.3, 1);
	animation: tap-bounce 2.5s ease-in-out infinite;
}

@keyframes tap-bounce {

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

	50% {
		transform: translateY(3px);
	}
}

.news-accordion-card:hover .news-collapsed-line {
	transform: translate(-50%, -50%) scale(1.15);
	opacity: 1;
}

.news-accordion-card:hover .news-collapsed-line svg {
	color: #fff;
	filter: drop-shadow(0 0 6px var(--accent));
}

.news-accordion-card.active .news-collapsed-line {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Expanded Content styles */
.news-card-expanded-content {
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	z-index: 4;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: none;
	pointer-events: none;
	max-width: 340px;
}

.news-accordion-card.active .news-card-expanded-content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.3, 1) 0.25s, transform 0.6s cubic-bezier(0.25, 1, 0.3, 1) 0.25s, visibility 0s ease 0.25s;
}

.news-card-date,
.news-card-title,
.news-card-desc,
.btn-read-more-mini {
	opacity: 1;
	transform: none;
	transition: none;
}

.news-card-date {
	font-size: 11px;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	display: block;
	margin-bottom: 6px;
}

.news-card-title {
	font-size: 21px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
	line-height: 1.25;
}

.news-card-desc {
	font-size: 13px;
	color: rgba(244, 244, 245, 0.75);
	margin-bottom: 16px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.btn-read-more-mini {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	padding: 8px 20px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-read-more-mini:hover {
	background: #fff;
	color: #000;
	border-color: #fff;
}

/* Responsive Accordion */
@media (max-width: 800px) {
	.news-accordion-container {
		flex-direction: column;
		height: auto;
	}

	.news-accordion-card {
		height: 180px;
		flex: none;
		padding: 20px;
	}

	.news-accordion-card.active {
		height: 260px;
		flex: none;
	}



	.news-card-collapsed-info {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20px;
	}

	.news-collapsed-line {
		left: 50%;
		transform: translateX(-50%);
	}

	.news-card-expanded-content {
		margin-left: 0;
	}
}

/* ── Cool Section Divider ── */
.cool-section-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 30px 0;
	width: 100%;
}

.divider-line-left,
.divider-line-right {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.15) 50%, rgba(167, 139, 250, 0.4) 100%);
}

.divider-line-right {
	background: linear-gradient(90deg, rgba(167, 139, 250, 0.4) 0%, rgba(167, 139, 250, 0.15) 50%, transparent 100%);
}

.divider-center-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(167, 139, 250, 0.25);
	background: rgba(167, 139, 250, 0.04);
	border-radius: 50%;
	color: var(--accent);
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
	animation: dividerPulse 3s infinite ease-in-out;
}

@keyframes dividerPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
		border-color: rgba(167, 139, 250, 0.25);
	}

	50% {
		transform: scale(1.08);
		box-shadow: 0 0 18px rgba(167, 139, 250, 0.4);
		border-color: rgba(167, 139, 250, 0.5);
	}
}

/* ── 3D Minecraft Block Widget ── */
.pfp-main-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.pfp-player-skin-wrap {
	position: relative;
	width: 90px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	margin-top: -20px;
	perspective: 600px;
}

.pfp-skin-glow {
	position: absolute;
	width: 80px;
	height: 80px;
	background: radial-gradient(circle, rgba(167, 139, 250, 0.22) 0%, transparent 70%);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	animation: skinGlowPulse 4s infinite ease-in-out;
}

.pfp-player-skin-img {
	width: auto;
	height: 120px;
	z-index: 1;
	image-rendering: pixelated;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
	transform: perspective(600px) rotateY(15deg);
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
	animation: skinFloat 4s infinite ease-in-out;
}

@keyframes skinFloat {

	0%,
	100% {
		transform: perspective(600px) rotateY(15deg) translateY(0);
	}

	50% {
		transform: perspective(600px) rotateY(15deg) translateY(-6px);
	}
}

@keyframes skinGlowPulse {

	0%,
	100% {
		transform: scale(0.9);
		opacity: 0.7;
	}

	50% {
		transform: scale(1.15);
		opacity: 1;
	}
}

/* ── PFP Socials Widget ── */
.pfp-socials-widget {
	background: linear-gradient(145deg, rgba(167, 139, 250, 0.1) 0%, rgba(10, 11, 14, 0.9) 100%);
	border: 1px solid rgba(167, 139, 250, 0.22);
	border-radius: 24px;
	padding: 22px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(167, 139, 250, 0.05);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
	position: relative;
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
}

.pfp-socials-widget:hover {
	border-color: rgba(167, 139, 250, 0.4);
	box-shadow: 0 25px 50px rgba(167, 139, 250, 0.2), inset 0 0 30px rgba(167, 139, 250, 0.1);
	transform: translateY(-4px);
}

.pfp-socials-widget::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
	transform: skewX(-25deg);
	transition: 0.75s;
	pointer-events: none;
}

.pfp-socials-widget:hover::after {
	left: 150%;
	transition: 0.75s cubic-bezier(0.25, 1, 0.5, 1);
}

.pfp-socials-header {
	margin-bottom: 4px;
}

.pfp-socials-sparkle {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--accent);
	display: block;
	margin-bottom: 4px;
}

.pfp-socials-title {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin: 0;
}

.pfp-socials-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-grow: 1;
	justify-content: center;
}

.pfp-social-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 8px 14px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.25, 1, 0.2, 1);
}

.pfp-social-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.03);
	color: var(--muted);
	transition: all 0.3s ease;
}

.pfp-social-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pfp-social-name {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.pfp-social-link-text {
	font-size: 11px;
	color: var(--muted);
	transition: color 0.3s ease;
}

/* Individual Social Brand Colors on Hover */
.pfp-social-item.discord:hover {
	border-color: #5865F2;
	background: rgba(88, 101, 242, 0.08);
}

.pfp-social-item.discord:hover .pfp-social-icon {
	background: #5865F2;
	color: #fff;
}

.pfp-social-item.youtube:hover {
	border-color: #FF0000;
	background: rgba(255, 0, 0, 0.08);
}

.pfp-social-item.youtube:hover .pfp-social-icon {
	background: #FF0000;
	color: #fff;
}

.pfp-social-item.tiktok:hover {
	border-color: #00F2FE;
	background: rgba(0, 242, 254, 0.08);
}

.pfp-social-item.tiktok:hover .pfp-social-icon {
	background: #00F2FE;
	color: #fff;
}

.pfp-social-item.instagram:hover {
	border-color: #E1306C;
	background: rgba(225, 48, 108, 0.08);
}

.pfp-social-item.instagram:hover .pfp-social-icon {
	background: #E1306C;
	color: #fff;
}

.pfp-social-item.telegram:hover {
	border-color: #0088cc;
	background: rgba(0, 136, 204, 0.08);
}

.pfp-social-item.telegram:hover .pfp-social-icon {
	background: #0088cc;
	color: #fff;
}

.pfp-social-item:hover .pfp-social-link-text {
	color: #fff;
}

/* ── PFP Donate Section ── */
.pfp-donate-section {
	padding: 15px 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
}

.pfp-donate-container {
	max-width: 1000px;
	width: 100%;
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	align-items: center;
	gap: 20px;
}

.pfp-donate-char-column {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	perspective: 1000px;
	margin-left: -30px;
}

.pfp-donate-char-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.pfp-donate-char-canvas {
	z-index: 1;
	pointer-events: none;
}

/* Radial purple glow behind the character */
.pfp-donate-char-glow {
	position: absolute;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
	z-index: 0;
	pointer-events: none;
	filter: blur(25px);
}

.pfp-donate-char-img {
	width: 260px;
	height: auto;
	z-index: 1;
	image-rendering: pixelated;
	filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 35px rgba(167, 139, 250, 0.25));
	animation: charFloat 5s ease-in-out infinite;
	transform-style: preserve-3d;
	transition: transform 0.3s ease;
}

/* Floating animation with slight 3D rotation */
@keyframes charFloat {

	0%,
	100% {
		transform: translateY(0) rotateY(-8deg) rotateX(4deg);
	}

	50% {
		transform: translateY(-16px) rotateY(-3deg) rotateX(0deg);
	}
}

/* 3D dynamic shadow underneath the character */
.pfp-donate-char-shadow {
	width: 160px;
	height: 14px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	filter: blur(6px);
	margin-top: 15px;
	animation: shadowScale 5s ease-in-out infinite;
	z-index: 0;
}

@keyframes shadowScale {

	0%,
	100% {
		transform: scale(1);
		opacity: 0.8;
	}

	50% {
		transform: scale(0.85);
		opacity: 0.35;
	}
}

/* Responsive collapse */
@media (max-width: 900px) {
	.pfp-donate-container {
		grid-template-columns: 1fr;
		gap: 30px;
		max-width: 500px;
		padding: 0 20px;
	}

	.pfp-donate-char-column {
		margin-left: 0;
		justify-content: center;
	}

	.pfp-donate-char-img {
		width: 200px;
	}
}