/* ==========================================================================
   Homepage High-Tech Cyber Theme - Dev Edition
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,600;0,800;1,400&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --cyber-emerald: #10b981;
  --cyber-emerald-glow: rgba(16, 185, 129, 0.25);
  --cyber-bg-glass: rgba(15, 23, 42, 0.65);
}

body {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.015em;
  background-color: #030712 !important;
}

/* Header & Section Titles */
h1, h2, h3, h4, .group-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Glassmorphism on Service Cards */
.service-card, .bookmark-card, .widget {
  background: var(--cyber-bg-glass) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 10px !important;
}

/* Hover Micro-interactions & Neon Edge Glow */
.service-card:hover, .bookmark-card:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: var(--cyber-emerald) !important;
  box-shadow: 0 0 20px var(--cyber-emerald-glow), 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-emerald);
}