#base {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #0a192f 0%, #172a45 50%, #0a192f 100%);
	overflow: hidden;
	font-family: 'Arial', sans-serif;
	color: #fff;
	perspective: 100vmin;
}
#base .cursor {
	position: absolute;
	width: 2vmin;
	height: 2vmin;
	border-radius: 50%;
	background: rgba(64, 158, 255, 0.7);
	transform: translate(-50%, -50%) scale(1);
	pointer-events: none;
	mix-blend-mode: screen;
	z-index: 9999;
	transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;
}
#base .cursor-follower {
	position: absolute;
	width: 4vmin;
	height: 4vmin;
	border-radius: 50%;
	border: 0.15vmin solid rgba(64, 158, 255, 0.5);
	transform: translate(-50%, -50%) scale(1);
	pointer-events: none;
	z-index: 9998;
	transition: all 0.3s ease, transform 0.1s ease;
}
#base .container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80vmin;
	z-index: 10;
	transition: transform 0.5s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#base h1 {
	font-size: 8vmin;
	margin-bottom: 3vmin;
	background: linear-gradient(90deg, #64ffda, #48aff0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.5vmin;
	font-weight: 700;
	text-shadow: 0 0 2vmin rgba(100, 255, 218, 0.3);
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
	text-align: center;
}
#base h1::after {
	content: '';
	position: absolute;
	bottom: -1vmin;
	left: 0;
	width: 100%;
	height: 0.2vmin;
	background: linear-gradient(90deg, #64ffda, #48aff0);
	transform: scaleX(0) translateZ(1vmin);
	transform-origin: left;
	transition: transform 0.5s ease;
}
#base h1:hover {
	transform: translateZ(2vmin);
}
#base h1:hover::after {
	transform: scaleX(1) translateZ(1vmin);
}
#base p {
	font-size: 3vmin;
	color: #ccd6f6;
	line-height: 1.6;
	max-width: 60vmin;
	margin-left: auto;
	margin-right: auto;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
	text-shadow: 0 0 1vmin rgba(204, 214, 246, 0.2);
}
#base .copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 5vmin;
	transform-style: preserve-3d;
	perspective: 100vmin;
}
#base .particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}
#base .particle {
	position: absolute;
	width: 0.3vmin;
	height: 0.3vmin;
	border-radius: 50%;
	background: rgba(100, 255, 218, 0.8);
	transform-style: preserve-3d;
	animation: float-particle 15s infinite linear;
}
#base .floating-shapes {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
#base .shape {
	position: absolute;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}
#base .shape-1 {
	width: 15vmin;
	height: 15vmin;
	top: 20%;
	left: 15%;
	background: rgba(100, 255, 218, 0.1);
	border-radius: 50%;
	border: 0.2vmin solid rgba(100, 255, 218, 0.3);
	animation: float 12s ease-in-out infinite, rotate 20s linear infinite;
}
#base .shape-2 {
	width: 10vmin;
	height: 10vmin;
	top: 65%;
	left: 75%;
	background: rgba(72, 175, 240, 0.1);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	animation: float 15s ease-in-out infinite reverse, rotate 25s linear infinite reverse;
}
#base .shape-3 {
	width: 12vmin;
	height: 12vmin;
	top: 75%;
	left: 20%;
	background: rgba(23, 42, 69, 0.3);
	border-radius: 30%;
	transform: rotate(45deg);
	animation: float 18s ease-in-out infinite, rotate 30s linear infinite;
}
#base .shape-4 {
	width: 8vmin;
	height: 8vmin;
	top: 30%;
	left: 80%;
	background: rgba(100, 255, 218, 0.05);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	animation: float 14s ease-in-out infinite reverse, rotate 22s linear infinite reverse;
}
#base .corner-decoration {
	position: absolute;
	width: 15vmin;
	height: 15vmin;
	z-index: 4;
	opacity: 0.5;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}
#base .corner-decoration.top-left {
	top: 5vmin;
	left: 5vmin;
	border-left: 0.3vmin solid #64ffda;
	border-top: 0.3vmin solid #64ffda;
	transform: translateZ(0);
}
#base .corner-decoration.top-right {
	top: 5vmin;
	right: 5vmin;
	border-right: 0.3vmin solid #64ffda;
	border-top: 0.3vmin solid #64ffda;
	transform: translateZ(0);
}
#base .corner-decoration.bottom-left {
	bottom: 5vmin;
	left: 5vmin;
	border-left: 0.3vmin solid #64ffda;
	border-bottom: 0.3vmin solid #64ffda;
	transform: translateZ(0);
}
#base .corner-decoration.bottom-right {
	bottom: 5vmin;
	right: 5vmin;
	border-right: 0.3vmin solid #64ffda;
	border-bottom: 0.3vmin solid #64ffda;
	transform: translateZ(0);
}
#base .scanline {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.2vmin;
	background: linear-gradient(to right, 
	transparent 0%, 
	rgba(100, 255, 218, 0.3) 30%, 
	rgba(100, 255, 218, 0.6) 50%, 
	rgba(100, 255, 218, 0.3) 70%, 
	transparent 100%);
	z-index: 5;
	animation: scan 8s linear infinite;
	transform: translateZ(1vmin);
}
#base .wireframe-cube {
	position: absolute;
	width: 10vmin;
	height: 10vmin;
	transform-style: preserve-3d;
	animation: rotate-cube 20s infinite linear;
	z-index: 2;
}
#base .wireframe-cube .face {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 0.15vmin solid rgba(100, 255, 218, 0.4);
	opacity: 0.8;
	transform-style: preserve-3d;
}
#base .wireframe-cube .front {
	transform: translateZ(5vmin);
}
#base .wireframe-cube .back {
	transform: translateZ(-5vmin) rotateY(180deg);
}
#base .wireframe-cube .right {
	transform: rotateY(90deg) translateZ(5vmin);
}
#base .wireframe-cube .left {
	transform: rotateY(-90deg) translateZ(5vmin);
}
#base .wireframe-cube .top {
	transform: rotateX(90deg) translateZ(5vmin);
}
#base .wireframe-cube .bottom {
	transform: rotateX(-90deg) translateZ(5vmin);
}
@keyframes float {
	0% {
		transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0);
	}
	50% {
		transform: translateY(-5vmin) rotateX(10deg) rotateY(10deg) rotateZ(5deg);
	}
	100% {
		transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0);
	}
}
@keyframes float-particle {
	0% {
		transform: translateY(0) translateX(0) translateZ(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-100vmin) translateX(10vmin) translateZ(10vmin);
		opacity: 0;
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg) translateZ(0);
	}
	to {
		transform: rotate(360deg) translateZ(0);
	}
}
@keyframes scan {
	from {
		top: -0.2vmin;
	}
	to {
		top: 100%;
	}
}
@keyframes rotate-cube {
	from {
		transform: rotateX(0) rotateY(0) rotateZ(0);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}