@font-face {
  font-family: "Moneygraphy Rounded";
  src: url("../fonts/Moneygraphy-Rounded.woff2") format("woff2"),
       url("../fonts/Moneygraphy-Rounded.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Moneygraphy Pixel";
  src: url("../fonts/Moneygraphy-Pixel.woff2") format("woff2"),
       url("../fonts/Moneygraphy-Pixel.woff") format("woff");
  font-display: swap;
}

:root {
  --blue-500: #3182f6;
  --blue-600: #2272eb;
  --blue-700: #1b64da;
  --blue-50: #e8f3ff;
  --grey-900: #191f28;
  --grey-800: #333d4b;
  --grey-700: #4e5968;
  --grey-600: #6b7684;
  --grey-500: #8b95a1;
  --grey-400: #b0b8c1;
  --grey-300: #d1d6db;
  --grey-200: #e5e8eb;
  --grey-100: #f2f4f6;
  --grey-50: #f9fafb;
  --white: #fff;

  --font: "Moneygraphy Rounded", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-pixel: "Moneygraphy Pixel", var(--font);

  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--grey-800);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img, svg { display: block; }

:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 28px;
  border-radius: 16px;
  font-size: 17px;
  transition: background-color 0.2s, transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue-500); color: var(--white); }
.btn-primary:hover { background: var(--blue-600); }
.btn-primary:disabled { background: var(--grey-200); color: var(--grey-400); cursor: default; transform: none; }
.btn-soft { background: var(--blue-50); color: var(--blue-700); }
.btn-soft:hover { background: #d6e9ff; }
.btn-grey { background: var(--grey-100); color: var(--grey-700); }
.btn-grey:hover { background: var(--grey-200); }

.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; color: var(--grey-900); }
.logo svg { width: 28px; height: 28px; }