:root {
		--primary: #6C63FF;
		--dark: #1A1A2E;
		--light: #F5F5F7;
		--accent: #00D1B2;
		--error: #FF3860;
}

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

body {
		font-family: 'Inter', sans-serif;
		/* background-color: var(--dark); */
		background-image: url(nt-office.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: var(--light);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2rem;
}

.container {
		width: 100%;
		max-width: 500px;
		background: rgba(26, 26, 46, 0.8);
		backdrop-filter: blur(5px);
		border-radius: 16px;
		padding: 2.5rem;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.1);
		position: relative;
		overflow: hidden;
}

.container::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(108, 99, 255, 0.1) 0%, rgba(108, 99, 255, 0) 70%);
		z-index: -1;
		animation: rotate 20s linear infinite;
}

@keyframes rotate {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
}

h1 {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 2rem;
		font-weight: 600;
		margin-bottom: 1rem;
		background: linear-gradient(90deg, var(--primary), var(--accent));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		text-align: center;
}

.subtitle {
		color: rgba(255, 255, 255, 0.7);
		text-align: center;
		margin-bottom: 2rem;
		font-size: 0.95rem;
		line-height: 1.5;
}

.form-group {
		margin-bottom: 1.5rem;
		position: relative;
}

label {
		display: block;
		margin-bottom: 0.5rem;
		font-size: 0.9rem;
		color: rgba(255, 255, 255, 0.8);
}

.input-wrapper {
		position: relative;
}

input {
		width: 100%;
		padding: 1rem;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		color: white;
		font-size: 0.95rem;
		transition: all 0.3s ease;
}

input:focus {
		outline: none;
		border-color: var(--primary);
		box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
		background: rgba(255, 255, 255, 0.08);
}

.input-icon {
		position: absolute;
		right: 1rem;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(255, 255, 255, 0.5);
}

.required::after {
		content: ' *';
		color: var(--error);
}

button {
		width: 100%;
		padding: 1rem;
		background: linear-gradient(135deg, var(--primary), var(--accent));
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease;
		margin-top: 1rem;
		font-family: 'Space Grotesk', sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.5px;
}

button:hover {
		transform: translateY(-2px);
		box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
}

button:active {
		transform: translateY(0);
}

.success-message {
		display: none;
		text-align: center;
		padding: 2rem;
}

.success-message h2 {
		color: var(--accent);
		margin-bottom: 1rem;
}

.success-message p {
		color: rgba(255, 255, 255, 0.7);
}

.error-message {
		color: var(--error);
		font-size: 0.8rem;
		margin-top: 0.5rem;
		display: none;
}

.tech-decoration {
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: rgba(108, 99, 255, 0.1);
		filter: blur(30px);
		z-index: -1;
}

.decoration-1 {
		top: -30px;
		right: -30px;
}

.decoration-2 {
		bottom: -30px;
		left: -30px;
		background: rgba(0, 209, 178, 0.1);
}

/* money orbit */
.money-orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 120px;
	height: 120px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
}
.money-orbit .money-icon {
	position: absolute;
	font-size: 2rem;
	animation: orbit-money 3s linear infinite;
}
.money-orbit .money-icon:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, 0); animation-delay: 0s; }
.money-orbit .money-icon:nth-child(2) { top: 25%; right: 0; transform: translate(0, -50%); animation-delay: 0.6s; }
.money-orbit .money-icon:nth-child(3) { bottom: 0; left: 50%; transform: translate(-50%, 0); animation-delay: 1.2s; }
.money-orbit .money-icon:nth-child(4) { top: 25%; left: 0; transform: translate(0, -50%); animation-delay: 1.8s; }
.money-orbit .money-icon:nth-child(5) { top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 2.4s; opacity: 0.7; }

@keyframes orbit-money {
	0%   { transform: rotate(0deg) translateX(60px) rotate(0deg); }
	100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}