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

html, body {
  overflow-x: hidden;
}

body {
  max-width: 100%;
}

body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Electrolize", sans-serif;

	/* Sticky-footer layout */
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	/* Background behavior */
	background-image: url("body.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	/* full width, fixed height */
	background-attachment: scroll;
	background-color: #101010;
}


.container {
	display: flex;
	flex-direction: column;
	max-width: 92rem;
	width: 100%;
	margin: 0 auto;
	flex: 1;
	/* push footer to the bottom */
}


.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 2.5rem;
	opacity: 0;
	animation: slideInTop 0.8s ease-out forwards;
}

.headermenu,
.buttons {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.header img {
	width: auto;
}

.headermenu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.92rem;
    /* padding: 0.4rem 0.9rem; */
    border-radius: 6px;
    transition: all 0.25s ease;
    backdrop-filter: blur(4px);
	padding: 0.6rem 1.1rem;
	border: solid 1px rgba(255, 255, 255, .2);
	background: linear-gradient(0deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
}

.headermenu i {
	margin-right: .3rem;
}

.headermenu .active {
	color: #2BE271;
	font-weight: 600;
	text-shadow: 0 5px 20px #2BE271 !important;
	border: solid 2px #2be27131;
	background: linear-gradient(0deg, #2be2713f, #2be2711c);
	box-shadow: 0 5px 15px #2BE27130;
	opacity: 1;
}

.headermenu a:hover {
	opacity: 1;
	transform: translateY(-4px);
	box-shadow: 0 5px 15px rgba(255, 255, 255, .15);
	text-shadow: 0 5px 20px #ffffff79;
}

.headermenu .active:hover {
	box-shadow: 0 5px 15px #2be27152;
}

/* Discord Button */

.discordbtn {
	display: flex;
	background-color: rgba(255, 255, 255, .05);
	width: 34px;
	height: 34px;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	color: rgba(255, 255, 255, .9) !important;
	border-radius: 6px;
	border: solid 1px rgba(255, 255, 255, .2);
	box-shadow: 0 10px 20px rgba(255, 255, 255, .1);
	transition: .2s;
}

.discordbtn:hover {
	background-color: #5662F6;
	cursor: pointer;
	transform: translateY(-2px);
	box-shadow: 0 5px 20px #5662F6;
}

.discordbtn i {
	color: white !important;
	scale: 1 !important;
}

/* Sign In Button */

.signinbtn {
	display: flex;
	background: linear-gradient(0deg, #2be2713f, #2be2711c);
	width: 95px;
	height: 34px;
	font-size: 12px;
	justify-content: center;
	align-items: center;
	color: #2be271;
	font-weight: 600;
	border-radius: 6px;
	box-shadow: 0 5px 15px #2BE27130;
	text-shadow: 0 5px 20px #2BE271 !important;
	border: solid 2px #2be27131;
	transition: .2s;
}

.signinbtn i {
	margin-left: .3rem;
	font-size: 10px;
	transition: .2s;
}

.signinbtn:hover {
	background: linear-gradient(0deg, #3eff883f, #2be2711c);
	cursor: pointer;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px #2be27166 !important;
	color: #2be271 !important;
	border: solid 2px #2be27148;
	/* text-decoration: underline; */
}

.signinbtn:hover i {
	transform: translateX(4px);
}

/* Currency Button */

.currencybtn {
	display: flex;
	background-color: rgba(255, 255, 255, .05);
	width: 64px;
	height: 34px;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	border-radius: 6px;
	border: solid 1px rgba(255, 255, 255, .2);
	box-shadow: 0 10px 20px rgba(255, 255, 255, .1);
	transition: .2s;
}

.currencybtn i {
	margin-left: .3rem;
	font-size: 10px;
}

.currencybtn:hover {
	box-shadow: 0 10px 20px rgba(255, 255, 255, .2);
	cursor: pointer;
	transform: translateY(2px);
	background-color: rgba(255, 255, 255, .1);
}

/* Main Page */

.main {
	display: flex;
	margin-top: 7rem;
	justify-content: space-between;
}

/* Big Text */

.bigtext {
	color: white;
	font-size: 55px;
	font-weight: 700;
	line-height: 1;
	max-width: 600px;
}

.smalltext {
	color: rgba(255, 255, 255, .8);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.2;
	max-width: 600px;
	margin-top: 1rem;
}

/* Resource Button Main */

.resourcebtn {
	display: flex;
	margin-top: 2rem;
	width: 251px;
	height: 56px;
	letter-spacing: .05rem;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	transition: .2s;
	color: #2BE271;
	font-weight: 600;
	text-shadow: 0 5px 20px #2BE271 !important;
	border: solid 2px #2be27131;
	background: linear-gradient(0deg, #2be2713f, #2be2711c);
	box-shadow: 0 5px 15px #2BE27130;
}

.resourcebtn i {
	margin-right: .5rem;
	font-size: 14px;
	transition: .2s;
}

.resourcebtn:hover {
	cursor: pointer;
	font-size: 0;
	box-shadow: 0 5px 15px #2be27152;
}

.resourcebtn:hover i {
	margin-left: 1.2rem;
}

/* Main Image Web */

.webimg {
	display: flex;
	margin-top: -5rem;
	opacity: 0;
	animation: slideInRight 0.8s ease-out forwards;
}

.projectinfo {
	display: flex;
	margin-top: 2rem;
	justify-content: space-between;
}

@keyframes infobar-fadeup {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}

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

.infobar:nth-child(1) {
	animation-delay: 0.2s;
}

.infobar:nth-child(2) {
	animation-delay: 0.4s;
}

.infobar:nth-child(3) {
	animation-delay: 0.6s;
}

.infobar:nth-child(4) {
	animation-delay: 0.8s;
}

.reviewbar:nth-child(1) {
	animation-delay: 0.2s;
}

.reviewbar:nth-child(2) {
	animation-delay: 0.4s;
}

.reviewbar:nth-child(3) {
	animation-delay: 0.6s;
}

.reviewbar:nth-child(4) {
	animation-delay: 0.8s;
}

.infobar {
	display: flex;
	width: 351px;
	height: 217px;
	background: linear-gradient(0deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0));
	border-radius: 14px;
	border: solid 1px rgba(255, 255, 255, .05);
	backdrop-filter: blur(30px);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	transition: .2s;
	opacity: 0;
	transform: translateY(40px);
	animation: infobar-fadeup 0.6s ease-out forwards;
}

.infobar:hover {
	border: solid 1px #2be27173;
	box-shadow: 0 5px 15px #2BE27130;
	cursor: pointer;
}

.infobar:hover i {
	color: #2be271;
	/* rotate: 10deg; */
	font-size: 0px;
	margin-top: -.5rem;
}

.infobar i {
	color: #2be271;
	font-size: 65px;
	transition: .2s;
}

.infobarname {
	color: white;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .05rem;
}

.infobartext {
	color: rgba(255, 255, 255, .7);
	font-size: 13px;
	font-weight: 200;
	text-align: center;
	max-width: 15rem;
}

@keyframes slideInLeft {
	0% {
		opacity: 0;
		transform: translateX(-80px);
	}

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

@keyframes slideInRight {
	0% {
		opacity: 0;
		transform: translateX(80px);
	}

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

@keyframes slideInTop {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}

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

.bigtext,
.smalltext,
.resourcebtn {
	opacity: 0;
	animation: slideInLeft 0.8s ease-out forwards;
}

.bigtext {
	animation-delay: 0.2s;
}

.smalltext {
	animation-delay: 0.4s;
}

.resourcebtn {
	animation-delay: 0.6s;
}

.webimg {
	animation-delay: .6s;
}

.reviewheader {
	animation-delay: 1s !important;
}


/* Responsive Design */

@media (max-width: 600px) {
	.container {
		display: flex;
		flex-direction: column;
		max-width: 92rem;
		width: 100%;
		margin: 0 auto;
	}

	.headermenu {
		/* display: none; */
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

	.bigtext {
		font-size: 32px;
		text-align: center;
	}

	.smalltext {
		font-size: 12px;
		text-align: center;
		max-width: 20rem;
	}

	.textmain {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		margin-top: -3rem;
	}

	.imgmain {
		display: none;
	}

	.projectinfo {
		display: flex;
		margin-top: 4rem;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2rem;
	}

	.footerinfotext {
		display: none !important;
	}

	.footerlogo {
		justify-content: space-around !important;
	}

	.footerbar {
		display: none !important;
	}

	.footer {
		padding-bottom: 0rem !important;
	}

	.faq {
		width: 90% !important;
	}
}

/* =========================
   Tablet responsive (portrait + landscape)
   ========================= */
@media (max-width: 1024px) and (min-width: 601px) {

	/* Container padding & spacing */
	.container {
		padding: 0 1rem;
	}

	.header {
		margin-top: 1.5rem;
	}

	/* Top section: stack text & image with comfortable gap */
	.main {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		margin-top: 4rem;
	}

	.bigtext {
		font-size: 42px;
		max-width: 90%;
		text-align: center;
	}

	.smalltext {
		font-size: 14px;
		max-width: 36rem;
		text-align: center;
	}

	.textmain {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.imgmain {
		display: none;
	}

	.webimg {
		margin-top: 0;
		max-width: 82%;
		height: auto;
	}

	/* Info bars: turn into a 2-column grid, fluid width */
	.projectinfo {
		display: grid;
		grid-template-columns: repeat(2, minmax(260px, 1fr));
		gap: 1rem;
		align-items: stretch;
		justify-items: center;
	}

	.infobar {
		width: 100%;
		max-width: 520px;
		/* stretch nicely but not too wide */
		height: auto;
		/* let content flow */
		padding: 1.25rem 1rem;
	}

	.infobar i {
		font-size: 56px;
	}

	.infobartext {
		max-width: 28rem;
		font-size: 13px;
	}

	/* Reviews grid/cards: reduce width so more fit per row if needed */
	.resources {
		gap: 0.75rem;
	}

	.reviewbar {
		width: 300px;
	}

	.reviewimg {
		width: 92%;
		height: auto;
	}

	/* FAQ width & spacing */
	.faq {
		max-width: 92%;
	}

	.faq-item {
		transform: none;
		/* avoid too much slide on medium screens */
	}

	/* Footer spacing */
	.footer {
		padding-bottom: 2rem;
	}
}

/* =========================
   Large tablets / small laptops (tighten slightly)
   ========================= */
@media (max-width: 1200px) and (min-width: 1025px) {
	.container {
		padding: 0 1.25rem;
	}

	.projectinfo {
		gap: 1rem;
	}

	.reviewbar {
		width: 320px;
	}
}

/* =========================
   Extra small tablets / big phones (optional bridge)
   ========================= */
@media (max-width: 768px) and (min-width: 601px) {
	.bigtext {
		font-size: 36px;
	}

	.smalltext {
		font-size: 13px;
	}

	.reviewbar {
		width: 280px;
	}

	.infobar i {
		font-size: 48px;
	}
}


/* Desktop hover only */
@media (hover: hover) and (pointer: fine) {
	.signinbtn:hover {
		transform: translateY(-2px);
		box-shadow: 0 5px 20px #2be271;
		color: #fff;
	}

	.signinbtn:hover i {
		transform: translateX(4px);
	}
}

/* Touch devices: press effect */
@media (hover: none) and (pointer: coarse) {

	.signinbtn:active,
	.signinbtn.is-tapped {
		transform: translateY(-2px);
		box-shadow: 0 5px 20px #2be271;
		color: #fff;
	}

	.signinbtn:active i,
	.signinbtn.is-tapped i {
		transform: translateX(4px);
	}
}

/* Reviews */

.reviews {
	display: flex;
	margin-top: 7rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.reviewheader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	opacity: 0;
	animation: slideInTop 0.8s ease-out forwards;
}

.reviewstars {
	color: #2be271;
	font-size: 20px;
	margin-top: 1rem;
}

.reviewssmallname {
	color: #2be271;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.reviewsname {
	color: white;
	font-size: 25px;
}

.reviewimg {
	border-radius: 8px;
}

.reviewbar {
	display: flex;
	width: 351px;
	height: auto;
	background-color: rgba(255, 255, 255, .01);
	border-radius: 14px;
	backdrop-filter: blur(30px);
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	padding-top: 8px;
	padding-bottom: 8px;
	gap: 1rem;
	border: solid 1px rgba(255, 255, 255, .05);
	transition: .2s;
}

.resourcedescription {
	display: flex;
	width: 90%;
	justify-content: space-between;
	align-items: center;
	/* margin-top: 1rem; */
}

.resourcename {
	color: white;
	font-size: 15px;
	font-weight: 600;
}

.resourceprice {
	color: #2be271;
	font-size: 15px;
	font-weight: 600;
}

.addtocartbtn {
	display: flex;
	border: solid 1px rgba(255, 255, 255, .2);
	background: linear-gradient(0deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
	width: 95%;
	height: 40px;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	transition: .2s;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	color: white
}

.addtocartbtn i {
	margin-right: .5rem;
	font-size: 12px;
	transition: .2s;
}

.addtocartbtn:hover {
	background: linear-gradient(0deg, #2be27164, #2be2711c);
	transform: translateY(-2px);
	box-shadow: 0 5px 20px orangea3;
	color: #2be271;
	font-size: 0px;
	border-color: #2be2715e;
	text-shadow: 0 5px 15px #2be271;
	box-shadow: 0 5px  15px #2be2711e;
}

.nonavailable {
	background: rgba(255, 255, 255, 0.175);
	cursor: default;
	box-shadow: none;
}

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

.footer {
	display: flex;
	margin-top: 7rem;
	width: 100%;
	height: 100px;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	border: solid 1px transparent;
	transition: .2s;
	padding-top: 9rem;
	padding-bottom: 3rem;
	margin-top: auto;
	/* stick to page end */
}


.footerinfotext {
	display: flex;
	color: rgba(255, 255, 255, .2);
	font-size: 10px;
	max-width: 600px;
	margin-top: .5rem;
	line-height: 1rem;
}

.footerlogo {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .5rem;
	justify-content: space-between;
}

.footersocials {
	display: flex;
	gap: 1rem;
}

.footersocials i {
	color: rgba(255, 255, 255, .5);
	font-size: 18px;
	transition: .2s;
}

.copyright {
	color: rgba(255, 255, 255, .5);
	font-size: 12px;
	text-align: center;
}

.fa-discord:hover {
	color: #5662F6;
	scale: 1.2;
}

.fa-youtube:hover {
	color: #ff1919;
	scale: 1.2;
}

.fa-instagram:hover {
	color: #ff0090;
	scale: 1.2;
}

.footerbar {
	display: flex;
	width: 100%;
	height: 20px;
	background-color: rgba(255, 255, 255, 1);
	padding: .8rem;
	color: rgba(0, 0, 0, 0.785);
	font-size: 11px;
}

/* Loader wrapper */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0B0B0B;
	/* match your site background */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.spinner {
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-top: 2px solid #2be271;
	border-radius: 50%;
	width: 65px;
	height: 65px;
	animation: spin 0.8s linear infinite;
}

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

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

.fade-out {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.line {
	display: flex;
	width: 100%;
	height: 2px;
	background: radial-gradient(#ffffff, #ffffff89, #ffffff00, #ffffff00);
	margin-top: 5rem;
}

.faq {
	margin-top: 5rem;
	max-width: 800px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.faq-title {
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1rem;
}

.faq-item {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	opacity: 0;
	transform: translateX(60px);
	animation: slideInRight 0.6s ease-out forwards;
}

.faq-item:nth-child(2) {
	animation-delay: 0.7s;
}

.faq-item:nth-child(3) {
	animation-delay: 0.8s;
}

.faq-item:nth-child(4) {
	animation-delay: .9s;
}

.faq-item:nth-child(5) {
	animation-delay: 1s;
}

.faq-item:nth-child(6) {
	animation-delay: 1.1s;
}

.faq-question {
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 1rem 1.2rem;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: .2s;
}

.faq-question i {
	transition: transform 0.3s ease, color 0.3s ease;
	color: rgba(255, 255, 255, .3);
	font-size: 13px;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	line-height: 1.5;
	padding: 0 1.2rem;
	transition: all 0.3s ease;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	transition: .2s;
}

/* Active (open) state */
.faq-item.active .faq-answer {
	max-height: 200px;
	padding: 1rem 1.2rem;
	transition: .2s;
}

.faq-item.active .faq-question i {
	transform: rotate(225deg);
	color: #2be271;
}

.faq-item.active .faq-question {
	color: #2be271;
	transition: .2s;
}

.loginpage {
	display: flex;
	flex-direction: column;
	max-width: 22rem;
	width: 100%;
	margin: 0 auto;
	margin-top: 5rem;
}

.errorbox {
	background: #f3434340;
	border: 1px solid #ff5454;
	color: #ff6565;
	padding: .75rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: 12px;
}

.inputlabel {
	display: flex;
	color: #ccc;
	font-size: .8rem;
	margin-top: 1rem;
	margin-bottom: -.2rem;
}

input {
	display: flex;
	background-color: rgba(255, 255, 255, .05);
	padding: .8rem .9rem;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: rgba(255, 255, 255, .9) !important;
	border-radius: 6px;
	border: solid 1px rgba(255, 255, 255, .2);
	box-shadow: 0 10px 20px rgba(255, 255, 255, .1);
	transition: .2s;
	font-family: "Montserrat", sans-serif;
	backdrop-filter: blur(5px);
}

input::placeholder {
	color: rgba(255, 255, 255, .5);
	font-size: 12px;
}

input:focus {
	outline: none;
	border: solid 1px #2be271;
	box-shadow: 0 5px 20px #2be27150 !important;
	background-color: rgba(255, 255, 255, .07) !important;
}

input:hover {
	box-shadow: 0 10px 20px rgba(255, 255, 255, .2);
	background-color: rgba(255, 255, 255, .1);
}

.radiogroup {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: .5rem;
}

.radiogroup label {
	display: flex;
	flex-direction: row;
	gap: .3rem;
	color: #ccc;
	font-size: .9rem;
}

input[type="radio"] {
	accent-color: #2be271;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	cursor: pointer;
}

.switchtext {
	font-size: 12px;
	color: #ccc;
	margin-top: 1rem;
	text-align: center;
	width: 100%;
}

.switchtext a {
	color: #2be271;
	text-decoration: none;
	font-weight: 600;
}

.switchtext a:hover {
	text-decoration: underline;
}

.loginpageheader {
	color: #ccc;
	font-size: 13px;
	font-weight: 400;
	margin-top: .5rem;
	align-self: center;
}

.logologin {
	width: 150px;
	height: auto;
	margin-bottom: 0rem;
	align-self: center;
}

.signinbtnloginpage {
	display: flex;
	color: #2BE271;
	font-weight: 600;
	text-shadow: 0 5px 20px #2BE271 !important;
	border: solid 2px #2be27131;
	background: linear-gradient(0deg, #2be2713f, #2be2711c);
	width: 100%;
	height: 40px;
	font-size: 13px;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	transition: .2s;
	margin-top: 0rem;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	gap: 0rem;
	outline: solid 2px transparent;
}

.signinbtnloginpage i {
	margin-left: .3rem;
	font-size: 10px;
	transition: .2s;
}

.signinbtnloginpage:hover {
	cursor: pointer;
	transform: translateY(-2px);
	outline: solid 4px #2be2711b;
	gap: .5rem;
}

.signinbtnloginpage:active {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px #2BE271;
}

.signinbtnloginpage {
	text-decoration: none !important;
}

.signinbtnloginpage:hover {
	text-decoration: none !important;
}

/* Page-specific helpers (keeps your main CSS clean) */
.page-hero {
	margin-top: 6rem;
	text-align: center;
	color: #fff;
	opacity: 0;
	animation: slideInTop .8s ease-out forwards;
}

.page-hero h1 {
	font-size: 35px;
	margin: 0;
}

.page-hero p {
	color: rgba(255, 255, 255, .75);
	margin-top: .75rem;
    font-size: 13px;
}

.refunds-wrap {
	max-width: 860px;
	width: 100%;
	margin: 2rem auto 0;
	display: grid;
	gap: 1rem;
}

.card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 4px;
	padding: 1.25rem 1.25rem;
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, .9);
	opacity: 0;
	transform: translateY(20px);
	animation: infobar-fadeup .6s ease-out forwards;
}

.card h3 {
	margin: 0 0 .5rem 0;
	color: #fff;
	font-size: 18px;
	display: flex;
    font-weight: 500;
	align-items: center;
	gap: .5rem;
}

.card p,
.card li {
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
	line-height: 1.6;
    font-weight: 300;
}

.card ul {
	margin: .25rem 0 0 1rem;
	padding: 0;
}

.badge-note {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #2BE271;
	background: #2be27114;
	border: 1px solid #2be2714e;
	padding: .22rem .5rem;
	border-radius: 4px;
	text-transform: uppercase;
}

.callout {
	border-left: 3px solid #2BE271;
	padding-left: .9rem;
}

.discord-link {
	color: #2BE271;
	text-decoration: none;
	letter-spacing: .05rem;
	font-weight: 600;
}

.discord-link:hover {
	text-decoration: underline;
}

.muted {
	color: rgba(255, 255, 255, .65);
	font-size: 13px;
}

/* Hamburger button (hidden on desktop) */
/* Hamburger button */
.mobile-toggle {
  display: none;         /* shown only on mobile via media query */
  width: 40px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  cursor: pointer;

  /* 🔽 make the 3 bars stack vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mobile-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.95);
  border-radius: 2px;
}

/* Overlay behind the drawer */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 999;
}

/* Slide-in drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 78%;
  max-width: 340px;
  background: rgba(16,16,16,.9);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255,255,255,.08);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-weight: 600;
}
.mobile-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.9);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  padding: .5rem;
  gap: .25rem;
}
.mobile-menu__links a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .8rem;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  border: 1px solid transparent;
  transition: .2s;
}
.mobile-menu__links a i { font-size: 14px; }
.mobile-menu__links a:hover {
  border-color: #2be27158;
  box-shadow: 0 6px 18px #2be27129;
  background-color: #2be2710e;
  color: #2BE271 !important;
  color: #fff;
}
.mobile-menu__links .active {
  color: #2BE271;
  border-color: #2be27158;
  text-shadow: 0 5px 20px #2be27170;
  background-color: #2be2710e;
  font-weight: 600;
}
.mobile-menu__links hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: .5rem 0;
}

/* Open states */
.mobile-menu.is-open { transform: translateX(0); }
.menu-overlay.show { opacity: 1; }

/* Prevent body scroll when menu open */
body.noscroll { overflow: hidden; }

/* Mobile behavior: hide desktop menu, show hamburger */
@media (max-width: 600px) {
  .headermenu { display: none; }
  .mobile-toggle { display: flex; } /* show on mobile */
  .refunds-wrap {
		max-width: 360px;
		width: 100%;
		margin: 2rem auto 0;
		display: grid;
		gap: 1rem;
	}
}