@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap");

:root {
  --mo-ink: #0b0f14;
  --mo-surface: #16181d;
  --mo-surface-raised: #22252b;
  --mo-rule: #2a2d33;
  --mo-blue: #00a2fe;
  --mo-blue-deep: #087fbe;
  --mo-blue-bright: #70cfff;
  --mo-blue-soft: rgba(0, 162, 254, .12);
  --mo-cyan: #00a2fe;
  --mo-signal: #ff6a00;
  --brand: var(--mo-blue) !important;
  --blue: var(--mo-blue) !important;
  --cyan: var(--mo-cyan) !important;
  --color-brand: var(--mo-blue) !important;
  accent-color: var(--mo-blue);
}

::selection { color: #fff; background: rgba(0, 127, 190, .82); }

/* The homepage is generated with colour-specific utility classes. These
   late overrides connect its controls to the shared product palette. */
[class~="text-[#FF6A00]"] { color: var(--mo-signal) !important; }
[class~="border-[#FF6A00]"],
[class~="border-[#FF6A00]/40"],
[class~="border-[#FF6A00]/60"] { border-color: var(--mo-blue) !important; }
[class~="bg-[#FF6A00]"] { background-color: var(--mo-blue-deep) !important; }
[class~="hover:text-[#FF6A00]"]:hover { color: var(--mo-blue-bright) !important; }
[class~="hover:border-[#FF6A00]"]:hover { border-color: var(--mo-blue-bright) !important; }
[class~="hover:bg-[#FF6A00]"]:hover { background-color: var(--mo-blue-deep) !important; }

.cta-target .tl,
.cta-target .tr,
.cta-target .bl,
.cta-target .br { border-color: var(--mo-blue) !important; }

.cta-underline::after { background: var(--mo-blue) !important; }
.cta-readout:hover { border-color: var(--mo-cyan) !important; }

/* A restrained blue glow echoes the real CRM dashboards without changing
   the graphite foundation or semantic success/warning colours. */
body::selection { background: rgba(0, 127, 190, .82); }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible { outline-color: var(--mo-blue-bright) !important; }

[data-mo-hero-eyebrow="true"] {
  display: inline-flex !important;
  width: fit-content;
  padding: .5rem .75rem !important;
  border-left: 2px solid var(--mo-blue);
  background: rgba(11, 15, 20, .82);
  color: #f2f0ea !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Semantic event colours preserve the original Hero layout while making each
   system response easier to distinguish. */
[data-mo-hero-card] > div {
  border-width: 1px !important;
  box-shadow: 0 26px 70px -30px rgba(0, 0, 0, .92), 0 0 0 1px rgba(255, 255, 255, .025) inset !important;
}

[data-mo-hero-card="plate"] > div {
  border-color: var(--mo-blue) !important;
  box-shadow: 0 26px 70px -30px rgba(0, 0, 0, .92), 0 0 30px rgba(0, 162, 254, .12) !important;
}

[data-mo-hero-card="client"] > div {
  border-color: #2bd576 !important;
  box-shadow: 0 26px 70px -30px rgba(0, 0, 0, .92), 0 0 30px rgba(43, 213, 118, .1) !important;
}

[data-mo-hero-card="order"] > div {
  border-color: var(--mo-signal) !important;
  box-shadow: 0 26px 70px -30px rgba(0, 0, 0, .92), 0 0 30px rgba(255, 106, 0, .11) !important;
}