/* Upgraded Precision Tech Design System - Premium Light Mode */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --color-surface: #ffffff;         /* Pure White background */
  --color-on-surface: #0f1c36;      /* High contrast text */
  --color-on-surface-variant: #4b5563; /* Secondary text */
  --color-primary: #1a3461;         /* Header Deep Navy */
  --color-secondary: #1976D2;       /* Luminous Cyber Blue */
  --color-secondary-hover: #1565C0;
  --color-success: #43A047;         /* Cyber Green */
  --color-success-bg: rgba(67, 160, 71, 0.1);
  --color-glow: rgba(25, 118, 210, 0.12);
  --color-border: #d1daf0;
}

/* Base resets & typography overrides */
html {
  scroll-behavior: smooth;
  background-color: var(--color-surface);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

/* Cyber grid background overlay */
.cyber-grid {
  background-image: radial-gradient(rgba(25, 118, 210, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Premium Light Glassmorphism Panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 20px 40px -10px rgba(15, 28, 54, 0.06);
  border-radius: 24px;
}

/* Card layout redesign */
.premium-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15px);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(15, 28, 54, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 24px;
}

.premium-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(25, 118, 210, 0.3);
  box-shadow: 0 20px 40px -10px rgba(15, 28, 54, 0.1), 0 0 20px rgba(25, 118, 210, 0.08);
}

.premium-card:hover .icon-wrapper {
  background: rgba(25, 118, 210, 0.08);
  box-shadow: 0 0 20px rgba(25, 118, 210, 0.15);
  transform: scale(1.08);
}

/* Highlight border glows */
.tech-glow:hover {
  box-shadow: 0 0 25px rgba(25, 118, 210, 0.2);
  border-color: rgba(25, 118, 210, 0.4);
}

.glow-btn-green:hover {
  box-shadow: 0 0 25px rgba(67, 160, 71, 0.2);
  border-color: rgba(67, 160, 71, 0.4);
}

.micro-border-t {
  border-top: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.accent-line {
  height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), transparent);
}

/* Background mesh glow movement */
@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, 5%) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}

.mesh-glow {
  animation: floatGlow 10s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f4f7fc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Text selections */
::selection {
  background-color: var(--color-secondary);
  color: #ffffff;
}