/*
COREGEEK WEB SERVICES
You are not the first person to read this.
You will not be the last.
Everyone before you made the same assumption.

Copyright CoreGeek Web Services 2026
*/

/* ============================================================
   CoreGeek Web Services - Custom Styles
   Cyberpunk / Hacker Aesthetic
   ============================================================ */

/* ============================================================
   TABLE OF CONTENTS
   ============================================================
   1.  CSS Custom Properties
   2.  Base & Reset
   3.  Typography
   4.  Selection & Scrollbar
   5.  Skip Link / Accessibility
   6.  Scanline & CRT Overlay
   7.  Header / Navigation
   8.  Hero Section
   9.  Glassmorphism Panels
   10. Section Styles
   11. Service Cards
   12. Portfolio Grid
   13. Terminal Code Block
   14. Animated Counter
   15. Stats Section
   16. Testimonials
   17. CTA Section
   18. Contact Form
   19. Team Showcase
   20. Blog Grid
   21. Tech Stack & Client Logos
   22. Scroll Animations
   23. Glitch Effect Keyframes
   24. CRT / Scanline Effects
   25. Typing Animation
   26. Magnetic Button
   27. Cursor Trail
   28. Matrix Rain CSS Fallback
   29. Footer
   30. 404 Page
   31. WordPress Block Overrides
   32. Responsive Design
   33. Reduced Motion
   34. Print Styles
   35. Editor Overrides
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
	/* --- Brand Colors --- */
	--coregeek-green: #00FF41;
	--coregeek-green-rgb: 0, 255, 65;
	--coregeek-cyan: #00F0FF;
	--coregeek-cyan-rgb: 0, 240, 255;
	--coregeek-magenta: #FF00FF;
	--coregeek-magenta-rgb: 255, 0, 255;
	--coregeek-amber: #FFB000;
	--coregeek-amber-rgb: 255, 176, 0;

	/* --- Dark Palette --- */
	--coregeek-dark: #0A0A0F;
	--coregeek-dark-rgb: 10, 10, 15;
	--coregeek-dark-lighter: #141428;
	--coregeek-dark-card: #0D0D1A;
	--coregeek-dark-surface: #111122;

	/* --- Neutrals --- */
	--coregeek-white: #FFFFFF;
	--coregeek-gray: #8B8B8B;
	--coregeek-gray-light: #C0C0C0;
	--coregeek-gray-dark: #3A3A4A;

	/* --- Glow Shadows --- */
	--coregeek-glow-green: 0 0 10px rgba(0, 255, 65, 0.3), 0 0 40px rgba(0, 255, 65, 0.1);
	--coregeek-glow-green-strong: 0 0 10px rgba(0, 255, 65, 0.5), 0 0 30px rgba(0, 255, 65, 0.3), 0 0 60px rgba(0, 255, 65, 0.1);
	--coregeek-glow-cyan: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 40px rgba(0, 240, 255, 0.1);
	--coregeek-glow-cyan-strong: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 30px rgba(0, 240, 255, 0.3), 0 0 60px rgba(0, 240, 255, 0.1);
	--coregeek-glow-magenta: 0 0 10px rgba(255, 0, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.1);
	--coregeek-glow-magenta-strong: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.3), 0 0 60px rgba(255, 0, 255, 0.1);
	--coregeek-glow-amber: 0 0 10px rgba(255, 176, 0, 0.3), 0 0 40px rgba(255, 176, 0, 0.1);

	/* --- Glassmorphism --- */
	--coregeek-glass-bg: rgba(10, 10, 15, 0.8);
	--coregeek-glass-bg-light: rgba(10, 10, 15, 0.6);
	--coregeek-glass-border: rgba(0, 255, 65, 0.15);
	--coregeek-glass-blur: 20px;

	/* --- Scanline --- */
	--coregeek-scanline-opacity: 0.03;
	--coregeek-scanline-size: 2px;

	/* --- Transitions --- */
	--coregeek-transition-fast: 0.15s ease;
	--coregeek-transition-medium: 0.3s ease;
	--coregeek-transition-slow: 0.6s ease;
	--coregeek-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* --- Z-Index Scale --- */
	--z-cursor: 9999;
	--z-header: 1000;
	--z-overlay: 900;
	--z-modal: 800;
	--z-dropdown: 700;
	--z-canvas: 1;

	/* --- Border Radius --- */
	--coregeek-radius-sm: 2px;
	--coregeek-radius-md: 4px;
	--coregeek-radius-lg: 8px;
	--coregeek-radius-xl: 12px;
}


/* ============================================================
   2. BASE & RESET
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: var(--coregeek-dark);
	color: var(--coregeek-gray-light);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.7;
	overflow-x: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-decoration: none;
	transition: color var(--coregeek-transition-medium);
}

a:focus-visible {
	outline: 2px dotted var(--coregeek-green);
	outline-offset: 2px;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	color: var(--coregeek-white);
	line-height: 1.2;
	font-weight: 700;
}

h1 {
	font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	letter-spacing: -0.01em;
}

h3 {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

h4 {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

h5 {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

h6 {
	font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

p {
	margin-bottom: 1.5em;
}

code,
pre,
kbd,
samp {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

code {
	background: var(--coregeek-dark-card);
	color: var(--coregeek-green);
	padding: 0.15em 0.4em;
	border-radius: var(--coregeek-radius-sm);
	font-size: 0.875em;
}

pre {
	background: var(--coregeek-dark-card);
	color: var(--coregeek-green);
	padding: 1.5rem;
	border-radius: var(--coregeek-radius-md);
	border: 1px solid var(--coregeek-glass-border);
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}

pre code {
	background: transparent;
	padding: 0;
}

blockquote {
	border-left: 3px solid var(--coregeek-green);
	padding-left: 1.5rem;
	margin-left: 0;
	font-family: 'JetBrains Mono', monospace;
	font-style: normal;
	color: var(--coregeek-gray-light);
}

mark {
	background: rgba(0, 255, 65, 0.2);
	color: var(--coregeek-green);
	padding: 0.1em 0.3em;
}

hr {
	border: none;
	border-top: 1px solid rgba(0, 255, 65, 0.2);
	margin: 2rem 0;
}


/* ============================================================
   4. SELECTION & SCROLLBAR
   ============================================================ */

::selection {
	background: rgba(0, 255, 65, 0.3);
	color: var(--coregeek-green);
}

::-moz-selection {
	background: rgba(0, 255, 65, 0.3);
	color: var(--coregeek-green);
}

/* Webkit scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--coregeek-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--coregeek-green);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 255, 65, 0.8);
}

/* Firefox scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--coregeek-green) var(--coregeek-dark);
}


/* ============================================================
   5. SKIP LINK / ACCESSIBILITY
   ============================================================ */

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: calc(var(--z-header) + 10);
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	padding: 0.75rem 1.5rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: top var(--coregeek-transition-fast);
}

.skip-link:focus {
	top: 0;
	outline: 2px solid var(--coregeek-dark);
	outline-offset: -2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	top: 5px;
	width: auto;
	z-index: 100000;
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	padding: 1rem;
	font-size: 0.875rem;
}


/* ============================================================
   6. SCANLINE & CRT OVERLAY
   ============================================================ */

body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: var(--z-overlay);
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent var(--coregeek-scanline-size),
			rgba(0, 0, 0, var(--coregeek-scanline-opacity)) var(--coregeek-scanline-size),
			rgba(0, 0, 0, var(--coregeek-scanline-opacity)) calc(var(--coregeek-scanline-size) * 2)
		);
	opacity: 1;
}


/* ============================================================
   7. HEADER / NAVIGATION
   ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--z-header);
	background: var(--coregeek-glass-bg-light);
	backdrop-filter: blur(var(--coregeek-glass-blur));
	-webkit-backdrop-filter: blur(var(--coregeek-glass-blur));
	border-bottom: 1px solid var(--coregeek-glass-border);
	transition:
		background-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium);
	padding: 0;
}

.site-header.header-scrolled {
	background: rgba(10, 10, 15, 0.95);
	box-shadow: 0 4px 30px rgba(0, 255, 65, 0.05);
	border-bottom-color: rgba(0, 255, 65, 0.25);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.75rem 2rem;
}

.header-logo,
.site-header .wp-block-site-title {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
}

.header-logo a,
.site-header .wp-block-site-title a {
	color: var(--coregeek-green);
	text-shadow: var(--coregeek-glow-green);
	transition: text-shadow var(--coregeek-transition-medium);
}

.header-logo a:hover,
.site-header .wp-block-site-title a:hover {
	text-shadow: var(--coregeek-glow-green-strong);
}

.header-nav,
.site-header .wp-block-navigation {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Show desktop nav, hide mobile nav on wide screens */
.nav-mobile {
	display: none !important;
}

@media (max-width: 768px) {
	.nav-desktop {
		display: none !important;
	}

	.nav-mobile {
		display: flex !important;
	}

	.cta-header {
		display: none !important;
	}
}

.header-nav a,
.site-header .wp-block-navigation-item__content {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-gray-light);
	padding: 0.5rem 1rem;
	position: relative;
	transition: color var(--coregeek-transition-medium);
}

.header-nav a::after,
.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	width: 80%;
	height: 1px;
	background: var(--coregeek-green);
	transition: transform var(--coregeek-transition-medium);
	transform-origin: center;
}

.header-nav a:hover,
.header-nav a.is-active,
.site-header .wp-block-navigation-item__content:hover {
	color: var(--coregeek-green);
}

.header-nav a:hover::after,
.header-nav a.is-active::after,
.site-header .wp-block-navigation-item__content:hover::after {
	transform: translateX(-50%) scaleX(1);
}

/* Header CTA Button */
.header-cta,
.site-header .wp-block-button .wp-block-button__link {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-green);
	border: 1px solid var(--coregeek-green);
	padding: 0.5rem 1.25rem;
	border-radius: var(--coregeek-radius-sm);
	background: transparent;
	cursor: pointer;
	transition:
		background-color var(--coregeek-transition-medium),
		color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.header-cta:hover,
.site-header .wp-block-button .wp-block-button__link:hover {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	box-shadow: var(--coregeek-glow-green);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 15, 0.98);
	z-index: calc(var(--z-header) - 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--coregeek-transition-medium),
		visibility var(--coregeek-transition-medium);
}

.mobile-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-nav-overlay a {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--coregeek-gray-light);
	padding: 0.75rem;
	display: block;
	transition: color var(--coregeek-transition-medium);
}

.mobile-nav-overlay a:hover {
	color: var(--coregeek-green);
	text-shadow: var(--coregeek-glow-green);
}

/* Mobile menu toggle */
.mobile-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--coregeek-glass-border);
	color: var(--coregeek-green);
	padding: 0.5rem;
	cursor: pointer;
	border-radius: var(--coregeek-radius-sm);
	line-height: 1;
	font-size: 1.25rem;
}

.mobile-nav-toggle:hover {
	border-color: var(--coregeek-green);
	box-shadow: var(--coregeek-glow-green);
}

/* WordPress navigation block overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(10, 10, 15, 0.98) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--coregeek-gray-light);
	font-size: 1.25rem;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--coregeek-green) !important;
}


/* ============================================================
   8. HERO SECTION
   ============================================================ */

#coregeek-hero-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-canvas);
	pointer-events: none;
}

[data-particles-preset] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-canvas);
	pointer-events: none;
}

.hero-cover {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

.hero-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 900px;
}

.hero-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(2.5rem, 2rem + 4vw, 5rem);
	font-weight: 800;
	color: var(--coregeek-white);
	text-shadow: var(--coregeek-glow-green);
	line-height: 1.1;
	margin-bottom: 1.5rem;
	letter-spacing: -0.02em;
}

.hero-title .accent {
	color: var(--coregeek-green);
}

.hero-title .accent-cyan {
	color: var(--coregeek-cyan);
}

.hero-title .accent-magenta {
	color: var(--coregeek-magenta);
}

.hero-tagline {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	color: var(--coregeek-gray-light);
	margin-bottom: 2.5rem;
	display: block;
	width: 100%;
}

.typing-cursor {
	display: inline-block;
	width: 2px;
	height: 1.2em;
	background: var(--coregeek-green);
	margin-left: 4px;
	vertical-align: text-bottom;
	animation: blink-cursor 0.75s step-end infinite;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-buttons .btn-primary {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	border: 1px solid var(--coregeek-green);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.875rem 2rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		box-shadow var(--coregeek-transition-medium),
		transform var(--coregeek-transition-medium);
}

.hero-buttons .btn-primary:hover {
	box-shadow: var(--coregeek-glow-green-strong);
	transform: translateY(-2px);
}

.hero-buttons .btn-secondary {
	background: transparent;
	color: var(--coregeek-green);
	border: 1px solid var(--coregeek-green);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.875rem 2rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		background-color var(--coregeek-transition-medium),
		color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium),
		transform var(--coregeek-transition-medium);
}

.hero-buttons .btn-secondary:hover {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	box-shadow: var(--coregeek-glow-green);
	transform: translateY(-2px);
}

/* Scroll Indicator */
.scroll-indicator {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	animation: bounce-arrow 2s ease-in-out infinite;
}

.scroll-indicator-text {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--coregeek-gray);
}

.scroll-indicator-arrow {
	width: 20px;
	height: 20px;
	border-right: 2px solid var(--coregeek-green);
	border-bottom: 2px solid var(--coregeek-green);
	transform: rotate(45deg);
	opacity: 0.6;
}

@keyframes bounce-arrow {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	40% {
		transform: translateX(-50%) translateY(-10px);
	}
	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}

@keyframes blink-cursor {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}


/* ============================================================
   9. GLASSMORPHISM PANELS
   ============================================================ */

.glass-panel {
	background: var(--coregeek-glass-bg);
	backdrop-filter: blur(var(--coregeek-glass-blur));
	-webkit-backdrop-filter: blur(var(--coregeek-glass-blur));
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	padding: 2rem;
	transition:
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.glass-panel:hover {
	border-color: rgba(0, 255, 65, 0.3);
	box-shadow: var(--coregeek-glow-green);
}

.glass-panel-green {
	border-color: rgba(0, 255, 65, 0.25);
}

.glass-panel-green:hover {
	border-color: rgba(0, 255, 65, 0.5);
	box-shadow: var(--coregeek-glow-green-strong);
}

.glass-panel-cyan {
	border-color: rgba(0, 240, 255, 0.25);
}

.glass-panel-cyan:hover {
	border-color: rgba(0, 240, 255, 0.5);
	box-shadow: var(--coregeek-glow-cyan-strong);
}

.glass-panel-magenta {
	border-color: rgba(255, 0, 255, 0.25);
}

.glass-panel-magenta:hover {
	border-color: rgba(255, 0, 255, 0.5);
	box-shadow: var(--coregeek-glow-magenta-strong);
}

.glass-panel-amber {
	border-color: rgba(255, 176, 0, 0.25);
}

.glass-panel-amber:hover {
	border-color: rgba(255, 176, 0, 0.5);
	box-shadow: var(--coregeek-glow-amber);
}

/* Neon border glow animation */
.neon-border {
	position: relative;
}

.neon-border::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		var(--coregeek-green),
		var(--coregeek-cyan),
		var(--coregeek-magenta),
		var(--coregeek-green)
	);
	background-size: 300% 300%;
	z-index: -1;
	opacity: 0;
	transition: opacity var(--coregeek-transition-medium);
	animation: neon-border-rotate 4s linear infinite;
}

.neon-border:hover::before {
	opacity: 0.5;
}

@keyframes neon-border-rotate {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/* ============================================================
   10. SECTION STYLES
   ============================================================ */

.coregeek-section {
	padding: clamp(4rem, 3rem + 4vw, 8rem) 0;
	position: relative;
}

.coregeek-section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.section-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 1rem;
	position: relative;
	display: inline-block;
}

.section-title .accent,
.section-title span {
	color: var(--coregeek-green);
}

.section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--coregeek-green);
	margin-top: 0.75rem;
	box-shadow: var(--coregeek-glow-green);
}

.section-subtitle {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--coregeek-green);
	margin-bottom: 0.5rem;
	display: block;
}

.section-description {
	font-size: 1.125rem;
	color: var(--coregeek-gray-light);
	max-width: 700px;
	margin-bottom: 3rem;
	line-height: 1.8;
}

/* Section divider line */
.section-divider {
	width: 100%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(0, 255, 65, 0.3),
		transparent
	);
	margin: 0;
	border: none;
}


/* ============================================================
   11. SERVICE CARDS
   ============================================================ */

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.service-card {
	background: var(--coregeek-glass-bg);
	backdrop-filter: blur(var(--coregeek-glass-blur));
	-webkit-backdrop-filter: blur(var(--coregeek-glass-blur));
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	padding: 2.5rem 2rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition:
		transform var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--coregeek-green), var(--coregeek-cyan));
	transform: scaleX(0);
	transition: transform var(--coregeek-transition-medium);
	transform-origin: left;
}

.service-card:hover {
	transform: translateY(-8px);
	border-color: rgba(0, 255, 65, 0.3);
	box-shadow: var(--coregeek-glow-green);
}

.service-card:hover::before {
	transform: scaleX(1);
}

.service-card-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	border: 2px solid rgba(0, 255, 65, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--coregeek-green);
	transition:
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.service-card:hover .service-card-icon {
	border-color: var(--coregeek-green);
	box-shadow: var(--coregeek-glow-green);
}

.service-card-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 0.75rem;
}

.service-card-description {
	color: var(--coregeek-gray-light);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.service-card-link {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-green);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.service-card-link::after {
	content: "\2192";
	transition: transform var(--coregeek-transition-medium);
}

.service-card:hover .service-card-link::after {
	transform: translateX(4px);
}

/* Color variants for service cards */
.service-card[data-accent="cyan"] .service-card-icon {
	border-color: rgba(0, 240, 255, 0.3);
	color: var(--coregeek-cyan);
}

.service-card[data-accent="cyan"]:hover .service-card-icon {
	border-color: var(--coregeek-cyan);
	box-shadow: var(--coregeek-glow-cyan);
}

.service-card[data-accent="cyan"]:hover {
	border-color: rgba(0, 240, 255, 0.3);
	box-shadow: var(--coregeek-glow-cyan);
}

.service-card[data-accent="magenta"] .service-card-icon {
	border-color: rgba(255, 0, 255, 0.3);
	color: var(--coregeek-magenta);
}

.service-card[data-accent="magenta"]:hover .service-card-icon {
	border-color: var(--coregeek-magenta);
	box-shadow: var(--coregeek-glow-magenta);
}

.service-card[data-accent="magenta"]:hover {
	border-color: rgba(255, 0, 255, 0.3);
	box-shadow: var(--coregeek-glow-magenta);
}

.service-card[data-accent="amber"] .service-card-icon {
	border-color: rgba(255, 176, 0, 0.3);
	color: var(--coregeek-amber);
}

.service-card[data-accent="amber"]:hover .service-card-icon {
	border-color: var(--coregeek-amber);
	box-shadow: var(--coregeek-glow-amber);
}

.service-card[data-accent="amber"]:hover {
	border-color: rgba(255, 176, 0, 0.3);
	box-shadow: var(--coregeek-glow-amber);
}


/* ============================================================
   12. PORTFOLIO GRID
   ============================================================ */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 2rem;
}

.portfolio-card {
	position: relative;
	border-radius: var(--coregeek-radius-lg);
	overflow: hidden;
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	transition:
		transform var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.portfolio-card:hover {
	transform: translateY(-5px);
	border-color: rgba(0, 255, 65, 0.3);
	box-shadow: var(--coregeek-glow-green);
}

.portfolio-card-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.portfolio-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--coregeek-transition-slow);
}

.portfolio-card:hover .portfolio-card-image img {
	transform: scale(1.05);
}

.portfolio-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(
		to top,
		rgba(10, 10, 15, 0.95) 0%,
		rgba(10, 10, 15, 0.6) 50%,
		transparent 100%
	);
	padding: 2rem 1.5rem 1.5rem;
	transform: translateY(100%);
	transition: transform var(--coregeek-transition-medium);
}

.portfolio-card:hover .portfolio-card-overlay {
	transform: translateY(0);
}

.portfolio-card-overlay-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 0.5rem;
}

.portfolio-card-overlay-description {
	font-size: 0.8125rem;
	color: var(--coregeek-gray-light);
	line-height: 1.5;
}

.portfolio-card-body {
	padding: 1.5rem;
}

.portfolio-card-category {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--coregeek-green);
	margin-bottom: 0.5rem;
	display: block;
}

.portfolio-card-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.portfolio-card-title a {
	color: inherit;
}

.portfolio-card-title a:hover {
	color: var(--coregeek-green);
}

.portfolio-card-excerpt {
	font-size: 0.9375rem;
	color: var(--coregeek-gray);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.portfolio-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.portfolio-tag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--coregeek-cyan);
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.2);
	padding: 0.25rem 0.625rem;
	border-radius: var(--coregeek-radius-sm);
}

/* Portfolio Filter Bar */
.portfolio-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 3rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--coregeek-glass-border);
}

.portfolio-filter-btn {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--coregeek-gray-light);
	background: transparent;
	border: 1px solid var(--coregeek-glass-border);
	padding: 0.5rem 1rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		color var(--coregeek-transition-medium),
		background-color var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium);
}

.portfolio-filter-btn:hover {
	color: var(--coregeek-green);
	border-color: rgba(0, 255, 65, 0.3);
}

.portfolio-filter-btn.active {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	border-color: var(--coregeek-green);
}


/* ============================================================
   13. TERMINAL CODE BLOCK
   ============================================================ */

.terminal-block {
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	overflow: hidden;
	font-family: 'JetBrains Mono', monospace;
	margin: 2rem 0;
}

.terminal-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid var(--coregeek-glass-border);
}

.terminal-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.terminal-dot-red {
	background: #FF5F56;
}

.terminal-dot-yellow {
	background: #FFBD2E;
}

.terminal-dot-green {
	background: #27C93F;
}

.terminal-title {
	flex: 1;
	text-align: center;
	font-size: 0.75rem;
	color: var(--coregeek-gray);
	font-weight: 500;
}

.terminal-body {
	padding: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--coregeek-gray-light);
	overflow-x: auto;
}

.terminal-line {
	display: block;
	margin-bottom: 0.25rem;
}

.terminal-prompt {
	color: var(--coregeek-green);
	user-select: none;
}

.terminal-prompt::before {
	content: "$ ";
	color: var(--coregeek-green);
}

.terminal-input {
	color: var(--coregeek-white);
}

.terminal-input .cursor {
	display: inline-block;
	width: 8px;
	height: 1.1em;
	background: var(--coregeek-green);
	vertical-align: text-bottom;
	animation: blink-cursor 0.75s step-end infinite;
}

.terminal-output {
	color: var(--coregeek-green);
}

.terminal-error {
	color: #FF5F56;
}

.terminal-comment {
	color: var(--coregeek-gray);
	font-style: italic;
}

.terminal-keyword {
	color: var(--coregeek-magenta);
}

.terminal-string {
	color: var(--coregeek-amber);
}

.terminal-number {
	color: var(--coregeek-cyan);
}

.terminal-run-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--coregeek-green);
	background: transparent;
	border: 1px solid var(--coregeek-green);
	padding: 0.5rem 1.25rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		background-color var(--coregeek-transition-medium),
		color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.terminal-run-btn:hover {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	box-shadow: var(--coregeek-glow-green);
}

.terminal-run-btn::before {
	content: "\25B6";
}


/* ============================================================
   14. ANIMATED COUNTER
   ============================================================ */

.counter-block {
	text-align: center;
	padding: 2rem 1rem;
}

.counter-value {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(3rem, 2.5rem + 3vw, 5rem);
	font-weight: 800;
	color: var(--coregeek-green);
	line-height: 1;
	margin-bottom: 0.5rem;
	text-shadow: var(--coregeek-glow-green);
}

.counter-suffix {
	font-size: 0.6em;
	color: var(--coregeek-cyan);
}

.counter-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--coregeek-gray);
}


/* ============================================================
   15. STATS SECTION
   ============================================================ */

.stats-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

.stats-row .counter-block {
	flex: 1;
	min-width: 150px;
	position: relative;
}

.stats-row .counter-block:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 25%;
	height: 50%;
	width: 1px;
	background: linear-gradient(
		180deg,
		transparent,
		rgba(0, 255, 65, 0.3),
		transparent
	);
}

/* Alternate accent colors */
.stats-row .counter-block:nth-child(2) .counter-value {
	color: var(--coregeek-cyan);
	text-shadow: var(--coregeek-glow-cyan);
}

.stats-row .counter-block:nth-child(3) .counter-value {
	color: var(--coregeek-magenta);
	text-shadow: var(--coregeek-glow-magenta);
}

.stats-row .counter-block:nth-child(4) .counter-value {
	color: var(--coregeek-amber);
	text-shadow: var(--coregeek-glow-amber);
}


/* ============================================================
   16. TESTIMONIALS
   ============================================================ */

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
}

.testimonial-card {
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	overflow: hidden;
}

.testimonial-card-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid var(--coregeek-glass-border);
}

.testimonial-card-header .terminal-dot {
	width: 10px;
	height: 10px;
}

.testimonial-card-header-title {
	flex: 1;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	color: var(--coregeek-gray);
}

.testimonial-card-body {
	padding: 2rem;
}

.testimonial-quote {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.9375rem;
	color: var(--coregeek-gray-light);
	line-height: 1.8;
	margin-bottom: 1.5rem;
	position: relative;
}

.testimonial-quote::before {
	content: "// ";
	color: var(--coregeek-green);
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.testimonial-author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--coregeek-glass-border);
	overflow: hidden;
}

.testimonial-author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-author-name {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--coregeek-white);
}

.testimonial-author-role {
	font-size: 0.75rem;
	color: var(--coregeek-gray);
}


/* ============================================================
   17. CTA SECTION
   ============================================================ */

.cta-terminal {
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	padding: 4rem 3rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-terminal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--coregeek-green), var(--coregeek-cyan), var(--coregeek-magenta));
}

.cta-prompt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	color: var(--coregeek-gray);
	margin-bottom: 1rem;
}

.cta-prompt .prompt-char {
	color: var(--coregeek-green);
	margin-right: 0.5rem;
}

.cta-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 1rem;
}

.cta-description {
	color: var(--coregeek-gray-light);
	font-size: 1.0625rem;
	max-width: 600px;
	margin: 0 auto 2rem;
	line-height: 1.7;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-dark);
	background: var(--coregeek-green);
	border: 1px solid var(--coregeek-green);
	padding: 1rem 2.5rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		box-shadow var(--coregeek-transition-medium),
		transform var(--coregeek-transition-medium);
}

.cta-button:hover {
	box-shadow: var(--coregeek-glow-green-strong);
	transform: translateY(-2px);
	color: var(--coregeek-dark);
}


/* ============================================================
   18. CONTACT FORM
   ============================================================ */

.contact-terminal {
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	overflow: hidden;
	max-width: 700px;
	margin: 0 auto;
}

.contact-terminal .terminal-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid var(--coregeek-glass-border);
}

.contact-terminal-body {
	padding: 2rem;
}

.contact-form-group {
	margin-bottom: 1.5rem;
}

.contact-form-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-green);
	display: block;
	margin-bottom: 0.5rem;
}

.contact-form-label::before {
	content: "> ";
}

.contact-form-input,
.contact-form-textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-sm);
	color: var(--coregeek-white);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	transition:
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.contact-form-input:focus,
.contact-form-textarea:focus {
	outline: none;
	border-color: var(--coregeek-green);
	box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.2);
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
	color: var(--coregeek-gray);
	font-style: italic;
}

.contact-form-textarea {
	min-height: 150px;
	resize: vertical;
}

.contact-form-submit {
	width: 100%;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-dark);
	background: var(--coregeek-green);
	border: 1px solid var(--coregeek-green);
	padding: 0.875rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		box-shadow var(--coregeek-transition-medium),
		transform var(--coregeek-transition-medium);
}

.contact-form-submit:hover {
	box-shadow: var(--coregeek-glow-green-strong);
	transform: translateY(-1px);
}

.contact-form-submit:active {
	transform: translateY(0);
}

/* Contact info side panel */
.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.contact-info-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--coregeek-glass-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--coregeek-green);
	font-size: 1rem;
	flex-shrink: 0;
}

.contact-info-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--coregeek-gray);
	margin-bottom: 0.25rem;
}

.contact-info-value {
	color: var(--coregeek-white);
	font-size: 0.9375rem;
}

.contact-info-value a {
	color: var(--coregeek-green);
}


/* ============================================================
   19. TEAM SHOWCASE
   ============================================================ */

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.team-card {
	text-align: center;
	background: var(--coregeek-glass-bg);
	backdrop-filter: blur(var(--coregeek-glass-blur));
	-webkit-backdrop-filter: blur(var(--coregeek-glass-blur));
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	padding: 2rem;
	transition:
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.team-card:hover {
	border-color: rgba(0, 255, 65, 0.3);
	box-shadow: var(--coregeek-glow-green);
}

.team-card-image {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 1.5rem;
	overflow: hidden;
	border: 2px solid var(--coregeek-glass-border);
	position: relative;
	transition: border-color var(--coregeek-transition-medium);
}

.team-card:hover .team-card-image {
	border-color: var(--coregeek-green);
}

.team-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Glitch hover effect on team images */
.glitch-hover {
	position: relative;
}

.glitch-hover::before,
.glitch-hover::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--coregeek-transition-fast);
}

.glitch-hover::before {
	background: rgba(0, 255, 65, 0.1);
	mix-blend-mode: multiply;
}

.glitch-hover::after {
	background: rgba(255, 0, 255, 0.1);
	mix-blend-mode: screen;
}

.glitch-hover:hover::before {
	opacity: 1;
	animation: glitch-offset-1 0.3s ease-in-out infinite alternate;
}

.glitch-hover:hover::after {
	opacity: 1;
	animation: glitch-offset-2 0.3s ease-in-out infinite alternate-reverse;
}

.team-card-name {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1rem;
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 0.25rem;
}

.team-card-role {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--coregeek-green);
	margin-bottom: 1rem;
}

.team-card-bio {
	font-size: 0.875rem;
	color: var(--coregeek-gray-light);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.team-card-social {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.team-card-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--coregeek-glass-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--coregeek-gray-light);
	font-size: 0.875rem;
	transition:
		color var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.team-card-social a:hover {
	color: var(--coregeek-green);
	border-color: var(--coregeek-green);
	box-shadow: var(--coregeek-glow-green);
}


/* ============================================================
   20. BLOG GRID
   ============================================================ */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 2rem;
}

.blog-card {
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	overflow: hidden;
	transition:
		transform var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.blog-card:hover {
	transform: translateY(-5px);
	border-color: rgba(0, 255, 65, 0.3);
	box-shadow: var(--coregeek-glow-green);
}

.blog-card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--coregeek-transition-slow);
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.05);
}

.blog-card-body {
	padding: 1.5rem;
}

.blog-card-category {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--coregeek-dark);
	background: var(--coregeek-green);
	padding: 0.2rem 0.6rem;
	border-radius: var(--coregeek-radius-sm);
	margin-bottom: 0.75rem;
}

.blog-card-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.blog-card-title a {
	color: inherit;
}

.blog-card-title a:hover {
	color: var(--coregeek-green);
}

.blog-card-excerpt {
	font-size: 0.9375rem;
	color: var(--coregeek-gray);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.blog-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.blog-card-date {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	color: var(--coregeek-gray);
}

.blog-card-readmore {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--coregeek-green);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.blog-card-readmore::after {
	content: "\2192";
	transition: transform var(--coregeek-transition-medium);
}

.blog-card:hover .blog-card-readmore::after {
	transform: translateX(4px);
}


/* ============================================================
   21. TECH STACK & CLIENT LOGOS
   ============================================================ */

.tech-stack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1.5rem;
}

.tech-stack-item {
	background: var(--coregeek-glass-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-md);
	padding: 1.5rem 1rem;
	text-align: center;
	transition:
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium),
		transform var(--coregeek-transition-medium);
}

.tech-stack-item:hover {
	border-color: rgba(0, 255, 65, 0.3);
	box-shadow: var(--coregeek-glow-green);
	transform: translateY(-3px);
}

.tech-stack-item img {
	max-width: 48px;
	max-height: 48px;
	margin: 0 auto 0.75rem;
	filter: grayscale(1) brightness(0.8);
	transition: filter var(--coregeek-transition-medium);
}

.tech-stack-item:hover img {
	filter: grayscale(0) brightness(1);
}

.tech-stack-item-name {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--coregeek-gray-light);
}

/* Client logos marquee */
.client-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 2rem 0;
}

.client-marquee::before,
.client-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100px;
	height: 100%;
	z-index: 2;
}

.client-marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--coregeek-dark), transparent);
}

.client-marquee::after {
	right: 0;
	background: linear-gradient(-90deg, var(--coregeek-dark), transparent);
}

.client-marquee-track {
	display: flex;
	gap: 4rem;
	animation: marquee-scroll 30s linear infinite;
	width: max-content;
}

.client-marquee-track img {
	height: 40px;
	width: auto;
	filter: grayscale(1) brightness(0.6);
	opacity: 0.5;
	transition:
		filter var(--coregeek-transition-medium),
		opacity var(--coregeek-transition-medium);
}

.client-marquee-track img:hover {
	filter: grayscale(0) brightness(1);
	opacity: 1;
}

@keyframes marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}


/* ============================================================
   22. SCROLL ANIMATIONS
   ============================================================ */

.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fade up variant */
.fade-up {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Slide in left */
.slide-in-left {
	opacity: 0;
	transform: translateX(-60px);
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Slide in right */
.slide-in-right {
	opacity: 0;
	transform: translateX(60px);
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Scale in */
.scale-in {
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* GSAP trigger elements - GSAP handles initial state via gsap.set() inline styles.
   No CSS hiding here; content stays visible as fallback if JS fails. */

/* Text reveal animation */
.text-reveal {
	overflow: hidden;
	display: inline-block;
}

.text-reveal-inner {
	display: inline-block;
	transform: translateY(100%);
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-reveal.is-visible .text-reveal-inner {
	transform: translateY(0);
}

/* Staggered children animation */
.stagger-children > * {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.5s; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 0.6s; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 0.7s; }

.stagger-children.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}


/* ============================================================
   23. GLITCH EFFECT KEYFRAMES
   ============================================================ */

@keyframes glitch-1 {
	0% {
		clip-path: inset(40% 0 61% 0);
		transform: translate(-2px, 2px);
	}
	20% {
		clip-path: inset(92% 0 1% 0);
		transform: translate(1px, -1px);
	}
	40% {
		clip-path: inset(43% 0 1% 0);
		transform: translate(-1px, 3px);
	}
	60% {
		clip-path: inset(25% 0 58% 0);
		transform: translate(3px, 1px);
	}
	80% {
		clip-path: inset(54% 0 7% 0);
		transform: translate(-3px, -2px);
	}
	100% {
		clip-path: inset(58% 0 43% 0);
		transform: translate(2px, -3px);
	}
}

@keyframes glitch-2 {
	0% {
		clip-path: inset(65% 0 13% 0);
		transform: translate(3px, -1px);
	}
	20% {
		clip-path: inset(17% 0 63% 0);
		transform: translate(-2px, 3px);
	}
	40% {
		clip-path: inset(79% 0 2% 0);
		transform: translate(2px, 1px);
	}
	60% {
		clip-path: inset(40% 0 43% 0);
		transform: translate(-3px, -2px);
	}
	80% {
		clip-path: inset(12% 0 74% 0);
		transform: translate(1px, 2px);
	}
	100% {
		clip-path: inset(34% 0 50% 0);
		transform: translate(-1px, -1px);
	}
}

@keyframes glitch-offset-1 {
	0% {
		transform: translate(-2px, 0);
	}
	100% {
		transform: translate(2px, 0);
	}
}

@keyframes glitch-offset-2 {
	0% {
		transform: translate(2px, 0);
	}
	100% {
		transform: translate(-2px, 0);
	}
}

/* Glitch text effect class */
.glitch-text {
	position: relative;
}

.glitch-text::before,
.glitch-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.glitch-text::before {
	color: var(--coregeek-cyan);
	animation: glitch-1 2s infinite linear alternate-reverse;
	opacity: 0.7;
}

.glitch-text::after {
	color: var(--coregeek-magenta);
	animation: glitch-2 2s infinite linear alternate-reverse;
	opacity: 0.7;
}

.glitch-text:hover::before,
.glitch-text:hover::after {
	animation-duration: 0.3s;
}


/* ============================================================
   24. CRT / SCANLINE EFFECTS
   ============================================================ */

.crt-overlay {
	position: relative;
}

.crt-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 1px,
		rgba(0, 0, 0, 0.05) 1px,
		rgba(0, 0, 0, 0.05) 2px
	);
}

.crt-flicker {
	animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
	0% {
		opacity: 0.97;
	}
	5% {
		opacity: 0.95;
	}
	10% {
		opacity: 0.98;
	}
	15% {
		opacity: 0.96;
	}
	20% {
		opacity: 0.99;
	}
	50% {
		opacity: 0.96;
	}
	80% {
		opacity: 0.98;
	}
	100% {
		opacity: 0.97;
	}
}

/* Screen curvature effect (subtle on hero) */
.crt-curvature {
	position: relative;
	overflow: hidden;
}

.crt-curvature::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		transparent 60%,
		rgba(0, 0, 0, 0.3) 100%
	);
	z-index: 5;
}


/* ============================================================
   25. TYPING ANIMATION
   ============================================================ */

.typing-anim {
	white-space: nowrap;
	border-right: 2px solid var(--coregeek-green);
	animation: blink-caret 0.75s step-end infinite;
	display: block;
	min-height: 1.5em;
}

@keyframes blink-caret {
	0%, 100% {
		border-color: var(--coregeek-green);
	}
	50% {
		border-color: transparent;
	}
}

/* Multi-line typing (JS driven) */
.typing-multiline .typing-line {
	opacity: 0;
	transform: translateY(10px);
}

.typing-multiline .typing-line.is-typed {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}


/* ============================================================
   26. MAGNETIC BUTTON
   ============================================================ */

.magnetic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.magnetic-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 255, 65, 0.1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
}

.magnetic-btn:hover::before {
	width: 200%;
	height: 200%;
}


/* ============================================================
   27. CURSOR TRAIL
   ============================================================ */

.cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--coregeek-green);
	border-radius: 50%;
	pointer-events: none;
	z-index: var(--z-cursor);
	mix-blend-mode: screen;
	transition: transform 0.1s ease;
	will-change: transform;
}

.cursor-dot-trail {
	position: fixed;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(0, 255, 65, 0.3);
	border-radius: 50%;
	pointer-events: none;
	z-index: calc(var(--z-cursor) - 1);
	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: transform;
}

/* Cursor states */
.cursor-hover .cursor-dot {
	transform: scale(2);
	background: var(--coregeek-cyan);
}

.cursor-hover .cursor-dot-trail {
	transform: scale(1.5);
	border-color: rgba(0, 240, 255, 0.5);
}

.cursor-click .cursor-dot {
	transform: scale(0.5);
}

.cursor-click .cursor-dot-trail {
	transform: scale(0.8);
}


/* ============================================================
   28. MATRIX RAIN CSS FALLBACK
   ============================================================ */

.matrix-bg-fallback {
	position: relative;
	overflow: hidden;
}

.matrix-bg-fallback::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(0, 255, 65, 0.02) 25%,
			transparent 50%,
			rgba(0, 255, 65, 0.03) 75%,
			transparent 100%
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 30px,
			rgba(0, 255, 65, 0.015) 30px,
			rgba(0, 255, 65, 0.015) 31px
		);
	background-size: 100% 200%, 100% 100%;
	animation: matrix-fall 8s linear infinite;
}

@keyframes matrix-fall {
	0% {
		background-position: 0 0, 0 0;
	}
	100% {
		background-position: 0 100%, 0 0;
	}
}

@keyframes hero-gradient-shift {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}


/* ============================================================
   29. FOOTER
   ============================================================ */

.site-footer {
	background: var(--coregeek-dark-card);
	border-top: 1px solid var(--coregeek-glass-border);
	padding: 4rem 0 2rem;
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--coregeek-green),
		transparent
	);
	opacity: 0.5;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

.footer-brand-name {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--coregeek-green);
	text-shadow: var(--coregeek-glow-green);
	margin-bottom: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.footer-brand-description {
	color: var(--coregeek-gray);
	font-size: 0.9375rem;
	line-height: 1.7;
	max-width: 350px;
}

.footer-heading {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--coregeek-white);
	margin-bottom: 1.5rem;
}

.footer-nav a {
	display: block;
	color: var(--coregeek-gray-light);
	font-size: 0.9375rem;
	padding: 0.3rem 0;
	transition: color var(--coregeek-transition-medium);
}

.footer-nav a:hover {
	color: var(--coregeek-green);
}

.footer-social-links {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.footer-social-links a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--coregeek-glass-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--coregeek-gray-light);
	transition:
		color var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.footer-social-links a:hover {
	color: var(--coregeek-green);
	border-color: var(--coregeek-green);
	box-shadow: var(--coregeek-glow-green);
}

.footer-bottom {
	border-top: 1px solid var(--coregeek-glass-border);
	padding-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-copyright {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	color: var(--coregeek-gray);
}

.footer-bottom-nav {
	display: flex;
	gap: 1.5rem;
}

.footer-bottom-nav a {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--coregeek-gray);
	transition: color var(--coregeek-transition-medium);
}

.footer-bottom-nav a:hover {
	color: var(--coregeek-green);
}


/* ============================================================
   30. 404 PAGE
   ============================================================ */

.error-404-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	position: relative;
	overflow: hidden;
}

.error-404-code {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(6rem, 5rem + 8vw, 12rem);
	font-weight: 800;
	color: var(--coregeek-green);
	line-height: 1;
	margin-bottom: 1rem;
	text-shadow: var(--coregeek-glow-green-strong);
	position: relative;
}

.error-404-code.glitch-text::before {
	color: var(--coregeek-cyan);
}

.error-404-code.glitch-text::after {
	color: var(--coregeek-magenta);
}

.error-404-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 700;
	color: var(--coregeek-white);
	margin-bottom: 1rem;
}

.error-404-description {
	font-size: 1.0625rem;
	color: var(--coregeek-gray-light);
	max-width: 500px;
	margin: 0 auto 2rem;
	line-height: 1.7;
}

.error-404-terminal {
	background: var(--coregeek-dark-card);
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-lg);
	padding: 1.5rem 2rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	text-align: left;
	max-width: 500px;
	width: 100%;
	margin-bottom: 2rem;
}

.error-404-terminal .terminal-line {
	margin-bottom: 0.5rem;
}

.error-404-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coregeek-dark);
	background: var(--coregeek-green);
	border: 1px solid var(--coregeek-green);
	padding: 0.875rem 2rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
	transition:
		box-shadow var(--coregeek-transition-medium),
		transform var(--coregeek-transition-medium);
}

.error-404-btn:hover {
	box-shadow: var(--coregeek-glow-green-strong);
	transform: translateY(-2px);
	color: var(--coregeek-dark);
}


/* ============================================================
   31. WORDPRESS BLOCK OVERRIDES
   ============================================================ */

/* Ensure blocks inherit theme dark styling */
.wp-block-group {
	color: inherit;
}

/* Cover block */
.wp-block-cover {
	color: var(--coregeek-white);
}

/* Buttons block */
.wp-block-button .wp-block-button__link {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition:
		background-color var(--coregeek-transition-medium),
		color var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		box-shadow var(--coregeek-transition-medium);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

/* Search block */
.wp-block-search .wp-block-search__input {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--coregeek-glass-border);
	color: var(--coregeek-white);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--coregeek-green);
	outline: none;
}

.wp-block-search .wp-block-search__button {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	border: 1px solid var(--coregeek-green);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Table block */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--coregeek-glass-border);
	padding: 0.75rem 1rem;
}

.wp-block-table th {
	background: rgba(0, 255, 65, 0.05);
	color: var(--coregeek-green);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8125rem;
}

.wp-block-table tr:hover td {
	background: rgba(0, 255, 65, 0.02);
}

/* Separator block */
.wp-block-separator {
	border-top: 1px solid rgba(0, 255, 65, 0.2) !important;
	opacity: 1 !important;
}

.wp-block-separator.is-style-wide {
	width: 100%;
}

.wp-block-separator.is-style-dots {
	border: none !important;
}

.wp-block-separator.is-style-dots::before {
	color: var(--coregeek-green) !important;
}

/* Image block */
.wp-block-image figcaption {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	color: var(--coregeek-gray);
	text-align: center;
	margin-top: 0.5rem;
}

/* Gallery block */
.wp-block-gallery .blocks-gallery-item figcaption {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
}

/* Pullquote block */
.wp-block-pullquote {
	border-top: 3px solid var(--coregeek-green);
	border-bottom: 3px solid var(--coregeek-green);
	padding: 2rem 0;
}

.wp-block-pullquote blockquote p {
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.25rem;
	color: var(--coregeek-white);
}

.wp-block-pullquote cite {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.8125rem;
	color: var(--coregeek-green);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Pagination / Navigation */
.wp-block-query-pagination {
	font-family: 'JetBrains Mono', monospace;
}

.wp-block-query-pagination-numbers .page-numbers {
	color: var(--coregeek-gray-light);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--coregeek-glass-border);
	border-radius: var(--coregeek-radius-sm);
	margin: 0 0.25rem;
	transition:
		color var(--coregeek-transition-medium),
		background-color var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium);
}

.wp-block-query-pagination-numbers .page-numbers:hover {
	color: var(--coregeek-green);
	border-color: var(--coregeek-green);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	border-color: var(--coregeek-green);
}

/* Post navigation */
.wp-block-post-navigation-link a {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	color: var(--coregeek-green);
}

/* Comments */
.wp-block-post-comments-form .comment-form input,
.wp-block-post-comments-form .comment-form textarea {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--coregeek-glass-border);
	color: var(--coregeek-white);
	font-family: 'JetBrains Mono', monospace;
	padding: 0.75rem 1rem;
	border-radius: var(--coregeek-radius-sm);
}

.wp-block-post-comments-form .comment-form input:focus,
.wp-block-post-comments-form .comment-form textarea:focus {
	border-color: var(--coregeek-green);
	outline: none;
}

.wp-block-post-comments-form .comment-form .submit {
	background: var(--coregeek-green);
	color: var(--coregeek-dark);
	border: 1px solid var(--coregeek-green);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.75rem 2rem;
	border-radius: var(--coregeek-radius-sm);
	cursor: pointer;
}

/* Tag cloud */
.wp-block-tag-cloud a {
	font-family: 'JetBrains Mono', monospace !important;
	background: rgba(0, 255, 65, 0.05);
	border: 1px solid var(--coregeek-glass-border);
	padding: 0.3rem 0.75rem;
	border-radius: var(--coregeek-radius-sm);
	transition:
		background-color var(--coregeek-transition-medium),
		border-color var(--coregeek-transition-medium),
		color var(--coregeek-transition-medium);
}

.wp-block-tag-cloud a:hover {
	background: var(--coregeek-green);
	border-color: var(--coregeek-green);
	color: var(--coregeek-dark) !important;
}

/* Archives / Categories list */
.wp-block-archives li,
.wp-block-categories li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--coregeek-glass-border);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
}

.wp-block-archives li a,
.wp-block-categories li a {
	color: var(--coregeek-gray-light);
}

.wp-block-archives li a:hover,
.wp-block-categories li a:hover {
	color: var(--coregeek-green);
}


/* ============================================================
   32. RESPONSIVE DESIGN
   ============================================================ */

/* --- 1200px breakpoint --- */
@media (max-width: 1200px) {
	.portfolio-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.services-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

/* --- 1024px breakpoint --- */
@media (max-width: 1024px) {
	.header-inner {
		padding: 0.75rem 1.5rem;
	}

	.header-nav {
		display: none;
	}

	.mobile-nav-toggle {
		display: block;
	}

	.hero-title {
		font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
	}

	.stats-row {
		flex-wrap: wrap;
	}

	.stats-row .counter-block {
		min-width: 45%;
	}

	.stats-row .counter-block:nth-child(2)::after {
		display: none;
	}

	.cta-terminal {
		padding: 3rem 2rem;
	}

	h1 {
		font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	}

	h2 {
		font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	}

	footer .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-group {
		flex-wrap: wrap !important;
	}
}

/* --- 768px breakpoint --- */
@media (max-width: 768px) {
	body::after {
		display: none;
	}

	.header-inner {
		padding: 0.5rem 1rem;
	}

	.hero-cover {
		min-height: 80vh;
		padding: 1.5rem;
	}

	#coregeek-hero-canvas {
		display: none;
	}

	[data-particles-preset] {
		display: none;
	}

	.hero-cover::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			radial-gradient(ellipse at 20% 50%, rgba(0,255,65,0.08) 0%, transparent 60%),
			radial-gradient(ellipse at 80% 30%, rgba(0,240,255,0.06) 0%, transparent 50%),
			radial-gradient(ellipse at 50% 100%, rgba(255,0,255,0.04) 0%, transparent 40%);
		animation: hero-gradient-shift 8s ease-in-out infinite;
	}

	.hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	.hero-buttons .btn-primary,
	.hero-buttons .btn-secondary {
		width: 100%;
		max-width: 300px;
		text-align: center;
	}

	.portfolio-grid {
		grid-template-columns: 1fr;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.testimonials-grid {
		grid-template-columns: 1fr;
	}

	.blog-grid {
		grid-template-columns: 1fr;
	}

	.team-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.stats-row .counter-block {
		min-width: 100%;
	}

	.stats-row .counter-block::after {
		display: none;
	}

	.coregeek-section {
		padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
	}

	.glass-panel {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--coregeek-dark-card);
	}

	.cursor-dot,
	.cursor-dot-trail {
		display: none !important;
	}

	.contact-terminal-body {
		padding: 1.5rem;
	}

	.cta-terminal {
		padding: 2.5rem 1.5rem;
	}

	.portfolio-filter-bar {
		justify-content: center;
	}

	.scroll-indicator {
		display: none;
	}
}

/* --- 480px breakpoint --- */
@media (max-width: 480px) {
	.header-inner {
		padding: 0.5rem 0.75rem;
	}

	.hero-title {
		font-size: clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem);
	}

	.hero-tagline {
		font-size: 0.875rem;
	}

	.section-title {
		font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	}

	.glass-panel {
		padding: 1.25rem;
	}

	.service-card {
		padding: 1.75rem 1.25rem;
	}

	.portfolio-card-body {
		padding: 1.25rem;
	}

	.terminal-body {
		padding: 1rem;
		font-size: 0.8125rem;
	}

	.contact-terminal-body {
		padding: 1.25rem;
	}

	.footer-inner {
		padding: 0 1rem;
	}

	.error-404-code {
		font-size: clamp(4rem, 3rem + 5vw, 8rem);
	}

	.tech-stack-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 1rem;
	}

	.blog-card-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.counter-value {
		font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	}
}

/* --- 360px breakpoint --- */
@media (max-width: 360px) {
	.hero-cover {
		padding: 1rem;
	}

	.hero-title {
		font-size: 1.5rem;
	}

	.hero-tagline {
		font-size: 0.8125rem;
	}

	h1 {
		font-size: 1.75rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	.terminal-body {
		padding: 0.75rem;
		font-size: 0.75rem;
	}

	.service-card {
		padding: 1.5rem 1rem;
	}

	.service-card-icon {
		width: 60px;
		height: 60px;
		font-size: 1.5rem;
	}

	.portfolio-filter-bar {
		gap: 0.25rem;
	}

	.portfolio-filter-btn {
		font-size: 0.625rem;
		padding: 0.375rem 0.75rem;
	}
}


/* ============================================================
   33. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	.animate-on-scroll,
	.fade-up,
	.slide-in-left,
	.slide-in-right,
	.scale-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.crt-overlay::before,
	.crt-flicker,
	body::after {
		display: none !important;
	}

	.cursor-dot,
	.cursor-dot-trail {
		display: none !important;
	}

	#coregeek-hero-canvas {
		display: none !important;
	}

	[data-particles-preset] {
		visibility: hidden;
	}

	.glitch-text::before,
	.glitch-text::after {
		display: none;
	}

	.typing-cursor {
		animation: none;
		opacity: 1;
	}

	.typing-anim {
		width: 100%;
		border-right: none;
		animation: none;
	}

	.client-marquee-track {
		animation: none;
	}

	.neon-border::before {
		animation: none;
	}
}


/* ============================================================
   34. PRINT STYLES
   ============================================================ */

@media print {
	.site-header,
	.site-footer,
	#coregeek-hero-canvas,
	.cursor-dot,
	.cursor-dot-trail,
	.scroll-indicator,
	.mobile-nav-toggle,
	.mobile-nav-overlay,
	[data-particles-preset],
	.crt-overlay::before,
	body::after {
		display: none !important;
	}

	body {
		background: white !important;
		color: black !important;
		font-size: 12pt;
		line-height: 1.5;
	}

	h1, h2, h3, h4, h5, h6 {
		color: black !important;
		page-break-after: avoid;
	}

	a {
		color: black !important;
		text-decoration: underline;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	.glass-panel,
	.service-card,
	.portfolio-card,
	.testimonial-card,
	.blog-card,
	.team-card {
		background: white !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
	}

	.portfolio-card-overlay {
		transform: none !important;
		background: transparent !important;
	}

	.terminal-block {
		background: white !important;
		border: 1px solid #ccc !important;
	}

	.terminal-body {
		color: black !important;
	}

	.terminal-output,
	.terminal-prompt {
		color: #333 !important;
	}
}


/* ============================================================
   35. EDITOR OVERRIDES
   ============================================================ */

.editor-styles-wrapper {
	background-color: var(--coregeek-dark) !important;
	color: var(--coregeek-gray-light);
}

.editor-styles-wrapper .wp-block {
	color: inherit;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	color: var(--coregeek-white);
}

.editor-styles-wrapper a {
	color: var(--coregeek-green);
}

.editor-styles-wrapper code {
	background: var(--coregeek-dark-card);
	color: var(--coregeek-green);
}

.editor-styles-wrapper .wp-block-button .wp-block-button__link {
	font-family: 'JetBrains Mono', monospace;
}

.editor-styles-wrapper .wp-block-quote {
	border-left-color: var(--coregeek-green);
}

.editor-styles-wrapper .wp-block-separator {
	border-color: rgba(0, 255, 65, 0.2);
}

.editor-styles-wrapper .block-editor-block-list__layout {
	color: var(--coregeek-gray-light);
}