@font-face
{
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/barlow-condensed-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/barlow-condensed-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/barlow-condensed-800.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/dm-sans-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root
{
	color-scheme: dark;
	--bg: #09060f;
	--text: #f2f3ed;
	--muted: #a9a1b5;
	--accent: #bd87ff;
	font-family: 'DM Sans', sans-serif;
	color: var(--text);
	background: var(--bg);
	font-synthesis: none;
}

*
{
	box-sizing: border-box;
}

html
{
	scroll-behavior: smooth;
	scroll-padding-top: 95px;
}

body
{
	margin: 0;
}

a
{
	color: inherit;
	text-decoration: none;
}

a:focus-visible, button:focus-visible, input:focus-visible
{
	outline: 3px solid var(--accent);
	outline-offset: 6px;
}

.skip
{
	position: fixed;
	top: -80px;
	left: 20px;
	z-index: 20;
	padding: 16px;
	background: var(--accent);
	color: var(--bg);
}

.skip:focus
{
	top: 12px;
}

.header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 5%;
	border-bottom: 1px solid #ffffff18;
	background: #09060fcc;
	position: sticky;
	top: 0;
	z-index: 10;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.brand
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.1;
	letter-spacing: -.5px;
}

.logo-crop
{
	position: relative;
	display: block;
	width: 44px;
	aspect-ratio: 420 / 510;
	overflow: hidden;
	flex-shrink: 0;
	mix-blend-mode: screen;
}

.logo-crop img
{
	position: absolute;
	width: 457.143%;
	max-width: none;
	left: -178.571%;
	top: -41.176%;
}

.brand .logo-crop
{
	filter: brightness(1.8);
}

.brand-sub
{
	display: block;
	font-size: 12px;
	letter-spacing: 5px;
	margin-top: 5px;
}

nav
{
	display: flex;
	align-items: center;
	gap: 38px;
	font-size: 14px;
}

nav a, .text-link, footer a
{
	transition: color .2s;
}

nav a:hover, .text-link:hover, footer a:hover
{
	color: var(--accent);
}

.nav-cta
{
	border: 1px solid #5e467b;
	padding: 13px 18px;
}

.nav-cta span
{
	margin-left: 20px;
}

.hero
{
	position: relative;
	isolation: isolate;
	min-height: 730px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hero-art
{
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #09060f 0%, #09060fd9 30%, transparent 58%);
	pointer-events: none;
}

#shader
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.particle-stage
{
	position: absolute;
	inset: -4% -7% 0 38%;
	pointer-events: none;
	background: radial-gradient(ellipse at 54% 48%, #53178b30, #22093c14 40%, transparent 68%);
}

.particle-stage .hero-emblem
{
	position: absolute;
	width: 49%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.particle-ready #shader
{
	opacity: 1;
}

.particle-ready .hero-emblem
{
	opacity: 0;
}

.tech-caption, .pipeline, .tech-detail, .hud
{
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
}

.hero-bottom-actions
{
	display: flex;
	align-items: center;
	gap: 20px;
}

#motion
{
	border: 0;
	padding: 5px 10px;
	font-size: 18px;
	color: #b69bce;
	background: transparent;
	cursor: pointer;
}

#motion:hover
{
	color: white;
}

.hero-emblem img
{
	filter: brightness(1.8);
}

.hud
{
	position: absolute;
	right: 9%;
	bottom: 12%;
	margin: 0;
	padding: 9px 12px;
	color: #c595f7;
	letter-spacing: .6px;
	border: 1px solid #7c489445;
	background: #09060fb3;
	white-space: nowrap;
}

.hud b
{
	color: var(--text);
	font-weight: 500;
}

.tech-caption
{
	color: #b292d4;
	margin: 28px 0 0;
	letter-spacing: .5px;
}

.pipeline
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-block: 1px solid #7c489445;
	padding: 23px 0;
	color: #c595f7;
	margin-top: 60px;
}

.tech-detail
{
	border-top: 1px solid #ffffff15;
	margin-top: 26px;
	padding-top: 18px;
	color: #c595f7;
	line-height: 1.8;
}

.tech-detail span
{
	display: block;
	color: #8d7b9e;
	margin-top: 7px;
}

.hero-content
{
	position: relative;
	padding: 55px 5% 50px;
	pointer-events: none;
}

.hero-content a
{
	pointer-events: auto;
}

.eyebrow
{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.7px;
	line-height: 1.7;
	margin: 0 0 24px;
}

.hero .eyebrow
{
	color: #d6d9cf;
	font-size: 12px;
}

.spark
{
	color: var(--accent);
	font-size: 20px;
	vertical-align: middle;
	margin-right: 9px;
}

h1, h2, h3, p
{
	margin-top: 0;
}

h1, h2, .closing h2
{
	font-family: 'Barlow Condensed', Impact, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
}

h1
{
	font-size: clamp(5.7rem, 8.8vw, 9rem);
	line-height: .88;
	letter-spacing: -.025em;
	margin-bottom: 27px;
}

h1 span, em
{
	color: var(--accent);
	font-style: normal;
}

.hero-description
{
	font-size: 16px;
	line-height: 1.7;
	color: #c6c9c0;
	margin-bottom: 28px;
}

.button
{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 44px;
	padding: 17px 22px;
	background: var(--accent);
	color: #09060f;
	font-size: 14px;
	font-weight: 700;
	transition: background .2s, transform .2s;
}

.button:hover
{
	background: #dab8ff;
	transform: translateY(-3px);
}

.button span
{
	font-size: 22px;
}

.hero-bottom
{
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0 5%;
	padding: 21px 0;
	border-top: 1px solid #ffffff26;
	font-size: 12px;
	letter-spacing: 1px;
	color: #aeb3a5;
}

.hero-bottom a span
{
	margin-left: 15px;
	color: var(--accent);
}

.manifesto-strip
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 20px;
	padding: 23px 4%;
	background: var(--accent);
	color: var(--bg);
	font-family: 'Barlow Condensed', Impact, sans-serif;
	font-weight: 700;
	font-size: clamp(1.3rem, 2.6vw, 2.5rem);
	white-space: nowrap;
	overflow: hidden;
}

.section
{
	padding: 100px 5%;
	max-width: 1600px;
	margin: auto;
}

.section-heading
{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin-bottom: 42px;
}

.section .eyebrow
{
	color: var(--muted);
}

h2
{
	font-size: clamp(3.6rem, 5.5vw, 5.5rem);
	line-height: .98;
	letter-spacing: -.01em;
	margin-bottom: 0;
}

.section-heading > p
{
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 3px;
}

h3
{
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.6px;
	margin-bottom: 0;
}

.text-link
{
	display: inline-flex;
	gap: 30px;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.text-link span
{
	color: var(--accent);
	font-size: 24px;
}

.studio
{
	background: #120c1d;
	max-width: none;
	border-top: 1px solid #ffffff14;
	border-bottom: 1px solid #ffffff14;
}

.studio-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12%;
}

.studio h2
{
	font-size: clamp(4rem, 7.3vw, 7rem);
}

.studio-copy
{
	max-width: 480px;
	padding-top: 8px;
}

.studio-copy p
{
	line-height: 1.8;
	color: var(--muted);
	margin-bottom: 24px;
}

.studio-copy .large-copy
{
	font-size: 28px;
	line-height: 1.4;
	color: var(--text);
	letter-spacing: -.5px;
}

.principles
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 65px;
}

.principles article
{
	border-top: 1px solid #ffffff36;
	padding-top: 24px;
}

.number
{
	color: var(--accent);
	font-size: 14px;
}

.principles h3
{
	margin: 35px 0 15px;
	font-size: 23px;
}

.principles p
{
	color: var(--muted);
	line-height: 1.8;
	font-size: 16px;
}

.record
{
	padding-top: 0;
}

.stats
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-bottom: 70px;
	border-block: 1px solid #ffffff36;
	padding: 34px 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

.stats strong
{
	display: block;
	font-family: 'Barlow Condensed', Impact, sans-serif;
	font-weight: 800;
	font-size: clamp(3.4rem, 5vw, 5rem);
	line-height: 1;
	color: var(--text);
	margin-bottom: 8px;
	letter-spacing: -.02em;
}

.stats strong span
{
	color: var(--accent);
}

.receipts
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.receipts article
{
	border-top: 1px solid #ffffff36;
	padding-top: 24px;
	transition: border-color .3s;
}

.receipts article:hover, .principles article:hover
{
	border-top-color: var(--accent);
}

.receipts h3
{
	margin: 35px 0 15px;
	font-size: 23px;
}

.receipts p
{
	color: var(--muted);
	line-height: 1.8;
	font-size: 16px;
}

.closing-copy
{
	font-size: 16px;
	line-height: 1.7;
	margin: -12px auto 36px;
	max-width: 520px;
	color: #2a1745;
}

.js .reveal
{
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s ease, transform .8s ease;
}

.js .reveal.in
{
	opacity: 1;
	transform: none;
}

.closing
{
	padding: 80px 5% 90px;
	background: var(--accent);
	color: var(--bg);
	text-align: center;
}

.closing h2
{
	font-size: clamp(4rem, 8.5vw, 8.5rem);
	margin-bottom: 36px;
}

.closing h2 span
{
	font-weight: 600;
}

.dark-button
{
	background: var(--bg);
	color: var(--text);
}

.dark-button:hover
{
	background: #302040;
}

footer
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 38px 5%;
}

footer p, footer > a:last-child
{
	font-size: 12px;
	color: var(--muted);
	margin: 0;
}

@media (min-width: 1600px)
{
	.hero-content, .studio
	{
		padding-left: max(5%, calc((100vw - 1440px) / 2));
	}
}

@media (max-width: 760px)
{
	.particle-stage
	{
		position: relative;
		inset: auto;
		width: 100%;
		height: 390px;
		order: 2;
		margin-top: -30px;
	}

	.hero-content
	{
		order: 1;
	}

	.hero-bottom
	{
		order: 3;
	}

	.hero-bottom-actions
	{
		gap: 4px;
	}

	.hero .hero-content
	{
		padding-top: 60px;
		padding-bottom: 25px;
	}

	.pipeline
	{
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 17px;
		line-height: 1.8;
	}

	.pipeline > span:nth-child(even)
	{
		display: none;
	}

	.header
	{
		padding: 20px 6%;
	}

	.brand
	{
		font-size: 14px;
	}

	nav
	{
		gap: 18px;
	}

	.nav-cta
	{
		display: none;
	}

	.hero
	{
		min-height: 710px;
	}

	.hero-content
	{
		padding: 48px 6% 40px;
	}

	.hero-art
	{
		display: none;
	}

	.hero .eyebrow
	{
		max-width: 270px;
	}

	h1
	{
		font-size: clamp(4.9rem, 13.8vw, 6.5rem);
	}

	.hero-bottom
	{
		font-size: 12px;
	}

	.hero-bottom > span
	{
		max-width: 180px;
		line-height: 1.6;
	}

	.hero-bottom a
	{
		align-self: center;
	}

	.manifesto-strip
	{
		flex-wrap: wrap;
		gap: 12px;
		font-size: 20px;
		padding: 19px 5%;
	}

	.manifesto-strip span:last-child
	{
		display: none;
	}

	.section
	{
		padding: 65px 6%;
	}

	.section-heading
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 23px;
	}

	.studio-grid, .principles, .receipts
	{
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.stats
	{
		grid-template-columns: 1fr 1fr;
		gap: 28px;
		margin-bottom: 46px;
	}

	.hud
	{
		right: auto;
		left: 6%;
		bottom: 8%;
		font-size: 11px;
	}

	.principles
	{
		margin-top: 40px;
	}

	.principles h3
	{
		margin-top: 22px;
	}

	.closing
	{
		padding: 60px 5%;
	}

	.closing h2
	{
		font-size: clamp(2.8rem, 10vw, 4.6rem);
	}

	footer
	{
		flex-wrap: wrap;
		padding: 32px 6%;
	}

	footer p
	{
		order: 3;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce)
{
	html
	{
		scroll-behavior: auto;
	}

	*, *::before, *::after
	{
		transition: none !important;
	}

	.js .reveal
	{
		opacity: 1;
		transform: none;
	}
}