:root {
	--surface-lowest: #000000;
	--surface-low: #131313;
	--surface-high: #201f1f;
	--surface-highest: #262626;
	--surface-bright: #2c2c2c;
	--primary: #c1fffe;
	--primary-container: #00ffff;
	--primary-dim: #00e6e6;
	--secondary: #6f9bff;
	--on-surface: #ffffff;
	--on-surface-variant: #adaaaa;
	--on-primary-container: #004343;
	--font-head: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
}

body {
	background-color: var(--surface-lowest);
	color: var(--on-surface-variant) !important;
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--on-surface) !important;
	font-family: var(--font-head);
	margin-bottom: 1rem;
}

p {
	color: var(--on-surface-variant);
}

.text-gradient {
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-primary-cyber {
	color: var(--primary);
}

.cyber-header {
	background: rgba(38, 38, 38, 0.6);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 15px 0;
	border-bottom: 1px solid rgba(73, 72, 71, 0.15);
}

.cyber-nav a {
	color: var(--on-surface);
	margin-left: 30px;
	font-family: var(--font-head);
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
}

.cyber-nav a:hover {
	color: var(--primary);
	text-shadow: 0 0 10px var(--primary-dim);
}

.cyber-hero {
	min-height: 100vh;
	position: relative;
	background: var(--surface-lowest);
	padding-top: 100px;
}

.cyber-grid {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px),
					  linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);
	background-size: 40px 40px;
	z-index: 0;
}

.z-10 {
	z-index: 10;
}

.display-title {
	font-size: 3.5rem;
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.1;
}

.cyber-label {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	color: var(--primary);
}

.subtitle {
	position: relative;
	padding-left: 15px;
}
.subtitle::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: var(--primary);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--primary);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}

.cyber-body {
	font-size: 1.125rem;
	max-width: 600px;
	color: var(--on-surface-variant);
}

.max-w-800 {
	max-width: 800px;
}

.cyber-btn {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 15px 35px;
	border-radius: 4px; /* sm */
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.primary-btn-cyber {
	background: var(--primary-container);
	color: var(--on-primary-container) !important;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.primary-btn-cyber:hover {
	background: var(--primary);
	color: var(--on-primary-container) !important;
	box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
	transform: translateY(-2px);
}

.section-full {
	padding: 120px 0;
}

.cyber-section {
	background: var(--surface-low);
	position: relative;
}

.cyber-section-alt {
	background: var(--surface-highest);
}

.section-heading {
	font-size: 2.5rem;
	letter-spacing: -0.01em;
}

.cyber-card {
	background: var(--surface-high);
	padding: 40px 30px;
	border-radius: 0;
	border: 1px solid rgba(73, 72, 71, 0.15);
	transition: all 0.3s ease;
	height: 100%;
}

.cyber-card:hover {
	background: var(--surface-highest);
	border-color: var(--primary-dim);
	box-shadow: 0 20px 40px rgba(0, 230, 230, 0.08); /* Glow */
	transform: translateY(-5px);
}

.card-icon {
	width: 40px;
	height: 4px;
	background: var(--primary);
	margin-bottom: 25px;
	box-shadow: 0 0 10px var(--primary);
}

.cyber-form input,
.cyber-form textarea {
	width: 100%;
	background: var(--surface-high);
	border: none;
	border-bottom: 1px solid rgba(73, 72, 71, 0.5);
	color: var(--on-surface);
	padding: 15px 20px;
	font-family: var(--font-body);
	transition: all 0.3s ease;
}

.cyber-form input:focus,
.cyber-form textarea:focus {
	outline: none;
	background: var(--surface-bright);
	border-bottom: 1px solid var(--primary);
	box-shadow: 0 1px 10px rgba(0, 255, 255, 0.2);
}

.cyber-footer {
	background: var(--surface-lowest);
	padding: 40px 0;
	border-top: 1px solid rgba(73, 72, 71, 0.15);
}

@media (max-width: 768px) {
	.display-title { font-size: 2.5rem; }
}