:root {
  --q-obsidian: #16181d;
  --q-obsidian-card: #1f2229;
  --q-obsidian-border: #2a2d35;

  /* Typography */
  --q-font-heading: 'Space Grotesk', sans-serif;
  --q-font-body: 'Inter', sans-serif;
  --q-font-mono: 'JetBrains Mono', monospace;
}

/* ── Global font overrides ────────────────────────────────────────────── */
body {
  font-family: var(--q-font-body) !important;
  font-size: 0.9375rem;
  /* 15px — slightly tighter than Porto's 14px */
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--q-font-heading) !important;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Nav links — tighter, more technical */
.nav-link,
.navbar-nav .nav-item>a {
  font-family: var(--q-font-heading) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Buttons */
.btn {
  font-family: var(--q-font-heading) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Carousel slide text */
.owl-carousel h2,
.owl-carousel h3 {
  font-family: var(--q-font-heading) !important;
  letter-spacing: -0.02em;
  line-height: 1em;
}

/* Uppercase section labels / subtitles */
.text-4.font-weight-medium,
.text-5.font-weight-medium {
  font-family: var(--q-font-heading) !important;
  letter-spacing: 0.12em;
}

/* Monospace — icon labels, technical terms */
[data-plugin-animated-letters],
.font-weight-light.opacity-7[data-plugin-animated-letters] {
  font-family: var(--q-font-body) !important;
}

code,
pre,
kbd,
.font-monospace,
[style*="monospace"] {
  font-family: var(--q-font-mono) !important;
}

/* Obsidian dark section */
.bg-obsidian {
  background-color: var(--q-obsidian) !important;
}

.bg-obsidian h1,
.bg-obsidian h2,
.bg-obsidian h3,
.bg-obsidian h4,
.bg-obsidian h5,
.bg-obsidian p,
.bg-obsidian .text-muted {
  color: #e8eaf0 !important;
}

.bg-obsidian .card {
  background: var(--q-obsidian-card) !important;
  border: 1px solid var(--q-obsidian-border) !important;
}

.bg-obsidian .card .text-muted {
  color: #9da3b0 !important;
}

.bg-obsidian .text-primary {
  color: #6ea8fe !important;
}

/* ── Carousel height fix (owl-item needs explicit height for h-100 to work) ── */
#home .owl-item {
  height: 100vh;
}

/* Footer obsidian */

#footer.footer-obsidian {
  background-color: var(--q-obsidian) !important;
  border-top: 1px solid var(--q-obsidian-border);
}

#footer.footer-obsidian p,
#footer.footer-obsidian strong {
  color: #9da3b0 !important;
}

/* ── Body/HTML obsidian background (prevents white flash) ── */
html,
body {
  background-color: var(--q-obsidian) !important;
}

/* ── How It Works section (blue bg-primary) ── */
#how-it-works h2,
#how-it-works h4,
#how-it-works h5,
#how-it-works h6 {
  color: #e8eaf0 !important;
}

#how-it-works p,
#how-it-works .text-muted {
  color: rgba(232, 234, 240, 0.75) !important;
}

/* Engine/step cards — match the features section dark card style */
#how-it-works .card {
  background: var(--q-obsidian-card) !important;
  border: 1px solid var(--q-obsidian-border) !important;
}

#how-it-works .card .text-muted {
  color: #9da3b0 !important;
}

/* ── Contact section (obsidian) form inputs ── */
#contact.bg-obsidian .form-control {
  background-color: var(--q-obsidian-card) !important;
  border-color: var(--q-obsidian-border) !important;
  color: #e8eaf0 !important;
}

#contact.bg-obsidian .form-control::placeholder {
  color: #9da3b0 !important;
}

/* ── Announcement bar + nav: offset section hash targets ── */
#services,
#features,
#capabilities,
#benchmarks,
#how-it-works,
#contact {
  scroll-margin-top: 110px;
}

/* ── Header nav height: reduce from Porto default 100px ── */
#header.header-effect-shrink .header-container {
  min-height: 65px;
}

/* ── Slide italic note lines: hidden initially, dimmed after animation ── */
.appear-animation-visible.q-slide-note {
  opacity: 0.6;
}

/* ── Benchmark card links ── */
a.bench-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.bench-card-link:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(124, 111, 255, 0.18);
}

a.bench-card-link:hover .card {
  border-color: rgba(124, 111, 255, 0.4) !important;
}