:root{
	--bg:#071021;
	--panel:#0f1724;
	--neon1:#7df9ff;
	--neon2:#ff66d9;
	--muted:#9aa6b2;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#02030a);color:#e6f0ff}
.site-layer{position:relative;z-index:1}
.site-header, main, .site-footer{position:relative;z-index:2}

/* Dot + net background effect (purple & light-blue) */
body::before{
	content:"";
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
	background-image:
		radial-gradient(circle, rgba(125,249,255,0.10) 1px, transparent 1px),
		radial-gradient(circle, rgba(255,102,217,0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(125,249,255,0.035) 1px, transparent 1px),
		linear-gradient(rgba(255,102,217,0.02), rgba(255,102,217,0.02));
	background-size: 24px 24px, 48px 48px, 160px 160px, 100% 100%;
	background-position: 0 0, 12px 12px, 0 0, 0 0;
	mix-blend-mode: screen;
	opacity:0.95;
	filter:blur(0.2px);
	transform-origin:center;
	animation: bgShift 40s linear infinite;
}

@keyframes bgShift{
	from { background-position: 0 0, 12px 12px, 0 0, 0 0; }
	to   { background-position: -480px -240px, 12px 12px, -960px -480px, 0 0; }
}

/* Fluidic, soft-color blobs behind the dots/net */
body::after{
	content:"";
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
	background-image:
		radial-gradient(closest-side at 10% 20%, rgba(125,249,255,0.14) 0%, rgba(125,249,255,0.06) 25%, transparent 45%),
		radial-gradient(closest-side at 80% 70%, rgba(120,200,255,0.09) 0%, rgba(120,200,255,0.04) 30%, transparent 50%),
		radial-gradient(closest-side at 50% 40%, rgba(110,190,255,0.10) 0%, rgba(110,190,255,0.04) 28%, transparent 55%);
	background-repeat:no-repeat;
	background-size: 44% 44%, 34% 38%, 40% 34%;
	background-position: 10% 20%, 80% 70%, 50% 40%;
	filter: blur(36px) saturate(120%) contrast(100%);
	opacity:0.18;
	mix-blend-mode: screen;
	animation: blobMove 20s ease-in-out infinite;
}

/* Additional moving blob elements (far background, independent motion) */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity;filter:blur(44px) saturate(110%);opacity:0.18}
.blob.b1{width:46vmax;height:46vmax;left:-6vmax;top:-10vmax;background:radial-gradient(circle at 30% 30%, rgba(125,249,255,0.26) 0%, rgba(125,249,255,0.12) 20%, rgba(125,249,255,0.04) 40%, transparent 60%);animation:blobMove1 36s ease-in-out infinite}
.blob.b2{width:38vmax;height:38vmax;right:-8vmax;bottom:-6vmax;background:radial-gradient(circle at 40% 40%, rgba(120,200,255,0.22) 0%, rgba(120,200,255,0.10) 20%, rgba(120,200,255,0.02) 45%, transparent 65%);animation:blobMove2 30s ease-in-out infinite}
.blob.b3{width:34vmax;height:34vmax;left:20%;bottom:-12vmax;background:radial-gradient(circle at 35% 35%, rgba(115,210,255,0.18) 0%, rgba(115,210,255,0.08) 28%, rgba(115,210,255,0.03) 55%, transparent 75%);animation:blobMove3 44s ease-in-out infinite}

@keyframes blobMove1{
	0%{transform:translate3d(0,0,0) scale(1)}
	25%{transform:translate3d(6vw,4vh,0) scale(1.04)}
	50%{transform:translate3d(-4vw,8vh,0) scale(1.02)}
	75%{transform:translate3d(3vw,-6vh,0) scale(1.01)}
	100%{transform:translate3d(0,0,0) scale(1)}
}

@keyframes blobMove2{
	0%{transform:translate3d(0,0,0) scale(1)}
	20%{transform:translate3d(-8vw,6vh,0) scale(1.03)}
	40%{transform:translate3d(6vw,-4vh,0) scale(1.02)}
	60%{transform:translate3d(-3vw,6vh,0) scale(1.01)}
	80%{transform:translate3d(4vw,-8vh,0) scale(1.02)}
	100%{transform:translate3d(0,0,0) scale(1)}
}

@keyframes blobMove3{
	0%{transform:translate3d(0,0,0) scale(1)}
	33%{transform:translate3d(6vw,-6vh,0) scale(1.05)}
	66%{transform:translate3d(-6vw,6vh,0) scale(1.02)}
	100%{transform:translate3d(0,0,0) scale(1)}
}

@keyframes blobMove{
	0%{
		background-position: 10% 20%, 80% 70%, 50% 40%;
		background-size: 40% 40%, 30% 35%, 35% 30%;
		transform: scale(1);
	}
	50%{
		background-position: 20% 30%, 70% 60%, 55% 45%;
		background-size: 48% 44%, 36% 40%, 42% 36%;
		transform: scale(1.02);
	}
	100%{
		background-position: 10% 20%, 80% 70%, 50% 40%;
		background-size: 40% 40%, 30% 35%, 35% 30%;
		transform: scale(1);
	}
}


.site-header{display:flex;justify-content:space-between;align-items:center;padding:20px 36px;background:transparent}
.brand h1{margin:0;font-size:1.6rem;color:var(--neon1);text-shadow:0 0 12px rgba(125,249,255,.12),0 0 24px rgba(255,102,217,.04)}
.tagline{margin:4px 0 0;color:var(--muted);font-size:0.95rem}
.nav a{color:var(--muted);margin-left:18px;text-decoration:none}
.hero{padding:60px 36px;text-align:center}
.hero h2{font-size:2.2rem;margin:6px 0;color:var(--neon2);text-shadow:0 0 18px rgba(255,102,217,.12)}
.hero p{max-width:680px;margin:12px auto;color:var(--muted)}
.cta{margin-top:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:linear-gradient(90deg,var(--neon1),var(--neon2));color:#021018;text-decoration:none;font-weight:600;margin:0 8px;box-shadow:0 6px 30px rgba(125,249,255,.06)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--neon1)}
.cards{padding:36px}
.cards ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cards li{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,.03)}
.minecraft,.about,.contact{padding:24px 36px;border-top:1px solid rgba(255,255,255,.02)}
.site-footer{padding:18px 36px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.02)}

@media (max-width:640px){.nav{display:none}.hero h2{font-size:1.6rem}}