/* Import premium fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Neural Network Inspired Color Palette */
  --primary: #7c3aed;           /* Deep Neural Purple */
  --primary-rgb: 124, 58, 237;
  --primary-dark: #5b21b6;
  --primary-light: #a78bfa;
  --secondary: #06b6d4;         /* Synapse Cyan */
  --accent: #f59e0b;            /* Neural Gold */
  --accent-hover: #d97706;
  --accent-rgb: 245, 158, 11;
  
  /* Neural Network Colors */
  --neuron-active: #00ff88;     /* Active Neuron Green */
  --neuron-inactive: #374151;   /* Dormant Gray */
  --synapse-strong: #00d2ff;    /* Strong Connection Blue */
  --synapse-weak: #6b7280;      /* Weak Connection */
  --data-flow: #ff0080;         /* Data Pulse Pink */
  --activation: #ffff00;        /* Activation Yellow */
  
  /* AI Processing Colors */
  --ai-core: #7c3aed;          /* Core Processing */
  --ai-memory: #06d6a0;        /* Memory Banks */
  --ai-compute: #f59e0b;       /* Computing Units */
  --ai-output: #10b981;        /* Output Layer */
  
  /* Enhanced 3D Neural Backgrounds */
  --bg-dark: #0a0a0f;
  --bg-neural-core: 
    radial-gradient(ellipse 600px 400px at 25% 25%, rgba(124, 58, 237, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 500px 350px at 75% 75%, rgba(0, 210, 255, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(0, 255, 136, 0.25) 0%, transparent 80%),
    conic-gradient(from 45deg at 50% 50%, 
      rgba(124, 58, 237, 0.2) 0deg, 
      transparent 90deg, 
      rgba(0, 210, 255, 0.15) 180deg, 
      transparent 270deg, 
      rgba(124, 58, 237, 0.2) 360deg),
    linear-gradient(135deg, #0a0a0f 0%, #161620 50%, #0f0f1a 100%);
  
  --bg-neural-network:
    /* Multiple neuron layers */
    radial-gradient(circle 4px at 15% 25%, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 6px at 85% 15%, var(--synapse-strong) 0%, transparent 100%),
    radial-gradient(circle 5px at 65% 75%, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 3px at 25% 85%, var(--ai-memory) 0%, transparent 100%),
    radial-gradient(circle 7px at 75% 45%, var(--activation) 0%, transparent 100%),
    radial-gradient(circle 4px at 45% 35%, var(--data-flow) 0%, transparent 100%),
    radial-gradient(circle 5px at 35% 65%, var(--ai-compute) 0%, transparent 100%),
    radial-gradient(circle 6px at 90% 80%, var(--ai-output) 0%, transparent 100%),
    /* Enhanced connection matrix */
    linear-gradient(45deg, transparent 48.5%, rgba(0, 210, 255, 0.4) 49%, rgba(0, 210, 255, 0.4) 51%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(124, 58, 237, 0.3) 49%, rgba(124, 58, 237, 0.3) 51%, transparent 51.5%),
    linear-gradient(30deg, transparent 49%, rgba(0, 255, 136, 0.25) 49.5%, rgba(0, 255, 136, 0.25) 50.5%, transparent 51%),
    linear-gradient(-30deg, transparent 49%, rgba(245, 158, 11, 0.2) 49.5%, rgba(245, 158, 11, 0.2) 50.5%, transparent 51%),
    /* Depth layer */
    linear-gradient(135deg, #0a0a0f 0%, #141420 100%);
  
  /* Epic 3D Shadows with Multiple Layers */
  --shadow-neuron-3d: 
    0 0 25px rgba(0, 255, 136, 0.8),
    0 0 50px rgba(0, 255, 136, 0.6),
    0 0 100px rgba(0, 255, 136, 0.4),
    0 0 200px rgba(0, 255, 136, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 24px 80px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  
  --shadow-synapse-3d: 
    0 0 20px rgba(0, 210, 255, 1),
    0 0 40px rgba(0, 210, 255, 0.8),
    0 0 80px rgba(0, 210, 255, 0.6),
    0 0 160px rgba(0, 210, 255, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 16px 64px rgba(0, 0, 0, 0.3);
  
  --shadow-neural-ultra-3d: 
    0 20px 60px rgba(124, 58, 237, 0.5),
    0 40px 120px rgba(0, 0, 0, 0.7),
    0 60px 180px rgba(0, 0, 0, 0.5),
    inset 0 4px 8px rgba(255, 255, 255, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(124, 58, 237, 0.3),
    0 0 0 3px rgba(0, 210, 255, 0.1);
  
  /* Ultra Multi-dimensional Glows */
  --glow-neural-ultra: 
    0 0 30px rgba(124, 58, 237, 1),
    0 0 60px rgba(124, 58, 237, 0.8),
    0 0 120px rgba(124, 58, 237, 0.6),
    0 0 200px rgba(124, 58, 237, 0.4),
    0 0 300px rgba(124, 58, 237, 0.2),
    0 0 400px rgba(124, 58, 237, 0.1);
  
  --glow-synapse-ultra: 
    0 0 25px rgba(0, 210, 255, 1),
    0 0 50px rgba(0, 210, 255, 0.9),
    0 0 100px rgba(0, 210, 255, 0.7),
    0 0 200px rgba(0, 210, 255, 0.5),
    0 0 300px rgba(0, 210, 255, 0.3);
  
  --glow-activation-ultra: 
    0 0 35px rgba(255, 255, 0, 1),
    0 0 70px rgba(255, 255, 0, 0.8),
    0 0 140px rgba(255, 255, 0, 0.5),
    0 0 280px rgba(255, 255, 0, 0.3);
  
  /* Spacing, Typography, Radius */
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --font-xs: 0.75rem; --font-sm: 0.875rem; --font-base: 1rem;
  --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem;
  --font-3xl: 1.875rem; --font-4xl: 2.25rem; --font-5xl: 3rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
  
  /* Enhanced Neural Transitions */
  --transition-neural: 800ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-synapse: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-activation: 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-3d: 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Enhanced Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-disabled: #4b5563;
  --text-accent: #7c3aed;
  --text-success: #10b981;
  --text-warning: #f59e0b;
  --text-error: #f43f5e;
  --text-info: #06b6d4;
  
  /* 3D Border Effects */
  --border: rgba(124, 58, 237, 0.18);
  --border-hover: rgba(124, 58, 237, 0.4);
  --border-focus: rgba(124, 58, 237, 0.6);
  --border-3d: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 3px rgba(124, 58, 237, 0.3);
  
  /* Epic 3D Shadows & Depth */
  --shadow-3d-sm: 
    0 2px 8px rgba(124, 58, 237, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
  --shadow-3d-md: 
    0 4px 16px rgba(124, 58, 237, 0.25),
    0 16px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  
  --shadow-3d-lg: 
    0 8px 32px rgba(124, 58, 237, 0.3),
    0 32px 64px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
  
  --shadow-3d-xl: 
    0 16px 64px rgba(124, 58, 237, 0.35),
    0 48px 128px rgba(0, 0, 0, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.12);
  
  /* Floating 3D Card Effect */
  --shadow-floating: 
    0 25px 50px rgba(124, 58, 237, 0.25),
    0 50px 100px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  
  /* Incredible Multi-layered Glows */
  --glow-3d: 
    0 0 20px rgba(124, 58, 237, 0.8),
    0 0 40px rgba(124, 58, 237, 0.6),
    0 0 80px rgba(124, 58, 237, 0.4),
    0 0 120px rgba(124, 58, 237, 0.2);
  
  --glow-accent-3d: 
    0 0 15px rgba(245, 158, 11, 0.8),
    0 0 30px rgba(245, 158, 11, 0.6),
    0 0 60px rgba(245, 158, 11, 0.4),
    0 0 90px rgba(245, 158, 11, 0.2);
  
  --glow-neural-3d: 
    0 0 12px rgba(6, 182, 212, 0.9),
    0 0 25px rgba(6, 182, 212, 0.7),
    0 0 50px rgba(6, 182, 212, 0.5),
    0 0 100px rgba(6, 182, 212, 0.3);
  
  /* Spacing & Typography */
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem;
  
  --font-xs: 0.75rem; --font-sm: 0.875rem; --font-base: 1rem;
  --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem;
  --font-3xl: 1.875rem; --font-4xl: 2.25rem; --font-5xl: 3rem;
  --font-6xl: 3.75rem; --font-7xl: 4.5rem; --font-8xl: 6rem;
  
  --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Advanced 3D Transitions */
  --transition-3d: 400ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-float: 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-bounce-3d: 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Neural Network Colors */
  --neuron-active: #00ff88;     /* Active Neuron Green */
  --neuron-inactive: #374151;   /* Dormant Gray */
  --synapse-strong: #00d2ff;    /* Strong Connection Blue */
  --synapse-weak: #6b7280;      /* Weak Connection */
  --data-flow: #ff0080;         /* Data Pulse Pink */
  --activation: #ffff00;        /* Activation Yellow */
  
  /* AI Processing Colors */
  --ai-core: #7c3aed;          /* Core Processing */
  --ai-memory: #06d6a0;        /* Memory Banks */
  --ai-compute: #f59e0b;       /* Computing Units */
  --ai-output: #10b981;        /* Output Layer */
  
  /* Neural Network Backgrounds */
  --bg-neural-core: 
    radial-gradient(circle at 25% 25%, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 210, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.15) 0%, transparent 70%),
    linear-gradient(135deg, #0a0a0f 0%, #161620 50%, #0f0f1a 100%);
  
  --bg-neural-network:
    /* Neuron nodes */
    radial-gradient(circle 3px at 20% 30%, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 2px at 80% 20%, var(--synapse-strong) 0%, transparent 100%),
    radial-gradient(circle 3px at 60% 70%, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 2px at 30% 80%, var(--ai-memory) 0%, transparent 100%),
    radial-gradient(circle 4px at 70% 40%, var(--activation) 0%, transparent 100%),
    /* Connection lines */
    linear-gradient(45deg, transparent 48%, rgba(0, 210, 255, 0.3) 49%, rgba(0, 210, 255, 0.3) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(124, 58, 237, 0.2) 49%, rgba(124, 58, 237, 0.2) 51%, transparent 52%),
    /* Base layer */
    linear-gradient(135deg, #0a0a0f 0%, #141420 100%);
  
  /* Neural Shadows */
  --shadow-neuron: 
    0 0 20px rgba(0, 255, 136, 0.6),
    0 0 40px rgba(0, 255, 136, 0.4),
    0 0 80px rgba(0, 255, 136, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.5);
  
  --shadow-synapse: 
    0 0 15px rgba(0, 210, 255, 0.8),
    0 0 30px rgba(0, 210, 255, 0.6),
    0 0 60px rgba(0, 210, 255, 0.4),
    0 6px 24px rgba(0, 0, 0, 0.4);
  
  --shadow-neural-3d: 
    0 16px 48px rgba(124, 58, 237, 0.4),
    0 32px 96px rgba(0, 0, 0, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(124, 58, 237, 0.2);
  
  /* Neural Glows */
  --glow-neural: 
    0 0 20px rgba(124, 58, 237, 0.9),
    0 0 40px rgba(124, 58, 237, 0.7),
    0 0 80px rgba(124, 58, 237, 0.5),
    0 0 120px rgba(124, 58, 237, 0.3),
    0 0 160px rgba(124, 58, 237, 0.1);
  
  --glow-synapse: 
    0 0 15px rgba(0, 210, 255, 1),
    0 0 30px rgba(0, 210, 255, 0.8),
    0 0 60px rgba(0, 210, 255, 0.6),
    0 0 120px rgba(0, 210, 255, 0.4);
  
  --glow-activation: 
    0 0 25px rgba(255, 255, 0, 0.9),
    0 0 50px rgba(255, 255, 0, 0.6),
    0 0 100px rgba(255, 255, 0, 0.3);
  
  /* Neural Transitions */
  --transition-neural: 600ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-synapse: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-activation: 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Enhanced Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
    /* Hide default cursor so only the custom circle shows (desktop pointers only) */
    cursor: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated Background Grid */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    background-image: 
        linear-gradient(90deg, var(--primary) 1px, transparent 1px),
        linear-gradient(0deg, var(--primary) 1px, transparent 1px);
    background-size: 100px 100px;
    animation: grid-move 20s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* 🧠 ENHANCED 3D NEURAL NETWORK EFFECTS */

/* Ultra-Realistic Animated Neural Background */
.bg-neural-animated {
  background: var(--bg-neural-core);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 2000px;
}

.bg-neural-animated::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  background-image: 
    /* Neural Network Nodes - Subtle dots representing neurons */
    radial-gradient(circle 2px at 15% 25%, rgba(0, 255, 136, 0.6) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 85% 15%, rgba(0, 210, 255, 0.5) 0%, transparent 100%),
    radial-gradient(circle 2px at 65% 75%, rgba(124, 58, 237, 0.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 25% 85%, rgba(245, 158, 11, 0.5) 0%, transparent 100%),
    radial-gradient(circle 2.5px at 75% 45%, rgba(0, 255, 136, 0.4) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 45% 35%, rgba(255, 0, 128, 0.3) 0%, transparent 100%),
    radial-gradient(circle 2px at 35% 65%, rgba(0, 210, 255, 0.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 90% 80%, rgba(16, 185, 129, 0.5) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 10% 60%, rgba(124, 58, 237, 0.3) 0%, transparent 100%),
    radial-gradient(circle 2px at 60% 20%, rgba(245, 158, 11, 0.4) 0%, transparent 100%),
    radial-gradient(circle 1px at 40% 90%, rgba(0, 255, 136, 0.3) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 80% 60%, rgba(255, 0, 128, 0.4) 0%, transparent 100%),
    
    /* Neural Connection Lines - Subtle lines connecting the nodes */
    linear-gradient(45deg, transparent 49%, rgba(0, 210, 255, 0.15) 49.5%, rgba(0, 210, 255, 0.15) 50.5%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(124, 58, 237, 0.12) 49.5%, rgba(124, 58, 237, 0.12) 50.5%, transparent 51%),
    linear-gradient(30deg, transparent 49.2%, rgba(0, 255, 136, 0.1) 49.7%, rgba(0, 255, 136, 0.1) 50.3%, transparent 50.8%),
    linear-gradient(-30deg, transparent 49.2%, rgba(245, 158, 11, 0.08) 49.7%, rgba(245, 158, 11, 0.08) 50.3%, transparent 50.8%),
    linear-gradient(60deg, transparent 49.3%, rgba(255, 0, 128, 0.06) 49.8%, rgba(255, 0, 128, 0.06) 50.2%, transparent 50.7%),
    linear-gradient(-60deg, transparent 49.3%, rgba(16, 185, 129, 0.05) 49.8%, rgba(16, 185, 129, 0.05) 50.2%, transparent 50.7%),
    
    /* Additional subtle connection patterns */
    linear-gradient(15deg, transparent 49.5%, rgba(0, 210, 255, 0.04) 49.8%, rgba(0, 210, 255, 0.04) 50.2%, transparent 50.5%),
    linear-gradient(-15deg, transparent 49.5%, rgba(124, 58, 237, 0.03) 49.8%, rgba(124, 58, 237, 0.03) 50.2%, transparent 50.5%),
    
    /* Base neural depth layer */
    linear-gradient(135deg, rgba(10, 10, 15, 0.8) 0%, rgba(20, 20, 32, 0.6) 100%);
  background-size: 
    400px 400px, 350px 350px, 450px 450px, 300px 300px, 380px 380px, 320px 320px,
    400px 400px, 360px 360px, 330px 330px, 420px 420px, 340px 340px, 390px 390px,
    100px 100px, 120px 120px, 80px 80px, 90px 90px, 70px 70px, 110px 110px,
    150px 150px, 130px 130px, 100% 100%;
  animation: neural-network-flow 8s ease-in-out infinite;
  transform-origin: center;
  transform: translateZ(-100px);
}

.bg-neural-animated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Subtle pulsing network overlay */
    radial-gradient(circle 3px at 20% 30%, rgba(0, 255, 136, 0.2) 0%, transparent 100%),
    radial-gradient(circle 2px at 80% 20%, rgba(0, 210, 255, 0.15) 0%, transparent 100%),
    radial-gradient(circle 3px at 60% 70%, rgba(124, 58, 237, 0.1) 0%, transparent 100%),
    radial-gradient(circle 2px at 30% 80%, rgba(245, 158, 11, 0.12) 0%, transparent 100%),
    
    /* Dynamic connection pulses */
    linear-gradient(135deg, transparent 49.7%, rgba(0, 255, 136, 0.08) 50%, rgba(0, 255, 136, 0.08) 50.3%, transparent 50.7%),
    linear-gradient(-135deg, transparent 49.7%, rgba(0, 210, 255, 0.06) 50%, rgba(0, 210, 255, 0.06) 50.3%, transparent 50.7%);
  background-size: 
    500px 500px, 400px 400px, 450px 450px, 350px 350px,
    200px 200px, 180px 180px;
  animation: neural-pulse-overlay 6s ease-in-out infinite reverse;
  transform: translateZ(-50px);
}

@keyframes neural-network-flow {
  0%, 100% { 
    opacity: 0.7; 
    transform: translateZ(-100px) scale(1);
    background-position: 0% 0%, 10% 10%, 20% 0%, 30% 15%, 5% 25%, 15% 5%, 25% 20%, 0% 30%, 20% 10%, 10% 25%, 30% 5%, 5% 15%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  50% { 
    opacity: 1; 
    transform: translateZ(-80px) scale(1.02);
    background-position: 15% 15%, 25% 25%, 35% 15%, 45% 30%, 20% 40%, 30% 20%, 40% 35%, 15% 45%, 35% 25%, 25% 40%, 45% 20%, 20% 30%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
  }
}

@keyframes neural-pulse-overlay {
  0%, 100% { 
    opacity: 0.3;
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  50% { 
    opacity: 0.6;
    background-position: 30% 30%, 20% 40%, 40% 20%, 10% 30%, 50% 10%, 25% 45%;
  }
}

/* Ultra-Realistic 3D Neuron Nodes */
.neuron {
  width: 16px;
  height: 16px;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
    radial-gradient(circle at center, var(--neuron-active) 0%, rgba(0, 255, 136, 0.6) 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: var(--shadow-neuron-3d);
  animation: neuron-fire-3d 3s ease-in-out infinite;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(20px);
}

.neuron::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 3px solid rgba(0, 255, 136, 0.4);
  border-radius: 50%;
  animation: neuron-ripple-3d 3s ease-out infinite;
  transform: translateZ(-10px);
}

.neuron::after {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border: 2px solid rgba(0, 255, 136, 0.2);
  border-radius: 50%;
  animation: neuron-ripple-3d 3s ease-out infinite 1s;
  transform: translateZ(-20px);
}

@keyframes neuron-fire-3d {
  0%, 100% { 
    background: 
      radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
      radial-gradient(circle at center, var(--neuron-active) 0%, rgba(0, 255, 136, 0.6) 70%, transparent 100%);
    transform: translateZ(20px) scale(1) rotateX(0deg) rotateY(0deg);
    box-shadow: var(--shadow-neuron-3d);
  }
  25% { 
    background: 
      radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0%, transparent 50%),
      radial-gradient(circle at center, var(--activation) 0%, rgba(255, 255, 0, 0.8) 70%, transparent 100%);
    transform: translateZ(40px) scale(1.5) rotateX(15deg) rotateY(15deg);
    box-shadow: var(--glow-activation-ultra);
  }
  50% { 
    background: 
      radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 45%),
      radial-gradient(circle at center, var(--data-flow) 0%, rgba(255, 0, 128, 0.7) 70%, transparent 100%);
    transform: translateZ(30px) scale(1.3) rotateX(-10deg) rotateY(-10deg);
  }
  75% { 
    background: 
      radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85) 0%, transparent 42%),
      radial-gradient(circle at center, var(--synapse-strong) 0%, rgba(0, 210, 255, 0.65) 70%, transparent 100%);
    transform: translateZ(25px) scale(1.2) rotateX(8deg) rotateY(8deg);
  }
}

@keyframes neuron-ripple-3d {
  0% { 
    transform: translateZ(-10px) scale(0.5) rotateX(0deg);
    opacity: 1;
    border-width: 3px;
  }
  50% {
    transform: translateZ(-30px) scale(1.5) rotateX(180deg);
    opacity: 0.6;
    border-width: 2px;
  }
  100% { 
    transform: translateZ(-50px) scale(3) rotateX(360deg);
    opacity: 0;
    border-width: 1px;
  }
}

/* Ultra-Advanced 3D Synapse Connections */
.synapse {
  height: 4px;
  background: 
    linear-gradient(90deg, 
      transparent 0%, 
      var(--neuron-active) 15%,
      var(--synapse-strong) 35%, 
      var(--data-flow) 65%, 
      var(--ai-output) 85%,
      transparent 100%);
  border-radius: 2px;
  box-shadow: var(--shadow-synapse-3d);
  animation: synapse-pulse-3d 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateZ(15px) rotateX(5deg);
}

.synapse::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -15px;
  width: 30px;
  height: 8px;
  background: 
    radial-gradient(ellipse, 
      rgba(255, 0, 128, 1) 0%, 
      rgba(255, 0, 128, 0.6) 40%,
      transparent 70%);
  border-radius: 50%;
  animation: data-pulse-flow-3d 2s linear infinite;
  transform: translateZ(10px);
}

.synapse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.3) 50%, 
      transparent 100%);
  animation: synapse-highlight-3d 3s ease-in-out infinite;
  transform: translateZ(5px);
}

@keyframes synapse-pulse-3d {
  0%, 100% { 
    opacity: 0.7; 
    transform: translateZ(15px) rotateX(5deg) scaleY(1) scaleX(1);
    box-shadow: var(--shadow-synapse-3d);
  }
  50% { 
    opacity: 1; 
    transform: translateZ(25px) rotateX(-2deg) scaleY(2) scaleX(1.1);
    box-shadow: var(--glow-synapse-ultra);
  }
}

@keyframes data-pulse-flow-3d {
  0% { 
    left: -30px; 
    opacity: 0;
    transform: translateZ(10px) scale(0.5) rotateY(0deg);
  }
  15% { 
    opacity: 1; 
    transform: translateZ(20px) scale(1) rotateY(45deg);
  }
  85% { 
    opacity: 1; 
    transform: translateZ(25px) scale(1.3) rotateY(315deg);
  }
  100% { 
    left: calc(100% + 30px); 
    opacity: 0;
    transform: translateZ(10px) scale(0.5) rotateY(360deg);
  }
}

@keyframes synapse-highlight-3d {
  0%, 100% { 
    opacity: 0;
    transform: translateZ(5px) translateX(-100%);
  }
  50% { 
    opacity: 0.8;
    transform: translateZ(5px) translateX(0%);
  }
}

/* Revolutionary 3D Neural Grid */
.neural-grid {
  background-image: 
    /* 3D Neuron layers */
    radial-gradient(circle 5px at 100px 100px, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 7px at 200px 150px, var(--ai-memory) 0%, transparent 100%),
    radial-gradient(circle 6px at 300px 80px, var(--activation) 0%, transparent 100%),
    radial-gradient(circle 4px at 150px 200px, var(--synapse-strong) 0%, transparent 100%),
    radial-gradient(circle 8px at 250px 180px, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 5px at 320px 220px, var(--data-flow) 0%, transparent 100%),
    radial-gradient(circle 6px at 80px 180px, var(--ai-compute) 0%, transparent 100%),
    radial-gradient(circle 7px at 380px 120px, var(--ai-output) 0%, transparent 100%),
    /* Enhanced 3D connection matrix */
    linear-gradient(45deg, transparent 48%, rgba(0, 210, 255, 0.5) 49%, rgba(0, 210, 255, 0.5) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(124, 58, 237, 0.4) 49%, rgba(124, 58, 237, 0.4) 51%, transparent 52%),
    linear-gradient(30deg, transparent 49%, rgba(0, 255, 136, 0.3) 49.5%, rgba(0, 255, 136, 0.3) 50.5%, transparent 51%),
    linear-gradient(-30deg, transparent 49%, rgba(245, 158, 11, 0.25) 49.5%, rgba(245, 158, 11, 0.25) 50.5%, transparent 51%),
    linear-gradient(60deg, transparent 49%, rgba(255, 0, 128, 0.2) 49.5%, rgba(255, 0, 128, 0.2) 50.5%, transparent 51%),
    linear-gradient(-60deg, transparent 49%, rgba(16, 185, 129, 0.15) 49.5%, rgba(16, 185, 129, 0.15) 50.5%, transparent 51%);
  animation: neural-network-flow-3d 10s linear infinite;
  transform-style: preserve-3d;
}

@keyframes neural-network-flow-3d {
  0% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    transform: rotateZ(0deg) rotateX(0deg);
  }
  25% {
    transform: rotateZ(2deg) rotateX(1deg);
  }
  50% {
    transform: rotateZ(0deg) rotateX(-1deg);
  }
  75% {
    transform: rotateZ(-2deg) rotateX(0.5deg);
  }
  100% { 
    background-position: 500px 500px, -500px 300px, 300px -400px, -300px -300px, 400px 200px, -200px 400px, 200px -200px, -400px 500px;
    transform: rotateZ(0deg) rotateX(0deg);
  }
}

/* Ultra-Premium 3D Neural Cards */
.neural-card {
  background: 
    linear-gradient(135deg, 
      rgba(15, 15, 26, 0.95) 0%, 
      rgba(20, 20, 35, 0.9) 50%, 
      rgba(15, 15, 26, 0.95) 100%);
  border: 2px solid;
  border-image: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.6), 
    rgba(0, 210, 255, 0.4), 
    rgba(0, 255, 136, 0.3)) 1;
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: var(--shadow-neural-ultra-3d);
  transform: perspective(1500px) rotateX(8deg) rotateY(-3deg) translateZ(30px);
  transition: all var(--transition-3d);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.neural-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Enhanced neural grid with depth */
    radial-gradient(circle 3px at 25% 25%, rgba(0, 255, 136, 0.8) 0%, transparent 100%),
    radial-gradient(circle 4px at 75% 25%, rgba(0, 210, 255, 0.7) 0%, transparent 100%),
    radial-gradient(circle 3px at 25% 75%, rgba(245, 158, 11, 0.6) 0%, transparent 100%),
    radial-gradient(circle 5px at 75% 75%, rgba(255, 0, 128, 0.5) 0%, transparent 100%),
    repeating-linear-gradient(45deg,
      transparent 0px,
      rgba(124, 58, 237, 0.1) 1px,
      transparent 20px),
    repeating-linear-gradient(-45deg,
      transparent 0px,
      rgba(0, 210, 255, 0.08) 1px,
      transparent 25px);
  opacity: 0.6;
  animation: neural-network-flow-3d 15s linear infinite;
  transform: translateZ(-10px);
}

.neural-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -50%;
  right: -50%;
  height: 4px;
  background: 
    linear-gradient(90deg, 
      transparent, 
      rgba(0, 255, 136, 1) 25%, 
      rgba(0, 210, 255, 0.8) 50%, 
      rgba(255, 0, 128, 0.6) 75%,
      transparent);
  border-radius: 2px;
  animation: neural-scan-3d 4s ease-in-out infinite;
  transform: translateZ(20px);
  box-shadow: 
    0 0 20px rgba(0, 255, 136, 0.8),
    0 0 40px rgba(0, 210, 255, 0.6);
}

@keyframes neural-scan-3d {
  0%, 100% { 
    transform: translateZ(20px) translateY(0) scaleX(0) rotateY(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateZ(20px) translateY(0) scaleX(1) rotateY(0deg);
  }
  90% {
    opacity: 1;
    transform: translateZ(20px) translateY(300px) scaleX(1) rotateY(360deg);
  }
}

.neural-card:hover {
  transform: perspective(1500px) rotateX(2deg) rotateY(2deg) translateZ(60px) translateY(-25px);
  box-shadow: 
    var(--glow-neural-ultra),
    0 40px 120px rgba(0, 0, 0, 0.8),
    0 60px 200px rgba(124, 58, 237, 0.3);
}

.neural-card:hover::before {
  animation-duration: 8s;
  opacity: 1;
}

/* Ultra-Realistic 3D Neuron Nodes */
.neuron-node {
  width: 20px;
  height: 20px;
  background: 
    /* Realistic 3D sphere gradient */
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 15%, transparent 40%),
    radial-gradient(circle at 60% 60%, rgba(0, 255, 136, 0.4) 0%, transparent 30%),
    radial-gradient(circle at center, var(--neuron-active) 20%, rgba(0, 255, 136, 0.8) 80%, rgba(0, 128, 68, 0.6) 100%);
  border: 2px solid rgba(0, 255, 136, 0.6);
  border-radius: 50%;
  box-shadow: var(--shadow-neuron-3d);
  animation: neuron-activity-3d 4s ease-in-out infinite;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(25px);
}

.neuron-node::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid rgba(0, 255, 136, 0.5);
  border-radius: 50%;
  animation: neuron-ripple-ultra 4s ease-out infinite;
  transform: translateZ(-15px);
}

.neuron-node::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: 2px solid rgba(0, 255, 136, 0.3);
  border-radius: 50%;
  animation: neuron-ripple-ultra 4s ease-out infinite 1.5s;
  transform: translateZ(-25px);
}

@keyframes neuron-activity-3d {
  0%, 100% { 
    background: 
      radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 15%, transparent 40%),
      radial-gradient(circle at 60% 60%, rgba(0, 255, 136, 0.4) 0%, transparent 30%),
      radial-gradient(circle at center, var(--neuron-active) 20%, rgba(0, 255, 136, 0.8) 80%, rgba(0, 128, 68, 0.6) 100%);
    transform: translateZ(25px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: var(--shadow-neuron-3d);
  }
  20% { 
    background: 
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 20%, transparent 50%),
      radial-gradient(circle at 70% 70%, rgba(255, 255, 0, 0.6) 0%, transparent 40%),
      radial-gradient(circle at center, var(--activation) 15%, rgba(255, 255, 0, 0.9) 85%, rgba(255, 200, 0, 0.7) 100%);
    transform: translateZ(45px) scale(1.6) rotateX(20deg) rotateY(15deg) rotateZ(10deg);
    box-shadow: var(--glow-activation-ultra);
  }
  40% { 
    background: 
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 18%, transparent 45%),
      radial-gradient(circle at 65% 75%, rgba(255, 0, 128, 0.5) 0%, transparent 35%),
      radial-gradient(circle at center, var(--data-flow) 18%, rgba(255, 0, 128, 0.8) 82%, rgba(200, 0, 100, 0.6) 100%);
    transform: translateZ(35px) scale(1.4) rotateX(-15deg) rotateY(-12deg) rotateZ(-8deg);
  }
  60% { 
    background: 
      radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 16%, transparent 42%),
      radial-gradient(circle at 58% 68%, rgba(0, 210, 255, 0.45) 0%, transparent 32%),
      radial-gradient(circle at center, var(--synapse-strong) 22%, rgba(0, 210, 255, 0.75) 78%, rgba(0, 168, 204, 0.55) 100%);
    transform: translateZ(30px) scale(1.3) rotateX(12deg) rotateY(10deg) rotateZ(6deg);
  }
  80% { 
    background: 
      radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 14%, transparent 38%),
      radial-gradient(circle at 62% 65%, rgba(16, 185, 129, 0.4) 0%, transparent 28%),
      radial-gradient(circle at center, var(--ai-output) 25%, rgba(16, 185, 129, 0.7) 75%, rgba(12, 148, 103, 0.5) 100%);
    transform: translateZ(28px) scale(1.2) rotateX(-8deg) rotateY(-6deg) rotateZ(-4deg);
  }
}

@keyframes neuron-ripple-ultra {
  0% { 
    transform: translateZ(-15px) scale(0.4) rotateX(0deg) rotateY(0deg);
    opacity: 1;
    border-width: 3px;
  }
  30% {
    transform: translateZ(-35px) scale(1.2) rotateX(120deg) rotateY(90deg);
    opacity: 0.8;
    border-width: 2.5px;
  }
  70% {
    transform: translateZ(-60px) scale(2.2) rotateX(240deg) rotateY(180deg);
    opacity: 0.3;
    border-width: 1.5px;
  }
  100% { 
    transform: translateZ(-100px) scale(4) rotateX(360deg) rotateY(270deg);
    opacity: 0;
    border-width: 1px;
  }
}

/* Revolutionary 3D Synapse Lines */
.synapse-line {
  height: 5px;
  background: 
    linear-gradient(90deg, 
      transparent 0%, 
      var(--neuron-active) 10%,
      var(--synapse-strong) 25%, 
      var(--activation) 40%,
      var(--data-flow) 60%, 
      var(--ai-compute) 80%,
      var(--ai-output) 90%,
      transparent 100%);
  border-radius: 3px;
  box-shadow: var(--shadow-synapse-3d);
  animation: synapse-activity-3d 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateZ(20px) rotateY(2deg);
}

.synapse-line::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -20px;
  width: 40px;
  height: 11px;
  background: 
    radial-gradient(ellipse 40px 11px, 
      rgba(255, 0, 128, 1) 0%, 
      rgba(255, 0, 128, 0.8) 30%,
      rgba(255, 100, 150, 0.4) 60%,
      transparent 100%);
  border-radius: 50%;
  animation: data-pulse-flow-ultra-3d 2.5s linear infinite;
  transform: translateZ(15px);
  box-shadow: 
    0 0 15px rgba(255, 0, 128, 0.8),
    0 0 30px rgba(255, 0, 128, 0.4);
}

.synapse-line::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  height: 3px;
  background: 
    linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.6) 20%,
      rgba(255, 255, 255, 0.4) 50%, 
      rgba(255, 255, 255, 0.6) 80%,
      transparent 100%);
  border-radius: 2px;
  animation: synapse-highlight-ultra-3d 4s ease-in-out infinite;
  transform: translateZ(8px);
}

@keyframes synapse-activity-3d {
  0%, 100% { 
    opacity: 0.8; 
    transform: translateZ(20px) rotateY(2deg) scaleY(1) scaleX(1);
    box-shadow: var(--shadow-synapse-3d);
  }
  33% { 
    opacity: 1; 
    transform: translateZ(35px) rotateY(-1deg) scaleY(2.2) scaleX(1.15);
    box-shadow: var(--glow-synapse-ultra);
  }
  66% { 
    opacity: 0.95; 
    transform: translateZ(30px) rotateY(1deg) scaleY(1.8) scaleX(1.1);
  }
}

@keyframes data-pulse-flow-ultra-3d {
  0% { 
    left: -40px; 
    opacity: 0;
    transform: translateZ(15px) scale(0.3) rotateY(0deg) rotateZ(0deg);
  }
  10% { 
    opacity: 1; 
    transform: translateZ(25px) scale(1) rotateY(60deg) rotateZ(45deg);
  }
  50% {
    transform: translateZ(30px) scale(1.4) rotateY(180deg) rotateZ(180deg);
  }
  90% { 
    opacity: 1; 
    transform: translateZ(25px) scale(1.6) rotateY(300deg) rotateZ(315deg);
  }
  100% { 
    left: calc(100% + 40px); 
    opacity: 0;
    transform: translateZ(15px) scale(0.3) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes synapse-highlight-ultra-3d {
  0%, 100% { 
    opacity: 0;
    transform: translateZ(8px) translateX(-200%) rotateY(0deg);
  }
  25% {
    opacity: 0.6;
    transform: translateZ(12px) translateX(-50%) rotateY(15deg);
  }
  50% { 
    opacity: 1;
    transform: translateZ(15px) translateX(0%) rotateY(0deg);
  }
  75% {
    opacity: 0.6;
    transform: translateZ(12px) translateX(50%) rotateY(-15deg);
  }
}

/* Ultra-Advanced 3D Neural Processing */
.neural-processor {
  background: 
    linear-gradient(135deg, 
      rgba(10, 10, 15, 0.95) 0%,
      rgba(20, 20, 32, 0.9) 25%,
      rgba(15, 15, 28, 0.95) 50%,
      rgba(25, 25, 40, 0.9) 75%,
      rgba(10, 10, 15, 0.95) 100%);
  border: 3px solid;
  border-image: linear-gradient(45deg, 
    var(--primary) 0%, 
    var(--secondary) 25%, 
    var(--accent) 50%, 
    var(--neuron-active) 75%, 
    var(--primary) 100%) 1;
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
  animation: processor-think-3d 6s ease-in-out infinite;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(10deg) rotateY(-5deg) translateZ(40px);
  box-shadow: var(--shadow-neural-ultra-3d);
  transition: all var(--transition-3d);
}

.neural-processor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Complex 3D grid system */
    repeating-linear-gradient(90deg,
      transparent 0px,
      rgba(124, 58, 237, 0.15) 2px,
      transparent 8px),
    repeating-linear-gradient(0deg,
      transparent 0px,
      rgba(6, 182, 212, 0.12) 2px,
      transparent 10px),
    repeating-linear-gradient(45deg,
      transparent 0px,
      rgba(0, 255, 136, 0.1) 1px,
      transparent 15px),
    repeating-linear-gradient(-45deg,
      transparent 0px,
      rgba(245, 158, 11, 0.08) 1px,
      transparent 12px);
  animation: neural-scan-grid-3d 8s linear infinite;
  transform: translateZ(-20px);
}

.neural-processor::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  background: 
    conic-gradient(from 0deg at 50% 50%,
      rgba(124, 58, 237, 0.3) 0deg,
      transparent 60deg,
      rgba(0, 210, 255, 0.25) 120deg,
      transparent 180deg,
      rgba(0, 255, 136, 0.2) 240deg,
      transparent 300deg,
      rgba(124, 58, 237, 0.3) 360deg);
  border-radius: var(--radius-xl);
  animation: processor-core-rotation-3d 12s linear infinite;
  transform: translateZ(-10px);
}

@keyframes processor-think-3d {
  0%, 100% { 
    border-image: linear-gradient(45deg, 
      var(--primary) 0%, 
      var(--secondary) 25%, 
      var(--accent) 50%, 
      var(--neuron-active) 75%, 
      var(--primary) 100%) 1;
    box-shadow: var(--shadow-neural-ultra-3d);
    transform: perspective(1200px) rotateX(10deg) rotateY(-5deg) translateZ(40px);
  }
  20% { 
    border-image: linear-gradient(45deg, 
      var(--neuron-active) 0%, 
      var(--activation) 25%, 
      var(--data-flow) 50%, 
      var(--synapse-strong) 75%, 
      var(--neuron-active) 100%) 1;
    box-shadow: var(--glow-neural-ultra);
    transform: perspective(1200px) rotateX(5deg) rotateY(2deg) translateZ(60px);
  }
  40% { 
    border-image: linear-gradient(45deg, 
      var(--synapse-strong) 0%, 
      var(--ai-memory) 25%, 
      var(--ai-compute) 50%, 
      var(--secondary) 75%, 
      var(--synapse-strong) 100%) 1;
    box-shadow: var(--glow-synapse-ultra);
    transform: perspective(1200px) rotateX(15deg) rotateY(-8deg) translateZ(50px);
  }
  60% { 
    border-image: linear-gradient(45deg, 
      var(--accent) 0%, 
      var(--ai-output) 25%, 
      var(--neuron-active) 50%, 
      var(--activation) 75%, 
      var(--accent) 100%) 1;
    transform: perspective(1200px) rotateX(8deg) rotateY(3deg) translateZ(55px);
  }
  80% { 
    border-image: linear-gradient(45deg, 
      var(--data-flow) 0%, 
      var(--primary) 25%, 
      var(--synapse-strong) 50%, 
      var(--ai-memory) 75%, 
      var(--data-flow) 100%) 1;
    transform: perspective(1200px) rotateX(12deg) rotateY(-2deg) translateZ(45px);
  }
}

@keyframes neural-scan-grid-3d {
  0% { 
    transform: translateZ(-20px) translateX(-150%) translateY(-150%) rotateZ(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateZ(-10px) translateX(0%) translateY(0%) rotateZ(180deg);
    opacity: 1;
  }
  100% { 
    transform: translateZ(-20px) translateX(150%) translateY(150%) rotateZ(360deg);
    opacity: 0.6;
  }
}

@keyframes processor-core-rotation-3d {
  0% { 
    transform: translateZ(-10px) rotateZ(0deg) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateZ(-5px) rotateZ(180deg) scale(1.1);
    opacity: 0.9;
  }
  100% { 
    transform: translateZ(-10px) rotateZ(360deg) scale(1);
    opacity: 0.7;
  }
}

/* Ultra-Realistic 3D Brain Pattern */
.neural-brain {
  background: 
    /* Ultra-complex brain hemisphere simulation */
    radial-gradient(ellipse 300px 150px at 25% 35%, rgba(124, 58, 237, 0.5) 0%, transparent 75%),
    radial-gradient(ellipse 280px 170px at 75% 65%, rgba(0, 210, 255, 0.4) 0%, transparent 80%),
    radial-gradient(ellipse 250px 120px at 50% 25%, rgba(0, 255, 136, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 320px 140px at 65% 85%, rgba(245, 158, 11, 0.3) 0%, transparent 75%),
    radial-gradient(ellipse 200px 100px at 35% 75%, rgba(255, 0, 128, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse 180px 90px at 85% 35%, rgba(16, 185, 129, 0.2) 0%, transparent 60%),
    /* Enhanced neural pathway connections */
    conic-gradient(from 0deg at 30% 40%, 
      rgba(124, 58, 237, 0.3) 0deg, 
      transparent 45deg, 
      rgba(0, 210, 255, 0.25) 90deg, 
      transparent 135deg, 
      rgba(0, 255, 136, 0.2) 180deg, 
      transparent 225deg,
      rgba(245, 158, 11, 0.15) 270deg,
      transparent 315deg,
      rgba(124, 58, 237, 0.3) 360deg),
    conic-gradient(from 180deg at 70% 60%, 
      rgba(255, 0, 128, 0.2) 0deg, 
      transparent 60deg, 
      rgba(16, 185, 129, 0.18) 120deg, 
      transparent 180deg, 
      rgba(0, 210, 255, 0.15) 240deg, 
      transparent 300deg, 
      rgba(255, 0, 128, 0.2) 360deg),
    /* Base depth layer */
    linear-gradient(135deg, var(--bg-dark) 0%, #141420 50%, #1a1a2e 100%);
  animation: brain-activity-3d 12s ease-in-out infinite;
  transform-style: preserve-3d;
  perspective: 1500px;
}

@keyframes brain-activity-3d {
  0%, 100% { 
    filter: brightness(1) hue-rotate(0deg) contrast(1);
    transform: perspective(1500px) rotateX(0deg) rotateY(0deg) scale(1);
  }
  16.66% { 
    filter: brightness(1.3) hue-rotate(15deg) contrast(1.2);
    transform: perspective(1500px) rotateX(2deg) rotateY(3deg) scale(1.02);
  }
  33.33% { 
    filter: brightness(1.6) hue-rotate(30deg) contrast(1.4);
    transform: perspective(1500px) rotateX(-1deg) rotateY(-2deg) scale(1.04);
  }
  50% { 
    filter: brightness(1.4) hue-rotate(20deg) contrast(1.3);
    transform: perspective(1500px) rotateX(3deg) rotateY(1deg) scale(1.03);
  }
  66.66% { 
    filter: brightness(1.2) hue-rotate(10deg) contrast(1.1);
    transform: perspective(1500px) rotateX(-2deg) rotateY(-3deg) scale(1.01);
  }
  83.33% { 
    filter: brightness(1.1) hue-rotate(5deg) contrast(1.05);
    transform: perspective(1500px) rotateX(1deg) rotateY(2deg) scale(1.02);
  }
}

/* Ultra-Advanced 3D Data Flow Particles */
.data-particles {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.data-particles::before,
.data-particles::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
    radial-gradient(circle at center, var(--data-flow) 0%, rgba(255, 0, 128, 0.7) 100%);
  border: 1px solid rgba(255, 0, 128, 0.8);
  border-radius: 50%;
  box-shadow: 
    0 0 15px var(--data-flow),
    0 0 30px rgba(255, 0, 128, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.4);
  animation: particle-flow-3d 5s ease-in-out infinite;
  transform-style: preserve-3d;
}

.data-particles::after {
  animation-delay: 2.5s;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
    radial-gradient(circle at center, var(--synapse-strong) 0%, rgba(0, 210, 255, 0.7) 100%);
  border-color: rgba(0, 210, 255, 0.8);
  box-shadow: 
    0 0 15px var(--synapse-strong),
    0 0 30px rgba(0, 210, 255, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.4);
}

@keyframes particle-flow-3d {
  0% { 
    left: -15px; 
    top: 50%;
    opacity: 0;
    transform: translateZ(0px) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  10% { 
    opacity: 1;
    transform: translateZ(20px) scale(1) rotateX(90deg) rotateY(45deg) rotateZ(90deg);
  }
  30% {
    transform: translateZ(35px) scale(1.4) rotateX(180deg) rotateY(135deg) rotateZ(180deg);
  }
  70% {
    transform: translateZ(30px) scale(1.6) rotateX(270deg) rotateY(225deg) rotateZ(270deg);
  }
  90% { 
    opacity: 1;
    transform: translateZ(15px) scale(1.2) rotateX(360deg) rotateY(315deg) rotateZ(360deg);
  }
  100% { 
    left: calc(100% + 15px); 
    top: 50%;
    opacity: 0;
    transform: translateZ(0px) scale(0) rotateX(450deg) rotateY(405deg) rotateZ(450deg);
  }
}

/* Revolutionary 3D ML Layer Visualization */
.ml-layer {
  background: 
    linear-gradient(135deg, 
      rgba(15, 15, 26, 0.95) 0%,
      rgba(25, 25, 45, 0.9) 25%,
      rgba(20, 20, 38, 0.95) 50%,
      rgba(30, 30, 50, 0.9) 75%,
      rgba(15, 15, 26, 0.95) 100%);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin: var(--space-lg);
  transform: perspective(1000px) rotateX(12deg) rotateY(-3deg) translateZ(35px);
  box-shadow: 
    0 25px 50px rgba(124, 58, 237, 0.3),
    0 50px 100px rgba(0, 0, 0, 0.6),
    inset 0 2px 6px rgba(255, 255, 255, 0.15),
    inset 0 -1px 3px rgba(0, 0, 0, 0.3);
  animation: layer-process-3d 7s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.ml-layer::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    var(--primary) 0%, 
    var(--secondary) 25%, 
    var(--neuron-active) 50%, 
    var(--accent) 75%, 
    var(--primary) 100%);
  border-radius: var(--radius-xl);
  z-index: -1;
  animation: layer-border-flow-3d 8s linear infinite;
}

.ml-layer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(90deg,
      transparent 0%,
      rgba(124, 58, 237, 0.1) 25%,
      transparent 50%),
    repeating-linear-gradient(0deg,
      transparent 0%,
      rgba(0, 210, 255, 0.08) 25%,
      transparent 50%);
  border-radius: var(--radius-xl);
  animation: layer-grid-scan-3d 10s linear infinite;
  transform: translateZ(-5px);
}

@keyframes layer-process-3d {
  0%, 100% { 
    transform: perspective(1000px) rotateX(12deg) rotateY(-3deg) translateZ(35px);
    box-shadow: 
      0 25px 50px rgba(124, 58, 237, 0.3),
      0 50px 100px rgba(0, 0, 0, 0.6),
      inset 0 2px 6px rgba(255, 255, 255, 0.15);
  }
  14.28% { 
    transform: perspective(1000px) rotateX(8deg) rotateY(2deg) translateZ(55px) scale(1.03);
    box-shadow: 
      0 35px 70px rgba(0, 255, 136, 0.4),
      0 60px 120px rgba(0, 0, 0, 0.7),
      inset 0 3px 9px rgba(0, 255, 136, 0.2);
  }
  28.57% { 
    transform: perspective(1000px) rotateX(16deg) rotateY(-6deg) translateZ(45px) scale(1.02);
    box-shadow: 
      0 30px 60px rgba(0, 210, 255, 0.35),
      0 55px 110px rgba(0, 0, 0, 0.65),
      inset 0 2px 7px rgba(0, 210, 255, 0.18);
  }
  42.85% { 
    transform: perspective(1000px) rotateX(6deg) rotateY(4deg) translateZ(60px) scale(1.04);
    box-shadow: 
      0 40px 80px rgba(245, 158, 11, 0.3),
      0 65px 130px rgba(0, 0, 0, 0.6),
      inset 0 4px 10px rgba(245, 158, 11, 0.15);
  }
  57.14% { 
    transform: perspective(1000px) rotateX(14deg) rotateY(-1deg) translateZ(50px) scale(1.01);
    box-shadow: 
      0 32px 64px rgba(255, 0, 128, 0.32),
      0 58px 116px rgba(0, 0, 0, 0.62),
      inset 0 3px 8px rgba(255, 0, 128, 0.16);
  }
  71.42% { 
    transform: perspective(1000px) rotateX(10deg) rotateY(3deg) translateZ(52px) scale(1.025);
    box-shadow: 
      0 36px 72px rgba(16, 185, 129, 0.34),
      0 62px 124px rgba(0, 0, 0, 0.64),
      inset 0 3px 9px rgba(16, 185, 129, 0.17);
  }
  85.71% { 
    transform: perspective(1000px) rotateX(9deg) rotateY(-2deg) translateZ(48px) scale(1.015);
    box-shadow: 
      0 28px 56px rgba(124, 58, 237, 0.31),
      0 52px 104px rgba(0, 0, 0, 0.61),
      inset 0 2px 6px rgba(124, 58, 237, 0.14);
  }
}

@keyframes layer-border-flow-3d {
  0% { 
    background: linear-gradient(45deg, 
      var(--primary) 0%, 
      var(--secondary) 25%, 
      var(--neuron-active) 50%, 
      var(--accent) 75%, 
      var(--primary) 100%);
  }
  25% {
    background: linear-gradient(45deg, 
      var(--neuron-active) 0%, 
      var(--activation) 25%, 
      var(--data-flow) 50%, 
      var(--synapse-strong) 75%, 
      var(--neuron-active) 100%);
  }
  50% {
    background: linear-gradient(45deg, 
      var(--synapse-strong) 0%, 
      var(--ai-memory) 25%, 
      var(--ai-compute) 50%, 
      var(--ai-output) 75%, 
      var(--synapse-strong) 100%);
  }
  75% {
    background: linear-gradient(45deg, 
      var(--accent) 0%, 
      var(--ai-output) 25%, 
      var(--neuron-active) 50%, 
      var(--activation) 75%, 
      var(--accent) 100%);
  }
  100% {
    background: linear-gradient(45deg, 
      var(--primary) 0%, 
      var(--secondary) 25%, 
      var(--neuron-active) 50%, 
      var(--accent) 75%, 
      var(--primary) 100%);
  }
}

@keyframes layer-grid-scan-3d {
  0% { 
    transform: translateZ(-5px) translateX(-100%) translateY(-100%) rotateZ(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translateZ(0px) translateX(0%) translateY(0%) rotateZ(180deg);
    opacity: 1;
  }
  100% { 
    transform: translateZ(-5px) translateX(100%) translateY(100%) rotateZ(360deg);
    opacity: 0.5;
  }
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--accent));
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-dark);
    transition: all var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-light), var(--accent));
    box-shadow: var(--glow);
}

::-webkit-scrollbar-corner {
    background: var(--bg-dark);
}

/* Premium Selection */
::selection {
    background: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary);
    text-shadow: none;
}

::-moz-selection {
    background: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary);
    text-shadow: none;
}

/* Enhanced Custom Cursor */
.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid #00f5ff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    backdrop-filter: blur(4px);
    top: 0;
    left: 0;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.cursor.hover {
    width: 52px;
    height: 52px;
    background: rgba(0, 245, 255, 0.1);
    border-color: #ff006e;
    box-shadow: 0 0 40px rgba(0, 245, 255, 0.6);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.cursor.click {
    width: 6px;
    height: 6px;
    background: #00f5ff;
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
}

/* Disable custom cursor on touch / coarse pointers for usability */
@media (pointer: coarse), (hover: none) {
    body { cursor: auto; }
    .cursor { display: none; }
}

/* Enhanced Background Animation */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: var(--primary);
    border-radius: 50%;
    filter: blur(0.5px);
}

.particle:nth-child(odd) {
    background: var(--accent);
}

.particle-sm { 
    width: 2px; 
    height: 2px; 
    animation: float-sm 25s infinite ease-in-out; 
}

.particle-md { 
    width: 4px; 
    height: 4px; 
    animation: float-md 30s infinite ease-in-out; 
}

.particle-lg { 
    width: 6px; 
    height: 6px; 
    animation: float-lg 35s infinite ease-in-out; 
}

@keyframes float-sm {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.3; }
    25% { transform: translate3d(40px, -60px, 0) scale(1.2); opacity: 1; }
    50% { transform: translate3d(-30px, -120px, 0) scale(0.6); opacity: 0.8; }
    75% { transform: translate3d(-60px, -60px, 0) scale(1.4); opacity: 0.5; }
}

/* Interactive Mouse Effects */
.mouse-ripple {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
    animation: ripple-expand 1s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

.trail-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: linear-gradient(45deg, var(--primary), var(--accent));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    animation: trail-fade 2s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

@keyframes ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Enhanced Hover Effects */
.service-card:hover,
.portfolio-item:hover,
.nav-link:hover,
.hire-btn:hover,
button:hover,
.social-links a:hover,
.stat-item:hover,
.logo:hover,
.logo-icon:hover,
.logo-text:hover {
    transform: translateY(-10px) scale(1.05) !important;
    box-shadow: 
        0 20px 60px rgba(124, 58, 237, 0.3),
        0 0 0 1px rgba(124, 58, 237, 0.1),
        0 0 30px rgba(6, 182, 212, 0.2) !important;
    background: rgba(124, 58, 237, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Special logo hover effects */
.logo:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.1)) !important;
    border-radius: 15px !important;
    padding: 12px 20px !important;
    box-shadow: 
        0 15px 40px rgba(124, 58, 237, 0.4),
        0 0 60px rgba(6, 182, 212, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.logo-icon:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: white !important;
    box-shadow: 
        0 10px 30px rgba(124, 58, 237, 0.6),
        0 0 20px rgba(6, 182, 212, 0.4) !important;
    transform: translateY(-5px) scale(1.1) rotate(5deg) !important;
}

.logo-text:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 30px rgba(124, 58, 237, 0.8) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

.service-card:hover::before,
.portfolio-item:hover::before,
.stat-item:hover::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Special effects for stat items */
.stat-item:hover .stat-number {
    color: var(--primary) !important;
    text-shadow: 0 0 20px rgba(124, 58, 237, 0.6) !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease !important;
}

.stat-item:hover .stat-label {
    color: var(--accent) !important;
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes float-md {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; }
    33% { transform: translate3d(70px, -80px, 0) scale(0.8); opacity: 1; }
    66% { transform: translate3d(-50px, -160px, 0) scale(1.3); opacity: 0.7; }
}

@keyframes float-lg {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.2); opacity: 0.5; }
    50% { transform: translate3d(80px, -140px, 0) scale(0.7); opacity: 1; }
}

/* Premium Navigation with Glassmorphism */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    padding: var(--space-lg) 0;
    transition: all var(--transition-base);
}

.navbar.scrolled {
    padding: var(--space-md) 0;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: var(--shadow-lg), 0 1px 0 0 var(--border-hover);
    border-bottom-color: var(--border-hover);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-decoration: none;
    transition: transform var(--transition-base);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-dark);
    font-weight: 900;
    font-size: var(--font-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    font-family: 'Orbitron', monospace;
}

.logo-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 600ms ease;
}

.logo-icon:hover {
    box-shadow: var(--shadow-lg), var(--glow);
    transform: translateY(-2px) rotate(5deg);
}

.logo-icon:hover::before {
    left: 100%;
}

.logo-text {
    font-weight: 800;
    font-size: var(--font-xl);
    color: var(--primary);
    font-family: 'Orbitron', monospace;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.5);
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--space-2xl);
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-sm);
    position: relative;
    /* Limit transitioned properties to avoid repaint flicker affecting adjacent Hire Me button */
    transition: color var(--transition-base), text-shadow var(--transition-base), background var(--transition-base), opacity var(--transition-base);
    padding: var(--space-sm) var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-md);
    overflow: hidden;
    will-change: transform;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
    transition: all var(--transition-base);
    transform: translateX(-50%);
    border-radius: var(--radius-full);
}

.nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(var(--primary-rgb), 0.1), rgba(var(--accent-rgb), 0.1));
    opacity: 0;
    transition: all var(--transition-base);
    z-index: -1;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
    /* Remove vertical translate to prevent layout thrash that caused Hire Me flicker */
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100%;
}

.nav-link:hover::after {
    opacity: 1;
}

.hire-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 800;
    font-size: var(--font-sm);
    /* Narrowed transition list for stability */
    transition: background 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, transform 300ms ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: var(--shadow-md);
    font-family: 'Orbitron', monospace;
    will-change: transform;
}

.hire-btn::before {
    /* Disabled shine animation to prevent blink near Contact link */
    display: none;
}

.hire-btn:hover {
    /* Keep original gradient to avoid flash */
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    border-color: var(--accent);
    /* No translate to prevent boundary flicker */
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.4), var(--shadow-lg), var(--glow);
    text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.7);
}

/* Enhanced Mobile Menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--space-sm);
    border: none;
    background: none;
    transition: transform var(--transition-base);
    border-radius: var(--radius-md);
    position: relative;
}

.mobile-menu-btn:hover {
    transform: scale(1.1);
    background: rgba(var(--primary-rgb), 0.1);
}

.mobile-menu-btn span {
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    margin: 4px 0;
    transition: all var(--transition-base);
    border-radius: var(--radius-full);
    box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.3);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-7px, 7px);
    background: var(--accent);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-30px);
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(45deg) translate(-7px, -7px);
    background: var(--accent);
}

.mobile-menu {
    position: fixed;
    top: 84px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 84px);
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xl);
    transition: left var(--transition-slow);
    z-index: 999;
    border-right: 1px solid var(--border);
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu .nav-link {
    font-size: var(--font-3xl);
    padding: var(--space-lg) var(--space-xl);
    font-family: 'Orbitron', monospace;
    background: linear-gradient(45deg, rgba(var(--primary-rgb), 0.1), transparent);
    border-radius: var(--radius-xl);
    min-width: 200px;
    text-align: center;
}

/* Premium Hero Section with Enhanced Effects */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 var(--space-5xl);
    position: relative;
    background: 
        radial-gradient(ellipse 100% 60% at 50% -20%, rgba(var(--primary-rgb), 0.04), transparent 60%),
        radial-gradient(ellipse 80% 50% at 80% 100%, rgba(var(--accent-rgb), 0.03), transparent 50%),
        linear-gradient(135deg, rgba(var(--primary-rgb), 0.01) 0%, transparent 50%, rgba(var(--accent-rgb), 0.01) 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 49%, rgba(var(--primary-rgb), 0.01) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(var(--accent-rgb), 0.01) 50%, transparent 51%);
    background-size: 60px 60px;
    animation: pattern-move 30s linear infinite;
    pointer-events: none;
}

@keyframes pattern-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    animation: slideInLeft 1s ease-out;
}

.hero-badge {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 800;
    display: inline-block;
    margin-bottom: var(--space-xl);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md), var(--glow);
    font-family: 'Orbitron', monospace;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 4s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.hero-title {
    font-size: clamp(var(--font-4xl), 5vw, var(--font-7xl));
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    text-shadow: 0 0 40px rgba(var(--primary-rgb), 0.3);
    letter-spacing: -0.02em;
    font-family: 'Orbitron', monospace;
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary-light));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite;
    position: relative;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-subtitle {
    font-size: clamp(var(--font-lg), 2vw, var(--font-2xl));
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    font-family: 'JetBrains Mono', monospace;
    position: relative;
}

.typing-animation {
    display: inline-block;
    position: relative;
}

.typing-animation::after {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    animation: blink 1.2s infinite;
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

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

.hero-description {
    font-size: var(--font-lg);
    color: var(--text-muted);
    margin-bottom: var(--space-2xl);
    line-height: 1.8;
    max-width: 90%;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    align-items: center;
}

.hero-buttons-row {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
}

/* Enhanced Button System */
.btn {
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 800;
    font-size: var(--font-base);
    transition: all var(--transition-base);
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    backdrop-filter: blur(10px);
    font-family: 'Orbitron', monospace;
}

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

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

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    border-color: var(--primary);
    box-shadow: var(--shadow-md), var(--glow);
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl), var(--glow);
    text-shadow: 0 0 15px rgba(var(--primary-rgb), 0.8);
}

.btn-secondary {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-color: var(--border-hover);
    backdrop-filter: blur(15px);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: var(--bg-dark);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--glow-accent);
}

.btn-resume {
    background: linear-gradient(135deg, var(--neuron-active), #00d4aa);
    color: var(--bg-dark);
    border-color: var(--neuron-active);
    box-shadow: var(--shadow-md), 0 0 30px rgba(0, 255, 157, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-resume:hover {
    background: transparent;
    color: var(--neuron-active);
    border-color: var(--neuron-active);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl), 0 0 40px rgba(0, 255, 157, 0.6);
    text-shadow: 0 0 15px rgba(0, 255, 157, 0.8);
}

.btn-resume::after {
    content: "📄";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.btn-resume:hover::after {
    transform: translateY(-50%) scale(1.2);
    filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.6));
}

/* Enhanced Hero Image with Advanced Effects */
.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInRight 1s ease-out;
    transform: translateY(-60px);
}

.image-container {
    position: relative;
    width: 520px;
    height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-img {
    width: 380px;
    height: 380px;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    border: 4px solid #00f5ff;
    box-shadow: 
        0 0 0 15px rgba(0, 245, 255, 0.1),
        0 0 0 30px rgba(255, 0, 128, 0.05),
        0 0 0 45px rgba(0, 245, 255, 0.03),
        0 32px 128px rgba(0, 245, 255, 0.3), 
        0 0 40px rgba(0, 245, 255, 0.4);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: grayscale(30%) contrast(1.1) brightness(1.05);
}

.profile-img:hover {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 
        0 0 0 20px rgba(0, 245, 255, 0.15),
        0 0 0 40px rgba(255, 0, 128, 0.08),
        0 0 0 60px rgba(0, 245, 255, 0.05),
        0 32px 128px rgba(0, 245, 255, 0.3), 
        0 0 40px rgba(0, 245, 255, 0.4), 
        0 0 30px rgba(255, 0, 128, 0.4);
    filter: grayscale(0%) contrast(1.2) brightness(1.1);
    border-color: #ff006e;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced Geometric Shapes with More Effects */
.geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.shape {
    position: absolute;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    opacity: 0.15;
    filter: blur(1px);
}

.triangle-1 {
    width: 160px;
    height: 160px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: 5%;
    left: 5%;
    animation: rotate-float 25s linear infinite;
    background: linear-gradient(135deg, var(--accent), var(--primary));
}

.triangle-2 {
    width: 120px;
    height: 120px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 10%;
    right: 10%;
    animation: rotate-float 18s linear infinite reverse;
}

.circle-1 {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    top: 15%;
    right: 5%;
    animation: float-shape 12s ease-in-out infinite;
    background: radial-gradient(circle, var(--primary), var(--accent));
}

.circle-2 {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    bottom: 20%;
    left: 0%;
    animation: float-shape 10s ease-in-out infinite 3s;
    background: radial-gradient(circle, var(--accent), var(--primary));
}

.hexagon {
    width: 95px;
    height: 95px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    top: 50%;
    right: -10%;
    animation: pulse-rotate 15s ease-in-out infinite;
}

.diamond {
    width: 70px;
    height: 70px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    top: 30%;
    left: -5%;
    animation: spin-float 20s linear infinite;
    background: linear-gradient(45deg, var(--primary), var(--accent));
}

@keyframes rotate-float {
    0% { transform: rotate(0deg) translateY(0px) scale(1); }
    25% { transform: rotate(90deg) translateY(-15px) scale(1.1); }
    50% { transform: rotate(180deg) translateY(0px) scale(0.9); }
    75% { transform: rotate(270deg) translateY(15px) scale(1.2); }
    100% { transform: rotate(360deg) translateY(0px) scale(1); }
}

@keyframes float-shape {
    0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
    33% { transform: translateY(-25px) scale(1.15) rotate(120deg); }
    66% { transform: translateY(10px) scale(0.85) rotate(240deg); }
}

@keyframes pulse-rotate {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.15; }
    25% { transform: rotate(90deg) scale(1.3); opacity: 0.25; }
    50% { transform: rotate(180deg) scale(0.8); opacity: 0.1; }
    75% { transform: rotate(270deg) scale(1.1); opacity: 0.2; }
}

@keyframes spin-float {
    0% { transform: rotate(0deg) translateX(0px); }
    25% { transform: rotate(90deg) translateX(20px); }
    50% { transform: rotate(180deg) translateX(0px); }
    75% { transform: rotate(270deg) translateX(-20px); }
    100% { transform: rotate(360deg) translateX(0px); }
}

/* Premium Stats Section with Advanced Effects */
.stats {
    padding: var(--space-5xl) 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.02), rgba(var(--accent-rgb), 0.02), transparent);
    animation: sweep 20s linear infinite;
}

.stats::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 25%, rgba(var(--primary-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(var(--accent-rgb), 0.03) 0%, transparent 50%);
    animation: glow-shift 15s ease-in-out infinite;
}

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

@keyframes glow-shift {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.stats-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-2xl);
    position: relative;
    z-index: 1;
}

.stat-item {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--bg-glass);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    transition: all var(--transition-slow);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.stat-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1), transparent 70%);
    border-radius: 50%;
    transition: all var(--transition-slow);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.stat-item:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-xl), var(--glow);
}

.stat-item:hover::before {
    transform: scaleX(1);
}

.stat-item:hover::after {
    width: 120%;
    height: 120%;
}

.stat-number {
    font-size: clamp(var(--font-4xl), 4vw, var(--font-6xl));
    font-weight: 900;
    color: var(--primary);
    display: block;
    margin-bottom: var(--space-md);
    font-family: 'Orbitron', monospace;
    background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary-light));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(var(--primary-rgb), 0.5);
}

.stat-label {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Space Grotesk', sans-serif;
}

/* Premium Services Section with Enhanced Cards */
.services {
    padding: var(--space-5xl) 0;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(var(--primary-rgb), 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(var(--accent-rgb), 0.02) 0%, transparent 50%),
        linear-gradient(45deg, transparent 49%, rgba(var(--primary-rgb), 0.005) 50%, transparent 51%);
    background-size: 100% 100%, 100% 100%, 40px 40px;
    animation: pattern-move 25s linear infinite;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
    position: relative;
}

.section-title {
    font-size: clamp(var(--font-4xl), 4vw, var(--font-6xl));
    font-weight: 900;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-family: 'Orbitron', monospace;
    position: relative;
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
    transform: translateX(-50%);
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

.section-subtitle {
    font-size: var(--font-xl);
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.services-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    position: relative;
    z-index: 1;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
}

.service-card {
    background: var(--bg-card);
    padding: var(--space-3xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-slow);
    backdrop-filter: blur(15px);
    cursor: pointer;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.05), transparent);
    transition: left 800ms ease;
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.service-card:hover::before {
    left: 100%;
}

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

.service-card:hover {
    transform: translateY(-20px) scale(1.02);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-xl), var(--glow);
    background: linear-gradient(135deg, var(--bg-card), var(--bg-surface));
}

.service-icon {
    font-size: var(--font-5xl);
    margin-bottom: var(--space-xl);
    display: block;
    filter: grayscale(100%);
    transition: all var(--transition-slow);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}

.service-card:hover .service-icon {
    filter: grayscale(0%);
    transform: scale(1.2) rotate(10deg);
    text-shadow: 0 0 30px rgba(var(--primary-rgb), 0.8);
}

.service-card h3 {
    font-size: var(--font-2xl);
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}

.service-card p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
    font-size: var(--font-lg);
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.service-tag {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm);
    font-weight: 600;
    border: 1px solid var(--border);
    transition: all var(--transition-base);
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.service-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.2;
    transition: left 400ms ease;
}

.service-tag:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-sm), 0 0 15px rgba(var(--primary-rgb), 0.4);
}

.service-tag:hover::before {
    left: 100%;
}

/* Enhanced Portfolio Section with Better Mobile Responsiveness */
.portfolio {
    padding: var(--space-5xl) 0;
    background: var(--bg-surface);
    position: relative;
    overflow: hidden;
}

.portfolio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 40%, rgba(var(--primary-rgb), 0.02) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(var(--accent-rgb), 0.02) 0%, transparent 50%),
        linear-gradient(135deg, transparent 48%, rgba(var(--primary-rgb), 0.01) 50%, transparent 52%);
    background-size: 100% 100%, 100% 100%, 60px 60px;
    animation: bg-shift 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bg-shift {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.05); }
}

.portfolio-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    position: relative;
    z-index: 1;
}

.portfolio-filter {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-4xl);
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text-secondary);
    border: 2px solid var(--border);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-sm);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    font-family: 'Orbitron', monospace;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.2;
    transition: left 500ms ease;
}

.filter-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), transparent 70%);
    border-radius: 50%;
    transition: all var(--transition-base);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.filter-btn.active,
.filter-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    border-color: var(--primary);
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-lg), var(--glow);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

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

.filter-btn:hover::after {
    width: 120%;
    height: 200%;
}

/* Enhanced Portfolio Grid with Better Mobile Support */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    margin-top: var(--space-4xl);
}

.portfolio-item {
    position: relative;
    height: 380px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all var(--transition-slow);
    cursor: pointer;
    group: hover;
    /* Better visibility */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.portfolio-item:hover {
    transform: translateY(-20px) scale(1.02);
    box-shadow: var(--shadow-xl), var(--glow);
    border-color: var(--border-hover);
}

.portfolio-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        var(--bg-dark) 0%, 
        var(--bg-surface) 30%, 
        var(--bg-elevated) 60%,
        var(--bg-card) 100%
    );
    opacity: 0.95;
    transition: all var(--transition-slow);
}

.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(var(--primary-rgb), 0.1), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(var(--accent-rgb), 0.1), transparent 50%);
    opacity: 0;
    transition: all var(--transition-slow);
    z-index: 1;
}

.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-item:hover .portfolio-bg {
    opacity: 0.8;
    background: linear-gradient(
        135deg, 
        var(--bg-surface) 0%, 
        var(--bg-elevated) 50%, 
        var(--bg-card) 100%
    );
}

.portfolio-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--text-primary);
    /* Better readability */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        transparent 100%
    );
}

.portfolio-content h3 {
    font-size: var(--font-2xl);
    margin-bottom: var(--space-sm);
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    transition: all var(--transition-base);
    color: #ffffff;
    line-height: 1.2;
    /* Limit title length for consistency */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.4em; /* 2 lines at 1.2 line-height */
}

.portfolio-item:hover .portfolio-content h3 {
    transform: translateX(10px);
    text-shadow: 0 0 25px rgba(var(--primary-rgb), 0.8);
}

.portfolio-content p {
    margin-bottom: var(--space-md);
    opacity: 0.95;
    line-height: 1.5;
    font-size: var(--font-base);
    color: #e0e0e0;
    transition: all var(--transition-base);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    /* Limit text to maintain consistent card sizes */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* 3 lines at 1.5 line-height */
}

.portfolio-item:hover .portfolio-content p {
    opacity: 1;
    color: var(--text-primary);
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.tech-tag {
    background: rgba(var(--primary-rgb), 0.12);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm);
    font-weight: 600;
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.tech-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3), transparent);
    transition: left 400ms ease;
}

.tech-tag:hover {
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: var(--bg-dark);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}

.tech-tag:hover::before {
    left: 100%;
}

.view-project {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    font-weight: 800;
    font-size: var(--font-base);
    transition: all var(--transition-base);
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    font-family: 'Orbitron', monospace;
    cursor: pointer;
    /* Button specific styles */
    text-decoration: none;
    display: inline-block;
}

.view-project::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 500ms ease;
}

.view-project:hover {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
    transform: translateX(15px) translateY(-3px);
    box-shadow: var(--shadow-lg), var(--glow);
    text-shadow: 0 0 15px rgba(var(--primary-rgb), 0.8);
}

.view-project:hover::before {
    left: 100%;
}

/* Project Modal Styles */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.project-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl), var(--glow);
    transition: transform 0.3s ease;
}

.project-modal.active .modal-content {
    transform: translate(-50%, -50%) scale(1);
}

.modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: none;
    border: none;
    font-size: var(--font-2xl);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1;
}

.modal-close:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    transform: rotate(90deg);
}

.modal-header {
    padding: var(--space-3xl) var(--space-3xl) var(--space-xl);
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: var(--font-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    padding-right: var(--space-4xl);
}

.modal-tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.modal-tech .tech-tag {
    background: rgba(var(--primary-rgb), 0.15);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm);
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--primary);
}

.modal-body {
    padding: var(--space-3xl);
}

.modal-body p {
    font-size: var(--font-lg);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
}

.modal-features {
    margin-bottom: var(--space-2xl);
}

.modal-features h3 {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.modal-features ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.modal-features li {
    padding: var(--space-md);
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    position: relative;
    padding-left: var(--space-2xl);
}

.modal-features li::before {
    content: '✓';
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    color: var(--primary);
    font-weight: bold;
}

.modal-links {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.modal-links .btn {
    flex: 1;
    min-width: 150px;
    justify-content: center;
}

/* Premium Contact Section with Enhanced Effects */
.contact {
    padding: var(--space-5xl) 0;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 200%;
    background: 
        radial-gradient(circle, rgba(var(--primary-rgb), 0.03) 0%, transparent 60%),
        radial-gradient(circle, rgba(var(--accent-rgb), 0.03) 0%, transparent 60%);
    animation: rotate 40s linear infinite;
}

.contact-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    position: relative;
    z-index: 1;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

.contact-info h2 {
    font-size: clamp(var(--font-4xl), 4vw, var(--font-6xl));
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
    font-weight: 900;
    letter-spacing: -0.02em;
    font-family: 'Orbitron', monospace;
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}

.contact-info p {
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
    line-height: 1.8;
    font-size: var(--font-xl);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    transition: all var(--transition-slow);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.08), transparent);
    transition: left 600ms ease;
}

.contact-item:hover {
    border-color: var(--border-hover);
    transform: translateX(15px) translateY(-5px);
    box-shadow: var(--shadow-lg), var(--glow);
}

.contact-item:hover::before {
    left: 100%;
}

.contact-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-2xl);
    font-weight: bold;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.contact-item:hover .contact-icon {
    transform: scale(1.15) rotate(10deg);
    box-shadow: var(--shadow-lg), var(--glow);
}

.contact-form {
    background: var(--bg-card);
    padding: var(--space-3xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
    opacity: 0.8;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.form-group {
    margin-bottom: var(--space-xl);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-sm);
    font-family: 'Orbitron', monospace;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(var(--primary-rgb), 0.02);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-lg);
    transition: all var(--transition-base);
    backdrop-filter: blur(8px);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15), var(--glow);
    background: rgba(var(--primary-rgb), 0.05);
    transform: scale(1.02);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

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

/* Premium Footer with Enhanced Effects */
.footer {
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-4xl) 0;
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--primary), var(--accent), transparent);
    animation: sweep-line 12s ease-in-out infinite;
}

.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 50%, rgba(var(--primary-rgb), 0.02) 0%, transparent 50%),
        radial-gradient(circle at 75% 50%, rgba(var(--accent-rgb), 0.02) 0%, transparent 50%);
    animation: footer-glow 10s ease-in-out infinite;
}

@keyframes sweep-line {
    0%, 100% { left: -100%; }
    50% { left: 0%; }
}

@keyframes footer-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.footer-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    position: relative;
    z-index: 1;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.social-link {
    width: 70px;
    height: 70px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-xl);
    transition: all var(--transition-base);
    border: 2px solid var(--border);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3), transparent);
    transition: left 500ms ease;
}

.social-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2), transparent 70%);
    border-radius: 50%;
    transition: all var(--transition-base);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.social-link:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    transform: translateY(-8px) scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-xl), var(--glow);
    border-color: var(--primary);
}

.social-link:hover::before {
    left: 100%;
}

.social-link:hover::after {
    width: 150%;
    height: 150%;
}

.footer p {
    font-size: var(--font-base);
    opacity: 0.8;
    margin-top: var(--space-lg);
    font-family: 'Space Grotesk', sans-serif;
}

/* Enhanced Scroll to Top */
.scroll-top {
    position: fixed;
    bottom: var(--space-2xl);
    right: var(--space-2xl);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark);
    border-radius: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: var(--font-lg);
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
    z-index: 1000;
    /* Ensure perfect circle */
    flex-shrink: 0;
    box-sizing: border-box;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    transform: translateY(-8px) scale(1.15) rotate(-5deg);
    box-shadow: var(--shadow-xl), var(--glow), var(--glow-accent);
    border-color: var(--accent);
}

/* Premium Loading Animation */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 1000ms ease;
}

.loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader {
    width: 100px;
    height: 100px;
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border: 3px solid transparent;
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite reverse;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Animation Classes */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

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

/* Enhanced Mobile Responsiveness */
@media (max-width: 1400px) {
    .nav-container,
    .hero-container,
    .services-container,
    .portfolio-container,
    .contact-container,
    .footer-content,
    .stats-container {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
    }
}

@media (max-width: 1200px) {
    .hero-container,
    .contact-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-3xl);
    }

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-xl);
    }

    .image-container {
        width: 420px;
        height: 420px;
    }

    .profile-img {
        width: 320px;
        height: 320px;
    }
    
    .portfolio-item {
        height: 400px;
    }
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .image-container {
        width: 380px;
        height: 380px;
    }

    .profile-img {
        width: 280px;
        height: 280px;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-item {
        height: 380px;
    }
    
    .portfolio-content {
        padding: var(--space-2xl);
    }
}

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

    .mobile-menu-btn {
        display: flex;
    }

    .hero {
        padding: 120px 0 var(--space-4xl);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .btn {
        padding: var(--space-lg) var(--space-xl);
        font-size: var(--font-base);
        justify-content: center;
    }

    .services,
    .portfolio,
    .contact {
        padding: var(--space-4xl) 0;
    }

    .stats {
        padding: var(--space-3xl) 0;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .service-card {
        padding: var(--space-2xl);
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .portfolio-item {
        height: 350px;
        min-height: 350px;
    }
    
    .portfolio-content {
        padding: var(--space-xl);
    }
    
    .portfolio-content h3 {
        font-size: var(--font-2xl);
    }

    .portfolio-filter {
        gap: var(--space-md);
        justify-content: flex-start;
        overflow-x: auto;
        padding: var(--space-md) 0;
    }

    .filter-btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--font-xs);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .contact-form {
        padding: var(--space-xl);
    }

    .image-container {
        width: 320px;
        height: 320px;
    }

    .profile-img {
        width: 240px;
        height: 240px;
    }

    .scroll-top {
        width: 60px;
        height: 60px;
        bottom: var(--space-lg);
        right: var(--space-lg);
        font-size: var(--font-lg);
    }

    /* Modal responsive styles */
    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-header {
        padding: var(--space-xl) var(--space-xl) var(--space-lg);
    }
    
    .modal-header h2 {
        font-size: var(--font-2xl);
        padding-right: var(--space-3xl);
    }
    
    .modal-body {
        padding: var(--space-xl);
    }
    
    .modal-features ul {
        grid-template-columns: 1fr;
    }
    
    .modal-links {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    :root {
        --space-2xl: 2rem;
        --space-3xl: 3rem;
        --space-4xl: 4rem;
        --space-5xl: 5rem;
    }

    .nav-container,
    .hero-container,
    .services-container,
    .portfolio-container,
    .contact-container,
    .footer-content,
    .stats-container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .image-container {
        width: 280px;
        height: 280px;
    }

    .profile-img {
        width: 200px;
        height: 200px;
    }

    .service-card {
        padding: var(--space-lg);
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .portfolio-item {
        height: 320px;
        min-height: 320px;
    }

    .portfolio-content {
        padding: var(--space-lg);
    }
    
    .portfolio-content h3 {
        font-size: var(--font-xl);
        margin-bottom: var(--space-sm);
    }
    
    .portfolio-content p {
        font-size: var(--font-base);
        margin-bottom: var(--space-md);
    }
    
    .project-tech {
        margin-bottom: var(--space-md);
    }
    
    .tech-tag {
        font-size: var(--font-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .contact-form {
        padding: var(--space-lg);
    }

    .contact-item {
        padding: var(--space-md);
        gap: var(--space-md);
        flex-direction: column;
        text-align: center;
    }

    .contact-icon {
        width: 60px;
        height: 60px;
        font-size: var(--font-lg);
    }

    .social-link {
        width: 60px;
        height: 60px;
        font-size: var(--font-lg);
    }
    
    .filter-btn {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.7rem;
        min-width: 80px;
    }
    
    .portfolio-filter {
        padding: var(--space-sm) var(--space-md);
        margin: 0 -var(--space-md) var(--space-3xl);
        gap: var(--space-sm);
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 360px) {
    .portfolio-item {
        height: 300px;
        min-height: 300px;
    }
    
    .portfolio-content {
        padding: var(--space-md);
    }
    
    .portfolio-content h3 {
        font-size: var(--font-lg);
    }
    
    .view-project {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-sm);
    }
    
    .filter-btn {
        min-width: 70px;
        font-size: 0.65rem;
    }
}

/* Performance Optimizations */
.cursor,
.hero-image,
.service-card,
.portfolio-item,
.profile-img,
.btn,
.social-link,
.scroll-top {
    will-change: transform;
}

.navbar,
.scroll-top,
.cursor,
.loading {
    will-change: opacity, transform;
}

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

/* Focus Management */
.nav-link:focus-visible,
.hire-btn:focus-visible,
.btn:focus-visible,
.filter-btn:focus-visible,
.social-link:focus-visible,
.scroll-top:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.3);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border: rgba(255, 255, 255, 0.4);
        --border-hover: rgba(255, 255, 255, 0.7);
        --text-muted: #c0c0c0;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .mobile-menu,
    .scroll-top,
    .bg-animation,
    .cursor {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero,
    .services,
    .portfolio,
    .contact {
        padding: 2rem 0 !important;
    }
    
    .portfolio-item {
        break-inside: avoid;
        height: auto !important;
        min-height: auto !important;
    }
}

/* Enhanced Utility Classes */
.bg-neural-gradient {
  background: var(--bg-gradient-neural);
}

.bg-data-gradient {
  background: var(--bg-gradient-data);
}

.bg-mesh {
  background: var(--bg-mesh);
}

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

.text-gradient-neural {
  background: var(--bg-gradient-neural);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-data {
  background: var(--bg-gradient-data);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glow-primary {
  box-shadow: var(--glow);
}

.glow-accent {
  box-shadow: var(--glow-accent);
}

.glow-neural {
  box-shadow: var(--glow-neural);
}

.glow-data {
  box-shadow: var(--glow-data);
}

.glow-pink {
  box-shadow: var(--glow-pink);
}

.border-gradient {
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
              var(--border-gradient) border-box;
}

.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--glow);
}

/* 🎯 EPIC 3D UTILITY CLASSES */

/* 3D Card Effects */
.card-3d {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3d-md);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.card-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.card-3d:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: var(--shadow-floating);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Floating Elements */
.float-3d {
  animation: float-3d 8s ease-in-out infinite;
  box-shadow: var(--shadow-3d-lg);
}

@keyframes float-3d {
  0%, 100% { 
    transform: translateY(0) rotateY(0deg) rotateX(0deg);
  }
  25% { 
    transform: translateY(-15px) rotateY(2deg) rotateX(1deg);
  }
  50% { 
    transform: translateY(0) rotateY(0deg) rotateX(3deg);
  }
  75% { 
    transform: translateY(-10px) rotateY(-2deg) rotateX(1deg);
  }
}

/* 3D Button Effects */
.btn-3d {
  background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
  border: none;
  box-shadow: 
    0 8px 16px rgba(124, 58, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.btn-3d:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-3d);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-3d:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(124, 58, 237, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Neural Network 3D Background */
.bg-neural-3d {
  background: var(--bg-neural-network);
  position: relative;
  overflow: hidden;
}

.bg-neural-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.3) 0%, transparent 50%);
  animation: neural-pulse 4s ease-in-out infinite;
}

@keyframes neural-pulse {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.05);
  }
}

/* 3D Text Effects */
.text-3d {
  text-shadow: 
    0 1px 0 var(--primary-dark),
    0 2px 0 var(--primary-dark),
    0 3px 0 var(--primary-dark),
    0 4px 8px rgba(124, 58, 237, 0.5),
    0 8px 16px rgba(124, 58, 237, 0.3);
  transform: perspective(500px) rotateX(15deg);
}

/* Isometric Cards */
.card-isometric {
  background: var(--bg-card);
  border: 1px solid var(--border);
  transform: perspective(1000px) rotateX(10deg) rotateY(-5deg);
  box-shadow: 
    20px 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all var(--transition-3d);
}

.card-isometric:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) translateY(-10px);
  box-shadow: 
    30px 30px 80px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(124, 58, 237, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* 3D Cube Loading Animation */
.cube-3d {
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-rotate 6s infinite linear;
}

.cube-3d div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, var(--primary), var(--accent));
  border: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cube-3d .front { transform: translateZ(30px); }
.cube-3d .back { transform: rotateY(180deg) translateZ(30px); }
.cube-3d .right { transform: rotateY(90deg) translateZ(30px); }
.cube-3d .left { transform: rotateY(-90deg) translateZ(30px); }
.cube-3d .top { transform: rotateX(90deg) translateZ(30px); }
.cube-3d .bottom { transform: rotateX(-90deg) translateZ(30px); }

@keyframes cube-rotate {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* Enhanced 3D Cube Variants */
.cube-3d-gradient {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-float-rotate 8s infinite ease-in-out;
}

.cube-3d-gradient div {
  position: absolute;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, 
    var(--primary) 0%, 
    var(--secondary) 30%, 
    var(--accent) 60%, 
    var(--neuron-active) 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 0 20px rgba(124, 58, 237, 0.5),
    0 0 40px rgba(0, 210, 255, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cube-3d-gradient .front { transform: translateZ(40px); }
.cube-3d-gradient .back { transform: rotateY(180deg) translateZ(40px); }
.cube-3d-gradient .right { transform: rotateY(90deg) translateZ(40px); }
.cube-3d-gradient .left { transform: rotateY(-90deg) translateZ(40px); }
.cube-3d-gradient .top { transform: rotateX(90deg) translateZ(40px); }
.cube-3d-gradient .bottom { transform: rotateX(-90deg) translateZ(40px); }

.cube-3d-neural {
  width: 70px;
  height: 70px;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-neural-pulse 5s infinite ease-in-out;
}

.cube-3d-neural div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 40%),
    linear-gradient(45deg, 
      var(--neuron-active) 0%, 
      var(--synapse-strong) 50%, 
      var(--data-flow) 100%);
  border: 1px solid rgba(0, 255, 136, 0.6);
  box-shadow: var(--shadow-neuron-3d);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cube-3d-neural .front { transform: translateZ(35px); }
.cube-3d-neural .back { transform: rotateY(180deg) translateZ(35px); }
.cube-3d-neural .right { transform: rotateY(90deg) translateZ(35px); }
.cube-3d-neural .left { transform: rotateY(-90deg) translateZ(35px); }
.cube-3d-neural .top { transform: rotateX(90deg) translateZ(35px); }
.cube-3d-neural .bottom { transform: rotateX(-90deg) translateZ(35px); }

.cube-3d-holographic {
  width: 90px;
  height: 90px;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-holographic-rotate 10s infinite linear;
}

.cube-3d-holographic div {
  position: absolute;
  width: 90px;
  height: 90px;
  background: 
    conic-gradient(from 0deg at 50% 50%,
      rgba(124, 58, 237, 0.8) 0deg,
      rgba(0, 210, 255, 0.6) 120deg,
      rgba(0, 255, 136, 0.7) 240deg,
      rgba(124, 58, 237, 0.8) 360deg);
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 0 30px rgba(124, 58, 237, 0.6),
    0 0 60px rgba(0, 210, 255, 0.4),
    0 0 90px rgba(0, 255, 136, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cube-3d-holographic .front { transform: translateZ(45px); }
.cube-3d-holographic .back { transform: rotateY(180deg) translateZ(45px); }
.cube-3d-holographic .right { transform: rotateY(90deg) translateZ(45px); }
.cube-3d-holographic .left { transform: rotateY(-90deg) translateZ(45px); }
.cube-3d-holographic .top { transform: rotateX(90deg) translateZ(45px); }
.cube-3d-holographic .bottom { transform: rotateX(-90deg) translateZ(45px); }

.cube-3d-small {
  width: 45px;
  height: 45px;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-gentle-spin 12s infinite ease-in-out;
}

.cube-3d-small div {
  position: absolute;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, 
    var(--accent) 0%, 
    var(--ai-memory) 50%, 
    var(--ai-compute) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 
    0 0 15px rgba(245, 158, 11, 0.4),
    0 0 30px rgba(6, 214, 160, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cube-3d-small .front { transform: translateZ(22.5px); }
.cube-3d-small .back { transform: rotateY(180deg) translateZ(22.5px); }
.cube-3d-small .right { transform: rotateY(90deg) translateZ(22.5px); }
.cube-3d-small .left { transform: rotateY(-90deg) translateZ(22.5px); }
.cube-3d-small .top { transform: rotateX(90deg) translateZ(22.5px); }
.cube-3d-small .bottom { transform: rotateX(-90deg) translateZ(22.5px); }

@keyframes cube-float-rotate {
  0%, 100% { 
    transform: rotateX(0deg) rotateY(0deg) translateY(0px);
  }
  25% { 
    transform: rotateX(15deg) rotateY(90deg) translateY(-10px);
  }
  50% { 
    transform: rotateX(0deg) rotateY(180deg) translateY(-20px);
  }
  75% { 
    transform: rotateX(-15deg) rotateY(270deg) translateY(-10px);
  }
}

@keyframes cube-neural-pulse {
  0%, 100% { 
    transform: rotateX(0deg) rotateY(0deg) scale(1);
    filter: brightness(1) hue-rotate(0deg);
  }
  33% { 
    transform: rotateX(120deg) rotateY(120deg) scale(1.1);
    filter: brightness(1.3) hue-rotate(30deg);
  }
  66% { 
    transform: rotateX(240deg) rotateY(240deg) scale(0.9);
    filter: brightness(0.8) hue-rotate(-30deg);
  }
}

@keyframes cube-holographic-rotate {
  0% { 
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    filter: hue-rotate(0deg);
  }
  100% { 
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    filter: hue-rotate(360deg);
  }
}

@keyframes cube-gentle-spin {
  0%, 100% { 
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% { 
    transform: rotateX(180deg) rotateY(180deg);
  }
}

/* Layered 3D Background Panels */
.bg-layered-3d {
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

.bg-layered-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, 
      rgba(124, 58, 237, 0.1) 0%, 
      transparent 30%,
      rgba(6, 182, 212, 0.08) 70%, 
      transparent 100%);
  transform: translateZ(0) rotateX(5deg);
  animation: layer-float 8s ease-in-out infinite;
}

.bg-layered-3d::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;
  bottom: 20%;
  background: 
    radial-gradient(ellipse at center, 
      rgba(245, 158, 11, 0.15) 0%, 
      transparent 70%);
  transform: translateZ(10px) rotateY(3deg);
  animation: layer-float 6s ease-in-out infinite reverse;
}

@keyframes layer-float {
  0%, 100% { 
    transform: translateZ(0) rotateX(5deg) translateY(0);
    opacity: 0.7;
  }
  50% { 
    transform: translateZ(20px) rotateX(8deg) translateY(-10px);
    opacity: 1;
  }
}

/* 3D Depth Shadows */
.depth-shadow-sm { box-shadow: var(--shadow-3d-sm); }
.depth-shadow-md { box-shadow: var(--shadow-3d-md); }
.depth-shadow-lg { box-shadow: var(--shadow-3d-lg); }
.depth-shadow-xl { box-shadow: var(--shadow-3d-xl); }
.depth-floating { box-shadow: var(--shadow-floating); }

/* 3D Glow Effects */
.glow-3d { box-shadow: var(--glow-3d); }
.glow-accent-3d { box-shadow: var(--glow-accent-3d); }
.glow-neural-3d { box-shadow: var(--glow-neural-3d); }

/* Perspective Container */
.perspective-container {
  perspective: 1200px;
  perspective-origin: center center;
}

/* 3D Transform Utilities */
.transform-3d {
  transform-style: preserve-3d;
  transition: transform var(--transition-3d);
}

.hover-lift-3d:hover {
  transform: translateY(-12px) rotateX(5deg) rotateY(2deg);
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(5deg) scale(1.02);
}

/* Parallax Layers */
.parallax-layer-1 {
  transform: translateZ(-100px) scale(2);
  opacity: 0.3;
}

.parallax-layer-2 {
  transform: translateZ(-50px) scale(1.5);
  opacity: 0.6;
}

.parallax-layer-3 {
  transform: translateZ(0);
  opacity: 1;
}

/* Glass Morphism 3D */
.glass-3d {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(2deg);
}

/* Holographic Effect */
.holographic {
  background: linear-gradient(45deg, 
    var(--primary) 0%, 
    var(--secondary) 25%, 
    var(--accent) 50%, 
    var(--neural-cyan) 75%, 
    var(--primary) 100%);
  background-size: 400% 400%;
  animation: hologram 6s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes hologram {
  0%, 100% { 
    background-position: 0% 50%; 
  }
  25% { 
    background-position: 100% 50%; 
  }
  50% { 
    background-position: 100% 100%; 
  }
  75% { 
    background-position: 0% 100%; 
  }
}

/* Portfolio Section 3D Integration */
.portfolio {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.portfolio .bg-neural-3d {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.portfolio .bg-neural-3d > * {
  pointer-events: auto;
}

.portfolio .portfolio-container {
  position: relative;
  z-index: 2;
}

/* Enhanced 3D Cards for Portfolio */
.portfolio .card-3d {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.portfolio .glass-3d {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Responsive 3D Elements */
@media (max-width: 768px) {
  .portfolio .card-3d,
  .portfolio .glass-3d,
  .portfolio .cube-3d {
    display: none !important;
  }
}

/* 🧠 NEURAL NETWORK EFFECTS */

/* Animated Neural Background */
.bg-neural-animated {
  background: var(--bg-neural-core);
  position: relative;
  overflow: hidden;
}

.bg-neural-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--bg-neural-network);
  animation: neural-pulse 3s ease-in-out infinite;
}

@keyframes neural-pulse {
  0%, 100% { 
    opacity: 0.8; 
    transform: scale(1) rotate(0deg);
  }
  33% { 
    opacity: 1; 
    transform: scale(1.02) rotate(0.5deg);
  }
  66% { 
    opacity: 0.9; 
    transform: scale(0.98) rotate(-0.5deg);
  }
}

/* Individual Neuron Nodes */
.neuron {
  width: 12px;
  height: 12px;
  background: var(--neuron-active);
  border-radius: 50%;
  box-shadow: var(--shadow-neuron);
  animation: neuron-fire 2s ease-in-out infinite;
  position: relative;
}

.neuron::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 2px solid rgba(0, 255, 136, 0.3);
  border-radius: 50%;
  animation: neuron-ripple 2s ease-out infinite;
}

@keyframes neuron-fire {
  0%, 100% { 
    transform: scale(1);
    box-shadow: var(--shadow-neuron);
  }
  50% { 
    transform: scale(1.3);
    box-shadow: 
      0 0 30px rgba(0, 255, 136, 0.9),
      0 0 60px rgba(0, 255, 136, 0.6),
      0 0 120px rgba(0, 255, 136, 0.3);
  }
}

@keyframes neuron-ripple {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  100% { 
    transform: scale(3);
    opacity: 0;
  }
}

/* Synapse Connections */
.synapse {
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--synapse-strong) 50%, 
    transparent 100%);
  box-shadow: var(--shadow-synapse);
  animation: synapse-pulse 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.synapse::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  right: 100%;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 0, 128, 0.8) 50%, 
    transparent 100%);
  animation: data-flow-pulse 2s linear infinite;
}

@keyframes synapse-pulse {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.5); }
}

@keyframes data-flow-pulse {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Neural Network Grid */
.neural-grid {
  background-image: 
    /* Neurons */
    radial-gradient(circle 4px at 100px 100px, var(--neuron-active) 0%, transparent 100%),
    radial-gradient(circle 3px at 200px 150px, var(--ai-memory) 0%, transparent 100%),
    radial-gradient(circle 5px at 300px 80px, var(--activation) 0%, transparent 100%),
    radial-gradient(circle 3px at 150px 200px, var(--synapse-strong) 0%, transparent 100%),
    radial-gradient(circle 4px at 250px 180px, var(--neuron-active) 0%, transparent 100%),
    /* Synapses */
    linear-gradient(45deg, transparent 48%, rgba(0, 210, 255, 0.4) 49%, rgba(0, 210, 255, 0.4) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(124, 58, 237, 0.3) 49%, rgba(124, 58, 237, 0.3) 51%, transparent 52%),
    linear-gradient(30deg, transparent 49%, rgba(0, 255, 136, 0.2) 50%, rgba(0, 255, 136, 0.2) 51%, transparent 52%);
  animation: neural-network-flow 8s linear infinite;
}

@keyframes neural-network-flow {
  0% { background-position: 0% 0%; }
  100% { background-position: 400px 400px; }
}

/* 3D Neural Cards */
.neural-card {
  background: rgba(15, 15, 26, 0.8);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-neural-3d);
  transform: perspective(1000px) rotateX(5deg) rotateY(-2deg);
  transition: all var(--transition-neural);
  position: relative;
  overflow: hidden;
}

.neural-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-neural-network);
  opacity: 0.4;
  animation: neural-network-flow 12s linear infinite;
}

.neural-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 255, 136, 0.8), 
    rgba(0, 210, 255, 0.6), 
    transparent);
  animation: neural-scan 3s ease-in-out infinite;
}

@keyframes neural-scan {
  0%, 100% { transform: translateY(0) scaleX(0); }
  50% { transform: translateY(200px) scaleX(1); }
}

.neural-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(1deg) translateY(-15px);
  box-shadow: 
    var(--glow-neural),
    0 25px 80px rgba(0, 0, 0, 0.6);
}

/* Neuron Nodes Animation */
.neuron-node {
  width: 16px;
  height: 16px;
  background: var(--neuron-active);
  border-radius: 50%;
  box-shadow: var(--shadow-neuron);
  animation: neuron-activity 3s ease-in-out infinite;
  position: relative;
}

.neuron-node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 2px solid rgba(0, 255, 136, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: neuron-ripple-extended 3s ease-out infinite;
}

.neuron-node::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: neuron-ripple-extended 3s ease-out infinite 0.5s;
}

@keyframes neuron-activity {
  0%, 100% { 
    background: var(--neuron-active);
    transform: scale(1);
    box-shadow: var(--shadow-neuron);
  }
  25% { 
    background: var(--activation);
    transform: scale(1.4);
    box-shadow: var(--glow-activation);
  }
  50% { 
    background: var(--data-flow);
    transform: scale(1.2);
  }
  75% { 
    background: var(--synapse-strong);
    transform: scale(1.1);
  }
}

@keyframes neuron-ripple-extended {
  0% { 
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% { 
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Synaptic Connections */
.synapse-line {
  height: 3px;
  background: linear-gradient(90deg, 
    var(--neuron-active) 0%, 
    var(--synapse-strong) 30%, 
    var(--data-flow) 60%, 
    var(--ai-output) 100%);
  border-radius: 2px;
  box-shadow: var(--shadow-synapse);
  animation: synapse-activity 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.synapse-line::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -10px;
  width: 20px;
  height: 5px;
  background: radial-gradient(ellipse, rgba(255, 0, 128, 1) 0%, transparent 70%);
  border-radius: 50%;
  animation: data-pulse-flow 1.5s linear infinite;
}

@keyframes synapse-activity {
  0%, 100% { 
    opacity: 0.7; 
    transform: scaleY(1) scaleX(1);
  }
  50% { 
    opacity: 1; 
    transform: scaleY(1.8) scaleX(1.05);
    box-shadow: var(--glow-synapse);
  }
}

@keyframes data-pulse-flow {
  0% { 
    left: -20px; 
    opacity: 0;
    transform: scale(0.5);
  }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; transform: scale(1.2); }
  100% { 
    left: calc(100% + 20px); 
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Neural Processing Animation */
.neural-processor {
  background: var(--bg-neural-core);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
  animation: processor-think 4s ease-in-out infinite;
}

.neural-processor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(90deg,
      transparent 0px,
      rgba(124, 58, 237, 0.1) 2px,
      transparent 4px),
    repeating-linear-gradient(0deg,
      transparent 0px,
      rgba(6, 182, 212, 0.08) 2px,
      transparent 4px);
  animation: neural-scan-grid 6s linear infinite;
}

@keyframes processor-think {
  0%, 100% { 
    border-color: var(--border);
    box-shadow: var(--shadow-neural-3d);
  }
  33% { 
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: var(--glow-neural);
  }
  66% { 
    border-color: rgba(0, 210, 255, 0.6);
    box-shadow: var(--glow-synapse);
  }
}

@keyframes neural-scan-grid {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Neural Glow Utilities */
.glow-neuron { box-shadow: var(--shadow-neuron); }
.glow-synapse { box-shadow: var(--shadow-synapse); }
.glow-neural-3d { box-shadow: var(--glow-neural); }
.glow-activation { box-shadow: var(--glow-activation); }

/* Interactive Neural Elements */
.neural-interactive:hover .neuron {
  animation-duration: 0.8s;
}

.neural-interactive:hover .synapse {
  animation-duration: 0.6s;
}

.neural-interactive:hover {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(-20px);
}

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

/* Floating Particles Background */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00ffff;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 80%; animation-delay: 2s; }
.particle:nth-child(3) { top: 80%; left: 20%; animation-delay: 4s; }

/* Glowing Profile Ring Animation */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(0, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}

.profile-ring {
  animation: pulse-ring 2s infinite;
}

/* Enhanced Profile Image Styling */
.profile-img {
  border-radius: 50%;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
}

.profile-img:hover {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 30px rgba(0, 255, 255, 0.8));
}

/* Rotating Geometric Shapes */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-triangle {
  animation: rotate 20s linear infinite;
}

.rotating-square {
  animation: rotate 15s linear infinite reverse;
}

/* Neural Network Lines Animation */
@keyframes draw-line {
  0% { stroke-dasharray: 0 1000; }
  100% { stroke-dasharray: 1000 0; }
}

.neural-line {
  stroke: #00ffff;
  stroke-width: 1;
  fill: none;
  animation: draw-line 3s ease-in-out infinite alternate;
}

/* Matrix Rain Effect */
@keyframes matrix-rain {
  0% { transform: translateY(-100vh); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.matrix-char {
  position: absolute;
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  animation: matrix-rain 5s linear infinite;
}

/* Holographic Shimmer */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.holographic {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* Breathing Glow Effect */
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5)); }
  50% { filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.8)); }
}

.breathing-glow {
  animation: breathe 3s ease-in-out infinite;
}

/* Typing Indicator Animation */
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: #00ffff;
  border-radius: 50%;
  animation: typing 1.5s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Circuit Board Pulse */
@keyframes circuit-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.circuit-line {
  stroke: #00ffff;
  stroke-width: 2;
  animation: circuit-pulse 2s ease-in-out infinite;
}

/* Scanning Line Effect */
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  animation: scan 4s linear infinite;
}

/* Data Stream Animation */
@keyframes data-stream {
  0% { transform: translateX(-100px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100px)); opacity: 0; }
}

.data-bit {
  position: absolute;
  color: #00ffff;
  font-family: 'Courier New', monospace;
  animation: data-stream 6s linear infinite;
}

/* Hexagon Morph Animation */
@keyframes morph-hex {
  0%, 100% { 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  25% { 
    clip-path: polygon(50% 0%, 95% 30%, 95% 70%, 50% 100%, 5% 70%, 5% 30%);
  }
  50% { 
    clip-path: polygon(50% 5%, 90% 25%, 90% 75%, 50% 95%, 10% 75%, 10% 25%);
  }
  75% { 
    clip-path: polygon(50% 0%, 95% 30%, 95% 70%, 50% 100%, 5% 70%, 5% 30%);
  }
}

.morphing-hex {
  animation: morph-hex 8s ease-in-out infinite;
}

/* Loading Bar Animation */
@keyframes loading {
  0% { width: 0%; }
  100% { width: 100%; }
}

.loading-bar {
  height: 3px;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  animation: loading 3s ease-in-out infinite;
}

/* Floating Particle Class for JS-generated particles */
.floating-particle {
  position: absolute !important;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Mouse Follower Effect */
.mouse-follower {
  border-radius: 50%;
  transition: transform 0.1s ease-out;
}