:root {
  --bg: #0f1014;
  --bg-soft: #1a1b21;
  --text: #f5f5f5;
  --muted: #d7d7d7;
  --gold: #f4c430;
  --gold-soft: #ffd86b;
  --red: #d94b2b;
  --red-soft: #ff7a4d;
  --nav-bg: rgba(28, 28, 32, 0.72);
  --nav-border: rgba(244, 196, 48, 0.55);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --max-width: 1700px;
  --content-width: 1300px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(217, 75, 43, 0.18), transparent 30%),
    radial-gradient(circle at top right, rgba(244, 196, 48, 0.16), transparent 28%),
    linear-gradient(180deg, #121318 0%, #17181f 45%, #0f1014 100%);
}

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

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

button {
  font: inherit;
}

.container {
  width: min(var(--content-width), calc(100% - 48px));
  margin: 0 auto;
}

@media (max-width: 750px) {
  .container {
    width: min(var(--content-width), calc(100% - 24px));
  }
}