:root {
  --color-bg: #0a0a0a;
  --color-text: #ededed;
  --color-muted: #555555;
  --color-border: #1a1a1a;
  --color-surface: #111111;
  --color-card: rgba(255, 255, 255, 0.02);
  --color-accent: #ffffff;
  --color-accent-2: #999999;
  --color-accent-warm: #cccccc;
  --color-glow: rgba(255, 255, 255, 0.05);
  --color-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.4);
  --cyber-cyan: #00f0ff;
  --cyber-red: #ff0040;
  --cyber-yellow: #ffd600;
  --cyber-bg: #050508;
  color-scheme: dark;
}

html {
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
  background: #050508;
}

body {
  background-color: #050508;
  color: var(--color-text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

img, video, canvas { max-width: 100%; }

::selection { background: rgba(0, 240, 255, 0.9); color: #050508; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050508; }
::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 0, 64, 0.5); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; }
a { text-decoration: none; transition: color 0.2s ease; }
a, button, input, textarea, select { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; }

/* ═══ CYBER / HACKER THEME ═══ */

.cyber-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #070a12;
  overflow: hidden;
}
.cyber-background > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cyber-bg-tokens { overflow: hidden; }

/* Floating code tokens — pure transform (GPU compositor) animation, so they
   never repaint on scroll and keep the page smooth. */
.cyber-bg-tokens span {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0.28;
  will-change: transform;
}
.cyber-bg-tokens span:nth-child(6n+1) { color: #00f0ff; }
.cyber-bg-tokens span:nth-child(6n+2) { color: #ff0040; }
.cyber-bg-tokens span:nth-child(6n+3) { color: #ffd600; }
.cyber-bg-tokens span:nth-child(6n+4) { color: #7ef0ff; }
.cyber-bg-tokens span:nth-child(6n+5) { color: #00f0ff; }
.cyber-bg-tokens span:nth-child(6n+6) { color: #ff0040; }

/* Individual positions + gentle float loops (CSS = GPU, no JS repaint) */
.cyber-bg-tokens span:nth-child(1)  { top: 12%; left: 8%;   animation: tokFloat 26s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(2)  { top: 6%;  left: 48%;  animation: tokFloat 22s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(3)  { top: 18%; left: 78%;  animation: tokFloat 30s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(4)  { top: 40%; left: 14%;  animation: tokFloat 24s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(5)  { top: 24%; left: 60%;  animation: tokFloat 28s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(6)  { top: 55%; left: 6%;   animation: tokFloat 25s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(7)  { top: 62%; left: 88%;  animation: tokFloat 23s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(8)  { top: 34%; left: 38%;  animation: tokFloat 29s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(9)  { top: 70%; left: 24%;  animation: tokFloat 27s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(10) { top: 48%; left: 70%;  animation: tokFloat 21s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(11) { top: 8%;  left: 28%;  animation: tokFloat 32s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(12) { top: 78%; left: 62%;  animation: tokFloat 26s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(13) { top: 30%; left: 92%;  animation: tokFloat 24s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(14) { top: 86%; left: 8%;   animation: tokFloat 30s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(15) { top: 60%; left: 42%;  animation: tokFloat 28s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(16) { top: 16%; left: 68%;  animation: tokFloat 22s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(17) { top: 92%; left: 84%;  animation: tokFloat 34s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(18) { top: 44%; left: 30%;  animation: tokFloat 25s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(19) { top: 8%;  left: 88%;  animation: tokFloat 27s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(20) { top: 26%; left: 44%;  animation: tokFloat 31s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(21) { top: 66%; left: 74%;  animation: tokFloat 23s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(22) { top: 84%; left: 36%;  animation: tokFloat 29s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(23) { top: 38%; left: 56%;  animation: tokFloat 26s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(24) { top: 74%; left: 16%;  animation: tokFloat 28s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(25) { top: 12%; left: 34%;  animation: tokFloat 33s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(26) { top: 50%; left: 82%;  animation: tokFloat 21s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(27) { top: 88%; left: 50%;  animation: tokFloat 35s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(28) { top: 22%; left: 94%;  animation: tokFloat 27s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(29) { top: 68%; left: 6%;   animation: tokFloat 31s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(30) { top: 10%; left: 68%;  animation: tokFloat 24s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(31) { top: 56%; left: 26%;  animation: tokFloat 29s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(32) { top: 80%; left: 74%;  animation: tokFloat 22s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(33) { top: 30%; left: 18%;  animation: tokFloat 34s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(34) { top: 90%; left: 30%;  animation: tokFloat 26s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(35) { top: 46%; left: 96%;  animation: tokFloat 30s ease-in-out infinite; }
.cyber-bg-tokens span:nth-child(36) { top: 72%; left: 44%;  animation: tokFloat 23s ease-in-out infinite; }

@keyframes tokFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(26px, -22px, 0); }
  50%      { transform: translate3d(0, 20px, 0); }
  75%      { transform: translate3d(-24px, -10px, 0); }
}

/* Base gradient wash — lifts it out of pure black */
.cyber-bg-base {
  background:
    radial-gradient(120% 80% at 15% -10%, rgba(0, 240, 255, 0.18), transparent 55%),
    radial-gradient(120% 80% at 110% 110%, rgba(255, 0, 64, 0.16), transparent 55%),
    radial-gradient(90% 60% at 80% 20%, rgba(0, 240, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #0a0f1c 0%, #070a12 55%, #0c0a14 100%);
}

/* Dreamy drifting light orbs behind everything */
.cyber-bg-glow {
  background:
    radial-gradient(circle at 20% 25%, rgba(0, 240, 255, 0.22), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 64, 0.18), transparent 42%),
    radial-gradient(circle at 60% 15%, rgba(0, 240, 255, 0.12), transparent 35%),
    radial-gradient(circle at 35% 90%, rgba(0, 240, 255, 0.14), transparent 40%);
  animation: cyberGlowFloat 16s ease-in-out infinite alternate;
}
@keyframes cyberGlowFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.8; }
  50%  { transform: translate3d(-2%, -1%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(2%, 1%, 0) scale(1.12);    opacity: 0.9; }
}

/* Visible cyber grid — static for performance (no background-position repaint) */
.cyber-bg-grid {
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}

/* Soft edge vignette to keep focus centred */
.cyber-bg-vignette {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(2, 3, 6, 0.55) 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 9997;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 4px);
  opacity: 0.09;
}

main, header, footer { position: relative; z-index: 1; }

/* Cyber tag */
.cyber-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cyber-cyan);
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.cyber-tag::before { content: '['; color: var(--cyber-red); text-shadow: 0 0 12px rgba(255, 0, 64, 0.5); margin-right: 0.25rem; }
.cyber-tag::after { content: ']'; color: var(--cyber-red); text-shadow: 0 0 12px rgba(255, 0, 64, 0.5); margin-left: 0.25rem; }

/* Blinking cursor */
.cyber-cursor {
  display: inline-block;
  width: 9px;
  height: 1em;
  margin-left: 0.3rem;
  background: var(--cyber-red);
  box-shadow: 0 0 10px rgba(255, 0, 64, 0.8);
  animation: cyberBlink 0.9s steps(1) infinite;
  vertical-align: -0.1em;
}

@keyframes cyberBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Panel */
.cyber-panel {
  position: relative;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background: linear-gradient(160deg, rgba(0, 240, 255, 0.03) 0%, transparent 40%), rgba(6, 8, 12, 0.55);
  box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.02);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Keep stat values inside their cards — no overflow */
.stat-item { overflow: hidden; min-width: 0; }
.stat-item > div { overflow-wrap: anywhere; word-break: break-word; }
.cyber-panel:hover {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.08), inset 0 0 30px rgba(0, 240, 255, 0.04);
}

/* Cyan text glow */
.cyber-cyan { color: var(--cyber-cyan); text-shadow: 0 0 14px rgba(0, 240, 255, 0.5); }
.cyber-red { color: var(--cyber-red); text-shadow: 0 0 14px rgba(255, 0, 64, 0.5); }
.cyber-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Title RGB split */
.cyber-title {
  position: relative;
  animation: cyberSkew 3s infinite steps(1);
}

@keyframes cyberSkew {
  0%, 100% { transform: translate(0) skew(0deg); }
  4% { transform: translate(-4px, 1px) skew(3deg); }
  5% { transform: translate(3px, -2px) skew(-2deg); }
  6% { transform: translate(0) skew(0deg); }
  44% { transform: translate(0) skew(0deg); }
  45% { transform: translate(6px, -2px) skew(-4deg); }
  46% { transform: translate(-4px, 2px) skew(3deg); }
  47% { transform: translate(0) skew(0deg); }
  84% { transform: translate(0) skew(0deg); }
  85% { transform: translate(-6px, 2px) skew(5deg); }
  86% { transform: translate(4px, -1px) skew(-3deg); }
  87% { transform: translate(0) skew(0deg); }
}

.cyber-title::before, .cyber-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Disabled clip-path glitch layers — they caused constant full-raster repaints
     on every heading. The transform-only skew on .cyber-title keeps the effect. */
  display: none;
}

/* Tech Arsenal heading — RGB split glitch (transform-only, GPU-friendly) */
.tech-glitch {
  position: relative;
  animation: techGlitchSkew 4s infinite steps(1);
  will-change: transform;
}
.tech-glitch::before,
.tech-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.tech-glitch::before {
  color: rgba(0, 240, 255, 0.9); /* cyan layer */
  transform: translate(-3px, 0);
  animation: techGlitchCyan 4s infinite steps(1);
}
.tech-glitch::after {
  color: rgba(255, 0, 64, 0.9); /* red layer */
  transform: translate(3px, 0);
  animation: techGlitchRed 4s infinite steps(1);
}
@keyframes techGlitchSkew {
  0%, 100% { transform: translate(0) skew(0deg); }
  5% { transform: translate(-3px, 1px) skew(4deg); }
  6% { transform: translate(2px, -1px) skew(-3deg); }
  7% { transform: translate(0) skew(0deg); }
  42% { transform: translate(0) skew(0deg); }
  43% { transform: translate(4px, -1px) skew(-4deg); }
  44% { transform: translate(-3px, 1px) skew(3deg); }
  45% { transform: translate(0) skew(0deg); }
  78% { transform: translate(0) skew(0deg); }
  79% { transform: translate(-4px, 2px) skew(5deg); }
  80% { transform: translate(3px, -1px) skew(-3deg); }
  81% { transform: translate(0) skew(0deg); }
}
@keyframes techGlitchCyan {
  0%, 100% { transform: translate(-3px, 0); clip-path: inset(0 0 0 0); }
  5% { transform: translate(-7px, 2px); clip-path: inset(10% 0 55% 0); }
  7% { transform: translate(-3px, 0); clip-path: inset(0 0 0 0); }
  43% { transform: translate(-6px, -2px); clip-path: inset(45% 0 15% 0); }
  45% { transform: translate(-3px, 0); clip-path: inset(0 0 0 0); }
  79% { transform: translate(-8px, 1px); clip-path: inset(20% 0 60% 0); }
  81% { transform: translate(-3px, 0); clip-path: inset(0 0 0 0); }
}
@keyframes techGlitchRed {
  0%, 100% { transform: translate(3px, 0); clip-path: inset(0 0 0 0); }
  5% { transform: translate(7px, -2px); clip-path: inset(60% 0 5% 0); }
  7% { transform: translate(3px, 0); clip-path: inset(0 0 0 0); }
  43% { transform: translate(6px, 2px); clip-path: inset(15% 0 50% 0); }
  45% { transform: translate(3px, 0); clip-path: inset(0 0 0 0); }
  79% { transform: translate(8px, -1px); clip-path: inset(5% 0 70% 0); }
  81% { transform: translate(3px, 0); clip-path: inset(0 0 0 0); }
}

/* Brand logos — transform-only glitch (GPU-friendly, no clip-path raster repaints) */
.brand-logo {
  display: inline-flex;
  position: relative;
  will-change: transform;
  animation: brandGlitch 4s infinite steps(1);
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.5));
}
.brand-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
@keyframes brandGlitch {
  0%, 100% { transform: translate(0); }
  2% { transform: translate(-2px, 1px); }
  3% { transform: translate(2px, -1px); }
  4% { transform: translate(0); }
  27% { transform: translate(0); }
  28% { transform: translate(0, 2px); }
  29% { transform: translate(0); }
  57% { transform: translate(0); }
  58% { transform: translate(3px, 0); }
  59% { transform: translate(0); }
}

/* Gradient text */
.cyber-gradient-text {
  background: linear-gradient(90deg, var(--cyber-cyan), #ffffff 35%, var(--cyber-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hazard stripe — kept static (animating background-position repaints every frame) */
.cyber-hazard {
  background: repeating-linear-gradient(45deg, var(--cyber-yellow) 0 14px, #0a0a0a 14px 28px);
}

/* Button */
.cyber-btn {
  position: relative;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.04);
  color: var(--cyber-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  transition: all 0.3s ease;
  overflow: hidden;
}
.cyber-btn:hover {
  border-color: var(--cyber-red);
  color: var(--cyber-red);
  text-shadow: 0 0 12px rgba(255, 0, 64, 0.6);
  box-shadow: 0 0 25px rgba(255, 0, 64, 0.2), inset 0 0 20px rgba(255, 0, 64, 0.05);
}

/* Scan sweep */
.cyber-sweep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
  animation: cyberSweep 3.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes cyberSweep {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(700px); opacity: 0; }
}

/* ═══ HERO ═══ */

.hero-glitch-wrap {
  position: relative;
  display: inline-block;
  animation: hero-glitch-skew 3s infinite steps(1);
}
.hero-glitch-wrap .hero-glitch {
  position: relative;
  display: inline-block;
  animation: hero-glitch-main 3s infinite steps(1);
}
.hero-glitch-wrap .hero-glitch::before,
.hero-glitch-wrap .hero-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  /* Clip-path glitch layers disabled for smoothness (constant raster-heavy
     repaints); the transform-only main/skew glitch keeps the cyber look. */
  display: none;
}

.hero-glitch-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);
}
.hero-glitch-noise {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 11;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes hero-glitch-main {
  0% { transform: translate(0); }
  2% { transform: translate(-8px, 3px) skewX(5deg); }
  4% { transform: translate(6px, -4px) skewX(-3deg); }
  5% { transform: translate(-3px, 1px); }
  6% { transform: translate(0); }
  40% { transform: translate(0); }
  41% { transform: translate(12px, -2px) skewX(-6deg); }
  42% { transform: translate(-10px, 5px) skewX(4deg); }
  43% { transform: translate(5px, -3px) skewX(-2deg); }
  44% { transform: translate(-2px, 1px); }
  45% { transform: translate(0); }
  70% { transform: translate(0); }
  71% { transform: translate(-6px, 4px) skewX(8deg); }
  72% { transform: translate(8px, -2px) skewX(-5deg); }
  73% { transform: translate(-4px, 3px); }
  74% { transform: translate(0); }
  100% { transform: translate(0); }
}

@keyframes hero-glitch-r {
  0% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  2% { clip-path: inset(10% 0 70% 0); transform: translate(-10px, 3px); opacity: 0.9; }
  4% { clip-path: inset(50% 0 25% 0); transform: translate(8px, -2px); opacity: 0.8; }
  5% { clip-path: inset(20% 0 55% 0); transform: translate(-5px, 4px); opacity: 0.7; }
  6% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  40% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  41% { clip-path: inset(5% 0 60% 0); transform: translate(12px, -3px); opacity: 1; }
  42% { clip-path: inset(65% 0 10% 0); transform: translate(-8px, 5px); opacity: 0.9; }
  43% { clip-path: inset(30% 0 40% 0); transform: translate(6px, -4px); opacity: 0.8; }
  44% { clip-path: inset(75% 0 5% 0); transform: translate(-4px, 2px); opacity: 0.7; }
  45% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  70% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  71% { clip-path: inset(15% 0 50% 0); transform: translate(-15px, 4px); opacity: 1; }
  72% { clip-path: inset(40% 0 30% 0); transform: translate(10px, -5px); opacity: 0.9; }
  73% { clip-path: inset(60% 0 15% 0); transform: translate(-6px, 3px); opacity: 0.8; }
  74% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  100% { clip-path: inset(0); transform: translate(0); opacity: 0; }
}

@keyframes hero-glitch-c {
  0% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  3% { clip-path: inset(55% 0 20% 0); transform: translate(10px, 2px); opacity: 0.8; }
  5% { clip-path: inset(10% 0 65% 0); transform: translate(-8px, -3px); opacity: 0.9; }
  6% { clip-path: inset(40% 0 35% 0); transform: translate(5px, 4px); opacity: 0.7; }
  7% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  41% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  42% { clip-path: inset(20% 0 55% 0); transform: translate(-12px, 4px); opacity: 0.9; }
  43% { clip-path: inset(70% 0 10% 0); transform: translate(8px, -3px); opacity: 1; }
  44% { clip-path: inset(35% 0 45% 0); transform: translate(-6px, 2px); opacity: 0.8; }
  45% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  71% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  72% { clip-path: inset(25% 0 50% 0); transform: translate(14px, -4px); opacity: 1; }
  73% { clip-path: inset(80% 0 5% 0); transform: translate(-10px, 6px); opacity: 0.9; }
  74% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  100% { clip-path: inset(0); transform: translate(0); opacity: 0; }
}

@keyframes hero-glitch-skew {
  0% { transform: translate(0) skew(0deg); }
  2% { transform: translate(-6px, 2px) skew(4deg); }
  4% { transform: translate(5px, -3px) skew(-6deg); }
  5% { transform: translate(-3px, 1px) skew(2deg); }
  6% { transform: translate(0) skew(0deg); }
  40% { transform: translate(0) skew(0deg); }
  41% { transform: translate(10px, -2px) skew(-8deg); }
  42% { transform: translate(-8px, 4px) skew(6deg); }
  43% { transform: translate(4px, -1px) skew(-3deg); }
  44% { transform: translate(0) skew(0deg); }
  70% { transform: translate(0) skew(0deg); }
  71% { transform: translate(-12px, 3px) skew(10deg); }
  72% { transform: translate(8px, -4px) skew(-7deg); }
  73% { transform: translate(-4px, 2px) skew(3deg); }
  74% { transform: translate(0) skew(0deg); }
  100% { transform: translate(0) skew(0deg); }
}

/* ═══ ANIMATIONS ═══ */

@keyframes loaderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loader-spin { animation: loaderSpin 1.5s linear both; }

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.status-pulse { animation: statusPulse 1.6s ease-in-out infinite; }

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

/* ═══ LOADER GLITCH EFFECTS ═══ */

/* Glitch text RGB split on percentage */
.glitch-text {
  position: relative;
  animation: glitchTextSkew 2.5s infinite steps(1);
}
.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: rgba(0, 240, 255, 0.7);
  animation: glitchTextCyan 2.5s infinite steps(1);
  clip-path: inset(0 0 0 0);
}
.glitch-text::after {
  color: rgba(255, 0, 64, 0.7);
  animation: glitchTextRed 2.5s infinite steps(1);
  clip-path: inset(0 0 0 0);
}

@keyframes glitchTextSkew {
  0%, 100% { transform: translate(0) skew(0deg); }
  3% { transform: translate(-3px, 1px) skew(4deg); }
  5% { transform: translate(2px, -1px) skew(-3deg); }
  6% { transform: translate(0) skew(0deg); }
  45% { transform: translate(0) skew(0deg); }
  46% { transform: translate(5px, -2px) skew(-5deg); }
  48% { transform: translate(-3px, 2px) skew(3deg); }
  49% { transform: translate(0) skew(0deg); }
  80% { transform: translate(0) skew(0deg); }
  81% { transform: translate(-4px, 1px) skew(6deg); }
  83% { transform: translate(3px, -1px) skew(-4deg); }
  84% { transform: translate(0) skew(0deg); }
}

@keyframes glitchTextCyan {
  0%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  3% { transform: translate(-6px, 2px); clip-path: inset(15% 0 60% 0); }
  6% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  46% { transform: translate(-5px, -1px); clip-path: inset(40% 0 20% 0); }
  49% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  81% { transform: translate(-7px, 1px); clip-path: inset(10% 0 70% 0); }
  84% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
}

@keyframes glitchTextRed {
  0%, 100% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  3% { transform: translate(6px, -2px); clip-path: inset(55% 0 15% 0); }
  6% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  46% { transform: translate(5px, 1px); clip-path: inset(20% 0 50% 0); }
  49% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  81% { transform: translate(7px, -1px); clip-path: inset(65% 0 5% 0); }
  84% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
}

/* Screen shake */
@keyframes screenShake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 2px); }
  20% { transform: translate(4px, -2px); }
  30% { transform: translate(-2px, 4px); }
  40% { transform: translate(2px, -4px); }
  50% { transform: translate(-4px, 0); }
  60% { transform: translate(4px, 2px); }
  70% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 4px); }
  90% { transform: translate(-4px, -2px); }
  100% { transform: translate(0, 0); }
}
.loader-shake { animation: screenShake 0.15s ease-in-out; }

/* VHS tracking line movement */
@keyframes vhsTrack {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}
.vhs-line {
  animation: vhsTrack 0.8s linear infinite;
}
.vhs-line:nth-child(2) {
  animation-duration: 0.6s;
  animation-delay: 0.2s;
}

/* Error popup slide in */
@keyframes errorPopupIn {
  0% { transform: translateX(100%) scale(0.8); opacity: 0; }
  60% { transform: translateX(-5%) scale(1.02); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* Error popup slide out */
@keyframes errorPopupOut {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(120%) scale(0.8); opacity: 0; }
}

/* Warning blink */
@keyframes warningBlink {
  0%, 49% { opacity: 1; border-color: rgba(255, 0, 64, 0.6); }
  50%, 100% { opacity: 0.6; border-color: rgba(255, 0, 64, 0.2); }
}

/* Glitch flash on screen */
@keyframes glitchFlash {
  0% { background-color: rgba(255, 0, 64, 0); }
  5% { background-color: rgba(255, 0, 64, 0.08); }
  10% { background-color: rgba(0, 240, 255, 0.05); }
  15% { background-color: rgba(255, 0, 64, 0); }
  100% { background-color: rgba(255, 0, 64, 0); }
}

/* Hex dump line animation */
@keyframes hexFadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Data corruption text */
@keyframes corruptFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Substatus text (red warnings below status) */
.substatus-show {
  color: rgba(255, 60, 60, 0.9) !important;
  text-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
}

/* Horizontal glitch bar */
@keyframes glitchBar {
  0% { transform: translateX(-100%); opacity: 0; }
  5% { transform: translateX(0); opacity: 0.6; }
  10% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Full screen red pulse */
@keyframes redPulse {
  0%, 100% { box-shadow: inset 0 0 80px rgba(255,0,64,0); }
  50% { box-shadow: inset 0 0 80px rgba(255,0,64,0.12); }
}

/* Loader number jump/glitch */
@keyframes numberGlitch {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  50% { transform: translateY(1px); }
  75% { transform: translateY(-1px); }
}

/* CRT flicker */
@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}
.crt-flicker { animation: crtFlicker 4s infinite; }

/* ═══ EXTRA LOADER EFFECTS ═══ */

/* Binary rain character */
.binary-char {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.2;
  animation: binaryDrop 1.8s linear forwards;
}
@keyframes binaryDrop {
  0% { opacity: 0; transform: translateY(-10px); }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(100vh); }
}

/* Warning triangle */
@keyframes warningAppear {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes warningPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,0,64,0.3); }
  50% { box-shadow: 0 0 25px rgba(255,0,64,0.6), inset 0 0 15px rgba(255,0,64,0.1); }
}
.warning-tri {
  position: absolute;
  width: 120px;
  border: 1px solid rgba(255,0,64,0.4);
  background: rgba(5,5,8,0.9);
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  color: rgba(255,0,64,0.9);
  animation: warningAppear 0.3s ease-out both, warningPulse 0.8s ease-in-out infinite;
  pointer-events: none;
}
.warning-tri::before {
  content: '⚠';
  margin-right: 4px;
  font-size: 10px;
}

/* Glitch horizontal bar */
.glitch-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,0,64,0.4), rgba(0,240,255,0.3), transparent);
  animation: glitchBarSweep 0.4s ease-out forwards;
  pointer-events: none;
}
@keyframes glitchBarSweep {
  0% { transform: translateX(-100%); opacity: 0.8; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Blood drip animation */
@keyframes dripGrow {
  0% { height: 0; opacity: 0; }
  20% { opacity: 0.8; }
  100% { height: 40px; opacity: 0; }
}
.drip {
  animation: dripGrow 1.2s ease-in forwards;
}
.drip:nth-child(2) { animation-delay: 0.3s; }
.drip:nth-child(3) { animation-delay: 0.6s; }
.drip:nth-child(4) { animation-delay: 0.15s; }

/* Signal bar flicker */
@keyframes signalFlicker {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
  75% { opacity: 0.3; }
}
.signal-bar { animation: signalFlicker 0.6s steps(1) infinite; }
.signal-bar:nth-child(2) { animation-delay: 0.1s; }
.signal-bar:nth-child(3) { animation-delay: 0.2s; }
.signal-bar:nth-child(4) { animation-delay: 0.3s; }
.signal-bar:nth-child(5) { animation-delay: 0.15s; }

/* Crosshair rotation */
@keyframes crosshairRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Spark particle */
@keyframes sparkFade {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* Red pulse overlay */
@keyframes redPulseOverlay {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Waveform line */
#waveform { image-rendering: pixelated; }

/* ═══ MEGA EFFECTS CSS ═══ */

/* Data arrows animation */
@keyframes dataArrowPulse {
  0%, 100% { opacity: 0.15; transform: translateX(0); }
  50% { opacity: 0.4; transform: translateX(4px); }
}
@keyframes dataArrowPulseR {
  0%, 100% { opacity: 0.15; transform: translateX(0); }
  50% { opacity: 0.4; transform: translateX(-4px); }
}
.data-arrow { animation: dataArrowPulse 1.2s ease-in-out infinite; }
.data-arrow-r { animation: dataArrowPulseR 1.2s ease-in-out infinite; }

/* Pulsing outer rings */
@keyframes pulseRing1 {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.02); opacity: 0.6; }
}
@keyframes pulseRing2 {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.03); opacity: 0.5; }
}
@keyframes pulseRing3 {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50% { transform: scale(1.04); opacity: 0.35; }
}
.pulse-ring-1 { animation: pulseRing1 3s ease-in-out infinite; position: absolute; inset: 0; }
.pulse-ring-2 { animation: pulseRing2 4s ease-in-out infinite 0.5s; position: absolute; inset: 16px; }
.pulse-ring-3 { animation: pulseRing3 5s ease-in-out infinite 1s; position: absolute; inset: 32px; }

/* Equalizer bar */
.eq-bar {
  width: 2px;
  background: linear-gradient(to top, rgba(0,240,255,0.4), rgba(255,0,64,0.3));
  animation: eqBounce 0.5s ease-in-out infinite alternate;
  border-radius: 1px;
}
@keyframes eqBounce {
  0% { height: 4px; }
  100% { height: var(--eq-h, 30px); }
}

/* Radar canvas */
#radar-canvas { image-rendering: pixelated; }

/* Heartbeat canvas */
#heartbeat-canvas { image-rendering: pixelated; }

/* Flicker grid canvas */
#flicker-grid { image-rendering: pixelated; }

/* Circuit traces canvas */
#circuit-traces { image-rendering: pixelated; }

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}
.animate-float-slow { animation: float-slow 12s ease-in-out infinite; }
.animate-float-slow-delayed { animation: float-slow 15s ease-in-out infinite 2s; }
.animate-float-slow-2 { animation: float-slow 10s ease-in-out infinite 4s; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cyber-marquee { animation: marquee 30s linear infinite; }

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Hero letter animation */
.hero-letter {
  opacity: 0;
  transform: translateY(40px);
  animation: heroLetterIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes heroLetterIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero animations */
.hero-eyebrow { animation: fadeInUp 0.6s 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.hero-tagline { animation: fadeInUp 0.6s 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.hero-photo { animation: scaleIn 0.8s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-cta { animation: fadeInUp 0.6s 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.hero-scroll { animation: fadeInUp 0.6s 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* Section reveal animations */
.section-heading, .section-line, .about-bio, .about-stats,
.project-card, .tech-category, .service-card, .journey-item,
.experience-item, .testimonial-card, .projects-bg-number, .stat-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section-heading.visible, .section-line.visible, .about-bio.visible, .about-stats.visible,
.project-card.visible, .tech-category.visible, .service-card.visible, .journey-item.visible,
.experience-item.visible, .testimonial-card.visible, .projects-bg-number.visible, .stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Magnetic button */
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ═══ SKELETON / ERROR SVG ANIMATIONS ═══ */

@keyframes skeletonPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,0,64,0.3)) brightness(0.9); }
  50% { filter: drop-shadow(0 0 14px rgba(255,0,64,0.6)) brightness(1.1); }
}

@keyframes glitchFlicker {
  0%, 100% { opacity: 1; transform: translateX(0); }
  8% { opacity: 0.7; transform: translateX(-3px); }
  10% { opacity: 0.3; transform: translateX(3px); }
  12% { opacity: 0.9; transform: translateX(-1px); }
  18% { opacity: 1; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(0); }
  52% { opacity: 0.6; transform: translateX(2px); }
  54% { opacity: 0.2; transform: translateX(-2px); }
  56% { opacity: 0.8; transform: translateX(0); }
}

/* 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;
  }
}