/* ============================================
   LVC DESIGNS — MATRIX ACID TRIP THEME
   White / Hacker Green / Red
   "Like Neo took acid and built a website"
   ============================================ */

:root {
	/* === THE MATRIX PALETTE === */
	--black: #0a0a0a;
	--black-deep: #050505;
	--black-card: #0d0d0d;

	/* Hacker Green — The signature */
	--green: #00ff41;
	--green-dim: #00cc33;
	--green-dark: #00991f;
	--green-glow: rgba(0, 255, 65, 0.4);
	--green-subtle: rgba(0, 255, 65, 0.08);
	--green-ghost: rgba(0, 255, 65, 0.03);

	/* Blood Red — The danger */
	--red: #ff0033;
	--red-dim: #cc0029;
	--red-dark: #990020;
	--red-glow: rgba(255, 0, 51, 0.4);
	--red-subtle: rgba(255, 0, 51, 0.08);

	/* Ghost White — The clean */
	--white: #ffffff;
	--white-90: rgba(255, 255, 255, 0.92);
	--white-60: rgba(255, 255, 255, 0.6);
	--white-40: rgba(255, 255, 255, 0.4);
	--white-20: rgba(255, 255, 255, 0.2);
	--white-10: rgba(255, 255, 255, 0.1);
	--white-05: rgba(255, 255, 255, 0.05);
	--white-03: rgba(255, 255, 255, 0.03);

	/* Borders */
	--border: rgba(0, 255, 65, 0.12);
	--border-hover: rgba(0, 255, 65, 0.3);
	--border-red: rgba(255, 0, 51, 0.3);

	/* Glows */
	--glow-green: 0 0 20px rgba(0, 255, 65, 0.3), 0 0 60px rgba(0, 255, 65, 0.1);
	--glow-red: 0 0 20px rgba(255, 0, 51, 0.3), 0 0 60px rgba(255, 0, 51, 0.1);
	--glow-white: 0 0 20px rgba(255, 255, 255, 0.2);

	/* Typography */
	--font-mono: 'Space Mono', 'Courier New', monospace;
	--font-display: 'Orbitron', 'Space Grotesk', sans-serif;
	--font-body: 'Space Grotesk', -apple-system, sans-serif;

	/* Spacing */
	--section-padding: 6rem 2rem;
	--container-max: 1200px;

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--font-body);
	background: var(--black);
	color: var(--white-90);
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	cursor: crosshair;
}

::selection {
	background: var(--green);
	color: var(--black);
}

a {
	color: inherit;
	text-decoration: none;
	transition: all var(--transition-fast);
}

a:hover {
	color: var(--green);
	text-shadow: 0 0 10px var(--green-glow);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 1px solid var(--green);
	outline-offset: 3px;
}

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

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--white);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

h1 { font-size: clamp(2rem, 6vw, 5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 3rem); }
h3 { font-size: clamp(1rem, 2vw, 1.3rem); }

p {
	color: var(--white-60);
	max-width: 65ch;
}

/* ============================================
   SCANLINES — CRT EFFECT OVERLAY
   ============================================ */

.scanlines {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9998;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.03) 0px,
		rgba(0, 0, 0, 0.03) 1px,
		transparent 1px,
		transparent 3px
	);
	animation: scanlineFlicker 0.1s infinite;
}

@keyframes scanlineFlicker {
	0% { opacity: 0.03; }
	50% { opacity: 0.06; }
	100% { opacity: 0.03; }
}

.vignette {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9997;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
}

/* ============================================
   MATRIX RAIN CANVAS
   ============================================ */

#matrix-rain {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	opacity: 0.15;
}

/* ============================================
   SKIP LINK
   ============================================ */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--green);
	color: var(--black);
	padding: 0.75em 1.5em;
	z-index: 10000;
	font-size: 0.9rem;
	font-family: var(--font-mono);
	border: none;
}

.skip-link:focus { top: 0; }

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 1.4rem 2rem;
	transition: all var(--transition-smooth);
}

.nav.scrolled {
	background: rgba(5, 5, 5, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border);
	padding: 0.6rem 2rem;
}

.nav-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-logo-img {
	width: 36px;
	height: 36px;
	filter: invert(1) drop-shadow(0 0 6px rgba(0, 255, 65, 0.5));
	transition: filter var(--transition-smooth);
}

.nav-logo:hover .nav-logo-img {
	filter: invert(1) drop-shadow(0 0 12px rgba(0, 255, 65, 0.8)) brightness(1.3);
}

.nav-logo {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--green) !important;
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	text-shadow: 0 0 20px var(--green-glow);
	letter-spacing: 0.1em;
}

.logo-bracket {
	color: var(--red);
	font-weight: 400;
}

.logo-sub {
	font-size: 0.7rem;
	color: var(--white-40);
	letter-spacing: 0.3em;
	font-family: var(--font-mono);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav-links a {
	font-size: 0.8rem;
	font-family: var(--font-mono);
	color: var(--white-40);
	transition: all var(--transition-fast);
	position: relative;
	text-transform: lowercase;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--green);
	transition: width var(--transition-smooth);
	box-shadow: 0 0 10px var(--green-glow);
}

.nav-links a:hover,
.nav-links a.active {
	color: var(--green);
	text-shadow: 0 0 10px var(--green-glow);
}

.nav-links a:hover::after,
.nav-links a.active::after {
	width: 100%;
}

.nav-cta {
	padding: 0.4rem 1rem !important;
	border: 1px solid var(--red) !important;
	border-radius: 0 !important;
	background: rgba(255, 0, 51, 0.05) !important;
	color: var(--red) !important;
	font-weight: 700 !important;
	transition: all var(--transition-fast) !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.cta-pulse {
	width: 6px;
	height: 6px;
	background: var(--red);
	border-radius: 50%;
	animation: ctaPulse 1.5s ease-in-out infinite;
	box-shadow: 0 0 10px var(--red-glow);
}

@keyframes ctaPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(0.8); }
}

.nav-cta:hover {
	background: rgba(255, 0, 51, 0.15) !important;
	box-shadow: var(--glow-red) !important;
	color: var(--white) !important;
}

.nav-cta::after { display: none !important; }

/* Mobile Menu */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	z-index: 1001;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--green);
	margin: 7px 0;
	transition: all var(--transition-fast);
	box-shadow: 0 0 5px var(--green-glow);
}

.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* ============================================
   HERO — THE RABBIT HOLE
   ============================================ */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8rem 2rem 4rem;
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0.95) 100%), url('../../images/hero-bg.png') center center / cover no-repeat;
}

.hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(0, 255, 65, 0.06) 0%, transparent 70%);
	pointer-events: none;
	animation: heroBreath 8s ease-in-out infinite;
}

.hero::after {
	content: '';
	position: absolute;
	top: 30%;
	right: 5%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(255, 0, 51, 0.04) 0%, transparent 70%);
	pointer-events: none;
	animation: heroBreath 12s ease-in-out infinite reverse;
}

@keyframes heroBreath {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
	50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

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

/* Terminal Badge */
.terminal-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1.2rem;
	border: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--green);
	background: rgba(0, 0, 0, 0.5);
	margin-bottom: 2rem;
	animation: fadeInUp 0.8s ease both;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.terminal-cursor {
	width: 8px;
	height: 14px;
	background: var(--green);
	animation: cursorBlink 1s step-end infinite;
	flex-shrink: 0;
}

@keyframes cursorBlink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* GLITCH TEXT EFFECT */
.glitch {
	position: relative;
	display: inline-block;
	animation: fadeInUp 0.6s ease both;
}

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

.glitch::before {
	color: var(--red);
	animation: glitch-1 3s infinite linear alternate-reverse;
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch::after {
	color: var(--green);
	animation: glitch-2 3s infinite linear alternate-reverse;
	clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
	0% { transform: translate(0); }
	20% { transform: translate(-3px, 3px); }
	40% { transform: translate(-3px, -3px); }
	60% { transform: translate(3px, 3px); }
	80% { transform: translate(3px, -3px); }
	100% { transform: translate(0); }
}

@keyframes glitch-2 {
	0% { transform: translate(0); }
	20% { transform: translate(3px, -3px); }
	40% { transform: translate(3px, 3px); }
	60% { transform: translate(-3px, -3px); }
	80% { transform: translate(-3px, 3px); }
	100% { transform: translate(0); }
}

/* ITALIAN FLAG HERO LAYOUT — green | white | red side by side */
.hero-flag {
	display: flex;
	gap: clamp(1.5rem, 4vw, 3rem);
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
}

.hero-flag-col {
	text-align: center;
	position: relative;
}

/* Subtle vertical dividers between flag columns */
.hero-flag-col + .hero-flag-col::before {
	content: '';
	position: absolute;
	left: calc(-0.75rem - clamp(0.5rem, 2vw, 1.5rem));
	top: 10%;
	height: 80%;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--white-20), transparent);
}

.hero-title {
	margin-bottom: 0.5rem;
	line-height: 1;
	font-size: clamp(2rem, 5vw, 4.5rem);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.4);
}

.hero-accent {
	font-size: clamp(2.5rem, 7vw, 6rem);
}

/* CHROMATIC ABERRATION */
.chromatic {
	text-shadow:
		-2px 0 var(--red),
		2px 0 var(--green);
	animation: chromaticShift 4s ease-in-out infinite;
}

@keyframes chromaticShift {
	0%, 100% { text-shadow: -2px 0 var(--red), 2px 0 var(--green); }
	25% { text-shadow: -4px 0 var(--red), 4px 0 var(--green); }
	50% { text-shadow: -1px 0 var(--red), 1px 0 var(--green); }
	75% { text-shadow: -3px 1px var(--red), 3px -1px var(--green); }
}

.hero-subtitle {
	font-family: var(--font-mono);
	font-size: clamp(0.85rem, 1.5vw, 1rem);
	color: var(--white-60);
	margin-bottom: 3rem;
	max-width: 700px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.7);
	margin-left: auto;
	margin-right: auto;
	animation: fadeInUp 0.8s ease 0.3s both;
	line-height: 1.8;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	animation: fadeInUp 0.8s ease 0.4s both;
}

/* Floating code symbols */
.hero-floaters {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.floater {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 1.2rem;
	opacity: 0.08;
	animation: floatAround 20s ease-in-out infinite;
}

.floater-1 { top: 15%; left: 10%; color: var(--green); animation-delay: 0s; }
.floater-2 { top: 25%; right: 15%; color: var(--red); animation-delay: -3s; font-size: 1.5rem; }
.floater-3 { bottom: 30%; left: 5%; color: var(--white); animation-delay: -6s; }
.floater-4 { top: 60%; right: 8%; color: var(--green); animation-delay: -9s; font-size: 2rem; }
.floater-5 { bottom: 15%; left: 20%; color: var(--red); animation-delay: -12s; }
.floater-6 { top: 40%; left: 85%; color: var(--white); animation-delay: -15s; }

@keyframes floatAround {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(20px, -30px) rotate(5deg); }
	50% { transform: translate(-10px, -60px) rotate(-3deg); }
	75% { transform: translate(-30px, -20px) rotate(2deg); }
}

/* 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: fadeInUp 1s ease 0.6s both;
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, var(--green), transparent);
	animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50% { opacity: 1; transform: scaleY(1.2); }
}

.scroll-indicator span {
	font-family: var(--font-mono);
	font-size: 0.6rem;
	color: var(--white-20);
	letter-spacing: 0.2em;
}

/* ============================================
   BUTTONS — WEAPONIZED
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 2rem;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--transition-fast);
	border: none;
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.btn-primary {
	background: var(--green);
	color: var(--black);
	box-shadow: var(--glow-green);
	border: 1px solid var(--green);
}

.btn-primary:hover {
	background: var(--white);
	color: var(--black);
	box-shadow: var(--glow-white);
	transform: translateY(-2px);
}

.btn-secondary {
	background: transparent;
	color: var(--white-60);
	border: 1px solid var(--white-20);
}

.btn-secondary:hover {
	border-color: var(--green);
	color: var(--green);
	box-shadow: var(--glow-green);
	text-shadow: 0 0 10px var(--green-glow);
}

/* Button glitch effect */
.btn-glitch {
	position: relative;
}

.btn-glitch .btn-text {
	position: relative;
	z-index: 1;
}

.btn-glitch .btn-glitch-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--red);
	opacity: 0;
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.btn-glitch:hover .btn-glitch-text {
	animation: btnGlitch 0.3s ease;
}

@keyframes btnGlitch {
	0% { opacity: 0; transform: translate(0); }
	20% { opacity: 1; transform: translate(-5px, 2px); }
	40% { opacity: 0; transform: translate(5px, -2px); }
	60% { opacity: 1; transform: translate(-3px, -1px); }
	80% { opacity: 0; transform: translate(3px, 1px); }
	100% { opacity: 0; transform: translate(0); }
}

.btn-scan {
	overflow: hidden;
}

.btn-scan::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.1), transparent);
	transition: left 0.5s ease;
}

.btn-scan:hover::before {
	left: 100%;
}

.btn-sm {
	padding: 0.4rem 1rem;
	font-size: 0.7rem;
}

/* ============================================
   SECTIONS
   ============================================ */

section {
	position: relative;
	z-index: 1;
}

.section { padding: var(--section-padding); position: relative; z-index: 1; }
.section-inner { max-width: var(--container-max); margin: 0 auto; position: relative; z-index: 3; }
.section-header { text-align: center; margin-bottom: 4rem; }

/* === AI-GENERATED SECTION BACKGROUNDS === */
#about {
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.6) 30%, rgba(10, 10, 10, 0.6) 70%, rgba(10, 10, 10, 0.92) 100%), url('../../images/about-bg.png') center center / cover no-repeat;
	overflow: hidden;
}

#services {
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.65) 30%, rgba(10, 10, 10, 0.65) 70%, rgba(10, 10, 10, 0.92) 100%), url('../../images/services-bg.png') center center / cover no-repeat;
	overflow: hidden;
}

#contact {
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.55) 30%, rgba(10, 10, 10, 0.55) 70%, rgba(10, 10, 10, 0.9) 100%), url('../../images/contact-bg.png') center center / cover no-repeat;
	overflow: hidden;
}

/* ============================================
   SECTION-SPECIFIC ANIMATED OVERLAYS
   Each section has unique CSS-only effects that
   bring the AI backgrounds to life
   ============================================ */

/* --- HERO: UFO BEAM + FLYING CAR STREAKS + DEVICE PULSE --- */
.hero {
	overflow: hidden;
}

/* UFO abduction beam — sweeping red cone from top-right */
.hero-ufo-beam {
	position: absolute;
	top: -5%;
	right: 12%;
	width: 200px;
	height: 120vh;
	background: linear-gradient(180deg, rgba(255, 0, 51, 0.4) 0%, rgba(255, 0, 51, 0.08) 40%, transparent 100%);
	clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
	animation: ufoBeamSweep 6s ease-in-out infinite, ufoBeamPulse 2s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: screen;
}

@keyframes ufoBeamSweep {
	0%, 100% { transform: rotate(-3deg) translateX(0); opacity: 0.7; }
	25% { transform: rotate(2deg) translateX(30px); opacity: 1; }
	50% { transform: rotate(-1deg) translateX(-20px); opacity: 0.5; }
	75% { transform: rotate(3deg) translateX(15px); opacity: 0.9; }
}

@keyframes ufoBeamPulse {
	0%, 100% { filter: blur(3px) brightness(1); }
	50% { filter: blur(6px) brightness(1.4); }
}

/* Flying car light streaks — horizontal neon trails */
.hero-streak {
	position: absolute;
	height: 2px;
	border-radius: 2px;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
}

.hero-streak-1 {
	top: 25%;
	left: -20%;
	width: 40%;
	background: linear-gradient(90deg, transparent, #00ff41 30%, #00ff41 70%, transparent);
	animation: streakFly1 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	box-shadow: 0 0 15px rgba(0, 255, 65, 0.6), 0 0 30px rgba(0, 255, 65, 0.3);
}

.hero-streak-2 {
	top: 45%;
	right: -20%;
	width: 35%;
	background: linear-gradient(270deg, transparent, #ff0033 30%, #ff0033 70%, transparent);
	animation: streakFly2 5s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.5s;
	box-shadow: 0 0 15px rgba(255, 0, 51, 0.6), 0 0 30px rgba(255, 0, 51, 0.3);
}

.hero-streak-3 {
	top: 65%;
	left: -15%;
	width: 25%;
	height: 1px;
	background: linear-gradient(90deg, transparent, #ffffff 40%, #ffffff 60%, transparent);
	animation: streakFly1 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite 3s;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes streakFly1 {
	0% { transform: translateX(0); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateX(160vw); opacity: 0; }
}

@keyframes streakFly2 {
	0% { transform: translateX(0); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateX(-160vw); opacity: 0; }
}

/* Pulsing tech glow — simulates devices powering on/off */
.hero-device-pulse {
	position: absolute;
	bottom: 15%;
	left: 20%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 255, 65, 0.15) 0%, transparent 70%);
	animation: devicePulse 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

.hero-device-pulse-2 {
	position: absolute;
	bottom: 25%;
	right: 25%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 0, 51, 0.12) 0%, transparent 70%);
	animation: devicePulse 4s ease-in-out infinite 1s;
	pointer-events: none;
	z-index: 1;
}

@keyframes devicePulse {
	0%, 100% { transform: scale(1); opacity: 0.3; }
	50% { transform: scale(1.6); opacity: 1; }
}

/* --- ABOUT: DATA STORM + CODE RAIN SURGE + ENERGY FIELD --- */

/* Vertical data streams rising upward */
.about-datastream {
	position: absolute;
	width: 1px;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
}

.about-datastream-1 {
	left: 15%;
	height: 60%;
	background: linear-gradient(to top, transparent, rgba(0, 255, 65, 0.5) 50%, transparent);
	animation: dataRise 4s ease-in-out infinite;
}

.about-datastream-2 {
	left: 35%;
	height: 80%;
	background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
	animation: dataRise 5s ease-in-out infinite 1s;
}

.about-datastream-3 {
	right: 25%;
	height: 70%;
	background: linear-gradient(to top, transparent, rgba(255, 0, 51, 0.4) 50%, transparent);
	animation: dataRise 4.5s ease-in-out infinite 2s;
}

.about-datastream-4 {
	right: 10%;
	height: 50%;
	background: linear-gradient(to top, transparent, rgba(0, 255, 65, 0.3) 50%, transparent);
	animation: dataRise 3.5s ease-in-out infinite 0.5s;
}

@keyframes dataRise {
	0% { transform: translateY(100%) scaleY(0.5); opacity: 0; }
	20% { opacity: 0.8; }
	80% { opacity: 0.8; }
	100% { transform: translateY(-100%) scaleY(1.5); opacity: 0; }
}

/* Energy field around the "Neo" figure — pulsing rings */
.about-energy-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(0, 255, 65, 0.2);
	pointer-events: none;
	z-index: 0;
}

.about-energy-ring-1 {
	width: 300px;
	height: 300px;
	animation: energyExpand 4s ease-out infinite;
}

.about-energy-ring-2 {
	width: 300px;
	height: 300px;
	border-color: rgba(255, 0, 51, 0.15);
	animation: energyExpand 4s ease-out infinite 1.3s;
}

.about-energy-ring-3 {
	width: 300px;
	height: 300px;
	border-color: rgba(255, 255, 255, 0.1);
	animation: energyExpand 4s ease-out infinite 2.6s;
}

@keyframes energyExpand {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; border-width: 2px; }
	100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 0.5px; }
}

/* Glitch flicker overlay */
.about-glitch-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 65, 0.03) 50%, transparent 100%);
	animation: aboutGlitch 8s step-end infinite;
}

@keyframes aboutGlitch {
	0%, 100% { clip-path: inset(0 0 0 0); }
	5% { clip-path: inset(20% 0 60% 0); background-position: -10px 0; }
	5.5% { clip-path: inset(0 0 0 0); }
	42% { clip-path: inset(40% 0 30% 0); background-position: 5px 0; }
	42.5% { clip-path: inset(0 0 0 0); }
	78% { clip-path: inset(70% 0 5% 0); background-position: -8px 0; }
	78.5% { clip-path: inset(0 0 0 0); }
}

/* --- SERVICES: EXPLODING PARTICLES + ELECTRIC ARCS + GLITCH BANDS --- */

/* Particles flying outward from center */
.services-particle {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.services-particle-1 {
	top: 50%;
	left: 50%;
	background: #00ff41;
	box-shadow: 0 0 6px #00ff41;
	animation: particleExplode1 3s ease-out infinite;
}

.services-particle-2 {
	top: 50%;
	left: 50%;
	background: #ff0033;
	box-shadow: 0 0 6px #ff0033;
	animation: particleExplode2 3.5s ease-out infinite 0.5s;
}

.services-particle-3 {
	top: 50%;
	left: 50%;
	background: #ffffff;
	box-shadow: 0 0 6px #ffffff;
	animation: particleExplode3 2.8s ease-out infinite 1s;
}

.services-particle-4 {
	top: 50%;
	left: 50%;
	background: #00ff41;
	box-shadow: 0 0 6px #00ff41;
	animation: particleExplode4 3.2s ease-out infinite 1.5s;
}

.services-particle-5 {
	top: 50%;
	left: 50%;
	background: #ff0033;
	box-shadow: 0 0 6px #ff0033;
	animation: particleExplode5 4s ease-out infinite 0.8s;
}

.services-particle-6 {
	top: 50%;
	left: 50%;
	background: #ffffff;
	box-shadow: 0 0 4px #ffffff;
	animation: particleExplode6 3s ease-out infinite 2s;
}

@keyframes particleExplode1 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(-45vw, -35vh) scale(0); opacity: 0; }
}
@keyframes particleExplode2 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(40vw, -40vh) scale(0); opacity: 0; }
}
@keyframes particleExplode3 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(-35vw, 30vh) scale(0); opacity: 0; }
}
@keyframes particleExplode4 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(45vw, 25vh) scale(0); opacity: 0; }
}
@keyframes particleExplode5 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(-20vw, -45vh) scale(0); opacity: 0; }
}
@keyframes particleExplode6 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(30vw, -20vh) scale(0); opacity: 0; }
}

/* Electric arc — horizontal lightning bolts */
.services-arc {
	position: absolute;
	height: 2px;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
}

.services-arc-1 {
	top: 30%;
	left: 10%;
	width: 80%;
	background: linear-gradient(90deg, transparent 0%, #00ff41 20%, transparent 25%, #00ff41 40%, transparent 45%, #00ff41 70%, transparent 75%, #00ff41 90%, transparent 100%);
	animation: arcFlash 5s step-start infinite;
	box-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
}

.services-arc-2 {
	top: 70%;
	left: 5%;
	width: 90%;
	background: linear-gradient(90deg, transparent 0%, #ff0033 15%, transparent 20%, #ff0033 35%, transparent 42%, #ff0033 60%, transparent 68%, #ff0033 85%, transparent 100%);
	animation: arcFlash 6s step-start infinite 2s;
	box-shadow: 0 0 8px rgba(255, 0, 51, 0.8);
}

@keyframes arcFlash {
	0%, 100% { opacity: 0; transform: scaleX(1); }
	4% { opacity: 1; transform: scaleX(1.02); }
	6% { opacity: 0; }
	8% { opacity: 0.8; transform: scaleX(0.98); }
	10% { opacity: 0; }
	48% { opacity: 0; }
	50% { opacity: 0.6; transform: scaleX(1.01); }
	51% { opacity: 0; }
}

/* Chromatic aberration glitch bands */
.services-chromatic {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	animation: chromaticShift 6s step-end infinite;
}

@keyframes chromaticShift {
	0%, 100% { box-shadow: none; }
	15% { box-shadow: inset -3px 0 0 rgba(255, 0, 51, 0.1), inset 3px 0 0 rgba(0, 255, 65, 0.1); }
	15.5% { box-shadow: none; }
	45% { box-shadow: inset 5px 0 0 rgba(0, 255, 65, 0.08), inset -5px 0 0 rgba(255, 0, 51, 0.08); }
	46% { box-shadow: none; }
	72% { box-shadow: inset -2px 0 0 rgba(255, 0, 51, 0.12), inset 2px 0 0 rgba(0, 255, 65, 0.12); }
	72.8% { box-shadow: none; }
}

/* --- CONTACT: PORTAL VORTEX SPIN + WORMHOLE PULL + TRANSMISSION WAVES --- */

/* Spinning portal rings */
.contact-vortex {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid;
	pointer-events: none;
	z-index: 0;
}

.contact-vortex-1 {
	width: 500px;
	height: 500px;
	border-color: rgba(0, 255, 65, 0.15);
	animation: vortexSpin 12s linear infinite;
}

.contact-vortex-2 {
	width: 400px;
	height: 400px;
	border-color: rgba(255, 0, 51, 0.2);
	animation: vortexSpin 8s linear infinite reverse;
}

.contact-vortex-3 {
	width: 600px;
	height: 600px;
	border-color: rgba(255, 255, 255, 0.08);
	animation: vortexSpin 16s linear infinite;
}

@keyframes vortexSpin {
	0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.5; }
	50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); opacity: 1; }
	100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); opacity: 0.5; }
}

/* Inward-pulling particles — sucked into the portal */
.contact-pull-particle {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.contact-pull-1 {
	top: 10%;
	left: 5%;
	background: #00ff41;
	box-shadow: 0 0 4px #00ff41;
	animation: pullToCenter 5s ease-in infinite;
}

.contact-pull-2 {
	top: 5%;
	right: 10%;
	background: #ff0033;
	box-shadow: 0 0 4px #ff0033;
	animation: pullToCenter2 6s ease-in infinite 1s;
}

.contact-pull-3 {
	bottom: 15%;
	left: 8%;
	background: #ffffff;
	box-shadow: 0 0 4px #ffffff;
	animation: pullToCenter3 4.5s ease-in infinite 2s;
}

.contact-pull-4 {
	bottom: 10%;
	right: 5%;
	background: #00ff41;
	box-shadow: 0 0 4px #00ff41;
	animation: pullToCenter4 5.5s ease-in infinite 0.5s;
}

@keyframes pullToCenter {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(45vw, 40vh) scale(0); opacity: 0; }
}
@keyframes pullToCenter2 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(-40vw, 45vh) scale(0); opacity: 0; }
}
@keyframes pullToCenter3 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(42vw, -35vh) scale(0); opacity: 0; }
}
@keyframes pullToCenter4 {
	0% { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(-45vw, -40vh) scale(0); opacity: 0; }
}

/* Transmission wave — pulsing concentric rings from center */
.contact-wave {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid rgba(0, 255, 65, 0.3);
	pointer-events: none;
	z-index: 0;
	animation: transmissionWave 3s ease-out infinite;
}

.contact-wave-2 {
	animation-delay: 1s;
	border-color: rgba(255, 0, 51, 0.25);
}

.contact-wave-3 {
	animation-delay: 2s;
	border-color: rgba(255, 255, 255, 0.15);
}

@keyframes transmissionWave {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(12); opacity: 0; }
}

/* ============================================
   3D ENGINE — LEONARDO DA VINCI MEETS THE MATRIX
   Full perspective world, mouse-reactive depth,
   geometric wireframes, holographic architecture,
   Tron grid, DNA helix, infinite tunnel
   ============================================ */

/* === GLOBAL 3D PERSPECTIVE SYSTEM === */
.hero, #about, #services, #contact, #arsenal {
	perspective: 1200px;
	transform-style: preserve-3d;
}

/* Mouse-tracking 3D tilt — applied via JS */
[data-3d-depth] {
	transform-style: preserve-3d;
	transition: transform 0.15s ease-out;
	will-change: transform;
}

/* ======================================================
   HERO: TRON GRID FLOOR + DNA HELIX + HOLOGRAPHIC
   PYRAMID + WIREFRAME CUBES + ORBITAL RINGS
   ====================================================== */

/* --- TRON-STYLE 3D GRID FLOOR --- */
.hero-grid-floor {
	position: absolute;
	bottom: 0;
	left: -50%;
	width: 200%;
	height: 60%;
	background:
		linear-gradient(90deg, rgba(0, 255, 65, 0.06) 1px, transparent 1px),
		linear-gradient(0deg, rgba(0, 255, 65, 0.06) 1px, transparent 1px);
	background-size: 60px 40px;
	transform: perspective(500px) rotateX(65deg) translateZ(0);
	transform-origin: center bottom;
	animation: gridScroll 4s linear infinite;
	pointer-events: none;
	z-index: 0;
	mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 80%);
	-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 80%);
}

.hero-grid-floor::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 0, 51, 0.03) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 0, 51, 0.03) 1px, transparent 1px);
	background-size: 120px 80px;
	animation: gridScroll 8s linear infinite reverse;
}

@keyframes gridScroll {
	0% { background-position: 0 0; }
	100% { background-position: 0 40px; }
}

/* Horizon glow line */
.hero-horizon {
	position: absolute;
	bottom: 38%;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent 5%, rgba(0, 255, 65, 0.3) 30%, rgba(255, 0, 51, 0.4) 50%, rgba(0, 255, 65, 0.3) 70%, transparent 95%);
	box-shadow: 0 0 40px rgba(0, 255, 65, 0.2), 0 0 80px rgba(255, 0, 51, 0.15);
	pointer-events: none;
	z-index: 0;
	animation: horizonPulse 4s ease-in-out infinite;
}

@keyframes horizonPulse {
	0%, 100% { opacity: 0.5; filter: blur(1px); }
	50% { opacity: 1; filter: blur(2px); }
}

/* --- 3D WIREFRAME CUBES (upgraded) --- */
.hero-3d-scene {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	perspective: 1000px;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.hero-cube {
	position: absolute;
	transform-style: preserve-3d;
}

.hero-cube-1 {
	width: 140px;
	height: 140px;
	top: 12%;
	left: 6%;
	animation: cubeOrbit1 25s linear infinite;
}

.hero-cube-2 {
	width: 90px;
	height: 90px;
	bottom: 18%;
	right: 8%;
	animation: cubeOrbit2 18s linear infinite;
}

.hero-cube-3 {
	width: 60px;
	height: 60px;
	top: 55%;
	left: 78%;
	animation: cubeOrbit3 30s linear infinite;
}

.hero-cube-4 {
	width: 45px;
	height: 45px;
	top: 30%;
	left: 88%;
	animation: cubeOrbit1 22s linear infinite reverse;
}

.hero-cube-5 {
	width: 70px;
	height: 70px;
	bottom: 35%;
	left: 3%;
	animation: cubeOrbit2 28s linear infinite 5s;
}

.cube-face {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0, 255, 65, 0.15);
	background: rgba(0, 255, 65, 0.01);
	box-shadow: inset 0 0 30px rgba(0, 255, 65, 0.03);
}

/* Scale translateZ values per cube size */
.hero-cube-1 .cube-face-front  { transform: translateZ(70px); }
.hero-cube-1 .cube-face-back   { transform: rotateY(180deg) translateZ(70px); }
.hero-cube-1 .cube-face-right  { transform: rotateY(90deg) translateZ(70px); }
.hero-cube-1 .cube-face-left   { transform: rotateY(-90deg) translateZ(70px); }
.hero-cube-1 .cube-face-top    { transform: rotateX(90deg) translateZ(70px); }
.hero-cube-1 .cube-face-bottom { transform: rotateX(-90deg) translateZ(70px); }

.hero-cube-2 .cube-face { border-color: rgba(255, 0, 51, 0.15); background: rgba(255, 0, 51, 0.01); }
.hero-cube-2 .cube-face-front  { transform: translateZ(45px); }
.hero-cube-2 .cube-face-back   { transform: rotateY(180deg) translateZ(45px); }
.hero-cube-2 .cube-face-right  { transform: rotateY(90deg) translateZ(45px); }
.hero-cube-2 .cube-face-left   { transform: rotateY(-90deg) translateZ(45px); }
.hero-cube-2 .cube-face-top    { transform: rotateX(90deg) translateZ(45px); }
.hero-cube-2 .cube-face-bottom { transform: rotateX(-90deg) translateZ(45px); }

.hero-cube-3 .cube-face { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.005); }
.hero-cube-3 .cube-face-front  { transform: translateZ(30px); }
.hero-cube-3 .cube-face-back   { transform: rotateY(180deg) translateZ(30px); }
.hero-cube-3 .cube-face-right  { transform: rotateY(90deg) translateZ(30px); }
.hero-cube-3 .cube-face-left   { transform: rotateY(-90deg) translateZ(30px); }
.hero-cube-3 .cube-face-top    { transform: rotateX(90deg) translateZ(30px); }
.hero-cube-3 .cube-face-bottom { transform: rotateX(-90deg) translateZ(30px); }

.hero-cube-4 .cube-face { border-color: rgba(0, 255, 65, 0.08); }
.hero-cube-4 .cube-face-front  { transform: translateZ(22px); }
.hero-cube-4 .cube-face-back   { transform: rotateY(180deg) translateZ(22px); }
.hero-cube-4 .cube-face-right  { transform: rotateY(90deg) translateZ(22px); }
.hero-cube-4 .cube-face-left   { transform: rotateY(-90deg) translateZ(22px); }
.hero-cube-4 .cube-face-top    { transform: rotateX(90deg) translateZ(22px); }
.hero-cube-4 .cube-face-bottom { transform: rotateX(-90deg) translateZ(22px); }

.hero-cube-5 .cube-face { border-color: rgba(255, 0, 51, 0.1); }
.hero-cube-5 .cube-face-front  { transform: translateZ(35px); }
.hero-cube-5 .cube-face-back   { transform: rotateY(180deg) translateZ(35px); }
.hero-cube-5 .cube-face-right  { transform: rotateY(90deg) translateZ(35px); }
.hero-cube-5 .cube-face-left   { transform: rotateY(-90deg) translateZ(35px); }
.hero-cube-5 .cube-face-top    { transform: rotateX(90deg) translateZ(35px); }
.hero-cube-5 .cube-face-bottom { transform: rotateX(-90deg) translateZ(35px); }

@keyframes cubeOrbit1 {
	0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0); }
	25%  { transform: rotateX(90deg) rotateY(90deg) rotateZ(45deg) translateY(-20px); }
	50%  { transform: rotateX(180deg) rotateY(180deg) rotateZ(90deg) translateY(0); }
	75%  { transform: rotateX(270deg) rotateY(270deg) rotateZ(135deg) translateY(20px); }
	100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg) translateY(0); }
}

@keyframes cubeOrbit2 {
	0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0); }
	33%  { transform: rotateX(120deg) rotateY(240deg) rotateZ(60deg) translateX(15px); }
	66%  { transform: rotateX(240deg) rotateY(120deg) rotateZ(120deg) translateX(-15px); }
	100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg) translateX(0); }
}

@keyframes cubeOrbit3 {
	0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
	100% { transform: rotateX(-360deg) rotateY(720deg) rotateZ(360deg); }
}

/* --- 3D DNA DOUBLE HELIX --- */
.hero-dna {
	position: absolute;
	right: 5%;
	top: 10%;
	height: 80%;
	width: 80px;
	pointer-events: none;
	z-index: 1;
	transform-style: preserve-3d;
	perspective: 600px;
}

.dna-node {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	left: 50%;
}

.dna-node-green {
	background: var(--green);
	box-shadow: 0 0 8px rgba(0, 255, 65, 0.6), 0 0 20px rgba(0, 255, 65, 0.3);
}

.dna-node-red {
	background: var(--red);
	box-shadow: 0 0 8px rgba(255, 0, 51, 0.6), 0 0 20px rgba(255, 0, 51, 0.3);
}

.dna-connector {
	position: absolute;
	height: 1px;
	left: 15%;
	width: 70%;
	background: linear-gradient(90deg, rgba(0, 255, 65, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 0, 51, 0.3));
}

/* DNA animation generated by JS for smooth sine wave */

/* --- HOLOGRAPHIC PYRAMID --- */
.hero-pyramid {
	position: absolute;
	left: 5%;
	top: 25%;
	width: 160px;
	height: 160px;
	transform-style: preserve-3d;
	animation: pyramidFloat 12s ease-in-out infinite, pyramidRotate 20s linear infinite;
	pointer-events: none;
	z-index: 1;
}

.pyramid-face {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 140px solid rgba(0, 255, 65, 0.04);
	transform-origin: center bottom;
	filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.15));
}

.pyramid-face::after {
	content: '';
	position: absolute;
	top: 0;
	left: -80px;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 140px solid transparent;
	border-bottom-color: rgba(0, 255, 65, 0.08);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pyramid-face-1 { transform: rotateY(0deg)   translateZ(46px) rotateX(30deg); }
.pyramid-face-2 { transform: rotateY(90deg)  translateZ(46px) rotateX(30deg); }
.pyramid-face-3 { transform: rotateY(180deg) translateZ(46px) rotateX(30deg); }
.pyramid-face-4 { transform: rotateY(270deg) translateZ(46px) rotateX(30deg); }

.pyramid-base {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 160px;
	height: 160px;
	border: 1px solid rgba(0, 255, 65, 0.12);
	background: rgba(0, 255, 65, 0.02);
	transform: rotateX(90deg) translateZ(-70px);
}

@keyframes pyramidFloat {
	0%, 100% { transform: translateY(0) rotateY(var(--py-rot, 0deg)); }
	50% { transform: translateY(-30px) rotateY(var(--py-rot, 180deg)); }
}

@keyframes pyramidRotate {
	0%   { --py-rot: 0deg; transform: rotateY(0deg) translateY(0); }
	25%  { transform: rotateY(90deg) translateY(-15px); }
	50%  { transform: rotateY(180deg) translateY(-30px); }
	75%  { transform: rotateY(270deg) translateY(-15px); }
	100% { transform: rotateY(360deg) translateY(0); }
}

/* --- ORBITAL RINGS (upgraded — multi-axis gyroscope) --- */
.hero-holo-ring {
	position: absolute;
	width: 400px;
	height: 400px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
	transform-style: preserve-3d;
}

.holo-ring-track {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 255, 65, 0.1);
	transform-style: preserve-3d;
	animation: gyroSpin1 8s linear infinite;
}

.holo-ring-track-2 {
	border-color: rgba(255, 0, 51, 0.08);
	animation: gyroSpin2 12s linear infinite;
}

.holo-ring-track-3 {
	border-color: rgba(255, 255, 255, 0.05);
	animation: gyroSpin3 16s linear infinite;
}

.holo-ring-track-4 {
	inset: 30px;
	border-color: rgba(0, 255, 65, 0.06);
	animation: gyroSpin1 6s linear infinite reverse;
}

.holo-ring-track-5 {
	inset: 60px;
	border-color: rgba(255, 0, 51, 0.05);
	animation: gyroSpin2 10s linear infinite reverse;
}

/* Small glowing dots on the rings */
.holo-ring-track::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 10px var(--green), 0 0 20px var(--green-glow);
}

.holo-ring-track-2::before { background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 20px var(--red-glow); }
.holo-ring-track-3::before { background: var(--white); box-shadow: 0 0 10px rgba(255,255,255,0.5); }

@keyframes gyroSpin1 {
	0%   { transform: rotateX(70deg) rotateY(0deg) rotateZ(0deg); }
	100% { transform: rotateX(70deg) rotateY(0deg) rotateZ(360deg); }
}

@keyframes gyroSpin2 {
	0%   { transform: rotateX(30deg) rotateY(60deg) rotateZ(0deg); }
	100% { transform: rotateX(30deg) rotateY(60deg) rotateZ(360deg); }
}

@keyframes gyroSpin3 {
	0%   { transform: rotateX(50deg) rotateY(-40deg) rotateZ(0deg); }
	100% { transform: rotateX(50deg) rotateY(-40deg) rotateZ(360deg); }
}

/* --- 3D FLOATING HOLOGRAPHIC LOGO --- */
.hero-logo-3d {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	height: 280px;
	pointer-events: none;
	z-index: 0;
	transform-style: preserve-3d;
	animation: logoFloat 8s ease-in-out infinite, logoRotate3d 30s linear infinite;
	opacity: 0.08;
	filter: invert(1) drop-shadow(0 0 15px rgba(0, 255, 65, 0.4)) drop-shadow(0 0 40px rgba(0, 255, 65, 0.2));
}

.hero-logo-3d img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(2) contrast(1.5);
	mix-blend-mode: screen;
}

@keyframes logoFloat {
	0%, 100% { transform: translate(-50%, -50%) translateY(0) translateZ(0); }
	50% { transform: translate(-50%, -50%) translateY(-20px) translateZ(40px); }
}

@keyframes logoRotate3d {
	0%   { transform: translate(-50%, -50%) rotateY(0deg) rotateX(5deg); }
	25%  { transform: translate(-50%, -50%) rotateY(10deg) rotateX(-5deg) translateY(-15px); }
	50%  { transform: translate(-50%, -50%) rotateY(0deg) rotateX(5deg); }
	75%  { transform: translate(-50%, -50%) rotateY(-10deg) rotateX(-5deg) translateY(-15px); }
	100% { transform: translate(-50%, -50%) rotateY(0deg) rotateX(5deg); }
}

/* --- 3D TEXT DEPTH EXTRUSION --- */
.hero-flag .hero-title .glitch {
	text-shadow:
		0 1px 0 rgba(0, 0, 0, 0.5),
		0 2px 0 rgba(0, 0, 0, 0.45),
		0 3px 0 rgba(0, 0, 0, 0.4),
		0 4px 0 rgba(0, 0, 0, 0.35),
		0 5px 0 rgba(0, 0, 0, 0.3),
		0 6px 0 rgba(0, 0, 0, 0.25),
		0 7px 15px rgba(0, 0, 0, 0.5),
		0 10px 30px rgba(0, 0, 0, 0.4);
}

.hero-flag .hero-flag-green .glitch {
	text-shadow:
		0 1px 0 rgba(0, 80, 20, 0.6),
		0 2px 0 rgba(0, 80, 20, 0.5),
		0 3px 0 rgba(0, 80, 20, 0.4),
		0 4px 0 rgba(0, 80, 20, 0.3),
		0 5px 0 rgba(0, 80, 20, 0.2),
		0 6px 15px rgba(0, 255, 65, 0.2),
		0 10px 30px rgba(0, 0, 0, 0.5);
}

.hero-flag .hero-flag-red .glitch {
	text-shadow:
		0 1px 0 rgba(100, 0, 15, 0.6),
		0 2px 0 rgba(100, 0, 15, 0.5),
		0 3px 0 rgba(100, 0, 15, 0.4),
		0 4px 0 rgba(100, 0, 15, 0.3),
		0 5px 0 rgba(100, 0, 15, 0.2),
		0 6px 15px rgba(255, 0, 51, 0.2),
		0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ======================================================
   ABOUT: 3D HOLOGRAPHIC HUD PANELS + CARD TILT +
   ROTATING ICOSAHEDRON + FLOATING ARCHITECTURE
   ====================================================== */

/* --- 3D HUD PANELS with fake data readouts --- */
.about-hud-panel {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	border: 1px solid;
	padding: 12px;
	font-family: var(--font-mono);
	font-size: 0.55rem;
	color: rgba(0, 255, 65, 0.3);
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.about-hud-panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	background: linear-gradient(90deg, rgba(0, 255, 65, 0.08), transparent);
}

.about-hud-1 {
	width: 180px;
	height: 110px;
	top: 5%;
	left: 3%;
	border-color: rgba(0, 255, 65, 0.1);
	background: rgba(0, 0, 0, 0.3);
	animation: hudFloat1 10s ease-in-out infinite;
}

.about-hud-2 {
	width: 150px;
	height: 90px;
	bottom: 8%;
	right: 4%;
	border-color: rgba(255, 0, 51, 0.1);
	background: rgba(0, 0, 0, 0.3);
	color: rgba(255, 0, 51, 0.3);
	animation: hudFloat2 12s ease-in-out infinite 3s;
}

.about-hud-2::before {
	background: linear-gradient(90deg, rgba(255, 0, 51, 0.08), transparent);
}

.about-hud-3 {
	width: 120px;
	height: 70px;
	top: 35%;
	right: 2%;
	border-color: rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.2);
	color: rgba(255, 255, 255, 0.2);
	animation: hudFloat3 11s ease-in-out infinite 6s;
}

.about-hud-3::before {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
}

/* Animated scan line inside HUD */
.hud-scanline {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, currentColor, transparent);
	opacity: 0.4;
	animation: hudScan 3s ease-in-out infinite;
}

@keyframes hudScan {
	0%   { top: 15px; }
	100% { top: calc(100% - 5px); }
}

/* HUD data bars */
.hud-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 16px;
}

.hud-bar {
	height: 3px;
	background: currentColor;
	opacity: 0.3;
	animation: hudBarPulse 2s ease-in-out infinite;
}

.hud-bar:nth-child(1) { width: 70%; animation-delay: 0s; }
.hud-bar:nth-child(2) { width: 45%; animation-delay: 0.3s; }
.hud-bar:nth-child(3) { width: 85%; animation-delay: 0.6s; }
.hud-bar:nth-child(4) { width: 30%; animation-delay: 0.9s; }

@keyframes hudBarPulse {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 0.5; }
}

@keyframes hudFloat1 {
	0%, 100% { transform: perspective(800px) rotateY(-20deg) rotateX(5deg) translateZ(0) translateY(0); opacity: 0.5; }
	50% { transform: perspective(800px) rotateY(-8deg) rotateX(-3deg) translateZ(40px) translateY(-25px); opacity: 0.8; }
}

@keyframes hudFloat2 {
	0%, 100% { transform: perspective(800px) rotateY(25deg) rotateX(-5deg) translateZ(0) translateY(0); opacity: 0.4; }
	50% { transform: perspective(800px) rotateY(10deg) rotateX(5deg) translateZ(30px) translateY(-20px); opacity: 0.7; }
}

@keyframes hudFloat3 {
	0%, 100% { transform: perspective(800px) rotateY(15deg) rotateX(10deg) translateZ(0); opacity: 0.3; }
	50% { transform: perspective(800px) rotateY(-5deg) rotateX(-5deg) translateZ(50px); opacity: 0.6; }
}

/* --- 3D ROTATING WIREFRAME ICOSAHEDRON --- */
.about-icosahedron {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 200px;
	pointer-events: none;
	z-index: 0;
	transform-style: preserve-3d;
	animation: icoRotate 30s linear infinite;
	opacity: 0.12;
}

.ico-edge {
	position: absolute;
	height: 1px;
	background: var(--green);
	transform-origin: left center;
	box-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
}

/* 12 edges of varying transforms to approximate icosahedron */
.ico-edge:nth-child(1)  { width: 80px; transform: rotateY(0deg) rotateX(30deg) rotateZ(0deg) translateZ(50px); }
.ico-edge:nth-child(2)  { width: 80px; transform: rotateY(72deg) rotateX(30deg) rotateZ(0deg) translateZ(50px); }
.ico-edge:nth-child(3)  { width: 80px; transform: rotateY(144deg) rotateX(30deg) rotateZ(0deg) translateZ(50px); }
.ico-edge:nth-child(4)  { width: 80px; transform: rotateY(216deg) rotateX(30deg) rotateZ(0deg) translateZ(50px); }
.ico-edge:nth-child(5)  { width: 80px; transform: rotateY(288deg) rotateX(30deg) rotateZ(0deg) translateZ(50px); }
.ico-edge:nth-child(6)  { width: 80px; transform: rotateY(36deg) rotateX(-30deg) rotateZ(60deg) translateZ(50px); }
.ico-edge:nth-child(7)  { width: 80px; transform: rotateY(108deg) rotateX(-30deg) rotateZ(60deg) translateZ(50px); }
.ico-edge:nth-child(8)  { width: 80px; transform: rotateY(180deg) rotateX(-30deg) rotateZ(60deg) translateZ(50px); }
.ico-edge:nth-child(9)  { width: 80px; transform: rotateY(252deg) rotateX(-30deg) rotateZ(60deg) translateZ(50px); }
.ico-edge:nth-child(10) { width: 80px; transform: rotateY(324deg) rotateX(-30deg) rotateZ(60deg) translateZ(50px); }
.ico-edge:nth-child(11) { width: 60px; transform: rotateY(0deg) rotateX(70deg) translateZ(40px); background: var(--red); box-shadow: 0 0 4px rgba(255,0,51,0.3); }
.ico-edge:nth-child(12) { width: 60px; transform: rotateY(180deg) rotateX(70deg) translateZ(40px); background: var(--red); box-shadow: 0 0 4px rgba(255,0,51,0.3); }

@keyframes icoRotate {
	0%   { transform: translateX(-50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
	100% { transform: translateX(-50%) rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

/* --- REAL-TIME 3D CARD TILT (JS-driven) --- */
.about-grid, .services-grid {
	perspective: 1000px;
}

.glass-card.tilt-3d {
	transform-style: preserve-3d;
	transition: transform 0.1s ease-out, box-shadow 0.3s ease;
}

.glass-card.tilt-3d .feature-icon,
.glass-card.tilt-3d .service-icon,
.glass-card.tilt-3d h3 {
	transform: translateZ(30px);
	transform-style: preserve-3d;
}

.glass-card.tilt-3d p {
	transform: translateZ(15px);
	transform-style: preserve-3d;
}

.glass-card.tilt-3d .service-number {
	transform: translateZ(50px);
	transform-style: preserve-3d;
}

/* 3D depth shine effect on cards */
.glass-card.tilt-3d::before {
	background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		rgba(0, 255, 65, 0.12) 0%, transparent 60%) !important;
	opacity: 1 !important;
}

/* 3D floating code fragments */
.float-3d-code {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	transform-style: preserve-3d;
	text-shadow: 0 0 5px currentColor;
}

.float-3d-code-1 {
	top: 15%;
	left: 4%;
	color: rgba(0, 255, 65, 0.2);
	animation: codeFloat3d 10s ease-in-out infinite;
}

.float-3d-code-2 {
	bottom: 25%;
	right: 2%;
	color: rgba(255, 0, 51, 0.15);
	animation: codeFloat3d 13s ease-in-out infinite 3s;
}

.float-3d-code-3 {
	top: 60%;
	left: 82%;
	color: rgba(255, 255, 255, 0.1);
	animation: codeFloat3d 15s ease-in-out infinite 6s;
}

.float-3d-code-4 {
	top: 80%;
	left: 15%;
	color: rgba(0, 255, 65, 0.12);
	animation: codeFloat3d 11s ease-in-out infinite 2s;
}

.float-3d-code-5 {
	top: 40%;
	left: 60%;
	color: rgba(255, 0, 51, 0.1);
	animation: codeFloat3d 14s ease-in-out infinite 8s;
}

@keyframes codeFloat3d {
	0%, 100% { transform: perspective(500px) rotateY(0deg) rotateX(0deg) translateZ(0) translateY(0); opacity: 0.2; }
	25% { transform: perspective(500px) rotateY(25deg) rotateX(-15deg) translateZ(60px) translateY(-20px); opacity: 0.4; }
	50% { transform: perspective(500px) rotateY(-20deg) rotateX(20deg) translateZ(40px) translateY(-40px); opacity: 0.25; }
	75% { transform: perspective(500px) rotateY(15deg) rotateX(-8deg) translateZ(70px) translateY(-15px); opacity: 0.45; }
}

/* ======================================================
   SERVICES: 3D EXPLODING MOTHERBOARD + ORBITING TECH +
   CARD DEPTH LAYERS
   ====================================================== */

/* --- 3D CIRCUIT TRACES --- */
.services-circuit {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.circuit-trace {
	position: absolute;
	background: var(--green);
	opacity: 0;
}

/* Horizontal traces */
.circuit-h {
	height: 1px;
	animation: circuitGlow 6s ease-in-out infinite;
}

.circuit-h-1 { top: 15%; left: 0; width: 30%; animation-delay: 0s; }
.circuit-h-2 { top: 40%; right: 0; width: 25%; animation-delay: 1.5s; }
.circuit-h-3 { top: 65%; left: 10%; width: 40%; animation-delay: 3s; }
.circuit-h-4 { top: 85%; right: 5%; width: 20%; background: var(--red); animation-delay: 4.5s; }

/* Vertical traces */
.circuit-v {
	width: 1px;
	animation: circuitGlow 6s ease-in-out infinite;
}

.circuit-v-1 { left: 20%; top: 0; height: 35%; animation-delay: 0.5s; }
.circuit-v-2 { right: 15%; top: 10%; height: 45%; background: var(--red); animation-delay: 2s; }
.circuit-v-3 { left: 60%; bottom: 0; height: 30%; animation-delay: 3.5s; }

/* Circuit nodes (junction dots) */
.circuit-node {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 8px var(--green), 0 0 20px rgba(0, 255, 65, 0.3);
	opacity: 0;
	animation: nodeFlash 6s ease-in-out infinite;
}

.circuit-node-1 { top: 15%; left: 30%; animation-delay: 0.8s; }
.circuit-node-2 { top: 40%; right: 25%; animation-delay: 2.3s; background: var(--red); box-shadow: 0 0 8px var(--red), 0 0 20px rgba(255,0,51,0.3); }
.circuit-node-3 { top: 65%; left: 50%; animation-delay: 3.8s; }
.circuit-node-4 { left: 20%; top: 35%; animation-delay: 1.3s; }

@keyframes circuitGlow {
	0%, 100% { opacity: 0; box-shadow: none; }
	10% { opacity: 0.6; box-shadow: 0 0 10px currentColor; }
	30% { opacity: 0.3; }
	50% { opacity: 0.8; box-shadow: 0 0 15px currentColor; }
	70% { opacity: 0.2; }
	90% { opacity: 0; }
}

@keyframes nodeFlash {
	0%, 100% { opacity: 0; transform: scale(1); }
	20% { opacity: 1; transform: scale(1.5); }
	40% { opacity: 0.5; transform: scale(1); }
	60% { opacity: 1; transform: scale(2); }
	80% { opacity: 0; transform: scale(1); }
}

/* --- 3D ORBITING TECH ICONS (upgraded) --- */
.services-3d-orbit {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
	perspective: 1000px;
}

.orbit-icon {
	position: absolute;
	font-size: 1.8rem;
	opacity: 0.12;
	transform-style: preserve-3d;
	filter: drop-shadow(0 0 5px currentColor);
}

.orbit-icon-1 { top: 8%; left: 12%; color: var(--green); animation: deepOrbit1 14s ease-in-out infinite; }
.orbit-icon-2 { top: 75%; right: 10%; color: var(--red); animation: deepOrbit2 18s ease-in-out infinite 3s; }
.orbit-icon-3 { bottom: 15%; left: 8%; color: var(--white); animation: deepOrbit3 12s ease-in-out infinite 1s; }
.orbit-icon-4 { top: 25%; right: 4%; color: var(--green); animation: deepOrbit1 16s ease-in-out infinite 5s; }
.orbit-icon-5 { top: 50%; left: 3%; color: var(--red); animation: deepOrbit2 20s ease-in-out infinite 7s; }
.orbit-icon-6 { bottom: 5%; right: 30%; color: var(--white); animation: deepOrbit3 13s ease-in-out infinite 9s; }

@keyframes deepOrbit1 {
	0%, 100% { transform: perspective(600px) rotateY(0) rotateX(0) translateZ(0) translateY(0) scale(1); }
	25% { transform: perspective(600px) rotateY(30deg) rotateX(-15deg) translateZ(80px) translateY(-30px) scale(1.3); }
	50% { transform: perspective(600px) rotateY(-20deg) rotateX(20deg) translateZ(40px) translateY(-15px) scale(0.8); }
	75% { transform: perspective(600px) rotateY(25deg) rotateX(-10deg) translateZ(100px) translateY(-40px) scale(1.5); }
}

@keyframes deepOrbit2 {
	0%, 100% { transform: perspective(600px) rotateY(0) translateZ(0) translateY(0) rotate(0deg); }
	33% { transform: perspective(600px) rotateY(-25deg) translateZ(60px) translateY(-35px) rotate(120deg); }
	66% { transform: perspective(600px) rotateY(20deg) translateZ(90px) translateY(-20px) rotate(240deg); }
}

@keyframes deepOrbit3 {
	0%, 100% { transform: perspective(600px) rotateX(0) rotateZ(0) translateZ(0) translateY(0); }
	50% { transform: perspective(600px) rotateX(20deg) rotateZ(180deg) translateZ(70px) translateY(-25px); }
}

/* --- SERVICE CARDS: 3D DEPTH LAYERS ON HOVER --- */
.service-card {
	transform-style: preserve-3d;
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}

.service-card:hover {
	box-shadow:
		0 15px 35px rgba(0, 0, 0, 0.5),
		0 0 30px rgba(0, 255, 65, 0.1),
		inset 0 0 30px rgba(0, 255, 65, 0.02) !important;
}

/* ======================================================
   CONTACT: 3D WORMHOLE TUNNEL + PORTAL ARCHITECTURE +
   TRANSMISSION BEAMS + ROTATING GLOBE
   ====================================================== */

/* --- DEEP 3D WORMHOLE TUNNEL --- */
.contact-3d-tunnel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	pointer-events: none;
	z-index: 0;
	perspective: 800px;
	transform-style: preserve-3d;
}

.tunnel-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid;
	border-radius: 50%;
	transform-style: preserve-3d;
}

.tunnel-ring-1 { width: 550px; height: 550px; margin: -275px 0 0 -275px; border-color: rgba(0, 255, 65, 0.06); animation: deepTunnel 5s ease-in-out infinite; }
.tunnel-ring-2 { width: 460px; height: 460px; margin: -230px 0 0 -230px; border-color: rgba(0, 255, 65, 0.09); animation: deepTunnel 5s ease-in-out infinite 0.3s; }
.tunnel-ring-3 { width: 370px; height: 370px; margin: -185px 0 0 -185px; border-color: rgba(0, 255, 65, 0.12); animation: deepTunnel 5s ease-in-out infinite 0.6s; }
.tunnel-ring-4 { width: 280px; height: 280px; margin: -140px 0 0 -140px; border-color: rgba(255, 0, 51, 0.08); animation: deepTunnel 5s ease-in-out infinite 0.9s; }
.tunnel-ring-5 { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-color: rgba(255, 0, 51, 0.12); animation: deepTunnel 5s ease-in-out infinite 1.2s; }
.tunnel-ring-6 { width: 130px; height: 130px; margin: -65px 0 0 -65px; border-color: rgba(255, 0, 51, 0.18); animation: deepTunnel 5s ease-in-out infinite 1.5s; }
.tunnel-ring-7 { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-color: rgba(255, 0, 51, 0.25); background: radial-gradient(circle, rgba(255, 0, 51, 0.1) 0%, transparent 70%); animation: deepTunnel 5s ease-in-out infinite 1.8s; }
.tunnel-ring-8 { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-color: rgba(255, 0, 51, 0.3); background: rgba(255, 0, 51, 0.15); animation: deepTunnel 5s ease-in-out infinite 2.1s; }

@keyframes deepTunnel {
	0%   { transform: perspective(800px) rotateX(75deg) translateZ(0) scale(1); opacity: 0.3; }
	30%  { opacity: 0.8; }
	50%  { transform: perspective(800px) rotateX(75deg) translateZ(120px) scale(1.15); opacity: 1; }
	70%  { opacity: 0.6; }
	100% { transform: perspective(800px) rotateX(75deg) translateZ(0) scale(1); opacity: 0.3; }
}

/* --- 3D WIREFRAME GLOBE --- */
.contact-globe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	pointer-events: none;
	z-index: 0;
	transform-style: preserve-3d;
	animation: globeRotate 40s linear infinite;
	opacity: 0.08;
}

.globe-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--green);
	transform-style: preserve-3d;
}

.globe-ring-h1 { transform: rotateX(90deg); }
.globe-ring-h2 { transform: rotateX(90deg) rotateZ(30deg); }
.globe-ring-h3 { transform: rotateX(90deg) rotateZ(60deg); }
.globe-ring-h4 { transform: rotateX(90deg) rotateZ(90deg); }
.globe-ring-v1 { transform: rotateY(0deg); }
.globe-ring-v2 { transform: rotateY(45deg); }
.globe-ring-v3 { transform: rotateY(90deg); }
.globe-ring-v4 { transform: rotateY(135deg); }

/* Latitude rings of different sizes */
.globe-lat-1 { width: 80%; height: 80%; inset: 10%; transform: rotateX(90deg) translateZ(45px); border-color: rgba(255, 0, 51, 0.15); }
.globe-lat-2 { width: 80%; height: 80%; inset: 10%; transform: rotateX(90deg) translateZ(-45px); border-color: rgba(255, 0, 51, 0.15); }
.globe-lat-3 { width: 50%; height: 50%; inset: 25%; transform: rotateX(90deg) translateZ(70px); }
.globe-lat-4 { width: 50%; height: 50%; inset: 25%; transform: rotateX(90deg) translateZ(-70px); }

@keyframes globeRotate {
	0%   { transform: translate(-50%, -50%) rotateY(0deg) rotateX(23deg); }
	100% { transform: translate(-50%, -50%) rotateY(360deg) rotateX(23deg); }
}

/* --- TRANSMISSION BEAMS --- */
.contact-beam {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.contact-beam-1 {
	top: 50%;
	left: 50%;
	width: 2px;
	height: 0;
	background: linear-gradient(to top, rgba(0, 255, 65, 0.5), transparent);
	transform: translate(-50%, -100%);
	animation: beamShoot1 4s ease-out infinite;
}

.contact-beam-2 {
	top: 50%;
	left: 50%;
	width: 2px;
	height: 0;
	background: linear-gradient(to bottom, rgba(255, 0, 51, 0.4), transparent);
	transform: translate(-50%, 0);
	animation: beamShoot2 4s ease-out infinite 2s;
}

.contact-beam-3 {
	top: 50%;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(to left, rgba(0, 255, 65, 0.3), transparent);
	transform: translate(-100%, -50%);
	animation: beamShoot3 5s ease-out infinite 1s;
}

@keyframes beamShoot1 {
	0% { height: 0; opacity: 0; }
	20% { height: 40vh; opacity: 1; }
	100% { height: 40vh; opacity: 0; }
}

@keyframes beamShoot2 {
	0% { height: 0; opacity: 0; }
	20% { height: 35vh; opacity: 1; }
	100% { height: 35vh; opacity: 0; }
}

@keyframes beamShoot3 {
	0% { width: 0; opacity: 0; }
	20% { width: 35vw; opacity: 1; }
	100% { width: 35vw; opacity: 0; }
}

/* ======================================================
   STATS + ARSENAL: 3D DEPTH
   ====================================================== */

.stat {
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	transform-style: preserve-3d;
}

.stat:hover {
	transform: perspective(800px) rotateY(-12deg) rotateX(8deg) scale(1.15) translateZ(30px);
}

.stat:hover .stat-number {
	text-shadow: 0 0 40px currentColor, 0 5px 20px rgba(0, 0, 0, 0.8);
}

.arsenal-scroll {
	perspective: 800px;
	transform-style: preserve-3d;
}

.arsenal-track {
	transform-style: preserve-3d;
	animation: arsenalDepth 6s ease-in-out infinite alternate;
}

@keyframes arsenalDepth {
	0% { transform: rotateX(3deg) translateZ(0); }
	100% { transform: rotateX(-3deg) translateZ(15px); }
}

.arsenal-item {
	transition: transform 0.3s ease, text-shadow 0.3s ease;
	display: inline-block;
}

.arsenal-item:hover {
	transform: scale(1.3) translateZ(20px);
	text-shadow: 0 0 20px var(--green);
}

/* ======================================================
   HOLOGRAPHIC PROJECTION EFFECT
   Green light screen projected from card at same tilt
   angle, with realistic light glow and blur behind
   ====================================================== */

.holo-projection {
	position: absolute;
	inset: -5px;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.1s ease-out;
	transform-style: preserve-3d;
	transform: translateZ(60px);
	background: linear-gradient(135deg,
		rgba(0, 255, 65, 0.06) 0%,
		rgba(0, 255, 65, 0.12) 30%,
		rgba(0, 255, 65, 0.04) 60%,
		rgba(0, 255, 65, 0.08) 100%);
	border: 1px solid rgba(0, 255, 65, 0.1);
	box-shadow:
		0 0 40px rgba(0, 255, 65, 0.15),
		0 0 80px rgba(0, 255, 65, 0.08),
		inset 0 0 40px rgba(0, 255, 65, 0.05);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Light scan line across the projection */
.holo-projection::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.4), transparent);
	animation: projectionScan 2s ease-in-out infinite;
}

/* Subtle grid pattern on projection */
.holo-projection::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
	background-size: 20px 20px;
	opacity: 0.5;
}

@keyframes projectionScan {
	0%   { top: 0; opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

/* Card hover state — blur background behind card */
.glass-card.tilt-3d:hover {
	z-index: 10;
}

.glass-card.tilt-3d:hover ~ * {
	filter: blur(1px);
	transition: filter 0.3s ease;
}

/* Intensify card glow on deep tilt */
.glass-card.tilt-3d:hover .card-scan-line {
	opacity: 0.8 !important;
	animation: scanDown 1s ease-in-out infinite !important;
	background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.5), transparent) !important;
}

/* Reduce animations for accessibility */
@media (prefers-reduced-motion: reduce) {
	.hero-ufo-beam, .hero-streak, .hero-device-pulse, .hero-device-pulse-2,
	.about-datastream, .about-energy-ring, .about-glitch-overlay,
	.services-particle, .services-arc, .services-chromatic,
	.contact-vortex, .contact-pull-particle, .contact-wave,
	.hero-cube, .holo-ring-track, .orbit-icon,
	.tunnel-ring, .float-3d-code, .arsenal-track,
	.hero-grid-floor, .hero-horizon, .hero-pyramid,
	.hero-dna, .hero-logo-3d, .about-hud-panel,
	.about-icosahedron, .circuit-trace, .circuit-node,
	.contact-globe, .contact-beam, .holo-projection {
		animation: none !important;
		opacity: 0 !important;
	}
}

.section-label {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--green);
	margin-bottom: 1rem;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.section-header h2 { margin-bottom: 1rem; }
.section-header p { margin: 0 auto; font-size: 1rem; }

/* ============================================
   COLOR UTILITY CLASSES
   ============================================ */

.text-green { color: var(--green) !important; -webkit-text-fill-color: var(--green); }
.text-red { color: var(--red) !important; -webkit-text-fill-color: var(--red); }
.text-white { color: var(--white) !important; -webkit-text-fill-color: var(--white); }

/* ============================================
   GLASS / HOLOGRAPHIC CARDS
   ============================================ */

.glass-card {
	background: rgba(10, 10, 10, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	padding: 2rem;
	transition: all var(--transition-smooth);
	position: relative;
	overflow: hidden;
}

.holo-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--green), transparent);
	opacity: 0;
	transition: opacity var(--transition-smooth);
}

.holo-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--red), transparent);
	opacity: 0;
	transition: opacity var(--transition-smooth);
}

.glass-card:hover {
	border-color: var(--border-hover);
	transform: translateY(-4px);
	box-shadow: var(--glow-green);
}

.glass-card:hover.holo-card::before,
.glass-card:hover.holo-card::after {
	opacity: 1;
}

/* Card scan line animation */
.card-scan-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--green), transparent);
	opacity: 0;
	z-index: 2;
}

.glass-card:hover .card-scan-line {
	opacity: 0.6;
	animation: scanDown 1.5s ease-in-out;
}

@keyframes scanDown {
	0% { top: 0; }
	100% { top: 100%; }
}

/* ============================================
   ABOUT GRID
   ============================================ */

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

/* ============================================
   FEATURE / SERVICE ICONS
   ============================================ */

.feature-icon {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
	color: var(--green);
	transition: all var(--transition-smooth);
	background: var(--green-subtle);
	position: relative;
}

.feature-icon.icon-red {
	color: var(--red);
	border-color: var(--border-red);
	background: var(--red-subtle);
}

.feature-icon.icon-white {
	color: var(--white);
	border-color: var(--white-20);
	background: var(--white-05);
}

.glass-card:hover .feature-icon {
	box-shadow: var(--glow-green);
	transform: scale(1.1);
}

.glass-card:hover .feature-icon.icon-red {
	box-shadow: var(--glow-red);
}

.glass-card:hover .feature-icon.icon-white {
	box-shadow: var(--glow-white);
}

.glass-card h3 { margin-bottom: 0.75rem; font-size: 1rem; }
.glass-card p { font-size: 0.85rem; line-height: 1.6; }

/* ============================================
   SERVICES GRID
   ============================================ */

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

.service-card {
	padding: 2.5rem 2rem;
	position: relative;
}

.service-number {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--white-05);
	line-height: 1;
	letter-spacing: -0.02em;
}

.service-icon {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
	color: var(--green);
	background: var(--green-subtle);
	transition: all var(--transition-smooth);
}

.service-icon.icon-red {
	color: var(--red);
	border-color: var(--border-red);
	background: var(--red-subtle);
}

.service-icon.icon-white {
	color: var(--white);
	border-color: var(--white-20);
	background: var(--white-05);
}

.service-card:hover .service-icon {
	box-shadow: var(--glow-green);
	transform: scale(1.1);
}

.service-card:hover .service-icon.icon-red { box-shadow: var(--glow-red); }
.service-card:hover .service-icon.icon-white { box-shadow: var(--glow-white); }

.service-card h3 { margin-bottom: 0.75rem; font-size: 1.1rem; }
.service-card p { font-size: 0.85rem; line-height: 1.6; margin-bottom: 1rem; }

.service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

.tag {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--border);
	color: var(--green-dim);
	background: var(--green-ghost);
	letter-spacing: 0.05em;
}

/* ============================================
   STATS BAR
   ============================================ */

.stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	padding: 3rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.stat { text-align: center; }

.stat-number {
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 900;
	display: block;
	text-shadow: 0 0 20px currentColor;
}

.stat-label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--white-40);
	margin-top: 0.5rem;
	display: block;
}

/* ============================================
   TECH ARSENAL SCROLL
   ============================================ */

.arsenal-scroll {
	overflow: hidden;
	padding: 2rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	position: relative;
}

.arsenal-scroll::before,
.arsenal-scroll::after {
	content: '';
	position: absolute;
	top: 0;
	width: 100px;
	height: 100%;
	z-index: 2;
}

.arsenal-scroll::before {
	left: 0;
	background: linear-gradient(90deg, var(--black), transparent);
}

.arsenal-scroll::after {
	right: 0;
	background: linear-gradient(-90deg, var(--black), transparent);
}

.arsenal-track {
	display: flex;
	gap: 1.5rem;
	animation: scrollLeft 30s linear infinite;
	width: max-content;
}

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

.arsenal-item {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--green);
	white-space: nowrap;
	text-shadow: 0 0 10px var(--green-glow);
}

.arsenal-divider {
	color: var(--red);
	opacity: 0.3;
	font-family: var(--font-mono);
}

/* ============================================
   CONTACT
   ============================================ */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-group label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--green);
	opacity: 0.7;
}

.form-group input,
.form-group textarea,
.form-group select {
	padding: 0.85rem 1rem;
	border: 1px solid var(--border);
	background: var(--black-deep);
	color: var(--white-90);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	transition: all var(--transition-fast);
	width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 2px var(--green-subtle), var(--glow-green);
	outline: none;
}

.form-group textarea {
	resize: vertical;
	min-height: 140px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
	color: var(--white-20);
	font-family: var(--font-mono);
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.contact-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	color: var(--green);
	flex-shrink: 0;
	background: var(--green-subtle);
}

.contact-item-icon.icon-red {
	color: var(--red);
	border-color: var(--border-red);
	background: var(--red-subtle);
}

.contact-item-icon.icon-white {
	color: var(--white);
	border-color: var(--white-20);
	background: var(--white-05);
}

.contact-item h3 {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	margin-bottom: 0.25rem;
	color: var(--green);
	text-transform: lowercase;
}

.contact-item p,
.contact-item a {
	font-size: 0.85rem;
	color: var(--white-60);
}

.contact-item a:hover {
	color: var(--green);
	text-shadow: 0 0 10px var(--green-glow);
}

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

.social-link {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	color: var(--white-40);
	transition: all var(--transition-fast);
	font-size: 0.9rem;
}

.social-link:hover {
	border-color: var(--green);
	color: var(--green);
	background: var(--green-subtle);
	box-shadow: var(--glow-green);
}

/* ============================================
   GLOW LINES
   ============================================ */

.glow-line {
	height: 1px;
	margin: 2rem 0;
}

.glow-line-green {
	background: linear-gradient(90deg, transparent, var(--green), transparent);
	box-shadow: 0 0 10px var(--green-glow);
}

.glow-line-red {
	background: linear-gradient(90deg, transparent, var(--red), transparent);
	box-shadow: 0 0 10px var(--red-glow);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
	position: relative;
	z-index: 1;
	padding: 2rem 2rem;
	border-top: 1px solid var(--border);
}

.footer-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-text {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--white-40);
}

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

.footer-links a {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--white-40);
}

.footer-links a:hover {
	color: var(--green);
	text-shadow: 0 0 10px var(--green-glow);
}

/* ============================================
   PAGE HEADER (Subpages)
   ============================================ */

.page-header {
	position: relative;
	padding: 10rem 2rem 4rem;
	text-align: center;
	overflow: hidden;
}

.page-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 500px;
	background: radial-gradient(ellipse, rgba(0, 255, 65, 0.06) 0%, transparent 70%);
	pointer-events: none;
}

.page-header h1 { position: relative; z-index: 1; margin-bottom: 1rem; }
.page-header p { position: relative; z-index: 1; margin: 0 auto; font-size: 1rem; }

.breadcrumb {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	font-family: var(--font-mono);
}

.breadcrumb a { font-size: 0.75rem; color: var(--white-40); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { font-size: 0.75rem; color: var(--white-60); }
.breadcrumb .separator { color: var(--white-20); }

/* ============================================
   CONTENT PAGES
   ============================================ */

.content-section { padding: 0 2rem 4rem; }
.content-inner { max-width: 800px; margin: 0 auto; }

.content-inner h2 {
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
	padding-top: 1rem;
	color: var(--green);
}

.content-inner p {
	margin-bottom: 1rem;
	line-height: 1.8;
}

.content-inner li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.75rem;
	color: var(--white-60);
	line-height: 1.7;
}

.content-inner ul li::before {
	content: '>';
	position: absolute;
	left: 0;
	color: var(--green);
	font-family: var(--font-mono);
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.auth-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	position: relative;
}

.auth-card {
	width: 100%;
	max-width: 420px;
	padding: 3rem;
	position: relative;
	z-index: 1;
}

.auth-card h1 { font-size: 1.8rem; margin-bottom: 0.5rem; text-align: center; }
.auth-card .auth-subtitle { text-align: center; color: var(--white-60); margin-bottom: 2rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--white-60); }
.auth-footer a { color: var(--green); font-weight: 700; }

.auth-back {
	position: absolute;
	top: 2rem;
	left: 2rem;
	z-index: 10;
	color: var(--white-40);
	font-size: 0.8rem;
	font-family: var(--font-mono);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ============================================
   BLOG PAGE
   ============================================ */

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

.blog-card { overflow: hidden; display: flex; flex-direction: column; }

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

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
	filter: grayscale(30%) contrast(1.1);
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.05);
	filter: grayscale(0%) contrast(1.2);
}

.blog-card-tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.2rem 0.6rem;
	background: var(--green);
	color: var(--black);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.blog-card-body { padding: 1.5rem 2rem 2rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--white-40); margin-bottom: 0.75rem; }
.blog-card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; line-height: 1.3; }
.blog-card p { font-size: 0.85rem; line-height: 1.6; flex: 1; }

.blog-card-link {
	margin-top: 1rem;
	color: var(--green);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* ============================================
   MERCH / SHOP PAGE
   ============================================ */

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

.merch-card { overflow: hidden; display: flex; flex-direction: column; }

.merch-card-image {
	aspect-ratio: 1;
	overflow: hidden;
	background: linear-gradient(135deg, #0d0d0d, #1a0a0a);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 4rem;
}

.merch-card-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.2rem 0.6rem;
	background: var(--red);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
}

.merch-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.merch-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }

.merch-card .merch-price {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 900;
	color: var(--green);
	text-shadow: 0 0 10px var(--green-glow);
	margin-bottom: 0.75rem;
}

.merch-card p { font-size: 0.8rem; flex: 1; margin-bottom: 1rem; }

/* ============================================
   ANIMATIONS
   ============================================ */

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

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

/* ============================================
   UTILITIES
   ============================================ */

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media screen and (max-width: 1024px) {
	.stats-bar { grid-template-columns: repeat(2, 1fr); }
	.contact-grid { grid-template-columns: 1fr; }
	.about-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
	:root { --section-padding: 4rem 1.5rem; }

	.nav-links {
		position: fixed;
		top: 0;
		right: -100%;
		width: 280px;
		height: 100vh;
		background: rgba(5, 5, 5, 0.97);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		flex-direction: column;
		padding: 5rem 2rem;
		gap: 1.5rem;
		transition: right var(--transition-smooth);
		border-left: 1px solid var(--border);
	}

	.nav-links.open { right: 0; }
	.nav-toggle { display: block; }
	.services-grid { grid-template-columns: 1fr; }
	.form-row { grid-template-columns: 1fr; }
	.stats-bar { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.footer-inner { flex-direction: column; text-align: center; }
	.blog-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 480px) {
	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.4rem; }
	.hero { padding: 6rem 1.5rem 3rem; }
	.hero-actions { flex-direction: column; align-items: center; }
	.hero-flag { flex-direction: column; gap: 0.5rem; }
	.hero-flag-col + .hero-flag-col::before { display: none; }
	.hero-accent { font-size: 2.2rem !important; }
	.glass-card { padding: 1.5rem; }
	.stat-number { font-size: 2rem; }
	.auth-card { padding: 2rem 1.5rem; }
	.floater { display: none; }
}