/* ============================================================
   solution-shared.css — shared styles for all solution pages
   Light design system. Uses !important to override inline
   dark-mode <style> blocks in legacy page files.
   ============================================================ */

/* ─── DARK STICKY HEADER ─────────────────────────────────── */
.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease !important;
}
.site-header.sp-scrolled,
.site-header.scrolled {
  background: rgba(9,9,27,0.82) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* Header container layout */
.site-header .container {
  display: flex !important;
  align-items: center !important;
  height: 84px !important;
  max-width: 100% !important;
  padding: 0 40px !important;
  position: relative !important;
  overflow: visible !important;
  
}

/* Shrink header when scrolled - removed */

/* Logo */
.site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-right: 40px !important;
  text-decoration: none !important;
}
.site-logo__mark {
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Nav structural layout */
.site-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 !important;
  position: relative !important;
  height: 100% !important;
}

/* Nav links — white text on dark header */
.site-nav a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  padding: 7px 12px !important;
  border-radius: 99px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
}
.site-nav a:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,0.09) !important;
}

/* Header action buttons */
.site-header__actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.site-header__actions .btn--primary {
  background: linear-gradient(135deg, #584E9D 0%, #4b3b8c 100%) !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 0 18px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(88,78,157,0.28) !important;
  transition: box-shadow 0.25s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}
.site-header__actions .btn--primary:hover {
  box-shadow: 0 6px 20px rgba(88,78,157,0.4) !important;
  transform: translateY(-1px) !important;
}
.site-header__actions .btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 7px !important;
  padding: 0 14px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.site-header__actions .btn--ghost:hover {
  border-color: rgba(255,255,255,0.38) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.09) !important;
}

/* ─── MEGA-MENU ──────────────────────────────────────────── */
/* nav-item must be static so mega-menu positions from the container, not the link */
.site-nav .nav-item { position: static !important; display: inline-flex !important; height: 100% !important; align-items: center !important; }

.site-nav .nav-item > a {
  display: flex !important; align-items: center !important;
  gap: 5px !important; cursor: pointer !important;
  font-size: 13px !important; font-weight: 500 !important;
  padding: 7px 12px !important; border-radius: 99px !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.01em !important; text-decoration: none !important;
  color: #fff !important;
}
.site-nav .nav-item:hover > a {
  color: #fff !important;
  background-color: rgba(255,255,255,0.09) !important;
}
.site-nav .nav-item > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important; height: 5px !important;
  border-right: 1.5px solid rgba(255,255,255,0.4) !important;
  border-bottom: 1.5px solid rgba(255,255,255,0.4) !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.2s ease !important;
  margin-left: 3px !important; flex-shrink: 0 !important;
}
.site-nav .nav-item:hover > a::after {
  transform: rotate(-135deg) translateY(2px) !important;
  border-color: rgba(255,255,255,0.7) !important;
}
/* OMNI is a direct link, not a dropdown — no chevron */
.site-nav #nav-omni-item > a::after,
.site-nav #nav-omni-item:hover > a::after {
  content: none !important;
  display: none !important;
}

.mega-menu {
  position: absolute !important;
  top: 100% !important; left: 32px !important;
  min-width: 860px !important;
  background: rgba(11,11,26,0.97) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 20px 20px !important;
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr !important;
  grid-template-rows: auto 1fr !important;
  align-items: start !important;
  gap: 0 !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  z-index: 1000 !important;
}
.mega-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -30px !important; left: -40px !important; right: -40px !important;
  height: 30px !important;
}
.site-nav .nav-item.is-open .mega-menu,
.site-nav .nav-item:hover .mega-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Standard columns */
.mega-col { padding: 0 18px !important; border-right: 1px solid rgba(255,255,255,0.07) !important; }
.mega-col:last-child { border-right: none !important; padding-right: 4px !important; }

/* Platform column — prominent first column */
.mega-col--platform {
  background: linear-gradient(160deg, rgba(88,78,157,0.18) 0%, rgba(162,120,179,0.09) 100%) !important;
  border: 1px solid rgba(162,120,179,0.15) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-right: 10px !important;
  border-right: none !important;
  position: relative !important;
}
.mega-col--platform::after {
  content: '' !important;
  position: absolute !important;
  right: -6px !important; top: 6px !important; bottom: 6px !important;
  width: 1px !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Column header labels */
.mega-col__label {
  font-size: 9.5px !important; font-weight: 800 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: #A278B3 !important; margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(162,120,179,0.20) !important;
  display: flex !important; align-items: center !important; gap: 7px !important;
  text-decoration: none !important; transition: color 0.15s !important;
  white-space: nowrap !important;
}
.mega-col__label:hover { color: #C4BEFF !important; }
.mega-col__label svg { flex-shrink: 0 !important; opacity: 0.7 !important; }

/* Platform product links (icon + name + sub) */
.mega-plat-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 9px 8px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
  margin-bottom: 4px !important;
}
.mega-plat-item:hover { background: rgba(162,120,179,0.12) !important; }
.mega-plat-item__icon {
  width: 34px !important; height: 34px !important;
  border-radius: 9px !important;
  background: rgba(88,78,157,0.22) !important;
  border: 1px solid rgba(162,120,179,0.22) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #A278B3 !important; flex-shrink: 0 !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
.mega-plat-item:hover .mega-plat-item__icon {
  background: rgba(88,78,157,0.35) !important;
  box-shadow: 0 0 12px rgba(88,78,157,0.4) !important;
}
.mega-plat-item__text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.mega-plat-item__name {
  font-size: 13.5px !important; font-weight: 700 !important;
  color: #fff !important; line-height: 1.2 !important;
}
.mega-plat-item__sub {
  font-size: 11px !important; color: #fff !important;
  font-weight: 400 !important; line-height: 1.35 !important;
}

/* Service links */
.mega-link {
  display: block !important; font-size: 13px !important;
  font-weight: 500 !important; color: #fff !important;
  text-decoration: none !important; padding: 6px 0 !important;
  transition: color 0.15s, padding-left 0.15s !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  white-space: nowrap !important; background: none !important;
  border-radius: 0 !important; letter-spacing: normal !important;
}
.mega-link:last-child { border-bottom: none !important; }
.mega-link:hover { color: #C4BEFF !important; padding-left: 4px !important; }

/* Prevent styles.css bleed into mega-menu */
.site-nav .mega-menu a {
  padding: 6px 0 !important; border-radius: 0 !important;
  background: none !important; font-weight: 500 !important;
  font-size: 13px !important; letter-spacing: normal !important;
  color: #fff !important;
}
.site-nav .mega-menu a:hover { color: #C4BEFF !important; background: none !important; }
.site-nav .mega-menu .mega-col__label,
.site-nav .mega-menu .mega-col__label:hover { padding: 0 0 10px 0 !important; font-size: 9.5px !important; }
.site-nav .mega-menu .mega-plat-item { padding: 9px 8px !important; border-radius: 9px !important; background: none !important; }
.site-nav .mega-menu .mega-plat-item:hover { background: rgba(162,120,179,0.12) !important; }
.site-nav .mega-menu .mega-plat-item__name { padding: 0 !important; background: none !important; font-size: 13.5px !important; font-weight: 700 !important; color: #fff !important; }
.site-nav .mega-menu .mega-plat-item__sub  { padding: 0 !important; background: none !important; font-size: 11px !important; font-weight: 400 !important; color: #fff !important; }

/* Services group label — spans product columns in row 1 */
.mega-services-label {
  grid-column: 2 / 6 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding: 14px 18px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 4px !important;
}
.mega-services-label svg { opacity: 0.45 !important; flex-shrink: 0 !important; }

/* Push service columns to row 2 (below the label) */
.mega-col:not(.mega-col--platform) {
  grid-row: 2 !important;
  padding-top: 14px !important;
}

/* Platform column spans both rows */
.mega-col--platform { grid-row: 1 / 3 !important; }

/* Mobile nav toggle — white bars on dark header */
/* ── Mobile menu toggle — bespoke "layered stack" icon ───────
   Three asymmetric bars (24px / 14px right-aligned / 20px)
   suggesting OMNI's "every layer of your technology" theme,
   painted with a purple→indigo gradient. On open (aria-expanded
   = true) the top and bottom bars rotate to form an X while the
   middle bar fades. Hover micro-interaction: the middle bar
   extends to full width and the whole icon shifts subtly. */
.nav-toggle {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  border-radius: 10px !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
}
.nav-toggle:hover {
  background: rgba(196, 181, 253, 0.08) !important;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--eb-accent, #C4B5FD) !important;
  outline-offset: 2px !important;
}
.nav-toggle span {
  display: block !important;
  height: 2px !important;
  background: linear-gradient(90deg, #C4B5FD 0%, #818CF8 100%) !important;
  background-color: transparent !important;
  border-radius: 999px !important;
  margin: 2px 0 !important;
  transition:
    width 0.28s cubic-bezier(.2, .8, .2, 1),
    transform 0.32s cubic-bezier(.2, .8, .2, 1),
    opacity 0.18s ease,
    margin 0.28s cubic-bezier(.2, .8, .2, 1) !important;
  transform-origin: center !important;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.35) !important;
}
/* Asymmetric layered widths — top wide, middle narrow (right-
   aligned so the right edge stays aligned with the others),
   bottom medium. Reads as "stacked layers" not "three identical
   lines". */
.nav-toggle span:nth-child(1) { width: 24px !important; align-self: flex-end !important; }
.nav-toggle span:nth-child(2) { width: 14px !important; align-self: flex-end !important; }
.nav-toggle span:nth-child(3) { width: 20px !important; align-self: flex-end !important; }
/* Hover — middle bar extends to full width, suggesting "pull
   to open". Whole icon nudges slightly. */
.nav-toggle:hover span:nth-child(2) {
  width: 24px !important;
}
.nav-toggle:hover span:nth-child(3) {
  width: 24px !important;
}

/* Open state — morphs into an X. Top bar rotates +45° down to
   center, bottom rotates -45° up to center, middle fades. Uses
   aria-expanded so it works automatically with the existing
   main.js toggle handler (no extra class needed). */
.nav-toggle[aria-expanded="true"] span {
  margin: 0 !important;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  width: 22px !important;
  transform: translateY(4px) rotate(45deg) !important;
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  width: 22px !important;
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  width: 22px !important;
  transform: translateY(-4px) rotate(-45deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle,
  .nav-toggle span { transition: none !important; }
}

@media (max-width: 900px) {
  .mega-menu { display: none !important; }
  .site-nav .nav-item > a::after { display: none !important; }
}

/* ─── PAGE BODY — LIGHT ───────────────────────────────────── */
body {
  background-color: #F5F5F7 !important;
  color: #282827 !important;
}

/* ─── SP CONTAINER ───────────────────────────────────────── */
.sp-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ─── HERO ───────────────────────────────────────────────── */
.sp-hero {
  background: #fff !important;
  padding: 96px 0 80px !important;
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.sp-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sp-hero__eyebrow {
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: #584E9D !important; margin-bottom: 16px !important;
}
.sp-hero__title {
  font-size: clamp(32px,4.5vw,54px) !important;
  font-weight: 800 !important; color: #1a1a2e !important;
  letter-spacing: -0.03em !important; line-height: 1.08 !important;
  margin-bottom: 18px !important;
}
.sp-hero__title em { font-style: normal !important; color: #584E9D !important; }
.sp-hero__sub {
  font-size: 16px !important; color: rgba(40,40,39,0.75) !important;
  line-height: 1.65 !important; margin-bottom: 28px !important;
  max-width: 500px !important;
}
.sp-hero__tags { display: flex; justify-content: center !important; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.sp-hero__tag {
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: #584E9D !important; background: rgba(88,78,157,0.07) !important;
  border: 1px solid rgba(88,78,157,0.2) !important;
  border-radius: 4px !important; padding: 4px 10px !important;
}
.sp-hero__status {
  display: flex !important; align-items: center !important;
  gap: 16px !important; flex-wrap: wrap !important;
  background: #F5F5F7 !important; border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 8px !important; padding: 12px 18px !important;
  margin-bottom: 28px !important;
  box-shadow: none !important;
}
.sp-hero__status-dot {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #22c55e !important; box-shadow: 0 0 8px rgba(34,197,94,0.45) !important;
  animation: sp-pulse 2s infinite !important; flex-shrink: 0 !important;
}
@keyframes sp-pulse {
  0%,100%{ box-shadow: 0 0 6px rgba(34,197,94,0.45); }
  50%{ box-shadow: 0 0 12px rgba(34,197,94,0.7); }
}
.sp-hero__status-text { font-size: 11px !important; color: rgba(40,40,39,0.78) !important; font-weight: 500 !important; }
.sp-hero__status-text strong { color: #16a34a !important; }
.sp-hero__status-sep { width: 1px !important; height: 16px !important; background: rgba(0,0,0,0.1) !important; }
.sp-hero__status-metric { font-size: 11px !important; color: rgba(40,40,39,0.68) !important; }
.sp-hero__status-metric span { color: #584E9D !important; font-weight: 600 !important; }
.sp-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center !important; width: 100% !important; }
.sp-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; }

/* Ghost button in hero — dark context */
.sp-hero .btn--ghost,
.sp-hero .btn--ghost-light {
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.04) !important;
}
.sp-hero .btn--ghost:hover,
.sp-hero .btn--ghost-light:hover {
  color: #C4BEFF !important;
  border-color: rgba(162,120,179,0.45) !important;
  background: rgba(88,78,157,0.10) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* Hero ambient — lighter */
.sp-hero-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-hero-ambient__grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(88,78,157,0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 70% 30%, rgba(0,0,0,0.5) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, rgba(0,0,0,0.5) 0%, transparent 70%);
}
.sp-hero-ambient__glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(88,78,157,0.08) 0%, transparent 65%);
  top: -160px; right: -120px;
}
.sp-hero-ambient__center {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(162,120,179,0.07) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.sp-fade-to-metrics { display: none !important; }

/* ─── OPS STRIP ──────────────────────────────────────────── */
.sp-ops { background: #fff !important; }
.sp-ops__inner { display: grid; grid-template-columns: repeat(4,1fr); }
.sp-ops__cell { padding: 28px 32px !important; border-right: 1px solid rgba(0,0,0,0.06) !important; background: transparent !important; }
.sp-ops__cell:last-child { border-right: none !important; }
.sp-ops__label { font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(40,40,39,0.62) !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.sp-ops__label-dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 4px rgba(34,197,94,0.5) !important; animation: sp-pulse 2.5s infinite !important; }
.sp-ops__val { font-size: 30px !important; font-weight: 800 !important; color: #1a1a2e !important; letter-spacing: -0.04em !important; line-height: 1 !important; margin-bottom: 4px !important; }
.sp-ops__val span { color: #584E9D !important; font-size: 20px !important; font-weight: 700 !important; }
.sp-ops__sub { font-size: 11px !important; color: rgba(40,40,39,0.62) !important; }

/* ─── SECTION LABELS ─────────────────────────────────────── */
.sp-section-label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #584E9D !important; margin-bottom: 12px !important; }
.sp-section-title { font-size: clamp(24px,3vw,36px) !important; font-weight: 800 !important; color: #1a1a2e !important; letter-spacing: -0.03em !important; margin-bottom: 8px !important; }
.sp-section-sub { font-size: 15px !important; color: rgba(40,40,39,0.70) !important; max-width: 480px; line-height: 1.6 !important; }

/* ─── PRODUCT GRID ───────────────────────────────────────── */
.sp-prods { padding: 96px 0 !important; background: #F5F5F7 !important; }
.sp-prods__grid { display: grid !important; gap: 1px !important; margin-top: 48px !important; background: rgba(0,0,0,0.07) !important; border-radius: 14px !important; overflow: hidden !important; border: 1px solid rgba(0,0,0,0.07) !important; }
.sp-prod { background: #fff !important; padding: 36px 32px !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; transition: background 0.2s, box-shadow 0.2s !important; }
.sp-prod:hover { background: #faf9ff !important; box-shadow: inset 0 0 0 1px rgba(88,78,157,0.12) !important; }
.sp-prod::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(circle at 20% 20%, rgba(88,78,157,0.05) 0%, transparent 60%) !important; opacity: 0 !important; transition: opacity 0.3s !important; }
.sp-prod:hover::before { opacity: 1 !important; }
.sp-prod__icon { width: 40px !important; height: 40px !important; background: rgba(88,78,157,0.08) !important; border: 1px solid rgba(88,78,157,0.18) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 18px !important; color: #584E9D !important; transition: background 0.2s, box-shadow 0.2s !important; }
.sp-prod:hover .sp-prod__icon { background: rgba(88,78,157,0.14) !important; box-shadow: 0 0 14px rgba(88,78,157,0.2) !important; }
.sp-prod__icon svg { width: 20px !important; height: 20px !important; }
.sp-prod__title { font-size: 16px !important; font-weight: 700 !important; color: #1a1a2e !important; margin-bottom: 8px !important; letter-spacing: -0.01em !important; }
.sp-prod__body { font-size: 13.5px !important; color: rgba(40,40,39,0.72) !important; line-height: 1.65 !important; flex: 1 !important; }
.sp-prod__link { margin-top: 18px !important; font-size: 12px !important; font-weight: 700 !important; color: #584E9D !important; display: flex !important; align-items: center !important; gap: 6px !important; transition: color 0.2s, gap 0.2s !important; }
.sp-prod:hover .sp-prod__link { color: #584E9D !important; gap: 10px !important; }

/* ─── FEATURES GRID ──────────────────────────────────────── */
.sp-features { padding: 96px 0 !important; background: #fff !important; }
.sp-feat__grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; margin-top: 48px !important; }
.sp-feat { background: #F5F5F7 !important; border: 1px solid rgba(0,0,0,0.07) !important; border-radius: 12px !important; padding: 32px !important; position: relative !important; overflow: hidden !important; transition: box-shadow 0.2s, border-color 0.2s !important; }
.sp-feat:hover { box-shadow: 0 4px 24px rgba(88,78,157,0.09) !important; border-color: rgba(88,78,157,0.22) !important; }
.sp-feat::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(88,78,157,0.4), transparent) !important; }
.sp-feat__icon { width: 36px !important; height: 36px !important; background: rgba(88,78,157,0.08) !important; border: 1px solid rgba(88,78,157,0.18) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 16px !important; color: #584E9D !important; }
.sp-feat__icon svg { width: 17px !important; height: 17px !important; }
.sp-feat__title { font-size: 15px !important; font-weight: 700 !important; color: #1a1a2e !important; margin-bottom: 8px !important; }
.sp-feat__body { font-size: 13.5px !important; color: rgba(40,40,39,0.72) !important; line-height: 1.6 !important; }

/* ─── WHY SECTION ────────────────────────────────────────── */
.sp-why { padding: 96px 0 !important; background: #F5F5F7 !important; }
.sp-why__grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; margin-top: 48px !important; }
.sp-why__block { padding: 36px !important; background: #F5F5F7 !important; border: 1px solid rgba(0,0,0,0.07) !important; border-radius: 12px !important; position: relative !important; overflow: hidden !important; transition: box-shadow 0.2s, border-color 0.2s !important; }
.sp-why__block:hover { box-shadow: 0 4px 24px rgba(88,78,157,0.09) !important; border-color: rgba(88,78,157,0.22) !important; }
.sp-why__block::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(88,78,157,0.5), transparent) !important; }
.sp-why__metric { font-size: 38px !important; font-weight: 800 !important; color: #1a1a2e !important; letter-spacing: -0.04em !important; line-height: 1 !important; margin-bottom: 8px !important; }
.sp-why__metric span { color: #584E9D !important; }
.sp-why__title { font-size: 14px !important; font-weight: 700 !important; color: rgba(40,40,39,0.88) !important; margin-bottom: 6px !important; }
.sp-why__text { font-size: 13.5px !important; color: rgba(40,40,39,0.70) !important; line-height: 1.6 !important; }

/* ─── CTA SECTION ────────────────────────────────────────── */
.sp-cta { padding: 120px 0 !important; background: #fff !important; position: relative !important; overflow: hidden !important; text-align: center !important; }
.sp-cta__grid-bg { position: absolute !important; inset: 0 !important; pointer-events: none !important; background-image: radial-gradient(circle, rgba(88,78,157,0.07) 1px, transparent 1px) !important; background-size: 36px 36px !important; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%) !important; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%) !important; }
.sp-cta__glow { position: absolute !important; inset: 0 !important; pointer-events: none !important; background: radial-gradient(ellipse at center, rgba(88,78,157,0.07) 0%, transparent 65%) !important; }
.sp-cta__inner { position: relative !important; z-index: 2 !important; max-width: 680px !important; margin: 0 auto !important; }
.sp-cta__label { font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #584E9D !important; margin-bottom: 24px !important; font-weight: 600 !important; display: block !important; }
.sp-cta__title { font-size: clamp(26px,4vw,44px) !important; font-weight: 800 !important; color: #1a1a2e !important; letter-spacing: -0.035em !important; line-height: 1.1 !important; margin-bottom: 18px !important; }
.sp-cta__title em { font-style: normal !important; color: #584E9D !important; }
.sp-cta__sub { font-size: 16px !important; color: rgba(40,40,39,0.72) !important; margin-bottom: 40px !important; line-height: 1.6 !important; }
.sp-cta__btn { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: linear-gradient(135deg, #584E9D, #7B6FD4) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; border: none !important; border-radius: 8px !important; padding: 15px 36px !important; cursor: pointer !important; text-decoration: none !important; box-shadow: 0 4px 20px rgba(88,78,157,0.35) !important; transition: box-shadow 0.25s, transform 0.2s !important; }
.sp-cta__btn:hover { box-shadow: 0 8px 32px rgba(88,78,157,0.45) !important; transform: translateY(-2px) !important; }

/* ─── BREADCRUMB ─────────────────────────────────────────── */
.sp-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 28px !important; }
.sp-breadcrumb__item { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; color: rgba(40,40,39,0.62) !important; text-decoration: none !important; transition: color 0.15s !important; }
.sp-breadcrumb__item:hover { color: #584E9D !important; }
.sp-breadcrumb__sep { font-size: 11px !important; color: rgba(40,40,39,0.2) !important; }
.sp-breadcrumb__item--current { color: rgba(40,40,39,0.80) !important; pointer-events: none !important; }

/* ─── PRIMARY BUTTON GLOW ────────────────────────────────── */
.btn--primary { transition: box-shadow 0.25s ease, transform 0.2s ease !important; }
.btn--primary:hover { box-shadow: 0 4px 20px rgba(88,78,157,0.35) !important; transform: translateY(-2px) !important; }

/* ─── CANVAS ──────────────────────────────────────────────── */
#sp-network-canvas { width: 100%; height: 100%; display: block; }

/* ─── MODULES/BLOCKS (networking compete section passthrough) */
.sp-compete,
.sp-modules { background: #F5F5F7 !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .mega-menu { display: none !important; }
  .site-nav .nav-item > a::after { display: none !important; }
  .sp-hero__grid { grid-template-columns: 1fr !important; }
  .sp-hero__visual { display: none !important; }
  .sp-ops__inner { grid-template-columns: repeat(2,1fr) !important; }
  .sp-prods__grid { grid-template-columns: 1fr !important; }
  .sp-why__grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sp-feat__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .sp-ops__inner { grid-template-columns: 1fr !important; }
  .sp-container { padding: 0 20px !important; }
}

/* ─── USE CASES MEGA-MENU ─────────────────────────────────── */

/* Anchor Use Cases dropdown to its own nav-item (compact 2-panel layout) */
.site-nav #nav-usecases-item { position: relative !important; }

/* Desktop: compact 2-panel dropdown anchored to nav-item */
.mega-menu--uc {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  background: rgba(11,11,26,0.97) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  padding: 18px 22px !important;
  min-width: 840px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  z-index: 1001 !important;
}
.mega-menu--uc::before {
  content: '' !important;
  position: absolute !important;
  top: -30px !important; left: 0 !important; right: 0 !important;
  height: 30px !important;
}
.mega-menu--uc.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* 4-column grid (Industries moved to its own header item) */
.uc-cols {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

/* Column */
.uc-col {
  padding: 0 20px !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
.uc-col:first-child { padding-left: 0 !important; }
.uc-col:last-child { border-right: none !important; }

/* Column heading — inherits mega-col__label pattern */
.uc-col__head {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #A278B3 !important;
  padding-bottom: 7px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(162,120,179,0.20) !important;
  white-space: nowrap !important;
}

/* Italic sub-label */
.uc-col__sub {
  display: block !important;
  font-style: italic !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.02em !important;
}

/* Allow link wrapping and tighten size for dense content */
.mega-menu--uc .mega-link {
  white-space: normal !important;
  font-size: 12px !important;
  padding: 4px 0 !important;
  line-height: 1.4 !important;
}
.mega-menu--uc .mega-link:hover { padding-left: 3px !important; }

/* Mobile accordion — hidden on desktop */
.uc-acc { display: none !important; }

/* ── Mobile breakpoint ── */
@media (max-width: 900px) {

  /* Hide full-width panel on mobile */
  .mega-menu--uc { display: none !important; }

  /* Show accordion only when parent toggle is active */
  #nav-usecases-item.uc-mobile-open .uc-acc { display: block !important; width: 100% !important; margin-top: 2px !important; }

  /* Nav-item expands vertically on mobile */
  #nav-usecases-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
  }
  #nav-usecases-item > a { width: 100% !important; box-sizing: border-box !important; }

  /* Accordion section separator */
  .uc-acc__section { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }

  /* Trigger button */
  .uc-acc__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    text-align: left !important;
    gap: 8px !important;
  }
  .uc-acc__trigger:hover { color: #fff !important; }

  /* Chevron animation */
  .uc-acc__chevron {
    flex-shrink: 0 !important;
    color: #fff !important;
    transition: transform 0.2s ease !important;
  }
  .uc-acc__trigger[aria-expanded="true"] .uc-acc__chevron {
    transform: rotate(180deg) !important;
  }

  /* Collapsible panel */
  .uc-acc__panel {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.28s ease, padding-bottom 0.28s ease !important;
    padding: 0 12px !important;
  }
  .uc-acc__panel.is-open {
    max-height: 700px !important;
    padding-bottom: 10px !important;
  }

  /* Italic sub-label in accordion */
  .uc-acc__sub {
    display: block !important;
    font-style: italic !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    padding-top: 4px !important;
  }

  /* Links in accordion */
  .uc-acc__link {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    transition: color 0.15s !important;
  }
  .uc-acc__link:last-child { border-bottom: none !important; }
  .uc-acc__link:hover { color: #C4BEFF !important; }
}

/* ═══════════════════════════════════════════════════════════
   ENTERPRISE OPS PANEL — replaces orbital SVG visuals
   A floating live-data widget, Datadog/Linear inspired.
   ═══════════════════════════════════════════════════════════ */
.ops-panel {
  width: 360px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(40,40,39,0.1), 0 1px 0 rgba(255,255,255,0.8) inset;
  overflow: hidden;
  font-family: 'Mulish', sans-serif;
  position: relative;
}

/* Top pinstripe */
.ops-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #584E9D 0%, #A278B3 50%, transparent 100%);
}

/* Header bar */
.ops-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #FAFAFA;
}
.ops-panel__dots {
  display: flex; gap: 5px;
}
.ops-panel__dot {
  width: 9px; height: 9px; border-radius: 50%;
}
.ops-panel__dot:nth-child(1){ background: #FF5F57; }
.ops-panel__dot:nth-child(2){ background: #FEBC2E; }
.ops-panel__dot:nth-child(3){ background: #28C840; }

.ops-panel__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(40,40,39,0.68);
}
.ops-panel__live {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #16a34a;
}
.ops-panel__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.7);
  animation: sp-pulse 1.8s infinite;
}

/* Sparkline chart */
.ops-panel__chart {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ops-panel__chart-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(40,40,39,0.58);
  margin-bottom: 8px;
}
.ops-panel__bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 44px;
}
.ops-panel__bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: rgba(88,78,157,0.15);
  transition: height 0.8s cubic-bezier(0.34,1.56,0.64,1);
  min-height: 4px;
  position: relative;
  overflow: hidden;
}
.ops-panel__bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: rgba(255,255,255,0.3);
  border-radius: 3px 3px 0 0;
}
.ops-panel__bar--hi {
  background: linear-gradient(to top, #584E9D, #A278B3);
}
.ops-panel__bar--alert {
  background: linear-gradient(to top, #f59e0b, #fbbf24);
}
.ops-panel__chart-axis {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-size: 8.5px; color: rgba(40,40,39,0.48); letter-spacing: 0.05em;
}

/* Metric rows */
.ops-panel__metrics {
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ops-panel__metric {
  display: flex; align-items: center;
  padding: 9px 16px; gap: 10px;
  transition: background 0.15s;
}
.ops-panel__metric:hover { background: rgba(88,78,157,0.03); }
.ops-panel__metric-icon {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(88,78,157,0.08); color: #584E9D; flex-shrink: 0;
}
.ops-panel__metric-icon svg { width: 13px; height: 13px; }
.ops-panel__metric-label {
  flex: 1; font-size: 12px; font-weight: 500; color: rgba(40,40,39,0.80);
}
.ops-panel__metric-val {
  font-size: 13px; font-weight: 800; color: #1a1a2e; letter-spacing: -0.02em;
}
.ops-panel__metric-bar-wrap {
  width: 64px; height: 4px; background: rgba(0,0,0,0.07);
  border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.ops-panel__metric-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #584E9D, #A278B3);
  transition: width 1.2s cubic-bezier(0.34,1.2,0.64,1);
}
.ops-panel__metric-bar-fill--ok { background: linear-gradient(90deg,#16a34a,#22c55e); }
.ops-panel__metric-bar-fill--warn { background: linear-gradient(90deg,#d97706,#f59e0b); }

/* Activity feed */
.ops-panel__feed {
  padding: 10px 16px 14px;
}
.ops-panel__feed-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(40,40,39,0.58); margin-bottom: 8px;
}
.ops-panel__feed-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ops-panel__feed-item:last-child { border-bottom: none; }
.ops-panel__feed-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ops-panel__feed-dot--ok   { background: #22c55e; }
.ops-panel__feed-dot--info { background: #584E9D; }
.ops-panel__feed-dot--warn { background: #f59e0b; }
.ops-panel__feed-text {
  flex: 1; font-size: 11px; color: rgba(40,40,39,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ops-panel__feed-time {
  font-size: 9.5px; color: rgba(40,40,39,0.52); flex-shrink: 0; font-weight: 500;
}

/* Animate bars on load */
@keyframes bar-grow {
  from { height: 4px !important; }
  to   { height: var(--bar-h); }
}
.ops-panel__bar { animation: bar-grow 0.9s cubic-bezier(0.34,1.2,0.64,1) both; }
.ops-panel__bar:nth-child(1)  { --bar-h:60%; animation-delay:.05s }
.ops-panel__bar:nth-child(2)  { --bar-h:80%; animation-delay:.10s }
.ops-panel__bar:nth-child(3)  { --bar-h:55%; animation-delay:.15s }
.ops-panel__bar:nth-child(4)  { --bar-h:90%; animation-delay:.20s }
.ops-panel__bar:nth-child(5)  { --bar-h:70%; animation-delay:.25s }
.ops-panel__bar:nth-child(6)  { --bar-h:95%; animation-delay:.30s }
.ops-panel__bar:nth-child(7)  { --bar-h:65%; animation-delay:.35s }
.ops-panel__bar:nth-child(8)  { --bar-h:85%; animation-delay:.40s }
.ops-panel__bar:nth-child(9)  { --bar-h:75%; animation-delay:.45s }
.ops-panel__bar:nth-child(10) { --bar-h:88%; animation-delay:.50s }
.ops-panel__bar:nth-child(11) { --bar-h:92%; animation-delay:.55s }
.ops-panel__bar:nth-child(12) { --bar-h:82%; animation-delay:.60s }


/* --- COMPETITIVE BLOCK LIGHT THEME --- */
.sp-compete__card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 12px 40px rgba(40,40,39,0.06) !important;
}
.sp-compete__flag {
  color: #584E9D !important;
  background: rgba(88,78,157,0.06) !important;
  border-color: rgba(88,78,157,0.15) !important;
}
.sp-compete__kicker { color: #A278B3 !important; }
.sp-compete__headline { color: #282827 !important; }
.sp-compete__headline em { color: #584E9D !important; }
.sp-compete__sub { color: rgba(40,40,39,0.65) !important; }
.sp-compete__sub strong { color: #282827 !important; }
.sp-compete__quote { color: rgba(40,40,39,0.6) !important; border-left-color: #A278B3 !important; }
.sp-compete__quote em { color: #584E9D !important; }
.sp-compete__stat {
  background: #F5F5F7 !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
.sp-compete__stat-val { color: #282827 !important; }
.sp-compete__stat-label { color: rgba(40,40,39,0.6) !important; }
.sp-compete__stat-sub { color: rgba(40,40,39,0.45) !important; }


/* --- GENERAL TITLES LIGHT THEME --- */
.sp-section-title { color: #282827 !important; }
.sp-section-sub { color: rgba(40,40,39,0.6) !important; }

/* --- PRODUCTS GRID LIGHT THEME --- */
.sp-prods__grid {
  background: rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  gap: 1px !important;
}
.sp-prod { background: #ffffff !important; }
.sp-prod:hover { background: #F9F9FB !important; }
.sp-prod__title { color: #282827 !important; }
.sp-prod__body { color: rgba(40,40,39,0.65) !important; }
.sp-prod__icon {
  background: rgba(88,78,157,0.06) !important;
  border: 1px solid rgba(88,78,157,0.15) !important;
  color: #584E9D !important;
}
.sp-prod:hover .sp-prod__icon {
  background: rgba(88,78,157,0.1) !important;
  box-shadow: 0 4px 12px rgba(88,78,157,0.15) !important;
}
.sp-prod__link { color: #584E9D !important; }
.sp-prod:hover .sp-prod__link { color: #A278B3 !important; }

/* --- OPS STRIP LIGHT THEME --- */
.sp-ops { background: #F9F9FB !important; }
.sp-ops__cell { border-right: 1px solid rgba(0,0,0,0.06) !important; }
.sp-ops__label { color: rgba(40,40,39,0.5) !important; }
.sp-ops__val { color: #282827 !important; }
.sp-ops__val span { color: #584E9D !important; }
.sp-ops__sub { color: rgba(40,40,39,0.45) !important; }

/* --- WHY SECTION LIGHT THEME --- */
.sp-why__block {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 20px rgba(40,40,39,0.03) !important;
}
.sp-why__metric { color: #282827 !important; }
.sp-why__metric span { color: #584E9D !important; }
.sp-why__title { color: #282827 !important; }
.sp-why__text { color: rgba(40,40,39,0.6) !important; }

/* --- CTA SECTION LIGHT THEME --- */
.sp-cta__title { color: #282827 !important; }
.sp-cta__title em { color: #584E9D !important; }
.sp-cta__sub { color: rgba(40,40,39,0.65) !important; }


/* --- DYNAMIC GRID BALANCING (NO BLANKS) --- */
.sp-prods__grid {
  grid-template-columns: repeat(6, 1fr) !important;
}

/* Default to 3 cards per row (spans 2 out of 6 columns) */
.sp-prod {
  grid-column: span 2 !important;
}

/* If exactly 4 cards, make it a perfect 2x2 grid (span 3 out of 6) */
.sp-prod:nth-last-child(4):first-child,
.sp-prod:nth-last-child(4):first-child ~ .sp-prod {
  grid-column: span 3 !important;
}

/* If exactly 5 cards, first 3 do default (span 2), last 2 span 3 to fill bottom row perfectly */
.sp-prod:nth-last-child(2):nth-child(4),
.sp-prod:nth-last-child(1):nth-child(5) {
  grid-column: span 3 !important;
}

/* If exactly 2 cards, make a 1x2 grid */
.sp-prod:nth-last-child(2):first-child,
.sp-prod:nth-last-child(2):first-child ~ .sp-prod {
  grid-column: span 3 !important;
}

/* --- OVERRIDE RESPONSIVE MODES --- */
@media (max-width: 900px) {
  .sp-prods__grid {
    grid-template-columns: 1fr !important;
  }
  .sp-prod {
    grid-column: 1 / -1 !important;
  }
}

/* Interactive Router Chips Upgrade */
a.mod-chip-link {
  text-decoration: none !important;
  color: rgba(40,40,39,0.7) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a.mod-chip-link:hover {
  background-color: #584E9D !important;
  color: #ffffff !important;
  border-color: #584E9D !important;
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(88, 78, 157, 0.25) !important;
}

/* Dark page scrollbar — override light-theme border color */
::-webkit-scrollbar-thumb {
  border-color: #08080f !important;
}
::-webkit-scrollbar-thumb:hover {
  border-color: #08080f !important;
}

/* ─── INDUSTRIES MEGA-MENU (top-level nav item, 2-panel layout) ─── */
/* Anchor the dropdown to its own nav-item (overrides the global
   .site-nav .nav-item { position: static } rule used by the Services
   mega-menu, which intentionally pins from the header container). */
.site-nav #nav-industries-item { position: relative !important; }

.mega-menu--ind {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: rgba(11,11,26,0.97) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  padding: 18px 22px !important;
  min-width: 720px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  z-index: 1000 !important;
}
.mega-menu--ind::before {
  content: '' !important;
  position: absolute !important;
  top: -30px !important; left: 0 !important; right: 0 !important;
  height: 30px !important;
}
.site-nav .nav-item#nav-industries-item.is-open .mega-menu--ind,
.site-nav .nav-item#nav-industries-item:hover .mega-menu--ind {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.mega-menu--ind .uc-col__head { display: block !important; }

/* Two-panel layout: industries list (left) + sub-pages (right) */
.mega-menu--ind__panes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 24px !important;
}
.mega-menu--ind__list { padding-right: 4px !important; }
.mega-menu--ind__list .ind-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 7px 8px 7px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: color 0.15s, padding-left 0.15s, background 0.15s !important;
  cursor: pointer !important;
}
.mega-menu--ind__list .ind-link:last-child { border-bottom: none !important; }
.mega-menu--ind__list .ind-link::after {
  content: '' !important;
  width: 5px !important; height: 5px !important;
  border-right: 1.5px solid rgba(162,120,179,0.3) !important;
  border-top: 1.5px solid rgba(162,120,179,0.3) !important;
  transform: rotate(45deg) !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
  transition: border-color 0.15s, transform 0.15s !important;
  opacity: 0 !important;
}
.mega-menu--ind__list .ind-link.has-subs::after { opacity: 1 !important; }
.mega-menu--ind__list .ind-link:hover,
.mega-menu--ind__list .ind-link.is-active {
  color: #C4BEFF !important;
  padding-left: 4px !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  text-shadow: 0 0 12px rgba(162,120,179,0.55), 0 0 24px rgba(162,120,179,0.25) !important;
}
.mega-menu--ind__list .ind-link.is-active::after {
  border-color: #C4BEFF !important;
}

/* Cancel global .site-nav a:hover background bleed inside Industries dropdown */
.site-nav .mega-menu--ind a,
.site-nav .mega-menu--ind a:hover {
  background: none !important;
  background-color: transparent !important;
}
.ind-subs .mega-link {
  transition: color 0.15s ease, text-shadow 0.2s ease, padding-left 0.15s ease !important;
}
.ind-subs .mega-link:hover {
  color: #C4BEFF !important;
  padding-left: 4px !important;
  text-shadow: 0 0 12px rgba(162,120,179,0.55), 0 0 24px rgba(162,120,179,0.25) !important;
}

.mega-menu--ind__sub-pages {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  padding-left: 24px !important;
  min-height: 240px !important;
}
.ind-subs { display: none !important; }
.ind-subs.is-active { display: block !important; }
.ind-subs .mega-link {
  white-space: normal !important;
  font-size: 12.5px !important;
  padding: 6px 0 !important;
  display: block !important;
}
.ind-subs__placeholder {
  font-size: 12.5px !important;
  color: #fff !important;
  font-style: italic !important;
  padding: 12px 0 !important;
  line-height: 1.6 !important;
}

/* Mobile inline list for Industries (with sub-page accordions) */
.ind-acc { display: none !important; }
@media (max-width: 900px) {
  .mega-menu--ind { display: none !important; }
  #nav-industries-item.ind-mobile-open .ind-acc { display: block !important; width: 100% !important; margin-top: 2px !important; }
  #nav-industries-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
  }
  #nav-industries-item > a { width: 100% !important; box-sizing: border-box !important; }
  .ind-acc .uc-acc__sub { display: block !important; padding: 6px 12px 4px !important; }
  .ind-acc .uc-acc__link {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    transition: color 0.15s !important;
  }
  .ind-acc .uc-acc__link:last-child { border-bottom: none !important; }
  .ind-acc .uc-acc__link:hover { color: #C4BEFF !important; }
  .ind-acc .ind-acc__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: #fff !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    text-align: left !important;
  }
  .ind-acc .ind-acc__trigger[aria-expanded="true"] .uc-acc__chevron { transform: rotate(180deg) !important; }
  .ind-acc .ind-acc__panel {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.28s ease !important;
    padding-left: 16px !important;
  }
  .ind-acc .ind-acc__panel.is-open { max-height: 500px !important; padding-bottom: 6px !important; }
  .ind-acc .ind-acc__panel .uc-acc__link { padding: 5px 12px !important; font-size: 12px !important; color: #fff !important; }
}

/* ─── USE CASES — 2-panel hover-reveal (mirrors Industries pattern) ─── */
.mega-menu--uc__panes {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 0 24px !important;
}
.mega-menu--uc__list { padding-right: 4px !important; }
.mega-menu--uc__list .uc-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 8px 8px 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: color 0.15s, padding-left 0.15s, text-shadow 0.2s !important;
  cursor: pointer !important;
}
.mega-menu--uc__list .uc-link:last-child { border-bottom: none !important; }
.mega-menu--uc__list .uc-link::after {
  content: '' !important;
  width: 5px !important; height: 5px !important;
  border-right: 1.5px solid rgba(162,120,179,0.3) !important;
  border-top: 1.5px solid rgba(162,120,179,0.3) !important;
  transform: rotate(45deg) !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
  transition: border-color 0.15s !important;
}
.mega-menu--uc__list .uc-link:hover,
.mega-menu--uc__list .uc-link.is-active {
  color: #C4BEFF !important;
  padding-left: 4px !important;
  background: none !important;
  background-color: transparent !important;
  text-shadow: 0 0 12px rgba(162,120,179,0.55), 0 0 24px rgba(162,120,179,0.25) !important;
}
.mega-menu--uc__list .uc-link.is-active::after { border-color: #C4BEFF !important; }

.mega-menu--uc__sub-pages {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  padding-left: 24px !important;
  min-height: 320px !important;
}
.uc-subs { display: none !important; }
.uc-subs.is-active { display: block !important; }
.uc-subs__list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 18px !important;
  margin-top: 4px !important;
}
.uc-subs .mega-link {
  white-space: normal !important;
  font-size: 12.5px !important;
  padding: 5px 0 !important;
  display: block !important;
  line-height: 1.4 !important;
  transition: color 0.15s ease, text-shadow 0.2s ease, padding-left 0.15s ease !important;
}

/* Cancel global .site-nav a:hover background bleed inside Use Cases dropdown */
.site-nav .mega-menu--uc a,
.site-nav .mega-menu--uc a:hover {
  background: none !important;
  background-color: transparent !important;
}
.uc-subs .mega-link:hover {
  color: #C4BEFF !important;
  padding-left: 4px !important;
  text-shadow: 0 0 12px rgba(162,120,179,0.55), 0 0 24px rgba(162,120,179,0.25) !important;
}

/* Hero breadcrumb path removed across all industry pages */
.sp-breadcrumb { display: none !important; }

/* ─── Who It's For — elevated editorial card (industry pages) ─────── */

/* Section heading sits INSIDE the card now — keep its exterior styling
   neutral so the card itself becomes the visual anchor. */
.sp-why__card .sp-section-label {
  display: none !important;     /* "// Who It's For" label removed */
}
.sp-why__card .sp-section-title {
  font-size: clamp(24px, 2.4vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
}
/* When the card has consumed the title, hide the would-be empty heading
   slot in the section container (no orphan whitespace). */
.sp-why .sp-container > .sp-section-label:empty,
.sp-why .sp-container > .sp-section-title:empty { display: none; }

/* Glass card surface — wide editorial spread, lighter purple to draw attention */
.sp-why__card {
  position: relative;
  margin-top: 8px;
  padding: 56px 56px 48px;
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(180,143,212,0.16) 0%, rgba(122,89,161,0.10) 50%, rgba(196,181,253,0.14) 100%);
  border: 1px solid rgba(196,181,253,0.30);
  box-shadow:
    0 0 0 1px rgba(180,143,212,0.10),
    0 40px 100px rgba(0,0,0,0.40),
    0 0 80px rgba(122,89,161,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Multi-layer aurora — brighter, more visible */
.sp-why__card-aurora {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 5% 0%, rgba(196,181,253,0.32) 0%, transparent 55%),
    radial-gradient(50% 50% at 100% 100%, rgba(180,143,212,0.28) 0%, transparent 55%),
    radial-gradient(40% 40% at 70% 30%, rgba(212,191,245,0.18) 0%, transparent 60%);
  filter: blur(2px);
}
/* Subtle dot grid behind the main column */
.sp-why__card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: radial-gradient(circle, #c4b5fd 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: top right;
}

/* Two-column editorial layout */
.sp-why__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 56px;
  align-items: stretch;
}

/* ── Sidebar (left) ── */
.sp-why__sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 40px;
  border-right: 1px solid rgba(162,120,179,0.16);
  position: relative;
}
/* Vertical accent at the top of the sidebar */
.sp-why__sidebar::before {
  content: '';
  position: absolute;
  top: -56px;
  left: 0;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, #b48fd4, transparent);
  border-radius: 2px;
}

/* Big dynamic count number — gradient text, anchors the section */
.sp-why__count {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-why__count-num {
  font-family: 'Mulish', sans-serif;
  font-size: clamp(72px, 7vw, 112px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #c4b5fd 0%, #b48fd4 50%, #7a59a1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sp-why__count-lbl {
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}

/* ── Main column (right) ── */
.sp-why__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Vertical editorial list — one persona per line */
.sp-why__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-why__list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  font-family: 'Mulish', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.35;
  transition: color 0.25s, transform 0.25s, opacity 0.25s;
}
.sp-why__list-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #b48fd4;
  box-shadow: 0 0 10px rgba(180,143,212,0.70);
  flex-shrink: 0;
  transition: background 0.25s, box-shadow 0.25s, transform 0.30s;
}
.sp-why__list-item:hover {
  color: #fff;
  transform: translateX(4px);
}
.sp-why__list-item:hover .sp-why__list-dot {
  background: #e9def9;
  box-shadow: 0 0 16px rgba(233,222,249,0.95);
  transform: scale(1.4);
}

/* Hover sync — other items dim slightly when one is focused */
.sp-why__list:has(.sp-why__list-item:hover) .sp-why__list-item:not(:hover) {
  opacity: 0.50;
}

/* Elaboration ("Especially valuable for...") — calmer secondary line */
.sp-why__elaboration {
  font-family: 'Mulish', sans-serif !important;
  font-size: 15px !important;
  color: #fff !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(162,120,179,0.14) !important;
  position: relative;
}
.sp-why__elaboration::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, #c4b5fd, transparent);
}

/* Responsive */
@media (max-width: 920px) {
  .sp-why__layout { grid-template-columns: 1fr; gap: 36px; }
  .sp-why__sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(162,120,179,0.16);
    padding-right: 0;
    padding-bottom: 32px;
  }
  .sp-why__sidebar::before { top: -36px; }
  .sp-why__count { margin-top: 12px; padding-top: 0; }
  .sp-why__count-num { font-size: clamp(56px, 12vw, 88px); }
}
@media (max-width: 600px) {
  .sp-why__card { padding: 36px 28px 32px; border-radius: 22px; }
  .sp-why__list-item { font-size: 15px; gap: 14px; }
  .sp-why__elaboration { font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-why__list-item,
  .sp-why__list-dot { transition: none !important; }
  .sp-why__list-item:hover { transform: none !important; }
  .sp-why__list-item:hover .sp-why__list-dot { transform: none; }
  .sp-why__list:has(.sp-why__list-item:hover) .sp-why__list-item:not(:hover) {
    opacity: 1;
  }
}

/* ── Force form controls to inherit Mulish ─────────────────
   Browsers ship with their own UA font for <button>, <input>,
   <select>, <textarea> — they do NOT inherit font-family from
   their parent by default. Without this rule, any button that
   doesn't explicitly set font-family ends up in the system
   font (Arial / Helvetica / system-ui) instead of Mulish.
   Site-wide override puts everything on the Mulish stack. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* ── Mobile scroll progress bar ──────────────────────────────
   Thin gradient bar at the very top of the viewport that grows
   from 0 → 100% as the user scrolls down the page. Mirrors the
   homepage bar, but only renders on mobile (≤768px) per spec.
   Injected and updated by main.js. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  background: transparent;
  display: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #60A5FA 0%, #818CF8 50%, #C4B5FD 100%);
  box-shadow: 0 0 8px rgba(129, 140, 248, 0.5);
  will-change: width;
  transition: width 0.05s linear;
}
@media (max-width: 768px) {
  .scroll-progress { display: block; }
}

/* ============================================================
   SHARED MOBILE OVERRIDES
   ============================================================
   Cross-page mobile polish: header drawer (hamburger), footer
   chrome compression, hide status strip + decorative divider
   lines on small screens. Originally developed for the new
   homepage and extracted here so every page that uses the
   shared site-header / site-footer benefits automatically.
   ============================================================ */

/* ── Hide heavy desktop-only sections on mobile ─────────────
   Service-category pages and use-case pages share two
   components that look great on desktop but overflow or
   stack awkwardly on phones:
   • .sp-ops — 4-card metric strip ("Endpoints Managed",
     "First Contact Resolution", etc.). Designed for a 4-col
     desktop layout; on mobile each card stretches full-width
     leaving big gaps between identical small tiles.
   • .sp-compare / .sp-cmp-grid — multi-column alternatives
     table (typical 240px + 3 plan columns at min-width: 640px)
     which overflows a 375px viewport and clips the right
     columns. The "best on a laptop" experience is desktop.
   Hidden on mobile so every service / use-case page reads as
   a clean stack of: hero → features → how-it-works → why → CTA. */
@media (max-width: 900px) {
  .sp-ops,
  .sp-compare,
  .sp-compete { display: none !important; }
}

/* ── sp-hero--group mobile fallback ─────────────────────────
   Pages with the "group hero" layout (managed-it, managed-voice,
   managed-infrastructure, managed-networking) use a desktop
   `flex` stage at `min-height: 100vh` with absolutely-positioned
   panels on the right. On mobile those panels are display:none'd
   but the 100vh stage remains, leaving a giant empty hero area.
   managed-networking.html has the correct fix in-page; this block
   ports it to every page that loads solution-shared.css. */
@media (max-width: 900px) {
  .sp-hero--group { min-height: auto !important; }
  .sp-hero__stage {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .sp-hero__content-wrap {
    flex: none !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 100px 32px 0 !important;
  }
  .sp-hero__content {
    padding: 0 0 40px !important;
    max-width: 100% !important;
  }
  .sp-hero__panels { display: none !important; }
}

/* ── Solution-page mobile rhythm ───────────────────────────── */
@media (max-width: 720px) {
  /* Hero: smaller padding, tighter type stack. */
  .sp-hero { padding: 56px 0 48px !important; }
  .sp-hero__eyebrow { margin-bottom: 12px !important; }
  .sp-hero__title { margin-bottom: 14px !important; }
  .sp-hero__sub { font-size: 15px !important; margin-bottom: 22px !important; }
  .sp-hero__tags { margin-bottom: 20px !important; }
  .sp-hero__status {
    margin-bottom: 22px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  /* Section rhythm: half the desktop vertical padding. */
  .sp-prods,
  .sp-why { padding: 56px 0 !important; }
  .sp-cta { padding: 72px 0 !important; }
  .sp-feat { padding: 24px !important; }
}

@media (max-width: 480px) {
  .sp-hero { padding: 48px 0 40px !important; }
  .sp-hero__sub { font-size: 14.5px !important; }
  /* Hero CTAs go full-width on small phones for tappability. */
  .sp-hero__cta { flex-direction: column !important; align-items: stretch !important; }
  .sp-hero__cta > a,
  .sp-hero__cta > button {
    width: 100% !important;
    justify-content: center !important;
  }
  .sp-cta { padding: 56px 0 !important; }
}

/* ── Tablet & phone: collapse nav, dark drawer ───────────────
   Breakpoint dropped from 900 → 768 so the desktop nav stays
   visible on small laptops + Windows displays running 125-150%
   scaling. At 768px and below the drawer + hamburger take over;
   above that, the full desktop nav renders. */
@media (max-width: 768px) {
  /* Shorter header, logo on left + hamburger on right. */
  #site-header .container {
    height: 64px !important;
    justify-content: space-between !important;
  }
  #site-header .site-logo__mark { height: 36px !important; }

  /* Hide desktop action buttons on mobile — they crowd the
     header and the primary CTA lives below in the page. */
  #site-header .site-header__actions { display: none !important; }

  /* Show the hamburger toggle (styles.css already reveals it at
     ≤768px; we re-state with !important so it can't be lost
     to specificity battles inside this block). */
  .nav-toggle { display: flex !important; }

  /* Solid dark slide-down drawer. Three layered background
     declarations + opacity for paranoia against later sheets
     overriding. flex:none + 100vw counter the
     solution-shared.css `.site-nav { flex: 1 !important }` that
     would otherwise collapse the drawer to content width. */
  header#site-header nav#site-nav.site-nav {
    display: none !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    flex: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    /* Cap height to viewport-minus-header so the drawer never
       grows past the visible screen. Anything taller becomes
       scrollable inside the drawer itself. overscroll-behavior
       prevents the page underneath from scroll-chaining when
       the user reaches the top/bottom of the drawer. */
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 999 !important;
    isolation: isolate !important;
    flex-direction: column !important;
    background: #0c0a18 !important;
    background-color: #0c0a18 !important;
    background-image: linear-gradient(#0c0a18, #0c0a18) !important;
    opacity: 1 !important;
    border-bottom: 1px solid rgba(196, 181, 253, 0.18) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
    padding: 24px 28px 28px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }
  header#site-header nav#site-nav.site-nav.open {
    display: flex !important;
  }

  /* Drawer rows: stacked, divided, tappable. */
  #site-header .site-nav .nav-item,
  #site-header .site-nav > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  #site-header .site-nav .nav-item:last-child,
  #site-header .site-nav > a:last-child {
    border-bottom: none !important;
  }
  #site-header .site-nav .nav-item > a,
  #site-header .site-nav > a {
    display: block !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    text-decoration: none !important;
    padding: 16px 4px !important;
  }
  #site-header .site-nav .nav-item > a:hover,
  #site-header .site-nav > a:hover { color: #C4B5FD !important; }
  #site-header .site-nav .mega-link,
  #site-header .site-nav .mega-col__label {
    display: none !important;
  }

  /* Soften the .site-nav a pill on mobile. The base rule sets
     `border-radius: 99px` (full pill) + a 9%-white hover fill,
     which stretched across a full-width drawer link reads as
     an awkward "stretched lozenge". Smaller radius + softer
     active state feels natural for a list row. */
  #site-header .site-nav a {
    border-radius: 10px !important;
    padding: 16px 14px !important;
    background-color: transparent !important;
    transition: color 0.18s ease, background-color 0.18s ease !important;
  }
  #site-header .site-nav a:hover,
  #site-header .site-nav a:active,
  #site-header .site-nav a:focus-visible {
    background-color: rgba(196, 181, 253, 0.06) !important;
  }

  /* Hide ALL mega-menu variants on mobile. solution-shared.css
     only hid the base .mega-menu — the Use Cases / Industries
     panels use modifier-only class names and were leaking. */
  .mega-menu,
  .mega-menu--uc,
  .mega-menu--ind,
  #mega-menu-usecases,
  #mega-menu-industries {
    display: none !important;
  }

  /* Services mobile accordion. When the user taps "Services",
     main.js toggles `.svc-mobile-open` on the nav-item, which
     un-hides the .mega-menu and flattens it into a simple list
     of top-level destinations (Mission Control, CyberEye, plus
     the 4 service-category labels). Sub-links are kept hidden
     so the drawer doesn't explode to 25+ rows. */
  #site-header #nav-services-item.svc-mobile-open .mega-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 4px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  #site-header #nav-services-item.svc-mobile-open .mega-services-label,
  #site-header #nav-services-item.svc-mobile-open .mega-link,
  #site-header #nav-services-item.svc-mobile-open .mega-plat-item__sub {
    display: none !important;
  }
  #site-header #nav-services-item.svc-mobile-open .mega-col {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  #site-header #nav-services-item.svc-mobile-open .mega-plat-item,
  #site-header #nav-services-item.svc-mobile-open .mega-col__label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
  }
  #site-header #nav-services-item.svc-mobile-open .mega-plat-item:hover,
  #site-header #nav-services-item.svc-mobile-open .mega-col__label:hover {
    background: rgba(196, 181, 253, 0.06) !important;
    color: #C4B5FD !important;
  }
  /* Tiny icons for the category labels look fine on desktop but
     are sized for a different context — let them ride at default
     SVG size, just align them nicely. */
  #site-header #nav-services-item.svc-mobile-open .mega-col__label svg,
  #site-header #nav-services-item.svc-mobile-open .mega-plat-item__icon svg {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
  }
  #site-header #nav-services-item.svc-mobile-open .mega-plat-item__text {
    display: flex !important;
    flex-direction: column !important;
  }
  #site-header #nav-services-item.svc-mobile-open .mega-plat-item__name {
    font-size: 14.5px !important;
    color: #fff !important;
  }
}

/* ── Phone: footer compression + content diet ──────────────── */
@media (max-width: 480px) {
  /* Strip noise that doesn't belong on a phone footer. */
  .footer-brand__desc,
  .footer-brand__bullets,
  .footer-nav,
  .footer-glow-divider,
  .fstatus { display: none !important; }
  /* Decorative 1px gradient lines read as stray hairlines
     against a dark page on mobile. Kill them all. */
  .footer-contact::before,
  .footer-base::before { display: none !important; }

  /* Footer chrome compressed. */
  .site-footer { padding: 64px 0 28px !important; }
  .site-footer::before { height: 200px !important; }
  .footer-body {
    grid-template-columns: 1fr !important;
    padding-bottom: 40px !important;
    gap: 36px !important;
  }

  /* Brand: centered logo, no left-align clutter. */
  .footer-brand {
    gap: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }
  .footer-brand .site-logo { gap: 12px !important; }
  .footer-brand .site-logo__mark { height: 44px !important; }
  .footer-brand .site-logo__wordmark-img { height: 28px !important; }

  /* Contact card refined. */
  .footer-contact {
    margin: 0 !important;
    padding: 28px 24px !important;
    gap: 14px !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg,
      rgba(122, 89, 161, 0.10),
      rgba(122, 89, 161, 0.04)) !important;
    border: 1px solid rgba(196, 181, 253, 0.16) !important;
  }
  .footer-contact__eyebrow { letter-spacing: 0.20em !important; }
  .footer-contact__title { font-size: 19px !important; }
  .footer-contact__detail { justify-content: center !important; }

  /* Legal row stacked + centered. */
  .footer-base {
    padding: 24px 0 28px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: center !important;
  }
  .footer-base__links { gap: 18px !important; }
  .footer-base p {
    font-size: 11px !important;
    color: #fff !important;
  }
}