.dark {
  --bg-primary: #15161c;
  --bg-secondary: #15161c;
  --text-primary: #e5e7eb;
  --text-secondary: #aeaec4;
  --text-muted: white;
  --border-color: #202231;
  --bg-overlay: rgba(255, 255, 255, 0.06);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --navbar-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.03)
  );
  --navbar-border: #1e2230;
  --card-bg: #15161c;
  --card-border: #202231;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --button-border: rgba(255, 255, 255, 0.1);
  --button-bg: rgba(255, 255, 255, 0.03);
  --button-hover: rgba(255, 255, 255, 0.06);
  --pill-bg: rgba(255, 255, 255, 0.06);
  --pill-border: rgba(255, 255, 255, 0.12);
  --accordion-border: #23283a;
  --accordion-header-bg: rgba(255, 255, 255, 0.03);
  --accordion-content-bg: #0f1117;
  --menu-bg: #15161c;
  --menu-border: #202231;
  --menu-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  --backdrop-bg: rgba(0, 0, 0, 0.4);
  --lang-menu-bg: #15161c;
  --kpi-bg: rgba(255, 255, 255, 0.03);
  --kpi-border: #202231;
}

.dark pre {
  background: #0f1117;
  border: 1px solid #1f2430;
}

.dark .price.highlighted {
  outline: 1px solid rgba(139, 92, 246, 0.31);
}

.dark #cta-banner {
  color: #15161c;
}

.dark .benefit-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  border-color: rgb(26.15, 138, 176.4);
}

.dark .menu-header .close-btn:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.24),
    0 0 0 4px #4397f6;
}