:root {
  --bg-dark: #1f1f1f;
  /*--hero-bg: #2e2e2e;*/
  --page-bg: #2e2e2e;
  --gold: #f2a93b;
  --gold-light: #f0d9a6;
  --white: #f5f3ef;
  --gray-text: #d8d5d0;
  --card-bg: #111111;
  --page-margin: 120px;

  /* Shared animation timing */
  --ease-natural: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1200px) {
  :root { --page-margin: 80px; }
}

@media (max-width: 900px) {
  :root { --page-margin: 48px; }
}

@media (max-width: 600px) {
  :root { --page-margin: 24px; }
}

@media (max-width: 380px) {
  :root { --page-margin: 16px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--page-bg);
}

/* ===== Shared CTA button style ===== */
.cta-btn {
  border: 1.5px solid var(--gold);
  color: var(--gold);
  background: transparent;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease-natural),
              color 0.25s var(--ease-natural),
              transform 0.2s var(--ease-natural);
}

.cta-btn:hover {
  background: var(--gold);
  color: var(--bg-dark);
  transform: translateY(-2px);
}

.cta-btn:active {
  transform: translateY(0);
}