/**
 * File: assets/css/front-page/visual-fixes.css
 * Description: Small homepage visual fixes from review pass.
 *
 * MAGIDA HOMEPAGE VISUAL FIX PASS 18.0:
 * - Keeps fixes isolated from the stable homepage structure.
 * - Aligns the hero mockup with the heading area on desktop.
 * - Moves the hero stack badge so it no longer blocks the browser mockup.
 * - Beautifies the credibility strip below the hero.
 * - Reserves space for service-card graphics so long headings do not collide with artwork.
 * - Centers FAQ toggle icons by replacing font symbols with SVG controls.
 *
 * MAGIDA HOMEPAGE VISUAL FIX PASS 18.1:
 * - Adds safe bottom breathing room to the mobile hero browser card.
 * - Keeps service coded graphics at a consistent desktop/mobile scale.
 *
 * MAGIDA HOMEPAGE VISUAL FIX PASS 18.2:
 * - Makes the service-card browser and phone graphics use the same visual lane width.
 * - Adds stable mobile/desktop graphic bars so one service card does not look shorter than the other.
 * - Gives the mobile hero browser more internal room so the mockup lines no longer clip at the bottom.
 */

/* --------------------------------------------------------------------------
   Hero alignment and floating badge cleanup
   -------------------------------------------------------------------------- */

@media (min-width: 1181px) {
	.magida-home-hero__inner {
		/* MAGIDA PASS 18.0: Start-align the two hero columns instead of centering the visual too low. */
		align-items: start;
	}

	.magida-home-hero__visual {
		/* MAGIDA PASS 18.0: Brings the right mockup top closer to the main heading top, not the eyebrow top. */
		margin-top: clamp(68px, 5.6vw, 92px);
	}

	.magida-home-hero__browser--main {
		/* MAGIDA PASS 18.0: Removes the extra browser offset that made the right card feel lower. */
		top: 0;
	}

	.magida-home-hero__floating-card--stack {
		/* MAGIDA PASS 18.0: Dock the stack badge above the browser so it does not cover the top bar/content. */
		top: -58px;
		left: clamp(24px, 3vw, 42px);
		max-width: 238px;
		padding: 12px 16px;
	}
}

@media (max-width: 1180px) {
	.magida-home-hero__visual {
		/* MAGIDA PASS 18.0: Tablet/mobile stacked hero keeps the existing safe vertical flow. */
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	.magida-home-hero__mark {
		/* MAGIDA PASS 18.0: Prevent the decorative M badge from floating over mobile mockup text. */
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Premium credibility strip below hero
   -------------------------------------------------------------------------- */

.magida-credibility {
	/* MAGIDA PASS 18.0: Gives the strip breathing room without changing section order. */
	padding-block: clamp(18px, 3vw, 34px);
}

.magida-credibility__inner {
	/* MAGIDA PASS 18.0: Converts the simple text row into a polished glass signal strip. */
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba(5, 223, 254, 0.14);
	border-radius: calc(var(--magida-radius-xl) + 4px);
	background:
		radial-gradient(
			circle at 10% 0%,
			rgba(5, 223, 254, 0.13),
			transparent 30%
		),
		radial-gradient(
			circle at 88% 100%,
			rgba(124, 106, 251, 0.14),
			transparent 32%
		),
		rgba(8, 12, 22, 0.76);
	box-shadow:
		0 22px 70px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.045);
	backdrop-filter: blur(18px);
}

.magida-credibility__inner::before {
	/* MAGIDA PASS 18.0: Thin cyan/violet highlight line to match the site language. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	content: "";
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.88),
		rgba(124, 106, 251, 0.7),
		transparent
	);
}

.magida-credibility__item {
	/* MAGIDA PASS 18.0: Icon + text layout reads better than a flat text-only strip. */
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	min-height: 112px;
	padding: clamp(18px, 2.4vw, 26px);
	color: var(--magida-text-soft);
}

.magida-credibility__item + .magida-credibility__item::before {
	/* MAGIDA PASS 18.0: Replaces the old dot divider with a subtle vertical divider. */
	position: absolute;
	top: 22%;
	left: 0;
	display: block;
	width: 1px;
	height: 56%;
	content: "";
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		180deg,
		transparent,
		rgba(190, 189, 229, 0.18),
		transparent
	);
}

.magida-credibility__icon {
	/* MAGIDA PASS 18.0: Small framed icon adds human-readable meaning without using extra assets. */
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: 16px;
	background:
		linear-gradient(
			135deg,
			rgba(5, 223, 254, 0.1),
			rgba(124, 106, 251, 0.08)
		),
		rgba(255, 255, 255, 0.03);
	box-shadow: inset 0 0 24px rgba(5, 223, 254, 0.045);
	flex: 0 0 auto;
}

.magida-credibility__icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: var(--magida-cyan);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.magida-credibility__copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.magida-credibility__copy small {
	/* MAGIDA PASS 18.0: Adds a small label for premium structure. */
	color: var(--magida-cyan);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.magida-credibility__copy strong {
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: clamp(0.95rem, 1.05vw, 1.08rem);
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Service card graphic consistency
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
	.magida-service-panel__number,
	.magida-service-panel__title,
	.magida-service-panel__description {
		/* MAGIDA PASS 18.0: Reserve a stable art lane so long headings do not run under graphics. */
		max-width: calc(100% - min(36%, 190px) - 36px);
	}

	.magida-service-panel__visual {
		/* MAGIDA PASS 18.0: Normalizes the artwork lane across cards. */
		top: 30px;
		right: 30px;
		display: grid;
		place-items: start end;
		width: min(34%, 186px);
		height: 124px;
		z-index: 0;
	}

	.magida-service-panel__title,
	.magida-service-panel__description,
	.magida-service-panel__points,
	.magida-service-panel .magida-link,
	.magida-service-panel__number {
		/* MAGIDA PASS 18.0: Keeps content above any decorative artwork layer. */
		position: relative;
		z-index: 1;
	}

	.magida-service-panel__browser,
	.magida-service-panel__phone {
		width: 100%;
	}

	.magida-service-panel__phone {
		width: 76px;
		justify-self: end;
	}
}

@media (max-width: 900px) {
	.magida-service-panel__number,
	.magida-service-panel__title,
	.magida-service-panel__description {
		/* MAGIDA PASS 18.0: Tablet keeps full text width once layout starts tightening. */
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   FAQ SVG icon centering
   -------------------------------------------------------------------------- */

.magida-faq-item summary {
	/* MAGIDA PASS 18.0: Grid keeps the question and icon centered on all text lengths. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
}

.magida-faq-item summary::after {
	/* MAGIDA PASS 18.0: Disable the old font-based +/- icon. */
	display: none !important;
	content: none !important;
}

.magida-faq-item__question {
	display: block;
	min-width: 0;
}

.magida-faq-item__icon {
	/* MAGIDA PASS 18.0: Dedicated round icon shell keeps plus/minus perfectly centered. */
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(5, 223, 254, 0.26);
	border-radius: var(--magida-radius-full);
	color: var(--magida-cyan);
	background: rgba(5, 223, 254, 0.045);
	box-shadow: inset 0 0 18px rgba(5, 223, 254, 0.04);
	flex: 0 0 auto;
}

.magida-faq-item__icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.magida-faq-item__icon-line--vertical {
	transform-origin: center;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.magida-faq-item[open] .magida-faq-item__icon-line--vertical {
	/* MAGIDA PASS 18.0: Open state becomes a clean minus icon. */
	opacity: 0;
	transform: scaleY(0);
}

@media (max-width: 900px) {
	.magida-credibility__inner {
		grid-template-columns: 1fr;
	}

	.magida-credibility__item {
		min-height: auto;
		padding: 18px 20px;
	}

	.magida-credibility__item + .magida-credibility__item::before {
		top: 0;
		left: 20px;
		width: calc(100% - 40px);
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(190, 189, 229, 0.18),
			transparent
		);
	}
}

@media (max-width: 560px) {
	.magida-credibility {
		padding-block: 16px 24px;
	}

	.magida-credibility__item {
		align-items: flex-start;
	}

	.magida-credibility__icon {
		width: 42px;
		height: 42px;
		border-radius: 14px;
	}

	.magida-faq-item summary {
		gap: 12px;
	}

	.magida-faq-item__icon {
		width: 28px;
		height: 28px;
	}
}

/* --------------------------------------------------------------------------
   Hero browser bottom breathing room
   -------------------------------------------------------------------------- */

.magida-home-hero__mock-content {
	/* MAGIDA PASS 18.1: Adds bottom breathing room so the hero browser copy no longer kisses the card edge. */
	padding-bottom: clamp(30px, 3.6vw, 44px);
}

@media (max-width: 768px) {
	.magida-home-hero__visual {
		/* MAGIDA PASS 18.1: The mobile visual stage is slightly taller so added card padding is not clipped. */
		height: 372px;
	}

	.magida-home-hero__browser--main {
		/* MAGIDA PASS 18.1: Replaces the tight 300px mobile card with a safer browser height. */
		height: 334px;
		min-height: 334px;
	}

	.magida-home-hero__mock-content {
		/* MAGIDA PASS 18.1: Gives the mockup text a clear bottom buffer on phone screens. */
		min-height: calc(334px - 48px);
		padding: 22px 20px 42px;
	}
}

@media (max-width: 420px) {
	.magida-home-hero__visual {
		/* MAGIDA PASS 18.1: Very narrow phones need a little extra safety for wrapping copy. */
		height: 384px;
	}

	.magida-home-hero__browser--main {
		height: 346px;
		min-height: 346px;
	}

	.magida-home-hero__mock-content {
		min-height: calc(346px - 48px);
		padding-bottom: 46px;
	}
}

/* --------------------------------------------------------------------------
   Mobile service-card graphic scale correction
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.magida-service-panel__visual {
		/* MAGIDA PASS 18.1: Stop mobile from stretching the coded artwork full-width. */
		position: relative;
		top: auto;
		right: auto;
		display: grid;
		place-items: start end;
		width: min(74vw, 230px);
		height: 124px;
		margin: 0 0 22px;
	}

	.magida-service-panel--website .magida-service-panel__visual {
		/* MAGIDA PASS 18.1: Browser artwork keeps the same compact card feel as desktop. */
		margin-right: auto;
	}

	.magida-service-panel--mobile .magida-service-panel__visual {
		/* MAGIDA PASS 18.1: Phone artwork stays phone-sized instead of inheriting the browser width. */
		width: 78px;
		height: 126px;
		margin-right: 0;
		margin-left: auto;
	}

	.magida-service-panel__browser {
		width: 100%;
		height: 124px;
	}

	.magida-service-panel__phone {
		width: 76px;
		height: 126px;
	}
}

@media (max-width: 520px) {
	.magida-service-panel__visual {
		/* MAGIDA PASS 18.1: Keeps the browser illustration neat inside narrow cards. */
		width: min(100%, 230px);
		height: 116px;
	}

	.magida-service-panel__browser {
		height: 116px;
	}

	.magida-service-panel--mobile .magida-service-panel__visual {
		width: 78px;
		height: 126px;
	}
}

/* --------------------------------------------------------------------------
   Service-card graphic equal-width correction
   -------------------------------------------------------------------------- */

.magida-service-panel__visual {
	/* MAGIDA PASS 18.2: One fixed visual lane keeps website/app graphics equal in desktop cards. */
	width: min(34%, 232px);
}

.magida-service-panel__browser i:nth-of-type(1) {
	/* MAGIDA PASS 18.2: Top browser bar uses the same readable lane on all screens. */
	left: 16px;
	right: 16px;
}

.magida-service-panel__browser i:nth-of-type(2) {
	/* MAGIDA PASS 18.2: Bottom browser blocks now share the same total width as the top bar. */
	left: 16px;
	width: calc(50% - 24px);
}

.magida-service-panel__browser i:nth-of-type(3) {
	/* MAGIDA PASS 18.2: Pairs with the left block so the graphic no longer looks uneven. */
	right: 16px;
	width: calc(50% - 24px);
}

.magida-service-panel--mobile .magida-service-panel__visual {
	/* MAGIDA PASS 18.2: The app graphic gets the same lane length as the browser graphic instead of a tiny phone-only width. */
	position: absolute;
	top: 30px;
	right: 30px;
	display: block;
	width: min(34%, 232px);
	height: 124px;
	margin: 0;
}

.magida-service-panel--mobile .magida-service-panel__visual::before,
.magida-service-panel--mobile .magida-service-panel__visual::after {
	/* MAGIDA PASS 18.2: Decorative app bars fill the lane so the mobile-app card balances with the website card. */
	position: absolute;
	left: 0;
	display: block;
	width: calc(100% - 96px);
	content: "";
	border-radius: var(--magida-radius-md);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.2),
		rgba(124, 106, 251, 0.1)
	);
}

.magida-service-panel--mobile .magida-service-panel__visual::before {
	top: 34px;
	height: 24px;
}

.magida-service-panel--mobile .magida-service-panel__visual::after {
	bottom: 26px;
	height: 34px;
}

.magida-service-panel--mobile .magida-service-panel__phone {
	/* MAGIDA PASS 18.2: Phone stays as the anchor icon while the full graphic lane supplies equal visual length. */
	position: absolute;
	top: 0;
	right: 0;
	width: 76px;
	height: 124px;
	margin: 0;
}

@media (max-width: 768px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		/* MAGIDA PASS 18.2: Mobile cards use the same equal-width graphic lane for both service types. */
		position: relative;
		top: auto;
		right: auto;
		width: min(100%, 240px);
		height: 124px;
		margin: 0 0 22px;
	}

	.magida-service-panel--mobile .magida-service-panel__visual {
		/* MAGIDA PASS 18.2: App graphic aligns left like the browser graphic, avoiding the empty-card look. */
		margin-right: auto;
		margin-left: 0;
	}

	.magida-service-panel__browser {
		/* MAGIDA PASS 18.2: Browser shell matches the shared visual lane height on phones. */
		height: 124px;
	}

	.magida-service-panel--mobile .magida-service-panel__phone {
		/* MAGIDA PASS 18.2: Keeps phone framed inside the equal-width graphic lane. */
		width: 76px;
		height: 124px;
	}
}

@media (max-width: 520px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		/* MAGIDA PASS 18.2: Narrow phones still keep both graphics the same width. */
		width: min(100%, 224px);
		height: 118px;
	}

	.magida-service-panel__browser {
		height: 118px;
	}

	.magida-service-panel--mobile .magida-service-panel__phone {
		width: 74px;
		height: 118px;
	}

	.magida-service-panel--mobile .magida-service-panel__visual::before,
	.magida-service-panel--mobile .magida-service-panel__visual::after {
		width: calc(100% - 92px);
	}
}

/* --------------------------------------------------------------------------
   Mobile hero browser clipping correction
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.magida-home-hero__visual {
		/* MAGIDA PASS 18.2: Extra stage height prevents the hero browser from clipping its lower mockup lines. */
		height: 404px;
	}

	.magida-home-hero__browser--main {
		/* MAGIDA PASS 18.2: The browser card is tall enough for the title, copy, lines, and real bottom padding. */
		height: 364px;
		min-height: 364px;
	}

	.magida-home-hero__mock-content {
		/* MAGIDA PASS 18.2: Keeps content comfortably inside the browser shell instead of touching the bottom border. */
		min-height: calc(364px - 48px);
		padding: 22px 20px 48px;
	}

	.magida-home-hero__mock-lines {
		/* MAGIDA PASS 18.2: Pulls the coded lines upward slightly so the bottom glow remains visible. */
		gap: 9px;
		max-width: 100%;
		margin-top: 18px;
		padding-bottom: 8px;
	}

	.magida-home-hero__mock-lines i {
		/* MAGIDA PASS 18.2: Slimmer mobile lines keep the mockup premium without crowding. */
		height: 9px;
	}
}

@media (max-width: 420px) {
	.magida-home-hero__visual {
		/* MAGIDA PASS 18.2: Very narrow screens need the safest browser stage. */
		height: 416px;
	}

	.magida-home-hero__browser--main {
		height: 376px;
		min-height: 376px;
	}

	.magida-home-hero__mock-content {
		min-height: calc(376px - 48px);
		padding-bottom: 52px;
	}
}

/* --------------------------------------------------------------------------
   Service-card app graphic containment correction
   -------------------------------------------------------------------------- */

.magida-service-panel--mobile .magida-service-panel__visual {
	/* MAGIDA PASS 18.3: Turns the mobile-app artwork lane into a real contained mini preview, matching the website browser container length. */
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid rgba(5, 223, 254, 0.16);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.035);
	box-shadow: inset 0 0 36px rgba(5, 223, 254, 0.06);
}

.magida-service-panel--mobile .magida-service-panel__visual::before,
.magida-service-panel--mobile .magida-service-panel__visual::after {
	/* MAGIDA PASS 18.3: Pulls the app bars inside the new contained lane so they no longer look detached from the phone graphic. */
	left: 16px;
	width: calc(100% - 118px);
}

.magida-service-panel--mobile .magida-service-panel__visual::before {
	/* MAGIDA PASS 18.3: Aligns the first app bar with the inner padding of the contained graphic. */
	top: 34px;
}

.magida-service-panel--mobile .magida-service-panel__visual::after {
	/* MAGIDA PASS 18.3: Keeps the lower app block inside the same contained preview lane. */
	bottom: 28px;
}

.magida-service-panel--mobile .magida-service-panel__phone {
	/* MAGIDA PASS 18.3: Keeps the phone inside the app-preview container instead of reading as a separate external icon. */
	top: 10px;
	right: 12px;
	height: calc(100% - 20px);
}

@media (max-width: 520px) {
	.magida-service-panel--mobile .magida-service-panel__visual::before,
	.magida-service-panel--mobile .magida-service-panel__visual::after {
		/* MAGIDA PASS 18.3: Narrow phones keep the app bars safely inside the contained lane. */
		left: 14px;
		width: calc(100% - 112px);
	}

	.magida-service-panel--mobile .magida-service-panel__phone {
		/* MAGIDA PASS 18.3: Matches the phone inset to the smaller mobile preview container. */
		right: 10px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.0 — Hero Composition Cleanup
   --------------------------------------------------------------------------
   Keeps the approved homepage hero direction while tightening first-screen
   hierarchy, calming the cinematic background, and giving the video preview a
   cleaner role as the main right-side visual.
*/

.magida-home-hero {
	min-height: min(700px, calc(100vh - var(--magida-header-height)));
	padding-block: clamp(54px, 6.4vw, 84px) clamp(48px, 5.2vw, 68px);
}

.magida-home-hero::before {
	background:
		radial-gradient(
			circle at 16% 34%,
			rgba(5, 223, 254, 0.105),
			transparent 24rem
		),
		radial-gradient(
			circle at 86% 20%,
			rgba(124, 106, 251, 0.095),
			transparent 27rem
		),
		linear-gradient(180deg, rgba(12, 15, 26, 0.5), rgba(6, 7, 11, 0.72));
}

.magida-home-hero::after {
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	height: clamp(120px, 18vw, 220px);
	background: linear-gradient(180deg, transparent, rgba(6, 7, 11, 0.94));
	content: "";
	pointer-events: none;
}

.magida-home-hero__inner {
	gap: clamp(34px, 5vw, 70px);
}

.magida-home-hero__content {
	max-width: 720px;
}

.magida-home-hero__title {
	margin-top: 16px;
	font-size: clamp(3rem, 6.35vw, 5.62rem);
	line-height: 1.02;
}

.magida-home-hero__intro {
	max-width: 620px;
	margin-top: 20px;
	font-size: clamp(1.04rem, 1.75vw, 1.18rem);
}

.magida-home-hero__actions {
	margin-top: 26px;
}

.magida-home-hero__microcopy {
	margin-top: 16px;
}

.magida-home-hero--video .magida-home-hero__media-frame::after {
	background:
		linear-gradient(180deg, rgba(6, 7, 11, 0.18), rgba(6, 7, 11, 0.58)),
		linear-gradient(
			90deg,
			rgba(6, 7, 11, 0.16),
			transparent 42%,
			rgba(6, 7, 11, 0.18)
		),
		radial-gradient(
			circle at 78% 18%,
			rgba(5, 223, 254, 0.13),
			transparent 15rem
		);
}

.magida-home-hero--video .magida-home-hero__media-caption {
	right: 28px;
	bottom: 26px;
	max-width: min(58%, 300px);
	background: rgba(6, 7, 11, 0.62);
}

.magida-home-hero--video .magida-home-hero__floating-card--stack {
	z-index: 4;
}

.magida-home-hero--video .magida-home-hero__device {
	right: 30px;
	bottom: 16px;
	width: min(35%, 168px);
	min-height: 198px;
	padding: 17px;
}

.magida-home-hero--video .magida-home-hero__device-media,
.magida-home-hero--video .magida-home-hero__device-fallback {
	min-height: 154px;
}

.magida-home-hero--video .magida-home-hero__device-image {
	height: 154px;
}

.magida-home-hero--video .magida-home-hero__mark {
	left: 36px;
	bottom: 46px;
	width: 78px;
	height: 78px;
}

@media (min-width: 1181px) {
	.magida-home-hero__visual {
		margin-top: clamp(56px, 4.6vw, 72px);
	}
}

@media (min-width: 1440px) {
	.magida-home-hero__title {
		font-size: clamp(5.05rem, 5.65vw, 5.85rem);
	}
}

@media (max-width: 1180px) {
	.magida-home-hero {
		min-height: auto;
	}

	.magida-home-hero__title {
		font-size: clamp(3rem, 9vw, 5.2rem);
	}
}

@media (max-width: 768px) {
	.magida-home-hero {
		padding-block: 52px 58px;
	}

	.magida-home-hero__title {
		font-size: clamp(3rem, 15vw, 4.75rem);
	}

	.magida-home-hero__intro {
		margin-top: 18px;
	}

	.magida-home-hero__actions {
		margin-top: 24px;
	}

	.magida-home-hero--video .magida-home-hero__media-caption {
		left: 18px;
		right: 18px;
		bottom: 18px;
		max-width: none;
		padding: 13px 14px;
	}

	.magida-home-hero--video .magida-home-hero__device {
		right: 14px;
		bottom: 12px;
		width: min(42%, 150px);
		min-height: 174px;
		padding: 14px;
	}

	.magida-home-hero--video .magida-home-hero__device-media,
	.magida-home-hero--video .magida-home-hero__device-fallback {
		min-height: 132px;
	}

	.magida-home-hero--video .magida-home-hero__device-image {
		height: 132px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.1 — Hero Visual Layering Cleanup
   --------------------------------------------------------------------------
   Keeps the right-side video as the hero's main visual feature by removing the
   extra Featured Work caption layer in video mode and simplifying the stacked
   tablet composition.
*/

.magida-home-hero--video .magida-home-hero__media-caption {
	/* MAGIDA PASS 24.1.1: Video already acts as the featured-work proof, so the extra caption card is removed to prevent overlap with the phone preview. */
	display: none;
}

@media (min-width: 1181px) {
	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.1: Pull the phone inward so it feels intentionally layered with the browser, not attached to the edge. */
		right: clamp(36px, 4.8vw, 58px);
		bottom: -6px;
		width: min(32%, 156px);
		min-height: 188px;
	}

	.magida-home-hero--video .magida-home-hero__device-media,
	.magida-home-hero--video .magida-home-hero__device-fallback {
		min-height: 144px;
	}

	.magida-home-hero--video .magida-home-hero__device-image {
		height: 144px;
	}

	.magida-home-hero--video .magida-home-hero__mark {
		/* MAGIDA PASS 24.1.1: Keep the small brand tile away from the phone layer. */
		left: 34px;
		bottom: 38px;
	}
}

@media (max-width: 1180px) {
	.magida-home-hero--video .magida-home-hero__visual {
		/* MAGIDA PASS 24.1.1: Adds breathing room between the CTA/microcopy and the stacked video frame on tablet. */
		margin-top: 8px;
	}

	.magida-home-hero--video .magida-home-hero__floating-card--stack {
		/* MAGIDA PASS 24.1.1: Tablet badge is anchored cleanly to the browser instead of floating too far into the text area. */
		top: -34px;
		left: 22px;
		max-width: 222px;
		padding: 11px 14px;
	}

	.magida-home-hero--video .magida-home-hero__floating-card--stack strong {
		font-size: 0.9rem;
	}
}

@media (max-width: 900px) {
	.magida-home-hero--video .magida-home-hero__device,
	.magida-home-hero--video .magida-home-hero__mark {
		/* MAGIDA PASS 24.1.1: Narrow tablet/mobile hero keeps the video and stack badge only to avoid crowded layers. */
		display: none;
	}

	.magida-home-hero--video .magida-home-hero__visual {
		height: auto;
		min-height: 0;
	}

	.magida-home-hero--video .magida-home-hero__browser--main {
		height: auto;
		min-height: 0;
	}

	.magida-home-hero--video .magida-home-hero__media-frame {
		min-height: clamp(250px, 48vw, 390px);
	}

	.magida-home-hero--video .magida-home-hero__media {
		height: clamp(250px, 48vw, 390px);
	}
}

@media (max-width: 560px) {
	.magida-home-hero--video .magida-home-hero__floating-card--stack {
		/* MAGIDA PASS 24.1.1: Very small screens keep the badge compact and tucked into the video frame. */
		top: -26px;
		left: 14px;
		max-width: calc(100% - 28px);
		padding: 10px 12px;
	}

	.magida-home-hero--video .magida-home-hero__floating-card--stack span {
		font-size: 0.58rem;
	}

	.magida-home-hero--video .magida-home-hero__floating-card--stack strong {
		font-size: 0.78rem;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.2 — Hero Responsive Media Fix
   --------------------------------------------------------------------------
   Gives the video browser a real responsive flow on tablet/mobile instead of
   keeping desktop absolute positioning. This prevents the video from collapsing
   into a thin clipped strip, restores the logo tile on tablet, and makes the
   desktop phone preview feel more substantial.
*/

.magida-home-hero--video .magida-home-hero__media-frame--video {
	/* MAGIDA PASS 24.1.2: Keep the video card stable across browsers. */
	isolation: isolate;
}

.magida-home-hero--video .magida-home-hero__media--video {
	/* MAGIDA PASS 24.1.2: Suppress visible native video UI in decorative hero mode. */
	pointer-events: none;
}

.magida-home-hero--video
	.magida-home-hero__media--video::-webkit-media-controls,
.magida-home-hero--video
	.magida-home-hero__media--video::-webkit-media-controls-panel,
.magida-home-hero--video
	.magida-home-hero__media--video::-webkit-media-controls-enclosure,
.magida-home-hero--video
	.magida-home-hero__media--video::-webkit-media-controls-overlay-play-button,
.magida-home-hero--video
	.magida-home-hero__media--video::-webkit-media-controls-start-playback-button {
	display: none !important;
	opacity: 0 !important;
}

@media (min-width: 1181px) {
	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.2: Wider desktop floating preview so it reads as a deliberate product card, not a tiny sticker. */
		right: clamp(30px, 3.6vw, 54px);
		bottom: -34px;
		width: clamp(180px, 13.5vw, 230px);
		min-height: 246px;
		padding: 15px;
		z-index: 5;
	}

	.magida-home-hero--video .magida-home-hero__device-media,
	.magida-home-hero--video .magida-home-hero__device-fallback {
		min-height: 198px;
	}

	.magida-home-hero--video .magida-home-hero__device-image {
		height: 198px;
	}

	.magida-home-hero--video .magida-home-hero__mark {
		/* MAGIDA PASS 24.1.2: Restore clear brand presence on the browser frame. */
		left: 38px;
		bottom: -8px;
		display: grid;
		width: 82px;
		height: 82px;
		z-index: 4;
	}
}

@media (max-width: 1180px) {
	.magida-home-hero--video {
		/* MAGIDA PASS 24.1.2: Extra lower padding protects the stacked media from the next section. */
		padding-bottom: clamp(64px, 8vw, 92px);
	}

	.magida-home-hero--video .magida-home-hero__inner {
		gap: clamp(34px, 5vw, 56px);
	}

	.magida-home-hero--video .magida-home-hero__visual {
		/* MAGIDA PASS 24.1.2: The browser must participate in normal flow on stacked layouts. */
		height: auto;
		min-height: 0;
		margin-top: clamp(22px, 4vw, 42px);
		padding-bottom: 0;
	}

	.magida-home-hero--video .magida-home-hero__browser--main {
		/* MAGIDA PASS 24.1.2: Fixes tablet/mobile clipping caused by an absolute browser inside an auto-height visual wrapper. */
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		height: auto;
		min-height: 0;
		animation: none;
	}

	.magida-home-hero--video .magida-home-hero__media-frame {
		/* MAGIDA PASS 24.1.2: Stable responsive video body below the browser chrome. */
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.magida-home-hero--video .magida-home-hero__video-poster,
	.magida-home-hero--video .magida-home-hero__media {
		height: 100%;
		min-height: 0;
		object-fit: cover;
		object-position: center center;
	}

	.magida-home-hero--video .magida-home-hero__floating-card--stack {
		/* MAGIDA PASS 24.1.2: Badge docks to the frame without stealing text space. */
		top: -34px;
		left: clamp(16px, 4vw, 28px);
		z-index: 6;
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.2: Tablet uses the main video and logo only; phone overlap is too crowded here. */
		display: none;
	}

	.magida-home-hero--video .magida-home-hero__mark {
		/* MAGIDA PASS 24.1.2: Restore the logo tile on tablet, scaled down and tucked into the lower-left. */
		display: grid;
		left: 24px;
		right: auto;
		bottom: 22px;
		width: 64px;
		height: 64px;
		z-index: 5;
	}

	.magida-home-hero--video .magida-home-hero__mark-logo {
		width: min(76%, 48px);
		max-height: 48px;
	}
}

@media (max-width: 640px) {
	.magida-home-hero--video {
		padding-block: 48px 70px;
	}

	.magida-home-hero--video .magida-home-hero__visual {
		margin-top: 28px;
	}

	.magida-home-hero--video .magida-home-hero__browser-top {
		height: 40px;
		padding-inline: 14px;
	}

	.magida-home-hero--video .magida-home-hero__media-frame {
		/* MAGIDA PASS 24.1.2: Mobile gets a complete video card, not a clipped strip. */
		aspect-ratio: 16 / 10;
	}

	.magida-home-hero--video .magida-home-hero__device,
	.magida-home-hero--video .magida-home-hero__mark {
		/* MAGIDA PASS 24.1.2: Small phones stay clean: main video + stack badge only. */
		display: none;
	}

	.magida-home-hero--video .magida-home-hero__floating-card--stack {
		top: -25px;
		left: 12px;
		max-width: calc(100% - 24px);
		padding: 9px 11px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.3 — Hero Overlay Position Refinement
   --------------------------------------------------------------------------
   Final targeted overlay cleanup after responsive media testing:
   - Keep the Magida logo tile visually inside the desktop video/browser frame.
   - Make the floating project image card wider and less phone-tall on desktop.
   - Move the tablet stack badge away from the browser dots.
   - Leave the small-phone composition unchanged because it is already clean.
*/

@media (min-width: 1181px) {
	.magida-home-hero--video .magida-home-hero__mark {
		/* MAGIDA PASS 24.1.3: Place the brand tile inside the video/browser frame instead of hanging below it. */
		left: clamp(34px, 4vw, 56px);
		bottom: clamp(66px, 6vw, 86px);
		display: grid;
		width: clamp(72px, 5.5vw, 86px);
		height: clamp(72px, 5.5vw, 86px);
		z-index: 6;
	}

	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.3: Turn the supporting image into a wider preview card instead of a tall phone-like block. */
		right: clamp(32px, 4.1vw, 62px);
		bottom: clamp(38px, 4.5vw, 58px);
		width: clamp(250px, 17vw, 318px);
		min-height: 0;
		padding: 12px;
		border-radius: 26px;
		z-index: 7;
	}

	.magida-home-hero--video .magida-home-hero__device-speaker {
		width: 46px;
		margin-block: 2px 10px;
	}

	.magida-home-hero--video .magida-home-hero__device-media,
	.magida-home-hero--video .magida-home-hero__device-fallback {
		min-height: 0;
		aspect-ratio: 16 / 10;
		border-radius: 20px;
	}

	.magida-home-hero--video .magida-home-hero__device-image {
		height: 100%;
		min-height: 0;
		object-fit: cover;
	}
}

@media (min-width: 641px) and (max-width: 1180px) {
	.magida-home-hero--video .magida-home-hero__floating-card--stack {
		/* MAGIDA PASS 24.1.3: Tablet badge moves to the top-right so the browser dots remain visible. */
		top: 12px;
		right: clamp(14px, 3vw, 24px);
		left: auto;
		max-width: min(240px, calc(100% - 120px));
		z-index: 7;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.4 — Hero Preview Card Timed Fade
   --------------------------------------------------------------------------
   Keeps the desktop layered first impression, then lets the main video breathe
   by fading the supporting preview image card out once. Tablet/mobile stay on
   the existing simplified layouts.
*/

@keyframes magidaHeroPreviewCardTimedFade {
	0%,
	82% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		visibility: visible;
	}

	100% {
		opacity: 0;
		transform: translate3d(14px, 10px, 0) scale(0.985);
		visibility: hidden;
	}
}

@media (min-width: 1181px) {
	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.4: The preview card introduces the layered desktop hero, then clears the video after a short pause. */
		animation: magidaHeroPreviewCardTimedFade 5.1s ease forwards;
		pointer-events: none;
		will-change: opacity, transform, visibility;
	}
}

@media (min-width: 1181px) and (prefers-reduced-motion: reduce) {
	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.4: Reduced-motion users get the cleaner static video composition without the timed movement. */
		display: none;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.5 — Credibility Strip Polish Retry
   -------------------------------------------------------------------------- */

.magida-credibility {
	/* MAGIDA PASS 24.1.5: Real retry after the first package produced no effective diff; tighten the trust strip so it reads as a calm bridge after the hero. */
	padding-block: clamp(14px, 2.2vw, 24px);
}

.magida-credibility__inner {
	/* MAGIDA PASS 24.1.5: Make the strip visibly calmer and more compact than the earlier tall glass-panel treatment. */
	border-color: rgba(5, 223, 254, 0.11);
	border-radius: 20px;
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035),
			rgba(255, 255, 255, 0.015)
		),
		rgba(7, 10, 18, 0.72);
	box-shadow:
		0 16px 44px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.magida-credibility__inner::before {
	/* MAGIDA PASS 24.1.5: Keep the accent line, but make it quieter so the hero remains the main visual moment. */
	height: 1px;
	opacity: 0.68;
}

.magida-credibility__item {
	/* MAGIDA PASS 24.1.5: Reduces the previous 112px card height into a compact credibility signal row. */
	gap: 12px;
	min-height: 84px;
	padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
}

.magida-credibility__item + .magida-credibility__item::before {
	/* MAGIDA PASS 24.1.5: Shorter dividers match the more compact strip height. */
	top: 26%;
	height: 48%;
	background: linear-gradient(
		180deg,
		transparent,
		rgba(190, 189, 229, 0.14),
		transparent
	);
}

.magida-credibility__icon {
	/* MAGIDA PASS 24.1.5: Smaller icons reduce visual weight immediately below the hero. */
	width: 38px;
	height: 38px;
	border-radius: 13px;
	border-color: rgba(5, 223, 254, 0.15);
	box-shadow: inset 0 0 18px rgba(5, 223, 254, 0.035);
}

.magida-credibility__icon svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.7;
}

.magida-credibility__copy {
	gap: 3px;
}

.magida-credibility__copy small {
	font-size: 0.62rem;
	letter-spacing: 0.14em;
}

.magida-credibility__copy strong {
	font-size: clamp(0.9rem, 0.96vw, 1rem);
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.magida-credibility__inner {
		/* MAGIDA PASS 24.1.5: Tablet uses a balanced wrap instead of squeezing three full cards across. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.magida-credibility__item {
		min-height: 78px;
	}

	.magida-credibility__item:nth-child(3) {
		grid-column: 1 / -1;
	}

	.magida-credibility__item:nth-child(3)::before {
		display: none;
	}
}

@media (max-width: 640px) {
	.magida-credibility {
		padding-block: 14px 20px;
	}

	.magida-credibility__inner {
		/* MAGIDA PASS 24.1.5: Phone layout becomes a readable stacked trust card with deliberate spacing. */
		grid-template-columns: 1fr;
		border-radius: 18px;
	}

	.magida-credibility__item {
		min-height: 0;
		padding: 15px 16px;
	}

	.magida-credibility__item + .magida-credibility__item::before {
		/* MAGIDA PASS 24.1.5: Horizontal separators work better than vertical rules in the stacked mobile card. */
		top: 0;
		left: 16px;
		right: 16px;
		display: block;
		width: auto;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(190, 189, 229, 0.13),
			transparent
		);
	}

	.magida-credibility__icon {
		width: 36px;
		height: 36px;
		border-radius: 12px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.7 — Core Services Icon Polish
   --------------------------------------------------------------------------
   Replaces the previous large coded mockup graphics with compact inline SVG
   icon panels so the service cards feel cleaner on desktop, tablet, and mobile.
*/

.magida-service-panel__visual,
.magida-service-panel--mobile .magida-service-panel__visual {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0 0 24px;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.magida-service-panel__visual::before,
.magida-service-panel__visual::after,
.magida-service-panel--mobile .magida-service-panel__visual::before,
.magida-service-panel--mobile .magida-service-panel__visual::after {
	display: none;
	content: none;
}

.magida-service-panel__icon {
	display: inline-grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border: 1px solid rgba(5, 223, 254, 0.22);
	border-radius: 22px;
	background:
		linear-gradient(
			135deg,
			rgba(5, 223, 254, 0.1),
			rgba(124, 106, 251, 0.075)
		),
		rgba(255, 255, 255, 0.03);
	box-shadow:
		inset 0 0 32px rgba(5, 223, 254, 0.045),
		0 18px 42px rgba(0, 0, 0, 0.18);
}

.magida-service-panel__icon svg {
	width: 50px;
	height: 50px;
	fill: none;
	stroke: var(--magida-cyan);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.magida-service-panel__icon circle {
	fill: rgba(5, 223, 254, 0.22);
	stroke: var(--magida-cyan);
}

.magida-home-services__note-visual {
	display: inline-grid;
	grid-template-columns: 1fr;
	place-items: center;
}

.magida-home-services__note-visual svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: var(--magida-cyan);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 901px) {
	.magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		position: absolute;
		top: 34px;
		right: 34px;
		z-index: 0;
		width: 88px;
		height: 88px;
		margin: 0;
	}

	.magida-service-panel__number,
	.magida-service-panel__title,
	.magida-service-panel__description {
		max-width: calc(100% - 128px);
	}
}

@media (max-width: 900px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		position: relative;
		top: auto;
		right: auto;
		width: 80px;
		height: 80px;
		margin: 0 0 22px;
	}

	.magida-service-panel__icon {
		width: 80px;
		height: 80px;
		border-radius: 20px;
	}

	.magida-service-panel__icon svg {
		width: 46px;
		height: 46px;
	}
}

@media (max-width: 520px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		width: 72px;
		height: 72px;
		margin-bottom: 20px;
	}

	.magida-service-panel__icon {
		width: 72px;
		height: 72px;
		border-radius: 18px;
	}

	.magida-service-panel__icon svg {
		width: 42px;
		height: 42px;
	}

	.magida-home-services__note-visual {
		width: 48px;
		height: 48px;
		border-radius: 16px;
	}

	.magida-home-services__note-visual svg {
		width: 26px;
		height: 26px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.7a — Core Services Mobile and Credibility Tablet Fix
   --------------------------------------------------------------------------
   Restores the approved tablet credibility strip rhythm and lightly tightens
   the new service SVG icon layout on tablet/mobile without changing desktop.
*/

@media (min-width: 641px) and (max-width: 1024px) {
	.magida-credibility__inner {
		/* MAGIDA PASS 24.1.7a: Restore the approved stacked tablet trust card after the icon polish package regressed the strip into a cramped wrap. */
		grid-template-columns: 1fr;
	}

	.magida-credibility__item {
		min-height: 0;
		padding: 17px 20px;
	}

	.magida-credibility__item:nth-child(3) {
		grid-column: auto;
	}

	.magida-credibility__item + .magida-credibility__item::before,
	.magida-credibility__item:nth-child(3)::before {
		top: 0;
		left: 20px;
		right: 20px;
		display: block;
		width: auto;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(190, 189, 229, 0.14),
			transparent
		);
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		/* MAGIDA PASS 24.1.7a: Tablet cards keep the cleaner icon system, but the badge now sits like a quiet corner accent instead of adding a tall empty band above the content. */
		position: absolute;
		top: 24px;
		right: 24px;
		width: 68px;
		height: 68px;
		margin: 0;
	}

	.magida-service-panel__icon {
		width: 68px;
		height: 68px;
		border-radius: 18px;
	}

	.magida-service-panel__icon svg {
		width: 38px;
		height: 38px;
	}

	.magida-service-panel__number,
	.magida-service-panel__title,
	.magida-service-panel__description,
	.magida-service-panel__points,
	.magida-service-panel .magida-link {
		max-width: calc(100% - 100px);
	}
}

@media (max-width: 640px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		/* MAGIDA PASS 24.1.7a: Phone cards keep the icon, but reduce its visual weight so the service title arrives sooner. */
		width: 62px;
		height: 62px;
		margin-bottom: 16px;
	}

	.magida-service-panel__icon {
		width: 62px;
		height: 62px;
		border-radius: 17px;
		box-shadow:
			inset 0 0 24px rgba(5, 223, 254, 0.04),
			0 12px 30px rgba(0, 0, 0, 0.16);
	}

	.magida-service-panel__icon svg {
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 420px) {
	.magida-service-panel__visual,
	.magida-service-panel--website .magida-service-panel__visual,
	.magida-service-panel--mobile .magida-service-panel__visual {
		width: 58px;
		height: 58px;
		margin-bottom: 14px;
	}

	.magida-service-panel__icon {
		width: 58px;
		height: 58px;
		border-radius: 16px;
	}

	.magida-service-panel__icon svg {
		width: 32px;
		height: 32px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.8 — Featured Project Spacing Polish
   --------------------------------------------------------------------------
   Tightens the vertical handoff from the Injumo featured project into the
   Why Choose Magida section without redesigning the approved project visual.
*/

.magida-featured-project {
	/* MAGIDA PASS 24.1.8: Reduce the dead zone after the featured project while preserving the cinematic section breathing room. */
	padding-bottom: clamp(42px, 5vw, 64px);
}

.magida-featured-project + .magida-why-choose {
	/* MAGIDA PASS 24.1.8: Pull the next section closer so the homepage rhythm feels intentional instead of leaving a large blank gap. */
	padding-top: clamp(34px, 4vw, 56px);
}

@media (min-width: 1025px) {
	.magida-featured-project {
		/* MAGIDA PASS 24.1.8: Desktop keeps the approved showcase scale, only tightening the bottom handoff. */
		padding-bottom: clamp(44px, 4.6vw, 62px);
	}

	.magida-featured-project + .magida-why-choose {
		padding-top: clamp(28px, 3.4vw, 48px);
	}
}

@media (max-width: 768px) {
	.magida-featured-project {
		/* MAGIDA PASS 24.1.8: Mobile gets a calmer transition into Why Choose without squeezing the project card itself. */
		padding-bottom: 42px;
	}

	.magida-featured-project + .magida-why-choose {
		padding-top: 38px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.9 — Why Choose Magida Spacing Polish
   --------------------------------------------------------------------------
   Tightens the vertical rhythm around the approved Why Choose Magida section
   so the homepage moves cleanly from Featured Work into Process.
*/

.magida-featured-project + .magida-why-choose {
	/* MAGIDA PASS 24.1.9: Bring Why Choose closer to the approved Featured Work section without changing the section layout. */
	padding-top: clamp(22px, 3vw, 38px);
}

.magida-why-choose {
	/* MAGIDA PASS 24.1.9: Reduce the quiet dead zone below the reason list while preserving premium breathing room. */
	padding-bottom: clamp(40px, 4.6vw, 62px);
}

.magida-why-choose + .magida-process {
	/* MAGIDA PASS 24.1.9: Pull Process closer after Why Choose so the next section does not feel disconnected. */
	padding-top: clamp(28px, 3.8vw, 50px);
}

@media (min-width: 1025px) {
	.magida-featured-project + .magida-why-choose {
		padding-top: clamp(18px, 2.4vw, 32px);
	}

	.magida-why-choose {
		padding-bottom: clamp(36px, 4vw, 56px);
	}

	.magida-why-choose + .magida-process {
		padding-top: clamp(24px, 3.2vw, 44px);
	}
}

@media (max-width: 900px) {
	.magida-featured-project + .magida-why-choose {
		padding-top: 34px;
	}

	.magida-why-choose {
		padding-bottom: 42px;
	}

	.magida-why-choose + .magida-process {
		padding-top: 38px;
	}
}

@media (max-width: 520px) {
	.magida-featured-project + .magida-why-choose {
		padding-top: 30px;
	}

	.magida-why-choose {
		padding-bottom: 38px;
	}

	.magida-why-choose + .magida-process {
		padding-top: 34px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.10 — Process Connector Arrow Polish
   --------------------------------------------------------------------------
   Replaces the broken desktop timeline fragments behind the process cards with
   subtle directional arrows between steps. Tablet and mobile stay card-first.
*/

.magida-process__timeline::before {
	/* MAGIDA PASS 24.1.10: Hide the old connector line that appeared as broken fragments behind the cards. */
	display: none;
}

@media (min-width: 1025px) {
	.magida-process-step {
		/* MAGIDA PASS 24.1.10: Allow the small connector arrow to sit cleanly between desktop cards. */
		overflow: visible;
	}

	.magida-process-step:not(:last-child)::after {
		position: absolute;
		top: 58px;
		right: -15px;
		z-index: 4;
		width: 10px;
		height: 10px;
		border-top: 2px solid rgba(5, 223, 254, 0.54);
		border-right: 2px solid rgba(124, 106, 251, 0.46);
		filter: drop-shadow(0 0 8px rgba(5, 223, 254, 0.18));
		content: "";
		transform: rotate(45deg);
		pointer-events: none;
	}
}

@media (max-width: 1024px) {
	.magida-process-step::after {
		/* MAGIDA PASS 24.1.10: Keep tablet and mobile clean when the cards stack or wrap. */
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.10a — Process Connector Cleanup
   --------------------------------------------------------------------------
   Removes the remaining desktop connector treatments from the homepage Process
   cards. The numbered cards now carry the sequence cleanly without timeline
   fragments or arrows.
*/

.magida-process__timeline::before,
.magida-motion-ready .magida-process__timeline::before,
.magida-motion-ready .magida-process__timeline.magida-reveal--visible::before {
	/* MAGIDA PASS 24.1.10a: Fully suppress the old timeline rule, including the motion-enhanced state. */
	display: none;
	content: none;
}

.magida-process-step::before {
	/* MAGIDA PASS 24.1.10a: Remove the top card accent line here because it was reading as leftover connector fragments across the process row. */
	display: none;
	content: none;
}

.magida-process-step::after,
.magida-process-step:not(:last-child)::after {
	/* MAGIDA PASS 24.1.10a: Remove the experimental arrows and keep the process section calm and card-led. */
	display: none;
	content: none;
}

/* --------------------------------------------------------------------------
   Pass 24.1.11 — Studio Stats Spacing Polish
   --------------------------------------------------------------------------
   Tightens the vertical handoff from the approved Studio Stats counters into
   the Project Proof block while leaving the counter cards and mobile stack
   unchanged.
*/

@media (min-width: 769px) {
	.magida-counters {
		/* MAGIDA PASS 24.1.11: Reduce the desktop/tablet dead zone below the counters without changing the approved card design. */
		padding-bottom: clamp(38px, 4.4vw, 64px);
	}

	.magida-counters + .magida-proof {
		/* MAGIDA PASS 24.1.11: Pull Project Proof closer so the counters do not feel isolated in empty space. */
		padding-top: clamp(28px, 3.6vw, 52px);
	}
}

@media (min-width: 1025px) {
	.magida-counters {
		padding-bottom: clamp(34px, 3.6vw, 56px);
	}

	.magida-counters + .magida-proof {
		padding-top: clamp(24px, 3vw, 44px);
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.12 — Project Proof Polish
   --------------------------------------------------------------------------
   Tightens the Project Proof handoff between the approved Studio Stats and
   Pricing Preview sections. This is intentionally CSS-only: no structure,
   content, PHP, JavaScript, or approved component redesign changes.
*/

.magida-proof {
	/* MAGIDA PASS 24.1.12: Give browser anchor/scroll landings enough space below the sticky header so the proof heading is not clipped. */
	scroll-margin-top: calc(var(--magida-header-height, 82px) + 28px);
}

@media (min-width: 769px) {
	.magida-proof {
		/* MAGIDA PASS 24.1.12: Reduce the empty vertical band around Project Proof while preserving premium breathing room. */
		padding-top: clamp(28px, 3.2vw, 46px);
		padding-bottom: clamp(42px, 4.2vw, 68px);
	}

	.magida-proof + .magida-pricing-preview {
		/* MAGIDA PASS 24.1.12: Bring Pricing Preview into view sooner after the proof card without touching pricing card design. */
		padding-top: clamp(34px, 3.8vw, 60px);
	}

	.magida-proof__inner {
		/* MAGIDA PASS 24.1.12: Slightly tighter desktop/tablet panel padding to make the section feel less oversized. */
		padding: clamp(30px, 4.2vw, 48px);
	}

	.magida-proof__visual,
	.magida-proof__media,
	.magida-proof__placeholder,
	.magida-proof__image {
		/* MAGIDA PASS 24.1.12: The right-side proof graphic remains cinematic but no longer dominates the section height. */
		min-height: clamp(260px, 22vw, 286px);
	}

	.magida-proof__image {
		height: clamp(260px, 22vw, 286px);
	}
}

@media (min-width: 1181px) {
	.magida-proof__inner {
		/* MAGIDA PASS 24.1.12: Keep the desktop composition balanced with slightly more priority on the message than the visual. */
		grid-template-columns: minmax(0, 0.84fr) minmax(300px, 0.58fr);
		gap: clamp(28px, 4.4vw, 50px);
	}
}

@media (min-width: 769px) and (max-width: 1180px) {
	.magida-proof__inner {
		gap: clamp(24px, 4vw, 36px);
	}

	.magida-proof__visual {
		width: min(100%, 760px);
		margin-inline: auto;
	}

	.magida-proof__badge--one {
		right: clamp(14px, 4vw, 28px);
	}

	.magida-proof__badge--two {
		left: clamp(14px, 4vw, 28px);
	}
}

@media (max-width: 768px) {
	.magida-proof {
		/* MAGIDA PASS 24.1.12: Keep the mobile handoff compact while respecting the already-approved stacked layout. */
		padding-top: clamp(44px, 12vw, 64px);
		padding-bottom: clamp(46px, 12vw, 68px);
		scroll-margin-top: 78px;
	}

	.magida-proof + .magida-pricing-preview {
		padding-top: clamp(42px, 11vw, 64px);
	}

	.magida-proof__inner {
		padding: clamp(22px, 7vw, 30px);
		gap: 22px;
	}

	.magida-proof__visual,
	.magida-proof__media,
	.magida-proof__placeholder,
	.magida-proof__image {
		min-height: 230px;
	}

	.magida-proof__image {
		height: 230px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.13 — Pricing Preview Polish
   --------------------------------------------------------------------------
   Tightens the approved Pricing Preview rhythm between Project Proof and FAQ.
   This pass is CSS-only and preserves the cards, copy, buttons, and structure.
*/

@media (min-width: 769px) {
	.magida-proof + .magida-pricing-preview {
		/* MAGIDA PASS 24.1.13: Bring Pricing Preview a little closer after Project Proof so the page handoff feels intentional. */
		padding-top: clamp(26px, 2.8vw, 44px);
	}

	.magida-pricing-preview {
		/* MAGIDA PASS 24.1.13: Reduce the quiet zone after the pricing CTAs before FAQ begins. */
		padding-bottom: clamp(36px, 4vw, 58px);
		scroll-margin-top: calc(var(--magida-header-height, 82px) + 28px);
	}

	.magida-pricing-preview + .magida-faq-preview {
		/* MAGIDA PASS 24.1.13: Pull FAQ closer without making the pricing section feel cramped. */
		padding-top: clamp(28px, 3.2vw, 48px);
	}

	.magida-pricing-preview__grid {
		/* MAGIDA PASS 24.1.13: Slightly tighter card rhythm; card design remains unchanged. */
		gap: clamp(20px, 2vw, 24px);
	}

	.magida-pricing-preview__actions {
		/* MAGIDA PASS 24.1.13: CTA row sits closer to the cards for a cleaner section ending. */
		margin-top: 24px;
	}
}

@media (min-width: 769px) and (max-width: 1180px) {
	.magida-pricing-preview__grid > .magida-price-card:last-child {
		/* MAGIDA PASS 24.1.13: On tablet, avoid a lonely half-width third card by letting the custom quote option span the row. */
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.magida-proof + .magida-pricing-preview {
		/* MAGIDA PASS 24.1.13: Keep the mobile handoff compact after the approved Project Proof section. */
		padding-top: clamp(36px, 10vw, 54px);
	}

	.magida-pricing-preview {
		/* MAGIDA PASS 24.1.13: Reduce the long mobile pause between pricing buttons and FAQ. */
		padding-bottom: clamp(38px, 10vw, 54px);
		scroll-margin-top: 78px;
	}

	.magida-pricing-preview + .magida-faq-preview {
		padding-top: clamp(34px, 9vw, 50px);
	}

	.magida-pricing-preview__grid {
		gap: 18px;
	}

	.magida-pricing-preview__actions {
		margin-top: 20px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.14 — FAQ Preview Polish
   --------------------------------------------------------------------------
   Tightens the approved FAQ Preview rhythm between Pricing Preview and Latest
   Updates. This pass is CSS-only and preserves FAQ copy, markup, JS behavior,
   colors, and the established accordion design language.
*/

@media (min-width: 769px) {
	.magida-pricing-preview + .magida-faq-preview {
		/* MAGIDA PASS 24.1.14: Remove the remaining desktop pause before FAQ without making Pricing feel cramped. */
		padding-top: clamp(20px, 2.4vw, 36px);
	}

	.magida-faq-preview {
		/* MAGIDA PASS 24.1.14: Reduce the long handoff after the FAQ accordions before Latest Updates begins. */
		padding-bottom: clamp(34px, 3.8vw, 56px);
		scroll-margin-top: calc(var(--magida-header-height, 82px) + 28px);
	}

	.magida-faq-preview + .magida-latest-updates {
		/* MAGIDA PASS 24.1.14: Pull Latest Updates into the page flow sooner while keeping a premium section break. */
		padding-top: clamp(30px, 3.4vw, 50px);
	}

	.magida-faq-preview__grid {
		/* MAGIDA PASS 24.1.14: Slightly tighten the desktop split layout; the two-column structure stays unchanged. */
		gap: clamp(26px, 4.2vw, 54px);
	}

	.magida-faq-preview__items {
		/* MAGIDA PASS 24.1.14: Accordions remain spacious, just less stretched vertically on desktop. */
		gap: 10px;
	}

	.magida-faq-item summary {
		/* MAGIDA PASS 24.1.14: Trim vertical padding while preserving tap/click comfort and the existing icon treatment. */
		padding: 18px 20px 18px 22px;
	}

	.magida-faq-item p {
		/* MAGIDA PASS 24.1.14: Keep open answers readable without adding extra section height. */
		padding: 0 22px 20px;
	}
}

@media (max-width: 768px) {
	.magida-pricing-preview + .magida-faq-preview {
		/* MAGIDA PASS 24.1.14: Mobile keeps comfortable breathing room after pricing buttons. */
		padding-top: clamp(30px, 8vw, 44px);
	}

	.magida-faq-preview {
		/* MAGIDA PASS 24.1.14: Tighten the mobile/tablet handoff to Latest Updates without compressing the FAQ list. */
		padding-bottom: clamp(38px, 10vw, 54px);
		scroll-margin-top: 78px;
	}

	.magida-faq-preview + .magida-latest-updates {
		padding-top: clamp(34px, 9vw, 50px);
	}

	.magida-faq-preview__items {
		gap: 10px;
	}

	.magida-faq-item summary {
		padding-block: 17px;
	}

	.magida-faq-item p {
		padding-bottom: 18px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.15 — Latest Updates Polish
   --------------------------------------------------------------------------
   Keeps the homepage updates area as a preview of the latest three posts while
   improving the sparse one-post launch state. This is CSS-only and preserves
   the WordPress post query, archive strategy, markup, colors, and card system.
*/

@media (min-width: 769px) {
	.magida-faq-preview + .magida-latest-updates {
		/* MAGIDA PASS 24.1.15: Keep Latest Updates close after FAQ now that both sections have approved spacing. */
		padding-top: clamp(24px, 2.8vw, 42px);
	}

	.magida-latest-updates {
		/* MAGIDA PASS 24.1.15: Reduce the empty pause before the final CTA without compressing the updates preview itself. */
		padding-bottom: clamp(34px, 3.6vw, 54px);
		scroll-margin-top: calc(var(--magida-header-height, 82px) + 28px);
	}

	.magida-latest-updates + .magida-final-cta {
		/* MAGIDA PASS 24.1.15: Pull the closing CTA into the flow sooner after the last news card. */
		padding-top: clamp(34px, 3.8vw, 58px);
	}

	.magida-latest-updates__head {
		/* MAGIDA PASS 24.1.15: Slightly tighter intro-to-card rhythm; the View News CTA remains part of the section header. */
		margin-bottom: clamp(24px, 2.6vw, 30px);
	}

	.magida-latest-updates__grid {
		/* MAGIDA PASS 24.1.15: Keep the approved three-post strategy, just reduce the loose desktop card rhythm slightly. */
		gap: clamp(20px, 2vw, 24px);
	}

	.magida-latest-updates__grid:has(> .magida-content-card:only-child) {
		/* MAGIDA PASS 24.1.15: One real launch update should feel intentional, not like a broken three-column grid. */
		grid-template-columns: minmax(0, min(100%, 540px));
	}

	.magida-latest-updates__grid > .magida-content-card:only-child {
		/* MAGIDA PASS 24.1.15: Give the single-card state a more substantial editorial width while leaving 2–3 post states unchanged. */
		width: min(100%, 540px);
	}
}

@media (min-width: 769px) and (max-width: 1180px) {
	.magida-latest-updates__head {
		/* MAGIDA PASS 24.1.15: Tablet keeps the headline and View News action connected instead of feeling split across too much space. */
		align-items: flex-start;
	}

	.magida-latest-updates__grid:has(> .magida-content-card:only-child) {
		grid-template-columns: minmax(0, min(100%, 620px));
	}

	.magida-latest-updates__grid > .magida-content-card:only-child {
		width: min(100%, 620px);
	}
}

@media (max-width: 768px) {
	.magida-faq-preview + .magida-latest-updates {
		/* MAGIDA PASS 24.1.15: Mobile keeps a clean section break after FAQ without creating a long blank band. */
		padding-top: clamp(30px, 8vw, 44px);
	}

	.magida-latest-updates {
		/* MAGIDA PASS 24.1.15: Tighten the mobile handoff into the final CTA while preserving readable card breathing room. */
		padding-bottom: clamp(36px, 9vw, 52px);
		scroll-margin-top: 78px;
	}

	.magida-latest-updates + .magida-final-cta {
		padding-top: clamp(34px, 9vw, 54px);
	}

	.magida-latest-updates__head {
		gap: 18px;
		margin-bottom: 24px;
	}

	.magida-latest-updates__head .magida-button {
		/* MAGIDA PASS 24.1.15: Keep the archive CTA reachable and aligned with the stacked mobile heading. */
		align-self: flex-start;
	}

	.magida-latest-updates__grid {
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.16 — Final CTA Polish
   --------------------------------------------------------------------------
   Refines the approved closing CTA so it feels premium without overpowering
   the footer handoff. This is CSS-only and preserves the CTA copy, links,
   markup, colors, PHP, and JavaScript behavior.
*/

@media (min-width: 769px) {
	.magida-latest-updates + .magida-final-cta {
		/* MAGIDA PASS 24.1.16: Keep the final conversion card close after Latest Updates without crowding the news preview. */
		padding-top: clamp(28px, 3.2vw, 48px);
	}

	.magida-final-cta {
		/* MAGIDA PASS 24.1.16: Tighten the footer handoff so the homepage closes cleanly instead of leaving a tall empty band. */
		padding-bottom: clamp(40px, 4.2vw, 70px);
		scroll-margin-top: calc(var(--magida-header-height, 82px) + 28px);
	}

	.magida-final-cta__inner {
		/* MAGIDA PASS 24.1.16: Reduce the desktop panel height while preserving the cinematic card presence. */
		grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.54fr);
		gap: clamp(22px, 3.8vw, 46px);
		padding: clamp(34px, 4.2vw, 48px);
	}

	.magida-final-cta__inner h2 {
		/* MAGIDA PASS 24.1.16: Keep the closing headline powerful but slightly less dominant than the major homepage sections above. */
		font-size: clamp(2.85rem, 5.4vw, 4.85rem);
		line-height: 1.04;
	}

	.magida-final-cta__inner p:not(.magida-eyebrow) {
		/* MAGIDA PASS 24.1.16: Bring the support sentence closer to the headline for a tighter conversion message. */
		margin-top: 16px;
	}

	.magida-final-cta__actions {
		/* MAGIDA PASS 24.1.16: Make the desktop buttons feel connected to the CTA content instead of floating low in the right column. */
		align-self: center;
		justify-content: flex-start;
		margin-top: 0;
	}
}

@media (min-width: 769px) and (max-width: 1180px) {
	.magida-final-cta__inner {
		/* MAGIDA PASS 24.1.16: Tablet keeps the approved stacked CTA but avoids excess card depth. */
		gap: 22px;
		padding: clamp(30px, 5vw, 44px);
	}

	.magida-final-cta__inner h2 {
		font-size: clamp(2.35rem, 6vw, 3.8rem);
	}

	.magida-final-cta__actions {
		margin-top: 4px;
	}
}

@media (max-width: 768px) {
	.magida-latest-updates + .magida-final-cta {
		/* MAGIDA PASS 24.1.16: Preserve the approved mobile handoff while trimming only the loose edge. */
		padding-top: clamp(30px, 8vw, 48px);
	}

	.magida-final-cta {
		/* MAGIDA PASS 24.1.16: Keep mobile footer spacing comfortable for the floating buttons and stacked footer content. */
		padding-bottom: clamp(46px, 12vw, 64px);
		scroll-margin-top: 78px;
	}

	.magida-final-cta__inner {
		gap: 22px;
		padding: clamp(24px, 7vw, 34px);
	}

	.magida-final-cta__actions {
		margin-top: 2px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.16a — Final CTA Tablet Stack Fix
   --------------------------------------------------------------------------
   The previous desktop polish made the final CTA feel tighter, but tablet-sized
   viewports could still hold the two-column layout too long. This follow-up
   stacks the approved CTA content earlier so the headline, support copy, and
   buttons read as one clean conversion block on tablet and mobile.
*/

@media (max-width: 1180px) {
	.magida-final-cta__inner {
		/* MAGIDA PASS 24.1.16a: Stack earlier on tablet so the headline does not become a narrow vertical column. */
		grid-template-columns: 1fr;
		align-items: flex-start;
		gap: clamp(18px, 3vw, 26px);
	}

	.magida-final-cta__inner h2 {
		/* MAGIDA PASS 24.1.16a: Let the CTA headline use the full card width once the layout stacks. */
		max-width: 820px;
		font-size: clamp(2.35rem, 5.8vw, 3.8rem);
	}

	.magida-final-cta__inner p:not(.magida-eyebrow) {
		max-width: 680px;
	}

	.magida-final-cta__actions {
		/* MAGIDA PASS 24.1.16a: Keep actions directly beneath the copy instead of floating to the right on tablet. */
		align-self: flex-start;
		justify-content: flex-start;
		margin-top: 2px;
	}
}

@media (max-width: 768px) {
	.magida-final-cta__inner h2 {
		/* MAGIDA PASS 24.1.16a: Preserve the strong mobile headline while avoiding cramped line breaks. */
		font-size: clamp(2rem, 8.2vw, 2.9rem);
		line-height: 1.06;
	}

	.magida-final-cta__actions {
		gap: 12px;
	}
}

/* --------------------------------------------------------------------------
   Pass 24.1.20 — Hero First Load Media Stabilization
   --------------------------------------------------------------------------
   Prevents the desktop floating preview card image from becoming the first
   visible hero media on uncached visits. The preview card now waits until the
   video is actually playing before it appears and begins its one-time fade.
*/

.magida-home-hero--video
	.magida-home-hero__media-frame--has-poster.is-video-ready
	.magida-home-hero__video-poster {
	/* MAGIDA PASS 24.1.20: Keep the poster in place until playback begins, avoiding a blank or wrong-looking first paint. */
	opacity: 1;
}

.magida-home-hero--video
	.magida-home-hero__media-frame--has-poster.is-video-playing
	.magida-home-hero__video-poster {
	opacity: 0;
}

@media (min-width: 1181px) {
	.magida-home-hero--video .magida-home-hero__device {
		/* MAGIDA PASS 24.1.20: Do not let the preview-card image flash before the hero video has started. */
		opacity: 0;
		visibility: hidden;
		animation: none;
		transform: translate3d(0, 0, 0) scale(1);
	}

	.magida-home-hero--video.is-hero-video-playing .magida-home-hero__device {
		/* MAGIDA PASS 24.1.20: Start the approved timed fade only after the video is visibly playing. */
		opacity: 1;
		visibility: visible;
		animation: magidaHeroPreviewCardTimedFade 5.1s ease forwards;
	}
}

@media (min-width: 1181px) and (prefers-reduced-motion: reduce) {
	.magida-home-hero--video.is-hero-video-playing .magida-home-hero__device {
		display: none;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Front-page project media containment
   -------------------------------------------------------------------------- */

.magida-featured-project__browser {
	/* MAGIDA PASS 24.1.18: Lock the homepage project preview so tall full-page website captures cannot stretch the approved featured-work layout. */
	min-height: 0;
}

.magida-featured-project__screen {
	/* MAGIDA PASS 24.1.18: Treat the featured project asset as a polished browser preview, not a full-page screenshot display. */
	aspect-ratio: 16 / 10;
	min-height: 0;
}

.magida-featured-project__image {
	/* MAGIDA PASS 24.1.18: Tall website captures crop from the top so the visible preview starts at the site header/hero. */
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: top center;
}

.magida-featured-project__placeholder {
	/* MAGIDA PASS 24.1.18: Keep the coded fallback aligned to the same locked media ratio as real screenshots. */
	min-height: 0;
	aspect-ratio: 16 / 10;
}

.magida-proof__visual {
	/* MAGIDA PASS 24.1.18: Let the proof media define a stable frame while badges remain decorative. */
	min-height: 0;
}

.magida-proof__media,
.magida-proof__placeholder {
	/* MAGIDA PASS 24.1.18: The proof image is a wide hero-style screenshot, so keep a cinematic frame instead of a hard cropped box. */
	aspect-ratio: 16 / 9;
	min-height: 0;
}

.magida-proof__image {
	/* MAGIDA PASS 24.1.18: Preserve the full hero-style project proof screenshot without clipping important edges. */
	height: 100%;
	min-height: 0;
	object-fit: contain;
	object-position: center center;
	background:
		radial-gradient(
			circle at 78% 18%,
			rgba(5, 223, 254, 0.12),
			transparent 16rem
		),
		rgba(6, 7, 11, 0.94);
}

@media (max-width: 768px) {
	.magida-featured-project__browser,
	.magida-featured-project__screen,
	.magida-featured-project__image,
	.magida-featured-project__placeholder,
	.magida-proof__visual,
	.magida-proof__media,
	.magida-proof__placeholder,
	.magida-proof__image {
		/* MAGIDA PASS 24.1.18: Override older fixed mobile heights so media keeps the same locked ratios on phones/tablets. */
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   Front-page featured-work scrolling media refinement
   -------------------------------------------------------------------------- */

.magida-featured-project__browser {
	/* MAGIDA PASS 24.1.18b: Keep the browser shell stable while the tall website capture scrolls inside it. */
	min-height: 0;
}

.magida-featured-project__screen {
	/* MAGIDA PASS 24.1.18b: Fixed viewport for long full-page screenshots; the screenshot itself handles the height. */
	--magida-featured-scroll-frame-height: clamp(330px, 31vw, 520px);
	height: var(--magida-featured-scroll-frame-height);
	min-height: 0;
	aspect-ratio: auto;
	overflow: hidden;
}

.magida-featured-project__screen::after {
	/* MAGIDA PASS 24.1.18b: Keep a premium lens without visually softening the screenshot content. */
	background:
		linear-gradient(180deg, rgba(6, 7, 11, 0.1), rgba(6, 7, 11, 0.12)),
		radial-gradient(
			circle at 86% 16%,
			rgba(5, 223, 254, 0.12),
			transparent 17rem
		);
}

.magida-featured-project__image {
	/* MAGIDA PASS 24.1.18b: Full-page captures now scroll vertically instead of being squeezed into a cropped image box. */
	display: block;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: unset;
	object-position: top center;
	transform: translate3d(0, 0, 0);
	animation: magidaFeaturedWebsiteScroll 24s ease-in-out 1s infinite alternate;
	will-change: transform;
}

.magida-featured-project__visual:hover .magida-featured-project__image,
.magida-featured-project__visual:focus-visible .magida-featured-project__image {
	/* MAGIDA PASS 24.1.18b: Hover pauses the website tour instead of zooming and adding softness. */
	animation-play-state: paused;
	transform: translate3d(0, 0, 0);
}

@keyframes magidaFeaturedWebsiteScroll {
	0%,
	10% {
		transform: translate3d(0, 0, 0);
	}

	90%,
	100% {
		transform: translate3d(
			0,
			calc(-100% + var(--magida-featured-scroll-frame-height)),
			0
		);
	}
}

.magida-proof__image {
	/* MAGIDA PASS 24.1.18b: The proof asset is the wide hero screenshot, so fill the cinematic frame cleanly. */
	object-fit: cover;
	object-position: center center;
	background: transparent;
}

@media (max-width: 1024px) {
	.magida-featured-project__screen {
		--magida-featured-scroll-frame-height: clamp(300px, 48vw, 470px);
	}
}

@media (max-width: 640px) {
	.magida-featured-project__screen {
		--magida-featured-scroll-frame-height: clamp(270px, 76vw, 390px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.magida-featured-project__image {
		animation: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Featured Work scrolling enforcement
   -------------------------------------------------------------------------- */

.magida-featured-project__screen {
	/* MAGIDA PASS 24.1.18d: Keep the visible browser viewport fixed so the tall full-page capture can move behind it. */
	position: relative;
	height: var(
		--magida-featured-scroll-frame-height,
		clamp(330px, 31vw, 520px)
	);
	overflow: hidden;
}

.magida-featured-project__image {
	/* MAGIDA PASS 24.1.18d: Force the full-page capture to behave like a scrolling page, not a fitted/cropped cover image. */
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: calc(var(--magida-featured-scroll-frame-height, 420px) * 2.15);
	object-fit: initial !important;
	object-position: top center;
	transform: translate3d(0, 0, 0);
	animation: magidaFeaturedWebsiteScrollTour 26s ease-in-out 1.2s infinite
		alternate !important;
	will-change: transform;
}

.magida-featured-project__visual:hover .magida-featured-project__image,
.magida-featured-project__visual:focus-visible .magida-featured-project__image {
	/* MAGIDA PASS 24.1.18d: Pause where the tour currently is; do not snap the screenshot back to the top. */
	animation-play-state: paused !important;
}

@keyframes magidaFeaturedWebsiteScrollTour {
	0%,
	12% {
		transform: translate3d(0, 0, 0);
	}

	88%,
	100% {
		transform: translate3d(0, -78%, 0);
	}
}

@media (max-width: 1024px) {
	.magida-featured-project__screen {
		--magida-featured-scroll-frame-height: clamp(300px, 48vw, 470px);
	}
}

@media (max-width: 640px) {
	.magida-featured-project__screen {
		--magida-featured-scroll-frame-height: clamp(270px, 76vw, 390px);
	}

	.magida-featured-project__image {
		animation-duration: 30s !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.magida-featured-project__image {
		animation: none !important;
		transform: none !important;
	}
}