/* ============================================
   VARIABLES & RESET
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&family=Syne:wght@400;600;800&display=swap');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:       #080c10;
  --bg2:      #0e1318;
  --bg3:      #141b22;
  --accent:   #00e5c0;
  --accent2:  #0057ff;
  --text:     #e8edf2;
  --muted:    #6b7f90;
  --border:   rgba(0, 229, 192, 0.15);

  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --radius-sm: 2px;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

/* Grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 192, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 192, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}