@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --primary-glow: conic-gradient(from 180deg at 50% 50%, #10b98133 0deg, #6366f133 55deg, #06b6d433 120deg, #10b98133 160deg, transparent 360deg);
  --secondary-glow: radial-gradient(rgba(16, 185, 129, 0.15), rgba(99, 102, 241, 0.05), transparent 70%);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #080c14;
  color: #e2e8f0;
  overflow-x: hidden;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Background Grids and Glows */
.tech-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.tech-dots-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.glow-orb-spring {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.02) 60%, transparent 80%);
}

.glow-orb-indigo {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.02) 60%, transparent 80%);
}

.glow-orb-cyan {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.01) 60%, transparent 80%);
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-hover:hover {
  background: rgba(19, 30, 54, 0.85);
  border-color: rgba(16, 185, 129, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.12);
}

.glass-nav {
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Gradient Texts */
.gradient-text-spring {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-tech {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-accent {
  background: linear-gradient(135deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animated Pulse Border */
@keyframes border-glow {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.animate-glow-border {
  animation: border-glow 3s infinite ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #080c14;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Code Syntax Mock */
.code-token-keyword { color: #f43f5e; }
.code-token-func { color: #38bdf8; }
.code-token-class { color: #fbbf24; }
.code-token-string { color: #34d399; }
.code-token-comment { color: #64748b; font-style: italic; }
.code-token-annot { color: #a855f7; }

/* Interactive slider track styling */
input[type=range] {
  accent-color: #10b981;
}