/* =========================================================
   CRYPTOBIT — dark navy / gold crypto landing page
   ========================================================= */

:root {
	--navy: #12121c;
	--navy-2: #171724;
	--black: #0c0c14;
	--black-2: #141420;
	--gold: #f6b93b;
	--gold-2: #ffcd57;
	--text-muted: #a8a8bb;
	--light-bg: #f7f7fb;
	--radius: 14px;
	--ff-heading: 'Rubik', sans-serif;
	--ff-body: 'Poppins', sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--ff-body);
	color: #e9e9f2;
	background: var(--black);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-heading);
}

a {
	text-decoration: none;
}

p {
	color: var(--text-muted);
	line-height: 1.8;
}

.text-accent {
	color: var(--gold);
}

/* ---------- Preloader ---------- */
#preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .5s ease, visibility .5s ease;
}

	#preloader.hide {
		opacity: 0;
		visibility: hidden;
	}

.loader-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}

.loader-logo {
	width: 80px;
	height: auto;
	animation: pulseLogo 1.6s ease-in-out infinite;
	filter: drop-shadow(0 6px 18px rgba(246,185,59,.4));
}

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

	50% {
		transform: scale(1.08);
		opacity: .75;
	}
}

.coin-loader {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid rgba(246,185,59,.2);
	border-top-color: var(--gold);
	animation: spin 0.9s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Buttons ---------- */
.btn-accent {
	background: linear-gradient(135deg,var(--gold),var(--gold-2));
	color: #161616;
	font-weight: 600;
	border: none;
	padding: .75rem 1.7rem;
	border-radius: 8px;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 8px 20px -8px rgba(246,185,59,.6);
}

	.btn-accent:hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 26px -10px rgba(246,185,59,.75);
		color: #161616;
	}

/* ---------- Eyebrow labels ---------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .8rem;
	font-weight: 600;
	margin-bottom: .6rem;
}

	.eyebrow .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--gold);
		box-shadow: 0 0 0 4px rgba(246,185,59,.2);
	}

.section-title {
	font-weight: 700;
	font-size: clamp(1.7rem,3vw,2.5rem);
	margin-bottom: 1rem;
	color: #fff;
}

.section-desc {
	max-width: 600px;
}

/* ---------- Layout sections ---------- */
.section {
	padding: 5.5rem 0;
	position: relative;
}

.section-light {
	background: var(--light-bg);
	color: #161622;
}

	.section-light p {
		color: #5c5c70;
	}

	.section-light .section-title {
		color: #161622;
	}

.section-navy {
	background: radial-gradient(circle at 20% 20%, var(--navy-2), var(--navy) 70%);
}

.section-black {
	background: var(--black);
}

.section-black-alt {
	background: var(--black-2);
}

/* ---------- Navbar ---------- */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: .6rem 0;
	transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}

	#header.scrolled {
		background: rgba(12,12,20,.9);
		backdrop-filter: blur(10px);
		box-shadow: 0 4px 24px rgba(0,0,0,.35);
		padding: .2rem 0;
	}

.navbar-brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: #fff !important;
	font-weight: 700;
	font-size: 1.4rem;
}

.logo-coin {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg,var(--gold),var(--gold-2));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #161616;
	font-size: 1.2rem;
}

.brand-logo {
	height: 46px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(246,185,59,.35));
}

.brand-logo-footer {
	height: 64px;
}

.brand-text {
	font-family: var(--ff-heading);
	font-weight: 800;
	letter-spacing: .5px;
	font-size: 1.25rem;
	color: #fff;
}

.footer .brand-text {
	font-size: 1.4rem;
}

.nav-link {
	color: #dcdce6 !important;
	font-weight: 500;
	padding: .5rem 1rem !important;
	position: relative;
}

	.nav-link.active, .nav-link:hover {
		color: var(--gold) !important;
	}

.btn-search {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--gold);
	color: #161616 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: .5rem;
}

.navbar-toggler {
	border: none;
	color: #fff;
	font-size: 1.8rem;
	background: transparent;
}

	.navbar-toggler:focus {
		box-shadow: none;
	}

/* ---------- HERO ---------- */
.hero {
	position: relative;
	padding-top: 9rem;
	padding-bottom: 5rem;
	background: radial-gradient(circle at 85% 20%, rgba(246,185,59,.12), transparent 45%), radial-gradient(circle at 10% 90%, rgba(246,185,59,.08), transparent 40%), linear-gradient(160deg,var(--navy) 0%, var(--black) 100%);
	overflow: hidden;
}

.min-vh-90 {
	min-height: 80vh;
}

.eyebrow {
}

.hero-title {
	color: #fff;
	line-height: 1.15;
}

.hero-sub {
	margin: .2rem 0 1.2rem;
}

.outline-text {
	font-family: var(--ff-heading);
	font-weight: 800;
	font-size: clamp(2rem,4vw,3rem);
	color: transparent;
	-webkit-text-stroke: 1.5px var(--gold);
	position: relative;
}

	.outline-text::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -8px;
		width: 70%;
		height: 2px;
		background: var(--gold);
		opacity: .6;
	}

.hero-desc {
	max-width: 460px;
}

.hero-art {
	position: relative;
	height: 460px;
}

.coin-glow {
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(246,185,59,.35), transparent 70%);
	top: 40px;
	right: 20px;
	filter: blur(10px);
}

.crypto-coin {
	position: absolute;
	right: 60px;
	top: 70px;
	width: 190px;
	height: 190px;
}

.coin-face {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(from 180deg, #d99a1e, #ffe9a8, #d99a1e, #ffcd57, #d99a1e);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4.5rem;
	color: #8a5c05;
	box-shadow: 0 25px 50px -15px rgba(0,0,0,.6), inset 0 0 25px rgba(255,255,255,.35);
	border: 6px solid #e6b23c;
}

.coin-ring {
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 2px dashed rgba(246,185,59,.4);
	animation: spin 14s linear infinite;
}

.coin-coin {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(135deg,#e6b23c,#8a5c05);
	box-shadow: 0 15px 30px -10px rgba(0,0,0,.6);
}

.coin-2 {
	width: 70px;
	height: 70px;
	right: 230px;
	top: 250px;
}

.coin-3 {
	width: 46px;
	height: 46px;
	right: 40px;
	top: 270px;
}

.phone-mock {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 190px;
	height: 340px;
	background: #1a1a28;
	border-radius: 26px;
	padding: 16px 12px;
	border: 6px solid #262638;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}

.phone-notch {
	width: 50px;
	height: 6px;
	border-radius: 4px;
	background: #33334a;
	margin: 0 auto 14px;
}

.phone-screen {
	background: linear-gradient(160deg,#22223a,#191926);
	border-radius: 14px;
	padding: 14px;
	height: calc(100% - 26px);
}

.ps-label {
	font-size: .7rem;
	color: #9c9cb5;
	margin-bottom: .2rem;
}

.ps-amount {
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
}

	.ps-amount span {
		font-size: .75rem;
		color: var(--gold);
	}

.ps-chart svg {
	width: 100%;
	height: 60px;
	margin-top: 1rem;
}

.ps-chart polyline {
	fill: none;
	stroke: var(--gold);
	stroke-width: 2;
}

.btn-mini {
	display: inline-block;
	background: var(--gold);
	color: #161616;
	font-size: .72rem;
	font-weight: 600;
	padding: .35rem .8rem;
	border-radius: 6px;
	margin-top: .6rem;
}

.pair-row {
	display: flex;
	justify-content: space-between;
	font-size: .78rem;
	color: #c7c7db;
}

	.pair-row .grn {
		color: #5ddc9a;
	}

.badge-float {
	position: absolute;
	background: #1c1c2c;
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	padding: .5rem .9rem;
	border-radius: 30px;
	display: flex;
	align-items: center;
	gap: .4rem;
	border: 1px solid rgba(246,185,59,.3);
	box-shadow: 0 10px 20px -8px rgba(0,0,0,.6);
}

.badge-locked {
	top: 60px;
	left: 0;
	color: var(--gold);
}

.badge-guaranteed {
	top: 150px;
	right: 0;
	color: #5ddc9a;
}

.spark {
	position: absolute;
	color: var(--gold);
	font-size: 1.1rem;
	opacity: .8;
}

.spark-1 {
	top: 20px;
	left: 40%;
	animation: twinkle 2.4s ease-in-out infinite;
}

.spark-2 {
	bottom: 60px;
	right: 120px;
	animation: twinkle 3s ease-in-out infinite .5s;
}

@keyframes twinkle {
	0%,100% {
		opacity: .2;
		transform: scale(.8);
	}

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

.float-anim {
	animation: floaty 4s ease-in-out infinite;
}

.float-anim-slow {
	animation: floaty 6s ease-in-out infinite;
}

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

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

/* ---------- FEATURES ---------- */
.feature-card {
	background: #fff;
	border-radius: var(--radius);
	padding: 2.4rem 1.6rem;
	box-shadow: 0 15px 35px -12px rgba(20,20,40,.12);
	transition: transform .3s ease, box-shadow .3s ease;
	height: 100%;
}

	.feature-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 25px 45px -14px rgba(20,20,40,.2);
	}

.feature-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg,var(--gold),var(--gold-2));
	color: #161616;
	font-size: 1.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.2rem;
}

.feature-card h5 {
	font-weight: 700;
	margin-bottom: .5rem;
}

.know-more {
	color: #5c5c70;
}

	.know-more a {
		color: var(--gold);
		font-weight: 600;
	}

/* ---------- TRANSACTIONS ---------- */
.tx-art {
	position: relative;
	height: 380px;
}

.tx-ring {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 2px dashed rgba(246,185,59,.35);
	animation: spin 20s linear infinite;
}

.tx-coin {
	position: absolute;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(from 180deg,#d99a1e,#ffe9a8,#d99a1e);
	box-shadow: 0 25px 45px -15px rgba(0,0,0,.6);
	color: #8a5c05;
}

.tx-coin-1 {
	width: 190px;
	height: 190px;
	font-size: 4rem;
	top: 60px;
	left: 60px;
	animation: floaty 5s ease-in-out infinite;
}

.tx-coin-2 {
	width: 110px;
	height: 110px;
	font-size: 2.4rem;
	bottom: 20px;
	right: 40px;
	animation: floaty 6s ease-in-out infinite .4s;
}

.tx-stat {
	position: absolute;
	left: 10px;
	bottom: 0;
	background: var(--gold);
	color: #161616;
	padding: 1rem 1.4rem;
	border-radius: 10px;
	box-shadow: 0 15px 30px -10px rgba(0,0,0,.5);
}

	.tx-stat h3 {
		font-weight: 800;
		margin: 0;
	}

	.tx-stat p {
		margin: 0;
		color: #3a2c05;
		font-size: .8rem;
	}

.tx-list-item {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	padding: .9rem 1.1rem;
	color: #e9e9f2;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: .6rem;
	transition: .25s;
}

	.tx-list-item:hover {
		border-color: var(--gold);
		color: var(--gold);
		transform: translateX(4px);
	}

	.tx-list-item i {
		color: var(--gold);
		font-size: 1.2rem;
	}

/* ---------- ABOUT ---------- */
.about-card {
	background: linear-gradient(160deg,#1c1c2c,#131320);
	border: 1px solid rgba(246,185,59,.15);
	border-radius: var(--radius);
	padding: 2.6rem;
}

	.about-card h3 {
		color: #fff;
		font-weight: 700;
		margin-bottom: 1rem;
	}

.about-art {
	position: relative;
	height: 400px;
}

.about-phone {
	margin: 0 auto;
	position: relative;
	left: 20%;
}

.about-coin {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(135deg,#e6b23c,#8a5c05);
}

	.about-coin.coin-1 {
		width: 80px;
		height: 80px;
		left: 0;
		top: 40px;
	}

	.about-coin.coin-2 {
		width: 50px;
		height: 50px;
		right: 20px;
		bottom: 40px;
	}

.about-spark {
	position: absolute;
	color: var(--gold);
	font-size: 1.4rem;
	opacity: .7;
}

	.about-spark.s1 {
		top: 10px;
		right: 60px;
		animation: twinkle 3s infinite;
	}

	.about-spark.s2 {
		bottom: 10px;
		left: 30px;
		animation: twinkle 3.4s infinite .3s;
	}

/* ---------- PROCESS ---------- */
.process-row {
	position: relative;
}

.process-card {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: var(--radius);
	padding: 2rem 1.2rem;
	height: 100%;
	transition: transform .3s, border-color .3s;
	position: relative;
}

	.process-card:hover {
		transform: translateY(-8px);
		border-color: var(--gold);
	}

.process-num {
	position: absolute;
	top: 14px;
	right: 18px;
	color: rgba(246,185,59,.3);
	font-size: 1.6rem;
	font-weight: 800;
}

.process-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	margin: 0 auto 1rem;
	background: linear-gradient(135deg,var(--gold),var(--gold-2));
	color: #161616;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
}

.process-card h6 {
	color: #fff;
	font-weight: 700;
	margin-bottom: .4rem;
}

.process-card p {
	font-size: .85rem;
	margin: 0;
}

/* ---------- TESTIMONIALS ---------- */
.stat-box {
	background: linear-gradient(160deg,#1c1c2c,#131320);
	border: 1px solid rgba(246,185,59,.15);
	border-radius: var(--radius);
	padding: 2.2rem;
	text-align: center;
}

	.stat-box h3 {
		display: inline;
		color: var(--gold);
		font-size: 2.6rem;
		font-weight: 800;
	}

	.stat-box > span {
		color: var(--gold);
		font-size: 2.6rem;
		font-weight: 800;
	}

	.stat-box p {
		margin-top: .6rem;
	}

.testi-slider {
	position: relative;
	min-height: 170px;
}

.testi-card {
	display: none;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--radius);
	padding: 1.8rem;
}

	.testi-card.active {
		display: block;
		animation: fadeIn .5s ease;
	}

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

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

.testi-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: .9rem;
}

	.testi-head img {
		width: 52px;
		height: 52px;
		border-radius: 50%;
		border: 2px solid var(--gold);
	}

	.testi-head h6 {
		margin: 0;
		color: #fff;
		font-weight: 700;
	}

.stars {
	color: var(--gold);
	font-size: .8rem;
	margin-left: .4rem;
}

.testi-dots {
	display: flex;
	gap: .5rem;
	margin-top: 1rem;
}

	.testi-dots span {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: rgba(255,255,255,.2);
		cursor: pointer;
		transition: .25s;
	}

		.testi-dots span.active {
			background: var(--gold);
			width: 22px;
			border-radius: 6px;
		}

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item {
	background: transparent;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px !important;
	margin-bottom: .8rem;
	overflow: hidden;
}

.faq-accordion .accordion-button {
	background: rgba(255,255,255,.03);
	color: #fff;
	font-weight: 600;
	box-shadow: none;
}

	.faq-accordion .accordion-button:not(.collapsed) {
		background: var(--gold);
		color: #161616;
	}

	.faq-accordion .accordion-button::after {
		filter: invert(1);
	}

	.faq-accordion .accordion-button:not(.collapsed)::after {
		filter: none;
	}

.faq-accordion .accordion-body {
	background: rgba(255,255,255,.02);
	color: var(--text-muted);
}

.faq-art {
	position: relative;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-mark {
	font-size: 11rem;
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 2px var(--gold);
	animation: floaty 5s ease-in-out infinite;
}

.faq-spark {
	position: absolute;
	font-size: 1.8rem;
	color: var(--gold);
	opacity: .75;
}

	.faq-spark.s1 {
		top: 20px;
		left: 30px;
		animation: floaty 4s infinite;
	}

	.faq-spark.s2 {
		bottom: 30px;
		left: 60px;
		animation: floaty 5s infinite .4s;
	}

	.faq-spark.s3 {
		top: 40px;
		right: 30px;
		animation: floaty 4.5s infinite .2s;
	}

	.faq-spark.s4 {
		bottom: 20px;
		right: 70px;
		animation: floaty 5.5s infinite .6s;
	}

/* ---------- SUBSCRIBE ---------- */
.subscribe-section {
	background: radial-gradient(circle at 50% 0%, rgba(246,185,59,.12), transparent 60%), linear-gradient(160deg,var(--navy-2),var(--navy));
}

.subscribe-form {
	display: flex;
	max-width: 480px;
	gap: .6rem;
	flex-wrap: wrap;
	justify-content: center;
}

	.subscribe-form input {
		flex: 1;
		min-width: 240px;
		padding: .85rem 1.2rem;
		border-radius: 8px;
		border: 1px solid rgba(255,255,255,.15);
		background: rgba(255,255,255,.05);
		color: #fff;
	}

		.subscribe-form input::placeholder {
			color: #a8a8bb;
		}

		.subscribe-form input:focus {
			outline: none;
			border-color: var(--gold);
		}

/* ---------- CONTACT FORM ---------- */
.contact-form {
	max-width: 900px;
	margin: 0 auto;
}

	.contact-form .form-control {
		background: #fff;
		border: 1px solid #e3e3ee;
		border-radius: 8px;
		padding: .85rem 1.1rem;
	}

		.contact-form .form-control:focus {
			box-shadow: 0 0 0 3px rgba(246,185,59,.25);
			border-color: var(--gold);
		}

/* ---------- FOOTER ---------- */
.footer {
	background: #08080e;
	padding: 4.5rem 0 0;
}

	.footer p {
		color: #8f8fa5;
	}

	.footer h6 {
		color: #fff;
		font-weight: 700;
		margin-bottom: 1.1rem;
	}

	.footer ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

		.footer ul li {
			margin-bottom: .6rem;
		}

		.footer ul a {
			color: #8f8fa5;
			transition: .2s;
		}

			.footer ul a:hover {
				color: var(--gold);
			}

.footer-address li {
	display: flex;
	gap: .6rem;
	color: #8f8fa5;
	align-items: flex-start;
}

.footer-address i {
	color: var(--gold);
	margin-top: .2rem;
}

.footer-social {
	display: flex;
	gap: .7rem;
	margin-top: 1.2rem;
}

	.footer-social a {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		border: 1px solid rgba(255,255,255,.15);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		transition: .25s;
	}

		.footer-social a:hover {
			background: var(--gold);
			border-color: var(--gold);
			color: #161616;
		}

.footer hr {
	border-color: rgba(255,255,255,.08);
	margin-top: 2.5rem;
}

.footer .row.py-3 p, .footer .row.py-3 a {
	color: #8f8fa5;
	font-size: .88rem;
}

	.footer .row.py-3 a:hover {
		color: var(--gold);
	}

/* ---------- BACK TO TOP ---------- */
.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--gold);
	color: #161616;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: .3s;
	z-index: 900;
	box-shadow: 0 10px 25px -8px rgba(0,0,0,.5);
}

	.back-to-top.show {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

/* ---------- TOKENOMICS ---------- */
.tokenomics-card {
	background: linear-gradient(160deg,#1c1c2c,#131320);
	border: 1px solid rgba(246,185,59,.18);
	border-radius: var(--radius);
	padding: 1.8rem 1.2rem;
	text-align: center;
	height: 100%;
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

	.tokenomics-card:hover {
		transform: translateY(-6px);
		border-color: var(--gold);
		box-shadow: 0 20px 40px -18px rgba(246,185,59,.35);
	}

.tokenomics-pct {
	font-family: var(--ff-heading);
	font-weight: 800;
	font-size: 2.1rem;
	color: var(--gold);
	margin-bottom: .6rem;
}

.tokenomics-card h6 {
	color: #fff;
	font-weight: 700;
	margin-bottom: .3rem;
}

.tokenomics-card p {
	margin: 0;
	font-size: .88rem;
	color: var(--text-muted);
}

.tokenomics-card-total {
	background: linear-gradient(135deg,var(--gold),var(--gold-2));
	border-color: transparent;
}

	.tokenomics-card-total .tokenomics-pct,
	.tokenomics-card-total h6 {
		color: #161616;
	}

	.tokenomics-card-total p {
		color: #3a2c05;
	}

/* ---------- ROADMAP ---------- */
.roadmap-timeline {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding-left: 2.2rem;
}

	.roadmap-timeline::before {
		content: "";
		position: absolute;
		left: 9px;
		top: 6px;
		bottom: 6px;
		width: 2px;
		background: linear-gradient(180deg, var(--gold), rgba(246,185,59,.15));
	}

.roadmap-item {
	position: relative;
	padding-bottom: 2.4rem;
}

	.roadmap-item:last-child {
		padding-bottom: 0;
	}

	.roadmap-item::before {
		content: "";
		position: absolute;
		left: -2.2rem;
		top: 6px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: var(--gold);
		box-shadow: 0 0 0 5px rgba(246,185,59,.18);
	}

.roadmap-year {
	display: inline-block;
	color: var(--gold);
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: .85rem;
	margin-bottom: .6rem;
}

.roadmap-card {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius);
	padding: 1.4rem 1.6rem;
	transition: .25s;
}

	.roadmap-card:hover {
		border-color: var(--gold);
		transform: translateX(4px);
	}

	.roadmap-card h6 {
		color: #fff;
		font-weight: 700;
		margin-bottom: .7rem;
	}

	.roadmap-card ul {
		margin: 0;
		padding-left: 1.1rem;
	}

		.roadmap-card ul li {
			color: var(--text-muted);
			margin-bottom: .35rem;
			font-size: .92rem;
		}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.hero {
		padding-top: 7rem;
	}

	.hero-art {
		height: 380px;
		margin-top: 2rem;
	}

	.about-phone {
		left: 15%;
	}

	#navMenu {
		background: var(--navy);
		margin-top: 1rem;
		border-radius: 10px;
		padding: 1rem;
	}
}

@media (max-width: 767px) {
	.hero-art {
		height: 340px;
		transform: scale(.85);
	}

	.tx-art {
		height: 300px;
	}

	.section {
		padding: 3.5rem 0;
	}

	.faq-mark {
		font-size: 7rem;
	}

	.roadmap-timeline {
		padding-left: 1.6rem;
	}

	.roadmap-item::before {
		left: -1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}