/*
 * LIGHTSIDE Home
 * Definitive homepage layout and visual treatments.
 */

.ls-home {
	background: var(--ls-bg);
	color: var(--ls-text);
}

.ls-home-hero {
	position: relative;
	display: grid;
	min-height: clamp(760px, 100vh, 1080px);
	align-items: end;
	overflow: hidden;
	isolation: isolate;
	background: var(--ls-bg);
}

.ls-home-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
	margin: 0;
}

.ls-home-hero__media img,
.ls-home-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
	filter: saturate(0.92) contrast(1.08);
}

.ls-home-hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.62;
}

.ls-home-hero__video:not([src]):not(:has(source)) {
	display: none;
}

.ls-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(3, 4, 6, 0.98) 0%, rgba(3, 4, 6, 0.86) 34%, rgba(3, 4, 6, 0.34) 72%, rgba(3, 4, 6, 0.82) 100%),
		linear-gradient(180deg, rgba(3, 4, 6, 0.18) 0%, rgba(3, 4, 6, 0.22) 52%, rgba(3, 4, 6, 1) 100%);
}

.ls-home-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	height: 34%;
	background:
		linear-gradient(rgba(0, 157, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 157, 255, 0.08) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(180deg, transparent, black 24%, black);
}

.ls-home-hero__inner {
	width: min(100% - (var(--ls-gutter) * 2), var(--ls-container));
	margin-inline: auto;
	padding-block: clamp(9rem, 14vw, 13rem) clamp(5rem, 9vw, 7rem);
}

.ls-home-hero__title {
	max-width: 10ch;
	margin: 0;
	font-family: var(--ls-font-display);
	font-size: clamp(4.6rem, 12vw, 12rem);
	font-weight: 860;
	letter-spacing: 0;
	line-height: 0.84;
	text-wrap: balance;
}

.ls-home-hero__lead {
	max-width: 44rem;
	margin-top: var(--ls-space-l);
	color: var(--ls-text-muted);
	font-size: var(--ls-type-lead);
	line-height: 1.55;
}

.ls-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-s);
	margin-top: var(--ls-space-l);
}

.ls-home-proof {
	display: flex;
	gap: 1px;
	overflow: hidden;
	margin-top: clamp(3rem, 7vw, 5rem);
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius-s);
	background: var(--ls-border);
}

.ls-home-proof__item {
	--diagram-pan-x: -35%;
	--diagram-pan-y: -12%;
	position: relative;
	isolation: isolate;
	flex: 1 1 0;
	min-width: 0;
	min-height: 17rem;
	padding: clamp(1rem, 2vw, 1.35rem);
	overflow: hidden;
	background: rgba(3, 4, 6, 0.68);
	backdrop-filter: blur(16px);
	transition: flex-grow var(--ls-duration-slow) var(--ls-ease-standard), background-color var(--ls-duration-base) var(--ls-ease-standard), box-shadow var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-proof__item > :not(.ls-home-proof__media) {
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.ls-home-proof__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(rgba(0, 157, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 157, 255, 0.08) 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: 0;
	transform: scale(1.12);
	transition: opacity var(--ls-duration-base) var(--ls-ease-standard), transform var(--ls-duration-slow) var(--ls-ease-standard);
}

.ls-home-proof__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(3, 4, 6, 0.14), rgba(3, 4, 6, 0.78)),
		linear-gradient(90deg, rgba(3, 4, 6, 0.78), rgba(3, 4, 6, 0.2));
	opacity: 0.84;
	transition: opacity var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-proof__item:hover,
.ls-home-proof__item:focus-visible {
	flex-grow: 1.5;
	background-color: rgba(2, 12, 20, 0.9);
	box-shadow: inset 0 0 0 1px rgba(0, 157, 255, 0.35);
	outline: 0;
}

.ls-home-proof__item:hover::before,
.ls-home-proof__item:focus-visible::before,
.ls-home-proof__item:hover::after,
.ls-home-proof__item:focus-visible::after {
	opacity: 1;
}

.ls-home-proof__item:hover::before,
.ls-home-proof__item:focus-visible::before {
	transform: scale(1);
}

.ls-home-proof__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.ls-home-proof__media img {
	position: absolute;
	left: 0;
	top: 0;
	width: 340%;
	height: 220%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform: translate3d(var(--diagram-pan-x), var(--diagram-pan-y), 0);
	filter: grayscale(1) contrast(1.18) brightness(0.82);
	transition: filter var(--ls-duration-base) var(--ls-ease-standard), transform var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-proof__item:hover .ls-home-proof__media img,
.ls-home-proof__item:focus-visible .ls-home-proof__media img {
	filter: grayscale(0.82) contrast(1.28) brightness(0.98);
}

.ls-home-section {
	padding-block: var(--ls-space-section);
}

.ls-home-section--line {
	border-top: 1px solid var(--ls-border);
}

.ls-home-section__head {
	width: min(100% - (var(--ls-gutter) * 2), var(--ls-container));
	max-width: 840px;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.ls-home-section__eyebrow {
	color: var(--ls-color-electric-soft);
	font-family: var(--ls-font-mono);
	font-size: var(--ls-type-meta);
	font-weight: 760;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ls-home-section__title {
	margin: var(--ls-space-s) 0 0;
	font-family: var(--ls-font-display);
	font-size: clamp(2.8rem, 7vw, 7rem);
	font-weight: 830;
	line-height: 0.94;
	text-wrap: balance;
}

.ls-home-section__copy {
	max-width: 44rem;
	margin-top: var(--ls-space-m);
	color: var(--ls-text-muted);
	font-size: var(--ls-type-lead);
}

.ls-home-grid {
	width: min(100% - (var(--ls-gutter) * 2), var(--ls-container));
	margin-inline: auto;
}

.ls-home-tech-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ls-grid-gap);
}

.ls-home-card {
	--card-x: 50%;
	--card-y: 0%;
	position: relative;
	display: grid;
	min-height: 24rem;
	align-content: space-between;
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	overflow: hidden;
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius-s);
	background:
		radial-gradient(circle at var(--card-x) var(--card-y), rgba(0, 157, 255, 0.22), transparent 34%),
		linear-gradient(180deg, rgba(245, 247, 250, 0.075), rgba(245, 247, 250, 0.018)),
		var(--ls-surface);
	box-shadow: var(--ls-shadow-s);
	transition: transform var(--ls-duration-base) var(--ls-ease-standard), border-color var(--ls-duration-base) var(--ls-ease-standard), box-shadow var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 157, 255, 0.5);
	box-shadow: var(--ls-shadow-m);
}

.ls-home-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 157, 255, 0.82), transparent);
	opacity: 0;
	transition: opacity var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-card:hover::after {
	opacity: 1;
}

.ls-home-card__icon {
	color: var(--ls-color-electric-soft);
}

.ls-home-card__title {
	margin: 0;
	font-family: var(--ls-font-display);
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 1.05;
}

.ls-home-card__copy {
	margin: var(--ls-space-s) 0 0;
	color: var(--ls-text-muted);
	font-size: var(--ls-type-small);
}

.ls-home-card--diagram {
	--diagram-pan-x: -35%;
	--diagram-pan-y: -8%;
	cursor: crosshair;
	isolation: isolate;
}

.ls-home-card--diagram .ls-home-card__icon,
.ls-home-card--diagram .ls-home-card__title,
.ls-home-card--diagram .ls-home-card__copy {
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.68);
}

.ls-home-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	cursor: pointer;
}

.ls-home-card__link:focus-visible {
	outline: 2px solid var(--ls-color-electric);
	outline-offset: -6px;
}

.ls-home-card__diagram {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	border-radius: inherit;
	opacity: 0.44;
	pointer-events: none;
}

.ls-home-card__diagram img {
	position: absolute;
	left: 0;
	top: 0;
	width: 360%;
	height: 120%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform: translate3d(var(--diagram-pan-x), var(--diagram-pan-y), 0);
	filter: grayscale(1) contrast(1.18) brightness(0.72);
	transition: filter var(--ls-duration-base) var(--ls-ease-standard), opacity var(--ls-duration-base) var(--ls-ease-standard);
	will-change: transform;
}

.ls-home-card--diagram::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(3, 4, 6, 0.28), rgba(3, 4, 6, 0.84) 70%),
		radial-gradient(circle at var(--card-x) var(--card-y), rgba(0, 157, 255, 0.26), transparent 38%);
	pointer-events: none;
}

.ls-home-card--diagram:hover .ls-home-card__diagram {
	opacity: 0.58;
}

.ls-home-card--diagram:hover .ls-home-card__diagram img {
	filter: grayscale(0.75) contrast(1.24) brightness(0.82);
}

.ls-home-solutions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius-s);
	background: var(--ls-border);
}

.ls-home-solution {
	--diagram-pan-x: -32%;
	--diagram-pan-y: -18%;
	position: relative;
	display: grid;
	align-content: end;
	min-height: 18rem;
	padding: clamp(1.25rem, 2.6vw, 2rem);
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(245, 247, 250, 0.06), rgba(245, 247, 250, 0.012)),
		var(--ls-bg-soft);
	transition: transform var(--ls-duration-base) var(--ls-ease-standard), box-shadow var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-solution > :not(.ls-home-solution__media) {
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
}

.ls-home-solution::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(3, 4, 6, 0.02), rgba(3, 4, 6, 0.5)),
		linear-gradient(90deg, rgba(3, 4, 6, 0.44), rgba(3, 4, 6, 0.02));
	pointer-events: none;
}

.ls-home-solution:hover,
.ls-home-solution:focus-visible {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 1px rgba(0, 157, 255, 0.34);
	outline: 0;
}

.ls-home-solution__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.ls-home-solution__media img {
	position: absolute;
	left: 0;
	top: 0;
	width: 190%;
	height: 165%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform: translate3d(var(--diagram-pan-x), var(--diagram-pan-y), 0);
	filter: grayscale(0) contrast(1.18) brightness(1.08) saturate(1.12);
	transition: filter var(--ls-duration-base) var(--ls-ease-standard), transform var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-solution:hover .ls-home-solution__media img,
.ls-home-solution:focus-visible .ls-home-solution__media img {
	filter: grayscale(0) contrast(1.24) brightness(1.18) saturate(1.18);
}

.ls-home-solution__number {
	color: var(--ls-color-electric-soft);
	font-family: var(--ls-font-mono);
	font-size: var(--ls-type-meta);
	font-weight: 800;
}

.ls-home-lab {
	position: relative;
	overflow: hidden;
	border-block: 1px solid var(--ls-border);
	background:
		linear-gradient(rgba(0, 157, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 157, 255, 0.055) 1px, transparent 1px),
		linear-gradient(180deg, rgba(0, 157, 255, 0.11), transparent 48%),
		var(--ls-bg);
	background-size: 56px 56px, 56px 56px, auto, auto;
}

.ls-home-lab__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(22rem, 1.14fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.ls-home-lab .ls-home-section__title {
	max-width: 10ch;
	font-size: clamp(2.8rem, 4.8vw, 5.4rem);
	line-height: 0.96;
}

.ls-home-lab .ls-home-section__copy {
	max-width: 34rem;
}

.ls-home-lab__console {
	--diagram-pan-x: -45%;
	--diagram-pan-y: -30%;
	position: relative;
	min-height: 34rem;
	overflow: hidden;
	border: 1px solid rgba(0, 157, 255, 0.32);
	border-radius: var(--ls-radius-s);
	background: rgba(3, 4, 6, 0.72);
	box-shadow: var(--ls-glow-electric);
	backdrop-filter: blur(14px);
}

.ls-home-lab__media {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.ls-home-lab__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 4, 6, 0.08), rgba(3, 4, 6, 0.42));
}

.ls-home-lab__media img {
	position: absolute;
	left: 0;
	top: 0;
	width: 180%;
	height: 165%;
	max-width: none;
	object-fit: cover;
	transform: translate3d(var(--diagram-pan-x), var(--diagram-pan-y), 0);
	filter: contrast(1.08) brightness(0.86) saturate(1.05);
	transition: filter var(--ls-duration-base) var(--ls-ease-standard), transform var(--ls-duration-base) var(--ls-ease-standard);
}

.ls-home-lab__console:hover .ls-home-lab__media img,
.ls-home-lab__console:focus-visible .ls-home-lab__media img {
	filter: contrast(1.12) brightness(1) saturate(1.12);
}

.ls-home-lab__caption {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 1;
	display: grid;
	gap: 0.2rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(0, 157, 255, 0.34);
	background: rgba(3, 4, 6, 0.78);
	color: var(--ls-text-muted);
	font-family: var(--ls-font-mono);
	font-size: var(--ls-type-small);
}

.ls-home-lab__caption strong {
	color: var(--ls-color-electric-soft);
}

.ls-home-lab__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ls-space-m);
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--ls-border);
	color: var(--ls-text-muted);
	font-family: var(--ls-font-mono);
	font-size: var(--ls-type-small);
}

.ls-home-lab__row strong {
	color: var(--ls-color-electric-soft);
}

.ls-home-lab__row span {
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

.ls-home-handbook {
	background:
		radial-gradient(circle at 82% 18%, rgba(0, 157, 255, 0.18), transparent 28rem),
		linear-gradient(rgba(0, 157, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 157, 255, 0.045) 1px, transparent 1px),
		var(--ls-bg);
	background-size: auto, 52px 52px, 52px 52px, auto;
	color: var(--ls-text);
}

.ls-home-handbook h2,
.ls-home-handbook h3,
.ls-home-handbook p {
	color: var(--ls-text);
}

.ls-home-handbook .ls-home-section__eyebrow {
	color: var(--ls-color-electric-soft);
}

.ls-home-book {
	display: grid;
	min-height: 42rem;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	overflow: hidden;
	border-radius: var(--ls-radius-s);
	background:
		radial-gradient(circle at 50% 28%, rgba(0, 157, 255, 0.24), transparent 22rem),
		linear-gradient(180deg, rgba(0, 157, 255, 0.1), rgba(3, 4, 6, 0.96)),
		linear-gradient(rgba(245, 247, 250, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245, 247, 250, 0.08) 1px, transparent 1px),
		var(--ls-bg);
	background-size: auto, auto, 42px 42px, 42px 42px, auto;
	color: var(--ls-text);
	box-shadow: 0 28px 90px rgba(3, 4, 6, 0.34);
}

.ls-home-book__cover {
	width: min(82%, 30rem);
	margin: 0;
	filter: drop-shadow(0 36px 80px rgba(0, 0, 0, 0.62));
	transform: rotate(-2deg);
}

.ls-home-book__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ls-radius-xs);
}

.ls-home-store {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--ls-border);
	background:
		linear-gradient(135deg, rgba(0, 157, 255, 0.2), transparent 34%),
		linear-gradient(rgba(0, 157, 255, 0.065) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 157, 255, 0.065) 1px, transparent 1px),
		var(--ls-bg);
	background-size: auto, 52px 52px, 52px 52px, auto;
}

.ls-home-store::before {
	content: "";
	position: absolute;
	inset: 8% 5% auto auto;
	width: min(30rem, 42vw);
	aspect-ratio: 1;
	border: 1px solid rgba(0, 157, 255, 0.18);
	border-radius: 50%;
	pointer-events: none;
}

.ls-home-store__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.58fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.ls-home-store__title {
	max-width: 11ch;
	margin: var(--ls-space-s) 0 0;
	font-family: var(--ls-font-display);
	font-size: clamp(3.4rem, 8vw, 8.5rem);
	font-weight: 850;
	line-height: 0.88;
	text-wrap: balance;
}

.ls-home-store__showcase {
	position: relative;
	display: grid;
	min-height: clamp(34rem, 52vw, 48rem);
	align-items: end;
}

.ls-home-store__cover {
	position: absolute;
	inset: 0 auto 0 6%;
	width: min(72%, 26rem);
	margin: 0;
	transform: rotate(-4deg);
	filter: drop-shadow(0 36px 80px rgba(0, 0, 0, 0.58));
}

.ls-home-store__cover img {
	display: block;
	width: 100%;
	border: 1px solid rgba(125, 214, 255, 0.28);
	border-radius: var(--ls-radius-s);
}

.ls-home-store__panel {
	position: relative;
	justify-self: end;
	width: min(72%, 22rem);
	padding: clamp(1rem, 3vw, 1.6rem);
	border: 1px solid var(--ls-border);
	border-radius: var(--ls-radius-s);
	background:
		linear-gradient(180deg, rgba(245, 247, 250, 0.09), rgba(245, 247, 250, 0.025)),
		rgba(3, 4, 6, 0.74);
	backdrop-filter: blur(18px);
	box-shadow: var(--ls-shadow-m);
}

.ls-home-store__panel p:last-child {
	margin-bottom: 0;
	color: var(--ls-text-muted);
}

.ls-home-final {
	position: relative;
	overflow: hidden;
	padding-block: clamp(6rem, 12vw, 10rem);
	border-top: 1px solid var(--ls-border);
	background:
		linear-gradient(180deg, rgba(0, 157, 255, 0.12), transparent 46%),
		var(--ls-bg);
	text-align: center;
}

.ls-home-final::before {
	content: "";
	position: absolute;
	inset: 12% 8%;
	border: 1px solid rgba(0, 157, 255, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.ls-home-final__title {
	position: relative;
	max-width: 10ch;
	margin: 0 auto;
	font-family: var(--ls-font-display);
	font-size: clamp(3.25rem, 8vw, 8rem);
	font-weight: 840;
	line-height: 0.92;
	text-wrap: balance;
}

.ls-home-final__actions {
	position: relative;
	justify-content: center;
	margin-top: var(--ls-space-xl);
}

@media (max-width: 1180px) {
	.ls-home-tech-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ls-home-solutions,
	.ls-home-lab__grid,
	.ls-home-store__grid {
		grid-template-columns: 1fr;
	}

	.ls-home-proof {
		flex-direction: column;
	}

	.ls-home-proof__item {
		min-height: 18rem;
	}

	.ls-home-hero {
		min-height: 780px;
	}

	.ls-home-hero__title {
		font-size: clamp(4.1rem, 18vw, 8rem);
	}

	.ls-home-lab__console,
	.ls-home-book,
	.ls-home-store__showcase {
		min-height: 28rem;
	}

	.ls-home-store__cover {
		inset: 0 auto 0 0;
		width: min(62%, 23rem);
	}
}

@media (max-width: 620px) {
	.ls-home-tech-grid {
		grid-template-columns: 1fr;
	}

	.ls-home-card {
		min-height: 18rem;
	}

	.ls-home-hero__actions,
	.ls-home-final__actions {
		display: grid;
	}

	.ls-home-store__showcase {
		min-height: 32rem;
	}

	.ls-home-store__cover,
	.ls-home-store__panel {
		width: 100%;
	}

	.ls-home-store__cover {
		position: relative;
		inset: auto;
		transform: none;
	}

	.ls-home-store__panel {
		justify-self: stretch;
		margin-top: -2rem;
	}

	.ls-home-hero__media img,
	.ls-home-hero__video {
		object-position: 74% center;
	}
}