@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --mid: #0B1330;
  --mid2: #121C3F;
  --mid3: #24346E;
  --blue: #2B4BFF;
  --volt: #C8F547;
  --paper: #F5F4EE;
  --slate: #3D4A6B;
  --line: #DAD8CE;
  --or: #E8590C;
  --vi: #7A3FF2;
  --te: #0B8A7A;
  --wa: #07675B;
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--mid);
  color: #E2E8F0;
  font: 400 17px/1.6 var(--font-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: #FFFFFF;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1, h2 {
  font-weight: 700;
}

h3 {
  font-weight: 600;
}

a {
  color: var(--volt);
}

img {
  max-width: 100%;
  display: block;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.v {
  color: var(--volt);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 10px;
  font: 500 16px var(--font-body);
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.btn:hover {
  background: #1E3AE8;
  transform: translateY(-2px);
}

.btn.o {
  background: none;
  border: 1px solid #3a4a85;
}

.btn-pill {
  border-radius: 999px;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 3px;
}