:root {
  --fw-bg: #0a0b0a;
  --fw-surface: #121311;
  --fw-surface-soft: #181914;
  --fw-card: #1e1f1a;
  --fw-text: #f8f2e5;
  --fw-muted: #c8bda8;
  --fw-accent: #d89a0d;
  --fw-accent-2: #f4c150;
  --fw-border: rgba(216, 154, 13, 0.28);
  --fw-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --fw-font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fw-radius: 8px;
  --fw-header-height: 82px;
}

body {
  color: var(--fw-text);
  background:
    radial-gradient(circle at 85% 8%, rgba(216, 154, 13, 0.18), transparent 26rem),
    linear-gradient(180deg, #080908 0%, var(--fw-bg) 48%, #070807 100%);
}

body::before {
  opacity: 0.08;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(255, 255, 255, 0.45) 49%, transparent 50%),
    linear-gradient(150deg, transparent 48%, rgba(255, 255, 255, 0.35) 49%, transparent 50%);
  background-size: 120px 120px;
}

.hero-bg {
  background:
    linear-gradient(90deg, rgba(7, 8, 7, 0.97) 0%, rgba(7, 8, 7, 0.78) 45%, rgba(7, 8, 7, 0.32) 100%),
    url("header.png") center / cover;
}

.track-plan {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  box-shadow: none;
}

.project-section-dark {
  background: #050605;
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}