@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/Rubik-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/Rubik-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/Rubik-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/Rubik-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

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

html { font-size: 16px; }

body {
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-paper);
  background: var(--color-black);
  min-height: 100vh;
}

h1 { font-weight: 700; font-size: clamp(32px, 4vw, 42px); line-height: 1.25; color: var(--color-paper); }
h2 { font-weight: 600; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.35; color: var(--color-paper); }
h3 { font-weight: 600; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--color-paper); }
p { font-weight: 400; font-size: 16px; }
small { font-weight: 400; font-size: 13px; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.28s ease 0.06s;
}
a:hover {
  color: var(--color-soft-orange);
  transition: color 0.22s ease 0s;
}
a.btn:hover {
  color: inherit;
}

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

ul { list-style: none; }

input, select, textarea, button {
  font-family: var(--font-family);
  font-size: 16px;
}