@font-face {
  font-family: 'Belgro';
  src: url('../Roadmap.ai%20career%20onboarding%20prototype/src/Belgro.eot');
  src: local('Belgro'),
       url('../Roadmap.ai%20career%20onboarding%20prototype/src/Belgro.eot?#iefix') format('embedded-opentype'),
       url('../Roadmap.ai%20career%20onboarding%20prototype/src/assets/fonts/Belgro.woff2') format('woff2'),
       url('../Roadmap.ai%20career%20onboarding%20prototype/src/assets/fonts/Belgro.woff') format('woff'),
       url('../Roadmap.ai%20career%20onboarding%20prototype/src/assets/fonts/Belgro.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { touch-action: none; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg-0); }
body { overscroll-behavior: none; }
body {
  color: var(--text);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(255, 255, 255, 0.018), transparent 60%),
    radial-gradient(1000px 800px at 50% 100%, rgba(255, 255, 255, 0.012), transparent 60%),
    linear-gradient(180deg, #101010 0%, #070707 100%);
}

/* ───────── Scrollable map viewport ───────── */
.viewport {
  position: fixed; inset: 0;
  overflow: hidden;
  z-index: 1;
}

.map {
  position: relative;
  margin: 0 auto;
  background-image:
    radial-gradient(circle, var(--grid) 1px, transparent 1.2px);
  background-size: 36px 36px;
  background-position: 0 0;
}

/* ───────── Edges SVG ───────── */
.edges-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
}