.as-qa-grid{
	--as-qa-accent: #00ff96;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	direction: rtl;
}
.as-qa-card{
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 30px 28px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(150deg,#0a0a0a,#0b0b0f);
	border: 1px solid rgba(255,255,255,.08);
	transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.as-qa-card::after{
	content: '';
	position: absolute;
	inset: -40%;
	z-index: 0;
	background: radial-gradient(circle, color-mix(in srgb, var(--as-qa-accent) 16%, transparent), transparent 60%);
	opacity: 0;
	transition: opacity .5s ease;
	transform: scale(.8);
}
.as-qa-card:hover::after{ opacity: 1; transform: scale(1); }
.as-qa-card:hover{
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--as-qa-accent) 40%, transparent);
	box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--as-qa-accent) 35%, transparent);
}
.as-qa-icon{
	position: relative; z-index: 1; flex: none;
	width: 64px; height: 64px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--as-qa-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--as-qa-accent) 18%, transparent);
	color: var(--as-qa-accent);
}
.as-qa-icon svg{ width: 30px; height: 30px; }
.as-qa-body{ position: relative; z-index: 1; flex: 1; }
.as-qa-title{ font-size: 18px; font-weight: 700; margin: 0 0 6px; color: #f4f2ec; }
.as-qa-desc{ font-size: 13.5px; line-height: 1.8; margin: 0 0 14px; color: #93919c; }
.as-qa-link{
	position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 600; color: var(--as-qa-accent);
	padding: 9px 18px; border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--as-qa-accent) 18%, transparent);
	background: color-mix(in srgb, var(--as-qa-accent) 5%, transparent);
	transition: transform .3s ease, background .3s ease;
}
.as-qa-link svg{ width: 15px; height: 15px; }
.as-qa-card:hover .as-qa-link{ transform: translateX(-4px); background: color-mix(in srgb, var(--as-qa-accent) 12%, transparent); }

@media (max-width: 767px){
	.as-qa-grid{ grid-template-columns: 1fr !important; }
}