@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/Hanken_Grotesk/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/Hanken_Grotesk/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

.icon-symbol {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.text-glow:hover {
  text-shadow: 0 0 15px rgba(227, 6, 19, 0.6);
}

.glass-panel {
  background: rgba(19, 19, 19, 0.7);
  backdrop-filter: blur(20px);
}

.red-gradient {
  background: linear-gradient(135deg, #e30613 0%, #93000a 100%);
}

.tire-smoke {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}