/* ==========================================================
   MEHI ERP PRICING PAGE 2027 PREMIUM
========================================================== */

:root{

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

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

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

	--border:#E2E8F0;

	--white:#FFFFFF;

}

.mehi-pricing-page{

	background:#F8FAFC;

	overflow:hidden;

}

.pricing-container{

	max-width:1550px;

	margin:auto;

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

}

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

.pricing-hero{

	padding:90px 0 70px;

	background:
	linear-gradient(
		135deg,
		#06101D,
		#0D1B33,
		#13284A
	);

	position:relative;

	overflow:hidden;

}

.pricing-hero:before{

	content:"";

	position:absolute;

	right:-250px;
	top:-250px;

	width:700px;
	height:700px;

	border-radius:50%;

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

}

.hero-content{

	max-width:950px;

	margin:auto;

	text-align:center;

	position:relative;

	z-index:2;

}

.pricing-label{

	display:inline-flex;

	padding:10px 18px;

	border-radius:999px;

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

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

	color:#fff;

	font-size:13px;

	font-weight:700;

	letter-spacing:.6px;

}

.hero-content h1{

	font-size:68px;

	font-weight:900;

	line-height:1.05;

	color:#fff;

	margin:25px 0;

}

.hero-content p{

	max-width:780px;

	margin:auto;

	font-size:17px;

	line-height:1.9;

	color:#CBD5E1;

}

/* ==========================================================
   PRICING PLANS
========================================================== */

.pricing-selector{

	padding:90px 0;

	margin-top:-40px;

	position:relative;

	z-index:5;

}

.selector-grid{

	display:grid;

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

	gap:25px;

}

.selector-card{

	background:#fff;

	padding:35px;

	border-radius:32px;

	border:1px solid #E2E8F0;

	position:relative;

	transition:.35s;

}

.selector-card:hover{

	transform:translateY(-8px);

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

}

.selector-icon{

	width:75px;
	height:75px;

	display:flex;

	align-items:center;
	justify-content:center;

	border-radius:24px;

	font-size:32px;

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

	margin-bottom:25px;

}

.selector-card h3{

	font-size:28px;

	font-weight:800;

	color:#07111F;

	margin-bottom:10px;

}

.selector-card p{

	font-size:14px;

	line-height:1.8;

	color:#64748B;

	margin-bottom:20px;

}

.price-box{

	padding:18px;

	border-radius:18px;

	text-align:center;

	font-size:18px;

	font-weight:800;

	color:#2563EB;

	background:
	#F8FAFC;

	margin-bottom:20px;

}

.selector-card ul{

	list-style:none;

	padding:0;

	margin:0 0 25px;

}

.selector-card li{

	padding:12px 0;

	font-size:14px;

	color:#475569;

	border-bottom:
	1px solid #F1F5F9;

}

.selector-card a{

	height:55px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:16px;

	font-size:14px;

	font-weight:800;

	color:#fff;

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

}

.featured-plan{

	border:
	2px solid #2563EB;

}

.popular-tag{

	position:absolute;

	top:-14px;
	right:25px;

	padding:8px 16px;

	border-radius:999px;

	font-size:12px;

	font-weight:800;

	color:#fff;

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

}

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

.pricing-modules{

	padding:90px 0;

	background:#fff;

}

.section-title{

	text-align:center;

	margin-bottom:50px;

}

.section-title h2{

	font-size:44px;

	font-weight:800;

	color:#07111F;

	margin-bottom:12px;

}

.section-title p{

	font-size:15px;

	color:#64748B;

}

.module-grid{

	display:grid;

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

	gap:18px;

}

.module-item{

	padding:24px;

	text-align:center;

	border-radius:22px;

	font-size:15px;

	font-weight:700;

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

	border:
	1px solid #E2E8F0;

}

/* ==========================================================
   EXPLAINER
========================================================== */

.pricing-explainer{

	padding:100px 0;

	background:#F8FAFC;

}

.explainer-layout{

	display:grid;

	grid-template-columns:
	1fr
	550px;

	gap:40px;

	align-items:center;

}

.explainer-left h2{

	font-size:48px;

	font-weight:800;

	line-height:1.15;

	color:#07111F;

	margin-bottom:20px;

}

.explainer-left p{

	font-size:16px;

	line-height:2;

	color:#64748B;

}

.explainer-right{

	display:grid;

	grid-template-columns:
	1fr 1fr;

	gap:18px;

}

.explainer-card{

	padding:30px;

	border-radius:22px;

	text-align:center;

	font-size:15px;

	font-weight:800;

	background:#fff;

	border:1px solid #E2E8F0;

}

/* ==========================================================
   COMPARISON TABLE
========================================================== */

.comparison-section{

	padding:100px 0;

	background:#fff;

}

.comparison-table{

	border-radius:28px;

	overflow:hidden;

	border:1px solid #E2E8F0;

	background:#fff;

}

.comparison-row{

	display:grid;

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

}

.comparison-row div{

	padding:22px;

	border-bottom:
	1px solid #E2E8F0;

	text-align:center;

	font-size:14px;

}

.comparison-row div:first-child{

	text-align:left;

	font-weight:700;

}

.comparison-row.heading{

	background:
	linear-gradient(
		135deg,
		#07111F,
		#0F172A
	);

}

.comparison-row.heading div{

	color:#fff;

	font-weight:800;

}

/* ==========================================================
   ACTIONS
========================================================== */

.pricing-actions{

	padding:100px 0;

	background:
	linear-gradient(
		135deg,
		#07111F,
		#0F172A
	);

}

.pricing-actions-grid{

	display:grid;

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

	gap:20px;

}

.pricing-actions-grid a{

	height:85px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:22px;

	font-size:15px;

	font-weight:800;

	color:#fff;

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

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

	backdrop-filter:blur(20px);

}

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

@media(max-width:1200px){

	.selector-grid{

		grid-template-columns:
		1fr;

	}

	.module-grid{

		grid-template-columns:
		1fr 1fr;

	}

	.explainer-layout{

		grid-template-columns:
		1fr;

	}

	.pricing-actions-grid{

		grid-template-columns:
		1fr 1fr;

	}

}

@media(max-width:768px){

	.pricing-container{

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

	}

	.pricing-hero{

		padding:55px 0;

	}

	.hero-content h1{

		font-size:38px;

	}

	.hero-content p{

		font-size:15px;

	}

	.selector-card{

		padding:22px;

		border-radius:22px;

	}

	.selector-icon{

		width:60px;
		height:60px;

		font-size:24px;

		border-radius:18px;

	}

	.selector-card h3{

		font-size:22px;

	}

	.module-grid{

		grid-template-columns:
		1fr 1fr;

		gap:12px;

	}

	.module-item{

		padding:16px;

		font-size:13px;

	}

	.section-title h2{

		font-size:30px;

	}

	.explainer-left h2{

		font-size:32px;

	}

	.explainer-right{

		grid-template-columns:
		1fr 1fr;

		gap:12px;

	}

	.explainer-card{

		padding:18px;

		font-size:13px;

	}

	.comparison-table{

		overflow-x:auto;

	}

	.comparison-row{

		min-width:700px;

	}

	.pricing-actions-grid{

		grid-template-columns:
		1fr 1fr;

		gap:12px;

	}

	.pricing-actions-grid a{

		height:60px;

		font-size:13px;

		border-radius:16px;

	}

}




.selector-card,
.module-item,
.explainer-card,
.comparison-row,
.pricing-actions-grid a{

	opacity:0;

	transform:
	translateY(25px);

	transition:
	all .6s ease;

}

.pricing-visible{

	opacity:1 !important;

	transform:
	translateY(0) !important;

}

.pricing-mobile-bar{

	position:fixed;

	left:10px;

	right:10px;

	bottom:12px;

	z-index:9999;

	display:grid;

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

	gap:8px;

	padding:8px;

	border-radius:18px;

	background:
	rgba(7,17,31,.96);

	backdrop-filter:
	blur(18px);

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

}

.pricing-mobile-bar a{

	height:48px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-decoration:none;

	border-radius:12px;

	font-size:13px;

	font-weight:800;

	color:#fff;

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

}

@media(min-width:769px){

	.pricing-mobile-bar{

		display:none;

	}

}