/*
 * Grafixyy Homepage
 * V1 — Hero / Curiosity Reactor
 */


/* ========================================
   HERO
   ======================================== */

body.grafixyy-home-page .grafixyy-home-hero {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	border-bottom:
		1px solid rgba(148, 163, 184, 0.12);

	background:
		linear-gradient(
			180deg,
			rgba(4, 8, 24, 0.96),
			rgba(5, 8, 22, 1)
		);
}


body.grafixyy-home-page .grafixyy-home-hero-grid {
	position: absolute;
	inset: 0;

	opacity: 0.22;

	background-image:
		linear-gradient(
			rgba(148, 163, 184, 0.08) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(148, 163, 184, 0.08) 1px,
			transparent 1px
		);

	background-size:
		52px
		52px;

	mask-image:
		linear-gradient(
			to bottom,
			black,
			transparent 85%
		);

	pointer-events: none;
}


body.grafixyy-home-page .grafixyy-home-glow {
	position: absolute;

	width: 520px;
	height: 520px;

	border-radius: 50%;

	filter: blur(10px);

	pointer-events: none;
}


body.grafixyy-home-page
.grafixyy-home-glow--violet {
	top: -260px;
	right: -170px;

	background:
		radial-gradient(
			circle,
			rgba(139, 92, 246, 0.18),
			transparent 68%
		);
}


body.grafixyy-home-page
.grafixyy-home-glow--cyan {
	bottom: -320px;
	left: -170px;

	background:
		radial-gradient(
			circle,
			rgba(34, 211, 238, 0.12),
			transparent 68%
		);
}


/* ========================================
   HERO LAYOUT
   ======================================== */

body.grafixyy-home-page .grafixyy-home-hero-inner {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(420px, 0.95fr);

	align-items: center;

	gap:
		clamp(40px, 7vw, 110px);

	width:
		min(
			1240px,
			calc(100% - 48px)
		);

	min-height:
		clamp(650px, 78vh, 820px);

	margin: 0 auto;

	padding:
		72px
		0
		82px;
}


/* ========================================
   HERO COPY
   ======================================== */

body.grafixyy-home-page .grafixyy-home-hero-copy {
	position: relative;
	z-index: 3;

	min-width: 0;
}


body.grafixyy-home-page .grafixyy-home-kicker {
	display: inline-flex;

	align-items: center;

	gap: 9px;

	margin:
		0
		0
		25px;

	padding:
		8px
		12px;

	border:
		1px solid rgba(34, 211, 238, 0.18);

	border-radius: 999px;

	background:
		rgba(34, 211, 238, 0.055);

	color: #8ee8f4;

	font-size: 12px;
	font-weight: 750;
	line-height: 1.4;

	letter-spacing: 0.02em;
}


body.grafixyy-home-page .grafixyy-home-kicker span {
	color: #b99cff;
}


body.grafixyy-home-page .grafixyy-home-hero h1 {
	max-width: 690px;

	margin:
		0
		0
		24px;

	color: #ffffff;

	font-size:
		clamp(52px, 6vw, 88px);

	font-weight: 850;
	line-height: 1.08;

	letter-spacing: -2.7px;
}


body.grafixyy-home-page .grafixyy-home-hero h1 span {
	display: block;

	color: transparent;

	background:
		linear-gradient(
			90deg,
			#ffffff 0%,
			#b99cff 42%,
			#5ee7f2 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
}


body.grafixyy-home-page .grafixyy-home-intro {
	max-width: 620px;

	margin:
		0
		0
		33px;

	color: #b9c2d1;

	font-size:
		clamp(17px, 1.65vw, 21px);

	font-weight: 500;
	line-height: 1.9;
}


/* ========================================
   ACTIONS
   ======================================== */

body.grafixyy-home-page .grafixyy-home-actions {
	display: flex;

	align-items: center;
	flex-wrap: wrap;

	gap: 12px;

	margin:
		0
		0
		28px;
}


body.grafixyy-home-page
.grafixyy-home-actions a {
	text-decoration: none;
}


body.grafixyy-home-page .grafixyy-home-primary {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	min-height: 58px;

	padding:
		14px
		20px;

	border:
		1px solid rgba(180, 154, 255, 0.42);

	border-radius: 16px;

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.96),
			rgba(93, 74, 224, 0.96)
		);

	color: #ffffff;

	font-size: 16px;
	font-weight: 800;

	box-shadow:
		0 16px 45px rgba(101, 67, 218, 0.24);

	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}


body.grafixyy-home-page
.grafixyy-home-primary:visited {
	color: #ffffff;
}


body.grafixyy-home-page
.grafixyy-home-primary:hover {
	color: #ffffff;

	transform:
		translateY(-2px);

	box-shadow:
		0 20px 50px rgba(101, 67, 218, 0.34);
}


body.grafixyy-home-page
.grafixyy-home-action-arrow {
	margin-inline-start: 3px;

	color: #d8f9ff;
}


body.grafixyy-home-page .grafixyy-home-secondary {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 9px;

	min-height: 58px;

	padding:
		14px
		19px;

	border:
		1px solid rgba(148, 163, 184, 0.19);

	border-radius: 16px;

	background:
		rgba(255, 255, 255, 0.035);

	color: #d8dfeb;

	font-size: 15px;
	font-weight: 700;

	transition:
		background-color 180ms ease,
		border-color 180ms ease;
}


body.grafixyy-home-page
.grafixyy-home-secondary:visited {
	color: #d8dfeb;
}


body.grafixyy-home-page
.grafixyy-home-secondary:hover {
	border-color:
		rgba(34, 211, 238, 0.32);

	background:
		rgba(34, 211, 238, 0.07);

	color: #ffffff;
}


/* ========================================
   PROMPTS
   ======================================== */

body.grafixyy-home-page .grafixyy-home-prompts {
	display: flex;

	flex-wrap: wrap;

	gap:
		8px
		18px;

	color: #69758a;

	font-size: 12px;
	font-weight: 600;
}


body.grafixyy-home-page
.grafixyy-home-prompts span {
	display: inline-flex;

	align-items: center;

	gap: 8px;
}


body.grafixyy-home-page
.grafixyy-home-prompts span::before {
	content: "";

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: #22d3ee;

	box-shadow:
		0 0 12px rgba(34, 211, 238, 0.8);
}


/* ========================================
   CURIOSITY REACTOR
   ======================================== */

body.grafixyy-home-page .grafixyy-reactor {
	position: relative;

	display: flex;

	flex-direction: column;
	align-items: center;

	min-width: 0;
}


body.grafixyy-home-page .grafixyy-reactor-stage {
	position: relative;

	width:
		min(100%, 500px);

	aspect-ratio: 1;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(116, 85, 230, 0.11) 0%,
			rgba(15, 23, 42, 0.03) 47%,
			transparent 69%
		);
}


body.grafixyy-home-page .grafixyy-reactor-stage::before {
	content: "";

	position: absolute;
	inset: 8%;

	border-radius: 50%;

	background:
		repeating-radial-gradient(
			circle,
			transparent 0,
			transparent 27px,
			rgba(148, 163, 184, 0.055) 28px,
			transparent 29px
		);

	pointer-events: none;
}


/* ========================================
   REACTOR ORBITS
   ======================================== */

body.grafixyy-home-page .grafixyy-reactor-orbit {
	position: absolute;

	top: 50%;
	left: 50%;

	border:
		1px solid rgba(148, 163, 184, 0.16);

	border-radius: 50%;
}


body.grafixyy-home-page
.grafixyy-reactor-orbit--outer {
	width: 92%;
	height: 92%;

	margin:
		-46%
		0
		0
		-46%;

	border-color:
		rgba(34, 211, 238, 0.16);

	animation:
		grafixyy-reactor-spin
		24s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-reactor-orbit--middle {
	width: 69%;
	height: 69%;

	margin:
		-34.5%
		0
		0
		-34.5%;

	border-color:
		rgba(185, 156, 255, 0.21);

	animation:
		grafixyy-reactor-spin-reverse
		17s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-reactor-orbit--inner {
	width: 47%;
	height: 47%;

	margin:
		-23.5%
		0
		0
		-23.5%;

	border:
		1px dashed rgba(148, 163, 184, 0.17);

	animation:
		grafixyy-reactor-spin
		29s
		linear
		infinite;
}


/* ========================================
   REACTOR NODES
   ======================================== */

body.grafixyy-home-page .grafixyy-reactor-node {
	position: absolute;

	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	border:
		1px solid rgba(148, 163, 184, 0.24);

	background:
		rgba(5, 8, 22, 0.94);

	box-shadow:
		0 10px 35px rgba(0, 0, 0, 0.32);
}


body.grafixyy-home-page
.grafixyy-reactor-node strong {
	color: #ffffff;

	font-size: 17px;
	font-weight: 850;
	line-height: 1;
}


body.grafixyy-home-page
.grafixyy-reactor-node small {
	margin-top: 5px;

	color: #7f8a9d;

	font-size: 9px;
	font-weight: 650;
}


body.grafixyy-home-page
.grafixyy-reactor-node--seconds {
	top: -21px;
	left: 50%;

	width: 72px;
	height: 72px;

	margin-left: -36px;

	border-radius: 23px;

	border-color:
		rgba(34, 211, 238, 0.34);

	box-shadow:
		0 0 30px rgba(34, 211, 238, 0.09);

	animation:
		grafixyy-reactor-spin-reverse
		24s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-reactor-node--seconds strong {
	color: #69e8f5;
}


body.grafixyy-home-page
.grafixyy-reactor-node--billion {
	right: -28px;
	top: 50%;

	width: 76px;
	height: 76px;

	margin-top: -38px;

	border-radius: 22px;

	border-color:
		rgba(185, 156, 255, 0.36);

	animation:
		grafixyy-reactor-spin
		17s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-reactor-node--billion strong {
	color: #c8afff;
}


body.grafixyy-home-page .grafixyy-reactor-dot {
	position: absolute;

	width: 9px;
	height: 9px;

	border-radius: 50%;
}


body.grafixyy-home-page
.grafixyy-reactor-dot--one {
	right: 11%;
	bottom: 18%;

	background: #22d3ee;

	box-shadow:
		0 0 20px rgba(34, 211, 238, 0.85);
}


body.grafixyy-home-page
.grafixyy-reactor-dot--two {
	left: 7%;
	top: 26%;

	background: #a78bfa;

	box-shadow:
		0 0 18px rgba(167, 139, 250, 0.8);
}


/* ========================================
   REACTOR CORE
   ======================================== */

body.grafixyy-home-page .grafixyy-reactor-core {
	position: absolute;

	top: 50%;
	left: 50%;

	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 170px;
	height: 170px;

	transform:
		translate(-50%, -50%);

	border:
		1px solid rgba(185, 156, 255, 0.35);

	border-radius: 50%;

	background:
		radial-gradient(
			circle at 38% 32%,
			rgba(139, 92, 246, 0.34),
			rgba(17, 24, 48, 0.98) 50%,
			rgba(5, 8, 22, 0.99) 78%
		);

	box-shadow:
		0 0 0 10px rgba(139, 92, 246, 0.03),
		0 0 70px rgba(139, 92, 246, 0.2);

	animation:
		grafixyy-reactor-breathe
		4.2s
		ease-in-out
		infinite;
}


body.grafixyy-home-page .grafixyy-reactor-core-halo {
	position: absolute;
	inset: -16px;

	border:
		1px solid rgba(34, 211, 238, 0.12);

	border-radius: 50%;
}


body.grafixyy-home-page .grafixyy-reactor-core-mark {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	margin-bottom: 10px;

	border-radius: 13px;

	background:
		linear-gradient(
			135deg,
			#8b5cf6,
			#22d3ee
		);

	color: #ffffff;

	font-size: 20px;
	font-weight: 900;

	box-shadow:
		0 8px 24px rgba(139, 92, 246, 0.31);
}


body.grafixyy-home-page
.grafixyy-reactor-core strong {
	color: #ffffff;

	font-size: 17px;
	font-weight: 800;
}


body.grafixyy-home-page
.grafixyy-reactor-core small {
	margin-top: 5px;

	color: #7f8b9f;

	font-size: 9px;
	font-weight: 600;
}


/* ========================================
   FLOATING SIGNALS
   ======================================== */

body.grafixyy-home-page .grafixyy-reactor-signal {
	position: absolute;

	display: flex;

	align-items: center;
	justify-content: center;

	border:
		1px solid rgba(148, 163, 184, 0.13);

	border-radius: 10px;

	background:
		rgba(7, 11, 28, 0.8);

	color: #8591a5;

	font-size: 10px;
	font-weight: 800;
}


body.grafixyy-home-page
.grafixyy-reactor-signal--one {
	top: 17%;
	right: 11%;

	width: 37px;
	height: 28px;
}


body.grafixyy-home-page
.grafixyy-reactor-signal--two {
	bottom: 15%;
	right: 24%;

	width: 30px;
	height: 30px;

	color: #b99cff;
}


body.grafixyy-home-page
.grafixyy-reactor-signal--three {
	bottom: 25%;
	left: 10%;

	width: 31px;
	height: 31px;

	color: #64ddea;
}


/* ========================================
   REACTOR STATUS
   ======================================== */

body.grafixyy-home-page .grafixyy-reactor-status {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-top: -5px;

	padding:
		8px
		12px;

	border:
		1px solid rgba(148, 163, 184, 0.13);

	border-radius: 999px;

	background:
		rgba(6, 10, 25, 0.72);

	color: #657186;
}


body.grafixyy-home-page
.grafixyy-reactor-status > span {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #22d3ee;

	box-shadow:
		0 0 13px rgba(34, 211, 238, 0.85);

	animation:
		grafixyy-reactor-status
		2s
		ease-in-out
		infinite;
}


body.grafixyy-home-page
.grafixyy-reactor-status strong {
	color: #909bad;

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 0.08em;
}


body.grafixyy-home-page
.grafixyy-reactor-status small {
	color: #22d3ee;

	font-size: 8px;
	font-weight: 800;
}


/* ========================================
   FOCUS
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-actions a:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


/* ========================================
   MOTION
   ======================================== */

@keyframes grafixyy-reactor-spin {

	to {
		transform: rotate(360deg);
	}
}


@keyframes grafixyy-reactor-spin-reverse {

	to {
		transform: rotate(-360deg);
	}
}


@keyframes grafixyy-reactor-breathe {

	0%,
	100% {
		box-shadow:
			0 0 0 10px rgba(139, 92, 246, 0.03),
			0 0 55px rgba(139, 92, 246, 0.15);
	}

	50% {
		box-shadow:
			0 0 0 14px rgba(139, 92, 246, 0.045),
			0 0 85px rgba(139, 92, 246, 0.27);
	}
}


@keyframes grafixyy-reactor-status {

	0%,
	100% {
		opacity: 0.55;
	}

	50% {
		opacity: 1;
	}
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 980px) {

	body.grafixyy-home-page
	.grafixyy-home-hero-inner {
		grid-template-columns: 1fr;

		gap: 45px;

		min-height: 0;

		padding:
			65px
			0
			70px;
	}


	body.grafixyy-home-page .grafixyy-home-hero-copy {
		max-width: 720px;

		margin: 0 auto;

		text-align: center;
	}


	body.grafixyy-home-page .grafixyy-home-kicker {
		justify-content: center;
	}


	body.grafixyy-home-page .grafixyy-home-hero h1,
	body.grafixyy-home-page .grafixyy-home-intro {
		margin-inline:
			auto;
	}


	body.grafixyy-home-page .grafixyy-home-actions,
	body.grafixyy-home-page .grafixyy-home-prompts {
		justify-content: center;
	}


	body.grafixyy-home-page .grafixyy-reactor {
		width: min(100%, 500px);

		margin: 0 auto;
	}
}


/* ========================================
   MOBILE PERFORMANCE MODE
   ======================================== */

@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-hero-inner {
		width:
			calc(100% - 32px);

		gap: 33px;

		padding:
			45px
			0
			52px;
	}


	body.grafixyy-home-page
	.grafixyy-home-hero-grid {
		background-size:
			38px
			38px;

		opacity: 0.16;
	}


	body.grafixyy-home-page
	.grafixyy-home-glow {
		width: 320px;
		height: 320px;

		filter: none;
	}


	body.grafixyy-home-page
	.grafixyy-home-hero h1 {
		margin-bottom: 19px;

		font-size:
			clamp(42px, 13vw, 58px);

		line-height: 1.12;

		letter-spacing: -1.8px;
	}


	body.grafixyy-home-page
	.grafixyy-home-intro {
		margin-bottom: 27px;

		font-size: 16px;
		line-height: 1.85;
	}


	body.grafixyy-home-page
	.grafixyy-home-actions {
		gap: 9px;

		margin-bottom: 23px;
	}


	body.grafixyy-home-page
	.grafixyy-home-primary,
	body.grafixyy-home-page
	.grafixyy-home-secondary {
		min-height: 52px;

		padding:
			12px
			14px;

		border-radius: 14px;

		font-size: 13px;
	}


	body.grafixyy-home-page
	.grafixyy-home-prompts {
		gap:
			7px
			12px;

		font-size: 10px;
	}


	body.grafixyy-home-page
	.grafixyy-reactor {
		width:
			min(100%, 370px);
	}


	/*
	 * Preserve the reactor idea on mobile,
	 * but remove permanent orbit rotation.
	 */
	body.grafixyy-home-page
	.grafixyy-reactor-orbit,
	body.grafixyy-home-page
	.grafixyy-reactor-node {
		animation: none;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-core {
		width: 138px;
		height: 138px;

		animation-duration: 5.5s;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-core-mark {
		width: 36px;
		height: 36px;

		margin-bottom: 8px;

		font-size: 17px;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-core strong {
		font-size: 14px;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-node--seconds {
		width: 62px;
		height: 62px;

		margin-left: -31px;

		border-radius: 19px;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-node--billion {
		right: -17px;

		width: 65px;
		height: 65px;

		margin-top: -32.5px;

		border-radius: 19px;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-node strong {
		font-size: 14px;
	}
}


/* ========================================
   SMALL MOBILE
   ======================================== */

@media (max-width: 430px) {

	body.grafixyy-home-page
	.grafixyy-home-kicker {
		margin-bottom: 20px;

		font-size: 10px;
	}


	body.grafixyy-home-page
	.grafixyy-home-actions {
		display: grid;

		grid-template-columns:
			1fr
			1fr;

		width: 100%;
	}


	body.grafixyy-home-page
	.grafixyy-home-primary,
	body.grafixyy-home-page
	.grafixyy-home-secondary {
		width: 100%;

		padding-inline: 9px;

		font-size: 11px;
	}


	body.grafixyy-home-page
	.grafixyy-reactor {
		width:
			min(92vw, 330px);
	}
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-reactor-orbit,
	body.grafixyy-home-page
	.grafixyy-reactor-node,
	body.grafixyy-home-page
	.grafixyy-reactor-core,
	body.grafixyy-home-page
	.grafixyy-reactor-status > span {
		animation: none !important;
	}


	body.grafixyy-home-page
	.grafixyy-home-primary,
	body.grafixyy-home-page
	.grafixyy-home-secondary {
		transition: none;
	}
}
/* ========================================
   HERO REFINEMENT 1.1
   Arabic title + meaningful mobile life
   ======================================== */


/*
 * Arabic-safe title treatment.
 *
 * Avoid background-clip on the Arabic word because
 * some browser/font combinations can visually clip
 * parts of Arabic glyphs.
 */

body.grafixyy-home-page
.grafixyy-home-hero h1 span {
	color: #9fdcf4;

	background: none;

	-webkit-background-clip: initial;
	background-clip: initial;

	-webkit-text-fill-color: currentColor;

	text-shadow:
		0 0 34px rgba(139, 92, 246, 0.13);
}


/* ========================================
   MOBILE LIFE SIGNALS
   ======================================== */

@keyframes grafixyy-mobile-core-pulse {

	0%,
	100% {
		transform:
			translate(-50%, -50%)
			scale(1);

		box-shadow:
			0 0 0 8px rgba(139, 92, 246, 0.025),
			0 0 38px rgba(139, 92, 246, 0.14);
	}

	50% {
		transform:
			translate(-50%, -50%)
			scale(1.025);

		box-shadow:
			0 0 0 11px rgba(139, 92, 246, 0.04),
			0 0 55px rgba(139, 92, 246, 0.22);
	}
}


@keyframes grafixyy-mobile-signal-pulse {

	0%,
	100% {
		opacity: 0.58;

		box-shadow:
			0 0 8px rgba(34, 211, 238, 0.28);
	}

	50% {
		opacity: 1;

		box-shadow:
			0 0 18px rgba(34, 211, 238, 0.72);
	}
}


@keyframes grafixyy-mobile-node-breathe {

	0%,
	100% {
		border-color:
			rgba(34, 211, 238, 0.22);
	}

	50% {
		border-color:
			rgba(34, 211, 238, 0.52);
	}
}


@media (max-width: 700px) {

	/*
	 * No continuous orbit rotation on mobile.
	 * Keep only a slow central pulse.
	 */

	body.grafixyy-home-page
	.grafixyy-reactor-core {
		animation:
			grafixyy-mobile-core-pulse
			4.8s
			ease-in-out
			infinite;
	}


	/*
	 * One meaningful data node breathes occasionally.
	 */

	body.grafixyy-home-page
	.grafixyy-reactor-node--seconds {
		animation:
			grafixyy-mobile-node-breathe
			3.8s
			ease-in-out
			infinite;
	}


	/*
	 * One signal dot provides a tiny live heartbeat.
	 */

	body.grafixyy-home-page
	.grafixyy-reactor-dot--one {
		animation:
			grafixyy-mobile-signal-pulse
			2.7s
			ease-in-out
			infinite;
	}
}


/*
 * Accessibility always wins.
 */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-reactor-core,
	body.grafixyy-home-page
	.grafixyy-reactor-node--seconds,
	body.grafixyy-home-page
	.grafixyy-reactor-dot--one {
		animation: none !important;
	}
}
/* ========================================
   HERO REFINEMENT 1.2
   Gradient comeback + stronger mobile reactor
   ======================================== */


/* ----------------------------------------
   Restore the richer title color
   without using clipped transparent text.
   ---------------------------------------- */

body.grafixyy-home-page
.grafixyy-home-hero h1 span {
	color: #bfa6ff;

	background: none;

	-webkit-background-clip: initial;
	background-clip: initial;

	-webkit-text-fill-color: currentColor;

	text-shadow:
		18px 0 38px rgba(34, 211, 238, 0.14),
		-18px 0 38px rgba(139, 92, 246, 0.18);
}


/*
 * Give individual parts of the Arabic line
 * a subtle visual color shift through a safe
 * text shadow rather than clipping the glyphs.
 */

body.grafixyy-home-page
.grafixyy-home-hero h1 span {
	filter:
		drop-shadow(
			22px 0 28px rgba(34, 211, 238, 0.13)
		);
}


/* ========================================
   STRONGER MOBILE REACTOR
   ======================================== */

@media (max-width: 700px) {

	/*
	 * Restore orbit motion.
	 * No blur/filter animation is attached to them.
	 */

	body.grafixyy-home-page
	.grafixyy-reactor-orbit--outer {
		animation:
			grafixyy-reactor-spin
			18s
			linear
			infinite;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-orbit--middle {
		animation:
			grafixyy-reactor-spin-reverse
			13s
			linear
			infinite;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-orbit--inner {
		animation:
			grafixyy-reactor-spin
			22s
			linear
			infinite;
	}


	/*
	 * Nodes counter-rotate so their text stays readable.
	 */

	body.grafixyy-home-page
	.grafixyy-reactor-node--seconds {
		animation:
			grafixyy-reactor-spin-reverse
			18s
			linear
			infinite;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-node--billion {
		animation:
			grafixyy-reactor-spin
			13s
			linear
			infinite;
	}


	/*
	 * Stronger central heartbeat.
	 */

	body.grafixyy-home-page
	.grafixyy-reactor-core {
		animation:
			grafixyy-mobile-core-pulse
			3.2s
			ease-in-out
			infinite;
	}


	body.grafixyy-home-page
	.grafixyy-reactor-dot--one {
		animation:
			grafixyy-mobile-signal-pulse
			1.9s
			ease-in-out
			infinite;
	}
}


/* Reduced motion remains respected. */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-reactor-orbit,
	body.grafixyy-home-page
	.grafixyy-reactor-node,
	body.grafixyy-home-page
	.grafixyy-reactor-core,
	body.grafixyy-home-page
	.grafixyy-reactor-dot {
		animation: none !important;
	}
}

/* ========================================
   HERO TITLE GRADIENT 1.3
   Restore original visual treatment
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-hero h1 span {
	display: block;

	/*
	 * Extra breathing room for Arabic glyphs.
	 */
	padding:
		0.08em
		0.04em
		0.14em;

	margin:
		-0.08em
		-0.04em
		-0.14em;

	color: #b99cff;

	background:
		linear-gradient(
			90deg,
			#ffffff 0%,
			#b99cff 42%,
			#5ee7f2 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;

	filter: none;

	text-shadow: none;

	overflow: visible;
}

/* ========================================
   HOMEPAGE DOORS
   V1
   ======================================== */

body.grafixyy-home-page .grafixyy-home-doors {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	padding:
		clamp(72px, 8vw, 118px)
		0;

	background:
		radial-gradient(
			circle at 90% 10%,
			rgba(139, 92, 246, 0.08),
			transparent 30%
		),
		radial-gradient(
			circle at 8% 80%,
			rgba(34, 211, 238, 0.05),
			transparent 28%
		),
		#050816;
}


body.grafixyy-home-page .grafixyy-home-doors-inner {
	position: relative;
	z-index: 2;

	width:
		min(
			1180px,
			calc(100% - 48px)
		);

	margin: 0 auto;
}


/* ========================================
   SECTION HEADING
   ======================================== */

body.grafixyy-home-page .grafixyy-home-section-heading {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 30px;

	margin-bottom:
		clamp(35px, 5vw, 58px);
}


body.grafixyy-home-page
.grafixyy-home-section-heading > div > p {
	margin:
		0
		0
		12px;

	color: #6ee7f2;

	font-size: 12px;
	font-weight: 800;

	letter-spacing: 0.04em;
}


body.grafixyy-home-page
.grafixyy-home-section-heading h2 {
	max-width: 720px;

	margin: 0;

	color: #ffffff;

	font-size:
		clamp(34px, 4vw, 56px);

	font-weight: 850;
	line-height: 1.18;

	letter-spacing: -1.5px;
}


body.grafixyy-home-page
.grafixyy-home-section-heading h2 span {
	display: block;

	margin-top: 5px;

	color: #7f8a9d;

	font-size: 0.52em;
	font-weight: 650;

	letter-spacing: -0.4px;
}


body.grafixyy-home-page
.grafixyy-home-section-heading > a {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	flex: 0 0 auto;

	min-height: 44px;

	padding:
		10px
		14px;

	border:
		1px solid rgba(148, 163, 184, 0.16);

	border-radius: 12px;

	background:
		rgba(255, 255, 255, 0.025);

	color: #aeb8c8;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color 170ms ease,
		border-color 170ms ease,
		background-color 170ms ease,
		transform 170ms ease;
}


body.grafixyy-home-page
.grafixyy-home-section-heading > a:visited {
	color: #aeb8c8;
}


body.grafixyy-home-page
.grafixyy-home-section-heading > a:hover {
	border-color:
		rgba(34, 211, 238, 0.28);

	background:
		rgba(34, 211, 238, 0.055);

	color: #ffffff;

	transform: translateY(-1px);
}


/* ========================================
   DOOR GRID
   ======================================== */

body.grafixyy-home-page .grafixyy-home-door-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 20px;

	width: 100%;
}


/* ========================================
   BASE DOOR
   ======================================== */

body.grafixyy-home-page .grafixyy-home-door {
	position: relative;

	display: grid;

	grid-template-rows:
		auto
		minmax(225px, 1fr)
		auto
		auto;

	min-width: 0;
	min-height: 510px;

	padding: 22px;

	overflow: hidden;

	border:
		1px solid rgba(148, 163, 184, 0.15);

	border-radius: 28px;

	background:
		linear-gradient(
			145deg,
			rgba(15, 23, 42, 0.9),
			rgba(6, 10, 25, 0.97)
		);

	box-shadow:
		0 25px 70px rgba(0, 0, 0, 0.18);

	transition:
		transform 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease;
}


body.grafixyy-home-page .grafixyy-home-door:hover {
	transform:
		translateY(-5px);

	border-color:
		rgba(148, 163, 184, 0.25);

	box-shadow:
		0 32px 80px rgba(0, 0, 0, 0.28);
}


/* ========================================
   TOP LABELS
   ======================================== */

body.grafixyy-home-page .grafixyy-home-door-top {
	position: relative;
	z-index: 3;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;
}


body.grafixyy-home-page
.grafixyy-home-door-top > span {
	color: #d5dce8;

	font-size: 12px;
	font-weight: 750;
}


body.grafixyy-home-page
.grafixyy-home-door-top > small {
	padding:
		6px
		9px;

	border:
		1px solid rgba(148, 163, 184, 0.13);

	border-radius: 999px;

	background:
		rgba(255, 255, 255, 0.035);

	color: #7e899c;

	font-size: 9px;
	font-weight: 700;
}


/* ========================================
   VISUAL AREA
   ======================================== */

body.grafixyy-home-page .grafixyy-home-door-visual {
	position: relative;
	z-index: 2;

	display: flex;

	align-items: center;
	justify-content: center;

	min-width: 0;

	margin:
		18px
		0
		8px;

	overflow: hidden;

	border-radius: 20px;
}


/* ========================================
   AGE / TIME WORLD
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-door--time-orbit {
	border-color:
		rgba(139, 92, 246, 0.24);

	background:
		radial-gradient(
			circle at 18% 25%,
			rgba(34, 211, 238, 0.075),
			transparent 30%
		),
		radial-gradient(
			circle at 80% 65%,
			rgba(139, 92, 246, 0.17),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#090d24,
			#070919
		);
}


body.grafixyy-home-page
.grafixyy-home-door--time-orbit::before {
	content: "";

	position: absolute;

	width: 390px;
	height: 390px;

	top: 65px;
	left: 50%;

	transform:
		translateX(-50%);

	border:
		1px solid rgba(139, 92, 246, 0.08);

	border-radius: 50%;

	box-shadow:
		0 0 0 45px rgba(139, 92, 246, 0.025),
		0 0 0 90px rgba(34, 211, 238, 0.015);

	pointer-events: none;
}


body.grafixyy-home-page .grafixyy-home-time-signal {
	position: relative;

	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 185px;
	height: 185px;

	border:
		1px solid rgba(139, 92, 246, 0.28);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(139, 92, 246, 0.19),
			rgba(10, 14, 37, 0.95) 64%
		);

	box-shadow:
		0 0 55px rgba(139, 92, 246, 0.14);

	animation:
		grafixyy-home-time-breathe
		4.8s
		ease-in-out
		infinite;
}


body.grafixyy-home-page .grafixyy-home-time-ring {
	position: absolute;

	inset: -32px;

	border:
		1px dashed rgba(34, 211, 238, 0.22);

	border-radius: 50%;

	animation:
		grafixyy-home-door-spin
		18s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-time-ring::after {
	content: "";

	position: absolute;

	top: 22px;
	right: 17px;

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #22d3ee;

	box-shadow:
		0 0 17px rgba(34, 211, 238, 0.9);
}


body.grafixyy-home-page
.grafixyy-home-time-signal strong {
	color: #ffffff;

	font-size: 58px;
	font-weight: 900;
	line-height: 1;
}


body.grafixyy-home-page
.grafixyy-home-time-signal small {
	margin-top: 8px;

	color: #77dbe8;

	font-size: 12px;
	font-weight: 700;
}


/* ========================================
   MILLION / SCALE WORLD
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-door--scale-lab {
	border-color:
		rgba(202, 255, 49, 0.18);

	background:
		radial-gradient(
			circle at 84% 20%,
			rgba(202, 255, 49, 0.09),
			transparent 31%
		),
		linear-gradient(
			145deg,
			#0b0d0a,
			#050704
		);
}


body.grafixyy-home-page
.grafixyy-home-door--scale-lab::before {
	content: "";

	position: absolute;
	inset: 0;

	opacity: 0.08;

	background-image:
		linear-gradient(
			#caff31 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			#caff31 1px,
			transparent 1px
		);

	background-size:
		28px
		28px;

	mask-image:
		linear-gradient(
			to bottom,
			black,
			transparent 65%
		);

	pointer-events: none;
}


body.grafixyy-home-page .grafixyy-home-scale-signal {
	position: relative;

	display: flex;

	flex-direction: column;
	align-items: center;

	gap: 18px;

	width:
		min(100%, 320px);
}


body.grafixyy-home-page .grafixyy-home-scale-mini-grid {
	display: grid;

	grid-template-columns:
		repeat(7, 1fr);

	gap: 5px;

	width: 100%;
}


body.grafixyy-home-page
.grafixyy-home-scale-mini-grid > span {
	aspect-ratio: 1;

	border:
		1px solid rgba(202, 255, 49, 0.13);

	border-radius: 3px;

	background:
		rgba(202, 255, 49, 0.045);
}


body.grafixyy-home-page
.grafixyy-home-scale-mini-grid
> span.is-origin {
	background: #caff31;

	border-color: #caff31;

	box-shadow:
		0 0 18px rgba(202, 255, 49, 0.55);

	animation:
		grafixyy-home-origin-pulse
		2.4s
		ease-in-out
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-scale-signal > strong {
	color: #caff31;

	font-family:
		Arial,
		sans-serif;

	font-size: 34px;
	font-weight: 900;

	letter-spacing: -1px;
}


/* ========================================
   DEFAULT FUTURE WORLD
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-default-signal {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 13px;

	width: 100%;
}


body.grafixyy-home-page
.grafixyy-home-default-signal span {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 62px;
	height: 62px;

	border:
		1px solid rgba(34, 211, 238, 0.18);

	border-radius: 18px;

	background:
		rgba(34, 211, 238, 0.04);

	color: #91dce7;

	font-size: 22px;
	font-weight: 850;
}


/* ========================================
   DOOR COPY
   ======================================== */

body.grafixyy-home-page .grafixyy-home-door-copy {
	position: relative;
	z-index: 3;

	margin-top: 8px;
}


body.grafixyy-home-page
.grafixyy-home-door-copy > p {
	margin:
		0
		0
		8px;

	color: #6e7a8f;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 0.09em;
}


body.grafixyy-home-page
.grafixyy-home-door-copy h3 {
	margin:
		0
		0
		10px;

	color: #ffffff;

	font-size:
		clamp(25px, 2.4vw, 34px);

	font-weight: 850;
	line-height: 1.25;

	letter-spacing: -0.7px;
}


body.grafixyy-home-page
.grafixyy-home-door-copy > div {
	max-width: 510px;

	color: #9ca7b8;

	font-size: 14px;
	font-weight: 550;
	line-height: 1.8;
}


body.grafixyy-home-page
.grafixyy-home-door--time-orbit
.grafixyy-home-door-copy > p {
	color: #8abfdd;
}


body.grafixyy-home-page
.grafixyy-home-door--scale-lab
.grafixyy-home-door-copy > p {
	color: #a9c754;
}


/* ========================================
   DOOR CTA
   ======================================== */

body.grafixyy-home-page .grafixyy-home-door-link {
	position: relative;
	z-index: 4;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 15px;

	width: 100%;

	margin-top: 20px;

	padding:
		13px
		15px;

	border:
		1px solid rgba(148, 163, 184, 0.14);

	border-radius: 13px;

	background:
		rgba(255, 255, 255, 0.035);

	color: #d9e0eb;

	font-size: 13px;
	font-weight: 750;

	text-decoration: none;

	transition:
		background-color 170ms ease,
		border-color 170ms ease,
		transform 170ms ease;
}


body.grafixyy-home-page
.grafixyy-home-door-link:visited {
	color: #d9e0eb;
}


body.grafixyy-home-page
.grafixyy-home-door-link:hover {
	transform: translateY(-1px);

	background:
		rgba(255, 255, 255, 0.065);

	color: #ffffff;
}


body.grafixyy-home-page
.grafixyy-home-door--time-orbit
.grafixyy-home-door-link:hover {
	border-color:
		rgba(34, 211, 238, 0.28);
}


body.grafixyy-home-page
.grafixyy-home-door--scale-lab
.grafixyy-home-door-link:hover {
	border-color:
		rgba(202, 255, 49, 0.3);
}


/* ========================================
   DOOR MOTION
   ======================================== */

@keyframes grafixyy-home-door-spin {

	to {
		transform: rotate(360deg);
	}
}


@keyframes grafixyy-home-time-breathe {

	0%,
	100% {
		box-shadow:
			0 0 42px rgba(139, 92, 246, 0.1);
	}

	50% {
		box-shadow:
			0 0 68px rgba(139, 92, 246, 0.22);
	}
}


@keyframes grafixyy-home-origin-pulse {

	0%,
	100% {
		opacity: 0.72;
	}

	50% {
		opacity: 1;

		box-shadow:
			0 0 25px rgba(202, 255, 49, 0.72);
	}
}


/* ========================================
   DOOR FOCUS
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-section-heading > a:focus-visible,
body.grafixyy-home-page
.grafixyy-home-door-link:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


/* ========================================
   TABLET / MOBILE
   ======================================== */

@media (max-width: 820px) {

	body.grafixyy-home-page
	.grafixyy-home-door-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}


	body.grafixyy-home-page
	.grafixyy-home-door {
		min-height: 470px;
	}
}


@media (max-width: 700px) {

	body.grafixyy-home-page .grafixyy-home-doors {
		padding:
			62px
			0;
	}


	body.grafixyy-home-page
	.grafixyy-home-doors-inner {
		width:
			calc(100% - 32px);
	}


	body.grafixyy-home-page
	.grafixyy-home-section-heading {
		align-items: flex-start;

		flex-direction: column;

		gap: 20px;

		margin-bottom: 32px;
	}


	body.grafixyy-home-page
	.grafixyy-home-section-heading h2 {
		font-size:
			clamp(32px, 10vw, 44px);

		letter-spacing: -1px;
	}


	body.grafixyy-home-page
	.grafixyy-home-section-heading > a {
		min-height: 40px;

		padding:
			8px
			11px;

		font-size: 11px;
	}


	body.grafixyy-home-page .grafixyy-home-door {
		grid-template-rows:
			auto
			minmax(190px, auto)
			auto
			auto;

		min-height: 0;

		padding: 17px;

		border-radius: 22px;

		transform: none;
	}


	body.grafixyy-home-page
	.grafixyy-home-door:hover {
		transform: none;
	}


	body.grafixyy-home-page
	.grafixyy-home-door-visual {
		margin:
			16px
			0
			5px;
	}


	body.grafixyy-home-page
	.grafixyy-home-time-signal {
		width: 145px;
		height: 145px;

		animation-duration: 5.5s;
	}


	body.grafixyy-home-page
	.grafixyy-home-time-ring {
		inset: -24px;

		animation-duration: 22s;
	}


	body.grafixyy-home-page
	.grafixyy-home-time-signal strong {
		font-size: 45px;
	}


	body.grafixyy-home-page
	.grafixyy-home-scale-signal {
		width:
			min(100%, 270px);
	}


	body.grafixyy-home-page
	.grafixyy-home-scale-mini-grid {
		gap: 4px;
	}


	body.grafixyy-home-page
	.grafixyy-home-scale-signal > strong {
		font-size: 28px;
	}


	body.grafixyy-home-page
	.grafixyy-home-door-copy h3 {
		font-size: 26px;
	}


	body.grafixyy-home-page
	.grafixyy-home-door-copy > div {
		font-size: 13px;
	}


	body.grafixyy-home-page
	.grafixyy-home-door-link {
		margin-top: 17px;

		padding:
			12px
			13px;

		font-size: 12px;
	}
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-time-signal,
	body.grafixyy-home-page
	.grafixyy-home-time-ring,
	body.grafixyy-home-page
	.grafixyy-home-scale-mini-grid
	> span.is-origin {
		animation: none !important;
	}


	body.grafixyy-home-page
	.grafixyy-home-door,
	body.grafixyy-home-page
	.grafixyy-home-door-link,
	body.grafixyy-home-page
	.grafixyy-home-section-heading > a {
		transition: none;
	}
}

/* ========================================
   HOME DOOR VISUAL FIX 1.1
   Give orbit visuals room to breathe
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-door-visual--live-time {
	overflow: visible;
}


body.grafixyy-home-page
.grafixyy-home-door--time-orbit
.grafixyy-home-door-visual {
	padding:
		32px
		20px;
}


@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-door--time-orbit
	.grafixyy-home-door-visual {
		min-height: 205px;

		padding:
			30px
			16px;
	}
}

/* ========================================
   HOMEPAGE WORLDS
   V1 — Living World Map
   ======================================== */

body.grafixyy-home-page .grafixyy-home-worlds {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	padding:
		clamp(82px, 9vw, 135px)
		0;

	border-top:
		1px solid rgba(148, 163, 184, 0.09);

	background:
		radial-gradient(
			circle at 50% 45%,
			rgba(34, 211, 238, 0.055),
			transparent 32%
		),
		radial-gradient(
			circle at 75% 30%,
			rgba(139, 92, 246, 0.07),
			transparent 28%
		),
		#030612;
}


body.grafixyy-home-page
.grafixyy-home-worlds::before {
	content: "";

	position: absolute;
	inset: 0;

	opacity: 0.12;

	background-image:
		linear-gradient(
			rgba(148, 163, 184, 0.07) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(148, 163, 184, 0.07) 1px,
			transparent 1px
		);

	background-size:
		64px
		64px;

	mask-image:
		radial-gradient(
			circle at center,
			black,
			transparent 72%
		);

	pointer-events: none;
}


body.grafixyy-home-page
.grafixyy-home-worlds-inner {
	position: relative;
	z-index: 2;

	width:
		min(
			1180px,
			calc(100% - 48px)
		);

	margin: 0 auto;
}


/* ========================================
   WORLDS HEADING
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-worlds-heading {
	max-width: 760px;

	margin:
		0
		auto
		clamp(52px, 7vw, 82px);

	text-align: center;
}


body.grafixyy-home-page
.grafixyy-home-worlds-heading > p {
	margin:
		0
		0
		15px;

	color: #7de4ee;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;
	font-weight: 800;

	letter-spacing: 0.11em;
}


body.grafixyy-home-page
.grafixyy-home-worlds-heading h2 {
	margin:
		0
		0
		20px;

	color: #ffffff;

	font-size:
		clamp(38px, 4.8vw, 66px);

	font-weight: 850;
	line-height: 1.13;

	letter-spacing: -1.8px;
}


body.grafixyy-home-page
.grafixyy-home-worlds-heading h2 span {
	display: block;

	color: #9f8cff;
}


body.grafixyy-home-page
.grafixyy-home-worlds-heading > div {
	max-width: 630px;

	margin: 0 auto;

	color: #7f8a9e;

	font-size: 14px;
	font-weight: 500;
	line-height: 1.9;
}


/* ========================================
   WORLD MAP
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world-map {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(250px, 0.65fr)
		minmax(0, 1.35fr);

	align-items: center;

	gap:
		clamp(45px, 8vw, 110px);

	width: 100%;

	min-height: 390px;

	padding:
		36px
		clamp(25px, 4vw, 52px);

	border:
		1px solid rgba(148, 163, 184, 0.11);

	border-radius: 32px;

	background:
		linear-gradient(
			135deg,
			rgba(10, 15, 34, 0.82),
			rgba(4, 8, 20, 0.94)
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 28px 80px rgba(0, 0, 0, 0.2);
}


body.grafixyy-home-page
.grafixyy-home-world-map::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 28%;

	width: 38%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(34, 211, 238, 0.02),
			rgba(34, 211, 238, 0.25),
			rgba(139, 92, 246, 0.2),
			transparent
		);

	transform: translateY(-50%);

	pointer-events: none;
}


/* ========================================
   MAP CORE
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world-map-core {
	position: relative;

	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 205px;
	height: 205px;

	margin: 0 auto;

	border:
		1px solid rgba(34, 211, 238, 0.21);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(139, 92, 246, 0.17),
			rgba(6, 11, 29, 0.98) 64%
		);

	box-shadow:
		0 0 0 24px rgba(139, 92, 246, 0.018),
		0 0 0 48px rgba(34, 211, 238, 0.012),
		0 0 62px rgba(34, 211, 238, 0.08);

	animation:
		grafixyy-world-core-breathe
		5.5s
		ease-in-out
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-world-map-core::before,
body.grafixyy-home-page
.grafixyy-home-world-map-core::after {
	content: "";

	position: absolute;

	border-radius: 50%;

	pointer-events: none;
}


body.grafixyy-home-page
.grafixyy-home-world-map-core::before {
	inset: -26px;

	border:
		1px dashed rgba(139, 92, 246, 0.18);

	animation:
		grafixyy-world-spin
		24s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-world-map-core::after {
	inset: -54px;

	border:
		1px solid rgba(34, 211, 238, 0.07);
}


body.grafixyy-home-page
.grafixyy-home-world-map-core > span {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin-bottom: 12px;

	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			#8b5cf6,
			#22d3ee
		);

	color: #ffffff;

	font-size: 22px;
	font-weight: 900;

	box-shadow:
		0 10px 30px rgba(139, 92, 246, 0.27);
}


body.grafixyy-home-page
.grafixyy-home-world-map-core strong {
	color: #ffffff;

	font-size: 18px;
	font-weight: 800;
}


body.grafixyy-home-page
.grafixyy-home-world-map-core small {
	margin-top: 7px;

	color: #4ecdda;

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 0.1em;
}


/* ========================================
   WORLD LIST
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world-list {
	position: relative;

	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 14px;

	min-width: 0;
}


body.grafixyy-home-page
.grafixyy-home-world {
	position: relative;

	display: flex;

	align-items: center;

	gap: 17px;

	min-width: 0;
	min-height: 124px;

	padding:
		18px
		19px;

	overflow: hidden;

	border:
		1px solid rgba(148, 163, 184, 0.12);

	border-radius: 20px;

	background:
		rgba(255, 255, 255, 0.025);
}


body.grafixyy-home-page
.grafixyy-home-world::before {
	content: "";

	position: absolute;

	top: 0;
	right: 0;

	width: 100%;
	height: 2px;

	opacity: 0.5;

	background:
		linear-gradient(
			90deg,
			transparent,
			#22d3ee,
			transparent
		);
}


/* ========================================
   WORLD SIGNAL
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world-signal {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 58px;
	height: 58px;

	flex:
		0
		0
		58px;

	border:
		1px solid rgba(34, 211, 238, 0.15);

	border-radius: 17px;

	background:
		rgba(34, 211, 238, 0.045);
}


body.grafixyy-home-page
.grafixyy-home-world-signal span {
	position: absolute;

	border-radius: 50%;
}


body.grafixyy-home-page
.grafixyy-home-world-signal span:nth-child(1) {
	width: 8px;
	height: 8px;

	background: #22d3ee;

	box-shadow:
		0 0 15px rgba(34, 211, 238, 0.78);

	animation:
		grafixyy-world-signal
		2.2s
		ease-in-out
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-world-signal span:nth-child(2) {
	width: 28px;
	height: 28px;

	border:
		1px solid rgba(34, 211, 238, 0.24);
}


body.grafixyy-home-page
.grafixyy-home-world-signal span:nth-child(3) {
	width: 44px;
	height: 44px;

	border:
		1px dashed rgba(139, 92, 246, 0.19);
}


/* ========================================
   WORLD COPY
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world-copy {
	display: flex;

	flex-direction: column;

	min-width: 0;
}


body.grafixyy-home-page
.grafixyy-home-world-copy small {
	margin-bottom: 6px;

	color: #566176;

	font-family:
		Arial,
		sans-serif;

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 0.12em;
}


body.grafixyy-home-page
.grafixyy-home-world-copy strong {
	color: #f7f9fc;

	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
}


body.grafixyy-home-page
.grafixyy-home-world-copy > span {
	margin-top: 7px;

	color: #727e92;

	font-size: 10px;
	font-weight: 600;
}


/* ========================================
   CURRENT WORLD IDENTITIES
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world--life {
	border-color:
		rgba(139, 92, 246, 0.18);

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.075),
			rgba(255, 255, 255, 0.018)
		);
}


body.grafixyy-home-page
.grafixyy-home-world--life
.grafixyy-home-world-signal {
	border-color:
		rgba(139, 92, 246, 0.27);

	background:
		rgba(139, 92, 246, 0.07);
}


body.grafixyy-home-page
.grafixyy-home-world--life
.grafixyy-home-world-signal
span:nth-child(1) {
	background: #a78bfa;

	box-shadow:
		0 0 16px rgba(167, 139, 250, 0.8);
}


body.grafixyy-home-page
.grafixyy-home-world--numbers {
	border-color:
		rgba(202, 255, 49, 0.15);

	background:
		linear-gradient(
			135deg,
			rgba(202, 255, 49, 0.052),
			rgba(255, 255, 255, 0.015)
		);
}


body.grafixyy-home-page
.grafixyy-home-world--numbers::before {
	background:
		linear-gradient(
			90deg,
			transparent,
			#caff31,
			transparent
		);
}


body.grafixyy-home-page
.grafixyy-home-world--numbers
.grafixyy-home-world-signal {
	border-color:
		rgba(202, 255, 49, 0.19);

	background:
		rgba(202, 255, 49, 0.04);
}


body.grafixyy-home-page
.grafixyy-home-world--numbers
.grafixyy-home-world-signal
span:nth-child(1) {
	background: #caff31;

	box-shadow:
		0 0 16px rgba(202, 255, 49, 0.68);
}


/* ========================================
   WORLD MOTION
   ======================================== */

@keyframes grafixyy-world-spin {

	to {
		transform: rotate(360deg);
	}
}


@keyframes grafixyy-world-core-breathe {

	0%,
	100% {
		box-shadow:
			0 0 0 24px rgba(139, 92, 246, 0.018),
			0 0 0 48px rgba(34, 211, 238, 0.012),
			0 0 48px rgba(34, 211, 238, 0.06);
	}

	50% {
		box-shadow:
			0 0 0 27px rgba(139, 92, 246, 0.026),
			0 0 0 52px rgba(34, 211, 238, 0.016),
			0 0 72px rgba(34, 211, 238, 0.11);
	}
}


@keyframes grafixyy-world-signal {

	0%,
	100% {
		opacity: 0.55;

		transform: scale(0.88);
	}

	50% {
		opacity: 1;

		transform: scale(1);
	}
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 900px) {

	body.grafixyy-home-page
	.grafixyy-home-world-map {
		grid-template-columns: 1fr;

		gap: 70px;

		padding:
			60px
			28px
			32px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map::before {
		display: none;
	}
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-worlds {
		padding:
			68px
			0;
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-inner {
		width:
			calc(100% - 32px);
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-heading {
		margin-bottom: 45px;
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-heading h2 {
		font-size:
			clamp(36px, 11vw, 48px);

		letter-spacing: -1px;
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-heading > div {
		font-size: 12px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map {
		gap: 62px;

		min-height: 0;

		padding:
			52px
			16px
			18px;

		border-radius: 25px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map-core {
		width: 165px;
		height: 165px;

		box-shadow:
			0 0 0 18px rgba(139, 92, 246, 0.018),
			0 0 38px rgba(34, 211, 238, 0.07);

		animation-duration: 6s;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map-core::before {
		inset: -21px;

		animation-duration: 28s;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map-core::after {
		inset: -39px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-list {
		grid-template-columns: 1fr;

		gap: 10px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world {
		min-height: 102px;

		padding:
			15px;

		border-radius: 17px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-signal {
		width: 50px;
		height: 50px;

		flex-basis: 50px;

		border-radius: 14px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-copy strong {
		font-size: 16px;
	}
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-world-map-core,
	body.grafixyy-home-page
	.grafixyy-home-world-map-core::before,
	body.grafixyy-home-page
	.grafixyy-home-world-signal
	span:nth-child(1) {
		animation: none !important;
	}
}

/* ========================================
   WORLDS LIFE BOOST 1.1
   More visible, still lightweight
   ======================================== */

@keyframes grafixyy-world-orbit-pulse {

	0%,
	100% {
		border-color:
			rgba(139, 92, 246, 0.14);

		opacity: 0.55;
	}

	50% {
		border-color:
			rgba(34, 211, 238, 0.42);

		opacity: 1;
	}
}


@keyframes grafixyy-world-card-signal {

	0%,
	100% {
		transform: scale(0.78);
		opacity: 0.5;
	}

	50% {
		transform: scale(1.18);
		opacity: 1;
	}
}


body.grafixyy-home-page
.grafixyy-home-world-map-core::before {
	animation:
		grafixyy-world-spin
		15s
		linear
		infinite,
		grafixyy-world-orbit-pulse
		3.4s
		ease-in-out
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-world-signal
span:nth-child(1) {
	animation:
		grafixyy-world-card-signal
		2s
		ease-in-out
		infinite;
}


/*
 * Give each visible World a slightly different rhythm,
 * so the map feels alive rather than synchronized.
 */

body.grafixyy-home-page
.grafixyy-home-world:nth-child(even)
.grafixyy-home-world-signal
span:nth-child(1) {
	animation-delay: -0.8s;
}


@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-world-map-core::before {
		animation:
			grafixyy-world-spin
			18s
			linear
			infinite,
			grafixyy-world-orbit-pulse
			3.8s
			ease-in-out
			infinite;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-signal
	span:nth-child(1) {
		animation-duration: 2.3s;
	}
}


@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-world-map-core::before,
	body.grafixyy-home-page
	.grafixyy-home-world-signal
	span:nth-child(1) {
		animation: none !important;
	}
}
/* ========================================
   HOMEPAGE FINAL DISCOVERY
   V1
   ======================================== */

body.grafixyy-home-page .grafixyy-home-final {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	padding:
		clamp(75px, 9vw, 125px)
		0;

	border-top:
		1px solid rgba(148, 163, 184, 0.1);

	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(139, 92, 246, 0.13),
			transparent 37%
		),
		radial-gradient(
			circle at 20% 70%,
			rgba(34, 211, 238, 0.07),
			transparent 25%
		),
		#050816;
}


body.grafixyy-home-page
.grafixyy-home-final::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 620px;
	height: 620px;

	border:
		1px solid rgba(139, 92, 246, 0.07);

	border-radius: 50%;

	transform:
		translate(-50%, -50%);

	box-shadow:
		0 0 0 80px rgba(34, 211, 238, 0.012),
		0 0 0 160px rgba(139, 92, 246, 0.009);

	pointer-events: none;
}


body.grafixyy-home-page
.grafixyy-home-final-inner {
	position: relative;
	z-index: 2;

	display: flex;

	flex-direction: column;
	align-items: center;

	width:
		min(
			880px,
			calc(100% - 48px)
		);

	margin: 0 auto;

	text-align: center;
}


/* ========================================
   FINAL SIGNAL
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-final-signal {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	margin-bottom: 28px;
}


body.grafixyy-home-page
.grafixyy-home-final-signal span {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border:
		1px solid rgba(148, 163, 184, 0.13);

	border-radius: 12px;

	background:
		rgba(255, 255, 255, 0.025);

	color: #68758a;

	font-family:
		Arial,
		sans-serif;

	font-size: 11px;
	font-weight: 800;

	animation:
		grafixyy-final-signal
		3.2s
		ease-in-out
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-final-signal span:nth-child(2) {
	color: #c5afff;

	border-color:
		rgba(139, 92, 246, 0.22);

	background:
		rgba(139, 92, 246, 0.07);

	animation-delay: -0.8s;
}


body.grafixyy-home-page
.grafixyy-home-final-signal span:nth-child(3) {
	color: #7ce7f1;

	animation-delay: -1.6s;
}


body.grafixyy-home-page
.grafixyy-home-final-signal span:nth-child(4) {
	animation-delay: -2.4s;
}


/* ========================================
   FINAL COPY
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-final-copy > p {
	margin:
		0
		0
		13px;

	color: #67dfe9;

	font-size: 12px;
	font-weight: 800;
}


body.grafixyy-home-page
.grafixyy-home-final-copy h2 {
	margin:
		0
		0
		18px;

	color: #ffffff;

	font-size:
		clamp(42px, 6vw, 72px);

	font-weight: 850;
	line-height: 1.1;

	letter-spacing: -2px;
}


body.grafixyy-home-page
.grafixyy-home-final-copy h2 span {
	color: #b59cff;
}


body.grafixyy-home-page
.grafixyy-home-final-copy > div {
	max-width: 590px;

	margin: 0 auto;

	color: #8792a5;

	font-size:
		clamp(14px, 1.4vw, 17px);

	font-weight: 500;
	line-height: 1.9;
}


/* ========================================
   FINAL SURPRISE
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-final-surprise {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 12px;

	min-height: 60px;

	margin-top: 33px;

	padding:
		15px
		22px;

	border:
		1px solid rgba(185, 156, 255, 0.35);

	border-radius: 17px;

	background:
		linear-gradient(
			135deg,
			rgba(139, 92, 246, 0.95),
			rgba(92, 75, 218, 0.95)
		);

	color: #ffffff;

	text-decoration: none;

	box-shadow:
		0 17px 48px rgba(96, 67, 210, 0.23);

	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}


body.grafixyy-home-page
.grafixyy-home-final-surprise:visited {
	color: #ffffff;
}


body.grafixyy-home-page
.grafixyy-home-final-surprise:hover {
	color: #ffffff;

	transform:
		translateY(-2px)
		scale(1.015);

	box-shadow:
		0 22px 58px rgba(96, 67, 210, 0.34);
}


body.grafixyy-home-page
.grafixyy-home-final-surprise strong {
	font-size: 15px;
	font-weight: 800;
}


/* ========================================
   FINAL MOTION
   ======================================== */

@keyframes grafixyy-final-signal {

	0%,
	100% {
		transform: translateY(0);
		opacity: 0.5;
	}

	50% {
		transform: translateY(-5px);
		opacity: 1;
	}
}


/* ========================================
   FINAL MOBILE
   ======================================== */

@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-final {
		padding:
			70px
			0
			78px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final::before {
		width: 330px;
		height: 330px;

		box-shadow:
			0 0 0 45px rgba(34, 211, 238, 0.01);
	}


	body.grafixyy-home-page
	.grafixyy-home-final-inner {
		width:
			calc(100% - 36px);
	}


	body.grafixyy-home-page
	.grafixyy-home-final-signal {
		margin-bottom: 24px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-signal span {
		width: 34px;
		height: 34px;

		border-radius: 10px;

		font-size: 10px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-copy h2 {
		font-size:
			clamp(40px, 13vw, 57px);

		letter-spacing: -1.2px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-copy > div {
		font-size: 13px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-surprise {
		min-height: 54px;

		margin-top: 28px;

		padding:
			13px
			17px;

		border-radius: 15px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-surprise strong {
		font-size: 13px;
	}
}


/* ========================================
   FINAL FOCUS / REDUCED MOTION
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-final-surprise:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-final-signal span {
		animation: none !important;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-surprise {
		transition: none;
	}
}

/* ========================================
   FINAL QUESTION EMPHASIS 1.1
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-final-copy > p {
	margin:
		0
		0
		16px;

	color: #8cecf4;

	font-size:
		clamp(18px, 2vw, 24px);

	font-weight: 800;
	line-height: 1.5;

	letter-spacing: -0.3px;

	text-shadow:
		0 0 24px rgba(34, 211, 238, 0.16);
}


@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-final-copy > p {
		margin-bottom: 14px;

		font-size: 18px;
	}
}
/* ========================================
   HOMEPAGE V1 MOBILE TYPE SAFETY
   ======================================== */

@media (max-width: 430px) {

	body.grafixyy-home-page
	.grafixyy-home-section-heading h2 {
		font-size:
			clamp(30px, 9.2vw, 39px);

		line-height: 1.2;
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-heading h2 {
		font-size:
			clamp(34px, 10vw, 43px);

		line-height: 1.17;

		padding-inline: 3px;
	}


	body.grafixyy-home-page
	.grafixyy-home-final-copy h2 {
		font-size:
			clamp(38px, 11.5vw, 50px);

		line-height: 1.14;

		padding-inline: 3px;
	}
}

/* =========================================================
   COSMIC SCALE DOOR
   Experience #3 — Homepage
   ========================================================= */

.grafixyy-home-door--cosmic-scale {
	--home-cosmic-gold: #ffc653;
	--home-cosmic-orange: #ff7547;
	--home-cosmic-cyan: #55dcff;
	--home-cosmic-blue: #7188ff;

	color: #f7f9ff;

	border-color:
		rgba(101, 126, 255, .25);

	background:
		radial-gradient(
			circle at 7% 10%,
			rgba(255, 181, 46, .14),
			transparent 27%
		),
		radial-gradient(
			circle at 94% 45%,
			rgba(53, 82, 255, .22),
			transparent 38%
		),
		linear-gradient(
			145deg,
			#090b18 0%,
			#030510 52%,
			#080d2b 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.035),
		0 24px 70px rgba(0,0,0,.25);
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-top > span {
	color: #e1e7fa;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-top > small {
	color: #9eb0ff;

	border-color:
		rgba(111,137,255,.22);

	background:
		rgba(61,79,177,.10);
}


/* =========================================================
   VISUAL WINDOW
   ========================================================= */

.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-visual--orbital-route {
	position: relative;
	overflow: hidden;

	border:
		1px solid rgba(104, 128, 255, .14);

	border-radius: 23px;

	background:
		radial-gradient(
			circle at 0% 48%,
			rgba(255, 181, 47, .11),
			transparent 28%
		),
		radial-gradient(
			circle at 100% 50%,
			rgba(57, 85, 255, .17),
			transparent 32%
		),
		rgba(1,3,11,.54);
}


.grafixyy-home-cosmic-signal {
	position: relative;

	min-height: 215px;

	padding:
		20px
		18px;

	direction: ltr;
}


/* A subtle star field. */

.grafixyy-home-cosmic-signal::before {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background-image:
		radial-gradient(
			circle,
			rgba(255,255,255,.62) 0 1px,
			transparent 1.25px
		),
		radial-gradient(
			circle,
			rgba(110,145,255,.62) 0 1px,
			transparent 1.2px
		);

	background-size:
		83px 83px,
		129px 129px;

	background-position:
		13px 15px,
		47px 64px;

	opacity: .13;
}


/* =========================================================
   STATUS
   ========================================================= */

.grafixyy-home-cosmic-status {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns:
		1fr auto 1fr;

	align-items: center;
	gap: 8px;
}


.grafixyy-home-cosmic-status span {
	color: #64728f;

	font-size: .54rem;
	font-weight: 900;
	letter-spacing: .09em;
}


.grafixyy-home-cosmic-status span:last-child {
	text-align: right;
}


.grafixyy-home-cosmic-status strong {
	padding:
		5px
		8px;

	border:
		1px solid rgba(104,131,255,.18);

	border-radius: 999px;

	color: #9fb1ff;

	background:
		rgba(59,77,173,.09);

	font-size: .59rem;
	font-weight: 900;
}


/* =========================================================
   ROUTE
   ========================================================= */

.grafixyy-home-cosmic-route {
	position: relative;
	z-index: 2;

	height: 76px;

	margin-top: 15px;
}


.grafixyy-home-cosmic-line {
	position: absolute;

	left: 0;
	right: 0;
	top: 50%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			#ffc653 0%,
			#fff0a3 15%,
			#75e4ed 62%,
			#7188ff 100%
		);

	box-shadow:
		0 0 9px
		rgba(88,194,255,.2);
}


.grafixyy-home-cosmic-object {
	position: absolute;
	z-index: 3;

	top: 50%;

	display: block;

	width: 8px;
	height: 8px;

	transform:
		translate(-50%, -50%);

	border:
		2px solid #030510;

	border-radius: 50%;

	background: #8793ad;
}


/*
 * Orbital positions relative to Neptune.
 */

.grafixyy-home-cosmic-sun {
	left: 0;

	width: 21px;
	height: 21px;

	transform:
		translate(0, -50%);

	border: 0;

	background:
		radial-gradient(
			circle at 35% 30%,
			#fff7b0,
			#ffc43f 44%,
			#ff7138
		);

	box-shadow:
		0 0 14px
		rgba(255,193,56,.7);
}


.grafixyy-home-cosmic-earth {
	left: 3.33%;

	background: #55dcff;

	box-shadow:
		0 0 9px
		rgba(75,216,255,.6);
}


.grafixyy-home-cosmic-jupiter {
	left: 17.31%;

	width: 13px;
	height: 13px;

	background: #d5aa84;
}


.grafixyy-home-cosmic-saturn {
	left: 31.87%;

	width: 11px;
	height: 11px;

	background: #e1c575;
}


.grafixyy-home-cosmic-uranus {
	left: 63.82%;

	width: 11px;
	height: 11px;

	background: #80e1e7;
}


.grafixyy-home-cosmic-neptune {
	left: 100%;

	width: 15px;
	height: 15px;

	transform:
		translate(-100%, -50%);

	background:
		radial-gradient(
			circle at 35% 30%,
			#9bb1ff,
			#4c70ee 57%,
			#293ea6
		);

	box-shadow:
		0 0 15px
		rgba(75,104,255,.72);
}


/* =========================================================
   PHOTON
   ========================================================= */

.grafixyy-home-cosmic-photon {
	position: absolute;
	z-index: 5;

	left: 0;
	top: 50%;

	width: 11px;
	height: 11px;

	transform:
		translate(0, -50%);

	border-radius: 50%;

	background: #fff4a4;

	box-shadow:
		0 0 7px #fff4a4,
		0 0 18px
		rgba(255,221,74,.7);

	animation:
		grafixyyHomePhotonRun
		6.2s
		cubic-bezier(.2,.75,.2,1)
		infinite;
}


/* =========================================================
   READOUT
   ========================================================= */

.grafixyy-home-cosmic-readout {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns:
		auto auto;

	align-items: center;
	justify-content: center;
	column-gap: 9px;
	row-gap: 1px;

	margin-top: 3px;

	text-align: center;
}


.grafixyy-home-cosmic-readout span {
	color: #697795;

	font-size: .5rem;
	font-weight: 900;
	letter-spacing: .09em;
}


.grafixyy-home-cosmic-readout strong {
	font-size: 1.22rem;
	font-weight: 950;

	background:
		linear-gradient(
			90deg,
			#fff2a3,
			#ffffff 45%,
			#84e9ff
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


.grafixyy-home-cosmic-readout small {
	grid-column: 1 / -1;

	color: #a1aecb;

	font-size: .64rem;
	font-weight: 700;

	direction: rtl;
}


/* =========================================================
   DOOR COPY
   ========================================================= */

.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-copy > p {
	color: #8fa4f3;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-copy h3 {
	color: #ffffff;

	background:
		linear-gradient(
			105deg,
			#ffd15d 0%,
			#ff7647 26%,
			#fff7df 47%,
			#a489ff 69%,
			#52dcff 100%
		);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-copy > div {
	color: #a5b2cf;
}


.grafixyy-home-door--cosmic-scale
.grafixyy-home-door-link {
	border-color:
		rgba(103,132,255,.2);

	color: #f7f8ff;

	background:
		linear-gradient(
			90deg,
			rgba(255,184,50,.055),
			rgba(70,91,210,.11)
		);
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes grafixyyHomePhotonRun {

	0% {
		left: 0;
		opacity: 0;
	}

	7% {
		opacity: 1;
	}

	82% {
		left:
			calc(100% - 11px);

		opacity: 1;
	}

	88%,
	100% {
		left:
			calc(100% - 11px);

		opacity: 0;
	}
}


/* =========================================================
   MOBILE
   Same soul, lighter continuous work.
   ========================================================= */

@media (max-width: 720px) {

	.grafixyy-home-cosmic-signal {
		min-height: 190px;

		padding:
			17px
			13px;
	}

	.grafixyy-home-cosmic-route {
		height: 68px;

		margin-top: 12px;
	}

	.grafixyy-home-cosmic-photon {
		animation-duration:
			7.5s;
	}

	.grafixyy-home-cosmic-readout strong {
		font-size: 1.08rem;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.grafixyy-home-cosmic-photon {
		left: 50%;

		animation: none;
	}
}

/* ========================================
   PRICE → TIME HOME DOOR
   Experience #4
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-door--price-time {
	--home-pt-green: #62ff82;
	--home-pt-amber: #ffb52d;

	border-color:
		rgba(98, 255, 130, 0.22);

	background:
		radial-gradient(
			circle at 10% 18%,
			rgba(98, 255, 130, 0.1),
			transparent 30%
		),
		radial-gradient(
			circle at 90% 65%,
			rgba(255, 181, 45, 0.1),
			transparent 34%
		),
		linear-gradient(
			145deg,
			#071009,
			#0a0e09 52%,
			#151006
		);
}


body.grafixyy-home-page
.grafixyy-home-door--price-time
.grafixyy-home-door-visual--price-to-time {
	border:
		1px solid rgba(98, 255, 130, 0.1);

	background:
		linear-gradient(
			105deg,
			rgba(7, 20, 10, 0.82),
			rgba(20, 14, 6, 0.82)
		);
}


body.grafixyy-home-page
.grafixyy-home-price-time-signal {
	width: 100%;

	padding:
		20px
		18px;
}


body.grafixyy-home-page
.grafixyy-home-price-time-status {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 9px;

	color: #7b877d;

	font-family:
		Arial,
		sans-serif;

	font-size: 10px;
	font-weight: 900;

	letter-spacing: 0.08em;

	direction: ltr;
}


body.grafixyy-home-page
.grafixyy-home-price-time-status
span:first-child {
	color: #71ff8e;
}


body.grafixyy-home-page
.grafixyy-home-price-time-status
span:last-child {
	color: #ffc45a;
}


body.grafixyy-home-page
.grafixyy-home-price-time-status strong {
	color: #d9e2da;
}


/* Conversion */

body.grafixyy-home-page
.grafixyy-home-price-time-conversion {
	display: grid;

	grid-template-columns:
		minmax(70px, 1fr)
		minmax(65px, 0.65fr)
		minmax(70px, 1fr);

	align-items: center;

	gap: 10px;

	margin-top: 23px;
}


body.grafixyy-home-page
.grafixyy-home-price-time-money {
	display: flex;

	flex-direction: column;
	align-items: center;
	justify-content: center;
}


body.grafixyy-home-page
.grafixyy-home-price-time-money span {
	font-size: 30px;
}


body.grafixyy-home-page
.grafixyy-home-price-time-money strong {
	margin-top: 4px;

	color: #62ff82;

	font-size: 26px;
	font-weight: 900;

	line-height: 1;
}


/* Energy stream */

body.grafixyy-home-page
.grafixyy-home-price-time-stream {
	position: relative;

	height: 42px;

	overflow: hidden;
}


body.grafixyy-home-page
.grafixyy-home-price-time-stream::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 4%;
	right: 4%;

	height: 2px;

	transform:
		translateY(-50%);

	background:
		linear-gradient(
			90deg,
			#62ff82,
			#c5dc5a,
			#ffb52d
		);
}


body.grafixyy-home-page
.grafixyy-home-price-time-stream > span {
	position: absolute;

	top: 50%;
	left: 4%;

	width: 8px;
	height: 8px;

	transform:
		translateY(-50%);

	border-radius: 50%;

	background: #62ff82;

	box-shadow:
		0 0 10px currentColor;

	animation:
		grafixyy-home-price-stream
		3.4s
		linear
		infinite;
}


/* Clock */

body.grafixyy-home-page
.grafixyy-home-price-time-clock {
	position: relative;

	width: 62px;
	height: 62px;

	margin: 0 auto;

	border:
		2px solid #ffb52d;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#171108,
			#080b08 72%
		);

	box-shadow:
		0 0 20px rgba(255, 181, 45, 0.12);
}


body.grafixyy-home-page
.grafixyy-home-price-time-hand {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 3px;
	height: 20px;

	border-radius: 999px;

	background: #ffd05b;

	transform-origin:
		50% 100%;

	transform:
		translate(-50%, -100%);

	animation:
		grafixyy-home-price-clock
		6s
		linear
		infinite;
}


body.grafixyy-home-page
.grafixyy-home-price-time-dot {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 8px;
	height: 8px;

	transform:
		translate(-50%, -50%);

	border-radius: 50%;

	background: #62ff82;

	box-shadow:
		0 0 10px rgba(98, 255, 130, 0.75);
}


/* Readout */

body.grafixyy-home-page
.grafixyy-home-price-time-readout {
	margin-top: 18px;

	text-align: center;
}


body.grafixyy-home-page
.grafixyy-home-price-time-readout strong {
	display: block;

	color: #ffc45a;

	font-size: 24px;
	font-weight: 900;
}


body.grafixyy-home-page
.grafixyy-home-price-time-readout small {
	display: block;

	margin-top: 6px;

	color: #a7afa7;

	font-size: 11px;
	font-weight: 650;
}


/* Experience copy */

body.grafixyy-home-page
.grafixyy-home-door--price-time
.grafixyy-home-door-copy > p {
	color: #82a987;
}


body.grafixyy-home-page
.grafixyy-home-door--price-time
.grafixyy-home-door-copy h3 {
	color: transparent;

	background:
		linear-gradient(
			100deg,
			#62ff82,
			#c0e85f 50%,
			#ffb52d
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;
}


body.grafixyy-home-page
.grafixyy-home-door--price-time
.grafixyy-home-door-link:hover {
	border-color:
		rgba(98, 255, 130, 0.35);
}


/* Motion */

@keyframes grafixyy-home-price-stream {

	0% {
		left: 4%;
		opacity: 0;
		background: #62ff82;
	}

	15% {
		opacity: 1;
	}

	75% {
		background: #ffd05b;
	}

	88% {
		opacity: 1;
	}

	100% {
		left: 86%;
		opacity: 0;
		background: #ff9f1c;
	}
}


@keyframes grafixyy-home-price-clock {

	from {
		transform:
			translate(-50%, -100%)
			rotate(0deg);
	}

	to {
		transform:
			translate(-50%, -100%)
			rotate(360deg);
	}
}


/* Mobile: same idea, lower animation rate */

@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-price-time-signal {
		padding:
			17px
			13px;
	}


	body.grafixyy-home-page
	.grafixyy-home-price-time-conversion {
		gap: 6px;
	}


	body.grafixyy-home-page
	.grafixyy-home-price-time-stream > span {
		animation-duration: 5s;
	}


	body.grafixyy-home-page
	.grafixyy-home-price-time-hand {
		animation-duration: 8s;
	}
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-price-time-stream > span,

	body.grafixyy-home-page
	.grafixyy-home-price-time-hand {
		animation: none !important;
	}
}


/* ========================================
   HOMEPAGE DISCOVERY BRIDGE
   Experiences → Worlds
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-bridge {
	position: relative;

	width: 100%;

	padding:
		28px
		0
		38px;

	background: #050816;
}


body.grafixyy-home-page
.grafixyy-home-bridge-inner {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 35px;

	width:
		min(
			1180px,
			calc(100% - 48px)
		);

	margin: 0 auto;

	padding:
		28px
		30px;

	border:
		1px solid rgba(148, 163, 184, 0.13);

	border-radius: 24px;

	background:
		linear-gradient(
			120deg,
			rgba(139, 92, 246, 0.07),
			rgba(34, 211, 238, 0.035)
		);
}


body.grafixyy-home-page
.grafixyy-home-bridge-inner::before {
	content: "";

	position: absolute;

	top: 0;
	right: 30px;
	left: 30px;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(139, 92, 246, 0.5),
			rgba(34, 211, 238, 0.42),
			transparent
		);
}


/* Copy */

body.grafixyy-home-page
.grafixyy-home-bridge-copy {
	max-width: 650px;
}


body.grafixyy-home-page
.grafixyy-home-bridge-copy > p {
	margin:
		0
		0
		8px;

	color: #67dfea;

	font-size: 11px;
	font-weight: 800;
}


body.grafixyy-home-page
.grafixyy-home-bridge-copy h2 {
	margin: 0;

	color: #ffffff;

	font-size:
		clamp(
			24px,
			2.6vw,
			36px
		);

	font-weight: 850;
	line-height: 1.35;
}


body.grafixyy-home-page
.grafixyy-home-bridge-copy h2 span {
	color: #ad98ff;
}


body.grafixyy-home-page
.grafixyy-home-bridge-copy > div {
	max-width: 590px;

	margin-top: 10px;

	color: #7f8b9f;

	font-size: 12px;
	font-weight: 550;
	line-height: 1.8;
}


/* Actions */

body.grafixyy-home-page
.grafixyy-home-bridge-actions {
	display: flex;

	align-items: center;

	gap: 10px;

	flex: 0 0 auto;
}


body.grafixyy-home-page
.grafixyy-home-bridge-actions a {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 46px;

	padding:
		11px
		15px;

	border-radius: 13px;

	font-size: 12px;
	font-weight: 750;

	text-decoration: none;

	transition:
		transform 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease;
}


body.grafixyy-home-page
.grafixyy-home-bridge-worlds {
	border:
		1px solid rgba(34, 211, 238, 0.2);

	background:
		rgba(34, 211, 238, 0.045);

	color: #b8edf3;
}


body.grafixyy-home-page
.grafixyy-home-bridge-worlds:visited {
	color: #b8edf3;
}


body.grafixyy-home-page
.grafixyy-home-bridge-random {
	border:
		1px solid rgba(139, 92, 246, 0.28);

	background:
		rgba(139, 92, 246, 0.09);

	color: #d5c9ff;
}


body.grafixyy-home-page
.grafixyy-home-bridge-random:visited {
	color: #d5c9ff;
}


body.grafixyy-home-page
.grafixyy-home-bridge-actions a:hover {
	transform:
		translateY(-2px);
}


body.grafixyy-home-page
.grafixyy-home-bridge-worlds:hover {
	border-color:
		rgba(34, 211, 238, 0.42);

	background:
		rgba(34, 211, 238, 0.08);

	color: #ffffff;
}


body.grafixyy-home-page
.grafixyy-home-bridge-random:hover {
	border-color:
		rgba(167, 139, 250, 0.48);

	background:
		rgba(139, 92, 246, 0.15);

	color: #ffffff;
}


/* Focus */

body.grafixyy-home-page
.grafixyy-home-bridge-actions a:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


/* Mobile */

@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-bridge {
		padding:
			18px
			0
			30px;
	}


	body.grafixyy-home-page
	.grafixyy-home-bridge-inner {
		flex-direction: column;

		align-items: stretch;

		width:
			calc(100% - 32px);

		gap: 21px;

		padding:
			23px
			20px;

		border-radius: 20px;
	}


	body.grafixyy-home-page
	.grafixyy-home-bridge-copy {
		text-align: right;
	}


	body.grafixyy-home-page
	.grafixyy-home-bridge-copy h2 {
		font-size: 25px;
	}


	body.grafixyy-home-page
	.grafixyy-home-bridge-actions {
		display: grid;

		grid-template-columns:
			1fr
			1fr;

		width: 100%;
	}


	body.grafixyy-home-page
	.grafixyy-home-bridge-actions a {
		width: 100%;

		padding-inline: 8px;

		font-size: 11px;
	}
}


/* Very narrow phones */

@media (max-width: 380px) {

	body.grafixyy-home-page
	.grafixyy-home-bridge-actions {
		grid-template-columns: 1fr;
	}
}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-bridge-actions a {
		transition: none;
	}
}

/* ========================================
   HOMEPAGE PERFORMANCE PASS 1
   Keep meaningful motion.
   Stop expensive decorative repaints.
   ======================================== */


/*
 * Reactor stays alive through its rotating
 * orbits and signals.
 * Its large shadow does not need to repaint.
 */

body.grafixyy-home-page
.grafixyy-reactor-core {
	animation: none;

	box-shadow:
		0 0 0 10px rgba(139, 92, 246, 0.03),
		0 0 62px rgba(139, 92, 246, 0.18);
}


/*
 * Age keeps the moving orbit.
 * Stop continuously repainting the large glow.
 */

body.grafixyy-home-page
.grafixyy-home-time-signal {
	animation: none;

	box-shadow:
		0 0 52px rgba(139, 92, 246, 0.15);
}


/*
 * Million origin remains visually active
 * without continuously animating box-shadow.
 */

body.grafixyy-home-page
.grafixyy-home-scale-mini-grid
> span.is-origin {
	animation: none;

	opacity: 1;

	box-shadow:
		0 0 18px rgba(202, 255, 49, 0.52);
}


/*
 * World core keeps its rotating ring.
 * Stop the large animated shadow.
 */

body.grafixyy-home-page
.grafixyy-home-world-map-core {
	animation: none;

	box-shadow:
		0 0 0 24px rgba(139, 92, 246, 0.018),
		0 0 0 48px rgba(34, 211, 238, 0.012),
		0 0 58px rgba(34, 211, 238, 0.08);
}


/*
 * World orbit still rotates.
 * Remove the second animation that continuously
 * changes its border color.
 */

body.grafixyy-home-page
.grafixyy-home-world-map-core::before {
	animation:
		grafixyy-world-spin
		15s
		linear
		infinite;

	border-color:
		rgba(139, 92, 246, 0.2);
}


@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-world-map-core::before {
		animation:
			grafixyy-world-spin
			18s
			linear
			infinite;
	}
}


/*
 * Reduced Motion remains authoritative.
 */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-world-map-core::before {
		animation: none !important;
	}
}
/* ========================================
   HOMEPAGE WORLDS — 12 WORLD LAYOUT
   Desktop grid refinement
   ======================================== */

@media (min-width: 901px) {

	body.grafixyy-home-page
	.grafixyy-home-world-map {
		display: flex;

		flex-direction: column;
		align-items: center;

		gap: 58px;

		min-height: 0;

		padding:
			55px
			42px
			42px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map::before {
		top: 245px;
		left: 50%;

		width: 1px;
		height: 58px;

		transform: translateX(-50%);

		background:
			linear-gradient(
				180deg,
				rgba(34, 211, 238, 0.24),
				transparent
			);
	}


	body.grafixyy-home-page
	.grafixyy-home-world-map-core {
		width: 175px;
		height: 175px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-list {
		grid-template-columns:
			repeat(4, minmax(0, 1fr));

		gap: 12px;

		width: 100%;
	}


	body.grafixyy-home-page
	.grafixyy-home-world {
		min-height: 105px;

		padding:
			15px
			16px;

		gap: 13px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-signal {
		width: 48px;
		height: 48px;

		flex:
			0
			0
			48px;

		border-radius: 14px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-signal
	span:nth-child(2) {
		width: 24px;
		height: 24px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-signal
	span:nth-child(3) {
		width: 38px;
		height: 38px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-copy strong {
		font-size: 15px;
	}


	body.grafixyy-home-page
	.grafixyy-home-world-copy > span {
		font-size: 9px;
	}
}
/* ========================================
   HOMEPAGE WORLD IDENTITIES
   Open / Waiting / Dynamic Worlds
   ======================================== */

/*
 * Every World owns one accent color.
 * A future unknown World still gets
 * the default cyan identity.
 */

body.grafixyy-home-page
.grafixyy-home-world {
	--world-accent: #22d3ee;
	--world-rgb: 34, 211, 238;

	color: inherit;
	text-decoration: none;

	transition:
		border-color 160ms ease,
		background-color 160ms ease,
		transform 160ms ease;
}


/* أنا وحياتي */

body.grafixyy-home-page
.grafixyy-home-world--life {
	--world-accent: #a78bfa;
	--world-rgb: 167, 139, 250;
}


/* الفضاء */

body.grafixyy-home-page
.grafixyy-home-world--space {
	--world-accent: #55dcff;
	--world-rgb: 85, 220, 255;
}


/* الأرقام */

body.grafixyy-home-page
.grafixyy-home-world--numbers {
	--world-accent: #caff31;
	--world-rgb: 202, 255, 49;
}


/* المال والوقت */

body.grafixyy-home-page
.grafixyy-home-world--money-time {
	--world-accent: #ffb52d;
	--world-rgb: 255, 181, 45;
}


/* التكنولوجيا */

body.grafixyy-home-page
.grafixyy-home-world--technology {
	--world-accent: #4f8cff;
	--world-rgb: 79, 140, 255;
}


/* المقارنات */

body.grafixyy-home-page
.grafixyy-home-world--compare {
	--world-accent: #ff704d;
	--world-rgb: 255, 112, 77;
}


/* الأرض والجغرافيا */

body.grafixyy-home-page
.grafixyy-home-world--earth {
	--world-accent: #62d987;
	--world-rgb: 98, 217, 135;
}


/* القياسات والتحويلات */

body.grafixyy-home-page
.grafixyy-home-world--measure {
	--world-accent: #2dd4bf;
	--world-rgb: 45, 212, 191;
}


/* الصور والألوان */

body.grafixyy-home-page
.grafixyy-home-world--visual {
	--world-accent: #f472b6;
	--world-rgb: 244, 114, 182;
}


/* النصوص واللغة */

body.grafixyy-home-page
.grafixyy-home-world--text {
	--world-accent: #c084fc;
	--world-rgb: 192, 132, 252;
}


/* الحياة اليومية */

body.grafixyy-home-page
.grafixyy-home-world--everyday {
	--world-accent: #facc15;
	--world-rgb: 250, 204, 21;
}


/* ألعاب وتجارب */

body.grafixyy-home-page
.grafixyy-home-world--fun {
	--world-accent: #fb7185;
	--world-rgb: 251, 113, 133;
}


/* ========================================
   WORLD COLOR SYSTEM
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world::before {
	background:
		linear-gradient(
			90deg,
			transparent,
			var(--world-accent),
			transparent
		);
}


body.grafixyy-home-page
.grafixyy-home-world-signal {
	border-color:
		rgba(var(--world-rgb), 0.23);

	background:
		rgba(var(--world-rgb), 0.055);
}


body.grafixyy-home-page
.grafixyy-home-world-signal
span:nth-child(1) {
	background:
		var(--world-accent);

	box-shadow:
		0 0 13px
		rgba(var(--world-rgb), 0.52);
}


body.grafixyy-home-page
.grafixyy-home-world-signal
span:nth-child(2) {
	border-color:
		rgba(var(--world-rgb), 0.28);
}


body.grafixyy-home-page
.grafixyy-home-world-signal
span:nth-child(3) {
	border-color:
		rgba(var(--world-rgb), 0.17);
}


/* ========================================
   OPEN WORLD
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world.is-open {
	border-color:
		rgba(var(--world-rgb), 0.23);

	background:
		linear-gradient(
			135deg,
			rgba(var(--world-rgb), 0.075),
			rgba(255, 255, 255, 0.018)
		);

	cursor: pointer;
}


body.grafixyy-home-page
.grafixyy-home-world.is-open:hover {
	transform:
		translateY(-2px);

	border-color:
		rgba(var(--world-rgb), 0.48);

	background:
		linear-gradient(
			135deg,
			rgba(var(--world-rgb), 0.12),
			rgba(255, 255, 255, 0.025)
		);
}


body.grafixyy-home-page
.grafixyy-home-world.is-open
.grafixyy-home-world-copy small {
	color:
		rgba(var(--world-rgb), 0.68);
}


body.grafixyy-home-page
.grafixyy-home-world.is-open
.grafixyy-home-world-copy > span {
	color: #929daf;
}


/* Arrow only exists on open Worlds. */

body.grafixyy-home-page
.grafixyy-home-world-arrow {
	margin-inline-start: auto;

	color:
		var(--world-accent);

	font-size: 16px;
	font-weight: 900;

	opacity: 0.8;

	transition:
		transform 160ms ease;
}


body.grafixyy-home-page
.grafixyy-home-world.is-open:hover
.grafixyy-home-world-arrow {
	transform:
		translateX(-3px);
}


/* ========================================
   WAITING WORLD
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world.is-waiting {
	border-color:
		rgba(var(--world-rgb), 0.09);

	background:
		rgba(255, 255, 255, 0.014);

	opacity: 0.7;
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting::before {
	opacity: 0.2;
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-signal {
	opacity: 0.6;
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-signal
span:nth-child(1) {
	box-shadow:
		0 0 8px
		rgba(var(--world-rgb), 0.28);

	animation: none;
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-copy > span {
	color: #626d80;
}


/* ========================================
   CLOSING MESSAGE
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-worlds-closing {
	width: min(620px, 100%);

	margin:
		34px
		auto
		2px;

	padding-top: 27px;

	border-top:
		1px solid rgba(148, 163, 184, 0.1);

	text-align: center;
}


body.grafixyy-home-page
.grafixyy-home-worlds-closing strong {
	color: #ffffff;

	font-size:
		clamp(
			19px,
			2vw,
			25px
		);

	font-weight: 800;
}


body.grafixyy-home-page
.grafixyy-home-worlds-closing strong span {
	color: #a995ff;
}


body.grafixyy-home-page
.grafixyy-home-worlds-closing p {
	margin:
		8px
		0
		0;

	color: #707c90;

	font-size: 11px;
	font-weight: 550;
	line-height: 1.8;
}


/* ========================================
   ACCESSIBILITY / MOBILE
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-world.is-open:focus-visible {
	outline:
		3px solid var(--world-accent);

	outline-offset: 4px;
}


@media (max-width: 700px) {

	body.grafixyy-home-page
	.grafixyy-home-world.is-open:hover {
		transform: none;
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-closing {
		margin-top: 27px;

		padding:
			23px
			8px
			0;
	}


	body.grafixyy-home-page
	.grafixyy-home-worlds-closing strong {
		font-size: 18px;
	}

}


@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-world,

	body.grafixyy-home-page
	.grafixyy-home-world-arrow {
		transition: none;
	}
}

/* ========================================
   WAITING WORLDS — KEEP THEIR IDENTITY
   ======================================== */

/*
 * A waiting World is closed, not invisible.
 * Keep its own color while making the open
 * state clearly stronger.
 */

body.grafixyy-home-page
.grafixyy-home-world.is-waiting {
	border-color:
		rgba(var(--world-rgb), 0.16);

	background:
		linear-gradient(
			135deg,
			rgba(var(--world-rgb), 0.045),
			rgba(255, 255, 255, 0.012)
		);

	opacity: 0.88;
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting::before {
	opacity: 0.42;
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-signal {
	opacity: 0.82;

	border-color:
		rgba(var(--world-rgb), 0.2);

	background:
		rgba(var(--world-rgb), 0.045);
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-copy small {
	color:
		rgba(var(--world-rgb), 0.54);
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-copy strong {
	color:
		var(--world-accent);
}


body.grafixyy-home-page
.grafixyy-home-world.is-waiting
.grafixyy-home-world-copy > span {
	color: #687488;
}


/*
 * Open Worlds keep the strongest identity.
 */

body.grafixyy-home-page
.grafixyy-home-world.is-open
.grafixyy-home-world-copy strong {
	color:
		var(--world-accent);
}


body.grafixyy-home-page
.grafixyy-home-world.is-open
.grafixyy-home-world-signal
span:nth-child(1) {
	box-shadow:
		0 0 15px
		rgba(var(--world-rgb), 0.65);
}

/* ========================================
   ALL WORLDS CTA
   ======================================== */

body.grafixyy-home-page
.grafixyy-home-worlds-all-link {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 9px;

	width: fit-content;

	min-height: 46px;

	margin-top: 24px;

	padding:
		10px
		16px;

	border:
		1px solid rgba(34, 211, 238, 0.28);

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			rgba(34, 211, 238, 0.11),
			rgba(139, 92, 246, 0.08)
		);

	color: #ffffff;

	font-size: 14px;
	font-weight: 750;
	line-height: 1;

	text-decoration: none;

	transition:
		transform 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease;
}


body.grafixyy-home-page
.grafixyy-home-worlds-all-link:visited {
	color: #ffffff;
}


body.grafixyy-home-page
.grafixyy-home-worlds-all-link:hover {
	transform: translateY(-1px);

	border-color:
		rgba(34, 211, 238, 0.48);

	background:
		linear-gradient(
			135deg,
			rgba(34, 211, 238, 0.17),
			rgba(139, 92, 246, 0.12)
		);

	color: #ffffff;
}


body.grafixyy-home-page
.grafixyy-home-worlds-all-link:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


/* Mobile */

@media (max-width: 600px) {

	body.grafixyy-home-page
	.grafixyy-home-worlds-all-link {
		min-height: 44px;

		margin-top: 20px;

		padding:
			9px
			14px;

		font-size: 12px;
	}
}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-home-page
	.grafixyy-home-worlds-all-link {
		transition: none;
	}
}