/* ==========================================================================
   Ceybertech - Custom Design System & Glassmorphism Styles
   ========================================================================== */

:root {
  --bg-primary: #0f172a;      /* slate-900 */
  --bg-card: #1e293b;         /* slate-800 */
  --accent-blue: #3b82f6;     /* blue-500 */
  --accent-glow: rgba(59, 130, 246, 0.45);
  --accent-purple: #a855f7;   /* purple-500 */
  --text-heading: #ffffff;
  --text-body: #cbd5e1;       /* slate-300 */
  --border-glass: rgba(51, 65, 85, 0.75); /* slate-700 */
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-body);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--bg-primary);
  overflow-x: hidden;
  selection-background-color: var(--accent-blue);
}

::selection {
  background-color: rgba(59, 130, 246, 0.35);
  color: var(--text-heading);
}

/* ==========================================================================
   Ambient Futuristic Backgrounds & Grid Overlay
   ========================================================================== */

.cyber-grid-bg {
  background-size: 48px 48px;
  background-image: 
    linear-gradient(to right, rgba(59, 130, 246, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 25%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 25%, #000 45%, transparent 100%);
}

.ambient-orb-blue {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, rgba(15, 23, 42, 0) 70%);
  filter: blur(60px);
}

.ambient-orb-purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, rgba(15, 23, 42, 0) 70%);
  filter: blur(70px);
}

/* ==========================================================================
   Glassmorphism & Neon Glow Effects
   ========================================================================== */

.glass-panel {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
}

.glass-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.88) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.8);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 12px 34px -8px rgba(59, 130, 246, 0.32),
              0 0 20px -4px rgba(168, 85, 247, 0.2);
}

.btn-neon {
  position: relative;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #7c3aed 100%);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.38);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.68),
              0 0 45px rgba(168, 85, 247, 0.35);
  filter: brightness(1.08);
}

.btn-glass {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(71, 85, 105, 0.8);
  transition: all 0.25s ease;
}

.btn-glass:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.35);
  color: #ffffff;
}

/* ==========================================================================
   Gradient Text Masking & Accents
   ========================================================================== */

.text-gradient-tech {
  background: linear-gradient(95deg, #ffffff 0%, #93c5fd 45%, #3b82f6 75%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-blue {
  background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 50%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle pulsing status indicator */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    opacity: 0.75;
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

.status-dot {
  animation: pulse-glow 2.4s infinite ease-in-out;
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
  border: 1px solid #334155;
}

::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}