/* ==========================================================
   MEHI ERP FEATURES PAGE V3
========================================================== */

:root{

	--primary:#2563EB;
	--secondary:#06B6D4;

	--dark:#07111F;
	--dark2:#0F172A;

	--text:#475569;
	--light:#64748B;

	--border:#E2E8F0;

	--white:#FFFFFF;

}

/* ==========================================================
   GLOBAL
========================================================== */

.mehi-features-v3{

	background:#F8FAFC;

	overflow:hidden;

}

.features-container{

	max-width:1600px;

	margin:auto;

	padding-left:25px;
	padding-right:25px;

}

.section-header{

	text-align:center;

	margin-bottom:60px;

}

.section-header h2{

	font-size:44px;

	font-weight:800;

	line-height:1.15;

	color:#07111F;

	margin-bottom:15px;

}

.section-header p{

	font-size:15px;

	color:#64748B;

	max-width:650px;

	margin:auto;

	line-height:1.8;

}

/* ==========================================================
   HERO
========================================================== */

.product-showcase{

	padding:90px 0;

	background:
	linear-gradient(
		135deg,
		#06101D,
		#0A1628,
		#10213E
	);

	position:relative;

	overflow:hidden;

}

.product-showcase:before{

	content:"";

	position:absolute;

	width:850px;
	height:850px;

	right:-350px;
	top:-350px;

	border-radius:50%;

	background:
	radial-gradient(
		circle,
		rgba(37,99,235,.15),
		transparent
	);

}

.showcase-top{

	text-align:center;

	max-width:950px;

	margin:auto;

}

.showcase-label{

	display:inline-flex;

	padding:10px 18px;

	border-radius:999px;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

	color:#fff;

	font-size:13px;

	font-weight:700;

	letter-spacing:.5px;

}

.showcase-top h1{

	font-size:72px;

	line-height:1.05;

	font-weight:900;

	color:#fff;

	margin:25px 0;

}

.showcase-top p{

	font-size:18px;

	line-height:1.9;

	color:#CBD5E1;

	max-width:850px;

	margin:auto;

}

/* ==========================================================
   PLATFORM
========================================================== */

.platform-preview{

	position:relative;

	height:620px;

	margin-top:80px;

}

.preview-center{

	position:absolute;

	left:50%;
	top:50%;

	transform:
	translate(-50%,-50%);

	width:320px;
	height:320px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	flex-direction:column;

	text-align:center;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

	box-shadow:
	0 30px 80px rgba(37,99,235,.35);

}

.preview-center h2{

	font-size:42px;

	color:#fff;

	font-weight:900;

	margin-bottom:8px;

}

.preview-center span{

	color:#fff;

	font-size:14px;

	font-weight:600;

}

/* ==========================================================
   FLOATING MODULES
========================================================== */

.floating-module{

	position:absolute;

	width:220px;

	height:90px;

	border-radius:24px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-align:center;

	font-size:18px;

	font-weight:800;

	color:#fff;

	backdrop-filter:blur(20px);

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

}

.crm{

	top:0;
	left:12%;

}

.billing{

	top:12%;
	right:10%;

}

.hrms{

	left:0;
	top:50%;

	transform:
	translateY(-50%);

}

.inventory{

	right:0;
	top:50%;

	transform:
	translateY(-50%);

}

.whatsapp{

	left:14%;
	bottom:0;

}

.reports{

	right:12%;
	bottom:0;

}

/* ==========================================================
   ECOSYSTEM
========================================================== */

.ecosystem-section{

	padding:100px 0;

	background:#fff;

}

.ecosystem-grid{

	display:grid;

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

	gap:24px;

}

.ecosystem-card{

	padding:35px;

	border-radius:30px;

	background:#fff;

	border:1px solid #E2E8F0;

	position:relative;

	overflow:hidden;

	transition:.35s;

}

.ecosystem-card:hover{

	transform:translateY(-8px);

	box-shadow:
	0 25px 60px rgba(15,23,42,.08);

}

.ecosystem-card:before{

	content:"";

	position:absolute;

	top:0;
	left:0;

	width:100%;
	height:4px;

	background:
	linear-gradient(
		90deg,
		#2563EB,
		#06B6D4
	);

}

.ecosystem-card h3{

	font-size:24px;

	color:#07111F;

	margin-bottom:20px;

	font-weight:800;

}

.ecosystem-card ul{

	margin:0;
	padding:0;

	list-style:none;

}

.ecosystem-card li{

	padding:10px 0;

	font-size:14px;

	font-weight:600;

	color:#64748B;

	border-bottom:
	1px solid #F1F5F9;

}

/* ==========================================================
   JOURNEY
========================================================== */

.journey-section{

	padding:100px 0;

	background:#F8FAFC;

}

.journey-header{

	text-align:center;

	margin-bottom:70px;

}

.journey-header h2{

	font-size:44px;

	font-weight:800;

	color:#07111F;

}

.journey-line{

	display:grid;

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

	gap:20px;

}

.journey-node{

	text-align:center;

	position:relative;

}

.journey-node span{

	width:75px;
	height:75px;

	display:flex;

	align-items:center;

	justify-content:center;

	margin:auto;

	border-radius:50%;

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

	color:#fff;

	font-weight:900;

	font-size:20px;

	margin-bottom:20px;

}

.journey-node h3{

	font-size:22px;

	color:#07111F;

	margin-bottom:10px;

}

.journey-node p{

	font-size:14px;

	color:#64748B;

	line-height:1.8;

}

/* ==========================================================
   INDUSTRIES
========================================================== */

.industries-showcase{

	padding:100px 0;

	background:#fff;

}

.industry-showcase-grid{

	display:grid;

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

	gap:20px;

}

.industry-showcase-grid div{

	padding:28px;

	border-radius:24px;

	text-align:center;

	font-size:15px;

	font-weight:800;

	color:#07111F;

	background:
	linear-gradient(
		135deg,
		#F8FAFC,
		#EFF6FF
	);

	border:
	1px solid #E2E8F0;

}

/* ==========================================================
   ACTION HUB
========================================================== */

.action-hub{

	padding:100px 0;

	background:
	linear-gradient(
		135deg,
		#06101D,
		#0A1628
	);

}

.action-grid{

	display:grid;

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

	gap:20px;

}

.action-grid a{

	height:90px;

	border-radius:24px;

	text-decoration:none;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:16px;

	font-weight:800;

	color:#fff;

	background:
	rgba(255,255,255,.08);

	border:
	1px solid rgba(255,255,255,.10);

	backdrop-filter:blur(18px);

	transition:.3s;

}

.action-grid a:hover{

	transform:translateY(-5px);

	background:
	linear-gradient(
		135deg,
		#2563EB,
		#06B6D4
	);

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:1200px){

	.ecosystem-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.journey-line{

		grid-template-columns:
		1fr 1fr 1fr;

	}

	.industry-showcase-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.action-grid{

		grid-template-columns:
		1fr 1fr;

	}

}

@media(max-width:768px){

	.features-container{

		padding-left:18px;
		padding-right:18px;

	}

	.product-showcase{

		padding:55px 0;

	}

	.showcase-top h1{

		font-size:38px;

	}

	.showcase-top p{

		font-size:15px;

	}

	.platform-preview{

		height:auto;

		display:grid;

		grid-template-columns:
		1fr 1fr;

		gap:12px;

		margin-top:40px;

	}

	.preview-center{

		position:relative;

		left:auto;
		top:auto;

		transform:none;

		width:100%;
		height:140px;

		border-radius:24px;

		grid-column:
		1 / -1;

	}

	.preview-center h2{

		font-size:30px;

	}

	.floating-module{

		position:relative;

		top:auto;
		left:auto;
		right:auto;
		bottom:auto;

		transform:none !important;

		width:100%;

		height:70px;

		font-size:14px;

		border-radius:18px;

	}

	.section-header h2,
	.journey-header h2{

		font-size:30px;

	}

	.ecosystem-grid,
	.journey-line,
	.industry-showcase-grid,
	.action-grid{

		grid-template-columns:
		1fr 1fr;

		gap:12px;

	}

	.ecosystem-card{

		padding:20px;

		border-radius:20px;

	}

	.ecosystem-card h3{

		font-size:18px;

	}

	.ecosystem-card li{

		font-size:13px;

	}

	.journey-node span{

		width:55px;
		height:55px;

		font-size:15px;

	}

	.journey-node h3{

		font-size:16px;

	}

	.journey-node p{

		font-size:12px;

	}

	.industry-showcase-grid div{

		padding:16px;

		font-size:13px;

	}

	.action-grid a{

		height:60px;

		font-size:13px;

		border-radius:16px;

	}

}