:root {
  --bg: #09090b;
  --fg: #fafafa;
  --accent: #06b6d4;
  --accent2: #f59e0b;
  --accent3: #10b981;
  --muted: #71717a;
  --card: #18181b;
  --border: #27272a;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* Selection */
::selection { background: rgba(6,182,212,0.2); color: #06b6d4; }

/* Focus styles */
:focus-visible { outline: 2px solid rgba(6,182,212,0.5); outline-offset: 2px; }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(6,182,212,0.3); }
  50% { box-shadow: 0 0 20px rgba(6,182,212,0.6); }
}

@keyframes scanPulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* Section fade-in on scroll */
section {
  animation: fadeInUp 0.6s ease-out both;
}

/* Hover effects on cards */
section div.rounded-2xl {
  transition: border-color 0.3s ease, transform 0.3s ease;
}

section div.rounded-2xl:hover {
  transform: translateY(-2px);
}

/* Grid pattern */
.grid-pattern {
  background-image: 
    linear-gradient(rgba(6,182,212,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 2.5rem !important; }
  section { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}