/* =====================================================
   ModArt Renov Framework
--------------------------------------------------------
   File        : why-us.css
   Version     : 2.0.0
   Author      : Ayhan TACAR & Atlas
===================================================== */


/* =====================================================
   SECTION
===================================================== */

.why-us{

	position:relative;

	overflow:hidden;

	background:var(--color-surface);

}

.why-us::before{

	content:"";

	position:absolute;

	inset:0;

	pointer-events:none;

	background:
		radial-gradient(
			circle at bottom right,
			rgba(212,175,55,.06),
			transparent 50%
		),
		radial-gradient(
			circle at top left,
			rgba(212,175,55,.04),
			transparent 45%
		);

}


/* =====================================================
   GRID — 2 × 2
===================================================== */

.why-grid{

	position:relative;

	display:grid;

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

	gap:28px;

}


/* =====================================================
   CARD
===================================================== */

.why-card{

	position:relative;

	padding:40px 40px 40px 44px;

	background:var(--color-card);

	border:1px solid var(--color-border);

	border-left:3px solid transparent;

	border-radius:var(--radius-md);

	overflow:hidden;

	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);

	will-change:transform;

}

.why-card::before{

	content:"";

	position:absolute;

	top:0;

	left:0;

	width:3px;

	height:100%;

	background:var(--color-primary);

	transform:scaleY(0);

	transform-origin:bottom;

	transition:transform .4s ease;

}

.why-card:hover{

	transform:translateY(-8px);

	border-color:rgba(212,175,55,.2);

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

}

.why-card:hover::before{

	transform:scaleY(1);

}


/* =====================================================
   INNER — horizontal layout
===================================================== */

.why-card-inner{

	display:flex;

	align-items:flex-start;

	gap:24px;

	position:relative;

	z-index:1;

}


/* =====================================================
   ICON
===================================================== */

.why-icon{

	display:flex;

	align-items:center;

	justify-content:center;

	flex-shrink:0;

	width:56px;

	height:56px;

	border-radius:16px;

	background:rgba(212,175,55,.1);

	color:var(--color-primary);

	border:1px solid rgba(212,175,55,.2);

	transition:
		transform var(--transition),
		background-color var(--transition);

}

.why-icon svg{

	width:26px;

	height:26px;

}

.why-card:hover .why-icon{

	transform:scale(1.1) rotate(6deg);

	background:rgba(212,175,55,.18);

}


/* =====================================================
   CONTENT
===================================================== */

.why-content{

	flex:1;

}

.why-content h3{

	margin-bottom:10px;

	font-size:20px;

	font-weight:700;

	line-height:1.3;

}

.why-content p{

	margin-bottom:0;

	color:var(--color-text-muted);

	font-size:15px;

	line-height:1.8;

}


/* =====================================================
   DECORATIVE NUMBER
===================================================== */

.why-number{

	position:absolute;

	bottom:-10px;

	right:20px;

	font-size:96px;

	font-weight:900;

	line-height:1;

	color:rgba(212,175,55,.06);

	pointer-events:none;

	user-select:none;

	transition:color var(--transition);

}

.why-card:hover .why-number{

	color:rgba(212,175,55,.1);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:992px){

	.why-grid{

		grid-template-columns:1fr;

		gap:20px;

	}

}

@media (max-width:768px){

	.why-card{

		padding:30px 28px 30px 32px;

	}

	.why-card-inner{

		gap:18px;

	}

	.why-icon{

		width:48px;

		height:48px;

	}

	.why-content h3{

		font-size:18px;

	}

	.why-number{

		font-size:72px;

	}

}


/* =====================================================
   PERFORMANCE / A11Y
===================================================== */

.why-card,
.why-icon{

	backface-visibility:hidden;

}

@media (prefers-reduced-motion:reduce){

	.why-card,
	.why-icon{

		animation:none !important;

		transition:none !important;

		transform:none !important;

	}

}

/* =====================================================
   PREMIUM OVERRIDES
===================================================== */

.why-us::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 28%,transparent 75%,rgba(212,175,55,.04));
}

.why-card{
	background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(11,11,11,.88));
	border-color:rgba(212,175,55,.14);
	box-shadow:0 16px 36px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
}

.why-card:hover{
	border-color:rgba(212,175,55,.28);
	box-shadow:0 24px 52px rgba(0,0,0,.3),0 0 0 1px rgba(212,175,55,.08) inset;
}

.why-icon{
	border-color:rgba(212,175,55,.22);
	background:radial-gradient(circle at 30% 25%,rgba(255,239,201,.12),rgba(212,175,55,.07));
	color:#f0d183;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.why-content h3{
	color:#f7ecd7;
	letter-spacing:-.01em;
}

.why-content p{
	color:#d5cab8;
	line-height:1.9;
}

.why-number{
	color:rgba(212,175,55,.08);
	text-shadow:0 10px 20px rgba(0,0,0,.1);
}