:root {
	--primary-blue: #60a5fa; /* Soft Sky Blue */
	--dark-blue: #3b5998; /* Softer Navy Blue */
	--light-blue: #e0f2fe; /* Pale Blue */
	--accent-blue: #4f8edc; /* Muted Blue Accent */
	--gradient-start: #60a5fa; /* Gradient Start */
	--gradient-end: #3b5998; /* Gradient End */
}

body {
	background: #0a0a0a;
	background-attachment: fixed;
	overflow-x: hidden;
	position: relative;
}

.particles-container {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.particle {
	position: absolute;
	bottom: -1px;
	border-radius: 50%;
	background: linear-gradient(180deg, #3b82f6 0%,
#60a5fa 100%);
	opacity: 0.35;
	animation: rise 22s linear infinite;
	filter: blur(0.5px);
}
@keyframes rise {
	0% {
		transform: translateY(0);
		opacity: 0.35;
	}
	80% {
		opacity: 0.35;
	}
	100% {
		transform: translateY(-100vh);
		opacity: 0;
	}
}

.hero-gradient {
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	position: relative;
}
.btn-primary:not([disabled]) {
	background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative; overflow: hidden;
}

.btn-primary:not([disabled]):hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px rgba(79, 142, 220, 0.4);
}

.section-dot {
	background: rgba(255, 255, 255, 0.3);
	border: 2px solid rgba(79, 142, 220, 0.5);
}

.section-dot.active {
	background: var(--primary-blue);
	border-color: var(--primary-blue);
	box-shadow: 0 0 20px rgba(79, 142, 220, 0.6);
}

.section-dot:hover {
	background: rgba(79, 142, 220, 0.7);
}

.origin-badge {
	background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
	color: white; font-weight: 500;
}

.footer-section h4::after {
	background: var(--primary-blue);
}

.social-link:hover {
	color: var(--primary-blue);
}

.scroll-to-top {
	background: var(--primary-blue);
}