/* Albira — Hogyan működik? Önálló, kizárólag PC-s oldalstílus. */

@media (min-width: 1025px) {
	body.kmae-how-it-works-page {
		--how-blue: #00c7f7;
		--how-blue-light: #82edff;
		--how-blue-rgb: 0, 199, 247;
		--how-orange: #ff6e25;
		--how-orange-light: #ffc36b;
		--how-orange-rgb: 255, 110, 37;
		--how-ink: #202936;
		--how-ink-soft: #34404d;
		--how-white: #ffffff;
		--how-copy: #465463;
	}

	/* Csak az oldal vászna teljes szélességű; a közös fejléc érintetlen. */
	body.kmae-how-it-works-page .kmae-page {
		position: relative;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		padding: calc(var(--kmae-header-h, 72px) + 50px) 32px 84px;
		box-sizing: border-box;
		background: transparent;
	}

	body.kmae-how-it-works-page .kmae-page > .kmae-container {
		width: min(1180px, calc(100vw - 64px));
		max-width: 1180px;
		margin: 0 auto;
		padding: 0;
	}

	body.kmae-how-it-works-page .kmae-page__article,
	body.kmae-how-it-works-page .kmae-page__content {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body.kmae-how-it-works-page .kmae-page__article > .kmae-page__title {
		display: none;
	}

	.kmae-how-page {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 36px;
	}

	.kmae-how-page__intro {
		width: 100%;
		max-width: 840px;
		margin: 0 auto 12px;
		text-align: center;
	}

	.kmae-how-page__eyebrow,
	.kmae-how-flow__eyebrow,
	.kmae-how-video__eyebrow,
	.kmae-how-trust__eyebrow {
		display: block;
		margin: 0 0 8px;
		font-size: 11px;
		font-weight: 800;
		line-height: 1.4;
		letter-spacing: 0.17em;
	}

	.kmae-how-page__eyebrow {
		color: #008fbd;
	}

	.kmae-how-page__title {
		margin: 0;
		font-family: "Outfit", "Space Grotesk", system-ui, sans-serif;
		font-size: 54px;
		font-weight: 850;
		line-height: 1.06;
		letter-spacing: -0.045em;
		color: var(--how-ink);
		text-shadow: 0 2px 12px rgba(255, 255, 255, 0.75);
	}

	.kmae-how-page__title span {
		background: linear-gradient(90deg, #008fbd 0%, var(--how-blue) 38%, #e99525 70%, var(--how-orange) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.kmae-how-page__lead {
		max-width: 700px;
		margin: 18px auto 0;
		font-size: 17px;
		font-weight: 650;
		line-height: 1.7;
		color: var(--how-ink-soft);
		text-shadow: 0 1px 10px rgba(255, 255, 255, 0.88);
	}

	/* Két külön gomb, közös szürke tok nélkül. */
	.kmae-how-page__role-nav {
		display: flex;
		justify-content: center;
		gap: 14px;
		margin-top: 25px;
	}

	.kmae-how-page__role-link {
		display: inline-flex;
		min-width: 154px;
		height: 44px;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 1px solid transparent;
		border-radius: 12px;
		font-size: 14px;
		font-weight: 800;
		text-decoration: none;
		color: #fff;
		transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
	}

	.kmae-how-page__role-link--seller {
		border-color: rgba(var(--how-blue-rgb), 0.85);
		background: linear-gradient(110deg, #007fb8, var(--how-blue));
		box-shadow: 0 8px 24px rgba(var(--how-blue-rgb), 0.3);
	}

	.kmae-how-page__role-link--buyer {
		border-color: rgba(var(--how-orange-rgb), 0.85);
		background: linear-gradient(110deg, #ffad41, var(--how-orange));
		box-shadow: 0 8px 24px rgba(var(--how-orange-rgb), 0.28);
	}

	.kmae-how-page__role-link:hover,
	.kmae-how-page__role-link:focus-visible {
		transform: translateY(-2px);
		filter: brightness(1.08);
		outline: none;
	}

	/* Közös szerkezet; a két szerepkör színe önálló. */
	.kmae-how-flow {
		--flow: var(--how-blue);
		--flow-light: var(--how-blue-light);
		--flow-rgb: var(--how-blue-rgb);
		position: relative;
		display: grid;
		width: 100%;
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 30px;
		padding: 32px;
		overflow: hidden;
		box-sizing: border-box;
		scroll-margin-top: calc(var(--kmae-header-h, 72px) + 24px);
		border: 1px solid rgba(var(--flow-rgb), 0.75);
		border-radius: 22px;
		background:
			radial-gradient(circle at 7% 0%, rgba(var(--flow-rgb), 0.25), transparent 42%),
			linear-gradient(135deg, rgba(224, 248, 255, 0.94), rgba(255, 255, 255, 0.82));
		box-shadow: 0 18px 48px rgba(38, 68, 90, 0.16), 0 0 28px rgba(var(--flow-rgb), 0.1), inset 0 1px 0 #fff;
		backdrop-filter: blur(16px) saturate(130%);
	}

	.kmae-how-flow--buyer {
		--flow: var(--how-orange);
		--flow-light: var(--how-orange-light);
		--flow-rgb: var(--how-orange-rgb);
		background:
			radial-gradient(circle at 7% 0%, rgba(var(--how-orange-rgb), 0.24), transparent 42%),
			linear-gradient(135deg, rgba(255, 239, 226, 0.95), rgba(255, 255, 255, 0.82));
	}

	.kmae-how-flow__topline {
		position: absolute;
		top: 0;
		left: 5%;
		width: 50%;
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--flow), transparent);
		box-shadow: 0 0 16px rgba(var(--flow-rgb), 0.9);
	}

	.kmae-how-flow__main {
		min-width: 0;
	}

	.kmae-how-flow__header {
		display: flex;
		align-items: center;
		gap: 15px;
		margin: 0 0 27px;
	}

	.kmae-how-flow__badge,
	.kmae-how-steps__icon,
	.kmae-how-trust__icon {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
	}

	.kmae-how-flow__badge {
		width: 48px;
		height: 48px;
		border: 1px solid rgba(var(--flow-rgb), 0.85);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0 0 20px rgba(var(--flow-rgb), 0.18), inset 0 1px 0 #fff;
		color: var(--flow);
	}

	.kmae-how-flow__eyebrow,
	.kmae-how-video__eyebrow {
		margin-bottom: 3px;
		color: var(--flow);
	}

	.kmae-how-flow__title {
		margin: 0;
		font-size: 28px;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -0.03em;
		color: var(--how-ink);
	}

	.kmae-how-flow__subtitle {
		margin: 5px 0 0;
		font-size: 14px;
		line-height: 1.5;
		color: var(--how-ink-soft);
	}

	.kmae-how-steps {
		position: relative;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.kmae-how-steps::before {
		content: "";
		position: absolute;
		top: 29px;
		left: 7%;
		right: 7%;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(var(--flow-rgb), 0.95) 12%, rgba(var(--flow-rgb), 0.95) 88%, transparent);
		box-shadow: 0 0 9px rgba(var(--flow-rgb), 0.5);
	}

	.kmae-how-steps__item {
		position: relative;
		display: flex;
		min-width: 0;
		min-height: 182px;
		flex-direction: column;
		padding: 0 15px;
		box-sizing: border-box;
		border-right: 1px solid rgba(var(--flow-rgb), 0.28);
	}

	.kmae-how-steps__item:first-child { padding-left: 0; }
	.kmae-how-steps__item:last-child { padding-right: 0; border-right: 0; }

	.kmae-how-steps__head {
		position: relative;
		z-index: 1;
		display: flex;
		height: 58px;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 13px;
	}

	.kmae-how-steps__num {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.08em;
		color: var(--flow);
	}

	.kmae-how-steps__icon {
		width: 44px;
		height: 44px;
		border: 1px solid rgba(var(--flow-rgb), 0.9);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.82);
		box-shadow: 0 0 19px rgba(var(--flow-rgb), 0.2), inset 0 1px 0 #fff;
		color: var(--flow);
	}

	.kmae-how-flow--buyer .kmae-how-steps__icon {
		background: rgba(255, 255, 255, 0.82);
	}

	.kmae-how-steps__copy {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 7px;
	}

	.kmae-how-steps__label {
		min-height: 38px;
		font-size: 14px;
		font-weight: 750;
		line-height: 1.35;
		color: var(--how-ink);
	}

	.kmae-how-steps__text {
		margin: 0;
		font-size: 12px;
		line-height: 1.55;
		color: var(--how-ink-soft);
	}

	.kmae-how-video {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 10px;
		padding-left: 29px;
		border-left: 1px solid rgba(var(--flow-rgb), 0.35);
	}

	.kmae-how-video__card {
		appearance: none;
		display: flex;
		width: 100%;
		min-height: 182px;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 15px;
		padding: 18px;
		box-sizing: border-box;
		border: 1px solid rgba(var(--flow-rgb), 0.78);
		border-radius: 16px;
		background: radial-gradient(circle at 50% 36%, rgba(var(--flow-rgb), 0.2), transparent 60%), rgba(255, 255, 255, 0.72);
		box-shadow: inset 0 1px 0 #fff;
		color: var(--how-ink);
		text-align: center;
		cursor: pointer;
		transition: transform 160ms ease, box-shadow 160ms ease;
	}

	button.kmae-how-video__card:hover,
	button.kmae-how-video__card:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 0 24px rgba(var(--flow-rgb), 0.25);
		outline: none;
	}

	.kmae-how-video__card--empty { cursor: default; }

	.kmae-how-video__play {
		display: inline-flex;
		width: 60px;
		height: 60px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: linear-gradient(145deg, var(--flow-light), var(--flow));
		box-shadow: 0 0 25px rgba(var(--flow-rgb), 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.45);
		color: #fff;
	}

	.kmae-how-video__play--muted { opacity: 0.65; }

	.kmae-how-video__caption {
		max-width: 165px;
		font-size: 13px;
		font-weight: 750;
		line-height: 1.45;
		color: var(--flow);
	}

	/* A bizalmi blokk a két Albira-színt egyesíti világos felületen. */
	.kmae-how-trust {
		display: grid;
		width: 100%;
		gap: 25px;
		padding: 28px 32px 30px;
		box-sizing: border-box;
		border: 1px solid rgba(var(--how-blue-rgb), 0.58);
		border-radius: 22px;
		background:
			radial-gradient(circle at 0 0, rgba(var(--how-blue-rgb), 0.23), transparent 45%),
			radial-gradient(circle at 100% 0, rgba(var(--how-orange-rgb), 0.22), transparent 45%),
			linear-gradient(135deg, rgba(238, 251, 255, 0.94), rgba(255, 246, 239, 0.92));
		box-shadow: 0 18px 46px rgba(38, 68, 90, 0.16), 0 0 28px rgba(var(--how-blue-rgb), 0.08), inset 0 1px 0 #fff;
		backdrop-filter: blur(16px) saturate(130%);
	}

	.kmae-how-trust__header { text-align: center; }
	.kmae-how-trust__eyebrow { margin-bottom: 4px; color: #008fbd; }

	.kmae-how-trust__title {
		margin: 0;
		font-size: 27px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.03em;
		color: var(--how-ink);
	}

	.kmae-how-trust__list {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.kmae-how-trust__item {
		display: flex;
		min-width: 0;
		min-height: 120px;
		flex-direction: column;
		align-items: center;
		gap: 11px;
		padding: 4px 20px;
		box-sizing: border-box;
		border-right: 1px solid rgba(var(--how-blue-rgb), 0.24);
		text-align: center;
	}

	.kmae-how-trust__item:last-child { border-right: 0; }

	.kmae-how-trust__icon {
		width: 42px;
		height: 42px;
		border: 1px solid rgba(var(--how-blue-rgb), 0.7);
		border-radius: 50%;
		background: linear-gradient(145deg, rgba(var(--how-blue-rgb), 0.14), rgba(var(--how-orange-rgb), 0.12));
		box-shadow: 0 0 18px rgba(var(--how-blue-rgb), 0.16);
		color: #008fbd;
	}

	.kmae-how-trust__copy {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 5px;
	}

	.kmae-how-trust__label {
		font-size: 13px;
		font-weight: 750;
		line-height: 1.35;
		color: var(--how-ink);
	}

	.kmae-how-trust__text {
		font-size: 11px;
		line-height: 1.5;
		color: var(--how-ink-soft);
	}

	.kmae-video-lightbox[hidden] { display: none; }
	.kmae-video-lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; }
	.kmae-video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(32, 41, 54, 0.72); backdrop-filter: blur(12px); }
	.kmae-video-lightbox__dialog { position: relative; z-index: 1; width: min(960px, calc(100vw - 80px)); padding: 14px; border: 1px solid rgba(var(--how-blue-rgb), 0.5); border-radius: 20px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 30px 90px rgba(32, 41, 54, 0.35); }
	.kmae-video-lightbox__close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(var(--how-orange-rgb), 0.55); border-radius: 11px; background: var(--how-orange); color: #fff; cursor: pointer; }
	.kmae-video-lightbox__frame { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 13px; background: #000; }
	.kmae-video-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	body.kmae-video-open { overflow: hidden; }
}