/*
 * Loopsi single-product platform section.
 * Scope: .loopsi-product-platform only.
 */

.loopsi-product-platform {
	--loopsi-platform-ink: #2f2b29;
	--loopsi-platform-muted: #6f655f;
	--loopsi-platform-aqua: #79d4cd;
	--loopsi-platform-aqua-soft: #eaf8f7;
	--loopsi-platform-blush: #d79d96;
	--loopsi-platform-border: rgba(47, 43, 41, 0.12);
	--loopsi-platform-surface: #ffffff;
	position: relative;
	overflow: hidden;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	max-width: none;
	margin-top: 0;
	padding: clamp(28px, 3.6vw, 48px) 0 clamp(58px, 6.5vw, 92px);
	background:
		radial-gradient(circle at 86% 17%, rgba(121, 212, 205, 0.18), transparent 34%),
		radial-gradient(circle at 8% 88%, rgba(215, 157, 150, 0.13), transparent 32%),
		#fbf8f4;
	color: var(--loopsi-platform-ink);
}

.loopsi-product-platform *,
.loopsi-product-platform *::before,
.loopsi-product-platform *::after {
	box-sizing: border-box;
}

.loopsi-product-platform__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
	gap: clamp(46px, 5.5vw, 88px);
	align-items: center;
}

.loopsi-product-platform__copy {
	max-width: 650px;
}

.loopsi-product-platform__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin: 0 0 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(215, 157, 150, 0.13);
	color: #9a6c64;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.loopsi-product-platform__title {
	max-width: 680px;
	margin: 0;
	color: var(--loopsi-platform-ink);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.loopsi-product-platform__intro {
	max-width: 640px;
	margin: 24px 0 0;
	color: var(--loopsi-platform-muted);
	font-size: clamp(18px, 1.25vw, 20px);
	line-height: 1.55;
}

.loopsi-product-platform__benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 28px 0 0;
}

.loopsi-product-platform__benefit {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	min-height: 112px;
	padding: 16px;
	border: 1px solid var(--loopsi-platform-border);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 14px 35px rgba(47, 43, 41, 0.045);
	backdrop-filter: blur(8px);
}

.loopsi-product-platform__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: var(--loopsi-platform-aqua-soft);
	color: var(--loopsi-platform-ink);
}

.loopsi-product-platform__icon svg {
	width: 21px;
	height: 21px;
}

.loopsi-product-platform__benefit h3 {
	margin: 1px 0 5px;
	color: var(--loopsi-platform-ink);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
}

.loopsi-product-platform__benefit p {
	margin: 0;
	color: var(--loopsi-platform-muted);
	font-size: 13.5px;
	line-height: 1.45;
}

.loopsi-product-platform__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 22px;
	margin-top: 22px;
}

.loopsi-product-platform__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 14px 25px;
	border: 1px solid var(--loopsi-platform-ink);
	border-radius: 999px;
	background: var(--loopsi-platform-ink);
	color: #ffffff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	box-shadow: 0 13px 28px rgba(47, 43, 41, 0.15);
	transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.loopsi-product-platform__button svg {
	width: 18px;
	height: 18px;
	transition: transform 180ms ease;
}

.loopsi-product-platform__button:hover,
.loopsi-product-platform__button:focus-visible {
    background: var(--loopsi-platform-aqua);
    color: var(--loopsi-platform-ink);
	transform: translateY(-2px);
	box-shadow: 0 17px 34px rgba(47, 43, 41, 0.2);
}

.loopsi-product-platform__button:hover svg,
.loopsi-product-platform__button:focus-visible svg {
	transform: translateX(3px);
}

.loopsi-product-platform__button:focus-visible {
	outline: 3px solid rgba(121, 212, 205, 0.58);
	outline-offset: 4px;
}

.loopsi-product-platform__access-note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 290px;
	margin: 0;
	color: var(--loopsi-platform-muted);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.loopsi-product-platform__access-note span {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--loopsi-platform-aqua);
	color: var(--loopsi-platform-ink);
	font-size: 14px;
	font-weight: 900;
}

.loopsi-product-platform__visual {
	position: relative;
	isolation: isolate;
	min-height: 540px;
}

.loopsi-product-platform__glow {
	position: absolute;
	z-index: -1;
	inset: 8% 3% 5% 7%;
	border-radius: 50%;
	background: rgba(121, 212, 205, 0.18);
	filter: blur(70px);
}

.loopsi-product-platform__device {
	position: absolute;
	overflow: hidden;
	border: 7px solid var(--loopsi-platform-ink);
	background: #ffffff;
	box-shadow: 0 28px 65px rgba(47, 43, 41, 0.18);
}

.loopsi-product-platform__device img,
.loopsi-product-platform__device video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
}

.loopsi-product-platform__device--tablet {
	top: 2%;
	right: 1%;
	width: 73%;
	aspect-ratio: 1372 / 1409;
	border-radius: 30px;
	transform: rotate(0.6deg);
}

.loopsi-product-platform__device--project {
	z-index: 2;
	left: 0;
	bottom: 3%;
	width: 57%;
	aspect-ratio: 1411 / 1592;
	border-radius: 28px;
	transform: rotate(-1.5deg);
}

.loopsi-product-platform__device--phone {
	z-index: 3;
	right: 8%;
	bottom: 1%;
	width: 33%;
	aspect-ratio: 900 / 1950;
	border-width: 8px;
	border-radius: 38px;
	transform: rotate(1.7deg);
}


.loopsi-product-platform__visual-badge {
	position: absolute;
	z-index: 5;
	right: 8%;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 13px 20px;
	border: 1px solid rgba(121, 212, 205, 0.56);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--loopsi-platform-ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	box-shadow: 0 16px 38px rgba(47, 43, 41, 0.12);
	backdrop-filter: blur(10px);
}

.loopsi-product-platform__visual-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--loopsi-platform-aqua);
	box-shadow: 0 0 0 5px rgba(121, 212, 205, 0.15);
}

@media (max-width: 1180px) {
	.loopsi-product-platform__inner {
		grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
		gap: 48px;
	}

	.loopsi-product-platform__benefits {
		grid-template-columns: 1fr;
	}

	.loopsi-product-platform__benefit {
		min-height: 0;
	}

	.loopsi-product-platform__visual {
		min-height: 480px;
	}
}

@media (max-width: 920px) {
	.loopsi-product-platform {
		padding: 40px 0 74px;
	}

	.loopsi-product-platform__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 46px;
	}

	.loopsi-product-platform__copy {
		max-width: 760px;
	}

	.loopsi-product-platform__benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.loopsi-product-platform__visual {
		width: min(100%, 760px);
		min-height: 560px;
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.loopsi-product-platform {
		padding: 36px 0 64px;
	}

	.loopsi-product-platform__inner {
		gap: 36px;
	}

	.loopsi-product-platform__eyebrow {
		margin-bottom: 18px;
		font-size: 12px;
	}

	.loopsi-product-platform__title {
		font-size: clamp(1.75rem, 7.4vw, 2.15rem);
		line-height: 1.1;
		letter-spacing: -0.03em;
	}

	.loopsi-product-platform__intro {
		margin-top: 24px;
		font-size: 18px;
		line-height: 1.58;
	}

	.loopsi-product-platform__benefits {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 28px;
	}

	.loopsi-product-platform__benefit {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 12px;
		padding: 18px;
		border-radius: 19px;
	}

	.loopsi-product-platform__icon {
		width: 42px;
		height: 42px;
	}

	.loopsi-product-platform__actions {
		display: grid;
		gap: 16px;
		margin-top: 26px;
	}

	.loopsi-product-platform__button {
		width: 100%;
		min-height: 58px;
	}

	.loopsi-product-platform__access-note {
		max-width: none;
	}

	.loopsi-product-platform__visual {
		min-height: 510px;
	}

	.loopsi-product-platform__device {
		border-width: 5px;
		box-shadow: 0 20px 45px rgba(47, 43, 41, 0.16);
	}

	.loopsi-product-platform__device--tablet {
		top: 1%;
		right: 0;
		width: 82%;
		border-radius: 22px;
	}

	.loopsi-product-platform__device--project {
		left: 0;
		bottom: 6%;
		width: 65%;
		border-radius: 21px;
	}

	.loopsi-product-platform__device--phone {
		right: 3%;
		bottom: 7%;
		width: 39%;
		border-width: 6px;
		border-radius: 28px;
	}

	.loopsi-product-platform__visual-badge {
		right: 50%;
		bottom: -6px;
		max-width: calc(100% - 32px);
		transform: translateX(50%);
		white-space: nowrap;
	}
}

@media (max-width: 420px) {
	.loopsi-product-platform__visual {
		min-height: 440px;
	}

	.loopsi-product-platform__visual-badge {
		padding: 12px 16px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loopsi-product-platform__button,
	.loopsi-product-platform__button svg {
		transition: none;
	}
}