* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden;
}
:root {
  --cmx-bg: #f8f9fb;
  --cmx-page: #ffffff;
  --cmx-ink: #0a0a0a;
  --cmx-muted: #4b5563;
  --cmx-line: #e5e7eb;
  --cmx-accent: #d90429;
  --cmx-accent-ink: #ffffff;
  --radius: 8px;
  --shadow-0: none;
  --shadow-1: 0 2px 12px rgba(16, 24, 40, 0.04);
}

html,
body {
  background: var(--cmx-bg);
  color: var(--cmx-ink);
}

h1,
.display-5,
.display-6 {
  letter-spacing: -0.02em;
}
.lead {
  color: var(--cmx-muted);
}

.navbar {
  background: var(--cmx-page) !important;
  border-bottom: 1px solid var(--cmx-line);
}
.navbar-brand {
  color: var(--cmx-ink);
  font-weight: 600;
}
.navbar-brand:hover {
  color: var(--cmx-accent);
}
.navbar .nav-link {
  color: var(--cmx-ink);
}
.navbar .nav-link:hover {
  color: var(--cmx-accent);
}
.navbar-toggler{
  border-color: var(--cmx-line);
  background-color: #0a0a0a;
}
.badge-soft {
  background: #f3f4f6;
  color: var(--cmx-muted);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.hero {
  background: #f3f4f6;
  padding: 6rem 0 4rem;
  border-bottom: 1px solid var(--cmx-line);
}

.btn-cmx {
  background: var(--cmx-accent);
  color: var(--cmx-accent-ink);
  border: 1px solid var(--cmx-accent);
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0.2px;
}
.btn-cmx:hover {
  filter: brightness(0.95);
  color: #fff;
}

.btn-outline-cmx {
  background: transparent;
  color: var(--cmx-ink);
  border: 1px solid var(--cmx-ink);
  border-radius: 6px;
}
.btn-outline-cmx:hover {
  background: var(--cmx-ink);
  color: #fff;
}

.card {
  background: var(--cmx-page);
  border: 1px solid var(--cmx-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-0);
}
.section-alt {
  background: var(--cmx-page);
  border-top: 1px solid var(--cmx-line);
  border-bottom: 1px solid var(--cmx-line);
}

.text-muted,
.text-secondary {
  color: var(--cmx-muted) !important;
}

a {
  color: var(--cmx-accent);
}
a:hover {
  color: #b60321;
}

footer {
  background: var(--cmx-page);
  border-top: 1px solid var(--cmx-line);
  color: var(--cmx-muted);
}

.form-control,
.form-select {
  border-radius: 6px;
  border-color: var(--cmx-line);
}
.form-check-input:checked {
  background-color: var(--cmx-accent);
  border-color: var(--cmx-accent);
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid var(--cmx-line);
  color: var(--cmx-muted);
  font-size: 0.85rem;
}