:root {
/* Hero Section Styles with K2M Colors */
.hero-section {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/*font-family: 'Michroma', var(--font-family-base);*/
}

/* Network Canvas */
.network-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* Grid Overlay - K2M colors */
.grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
	background-image: 
		linear-gradient(rgba(233, 30, 99, 0.15) 1px, transparent 1px),
		linear-gradient(90deg, rgba(233, 30, 99, 0.15) 1px, transparent 1px);
	*/
	background-size: 50px 50px;
	z-index: 2;
	opacity: 0.7;
	/*animation: gridPulse 8s ease-in-out infinite;*/
}
/*
@keyframes gridPulse {
	0%, 100% { 
		opacity: 0.7;
		background-size: 50px 50px;
	}
	50% { 
		opacity: 1;
		background-size: 52px 52px;
	}
}
*/

/* Hero Content - K2M styling */
.hero-content {
	position: relative;
	z-index: 10;
	text-align: center;
	color: #212121;
	animation: fadeInUp 2s ease-out;
	will-change: transform;
	background-color: rgb(255 255 255 / 55%);
	padding: 4em;
	border-radius: 20px;
}

.hero-title {
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 700;
	margin-bottom: var(--space-24);
	text-shadow: 0 0 20px rgba(233, 30, 99, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
	line-height: 1.1;
	color: #212121;
}

.title-line {
	display: block;
	animation: textGlow 3s ease-in-out infinite alternate;
}

.title-line:nth-child(2) {
	animation-delay: 1s;
}

.hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 300;
	opacity: 0.8;
	margin-bottom: 0;
	color: #212121;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(0px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes textGlow {
	from {
		text-shadow: 0 0 20px rgba(233, 30, 99, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	to {
		text-shadow: 0 0 30px rgba(233, 30, 99, 0.5), 0 0 40px rgba(233, 30, 99, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
	}
}

/* Node glow animation for hover effect */
@keyframes nodeGlow {
	from {
		box-shadow: 0 0 30px currentColor;
		transform: scale(1.2);
	}
	to {
		box-shadow: 0 0 50px currentColor, 0 0 70px currentColor;
		transform: scale(1.4);
	}
}

/* Animated Nodes Container */
.nodes-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
}

.node {
	position: absolute;
	border-radius: 50%;
	/*transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
	pointer-events: all;
	cursor: pointer;
	will-change: transform;
	transform-origin: center;
}

.node:hover {
	/*transform: scale(1.2) !important;*/
	box-shadow: 0 0 30px currentColor, 0 0 50px currentColor !important;
	z-index: 10 !important;
}

.node--small {
	width: 8px;
	height: 8px;
	background: #e91e63;
	box-shadow: 0 0 15px rgba(233, 30, 99, 0.4);
	/*
	animation: zoomInOut 4s ease-in-out infinite alternate;
	animation: zoomInOut 4s ease-in-out infinite alternate,
			   rotate 12s linear infinite;
	 */
}

.node--small-medium {
	width: 12px;
	height: 12px;
	background: #c2185b;
	box-shadow: 0 0 15px rgba(194, 24, 91, 0.4);
	/*
	animation: zoomInOut 4.5s ease-in-out infinite alternate;
	animation: zoomInOut 4.5s ease-in-out infinite alternate,
			   rotate 11s linear infinite;
	*/
}

.node--medium {
	width: 18px;
	height: 18px;
	background: #8e24aa;
	box-shadow: 0 0 15px rgba(142, 36, 170, 0.4);
	/*
	animation: zoomInOut 5s ease-in-out infinite alternate;
	animation: zoomInOut 5s ease-in-out infinite alternate,
			   rotate 10s linear infinite;
	*/
}

.node--medium-large {
	width: 24px;
	height: 24px;
	background: #e91e63;
	box-shadow: 0 0 15px rgba(233, 30, 99, 0.4);
	/*
	animation: zoomInOut 5.5s ease-in-out infinite alternate;
	animation: zoomInOut 5.5s ease-in-out infinite alternate,
			   rotate 9s linear infinite;
	*/
}

.node--large {
	width: 30px;
	height: 30px;
	background: #212121;
	box-shadow: 0 0 15px rgba(33, 33, 33, 0.4);
	/*
	animation: zoomInOut 6s ease-in-out infinite alternate;
	animation: zoomInOut 6s ease-in-out infinite alternate,
			   rotate 8s linear infinite;
	*/
}

.node--extra-large {
	width: 35px;
	height: 35px;
	background: #c2185b;
	box-shadow: 0 0 15px rgba(194, 24, 91, 0.4);
	/*animation: zoomInOut 6.5s ease-in-out infinite alternate,
	animation: zoomInOut 6.5s ease-in-out infinite alternate;
			   rotate 7s linear infinite;*/
}

.node--primary {
	background: #e91e63;
	box-shadow: 0 0 15px rgba(233, 30, 99, 0.4);
}

.node--primary:hover {
	box-shadow: 0 0 30px #e91e63, 0 0 50px #e91e63 !important;
}

.node--secondary {
	background: #c2185b;
	box-shadow: 0 0 15px rgba(194, 24, 91, 0.4);
}

.node--secondary:hover {
	box-shadow: 0 0 30px #c2185b, 0 0 50px #c2185b !important;
}

.node--accent {
	background: #8e24aa;
	box-shadow: 0 0 15px rgba(142, 36, 170, 0.4);
}

.node--accent:hover {
	box-shadow: 0 0 30px #8e24aa, 0 0 50px #8e24aa !important;
}

.node--dark {
	background: #212121;
	box-shadow: 0 0 15px rgba(33, 33, 33, 0.4);
}

.node--dark:hover {
	box-shadow: 0 0 30px #212121, 0 0 50px #212121 !important;
}

/*
@keyframes zoomInOut {
	0% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1.2);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
*/

/* Floating Elements - K2M colors */
.floating-elements {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
}

.floating-element {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: float 8s ease-in-out infinite;
}

.floating-element--1 {
	top: 20%;
	left: 10%;
	background: rgba(233, 30, 99, 0.6);
	box-shadow: 0 0 8px rgba(233, 30, 99, 0.3);
	animation-delay: 0s;
	animation-duration: 6s;
}

.floating-element--2 {
	top: 60%;
	left: 85%;
	background: rgba(194, 24, 91, 0.6);
	box-shadow: 0 0 8px rgba(194, 24, 91, 0.3);
	animation-delay: 1s;
	animation-duration: 8s;
}

.floating-element--3 {
	top: 30%;
	left: 75%;
	background: rgba(142, 36, 170, 0.6);
	box-shadow: 0 0 8px rgba(142, 36, 170, 0.3);
	animation-delay: 2s;
	animation-duration: 7s;
}

.floating-element--4 {
	top: 80%;
	left: 20%;
	background: rgba(33, 33, 33, 0.6);
	box-shadow: 0 0 8px rgba(33, 33, 33, 0.3);
	animation-delay: 3s;
	animation-duration: 9s;
}

.floating-element--5 {
	top: 15%;
	left: 60%;
	background: rgba(233, 30, 99, 0.6);
	box-shadow: 0 0 8px rgba(233, 30, 99, 0.3);
	animation-delay: 4s;
	animation-duration: 5s;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px) translateX(0px);
		opacity: 0.4;
	}
	25% {
		transform: translateY(-25px) translateX(15px);
		opacity: 0.8;
	}
	50% {
		transform: translateY(-15px) translateX(-10px);
		opacity: 0.6;
	}
	75% {
		transform: translateY(-35px) translateX(20px);
		opacity: 1;
	}
}

/* Particles Container */
.particles-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
}

.particle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	/*animation: particleMove 15s linear infinite;*/
}

@keyframes particleMove {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 0.7;
	}
	90% {
		opacity: 0.7;
	}
	100% {
		transform: translateY(-100vh) translateX(100px);
		opacity: 0;
	}
}

/* Orbs - K2M colors */
.orbs-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	/*animation: orbFloat 12s ease-in-out infinite;*/
	/*will-change: transform;*/
}

.orb--1 {
	width: 120px;
	height: 120px;
	background: radial-gradient(circle, rgba(233, 30, 99, 0.15) 0%, rgba(233, 30, 99, 0.06) 40%, transparent 70%);
	top: 20%;
	left: 10%;
	/*animation-duration: 10s;*/
}

.orb--2 {
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(142, 36, 170, 0.12) 0%, rgba(142, 36, 170, 0.04) 40%, transparent 70%);
	top: 60%;
	right: 15%;
	/*animation-duration: 14s;
	animation-delay: 2s;*/
}

.orb--3 {
	width: 100px;
	height: 100px;
	background: radial-gradient(circle, rgba(194, 24, 91, 0.18) 0%, rgba(194, 24, 91, 0.06) 40%, transparent 70%);
	bottom: 25%;
	left: 70%;
	/*animation-duration: 8s;
	animation-delay: 4s;*/
}

@keyframes orbFloat {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.4;
	}
	33% {
		transform: translate(40px, -40px) scale(1.2);
		opacity: 0.6;
	}
	66% {
		transform: translate(-30px, 30px) scale(0.8);
		opacity: 0.3;
	}
}

/* Enhanced visual effects for K2M */
.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(ellipse at top, rgba(233, 30, 99, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse at bottom right, rgba(142, 36, 170, 0.04) 0%, transparent 60%),
		radial-gradient(ellipse at bottom left, rgba(194, 24, 91, 0.05) 0%, transparent 60%);
	z-index: 1;
	pointer-events: none;
	/*
	animation: ambientGlow 10s ease-in-out infinite alternate;
	*/
}

@keyframes ambientGlow {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 0.8;
	}
}

/* Additional floating background elements */
.hero-section::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*
	background: 
		radial-gradient(2px 2px at 20% 30%, rgba(233, 30, 99, 0.3), transparent),
		radial-gradient(2px 2px at 40% 70%, rgba(142, 36, 170, 0.25), transparent),
		radial-gradient(1px 1px at 90% 40%, rgba(194, 24, 91, 0.3), transparent),
		radial-gradient(1px 1px at 10% 60%, rgba(33, 33, 33, 0.25), transparent),
		radial-gradient(2px 2px at 50% 50%, rgba(233, 30, 99, 0.2), transparent);
	background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 350px 350px;
	animation: sparkle 15s ease-in-out infinite;
	*/
	z-index: 2;
	pointer-events: none;
}

@keyframes sparkle {
	0%, 100% {
		transform: translateY(0px) translateX(0px);
		opacity: 0.2;
	}
	50% {
		transform: translateY(-20px) translateX(10px);
		opacity: 0.6;
	}
}

/* Performance optimizations */
* {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.hero-section * {
	transform-style: preserve-3d;
}

/* Responsive Design */
@media (max-width: 768px) {
	.hero-title {
		font-size: 2.5rem;
	}
	
	.hero-subtitle {
		font-size: 1.1rem;
	}
	
	.node {
		transform: scale(0.8);
	}
	
	.node:hover {
		transform: scale(1.1) !important;
	}
	
	.orb {
		transform: scale(0.7);
	}
	
	.grid-overlay {
		background-size: 30px 30px;
	}
	
	.floating-element {
		width: 4px;
		height: 4px;
	}
	
	.particle {
		width: 3px !important;
		height: 3px !important;
	}
}

@media (max-width: 480px) {
	.hero-title {
		font-size: 2rem;
		margin-bottom: var(--space-16);
	}
	
	.hero-subtitle {
		font-size: 1rem;
	}
	
	.node {
		transform: scale(0.6);
	}
	
	.node:hover {
		transform: scale(0.9) !important;
	}
	
	.orb {
		transform: scale(0.5);
	}
	
	.grid-overlay {
		background-size: 25px 25px;
	}
	
	.floating-element {
		width: 3px;
		height: 3px;
	}
	
	.particle {
		width: 2px !important;
		height: 2px !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.hero-title {
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
		color: #212121;
	}
	
	.hero-subtitle {
		color: #212121;
	}
	
	.node {
		border: 1px solid currentColor;
	}
	
	.grid-overlay {
		opacity: 0.9;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.node {
		animation: none;
	}
	
	.floating-element {
		animation: none;
	}
	
	.orb {
		animation: none;
	}
	
	.particle {
		animation: none;
	}
	
	.grid-overlay {
		animation: none;
	}
	
	.hero-content {
		animation: fadeInUp 0.5s ease-out;
	}
	
	.title-line {
		animation: none;
	}
	
	.hero-subtitle {
		animation: none;
	}
	
	.hero-section::before {
		animation: none;
	}
	
	.hero-section::after {
		animation: none;
	}
}