*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--bg-900: #080c14;
	--bg-800: #0d1523;
	--panel-border: #24344f;
	--text-primary: #eef4ff;
	--text-dim: #a8b8d8;

	--accent-cyan: #4dd2ff;
	--accent-blue: #6aa3ff;
	--accent-violet: #8d7dff;
	--accent-active: #9fd4ff;

	--nav-edge-width: 28px;
	--nav-open-width: 320px;
	--nav-current-width: var(--nav-open-width);
	--nav-height: 520px;
	--edge-bg: #667;

	--hero-text-offset: 0px;
	--hero-text-max-width: 680px;
}


html {
	scrollbar-gutter: stable;
}

html,
body {
	margin: 0;
	padding: 0;
	background: linear-gradient(180deg, var(--bg-900), var(--bg-800));
	color: var(--text-primary);
	font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	min-height: 100%;
	min-width: 280px;
}

a {
	color: #9fd4ff;
	text-decoration-color: rgba(159, 212, 255, 0.65);
	cursor: pointer;
}

a:visited {
	color: #c7b8ff;
	text-decoration-color: rgba(199, 184, 255, 0.6);
}

a:hover,
a:focus-visible {
	color: #eef4ff;
	text-decoration-color: rgba(238, 244, 255, 0.9);
}

a:active {
	color: #ffffff;
}

#appRoot {
	position: relative;
}

.app-top-row {
	position: relative;
	min-height: var(--nav-height);
	margin-left: var(--nav-edge-width);
}

.nav-edge-toggle {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--nav-edge-width);
	height: 100vh;
	border: 0;
	background: var(--edge-bg);
	color: #dbe9ff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5000;
}

.nav-edge-toggle .arrow {
	transition: transform 280ms ease;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.hero-pane {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20px;
	z-index: 1;
	pointer-events: none;
}
.hero-pane::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(8, 12, 20, 0.96) 0%,
		rgba(8, 12, 20, 0.94) 22%,
		rgba(8, 12, 20, 0.86) 34%,
		rgba(8, 12, 20, 0.58) 48%,
		rgba(8, 12, 20, 0.18) 64%,
		rgba(8, 12, 20, 0) 78%
	);
	z-index: 0;
	pointer-events: none;
}

/* SAME AS ABOVE but variables aren't as safe with color-mix() support yet...
.hero-pane::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--bg-900) 96%, transparent) 0%,
		color-mix(in srgb, var(--bg-900) 94%, transparent) 22%,
		color-mix(in srgb, var(--bg-900) 86%, transparent) 34%,
		color-mix(in srgb, var(--bg-900) 58%, transparent) 48%,
		color-mix(in srgb, var(--bg-900) 18%, transparent) 64%,
		transparent 78%
	);
	z-index: 0;
	pointer-events: none;
} */
.hero-pane .hero-text {
	position: relative;
	z-index: 1;
	margin-left: var(--hero-text-offset);
	max-width: var(--hero-text-max-width);
	width: 100%;
	text-align: right;
	transition: margin-left 340ms ease;

	display: inline-block;
	padding: 16px 18px;
	border-radius: 12px;
	background: rgba(8, 12, 20, 0.46);
	border: 1px solid rgba(180, 210, 255, 0.14);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.28),
		0 2px 10px rgba(0, 0, 0, 0.24);
}
.hero-pane .hero-cta {
	pointer-events: auto;
}

/* mobile/narrow: nav overlays hero text area */
@media (max-width: 499px) {
	:root {
		--hero-text-offset: 0px;
	}
}

/* >=500: push hero text to the right of nav when nav is open */
@media (min-width: 500px) {
	.app.is-nav-open {
		--hero-text-offset: var(--nav-open-width);
	}

	.app.is-nav-collapsed {
		--hero-text-offset: 0px;
	}

	/* desktop locked-open keeps text offset */
	.app.is-nav-locked {
		--hero-text-offset: var(--nav-open-width);
	}
}
@media (min-width: 900px) {
	.nav-edge-toggle {
		display: none;
	}

	.app-top-row,
	.app-content {
		margin-left: 0;
	}
}

.nav-dock {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--nav-open-width);
	height: var(--nav-height);
	z-index: 30;
	overflow: hidden;
	transform: translateX(0);
	transition: transform 340ms ease;
	will-change: transform;
}
@media (max-width: 550px) {
	.nav-dock {
		background: var(--bg-900);
	}
}
.nav-shell {
	width: var(--nav-open-width);
	height: var(--nav-height);
}

#navCanvas {
	display: block;
	border: none;
	background: transparent;
}
@media (max-width: 499px) {
	#navCanvas {
		background: var(--bg-900);
	}
}

.app-content {
	margin-left: var(--nav-edge-width);
	margin-right: var(--nav-edge-width);
	margin-top: 14px;
	padding: 16px;
	border: 1px solid rgba(120, 150, 200, 0.35);
	background: rgba(14, 20, 32, 0.45);
	border-radius: 10px;
	opacity: 1;
	transition: opacity 260ms ease;
}

.app-content.is-faded {
	opacity: 0;
}

.app.is-nav-collapsed .nav-dock {
	transform: translateX(calc(-1 * var(--nav-open-width)));
}

.app.is-nav-open .nav-edge-toggle .arrow {
	transform: rotate(180deg);
}

.app.is-nav-locked .nav-edge-toggle {
	opacity: 0.55;
	cursor: default;
}

.app-content {
	margin-left: var(--nav-edge-width);
	margin-top: 14px;
	padding: 16px;
	border: 1px solid rgba(120, 150, 200, 0.35);
	background: rgba(14, 20, 32, 0.45);
	border-radius: 10px;
	opacity: 1;
	transition: opacity 260ms ease;
}

.app-content.is-faded {
	opacity: 0;
}

.content-inner {
	max-width: 920px;
	margin: 0 auto;
}

.content-header {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	margin: 0 0 10px;
	color: var(--text-primary);
}

.content-subtitle {
	font-size: clamp(1rem, 2vw, 1.25rem);
	margin: 0 0 16px;
	color: var(--text-dim);
	font-weight: 600;
}

.content-divider {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(150,180,220,0.5), transparent);
	margin: 18px 0;
}

.content-text-block {
	line-height: 1.75;
	color: #d8e4fb;
}

.content-center-emphasis {
	text-align: center;
	font-size: 1.08rem;
	color: #eef4ff;
	margin: 16px 0;
}

.content-image {
	width: 100%;
	max-width: 760px;
	height: auto;
	border-radius: 10px;
	display: block;
	margin: 14px 0;
}
/* .content-image {
	width: 100%;
	max-width: 100%;
	border-radius: 10px;
	display: block;
	margin: 14px 0;
} */

.content-two-media {
	display: flex;
	gap: 16px;
	margin: 16px 0;
}

.content-two-media .media-item {
	flex: 1;
	min-width: 0;
}

.content-two-media img,
.content-two-media iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	display: block;
	background: #0b111c;
}

@media (max-width: 760px) {
	.content-two-media {
		flex-direction: column;
	}
}
.content-video {
	width: 100%;
	max-width: 760px;
	height: auto;
	border: 0;
	border-radius: 10px;
	display: block;
	margin: 14px 0;
	background: #0b111c;
}

.content-two-media img,
.content-two-media iframe,
.content-two-media video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	display: block;
	background: #0b111c;
}