@font-face {
  font-family: 'UTM Bebas';
  src: url('../fonts/utm-bebas/UTM-Bebas.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ob-primary: #024bb2;
  --ob-accent: #f5e6b0;
  --ob-gold: #d4b454;
  --ob-gold-deep: #a88b2e;
  --ob-gold-muted: rgba(212, 180, 84, 0.4);
  --ob-gold-shine: linear-gradient(135deg, #f5e6b0 0%, #d4b454 40%, #f0dfa0 60%, #c9a03a 100%);
  --ob-shadow-gold: 0 0 40px rgba(212, 180, 84, 0.15);
  --ob-navy: #1a1f2e;
  --ob-white: #ffffff;
  --ob-surface: #f7f5f1;
  --ob-text: #1a1f2e;
  --ob-muted: #6b7280;
  --ob-border: rgba(26, 31, 46, 0.12);
  --ob-radius: 12px;
  --ob-radius-lg: 28px;
  --ob-header-h: 88px;
  --ob-container: 1280px;
  --ob-gutter: 28px;
  --ob-section: 88px;
  --ob-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ob-font-display: 'UTM Bebas', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --ob-shadow: 0 18px 40px rgba(26, 31, 46, 0.08);
  --ob-transition: 0.22s ease;
}

@media (max-width: 768px) {
  :root {
    --ob-gutter: 18px;
    --ob-section: 64px;
    --ob-header-h: 72px;
  }
}