/* =========================================================
   AVANSEN — SERVICES PAGE
========================================================= */


/* =========================================================
   BASE
========================================================= */

html,
body {
	background: #000;
}

body.page-services,
.av-services-page {
	background: #000;
	color: #fff;
}

.av-services-page {
	width: 100%;
	min-height: 100vh;

	overflow-x: hidden;
}


/* =========================================================
   01 — INTRO HERO
========================================================= */

.av-services-hero {
	position: relative;

	width: 100%;

	height: 100svh;
min-height: 100svh;

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

	padding: 0 48px;

	box-sizing: border-box;

	background: #000;

	overflow: hidden;
	isolation: isolate;
}


/* subtle cinematic light */

.av-services-hero::before {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 760px;
	height: 460px;

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

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 79, 18, .075) 0%,
			rgba(131, 51, 20, .035) 40%,
			transparent 72%
		);

	filter: blur(56px);

	pointer-events: none;
}


/* =========================================================
   INTRO CONTAINER
========================================================= */

.av-services-hero__container {
	position: relative;

	z-index: 2;

	width: 100%;
	max-width: 1320px;

	height: 100%;

	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;
}


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

.av-services-hero__content {
	width: min(680px, 100%);

	display: flex;
	flex-direction: column;
	align-items: center;

	direction: rtl;
	text-align: center;
}


/* =========================================================
   INTRO TITLE
========================================================= */

.av-services-hero__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: clamp(52px, 4.1vw, 68px);
	font-weight: 800;
	line-height: 1.08;

	color: #F3F0ED;

	text-align: center;
}

.av-services-hero__title span {
	color: #FF5A00;
}


/* =========================================================
   INTRO DESCRIPTION
========================================================= */

.av-services-hero__description {
	width: 100%;
	max-width: 580px;

	margin: 24px auto 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.85;

	color: rgba(243, 240, 237, .58);

	text-align: center;
}


/* =========================================================
   INTRO BUTTON
========================================================= */

.av-services-hero__button {
	position: relative;

	width: 184px;
	height: 52px;

	margin-top: 36px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 14px;

	box-sizing: border-box;

	border:
		1px solid rgba(255, 90, 0, .88);

	border-radius: 28px;

	background:
		rgba(255, 90, 0, .025);

	color: #F3F0ED;

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 500;

	text-decoration: none;

	box-shadow:
	0 0 10px rgba(255, 90, 0, .22),
	0 0 24px rgba(255, 90, 0, .14),
	0 0 44px rgba(255, 90, 0, .08);

animation:
	av-button-pulse
	2.2s
	ease-in-out
	infinite;

	transition:
		transform 260ms cubic-bezier(.22, 1, .36, 1),
		background 260ms ease,
		border-color 260ms ease,
		box-shadow 260ms ease;
}

.av-services-hero__button:hover {
	transform: translateY(-2px);

	background:
		rgba(255, 90, 0, .06);

	border-color: #FF5A00;

	box-shadow:
		0 0 12px rgba(255, 90, 0, .18),
		0 0 28px rgba(255, 90, 0, .07);
		
		animation-play-state: paused;
}

.av-services-hero__button-arrow {
	display: inline-block;

	color: #FF5A00;

	transition:
		transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.av-services-hero__button:hover
.av-services-hero__button-arrow {
	transform: translateY(4px);
}


/* =========================================================
   INTRO — ENTRANCE MOTION
========================================================= */

.av-services-hero__title,
.av-services-hero__description,
.av-services-hero__button {
	opacity: 0;

	filter: blur(5px);

	transform: translateY(18px);

	transition:
		opacity 850ms ease,
		transform 950ms cubic-bezier(.22, 1, .36, 1),
		filter 850ms ease;
}

.av-services-hero.is-visible
.av-services-hero__title {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);

	transition-delay: 100ms;
}

.av-services-hero.is-visible
.av-services-hero__description {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);

	transition-delay: 260ms;
}

.av-services-hero.is-visible
.av-services-hero__button {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);

	transition-delay: 420ms;
}


/* =========================================================
   02 — SERVICES VISUAL
========================================================= */

.av-services-visual {
	position: relative;

	width: 100%;
	height: 100svh;
	min-height: 760px;

	background: #000;

	overflow: hidden;
	isolation: isolate;
}


/* =========================================================
   VISUAL STAGE
========================================================= */

.av-services-visual
.av-services-hero__stage {
	position: absolute;

	left: 50%;
	top: 50%;

	width: 1440px;
	height: 1050px;

	overflow: visible;

	transform:
		translate(-50%, -50%)
		scale(var(--services-visual-scale, 1));

	transform-origin: center center;
}

/* =========================================================
   VISUAL — PLANET
========================================================= */

.av-services-visual
.av-services-hero__planet {
	position: absolute;

	left: 50%;
	bottom: -41%;

	width: min(2300px, 150vw);

	transform: translateX(-50%);

	z-index: 2;

	pointer-events: none;
}

.av-services-visual
.av-services-hero__planet img {
	display: block;

	width: 100%;
	height: auto;
	max-width: none;

	filter:
		brightness(.74)
		contrast(1.10)
		saturate(.88);

	opacity: .9;

	transform:
		translate3d(0, 0, 0);

	transform-origin:
		center center;

	will-change: transform;

	transition:
		transform
		1200ms
		cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   VISUAL — MOUNTAIN
========================================================= */

.av-services-visual
.av-services-hero__mountain {
	position: absolute;

	left: 50%;
	bottom: -26%;

	width: min(1160px, 88vw);

	transform: translateX(-50%);

	z-index: 4;

	pointer-events: none;
}

.av-services-visual
.av-services-hero__mountain img {
	display: block;

	width: 100%;
	height: auto;
	max-width: none;

	filter:
		brightness(.82)
		contrast(1.08)
		saturate(.88);

	transform:
		translate3d(0, 0, 0);

	transform-origin:
		center center;

	will-change: transform;

	transition:
		transform
		900ms
		cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   VISUAL — AMBIENT GLOW
========================================================= */

.av-services-visual
.av-services-hero__ambient {
	position: absolute;

	left: 50%;
	bottom: 8%;

	width: 760px;
	height: 520px;

	transform: translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, .17) 0%,
			rgba(255, 90, 0, .08) 36%,
			rgba(127, 47, 16, .03) 58%,
			transparent 76%
		);

	filter: blur(48px);

	z-index: 1;

	pointer-events: none;

	animation:
		av-ambient-pulse
		6s
		ease-in-out
		infinite;
}


/* =========================================================
   VISUAL — DOUBLE ORBIT
========================================================= */

.av-services-visual
.av-services-hero__orbits {
	position: absolute;

	left: 50%;
	bottom: -400px;

width: 1300px;
height: 1300px;

	transform: translateX(-50%);

	z-index: 2;

	pointer-events: none;
}


/* shared orbit */

.av-services-visual
.av-services-hero__orbit {
	position: absolute;

	left: 50%;
	top: 50%;

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

	border-radius: 50%;

	pointer-events: none;
}


/* inner */

.av-services-visual
.av-services-hero__orbit--inner {
	width: 760px;
	height: 760px;

	border:
		1px solid rgba(255, 90, 0, .20);

	box-shadow:
		0 0 10px rgba(255, 90, 0, .05),
		inset 0 0 10px rgba(255, 90, 0, .025);

	animation:
		av-orbit-breathe-inner
		9s
		ease-in-out
		infinite;
}


/* outer */

.av-services-visual
.av-services-hero__orbit--outer {
	width: 1200px;
height: 1200px;

	border:
		1px solid rgba(255, 90, 0, .08);

	box-shadow:
		0 0 18px rgba(255, 90, 0, .018);

	animation:
		av-orbit-breathe
		7s
		ease-in-out
		infinite;
}


/* moving light */

.av-services-visual
.av-services-hero__orbits::after {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 1200px;
height: 1200px;

	border-radius: 50%;

	transform:
		translate(-50%, -50%)
		rotate(0deg);

	background:
		conic-gradient(
			from 0deg,
			transparent 0deg,
			transparent 325deg,
			rgba(255, 90, 0, 0) 330deg,
			rgba(255, 90, 0, .20) 338deg,
			rgba(255, 110, 30, .75) 348deg,
			rgba(255, 190, 120, .95) 352deg,
			rgba(255, 90, 0, .12) 358deg,
			transparent 360deg
		);

	-webkit-mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 2px),
			#000 calc(100% - 1px)
		);

	mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 2px),
			#000 calc(100% - 1px)
		);

	filter:
		drop-shadow(
			0 0 8px
			rgba(255, 90, 0, .45)
		);

	animation:
		av-orbit-run
		16s
		linear
		infinite;

	pointer-events: none;
}





/* =========================================================
   VISUAL MOTION KEYFRAMES
========================================================= */

@keyframes av-orbit-run {

	from {
		transform:
			translate(-50%, -50%)
			rotate(0deg);
	}

	to {
		transform:
			translate(-50%, -50%)
			rotate(360deg);
	}

}


@keyframes av-orbit-breathe {

	0%,
	100% {
		opacity: .48;
	}

	50% {
		opacity: .88;
	}

}


@keyframes av-orbit-breathe-inner {

	0%,
	100% {
		opacity: .65;
	}

	50% {
		opacity: 1;
	}

}


@keyframes av-ambient-pulse {

	0%,
	100% {
		opacity: .68;

		transform:
			translateX(-50%)
			scale(.96);
	}

	50% {
		opacity: 1;

		transform:
			translateX(-50%)
			scale(1.055);
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

	.av-services-hero__title,
	.av-services-hero__description,
	.av-services-hero__button {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}

	.av-services-hero__orbit--outer,
	.av-services-hero__orbit--inner,
	.av-services-hero__orbits::after,
	.av-services-hero__ambient {
		animation: none !important;
	}

	.av-services-hero__mountain img,
	.av-services-hero__planet img {
		transition: none !important;
	}

}


/* =========================================================
   INTRO / VISUAL — TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-services-hero {
	height:
		calc(100svh - 88px);

	min-height:
		calc(100svh - 88px);

	padding:
		0 32px;
}

	.av-services-hero__title {
		font-size:
			clamp(48px, 6vw, 58px);
	}

	.av-services-visual
	.av-services-hero__mountain {
		width:
			min(900px, 92vw);
	}

}


/* =========================================================
   INTRO / VISUAL — MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-services-hero {
	height:
		calc(100svh - 76px);

	min-height:
		calc(100svh - 76px);

	padding:
		0 20px;
}

	.av-services-hero__title {
		font-size: 42px;
	}

	.av-services-hero__description {
		font-size: 20px;
	}

	.av-services-hero__button {
		width: 166px;
		height: 48px;

		font-size: 16px;
	}


}

/* =========================================================
   02 — SERVICES VISUAL / SERVICE NODES
========================================================= */


/* =========================================================
   SERVICE ORBIT COORDINATE SYSTEM
========================================================= */

.av-services-visual
.av-services-orbit {
	position: absolute;

	left: 50%;
	bottom: -400px;

	width: 1300px;
	height: 1300px;

	transform: translateX(-50%);

	z-index: 10;

	pointer-events: none;
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.av-services-visual
.av-services-orbit__item {
	position: absolute;

	width: 220px;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 8px;

	direction: rtl;
	text-align: center;

	color: #F3F0ED;
	text-decoration: none;

	pointer-events: auto;

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

	opacity: 0;

	filter:
		blur(5px)
		brightness(.58);

	transition:
		opacity 850ms ease,
		filter 900ms ease,
		transform 420ms cubic-bezier(.22, 1, .36, 1);
}


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

.av-services-visual
.av-services-orbit__icon {
	position: relative;

	width: 74px;
	height: 74px;

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

	flex: 0 0 74px;

	border-radius: 50%;

	background: transparent;

	overflow: visible;

	opacity: 0;

	transform: scale(.84);

	transition:
		opacity 760ms ease,
		transform 900ms cubic-bezier(.22, 1, .36, 1),
		filter 320ms ease;
}


.av-services-visual
.av-services-orbit__icon img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	pointer-events: none;

	filter:
		drop-shadow(
			0 0 5px
			rgba(255, 90, 0, .22)
		);

	transition:
		filter 320ms ease;
}


/* =========================================================
   SERVICE TEXT
========================================================= */

.av-services-visual
.av-services-orbit__content {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 7px;

	margin-top: 4px;

	opacity: 0;

	transform: translateY(12px);

	transition:
		opacity 760ms ease,
		transform 900ms cubic-bezier(.22, 1, .36, 1);
}


.av-services-visual
.av-services-orbit__content strong {
	font-family: "Kalameh", sans-serif;

	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;

	color: #FFFFFF;

	transition:
		color 260ms ease;
}


.av-services-visual
.av-services-orbit__content small {
	font-family: "Kalameh", sans-serif;

	font-size: 24px;
	font-weight: 400;
	line-height: 1.6;

	color: rgba(243, 240, 237, .52);

	transition:
		color 260ms ease;
}


/* =========================================================
   SERVICE POSITIONS

   01 = 12:00
   02 = 01:15
   03 = 02:30
   04 = 09:30
   05 = 10:45
========================================================= */


/* 01 — 12:00 */

.av-services-visual
.av-services-orbit__item--01 {
	left: 50%;
	top: 4.1%;
}


/* 02 — 01:15 */

.av-services-visual
.av-services-orbit__item--02 {
	left: 78%;
	top: 13.6%;
}


/* 03 — 02:30 */

.av-services-visual
.av-services-orbit__item--03 {
	left: 94.3%;
	top: 38.1%;
}


/* 04 — 09:30 */

.av-services-visual
.av-services-orbit__item--04 {
	left: 5.7%;
	top: 38.1%;
}


/* 05 — 10:45 */

.av-services-visual
.av-services-orbit__item--05 {
	left: 22%;
	top: 13.6%;
}


/* =========================================================
   CONNECTOR LINES
   بدون Dot
========================================================= */

.av-services-visual
.av-services-orbit__content::after {
	content: "";

	display: block;

	width: 1px;

	margin-top: 12px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 90, 0, .62) 0%,
			rgba(255, 90, 0, .22) 65%,
			transparent 100%
		);

	transform-origin: top center;

	opacity: .42;

	transition:
		opacity 300ms ease,
		filter 300ms ease;
}


/* 01 */

.av-services-visual
.av-services-orbit__item--01
.av-services-orbit__content::after {
	height: 88px;

	transform:
		rotate(0deg);
}


/* 02 */

.av-services-visual
.av-services-orbit__item--02
.av-services-orbit__content::after {
	height: 112px;

	transform:
		rotate(30deg);
}


/* 03 */

.av-services-visual
.av-services-orbit__item--03
.av-services-orbit__content::after {
	height: 146px;

	transform:
		rotate(60deg);
}


/* 04 */

.av-services-visual
.av-services-orbit__item--04
.av-services-orbit__content::after {
	height: 146px;

	transform:
		rotate(-60deg);
}


/* 05 */

.av-services-visual
.av-services-orbit__item--05
.av-services-orbit__content::after {
	height: 112px;

	transform:
		rotate(-30deg);
}


/* =========================================================
   LOCAL CINEMATIC GLOW
========================================================= */

.av-services-visual
.av-services-orbit__item::before {
	content: "";

	position: absolute;

	left: 50%;
	top: 36px;

	width: 150px;
	height: 150px;

	transform:
		translate(-50%, -50%)
		scale(.82);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255, 90, 0, .17) 0%,
			rgba(255, 90, 0, .065) 38%,
			transparent 72%
		);

	filter: blur(18px);

	opacity: 0;

	pointer-events: none;

	transition:
		opacity 300ms ease,
		transform 400ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   HOVER
========================================================= */

.av-services-visual
.av-services-orbit__item:hover {
	transform:
		translate(-50%, -50%)
		translateY(-4px);
}


.av-services-visual
.av-services-orbit__item:hover::before {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(1);
}


.av-services-visual
.av-services-orbit__item:hover
.av-services-orbit__icon {
	transform: scale(1.08);

	filter:
		drop-shadow(
			0 0 12px
			rgba(255, 90, 0, .38)
		);
}


.av-services-visual
.av-services-orbit__item:hover
.av-services-orbit__icon img {
	filter:
		drop-shadow(
			0 0 11px
			rgba(255, 90, 0, .52)
		);
}


.av-services-visual
.av-services-orbit__item:hover
.av-services-orbit__content strong {
	color: #FF5A00;
}


.av-services-visual
.av-services-orbit__item:hover
.av-services-orbit__content small {
	color:
		rgba(243, 240, 237, .82);
}


.av-services-visual
.av-services-orbit__item:hover
.av-services-orbit__content::after {
	opacity: .88;

	filter:
		drop-shadow(
			0 0 5px
			rgba(255, 90, 0, .52)
		);
}


/* =========================================================
   DIM OTHER SERVICES ON HOVER
========================================================= */

.av-services-visual
.av-services-orbit:has(
	.av-services-orbit__item:hover
)
.av-services-orbit__item:not(:hover) {
	opacity: .38 !important;

	filter:
		brightness(.70)
		blur(0);
}


/* =========================================================
   SERVICES VISUAL — REVEAL
========================================================= */

.av-services-visual.is-visible
.av-services-orbit__item {
	opacity: 1;

	filter:
		blur(0)
		brightness(1);
}


.av-services-visual.is-visible
.av-services-orbit__icon {
	opacity: 1;

	transform: scale(1);
}


.av-services-visual.is-visible
.av-services-orbit__content {
	opacity: 1;

	transform: translateY(0);
}


/* =========================================================
   STAGGER
   01 → 02 → 03 → 04 → 05
========================================================= */

.av-services-visual.is-visible
.av-services-orbit__item--01 {
	transition-delay: 180ms;
}

.av-services-visual.is-visible
.av-services-orbit__item--01
.av-services-orbit__icon,
.av-services-visual.is-visible
.av-services-orbit__item--01
.av-services-orbit__content {
	transition-delay: 180ms;
}


.av-services-visual.is-visible
.av-services-orbit__item--02 {
	transition-delay: 360ms;
}

.av-services-visual.is-visible
.av-services-orbit__item--02
.av-services-orbit__icon,
.av-services-visual.is-visible
.av-services-orbit__item--02
.av-services-orbit__content {
	transition-delay: 360ms;
}


.av-services-visual.is-visible
.av-services-orbit__item--03 {
	transition-delay: 540ms;
}

.av-services-visual.is-visible
.av-services-orbit__item--03
.av-services-orbit__icon,
.av-services-visual.is-visible
.av-services-orbit__item--03
.av-services-orbit__content {
	transition-delay: 540ms;
}


.av-services-visual.is-visible
.av-services-orbit__item--04 {
	transition-delay: 720ms;
}

.av-services-visual.is-visible
.av-services-orbit__item--04
.av-services-orbit__icon,
.av-services-visual.is-visible
.av-services-orbit__item--04
.av-services-orbit__content {
	transition-delay: 720ms;
}


.av-services-visual.is-visible
.av-services-orbit__item--05 {
	transition-delay: 900ms;
}

.av-services-visual.is-visible
.av-services-orbit__item--05
.av-services-orbit__icon,
.av-services-visual.is-visible
.av-services-orbit__item--05
.av-services-orbit__content {
	transition-delay: 900ms;
}


/* keep hover scale after reveal */

.av-services-visual.is-visible
.av-services-orbit__item:hover
.av-services-orbit__icon {
	transform: scale(1.08);
}


.av-services-visual.is-visible
.av-services-orbit__item:hover
.av-services-orbit__content {
	transform: translateY(-2px);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

	.av-services-visual
	.av-services-orbit__item,
	.av-services-visual
	.av-services-orbit__icon,
	.av-services-visual
	.av-services-orbit__content {
		opacity: 1 !important;

		filter: none !important;

		transition: none !important;
	}

}


/* =========================================================
   SERVICES VISUAL — TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-services-visual
	.av-services-orbit {
		width: 960px;
		height: 960px;

		bottom: -25%;
	}


	.av-services-visual
	.av-services-orbit__item {
		width: 190px;
	}


	.av-services-visual
	.av-services-orbit__icon {
		width: 62px;
		height: 62px;

		flex-basis: 62px;
	}


	.av-services-visual
	.av-services-orbit__content strong {
		font-size: 18px;
	}


	.av-services-visual
	.av-services-orbit__content small {
		font-size: 13px;
	}

}


/* =========================================================
   SERVICES VISUAL — MOBILE
   SERVICES CARDS
========================================================= */

@media (max-width: 768px) {

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

    .av-services-visual {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 24px 20px 80px !important;

    box-sizing: border-box;

    background: #000;
    overflow: visible;
}


    /* =========================
       HIDE DESKTOP VISUAL
    ========================= */

    .av-services-visual .av-services-hero__planet,
    .av-services-visual .av-services-hero__mountain,
    .av-services-visual .av-services-hero__ambient,
    .av-services-visual .av-services-hero__orbits {
        display: none !important;
    }


    /* stage دیگر نباید 1440px باشد */

    .av-services-visual .av-services-hero__stage {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        transform: none !important;
    }


    /* =========================
       CARDS CONTAINER
    ========================= */

    .av-services-visual .av-services-orbit {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        transform: none !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        z-index: 10;
    }


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

    .av-services-visual .av-services-orbit__item {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-height: 112px !important;
        height: auto !important;

        padding: 20px !important;
        box-sizing: border-box;

        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) 24px !important;
        align-items: center !important;
        column-gap: 16px !important;

        direction: rtl;

        border:
            1px solid rgba(255, 90, 0, .22);

        border-radius: 18px;

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

        transform: none !important;

        opacity: 1 !important;
        filter: none !important;

        overflow: hidden;
    }


    /* glow خیلی ظریف داخل کارت */

    .av-services-visual
    .av-services-orbit__item::before {
        content: "";

        position: absolute;

        width: 100px;
        height: 100px;

        right: -35px;
        top: 50%;

        transform: translateY(-50%) !important;

        background:
            radial-gradient(
                circle,
                rgba(255, 90, 0, .12),
                transparent 70%
            );

        filter: blur(12px);

        opacity: 1 !important;

        pointer-events: none;
    }


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

    .av-services-visual
    .av-services-orbit__icon {
        grid-column: 1;

        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;

        margin: 0 !important;

        opacity: 1 !important;
        transform: none !important;
    }


    .av-services-visual
    .av-services-orbit__icon img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain;
    }


    /* =========================
       TEXT
    ========================= */

    .av-services-visual
    .av-services-orbit__content {
        grid-column: 2;

        width: 100% !important;

        margin: 0 !important;

        align-items: flex-start !important;

        text-align: right !important;

        opacity: 1 !important;
        transform: none !important;
    }


    .av-services-visual
    .av-services-orbit__content strong {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;

        color: #fff;

        text-align: right !important;
    }


    .av-services-visual
    .av-services-orbit__content small {
        display: block !important;

        margin-top: 4px;

        font-size: 18px !important;
        line-height: 1.6 !important;

        color: rgba(255, 255, 255, .46);

        text-align: right !important;
    }


    /* connectorهای نسخه دسکتاپ */

    .av-services-visual
    .av-services-orbit__content::after {
        display: none !important;
    }


    /* =========================
       ARROW
    ========================= */

    .av-services-visual
    .av-services-orbit__item::after {
        content: "←";

        grid-column: 3;

        position: relative;

        font-family: sans-serif;
        font-size: 20px;

        color: #FF5A00;

        justify-self: end;

        opacity: .8;
    }

}

/* =========================================================
   03 — SERVICES PROCESS
========================================================= */

.av-services-process {
	position: relative;

	width: 100%;
	min-height: 100svh;

	display: flex;
	align-items: center;

	padding: 120px 0;

	box-sizing: border-box;

	background: #000;
	color: #fff;

	overflow: hidden;
}


.av-services-process__container {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.av-services-process__header {
	width: 100%;
	max-width: 760px;

	margin: 0 auto 92px;

	text-align: center;
	direction: rtl;
}


.av-services-process__eyebrow {
	display: block;

	margin-bottom: 18px;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 500;

	color: #FF5A00;
}


.av-services-process__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: clamp(42px, 3.6vw, 58px);
	font-weight: 700;
	line-height: 1.25;

	color: #fff;
}


.av-services-process__title span {
	color: #fff;
}


.av-services-process__intro {
	margin: 18px 0 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.8;

	color: rgba(255, 255, 255, .46);
}


/* =========================================================
   TIMELINE
========================================================= */

.av-services-process__timeline {
	position: relative;

	width: 100%;

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

	direction: rtl;

	padding: 0;
}


/* =========================================================
   BASE LINE
========================================================= */

.av-services-process__line {
	position: absolute;

	top: 59px;

	right: 0;
	left: 0;

	height: 1px;

	z-index: 0;

	overflow: visible;

	background:
		rgba(255, 90, 0, .16);

	box-shadow:
		0 0 5px rgba(255, 90, 0, .18);
}


/* dark / ambient glow */

.av-services-process__line::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 4%;
	right: 4%;

	height: 20px;

	transform: translateY(-50%);

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 90, 0, .03) 12%,
			rgba(255, 90, 0, .10) 50%,
			rgba(255, 90, 0, .03) 88%,
			transparent 100%
		);

	filter: blur(10px);

	pointer-events: none;
}


/* animated progress line */

.av-services-process__line::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 0;

	width: var(--process-progress, 0%);
	height: 2px;

	transform: translateY(-50%);

	background:
		linear-gradient(
			to left,
			#FF5A00 0%,
			rgba(255, 90, 0, .78) 66%,
			rgba(255, 90, 0, .12) 100%
		);

	box-shadow:
		0 0 6px rgba(255, 90, 0, .62),
		0 0 18px rgba(255, 90, 0, .18);

	transition:
		width 1100ms cubic-bezier(.22, 1, .36, 1);

	pointer-events: none;
}


/* =========================================================
   STEP
========================================================= */

.av-services-process__step {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 0 24px;

	text-align: center;
	direction: rtl;

	opacity: .24;

	transform: translateY(18px);

	transition:
		opacity 850ms cubic-bezier(.22, 1, .36, 1),
		transform 850ms cubic-bezier(.22, 1, .36, 1);
}


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

.av-services-process__number {
	display: block;

	height: 34px;

	margin: 0 0 18px;

	font-family: "Michroma", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 34px;

	direction: ltr;

	color: rgba(217, 217, 217, .22);

	transition:
		color 520ms ease,
		opacity 520ms ease,
		text-shadow 520ms ease;
}


/* =========================================================
   DOT
========================================================= */

.av-services-process__dot {
	position: relative;

	display: block;

	width: 14px;
	height: 14px;

	margin: 0 0 28px;

	border:
		1px solid rgba(255, 90, 0, .55);

	border-radius: 50%;

	background: #050201;

	box-shadow:
		0 0 0 4px rgba(255, 90, 0, .045),
		0 0 8px rgba(255, 90, 0, .22);

	z-index: 3;

	transition:
		border-color 520ms ease,
		box-shadow 520ms ease,
		transform 520ms cubic-bezier(.22, 1, .36, 1);
}


.av-services-process__dot::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: #FF5A00;

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

	opacity: .42;

	box-shadow:
		0 0 4px rgba(255, 90, 0, .30);

	transition:
		opacity 520ms ease,
		box-shadow 520ms ease;
}


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

.av-services-process__step-title {
	margin: 0;

	font-family: "Kalameh", sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.45;

	color:
		rgba(255, 255, 255, .46);

	transition:
		color 520ms ease;
}


.av-services-process__step-text {
	width: 240px;
	max-width: 100%;

	margin: 14px auto 0;

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.7;

	color:
		rgba(243, 240, 237, .24);

	text-align: center;

	transition:
		color 520ms ease;
}


/* =========================================================
   ACTIVE STEP
========================================================= */

.av-services-process__step.is-active {
	opacity: 1;

	transform: translateY(0);
}


.av-services-process__step.is-active
.av-services-process__number {
	color: #833314;

	text-shadow:
		0 0 10px rgba(131, 51, 20, .30);
}


.av-services-process__step.is-active
.av-services-process__dot {
	border-color: #FF5A00;

	transform: scale(1.08);

	box-shadow:
		0 0 0 4px rgba(255, 90, 0, .08),
		0 0 9px rgba(255, 90, 0, .72),
		0 0 22px rgba(255, 90, 0, .24);
}


.av-services-process__step.is-active
.av-services-process__dot::after {
	opacity: 1;

	box-shadow:
		0 0 6px rgba(255, 90, 0, .80);
}


.av-services-process__step.is-active
.av-services-process__step-title {
	color: #FFFFFF;
}


.av-services-process__step.is-active
.av-services-process__step-text {
	color:
		rgba(243, 240, 237, .64);
}


/* =========================================================
   HOVER
========================================================= */

.av-services-process__step:hover
.av-services-process__dot {
	box-shadow:
		0 0 0 5px rgba(255, 90, 0, .08),
		0 0 18px rgba(255, 90, 0, .30);
}


/* =========================================================
   PROCESS — TABLET
========================================================= */

@media (max-width: 1024px) {

	.av-services-process {
		min-height: auto;

		padding:
			110px 0
			130px;
	}


	.av-services-process__container {
		width:
			calc(100% - 64px);
	}


	.av-services-process__header {
		margin-bottom: 78px;
	}


	.av-services-process__step {
		padding: 0 14px;
	}


	.av-services-process__step-title {
		font-size: 22px;
	}


	.av-services-process__step-text {
		width: 200px;

		font-size: 16px;
	}

}


/* =========================================================
   PROCESS — MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-services-process {
		min-height: auto;

		padding:
			96px 0
			110px;
	}


	.av-services-process__container {
		width:
			calc(100% - 40px);
	}


	.av-services-process__header {
		margin-bottom: 64px;

		text-align: right;
	}


	.av-services-process__title {
		font-size: 30px;
	}


	.av-services-process__intro {
		font-size: 20px;
	}


	/* vertical timeline */

	.av-services-process__timeline {
		display: flex;
		flex-direction: column;

		gap: 52px;

		padding-right: 28px;
	}


	.av-services-process__line {
		top: 12px;
		right: 5px;
		left: auto;
		bottom: 12px;

		width: 1px;
		height: auto;
	}


	.av-services-process__line::before,
	.av-services-process__line::after {
		display: none;
	}


	.av-services-process__step {
		display: grid;

		grid-template-columns:
			52px 1fr;

		padding: 0;

		text-align: right;
		align-items: start;
	}


	.av-services-process__number {
		grid-column: 1;
		grid-row: 1;

		margin: 0;

		font-size: 16px;

		text-align: right;
	}


	.av-services-process__dot {
		position: absolute;

		right: -28px;
		top: 4px;

		width: 10px;
		height: 10px;

		margin: 0;
	}


	.av-services-process__step-title {
		grid-column: 2;
		grid-row: 1;

		font-size: 24px;
	}


	.av-services-process__step-text {
		grid-column: 2;
		grid-row: 2;

		width: auto;
		max-width: none;

		margin:
			8px 0
			0;

		font-size: 18px;
		font-family: "Kalameh", sans-serif !important;

		text-align: right;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

	.av-services-process__step {
		opacity: 1 !important;

		transform: none !important;

		transition: none !important;
	}


	.av-services-process__line::after {
		width: 100% !important;

		transition: none !important;
	}

}

/* =========================================================
   04 — FINAL CTA
========================================================= */

.av-services-final-cta {
	position: relative;

	width: 100%;
	min-height: 100svh;

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

	padding:
		120px 0
		110px;

	box-sizing: border-box;

	background: #000;

	overflow: hidden;
	isolation: isolate;
}


/* =========================================================
   CINEMATIC GLOW
========================================================= */

.av-services-final-cta__glow {
	position: absolute;

	left: 50%;
	bottom: -165px;

	width: 920px;
	height: 420px;

	transform: translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, .16) 0%,
			rgba(255, 90, 0, .075) 34%,
			rgba(131, 51, 20, .025) 58%,
			transparent 76%
		);

	filter: blur(54px);

	opacity: .92;

	z-index: 0;

	pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.av-services-final-cta__container {
	position: relative;

	z-index: 2;

	width:
		calc(100% - 96px);

	max-width: 1320px;

	margin: 0 auto;

	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;
	direction: rtl;
}


/* =========================================================
   EYEBROW
========================================================= */

.av-services-final-cta__eyebrow {
	display: block;

	margin-bottom: 20px;

	font-family: "Kalameh", sans-serif;
	font-size: 15px;
	font-weight: 500;

	color: #FF5A00;
}


/* =========================================================
   TITLE
========================================================= */

.av-services-final-cta__title {
	max-width: 760px;

	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: clamp(44px, 4vw, 64px);
	font-weight: 800;
	line-height: 1.22;

	color: #FFFFFF;
}


.av-services-final-cta__title span {
	color: #FF5A00;
}


/* =========================================================
   TEXT
========================================================= */

.av-services-final-cta__text {
	max-width: 560px;

	margin:
		24px auto
		0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.9;

	color:
		rgba(255, 255, 255, .50);
}


/* =========================================================
   BUTTON
========================================================= */

.av-services-final-cta__button {
	width: 174px;
	height: 52px;

	margin-top: 38px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 15px;

	box-sizing: border-box;

	border:
		1px solid
		rgba(255, 90, 0, .78);

	border-radius: 28px;

	background:
		rgba(255, 90, 0, .025);

	color: #FFFFFF;

	font-family: "Kalameh", sans-serif;
	font-size: 18px;
	font-weight: 500;

	text-decoration: none;

	box-shadow:
	0 0 10px rgba(255, 90, 0, .22),
	0 0 24px rgba(255, 90, 0, .14),
	0 0 44px rgba(255, 90, 0, .08);

animation:
	av-button-pulse
	2.2s
	ease-in-out
	infinite;

	transition:
		transform 280ms cubic-bezier(.22, 1, .36, 1),
		background 280ms ease,
		border-color 280ms ease,
		box-shadow 280ms ease;
}


.av-services-final-cta__button:hover {
	transform:
		translateY(-3px);

	background:
		rgba(255, 90, 0, .07);

	border-color:
		#FF5A00;

	box-shadow:
		0 0 16px
		rgba(255, 90, 0, .20),
		0 0 34px
		rgba(255, 90, 0, .08);
		
		animation-play-state: paused;
}


.av-services-final-cta__arrow {
	display: inline-block;

	color: #FF5A00;

	transition:
		transform 280ms
		cubic-bezier(.22, 1, .36, 1);
}


.av-services-final-cta__button:hover
.av-services-final-cta__arrow {
	transform:
		translateX(-4px);
}


/* =========================================================
   CTA — SUBTLE ENTRANCE
========================================================= */

.av-services-final-cta__eyebrow,
.av-services-final-cta__title,
.av-services-final-cta__text,
.av-services-final-cta__button {
	opacity: 0;

	filter:
		blur(5px);

	transform:
		translateY(18px);

	transition:
		opacity 850ms ease,
		transform 950ms
		cubic-bezier(.22, 1, .36, 1),
		filter 850ms ease;
}


.av-services-final-cta.is-visible
.av-services-final-cta__eyebrow {
	opacity: 1;

	filter: blur(0);

	transform:
		translateY(0);

	transition-delay:
		80ms;
}


.av-services-final-cta.is-visible
.av-services-final-cta__title {
	opacity: 1;

	filter: blur(0);

	transform:
		translateY(0);

	transition-delay:
		180ms;
}


.av-services-final-cta.is-visible
.av-services-final-cta__text {
	opacity: 1;

	filter: blur(0);

	transform:
		translateY(0);

	transition-delay:
		320ms;
}


.av-services-final-cta.is-visible
.av-services-final-cta__button {
	opacity: 1;

	filter: blur(0);

	transform:
		translateY(0);

	transition-delay:
		460ms;
}


/* =========================================================
   CTA — MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-services-final-cta {
		min-height: auto;

		padding:
			110px 0
			100px;
	}


	.av-services-final-cta__container {
		width:
			calc(100% - 40px);
	}


	.av-services-final-cta__title {
		font-size: 30px;
	}


	.av-services-final-cta__text {
		font-size: 20px;
	}


	.av-services-final-cta__glow {
		width: 620px;
		height: 320px;

		bottom: -145px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

	.av-services-final-cta__eyebrow,
	.av-services-final-cta__title,
	.av-services-final-cta__text,
	.av-services-final-cta__button {
		opacity: 1 !important;

		filter: none !important;

		transform: none !important;

		transition: none !important;
	}

}

/* =========================================================
   SERVICES PAGE — SECTION SNAP
========================================================= */

html {
	scroll-behavior: smooth;
}


/* desktop presentation flow */

@media (min-width: 901px) {

	html,
	body {
		scroll-snap-type: y mandatory;
	}


	.av-services-hero,
	.av-services-visual,
	.av-services-process,
	.av-services-final-cta {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

}


/* mobile: normal scrolling */

@media (max-width: 900px) {

	html,
	body {
		scroll-snap-type: none;
	}

	.av-services-hero,
	.av-services-visual,
	.av-services-process,
	.av-services-final-cta {
		scroll-snap-align: none;
		scroll-snap-stop: normal;
	}

}

/* =========================================================
   SERVICES VISUAL — HIDE HEADER
========================================================= */

body.av-services-visual-active header,
body.av-services-visual-active .site-header,
body.av-services-visual-active .av-header {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 320ms ease,
		visibility 320ms ease;
}

@keyframes av-button-pulse {

	0%,
	100% {
		box-shadow:
			0 0 8px rgba(255, 90, 0, .18),
			0 0 18px rgba(255, 90, 0, .10),
			0 0 34px rgba(255, 90, 0, .05);

		border-color:
			rgba(255, 90, 0, .72);
	}

	50% {
		box-shadow:
			0 0 14px rgba(255, 90, 0, .45),
			0 0 34px rgba(255, 90, 0, .26),
			0 0 62px rgba(255, 90, 0, .14);

		border-color:
			#FF5A00;
	}

}



@media (max-width: 768px) {

    /* فاصله پایین کارت‌های خدمات */
    .av-services-visual {
        padding-bottom: 70px !important;
    }

    /* فاصله بالای سکشن بعدی */
    .av-services-process {
        padding-top: 70px;
    }
}



@media (max-width: 768px) {

    /* فاصله پایین مراحل */
    .av-services-process {
        padding-bottom: 70px;
    }

    /* فاصله بالای سکشن پایانی */
    .av-services-final-cta {
        padding-top: 70px;
    }
}



/* SERVICES CARDS — MOBILE */
@media (max-width: 768px) {

    /* ساختار کارت */
    .av-services-visual .av-services-orbit__item {
        position: relative !important;

        grid-template-columns: 44px minmax(0, 1fr) !important;
        column-gap: 16px !important;

        min-height: 116px !important;
        padding: 18px 12px !important;

        border-color: rgba(255, 90, 0, 0.38);

        transition:
            border-color 250ms ease,
            background 250ms ease;
    }

    /* آیکن */
    .av-services-visual .av-services-orbit__icon {
        grid-column: 1;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-basis: 44px !important;
    }

    .av-services-visual .av-services-orbit__icon img {
        transform: none;
    }

    /* ستون متن */
    .av-services-visual .av-services-orbit__content {
        grid-column: 2;

        width: 100% !important;
        min-width: 0;

        padding-right: 6px;
        padding-left: 0px;

        box-sizing: border-box;

        gap: 6px !important;
        align-items: flex-start !important;
        text-align: right !important;
    }

    /* عنوان */
    .av-services-visual .av-services-orbit__content strong {
    display: block;
    width: max-content;
    max-width: none;

    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    white-space: nowrap;
    text-align: right !important;
}

    /* توضیحات */
    .av-services-visual .av-services-orbit__content small {
        margin-top: 0 !important;

        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;

        color: rgba(255, 255, 255, 0.72) !important;
        text-align: right !important;
    }

    /* فلش مستقل از ستون‌بندی */
    .av-services-visual .av-services-orbit__item::after {
        position: absolute !important;

        left: 12px;
        top: 50%;

        grid-column: auto;

        font-size: 20px !important;
        line-height: 1;

        transform: translateY(-50%);

        transition: transform 250ms ease;
    }

    /* بازخورد لمس */
    .av-services-visual .av-services-orbit__item:active {
        border-color: #FF5A00;
        background: rgba(255, 90, 0, 0.06);
    }

    .av-services-visual .av-services-orbit__item:active::after {
        transform: translate(-4px, -50%);
    }
}