/* Language switcher */
.lang {
  position: relative;
}

.lang-btn {
  display: flex;
  /* align-items: center; */
  gap: 8px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, .2);
}

nav.scrolled .lang-btn {
  background: rgba(15, 17, 24, 0.04);
  border-color: rgba(15, 17, 24, 0.12);
  color: #0f1118;
}

nav.scrolled .lang-btn:hover {
  background: rgba(15, 17, 24, 0.08);
  border-color: rgba(15, 17, 24, 0.22);
}

.lang-btn .flag {
  font-size: 14px;
  line-height: 1;
}

.lang-btn .code {
  letter-spacing: .04em;
}

.lang-btn .chev {
  width: 14px;
  height: 14px;
  opacity: .6;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lang.open .lang-btn .chev {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: rgba(16, 16, 20, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.96);
  transform-origin: top right;
  transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s;
  max-height: 340px;
  overflow-y: auto;
  z-index: 400;
  color: var(--paper);
}

.lang.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lang-menu::-webkit-scrollbar {
  width: 6px;
}

.lang-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 3px;
}

.lang-menu .head {
  padding: 8px 12px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 4px;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  transition: background .2s, color .2s;
  cursor: pointer;
  text-decoration: none;
}

.lang-menu a .flag {
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  text-align: center;
}

.lang-menu a .name {
  flex: 1;
}

.lang-menu a .native {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
  font-weight: 400;
}

.lang-menu a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.lang-menu a.active {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

.lang-menu a.active::after {
  content: "\2713";
  font-size: 13px;
  margin-left: 4px;
}

.skiptranslate {
  display: none !important;
}

/* .btn-primary,
.cp-cta-primary,
.bp-cta-primary,
.cv-cta-primary {
  background: #0a58ca !important;
  color: #ffffff !important;
  border-color: #0a58ca !important;
}

.btn-primary:hover,
.cp-cta-primary:hover,
.bp-cta-primary:hover,
.cv-cta-primary:hover {
  background: #0a58ca !important;
  color: #ffffff !important;
  box-shadow: 0 14px 40px -10px rgba(10, 88, 202, .55) !important;
} */






.btn-primary,
.cp-cta-primary,
.bp-cta-primary,
.cv-cta-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  background: #0a58ca !important;
  color: #ffffff !important;
  border-radius: 9999px;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

/* Hover effect */
.btn-primary:hover,
.cp-cta-primary:hover,
.bp-cta-primary:hover,
.cv-cta-primary:hover {
  transform: scale(1.05);
  /* border-color: rgba(255, 255, 255, 0.6) !important; */
  color: #fff !important;
}

/* Shine animation */
.btn-primary::before,
.cp-cta-primary::before,
.bp-cta-primary::before,
.cv-cta-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;
  width: 100px;
  height: 100%;
  opacity: 0.6;
  background-image: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 70%);
}

/* Start shine on hover */
.btn-primary:hover::before,
.cp-cta-primary:hover::before,
.bp-cta-primary:hover::before,
.cv-cta-primary:hover::before {
  animation: shine 1.5s ease-out infinite;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}



.btn-outline,
.cp-cta-ghost,
.bp-cta-ghost,
.cv-cta-ghost {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}

.btn-outline:hover,
.cp-cta-ghost:hover,
.bp-cta-ghost:hover,
.cv-cta-ghost:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .4) !important;
}

:root {
  /* -------- Fonts (shared) -------- */
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-italic: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body: 'General Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'General Sans', 'Inter', system-ui, sans-serif;

  /* -------- Neutral palette (shared) -------- */
  --ink: #0a0c14;
  --paper: #ffffff;
  --line: rgba(10, 12, 20, 0.10);
  --line-soft: rgba(10, 12, 20, 0.06);
  --fg-soft: rgba(10, 12, 20, 0.62);
  --fg-faint: rgb(10 12 20);

  /* -------- BP page tokens (surveillance / detection) -------- */
  --bp-ink: #0a0c14;
  --bp-ink-2: #0f1422;
  --bp-paper: #ffffff;
  --bp-paper-2: #f4f6fb;
  --bp-paper-3: #e7ecf5;
  --bp-line: rgba(10, 12, 20, .10);
  --bp-line-soft: rgba(10, 12, 20, .06);
  --bp-fg-soft: rgba(10, 12, 20, .62);
  --bp-fg-faint: rgba(10, 12, 20, .42);
  --bp-cyan: #00e0ff;
  --bp-cyan-deep: #0086a6;
  --bp-alert: #ff3068;
  --bp-alert-deep: #cc1f4c;
  --bp-lime: #c8f53f;
  --bp-violet: #7b5cff;
  --bp-amber: #ffb547;
  --bp-mono: var(--font-body);
  --bp-display: var(--font-display);
  --bp-sans: var(--font-body);

  /* -------- CP page tokens (continuity / patrol) -------- */
  --cp-ink: #0a0c14;
  --cp-ink-2: #11141d;
  --cp-paper: #ffffff;
  --cp-paper-2: #f5f5f2;
  --cp-line: rgba(10, 12, 20, 0.10);
  --cp-line-soft: rgba(10, 12, 20, 0.06);
  --cp-fg-soft: rgba(10, 12, 20, 0.62);
  --cp-fg-faint: rgb(10 12 20 / 91%);
  --cp-blue: #0d6efd;
  --cp-blue-deep: #0a58ca;
  --cp-lime: #c8f53f;
  --cp-amber: #ffb547;
  --cp-mono: var(--font-body);
  --cp-display: var(--font-display);
  --cp-sans: var(--font-body);
  /* -------- CV page tokens (vault: gold + violet + cyan) -------- */
  --cv-ink: #0a0c14;
  --cv-ink-2: #111524;
  --cv-paper: #ffffff;
  --cv-paper-2: #faf6ec;
  --cv-paper-3: #f3ecda;
  --cv-line: rgba(10, 12, 20, 0.10);
  --cv-line-soft: rgba(10, 12, 20, 0.06);
  --cv-fg-soft: rgba(10, 12, 20, 0.62);
  --cv-fg-faint: rgba(10, 12, 20, 0.42);
  --cv-gold: #f5b14d;
  --cv-gold-soft: #ffcf80;
  --cv-gold-deep: #c9893a;
  --cv-violet: #9b7dff;
  --cv-violet-deep: #6f4dff;
  --cv-cyan: #33e8cc;
  --cv-amber: #ffb547;
  /* --cv-mono:        var(--font-body); */
  --cv-display: var(--font-display);
  --cv-sans: var(--font-body);
}

body {
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}

p {
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 0;
}

em,
i {
  font-family: var(--font-italic) !important;
  font-style: italic;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono) !important;
}

/* Force all page-specific title classes to use the same family */
.hero-title,
.cp-hero__title,
.bp-hero__title,
.cv-hero__title,
.cp-h2,
.bp-h2,
.cv-h2,
.cp-cap__title,
.bp-cat__title,
.cv-cap__title,
.cp-final__title,
.bp-final__title,
.cv-final__title {
  font-family: var(--font-display) !important;
}

/* Unify hero title size with index.html's .hero-title scale */
.hero-title,
.cp-hero__title,
.bp-hero__title,
.cv-hero__title {
  font-size: clamp(40px, 5vw, 68px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  font-weight: 500 !important;
}

@media (max-width: 768px) {

  .hero-title,
  .cp-hero__title,
  .bp-hero__title,
  .cv-hero__title {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1.08 !important;
  }
}

/* Mono labels (eyebrows, telemetry, codes) — one family everywhere */
.cp-eyebrow,
.bp-eyebrow,
.cv-eyebrow,
.cp-hero__eyebrow,
.bp-hero__eyebrow,
.cv-hero__eyebrow {
  font-family: var(--font-mono) !important;
}

/* ============================================================
   MANUAL → AUTONOMOUS signature footer
   Keep light through the whole section (matches index-5 .statement).
   Was a dark inset panel; we flip it back to paper.
============================================================ */

/* .cp-shift__sign,
.bp-shift__sign {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
} */

/* .cp-shift__sign p,
.bp-shift__sign p {
  color: var(--ink) !important;
} */

/* .cp-shift__sign p em,
.bp-shift__sign p em {
  color: #0a58ca !important;
} */

.cp-shift__sign .meta,
.bp-shift__sign .meta {
  color: var(--fg-faint) !important;
}

.cp-shift__sign .meta::before,
.bp-shift__sign .meta::before {
  background: #0a58ca !important;
  box-shadow: 0 0 8px rgba(10, 88, 202, .55) !important;
}

/* ============================================================
   COMMON CARD GEOMETRY — matches index-5 .kpi cards
   Edit here once to update card look across every page.
   Only shape/transition/hover is unified; page-specific
   colors and backgrounds are preserved.
============================================================ */

.kpi,
.cp-cap,
.cp-tile,
.cp-agent,
.cp-slab,
.bp-cat,
.bp-slab,
.bp-why__card,
.bp-hub__node,
.bp-cc__alert,
.cv-cap,
.cv-why__card {
  border-radius: 20px !important;
  padding: 20px 20px !important;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1),
    box-shadow .35s ease,
    border-color .25s ease !important;
}

.kpi:hover,
.cp-cap:hover,
.cp-tile:hover,
.cp-agent:hover,
.cp-slab:hover,
.bp-cat:hover,
.bp-slab:hover,
.bp-why__card:hover,
.bp-hub__node:hover,
.bp-cc__alert:hover,
.cv-cap:hover,
.cv-why__card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 60px -20px rgba(10, 12, 20, .18) !important;
}

/* ============================================================
   STANDARD CTA BUTTONS  (site-wide)
   Every hero section + final-CTA block uses the same pair:
     • Primary   — solid BLUE, pill radius, no border
     • Secondary — solid BLACK, pill radius, with a stroke (border)
   Scoped to CTA contexts (.hero-cta / .cta-btns) and the dedicated
   *-cta-primary / *-cta-ghost classes, so product-card and form
   buttons are never affected. !important is used because the page
   CSS sets these without !important (so this always wins).
   ============================================================ */
.hero-cta .btn.btn-primary,
.cta-btns .btn.btn-primary,
.cp-cta-primary,
.bp-cta-primary,
.cv-cta-primary,
.rx-cta-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #0d6efd !important;
  color: #ffffff !important;
  border: 1px solid #0d6efd  !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}

.hero-cta .btn.btn-primary:hover,
.cta-btns .btn.btn-primary:hover,
.cp-cta-primary:hover,
.bp-cta-primary:hover,
.cv-cta-primary:hover,
.rx-cta-primary:hover {
  background: #0b5ed7 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px -10px rgba(13, 110, 253, .55) !important;
}

/* Secondary — solid black with a stroke */
.hero-cta .btn.btn-outline-light,
.cta-btns .btn-outline,
.cp-cta-ghost,
.bp-cta-ghost,
.cv-cta-ghost,
.rx-cta-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #0a0c14 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  transition: background .25s ease, border-color .25s ease, transform .25s ease !important;
}

.hero-cta .btn.btn-outline-light:hover,
.cta-btns .btn-outline:hover,
.cp-cta-ghost:hover,
.bp-cta-ghost:hover,
.cv-cta-ghost:hover,
.rx-cta-ghost:hover {
  background: #14161f !important;
  border-color: rgba(255, 255, 255, .7) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Mobile — step the CTA buttons down slightly */
@media (max-width: 600px) {
  .hero-cta .btn.btn-primary,
  .cta-btns .btn.btn-primary,
  .cp-cta-primary,
  .bp-cta-primary,
  .cv-cta-primary,
  .rx-cta-primary,
  .hero-cta .btn.btn-outline-light,
  .cta-btns .btn-outline,
  .cp-cta-ghost,
  .bp-cta-ghost,
  .cv-cta-ghost,
  .rx-cta-ghost {
    font-size: 13px !important;
    padding: 11px 22px !important;
  }
}

/* ============================================================
   UNIFORM HERO ALIGNMENT  (site-wide)
   Every shared .hero-content hero uses the same left-bottom
   alignment + title spacing/line-height as cp / resilix / index.
   Bespoke product heroes (.cv-hero__inner / .bp-hero / .rx-hero__inner)
   don't use .hero-content, so they are unaffected. Pages that
   already set these inline keep their values (higher specificity);
   the previously-centered pages (contact, docs, Acclamations,
   bookdemo) now match.
   ============================================================ */
.hero-content {
  text-align: left !important;
  margin: auto 0 0 0 !important;
  max-width: 820px;
}
.hero-content .desc {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .hero-content .desc {
    font-size: 14px;
  }
}
.hero-content .hero-title {
  line-height: 1.08 !important;
  margin-bottom: 24px !important;
}

/* Reserve navbar space + consistent bottom padding on shared heroes
   (scoped with :has so bespoke product heroes are untouched). */
.hero:has(> .hero-content) {
  padding-bottom: 48px !important;
}
@media (min-width: 769px) {
  .hero:has(> .hero-content) {
    padding-top: 132px !important;
    padding-bottom: 48px !important;
    min-height: 100svh;
  }
  .hero:has(> .hero-content) .hero-title { line-height: 1.06 !important; }
}
@media (max-width: 768px) {
  .hero:has(> .hero-content) {
    justify-content: flex-start !important;
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }
}

/* ------------------------------------------------------------
   Bespoke product heroes (cv / bp / Global-Regulation) — these
   use their own two-column inner (.cv-hero__inner / .bp-hero__inner
   / .rx-hero__inner) and were center-aligned. Left-bottom align them
   so every hero across the app matches cp / resilix. Page CSS sets
   these without !important, so these overrides always win.
   ------------------------------------------------------------ */
.cv-hero__inner,
.bp-hero__inner,
.rx-hero__inner {
  text-align: left !important;
  align-content: end !important;
  justify-content: start !important;
  justify-items: start !important;
}
.cv-hero__ctas,
.bp-hero__ctas,
.rx-hero__ctas {
  justify-content: flex-start !important;
}