@font-face {
	font-family: 'Barlow';
	font-weight: 500;
	src: url('assets/fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-weight: 700;
	src: url('assets/fonts/barlow-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: italic;
	font-weight: 600;
	src: url('assets/fonts/barlow-condensed-latin-600-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: italic;
	font-weight: 700;
	src: url('assets/fonts/barlow-condensed-latin-700-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: italic;
	font-weight: 800;
	src: url('assets/fonts/barlow-condensed-latin-800-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: italic;
	font-weight: 900;
	src: url('assets/fonts/barlow-condensed-latin-900-italic.woff2') format('woff2');
}

/* 3 Pixeli UI Kit `Foundations`, as mirrored by the landing page's app.css. */
:root {
	--primary-500: #a66bff;
	--primary-600: #7c3aed;
	--primary-300: #d8c2ff;
	--primary-tint: rgba(166, 107, 255, 0.18);
	--primary-glow: rgba(166, 107, 255, 0.45);
	--magenta: #ff1aff;

	--surface-base: #120e1c;
	--surface-deep: #07050c;
	--surface-tile: rgba(21, 17, 30, 0.88);
	--surface-selected: rgba(42, 27, 69, 0.94);
	--surface-raised: rgba(18, 14, 26, 0.97);
	--surface-field: rgba(14, 11, 21, 0.85);

	--border-subtle: rgba(255, 255, 255, 0.07);
	--border-strong: rgba(255, 255, 255, 0.22);

	--text-primary: #fff;
	--text-secondary: rgba(255, 255, 255, 0.75);
	--text-muted: rgba(255, 255, 255, 0.5);

	--status-success: #4ade80;

	--font-body: 'Barlow', sans-serif;
	--font-display: 'Barlow Condensed', sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	background: var(--surface-deep);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
}

#stage {
	position: relative;
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	background: var(--surface-deep);
}

#shake,
#cam,
.scene,
.layer,
.fill {
	position: absolute;
	inset: 0;
}

.scene {
	visibility: hidden;
	overflow: hidden;
}

.bg {
	position: absolute;
	inset: -2%;
	width: 104%;
	height: 104%;
	object-fit: cover;
	will-change: transform;
}

.display {
	font: italic 900 200px/0.86 var(--font-display);
	text-transform: uppercase;
	letter-spacing: -0.005em;
}

.h1 {
	font: italic 800 120px/0.9 var(--font-display);
	text-transform: uppercase;
}

.h2 {
	font: italic 800 64px/0.95 var(--font-display);
	text-transform: uppercase;
}

.eyebrow {
	font: italic 700 30px var(--font-display);
	letter-spacing: 0.08em;
	color: var(--primary-300);
	text-transform: uppercase;
}

.body {
	font: 500 28px/1.35 var(--font-body);
	color: var(--text-secondary);
}

.numeric {
	font: 700 24px var(--font-body);
	letter-spacing: 0.03em;
}

.accent {
	color: var(--primary-500);
}

.outline {
	color: transparent;
	-webkit-text-stroke: 2px rgba(166, 107, 255, 0.35);
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-secondary);
	font: italic 600 24px var(--font-display);
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 4px;
	background: var(--primary-500);
	font: 700 20px var(--font-body);
	letter-spacing: 0.04em;
	color: #fff;
}

.chip .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
}

.button {
	display: inline-flex;
	align-items: center;
	height: 84px;
	padding: 0 34px;
	border-radius: 6px;
	font: italic 700 36px var(--font-display);
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.button.primary {
	background: var(--primary-500);
	box-shadow: 0 0 28px var(--primary-glow);
}

.button.secondary {
	background: var(--surface-tile);
	border: 2px solid var(--border-subtle);
}

.icon-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 12px;
	background: var(--primary-tint);
}

.icon-tile img {
	width: 52px;
	height: 52px;
}

.card {
	border: 2px solid var(--border-subtle);
	border-radius: 14px;
	background: var(--surface-raised);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* Split-text wrappers: a line mask so words can rise out of it. */
.mask {
	display: block;
	overflow: hidden;
	padding: 0.06em 0.12em 0.1em 0.04em;
	margin: -0.06em -0.12em -0.1em -0.04em;
}

.mask > span {
	display: inline-block;
}

/* ---------- global overlays ---------- */

#leaks {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}

.leak {
	position: absolute;
	border-radius: 50%;
	filter: blur(0);
}

#vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 95% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55));
	pointer-events: none;
}

#grain {
	position: absolute;
	inset: 0;
	width: 1920px;
	height: 1080px;
	opacity: 0.09;
	mix-blend-mode: overlay;
	pointer-events: none;
}

#flash {
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	mix-blend-mode: screen;
}

#flash.purple {
	background: radial-gradient(70% 70% at 50% 50%, #e9dbff, #a66bff);
}

.bar {
	position: absolute;
	left: 0;
	right: 0;
	height: 138px;
	background: #000;
}

.bar.top {
	top: 0;
}

.bar.bottom {
	bottom: 0;
}

#blackout {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
}

/* ---------- intro ---------- */

.intro-line {
	position: absolute;
	left: 150px;
	bottom: 230px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.intro-line .h1 {
	font-size: 132px;
	text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}

.scrim-left {
	background: linear-gradient(
		to right,
		rgba(7, 5, 12, 0.92),
		rgba(7, 5, 12, 0.55) 45%,
		rgba(7, 5, 12, 0.1) 75%,
		rgba(7, 5, 12, 0.3)
	);
}

.scrim-bottom {
	background: linear-gradient(to bottom, rgba(7, 5, 12, 0.35), rgba(7, 5, 12, 0) 30%, rgba(7, 5, 12, 0) 55%, rgba(7, 5, 12, 0.95));
}

.sweep {
	position: absolute;
	width: 900px;
	height: 2200px;
	left: 50%;
	top: -600px;
	background: linear-gradient(to right, rgba(216, 194, 255, 0), rgba(216, 194, 255, 0.22), rgba(216, 194, 255, 0));
	mix-blend-mode: screen;
	transform-origin: 50% 0;
}

/* ---------- logo ---------- */

.logo-lockup {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
}

.mark {
	position: relative;
	width: 204px;
	height: 280px;
}

.mark img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mark .glow {
	filter: blur(22px);
	opacity: 0.9;
	transform: scale(1.04);
}

.mark .glow2 {
	filter: blur(60px);
	opacity: 0.55;
	transform: scale(1.25);
}

.wordmark {
	font: italic 900 250px/0.8 var(--font-display);
	letter-spacing: 0.005em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rays {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3200px;
	height: 3200px;
	margin: -1600px 0 0 -1600px;
	background: repeating-conic-gradient(
		from 0deg,
		rgba(166, 107, 255, 0.13) 0deg 4deg,
		rgba(166, 107, 255, 0) 4deg 15deg
	);
	-webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 75%);
	mask-image: radial-gradient(closest-side, #000 10%, transparent 75%);
}

.radial {
	background: radial-gradient(50% 60% at 50% 50%, rgba(124, 58, 237, 0.55), rgba(42, 27, 69, 0.35) 45%, rgba(7, 5, 12, 0) 80%),
		var(--surface-deep);
}

.spark {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #f1e6ff;
	box-shadow: 0 0 12px 3px rgba(166, 107, 255, 0.9);
}

.streak {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 3px;
	width: 180px;
	margin-top: -1.5px;
	transform-origin: 0 50%;
	background: linear-gradient(to right, rgba(216, 194, 255, 0), rgba(216, 194, 255, 0.9));
	border-radius: 2px;
}

/* ---------- hero ---------- */

.hero-copy {
	position: absolute;
	left: 130px;
	top: 0;
	bottom: 0;
	justify-content: center;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.hero-copy .display {
	font-size: 230px;
	text-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- pick your roleplay ---------- */

.pick {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
}

.pick .display {
	font-size: 190px;
}

.icon-row {
	display: flex;
	gap: 26px;
	margin-top: 26px;
}

/* ---------- features ---------- */

.feature .bg {
	filter: saturate(1.05) contrast(1.05);
}

.feature .ghost {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
	font: italic 900 420px/0.8 var(--font-display);
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 3px rgba(216, 194, 255, 0.16);
}

.feature .copy {
	position: absolute;
	left: 130px;
	top: 50%;
	width: 820px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

.feature .index {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--primary-300);
}

.feature .index .rule {
	width: 70px;
	height: 3px;
	background: var(--primary-500);
}

.feature .title {
	font: italic 900 170px/0.84 var(--font-display);
	text-transform: uppercase;
	text-shadow: 0 8px 50px rgba(0, 0, 0, 0.55);
	white-space: nowrap;
}

.feature .body {
	max-width: 700px;
	font-size: 32px;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.feature .cutout {
	position: absolute;
	bottom: -10px;
	right: 40px;
	height: 900px;
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}

.toast {
	position: absolute;
	right: 90px;
	top: 90px;
	width: 560px;
	display: flex;
	gap: 18px;
	padding: 22px 24px;
	border-radius: 10px;
	background: var(--surface-raised);
	border: 2px solid var(--border-subtle);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.toast .t-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: var(--primary-tint);
}

.toast .t-icon img {
	width: 32px;
	height: 32px;
}

.toast .t-title {
	font: italic 800 30px var(--font-display);
	text-transform: uppercase;
}

.toast .t-body {
	font: 500 22px/1.3 var(--font-body);
	color: var(--text-secondary);
	margin-top: 4px;
}

.toast.success .t-icon {
	background: rgba(74, 222, 128, 0.16);
}

.sirens .s {
	position: absolute;
	top: -20%;
	width: 70%;
	height: 140%;
	mix-blend-mode: screen;
	opacity: 0;
}

.sirens .red {
	left: -20%;
	background: radial-gradient(closest-side, rgba(255, 40, 80, 0.75), rgba(255, 40, 80, 0));
}

.sirens .blue {
	right: -20%;
	background: radial-gradient(closest-side, rgba(60, 110, 255, 0.8), rgba(60, 110, 255, 0));
}

.eq {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 260px;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 0 8px;
	opacity: 0.55;
	mix-blend-mode: screen;
}

.eq i {
	flex: 1;
	height: 100%;
	transform-origin: 50% 100%;
	background: linear-gradient(to top, rgba(166, 107, 255, 0.9), rgba(166, 107, 255, 0));
}

/* ---------- characters ---------- */

.char .bgc {
	position: absolute;
	inset: 0;
}

.char .word {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font: italic 900 460px/0.8 var(--font-display);
	text-transform: uppercase;
}

.char .word.fill {
	color: rgba(255, 255, 255, 0.08);
	position: absolute;
	inset: auto;
}

.char .cut {
	position: absolute;
	bottom: 0;
	right: 6%;
	height: 1000px;
	filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}

.char .label {
	position: absolute;
	left: 90px;
	bottom: 80px;
	display: flex;
	align-items: baseline;
	gap: 20px;
}

.char .label .n {
	font: italic 800 44px var(--font-display);
	color: var(--primary-300);
}

.char .label .name {
	font: italic 900 110px/0.85 var(--font-display);
	text-transform: uppercase;
}

.title-card {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

.title-card .display {
	font-size: 196px;
}

/* ---------- UI showcase ---------- */

.floor {
	position: absolute;
	left: -50%;
	right: -50%;
	top: 58%;
	height: 1200px;
	background-image: linear-gradient(rgba(166, 107, 255, 0.28) 2px, transparent 2px),
		linear-gradient(90deg, rgba(166, 107, 255, 0.28) 2px, transparent 2px);
	background-size: 120px 120px;
	transform: perspective(900px) rotateX(72deg);
	transform-origin: 50% 0;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 70%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 70%);
}

.glow-orb {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(124, 58, 237, 0.55), rgba(124, 58, 237, 0));
}

.persp {
	position: absolute;
	inset: 0;
	perspective: 2200px;
	perspective-origin: 50% 45%;
}

.screen {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1280px;
	height: 720px;
	margin: -360px 0 0 -640px;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid rgba(216, 194, 255, 0.25);
	box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7), 0 0 80px rgba(124, 58, 237, 0.35);
	background: #0b0812;
}

.screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
}

.screen .glare {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 60%);
	background-size: 250% 100%;
}

.ui-label {
	position: absolute;
	left: 130px;
	bottom: 110px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ui-label .h1 {
	font-size: 110px;
}

.ui-label .body {
	font-size: 28px;
	max-width: 620px;
}

.ui-head {
	position: absolute;
	left: 0;
	right: 0;
	top: 110px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.ui-head .h1 {
	font-size: 110px;
}

/* ---------- join ---------- */

.steps {
	position: absolute;
	left: 0;
	top: 410px;
	display: flex;
	gap: 36px;
	padding-left: 130px;
}

.step {
	position: relative;
	width: 530px;
	height: 520px;
	padding: 44px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border: 2px solid var(--border-subtle);
	border-radius: 14px;
	background: var(--surface-tile);
}

.step .num {
	font: italic 900 110px/0.8 var(--font-display);
	color: var(--primary-500);
}

.step .h2 {
	font-size: 60px;
}

.step .body {
	font-size: 26px;
}

.step .action {
	margin-top: auto;
}

.join-head {
	position: absolute;
	left: 130px;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.join-head .h1 {
	font-size: 150px;
}

.console {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 84px;
	padding: 0 24px;
	border-radius: 6px;
	border: 2px solid var(--border-subtle);
	background: var(--surface-field);
	font: 700 30px var(--font-body);
	letter-spacing: 0.03em;
}

.console img {
	width: 32px;
	height: 32px;
}

.caret {
	display: inline-block;
	width: 3px;
	height: 34px;
	background: var(--primary-300);
	vertical-align: middle;
	margin-left: 2px;
}

.cursor {
	position: absolute;
	width: 44px;
	height: 44px;
}

.switch {
	display: flex;
	align-items: center;
	gap: 18px;
	font: italic 700 32px var(--font-display);
	letter-spacing: 0.03em;
}

.switch .track {
	position: relative;
	width: 92px;
	height: 50px;
	border-radius: 25px;
	background: rgba(255, 255, 255, 0.14);
}

.switch .knob {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
}

/* ---------- status + cta + end ---------- */

.status-card {
	position: absolute;
	right: 170px;
	top: 50%;
	width: 700px;
	margin-top: -330px;
	padding: 44px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.status-card .hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.status-card .hdr .lbl {
	font: italic 700 28px var(--font-display);
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.status-card .chip {
	background: var(--status-success);
	color: #0b2414;
}

.status-card .chip .dot {
	background: #0b2414;
}

.status-card .rows > div {
	display: flex;
	justify-content: space-between;
	padding: 18px 0;
	border-bottom: 2px solid var(--border-subtle);
}

.status-card .rows dt {
	font: italic 600 26px var(--font-display);
	letter-spacing: 0.03em;
	color: var(--text-muted);
}

.status-card .rows dd {
	font: 700 24px var(--font-body);
	letter-spacing: 0.03em;
}

.status-copy {
	position: absolute;
	left: 130px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.status-copy .display {
	font-size: 190px;
}

.band {
	position: absolute;
	left: 110px;
	right: 110px;
	top: 50%;
	height: 460px;
	margin-top: -170px;
	border: 2px solid var(--primary-500);
	border-radius: 16px;
	background: radial-gradient(35% 100% at 62% 30%, rgba(166, 107, 255, 0.45), rgba(166, 107, 255, 0)),
		var(--surface-selected);
}

.band .copy {
	position: absolute;
	left: 80px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 560px;
}

.band .copy .h1 {
	font-size: 118px;
}

.band .ctas {
	position: absolute;
	right: 80px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.band .ctas .button {
	width: 380px;
	justify-content: space-between;
}

.band .exec {
	position: absolute;
	bottom: 0;
	left: 600px;
	height: 640px;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
}

.end-lockup {
	position: absolute;
	inset: 0 0 12% 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
}

.end-meta {
	position: absolute;
	left: 0;
	right: 0;
	top: 64%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.live {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 14px 28px;
	border-radius: 6px;
	background: var(--primary-500);
	box-shadow: 0 0 40px var(--primary-glow);
	font: italic 900 60px/1 var(--font-display);
	letter-spacing: 0.06em;
}

.live .dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
}

.links {
	display: flex;
	gap: 50px;
	font: italic 700 40px var(--font-display);
	letter-spacing: 0.06em;
	color: var(--text-secondary);
}

.links b {
	color: #fff;
	font-weight: 800;
}

.legal {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 46px;
	text-align: center;
	font: 500 17px var(--font-body);
	color: rgba(255, 255, 255, 0.35);
}