article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 16px;
}

body {
	--color-text: #fff;
	--color-bg: #0e0e0f;
	--color-link: #EE9A00;
	--color-link-hover: #8e5c00;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: Futura, "futura-pt", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
}

.frame__title {
	font-size: 1rem;
	margin: 0 0 1rem;
	font-weight: normal;
}

.frame__links {
	display: inline;
}

.frame a {
	text-transform: lowercase;
}

.frame__github,
.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
	margin-right: 1rem;
}

.content {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: calc(100vh - 13rem);
	position: relative;
	justify-content: flex-start;
	align-items: center;
}

@media screen and (min-width: 53em) {
	.frame {
		position: fixed;
		text-align: left;
		z-index: 10000;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 3rem;
		pointer-events: none;
		grid-template-columns: 75% 25%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title links'
							'... ...'
							'github demos';
	}
	.frame__title-wrap {
		grid-area: title;
		display: flex;
		align-items: center;
	}
	.frame__title {
		margin: 0;
	}
	.frame__tagline {
		position: relative;
		margin: 0 0 0 1rem;
		padding: 0 0 0 1rem;
		opacity: 0.5;
	}
	.frame__github {
		grid-area: github;
		justify-self: start;
		margin: 0;
	}
	.frame__links {
		grid-area: links;
		padding: 0;
		justify-self: end;
	}
	.frame a {
		pointer-events: auto;
	}
	.content {
		height: 100vh;
		justify-content: center;
	}

	/* Fix scrolling issues */
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	body {
		overflow-y: auto;
		background-color: #6040EF;
		position: relative;
	}

	/* Animated background effect */
	body::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			45deg,
			rgba(96, 64, 239, 0.4) 0%,
			rgba(59, 39, 147, 0.4) 25%,
			rgba(96, 64, 239, 0.4) 50%,
			rgba(59, 39, 147, 0.4) 75%,
			rgba(96, 64, 239, 0.4) 100%
		);
		z-index: 0;
		animation: waveEffect 15s ease-in-out infinite;
		background-size: 400% 400%;
	}

	body::after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(
			circle at center,
			transparent 0%,
			rgba(96, 64, 239, 0.05) 25%,
			transparent 50%,
			rgba(96, 64, 239, 0.03) 75%,
			transparent 100%
		);
		z-index: 0;
		animation: pulseEffect 10s ease-in-out infinite;
		background-size: 200% 200%;
		mix-blend-mode: overlay;
	}

	@keyframes waveEffect {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	@keyframes pulseEffect {
		0% {
			background-position: center top;
		}
		50% {
			background-position: center center;
		}
		100% {
			background-position: center top;
		}
	}

	/* Adjust container z-index to ensure it stays behind content */
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 5;
		mix-blend-mode: screen;
		pointer-events: none;
	}

	.container canvas {
		pointer-events: auto;
	}

	/* Ensure page wrapper stays above the animated background */
	.page-wrapper {
		position: relative;
		z-index: 2;
	}

	/* Update hero section to work with container */
	.hero-section {
		position: relative;
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 40px;
		z-index: 3;
	}

	/* Ensure video container stays centered in viewport */
	.video-container {
		position: relative;
		width: 90%;
		max-width: 800px;
		margin: 40px auto;
		z-index: 1000;
		background: #6141ee18;
		padding: 20px;
		border-radius: 20px;
		text-align: center;
		cursor: pointer;
		transition: all 0.5s ease;
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Ensure content sections stack properly */
	.content-section,
	.examples-section,
	.niches-section,
	.phases-section,
	.mechanics-section,
	.selection-section,
	.roadmap-section {
		position: relative;
		width: 100%;
		z-index: 1001;
		padding: 120px 0;
		border-top: 1px solid rgba(195, 209, 171, 0.1);
		backdrop-filter: blur(10px);
	}

	/* Base green */
	.content-section {
		background: rgb(251, 251, 253);
	}

	/* Slightly darker green */
	.examples-section {
		background: rgba(96, 64, 239, 0.806);
	}

	/* Original green */
	.niches-section {
		background: #6241e4;
		position: relative;
		width: 100%;
		z-index: 1001;
		padding: 120px 0;
		border-top: 1px solid rgba(195, 209, 171, 0.1);
		backdrop-filter: blur(10px);
	}

	.niches-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 60px;
		align-items: start;
	}

	.niches-left {
		position: relative;
	}

	.niches-images {
		position: relative;
		width: 100%;
		height: 500px;
		margin-top: 40px;
		perspective: 1000px;
	}

	.niche-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.5s ease;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
		opacity: 1;
		transform: scale(0.9);
	}

	.niche-image[data-niche="microbiome"] {
		transform: translate(0, 0) scale(0.95);
		z-index: 3;
	}

	.niche-image[data-niche="neurodegenerative"] {
		transform: translate(20px, -20px) scale(0.93);
		z-index: 2;
	}

	.niche-image[data-niche="ocean"] {
		transform: translate(40px, -40px) scale(0.91);
		z-index: 1;
	}

	.niche-image.active {
		transform: translate(0, 0) scale(0.95) !important;
		z-index: 4;
	}

	.niches-right {
		padding-top: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 600px;
	}

	.niche-collapsible {
		margin-bottom: 20px;
		margin-left: 50px;
		overflow: hidden;
		transition: all 0.3s ease;
		border-bottom: 2px solid white;
	}

	.niche-header {
		padding: 30px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: all 0.3s ease;
	}

	.niche-header:hover {
		background: rgba(255, 255, 255, 0.05);
	}

	.niche-title {
		color: white;
		font-size: 42px;
		margin: 0;
		font-weight: 450;
		transition: all 0.3s ease;
	}

	.niche-arrow {
		width: 24px;
		height: 24px;
		position: relative;
		transition: transform 0.3s ease;
	}

	.niche-arrow::before,
	.niche-arrow::after {
		content: '';
		position: absolute;
		background: white;
		top: 50%;
		left: 50%;
		transition: all 0.3s ease;
	}

	.niche-arrow::before {
		width: 2px;
		height: 16px;
		margin-left: -1px;
		margin-top: -8px;
	}

	.niche-arrow::after {
		width: 16px;
		height: 2px;
		margin-left: -8px;
		margin-top: -1px;
	}

	.niche-collapsible.active .niche-arrow::before {
		transform: rotate(90deg);
		opacity: 0;
	}

	.niche-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease;
		padding: 0 30px;
	}

	.niche-collapsible.active .niche-content {
		max-height: 1000px;
		padding: 0 30px 30px;
	}

	.niche-focus {
		color: rgba(255, 255, 255, 0.9);
		font-size: 18px;
		margin: 20px 0;
		font-style: italic;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	.why-list {
		color: rgba(255, 255, 255, 0.8);
		padding-left: 20px;
		margin: 0;
	}

	.why-list li {
		margin-bottom: 10px;
		line-height: 1.6;
	}

	@media screen and (max-width: 1024px) {
		.niches-container {
			grid-template-columns: 1fr;
			gap: 40px;
		}

		.niches-images {
			height: 400px;
		}
	}

	@media screen and (max-width: 768px) {
		.niche-title {
			font-size: 24px;
		}

		.niches-images {
			height: 300px;
		}
	}

	/* Phases Section Styles */
	.phases-section {
		background: rgb(249, 249, 251);
		position: relative;
		overflow: hidden;
		padding: 0;
	}

	.phases-section .content-wrapper {
		padding: 0;
		max-width: none;
	}

	.phases-section .section-title {
		display: block;
		color: #000000;
		padding: 60px 0;
		margin: 0;
		text-align: center;
		font-size: 48px;
		font-weight: 100;
	}

	.phases-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		min-height: 80vh;
		width: 100%;
		margin: 0;
	}

	.phase-card {
		position: relative;
		padding: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transition: all 0.4s ease;
		overflow: hidden;
		border: none;
		min-height: 40vh;
	}

	.phase-card:nth-child(1) {
		background: #FFFFFF;
	}

	.phase-card:nth-child(2) {
		background: #F5F5F5;
	}

	.phase-card:nth-child(3) {
		background: #EFEFEF;
	}

	.phase-card:nth-child(4) {
		background: #E8E8E8;
	}

	.phase-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.03);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.phase-card:hover::before {
		opacity: 1;
	}

	.phase-number {
		position: absolute;
		top: 30px;
		right: 30px;
		font-size: 100px;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.1);
		font-family: 'Chakra Petch', sans-serif;
		line-height: 1;
		transition: all 0.3s ease;
	}

	.phase-card:hover .phase-number {
		transform: scale(1.1);
		color: rgba(0, 0, 0, 0.15);
	}

	.phase-title {
		color: #333333;
		font-size: 28px;
		margin-bottom: 20px;
		font-weight: 500;
		position: relative;
		font-family: 'Chakra Petch', sans-serif;
		padding-bottom: 15px;
	}

	.phase-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 60px;
		height: 3px;
		background: #6040ef;
		border-radius: 2px;
	}

	.phase-content {
		color: #666666;
		font-size: 16px;
		line-height: 1.6;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
		position: relative;
		z-index: 1;
	}

	.phase-content ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.phase-content li {
		margin-bottom: 15px;
		padding-left: 25px;
		position: relative;
	}

	.phase-content li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 8px;
		width: 6px;
		height: 6px;
		background: #999999;
		border-radius: 50%;
		opacity: 0.6;
	}

	@media screen and (max-width: 1024px) {
		.phases-grid {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(4, auto);
			min-height: auto;
		}

		.phase-card {
			aspect-ratio: auto;
			padding: 30px;
			min-height: 300px;
		}

		.phase-number {
			font-size: 80px;
			top: 20px;
			right: 20px;
		}

		.phase-title {
			font-size: 24px;
			margin-bottom: 15px;
		}
	}

	@media screen and (max-width: 768px) {
		.phase-card {
			padding: 30px;
			min-height: 350px;
		}

		.phase-number {
			font-size: 80px;
			top: 20px;
			right: 20px;
		}

		.phase-title {
			font-size: 24px;
			margin-bottom: 20px;
			padding-right: 40px;
		}

		.phase-content li {
			font-size: 15px;
			margin-bottom: 12px;
		}
	}

	/* Original green */
	.mechanics-section {
		background: #6140EF;
	}

	/* Darker green */
	.selection-section {
		background: rgba(96, 64, 239, 0.806);
	}

	/* Lighter green */
	.roadmap-section {
		background: #6140EF;
	}

	/* Add subtle gradient overlays for more depth */
	.content-section::before,
	.examples-section::before,
	.niches-section::before,
	.phases-section::before,
	.mechanics-section::before,
	.selection-section::before,
	.roadmap-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		opacity: 0.1;
		z-index: -1;
	}

	.content-section::before {
		background: linear-gradient(135deg, rgba(195, 209, 171, 0.1), transparent);
	}

	.examples-section::before {
		background: linear-gradient(135deg, rgba(26, 47, 35, 0.1), transparent);
	}

	.niches-section::before {
		background: linear-gradient(135deg, rgba(195, 209, 171, 0.1), transparent);
	}

	.phases-section::before {
		background: linear-gradient(135deg, rgba(30, 54, 40, 0.1), transparent);
	}

	.mechanics-section::before {
		background: linear-gradient(135deg, rgba(195, 209, 171, 0.1), transparent);
	}

	.selection-section::before {
		background: linear-gradient(135deg, rgba(26, 47, 35, 0.1), transparent);
	}

	.roadmap-section::before {
		background: linear-gradient(135deg, rgba(30, 54, 40, 0.1), transparent);
	}

	@font-face {
		font-family: 'Aeonik';
		src: url('fonts/Aeonik-Regular.woff2') format('woff2'),
				url('fonts/Aeonik-Regular.woff') format('woff');
		font-weight: 400;
		font-style: normal;
	}

	.video-preview {
		position: relative;
		width: 100%;
		aspect-ratio: 16/9;
		background: linear-gradient(45deg, rgba(173, 171, 209, 0.1), rgba(27, 26, 47, 0.3));
		border-radius: 15px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.video-preview:hover {
		transform: scale(1.02);
	}

	.play-button {
		position: relative;
		width: 80px;
		height: 80px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		border: 2px solid rgba(255, 255, 255, 0.2);
	}

	.play-button::before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 0 15px 25px;
		border-color: transparent transparent transparent #abaed1;
		margin-left: 5px;
		transition: all 0.3s ease;
	}

	.video-preview:hover .play-button {
		transform: scale(1.1);
		background: rgba(255, 255, 255, 0.2);
	}

	.preview-text {
		position: absolute;
		bottom: 30px;
		left: 30px;
		color: gray;
		font-family: 'Chakra Petch', sans-serif;
		font-size: 18px;
		opacity: 0.8;
		transition: all 0.3s ease;
		font-weight: 300;
	}

	.video-container.playing {
		background: rgba(0, 0, 0, 0.5);
	}

	.video-container.playing .video-preview {
		pointer-events: none;
	}

	.video-container.playing .play-button,
	.video-container.playing .preview-text {
		opacity: 0;
		pointer-events: none;
	}

	.video-wrapper {
		display: none;
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		height: 0;
	}

	.video-wrapper.active {
		display: block;
	}

	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 8px;
	}

	.title {
		width: 60%;
		margin-top: 150px;
		z-index: 1000;
		font-family: 'Chakra Petch', sans-serif;
		font-size: 100px;
		font-weight: 500;
		font-style: normal;
		line-height: 1;
		color: #FFFFFF;
		text-align: left;
		text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.scroll-btn {
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2001;
		background: transparent;
		border: none;
		cursor: pointer;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		transition: transform 0.3s ease;
	}

	.scroll-btn:hover {
		transform: translateX(-50%) scale(1.1);
	}

	.scroll-btn .bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: rgb(98, 65, 228, 0.6);
		backdrop-filter: blur(10px);
		transition: background 0.3s ease;
	}

	.scroll-btn:hover .bg {
		background: rgb(98, 65, 228, 0.5);
	}

	.scroll-btn .icon-container {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.scroll-btn svg {
		position: absolute;
	}

	.scroll-btn .shadow-icon {
		filter: blur(4px);
		opacity: 0.5;
	}

	/* New styles for content sections */
	.content-wrapper {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 40px;
	}

	.tagline {
		font-family: 'Chakra Petch', sans-serif;
		font-size: 38px;
		line-height: 1.4;
		color: black;
		text-align: center;
		margin-bottom: 60px;
		font-weight: 300;
	}

	.vision-quote {
		font-style: italic;
		color: rgba(255, 255, 255, 0.8);
		font-size: 20px;
		line-height: 1.8;
		position: relative;
		padding: 20px 0;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 100;
	}

	.vision-quote::before,
	.vision-quote::after {
		content: '"';
		color: #C3D1AB;
		font-size: 40px;
		position: absolute;
	}

	.vision-quote::before {
		left: -20px;
		top: 0;
	}

	.vision-quote::after {
		right: -20px;
		bottom: 0;
	}

	@media screen and (max-width: 768px) {
		.content-wrapper {
			padding: 0 20px;
		}

		.tagline {
			font-size: 24px;
		}

		.vision-block {
			padding: 30px;
		}

		.vision-text,
		.vision-quote {
			font-size: 16px;
		}
	}

	.section-title {
		font-family: 'Chakra Petch', sans-serif;
		font-size: 48px;
		color: #000000;
		text-align: center;
		margin-bottom: 60px;
		font-weight: 100;
	}

	.roadmap-section .section-title {
		color: white;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.niches-left .section-title {
		text-align: left;
		font-weight: 600;
		font-size: 52px;
	}

	/* Add specific style for niches section title */
	.niches-section .section-title {
		color: white;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	/* Add specific style for niches section title */
	.selection-section .section-title {
		color: white;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.examples-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 30px;
		margin-bottom: 60px;
	}

	.example-card {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(195, 209, 171, 0.1);
		border-radius: 20px;
		padding: 30px;
		transition: all 0.3s ease;
	}

	.example-card:hover {
		transform: translateY(-5px);
		background: rgba(255, 255, 255, 0.05);
	}

	.future-text {
		text-align: center;
		color: #C3D1AB;
		font-size: 24px;
		font-style: italic;
		margin-top: 40px;
		padding: 20px;
		border-top: 1px solid rgba(195, 209, 171, 0.1);
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 100;
	}

	.mechanics-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 30px;
	}

	.mechanics-card {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(195, 209, 171, 0.1);
		border-radius: 20px;
		padding: 40px;
		transition: all 0.3s ease;
		position: relative;
	}

	.mechanics-card:hover {
		transform: translateY(-5px);
		background: rgba(255, 255, 255, 0.05);
	}

	.mechanics-title {
		color: #C3D1AB;
		font-size: 24px;
		margin-bottom: 20px;
		font-weight: 300;
	}

	.mechanics-content {
		color: rgba(255, 255, 255, 0.8);
		font-size: 16px;
		line-height: 1.6;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	.mechanics-content p {
		margin-bottom: 20px;
	}

	.mechanics-content ul {
		padding-left: 20px;
	}

	.mechanics-content li {
		margin-bottom: 10px;
	}

	@media screen and (max-width: 768px) {
		.mechanics-grid {
			grid-template-columns: 1fr;
		}

		.mechanics-title {
			font-size: 20px;
		}
	}

	.selection-intro {
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		font-size: 20px;
		max-width: 800px;
		margin: 0 auto 60px;
		line-height: 1.6;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	.selection-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: 40px;
		margin-bottom: 80px;
	}

	.selection-card {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(195, 209, 171, 0.1);
		border-radius: 20px;
		padding: 40px;
		transition: all 0.3s ease;
		position: relative;
	}

	.selection-card:hover {
		transform: translateY(-5px);
		background: rgba(255, 255, 255, 0.05);
	}

	.step-number {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 48px;
		color: rgba(195, 209, 171, 0.1);
		font-weight: 700;
	}

	.selection-title {
		color: #C3D1AB;
		font-size: 24px;
		margin-bottom: 20px;
		font-weight: 300;
		padding-right: 40px;
	}

	.selection-content {
		color: white;
		font-size: 16px;
		line-height: 1.6;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	.selection-content p {
		margin-bottom: 15px;
	}

	.selection-content ul {
		padding-left: 20px;
	}

	.selection-content li {
		margin-bottom: 10px;
	}

	.selection-content strong {
		color: #C3D1AB;
		font-weight: 600;
	}

	.workflow-section {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(195, 209, 171, 0.1);
		border-radius: 20px;
		padding: 40px;
		margin-top: 60px;
	}

	.workflow-title {
		color: #C3D1AB;
		font-size: 28px;
		margin-bottom: 40px;
		text-align: center;
		font-weight: 100;
	}

	.workflow-timeline {
		display: flex;
		flex-direction: column;
		gap: 20px;
		max-width: 600px;
		margin: 0 auto;
	}

	.timeline-item {
		display: flex;
		align-items: center;
		gap: 20px;
		color: rgba(255, 255, 255, 0.8);
		font-size: 18px;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	.timeline-marker {
		width: 12px;
		height: 12px;
		background: #C3D1AB;
		border-radius: 50%;
		position: relative;
	}

	.timeline-marker::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 12px;
		width: 2px;
		height: 28px;
		background: rgba(195, 209, 171, 0.2);
		transform: translateX(-50%);
	}

	.timeline-item:last-child .timeline-marker::before {
		display: none;
	}

	@media screen and (max-width: 768px) {
		.selection-grid {
			grid-template-columns: 1fr;
		}

		.selection-title {
			font-size: 20px;
		}

		.workflow-title {
			font-size: 24px;
		}

		.timeline-item {
			font-size: 16px;
		}
	}

	.roadmap-intro {
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		font-size: 20px;
		max-width: 800px;
		margin: 0 auto 60px;
		line-height: 1.6;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 300;
	}

	.roadmap-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
		gap: 40px;
		margin-bottom: 80px;
	}

	.roadmap-card {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(195, 209, 171, 0.1);
		border-radius: 20px;
		padding: 40px;
		transition: all 0.3s ease;
		position: relative;
	}

	.roadmap-card:hover {
		transform: translateY(-5px);
		background: rgba(255, 255, 255, 0.05);
	}

	.roadmap-phase {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 24px;
		color: #C3D1AB;
		font-weight: 300;
	}

	.roadmap-timeline {
		display: inline-block;
		padding: 4px 12px;
		background: rgba(195, 209, 171, 0.1);
		border-radius: 12px;
		color: #C3D1AB;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.roadmap-title {
		color: #C3D1AB;
		font-size: 24px;
		margin-bottom: 20px;
		font-weight: 300;
		padding-right: 120px;
	}

	.roadmap-goal {
		color: rgba(255, 255, 255, 0.9);
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 30px;
		font-style: italic;
		padding: 15px;
		background: rgba(195, 209, 171, 0.05);
		border-radius: 10px;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 100;
	}

	.milestone-group {
		margin-bottom: 25px;
	}

	.milestone-title {
		color: #C3D1AB;
		font-size: 18px;
		margin-bottom: 10px;
		font-weight: 100;
	}

	.roadmap-content ul {
		padding-left: 20px;
		color: rgba(255, 255, 255, 0.8);
	}

	.roadmap-content li {
		margin-bottom: 8px;
		line-height: 1.6;
	}

	@media screen and (max-width: 1024px) {
		.roadmap-grid {
			grid-template-columns: 1fr;
		}
	}

	@media screen and (max-width: 768px) {
		.roadmap-card {
			padding: 30px;
		}

		.roadmap-title {
			font-size: 20px;
			padding-right: 80px;
		}

		.roadmap-phase {
			font-size: 20px;
		}

		.milestone-title {
			font-size: 16px;
		}
	}

	.logos-container {
		position: absolute;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
		z-index: 1000;
		background: rgb(96, 64, 239, 0.9);
		padding: 20px 40px;
		border-radius: 5px;
		backdrop-filter: blur(10px);
		border: 1px solid rgba(195, 209, 171, 0.1);
	}

	.intro-section {
		position: relative;
		width: 100%;
		z-index: 1001;
		padding: 80px 0;
		background: white;
	}

	.intro-text {
		color: black;
		font-size: 50px;
		line-height: 1.4;
		font-family: 'Chakra Petch', sans-serif;
		font-weight: 350;
		max-width: 1400px;
		margin: 0 auto;
	}

	@media screen and (max-width: 768px) {
		.intro-text {
			font-size: 28px;
			padding: 0 20px;
		}
	}

	.partner-logo {
		height: 36px;
		width: auto;
		opacity: 1;
		transition: all 0.3s ease;
	}

	.partner-logo:hover {
		opacity: 1;
		transform: scale(1.05);
	}

	@media screen and (max-width: 768px) {
		.logos-container {
			padding: 15px 25px;
			gap: 25px;
			bottom: 120px;
		}

		.partner-logo {
			height: 30px;
		}
	}

	.logo {
		height: 50px
	}

	.x-logo {
		height: 28px;
		width: auto;
		margin-left: 10px;
		vertical-align: middle;
		opacity: 0.8;
		transition: opacity 0.3s ease;
	}

	.x-logo:hover {
		opacity: 1;
	}

	/* Mobile responsive styles for x-logo */
	@media screen and (max-width: 53em) {
		.x-logo {
			height: 24px;
			margin-left: 8px;
		}
	}

	/* Navigation Menu Styles */
	.floating-nav {
		position: fixed;
		left: 40px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2000;
		background: rgb(98, 65, 228, 0.2);
		backdrop-filter: blur(10px);
		padding: 20px;
		border-radius: 15px;
		border: 1px solid rgba(195, 209, 171, 0.1);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.nav-list {
		list-style: none;
		padding: 0;
		margin: 0;
		position: relative;
	}

	/* Add progress line */
	.nav-list::before {
		content: '';
		position: absolute;
		left: -20px;
		top: 0;
		width: 2px;
		height: 100%;
		background: rgba(255, 255, 255, 0.1);
	}

	/* Add progress indicator */
	.nav-progress {
		position: absolute;
		left: -20px;
		top: 0;
		width: 2px;
		background: #acabd1;
		transition: height 0.3s ease, top 0.3s ease;
	}

	.nav-progress::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 50%);
		width: 8px;
		height: 8px;
		background: #acabd1;
		border-radius: 50%;
		box-shadow: 0 0 10px rgba(172, 171, 209, 0.5);
	}

	.nav-item {
		margin: 15px 0;
		position: relative;
	}

	.nav-link {
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
		font-family: 'Chakra Petch', sans-serif;
		font-size: 14px;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		white-space: nowrap;
		font-weight: 300;
		padding: 5px 0;
	}

	.nav-link:hover {
		color: #acabd1;
	}

	.nav-link.active {
		color: #acabd1;
	}

	@media screen and (max-width: 1200px) {
		.floating-nav {
			display: none;
		}
	}

	/* Modify funding banner styles */
	.funding-banner {
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: #6040EF;
		backdrop-filter: blur(10px);
		padding: 8px 15px;
		z-index: 2000;
		border: 1px solid rgba(195, 209, 171, 0.1);
		font-family: 'Chakra Petch', sans-serif;
		border-radius: 8px;
		display: flex;
		align-items: center;
		gap: 12px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		font-weight: 100;
	}

	.funding-banner:hover {
		transform: translateX(-50%) translateY(2px);
	}

	.funding-label {
		color:white;
		font-size: 14px;
		font-weight: 300;
	}

	.funding-code {
		background: rgba(59, 0, 223, 0.1);
		padding: 4px 8px;
		border-radius: 4px;
		color: white;
		font-family: monospace;
		font-size: 14px;
		border: 1px solid rgba(195, 209, 171, 0.2);
		font-weight: 100;
	}

	.copy-button {
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		position: relative;
	}

	.copy-button:hover {
		transform: scale(1.1);
	}

	.copy-button svg {
		width: 16px;
		height: 16px;
		fill: #C3D1AB;
		transition: all 0.3s ease;
	}

	@keyframes copyAnimation {
		0% {
			transform: scale(1);
		}
		30% {
			transform: scale(1.4);
		}
		60% {
			transform: scale(0.8);
		}
		100% {
			transform: scale(1);
		}
	}

	.copy-button.copied svg {
		fill: #8BC34A;
		animation: copyAnimation 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.copy-feedback {
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%) translateY(10px);
		background: rgba(139, 195, 74, 0.9);
		color: white;
		padding: 6px 12px;
		border-radius: 6px;
		font-size: 12px;
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		white-space: nowrap;
		backdrop-filter: blur(4px);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.copy-button.copied .copy-feedback {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	@media screen and (max-height: 800px) {
		.title {
			font-size: min(100px, 10vw);
			margin-top: 6%;
			font-weight: 700;
		}
		
		.hero-tagline {
			margin-top: 140px;
			font-size: 28px;
		}
	}

	@media screen and (max-width: 768px) {
		.title {
			font-size: min(80px, 10vw);
			margin-top: 4%;
			font-weight: 700;
		}
		
		.hero-tagline {
			margin-top: 120px;
			font-size: 24px;
		}
		
		.video-preview {
			max-height: 60vh;
		}
		
		.niche-image[data-niche="neurodegenerative"] {
			transform: translate(10px, -10px) scale(0.98);
		}

		.niche-image[data-niche="ocean"] {
			transform: translate(20px, -20px) scale(0.96);
		}
	}

	/* New Roadmap Styles */
	.roadmap-container {
		display: flex;
		gap: 60px;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.roadmap-info {
		flex: 0 0 35%;
		position: sticky;
		top: 100px;
		height: fit-content;
	}

	.roadmap-intro {
		margin-top: 30px;
		color: #E9ECEF; /* Increased contrast from #495057 */
		font-size: 18px;
		line-height: 1.6;
	}

	.roadmap-intro p {
		margin-bottom: 20px;
	}

	.roadmap-timeline {
		flex: 1;
		position: relative;
		padding: 40px 0;
	}

	.timeline-progress {
		position: absolute;
		left: 29px;
		top: 0;
		width: 2px;
		height: 100%;
		background: linear-gradient(180deg, #6040EF 0%, rgba(96, 64, 239, 0.2) 100%);
	}

	.timeline-items {
		position: relative;
		z-index: 1;
	}

	.timeline-item {
		position: relative;
		padding-left: 60px;
		margin-bottom: 60px;
		opacity: 0.8;
		transform: translateX(20px);
		transition: all 0.3s ease;
	}

	.timeline-item:hover {
		opacity: 1;
		transform: translateX(0);
	}

	.timeline-marker {
		position: absolute;
		left: 20px;
		top: 30px;
		width: 20px;
		height: 20px;
		background: #6040EF;
		border-radius: 50%;
		box-shadow: 0 0 0 6px rgba(96, 64, 239, 0.1);
		transition: all 0.3s ease;
	}

	.timeline-item:hover .timeline-marker {
		transform: scale(1.2);
		box-shadow: 0 0 0 8px rgba(96, 64, 239, 0.2);
	}

	.timeline-date {
		display: inline-block;
		padding: 8px 16px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 20px;
		color: #A89CF4; /* Increased contrast from #6040EF */
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 16px;
	}

	.timeline-content {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(96, 64, 239, 0.1);
		border-radius: 16px;
		padding: 24px;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
	}

	.timeline-content:hover {
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(96, 64, 239, 0.2);
		transform: translateY(-2px);
		box-shadow: 0 4px 20px rgba(96, 64, 239, 0.1);
	}

	.timeline-content h3 {
		color: #FFFFFF; /* Increased contrast from #E9ECEF */
		font-size: 24px;
		margin-bottom: 16px;
		font-weight: 600;
	}

	.timeline-content ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.timeline-content li {
		color: #E9ECEF; /* Increased contrast from #ADB5BD */
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 12px;
		padding-left: 24px;
		position: relative;
	}

	.timeline-content li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		width: 8px;
		height: 8px;
		background: #6040EF;
		border-radius: 50%;
		opacity: 0.6;
	}

	@media screen and (max-width: 1024px) {
		.roadmap-container {
			flex-direction: column;
			gap: 40px;
		}

		.roadmap-info {
			position: relative;
			top: 0;
			flex: none;
		}
	}

	@media screen and (max-width: 768px) {
		.timeline-item {
			padding-left: 40px;
		}

		.timeline-marker {
			left: 10px;
		}

		.timeline-progress {
			left: 19px;
		}

		.timeline-content h3 {
			font-size: 20px;
		}

		.timeline-content li {
			font-size: 14px;
		}
	}

	/* Team section styles */
	.team-section {
		position: relative;
		width: 100%;
		z-index: 1001;
		padding: 120px 0;
		border-top: 1px solid rgba(195, 209, 171, 0.1);
		backdrop-filter: blur(10px);
		background: white;
	}

	.team-section .section-title {
		color: #000000;
		text-shadow: none;
	}

	.team-description {
		font-family: 'Chakra Petch', sans-serif;
		font-size: 48px;
		color: #000000;
		text-align: center;
		margin-bottom: 60px;
		font-weight: 100;
		text-align: center;
	}

	.team-logos {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
		padding: 30px;
		background: rgba(96, 64, 239, 0.05);
		border-radius: 20px;
		backdrop-filter: blur(10px);
		border: 1px solid rgba(96, 64, 239, 0.1);
		max-width: 800px;
		margin: 0 auto;
	}

	.team-logos .partner-logo {
		height: 40px;
		width: auto;
		opacity: 0.8;
		transition: all 0.3s ease;
	}

	.team-logos .partner-logo:hover {
		opacity: 1;
		transform: scale(1.1);
	}

	@media screen and (max-width: 768px) {
		.team-logos {
			flex-wrap: wrap;
			gap: 30px;
			padding: 20px;
			margin: 0 20px;
		}

		.team-logos .partner-logo {
			height: 30px;
		}
	}

	/* Platform Preview Styles */
	.platform-preview {
		background: #1A1B1E;
		border-radius: 12px;
		padding: 20px;
		margin-top: 24px;
		box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15),
					0 2px 8px rgba(96, 64, 239, 0.1),
					0 0 2px rgba(96, 64, 239, 0.2),
					0 20px 40px -12px rgba(0, 0, 0, 0.35);
		transition: all 0.3s ease;
		position: relative;
		max-width: 100%;
		overflow: hidden;
		transform-origin: center;
		scale: 0.85;
	}

	.platform-preview:hover {
		box-shadow: 
			0 12px 48px rgba(31, 38, 135, 0.2),
			0 4px 16px rgba(96, 64, 239, 0.15),
			0 0 4px rgba(96, 64, 239, 0.3),
			0 24px 48px -12px rgba(0, 0, 0, 0.4);
		transform: translateY(-2px);
	}

	.platform-header {
		background: #212226;
		padding: 16px 24px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.platform-dots {
		display: flex;
		gap: 6px;
		margin-right: 15px;
	}

	.platform-dots span {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #DEE2E6;
	}

	.platform-dots span:nth-child(1) { background: #FF6B6B; }
	.platform-dots span:nth-child(2) { background: #FCC419; }
	.platform-dots span:nth-child(3) { background: #51CF66; }

	.platform-title {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
		flex: 1;
	}

	.platform-actions {
		display: flex;
		gap: 12px;
	}

	.action-btn {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		color: #ADB5BD;
		font-size: 13px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.action-btn:hover {
		background: rgba(255, 255, 255, 0.1);
		transform: translateY(-1px);
	}

	.action-btn.active {
		background: rgba(96, 64, 239, 0.2);
		border-color: rgba(96, 64, 239, 0.4);
		color: #6040EF;
	}

	.platform-content {
		padding: 24px;
		max-height: 600px;
		overflow-y: auto;
		background: #1A1B1E;
	}

	.split-interface {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 24px;
		height: 100%;
	}

	.analysis-panel {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.data-visualization {
		background: #212226;
		border-radius: 12px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.viz-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.viz-header h4 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.confidence-indicator {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #51CF66;
		font-size: 14px;
	}

	.pulse {
		width: 8px;
		height: 8px;
		background: #51CF66;
		border-radius: 50%;
		position: relative;
	}

	.pulse::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(81, 207, 102, 0.3);
		border-radius: 50%;
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			transform: scale(3);
			opacity: 0;
		}
	}

	.interactive-graph {
		position: relative;
		width: 100%;
		height: 200px;
		background: #17181B;
		border-radius: 8px;
		overflow: hidden;
	}

	.graph-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.data-cluster {
		position: absolute;
		display: flex;
		gap: 4px;
		padding: 8px;
		border-radius: 12px;
		background: rgba(96, 64, 239, 0.1);
		transition: all 0.3s ease;
	}

	.data-cluster:hover {
		transform: scale(1.05);
		background: rgba(96, 64, 239, 0.2);
	}

	.cluster-1 {
		top: 20%;
		left: 20%;
	}

	.cluster-2 {
		top: 50%;
		left: 60%;
	}

	.cluster-3 {
		top: 70%;
		left: 30%;
	}

	.cluster-point {
		width: 6px;
		height: 6px;
		background: #6040EF;
		border-radius: 50%;
		position: relative;
	}

	.cluster-point::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(96, 64, 239, 0.3);
		border-radius: 50%;
		animation: pointPulse 1.5s infinite;
		animation-delay: calc(var(--i, 0) * 0.5s);
	}

	@keyframes pointPulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			transform: scale(2);
			opacity: 0;
		}
	}

	.graph-grid {
		position: absolute;
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-rows: repeat(3, 1fr);
	}

	.grid-line {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
	}

	.metrics-panel {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	.metric-card {
		background: #212226;
		border-radius: 12px;
		padding: 16px;
		display: flex;
		align-items: center;
		gap: 12px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.metric-icon {
		font-size: 20px;
		opacity: 0.8;
	}

	.metric-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.metric-value {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
	}

	.metric-label {
		color: #868E96;
		font-size: 12px;
	}

	.metric-trend {
		font-size: 12px;
		padding: 4px 8px;
		border-radius: 6px;
	}

	.metric-trend.positive {
		background: rgba(81, 207, 102, 0.1);
		color: #51CF66;
	}

	.proposal-panel {
		background: #212226;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		overflow: hidden;
	}

	.proposal-header {
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.proposal-header h4 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.proposal-status {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #51CF66;
		font-size: 14px;
	}

	.status-dot {
		width: 8px;
		height: 8px;
		background: #51CF66;
		border-radius: 50%;
		position: relative;
	}

	.status-dot::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(81, 207, 102, 0.3);
		border-radius: 50%;
		animation: statusPulse 2s infinite;
	}

	@keyframes statusPulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			transform: scale(3);
			opacity: 0;
		}
	}

	.proposal-content {
		padding: 20px;
	}

	.proposal-section {
		margin-bottom: 24px;
	}

	.proposal-section h5 {
		color: #ADB5BD;
		font-size: 14px;
		font-weight: 500;
		margin: 0 0 12px 0;
	}

	.proposal-section p {
		color: #E9ECEF;
		font-size: 14px;
		line-height: 1.6;
		margin: 0;
	}

	.design-visualization {
		background: #17181B;
		border-radius: 8px;
		padding: 20px;
	}

	.group {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
	}

	.group-icon {
		font-size: 20px;
	}

	.group-details {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.group-name {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
	}

	.group-count {
		color: #868E96;
		font-size: 12px;
	}

	.timeline {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24px;
		position: relative;
		padding: 0 12px;
	}

	.timeline::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 2px;
		background: rgba(96, 64, 239, 0.2);
		transform: translateY(-50%);
	}

	.timeline-point {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		position: relative;
		z-index: 1;
	}

	.timeline-point .point {
		width: 12px;
		height: 12px;
		background: #6040EF;
		border-radius: 50%;
		border: 2px solid #17181B;
	}

	.timeline-point .label {
		color: #868E96;
		font-size: 12px;
	}

	.proposal-actions {
		display: flex;
		gap: 12px;
		margin-top: 24px;
	}

	.action-primary,
	.action-secondary {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px;
		border-radius: 8px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.action-primary {
		background: #6040EF;
		color: white;
		border: none;
	}

	.action-primary:hover {
		background: #4E33C0;
		transform: translateY(-1px);
	}

	.action-secondary {
		background: rgba(255, 255, 255, 0.05);
		color: #ADB5BD;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.action-secondary:hover {
		background: rgba(255, 255, 255, 0.1);
		transform: translateY(-1px);
	}

	@media screen and (max-width: 1200px) {
		.split-interface {
			grid-template-columns: 1fr;
		}

		.metrics-panel {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 768px) {
		.platform-actions {
			display: none;
		}

		.metrics-panel {
			grid-template-columns: 1fr;
		}

		.proposal-actions {
			flex-direction: column;
		}
	}

	/* Token Platform Styles */
	.token-interface {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.token-launch-panel {
		background: #212226;
		border-radius: 12px;
		padding: 24px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.token-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24px;
	}

	.token-info {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.token-icon {
		width: 48px;
		height: 48px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
	}

	.token-details h4 {
		color: #E9ECEF;
		font-size: 18px;
		font-weight: 500;
		margin: 0 0 4px 0;
	}

	.token-subtitle {
		color: #868E96;
		font-size: 14px;
	}

	.token-status {
		text-align: right;
	}

	.status-indicator {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 6px 12px;
		background: rgba(81, 207, 102, 0.1);
		border-radius: 20px;
		color: #51CF66;
		font-size: 14px;
		margin-bottom: 12px;
	}

	.funding-progress {
		width: 100%;
		max-width: 300px;
	}

	.progress-bar {
		height: 6px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 3px;
		overflow: hidden;
		margin-bottom: 8px;
	}

	.progress-fill {
		height: 100%;
		background: #6040EF;
		border-radius: 3px;
		transition: width 0.3s ease;
	}

	.progress-stats {
		display: flex;
		justify-content: space-between;
		color: #ADB5BD;
		font-size: 12px;
	}

	.token-metrics {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.metric-box {
		background: #17181B;
		border-radius: 12px;
		padding: 16px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.metric-box .metric-value {
		color: #E9ECEF;
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.metric-box .metric-label {
		color: #868E96;
		font-size: 14px;
		margin-bottom: 12px;
	}

	.metric-chart {
		display: flex;
		align-items: flex-end;
		gap: 4px;
		height: 40px;
	}

	.chart-bar {
		flex: 1;
		background: rgba(96, 64, 239, 0.2);
		border-radius: 2px;
		transition: all 0.3s ease;
	}

	.chart-bar.active {
		background: #6040EF;
	}

	.metric-chart.supply {
		height: 8px;
		border-radius: 4px;
		overflow: hidden;
	}

	.supply-segment {
		height: 100%;
		transition: width 0.3s ease;
	}

	.supply-segment.research {
		background: #6040EF;
	}

	.supply-segment.community {
		background: #51CF66;
	}

	.supply-segment.reserve {
		background: #FCC419;
	}

	.engagement-panel {
		background: #212226;
		border-radius: 12px;
		padding: 24px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.challenges-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	.challenges-header h4 {
		color: #E9ECEF;
		font-size: 18px;
		font-weight: 500;
		margin: 0;
	}

	.challenge-filters {
		display: flex;
		gap: 8px;
	}

	.filter-btn {
		padding: 6px 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		color: #ADB5BD;
		font-size: 13px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.filter-btn:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.filter-btn.active {
		background: rgba(96, 64, 239, 0.2);
		border-color: rgba(96, 64, 239, 0.4);
		color: #6040EF;
	}

	.challenges-grid {
		display: grid;
		gap: 16px;
	}

	.challenge-card {
		background: #17181B;
		border-radius: 12px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		transition: all 0.3s ease;
	}

	.challenge-card:hover {
		transform: translateY(-2px);
		border-color: rgba(96, 64, 239, 0.2);
	}

	.challenge-card.active {
		background: rgba(96, 64, 239, 0.05);
		border-color: rgba(96, 64, 239, 0.2);
	}

	.challenge-type {
		display: inline-block;
		padding: 4px 8px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 4px;
		color: #6040EF;
		font-size: 12px;
		margin-bottom: 12px;
	}

	.challenge-content h5 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0 0 8px 0;
	}

	.challenge-content p {
		color: #868E96;
		font-size: 14px;
		line-height: 1.5;
		margin: 0 0 16px 0;
	}

	.challenge-reward {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
	}

	.reward-amount {
		color: #51CF66;
		font-size: 16px;
		font-weight: 500;
	}

	.reward-label {
		color: #868E96;
		font-size: 14px;
	}

	.participation-stats {
		display: flex;
		gap: 24px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
	}

	.stat {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.stat-value {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
	}

	.stat-label {
		color: #868E96;
		font-size: 12px;
	}

	@media screen and (max-width: 1200px) {
		.token-metrics {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 768px) {
		.token-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
		}

		.token-status {
			text-align: left;
			width: 100%;
		}

		.funding-progress {
			max-width: 100%;
		}

		.token-metrics {
			grid-template-columns: 1fr;
		}

		.challenge-filters {
			display: none;
		}
	}

	/* Experiment Interface Styles */
	.experiment-interface {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 24px;
		height: 100%;
	}

	.data-stream-panel {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.stream-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.stream-header h4 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.stream-status {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #51CF66;
		font-size: 14px;
	}

	.stream-visualization {
		background: #212226;
		border-radius: 12px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.realtime-chart {
		height: 200px;
		position: relative;
	}

	.chart-legend {
		display: flex;
		gap: 16px;
		margin-bottom: 12px;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #ADB5BD;
		font-size: 12px;
	}

	.legend-color {
		width: 12px;
		height: 12px;
		border-radius: 2px;
	}

	.chart-area {
		position: relative;
		height: 150px;
		background: #17181B;
		border-radius: 8px;
		overflow: hidden;
	}

	.chart-line {
		position: absolute;
		width: 100%;
		height: 2px;
		animation: streamLine 3s infinite linear;
	}

	.chart-line.control {
		background: linear-gradient(90deg, transparent, #6040EF, transparent);
		top: 40%;
	}

	.chart-line.treatment {
		background: linear-gradient(90deg, transparent, #51CF66, transparent);
		top: 60%;
	}

	@keyframes streamLine {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}

	.stream-metrics {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin-top: 20px;
	}

	.metric {
		display: flex;
		flex-direction: column;
		gap: 4px;
		background: #17181B;
		padding: 12px;
		border-radius: 8px;
		text-align: center;
	}

	.metric-value {
		color: #E9ECEF;
		font-size: 18px;
		font-weight: 500;
	}

	.metric-label {
		color: #868E96;
		font-size: 12px;
	}

	.ai-insights {
		background: #212226;
		border-radius: 12px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.insight-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.insight-header h5 {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
		margin: 0;
	}

	.confidence {
		color: #51CF66;
		font-size: 14px;
	}

	.insight-text {
		color: #ADB5BD;
		font-size: 14px;
		line-height: 1.5;
		margin: 0;
	}

	.review-panel {
		background: #212226;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		overflow: hidden;
	}

	.review-header {
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.review-header h4 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.review-tabs {
		display: flex;
		gap: 8px;
	}

	.tab-btn {
		padding: 6px 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		color: #ADB5BD;
		font-size: 13px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tab-btn:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.tab-btn.active {
		background: rgba(96, 64, 239, 0.2);
		border-color: rgba(96, 64, 239, 0.4);
		color: #6040EF;
	}

	.review-content {
		padding: 20px;
	}

	.review-item {
		background: #17181B;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
	}

	.reviewer-info {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}

	.reviewer-avatar {
		width: 36px;
		height: 36px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #6040EF;
		font-size: 14px;
		font-weight: 500;
	}

	.reviewer-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.reviewer-name {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
	}

	.reviewer-creds {
		color: #868E96;
		font-size: 12px;
	}

	.review-score {
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 500;
	}

	.review-score.positive {
		background: rgba(81, 207, 102, 0.1);
		color: #51CF66;
	}

	.review-text {
		color: #ADB5BD;
		font-size: 14px;
		line-height: 1.5;
		margin: 0 0 16px 0;
	}

	.review-actions {
		display: flex;
		gap: 8px;
	}

	.governance-summary {
		background: #17181B;
		border-radius: 12px;
		padding: 20px;
	}

	.vote-status {
		display: flex;
		gap: 24px;
		margin-bottom: 20px;
	}

	.vote-progress {
		text-align: center;
	}

	.progress-ring {
		position: relative;
		width: 80px;
		height: 80px;
		margin-bottom: 8px;
	}

	.progress-ring svg {
		transform: rotate(-90deg);
	}

	.vote-percentage {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
	}

	.vote-label {
		color: #868E96;
		font-size: 12px;
	}

	.vote-metrics {
		flex: 1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.vote-metric {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.next-milestone {
		border-top: 1px solid rgba(255, 255, 255, 0.05);
		padding-top: 16px;
	}

	.next-milestone h5 {
		color: #ADB5BD;
		font-size: 14px;
		font-weight: 500;
		margin: 0 0 12px 0;
	}

	.milestone-timer {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.time-value {
		color: #6040EF;
		font-size: 24px;
		font-weight: 500;
	}

	.time-label {
		color: #868E96;
		font-size: 12px;
	}

	@media screen and (max-width: 1200px) {
		.experiment-interface {
			grid-template-columns: 1fr;
		}

		.stream-metrics {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 768px) {
		.stream-metrics {
			grid-template-columns: 1fr;
		}

		.vote-status {
			flex-direction: column;
			align-items: center;
		}

		.vote-metrics {
			width: 100%;
		}
	}

	/* IP Management Interface Styles */
	.ip-interface {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 24px;
		height: 100%;
	}

	.ip-portfolio-panel {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.portfolio-header {
		background: #212226;
		border-radius: 12px;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.portfolio-info {
		display: flex;
		gap: 16px;
	}

	.portfolio-icon {
		width: 48px;
		height: 48px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
	}

	.portfolio-details h4 {
		color: #E9ECEF;
		font-size: 18px;
		font-weight: 500;
		margin: 0 0 12px 0;
	}

	.portfolio-stats {
		display: flex;
		gap: 16px;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.stat-value {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
	}

	.stat-label {
		color: #868E96;
		font-size: 12px;
	}

	.portfolio-value {
		text-align: right;
	}

	.value-amount {
		color: #E9ECEF;
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.value-change {
		font-size: 14px;
	}

	.value-change.positive {
		color: #51CF66;
	}

	.ip-assets {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.asset-card {
		background: #212226;
		border-radius: 12px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		transition: all 0.3s ease;
	}

	.asset-card:hover {
		transform: translateY(-2px);
		border-color: rgba(96, 64, 239, 0.2);
	}

	.asset-card.active {
		background: rgba(96, 64, 239, 0.05);
		border-color: rgba(96, 64, 239, 0.2);
	}

	.asset-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.asset-type {
		color: #6040EF;
		font-size: 12px;
		padding: 4px 8px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 4px;
	}

	.asset-status {
		color: #51CF66;
		font-size: 12px;
	}

	.asset-card h5 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0 0 8px 0;
	}

	.asset-card p {
		color: #868E96;
		font-size: 14px;
		line-height: 1.5;
		margin: 0 0 16px 0;
	}

	.asset-metrics {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.governance-panel {
		background: #212226;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		overflow: hidden;
	}

	.governance-header {
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.governance-header h4 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.active-proposals {
		color: #6040EF;
		font-size: 14px;
		padding: 4px 12px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 12px;
	}

	.proposal-list {
		padding: 20px;
	}

	.proposal-item {
		background: #17181B;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.proposal-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.status-indicator {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #51CF66;
		font-size: 14px;
	}

	.time-remaining {
		color: #868E96;
		font-size: 14px;
	}

	.proposal-terms {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin: 16px 0;
		background: rgba(255, 255, 255, 0.02);
		padding: 12px;
		border-radius: 8px;
	}

	.term {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.term-label {
		color: #868E96;
		font-size: 12px;
	}

	.term-value {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
	}

	.voting-progress {
		margin: 16px 0;
	}

	.progress-stats {
		display: flex;
		justify-content: space-between;
		color: #868E96;
		font-size: 14px;
		margin-bottom: 8px;
	}

	.progress-bar {
		height: 6px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 3px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: #6040EF;
		border-radius: 3px;
		transition: width 0.3s ease;
	}

	.proposal-actions {
		display: flex;
		gap: 12px;
		margin-top: 16px;
	}

	.action-btn.approve {
		background: rgba(81, 207, 102, 0.1);
		color: #51CF66;
		border-color: rgba(81, 207, 102, 0.2);
	}

	.action-btn.reject {
		background: rgba(255, 107, 107, 0.1);
		color: #FF6B6B;
		border-color: rgba(255, 107, 107, 0.2);
	}

	.reinvestment-summary {
		background: #17181B;
		border-radius: 12px;
		padding: 20px;
	}

	.summary-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.summary-header h5 {
		color: #E9ECEF;
		font-size: 16px;
		font-weight: 500;
		margin: 0;
	}

	.pool-amount {
		color: #51CF66;
		font-size: 18px;
		font-weight: 500;
	}

	.allocation-chart {
		background: rgba(255, 255, 255, 0.02);
		border-radius: 8px;
		padding: 12px;
	}

	.allocation-bar {
		height: 24px;
		display: flex;
		border-radius: 4px;
		overflow: hidden;
	}

	.allocation {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 12px;
		color: #E9ECEF;
		transition: all 0.3s ease;
	}

	.allocation:hover {
		filter: brightness(1.1);
	}

	.allocation.research {
		background: #6040EF;
	}

	.allocation.development {
		background: #51CF66;
	}

	.allocation.reserve {
		background: #FCC419;
	}

	.allocation-label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.allocation-value {
		font-weight: 500;
	}

	@media screen and (max-width: 1200px) {
		.ip-interface {
			grid-template-columns: 1fr;
		}

		.portfolio-stats {
			flex-direction: column;
		}

		.proposal-terms {
			grid-template-columns: 1fr;
		}
	}

	@media screen and (max-width: 768px) {
		.portfolio-header {
			flex-direction: column;
			gap: 16px;
		}

		.portfolio-value {
			text-align: left;
		}

		.asset-metrics {
			grid-template-columns: 1fr;
		}

		.proposal-actions {
			flex-direction: column;
		}
	}

	/* Modal Styles */
	.platform-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	.platform-modal.active {
		opacity: 1;
		visibility: visible;
	}

	.modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(8px);
	}

	.modal-content {
		position: relative;
		width: 95%;
		max-width: 1400px;
		max-height: 90vh;
		overflow: auto;
		z-index: 1;
	}

	.modal-content .platform-preview {
		scale: 1;
		margin: 0;
		max-height: 90vh;
		overflow: auto;
	}

	.modal-close {
		position: absolute;
		top: 20px;
		right: 20px;
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 2;
		color: #fff;
		transition: all 0.2s ease;
	}

	.modal-close:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: rotate(90deg);
	}

	.preview-expand {
		position: absolute;
		top: 20px;
		right: 20px;
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: 8px;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #fff;
		opacity: 0;
		transition: all 0.2s ease;
	}

	.platform-preview:hover .preview-expand {
		opacity: 1;
	}

	.preview-expand:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: scale(1.1);
	}

	/* Custom Scrollbar for Modal */
	.modal-content::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	.modal-content::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
	}

	.modal-content::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 4px;
	}

	.modal-content::-webkit-scrollbar-thumb:hover {
		background: rgba(255, 255, 255, 0.3);
	}

	@media screen and (max-width: 768px) {
		.platform-preview {
			scale: 0.95;
		}
		
		.modal-content {
			width: 100%;
			height: 100%;
			max-height: 100vh;
		}
		
		.modal-content .platform-preview {
			border-radius: 0;
		}
		
		.modal-close {
			top: 10px;
			right: 10px;
		}
	}

	.copilot-interface {
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: 24px;
	}

	.chat-analysis-panel {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.chat-container {
		background: #212226;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		display: flex;
		flex-direction: column;
		height: 600px;
	}

	.side-metrics-panel {
		display: flex;
		flex-direction: column;
		gap: 12px;
		position: sticky;
		top: 20px;
	}

	.side-metrics-panel .metric-card {
		background: #212226;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.05);
		padding: 16px;
		display: flex;
		align-items: center;
		gap: 12px;
		transition: all 0.2s ease;
	}

	.side-metrics-panel .metric-card:hover {
		transform: translateY(-2px);
		border-color: rgba(255, 255, 255, 0.1);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	}

	.side-metrics-panel .metric-icon {
		font-size: 24px;
		width: 40px;
		height: 40px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.side-metrics-panel .metric-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.side-metrics-panel .metric-value {
		color: #E9ECEF;
		font-size: 20px;
		font-weight: 600;
	}

	.side-metrics-panel .metric-label {
		color: #868E96;
		font-size: 14px;
	}

	.side-metrics-panel .metric-trend {
		padding: 4px 8px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 500;
	}

	.side-metrics-panel .metric-trend.positive {
		background: rgba(81, 207, 102, 0.1);
		color: #51CF66;
	}

	@media screen and (max-width: 1200px) {
		.copilot-interface {
			grid-template-columns: 1fr 240px;
		}
	}

	@media screen and (max-width: 768px) {
		.copilot-interface {
			grid-template-columns: 1fr;
		}
		
		.side-metrics-panel {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			position: static;
		}
	}

	.chat-messages {
		flex: 1;
		overflow-y: auto;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.message {
		display: flex;
		gap: 16px;
		opacity: 0;
		transform: translateY(20px);
		animation: messageAppear 0.3s forwards;
	}

	@keyframes messageAppear {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.message-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 500;
		flex-shrink: 0;
	}

	.researcher .message-avatar {
		background: rgba(96, 64, 239, 0.1);
		color: #6040EF;
	}

	.ai .message-avatar {
		background: rgba(81, 207, 102, 0.1);
		color: #51CF66;
	}

	.message-content {
		flex: 1;
		background: rgba(255, 255, 255, 0.03);
		border-radius: 12px;
		padding: 16px;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.message-name {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
	}

	.message-time {
		color: #868E96;
		font-size: 12px;
	}

	.message-content p {
		color: #ADB5BD;
		font-size: 14px;
		line-height: 1.6;
		margin: 0 0 16px 0;
	}

	.message-content p:last-child {
		margin-bottom: 0;
	}

	.chat-input {
		padding: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
		display: flex;
		gap: 12px;
	}

	.chat-input input {
		flex: 1;
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		padding: 12px 16px;
		color: #E9ECEF;
		font-size: 14px;
	}

	.chat-input input::placeholder {
		color: #868E96;
	}

	.send-button {
		width: 40px;
		height: 40px;
		background: #6040EF;
		border: none;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.send-button:hover {
		background: #4E33C0;
		transform: translateY(-1px);
	}

	.send-button svg {
		color: white;
	}

	@media screen and (max-width: 768px) {
		.chat-container {
			height: 500px;
		}

		.message {
			gap: 12px;
		}
		
		.message-avatar {
			width: 32px;
			height: 32px;
			font-size: 12px;
		}

		.message-content {
			padding: 12px;
		}
	}

	.insight-card {
		background: #17181B;
		border-radius: 8px;
		padding: 16px;
		margin: 16px 0;
	}

	.suggestion-card {
		background: #17181B;
		border-radius: 8px;
		padding: 16px;
		margin: 16px 0;
	}

	.suggestion-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.suggestion-header h5 {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
		margin: 0;
	}

	.novelty-score {
		color: #51CF66;
		font-size: 12px;
		padding: 4px 8px;
		background: rgba(81, 207, 102, 0.1);
		border-radius: 12px;
	}

	.suggestion-steps {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.step {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.step-number {
		width: 24px;
		height: 24px;
		background: rgba(96, 64, 239, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #6040EF;
		font-size: 12px;
		font-weight: 500;
	}

	.step-text {
		color: #ADB5BD;
		font-size: 14px;
	}

	@media screen and (max-width: 768px) {
		.suggestion-steps {
			gap: 8px;
		}
	}

	.token-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.token-card {
		background: rgba(20, 20, 35, 0.95);
		border-radius: 16px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		display: flex;
		flex-direction: column;
		gap: 16px;
		transition: all 0.2s ease;
	}

	.token-card:hover {
		transform: translateY(-2px);
		border-color: rgba(255, 255, 255, 0.2);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	}

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

	.token-type {
		color: #ADB5BD;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.token-price {
		color: #6040EF;
		font-weight: 600;
		font-size: 14px;
	}

	.token-name {
		color: #E9ECEF;
		font-size: 20px;
		font-weight: 600;
		margin-top: 4px;
	}

	.token-stats {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.token-stat {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.stat-label {
		color: #868E96;
		font-size: 14px;
	}

	.stat-value {
		color: #E9ECEF;
		font-size: 14px;
		font-weight: 500;
	}

	.stat-value.positive {
		color: #51CF66;
	}

	.token-creator {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #868E96;
		font-size: 12px;
		margin-top: auto;
		padding-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
	}

	.creator-info {
		color: #ADB5BD;
		font-family: monospace;
	}

	.creation-date {
		margin-left: auto;
	}

	@media screen and (max-width: 1200px) {
		.token-cards {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 768px) {
		.token-cards {
			grid-template-columns: 1fr;
		}
	}
}