:root {
  --bg: #08080d;
  --bg-panel: #101018;
  --bg-elevated: #14141f;
  --border: #2a2a3a;
  --text: #eceae6;
  --muted: #8b8b9a;
  --gold: #d4af37;
  --gold-dim: #9a7b1f;
  --gold-soft: rgba(212, 175, 55, 0.14);
  --red: #c0392b;
  --green: #2ecc71;
  --blue: #5dade2;
  --glow-gold: 0 0 28px rgba(212, 175, 55, 0.18);
  --glow-blue: 0 0 36px rgba(93, 173, 226, 0.16);
  --glow-red: 0 0 28px rgba(192, 57, 43, 0.18);
  --font-display: "Syne", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --max: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover {
  color: #e8c96a;
}

button {
  font: inherit;
}

h1, h2, h3, .hero-brand, .brand-mark, .btn {
  font-family: var(--font-display);
}

::selection {
  background: rgba(212, 175, 55, 0.3);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}