:root {
	--purple: #842285;
	--purple-glow: #c084fc;
	--dark: #0f0f1a;
	--card: rgba(20, 20, 40, 0.6);
	--card-border: rgba(100, 80, 255, 0.15);
	--text: #e0e0ff;
	--text-muted: #b0b0e0;
}
h2 { font-size:3.8rem; margin-bottom: 0 }

.parallax {
	position: relative;
	height: 400px;
	padding: 0 60px;
	overflow: hidden;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.parallax::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10,10,30,0.7);
}
.parallax h2 {
	font-size: 4rem;
	z-index: 2;
	text-shadow: 0 0 40px rgba(0,0,0,0.8);
}

section { padding: 120px 0; }

.glass-card {
	background: var(--card);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 18px;
	border: 1px solid var(--card-border);
	padding: 40px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.glass-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 20px 50px rgba(167, 139, 250, 0.2);
}
.centertext .glass-card { text-align: center }
.centertext p { font-size: 22px}

.grid-3,
.grid-2 { 
	display: grid; 
	grid-template-columns: repeat(3,1fr);
	gap: 25px; 
	margin-top: 60px;
}
.grid-2 { 
	grid-template-columns: repeat(2,1fr);
}



.icon-badge {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--purple), var(--purple-glow));
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	box-shadow: 0 0 30px rgba(167,139,250,0.5);
}
.icon-badge svg {
	width: 42px;
	height: 42px;
	stroke: white;
	fill: none;
}


.btn {
	display: inline-block;
	padding: 16px 36px;
	background: linear-gradient(135deg, var(--purple), #7c3aed);
	color: white;
	border-radius: 16px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 25px rgba(0,0,0,0.4);
	transition: all 0.3s;
}
.btn:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(0,0,0,1); }

.top {
	padding: 60px 20px 100px;
}
.top p { color: #494A4A; margin-bottom: 30px }


.largetext { font-size: 1.4rem; }


.demolinks{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	padding: 0 20px 20px;
	background: #111722;
}

.demolinks a {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 16;  
	background-size: cover;
	background-position: center top;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	transition: transform .3s ease;
}

.demolinks h3:after {
	font: 300 28px/1 'Font Awesome 5 Pro';
	content: '\f08e';
	margin-left: 15px
}


.demolinks a:hover {
	transform: translateY(-6px);
}


.demolinks div {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 20px;
	background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
}


@media only screen and (max-width: 980px)  {
	.grid-3 { grid-template-columns: repeat(2,1fr); }
	h2, .parallax h2 { font-size:2.8rem; }
	.largpara { height: 600px }
	.demolinks{ grid-template-columns: repeat(2, 1fr); }
}
@media only screen and  (max-width: 480px)  {
	.grid-3,
	.grid-2 { grid-template-columns: repeat(1,1fr); }
	.parallax { padding: 0 30px }
	.largpara { height: 700px }
}