/* Hagvan Fleet Management — premium visual system, July 2026 */
:root {
  --night: #06111d;
  --night-2: #0a1a28;
  --night-3: #102638;
  --panel: rgba(12, 31, 45, 0.78);
  --panel-solid: #0e2332;
  --lime: #c8ff62;
  --lime-strong: #a8ed35;
  --cyan: #56d9ff;
  --cream: #f6f7f1;
  --copy: #d5e1e8;
  --muted: #8ca2b1;
  --stroke: rgba(189, 221, 236, 0.14);
  --stroke-bright: rgba(200, 255, 98, 0.28);
  --shadow: 0 28px 80px rgba(0, 6, 12, 0.38);
  --blue: var(--lime);
  --signal: var(--lime);
  --gps: var(--cyan);
  --navy: var(--night);
  --navy-2: var(--night-2);
  --navy-3: var(--night-3);
  --text-light: var(--copy);
  --text-muted: var(--muted);
  --line: var(--stroke);
  --maxw: 1240px;
}

::selection {
  background: var(--lime);
  color: var(--night);
}

html {
  scroll-padding-top: 110px;
}

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(86, 217, 255, 0.08), transparent 24rem),
    linear-gradient(180deg, #071522 0%, var(--night) 24%, #07131f 100%) !important;
  color: var(--copy);
  font-size: 16px;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(131, 172, 193, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 172, 193, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

body::after {
  content: "";
  position: fixed;
  width: 38rem;
  height: 38rem;
  right: -22rem;
  top: 24vh;
  z-index: -1;
  border: 1px solid rgba(86, 217, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(86, 217, 255, 0.018),
    0 0 0 10rem rgba(200, 255, 98, 0.012);
  pointer-events: none;
}

.wrap {
  width: min(100%, var(--maxw));
  padding-inline: clamp(20px, 4vw, 48px);
}

h1,
h2,
h3,
h4 {
  color: var(--cream);
  letter-spacing: -0.035em;
}

h1 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

/* Live operations ticker */
.top-ticker {
  position: relative;
  z-index: 120;
  background: #030b12 !important;
  border-bottom-color: rgba(200, 255, 98, 0.12) !important;
}

.top-ticker .wrap {
  min-height: 34px;
  color: #9ab0bd;
}

.top-ticker .dot {
  display: inline-block;
  color: var(--lime) !important;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  50% {
    opacity: 0.38;
    filter: drop-shadow(0 0 8px var(--lime));
  }
}

/* Navigation */
header.site-header {
  top: 0 !important;
  background: rgba(6, 17, 29, 0.82) !important;
  border-bottom: 1px solid var(--stroke) !important;
  box-shadow: 0 18px 50px rgba(0, 5, 10, 0.18) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
}

.nav-row {
  min-height: 78px;
  gap: 24px;
}

.logo {
  flex: 0 0 auto;
  font-size: 1.18rem;
}

.logo .mark {
  position: relative;
  width: 43px;
  height: 43px;
  overflow: hidden;
  border: 1px solid rgba(200, 255, 98, 0.4);
  border-radius: 13px 13px 13px 4px;
  background:
    linear-gradient(145deg, rgba(200, 255, 98, 0.2), rgba(86, 217, 255, 0.08)),
    #0d2330 !important;
  color: var(--lime) !important;
  box-shadow: 0 12px 28px rgba(0, 8, 12, 0.3) !important;
}

.logo .mark::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  right: -8px;
  bottom: -8px;
  border: 4px solid var(--cyan);
  border-radius: 50%;
  opacity: 0.7;
}

.logo small {
  color: #8da5b3;
}

nav.main-nav > ul {
  gap: 2px !important;
}

nav.main-nav a.nav-link {
  padding: 10px 13px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #adc0ca !important;
}

nav.main-nav a.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: var(--lime);
  transition: left 0.22s ease, right 0.22s ease;
}

nav.main-nav a.nav-link:hover,
nav.main-nav li.active a.nav-link {
  color: white !important;
  transform: none !important;
}

nav.main-nav a.nav-link:hover::after,
nav.main-nav li.active a.nav-link::after {
  left: 12px;
  right: 12px;
}

.nav-cta,
.btn-primary {
  color: #07111b !important;
  border: 1px solid #d9ff91 !important;
  background: linear-gradient(135deg, #d5ff87, var(--lime-strong)) !important;
  box-shadow:
    0 12px 34px rgba(168, 237, 53, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.nav-cta {
  padding: 11px 20px !important;
}

.nav-cta:hover,
.btn-primary:hover {
  box-shadow: 0 18px 42px rgba(168, 237, 53, 0.26) !important;
}

.dropdown {
  top: calc(100% + 18px) !important;
  border-color: var(--stroke) !important;
  background: rgba(7, 22, 33, 0.96) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(18px);
}

.dropdown::before {
  background: #0a1c29 !important;
}

.dropdown a {
  border: 1px solid transparent;
}

.dropdown a:hover {
  border-color: var(--stroke);
  background: rgba(200, 255, 98, 0.065) !important;
}

.dropdown .ic {
  color: var(--lime) !important;
  background: rgba(200, 255, 98, 0.1) !important;
}

@media (min-width: 821px) {
  .dropdown.dropdown-products {
    left: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: min(720px, calc(100vw - 40px));
    max-height: min(620px, calc(100vh - 130px));
    overflow-y: auto;
    transform: translate(-50%, 4px) scale(.98);
    transform-origin: top center;
  }
  li.has-dropdown:hover .dropdown.dropdown-products,
  li.has-dropdown.open .dropdown.dropdown-products {
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 820px) {
  .dropdown.dropdown-products {
    min-width: 0;
    max-height: none;
  }
}

/* Hero system */
.hero {
  isolation: isolate;
  min-height: 560px;
  padding: clamp(84px, 9vw, 132px) 0 clamp(72px, 8vw, 112px) !important;
  background-color: var(--night) !important;
  border-bottom: 0 !important;
}

body[data-page="solutions"] .solution-card-container > .section-band {
  margin-top: 0 !important;
}

.hero::before {
  inset: 0 !important;
  opacity: 0.45 !important;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(200, 255, 98, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 46%, rgba(86, 217, 255, 0.22) 0 2px, transparent 3px),
    linear-gradient(rgba(86, 217, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 217, 255, 0.055) 1px, transparent 1px) !important;
  background-size: auto, auto, 64px 64px, 64px 64px !important;
  animation: grid-drift 30s linear infinite !important;
  mask-image: linear-gradient(90deg, black, rgba(0, 0, 0, 0.45), transparent);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 16, 27, 0.97) 0%, rgba(5, 16, 27, 0.86) 44%, rgba(5, 16, 27, 0.28) 78%, rgba(5, 16, 27, 0.42) 100%),
    linear-gradient(0deg, var(--night) 0%, transparent 30%);
}

@keyframes grid-drift {
  to {
    background-position: 0 0, 0 0, 64px 64px, 64px 64px;
  }
}

.hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr) !important;
  gap: clamp(40px, 6vw, 84px) !important;
}

.hero h1 {
  max-width: 820px;
  margin-bottom: 24px;
  color: #fff !important;
  font-size: clamp(2.75rem, 5.8vw, 5.55rem) !important;
  line-height: 0.97 !important;
  letter-spacing: -0.065em !important;
}

.hero h1 em {
  color: var(--lime) !important;
  background: linear-gradient(92deg, var(--lime), #e6ffb6 62%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p.lead {
  max-width: 660px !important;
  color: #c8d5dc !important;
  font-size: clamp(1.02rem, 1.6vw, 1.23rem) !important;
  line-height: 1.75 !important;
}

.eyebrow {
  color: var(--lime) !important;
  letter-spacing: 0.16em !important;
}

.eyebrow::before {
  background: var(--lime) !important;
  box-shadow: 0 0 0 5px rgba(200, 255, 98, 0.12) !important;
}

.hero-actions {
  margin-top: 34px !important;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 28px;
  color: #93a9b5;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(200, 255, 98, 0.1);
}

.hero-trust b {
  color: white;
  font-weight: 600;
}

.btn {
  min-height: 48px;
  justify-content: center;
  border-radius: 12px 12px 12px 4px !important;
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(9, 28, 41, 0.58) !important;
  backdrop-filter: blur(12px);
}

.btn-ghost:hover {
  border-color: var(--cyan) !important;
  background: rgba(86, 217, 255, 0.09) !important;
}

.radar-card {
  overflow: hidden;
  border: 1px solid rgba(86, 217, 255, 0.24) !important;
  border-radius: 28px 28px 28px 8px !important;
  background: linear-gradient(160deg, rgba(16, 44, 60, 0.9), rgba(5, 17, 28, 0.84)) !important;
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  animation: dashboard-float 7s ease-in-out infinite;
}

.radar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.08), transparent 52%);
  transform: translateX(-110%);
  animation: panel-sheen 8s ease-in-out infinite;
}

@keyframes dashboard-float {
  50% {
    transform: perspective(1200px) rotateY(-1deg) rotateX(0) translateY(-9px);
  }
}

@keyframes panel-sheen {
  55%,
  100% {
    transform: translateX(130%);
  }
}

.radar-card .row .tag {
  color: var(--lime) !important;
  border-color: rgba(200, 255, 98, 0.4) !important;
}

/* Content rhythm */
section {
  position: relative;
  padding: clamp(74px, 8vw, 112px) 0;
}

section.alt {
  background:
    linear-gradient(110deg, rgba(86, 217, 255, 0.025), transparent 32%),
    rgba(10, 26, 40, 0.72) !important;
  border-block: 1px solid rgba(189, 221, 236, 0.055);
}

.section-head {
  max-width: 720px;
  margin-bottom: 54px;
}

.section-head h2,
section h2 {
  font-size: clamp(2rem, 4.1vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.section-head p {
  font-size: 1.02rem;
  line-height: 1.75;
}

.grid-2,
.grid-3,
.grid-4 {
  gap: 22px;
}

.card,
.post-card,
.form-card,
.dark-panel {
  border: 1px solid var(--stroke) !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.035), transparent 38%),
    var(--panel) !important;
  border-radius: 24px 24px 24px 8px !important;
  box-shadow: 0 18px 55px rgba(0, 7, 12, 0.16);
  backdrop-filter: blur(14px);
}

.card {
  padding: clamp(24px, 3vw, 34px) !important;
}

.card:hover,
.post-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--stroke-bright) !important;
  box-shadow: 0 26px 70px rgba(0, 5, 10, 0.3), 0 0 0 1px rgba(200, 255, 98, 0.06) !important;
}

.card .ic {
  border: 1px solid rgba(200, 255, 98, 0.16);
  background: rgba(200, 255, 98, 0.08) !important;
  color: var(--lime) !important;
}

.card p,
.post-body p,
.dark-panel p {
  color: var(--muted) !important;
  line-height: 1.72;
}

.tag-pill {
  color: var(--lime) !important;
  border: 1px solid rgba(200, 255, 98, 0.17);
  background: rgba(200, 255, 98, 0.075) !important;
}

.numbered .step::before {
  color: var(--lime);
}

.stat-strip {
  gap: 16px;
}

.stat-strip .stat {
  position: relative;
  padding-left: 16px;
}

.stat-strip .stat::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 0;
  width: 2px;
  border-radius: 10px;
  background: linear-gradient(var(--lime), transparent);
}

.stat-strip .stat b {
  color: var(--lime);
}

/* Calls to action */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) !important;
  border-color: rgba(200, 255, 98, 0.22) !important;
  border-radius: 30px 30px 30px 10px !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(200, 255, 98, 0.18), transparent 16rem),
    linear-gradient(130deg, #102a3b, #091722) !important;
  box-shadow: var(--shadow);
}

.cta-band::after {
  content: "→";
  position: absolute;
  right: clamp(20px, 4vw, 70px);
  bottom: -70px;
  color: rgba(200, 255, 98, 0.07);
  font-family: var(--font-display);
  font-size: 18rem;
  line-height: 1;
  pointer-events: none;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.quote-photo {
  min-height: 520px;
  display: grid;
  align-items: center;
  background-attachment: fixed;
}

.quote-photo::before {
  background:
    linear-gradient(90deg, rgba(5, 16, 26, 0.92), rgba(5, 16, 26, 0.52)),
    linear-gradient(0deg, var(--night), transparent 32%, var(--night)) !important;
}

.quote-photo blockquote {
  color: white !important;
  font-size: clamp(2rem, 4.5vw, 4.2rem) !important;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.quote-photo cite {
  color: var(--lime) !important;
}

/* Product, solution and resource families */
.filter-nav,
.cat-filter {
  gap: 10px !important;
}

.filter-btn,
.filter-btn-sol,
.filter-btn-res,
.cat-pill {
  min-height: 42px;
  border: 1px solid var(--stroke) !important;
  border-radius: 999px !important;
  background: rgba(7, 20, 31, 0.66) !important;
  color: #a9bec9 !important;
  backdrop-filter: blur(10px);
}

.filter-btn:hover,
.filter-btn.active,
.filter-btn-sol:hover,
.filter-btn-sol.active,
.filter-btn-res:hover,
.filter-btn-res.active,
.cat-pill:hover {
  color: var(--night) !important;
  border-color: var(--lime) !important;
  background: var(--lime) !important;
  box-shadow: 0 10px 28px rgba(168, 237, 53, 0.16) !important;
}

.product-section {
  scroll-margin-top: 104px;
}

.product-section img,
.post-card img {
  min-height: 260px;
  object-fit: cover !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #0f2b3d, #07131f) !important;
}

.specs-container,
.specs-wrapper {
  margin-top: 30px;
  padding: 28px;
  border: 1px solid var(--stroke);
  border-radius: 22px 22px 22px 8px;
  background: rgba(4, 16, 25, 0.42);
}

.specs-grid {
  gap: 26px !important;
}

.specs-column h5,
.specs-wrapper h5 {
  color: var(--lime) !important;
  letter-spacing: 0.04em;
}

.specs-column li,
.specs-wrapper li {
  color: #aabdc7;
  line-height: 1.65;
}

.section-band {
  margin-top: 68px !important;
  padding: 34px 0 !important;
  border-block: 1px solid var(--stroke) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(200, 255, 98, 0.09), transparent 19rem),
    linear-gradient(90deg, #0b2130, #07141f) !important;
}

.section-band::after {
  background: linear-gradient(90deg, transparent, var(--lime), transparent) !important;
}

.section-band h3 {
  font-size: clamp(1.45rem, 3vw, 2.35rem) !important;
}

.section-band p.sub-heading {
  color: var(--lime) !important;
}

.industry-block {
  margin-block: 28px 50px;
  overflow: hidden;
  border: 1px solid var(--stroke) !important;
  border-radius: 28px 28px 28px 9px;
  background: var(--panel);
  box-shadow: 0 24px 64px rgba(0, 5, 10, 0.22);
}

.industry-media {
  max-height: none !important;
  min-height: 430px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #06111b !important;
}

.industry-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-block:hover .industry-media img {
  transform: scale(1.035);
}

.industry-media::after {
  background: linear-gradient(90deg, transparent 38%, rgba(5, 16, 26, 0.28)) !important;
}

.industry-text {
  padding: clamp(34px, 5vw, 66px) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 217, 255, 0.06), transparent 20rem),
    var(--panel-solid) !important;
}

.industry-text .title-bar {
  color: var(--night) !important;
  border-radius: 10px 10px 10px 3px !important;
  background: var(--lime) !important;
}

.industry-text h4 {
  color: var(--lime) !important;
}

.media-box-btn,
.more-toggle {
  color: var(--lime) !important;
  border-color: rgba(200, 255, 98, 0.32) !important;
}

.media-box-btn:hover,
.more-toggle:hover {
  background: rgba(200, 255, 98, 0.08) !important;
}

.post-card {
  overflow: hidden;
}

.post-card img {
  height: 220px !important;
  border-radius: 0 !important;
  filter: saturate(0.9) contrast(1.04);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card:hover img {
  transform: scale(1.045);
}

.post-body {
  padding: 28px !important;
}

.post-meta {
  color: var(--lime) !important;
}

.post-stats {
  color: #91a9b7 !important;
}

/* Contact and FAQ */
.form-card {
  padding: clamp(26px, 4vw, 42px) !important;
}

.form-card h3 {
  color: white !important;
}

.field-row {
  gap: 15px !important;
}

.form-card label {
  color: #a9bdc8 !important;
}

.form-card input,
.form-card select,
.form-card textarea,
.footer-grid input[type="email"] {
  min-height: 48px;
  border: 1px solid var(--stroke) !important;
  border-radius: 12px 12px 12px 4px !important;
  background: rgba(2, 12, 19, 0.55) !important;
  color: white !important;
}

.form-card textarea {
  min-height: 126px;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--lime) !important;
  outline: 3px solid rgba(200, 255, 98, 0.13) !important;
}

.faq-details {
  border-color: var(--stroke) !important;
  border-radius: 18px 18px 18px 6px !important;
  background: var(--panel) !important;
}

.faq-summary {
  color: white !important;
}

.faq-summary::after {
  color: var(--lime) !important;
}

iframe {
  filter: grayscale(0.8) invert(0.9) hue-rotate(155deg) contrast(1.05) !important;
}

/* Partner system and graceful logo fallback */
.partners-strip {
  padding-block: 44px !important;
  border-block: 1px solid var(--stroke);
  background: #081825 !important;
}

.partners-strip .label {
  color: var(--lime) !important;
  border-color: rgba(200, 255, 98, 0.18) !important;
  background: rgba(200, 255, 98, 0.055) !important;
}

.partner-box {
  width: 180px !important;
  height: 78px !important;
  padding: 13px 18px !important;
  border-color: rgba(197, 220, 230, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 250, 0.94)) !important;
  box-shadow:
    0 12px 28px rgba(0, 7, 13, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

.partner-box:hover {
  border-color: rgba(200, 255, 98, 0.45) !important;
  box-shadow:
    0 17px 36px rgba(0, 7, 13, 0.3),
    0 0 0 2px rgba(200, 255, 98, 0.12) !important;
  transform: translateY(-3px);
}

.partner-box img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 52px !important;
  object-fit: contain !important;
  filter: none !important;
}

.partner-box img[src$="buspro.jpeg"] {
  max-height: 58px !important;
}

.partner-box img[src$="escort.png"] {
  max-height: 56px !important;
}

.partner-fallback {
  color: #16303f;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .partner-track {
    animation-play-state: paused !important;
  }
}

/* Footer */
footer.site-footer {
  position: relative;
  padding-top: 78px !important;
  border-top: 1px solid var(--stroke);
  background:
    radial-gradient(circle at 8% 0%, rgba(86, 217, 255, 0.06), transparent 24rem),
    #030b12 !important;
}

.footer-grid {
  gap: clamp(28px, 5vw, 64px);
}

.footer-grid h4 {
  color: var(--lime) !important;
}

.footer-grid a {
  transition: color 0.18s ease, transform 0.18s ease;
}

.footer-grid a:hover {
  color: white !important;
}

.chat-bubble {
  right: 20px !important;
  bottom: 20px !important;
  min-height: 50px;
  padding: 13px 19px !important;
  color: #06111d !important;
  border: 1px solid #dcff9a;
  border-radius: 999px 999px 999px 8px !important;
  background: linear-gradient(135deg, #d9ff91, var(--lime-strong)) !important;
  box-shadow: 0 20px 45px rgba(0, 7, 12, 0.38), 0 8px 30px rgba(168, 237, 53, 0.15) !important;
}

/* Motion hooks added by redesign.js */
.motion-ready {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready.motion-in {
  opacity: 1;
  transform: translateY(0);
}

.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  box-shadow: 0 0 16px rgba(200, 255, 98, 0.44);
}

.image-fallback {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 28px;
  color: #c6d4da;
  border-radius: inherit;
  background:
    radial-gradient(circle at 72% 26%, rgba(200, 255, 98, 0.12), transparent 10rem),
    linear-gradient(145deg, #103044, #06131f);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

@media (max-width: 1120px) {
  .nav-row {
    gap: 14px;
  }

  nav.main-nav a.nav-link {
    padding-inline: 9px !important;
    font-size: 0.82rem !important;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 6vw, 4.65rem) !important;
  }
}

@media (max-width: 960px) {
  .hero {
    min-height: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .radar-card {
    max-width: 680px;
    transform: none;
  }

  .industry-media {
    min-height: 340px !important;
  }

  .quote-photo {
    background-attachment: scroll;
  }
}

@media (max-width: 820px) {
  .top-ticker .wrap {
    justify-content: center !important;
  }

  .top-ticker .mono {
    display: none;
  }

  .nav-row {
    min-height: 68px;
  }

  .nav-row > div .nav-cta {
    display: none;
  }

  nav.main-nav {
    inset: 102px 0 0 0 !important;
    padding: 18px 20px 40px !important;
    background: rgba(5, 16, 26, 0.98) !important;
    backdrop-filter: blur(20px);
  }

  nav.main-nav > ul {
    gap: 4px !important;
  }

  nav.main-nav a.nav-link {
    justify-content: space-between;
    min-height: 48px;
    padding-inline: 14px !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.025) !important;
  }

  .dropdown {
    margin-left: 0 !important;
    border-radius: 12px !important;
  }

  .hero {
    padding-block: 72px 68px !important;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 13vw, 4rem) !important;
  }

  .hero::after {
    background: linear-gradient(90deg, rgba(5, 16, 27, 0.92), rgba(5, 16, 27, 0.7)) !important;
  }

  section {
    padding-block: 70px;
  }

  .stat-strip {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 24px;
  }

  .cta-band {
    align-items: stretch !important;
    text-align: left !important;
  }

  .cta-band .btn {
    width: 100%;
  }

  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .industry-media {
    min-height: 250px !important;
  }

  .partner-box {
    width: 145px !important;
    height: 68px !important;
  }

  .chat-bubble {
    font-size: 0;
    width: 52px;
    height: 52px;
    padding: 0 !important;
    justify-content: center;
  }

  .chat-bubble::before {
    content: "💬";
    font-size: 1.16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready {
    opacity: 1;
    transform: none;
  }
}

/* Working contact and newsletter destinations */
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"] {
  color: #9fb6c2;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.site-footer a[href^="tel:"]:hover,
.site-footer a[href^="mailto:"]:hover {
  color: var(--cyan);
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  width: min(100%, 360px);
  margin-top: 7px;
}

.newsletter-form input[type="email"] {
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  min-height: 43px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(189, 221, 236, 0.15) !important;
  border-radius: 10px 10px 10px 3px !important;
  color: white !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(86, 217, 255, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(86, 217, 255, 0.06);
}

.newsletter-submit {
  min-height: 43px;
  padding: 8px 13px;
  border: 1px solid rgba(200, 255, 98, 0.55);
  border-radius: 10px 10px 10px 3px;
  color: #07131d;
  background: var(--lime);
  font: 700 0.65rem var(--font-body);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.newsletter-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(200, 255, 98, 0.13);
}

@media (max-width: 470px) {
  .newsletter-form {
    grid-template-columns: 1fr;
  }
}

/* Resources: editorial fleet imagery */
body[data-page="resources"] .hero {
  min-height: 560px;
  display: grid;
  align-items: center;
  background-size: cover;
}

body[data-page="resources"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 15, 25, 0.76), rgba(4, 15, 25, 0.48), rgba(4, 15, 25, 0.72)),
    linear-gradient(0deg, #071722, transparent 42%);
}

body[data-page="resources"] .hero .wrap {
  position: relative;
  z-index: 2;
}

body[data-page="resources"] .post-card {
  position: relative;
  border-radius: 20px 20px 20px 7px !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 58%),
    #091b28 !important;
  box-shadow: 0 24px 54px rgba(0, 7, 12, 0.2);
}

body[data-page="resources"] .post-card:hover {
  border-color: rgba(86, 217, 255, 0.3) !important;
  box-shadow: 0 30px 70px rgba(0, 6, 11, 0.31);
}

.resource-media {
  position: relative;
  height: 226px;
  overflow: hidden;
  isolation: isolate;
  background: #061522;
}

.resource-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 12, 20, 0.05), rgba(3, 12, 20, 0.72)),
    linear-gradient(90deg, rgba(3, 12, 20, 0.28), transparent 62%);
}

.resource-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.015);
  transition:
    transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease;
}

.post-card:hover .resource-media img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.075);
}

.resource-media-hardware img {
  object-position: center 54%;
}

.resource-media-label,
.resource-media-index {
  position: absolute;
  z-index: 2;
  color: white;
}

.resource-media-label {
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(4, 17, 27, 0.72);
  backdrop-filter: blur(10px);
  font: 600 0.56rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resource-media-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px rgba(200, 255, 98, 0.6);
}

.resource-media-index {
  top: 13px;
  right: 13px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(86, 217, 255, 0.28);
  border-radius: 10px 10px 10px 3px;
  background: rgba(4, 17, 27, 0.7);
  backdrop-filter: blur(9px);
  font: 600 0.58rem var(--font-mono);
}

body[data-page="resources"] .post-body {
  padding: 25px !important;
}

body[data-page="resources"] .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--cyan) !important;
  font-family: var(--font-mono);
  font-size: 0.61rem !important;
}

body[data-page="resources"] .post-body h3 {
  font-size: 1.22rem !important;
  letter-spacing: -0.025em;
}

body[data-page="resources"] .post-stats {
  color: #748e9b;
  font-family: var(--font-mono);
  font-size: 0.65rem !important;
}

@media (max-width: 820px) {
  body[data-page="resources"] .hero {
    min-height: 500px;
  }

  .resource-media {
    height: 210px;
  }
}

/* ==========================================================
   V2 CONVERSION POLISH
   A segmented navigation rail, denser command centre and
   richer pointer-responsive surfaces.
   ========================================================== */

header.site-header {
  padding: 8px 18px !important;
  background: linear-gradient(180deg, rgba(3, 11, 18, 0.96), rgba(5, 17, 27, 0.9)) !important;
}

header.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--cyan), var(--lime), transparent 96%);
  opacity: 0.34;
}

.nav-row {
  min-height: 70px !important;
  padding: 9px 10px 9px 14px !important;
  border: 1px solid rgba(189, 221, 236, 0.13);
  border-radius: 21px 21px 21px 7px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 45%),
    rgba(9, 26, 39, 0.82);
  box-shadow:
    0 22px 52px rgba(0, 6, 11, 0.26),
    inset 0 1px rgba(255, 255, 255, 0.045);
  transition:
    min-height 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}

.site-header.is-scrolled .nav-row {
  min-height: 62px !important;
  background: rgba(6, 20, 31, 0.94);
  box-shadow: 0 18px 48px rgba(0, 5, 10, 0.38);
}

.logo {
  gap: 10px !important;
}

.logo .mark {
  width: 39px !important;
  height: 39px !important;
  border-radius: 12px 12px 12px 4px !important;
}

.logo > span:last-child {
  line-height: 1.05;
}

nav.main-nav {
  padding: 5px;
  border: 1px solid rgba(189, 221, 236, 0.1);
  border-radius: 15px 15px 15px 5px;
  background: rgba(2, 12, 20, 0.46);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

nav.main-nav > ul {
  gap: 3px !important;
}

nav.main-nav a.nav-link {
  min-height: 42px;
  gap: 7px !important;
  padding: 8px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 10px 10px 10px 3px !important;
  color: #aabec9 !important;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease !important;
}

nav.main-nav a.nav-link::after {
  display: none !important;
}

nav.main-nav a.nav-link:hover {
  border-color: rgba(86, 217, 255, 0.16) !important;
  color: white !important;
  background: rgba(86, 217, 255, 0.065) !important;
  transform: translateY(-1px) !important;
}

nav.main-nav li.active a.nav-link {
  border-color: rgba(220, 255, 154, 0.8) !important;
  color: #07111b !important;
  background: linear-gradient(135deg, #d9ff91, var(--lime-strong)) !important;
  box-shadow:
    0 9px 26px rgba(168, 237, 53, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.7) !important;
  transform: none !important;
}

.nav-index {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0;
  opacity: 0.58;
  transform: translateY(-0.25em);
}

nav.main-nav li.active .nav-index {
  color: #07111b;
  opacity: 0.64;
}

.nav-row > div:last-child {
  padding-left: 4px;
}

.nav-cta {
  min-width: 122px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 13px 13px 13px 4px !important;
}

.dropdown {
  top: calc(100% + 22px) !important;
}

/* Stronger first-viewport composition */
body[data-page="index"] .hero {
  --hero-x: 50%;
  --hero-y: 50%;
  min-height: 730px;
}

body[data-page="index"] .hero > div[style*="position:absolute"] {
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(86, 217, 255, 0.07), transparent 23rem),
    linear-gradient(90deg, rgba(4, 15, 25, 0.92) 0%, rgba(4, 15, 25, 0.77) 42%, rgba(4, 15, 25, 0.2) 82%, rgba(4, 15, 25, 0.38) 100%) !important;
  transition: background 0.18s linear;
}

body[data-page="index"] .hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr) !important;
  gap: clamp(38px, 4.5vw, 72px) !important;
}

body[data-page="index"] .hero h1 {
  font-size: clamp(2.9rem, 5.1vw, 5rem) !important;
}

/* Live fleet command centre */
.radar-card {
  padding: 17px !important;
  border-color: rgba(86, 217, 255, 0.3) !important;
  border-radius: 27px 27px 27px 9px !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(200, 255, 98, 0.1), transparent 14rem),
    linear-gradient(155deg, rgba(13, 40, 55, 0.96), rgba(4, 15, 25, 0.94)) !important;
}

.command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 3px 14px;
}

.command-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.command-title > span:last-child {
  display: grid;
  gap: 1px;
}

.command-title small {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.command-title strong {
  color: white;
  font-size: 0.88rem;
  font-weight: 600;
}

.command-pulse {
  width: 11px;
  height: 11px;
  border: 2px solid #081522;
  border-radius: 50%;
  background: var(--lime);
  box-shadow:
    0 0 0 4px rgba(200, 255, 98, 0.12),
    0 0 18px rgba(200, 255, 98, 0.44);
  animation: command-pulse 1.9s ease-in-out infinite;
}

@keyframes command-pulse {
  50% {
    box-shadow:
      0 0 0 8px rgba(200, 255, 98, 0),
      0 0 24px rgba(200, 255, 98, 0.58);
  }
}

.command-sync {
  padding: 6px 9px;
  border: 1px solid rgba(86, 217, 255, 0.2);
  border-radius: 999px;
  color: #91abb7;
  background: rgba(86, 217, 255, 0.045);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.09em;
}

.command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(166px, 0.72fr);
  gap: 11px;
}

.command-map {
  position: relative;
  min-height: 344px;
  overflow: hidden;
  border: 1px solid rgba(86, 217, 255, 0.17);
  border-radius: 18px 18px 18px 6px;
  background:
    radial-gradient(circle at 74% 36%, rgba(86, 217, 255, 0.11), transparent 11rem),
    linear-gradient(rgba(105, 154, 179, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 154, 179, 0.055) 1px, transparent 1px),
    #061522;
  background-size: auto, 28px 28px, 28px 28px, auto;
}

.command-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 21, 34, 0.48), transparent 16%, transparent 80%, rgba(6, 21, 34, 0.5)),
    linear-gradient(0deg, rgba(6, 21, 34, 0.7), transparent 20%, transparent 80%);
}

.command-map svg {
  width: 100%;
  height: 100%;
  min-height: 344px;
  display: block;
}

.command-roads path {
  stroke: rgba(153, 192, 209, 0.13);
  stroke-width: 3;
}

.command-blocks {
  fill: rgba(105, 154, 179, 0.065);
  stroke: rgba(105, 154, 179, 0.14);
}

.command-route-shadow {
  fill: none;
  stroke: rgba(86, 217, 255, 0.14);
  stroke-width: 13;
  stroke-linecap: round;
  filter: url("#routeGlow");
}

.command-route {
  fill: none;
  stroke: url("#commandRoute");
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 8;
  animation: command-dash 9s linear infinite;
}

@keyframes command-dash {
  to {
    stroke-dashoffset: -136;
  }
}

.command-map text {
  fill: rgba(174, 205, 218, 0.56);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.command-origin circle:first-child,
.command-destination circle:first-child {
  fill: rgba(200, 255, 98, 0.08);
  stroke: rgba(200, 255, 98, 0.42);
  animation: map-node 2.3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.command-destination circle:first-child {
  animation-delay: -0.8s;
}

.command-origin circle:last-child,
.command-destination circle:last-child {
  fill: var(--lime);
  filter: drop-shadow(0 0 5px var(--lime));
}

@keyframes map-node {
  50% {
    transform: scale(1.36);
    opacity: 0.32;
  }
}

.command-vehicle circle {
  fill: rgba(86, 217, 255, 0.12);
  stroke: rgba(86, 217, 255, 0.48);
  stroke-width: 2;
  filter: drop-shadow(0 0 9px rgba(86, 217, 255, 0.5));
}

.command-vehicle path {
  fill: var(--cream);
  stroke: #061522;
  stroke-width: 2;
  transform: scale(0.76);
  transform-origin: center;
}

.map-status-chip {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(200, 255, 98, 0.22);
  border-radius: 999px;
  color: #d7e3e8;
  background: rgba(4, 16, 25, 0.78);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}

.map-status-chip span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(200, 255, 98, 0.66);
}

.map-unit-card {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  min-width: 178px;
  padding: 11px 12px;
  border: 1px solid rgba(86, 217, 255, 0.27);
  border-radius: 12px 12px 12px 4px;
  color: white;
  background: rgba(5, 20, 31, 0.86);
  box-shadow: 0 15px 35px rgba(0, 5, 10, 0.28);
  backdrop-filter: blur(12px);
}

.map-unit-card span,
.map-unit-card strong {
  font-size: 0.72rem;
}

.map-unit-card span {
  color: var(--cyan);
  font-family: var(--font-mono);
}

.map-unit-card strong {
  text-align: right;
}

.map-unit-card small {
  grid-column: 1 / -1;
  color: #91a8b4;
  font-size: 0.62rem;
}

.command-side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 11px;
}

.command-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.command-metrics > div {
  min-width: 0;
  padding: 13px 11px;
  border: 1px solid rgba(189, 221, 236, 0.11);
  border-radius: 13px 13px 13px 4px;
  background: rgba(255, 255, 255, 0.028);
}

.command-metrics span,
.command-metrics small {
  display: block;
  color: #829ba8;
  font-size: 0.56rem;
}

.command-metrics strong {
  display: block;
  margin-block: 3px;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.045em;
}

.event-feed {
  padding: 13px 12px;
  border: 1px solid rgba(189, 221, 236, 0.11);
  border-radius: 14px 14px 14px 5px;
  background: rgba(255, 255, 255, 0.025);
}

.event-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(189, 221, 236, 0.08);
}

.event-title span {
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
}

.event-title small {
  color: #718c99;
  font-size: 0.53rem;
}

.event-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(189, 221, 236, 0.06);
}

.event-item:last-child {
  border-bottom: 0;
}

.event-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.event-dot.lime {
  background: var(--lime);
  box-shadow: 0 0 8px rgba(200, 255, 98, 0.5);
}

.event-dot.cyan {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(86, 217, 255, 0.5);
}

.event-dot.amber {
  background: #ffb45e;
  box-shadow: 0 0 8px rgba(255, 180, 94, 0.5);
}

.event-item p {
  min-width: 0;
  margin: 0;
}

.event-item p strong,
.event-item p span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-item p strong {
  color: #dbe7ec;
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.event-item p span,
.event-item time {
  color: #78919e;
  font-size: 0.53rem;
}

.command-foot {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 3px 1px;
  color: #7f98a5;
  font-family: var(--font-mono);
  font-size: 0.55rem;
}

.command-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.command-foot span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
}

.command-foot a {
  margin-left: auto;
  color: var(--cyan);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
}

.command-foot a b {
  color: white;
}

/* Pointer-following light on conversion surfaces */
.card,
.post-card,
.industry-block {
  --spot-x: 50%;
  --spot-y: 50%;
  isolation: isolate;
}

.card::before,
.post-card::before,
.industry-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--spot-x) var(--spot-y),
    rgba(86, 217, 255, 0.11),
    transparent 68%
  );
  transition: opacity 0.25s ease;
}

.card:hover::before,
.post-card:hover::before,
.industry-block:hover::before {
  opacity: 1;
}

.section-head h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 18px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  box-shadow: 0 0 18px rgba(86, 217, 255, 0.16);
}

.section-head[style*="text-align:center"] h2::after {
  margin-inline: auto;
}

@media (max-width: 1180px) {
  nav.main-nav a.nav-link {
    gap: 4px !important;
    padding-inline: 8px !important;
  }

  .nav-index {
    display: none;
  }

  body[data-page="index"] .hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr) !important;
  }
}

@media (max-width: 1040px) {
  header.site-header {
    padding-inline: 10px !important;
  }

  nav.main-nav {
    padding: 3px;
  }

  nav.main-nav a.nav-link {
    font-size: 0.76rem !important;
    padding-inline: 7px !important;
  }

  .nav-cta {
    min-width: 104px;
    padding-inline: 13px !important;
  }

  body[data-page="index"] .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .radar-card {
    width: min(100%, 760px);
    max-width: none !important;
    margin-inline: auto;
  }
}

@media (max-width: 820px) {
  header.site-header {
    padding: 6px 10px !important;
  }

  .nav-row {
    min-height: 62px !important;
    border-radius: 16px 16px 16px 6px;
  }

  nav.main-nav {
    inset: 106px 10px 10px !important;
    padding: 12px !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 18px 18px 18px 7px !important;
    box-shadow: 0 30px 80px rgba(0, 5, 10, 0.55);
  }

  nav.main-nav a.nav-link {
    font-size: 0.9rem !important;
    padding-inline: 13px !important;
  }

  .nav-index {
    display: inline-block;
  }

  body[data-page="index"] .hero {
    min-height: 0;
  }

  .command-grid {
    grid-template-columns: 1fr;
  }

  .command-map,
  .command-map svg {
    min-height: 290px;
  }

  .command-side {
    grid-template-columns: 1fr;
  }

  .command-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .event-feed {
    display: none;
  }

  .command-foot {
    flex-wrap: wrap;
  }

  .command-foot a {
    width: 100%;
    margin-left: 0;
    padding-top: 4px;
  }
}

@media (max-width: 470px) {
  .logo small {
    display: none;
  }

  .radar-card {
    padding: 12px !important;
    border-radius: 20px 20px 20px 7px !important;
  }

  .command-sync {
    display: none;
  }

  .command-map,
  .command-map svg {
    min-height: 255px;
  }

  .map-unit-card {
    right: 9px;
    bottom: 9px;
    min-width: 160px;
  }
}

/* ==========================================================
   V3 SALES EXPERIENCE
   Partner proof, interactive product preview, savings tool
   and a stronger direct-contact surface.
   ========================================================== */

.ecosystem-section {
  position: relative;
  z-index: 3;
  padding: 34px 0 !important;
  background: #071722;
  border-block: 1px solid rgba(189, 221, 236, 0.09);
}

.ecosystem-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(34px, 5vw, 82px);
}

.ecosystem-copy h2 {
  max-width: 540px;
  margin: 8px 0 9px;
  color: white;
  font-size: clamp(1.6rem, 2.7vw, 2.45rem);
}

.ecosystem-copy p {
  max-width: 590px;
  margin: 0 0 15px;
  color: #8da6b2;
  font-size: 0.89rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 650;
}

.text-link span {
  color: var(--lime);
  transition: transform 0.2s ease;
}

.text-link:hover span {
  transform: translate(2px, -2px);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ecosystem-node {
  position: relative;
  min-width: 0;
  padding: 17px 10px 15px;
  overflow: hidden;
  border: 1px solid rgba(189, 221, 236, 0.1);
  border-radius: 15px 15px 15px 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 65%),
    rgba(255, 255, 255, 0.018);
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    background 0.22s ease;
}

.ecosystem-node::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -24px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(86, 217, 255, 0.13);
  border-radius: 50%;
}

.ecosystem-node:hover {
  border-color: rgba(200, 255, 98, 0.28);
  background: rgba(200, 255, 98, 0.035);
  transform: translateY(-3px);
}

.ecosystem-node span,
.ecosystem-node strong {
  position: relative;
  z-index: 1;
  display: block;
}

.ecosystem-node span {
  margin-bottom: 18px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  opacity: 0.68;
}

.ecosystem-node strong {
  overflow: hidden;
  color: #dce8ed;
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-demo-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 8%, rgba(86, 217, 255, 0.07), transparent 22rem),
    radial-gradient(circle at 91% 84%, rgba(200, 255, 98, 0.05), transparent 25rem),
    #06141f;
}

.dashboard-demo-section::before {
  content: "HAGVAN / COMMAND";
  position: absolute;
  top: 76px;
  right: -18px;
  color: rgba(255, 255, 255, 0.018);
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  white-space: nowrap;
  pointer-events: none;
}

.demo-intro {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}

.demo-intro .section-head {
  max-width: 750px;
  margin: 0;
}

.demo-intro .section-head h2 {
  color: white;
}

.demo-intro .section-head p {
  color: #8da6b2;
}

.demo-assurance {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(200, 255, 98, 0.16);
  border-radius: 13px 13px 13px 4px;
  background: rgba(200, 255, 98, 0.035);
}

.demo-assurance > span:last-child {
  display: grid;
}

.demo-assurance strong {
  color: #dce8ed;
  font-size: 0.68rem;
}

.demo-assurance small {
  color: #79919d;
  font-size: 0.57rem;
}

.demo-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(200, 255, 98, 0.09), 0 0 18px rgba(200, 255, 98, 0.42);
  animation: command-pulse 1.9s ease-in-out infinite;
}

.platform-demo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 545px;
  overflow: hidden;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 28px 28px 28px 9px;
  background: rgba(3, 12, 19, 0.8);
  box-shadow: 0 38px 100px rgba(0, 4, 9, 0.34);
}

.demo-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 24px 13px;
  border-right: 1px solid rgba(189, 221, 236, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    #061722;
}

.demo-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 14px 13px;
  border: 1px solid transparent;
  border-radius: 12px 12px 12px 4px;
  color: #8da4af;
  background: transparent;
  font: 600 0.73rem var(--font-body);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.demo-tab:hover {
  color: white;
  background: rgba(86, 217, 255, 0.045);
  transform: translateX(2px);
}

.demo-tab span {
  color: var(--cyan);
  font: 500 0.55rem var(--font-mono);
  opacity: 0.64;
}

.demo-tab.active {
  border-color: rgba(200, 255, 98, 0.28);
  color: #08131c;
  background: linear-gradient(135deg, #dcff99, var(--lime-strong));
  box-shadow: 0 12px 28px rgba(170, 235, 59, 0.13);
}

.demo-tab.active span {
  color: #08131c;
}

.demo-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 75px;
  padding: 13px 22px;
  border-bottom: 1px solid rgba(189, 221, 236, 0.09);
  background: rgba(7, 23, 34, 0.7);
}

.demo-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-toolbar > div:first-child > span:last-child {
  display: grid;
}

.demo-toolbar small {
  color: var(--cyan);
  font: 600 0.53rem var(--font-mono);
  letter-spacing: 0.12em;
}

.demo-toolbar strong {
  color: white;
  font-size: 0.75rem;
}

.demo-brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px 11px 11px 3px;
  color: #09131d;
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  font: 800 1rem var(--font-display);
}

.demo-toolbar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8ca5b1;
  font: 500 0.58rem var(--font-mono);
}

.demo-toolbar-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px rgba(200, 255, 98, 0.5);
}

.demo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.65fr);
  gap: 14px;
  padding: 18px;
  animation: demo-panel-in 0.35s ease both;
}

.demo-panel[hidden] {
  display: none;
}

@keyframes demo-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.demo-map-card,
.demo-chart-card,
.driver-score-card,
.temperature-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(86, 217, 255, 0.14);
  border-radius: 19px 19px 19px 6px;
  background: rgba(9, 29, 42, 0.72);
}

.demo-map-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 410px;
}

.demo-map-grid {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background:
    linear-gradient(rgba(106, 157, 180, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 157, 180, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 64% 38%, rgba(86, 217, 255, 0.08), transparent 12rem),
    #071924;
  background-size: 30px 30px, 30px 30px, auto, auto;
}

.demo-road {
  position: absolute;
  height: 2px;
  border-top: 1px solid rgba(129, 171, 191, 0.16);
  border-bottom: 1px solid rgba(129, 171, 191, 0.05);
  transform-origin: left center;
}

.road-a {
  top: 25%;
  left: -5%;
  width: 112%;
  transform: rotate(8deg);
}

.road-b {
  top: 68%;
  left: -4%;
  width: 110%;
  transform: rotate(-12deg);
}

.road-c {
  top: -6%;
  left: 49%;
  width: 85%;
  transform: rotate(77deg);
}

.demo-route {
  position: absolute;
  top: 55%;
  left: 9%;
  width: 78%;
  height: 30%;
  border-top: 3px dashed var(--cyan);
  border-right: 3px dashed var(--lime);
  border-radius: 50% 44% 18% 0;
  transform: rotate(-17deg);
  filter: drop-shadow(0 0 7px rgba(86, 217, 255, 0.35));
  animation: demo-route-drift 4s linear infinite;
}

@keyframes demo-route-drift {
  50% {
    filter: drop-shadow(0 0 12px rgba(200, 255, 98, 0.5));
  }
}

.demo-pin {
  position: absolute;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(86, 217, 255, 0.45);
  border-radius: 50% 50% 50% 10%;
  color: white;
  background: #0a2838;
  box-shadow: 0 0 0 7px rgba(86, 217, 255, 0.055);
  font: normal 0.55rem var(--font-mono);
}

.pin-a {
  top: 65%;
  left: 12%;
}

.pin-b {
  top: 31%;
  left: 55%;
}

.pin-c {
  top: 16%;
  right: 10%;
}

.demo-vehicle {
  position: absolute;
  top: 44%;
  left: 43%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(200, 255, 98, 0.46);
  border-radius: 50%;
  color: #07131d;
  background: var(--lime);
  box-shadow: 0 0 0 8px rgba(200, 255, 98, 0.08), 0 0 22px rgba(200, 255, 98, 0.28);
  font: normal 1.5rem var(--font-display);
  animation: command-pulse 1.9s ease-in-out infinite;
}

.demo-map-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(189, 221, 236, 0.07);
  color: #819aa6;
  font-size: 0.66rem;
}

.demo-map-caption span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.demo-map-caption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(86, 217, 255, 0.5);
}

.demo-map-caption b {
  color: var(--lime);
}

.demo-side-stack {
  display: grid;
  align-content: stretch;
  gap: 12px;
}

.demo-kpi,
.demo-feed,
.demo-action-card,
.safety-row {
  border: 1px solid rgba(189, 221, 236, 0.1);
  border-radius: 16px 16px 16px 5px;
  background: rgba(255, 255, 255, 0.024);
}

.demo-kpi {
  display: grid;
  align-content: center;
  min-height: 130px;
  padding: 18px;
}

.demo-kpi small,
.demo-kpi span {
  color: #76909d;
  font-size: 0.61rem;
}

.demo-kpi strong {
  margin: 3px 0;
  color: var(--lime);
  font: 700 2.2rem var(--font-display);
  letter-spacing: -0.05em;
}

.demo-feed {
  padding: 7px 14px;
}

.demo-feed > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(189, 221, 236, 0.06);
}

.demo-feed > div:last-child {
  border-bottom: 0;
}

.demo-feed i,
.safety-row i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.demo-feed i.lime,
.safety-row i.lime {
  background: var(--lime);
}

.demo-feed i.cyan,
.safety-row i.cyan {
  background: var(--cyan);
}

.demo-feed i.amber,
.safety-row i.amber {
  background: #ffb45e;
}

.demo-feed span {
  display: grid;
  min-width: 0;
}

.demo-feed strong {
  color: #d8e5ea;
  font: 600 0.59rem var(--font-mono);
}

.demo-feed small,
.demo-feed time {
  overflow: hidden;
  color: #748d99;
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(189, 221, 236, 0.08);
}

.demo-card-head span {
  color: #89a1ad;
  font-size: 0.67rem;
}

.demo-card-head b {
  color: var(--lime);
  font: 700 1.4rem var(--font-display);
}

.fuel-chart {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.5vw, 17px);
  height: 310px;
  padding: 42px 28px 12px;
  background:
    linear-gradient(rgba(106, 157, 180, 0.055) 1px, transparent 1px);
  background-size: 100% 25%;
}

.fuel-chart span {
  flex: 1;
  min-width: 7px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--cyan), rgba(86, 217, 255, 0.17));
  box-shadow: 0 0 14px rgba(86, 217, 255, 0.08);
  animation: chart-grow 0.55s ease both;
  transform-origin: bottom;
}

.fuel-chart .alert-bar {
  background: linear-gradient(180deg, #ffb45e, rgba(255, 180, 94, 0.15));
}

@keyframes chart-grow {
  from {
    transform: scaleY(0.08);
  }
}

.demo-chart-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 24px 17px;
  color: #657e8a;
  font: 500 0.54rem var(--font-mono);
}

.demo-action-card {
  display: grid;
  align-content: center;
  min-height: 190px;
  padding: 18px;
}

.demo-action-card span {
  color: #748e9b;
  font-size: 0.6rem;
}

.demo-action-card strong {
  margin: 5px 0 18px;
  color: white;
  font: 600 0.68rem var(--font-mono);
}

.demo-action-card a {
  color: var(--cyan);
  font-size: 0.63rem;
  font-weight: 650;
}

.driver-score-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(26px, 5vw, 68px);
  min-height: 410px;
  padding: clamp(28px, 5vw, 60px);
}

.score-ring {
  display: grid;
  width: clamp(150px, 18vw, 220px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #081a25 59%, transparent 61%),
    conic-gradient(var(--lime) 0 86%, rgba(189, 221, 236, 0.1) 86%);
  box-shadow: 0 0 40px rgba(200, 255, 98, 0.07);
}

.score-ring span {
  display: flex;
  align-items: baseline;
}

.score-ring strong {
  color: white;
  font: 700 clamp(2.8rem, 5vw, 4.6rem) var(--font-display);
  letter-spacing: -0.08em;
}

.score-ring small {
  color: #78919d;
  font-size: 0.7rem;
}

.driver-score-card > div:last-child > small {
  color: var(--lime);
  font: 600 0.59rem var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.driver-score-card h3 {
  margin: 8px 0;
  color: white;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.driver-score-card p {
  max-width: 410px;
  color: #8099a5;
  font-size: 0.83rem;
}

.safety-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
}

.safety-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #829aa6;
  font-size: 0.64rem;
}

.safety-row strong {
  color: #e0ebef;
  font-size: 0.76rem;
}

.temperature-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 410px;
}

.temperature-line {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background:
    linear-gradient(rgba(106, 157, 180, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 157, 180, 0.04) 1px, transparent 1px);
  background-size: 100% 25%, 10% 100%;
}

.temperature-line::before {
  content: "";
  position: absolute;
  top: 31%;
  right: 0;
  bottom: 31%;
  left: 0;
  background: rgba(200, 255, 98, 0.045);
  border-block: 1px dashed rgba(200, 255, 98, 0.17);
}

.temperature-line span {
  position: absolute;
  top: 48%;
  left: 5%;
  width: 90%;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--lime), var(--cyan));
  box-shadow: 0 0 14px rgba(86, 217, 255, 0.3);
  transform: rotate(-1.5deg);
}

.temperature-line span::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 12%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 7px rgba(200, 255, 98, 0.09), 0 0 16px rgba(200, 255, 98, 0.5);
}

.temperature-range {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 19px;
  border-top: 1px solid rgba(189, 221, 236, 0.08);
  color: #6f8995;
  font: 500 0.57rem var(--font-mono);
}

.temperature-range strong {
  color: var(--lime);
}

.demo-kpi.cold strong {
  font-size: 1.55rem;
  letter-spacing: 0.03em;
}

.savings-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(200, 255, 98, 0.035), transparent 42%),
    var(--navy-2);
}

.savings-section::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(86, 217, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(86, 217, 255, 0.018),
    0 0 0 140px rgba(86, 217, 255, 0.012);
}

.savings-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: center;
}

.savings-copy h2 {
  margin: 10px 0 13px;
  color: white;
  font-size: clamp(2rem, 4vw, 3.8rem);
}

.savings-copy > p {
  color: #8da5b0;
  font-size: 0.9rem;
}

.calculator-note {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(86, 217, 255, 0.12);
  border-radius: 13px 13px 13px 4px;
  color: #75909d;
  background: rgba(86, 217, 255, 0.025);
  font-size: 0.65rem;
  line-height: 1.55;
}

.calculator-note i {
  flex: 0 0 auto;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(86, 217, 255, 0.26);
  border-radius: 50%;
  color: var(--cyan);
  font: normal 600 0.62rem var(--font-mono);
}

.savings-calculator {
  display: grid;
  grid-template-columns: minmax(250px, 0.88fr) minmax(280px, 1.12fr);
  overflow: hidden;
  border: 1px solid rgba(189, 221, 236, 0.13);
  border-radius: 25px 25px 25px 8px;
  background: #071925;
  box-shadow: 0 30px 80px rgba(0, 5, 10, 0.29);
}

.calculator-fields {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-right: 1px solid rgba(189, 221, 236, 0.09);
}

.calculator-fields label {
  display: grid;
  gap: 7px;
}

.calculator-fields label > span {
  color: #8fa6b1;
  font-size: 0.65rem;
  font-weight: 600;
}

.calculator-fields label > span small {
  color: var(--cyan);
  font: 500 0.53rem var(--font-mono);
}

.calculator-fields input[type="number"] {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid rgba(189, 221, 236, 0.14);
  border-radius: 11px 11px 11px 4px;
  outline: none;
  color: white;
  background: rgba(255, 255, 255, 0.03);
  font: 600 0.85rem var(--font-mono);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.calculator-fields input[type="number"]:focus {
  border-color: rgba(86, 217, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(86, 217, 255, 0.07);
}

.calculator-fields input[type="text"],
.calculator-fields select {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid rgba(189, 221, 236, 0.14);
  border-radius: 11px 11px 11px 4px;
  outline: none;
  color: white;
  background: #0b2130;
  font: 600 0.8rem var(--font-mono);
}

.calculator-fields input[type="text"]:focus,
.calculator-fields select:focus {
  border-color: rgba(86, 217, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(86, 217, 255, 0.07);
}

.calculator-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.loss-field {
  padding-top: 5px;
}

.loss-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loss-field output {
  color: var(--lime);
  font: 700 0.73rem var(--font-mono);
}

.loss-field input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 9px 0 3px;
  border-radius: 99px;
  outline: none;
  accent-color: var(--lime);
  background: rgba(189, 221, 236, 0.13);
  cursor: pointer;
}

.loss-field > small {
  color: #67818d;
  font-size: 0.56rem;
}

.calculator-result {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 26px;
  background:
    radial-gradient(circle at 90% 10%, rgba(200, 255, 98, 0.1), transparent 11rem),
    linear-gradient(145deg, rgba(86, 217, 255, 0.035), transparent);
}

.result-primary {
  display: grid;
  gap: 4px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(189, 221, 236, 0.09);
}

.result-primary span,
.result-secondary span {
  color: #7d96a2;
  font-size: 0.61rem;
}

.result-primary strong {
  color: var(--lime);
  font: 700 clamp(1.8rem, 3.3vw, 3.2rem) var(--font-display);
  letter-spacing: -0.06em;
}

.result-primary small {
  color: #6b8591;
  font-size: 0.56rem;
}

.result-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.result-secondary > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(189, 221, 236, 0.09);
  border-radius: 11px 11px 11px 4px;
  background: rgba(255, 255, 255, 0.018);
}

.result-secondary strong {
  color: #dce8ed;
  font-size: 0.71rem;
}

.result-secondary strong.alert {
  color: #ffb454;
}

.calculator-cta {
  justify-content: center;
  width: 100%;
  text-align: center;
}

.chat-bubble {
  right: 22px !important;
  bottom: 22px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 182px;
  padding: 10px 14px 10px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px 18px 18px 6px !important;
  background: linear-gradient(135deg, #25d366, #159447) !important;
  box-shadow: 0 17px 44px rgba(0, 9, 5, 0.35), 0 0 0 5px rgba(37, 211, 102, 0.08) !important;
}

.chat-bubble::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 2px solid #159447;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.13);
}

.whatsapp-icon {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px 12px 12px 4px;
  color: #159447;
  background: white;
  font-size: 1.08rem;
}

.whatsapp-label {
  display: grid;
  gap: 1px;
  text-align: left;
}

.whatsapp-label strong {
  color: white;
  font-size: 0.7rem;
  line-height: 1.15;
}

.whatsapp-label small {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.52rem;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .ecosystem-shell,
  .savings-shell {
    grid-template-columns: 1fr;
  }

  .ecosystem-grid {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
  }

  .platform-demo {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .demo-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-demo {
    grid-template-columns: 1fr;
  }

  .demo-tabs {
    grid-template-columns: repeat(4, minmax(135px, 1fr));
    overflow-x: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(189, 221, 236, 0.09);
  }

  .demo-tab {
    justify-content: center;
    white-space: nowrap;
  }

  .savings-calculator {
    grid-template-columns: 1fr;
  }

  .calculator-fields {
    border-right: 0;
    border-bottom: 1px solid rgba(189, 221, 236, 0.09);
  }
}

@media (max-width: 720px) {
  .ecosystem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecosystem-node:last-child {
    grid-column: 1 / -1;
  }

  .demo-panel {
    grid-template-columns: 1fr;
  }

  .demo-map-card,
  .temperature-card,
  .driver-score-card {
    min-height: 340px;
  }

  .demo-map-grid {
    min-height: 290px;
  }

  .demo-side-stack {
    grid-template-columns: 1fr 1fr;
  }

  .demo-feed {
    grid-column: 1 / -1;
  }

  .driver-score-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .ecosystem-section {
    padding: 26px 0 !important;
  }

  .platform-demo {
    border-radius: 20px 20px 20px 7px;
  }

  .demo-tabs {
    grid-template-columns: repeat(4, 150px);
  }

  .demo-toolbar {
    padding-inline: 14px;
  }

  .demo-toolbar-status {
    display: none;
  }

  .demo-panel {
    padding: 11px;
  }

  .demo-side-stack,
  .result-secondary {
    grid-template-columns: 1fr;
  }

  .demo-kpi {
    min-height: 108px;
  }

  .fuel-chart {
    height: 250px;
    gap: 6px;
    padding-inline: 17px;
  }

  .driver-score-card {
    padding: 28px 20px;
  }

  .savings-calculator {
    border-radius: 20px 20px 20px 7px;
  }

  .calculator-fields,
  .calculator-result {
    padding: 20px;
  }

  .chat-bubble {
    right: 13px !important;
    bottom: 13px !important;
    min-width: 0;
    padding: 8px !important;
    border-radius: 15px 15px 15px 5px !important;
  }

  .whatsapp-label {
    display: none;
  }

  .whatsapp-icon {
    width: 40px;
    height: 40px;
  }
}

/* V4 Uganda live-map demo, ten-industry overview and sensor calculator. */
.command-map.is-live-map::after {
  display: none;
}

.tracking-dashboard-active .command-grid {
  grid-template-columns: 1fr;
}

.tracking-dashboard-active .command-side {
  display: none;
}

.command-map.is-live-map {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(225px, .72fr);
  min-height: 392px;
  background: #061522;
}

.fleet-compact-stage,
.fleet-expanded-stage {
  position: relative;
  min-width: 0;
}

.uganda-fleet-map {
  width: 100%;
  min-height: 392px;
  background: #071925;
  filter: saturate(0.9) contrast(1.04);
}

.uganda-fleet-map .leaflet-tile-pane {
  filter: saturate(0.7) brightness(0.78) contrast(1.15) hue-rotate(158deg);
}

.uganda-fleet-map .leaflet-control-attribution {
  color: #76909b;
  background: rgba(4, 16, 25, 0.82);
  font-size: 9px;
}

.uganda-fleet-map .leaflet-control-attribution a {
  color: var(--cyan);
}

.fleet-vehicle-icon {
  background: none;
  border: 0;
}

.fleet-vehicle-icon > span {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  padding: 5px 7px;
  border: 1px solid var(--vehicle-color);
  border-radius: 9px 9px 9px 3px;
  color: #07131d;
  background: var(--vehicle-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--vehicle-color) 16%, transparent), 0 9px 22px rgba(0,0,0,.28);
  font-size: 15px;
}

.fleet-vehicle-icon b {
  font: 700 8px var(--font-mono);
  letter-spacing: .02em;
}

.fleet-live-detail {
  --selected-color: var(--lime);
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 17px;
  border-left: 1px solid rgba(189,221,236,.11);
  color: #eef7fa;
  background:
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--selected-color) 12%, transparent), transparent 9rem),
    #071925;
}

.fleet-live-detail > header {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(189,221,236,.09);
}

.fleet-detail-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--selected-color) 46%, transparent);
  border-radius: 12px 12px 12px 4px;
  background: color-mix(in srgb, var(--selected-color) 12%, transparent);
  font-size: 20px;
}

.fleet-live-detail header div { display:grid; gap:2px; }
.fleet-live-detail header small { color:#6f8995; font:600 .48rem var(--font-mono); letter-spacing:.1em; }
.fleet-live-detail header strong { font:700 .78rem var(--font-display); }
.fleet-live-detail header i { display:flex; align-items:center; gap:5px; color:var(--lime); font:normal 650 .49rem var(--font-mono); }
.fleet-live-detail header i b { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:command-pulse 1.8s infinite; }

.fleet-detail-location {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(86,217,255,.12);
  border-radius: 11px 11px 11px 4px;
  background: rgba(86,217,255,.035);
}
.fleet-detail-location > span { font-size:15px; }
.fleet-detail-location div { display:grid; gap:2px; }
.fleet-detail-location strong { font-size:.64rem; }
.fleet-detail-location small { color:#6f8995; font:500 .48rem var(--font-mono); }

.fleet-detail-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.fleet-detail-metrics > div { display:grid; gap:3px; padding:9px; border:1px solid rgba(189,221,236,.09); border-radius:9px 9px 9px 3px; background:rgba(255,255,255,.018); }
.fleet-detail-metrics span { color:#6f8995; font-size:.51rem; }
.fleet-detail-metrics strong { color:#dff7ff; font:700 .66rem var(--font-mono); }
.fleet-detail-metrics strong.good { color:var(--lime); }

.fleet-detail-route { display:grid; gap:4px; padding:10px; border-left:2px solid var(--selected-color); background:rgba(255,255,255,.018); }
.fleet-detail-route > span { color:#6f8995; font-size:.5rem; }
.fleet-detail-route > strong { font-size:.66rem; }
.fleet-detail-route > small { display:flex; align-items:center; gap:5px; color:#79939e; font-size:.48rem; }
.fleet-detail-route > small b { width:5px; height:5px; border-radius:50%; background:var(--lime); }

.fleet-selector { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fleet-selector button { display:flex; align-items:center; gap:5px; min-height:33px; padding:7px; border:1px solid rgba(189,221,236,.1); border-radius:8px 8px 8px 3px; color:#829ba6; background:rgba(255,255,255,.018); font:600 .47rem var(--font-mono); cursor:pointer; }
.fleet-selector button.active { border-color:color-mix(in srgb, var(--selected-color) 56%, transparent); color:white; background:color-mix(in srgb, var(--selected-color) 10%, transparent); }
.fleet-selector button:hover { color:white; border-color:rgba(86,217,255,.4); }

.map-expand-btn {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 500;
  padding: 9px 12px;
  border: 1px solid rgba(86, 217, 255, 0.36);
  border-radius: 11px 11px 11px 4px;
  color: #eef8fb;
  background: rgba(4, 16, 25, 0.88);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  font: 650 10px var(--font-mono);
  cursor: pointer;
}

.map-expand-btn:hover,
.map-expand-btn:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

.fleet-map-fallback {
  min-height: 344px;
  padding: 100px 30px 30px;
  color: white;
  background: radial-gradient(circle at center, rgba(86,217,255,.18), transparent 45%), #071925;
}

.fleet-map-fallback span { display:block; margin-top:8px; color:#91abb7; }

.fleet-map-dialog[hidden] { display: none; }
.fleet-map-dialog { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 22px; }
.fleet-map-backdrop { position: absolute; inset: 0; background: rgba(1,8,13,.78); backdrop-filter: blur(9px); }
.fleet-map-window {
  position: relative;
  width: min(960px, calc(100vw - 32px));
  max-height: min(790px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid rgba(86,217,255,.25);
  border-radius: 24px 24px 24px 8px;
  background: #071925;
  box-shadow: 0 44px 120px rgba(0,0,0,.58);
}
.fleet-map-window header,
.fleet-map-window footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; }
.fleet-map-window header { border-bottom:1px solid rgba(189,221,236,.1); }
.fleet-map-window header small { color:var(--lime); font:600 9px var(--font-mono); letter-spacing:.12em; }
.fleet-map-window header h2 { margin:3px 0 0; color:white; font-size:clamp(1.2rem,3vw,2rem); }
.fleet-map-close { width:42px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:50%; color:white; background:rgba(255,255,255,.04); font-size:24px; cursor:pointer; }
.fleet-expanded-stage { display:grid; grid-template-columns:minmax(0,1fr) 265px; }
.uganda-fleet-map.expanded { min-height: min(540px, 62vh); }
.fleet-live-detail.expanded-detail { min-height:min(540px, 62vh); }
.fleet-map-window footer { color:#86a0ab; font-size:.66rem; }
.fleet-map-window footer span { display:flex; align-items:center; gap:8px; }
.fleet-map-window footer i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); }
.fleet-map-window footer strong { color:var(--cyan); font:600 .58rem var(--font-mono); }
.map-dialog-open { overflow: hidden; }
.fleet-popup { display:grid; gap:6px; min-width:170px; color:#0b1c25; }
.fleet-popup strong { font-size:14px; }
.fleet-popup > span { color:#49636f; font-size:11px; }
.fleet-popup dl { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0 0; }
.fleet-popup dl div { padding:6px; border-radius:7px; background:#edf4f5; }
.fleet-popup dt { color:#66808a; font-size:9px; }
.fleet-popup dd { margin:2px 0 0; font-weight:700; font-size:11px; }

.industry-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.industry-chip {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 12px;
  border: 1px solid rgba(189,221,236,.12);
  border-radius: 13px 13px 13px 4px;
  color: white;
  background: rgba(255,255,255,.035);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.industry-chip > span { grid-row:1 / 3; display:grid; place-items:center; font-size:20px; }
.industry-chip strong { font-size:.78rem; }
.industry-chip small { color:#849da8; font-size:.58rem; }
.industry-chip:hover { transform:translateY(-2px); border-color:rgba(200,255,98,.34); background:rgba(200,255,98,.05); }

.sensor-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.sensor-product-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 13px;
  padding: 20px;
  border: 1px solid rgba(189,221,236,.13);
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(145deg, rgba(86,217,255,.045), rgba(255,255,255,.018));
}
.sensor-product-card > span { display:grid; width:42px; height:42px; place-items:center; border-radius:13px 13px 13px 4px; background:rgba(200,255,98,.09); font-size:22px; }
.sensor-product-card small { color:var(--lime); font:600 .54rem var(--font-mono); letter-spacing:.1em; }
.sensor-product-card h3 { margin:5px 0 7px; color:white; font-size:1rem; }
.sensor-product-card p { margin:0; color:#89a1ac; font-size:.74rem; }
.sensor-product-card { scroll-margin-top: 130px; }
.sensor-product-card:target { border-color:rgba(200,255,98,.58); box-shadow:0 0 0 4px rgba(200,255,98,.06), 0 20px 55px rgba(0,0,0,.22); }

.solution-action-preview {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(86,217,255,.15);
  border-radius: 17px 17px 17px 5px;
  background: #061722;
  box-shadow: 0 18px 50px rgba(0,5,10,.18);
}

.solution-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(189,221,236,.08);
}
.solution-preview-head > span { display:flex; align-items:center; gap:6px; color:var(--lime); font:650 .48rem var(--font-mono); letter-spacing:.1em; }
.solution-preview-head > span i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:solution-live 1.7s infinite; }
.solution-preview-head button { padding:5px 7px; border:1px solid rgba(86,217,255,.18); border-radius:7px; color:#86a0ab; background:rgba(86,217,255,.035); font:600 .45rem var(--font-mono); cursor:pointer; }
.solution-preview-head button:hover { color:white; border-color:rgba(200,255,98,.35); }

.solution-preview-screen {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  background:#081a26;
}
.solution-preview-screen > img { position:absolute; inset:-5%; width:110%; height:110%; object-fit:cover; filter:saturate(.78) contrast(1.08) brightness(.72); animation:solution-camera 11s ease-in-out infinite alternate; }
.solution-preview-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,16,25,.08),rgba(4,16,25,.7)), linear-gradient(90deg,rgba(4,16,25,.16),transparent 55%); }
.solution-scan-line { position:absolute; z-index:2; top:16%; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 13px rgba(86,217,255,.8); animation:solution-scan 4.4s linear infinite; }
.solution-hotspot { position:absolute; z-index:3; width:10px; height:10px; border:2px solid var(--lime); border-radius:50%; background:rgba(200,255,98,.25); box-shadow:0 0 0 0 rgba(200,255,98,.35); animation:solution-hotspot 2.3s ease-out infinite; }
.solution-hotspot.one { left:24%; top:43%; }
.solution-hotspot.two { left:62%; top:34%; animation-delay:-.8s; }
.solution-hotspot.three { left:78%; top:66%; animation-delay:-1.5s; }
.solution-preview-status { position:absolute; z-index:4; left:11px; right:11px; bottom:10px; display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:9px 10px; border:1px solid rgba(86,217,255,.22); border-radius:10px 10px 10px 3px; background:rgba(4,16,25,.82); backdrop-filter:blur(9px); }
.solution-preview-status small { grid-column:1 / -1; color:var(--cyan); font:600 .43rem var(--font-mono); letter-spacing:.08em; }
.solution-preview-status strong { overflow:hidden; color:white; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
.solution-preview-status > span { display:flex; align-items:center; gap:4px; color:#91a9b3; font-size:.45rem; }
.solution-preview-status > span i { width:5px; height:5px; border-radius:50%; background:var(--lime); }
.solution-preview-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-top:1px solid rgba(189,221,236,.07); background:rgba(189,221,236,.07); }
.solution-preview-metrics > div { display:grid; gap:2px; min-width:0; padding:9px 7px; background:#071925; }
.solution-preview-metrics span { overflow:hidden; color:#6f8995; font-size:.43rem; text-overflow:ellipsis; white-space:nowrap; }
.solution-preview-metrics strong { overflow:hidden; color:#e7f3f7; font:700 .57rem var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.solution-action-preview > p { margin:0; padding:9px 11px; color:#6f8995; font-size:.48rem; line-height:1.5; }

.solution-action-preview.is-paused *,
.solution-action-preview.is-paused *::before,
.solution-action-preview.is-paused *::after { animation-play-state:paused !important; }

@keyframes solution-camera { from { transform:scale(1) translate3d(-1%,0,0); } to { transform:scale(1.08) translate3d(2%,-1%,0); } }
@keyframes solution-scan { 0% { top:12%; opacity:0; } 12%,88% { opacity:1; } 100% { top:83%; opacity:0; } }
@keyframes solution-hotspot { 0% { box-shadow:0 0 0 0 rgba(200,255,98,.38); } 75%,100% { box-shadow:0 0 0 15px rgba(200,255,98,0); } }
@keyframes solution-live { 50% { opacity:.4; box-shadow:0 0 3px var(--lime); } }

@media (max-width: 600px) {
  .command-map.is-live-map { grid-template-columns:1fr; }
  .uganda-fleet-map { min-height: 310px; }
  .fleet-live-detail { border-top:1px solid rgba(189,221,236,.11); border-left:0; }
  .fleet-map-dialog { padding: 10px; }
  .fleet-map-window { width: calc(100vw - 20px); }
  .fleet-expanded-stage { grid-template-columns:1fr; max-height:68vh; overflow:auto; }
  .uganda-fleet-map.expanded { min-height: 44vh; }
  .fleet-live-detail.expanded-detail { min-height:0; }
  .fleet-map-window footer strong { display:none; }
  .industry-showcase-grid,
  .calculator-row { grid-template-columns: 1fr; }
  .sensor-products-grid { grid-template-columns: 1fr; }
  .solution-preview-screen { min-height:210px; }
}

/* V18: fuller standalone sensor pages and a unified floating partner strip. */
.sensor-page-questions {
  max-width: 620px;
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid rgba(189, 221, 236, 0.13);
  border-radius: 18px 18px 18px 5px;
  background: rgba(5, 24, 37, 0.72);
}

.sensor-page-questions > span {
  display: block;
  margin-bottom: 10px;
  color: var(--lime);
  font: 650 0.56rem var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sensor-page-questions ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sensor-page-questions li {
  position: relative;
  padding-left: 19px;
  color: #c8d8e3;
  font-size: 0.86rem;
  line-height: 1.55;
}

.sensor-page-questions li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--cyan);
}

.sensor-page-details-section {
  padding-block: clamp(64px, 8vw, 104px) !important;
}

.sensor-page-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 20px auto 0;
}

.sensor-process-card,
.sensor-action-card {
  min-width: 0;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(189, 221, 236, 0.13);
  border-radius: 25px 25px 25px 7px;
  background:
    linear-gradient(145deg, rgba(86, 217, 255, 0.035), transparent 56%),
    #071a27;
  box-shadow: 0 24px 64px rgba(0, 6, 12, 0.22);
}

.sensor-process-card h2,
.sensor-action-card h2 {
  max-width: 520px;
  margin: 10px 0 25px;
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.sensor-process-card ol {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sensor-process-card li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(189, 221, 236, 0.1);
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.018);
}

.sensor-process-card li > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px 10px 10px 3px;
  color: #07131d;
  background: var(--lime);
  font: 700 0.65rem var(--font-mono);
}

.sensor-process-card strong {
  display: block;
  margin: 1px 0 4px;
  color: #fff;
  font-family: var(--font-display);
}

.sensor-process-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.sensor-tick-list,
.sensor-plan-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sensor-tick-list li,
.sensor-plan-list li {
  position: relative;
  padding-left: 26px;
  color: #c7d7e2;
  font-size: 0.86rem;
  line-height: 1.55;
}

.sensor-tick-list li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--lime);
  font-weight: 800;
}

.sensor-action-card h3 {
  margin: 28px 0 13px;
  color: var(--cyan);
  font: 650 0.62rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sensor-plan-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sensor-plan-list li {
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(200, 255, 98, 0.13);
  border-radius: 12px 12px 12px 4px;
  background: rgba(200, 255, 98, 0.025);
}

.sensor-install-note {
  margin: 20px 0 0;
  padding-top: 17px;
  border-top: 1px solid rgba(189, 221, 236, 0.1);
  color: #8096a5;
  font-size: 0.74rem;
  line-height: 1.55;
}

.partners-strip {
  border-color: var(--stroke) !important;
  background: #081825 !important;
}

.partners-strip .label {
  color: #dffbff !important;
  border-color: rgba(5, 27, 40, 0.12) !important;
  background: #0a293a !important;
}

.partner-marquee {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.partner-box {
  padding-inline: 12px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.partner-box:hover {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-4px) scale(1.02);
}

.partner-box img {
  filter: none !important;
  image-rendering: auto;
}

.partner-box img[src$="buspro-wordmark-v21.png"] {
  max-height: 58px !important;
}

.partner-box img[src$="escort-transparent-v19.png"] {
  max-height: 56px !important;
}

/* V22: standalone product choices inside the All Products catalogue. */
.individual-products-section {
  padding-block: clamp(68px, 8vw, 108px) !important;
  border-top: 1px solid rgba(189, 221, 236, 0.1);
  background:
    radial-gradient(circle at 84% 8%, rgba(86, 217, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #071824 0%, #091c29 100%);
}

.individual-products-head {
  max-width: 820px;
  margin-bottom: 30px;
}

.individual-products-head p {
  max-width: 700px;
}

.individual-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.individual-product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(189, 221, 236, 0.14);
  border-radius: 20px 20px 20px 6px;
  color: inherit;
  background: linear-gradient(150deg, rgba(86, 217, 255, 0.06), rgba(255, 255, 255, 0.018));
  box-shadow: 0 18px 42px rgba(0, 6, 11, 0.16);
  text-decoration: none;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.individual-product-card:hover,
.individual-product-card:focus-visible {
  border-color: rgba(200, 255, 98, 0.5);
  box-shadow: 0 24px 55px rgba(0, 6, 11, 0.28), 0 0 0 1px rgba(200, 255, 98, 0.08);
  transform: translateY(-5px);
}

.individual-product-card:focus-visible {
  outline: 3px solid rgba(200, 255, 98, 0.68);
  outline-offset: 3px;
}

.individual-product-media {
  position: relative;
  height: 220px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(189, 221, 236, 0.11);
  background: #0a1d29;
}

.individual-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.45s ease;
}

.individual-product-card:hover .individual-product-media img {
  filter: brightness(1.06);
  transform: scale(1.035);
}

.individual-product-media span {
  position: absolute;
  right: 13px;
  bottom: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(200, 255, 98, 0.32);
  border-radius: 8px 8px 8px 3px;
  color: var(--lime);
  background: rgba(4, 16, 25, 0.88);
  font: 650 0.5rem var(--font-mono);
  letter-spacing: 0.08em;
}

.individual-product-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.individual-product-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.individual-product-heading > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px 13px 13px 4px;
  background: rgba(200, 255, 98, 0.09);
  font-style: normal;
  font-size: 21px;
}

.individual-product-heading small {
  color: var(--lime);
  font: 650 0.53rem var(--font-mono);
  letter-spacing: 0.1em;
}

.individual-product-heading h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.26;
}

.individual-product-copy p {
  margin: 15px 0 20px;
  color: #91aab5;
  font-size: 0.74rem;
  line-height: 1.7;
}

.individual-product-copy > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(189, 221, 236, 0.1);
  color: var(--lime);
  font: 650 0.62rem var(--font-mono);
  letter-spacing: 0.04em;
}

.individual-product-copy > strong span {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.individual-product-card:hover .individual-product-copy > strong span {
  transform: translateX(4px);
}

@media (max-width: 980px) {
  .individual-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .individual-products-grid {
    grid-template-columns: 1fr;
  }

  .individual-product-media {
    height: 240px;
  }
}

/* V23: close the product-to-partners gap with a compact, useful action bar. */
.product-end-cta {
  margin: 0 !important;
  padding: 24px 0 !important;
  border-top: 1px solid rgba(189, 221, 236, 0.08) !important;
  border-bottom: 0 !important;
  background: #081a27 !important;
}

.product-end-cta.motion-ready {
  opacity: 1 !important;
  transform: none !important;
}

.sensor-page-details-section,
.individual-products-section {
  padding-bottom: 24px !important;
}

.product-end-band {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 54px) !important;
  align-items: center !important;
  padding: clamp(24px, 3vw, 38px) !important;
  border-radius: 22px 22px 22px 7px !important;
  box-shadow: 0 18px 48px rgba(0, 7, 13, 0.24) !important;
}

.product-end-copy {
  max-width: 780px;
}

.product-end-copy .eyebrow {
  margin-bottom: 9px;
}

.product-end-copy h2 {
  margin: 0 0 9px;
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
}

.product-end-copy p {
  max-width: 720px;
  color: #94abb6 !important;
  font-size: 0.78rem;
  line-height: 1.65;
}

.product-end-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 15px;
}

.product-end-points span {
  color: #d5e5eb;
  font: 650 0.56rem var(--font-mono);
  letter-spacing: 0.035em;
}

.product-end-actions {
  display: grid;
  gap: 10px;
  min-width: 205px;
}

.product-end-actions .btn {
  justify-content: center;
  white-space: nowrap;
}

.product-end-cta + .partners-strip {
  margin-top: 0 !important;
  padding-top: 30px !important;
  border-top: 0 !important;
}

@media (max-width: 820px) {
  .product-end-cta {
    padding: 16px 0 !important;
  }

  .product-end-band {
    grid-template-columns: 1fr;
  }

  .product-end-actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .product-end-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sensor-page-knowledge-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sensor-page-questions {
    margin-top: 24px;
    padding: 17px;
  }

  .sensor-process-card,
  .sensor-action-card {
    padding: 22px 18px;
  }

  .sensor-plan-list {
    grid-template-columns: 1fr;
  }

  .sensor-plan-list li {
    min-height: 0;
  }
}

@media (min-width: 601px) and (max-width: 980px) {
  .sensor-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-route,
  .demo-vehicle,
  .demo-live-dot,
  .fuel-chart span {
    animation: none !important;
  }
  .solution-action-preview * { animation:none !important; }
}

/* V11: self-contained Uganda road map, useful home outcomes and richer products. */
.realistic-map-dashboard .command-map.is-live-map {
  overflow: hidden;
  background: #f3f0e7;
}

.realistic-map-dashboard .uganda-fleet-map {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: #e8e5dc;
  filter: none;
  isolation: isolate;
}

.road-map-layer {
  --road-map-zoom: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(var(--road-map-zoom));
  transform-origin: center;
  transition: transform .3s ease;
}

.uganda-road-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-land { fill: #e8e5dc; }
.map-water { fill: #a9d5df; }
.map-park { fill: #c7d8ae; opacity: .92; }
.map-blocks { fill: #d7d4cb; stroke: #c7c3b9; stroke-width: 2; opacity: .86; }
.map-minor-roads { fill: none; stroke: #fffdf7; stroke-width: 10; stroke-linecap: round; opacity: .92; }
.map-main-road { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.map-main-road.map-road-shadow { stroke: #d6b34d; stroke-width: 20; opacity: .95; }
.map-route-lines { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 7; opacity: .74; }
.map-route-lines path { opacity: .14; transition: opacity .25s ease, stroke-width .25s ease; }
.map-route-lines path.active { opacity: .92; stroke-width: 5; }
.map-route-lines .route-jinja { stroke: #5b8f24; }
.map-route-lines .route-entebbe { stroke: #257db7; }
.map-route-lines .route-masaka { stroke: #d98516; }
.map-route-lines .route-gayaza { stroke: #9c4f76; }
.map-labels { font-family: Inter, Arial, sans-serif; pointer-events: none; }
.map-labels .city { fill: #5b625c; font-size: 14px; font-weight: 650; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 4px; }
.map-labels .city.important { fill: #263932; font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.map-labels .road-name { fill: #8b6b21; font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.map-labels .water-label { fill: #3c7f91; font-size: 15px; font-weight: 700; letter-spacing: .12em; }

.map-vehicle-marker {
  position: absolute;
  z-index: 8;
  left: var(--vehicle-x);
  top: var(--vehicle-y);
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--vehicle-color);
  background: transparent;
  transform: translate(-50%, -50%);
  transition: left .18s linear, top .18s linear, scale .2s ease;
  cursor: pointer;
}
.map-vehicle-marker span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--vehicle-color);
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 8px 7px rgba(30,43,41,.38));
  font-size: 34px;
  line-height: 1;
  transform: rotate(var(--vehicle-bearing));
  transition: transform .18s linear;
}
.map-vehicle-marker.selected { z-index: 10; display:grid; }
.map-vehicle-marker.selected::after {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid color-mix(in srgb, var(--vehicle-color) 65%, white);
  border-radius:50%;
  opacity:.42;
  animation:vehicle-arrow-pulse 1.8s ease-out infinite;
}
.map-vehicle-marker:focus-visible { outline: 3px solid #102a3c; outline-offset: 3px; }

@keyframes vehicle-arrow-pulse {
  from { scale:.45; opacity:.62; }
  to { scale:1.55; opacity:0; }
}

.map-vehicle-popup {
  position: absolute;
  z-index: 9;
  left: var(--popup-x);
  top: var(--popup-y);
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid rgba(20,49,62,.22);
  border-radius: 11px 11px 11px 3px;
  color: #18333b;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 35px rgba(30,43,41,.22);
  transform: translate(-50%, -100%);
  backdrop-filter: blur(8px);
}
.map-vehicle-popup[hidden] { display: none; }
.map-vehicle-popup strong { font-size: .69rem; }
.map-vehicle-popup span { color: #4d6268; font-size: .58rem; }
.map-vehicle-popup small { color: #65797e; font: 600 .48rem var(--font-mono); }

.road-map-controls {
  position: absolute;
  z-index: 15;
  left: 12px;
  top: 52px;
  display: grid;
  gap: 4px;
}
.road-map-controls button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(35,65,73,.25);
  border-radius: 7px;
  color: #163742;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 14px rgba(35,65,73,.16);
  font-size: 19px;
  cursor: pointer;
}
.road-map-controls button:hover { border-color: #5b8f24; color: #46711c; }
.road-map-live { position:absolute; z-index:15; top:12px; left:12px; display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid rgba(35,65,73,.19); border-radius:18px; color:#27444d; background:rgba(255,255,255,.91); box-shadow:0 6px 16px rgba(35,65,73,.12); font:700 8px var(--font-mono); letter-spacing:.08em; }
.road-map-live i { width:7px; height:7px; border-radius:50%; background:#6ebd2f; box-shadow:0 0 0 4px rgba(110,189,47,.17); animation:command-pulse 1.8s infinite; }
.road-map-scale { position:absolute; z-index:15; left:14px; bottom:14px; display:flex; align-items:flex-end; gap:7px; color:#3f5d65; font:700 8px var(--font-mono); }
.road-map-scale span { width:70px; height:7px; border-right:2px solid #294b55; border-bottom:2px solid #294b55; border-left:2px solid #294b55; }
.realistic-map-dashboard .map-status-chip { top: 12px; right: 12px; left: auto; color:#27444d; border-color:rgba(35,65,73,.19); background:rgba(255,255,255,.92); }
.realistic-map-dashboard .map-expand-btn { border-color:rgba(35,65,73,.28); color:#173945; background:rgba(255,255,255,.94); }
.realistic-map-dashboard .map-expand-btn:hover { border-color:#5b8f24; color:#46711c; }
.realistic-map-dashboard .fleet-expanded-stage { background:#e8e5dc; }
.realistic-map-dashboard .uganda-fleet-map.expanded { min-height:min(590px,68vh); }

.fleet-questions-section { padding: clamp(64px,8vw,112px) 0; background:linear-gradient(180deg,#071824,#0a1d29); }
.fleet-questions-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.fleet-questions-head > div { max-width:720px; }
.fleet-questions-head h2 { margin:10px 0 12px; color:#fff; font-size:clamp(2rem,4.5vw,4rem); }
.fleet-questions-head p { margin:0; color:#8fa8b3; }
.fleet-question-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.fleet-question-grid article { position:relative; display:grid; align-content:start; min-height:260px; padding:22px; border:1px solid rgba(189,221,236,.13); border-radius:20px 20px 20px 6px; background:linear-gradient(145deg,rgba(86,217,255,.055),rgba(255,255,255,.018)); overflow:hidden; }
.fleet-question-grid article > span { position:absolute; top:13px; right:15px; color:rgba(200,255,98,.5); font:700 .56rem var(--font-mono); }
.fleet-question-grid article > i { display:grid; width:46px; height:46px; place-items:center; margin-bottom:30px; border-radius:14px 14px 14px 4px; background:rgba(200,255,98,.09); font-style:normal; font-size:23px; }
.fleet-question-grid h3 { margin:0 0 10px; color:#fff; font-size:1.05rem; }
.fleet-question-grid p { margin:0 0 18px; color:#8ca4ae; font-size:.77rem; }
.fleet-question-grid small { margin-top:auto; color:var(--lime); font:600 .52rem var(--font-mono); line-height:1.55; }
.fleet-evidence-strip { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px; padding:15px 18px; border:1px solid rgba(189,221,236,.1); border-radius:15px 15px 15px 5px; color:#8ea6b0; background:rgba(255,255,255,.025); font-size:.67rem; }
.fleet-evidence-strip strong { color:#fff; }
.fleet-evidence-strip b { color:var(--cyan); }
.fleet-evidence-strip i { color:var(--lime); font-style:normal; font-weight:700; }

.sensor-products-grid.sensor-products-rich { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.sensor-product-card.sensor-product-rich { display:block; overflow:hidden; padding:0; background:#071925; }
.sensor-card-media { position:relative; height:230px; overflow:hidden; margin:0; border-bottom:1px solid rgba(189,221,236,.12); background:#0a1d29; }
.sensor-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .45s ease; }
.sensor-product-card:hover .sensor-card-media img { transform:scale(1.035); filter:brightness(1.05); }
.sensor-card-media span { position:absolute; left:13px; bottom:12px; padding:6px 8px; border:1px solid rgba(200,255,98,.3); border-radius:8px 8px 8px 3px; color:var(--lime); background:rgba(4,16,25,.85); font:650 .5rem var(--font-mono); letter-spacing:.08em; }
.sensor-card-body { padding:20px; }
.sensor-card-title { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; }
.sensor-card-title > i { display:grid; width:42px; height:42px; place-items:center; border-radius:13px 13px 13px 4px; background:rgba(200,255,98,.09); font-style:normal; font-size:22px; }
.sensor-card-title small { color:var(--lime); font:600 .54rem var(--font-mono); letter-spacing:.1em; }
.sensor-card-title h3 { margin:4px 0 0; color:#fff; font-size:1.1rem; }
.sensor-card-purpose { margin:14px 0; color:#95acb6; font-size:.76rem; }
.sensor-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.sensor-detail-grid div { padding:10px; border:1px solid rgba(189,221,236,.09); border-radius:10px 10px 10px 3px; background:rgba(255,255,255,.02); }
.sensor-detail-grid span { display:block; margin-bottom:4px; color:#6f8995; font-size:.5rem; }
.sensor-detail-grid strong { color:#eaf5f8; font-size:.65rem; line-height:1.45; }
.sensor-card-result { margin-top:10px; padding:10px 12px; border-left:2px solid var(--lime); color:#9fb3bb; background:rgba(200,255,98,.035); font-size:.67rem; }
.sensor-card-result strong { color:var(--lime); }

body[data-page="solutions"] .industry-block {
  display:block !important;
  min-height:0 !important;
}
body[data-page="solutions"] .industry-media-col {
  display:grid;
  grid-template-columns:1fr;
  min-height:0;
  height:auto;
}
body[data-page="solutions"] .industry-media-col .industry-media { order:0 !important; min-height:clamp(330px,45vw,610px) !important; }
body[data-page="solutions"] .industry-media-col .media-extra-box {
  order:1 !important;
  padding:26px clamp(22px,4vw,52px);
  border-top:1px solid rgba(189,221,236,.1);
  background:linear-gradient(145deg,rgba(86,217,255,.045),rgba(255,255,255,.018));
}
body[data-page="solutions"] .media-extra-box h5 { margin:0 0 16px; color:var(--lime); font-size:1rem; }
body[data-page="solutions"] .media-highlights {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
body[data-page="solutions"] .media-highlights li {
  margin:0;
  padding:11px 12px;
  border:1px solid rgba(189,221,236,.09);
  border-radius:10px 10px 10px 3px;
  color:#9db2bc;
  background:rgba(255,255,255,.02);
  font-size:.69rem;
  line-height:1.5;
}
body[data-page="solutions"] .media-highlights strong { color:#edf6f8; }
body[data-page="solutions"] .media-box-btn { display:inline-flex; margin-top:0; }
body[data-page="solutions"] .industry-media-col .solution-action-preview {
  order:2 !important;
  display:grid;
  grid-template-rows:auto minmax(260px,36vw) auto auto;
  min-height:0;
  margin:0;
  border-width:1px 0 0;
  border-radius:0;
  box-shadow:none;
}
body[data-page="solutions"] .industry-media-col .solution-preview-screen { min-height:260px; max-height:520px; }
body[data-page="solutions"] .industry-media-col .solution-action-preview > p { padding:14px clamp(22px,4vw,52px); font-size:.68rem; }
body[data-page="solutions"] .industry-text {
  display:grid !important;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-auto-flow:row;
  align-items:start;
  gap:10px clamp(28px,5vw,72px);
  padding:clamp(30px,5vw,64px) !important;
  border-top:1px solid rgba(189,221,236,.1);
}
body[data-page="solutions"] .industry-text > .title-bar { grid-column:1 / -1; }
body[data-page="solutions"] .industry-text > h4,
body[data-page="solutions"] .industry-text > p { grid-column:1; }
body[data-page="solutions"] .industry-text > .specs-wrapper {
  grid-column:2;
  grid-row:2 / span 12;
  margin:0;
}

@media (max-width: 980px) {
  .fleet-question-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fleet-questions-head { align-items:start; flex-direction:column; }
}

@media (max-width: 700px) {
  .realistic-map-dashboard .uganda-fleet-map { min-height:360px; }
  .map-labels .city { font-size:17px; }
  .map-labels .road-name { display:none; }
  .map-vehicle-marker { width:36px; height:36px; }
  .map-vehicle-marker span { width:34px; height:34px; font-size:29px; }
  .map-vehicle-popup { min-width:132px; }
  .fleet-question-grid,
  .sensor-products-grid.sensor-products-rich { grid-template-columns:1fr; }
  .fleet-question-grid article { min-height:220px; }
  .sensor-card-media { height:210px; }
  .sensor-detail-grid { grid-template-columns:1fr; }
  body[data-page="solutions"] .media-highlights { grid-template-columns:1fr; }
  body[data-page="solutions"] .industry-text { grid-template-columns:1fr; }
  body[data-page="solutions"] .industry-text > .title-bar,
  body[data-page="solutions"] .industry-text > h4,
  body[data-page="solutions"] .industry-text > p,
  body[data-page="solutions"] .industry-text > .specs-wrapper { grid-column:1; grid-row:auto; }
  body[data-page="solutions"] .industry-media-col .solution-action-preview { grid-template-rows:auto minmax(230px,58vw) auto auto; }
}

/* V15: seamless page heroes and a practical two-way fuel planner. */
.hero {
  margin: 0 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

header.site-header,
header.site-header + .hero,
.hero + section,
.hero + .solution-card-container,
.solution-card-container + .solution-card-container,
section + section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

header.site-header {
  border-bottom: 0 !important;
}

body[data-page="solutions"] .hero,
body[data-page="products"] .hero,
body[data-page="about"] .hero {
  display: grid;
  min-height: calc(100svh - 78px);
  align-items: center;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

.calculator-example {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  padding: 15px 16px;
  border: 1px solid rgba(200, 255, 98, 0.18);
  border-left: 3px solid var(--lime);
  border-radius: 13px 13px 13px 4px;
  color: #8ea7b2;
  background: rgba(200, 255, 98, 0.035);
  font-size: 0.67rem;
  line-height: 1.55;
}

.calculator-example strong {
  color: var(--lime);
  font-size: 0.72rem;
}

.calculator-direction-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(86, 217, 255, 0.12);
  border-radius: 10px 10px 10px 3px;
  color: #7e99a5;
  background: rgba(86, 217, 255, 0.028);
  font-size: 0.58rem;
  line-height: 1.45;
}

.calculator-direction-note i {
  display: grid;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(86, 217, 255, 0.08);
  font-style: normal;
}

.calculator-conversion-row input {
  border-color: rgba(200, 255, 98, 0.25) !important;
  background: rgba(200, 255, 98, 0.035) !important;
}

.calculator-fields {
  border-right: 0 !important;
}

@media (max-width: 860px) {
  .calculator-fields {
    border-bottom: 0 !important;
  }
}

/* V30: one uninterrupted installation image with exact placement points. */
.solution-image-callouts {
  display: none !important;
}

.product-media-gallery,
.product-media-gallery.has-multiple {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  background: transparent !important;
}

.device-placement-caption,
.product-media .device-placement-caption,
.sensor-unit-media .device-placement-caption,
.sensor-page-media .device-placement-caption {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex !important;
  width: auto !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 15px;
  border-top: 1px solid rgba(189, 221, 236, 0.11);
  color: #d8e7eb !important;
  background: #071722 !important;
  font-size: 0.62rem !important;
  line-height: 1.45 !important;
}

.device-placement-caption > i {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 3px solid #071722;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 255, 98, 0.78), 0 0 15px rgba(200, 255, 98, 0.45);
}

.device-placement-caption > span {
  display: grid;
  gap: 2px;
}

.device-placement-caption small {
  color: var(--lime);
  font: 650 0.44rem var(--font-mono);
  letter-spacing: 0.09em;
}

.device-placement-pin > i {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
  background: #c8ff62 !important;
  box-shadow: 0 0 0 2px rgba(200, 255, 98, 0.94), 0 0 24px rgba(200, 255, 98, 0.9) !important;
}

/* Keep the installation photograph clear: only the exact green point sits on it.
   The device name remains in the caption immediately below the image. */
.product-media-stage .device-placement-pin > span,
.sensor-unit-media .device-placement-pin > span,
.sensor-page-media .device-placement-pin > span {
  display: none !important;
}

.product-installation-summary {
  margin: 0 0 22px;
  padding: 13px 15px;
  border-left: 2px solid var(--lime);
  color: #9db2bc;
  background: linear-gradient(90deg, rgba(200, 255, 98, 0.055), transparent);
  font-size: 0.66rem;
  line-height: 1.65;
}

.product-installation-summary strong {
  color: #e9f4f6;
}

.product-installation-summary > span {
  padding-inline: 5px;
  color: var(--lime);
}

body[data-page="solutions"] .industry-media > img.solution-client-labelled {
  filter: saturate(0.92) contrast(1.04) !important;
}

@media (max-width: 560px) {
  .device-placement-caption,
  .product-media .device-placement-caption,
  .sensor-unit-media .device-placement-caption,
  .sensor-page-media .device-placement-caption {
    align-items: flex-start;
    padding: 11px 12px;
    font-size: 0.56rem !important;
  }
}

/* V29: unobstructed product hardware, Wix-style device labelling and static information rails. */
.product-family-options {
  border-color: rgba(86, 217, 255, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.13), rgba(8, 27, 39, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(86, 217, 255, 0.12), 0 18px 42px rgba(0, 5, 10, 0.28) !important;
}

.product-family-options .family-option {
  color: #d8edf4 !important;
  border-color: rgba(86, 217, 255, 0.28) !important;
  background: #0c2b3a !important;
}

.product-family-options .family-option:hover,
.product-family-options .family-option.active {
  color: #06111d !important;
  border-color: var(--lime) !important;
  background: var(--lime) !important;
}

.product-media-annotated,
.sensor-unit-media,
.sensor-page-media {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #06131d !important;
}

.product-media-annotated::after,
.sensor-unit-media::after,
.sensor-page-media::after,
.industry-media::after {
  display: none !important;
}

.product-media-annotated > .product-media-badge,
.sensor-unit-media > span,
.sensor-page-media > figcaption {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: fit-content;
  margin: 14px 16px 0;
  justify-self: start;
}

.product-media-stage {
  position: relative;
  min-width: 0;
  margin-top: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(86, 217, 255, 0.08), transparent 30rem),
    #071722;
}

.product-media-gallery {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
}

.product-media-gallery.has-multiple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(189, 221, 236, 0.12);
}

.product-media-frame {
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(200, 255, 98, 0.07), transparent 19rem),
    #071722;
}

.product-media-frame > img,
.product-media-annotated .product-media-frame > img,
.sensor-unit-media .product-media-frame > img,
.sensor-page-media .product-media-frame > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  aspect-ratio: auto !important;
  display: block;
  border-radius: 0 !important;
  object-fit: cover !important;
  transform: none !important;
}

.product-media-frame.fit-contain > img {
  padding: clamp(18px, 3vw, 38px);
  object-fit: contain !important;
}

.product-media-frame > small {
  display: block;
  padding: 9px 12px;
  color: #a9bdc6;
  background: #071722;
  font: 650 0.5rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-image-callouts,
.sensor-image-callouts,
.sensor-page-image-callouts,
.solution-image-callouts {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 1px !important;
  background: rgba(189, 221, 236, 0.12) !important;
  pointer-events: auto !important;
}

.product-image-callouts > span,
.sensor-image-callouts > span,
.solution-image-callouts > span {
  min-width: 0;
  min-height: 86px;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #dce9ed !important;
  background: #081a25 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 0.61rem !important;
  line-height: 1.5 !important;
}

.product-image-callouts > span:last-child,
.sensor-image-callouts > span:last-child,
.solution-image-callouts > span:last-child {
  grid-column: auto !important;
  border-left: 2px solid var(--lime) !important;
  background: linear-gradient(145deg, rgba(200, 255, 98, 0.08), #081a25) !important;
}

.device-placement-pin > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body[data-page="solutions"] .industry-media-col .industry-media {
  display: grid !important;
  grid-template-rows: minmax(330px, auto) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-page="solutions"] .industry-media > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(330px, 42vw, 610px) !important;
  object-fit: cover !important;
  transform: none !important;
  background: #071722;
}

body[data-page="solutions"] .industry-media > img.solution-client-labelled {
  padding: clamp(8px, 1.5vw, 18px);
  object-fit: contain !important;
}

body[data-page="solutions"] .solution-image-callouts {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  .product-media-gallery.has-multiple {
    grid-template-columns: 1fr;
  }

  .product-image-callouts,
  .sensor-image-callouts,
  .sensor-page-image-callouts,
  .solution-image-callouts,
  body[data-page="solutions"] .solution-image-callouts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-image-callouts > span:last-child,
  .sensor-image-callouts > span:last-child,
  .solution-image-callouts > span:last-child {
    grid-column: auto !important;
  }
}

@media (max-width: 560px) {
  .product-media-frame,
  .product-media-frame > img,
  .product-media-annotated .product-media-frame > img,
  .sensor-unit-media .product-media-frame > img,
  .sensor-page-media .product-media-frame > img {
    min-height: 240px !important;
  }

  .product-image-callouts,
  .sensor-image-callouts,
  .sensor-page-image-callouts,
  .solution-image-callouts,
  body[data-page="solutions"] .solution-image-callouts {
    grid-template-columns: 1fr !important;
  }

  .product-image-callouts > span,
  .sensor-image-callouts > span,
  .solution-image-callouts > span {
    min-height: 0;
  }
}

/* V27: precise device-placement markers and fuller product guidance. */
.device-placement-pin {
  position: absolute;
  top: var(--pin-y);
  left: var(--pin-x);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}

.device-placement-pin.pin-label-left {
  flex-direction: row-reverse;
  transform: translate(-100%, -50%);
}

.device-placement-pin > i {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 3px solid #06131c;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px rgba(200, 255, 98, 0.9), 0 0 20px rgba(200, 255, 98, 0.68);
}

.device-placement-pin > i::after {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(200, 255, 98, 0.72);
  border-radius: 50%;
  content: "";
  animation: device-location-pulse 2.2s ease-out infinite;
}

.device-placement-pin > span {
  display: grid;
  min-width: 118px;
  max-width: 160px;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(200, 255, 98, 0.34);
  border-radius: 9px 9px 9px 3px;
  color: #f3f9f8;
  background: rgba(3, 15, 24, 0.9);
  box-shadow: 0 10px 24px rgba(0, 5, 10, 0.3);
  backdrop-filter: blur(12px);
  font-size: 0.59rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.device-placement-pin > span small {
  color: var(--lime);
  font: 650 0.4rem var(--font-mono);
  letter-spacing: 0.09em;
}

@keyframes device-location-pulse {
  0% { opacity: 0.9; transform: scale(0.65); }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}

.product-use-flow {
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid rgba(189, 221, 236, 0.12);
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(145deg, rgba(11, 36, 48, 0.82), rgba(4, 19, 29, 0.68));
}

.product-use-flow h3 {
  margin: 0 0 13px;
  color: var(--lime);
  font: 650 0.58rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-use-steps {
  display: grid;
  gap: 9px;
}

.product-use-steps article {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 10px;
  align-items: start;
}

.product-use-steps article > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(200, 255, 98, 0.25);
  border-radius: 50%;
  color: var(--lime);
  background: rgba(200, 255, 98, 0.07);
  font: 650 0.46rem var(--font-mono);
}

.product-use-steps strong {
  display: block;
  margin-bottom: 3px;
  color: #f0f7f8;
  font-size: 0.69rem;
}

.product-use-steps p {
  margin: 0;
  color: #91a8b2;
  font-size: 0.64rem;
  line-height: 1.55;
}

.sensor-unit-copy .product-use-flow {
  margin-top: 22px;
  margin-bottom: 18px;
}

#adas-dsm .product-image-callouts {
  top: auto;
  right: auto;
  bottom: 18px;
  left: 18px;
}

.sensor-page-image-callouts.callouts-left {
  right: auto;
  left: 18px;
}

.sensor-page-image-callouts.callouts-right {
  right: 18px;
  left: auto;
}

@media (max-width: 700px) {
  .device-placement-pin > span {
    min-width: 92px;
    max-width: 118px;
    padding: 6px 7px;
    font-size: 0.5rem;
  }

  .device-placement-pin > span small {
    font-size: 0.34rem;
  }

  .product-use-flow {
    padding: 15px;
  }

  #adas-dsm .product-image-callouts {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .sensor-page-image-callouts.callouts-left,
  .sensor-page-image-callouts.callouts-right {
    right: 10px;
    left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-placement-pin > i::after {
    animation: none;
  }
}

/* V17: independent pages for every sensor product. */
.sensor-overview-head {
  max-width: 820px;
  margin-bottom: 30px;
}

.sensor-overview-card {
  display: grid;
  grid-template-rows: auto 1fr;
}

.sensor-overview-card .sensor-card-body {
  display: grid;
  align-content: start;
}

.sensor-page-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 18px;
  padding: 10px 13px;
  border: 1px solid rgba(200, 255, 98, 0.25);
  border-radius: 10px 10px 10px 3px;
  color: var(--lime);
  background: rgba(200, 255, 98, 0.04);
  font: 650 0.61rem var(--font-mono);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.sensor-page-link:hover {
  border-color: rgba(200, 255, 98, 0.55);
  background: rgba(200, 255, 98, 0.08);
  transform: translateY(-2px);
}

.sensor-page-hero {
  margin: 0 !important;
  padding: clamp(62px, 8vw, 112px) 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(86, 217, 255, 0.1), transparent 28rem),
    linear-gradient(145deg, rgba(200, 255, 98, 0.035), transparent 42%),
    #061522;
}

.sensor-page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}

.sensor-page-copy h1 {
  margin: 12px 0 18px;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.sensor-page-copy .lead {
  max-width: 620px;
  margin-bottom: 28px;
}

.sensor-back-link {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--cyan);
  font: 650 0.6rem var(--font-mono);
  text-decoration: none;
}

.sensor-back-link:hover {
  color: var(--lime);
}

.sensor-page-media {
  position: relative;
  min-height: 440px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(189, 221, 236, 0.16);
  border-radius: 30px 30px 30px 9px;
  background: #081c29;
  box-shadow: 0 32px 90px rgba(0, 6, 12, 0.4);
}

.sensor-page-media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(2, 12, 20, 0.82));
  pointer-events: none;
}

.sensor-page-media img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  display: block;
  object-fit: cover;
}

.sensor-page-media figcaption {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  padding: 8px 11px;
  border: 1px solid rgba(200, 255, 98, 0.3);
  border-radius: 9px 9px 9px 3px;
  color: var(--lime);
  background: rgba(4, 16, 25, 0.84);
  font: 650 0.56rem var(--font-mono);
  letter-spacing: 0.08em;
}

.sensor-page-details-section {
  margin: 0 !important;
  background: var(--navy-2);
}

.sensor-page-details {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(25px, 4vw, 46px);
  border: 1px solid rgba(189, 221, 236, 0.13);
  border-radius: 28px 28px 28px 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 60%),
    #081c29;
  box-shadow: 0 28px 74px rgba(0, 6, 12, 0.28);
}

.sensor-page-details .sensor-card-title {
  margin-bottom: 26px;
}

.sensor-page-details .sensor-card-title h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
}

.sensor-page-details .sensor-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sensor-page-details .sensor-card-result {
  margin: 24px 0 0;
}

.sensor-page-switcher-section {
  margin: 0 !important;
}

.sensor-page-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sensor-page-switcher a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 15px;
  border: 1px solid rgba(189, 221, 236, 0.12);
  border-radius: 15px 15px 15px 4px;
  color: #dce8ed;
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.sensor-page-switcher a:hover {
  border-color: rgba(200, 255, 98, 0.35);
  background: rgba(200, 255, 98, 0.045);
  transform: translateY(-2px);
}

.sensor-page-switcher span {
  font-size: 1.25rem;
}

.sensor-page-switcher strong {
  font-size: 0.69rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .sensor-page-hero-grid {
    grid-template-columns: 1fr;
  }

  .sensor-page-media,
  .sensor-page-media img {
    min-height: 390px;
  }

  .sensor-page-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sensor-page-hero {
    padding: 54px 0;
  }

  .sensor-page-media,
  .sensor-page-media img {
    min-height: 290px;
  }

  .sensor-page-details .sensor-detail-grid,
  .sensor-page-switcher {
    grid-template-columns: 1fr;
  }
}

/* V16: vehicle-specific fuel planning for mixed Ugandan fleets. */
.vehicle-lookup-panel {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(86, 217, 255, 0.12);
  border-radius: 14px 14px 14px 4px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.035), transparent 70%),
    rgba(2, 14, 23, 0.32);
}

.vehicle-lookup-panel[hidden] {
  display: none !important;
}

.vehicle-lookup-status,
.manual-rate-note {
  padding: 10px 11px;
  border-left: 2px solid var(--cyan);
  color: #7f9aa6;
  background: rgba(86, 217, 255, 0.035);
  font: 500 0.55rem/1.55 var(--font-mono);
}

.vehicle-lookup-status[data-state="success"] {
  border-left-color: var(--lime);
  color: #a9c0c9;
  background: rgba(200, 255, 98, 0.035);
}

.vehicle-lookup-status[data-state="error"] {
  border-left-color: #ffb454;
  color: #c7a376;
  background: rgba(255, 180, 84, 0.035);
}

.manual-rate-note {
  border-left-color: var(--lime);
}

.vehicle-source-link {
  width: fit-content;
  color: var(--cyan);
  font: 600 0.53rem var(--font-mono);
  text-decoration: none;
}

.vehicle-source-link:hover {
  color: var(--lime);
}

.calculator-fields select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.result-secondary > .result-source {
  grid-column: 1 / -1;
  border-color: rgba(200, 255, 98, 0.13);
}

.result-secondary > .result-source strong {
  color: var(--lime);
  line-height: 1.45;
}

@media (max-width: 600px) {
  body[data-page="solutions"] .hero,
  body[data-page="products"] .hero,
  body[data-page="about"] .hero {
    min-height: calc(100svh - 70px);
    padding-block: 72px 64px !important;
  }
}

/* V28: stronger customer-facing product and solution explanations. */
.product-business-case {
  display: grid;
  gap: 8px;
  margin: 20px 0 22px;
  padding: 17px 19px;
  border: 1px solid rgba(200, 255, 98, 0.18);
  border-left: 3px solid var(--lime);
  border-radius: 14px 14px 14px 4px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 255, 98, 0.08), transparent 42%),
    rgba(8, 27, 39, 0.72);
}

.product-business-case > span {
  color: var(--lime);
  font: 650 0.54rem var(--font-mono);
  letter-spacing: 0.12em;
}

.product-business-case > p {
  margin: 0 !important;
  color: #c7d7dd !important;
  font-size: 0.76rem !important;
  line-height: 1.7 !important;
}

.sensor-page-business-case {
  max-width: 690px;
  margin-top: 22px;
}

.solution-outcome {
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 19px 0 22px;
  padding: 15px 17px;
  border: 1px solid rgba(200, 255, 98, 0.16);
  border-radius: 14px 14px 14px 4px;
  background: linear-gradient(125deg, rgba(200, 255, 98, 0.07), rgba(86, 217, 255, 0.035));
}

.solution-outcome strong {
  color: var(--lime);
  font: 650 0.56rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.solution-outcome span {
  color: #c5d5db;
  font-size: 0.7rem;
  line-height: 1.62;
}

@media (max-width: 560px) {
  .solution-outcome {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

/* V24: every sensor is an independent catalogue unit and product route. */
.products-filter-nav {
  max-width: 1220px;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
}

.product-sensor-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: #a9bec9;
  background: rgba(7, 20, 31, 0.66);
  backdrop-filter: blur(10px);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.product-sensor-link:hover,
.product-sensor-link:focus-visible {
  color: var(--night);
  border-color: var(--lime);
  background: var(--lime);
  box-shadow: 0 10px 28px rgba(168, 237, 53, 0.16);
  transform: translateY(-2px);
}

.product-sensor-link:focus-visible {
  outline: 3px solid rgba(200, 255, 98, 0.38);
  outline-offset: 3px;
}

.sensor-catalogue-unit {
  padding-block: clamp(44px, 6vw, 72px) !important;
  border-top: 1px solid rgba(189, 221, 236, 0.08);
}

.sensor-catalogue-unit.alt {
  background:
    radial-gradient(circle at 90% 12%, rgba(86, 217, 255, 0.07), transparent 24rem),
    #081a27 !important;
}

.sensor-standalone-unit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}

.sensor-standalone-unit.is-reverse .sensor-unit-media {
  order: 2;
}

.sensor-unit-media {
  position: relative;
  min-height: 400px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(189, 221, 236, 0.15);
  border-radius: 24px 24px 24px 8px;
  background: #081a27;
  box-shadow: 0 24px 58px rgba(0, 7, 13, 0.28);
}

.sensor-unit-media::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(180deg, transparent, rgba(3, 14, 23, 0.72));
  pointer-events: none;
}

.sensor-unit-media img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.55s ease;
}

.sensor-catalogue-unit:hover .sensor-unit-media img {
  transform: scale(1.025);
}

.sensor-unit-media > span {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(200, 255, 98, 0.34);
  border-radius: 9px 9px 9px 3px;
  color: var(--lime);
  background: rgba(4, 16, 25, 0.86);
  font: 650 0.54rem var(--font-mono);
  letter-spacing: 0.1em;
}

.sensor-unit-copy {
  min-width: 0;
}

.sensor-unit-copy h2 {
  margin: 10px 0 14px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.sensor-unit-copy > p {
  max-width: 650px;
  color: #a7bac3;
  font-size: 0.86rem;
  line-height: 1.75;
}

.sensor-unit-facts {
  display: grid;
  gap: 0;
  margin: 24px 0 20px;
  border-block: 1px solid rgba(189, 221, 236, 0.11);
}

.sensor-unit-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.36fr) minmax(0, 0.64fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(189, 221, 236, 0.08);
}

.sensor-unit-facts > div:last-child {
  border-bottom: 0;
}

.sensor-unit-facts span {
  color: #6f8a96;
  font: 600 0.55rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sensor-unit-facts strong {
  color: #d9e7eb;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
}

.sensor-unit-value {
  margin-bottom: 24px !important;
}

.sensor-unit-value strong {
  color: var(--lime);
}

@media (max-width: 860px) {
  .products-filter-nav {
    justify-content: flex-start;
  }

  .sensor-standalone-unit {
    grid-template-columns: 1fr;
  }

  .sensor-standalone-unit.is-reverse .sensor-unit-media {
    order: 0;
  }

  .sensor-unit-media,
  .sensor-unit-media img {
    min-height: 330px;
  }
}

@media (max-width: 560px) {
  .products-filter-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .products-filter-nav > * {
    width: 100%;
    min-width: 0;
    padding-inline: 8px !important;
    font-size: 0.66rem;
    text-align: center;
  }

  .sensor-unit-media,
  .sensor-unit-media img {
    min-height: 255px;
  }

  .sensor-unit-facts > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* V25: grouped tracker and camera families with standalone product units. */
.family-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: #a9bec9;
  background: rgba(7, 20, 31, 0.66);
  backdrop-filter: blur(10px);
  font: 600 0.74rem var(--font-body);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.family-toggle > span {
  color: var(--lime);
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.family-toggle:hover,
.family-toggle.is-open,
.family-toggle:focus-visible {
  color: var(--night);
  border-color: var(--lime);
  background: var(--lime);
  box-shadow: 0 10px 28px rgba(168, 237, 53, 0.16);
  transform: translateY(-2px);
}

.family-toggle:hover > span,
.family-toggle.is-open > span,
.family-toggle:focus-visible > span {
  color: var(--night);
}

.family-toggle.is-open > span {
  transform: rotate(180deg);
}

.family-toggle:focus-visible {
  outline: 3px solid rgba(200, 255, 98, 0.38);
  outline-offset: 3px;
}

.product-family-options {
  display: flex;
  max-width: 1180px;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: center;
  margin: -20px auto 32px;
  padding: 15px;
  border: 1px solid rgba(189, 221, 236, 0.13);
  border-radius: 18px 18px 18px 6px;
  background: rgba(5, 18, 28, 0.86);
  box-shadow: 0 18px 42px rgba(0, 5, 10, 0.2);
  backdrop-filter: blur(14px);
}

.product-family-options[hidden] {
  display: none !important;
}

.product-family-options > span {
  width: 100%;
  color: var(--lime);
  font: 650 0.56rem var(--font-mono);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.family-option {
  min-height: 38px !important;
  padding: 8px 14px !important;
  font-size: 0.68rem !important;
}

.core-product-section {
  padding-block: clamp(48px, 6vw, 80px) !important;
  border-top: 1px solid rgba(189, 221, 236, 0.075);
}

.core-product-section.alt {
  background:
    radial-gradient(circle at 88% 12%, rgba(86, 217, 255, 0.065), transparent 24rem),
    #081a27 !important;
}

.core-product-unit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.95fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}

.core-product-unit.is-reverse .product-media {
  order: 2;
}

.core-product-copy h2 {
  margin: 10px 0 15px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.15rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
}

.core-product-copy > p {
  max-width: 650px;
  color: #a7bac3;
  font-size: 0.86rem;
  line-height: 1.76;
}

.core-product-copy .tag-row {
  margin-top: 20px;
}

.core-product-facts {
  display: grid;
  margin: 23px 0 24px;
  border-block: 1px solid rgba(189, 221, 236, 0.11);
}

.core-product-facts > div {
  display: grid;
  grid-template-columns: minmax(105px, 0.3fr) minmax(0, 0.7fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(189, 221, 236, 0.08);
}

.core-product-facts > div:last-child {
  border-bottom: 0;
}

.core-product-facts span {
  color: #6f8a96;
  font: 650 0.53rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.core-product-facts strong {
  color: #d9e7eb;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
}

.product-media-annotated {
  min-height: 430px;
}

.product-media-annotated img {
  min-height: 430px !important;
}

.product-image-callouts {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  max-width: min(56%, 305px);
  gap: 8px;
}

/* Keep the labels in open image space so the device remains unobstructed. */
#magnetic-gps .product-image-callouts,
#buspro-w100 .product-image-callouts,
#dash-cam .product-image-callouts,
#adas-dsm .product-image-callouts {
  right: auto;
  left: 18px;
}

.product-image-callouts > span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(189, 221, 236, 0.19);
  border-radius: 12px 12px 12px 4px;
  color: #e8f2f5;
  background: rgba(3, 15, 24, 0.84);
  box-shadow: 0 12px 25px rgba(0, 5, 10, 0.2);
  backdrop-filter: blur(12px);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.35;
}

.product-image-callouts small {
  color: var(--lime);
  font: 650 0.47rem var(--font-mono);
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  .core-product-unit {
    grid-template-columns: 1fr;
  }

  .core-product-unit.is-reverse .product-media {
    order: 0;
  }

  .product-media-annotated,
  .product-media-annotated img {
    min-height: 360px !important;
  }
}

@media (max-width: 560px) {
  .family-toggle {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 0.68rem;
  }

  .product-family-options {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: -18px;
  }

  .product-family-options > span,
  .family-option {
    width: 100%;
  }

  .core-product-facts > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .product-media-annotated,
  .product-media-annotated img {
    min-height: 300px !important;
  }

  .product-image-callouts {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
    grid-template-columns: 1fr 1fr;
  }

  #magnetic-gps .product-image-callouts,
  #buspro-w100 .product-image-callouts,
  #dash-cam .product-image-callouts,
  #adas-dsm .product-image-callouts {
    right: 12px;
    left: 12px;
  }

  .product-image-callouts > span {
    padding: 9px;
    font-size: 0.59rem;
  }
}

/* V26: concise operational wording placed directly on solution and product imagery. */
.solution-image-callouts,
.sensor-image-callouts {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}

.solution-image-callouts > span,
.sensor-image-callouts > span {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(189, 221, 236, 0.18);
  border-radius: 12px 12px 12px 4px;
  color: #eef7f8;
  background: rgba(3, 15, 24, 0.84);
  box-shadow: 0 14px 28px rgba(0, 5, 10, 0.25);
  backdrop-filter: blur(13px);
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.38;
}

.solution-image-callouts small,
.sensor-image-callouts small {
  color: var(--lime);
  font: 650 0.46rem var(--font-mono);
  letter-spacing: 0.1em;
}

.solution-image-callouts > span:last-child,
.sensor-image-callouts > span:last-child,
.product-image-callouts > span:last-child {
  border-color: rgba(200, 255, 98, 0.3);
  background: linear-gradient(145deg, rgba(18, 42, 35, 0.92), rgba(3, 15, 24, 0.88));
}

.sensor-page-image-callouts {
  top: 18px;
  right: 18px;
  bottom: auto;
  left: auto;
  width: min(66%, 390px);
  grid-template-columns: 1fr;
}

.sensor-page-image-callouts > span {
  padding: 10px 12px;
}

@media (max-width: 700px) {
  .solution-image-callouts,
  .sensor-image-callouts {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .solution-image-callouts > span,
  .sensor-image-callouts > span {
    padding: 8px 9px;
    font-size: 0.56rem;
  }

  .solution-image-callouts > span:last-child,
  .sensor-image-callouts > span:last-child,
  .product-image-callouts > span:last-child {
    grid-column: 1 / -1;
  }

  .sensor-page-image-callouts {
    top: auto;
    right: 10px;
    bottom: 54px;
    left: 10px;
    width: auto;
    grid-template-columns: 1fr;
  }
}

/* V32: regenerated solution photography with sharp themed wording.
   The labels remain real HTML so they stay clear, responsive and editable. */
body[data-page="solutions"] .industry-media {
  position: relative !important;
  display: block !important;
  aspect-ratio: 3 / 2;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(112, 214, 226, 0.18);
  border-radius: 18px;
  background: #06141d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

body[data-page="solutions"] .industry-media::after {
  position: absolute;
  inset: 36% 0 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(2, 12, 18, 0.22) 35%, rgba(2, 12, 18, 0.82));
}

body[data-page="solutions"] .industry-media > img.solution-ai-v36 {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 2;
  object-fit: cover !important;
  filter: saturate(0.94) contrast(1.03) brightness(0.94) !important;
  transform: none !important;
}

body[data-page="solutions"] .solution-image-callouts {
  position: absolute !important;
  inset: auto 12px 12px !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="solutions"] .solution-image-callouts > span {
  display: block !important;
  min-width: 0;
  padding: 9px 10px !important;
  border: 1px solid rgba(200, 255, 98, 0.2) !important;
  border-left: 2px solid #c8ff62 !important;
  border-radius: 9px !important;
  color: #e8f2f3 !important;
  background: linear-gradient(135deg, rgba(5, 20, 29, 0.9), rgba(7, 30, 38, 0.78)) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(12px);
  font-size: 0.55rem !important;
  line-height: 1.38 !important;
}

body[data-page="solutions"] .solution-image-callouts small {
  display: block !important;
  margin-bottom: 4px;
  color: #c8ff62 !important;
  font: 700 0.41rem/1.2 var(--font-mono) !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 700px) {
  body[data-page="solutions"] .industry-media {
    border-radius: 13px;
  }

  body[data-page="solutions"] .solution-image-callouts {
    inset: auto 7px 7px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-page="solutions"] .solution-image-callouts > span {
    padding: 6px 7px !important;
    font-size: 0.48rem !important;
    line-height: 1.3 !important;
  }

  body[data-page="solutions"] .solution-image-callouts > span:last-child {
    grid-column: 1 / -1;
  }

  body[data-page="solutions"] .solution-image-callouts small {
    margin-bottom: 2px;
    font-size: 0.35rem !important;
  }
}

/* V36: exact Wix-style installation names with precise device points.
   Labels are HTML rather than baked into the photographs, keeping every name
   sharp, editable and accessible on desktop and mobile. */
body[data-page="solutions"] .solution-device-map {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

body[data-page="solutions"] .solution-device-callout {
position: absolute;
width: 0;
  height: 0;
  color: #eef9f3;
}

body[data-page="solutions"] .solution-device-callout::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  content: "";
  border: 2px solid #e7ffb3;
  border-radius: 50%;
  background: #a9ee48;
  box-shadow: 0 0 0 4px rgba(169, 238, 72, 0.18), 0 0 18px rgba(169, 238, 72, 0.8);
  transform: translate(-50%, -50%);
}

body[data-page="solutions"] .solution-device-callout > span {
  position: absolute;
  display: block;
  width: max-content;
  max-width: 178px;
  padding: 7px 9px 7px 11px;
  border: 1px solid rgba(200, 255, 98, 0.48);
  border-left: 3px solid #c8ff62;
  border-radius: 7px;
  color: #f3fbf6;
  background: linear-gradient(135deg, rgba(3, 19, 25, 0.98), rgba(8, 39, 42, 0.96));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.05);
  font: 750 0.56rem/1.24 var(--font-mono);
  letter-spacing: 0.025em;
  text-wrap: balance;
}

body[data-page="solutions"] .solution-device-callout > span::before {
  position: absolute;
  content: "";
  background: #c8ff62;
  box-shadow: 0 0 8px rgba(200, 255, 98, 0.5);
}

body[data-page="solutions"] .solution-device-callout.label-right > span {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

body[data-page="solutions"] .solution-device-callout.label-right > span::before {
  right: 100%;
  top: 50%;
  width: 18px;
  height: 1px;
}

body[data-page="solutions"] .solution-device-callout.label-left > span {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

body[data-page="solutions"] .solution-device-callout.label-left > span::before {
  left: 100%;
  top: 50%;
  width: 18px;
  height: 1px;
}

body[data-page="solutions"] .solution-device-callout.label-up > span {
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

body[data-page="solutions"] .solution-device-callout.label-up > span::before {
  left: 50%;
  top: 100%;
  width: 1px;
  height: 18px;
}

@media (max-width: 700px) {
  body[data-page="solutions"] .solution-device-callout::before {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(169, 238, 72, 0.17), 0 0 12px rgba(169, 238, 72, 0.7);
  }

  body[data-page="solutions"] .solution-device-callout > span {
    max-width: 108px;
    padding: 4px 5px 4px 7px;
    border-left-width: 2px;
    border-radius: 5px;
    font-size: 0.41rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  body[data-page="solutions"] .solution-device-callout.label-right > span {
    left: 11px;
  }

  body[data-page="solutions"] .solution-device-callout.label-left > span {
    right: 11px;
  }

  body[data-page="solutions"] .solution-device-callout.label-right > span::before,
  body[data-page="solutions"] .solution-device-callout.label-left > span::before {
    width: 11px;
  }

  body[data-page="solutions"] .solution-device-callout.label-up > span {
    bottom: 11px;
  }

  body[data-page="solutions"] .solution-device-callout.label-up > span::before {
    height: 11px;
  }
}

/* V34: reliable full-height mobile navigation.
   iOS can treat fixed descendants of a backdrop-filtered header as if they are
   fixed to the header itself. Removing that mobile containing block and giving
   the drawer its own layer keeps every page link visible and tappable. */
@media (max-width: 820px) {
  html {
    overflow-x: hidden;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  header.site-header {
    z-index: 5000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
  }

  .nav-row {
    overflow: visible !important;
  }

  .nav-row > div:last-child,
  .burger {
    position: relative;
    z-index: 5002;
  }

  nav.main-nav {
    position: fixed !important;
    top: var(--mobile-nav-top, 82px) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    z-index: 5001 !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 12px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(110%, 0, 0) !important;
    transition: transform 0.26s ease, opacity 0.2s ease, visibility 0.26s !important;
    background: rgba(5, 16, 26, 0.995) !important;
  }

  nav.main-nav.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  nav.main-nav > ul {
    flex: 0 0 auto;
    width: 100% !important;
    min-height: min-content;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  nav.main-nav > ul > li,
  nav.main-nav > ul > li > a.nav-link {
    width: 100%;
  }

  nav.main-nav a.nav-link {
    position: relative;
    z-index: 1;
    min-height: 50px !important;
    color: #e5f0f3 !important;
    touch-action: manipulation;
  }

  nav.main-nav li.active > a.nav-link {
    color: #07111b !important;
  }

  nav.main-nav .dropdown,
  nav.main-nav .dropdown.dropdown-wide,
  nav.main-nav .dropdown.dropdown-products {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 6px 0 10px !important;
    overflow: visible !important;
    transform: none !important;
  }

  nav.main-nav .dropdown a {
    min-height: 48px;
    padding: 10px !important;
    touch-action: manipulation;
  }
}


body[data-page="solutions"] .solution-device-legend {
  display: none;
}

/* V35: mobile solutions readability + reliable accordion navigation.
   Desktop device placement remains unchanged; on small screens the exact
   green device points stay on the image while their names move into a clean
   numbered legend below it. Monitoring summaries also move below the image
   instead of covering the vehicle. */
@media (max-width: 700px) {
  body[data-page="solutions"] .industry-media {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="solutions"] .industry-media > img.solution-ai-v36 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  body[data-page="solutions"] .solution-device-map {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Keep the exact point visible; move long wording out of the picture. */
  body[data-page="solutions"] .solution-device-callout > span {
    display: none !important;
  }

  body[data-page="solutions"] .solution-device-callout::after {
    position: absolute;
    left: 7px;
    top: 7px;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    content: attr(data-marker);
    border: 1px solid rgba(231, 255, 179, 0.9);
    border-radius: 50%;
    color: #07111b;
    background: #c8ff62;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    font: 800 0.48rem/1 var(--font-mono);
    transform: translate(-50%, -50%);
  }

  body[data-page="solutions"] .solution-device-legend {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 9px;
    border-top: 1px solid rgba(200, 255, 98, 0.15);
    background: rgba(4, 18, 27, 0.98);
  }

  body[data-page="solutions"] .solution-device-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(200, 255, 98, 0.14);
    border-radius: 8px;
    color: #eaf4f1;
    background: rgba(8, 34, 40, 0.72);
    font: 700 0.55rem/1.35 var(--font-mono);
  }

  body[data-page="solutions"] .solution-device-legend-number {
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #07111b;
    background: #c8ff62;
    font-size: 0.5rem;
    font-weight: 900;
  }

  body[data-page="solutions"] .solution-image-callouts,
  body[data-page="solutions"] .industry-media .solution-image-callouts {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 9px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(3, 13, 21, 0.99) !important;
  }

  body[data-page="solutions"] .solution-image-callouts > span,
  body[data-page="solutions"] .solution-image-callouts > span:last-child {
    grid-column: auto !important;
    min-height: 0 !important;
    padding: 7px !important;
    font-size: 0.5rem !important;
    line-height: 1.32 !important;
  }

  body[data-page="solutions"] .solution-image-callouts small {
    font-size: 0.38rem !important;
  }
}

@media (max-width: 460px) {
  body[data-page="solutions"] .solution-device-legend {
    grid-template-columns: 1fr;
  }

  body[data-page="solutions"] .solution-image-callouts,
  body[data-page="solutions"] .industry-media .solution-image-callouts {
    grid-template-columns: 1fr !important;
  }

  body[data-page="solutions"] .solution-image-callouts > span {
    font-size: 0.56rem !important;
  }
}

/* V35: on phones, top-level nav entries behave as true accordions.
   The active Solutions page is not permanently expanded; tapping Solutions
   opens/closes only its submenu, and tapping Products does the same. */
@media (max-width: 820px) {
  nav.main-nav .dropdown,
  nav.main-nav .dropdown.dropdown-wide,
  nav.main-nav .dropdown.dropdown-products {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  nav.main-nav li.has-dropdown.open > .dropdown,
  nav.main-nav li.has-dropdown.open > .dropdown.dropdown-wide,
  nav.main-nav li.has-dropdown.open > .dropdown.dropdown-products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 6px 0 10px !important;
    padding: 8px !important;
    border-width: 1px !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  nav.main-nav li.has-dropdown > a.nav-link .caret {
    margin-left: auto;
  }
}


/* V36: cleaner mobile navigation and device labels.
   - Mobile menu labels align left consistently.
   - Decorative 01/02/03 navigation indices are hidden on phones.
   - Solution images keep only the real green placement point; device names
     appear in a compact legend below the image without numbered circles. */
@media (max-width: 820px) {
  nav.main-nav a.nav-link {
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
  }

  nav.main-nav .nav-index {
    display: none !important;
  }

  nav.main-nav li.has-dropdown > a.nav-link .caret {
    margin-left: auto !important;
  }
}

@media (max-width: 700px) {
  body[data-page="solutions"] .solution-device-callout::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="solutions"] .solution-device-legend {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 9px !important;
  }

  body[data-page="solutions"] .solution-device-legend-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    font-size: 0.58rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body[data-page="solutions"] .solution-device-legend-item::before {
    content: "";
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border: 1px solid #e7ffb3;
    border-radius: 50%;
    background: #c8ff62;
    box-shadow: 0 0 0 4px rgba(200,255,98,.13), 0 0 12px rgba(200,255,98,.55);
  }

  body[data-page="solutions"] .solution-device-legend-number {
    display: none !important;
  }
}


/* V42: responsive solution media cleanup requested after cross-device review.
   Keeps the full solution image visible on phones/tablets, moves supporting
   content below the image, and improves label/summary legibility on large screens. */
body[data-page="solutions"] .industry-media-col,
body[data-page="solutions"] .industry-block,
body[data-page="solutions"] .industry-text {
  min-width: 0;
}

/* Larger screens: keep overlays crisp enough to read without changing content. */
@media (min-width: 901px) {
  body[data-page="solutions"] .solution-device-callout > span {
    max-width: 220px;
    padding: 8px 11px 8px 12px;
    font-size: clamp(.66rem, .58vw, .78rem);
    line-height: 1.28;
  }

  body[data-page="solutions"] .solution-image-callouts > span {
    padding: 11px 12px !important;
    font-size: clamp(.68rem, .56vw, .8rem) !important;
    line-height: 1.42 !important;
  }

  body[data-page="solutions"] .solution-image-callouts small {
    font-size: clamp(.47rem, .4vw, .56rem) !important;
  }
}

/* Tablet + phone: never crop or cover the machinery photographs. */
@media (max-width: 900px) {
  body[data-page="solutions"] .industry-media {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="solutions"] .industry-media::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="solutions"] .industry-media > img,
  body[data-page="solutions"] .industry-media > img.solution-ai-v36,
  body[data-page="solutions"] .industry-media > img.solution-client-labelled {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: saturate(.98) contrast(1.02) !important;
    border-radius: 0 !important;
  }

  body[data-page="solutions"] .solution-device-map {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Device names stay out of the photograph; exact green points remain visible. */
  body[data-page="solutions"] .solution-device-callout > span {
    display: none !important;
  }

  body[data-page="solutions"] .solution-device-legend {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(200,255,98,.14) !important;
    background: #07151e !important;
  }

  body[data-page="solutions"] .solution-device-legend-item {
    min-width: 0 !important;
    padding: 8px 9px !important;
    font-size: clamp(.62rem, 2.1vw, .76rem) !important;
    line-height: 1.35 !important;
  }

  body[data-page="solutions"] .solution-image-callouts,
  body[data-page="solutions"] .industry-media .solution-image-callouts {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: #06111b !important;
    box-shadow: none !important;
  }

  body[data-page="solutions"] .solution-image-callouts > span,
  body[data-page="solutions"] .solution-image-callouts > span:last-child {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    font-size: clamp(.6rem, 2vw, .74rem) !important;
    line-height: 1.36 !important;
  }

  body[data-page="solutions"] .solution-image-callouts small {
    font-size: clamp(.43rem, 1.45vw, .54rem) !important;
  }

  body[data-page="solutions"] .media-extra-box {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  body[data-page="solutions"] .solution-device-legend,
  body[data-page="solutions"] .solution-image-callouts,
  body[data-page="solutions"] .industry-media .solution-image-callouts {
    grid-template-columns: 1fr !important;
  }

  body[data-page="solutions"] .solution-device-legend-item,
  body[data-page="solutions"] .solution-image-callouts > span {
    font-size: .72rem !important;
  }

  body[data-page="solutions"] .section-band h3 {
    font-size: clamp(1.25rem, 6.8vw, 1.75rem) !important;
    line-height: 1.15 !important;
  }

  body[data-page="solutions"] .section-band .sub-heading {
    font-size: clamp(.72rem, 3.5vw, .9rem) !important;
    line-height: 1.45 !important;
    letter-spacing: .12em !important;
  }
}

/* V43: mobile identification + persistent header.
   Each device keeps its exact physical point but receives a distinct colour,
   matched by the legend below. Header stays visible while scrolling. */
@media (max-width: 900px) {
  body[data-page="solutions"] .solution-device-callout { --device-accent:#c8ff62; }
  body[data-page="solutions"] .solution-device-callout:nth-child(1) { --device-accent:#c8ff62; }
  body[data-page="solutions"] .solution-device-callout:nth-child(2) { --device-accent:#56d9ff; }
  body[data-page="solutions"] .solution-device-callout:nth-child(3) { --device-accent:#ffb84d; }
  body[data-page="solutions"] .solution-device-callout:nth-child(4) { --device-accent:#ff6f91; }
  body[data-page="solutions"] .solution-device-callout:nth-child(5) { --device-accent:#b794ff; }
  body[data-page="solutions"] .solution-device-callout:nth-child(6) { --device-accent:#56f0b0; }

  body[data-page="solutions"] .solution-device-callout::before {
    border-color:#fff !important;
    background:var(--device-accent) !important;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--device-accent) 25%, transparent), 0 0 15px var(--device-accent) !important;
  }

  body[data-page="solutions"] .solution-device-legend-item { --device-accent:#c8ff62; }
  body[data-page="solutions"] .solution-device-legend-item:nth-child(1) { --device-accent:#c8ff62; }
  body[data-page="solutions"] .solution-device-legend-item:nth-child(2) { --device-accent:#56d9ff; }
  body[data-page="solutions"] .solution-device-legend-item:nth-child(3) { --device-accent:#ffb84d; }
  body[data-page="solutions"] .solution-device-legend-item:nth-child(4) { --device-accent:#ff6f91; }
  body[data-page="solutions"] .solution-device-legend-item:nth-child(5) { --device-accent:#b794ff; }
  body[data-page="solutions"] .solution-device-legend-item:nth-child(6) { --device-accent:#56f0b0; }
  body[data-page="solutions"] .solution-device-legend-item::before {
    border-color:#fff !important;
    background:var(--device-accent) !important;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--device-accent) 18%, transparent), 0 0 12px color-mix(in srgb, var(--device-accent) 65%, transparent) !important;
  }
}

@media (max-width: 820px) {
  header.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 5000 !important;
    background:#07111b !important;
    box-shadow:0 8px 28px rgba(0,0,0,.32) !important;
  }
  body { padding-top: var(--hagvan-mobile-header-height, 78px); }
  .nav-row { min-height: 68px !important; padding-top:10px !important; padding-bottom:10px !important; }
}

/* V44: Escort-style mobile footer — one clean vertical column, no side-by-side blocks. */
@media (max-width: 820px) {
  footer.site-footer {
    padding: 46px 0 24px !important;
  }

  footer.site-footer .wrap {
    width: min(100% - 36px, 720px) !important;
    margin-inline: auto !important;
  }

  footer.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
    padding-bottom: 34px !important;
    align-items: start !important;
  }

  footer.site-footer .footer-grid > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  footer.site-footer .footer-grid h4 {
    margin: 0 0 14px !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
    letter-spacing: .11em !important;
  }

  footer.site-footer .footer-grid p,
  footer.site-footer .footer-grid li,
  footer.site-footer .footer-grid a,
  footer.site-footer .footer-grid label {
    text-align: left !important;
  }

  footer.site-footer .footer-grid p {
    margin: 0 0 13px !important;
    max-width: 34rem !important;
    font-size: .95rem !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  footer.site-footer .footer-grid ul {
    gap: 12px !important;
  }

  footer.site-footer .footer-grid li,
  footer.site-footer .footer-grid li a {
    font-size: .98rem !important;
    line-height: 1.45 !important;
  }

  footer.site-footer .footer-grid input[type="email"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 50px !important;
    margin: 6px 0 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }

  footer.site-footer .footer-grid .nav-cta {
    width: auto !important;
    min-width: 0 !important;
    margin-top: 14px !important;
    padding: 12px 18px !important;
  }

  footer.site-footer .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding-top: 22px !important;
    text-align: left !important;
  }
}

@media (max-width: 420px) {
  footer.site-footer .wrap {
    width: min(100% - 28px, 720px) !important;
  }
  footer.site-footer .footer-grid {
    gap: 30px !important;
  }
  footer.site-footer .footer-grid p,
  footer.site-footer .footer-grid li,
  footer.site-footer .footer-grid li a {
    font-size: .92rem !important;
  }
}

/* V49: client-reviewed solution labels, precise device points and footer social layout. */
@media (min-width: 901px) {
  /* Long DAS/ADAS wording must remain fully visible on full-size displays. */
  body[data-page="solutions"] #goods-transport .solution-device-callout > span,
  body[data-page="solutions"] #reefer-trucks .solution-device-callout > span {
    max-width: 285px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body[data-page="solutions"] #goods-transport .solution-device-callout.label-left > span {
    transform: translate(-100%, -50%) !important;
  }
}

/* The client asked to remove the reefer fuel/axle green caps from the picture itself.
   Keep the device names in the legend so the monitoring configuration is still clear. */

/* On phones the social links fit comfortably on one horizontal row. */
@media (max-width: 820px) {
  footer.site-footer .footer-grid > div:last-child ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  footer.site-footer .footer-grid > div:last-child ul li {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  footer.site-footer .footer-grid > div:last-child ul li a {
    display: inline-flex !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}


/* V50: client corrections — goods transport wording/camera label and reefer wheel cleanup. */
@media (min-width: 901px) {
  body[data-page="solutions"] #goods-transport .goods-camera-label > span {
    display: block !important;
    max-width: 320px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }
}

/* Code-only visual cleanup: cover the two baked green wheel-centre caps on the reefer image.
   These scale with the image box on desktop/tablet/mobile. */
body[data-page="solutions"] #reefer-trucks .industry-media {
  position: relative !important;
}
body[data-page="solutions"] #reefer-trucks .reefer-cleanup-mask {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #555 0 18%, #343a3d 19% 38%, #171b1e 39% 67%, #0b0e10 68% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
body[data-page="solutions"] #reefer-trucks .reefer-wheel-mask-one {
  left: 46.1%;
  top: 76.8%;
  width: 3.4%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}
body[data-page="solutions"] #reefer-trucks .reefer-wheel-mask-two {
  left: 57.4%;
  top: 77.0%;
  width: 3.4%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}

/* Keep the actual axle-load point visible again on every screen size. */
body[data-page="solutions"] #reefer-trucks .solution-device-callout:nth-of-type(3)::before,
body[data-page="solutions"] #reefer-trucks .solution-device-callout:nth-of-type(3)::after {
  display: block !important;
}


/* V51: keep client-restored labels visible and readable on every viewport. */
body[data-page="solutions"] #goods-transport .goods-camera-label > span {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
@media (max-width: 700px) {
  body[data-page="solutions"] #goods-transport .goods-camera-label > span {
    max-width: 126px !important;
    font-size: .39rem !important;
    line-height: 1.18 !important;
  }
}
/* Reefer labels stay intact; only the two baked green wheel devices are covered by the masks. */
body[data-page="solutions"] #reefer-trucks .solution-device-callout > span {
  display: block !important;
}
\n\n/* V52: visible goods-camera label + true reefer wheel cleanup in the image asset. */
@media (min-width: 901px) {
  body[data-page="solutions"] #goods-transport .goods-camera-label > span {
    display: block !important;
    max-width: 300px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.22 !important;
    transform: translate(12px, -50%) !important;
  }
}
body[data-page="solutions"] #reefer-trucks .reefer-cleanup-mask {
  display: none !important;
}

/* V53: mobile sensor-map alignment and compact key.
   The image and pointer layer now share the exact same 3:2 geometry on phones,
   so the existing calibrated --x/--y coordinates land on the same physical
   device positions as desktop. Device names stay in a compact colour-matched
   key below the image to prevent congestion. */
@media (max-width: 700px) {
  body[data-page="solutions"] .industry-media {
    position: relative !important;
  }

  body[data-page="solutions"] .industry-media > img.solution-ai-v36,
  body[data-page="solutions"] .industry-media > img.solution-client-labelled {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Critical alignment fix: do not let the pointer layer inherit the height
     of the legend / monitoring rows. It overlays only the 3:2 photograph. */
  body[data-page="solutions"] .solution-device-map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }

  /* Use one consistent mobile treatment on every solution: exact coloured
     points on the photo, names in the key below. No single label floats over
     the picture while the others are hidden. */
  body[data-page="solutions"] .solution-device-callout > span,
  body[data-page="solutions"] #goods-transport .goods-camera-label > span,
  body[data-page="solutions"] #reefer-trucks .solution-device-callout > span {
    display: none !important;
  }

  body[data-page="solutions"] .solution-device-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 8px !important;
  }

  body[data-page="solutions"] .solution-device-legend-item {
    gap: 7px !important;
    padding: 6px 7px !important;
    font-size: clamp(.50rem, 2.05vw, .64rem) !important;
    line-height: 1.25 !important;
    min-height: 34px !important;
  }

  body[data-page="solutions"] .solution-device-legend-item::before {
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: 1px !important;
  }
}

/* Very narrow phones get one column so long technical names never collide. */
@media (max-width: 360px) {
  body[data-page="solutions"] .solution-device-legend {
    grid-template-columns: 1fr !important;
  }
}


/* V54: final mobile geometry + product marker calibration.
   Keep solution marker coordinates tied to the photograph, not to the taller
   card that also contains the legend and monitoring summaries. */
@media (max-width: 700px) {
  body[data-page="solutions"] .industry-media {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="solutions"] .industry-media > img.solution-ai-v36,
  body[data-page="solutions"] .industry-media > img.solution-client-labelled {
    position: relative !important;
    order: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
  }

  body[data-page="solutions"] .solution-device-map {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }

  body[data-page="solutions"] .solution-device-legend {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-page="solutions"] .industry-media .solution-image-callouts {
    position: static !important;
    order: 2 !important;
    width: 100% !important;
    inset: auto !important;
    margin: 0 !important;
  }

  /* Points stay crisp but do not dominate small phone screens. */
  body[data-page="solutions"] .solution-device-callout::before {
    width: 7px !important;
    height: 7px !important;
    border-width: 1.5px !important;
  }
}

/* Small phones: the key is easier to scan as a single compact list. */
@media (max-width: 480px) {
  body[data-page="solutions"] .solution-device-legend {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 7px !important;
  }
  body[data-page="solutions"] .solution-device-legend-item {
    min-height: 30px !important;
    padding: 5px 7px !important;
    font-size: clamp(.50rem, 2.35vw, .62rem) !important;
  }
}

/* Products: preserve the full installation photograph on narrow screens so a
   percentage-based green marker cannot drift when the image is cropped. */
@media (max-width: 700px) {
  .product-section .product-media-stage,
  .product-section .product-media-gallery,
  .product-section .product-media-frame,
  .product-section .sensor-unit-media .product-media-stage {
    height: auto !important;
    min-height: 0 !important;
  }

  .product-section .product-media-frame > img,
  .product-section .product-media-annotated .product-media-frame > img,
  .product-section .sensor-unit-media .product-media-frame > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .product-section .product-media-frame.fit-contain > img {
    padding: clamp(10px, 3vw, 18px) !important;
  }

  .product-section .device-placement-pin > i {
    width: 11px !important;
    height: 11px !important;
    flex-basis: 11px !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px rgba(200,255,98,.9), 0 0 15px rgba(200,255,98,.75) !important;
  }
}

/* V55: product marker accuracy on every screen size.
   The marker coordinates are calibrated against the full source image, so the
   product photograph must never be cropped or stretched at any breakpoint. */
body[data-page="products"] .product-media-stage {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-page="products"] .product-media-gallery,
body[data-page="products"] .product-media-gallery.has-multiple,
body[data-page="products"] .product-media-frame {
  height: auto !important;
  min-height: 0 !important;
}

body[data-page="products"] .product-media-frame {
  grid-template-rows: auto !important;
}

body[data-page="products"] .product-media-frame > img,
body[data-page="products"] .product-media-annotated .product-media-frame > img,
body[data-page="products"] .sensor-unit-media .product-media-frame > img,
body[data-page="products"] .sensor-page-media .product-media-frame > img,
body[data-page="products"] .product-media-frame.fit-contain > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Coordinates now represent the centre of the green point itself. */
body[data-page="products"] .product-section .device-placement-pin,
body[data-page="products"] .product-section .device-placement-pin.pin-label-left {
  top: var(--pin-y) !important;
  left: var(--pin-x) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  flex-direction: row !important;
}

body[data-page="products"] .product-section .device-placement-pin > i {
  box-sizing: border-box !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

@media (max-width: 700px) {
  body[data-page="products"] .product-section .device-placement-pin > i {
    width: 11px !important;
    height: 11px !important;
    flex-basis: 11px !important;
  }
}

/* V57 QA patch: prevent the contact form's inline 320px grid minimum from
   forcing horizontal scroll on very small phones. */
@media (max-width: 480px) {
  body[data-page="contact"] .wrap.grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-page="contact"] .wrap.grid-2 > * {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* V62 — legacy-phone-safe solution markers.
   Avoids CSS variables and aspect-ratio dependence for marker geometry. */
body[data-page="solutions"] .industry-media{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
body[data-page="solutions"] .solution-image-stage{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  overflow:hidden!important;
  line-height:0!important;
  border-radius:8px!important;
  flex:0 0 auto!important;
}
body[data-page="solutions"] .solution-image-stage>img.solution-ai-v36,
body[data-page="solutions"] .solution-image-stage>img.solution-client-labelled{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  min-height:0!important;
  object-fit:initial!important;
  object-position:initial!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border-radius:8px!important;
}
body[data-page="solutions"] .solution-image-stage>.solution-device-map{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:6!important;
  pointer-events:none!important;
  transform:none!important;
}
/* Coordinates are now written directly as inline left/top percentages in HTML. */
body[data-page="solutions"] .solution-device-callout{
  position:absolute!important;
  width:10px!important;
  height:10px!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:50% 50%!important;
}
body[data-page="solutions"] .solution-device-callout::before{
  left:0!important;
  top:0!important;
  width:10px!important;
  height:10px!important;
  margin:0!important;
  transform:none!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  body[data-page="solutions"] .solution-device-callout{
    width:8px!important;
    height:8px!important;
    transform:translate(-50%,-50%)!important;
  }
  body[data-page="solutions"] .solution-device-callout::before{
    width:8px!important;
    height:8px!important;
  }
}


/* V63 — final no-conflict marker positioning.
   Coordinates come directly from inline left/top percentages in HTML.
   No CSS variables, no JS pixel measurements, no aspect-ratio dependency. */
body[data-page="solutions"] .solution-image-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

body[data-page="solutions"] .solution-image-stage > img.solution-ai-v36,
body[data-page="solutions"] .solution-image-stage > img.solution-client-labelled {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: initial !important;
  transform: none !important;
}

body[data-page="solutions"] .solution-image-stage > .solution-device-map {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

/* IMPORTANT: do not set left/top here.
   Each marker's exact position is the inline percentage in solutions.html. */
body[data-page="solutions"] .solution-device-callout {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
}

body[data-page="solutions"] .solution-device-callout::before {
  left: 0 !important;
  top: 0 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  body[data-page="solutions"] .solution-device-callout {
    width: 8px !important;
    height: 8px !important;
  }
  body[data-page="solutions"] .solution-device-callout::before {
    width: 8px !important;
    height: 8px !important;
  }
}


/* V64 — MOBILE ONLY baked sensor-marker images.
   Desktop/tablet layout is left exactly as before.
   On phones the separate CSS marker overlay is hidden and the sensor markers
   are part of the image pixels, so they cannot drift or distort. */
body[data-page="solutions"] .solution-mobile-baked-v64 {
  display: none !important;
}

@media (max-width: 700px) {
  /* Hide original desktop solution photo only on phones. */
  body[data-page="solutions"] .solution-image-stage > img.solution-ai-v36 {
    display: none !important;
  }

  /* Show the baked-marker version in normal flow. */
  body[data-page="solutions"] .solution-image-stage > img.solution-mobile-baked-v64 {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    border-radius: 8px !important;
  }

  /* Markers are already pixels in the phone image.
     Keep the map in the DOM so existing JS can still build the colour legend. */
  body[data-page="solutions"] .solution-image-stage > .solution-device-map {
    display: none !important;
  }

  body[data-page="solutions"] .solution-image-stage {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}