@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --background: oklch(0.12 0.02 240);
  --foreground: oklch(0.98 0.01 240);
  --card: oklch(0.17 0.025 240);
  --card-foreground: oklch(0.98 0.01 240);
  --popover: oklch(0.17 0.025 240);
  --popover-foreground: oklch(0.98 0.01 240);
  --primary: oklch(0.68 0.22 230);
  --primary-foreground: oklch(0.08 0.02 240);
  --secondary: oklch(0.24 0.03 240);
  --secondary-foreground: oklch(0.95 0.01 240);
  --muted: oklch(0.22 0.03 240);
  --muted-foreground: oklch(0.72 0.02 240);
  --accent: oklch(0.72 0.19 195);
  --accent-foreground: oklch(0.08 0.02 240);
  --destructive: oklch(0.62 0.22 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.26 0.03 240);
  --input: oklch(0.26 0.03 240);
  --ring: oklch(0.68 0.22 230);
  --radius: 0.75rem;
}

html, body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: hidden;
}

.font-display {
  font-family: "Chakra Petch", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

::selection {
  background: var(--accent);
  color: var(--accent-foreground);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.4)); }
  50% { opacity: 0.8; filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.8)); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

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

.animate-pulse-glow {
  animation: pulse-glow 4s infinite ease-in-out;
}

.animate-float {
  animation: float 6s infinite ease-in-out;
}

.animate-radar {
  animation: radar-sweep 4s linear infinite;
}

.glass-panel {
  background: rgba(22, 28, 38, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-panel-interactive {
  background: rgba(22, 28, 38, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-interactive:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(14, 165, 233, 0.2);
}

.tech-grid-bg {
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.15), transparent 50%),
    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);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}