/**
 * Home — Platform suite (win every conversation)
 */

/* Win every conversation — monday.com style panel */
.l1-win-section {
	position: relative;
	padding-top: 3.5rem;
	padding-bottom: 3.75rem;
	overflow: hidden;
}
.l1-win-section > .container { position: relative; z-index: 1; }

/* Platform head uses shared .l1-section-head */

.l1-win-shell {
	position: relative;
	background: #fff;
	border-radius: 32px;
	padding: 1.75rem 1.35rem;
	min-height: 520px;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--l1-line);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}
.l1-win-shell > .row {
	width: 100%;
	align-items: stretch;
}

.l1-win-nav {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.15rem;
	height: 100%;
}
.l1-win-nav-pill {
	display: none;
}
.l1-win-tab {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	width: 100%;
	text-align: left;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: transparent;
	border-radius: 999px;
	padding: 0.72rem 0.95rem;
	cursor: pointer;
	color: var(--l1-ink);
	box-shadow: none;
	transition:
		border-color 0.3s ease,
		background 0.3s ease,
		border-radius 0.35s var(--l1-ease),
		padding 0.35s var(--l1-ease),
		box-shadow 0.3s ease;
}
.l1-win-tab:not(.is-active):hover {
	background: var(--l1-soft);
	border-color: rgba(15, 23, 42, 0.14);
}
.l1-win-tab.is-active {
	border-radius: 22px;
	padding: 1.05rem 1.1rem 1.1rem;
	border-color: transparent;
	background: var(--l1-soft);
	box-shadow: none;
}
.l1-win-tab-plus {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin-top: 0.05rem;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.12);
	display: grid;
	place-items: center;
	font-size: 1rem;
	line-height: 1;
	color: #64748b;
	background: #fff;
	transition:
		opacity 0.25s ease,
		transform 0.35s var(--l1-ease),
		width 0.3s ease,
		margin 0.3s ease,
		border-color 0.25s ease;
}
.l1-win-tab.is-active .l1-win-tab-plus {
	opacity: 0;
	pointer-events: none;
	width: 0;
	min-width: 0;
	margin: 0;
	border-width: 0;
	transform: scale(0.5);
	overflow: hidden;
}
.l1-win-tab-copy {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	padding-top: 0.12rem;
}
.l1-win-tab-copy strong {
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.25;
	color: #0f172a;
}
.l1-win-tab-copy em {
	font-style: normal;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #64748b;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin: 0;
	transition: max-height 0.35s var(--l1-ease), opacity 0.25s ease, margin 0.35s ease;
}
.l1-win-tab.is-active .l1-win-tab-copy em {
	max-height: 5rem;
	opacity: 1;
	margin-top: 0.1rem;
}

.l1-win-stage {
	position: relative;
	z-index: 1;
	min-width: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	height: 100%;
	padding-left: 0.35rem;
}
.l1-win-panel {
	display: none;
}
.l1-win-panel.is-active {
	display: flex;
	flex-direction: column;
	justify-content: center;
	animation: l1WinIn 0.4s var(--l1-ease);
}
@keyframes l1WinIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.l1-win-track-wrap {
	position: relative;
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	gap: 0.35rem;
}
.l1-win-track {
	display: flex;
	align-items: stretch;
	gap: 0.85rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Side padding lets first + last cards fully center / activate */
	padding: 1.35rem max(0.5rem, calc(50% - 130px)) 1.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.l1-win-track::-webkit-scrollbar { display: none; }

.l1-win-arrow {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: #fff;
	color: #64748b;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
	transition: background 0.2s, color 0.2s, opacity 0.2s, border-color 0.2s;
	z-index: 3;
	justify-self: center;
}
.l1-win-arrow:hover {
	background: #fff;
	color: #0f172a;
	border-color: rgba(15, 23, 42, 0.18);
}
.l1-win-arrow:disabled {
	opacity: 0.28;
	pointer-events: none;
}

.l1-win-card {
	flex: 0 0 260px;
	width: 260px;
	max-width: 260px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	background: #fff;
	border: 1px solid var(--l1-line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
	display: flex;
	flex-direction: column;
	opacity: 0.55;
	filter: blur(1.5px);
	transform: scale(0.88);
	transform-origin: center center;
	transition:
		transform 0.45s var(--l1-ease),
		opacity 0.4s ease,
		filter 0.4s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
	will-change: transform, opacity, filter;
	cursor: pointer;
}
.l1-win-card.is-active {
	opacity: 1;
	filter: none;
	transform: scale(1.06);
	background: #fff;
	border-color: rgba(38, 63, 216, 0.16);
	box-shadow: none;
	z-index: 2;
}
.l1-win-card.is-side {
	opacity: 0.58;
	filter: blur(1.5px);
	transform: scale(0.9);
	z-index: 1;
}
.l1-win-card.is-active:hover {
	transform: scale(1.08);
	box-shadow: none;
}
.l1-win-card.is-side:hover {
	transform: scale(0.93);
	opacity: 0.72;
	filter: blur(0.8px);
}

.l1-win-card-art {
	position: relative;
	height: 150px;
	overflow: hidden;
	background: #e8ebf0;
}
.l1-win-mesh {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background-image:
		radial-gradient(circle at 18% 28%, rgba(255,255,255,0.7) 0 2px, transparent 3px),
		radial-gradient(circle at 72% 58%, rgba(255,255,255,0.45) 0 1.5px, transparent 2.5px);
	background-size: 44px 44px, 32px 32px;
}
.l1-win-card.tone-violet .l1-win-card-art {
	background: linear-gradient(160deg, #dbe4ff 0%, #c4b5fd 40%, #a78bfa 100%);
}
.l1-win-card.tone-cyan .l1-win-card-art {
	background: linear-gradient(160deg, #e0f2fe 0%, #7dd3fc 45%, #38bdf8 100%);
}
.l1-win-card.tone-lime .l1-win-card-art {
	background: linear-gradient(160deg, #ecfccb 0%, #bef264 48%, #a3e635 100%);
}
.l1-win-card.tone-orange .l1-win-card-art {
	background: linear-gradient(160deg, #ffedd5 0%, #fdba74 45%, #fb923c 100%);
}
.l1-win-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(1px);
	opacity: 0.5;
	animation: l1OrbFloat 7s ease-in-out infinite;
}
.l1-win-orb.o1 { width: 110px; height: 110px; background: rgba(255,255,255,0.55); top: -28px; right: 12px; }
.l1-win-orb.o2 { width: 70px; height: 70px; background: rgba(15,23,42,0.1); bottom: 48px; left: 18px; animation-delay: -2s; }
.l1-win-orb.o3 { width: 48px; height: 48px; background: rgba(255,255,255,0.65); top: 36px; left: 42%; animation-delay: -3.5s; }
@keyframes l1OrbFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
.l1-win-card-ico {
	position: absolute;
	inset: 0 0 42px;
	display: grid;
	place-items: center;
	font-size: 2.6rem;
	color: rgba(15, 23, 42, 0.55);
	z-index: 1;
	transition: transform 0.35s var(--l1-ease);
}
.l1-win-card.tone-violet .l1-win-card-ico { color: rgba(38, 63, 216, 0.55); }
.l1-win-card.tone-cyan .l1-win-card-ico { color: rgba(2, 132, 199, 0.55); }
.l1-win-card.tone-lime .l1-win-card-ico { color: rgba(77, 124, 15, 0.55); }
.l1-win-card.tone-orange .l1-win-card-ico { color: rgba(194, 65, 12, 0.55); }
.l1-win-card:hover .l1-win-card-ico { transform: scale(1.06) translateY(-3px); }

.l1-win-glass {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.6rem;
	border-radius: 12px;
	font-size: 0.72rem;
	font-weight: 600;
	color: #0f172a;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.l1-win-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	font-size: 0.75rem;
	color: #fff;
	background: var(--gradient);
}
.l1-win-glass-text {
	line-height: 1.3;
	min-width: 0;
}

.l1-win-card-body {
	padding: 1rem 1.05rem 1.1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.3rem;
}
.l1-win-card-body h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #0f172a;
}
.l1-win-card-body p {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #64748b;
	flex: 1;
}
.l1-win-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
}
.l1-win-chips {
	display: flex;
	gap: 0.4rem;
}
.l1-win-chips a {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	display: grid;
	place-items: center;
	font-size: 0.9rem;
	text-decoration: none;
	background: #f8fafc;
	transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s;
	position: relative;
	z-index: 5;
	pointer-events: auto;
	cursor: pointer;
}
.l1-win-chips a i {
	line-height: 1;
	pointer-events: none;
}
.l1-win-chips .chip-phone {
	color: #263fd8 !important;
	background: rgba(38, 63, 216, 0.1);
	border-color: rgba(38, 63, 216, 0.18);
}
.l1-win-chips .chip-wa {
	color: #16a34a !important;
	background: rgba(22, 163, 74, 0.12);
	border-color: rgba(22, 163, 74, 0.2);
}
.l1-win-chips a:hover {
	transform: translateY(-2px);
	text-decoration: none;
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.l1-win-chips .chip-phone:hover {
	color: #fff !important;
	background: #263fd8;
	border-color: #263fd8;
}
.l1-win-chips .chip-wa:hover {
	color: #fff !important;
	background: #16a34a;
	border-color: #16a34a;
}

.l1-win-start {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	border: 1.5px solid #0f172a;
	font-size: 0.8rem;
	font-weight: 600;
	color: #0f172a;
	background: #fff;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.l1-win-start i { transition: transform 0.25s var(--l1-ease); font-size: 0.9rem; }
.l1-win-start:hover {
	background: #0f172a;
	color: #fff;
	border-color: #0f172a;
	text-decoration: none;
}
.l1-win-start:hover i { transform: translateX(3px); }

.l1-win-dots {
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.15rem 0 0.25rem;
}
.l1-win-dots button {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: rgba(15, 23, 42, 0.18);
	cursor: pointer;
	transition: background 0.25s, transform 0.25s;
}
.l1-win-dots button.is-active {
	background: #0f172a;
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	.l1-win-orb,
	.l1-win-card,
	.l1-win-panel { animation: none !important; }
	.l1-win-card,
	.l1-win-card.is-active,
	.l1-win-card.is-side {
		transition: none !important;
		filter: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}