/* Whole site on the hero's steel grey: former dark bands swap to light tokens,
   mockups and illustrations inside them keep their original dark palette. */
.dark {
  --graphite: #E3E7ED; --graphite-2: #D9DEE5; --graphite-3: #C6CDD7;
  --steel: #0E0F11; --steel-2: #23262B; --paper: #17191C;
  --mist: #646A76; --slate: #8C929C; --line-d: rgba(14, 15, 17, .12);
  background: #E3E7ED; color: #0E0F11;
}
.dark .label__code { color: #0E0F11; }
.dark :is(.case__visual, .cshow__v, .why__art, .bh__art, .browser, .svs, .rfq, .sector, .iso, .tile--anim, .vt, .obj) {
  --graphite: #0E0F11; --graphite-2: #17191C; --graphite-3: #23262B;
  --steel: #E3E7ED; --steel-2: #D3D9E1; --paper: #F1F3F6;
  --mist: #9CA2AD; --slate: #646A76; --line-d: rgba(227, 231, 237, .1);
}
/* soft seams between grey bands */
.foot:hover .foot__mark span { -webkit-text-stroke-color: rgba(14, 15, 17, .32); }
.foot.dark .foot__mark { -webkit-text-stroke-color: rgba(14, 15, 17, .2); }
/* light sections that were near-white: same steel grey as the hero */
.svc3d--light, .packages, .included, .founder, .kx-mob { background: var(--steel); }
.svc3d--light .svc3d__stage--obj { background: radial-gradient(60% 55% at 50% 50%, #EEF1F4 0%, #D9DEE5 80%) !important; }