:root {
	--vw-lime: 191, 255, 0;
	--vw-purple: 95, 23, 167;
	--vw-pink: 248, 73, 193;
	--vw-light: 224, 224, 224;
}

html { scroll-behavior: smooth; }

.punk-wave {
	position: relative;
	isolation: isolate;
	background-color: #020617;
	--vw-speed: 24s;
	background-image:
		linear-gradient(to right, rgba(var(--vw-lime),0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--vw-lime),0.05) 1px, transparent 1px),
		radial-gradient(120% 80% at 50% 15%, rgba(var(--vw-purple),0.28), rgba(0,0,0,0.90) 70%);
	background-size: 40px 40px, 40px 40px, 100% 100%;
}
.punk-wave::after {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		radial-gradient(80% 60% at 50% 60%, rgba(var(--vw-pink),0.06) 0%, rgba(var(--vw-purple),0.06) 45%, transparent 70%),
		repeating-linear-gradient(-45deg,
			rgba(var(--vw-purple),0.12) 0 26px,
			rgba(var(--vw-pink),0.12) 26px 52px,
			transparent 52px 78px);
	background-size: 100% 100%, 180px 180px;
	background-position: 50% 50%, 0 0;
	mix-blend-mode: screen;
	animation: vw-wave-pan var(--vw-speed) linear infinite;
}
@keyframes vw-wave-pan {
	0%   { background-position: 50% 50%, 0 0; }
	50%  { background-position: 50% 50%, 360px 180px; }
	100% { background-position: 50% 50%, 720px 0; }
}
.punk-wave::before {
	content: "";
	position: absolute; inset: -10% -5% -15% -5%; pointer-events: none;
	background: radial-gradient(60% 50% at 50% 55%, rgba(var(--vw-lime),0.08), transparent 70%);
	filter: blur(6px);
	mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
	.punk-wave::after { animation: none; }
	.metro-scanline::before { animation: none; }
}

.cyber-nav {
	border-bottom: 1px solid rgba(var(--vw-lime), 0.25);
	position: sticky;
}
.cyber-nav::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg,
		rgba(var(--vw-pink),0.0) 0%,
		rgba(var(--vw-pink),0.6) 10%,
		rgba(var(--vw-lime),0.9) 50%,
		rgba(var(--vw-purple),0.6) 90%,
		rgba(var(--vw-purple),0.0) 100%);
	filter: drop-shadow(0 0 8px rgba(var(--vw-lime), 0.6));
	animation: cyber-scan 4s linear infinite;
}
@keyframes cyber-scan {
	0% { background-position: -30% 0; }
	100% { background-position: 130% 0; }
}

.neon-link { position: relative; transition: color .2s ease; }
.neon-link:hover { color: rgb(var(--vw-lime)); }
.neon-link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
	background: linear-gradient(90deg, transparent, rgba(var(--vw-lime),.9), transparent);
	transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
	box-shadow: 0 0 8px rgba(var(--vw-lime),.7);
}
.neon-link:hover::after { transform: scaleX(1); }
.neon-link.active { color: rgb(var(--vw-lime)); }
.neon-link.active::after { transform: scaleX(1); }

.neon-text { color: rgb(var(--vw-light)); text-shadow: 0 0 6px rgba(var(--vw-lime),0.35), 0 0 12px rgba(var(--vw-lime),0.25); }
.neon-brand { color: rgb(var(--vw-lime)); text-shadow: 0 0 10px rgba(var(--vw-lime),0.70), 0 0 22px rgba(var(--vw-lime),0.35); }

.neon-section {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2) 60%, transparent 100%),
		radial-gradient(60% 40% at 30% 20%, rgba(var(--vw-lime),0.10), transparent 60%),
		radial-gradient(55% 35% at 75% 85%, rgba(var(--vw-pink),0.06), transparent 65%);
	border-top: 1px dashed rgba(var(--vw-lime),0.25);
}
.neon-section:last-of-type {
	border-bottom: 1px dashed rgba(var(--vw-lime),0.25);
}

.wave-section {
	position: relative; overflow: hidden;
	background:
		linear-gradient(180deg, rgba(var(--vw-purple),0.12), transparent 35%),
		linear-gradient(0deg, rgba(var(--vw-pink),0.06), transparent 45%);
	border-top: 1px dashed rgba(var(--vw-lime),0.25);
	border-bottom: 1px dashed rgba(var(--vw-lime),0.25);
}
.wave-section::before {
	content: ""; position: absolute; inset: -15% -10% -20% -10%; pointer-events: none;
	background:
		radial-gradient(60% 40% at 30% 20%, rgba(var(--vw-lime),0.14), transparent 60%),
		radial-gradient(55% 35% at 75% 85%, rgba(var(--vw-pink),0.08), transparent 65%);
	mix-blend-mode: screen; filter: blur(6px);
}
.wave-section::after {
	content: ""; position: absolute; inset: -2px; pointer-events: none; opacity: .6;
	background: repeating-linear-gradient(-60deg, rgba(var(--vw-purple),0.08) 0 12px, transparent 12px 24px);
	animation: about-waves 16s linear infinite;
}
@keyframes about-waves {
	0% { background-position: 0 0; }
	100% { background-position: 600px 0; }
}

.glitch-lime { position: relative; display: inline-block; }
.glitch-lime::before, .glitch-lime::after {
	content: attr(data-text); position: absolute; left: 0; top: 0; pointer-events: none;
}
.glitch-lime::before { transform: translate(2px, -1px); color: rgba(var(--vw-pink),0.6); filter: blur(.4px); }
.glitch-lime::after  { transform: translate(-2px, 1px); color: rgba(var(--vw-lime),0.95); filter: drop-shadow(0 0 6px rgba(var(--vw-lime),0.7)); mix-blend-mode: screen; }

.logo-mark {
	background-image: url('/assets/logo-lime.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

.fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
	opacity: 1;
	transform: translateY(0);
}
/* Fallback: make content visible if JS hasn't loaded or observer fails */
@media (prefers-reduced-motion: reduce) {
	.fade-up {
		opacity: 1;
		transform: none;
	}
}

.scroll-hint {
	animation: bounce 2s ease infinite;
}
@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

.page-hero {
	position: relative;
	isolation: isolate;
	background-color: #020617;
	background-image:
		linear-gradient(to right, rgba(var(--vw-lime),0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--vw-lime),0.05) 1px, transparent 1px),
		radial-gradient(120% 80% at 50% 15%, rgba(var(--vw-purple),0.28), rgba(0,0,0,0.90) 70%);
	background-size: 40px 40px, 40px 40px, 100% 100%;
}

.vw-card {
	border-radius: 0.75rem;
	border: 1px solid rgba(var(--vw-lime), 0.3);
	background: rgba(23, 23, 23, 0.6);
	padding: 1.5rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vw-card:hover {
	border-color: rgba(var(--vw-lime), 0.5);
	box-shadow: 0 0 20px rgba(var(--vw-lime), 0.08);
}

.vw-tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid rgba(var(--vw-lime), 0.3);
	color: rgb(var(--vw-lime));
}
.vw-tag-pink {
	border-color: rgba(var(--vw-pink), 0.4);
	color: rgb(var(--vw-pink));
}
.vw-tag-purple {
	border-color: rgba(var(--vw-purple), 0.5);
	color: rgb(168, 130, 220);
}

.metro-tile {
	position: relative;
	border: 1px solid rgba(var(--vw-lime), 0.15);
	background: rgba(10, 10, 18, 0.85);
	padding: 1.5rem;
	transition: border-color 0.15s ease, background 0.15s ease;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.metro-tile::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 3px; height: 100%;
	background: rgb(var(--vw-lime));
	opacity: 0;
	transition: opacity 0.15s ease;
}
.metro-tile:hover {
	border-color: rgba(var(--vw-lime), 0.4);
	background: rgba(15, 15, 25, 0.95);
}
.metro-tile:hover::before {
	opacity: 1;
}

.metro-tile-pink::before { background: rgb(var(--vw-pink)); }
.metro-tile-purple::before { background: rgb(var(--vw-purple)); }

.metro-tile-lg {
	padding: 2rem;
}
@media (min-width: 768px) {
	.metro-tile-lg { padding: 2.5rem; }
}

.metro-tag {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: 'Funnel Display', monospace;
	background: rgba(var(--vw-lime), 0.12);
	color: rgb(var(--vw-lime));
	border: 1px solid rgba(var(--vw-lime), 0.25);
}
.metro-tag-pink {
	background: rgba(var(--vw-pink), 0.12);
	color: rgb(var(--vw-pink));
	border-color: rgba(var(--vw-pink), 0.25);
}
.metro-tag-muted {
	background: rgba(var(--vw-light), 0.06);
	color: rgba(var(--vw-light), 0.5);
	border-color: rgba(var(--vw-light), 0.12);
}

.metro-divider {
	height: 3px;
	background: linear-gradient(90deg,
		rgb(var(--vw-lime)) 0%, rgb(var(--vw-lime)) 30%,
		rgb(var(--vw-pink)) 30%, rgb(var(--vw-pink)) 55%,
		rgb(var(--vw-purple)) 55%, rgb(var(--vw-purple)) 70%,
		transparent 70%);
}

.metro-scanline {
	position: relative;
}
.metro-scanline::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0,0,0,0.08) 2px,
		rgba(0,0,0,0.08) 4px
	);
	z-index: 1;
}

.metro-grid-bg {
	background-color: #020617;
	background-image:
		linear-gradient(to right, rgba(var(--vw-lime),0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--vw-lime),0.03) 1px, transparent 1px);
	background-size: 60px 60px;
}

.metro-hero {
	position: relative;
	background-color: #020617;
	background-image:
		linear-gradient(to right, rgba(var(--vw-lime),0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--vw-lime),0.04) 1px, transparent 1px),
		radial-gradient(ellipse 80% 50% at 20% 80%, rgba(var(--vw-purple),0.2), transparent),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(var(--vw-pink),0.08), transparent);
	background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
	border-bottom: 3px solid rgb(var(--vw-lime));
	overflow: hidden;
}
.metro-hero::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	width: 40%;
	height: 3px;
	background: rgb(var(--vw-pink));
}

.metro-accent-bar {
	width: 40px;
	height: 3px;
	background: rgb(var(--vw-lime));
	display: block;
}

.metro-btn {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	font-family: 'Funnel Display', sans-serif;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgb(var(--vw-lime));
	border: 1px solid rgba(var(--vw-lime), 0.4);
	background: rgba(var(--vw-lime), 0.06);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.metro-btn:hover {
	background: rgba(var(--vw-lime), 0.15);
	border-color: rgba(var(--vw-lime), 0.7);
	box-shadow: 0 0 16px rgba(var(--vw-lime), 0.15);
}

.metro-section {
	position: relative;
	background-color: #0a0a12;
	background-image:
		linear-gradient(to right, rgba(var(--vw-lime),0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--vw-lime),0.02) 1px, transparent 1px);
	background-size: 60px 60px;
	border-top: 1px solid rgba(var(--vw-lime), 0.1);
}

.metro-corner-label {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-family: 'Funnel Display', monospace;
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(var(--vw-lime), 0.3);
}