.hero-bg-gradient {
  background:
    radial-gradient(
      circle at top left,
      rgba(222, 91, 45, 0.38),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(164, 109, 60, 0.25),
      transparent 25%
    ),
    linear-gradient(135deg, #111111 0%, #171717 45%, #0b0b0b 100%);
}

:root {
  --mayk-surface-a: rgba(222, 91, 45, 0.38);
  --mayk-surface-b: rgba(164, 109, 60, 0.25);
  --mayk-surface-c: #111111;
  --mayk-surface-d: #171717;
  --mayk-surface-e: #0b0b0b;
  --mayk-texture-a: transparent;
  --mayk-texture-b: rgba(255, 255, 255, 0.08);
  --mayk-card-a: rgba(244, 239, 231, 0.97);
  --mayk-card-b: rgba(226, 211, 197, 0.92);
  --mayk-accent-a: rgba(95, 107, 83, 0.14);
  --mayk-accent-b: rgba(255, 255, 255, 0.06);
}

.hero-bg-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}