:root{
	--bg:#020817;
	--card:#081223;
	--primary:#1dff81;
	--text:#fff;
	--muted:#95a2bf;
	--border:#16233a;
}

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

body{
	background:var(--bg);
	color:var(--text);
	font-family:Inter,sans-serif;
}

a{
	color:inherit;
	text-decoration:none;
}

.container{
	margin:auto;
	max-width:1400px;
	padding:0 24px;
}

.header{
	backdrop-filter:blur(18px);
	background:rgba(4,8,18,.92);
	border-bottom:1px solid var(--border);
	padding:20px 0;
	position:sticky;
	top:0;
	z-index:999;
}

.navbar{
	align-items:center;
	display:flex;
	justify-content:space-between;
}

.logo{
	color:var(--primary);
	font-size:28px;
	font-weight:800;
}

.menu{
	display:flex;
	gap:28px;
	list-style:none;
}

.nav-right{
	align-items:center;
	display:flex;
	gap:18px;
}

.btn-primary{
	background:var(--primary);
	border-radius:10px;
	color:#000;
	font-weight:700;
	padding:12px 18px;
}

.footer{
	border-top:1px solid var(--border);
	margin-top:80px;
	padding:40px 0;
}

.copyright{
	color:var(--muted);
	text-align:center;
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero{
	padding:80px 0;
}

.hero-grid{
	align-items:center;
	display:grid;
	gap:60px;
	grid-template-columns:1.1fr .9fr;
}

.hero-badge{
	background:#091528;
	border:1px solid #173053;
	border-radius:999px;
	display:inline-flex;
	font-size:14px;
	margin-bottom:24px;
	padding:10px 16px;
}

.hero-title{
	font-size:72px;
	font-weight:800;
	line-height:1.05;
	margin-bottom:24px;
}

.hero-title span{
	background:linear-gradient(
		90deg,
		#1dff81,
		#67a4ff
	);
	-webkit-background-clip:text;
	color:transparent;
}

.hero-desc{
	color:var(--muted);
	font-size:18px;
	max-width:620px;
}

.hero-search{
	display:flex;
	gap:12px;
	margin-top:32px;
}

.hero-search input{
	background:#08101d;
	border:1px solid var(--border);
	border-radius:14px;
	color:#fff;
	flex:1;
	padding:18px;
}

.hero-search button{
	background:var(--primary);
	border:none;
	border-radius:14px;
	cursor:pointer;
	font-weight:700;
	padding:18px 32px;
}

.hero-tags{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:22px;
}

.hero-tags span{
	background:#0b1525;
	border-radius:999px;
	padding:10px 14px;
}

/*
|--------------------------------------------------------------------------
| Dashboard
|--------------------------------------------------------------------------
*/

.dashboard{
	background:#071121;
	border:1px solid var(--border);
	border-radius:24px;
	padding:28px;
}

.dashboard-head{
	font-size:20px;
	font-weight:700;
	margin-bottom:24px;
}

.dashboard-stat{
	display:grid;
	gap:14px;
	grid-template-columns:repeat(3,1fr);
}

.dashboard-stat div{
	background:#0a1628;
	border-radius:14px;
	padding:18px;
}

.dashboard span{
	color:var(--muted);
	display:block;
	font-size:13px;
}

.dashboard strong{
	font-size:24px;
}

.chart{
	background:#08111e;
	border-radius:18px;
	height:260px;
	margin-top:24px;
	overflow:hidden;
	position:relative;
}

.chart-line{
	background:linear-gradient(
		90deg,
		#1dff81,
		#65a2ff
	);
	border-radius:999px;
	bottom:70px;
	height:4px;
	left:40px;
	position:absolute;
	transform:rotate(10deg);
	width:75%;
}

/*
|--------------------------------------------------------------------------
| Ads
|--------------------------------------------------------------------------
*/

.ads{
	padding-bottom:70px;
}

.ads-box{
	align-items:center;
	background:#071121;
	border:1px solid var(--border);
	border-radius:22px;
	display:flex;
	height:90px;
	justify-content:center;
}

/*
|--------------------------------------------------------------------------
| Popular Tools
|--------------------------------------------------------------------------
*/

.popular-tools{
	padding-bottom:90px;
}

.section-head{
	align-items:center;
	display:flex;
	justify-content:space-between;
	margin-bottom:28px;
}

.tools-grid{
	display:grid;
	gap:24px;
	grid-template-columns:repeat(4,1fr);
}

.tool-card{
	background:#081223;
	border:1px solid var(--border);
	border-radius:22px;
	padding:24px;
}

.tool-top{
	align-items:center;
	display:flex;
	justify-content:space-between;
	margin-bottom:20px;
}

.tool-badge{
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	padding:8px 12px;
}

.free{
	background:#0d4427;
}

.premium{
	background:#4f1b85;
}

.tool-card h3{
	margin-bottom:12px;
}

.tool-card p{
	color:var(--muted);
	margin-bottom:22px;
}

.tool-card button{
	background:var(--primary);
	border:none;
	border-radius:12px;
	cursor:pointer;
	font-weight:700;
	padding:12px 20px;
}

@media(max-width:1024px){

	.hero-grid{
		grid-template-columns:1fr;
	}

	.tools-grid{
		grid-template-columns:1fr 1fr;
	}

}

@media(max-width:768px){

	.hero-title{
		font-size:48px;
	}

	.tools-grid{
		grid-template-columns:1fr;
	}

	.hero-search{
		flex-direction:column;
	}

}