/* Spurvik shared shell: fonts, surfaces, type, focus and grain. Values follow landing-page-design Part B. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #000000;
  --s1: #181818;
  --s2: #1F1F1F;
  --s3: #272727;
  --line: #313131;
  --ink: #EDEDED;
  --ink-2: #A1A1A1;
  --ink-3: #8F8F8F;
  --accent: #10B981;
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --e2: cubic-bezier(0.33, 1, 0.68, 1);
  --io: cubic-bezier(0.65, 0, 0.35, 1);
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1rem; line-height: 1.5rem; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
/* subtle film grain over flat surfaces (an image, not a gradient) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, h4, p, dl, dd, ol, ul, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
p, dd, li { text-wrap: pretty; }
a { color: inherit; }
code, pre, kbd, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: rgba(34, 173, 122, 0.35); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 100; padding: 8px 12px; border-radius: 8px;
  background: #181818; color: var(--ink); border: 1px solid #313131; font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform 300ms var(--ease);
}
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
.ic { width: 16px; height: 16px; flex: none; fill: currentColor; }
.ic-accent { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}