@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark: #0b0b0b;
  --color-dark-alt: #111111;
  --color-white: #ffffff;

  --color-primary: #ff5f2e;
  --color-primary-dark: #e64c1f;
  --color-primary-glow: rgba(255, 95, 46, 0.4);

  --color-border: rgba(255, 255, 255, 0.08);
  --color-muted: rgba(255, 255, 255, 0.65);

  /* Typography */
  --font-main:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-padding-y: 52px;
  --section-padding-x: 6vw;
  --container-max-width: 1240px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
}

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

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background:
    radial-gradient(
      1200px 600px at 50% -200px,
      rgba(255, 95, 46, 0.06),
      transparent 60%
    ),
    linear-gradient(180deg, #050505 0%, #0b0b0b 40%, #000000 100%);
  color: #f5f5f5;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}

.section {
  padding: var(--section-padding-y) 0;
}

.text-muted {
  color: var(--color-muted);
}

.text-center {
  text-align: center;
}

a,
button,
input,
textarea,
select {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #ff6a2b;
  outline-offset: 2px;
}

[role="button"],
.card,
.clickable {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}