
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono&display=swap');
body { 
  background-color: #001a33; 
  color: #cbd5e1;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  background-image: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}
h1, h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; }
.card, .calculator-widget { 
  background: rgba(15, 23, 42, 0.6) !important; 
  border: 1px solid rgba(59, 130, 246, 0.2) !important; 
  border-radius: 2px !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
  will-change: transform, opacity;
}
@keyframes scan { 0% { transform: translateY(0vh); } 100% { transform: translateY(100vh); } }
body::after {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  animation: scan 10s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  opacity: 0.3; pointer-events: none;
}

input, select { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; color: #fff !important; border-radius: 2px !important; padding: 0.75rem !important; }
input:focus { outline: none; border-color: #3b82f6 !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
