/* KFM Moto — custom styles layered on top of Tailwind */

:root {
  --kfm-red: #d62828;
  --kfm-red-dark: #9a1c1c;
  --kfm-black: #0a0a0a;
  --kfm-yellow: #f4c542;
  --kfm-green: #2a9d3f;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 100%);
}

.btn-primary {
  background-color: var(--kfm-red);
  color: #fff;
  transition: background-color .15s ease;
}
.btn-primary:hover { background-color: var(--kfm-red-dark); }

.btn-outline {
  border: 2px solid #fff;
  color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.btn-outline:hover { background-color: #fff; color: var(--kfm-black); }

.placeholder-img {
  background:
    repeating-linear-gradient(45deg, #1f2937 0 12px, #111827 12px 24px);
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-switch a.active {
  color: var(--kfm-yellow);
  font-weight: 600;
}