/* ==========================================================================
   Process ("Як ми працюємо")
   Добавить в конец style.css
   ========================================================================== */

.process{ padding:80px 0; }
.process-heading{
	font-family:var(--font-display, 'Unbounded'), sans-serif;
	font-weight:700;
	font-size:32px;
	line-height:1.2;
	margin:0 0 32px;
}

.process-list{
	display:flex;
	align-items:stretch;
	gap:25px;
	width:100%;
}

.process-card{
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	min-height:572px;
	border-radius:20px;
	padding:30px 22px;
	cursor:pointer;
	color:#fff;
	background:linear-gradient(98.24deg, #39982A 58.33%, #E9601A 100%);

	/* неактивная карточка — фиксированная ширина */
	flex:0 0 179px;

	transition:flex-basis .4s ease, flex-grow .4s ease, background-color .4s ease;
}

/* активная — растягивается и забирает освободившееся место у остальных */
.process-card.active{
	flex:1 1 310px;
	background:#020A03;
}

/* фоновое свечение у активной карточки — тот же приём, что и в hero-блобах */
.process-card.active::before{
	content:'';
	position:absolute;
	z-index:0;
	pointer-events:none;
	width:195px;
	height:256px;
	left:-14px;
	top:286px;
	background:linear-gradient(98.24deg, #39982A 58.33%, #E9601A 100%);
	filter:blur(90px);
	transform:rotate(-112deg);
}

.process-num{
	position:relative;
	z-index:1;
	flex-shrink:0;
	width:40px;
	height:40px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	color:#000;
	font-family:var(--font-display, 'Unbounded'), sans-serif;
	font-weight:500;
	font-size:20px;
	line-height:1;
	transition:background-color .4s ease, color .4s ease;
}
.process-card.active .process-num{
	background:#096415;
	color:#fff;
}

.process-body{
	position:relative;
	z-index:1;
	margin-top:auto; /* у неактивной — заголовок прижат к низу, над стрелкой */
}
.process-card.active .process-body{
	margin-top:106px; /* у активной — заголовок сразу под номером, как в макете */
}

.process-title{
	margin:0;
	font-family:var(--font-display, 'Unbounded'), sans-serif;
	font-weight:700;
	font-size:20px;
	line-height:25px;
}
.process-card.active .process-title{
	font-size:22px;
	line-height:27px;
}

.process-desc{
	display:none; /* по умолчанию текст скрыт — показывается только у .active */
	margin:16px 0 0;
	font-family:var(--font-body, 'Montserrat'), sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:1.35;
	color:#fff;
}
.process-card.active .process-desc{
	display:block;
}

.process-arrow{
	position:relative;
	z-index:1;
	align-self:flex-end;
	margin-top:20px;
	width:30px;
	height:30px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .4s ease, background-color .4s ease;
}
.process-card.active .process-arrow{
	transform:rotate(180deg);
}

@media (max-width:900px){
	.process-list{ flex-wrap:wrap; }
	.process-card{ flex:1 1 140px; min-height:420px; }
	.process-card.active{ flex-basis:100%; min-height:auto; }
}