/*
=========================================
HOMEPAGE V2 PROFESSIONAL UI
=========================================
*/

.wmai-homepage{
	max-width:1400px;
	margin:0 auto;
	padding:20px;
}

/*
=========================================
Hero
=========================================
*/

.wmai-hero{

	background:
	linear-gradient(
		135deg,
		#0f172a,
		#1e3a8a
	);

	border-radius:28px;

	padding:100px 60px;

	text-align:center;

	color:#fff;

	margin-bottom:50px;

	box-shadow:
	0 20px 50px
	rgba(0,0,0,.15);

}

.wmai-hero h1{

	font-size:56px;

	font-weight:800;

	line-height:1.1;

	margin-bottom:20px;

	color:#fff;

}

.wmai-hero p{

	font-size:20px;

	line-height:1.7;

	max-width:850px;

	margin:0 auto 35px;

	color:#cbd5e1;

}

/*
=========================================
Stats
=========================================
*/

.wmai-stats{

	display:grid;

	grid-template-columns:
	repeat(
		4,
		1fr
	);

	gap:25px;

	margin:50px 0;

}

.wmai-stat{

	background:#fff;

	padding:35px;

	border-radius:20px;

	text-align:center;

	box-shadow:
	0 5px 20px
	rgba(0,0,0,.06);

	transition:.3s;

}

.wmai-stat:hover{

	transform:
	translateY(-4px);

}

.wmai-stat span{

	display:block;

	font-size:42px;

	font-weight:800;

	color:#2563eb;

	margin-bottom:10px;

}

.wmai-stat p{

	margin:0;

	font-size:15px;

	color:#6b7280;

	font-weight:600;

}

/*
=========================================
Quick Actions
=========================================
*/

.wmai-actions{

	display:grid;

	grid-template-columns:
	repeat(
		4,
		1fr
	);

	gap:20px;

	margin-bottom:60px;

}

.wmai-action{

	background:#fff;

	padding:24px;

	border-radius:18px;

	text-align:center;

	text-decoration:none;

	font-size:17px;

	font-weight:700;

	color:#111827;

	box-shadow:
	0 4px 18px
	rgba(0,0,0,.06);

	transition:.3s;

}

.wmai-action:hover{

	transform:
	translateY(-4px);

	background:#2563eb;

	color:#fff;

}

/*
=========================================
Sections
=========================================
*/

.wmai-home-section{

	margin:80px 0;

}

.wmai-home-section h2{

	font-size:34px;

	font-weight:800;

	margin-bottom:25px;

	color:#111827;

}

/*
=========================================
Device Grid
=========================================
*/

.wmai-device-grid{

	display:grid;

	grid-template-columns:
	repeat(
		auto-fill,
		minmax(
			260px,
			1fr
		)
	);

	gap:25px;

}

/*
=========================================
Device Card
=========================================
*/

.wmai-device-card{

	background:#fff;

	border-radius:22px;

	padding:20px;

	box-shadow:
	0 5px 20px
	rgba(0,0,0,.05);

	transition:.3s;

	text-align:center;

}

.wmai-device-card:hover{

	transform:
	translateY(-5px);

	box-shadow:
	0 15px 40px
	rgba(0,0,0,.10);

}

.wmai-device-card img{

	width:100%;

	height:260px;

	object-fit:contain;

	margin-bottom:15px;

}

.wmai-device-card h3{

	font-size:18px;

	font-weight:700;

	margin-bottom:12px;

}

.wmai-device-card h3 a{

	color:#111827;

	text-decoration:none;

}

.wmai-device-card h3 a:hover{

	color:#2563eb;

}

/*
=========================================
Score Badge
=========================================
*/

.wmai-score-badge{

	display:inline-block;

	padding:8px 16px;

	border-radius:999px;

	background:#eff6ff;

	color:#2563eb;

	font-size:13px;

	font-weight:700;

}

/*
=========================================
Brands
=========================================
*/

.wmai-brand-grid{

	display:grid;

	grid-template-columns:
	repeat(
		auto-fill,
		minmax(
			180px,
			1fr
		)
	);

	gap:20px;

}

.wmai-brand-card{

	display:block;

	background:#fff;

	padding:25px;

	text-align:center;

	border-radius:18px;

	text-decoration:none;

	font-weight:700;

	color:#111827;

	box-shadow:
	0 4px 16px
	rgba(0,0,0,.05);

	transition:.3s;

}

.wmai-brand-card:hover{

	background:#2563eb;

	color:#fff;

	transform:
	translateY(-4px);

}

/*
=========================================
CTA
=========================================
*/

.wmai-cta{

	margin-top:80px;

	background:
	linear-gradient(
		135deg,
		#111827,
		#1e293b
	);

	padding:90px 50px;

	border-radius:28px;

	text-align:center;

	color:#fff;

}

.wmai-cta h2{

	font-size:42px;

	font-weight:800;

	margin-bottom:20px;

	color:#fff;

}

.wmai-cta p{

	font-size:18px;

	max-width:800px;

	margin:0 auto;

	color:#cbd5e1;

}

/*
=========================================
Mobile
=========================================
*/

@media(max-width:768px){

	.wmai-hero{

		padding:70px 25px;

	}

	.wmai-hero h1{

		font-size:38px;

	}

	.wmai-hero p{

		font-size:17px;

	}

	.wmai-stats{

		grid-template-columns:1fr;

	}

	.wmai-actions{

		grid-template-columns:1fr;

	}

	.wmai-cta{

		padding:60px 25px;

	}

	.wmai-cta h2{

		font-size:32px;

	}

}