/* «كيف يعمل» — scoped to #mhw-section so nothing leaks into the theme. */
#mhw-section {
	--mhw-line: rgba(var(--mhw-text-rgb), .4);
	--mhw-soft: rgba(var(--mhw-text-rgb), .14);
	--mhw-pad: 84px;
	--mhw-ease: cubic-bezier(.22, .8, .24, 1);
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--mhw-pad) 20px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--mhw-from) 0%, var(--mhw-to) 100%);
	color: var(--mhw-text);
	font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
	text-align: center;
	direction: rtl;
}

#mhw-section.mhw-size-compact { --mhw-pad: 56px; }
#mhw-section.mhw-size-large { --mhw-pad: 112px; }

#mhw-section *,
#mhw-section *::before,
#mhw-section *::after { box-sizing: border-box; }

#mhw-section [hidden] { display: none !important; }

/* -------------------------------------------------------- background */
#mhw-section .mhw-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

#mhw-section .mhw-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(var(--mhw-text-rgb), .16) 1px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
}

#mhw-section .mhw-orb { position: absolute; border-radius: 50%; }
#mhw-section .mhw-orb-a { top: -240px; right: -170px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(var(--mhw-text-rgb), .17) 0%, rgba(var(--mhw-text-rgb), 0) 68%); }
#mhw-section .mhw-orb-b { bottom: -280px; left: -190px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 68%); }

/*
 * The heartbeat. A faint trace is painted once; the bright beat is the same trace seen through
 * a narrow window that slides across. Only transforms move, so the browser never repaints it.
 */
#mhw-section .mhw-pulse {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 190px;
	margin-top: -30px;
	transform: scaleX(-1);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

#mhw-section .mhw-pulse svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#mhw-section .mhw-pulse path { vector-effect: non-scaling-stroke; }
#mhw-section .mhw-pulse-base { position: absolute; inset: 0; stroke: rgba(var(--mhw-text-rgb), .13); stroke-width: 2; }

/* The window is 18% wide; the trace inside is 100/18 of that, and moves the opposite way so it stays put. */
#mhw-section .mhw-pulse-win {
	position: absolute;
	top: -20px;
	bottom: -20px;
	left: 0;
	width: 18%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 45%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 45%, #000 88%, transparent 100%);
	will-change: transform;
	animation: mhwWin 6s linear infinite;
}

#mhw-section .mhw-pulse-glow {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 0;
	width: 555.556% !important;
	height: auto !important;
	stroke: var(--mhw-text);
	stroke-width: 2.5;
	filter: drop-shadow(0 0 4px rgba(var(--mhw-text-rgb), .85));
	will-change: transform;
	animation: mhwTrace 6s linear infinite;
}

#mhw-section .mhw-pulse-win-2,
#mhw-section .mhw-pulse-win-2 .mhw-pulse-glow { animation-delay: -3s; }
#mhw-section .mhw-pulse-win-2 { opacity: .5; }

@keyframes mhwWin {
	from { transform: translateX(-100%); }
	to { transform: translateX(555.556%); }
}

@keyframes mhwTrace {
	from { transform: translateX(18%); }
	to { transform: translateX(-100%); }
}

#mhw-section.mhw-still .mhw-pulse-win { display: none; }
#mhw-section.mhw-still .mhw-pulse-base { stroke: rgba(var(--mhw-text-rgb), .22); }

/* Off screen nothing moves, so scrolling the rest of the page stays smooth. */
#mhw-section.mhw-off *,
#mhw-section.mhw-off *::before,
#mhw-section.mhw-off *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- head */
#mhw-section .mhw-wrap { position: relative; max-width: 1140px; margin: 0 auto; }
#mhw-section .mhw-head { margin: 0 0 30px; padding: 0; border: 0; background: none; }

#mhw-section .mhw-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 6px 16px 6px 14px;
	border: 1px solid rgba(var(--mhw-text-rgb), .22);
	border-radius: 999px;
	background: rgba(var(--mhw-text-rgb), .1);
	color: var(--mhw-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

#mhw-section .mhw-beat-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); }
#mhw-section .mhw-beat-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ade80; animation: mhwPing 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
#mhw-section.mhw-still .mhw-beat-dot::after { animation: none; }

@keyframes mhwPing {
	0% { transform: scale(1); opacity: .8; }
	80%, 100% { transform: scale(3.2); opacity: 0; }
}

#mhw-section .mhw-title {
	margin: 0 0 12px;
	color: var(--mhw-text);
	font-family: inherit;
	font-size: var(--mhw-title);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .14);
}

#mhw-section .mhw-subtitle {
	max-width: 620px;
	margin: 0 auto;
	color: rgba(var(--mhw-text-rgb), .86);
	font-size: 18px;
	line-height: 1.8;
}

/* -------------------------------------------------------------- switch */
#mhw-section .mhw-switch {
	position: relative;
	display: inline-flex;
	margin: 0 0 52px;
	padding: 5px;
	border: 1px solid rgba(var(--mhw-text-rgb), .16);
	border-radius: 999px;
	background: rgba(0, 0, 0, .18);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14);
}

/* The white pill slides between the tabs; the script places it. */
#mhw-section .mhw-glider {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: var(--mhw-text);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
	opacity: 0;
	transition: transform .45s var(--mhw-ease), width .45s var(--mhw-ease);
}
#mhw-section .mhw-switch.has-glider .mhw-glider { opacity: 1; }
#mhw-section.mhw-still .mhw-glider { transition: none; }

#mhw-section .mhw-tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 30px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(var(--mhw-text-rgb), .9);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: color .3s ease;
}

#mhw-section .mhw-tab:hover { color: var(--mhw-text); background: transparent; }
#mhw-section .mhw-tab.is-active { color: var(--mhw-accent); }
/* Before the script runs, the active tab carries its own white background. */
#mhw-section .mhw-switch:not(.has-glider) .mhw-tab.is-active { background: var(--mhw-text); }

#mhw-section .mhw-tab:focus-visible,
#mhw-section .mhw-cta:focus-visible { outline: 3px solid rgba(var(--mhw-text-rgb), .75); outline-offset: 3px; }

#mhw-section .mhw-tab-svg { flex: none; width: 1em; height: 1em; }

/* --------------------------------------------------------------- steps */
#mhw-section .mhw-pane.is-active { animation: mhwIn .45s ease both; }
#mhw-section.mhw-still .mhw-pane.is-active { animation: none; }

#mhw-section .mhw-steps {
	display: grid;
	grid-template-columns: repeat(var(--mhw-n), minmax(0, 1fr));
	gap: 30px;
	max-width: calc(var(--mhw-n) * 350px);
	margin: 0 auto 48px;
	padding: 0;
	list-style: none;
}

#mhw-section .mhw-pane.is-many .mhw-steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: none; }

#mhw-section .mhw-step { position: relative; display: flex; margin: 0; padding: 0; }
#mhw-section .mhw-step::marker { content: none; }

#mhw-section.mhw-moving .mhw-pane.is-active .mhw-step { animation: mhwIn .6s var(--mhw-ease) both; animation-delay: calc(var(--mhw-i) * 110ms); }

#mhw-section .mhw-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 36px 24px 32px;
	overflow: hidden;
	border: 1px solid rgba(var(--mhw-text-rgb), .17);
	border-radius: 24px;
	background: linear-gradient(160deg, rgba(var(--mhw-text-rgb), .15) 0%, rgba(var(--mhw-text-rgb), .05) 100%);
	background: linear-gradient(160deg, color-mix(in srgb, var(--mhw-text) 15%, var(--mhw-from)) 0%, color-mix(in srgb, var(--mhw-text) 7%, var(--mhw-to)) 100%);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(var(--mhw-text-rgb), .18);
	transition: transform .45s var(--mhw-ease), border-color .3s ease;
}

/* A thin bright edge along the top of each card. */
#mhw-section .mhw-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18%;
	right: 18%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--mhw-text-rgb), .75), transparent);
}

#mhw-section .mhw-step:hover .mhw-card {
	transform: translateY(-6px);
	border-color: rgba(var(--mhw-text-rgb), .34);
	box-shadow: 0 28px 50px -18px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(var(--mhw-text-rgb), .26);
}
#mhw-section.mhw-still .mhw-step:hover .mhw-card { transform: none; }

/* Big outlined step number in the card corner. */
#mhw-section .mhw-ghost {
	position: absolute;
	top: 8px;
	right: 18px;
	color: transparent;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	direction: ltr;
	-webkit-text-stroke: 1.5px rgba(var(--mhw-text-rgb), .17);
	pointer-events: none;
	user-select: none;
}

#mhw-section .mhw-icon {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 84px;
	height: 84px;
	margin: 0 0 22px;
	border: 2px dashed var(--mhw-line);
	border-radius: 50%;
	background: var(--mhw-soft);
	color: var(--mhw-text);
	transition: transform .45s var(--mhw-ease), background-color .3s ease;
}

/* A soft ring that beats out of each icon in turn. */
#mhw-section .mhw-icon::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid rgba(var(--mhw-text-rgb), .4);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}
#mhw-section.mhw-moving .mhw-pane.is-active .mhw-icon::after { animation: mhwRing 3.3s ease-out infinite; animation-delay: calc(var(--mhw-i) * 1.1s + .6s); }

@keyframes mhwRing {
	0% { transform: scale(1); opacity: .75; }
	40%, 100% { transform: scale(1.45); opacity: 0; }
}

#mhw-section.mhw-icon-solid .mhw-icon { border-style: solid; border-color: rgba(var(--mhw-text-rgb), .32); }
#mhw-section.mhw-icon-glass .mhw-icon {
	border: 1px solid rgba(var(--mhw-text-rgb), .3);
	border-radius: 26px;
	background: rgba(var(--mhw-text-rgb), .14);
	box-shadow: inset 0 1px 0 rgba(var(--mhw-text-rgb), .3), 0 12px 26px rgba(0, 0, 0, .16);
}

#mhw-section .mhw-step:hover .mhw-icon { transform: scale(1.06); background: rgba(var(--mhw-text-rgb), .22); }
#mhw-section.mhw-still .mhw-step:hover .mhw-icon { transform: none; }

#mhw-section .mhw-icon-svg { width: 32px; height: 32px; }

/* Step number as a small badge on the icon. */
#mhw-section .mhw-num {
	position: absolute;
	top: -5px;
	left: -5px;
	display: grid;
	place-items: center;
	min-width: 31px;
	height: 31px;
	padding: 0 6px;
	border: 3px solid var(--mhw-from);
	border-radius: 999px;
	background: var(--mhw-text);
	color: var(--mhw-accent);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
}

#mhw-section .mhw-num.is-solo { position: static; flex: none; min-width: 52px; height: 52px; margin: 0 0 18px; border: 0; font-size: 22px; }

#mhw-section .mhw-text { position: relative; }

#mhw-section .mhw-step-title {
	margin: 0 0 10px;
	color: var(--mhw-text);
	font-family: inherit;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.5;
}

#mhw-section .mhw-desc {
	max-width: 270px;
	margin: 0 auto;
	color: rgba(var(--mhw-text-rgb), .84);
	font-size: 14.5px;
	line-height: 1.8;
}

/* Small glass chip in the gap between cards, pointing to the next step (left in RTL). */
#mhw-section .mhw-arrow {
	position: absolute;
	z-index: 2;
	top: 68px;
	left: -30px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(var(--mhw-text-rgb), .3);
	border-radius: 50%;
	background: var(--mhw-to);
	color: var(--mhw-text);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .24);
}

#mhw-section .mhw-arrow-svg { width: 8px; height: 14px; }
#mhw-section .mhw-pane.is-many .mhw-arrow { display: none; }

/* ----------------------------------------------------------------- CTA */
#mhw-section .mhw-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px 8px 26px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--mhw-text);
	color: var(--mhw-accent);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
	transition: transform .3s var(--mhw-ease), box-shadow .3s ease;
}

/* A light sweep across the button every few seconds. */
#mhw-section .mhw-cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
	transform: translateX(-150%) skewX(-20deg);
	animation: mhwShine 4.5s ease-in-out 1.5s infinite;
	pointer-events: none;
}
#mhw-section.mhw-still .mhw-cta::after { display: none; }

@keyframes mhwShine {
	0%, 70% { transform: translateX(-150%) skewX(-20deg); }
	100% { transform: translateX(330%) skewX(-20deg); }
}

#mhw-section .mhw-cta:hover,
#mhw-section .mhw-cta:focus { color: var(--mhw-accent); text-decoration: none; transform: translateY(-3px); box-shadow: 0 20px 36px -12px rgba(0, 0, 0, .55); }

#mhw-section .mhw-cta-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mhw-from), var(--mhw-to));
	color: var(--mhw-text);
}

#mhw-section .mhw-cta-svg { width: 17px; height: 17px; }
#mhw-section .mhw-cta-arrow { flex: none; width: 15px; height: 15px; transition: transform .3s var(--mhw-ease); }
#mhw-section .mhw-cta:hover .mhw-cta-arrow { transform: translateX(-5px); }

@keyframes mhwIn {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* A short glow on the target after a button scrolls to it. */
.mhw-flash { animation: mhwFlash 1.4s ease; }
#msh-panel.mhw-flash { border-radius: 16px; }
@keyframes mhwFlash {
	0% { box-shadow: 0 0 0 0 rgba(3, 93, 205, .55); }
	60% { box-shadow: 0 0 0 10px rgba(3, 93, 205, 0); }
	100% { box-shadow: 0 0 0 0 rgba(3, 93, 205, 0); }
}

/* -------------------------------------------------------------- tablet */
@media (max-width: 1024px) and (min-width: 769px) {
	#mhw-section .mhw-steps { gap: 22px; }
	#mhw-section .mhw-card { padding: 30px 18px 26px; }
	#mhw-section .mhw-arrow { left: -26px; }
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 768px) {
	#mhw-section { padding: calc(var(--mhw-pad) * .72) 16px; }
	#mhw-section .mhw-title { font-size: calc(var(--mhw-title) * .76); }
	#mhw-section .mhw-subtitle { font-size: 15.5px; }
	#mhw-section .mhw-head { margin-bottom: 24px; }
	#mhw-section .mhw-switch { margin-bottom: 30px; }
	#mhw-section .mhw-tab { padding: 10px 22px; font-size: 15px; }
	#mhw-section .mhw-pulse { top: 8px; height: 46px; margin-top: 0; opacity: .8; }
	#mhw-section .mhw-steps,
	#mhw-section .mhw-pane.is-many .mhw-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 440px; margin-bottom: 34px; }
	/* Cards become rows: icon on the side, text next to it. */
	#mhw-section .mhw-card { flex-direction: row; align-items: center; gap: 16px; padding: 20px 18px; text-align: right; }
	#mhw-section .mhw-text { flex: 1; min-width: 0; }
	#mhw-section .mhw-step-title { margin-bottom: 4px; font-size: 17px; }
	#mhw-section .mhw-desc { max-width: none; font-size: 13.5px; line-height: 1.75; }
	#mhw-section .mhw-icon { width: 64px; height: 64px; margin: 0; }
	#mhw-section.mhw-icon-glass .mhw-icon { border-radius: 20px; }
	#mhw-section .mhw-icon-svg { width: 25px; height: 25px; }
	#mhw-section .mhw-num { min-width: 26px; height: 26px; font-size: 12.5px; }
	#mhw-section .mhw-num.is-solo { min-width: 46px; height: 46px; margin: 0; }
	#mhw-section .mhw-ghost { display: none; }
	#mhw-section .mhw-arrow { top: auto; bottom: -28px; left: 50%; margin-left: -15px; transform: rotate(-90deg); }
	#mhw-section .mhw-pane.is-many .mhw-arrow { display: grid; }
	#mhw-section .mhw-cta { padding: 7px 8px 7px 20px; font-size: 15.5px; }
	#mhw-section .mhw-cta-icon { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	#mhw-section .mhw-pane.is-active,
	#mhw-section .mhw-pane.is-active .mhw-step,
	#mhw-section .mhw-pulse-win,
	#mhw-section .mhw-pulse-glow,
	#mhw-section .mhw-beat-dot::after,
	#mhw-section .mhw-icon::after,
	#mhw-section .mhw-cta::after { animation: none !important; }
	#mhw-section .mhw-pulse-win { display: none; }
	#mhw-section .mhw-card,
	#mhw-section .mhw-icon,
	#mhw-section .mhw-cta,
	#mhw-section .mhw-glider { transition: none; }
}