/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --red: #D0373A;
  --red-dark: #A82B2E;
  --red-hover: #E05558;
  --red-glow: rgba(208,55,58,0.18);
  --red-subtle: rgba(208,55,58,0.08);
  --navy: #38487D;
  --navy-dark: #2C3A66;
  --navy-mid: #4A5A8F;
  --navy-glow: rgba(56,72,125,0.2);
  --navy-subtle: rgba(56,72,125,0.08);
  --teal: #6B7FBF;
  --teal-glow: rgba(107,127,191,0.15);
  --dark: #0F172A;
  --dark2: #1E293B;
  --dark3: #273549;
  --dark4: #334155;
  --white: #ffffff;
  --gray-50: #F8F9FC;
  --gray-100: #F0F2F7;
  --gray-200: #E2E6EF;
  --gray-400: #9CA3AF;
  --gray-600: #6B7280;
  --gray-800: #374151;
  --border-dark: rgba(255,255,255,0.08);
  --border-light: rgba(56,72,125,0.12);
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --nav-h: 92px;
  --topbar-h: 36px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-card-dark: 0 8px 40px rgba(0,0,0,0.4);
  --shadow-lift: 0 16px 48px rgba(0,0,0,0.14);
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-body); border: none; }
ul { list-style: none; }
input, select, textarea { font-family: var(--font-body); }

/* ============================================================
   UTILITIES
   ============================================================ */
.container { width: 92%; margin: 0 auto; max-width: 1440px; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 22px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem;
}
.section-tag.red { color: var(--red); }
.section-tag.navy { color: var(--navy-mid); }
.section-tag.white { color: rgba(255,255,255,0.5); }
.section-tag::before {
  content: ''; display: block; width: 18px; height: 2px;
  border-radius: 2px; background: currentColor; flex-shrink: 0;
}

.section-h2 {
  font-family: var(--font-head); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.02em;
}

/* Button styles */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em; transition: var(--transition);
  white-space: nowrap; cursor: pointer; border: none;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,30,58,0.35); }
.btn-ghost-white {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.18);
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.35); }
.btn-ghost-navy { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-ghost-navy:hover { background: var(--navy); color: #fff; transform: translateY(-1px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dark); transform: translateY(-1px); }
.btn-white { background: #fff; color: var(--red); font-weight: 700; }
.btn-white:hover { background: #F5E6E9; transform: translateY(-1px); }
.btn-lg { padding: 15px 30px; font-size: 15px; }

/* Reveal animation — triggers with delay on scroll */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: 0.08s;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.2s; }
.reveal-d2 { transition-delay: 0.32s; }
.reveal-d3 { transition-delay: 0.44s; }
.reveal-d4 { transition-delay: 0.56s; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow 0.3s;
  width: 100%;
  display: flex; flex-direction: column;
}
.nav.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,0.1); }

.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 60px; width: 100%; padding: 0 0.75rem; gap: 0;
  min-width: 0;
}

.nav-logo { grid-column: 1; display: flex; align-items: center; justify-content: flex-start; gap: 10px; overflow: hidden; min-width: 0; max-width: 160px; }
.logo-img { height: auto; max-height: 26px; max-width: 110px; width: auto; object-fit: contain; display: block; }
.logo-info { font-family: var(--font-head); font-weight: 800; font-size: 28px; color: var(--red); letter-spacing: -0.5px; line-height: 1; }
.logo-track { font-family: var(--font-head); font-weight: 800; font-size: 28px; color: var(--dark); letter-spacing: -0.5px; line-height: 1; }

.nav-links {
  display: none; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: 5px;
  color: var(--gray-800); font-size: 18px; font-weight: 500;
  padding: 10px 16px; border-radius: var(--radius-sm);
  transition: var(--transition); white-space: nowrap;
}
.nav-links > li > a:hover,
.nav-links > li:hover > a { color: var(--dark); background: var(--gray-100); }
.nav-links > li.active > a { color: var(--red); background: var(--red-subtle); }
.nav-links > li > a .chevron {
  font-size: 10px; opacity: 0.5; transition: transform 0.2s;
}
.nav-links > li:hover > a .chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 8px;
  min-width: 220px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-links > li:hover .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  color: var(--gray-600); font-size: 13px; font-weight: 500;
  transition: var(--transition);
}
.nav-dropdown a:hover { background: var(--gray-50); color: var(--dark); }
.nav-dropdown .dd-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.dd-red { background: var(--red-subtle); }
.dd-navy { background: var(--navy-subtle); }

.nav-actions { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-demo {
  background: var(--red); color: #fff; padding: 8px 18px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
  transition: var(--transition); white-space: nowrap;
}
.nav-demo:hover { background: var(--red-hover); transform: translateY(-1px); }

.nav-hamburger {
  display: flex; flex-direction: column; justify-content: center;
  grid-column: 3; justify-self: end;
  gap: 5px; width: 32px; height: 32px;
  background: none; border: none; padding: 4px; cursor: pointer;
  margin-left: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--dark); border-radius: 2px;
  transition: var(--transition);
}
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile social icons in nav bar (logo | socials | hamburger) ── */
.nav-mob-socials {
  grid-column: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0;
}
.nav-mob-socials a {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--gray-600); transition: color 0.2s; flex-shrink: 0;
}
.nav-mob-socials a:hover { color: var(--red); }
/* Hide nav-mob-socials on desktop (nav-links take over) */
@media (min-width: 901px) {
  .nav-mob-socials { display: none; }
}
/* ============================================================
   NAV TOPBAR (moved here so min-width queries below take effect)
   ============================================================ */
.nav-topbar {
  height: 32px; background: #F8F9FA;
  display: flex; align-items: center; padding: 0 0.75rem;
  flex-shrink: 0; border-bottom: 1px solid var(--border-light);
}
/* Mobile topbar: show only phone + social icons */
.nav-topbar-left .nav-topbar-link:not(:first-child),
.nav-topbar-left .nav-topbar-sep { display: none; }
.nav-topbar-badge { display: none; }
.nav-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.nav-topbar-left { display: flex; align-items: center; gap: 1.4rem; }
.nav-topbar-link {
  color: var(--gray-500); font-size: 12px; font-weight: 500;
  font-family: var(--font-body); transition: color 0.2s;
  display: flex; align-items: center; gap: 5px;
}
.nav-topbar-link:hover { color: var(--dark); }
.nav-topbar-sep { color: var(--border-light); font-size: 10px; }
.nav-topbar-right { display: flex; align-items: center; gap: 12px; }
.nav-topbar-badge {
  background: #56B3B9; color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 10px;
  border-radius: 100px; font-family: var(--font-body);
  border: 1px solid #3d9aa0; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.nav-topbar-badge:hover { opacity: 0.85; transform: translateY(-1px); }
.nav-topbar-socials { display: flex; align-items: center; gap: 8px; }
.nav-topbar-social {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-700); transition: color 0.2s;
}
.nav-topbar-social:hover { color: var(--red); }
/* Mobile topbar: phone left, socials right; hide duplicate socials in nav bar */
@media (max-width: 900px) {
  .nav-topbar-socials { display: flex; }
  .nav-mob-socials { display: none; }
}
/* Topbar: compact on small phones */
@media (max-width: 375px) {
  .nav-topbar { padding: 0 0.9rem; }
  .nav-topbar-link { font-size: 11px; }
}
@media (max-width: 360px) {
  .nav-topbar { padding: 0 0.75rem; }
  .nav-topbar-link { font-size: 10.5px; }
}
@media (max-width: 320px) {
  .nav-topbar { padding: 0 0.6rem; }
  .nav-topbar-link { font-size: 10px; }
}
@media (max-width: 320px) {
  .nav-topbar-link { font-size: 10px; }
  .nav-topbar-socials a:nth-child(n+5) { display: none; }
}

/* ============================================================
   NAV — mobile-first min-width breakpoints
   Base styles above target ≤ 320px (smallest phones).
   ============================================================ */

/* 321px+ — small phones (360px class) */
@media (min-width: 321px) {
  .logo-img { max-height: 28px; max-width: 128px; }
}

/* 361px+ — mid small phones */
@media (min-width: 361px) {
  .logo-img { max-height: 30px; max-width: 140px; }
  .nav-inner { padding: 0 0.9rem; }
}

/* 375px+ — iPhone SE 2/3, iPhone 6/7/8/X/11/12/13 standard */
@media (min-width: 375px) {
  .logo-img { max-height: 32px; max-width: 140px; }
  .nav-inner { padding: 0 1rem; width: 100%; }
  .nav-topbar { padding: 0 1rem; }
  .nav-mob-socials { gap: 4px; }
  .nav-mob-socials a { width: 26px; height: 26px; }
}

/* 381px+ — normal small phones (iPhone 12 mini, Pixel 6a etc.) */
@media (min-width: 381px) {
  .logo-img { max-height: 34px; max-width: 140px; }
  .nav-inner { padding: 0 1.2rem; }
  .nav-topbar { padding: 0 1.2rem; }
  .nav-mob-socials { gap: 5px; }
  .nav-mob-socials a { width: 28px; height: 28px; }
}
/* 414px+ — iPhone 14 Pro Max / Plus range */
@media (min-width: 414px) and (max-width: 900px) {
  .nav-mob-socials { gap: 6px; }
  .nav-mob-socials a { width: 30px; height: 30px; }
}

/* 601px+ — tablet: wider padding, show socials */
@media (min-width: 601px) {
  :root { --nav-h: 92px; }
  .nav-topbar { padding: 0 1.2rem; }
  .nav-inner { height: 60px; padding: 0 1.2rem; }
  .logo-img { max-height: 36px; max-width: 150px; }
}

/* 901px+ — desktop: restore full nav layout */
@media (min-width: 901px) {
  :root { --nav-h: 128px; }
  .nav { background: rgba(255,255,255,0.97); }
  .nav-topbar { height: 36px; padding: 0 3rem; }
  .nav-topbar-left .nav-topbar-link:not(:first-child),
  .nav-topbar-left .nav-topbar-sep { display: flex; }
  .nav-topbar-badge { display: flex; }
  .nav-topbar-socials { display: flex; }
  .nav-inner {
    display: flex; align-items: center; gap: 1.5rem;
    height: 92px; padding: 0 3rem;
  }
  .nav-logo {
    grid-column: auto; justify-content: flex-start;
    overflow: visible; min-width: 0; max-width: none; flex-shrink: 0;
  }
  .logo-img { height: 42px; max-height: none; max-width: none; width: auto; object-fit: fill; }
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .nav-hamburger { display: none; }
}

/* 901px–1199px — compact topbar + stats for small desktops (overrides 901px+ above) */
@media (min-width: 901px) and (max-width: 1199px) {
  .nav-topbar { height: 32px; padding: 0 1.5rem; }
  .nav-topbar-left { gap: 0.75rem; }
  .nav-topbar-right { gap: 8px; }
  .nav-topbar-link { font-size: 10.5px; gap: 3px; white-space: nowrap; }
  .nav-topbar-sep { font-size: 9px; }
  .nav-topbar-badge { font-size: 9.5px; padding: 1px 8px; letter-spacing: 0; }
  .nav-topbar-social { width: 18px; height: 18px; }
  .nav-topbar-socials { gap: 4px; }
  .nav-inner { padding: 0 1.5rem; gap: 1rem; }

  /* Stats bar */
  .stat-item { padding: 1.2rem 1rem; gap: 0.75rem; }
  .stat-icon-box { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; flex-shrink: 0; }
  .stat-num { font-size: 22px; letter-spacing: -0.5px; }
  .stat-label { font-size: 11px; }
}

.nav-mobile {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 998;
  overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: var(--nav-h) 2rem 2rem;
  border-top: none;
  opacity: 0; pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.nav-mobile.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-mobile-link {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--dark); font-size: 18px; font-weight: 600;
  font-family: var(--font-head);
}
.nav-mobile-sub { padding: 8px 0 8px 16px; }
.nav-mobile-sub a {
  display: block; padding: 8px 0;
  color: var(--gray-600); font-size: 14px; font-weight: 500;
}
.nav-mobile-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 12px; }
.nav-mobile-footer { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.nav-mobile-phone { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--dark); text-decoration: none; }
.nav-mobile-phone:hover { color: var(--red); }
.nav-mobile-socials { display: flex; align-items: center; gap: 14px; }
.nav-mobile-socials a { color: var(--gray-400); transition: color 0.2s; display: flex; }
.nav-mobile-socials a:hover { color: var(--dark); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  display: block;
  background: #fff; position: relative; overflow: hidden;
  padding-top: var(--nav-h);
}

/* ---- Hero video background ---- */
.hero-video-bg { display: none; }
.hero-video-overlay { display: none; }

.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
}

.hero-glow-red { position: absolute; width: 600px; height: 600px; left: -150px; top: -100px; background: radial-gradient(circle, rgba(196,30,58,0.08) 0%, transparent 65%); pointer-events: none; }
.hero-glow-navy { position: absolute; width: 700px; height: 700px; right: -150px; top: -50px; background: radial-gradient(circle, rgba(46,58,140,0.08) 0%, transparent 60%); pointer-events: none; }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center;
  width: 92%; margin: 0 auto; padding: 100px 2rem 120px;
}
.hero-left { text-align: left; }

.hero-visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: stretch;
}
.hero .hero-visual { display: none; }

.hv-cam-grid, .hv-map-visual, .hv-safety-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(196,30,58,0.10);
  border: 1px solid rgba(196,30,58,0.25);
  color: #D0373A; padding: 6px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  margin-bottom: 1.5rem; font-family: var(--font-mono);
  max-width: 100%; white-space: nowrap;
}
@media (max-width: 900px) {
  .hero-badge { white-space: normal; text-align: center; justify-content: center; max-width: 100%; }
}
.badge-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--navy);
  animation: badgePulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(56,72,125,0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(56,72,125,0); }
}

.hero-h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.05; letter-spacing: -1px;
  color: var(--dark); margin-bottom: 1.6rem;
}
.hero-h1 .h1-red { color: #D0373A; }
.hero-h1 .h1-navy { color: var(--navy); }

.hero-sub {
  font-size: 16.5px; color: rgba(0,0,0,0.55);
  line-height: 1.72; max-width: 460px; margin-bottom: 2.4rem;
}

.hero-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }

.hero-trust {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--gray-500);
  font-family: var(--font-mono); letter-spacing: 0; flex-wrap: nowrap;
  white-space: nowrap; overflow: hidden;
}
.trust-item { display: flex; align-items: center; gap: 8px; }
.trust-sep { color: var(--gray-400); font-size: 10px; }

.hero-visual { position: relative; }

.dash-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: transform 0.6s ease;
}
.dash-card:hover { transform: translateY(-4px); }

.dash-topbar {
  background: var(--gray-50); padding: 11px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-light);
}
.dot-r { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.dot-y { width: 10px; height: 10px; border-radius: 50%; background: #FEBC2E; }
.dot-g { width: 10px; height: 10px; border-radius: 50%; background: #28C840; }
.dash-topbar-title {
  margin-left: 6px; font-family: var(--font-mono); font-size: 11px;
  color: var(--gray-400);
}

.dash-views { position: relative; }
.dash-view {
  padding: 14px;
  opacity: 0; position: absolute; inset: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.dash-view.active { opacity: 1; position: relative; pointer-events: auto; }

.dash-map {
  background: #dde6f0; border-radius: 8px;
  height: 185px; position: relative; overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
}
.dash-map::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(35deg, transparent 44%, rgba(46,58,140,0.14) 44%, rgba(46,58,140,0.14) 46%, transparent 46%),
    linear-gradient(-25deg, transparent 52%, rgba(46,58,140,0.1) 52%, rgba(46,58,140,0.1) 54%, transparent 54%),
    linear-gradient(90deg, transparent 28%, rgba(46,58,140,0.1) 28%, rgba(46,58,140,0.1) 30%, transparent 30%),
    linear-gradient(0deg, transparent 40%, rgba(46,58,140,0.08) 40%, rgba(46,58,140,0.08) 42%, transparent 42%),
    linear-gradient(90deg, transparent 62%, rgba(46,58,140,0.1) 62%, rgba(46,58,140,0.1) 64%, transparent 64%);
}
.v-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.v-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid currentColor; opacity: 0.3;
  animation: vRing 2s ease-out infinite;
}
@keyframes vRing {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2); }
}
.v-dot.vred { background: var(--red); color: var(--red); }
.v-dot.vnavy { background: var(--navy-mid); color: var(--navy-mid); }
.v-dot.vteal { background: var(--teal); color: var(--teal); }

@keyframes vm1 { 0%{top:32%;left:28%} 25%{top:26%;left:35%} 50%{top:30%;left:42%} 75%{top:36%;left:36%} 100%{top:32%;left:28%} }
@keyframes vm2 { 0%{top:58%;left:52%} 25%{top:52%;left:60%} 50%{top:58%;left:68%} 75%{top:64%;left:60%} 100%{top:58%;left:52%} }
@keyframes vm3 { 0%{top:22%;left:66%} 25%{top:28%;left:72%} 50%{top:22%;left:78%} 75%{top:16%;left:72%} 100%{top:22%;left:66%} }
@keyframes vm4 { 0%{top:70%;left:30%} 25%{top:64%;left:24%} 50%{top:70%;left:18%} 75%{top:76%;left:24%} 100%{top:70%;left:30%} }
@keyframes vm5 { 0%{top:44%;left:80%} 25%{top:38%;left:76%} 50%{top:44%;left:72%} 75%{top:50%;left:76%} 100%{top:44%;left:80%} }
@keyframes vm6 { 0%{top:80%;left:70%} 25%{top:74%;left:76%} 50%{top:80%;left:82%} 75%{top:86%;left:76%} 100%{top:80%;left:70%} }

.vm1 { animation: vm1 6s ease-in-out infinite; }
.vm2 { animation: vm2 8s ease-in-out infinite; }
.vm3 { animation: vm3 5s ease-in-out infinite; }
.vm4 { animation: vm4 7s ease-in-out infinite; }
.vm5 { animation: vm5 9s ease-in-out infinite; }
.vm6 { animation: vm6 6.5s ease-in-out infinite; }

.map-live-badge {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,196,154,0.12);
  border: 1px solid rgba(0,196,154,0.3);
  padding: 4px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 600; color: var(--teal);
  font-family: var(--font-mono);
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  animation: badgePulse 1.5s ease infinite;
}
.map-city { position: absolute; bottom: 8px; left: 10px; font-size: 10px; color: var(--gray-500); font-family: var(--font-mono); }

.dash-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.dash-metric {
  background: var(--gray-50); border-radius: 7px; padding: 10px 11px;
  border: 1px solid var(--border-light);
}
.dm-label { font-size: 9px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; font-family: var(--font-mono); }
.dm-value { font-family: var(--font-mono); font-size: 17px; font-weight: 600; line-height: 1; }
.dm-red { color: var(--red); }
.dm-navy { color: var(--navy); }
.dm-teal { color: var(--teal); }
.dm-sub { font-size: 9px; color: var(--gray-400); margin-top: 3px; font-family: var(--font-mono); }

.dash-alerts { display: flex; flex-direction: column; gap: 6px; }
.dash-alert {
  background: var(--gray-50); border-radius: 6px;
  padding: 7px 11px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--border-light);
}
.da-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.da-text { font-size: 10.5px; color: var(--gray-700); flex: 1; }
.da-time { font-size: 9px; color: var(--gray-400); font-family: var(--font-mono); }

.mdvr-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 10px;
}
.mdvr-cam {
  background: #dde6f0; border-radius: 7px; height: 88px;
  position: relative; border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
}
.mdvr-cam::before { content: '📷'; font-size: 22px; opacity: 0.35; }
.mdvr-label {
  position: absolute; bottom: 6px; left: 8px;
  font-size: 9px; font-family: var(--font-mono);
  color: var(--gray-500); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.mdvr-rec {
  position: absolute; top: 6px; left: 6px;
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; color: var(--red);
  font-family: var(--font-mono); letter-spacing: 0.05em;
}
.rec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: badgePulse 1s ease infinite; }

.fuel-bars { display: flex; flex-direction: column; gap: 10px; padding: 0 0 10px; }
.fuel-top { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 11px; }
.fuel-name { color: var(--gray-700); font-weight: 500; }
.fuel-val { color: var(--gray-400); font-family: var(--font-mono); font-size: 10px; }
.fuel-bar { height: 5px; background: var(--border-light); border-radius: 100px; overflow: hidden; }
.fuel-fill { height: 100%; border-radius: 100px; }
.fuel-fill-r { background: var(--red); }
.fuel-fill-n { background: var(--navy-mid); }
.fuel-fill-t { background: var(--teal); }

.dash-tab-dots {
  display: flex; justify-content: center; gap: 6px; padding: 8px 0 4px;
}
.tab-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.2); transition: var(--transition);
}
.tab-dot.active { background: var(--red); width: 18px; border-radius: 3px; }

/* ============================================================
   HERO VIDEO FRAME
   ============================================================ */
.hero-video-frame {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: transform 0.6s ease;
}
.hero-video-frame:hover { transform: translateY(-4px); }
.hvf-topbar {
  background: var(--gray-50); padding: 11px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-light);
}
.hvf-label {
  margin-left: 6px; font-family: var(--font-mono); font-size: 11px;
  color: var(--gray-400);
}
.hvf-screen {
  position: relative; aspect-ratio: 16/9;
  background: #dde6f0; overflow: hidden;
}
.hvf-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hvf-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #dde6f0;
}
.hvf-ph-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(196,30,58,0.10); border: 1px solid rgba(196,30,58,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--red);
}
.hvf-ph-text {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--dark);
}
.hvf-ph-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--gray-500); text-align: center; line-height: 1.7;
}
.hvf-ph-sub code { color: var(--teal); font-family: var(--font-mono); }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar { background: var(--white); border-bottom: 1px solid var(--border-light); }
.stats-bar-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  width: 92%; margin: 0 auto;
}
.stat-item {
  padding: 2.2rem 2rem; border-right: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 1.2rem;
}
.stat-item:last-child { border-right: none; }
.stat-icon-box {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sib-red { background: none; }
.sib-navy { background: none; }
.stat-num {
  font-family: var(--font-head); font-size: 34px; font-weight: 800;
  line-height: 1; letter-spacing: -1px;
}
.sn-red { color: var(--red); }
.sn-navy { color: var(--navy); }
.stat-label { font-size: 13px; color: var(--gray-600); margin-top: 3px; }

/* ============================================================
   TRUSTED BY — TICKER
   ============================================================ */
.trusted { background: var(--gray-50); padding: 2.8rem 0; border-bottom: 1px solid var(--border-light); overflow: hidden; }
.trusted-inner { width: 92%; margin: 0 auto; padding: 0; display: flex; align-items: center; gap: 3rem; overflow: hidden; }
.trusted-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; font-family: var(--font-mono); }
.ticker-wrap { flex: 1 1 0%; overflow: hidden; position: relative; min-width: 0; max-width: 100%; }
.ticker-wrap::before, .ticker-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
}
.ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--gray-50), transparent); }
.ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--gray-50), transparent); }
.ticker-track {
  display: flex; gap: 4rem; width: max-content;
  animation: tickerScroll 60s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-logo {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  color: var(--gray-400); letter-spacing: 0.05em; white-space: nowrap;
  transition: color 0.2s;
}
.ticker-logo:hover { color: var(--navy); }
.tl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: 100px; padding: 7px 18px;
  font-size: 12px; font-weight: 700; color: var(--gray-600);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, color 0.2s;
}
.tl-pill:hover { color: var(--navy); box-shadow: 0 4px 16px rgba(46,58,140,0.1); }
.tl-img {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 8px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}
.tl-img img { height: 28px; width: auto; max-width: 100px; object-fit: contain; display: block; }
.tl-img:hover { box-shadow: 0 4px 16px rgba(46,58,140,0.1); }

/* ============================================================
   SOLUTIONS — 4 columns × 2 rows
   ============================================================ */
.solutions { padding: 40px 0 60px; background: var(--white); }
.solutions-header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  align-items: end; margin-bottom: 4rem;
}
.solutions-h2 { font-size: clamp(36px, 4.5vw, 56px); color: var(--dark); }
.solutions-sub { font-size: 15.5px; color: var(--gray-600); line-height: 1.72; max-width: 430px; }

/* ── Solution Image Cards — image top / content bottom ── */
.sol-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.sic {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-light);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sic:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.13); }

/* Image half */
.sic-img {
  position: relative; height: 190px; overflow: hidden; flex-shrink: 0;
}
.sic-bg {
  position: absolute; inset: -5%;
  background-size: cover; background-position: center;
  transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sic:hover .sic-bg { transform: scale(1.09) rotate(1deg); }

/* Shine sweep across image on hover */
.sic-img::before {
  content: '';
  position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-12deg); z-index: 2; pointer-events: none;
  transition: left 0s;
}
.sic:hover .sic-img::before { left: 140%; transition: left 0.6s ease; }

.sic-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--dark); font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Content half */
.sic-body {
  padding: 20px; flex: 1;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-light);
}
.sic-num {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: rgba(196,30,58,0.45); margin: 0 0 6px;
}
.sic-title {
  font-family: var(--font-head); font-size: 17px; font-weight: 800;
  color: var(--dark); margin: 0 0 8px; line-height: 1.2;
  transition: color 0.25s ease;
}
.sic:hover .sic-title { color: var(--red); }
.sic-desc {
  font-size: 12.5px; color: var(--gray-600);
  line-height: 1.6; margin: 0 0 16px; flex: 1;
}
.sic-cta {
  font-size: 12px; color: var(--red); font-weight: 700;
  font-family: var(--font-mono); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap 0.25s ease;
  margin-top: auto;
}
.sic:hover .sic-cta { gap: 10px; }

.sol-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: 14px; overflow: hidden;
}
.sol-card {
  background: var(--white); padding: 2.2rem 2rem;
  position: relative; cursor: pointer;
  border-left: 3px solid transparent;
  transition: var(--transition);
}
.sol-card:hover { background: var(--gray-50); }
.sol-card.br { border-left-color: var(--red); }
.sol-card.bn { border-left-color: var(--navy); }
.sol-card:hover.br { border-left-color: var(--red-hover); box-shadow: inset 3px 0 0 var(--red-hover); }
.sol-card:hover.bn { border-left-color: var(--navy-mid); }

.sol-num { font-family: var(--font-mono); font-size: 11px; color: rgba(196,30,58,0.38); margin-bottom: 1rem; font-weight: 600; }
.sol-icon {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 1rem;
}
.si-red { background: #FEE8EC; }
.si-navy { background: #EEF0FA; }
.sol-icon-mdvr { width: 72px; height: 64px; border-radius: 14px; }
.sol-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 0.55rem; line-height: 1.2; }
.sol-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; margin-bottom: 1.4rem; }
.sol-link { font-size: 13px; font-weight: 700; color: var(--red); display: inline-flex; align-items: center; gap: 5px; transition: gap 0.2s; }
.sol-card:hover .sol-link { gap: 8px; }
.sol-arrow {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 16px; color: var(--gray-400); opacity: 0;
  transition: var(--transition);
}
.sol-card:hover .sol-arrow { opacity: 1; transform: translate(3px,-3px); }

/* ============================================================
   PLATFORM — 2-COLUMN SPLIT
   ============================================================ */
.platform { padding: 100px 0 40px; background: var(--gray-50); position: relative; overflow: hidden; }
.platform::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(46,58,140,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,58,140,0.06) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.platform-header { text-align: center; margin-bottom: 3.5rem; position: relative; z-index: 2; }
.platform-h2 { font-size: clamp(36px, 4.5vw, 58px); color: var(--dark); margin-bottom: 1rem; }
.platform-sub { font-size: 16px; color: var(--gray-600); max-width: 500px; margin: 0 auto; }

.plat-split {
  display: grid; grid-template-columns: 340px 1fr; gap: 2.5rem;
  align-items: start; position: relative; z-index: 2;
}
.plat-tabs-v { display: flex; flex-direction: column; gap: 8px; }
.plat-tab-v {
  display: flex; align-items: center; gap: 14px;
  padding: 1.1rem 1.3rem; border-radius: var(--radius-md);
  background: var(--white); border: 1.5px solid var(--border-light);
  cursor: pointer; text-align: left; font-family: var(--font-body);
  transition: var(--transition); width: 100%;
}
.plat-tab-v:hover { border-color: var(--navy); box-shadow: var(--shadow-card); }
.plat-tab-v.active { background: var(--navy); border-color: var(--navy); }
.ptv-icon {
  width: 44px; height: 44px; border-radius: 9px;
  background: var(--gray-50); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; transition: var(--transition);
}
.plat-tab-v.active .ptv-icon { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.12); color: #fff; }
.ptv-text { flex: 1; min-width: 0; }
.ptv-title { font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.2; margin-bottom: 3px; }
.ptv-sub { font-size: 12px; color: var(--gray-600); line-height: 1.4; }
.plat-tab-v.active .ptv-title { color: #fff; }
.plat-tab-v.active .ptv-sub { color: rgba(255,255,255,0.58); }
.ptv-arrow { font-size: 14px; color: var(--gray-400); flex-shrink: 0; transition: var(--transition); opacity: 0; transform: translateX(-4px); }
.plat-tab-v:hover .ptv-arrow { opacity: 0.5; transform: translateX(0); }
.plat-tab-v.active .ptv-arrow { opacity: 1; color: rgba(255,255,255,0.6); transform: translateX(0); }

.plat-video-wrap { position: relative; min-height: 300px; }
.plat-video-panel {
  opacity: 0; position: absolute; inset: 0;
  transition: opacity 0.5s ease; pointer-events: none;
}
.plat-video-panel.active { opacity: 1; position: relative; pointer-events: auto; }
.pvp-frame {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lift);
  overflow: hidden; aspect-ratio: 16/9; position: relative;
}
.pvp-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvp-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3rem 1.6rem 1.6rem;
  background: linear-gradient(to top, rgba(5,10,30,0.88) 0%, rgba(5,10,30,0.4) 60%, transparent 100%);
}
.pvp-cap-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(196,30,58,0.85); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 100px;
  padding: 3px 10px; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; color: #fff;
  letter-spacing: 0.12em; margin-bottom: 0.6rem;
}
.pvp-cap-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: badgePulse 1.5s ease-in-out infinite;
}
.pvp-cap-title {
  font-family: var(--font-head); font-size: 22px; font-weight: 800;
  color: #fff; line-height: 1.1; margin-bottom: 0.35rem;
  letter-spacing: -0.3px; text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.pvp-cap-sub {
  font-size: 12px; color: rgba(255,255,255,0.68);
  line-height: 1.55; margin-bottom: 1rem; max-width: 88%;
}
.pvp-cap-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
  overflow: hidden;
}
.pvp-cap-stat {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 8px 10px; gap: 2px;
}
.pvp-cap-val {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: #fff; line-height: 1;
}
.pvp-cap-lbl {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em;
}
.pvp-cap-divider {
  width: 1px; height: 32px; background: rgba(255,255,255,0.12); flex-shrink: 0;
}
.pvp-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: var(--gray-50);
}
.pvp-ph-icon { font-size: 44px; opacity: 0.6; }
.pvp-ph-title {
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: var(--dark);
}
.pvp-ph-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--gray-500); text-align: center; line-height: 1.7;
}
.pvp-ph-sub code { color: var(--teal); }

/* ============================================================
   WHY INFOTRACK
   ============================================================ */
.why { padding: 120px 0 140px; background: var(--white); }
.why-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
  align-items: stretch; width: 92%; margin: 0 auto; padding: 0 2rem;
}

.why-visual-wrap { position: relative; padding-bottom: 48px; display: flex; flex-direction: column; }
.why-video-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-light);
  flex: 1;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.why-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* ── Why section dashboard ───────────────────────────────── */
.wd-dashboard {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border-light); box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* Header */
.wd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.2rem;
  background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.07);
}
.wd-header-left { display: flex; align-items: center; gap: 8px; }
.wd-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  animation: badgePulse 2s ease-in-out infinite; flex-shrink: 0;
}
.wd-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.07em; text-transform: uppercase; }
.wd-header-right { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.35); }

/* KPI row */
.wd-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid var(--border-light);
}
.wd-kpi {
  padding: 0.9rem 1rem; border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 2px;
}
.wd-kpi:last-child { border-right: none; }
.wd-kpi-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--dark); line-height: 1; }
.wd-kpi-lbl { font-size: 10px; color: var(--gray-500); font-weight: 500; margin-top: 2px; }
.wd-kpi-delta { font-family: var(--font-mono); font-size: 9px; font-weight: 600; margin-top: 4px; }
.wd-up   { color: var(--teal); }
.wd-warn { color: #FBC02D; }

/* Efficiency scores */
.wd-scores { padding: 1.2rem 1.2rem 1rem; border-bottom: 1px solid var(--border-light); }
.wd-scores-hdr {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 1rem;
}

/* Live activity feed */
.wd-feed { padding: 0.8rem 1.2rem; display: flex; flex-direction: column; gap: 0; }
.wd-feed-item {
  display: flex; align-items: center; gap: 9px;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border-light);
}
.wd-feed-item:last-child { border-bottom: none; }
.wd-feed-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fd-red  { background: var(--red); }
.fd-teal { background: var(--teal); }
.fd-navy { background: var(--navy-mid); }
.wd-feed-text { font-family: var(--font-mono); font-size: 10.5px; color: var(--dark); flex: 1; }
.wd-feed-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--gray-400); white-space: nowrap; }
.prog-row { margin-bottom: 0.9rem; }
.prog-label { display: flex; justify-content: space-between; margin-bottom: 6px; }
.prog-name { font-size: 13px; color: var(--dark); font-weight: 500; }
.prog-val { font-size: 12px; color: var(--gray-600); font-family: var(--font-mono); }
.prog-track { height: 7px; background: var(--gray-200); border-radius: 100px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 100px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.4,0,0.2,1); }
.prog-fill.animated { transform: scaleX(1); }
.pf-red { background: var(--red); }
.pf-navy { background: var(--navy-mid); }
.pf-teal { background: var(--teal); }

.why-float {
  position: absolute; bottom: -24px; right: -24px;
  background: var(--white); border-radius: 12px;
  padding: 1.2rem 1.6rem; border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lift);
}
.why-float-num { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--dark); }
.why-float-num span { color: var(--teal); }
.why-float-label { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.why-h2 { font-size: clamp(34px, 4vw, 52px); color: var(--dark); margin-bottom: 1.2rem; }
.why-body { font-size: 15.5px; color: var(--gray-600); line-height: 1.74; margin-bottom: 2.2rem; }
.why-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.4rem; }
.why-item { display: flex; align-items: flex-start; gap: 12px; }
.why-check {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; margin-top: 1px; font-weight: 700;
}
.wc-red { background: #FEE8EC; color: var(--red); }
.wc-navy { background: #EEF0FA; color: var(--navy); }
.why-item-text { font-size: 14.5px; color: var(--dark); line-height: 1.55; }
.why-item-text strong { font-weight: 600; }

/* ============================================================
   MDVR HIGHLIGHT
   ============================================================ */
.mdvr-section { padding: 100px 0; background: var(--gray-50); }
.mdvr-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  align-items: center; width: 92%; margin: 0 auto; padding: 0 2rem;
}
.mdvr-visual {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-light);
  min-width: 0; max-width: 100%; overflow: hidden;
}
.mdvr-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.mdvr-rec-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: var(--red);
  font-family: var(--font-mono); letter-spacing: 0.06em;
}
.mdvr-cam-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mdvr-cam-item {
  background: #dde6f0; border-radius: 8px;
  aspect-ratio: 16/9; position: relative;
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mdvr-cam-item::after {
  content: '📷'; font-size: 24px; opacity: 0.35;
}
.mdvr-cam-video, .iv-cam-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  border-radius: inherit;
}
.mdvr-cam-label {
  position: absolute; bottom: 7px; left: 9px;
  font-size: 10px; font-family: var(--font-mono);
  color: var(--gray-500); font-weight: 600; letter-spacing: 0.05em;
}
.mdvr-cam-item:nth-child(1) { border-top: 2px solid rgba(196,30,58,0.5); }

.mdvr-text h2 { font-size: clamp(34px,4vw,50px); color: var(--dark); margin-bottom: 1.2rem; }
.mdvr-body { font-size: 15.5px; color: var(--gray-600); line-height: 1.74; margin-bottom: 2rem; }
.mdvr-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2.4rem; }
.mdvr-feat { display: flex; align-items: flex-start; gap: 12px; }
.mdvr-feat-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: #FEE8EC; display: flex; align-items: center;
  justify-content: center; font-size: 14px; flex-shrink: 0;
}
.mdvr-feat-text { font-size: 14.5px; color: var(--dark); font-weight: 500; padding-top: 6px; }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries { padding: 100px 0; background: var(--white); }
.industries-header { text-align: center; margin-bottom: 4rem; }
.industries-h2 { font-size: clamp(36px,4.5vw,56px); color: var(--dark); margin-bottom: 1rem; }
.industries-sub { font-size: 15.5px; color: var(--gray-600); max-width: 480px; margin: 0 auto; }
.ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ind-card {
  border-radius: 14px; padding: 2.2rem 1.8rem;
  position: relative; cursor: pointer; text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden;
}
.ind-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.ind-bg-navy { background: var(--navy-dark); }
.ind-bg-red { background: var(--red); }
.ind-bg-dark { background: var(--dark); }
.ind-bg-light { background: var(--white); border: 1px solid var(--border-light); }
.ind-icon { font-size: 34px; margin-bottom: 1.3rem; }

/* Image-style industry card */
.ind-card-img { padding: 0; display: flex; flex-direction: column; }
.ind-img-wrap {
  width: 100%; height: 160px; overflow: hidden;
  border-radius: 14px 14px 0 0; flex-shrink: 0;
}
.ind-img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease; }
.ind-card-img:hover .ind-img { transform: scale(1.05); }
.ind-card-body { padding: 1.4rem 1.6rem 1rem; flex: 1; }
.ind-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin-bottom: 0.55rem; line-height: 1.2; }
.ind-desc { font-size: 13px; line-height: 1.62; }
.ind-card.ind-bg-navy .ind-title,
.ind-card.ind-bg-red .ind-title,
.ind-card.ind-bg-dark .ind-title { color: #fff; }
.ind-card.ind-bg-light .ind-title { color: var(--dark); }
.ind-card.ind-bg-navy .ind-desc,
.ind-card.ind-bg-red .ind-desc,
.ind-card.ind-bg-dark .ind-desc { color: rgba(255,255,255,0.58); }
.ind-card.ind-bg-light .ind-desc { color: var(--gray-600); }
.ind-arrow {
  position: absolute; bottom: 1.5rem; right: 1.5rem;
  font-size: 18px; opacity: 0.35; transition: all 0.2s;
}
.ind-card:hover .ind-arrow { opacity: 1; transform: translate(3px,-3px); }
.ind-card.ind-bg-light .ind-arrow { color: var(--navy); }
.ind-card:not(.ind-bg-light) .ind-arrow { color: rgba(255,255,255,0.8); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { padding: 100px 0; background: var(--gray-50); }
.testimonials-header { text-align: center; margin-bottom: 4rem; }
.testimonials-h2 { font-size: clamp(36px,4.5vw,56px); color: var(--dark); margin-bottom: 1rem; }
.testi-sub { font-size: 15.5px; color: var(--gray-600); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.testi-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 14px; padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease;
}
.testi-card:hover { box-shadow: var(--shadow-lift); }
.testi-stars { color: #FBC02D; font-size: 13px; letter-spacing: 3px; margin-bottom: 1.1rem; }
.testi-quote { font-size: 14.5px; color: var(--gray-800); line-height: 1.72; margin-bottom: 1.6rem; font-style: italic; }
.testi-quote::before { content: '"'; font-size: 32px; color: var(--red); line-height: 0; vertical-align: -0.5em; margin-right: 2px; font-style: normal; font-family: var(--font-head); }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.ta-red { background: var(--red); }
.ta-navy { background: var(--navy); }
.ta-teal { background: #0C7A64; }
.testi-name { font-size: 14px; font-weight: 600; color: var(--dark); }
.testi-role { font-size: 12px; color: var(--gray-400); margin-top: 1px; }

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.roi-section { padding: 80px 0; background: var(--white); position: relative; overflow: hidden; }
.roi-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  align-items: center; width: 92%; margin: 0 auto; padding: 0 2rem;
}
.roi-left h2 { font-family: var(--font-head); font-size: clamp(34px,4.5vw,54px); font-weight: 800; color: var(--dark); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.roi-sub { font-size: 15.5px; color: var(--gray-600); line-height: 1.7; }
.roi-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.2rem; box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-light);
}
.roi-card-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 1.6rem; }
.roi-input-group { margin-bottom: 1.4rem; }
.roi-label { font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; display: block; font-family: var(--font-mono); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 3px; background: var(--gray-200); outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(196,30,58,0.4);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); cursor: pointer; border: 2px solid #fff;
}
.roi-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-400); margin-top: 4px; font-family: var(--font-mono); }
.roi-vehicle-val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--red); margin-bottom: 0.5rem; }
.roi-fuel-input {
  display: flex; align-items: center;
  border: 1.5px solid var(--border-light); border-radius: 8px;
  overflow: hidden;
}
.roi-currency {
  background: var(--gray-50); padding: 10px 12px;
  font-size: 14px; font-weight: 600; color: var(--gray-600);
  border-right: 1.5px solid var(--border-light); font-family: var(--font-mono);
}
.roi-fuel-input input {
  flex: 1; padding: 10px 14px; font-size: 15px; border: none; outline: none;
  color: var(--dark); font-family: var(--font-mono); font-weight: 600;
}
.roi-result {
  background: var(--gray-50); border: 1.5px solid var(--border-light);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1.4rem 0;
  text-align: center;
}
.roi-result-label { font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-family: var(--font-mono); }
.roi-result-val { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--red); }
.roi-result-sub { font-size: 12px; color: var(--gray-600); margin-top: 3px; }

/* ============================================================
   CTA / DEMO BOOKING
   ============================================================ */
.cta-section { padding: 100px 0; background: var(--gray-50); position: relative; overflow: hidden; }
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(46,58,140,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,58,140,0.05) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.cta-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  align-items: center; position: relative; z-index: 2;
}
.cta-left h2 { font-family: var(--font-head); font-size: clamp(36px,4.5vw,58px); font-weight: 800; color: var(--dark); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.cta-checks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 2rem; }
.cta-check { display: flex; align-items: center; gap: 12px; }
.cta-check-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,196,154,0.12); border: 1px solid rgba(0,196,154,0.3); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--teal); flex-shrink: 0; }
.cta-check-text { font-size: 15px; color: var(--gray-800); font-weight: 500; }

.demo-form {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 2.5rem;
  box-shadow: var(--shadow-lift);
}
.demo-form-title { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 1.8rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { margin-bottom: 12px; }
.form-input {
  width: 100%; background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: 7px; padding: 12px 14px;
  font-size: 14px; color: var(--dark); outline: none;
  transition: border-color 0.2s;
}
.form-input::placeholder { color: var(--gray-400); }
.form-input:focus { border-color: rgba(196,30,58,0.45); background: var(--white); }
select.form-input option { background: var(--white); color: var(--dark); }
.form-submit {
  width: 100%; background: var(--red); color: #fff;
  padding: 14px; border-radius: 7px; font-size: 15px; font-weight: 700;
  border: none; cursor: pointer; margin-top: 6px;
  transition: var(--transition); letter-spacing: 0.02em;
}
.form-submit:hover { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196,30,58,0.3); }
.form-fine { font-size: 11px; color: var(--gray-400); text-align: center; margin-top: 10px; font-family: var(--font-mono); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--white); padding: 80px 0 0; border-top: 1px solid var(--border-light); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid var(--border-light);
}
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fl-info { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--red); letter-spacing: -0.5px; }
.fl-track { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--dark); letter-spacing: -0.5px; }
.footer-logo-img { height: 32px; width: auto; }
.footer-tagline { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 1rem; font-family: var(--font-mono); }
.footer-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.72; max-width: 260px; }
.footer-socials { display: flex; gap: 14px; margin-top: 1.6rem; flex-wrap: wrap; }
.footer-social {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--gray-100);
  border: 1px solid rgba(46,58,140,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gray-700);
  transition: var(--transition); cursor: pointer;
}
.footer-social:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.fs-facebook:hover  { background: #1877F2; color: #fff; border-color: #1877F2; }
.fs-instagram:hover { background: #E1306C; color: #fff; border-color: #E1306C; }
.fs-linkedin:hover  { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.fs-x:hover         { background: #000;    color: #fff; border-color: #000; }
.fs-youtube:hover   { background: #FF0000; color: #fff; border-color: #FF0000; }
.footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 1.3rem; font-family: var(--font-mono); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13.5px; color: var(--gray-600); transition: color 0.2s; display: inline-flex; align-items: center; gap: 7px; }
.footer-links a:hover { color: var(--dark); }
.footer-contact-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 0 5rem;
}
.footer-copy { font-size: 12px; color: var(--gray-400); font-family: var(--font-mono); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 12px; color: var(--gray-400); transition: color 0.2s; font-family: var(--font-mono); }
.footer-bottom-links a:hover { color: var(--gray-800); }

/* ============================================================
   FLOATING ENQUIRY BUTTON & POPUP
   ============================================================ */
/* Shared row container for Live Chat + Enquire Now */
.floating-action-row {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  display: flex; flex-direction: row; align-items: center; gap: 12px;
}

.popup-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
.video-lightbox-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(5,7,15,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}
.video-lightbox-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.video-lightbox-content {
  width: 100%; max-width: 860px; aspect-ratio: 16/9;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.video-lightbox-content video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.video-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.video-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.img-lightbox-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(5,7,15,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}
.img-lightbox-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.img-lightbox-content {
  width: 100%; max-width: 900px; aspect-ratio: 16/9;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
}
.img-lightbox-content img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  animation: imgLightboxZoom 8s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes imgLightboxZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}
.img-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.popup-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.popup-modal {
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); padding: 2.5rem;
  width: 100%; max-width: 500px; position: relative;
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow-lift);
}
.popup-overlay.open .popup-modal { transform: scale(1) translateY(0); }
.popup-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: var(--gray-100); border: none; color: var(--gray-600);
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.popup-close:hover { background: var(--gray-200); color: var(--dark); }
.popup-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.popup-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--dark); margin-bottom: 0.4rem; }
.popup-sub { font-size: 13.5px; color: var(--gray-600); margin-bottom: 1.8rem; }
.popup-form .form-group { margin-bottom: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero-inner { gap: 2.5rem; }
  .plat-split { grid-template-columns: 280px 1fr; gap: 1.8rem; }
}

@media (max-width: 900px) {
  /* Hide phone number on mobile — social icons remain in nav bar and mobile menu */
  .nav-mobile-phone { display: none; }

  /* Hero */
  .hero-inner { grid-template-columns: 1fr; padding: 60px 1.5rem; }
  .hero-visual { display: none; }
  .hero-h1 { font-size: clamp(40px, 10vw, 60px); }

  /* Stats */
  .stats-bar-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--border-light); }
  .stat-num { font-size: 28px; }

  /* Trusted */
  .trusted-inner { flex-direction: column; gap: 1.5rem; }

  /* Solutions */
  .solutions { padding: 60px 0; }
  .solutions-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .sol-grid { grid-template-columns: repeat(2,1fr); }
  .sol-img-grid { grid-template-columns: repeat(2, 1fr); }
  .sic-img { height: 160px; }

  /* Platform */
  .platform { padding: 70px 0; }
  .plat-split { grid-template-columns: 1fr; }
  .plat-tabs-v { display: grid; grid-template-columns: 1fr 1fr; }

  /* Why */
  .why { padding: 70px 0; }
  .why-inner { grid-template-columns: 1fr; gap: 3rem; }
  .why-float { right: 0; }

  /* MDVR */
  .mdvr-section { padding: 70px 0; }
  .mdvr-inner { grid-template-columns: 1fr; gap: 3rem; }

  /* Industries */
  .industries { padding: 70px 0; }
  .ind-grid { grid-template-columns: repeat(2,1fr); }

  /* Testimonials */
  .testimonials { padding: 70px 0; }
  .testi-grid { grid-template-columns: 1fr; }

  /* ROI */
  .roi-section { padding: 60px 0; }
  .roi-inner { grid-template-columns: 1fr; gap: 3rem; }

  /* CTA */
  .cta-section { padding: 70px 0; }
  .cta-inner { grid-template-columns: 1fr; gap: 3rem; }

  /* Resources */
  .resources-section { padding: 70px 0; }

  /* FAQ */
  .faq-section { padding: 70px 0 !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .container { padding: 0 1.2rem; }

  /* Stats bar */
  .stats-bar-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: 1.4rem 1rem; gap: 0.8rem; }
  .stat-icon-box { width: 38px; height: 38px; font-size: 16px; border-radius: 8px; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 11px; }

  /* Section padding reduction */
  .solutions { padding: 48px 0; }
  .platform { padding: 56px 0; }
  .why { padding: 56px 0; }
  .mdvr-section { padding: 56px 0; }
  .industries { padding: 56px 0; }
  .testimonials { padding: 56px 0; }
  .roi-section { padding: 48px 0; }
  .resources-section { padding: 56px 0; }
  .faq-section { padding: 56px 0 !important; }
  .cta-section { padding: 56px 0; }

  /* Section headers */
  .industries-header { margin-bottom: 2.4rem; }
  .testimonials-header { margin-bottom: 2.4rem; }
  .resources-header { margin-bottom: 2.4rem; }
  .faq-header { margin-bottom: 2.4rem; }
  .platform-header { margin-bottom: 2.4rem; }

  /* Grids */
  .sol-grid { grid-template-columns: 1fr; }
  .sol-img-grid { grid-template-columns: 1fr; gap: 10px; }
  .sic-img { height: 140px; }
  .sic-body { padding: 14px; }
  .sic-desc { font-size: 12px; }
  .plat-tabs-v { display: flex; flex-direction: column; }
  .ind-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .ind-grid .ind-card { flex: unset; max-width: unset; }
  .footer-grid { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }

  /* Platform tabs */
  .plat-tab-v { padding: 1rem; }
  .ptv-sub { display: none; }

  /* Platform video panel: taller aspect ratio on mobile */
  .pvp-frame { aspect-ratio: 4/3; min-height: 240px; }
  .plat-video-wrap { min-height: unset; }

  /* Why section card */
  .why-card { padding: 1.4rem; }
  .why-float { position: static; margin-top: 1rem; }
  .why-inner { gap: 2rem; }

  /* MDVR */
  .mdvr-inner { gap: 2rem; }
  .mdvr-cam-grid { grid-template-columns: 1fr 1fr; }
  .mdvr-features { gap: 0.8rem; }

  /* Solutions cards */
  .sol-card { padding: 1.4rem; }

  /* Industries */
  .ind-card { padding: 1.4rem; }

  /* Testimonials */
  .testi-card { padding: 1.4rem; }

  /* ROI */
  .roi-inner { gap: 2rem; }
  .roi-left h2 { font-size: 28px; }

  /* FAQ */
  .faq-q { font-size: 14px; padding: 1rem 1rem; }
  .faq-a > p { font-size: 13.5px; padding: 0 1rem 0; }
  .faq-a.open > p { padding: 0 1rem 1rem; }
  .faq-grid { padding: 0 0.2rem; }

  /* CTA / Demo form */
  .cta-inner { gap: 2rem; }
  .demo-form { padding: 1.6rem; }
  .cta-left h2 { font-size: clamp(26px, 8vw, 36px); }

  /* Footer */
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  /* Floating buttons */
  .floating-action-row { bottom: 14px; right: 14px; gap: 8px; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Trusted ticker label */
  .trusted-label { font-size: 10px; }

  /* Hero */
  .hero-inner { padding: 48px 1.2rem; }
  .hero-h1 { font-size: clamp(36px, 9vw, 52px); margin-bottom: 1rem; }
  .hero-sub { font-size: 14.5px; margin-bottom: 1.8rem; }
  .hero-btns { gap: 10px; }
  .hero-trust { font-size: 11px; gap: 6px; }
  .hs-nav { bottom: 1rem; }
  .hero-badge { font-size: 10px; padding: 5px 10px; }
}

@media (max-width: 380px) {
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 10px; }
  .stat-item { padding: 1rem 0.7rem; gap: 0.6rem; }
  .sol-card { padding: 1.2rem; }
  .demo-form { padding: 1.2rem; }
}

/* ============================================================
   375px — iPhone SE 2/3, iPhone 6/7/8/X/11/12/13 (most common iPhone width)
   Overrides the 380px tightening above for this popular size range.
   ============================================================ */
@media (min-width: 375px) and (max-width: 480px) {
  /* ── Hero ── */
  .hero-inner { padding: 46px 1.1rem; }
  .hero-h1 { font-size: clamp(34px, 9vw, 48px); }
  .hero-sub { font-size: 14px; }

  /* ── Stats bar ── */
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 10.5px; }
  .stat-item { padding: 1.1rem 0.85rem; gap: 0.65rem; }
  .stat-icon-box { width: 36px; height: 36px; font-size: 15px; }

  /* ── Solutions ── */
  .sol-card { padding: 1.3rem; }
  .sol-title { font-size: 16px; }
  .sol-desc { font-size: 13px; }

  /* ── Platform ── */
  .plat-tab-v { padding: 0.9rem 1rem; }
  .ptv-title { font-size: 14.5px; }

  /* ── Testimonials ── */
  .testi-card { padding: 1.3rem; }
  .testi-quote { font-size: 14px; }

  /* ── ROI ── */
  .roi-left h2 { font-size: 28px; }
  .roi-result-val { font-size: 26px; }

  /* ── CTA / Demo form ── */
  .demo-form { padding: 1.4rem; }
  .cta-left h2 { font-size: clamp(26px, 8vw, 36px); }

  /* ── Footer ── */
  .footer-desc { font-size: 13px; }

  /* ── Floating buttons ── */
}
/* ============================================================
   360px — Samsung Galaxy A/M series, OnePlus Nord, Realme, budget Androids
   ============================================================ */
@media (max-width: 360px) {
  /* Prevent any element from creating horizontal overflow */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── Hero ── */
  .hero-inner { padding: 38px 1rem; }
  .hero-h1 { font-size: 32px; margin-bottom: 0.85rem; }
  .hero-sub { font-size: 13.5px; margin-bottom: 1.3rem; }
  /* Badge text is too long for 360px — hide it */
  .hero-badge { display: none; }
  /* Stack CTA buttons vertically so they never overflow narrow viewports */
  .hero-btns { flex-direction: column; gap: 8px; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-trust { font-size: 10px; gap: 5px; }

  /* ── Stats Bar ── */
  .stat-num { font-size: 18px; }
  .stat-item { padding: 0.85rem 0.6rem; gap: 0.5rem; }
  .stat-icon-box { width: 34px; height: 34px; font-size: 14px; border-radius: 7px; }
  .stat-label { font-size: 10px; }

  /* ── Solutions ── */
  .solutions { padding: 40px 0; }
  .solutions-header { margin-bottom: 1.8rem; }
  .solutions-h2 { font-size: 28px; }
  .solutions-sub { font-size: 13.5px; }
  .sol-card { padding: 1.1rem; }
  .sol-title { font-size: 16px; }
  .sol-desc { font-size: 12.5px; }

  /* ── Platform ── */
  .platform { padding: 44px 0; }
  .platform-h2 { font-size: 28px; }
  .platform-sub { font-size: 13.5px; }
  .plat-tab-v { padding: 0.85rem 1rem; }
  .ptv-title { font-size: 14px; }

  /* ── Why InfoTrack ── */
  .why { padding: 44px 0; }
  .why-h2 { font-size: 28px; }
  .why-body { font-size: 13.5px; }
  .why-item-text { font-size: 13.5px; }
  .why-float-num { font-size: 22px; }
  .why-float-label { font-size: 10px; }
  /* Why dashboard KPI grid: collapse to 2 cols and shrink values */
  .wd-kpi-row { grid-template-columns: 1fr 1fr; }
  .wd-kpi { padding: 0.6rem 0.7rem; }
  .wd-kpi-val { font-size: 15px; }
  .wd-kpi-lbl { font-size: 9px; }
  .wd-scores { padding: 0.8rem; }
  .wd-feed { padding: 0.6rem 0.8rem; }
  .wd-feed-text { font-size: 9.5px; }
  .wd-feed-time { font-size: 8.5px; }

  /* ── MDVR Section ── */
  .mdvr-section { padding: 44px 0; }
  .mdvr-text h2 { font-size: 28px; }
  .mdvr-body { font-size: 13.5px; }
  .mdvr-cam-grid { gap: 6px; }

  /* ── Industries ── */
  .industries { padding: 44px 0; }
  .industries-h2 { font-size: 28px; }
  .industries-sub { font-size: 13.5px; }
  .ind-card { padding: 1.1rem 1rem; }
  .ind-title { font-size: 17px; }
  .ind-desc { font-size: 12.5px; }
  .ind-icon { font-size: 28px; margin-bottom: 1rem; }

  /* ── Testimonials ── */
  .testimonials { padding: 44px 0; }
  .testimonials-h2 { font-size: 28px; }
  .testi-card { padding: 1.1rem; }
  .testi-quote { font-size: 13.5px; }
  .testi-name { font-size: 13px; }

  /* ── ROI Calculator ── */
  .roi-section { padding: 36px 0; }
  .roi-left h2 { font-size: 26px; }
  .roi-sub { font-size: 13.5px; }
  .roi-result-val { font-size: 24px; }
  .roi-card { padding: 1.5rem; }

  /* ── CTA / Demo Form ── */
  .cta-section { padding: 44px 0; }
  .cta-left h2 { font-size: 26px; }
  .demo-form { padding: 1.2rem; }
  .demo-form-title { font-size: 18px; margin-bottom: 1.4rem; }
  .cta-check-text { font-size: 13.5px; }

  /* ── Footer ── */
  footer { padding: 44px 0 0; }
  .footer-socials { gap: 10px; }
  .footer-social { width: 40px; height: 40px; font-size: 17px; border-radius: 9px; }
  .footer-desc { font-size: 12.5px; }

  /* ── FAQ ── */
  .faq-section { padding: 40px 0 !important; }
  .faq-q { font-size: 13.5px; padding: 0.85rem 0.9rem; }
  .faq-a > p { font-size: 12.5px; padding: 0 0.9rem 0; }
  .faq-a.open > p { padding: 0 0.9rem 0.9rem; }
  .faq-icon { width: 28px; height: 28px; font-size: 13px; flex-shrink: 0; }

  /* ── Resources ── */
  .resources-section { padding: 40px 0; }
  .resources-h2 { font-size: 24px; }
  .resources-sub { font-size: 13px; }
  .res-card { padding: 1.2rem; }
  .res-card-title { font-size: 14px; }

  /* ── Platform video caption ── */
  .pvp-cap-title { font-size: 16px; }
  .pvp-cap-sub { font-size: 10px; }
  .pvp-cap-val { font-size: 11px; }
  .pvp-cap-stat { padding: 5px 5px; }

  /* ── Section headings (all pages) ── */
  .section-h2 { font-size: clamp(24px, 8vw, 32px); }
  .section-tag { font-size: 10px; letter-spacing: 0.08em; }

  /* ── General overflow guard ── */
  section, .container { max-width: 100%; }
  * { min-width: 0; }

  /* ── Floating Buttons ── */
  .floating-action-row { bottom: 12px; right: 10px; gap: 6px; }
  .live-chat-widget { bottom: 12px; left: 10px; }
}

/* ============================================================
   320px — Very small / legacy phones (old iPhones, budget devices)
   ============================================================ */
@media (max-width: 320px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── Hero ── */
  .hero-inner { padding: 32px 0.85rem; }
  .hero-h1 { font-size: 28px; margin-bottom: 0.75rem; }
  .hero-sub { font-size: 13px; margin-bottom: 1.2rem; }
  /* Hide badge to save vertical space */
  .hero-badge { display: none; }
  /* Buttons always stacked */
  .hero-btns { flex-direction: column; gap: 7px; }
  .hero-btns .btn { width: 100%; justify-content: center; font-size: 13px; padding: 11px 16px; }
  .hero-trust { font-size: 9.5px; gap: 4px; }

  /* ── Stats Bar — single column at 320px ── */
  .stats-bar-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border-light); padding: 0.9rem 1rem; }
  .stat-item:last-child { border-bottom: none; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 11px; }
  .stat-icon-box { width: 36px; height: 36px; font-size: 15px; }

  /* ── Solutions ── */
  .solutions { padding: 36px 0; }
  .solutions-h2 { font-size: 24px; }
  .solutions-sub { font-size: 13px; }
  .sol-card { padding: 1rem; }
  .sol-title { font-size: 15px; }
  .sol-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 10px; }

  /* ── Platform ── */
  .platform { padding: 40px 0; }
  .platform-h2 { font-size: 24px; }
  .platform-sub { font-size: 13px; }
  .plat-tab-v { padding: 0.75rem; }
  .ptv-icon { width: 36px; height: 36px; font-size: 16px; }
  .ptv-title { font-size: 13px; }

  /* ── Why InfoTrack ── */
  .why { padding: 40px 0; }
  .why-h2 { font-size: 24px; }
  .why-body { font-size: 13px; }
  .why-item-text { font-size: 13px; }
  .why-check { width: 18px; height: 18px; font-size: 10px; }

  /* ── MDVR Section ── */
  .mdvr-section { padding: 40px 0; }
  .mdvr-text h2 { font-size: 24px; }
  .mdvr-body { font-size: 13px; }
  .mdvr-feat-text { font-size: 13px; }

  /* ── Industries ── */
  .industries { padding: 40px 0; }
  .industries-h2 { font-size: 24px; }
  .industries-sub { font-size: 13px; }
  .ind-card { padding: 1rem; }
  .ind-title { font-size: 16px; }
  .ind-desc { font-size: 12px; }
  .ind-icon { font-size: 26px; }

  /* ── Testimonials ── */
  .testimonials { padding: 40px 0; }
  .testimonials-h2 { font-size: 24px; }
  .testi-card { padding: 1rem; }
  .testi-quote { font-size: 13px; }
  .testi-stars { font-size: 12px; }

  /* ── ROI Calculator ── */
  .roi-section { padding: 32px 0; }
  .roi-left h2 { font-size: 22px; }
  .roi-card { padding: 1.2rem; }
  .roi-card-title { font-size: 16px; }
  .roi-result-val { font-size: 22px; }

  /* ── CTA / Demo Form ── */
  .cta-section { padding: 40px 0; }
  .cta-left h2 { font-size: 22px; }
  .demo-form { padding: 1rem; }
  .demo-form-title { font-size: 16px; margin-bottom: 1.2rem; }
  .form-input { padding: 10px 11px; font-size: 13px; }
  select.form-input { font-size: 11px; }
  .form-submit { font-size: 14px; padding: 12px; }
  .cta-check-text { font-size: 13px; }

  /* ── Footer ── */
  footer { padding: 40px 0 0; }
  .footer-bottom { gap: 0.75rem; }
  .footer-copy, .footer-bottom-links a { font-size: 11px; }
  .footer-social { width: 36px; height: 36px; font-size: 14px; border-radius: 8px; }
  .footer-desc { font-size: 12px; }
  .fl-info, .fl-track { font-size: 20px; }

  /* ── Floating Buttons — minimum footprint at 320px ── */
  .floating-action-row { bottom: 10px; right: 8px; gap: 5px; }
  .live-chat-widget { bottom: 10px; left: 8px; }
}

/* ============================================================
   GLOBAL MIN / MAX-WIDTH GUARDS
   Prevent any section from overflowing on narrow viewports
   and stop content stretching too wide on ultra-wide screens.
   ============================================================ */

/* Wide-screen cap for key inner wrappers */
.hero-inner,
.why-inner,
.mdvr-inner,
.roi-inner,
.cta-inner {
  max-width: 1320px;
  min-width: 0;
}

/* ── Bug fix: CSS Grid min-content overflow (all 4 bugs) ──────────────────
   CSS Grid's 1fr resolves to max(1fr_share, min-content).
   Without min-width:0, grid children force tracks wider than the viewport.
   This single rule fixes hero-badge, MDVR visual, platform tabs, why/roi.
   ─────────────────────────────────────────────────────────────────────── */
.hero-inner > *,
.mdvr-inner > *,
.plat-split > *,
.why-inner > *,
.roi-inner > *,
.cta-inner > *,
.sol-grid > *,
.ind-grid > *,
.stats-bar-grid > * {
  min-width: 0;
}

/* Ensure all grid/flex children shrink safely */
.sol-card, .ind-card, .testi-card, .plat-tab-v,
.stat-item, .tb-badge, .ww-card, .job-card {
  min-width: 0;
}

/* Constrain images globally */
img { max-width: 100%; height: auto; }

/* ---- Scoped min-width breakpoint: 480px ---- */
@media (min-width: 320px) and (max-width: 480px) {
  .hero-inner { padding: 52px 1.2rem; }
  .hero-h1 { font-size: clamp(30px, 9vw, 44px); }
  .hero-sub { font-size: 14px; }
  .hero-btns { flex-wrap: wrap; gap: 10px; }
  .hero-btns .btn { min-width: 140px; }

  .stats-bar-grid { grid-template-columns: 1fr 1fr; }

  .sol-grid { grid-template-columns: 1fr; }
  .sol-card { padding: 1.4rem 1.2rem; }

  .plat-tabs-v { display: flex; flex-direction: column; }

  .ind-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .ind-grid .ind-card { flex: unset; max-width: unset; }

  .testi-track .testi-card { flex: 0 0 100%; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  .demo-form { padding: 1.4rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   MEGA MENU (Solutions dropdown)
   ============================================================ */
.has-mega { position: relative; }

/* Transparent bridge fills the gap so hover doesn't break mid-travel */
.has-mega::after {
  content: ''; position: absolute;
  top: 100%; left: -30px; right: -30px; height: 14px;
}

.nav-mega {
  position: absolute; top: calc(100% + 12px); left: 0;
  transform: translateY(-8px);
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.5rem;
  width: 680px; max-width: calc(100vw - 4rem);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}
.has-mega:hover .nav-mega,
.has-mega.mega-open .nav-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.mega-inner { display: grid; grid-template-columns: 1fr 200px; gap: 1.2rem; margin-bottom: 1rem; }
.mega-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--gray-400); font-family: var(--font-mono);
  margin-bottom: 0.75rem;
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  transition: background 0.15s, border-color 0.15s; text-decoration: none;
  border: 1px solid transparent;
}
.mega-item:hover { background: var(--red-subtle); border-color: rgba(196,30,58,0.15); }
.mega-item:hover .mi-name { color: var(--red); }
.mi-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.mi-red { background: var(--red-subtle); }
.mi-navy { background: var(--navy-subtle); }
.mi-name { font-size: 16px; font-weight: 600; color: var(--dark); line-height: 1.2; }
.mi-desc { font-size: 13px; color: var(--gray-400); margin-top: 1px; }
.mega-right {
  background: var(--gray-50); border-radius: 10px;
  padding: 1.2rem; border: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.mega-feat-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--red); font-family: var(--font-mono);
}
.mega-feat-title { font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.35; }
.mega-feat-desc { font-size: 13px; color: var(--gray-600); line-height: 1.5; flex: 1; }

.mega-feat-rotator { position: relative; flex: 1; min-height: 172px; overflow: hidden; }
.mega-feat-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.4rem;
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.42s ease, transform 0.42s ease;
  pointer-events: none;
}
.mega-feat-slide.mfs-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mega-feat-icon { font-size: 22px; display: flex; align-items: center; line-height: 1; margin-bottom: 2px; }

.mega-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--border-light);
}
.mega-all { font-size: 16px; font-weight: 600; color: var(--red); transition: color 0.2s; }
.mega-all:hover { color: var(--red-hover); }
.mega-footer-links { display: flex; gap: 1.5rem; }
.mega-footer-links a { font-size: 16px; color: var(--gray-600); font-weight: 500; transition: color 0.2s; }
.mega-footer-links a:hover { color: var(--dark); }

/* Mobile solutions toggle */
.nav-mobile-toggle { cursor: pointer; user-select: none; }
.nav-mobile-sub { display: none; padding: 8px 0 8px 16px; }
.nav-mobile-sub.open { display: block; }
.nav-mobile-sub a { display: block; padding: 9px 0; color: var(--gray-600); font-size: 16px; font-weight: 500; }
.mob-sol-item { display: flex !important; align-items: center; gap: 10px; }
.mob-sol-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mob-sol-icon img { display: block; object-fit: contain; }

/* ============================================================
   HERO MEDIA STRIP
   ============================================================ */
.hero-media-strip {
  width: 100%; background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  padding: 0;
}
.hms-inner {
  width: 92%; margin: 0 auto; padding: 0 2rem;
  display: grid; grid-template-columns: repeat(4,1fr);
}
.hms-card {
  display: flex; align-items: center; gap: 12px;
  padding: 1.2rem 1.5rem; border-right: 1px solid var(--border-light);
}
.hms-card:last-child { border-right: none; }
.hms-icon {
  font-size: 22px; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--white); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
}
.hms-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gray-400); font-family: var(--font-mono);
  margin-bottom: 2px;
}
.hms-title { font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 4px; }
.hms-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 100px;
}
.hms-warn { background: #FEF3C7; color: #B45309; }
.hms-ok { background: #D1FAE5; color: #065F46; }
.hms-live { background: rgba(0,196,154,0.1); color: var(--teal); }

@media (max-width: 900px) {
  .hms-inner { grid-template-columns: 1fr 1fr; }
  .hms-card:nth-child(2) { border-right: none; }
  .hms-card:nth-child(3) { border-top: 1px solid var(--border-light); }
}
@media (max-width: 600px) {
  .hms-inner { grid-template-columns: 1fr; }
  .hms-card { border-right: none; border-bottom: 1px solid var(--border-light); }
  .hms-card:last-child { border-bottom: none; }
}

/* ============================================================
   INDUSTRIES — unified 4-color cards
   ============================================================ */
.ind-bg-teal { background: #0A6B55; }
.ind-bg-slate { background: #2C3E6B; }
.ind-card.ind-bg-teal .ind-title,
.ind-card.ind-bg-slate .ind-title { color: #fff; }
.ind-card.ind-bg-teal .ind-desc,
.ind-card.ind-bg-slate .ind-desc { color: rgba(255,255,255,0.62); }
.ind-card.ind-bg-teal .ind-arrow,
.ind-card.ind-bg-slate .ind-arrow { color: rgba(255,255,255,0.8); }

/* MDVR alert strip */
.mdvr-alert-strip { margin-top: 10px; height: 34px; overflow: hidden; border-radius: 6px; }
.mdvr-alerts-track {
  display: flex; flex-direction: column; gap: 6px;
  animation: alertTrack 12s ease-in-out infinite;
}
.mdvr-alert-item {
  height: 34px; flex-shrink: 0;
  display: flex; align-items: center;
  font-size: 11px; font-family: var(--font-mono); font-weight: 600;
  padding: 0 12px; border-radius: 6px; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdvr-alert-ai   { background: rgba(0,196,154,0.07); color: var(--teal); border: 1px solid rgba(0,196,154,0.2); }
.mdvr-alert-warn { background: rgba(251,192,45,0.12); color: #FBC02D; border: 1px solid rgba(251,192,45,0.2); }
.mdvr-alert-info { background: rgba(46,58,140,0.1); color: var(--navy-mid); border: 1px solid rgba(46,58,140,0.15); }
.mdvr-alert-ok   { background: rgba(0,196,154,0.08); color: var(--teal); border: 1px solid rgba(0,196,154,0.18); }

/* Footer brand extras */
.fl-sub { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--gray-600); letter-spacing: -0.3px; }

/* Footer social hover colors */
.footer-social { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.fs-facebook:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.fs-instagram:hover { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; border-color: transparent; }
.fs-linkedin:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.fs-x:hover { background: #000; color: #fff; border-color: #000; }
.fs-youtube:hover { background: #FF0000; color: #fff; border-color: #FF0000; }

/* ============================================================
   TESTIMONIALS CAROUSEL
   ============================================================ */
.testi-carousel-wrap { position: relative; overflow: hidden; }
.testi-track {
  display: flex; gap: 20px;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.testi-track .testi-card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
}
.testi-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 2rem;
}
.testi-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border-light);
  background: var(--white); color: var(--gray-600);
  font-size: 16px; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.testi-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.testi-dots { display: flex; gap: 6px; align-items: center; }
.testi-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-200); transition: var(--transition); cursor: pointer; border: none;
}
.testi-dot.active { background: var(--red); width: 20px; border-radius: 4px; }

@media (max-width: 900px) {
  .testi-track .testi-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 600px) {
  .testi-track .testi-card { flex: 0 0 100%; }
}

/* Testimonial avatar — photo-style */
.testi-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Testimonials — live badge */
.testi-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,196,154,0.08); border: 1px solid rgba(0,196,154,0.25);
  color: var(--teal); padding: 5px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  font-family: var(--font-mono); text-transform: uppercase;
  margin-bottom: 1rem; margin-left: auto; margin-right: auto;
}
.testi-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  animation: badgePulse 1.5s ease infinite; flex-shrink: 0;
}
.testimonials-header { display: flex; flex-direction: column; align-items: center; }

/* Card header with timestamp */
.testi-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.testi-timestamp {
  font-family: var(--font-mono); font-size: 10px; color: var(--navy);
  font-weight: 700; letter-spacing: 0.04em;
  background: rgba(46,58,140,0.07); padding: 3px 9px;
  border-radius: 100px; border: 1px solid rgba(46,58,140,0.15);
}
.testi-metric {
  display: inline-flex; align-items: baseline; gap: 5px;
  margin-top: 1.2rem; padding: 6px 12px;
  background: var(--gray-50); border: 1px solid var(--border-light);
  border-radius: 100px; font-size: 11px; color: var(--gray-600);
  font-family: var(--font-mono); font-weight: 600;
}
.tm-val { color: var(--red); font-size: 14px; font-weight: 800; }

/* Testimonial company logo */
.testi-company {
  display: flex; align-items: center; gap: 10px;
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border-light);
}
.testi-co-logo {
  height: 22px; width: auto; max-width: 80px;
  opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s; display: block;
}
.testi-card:hover .testi-co-logo { opacity: 1; filter: grayscale(0); }
.testi-co-name {
  font-size: 11px; font-weight: 700; color: var(--gray-400);
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ============================================================
   PRICING SECTION
   ============================================================ */
.pricing-section { padding: 100px 0; background: var(--gray-50); }
.pricing-header { text-align: center; margin-bottom: 3.5rem; }
.pricing-h2 { font-size: clamp(36px,4.5vw,56px); color: var(--dark); margin-bottom: 1rem; }
.pricing-sub { font-size: 16px; color: var(--gray-600); max-width: 480px; margin: 0 auto; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  align-items: stretch; margin-bottom: 2rem;
}
.pricing-card {
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 2.2rem 2rem;
  position: relative; transition: box-shadow 0.3s, transform 0.3s;
  display: flex; flex-direction: column; gap: 0;
}
.pricing-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.pricing-featured {
  border-color: var(--red); border-width: 2px;
  box-shadow: 0 0 0 4px rgba(196,30,58,0.07);
}
.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 14px; border-radius: 100px; white-space: nowrap;
  font-family: var(--font-mono);
}
.pricing-tier { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 0.5rem; }
.pricing-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; margin-bottom: 1.4rem; }
.pricing-price {
  font-family: var(--font-head); font-size: 32px; font-weight: 800;
  color: var(--red); margin-bottom: 1.6rem; line-height: 1;
}
.pricing-per { font-size: 13px; font-weight: 500; color: var(--gray-600); }
.pricing-features {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 2rem; flex: 1;
}
.pricing-features li { font-size: 13.5px; color: var(--gray-800); }
.pricing-btn { width: 100%; justify-content: center; }
.pricing-note {
  text-align: center; font-size: 13.5px; color: var(--gray-600); margin-top: 1rem;
}
.pricing-note-link { color: var(--red); font-weight: 600; }

/* ============================================================
   HERO — TEXT COLOURS (WHITE BACKGROUND)
   ============================================================ */
.hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
}

/* ============================================================
   BUTTON ANIMATIONS
   ============================================================ */
.btn-red { position: relative; overflow: hidden; }
.btn-red::after {
  content: ''; position: absolute; top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  animation: btnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShimmer {
  0%   { left: -150%; }
  45%  { left: 150%; }
  100% { left: 150%; }
}
.btn-ghost-dark {
  background: transparent; color: var(--dark);
  border: 1.5px solid var(--gray-200);
}
.btn-ghost-dark:hover { background: var(--gray-50); border-color: var(--gray-400); transform: translateY(-1px); }
@keyframes enquireBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

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

/* ============================================================
   HERO VISUAL — SLIDE 1: MDVR CAM GRID
   ============================================================ */
.hv-cam-grid {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: 0 40px 80px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
  transition: transform 0.6s ease;
}
.hv-cam-grid:hover { transform: translateY(-4px); }
.hvcg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.7rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}
.hvcg-rec {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: var(--red);
  font-family: var(--font-mono); letter-spacing: 0.06em;
}
.hvcg-res { font-family: var(--font-mono); font-size: 10px; color: var(--gray-400); }
.hvcg-cams {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; margin-bottom: 0.7rem; flex: 1; min-height: 0;
}
.hvcg-cam {
  background: #dde6f0; border-radius: 8px;
  position: relative;
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center; min-height: 0;
  overflow: hidden;
}
.hvcg-cam::before {
  content: '📷'; font-size: 18px; opacity: 0.35;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.hvcg-cam-front { border-top: 2px solid rgba(196,30,58,0.55); }
.hvcg-cam-cabin { border-top: 2px solid rgba(46,58,140,0.55); }
.hvcg-cam-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  border-radius: 8px;
}
.hvcg-cam-label {
  position: absolute; bottom: 5px; left: 7px;
  font-size: 9px; font-family: var(--font-mono);
  color: var(--gray-500); font-weight: 600; letter-spacing: 0.05em;
}
.hvcg-cam-alert {
  position: absolute; top: 5px; right: 5px;
  background: rgba(196,30,58,0.88); color: #fff;
  font-size: 8px; font-weight: 700; padding: 2px 6px;
  border-radius: 100px; font-family: var(--font-mono);
  animation: alertBlink 2s ease-in-out infinite;
}
.hvcg-alert-blue { background: rgba(46,58,140,0.88); }
.hvcg-alert-orange { background: rgba(234,120,20,0.88); }
@keyframes alertBlink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.65; }
}
.hvcg-ai-bar {
  background: rgba(0,196,154,0.07); border: 1px solid rgba(0,196,154,0.2);
  border-radius: 8px; padding: 8px 12px;
  font-size: 10px; color: var(--teal);
  font-family: var(--font-mono); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}

/* Camera cycling — fullscreen spotlight */
.hvcg-cams { position: relative; }
.hvcg-cam {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hvcg-cam--spotlight {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 5;
  border-radius: 10px !important;
  grid-column: unset !important; grid-row: unset !important;
}
.hvcg-cam--hidden {
  opacity: 0;
  pointer-events: none;
}
.hvcg-cam--spotlight .hvcg-cam-alert { font-size: 10px; padding: 4px 10px; top: 10px; right: 10px; }
.hvcg-cam--spotlight .hvcg-cam-label { font-size: 11px; bottom: 10px; left: 12px; }

/* ============================================================
   HERO VISUAL — SLIDE 2: FLEET MAP
   ============================================================ */
.hv-map-visual {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
  transition: transform 0.6s ease;
}
.hv-map-visual:hover { transform: translateY(-4px); }
.hmv-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-light);
}
.hmv-live {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: var(--teal);
  font-family: var(--font-mono); letter-spacing: 0.05em;
}
.hmv-count { font-family: var(--font-mono); font-size: 10px; color: var(--gray-400); }
.hmv-map {
  height: 185px; background: #dde6f0;
  position: relative; overflow: hidden;
}
.hmv-map::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(35deg, transparent 44%, rgba(46,58,140,0.1) 44%, rgba(46,58,140,0.1) 46%, transparent 46%),
    linear-gradient(-25deg, transparent 52%, rgba(46,58,140,0.07) 52%, rgba(46,58,140,0.07) 54%, transparent 54%),
    linear-gradient(90deg, transparent 28%, rgba(46,58,140,0.07) 28%, rgba(46,58,140,0.07) 30%, transparent 30%);
}
.hmv-dot {
  position: absolute; width: 8px; height: 8px;
  border-radius: 50%; background: var(--teal);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--teal);
}
.hmv-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid currentColor;
  opacity: 0.3; animation: vRing 2s ease-out infinite;
}
.hmv-d1 { top: 30%; left: 25%; background: var(--red); color: var(--red); box-shadow: 0 0 8px var(--red); }
.hmv-d2 { top: 55%; left: 60%; color: var(--teal); }
.hmv-d3 { top: 20%; left: 70%; background: #FBC02D; color: #FBC02D; box-shadow: 0 0 8px #FBC02D; }
.hmv-d4 { top: 70%; left: 35%; color: var(--teal); }
.hmv-d5 { top: 42%; left: 80%; color: var(--teal); }
.hmv-legend {
  position: absolute; bottom: 8px; right: 8px;
  display: flex; flex-direction: row; gap: 10px;
  background: rgba(5,13,30,0.75); border-radius: 6px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.1);
}
.hmv-leg { font-size: 9px; font-family: var(--font-mono); color: rgba(255,255,255,0.5); font-weight: 600; }
.active-c { color: var(--teal) !important; }
.hmv-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--border-light);
}
.hmv-stat {
  padding: 0.6rem 0.8rem; text-align: center;
  border-right: 1px solid var(--border-light);
}
.hmv-stat:last-child { border-right: none; }
.hmv-stat-val { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--dark); line-height: 1; }
.hmv-stat-label { font-size: 9px; color: var(--gray-400); font-family: var(--font-mono); margin-top: 2px; }

/* ============================================================
   HERO VISUAL — SLIDE 3: DRIVER SAFETY
   ============================================================ */
.hv-safety-visual {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: 0 40px 80px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
  transition: transform 0.6s ease;
}
.hv-safety-visual:hover { transform: translateY(-4px); }
.hsv-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.hsv-label {
  font-size: 9px; font-weight: 700; color: var(--gray-400);
  font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.hsv-badge {
  background: rgba(0,196,154,0.12); color: var(--teal);
  border: 1px solid rgba(0,196,154,0.25);
  font-size: 9px; font-weight: 700; padding: 2px 8px;
  border-radius: 100px; font-family: var(--font-mono);
}
.hsv-score-wrap {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.hsv-score-ring {
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--teal) 0% 87%, #d1dae5 87% 100%);
  display: flex; align-items: center; justify-content: center;
}
.hsv-score-inner {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hsv-score-val { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--dark); line-height: 1; }
.hsv-score-sub { font-size: 9px; color: var(--gray-400); font-family: var(--font-mono); }
.hsv-driver-info { flex: 1; }
.hsv-driver-name { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 2px; }
.hsv-driver-route { font-size: 9.5px; color: var(--gray-400); font-family: var(--font-mono); margin-bottom: 4px; }
.hsv-driver-change { font-size: 11px; color: var(--teal); font-weight: 600; font-family: var(--font-mono); }
.hsv-events { display: flex; flex-direction: column; gap: 7px; }
.hsv-event {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gray-50); border-radius: 7px;
  padding: 7px 10px; border: 1px solid var(--border-light);
}
.hsv-event-name { font-size: 11.5px; color: var(--gray-600); font-weight: 500; }
.hsv-event-badge {
  font-size: 9.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 100px; font-family: var(--font-mono);
}
.hsv-ev-ok { background: rgba(0,196,154,0.12); color: var(--teal); border: 1px solid rgba(0,196,154,0.2); }
.hsv-ev-warn { background: rgba(251,192,45,0.12); color: #FBC02D; border: 1px solid rgba(251,192,45,0.2); }

/* ============================================================
   LIVE CHAT WIDGET
   ============================================================ */
.live-chat-widget {
  position: fixed; bottom: 28px; left: 28px; z-index: 900;
}
.lc-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--navy); color: #fff;
  border-radius: 50%; border: none; cursor: pointer;
  box-shadow: 0 8px 28px rgba(46,58,140,0.45);
  transition: transform 0.25s, box-shadow 0.25s;
  animation: enquireBounce 3.5s ease-in-out infinite;
}
.lc-btn:hover { transform: translateY(-3px); animation: none; box-shadow: 0 14px 36px rgba(46,58,140,0.55); }
.lc-pulse {
  position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); border: 2px solid var(--navy);
  animation: badgePulse 2s ease infinite;
}
.lc-panel {
  position: absolute; bottom: calc(100% + 12px); left: 0;
  width: 320px; background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
  overflow: hidden;
  transform: scale(0.9) translateY(16px);
  transform-origin: bottom left;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.lc-panel.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.lc-header {
  background: var(--navy); padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 10px;
}
.lc-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
  font-family: var(--font-head);
}
.lc-hinfo { flex: 1; }
.lc-hname { font-size: 14px; font-weight: 700; color: #fff; }
.lc-hstatus {
  font-size: 11px; color: rgba(255,255,255,0.52);
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
}
.lc-online-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: badgePulse 1.5s ease infinite; flex-shrink: 0;
}
.lc-close {
  background: rgba(255,255,255,0.1); border: none; color: rgba(255,255,255,0.65);
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.lc-close:hover { background: rgba(255,255,255,0.22); color: #fff; }
.lc-body { padding: 1.2rem; background: var(--gray-50); }
.lc-bubble {
  background: var(--white); border: 1px solid var(--border-light);
  border-radius: 12px 12px 12px 2px;
  padding: 0.9rem 1.1rem; box-shadow: var(--shadow-card);
}
.lc-bubble p { font-size: 13.5px; color: var(--gray-800); line-height: 1.6; }
.lc-bubble p:not(:last-child) { margin-bottom: 5px; }
.lc-options {
  padding: 1rem; border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 8px;
}
.lc-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-light);
  background: var(--white); cursor: pointer;
  transition: var(--transition); text-decoration: none;
  font-family: var(--font-body); color: var(--dark);
  width: 100%; text-align: left;
}
.lc-option:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.lco-livechat:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.lco-call:hover { background: var(--red); color: #fff; border-color: var(--red); }
.lco-enquiry:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

@media (max-width: 600px) {
  .live-chat-widget { bottom: 14px; left: 14px; }
  .lc-panel { width: calc(100vw - 28px); max-width: 320px; }
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero { padding-bottom: 80px; }
.hs-track { width: 100%; }
.hs-slide { display: none; width: 100%; }
.hs-slide.active { display: block; animation: heroFadeUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-nav {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem; z-index: 10;
}
.hs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(46,58,140,0.18); border: none; cursor: pointer;
  transition: all 0.3s ease; padding: 0;
}
.hs-dot.active { background: var(--red); width: 24px; border-radius: 4px; }
.hs-dot:hover:not(.active) { background: rgba(46,58,140,0.38); }
.hs-prev, .hs-next {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.88); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; color: var(--dark);
  transition: var(--transition); box-shadow: var(--shadow-card); padding: 0;
}
.hs-prev:hover, .hs-next:hover { background: #fff; transform: scale(1.08); box-shadow: var(--shadow-lift); }

/* ============================================================
   HERO VISUAL PANELS — light glass cards
   ============================================================ */

/* ── Hero Alert Gallery ── */
.hv-alert-gallery {
  display: flex; flex-direction: column; gap: 1rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 20px; padding: 1.2rem 1.2rem 1.4rem;
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.hv-alert-gallery:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.hv-gallery-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}
.hv-gallery-topbar .hmv-live { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--dark); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.hv-gallery-topbar .hmv-count { font-size: 11px; color: var(--gray-400); font-family: var(--font-mono); }
.hv-gallery-topbar .live-dot { background: #00c47a; }
.hv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 8px;
  flex: 1;
}
.hv-gallery-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #111;
}
.hv-gallery-card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hv-gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,10,25,0.88) 0%, transparent 55%);
  pointer-events: none;
}
.hv-gallery-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 100px;
  font-size: 9px; font-weight: 700; color: #fff;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
}
.hv-gallery-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.6rem 0.75rem 0.8rem;
}
.hv-gallery-label {
  font-family: var(--font-head); font-size: 12px; font-weight: 800; color: #fff; margin-bottom: 2px;
}
.hv-gallery-desc {
  font-size: 9px; color: rgba(255,255,255,0.55); font-family: var(--font-mono);
}

/* shared card base */
.hv-cam-grid, .hv-map-visual, .hv-safety-visual {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 20px; padding: 2rem;
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden; min-height: 340px;
  display: flex; flex-direction: column;
}
.hv-cam-grid:hover, .hv-map-visual:hover, .hv-safety-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
}

/* ── Slide 1 · Camera Grid ── */
.hvcg-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.8rem; padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.hvcg-rec {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  color: var(--red); letter-spacing: 0.06em; text-transform: uppercase;
}
.hvcg-res {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(0,0,0,0.35); font-weight: 600;
}
.hvcg-cams {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; margin-bottom: 8px; flex: 1; min-height: 210px;
}
.hvcg-cam {
  background: linear-gradient(135deg, #e8edf7 0%, #f0f4fb 100%);
  border-radius: 10px; position: relative;
  border: 1px solid rgba(46,58,140,0.1);
  display: flex; align-items: flex-end; overflow: hidden; min-height: 90px;
}
.hvcg-cam::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(46,58,140,0.06) 0%, transparent 60%);
}
.hvcg-cam-label {
  font-family: var(--font-head); font-size: 8px; font-weight: 700;
  color: rgba(0,0,0,0.4); padding: 0 0 5px 7px;
  letter-spacing: 0.08em; text-transform: uppercase; position: relative; z-index: 1;
}
.hvcg-cam-front { border-top: 2px solid rgba(196,30,58,0.5); }
.hvcg-cam-cabin { border-top: 2px solid rgba(46,58,140,0.45); }
.hvcg-cam-alert {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  font-family: var(--font-head); font-size: 8px; font-weight: 700; color: #fff;
  background: var(--red); padding: 3px 8px; border-radius: 20px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(196,30,58,0.35);
  animation: alertBlink 2s ease-in-out infinite;
}
.hvcg-alert-blue {
  background: var(--navy); box-shadow: 0 2px 8px rgba(46,58,140,0.35);
}
@keyframes alertBlink { 0%,100%{opacity:1} 50%{opacity:0.6} }
.hvcg-ai-bar {
  background: rgba(0,196,154,0.08); border: 1px solid rgba(0,196,154,0.2);
  border-radius: 10px; padding: 8px 12px;
  font-family: var(--font-head); font-size: 10px; font-weight: 600;
  color: #00876b; display: flex; align-items: center; gap: 8px;
  letter-spacing: 0.02em;
}

/* ── Slide 2 · Fleet Map ── */
.hmv-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.8rem; padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.hmv-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  color: #00876b; letter-spacing: 0.05em; text-transform: uppercase;
}
.hmv-count {
  font-family: var(--font-mono); font-size: 10px; color: rgba(0,0,0,0.35); font-weight: 500;
}
.hmv-map {
  background: linear-gradient(145deg, #dde8f5 0%, #e8f0fa 100%);
  border-radius: 12px; flex: 1; min-height: 185px;
  position: relative; overflow: hidden; margin-bottom: 10px;
  border: 1px solid rgba(46,58,140,0.1);
}
.hmv-map::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(25deg, transparent 45%, rgba(46,58,140,0.08) 45%, rgba(46,58,140,0.08) 47%, transparent 47%),
    linear-gradient(-18deg, transparent 38%, rgba(46,58,140,0.06) 38%, rgba(46,58,140,0.06) 40%, transparent 40%),
    linear-gradient(85deg, transparent 60%, rgba(46,58,140,0.05) 60%, rgba(46,58,140,0.05) 62%, transparent 62%);
}
.hmv-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%,-50%); }
.hmv-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.4; animation: vRing 2s ease-out infinite; }
.hmv-d1{background:var(--red);color:var(--red);top:30%;left:25%;animation:hmv1 7s ease-in-out infinite}
.hmv-d2{background:#00c49a;color:#00c49a;top:55%;left:60%;animation:hmv2 9s ease-in-out infinite}
.hmv-d3{background:var(--red);color:var(--red);top:22%;left:70%;animation:hmv3 6s ease-in-out infinite}
.hmv-d4{background:#5b6fd4;color:#5b6fd4;top:72%;left:35%;animation:hmv4 8s ease-in-out infinite}
.hmv-d5{background:#00c49a;color:#00c49a;top:40%;left:82%;animation:hmv5 5.5s ease-in-out infinite}
@keyframes hmv1{0%{top:30%;left:25%}50%{top:25%;left:33%}100%{top:30%;left:25%}}
@keyframes hmv2{0%{top:55%;left:60%}50%{top:50%;left:68%}100%{top:55%;left:60%}}
@keyframes hmv3{0%{top:22%;left:70%}50%{top:28%;left:76%}100%{top:22%;left:70%}}
@keyframes hmv4{0%{top:72%;left:35%}50%{top:66%;left:28%}100%{top:72%;left:35%}}
@keyframes hmv5{0%{top:40%;left:82%}50%{top:35%;left:78%}100%{top:40%;left:82%}}
.hmv-legend {
  position: absolute; bottom: 8px; left: 10px; display: flex; flex-direction: row; gap: 12px;
  background: rgba(255,255,255,0.75); border-radius: 6px; padding: 5px 10px;
  border: 1px solid rgba(0,0,0,0.06);
}
.hmv-leg { font-family: var(--font-head); font-size: 9px; font-weight: 600; color: rgba(0,0,0,0.45); }
.hmv-leg.active-c { color: var(--red); }
.hmv-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.hmv-stat {
  background: rgba(46,58,140,0.05); border-radius: 10px;
  padding: 9px 10px; border: 1px solid rgba(46,58,140,0.1); text-align: center;
}
.hmv-stat-val {
  font-family: var(--font-head); font-size: 17px; font-weight: 800;
  color: var(--dark); line-height: 1;
}
.hmv-stat-label {
  font-family: var(--font-mono); font-size: 8.5px; color: rgba(0,0,0,0.4);
  margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Slide 3 · Driver Safety ── */
.hsv-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.8rem; padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.hsv-label {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  color: rgba(0,0,0,0.4); letter-spacing: 0.07em; text-transform: uppercase;
}
.hsv-badge {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  color: #00876b; background: rgba(0,196,154,0.1);
  border: 1px solid rgba(0,196,154,0.25); padding: 3px 10px; border-radius: 100px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.hsv-score-wrap { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.6rem; }
.hsv-score-ring {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(#4f6ef7 0deg, #4f6ef7 313deg, rgba(0,0,0,0.07) 313deg);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 4px 16px rgba(79,110,247,0.2);
}
.hsv-score-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 6px rgba(0,0,0,0.06); }
.hsv-score-inner { position: relative; z-index: 1; text-align: center; }
.hsv-score-val {
  font-family: var(--font-head); font-size: 26px; font-weight: 800;
  color: var(--dark); line-height: 1;
}
.hsv-score-sub {
  font-family: var(--font-mono); font-size: 8px; color: rgba(0,0,0,0.4);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}
.hsv-driver-info { flex: 1; min-width: 0; }
.hsv-driver-name {
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  color: var(--dark); margin-bottom: 3px;
}
.hsv-driver-route {
  font-family: var(--font-mono); font-size: 9.5px; color: rgba(0,0,0,0.4);
}
.hsv-driver-change {
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  color: #00876b; margin-top: 5px;
}
.hsv-events { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: flex-end; }
.hsv-event {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(46,58,140,0.04); border-radius: 10px; padding: 12px 14px;
  border: 1px solid rgba(46,58,140,0.08);
}
.hsv-event-name {
  font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
  color: rgba(0,0,0,0.65);
}
.hsv-event-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
}
.hsv-ev-ok { background: rgba(0,196,154,0.12); color: #00876b; border: 1px solid rgba(0,196,154,0.2); }
.hsv-ev-warn { background: rgba(251,192,45,0.12); color: #b8860b; border: 1px solid rgba(251,192,45,0.25); }

/* ============================================================
   VIDEO PLACEHOLDER IMPROVEMENTS (not black)
   ============================================================ */
.hvf-placeholder { background: #dde6f0 !important; }
.pvp-placeholder { background: var(--gray-50) !important; }
.pvp-placeholder::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ============================================================
   SOLUTIONS — LIGHT THEME WITH ROTATION ANIMATION
   ============================================================ */
.solutions { background: var(--gray-50); position: relative; overflow: hidden; }
.solutions::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(46,58,140,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,58,140,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.solutions .container { position: relative; z-index: 1; }
.solutions .solutions-h2 { color: var(--dark); }
.solutions .solutions-sub { color: var(--gray-600); }
.solutions .sol-grid { gap: 20px; background: transparent; border: none; border-radius: 0; }
.solutions .sol-card {
  background: var(--white);
  border: 1px solid var(--border-light) !important;
  border-radius: 16px;
  border-left: 3px solid transparent !important;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.solutions .sol-card.br { border-left-color: var(--red) !important; }
.solutions .sol-card.bn { border-left-color: var(--navy) !important; }
.solutions .sol-card:hover {
  transform: translateY(-8px) rotateX(4deg) rotateY(-3deg) scale(1.02);
  box-shadow: 0 24px 56px rgba(0,0,0,0.13), 0 8px 24px rgba(196,30,58,0.08) !important;
}
.solutions .sol-card.bn:hover {
  box-shadow: 0 24px 56px rgba(0,0,0,0.13), 0 8px 24px rgba(46,58,140,0.1) !important;
}
.solutions .sol-num { color: rgba(196,30,58,0.38); }
.solutions .sol-title { color: var(--dark); }
.solutions .sol-desc { color: var(--gray-600); }
.solutions .sol-link { color: var(--red); }
.solutions .si-red { background: #FEE8EC; }
.solutions .si-navy { background: #EEF0FA; }
.solutions .sol-icon { width: 64px; height: 64px; border-radius: 14px; font-size: 30px; margin-bottom: 1.2rem; }

/* Subtle float animation on cards — staggered */
@keyframes solFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.solutions .sol-card:nth-child(1) { animation: solFloat 4.0s ease-in-out infinite; }
.solutions .sol-card:nth-child(2) { animation: solFloat 4.3s ease-in-out 0.3s infinite; }
.solutions .sol-card:nth-child(3) { animation: solFloat 4.6s ease-in-out 0.6s infinite; }
.solutions .sol-card:nth-child(4) { animation: solFloat 3.8s ease-in-out 0.9s infinite; }
.solutions .sol-card:nth-child(5) { animation: solFloat 4.2s ease-in-out 0.15s infinite; }
.solutions .sol-card:nth-child(6) { animation: solFloat 4.5s ease-in-out 0.45s infinite; }
.solutions .sol-card:nth-child(7) { animation: solFloat 3.9s ease-in-out 0.75s infinite; }
.solutions .sol-card:nth-child(8) { animation: solFloat 4.4s ease-in-out 1.0s infinite; }
.solutions .sol-card:hover { animation: none; }

/* ============================================================
   INNER PAGE — SHARED BASE
   ============================================================ */
.page-hero {
  background: #fff;
  padding-top: var(--nav-h); padding-bottom: 2rem; position: relative; overflow: hidden;
  min-height: unset;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
}
.page-glow-red { position: absolute; width: 600px; height: 600px; left: -150px; top: -100px; background: radial-gradient(circle, rgba(196,30,58,0.08) 0%, transparent 65%); pointer-events: none; }
.page-glow-navy { position: absolute; width: 700px; height: 700px; right: -150px; top: -50px; background: radial-gradient(circle, rgba(46,58,140,0.08) 0%, transparent 60%); pointer-events: none; }
.page-hero-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center; width: 92%; margin: 0 auto; padding: 50px 2rem 80px;
  position: relative; z-index: 2;
}
.page-hero-inner--home { grid-template-columns: 5fr 6fr; gap: 3.5rem; }
.page-hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(56,72,125,0.10); border: 1px solid rgba(56,72,125,0.28); color: var(--navy); padding: 5px 14px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 1.5rem; font-family: var(--font-mono); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; max-width: 100%; overflow-x: auto; }
a.page-hero-badge:hover { opacity: 0.85; transform: translateY(-1px); }
.page-hero-h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(40px,5vw,68px); line-height: 1.05; letter-spacing: -1px; color: var(--dark); margin-bottom: 1.4rem; }
.page-hero-h1 .h1-red  { color: var(--red); }
.page-hero-h1 .h1-navy { color: var(--navy); }
.page-hero-sub { font-size: 16px; color: rgba(0,0,0,0.55); line-height: 1.72; max-width: 480px; margin-bottom: 2.2rem; }
.page-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 2rem; }
.page-hero-stats { display: flex; gap: 2rem; flex-wrap: nowrap; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(0,0,0,0.1); }
.ph-stat-val { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--dark); line-height: 1; margin-bottom: 3px; }
.ph-stat-val .stat-accent { color: var(--red); }
.ph-stat-label { font-size: 11px; color: rgba(0,0,0,0.4); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================
   INDEX HERO — FLEET LIVE TRACKING CARD
   ============================================================ */
.hv-fleet-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hv-fleet-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 12px 48px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hv-fleet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
}

/* Header bar */
.hfc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid #f0f2f5;
}
.hfc-live {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: #00876b; letter-spacing: 0.06em; text-transform: uppercase;
}
.hfc-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00c49a;
  box-shadow: 0 0 0 3px rgba(0,196,154,0.2);
  animation: pulse 2s ease-in-out infinite;
}
.hfc-meta {
  font-family: var(--font-mono); font-size: 10px; color: #a0aec0;
}

/* Vehicle rows */
.hfc-vehicles {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 1.2rem;
}
.hfc-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f0f2f5;
  transition: background 0.2s;
}
.hfc-row:hover { background: #f1f5fb; }

/* Status dot */
.hfc-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.hfc-moving  { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.hfc-idle    { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.2); }
.hfc-stopped { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); }

/* Row text */
.hfc-reg {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: #1e293b; white-space: nowrap; min-width: 0;
}
.hfc-speed {
  font-family: var(--font-mono); font-size: 10.5px;
  color: #64748b; white-space: nowrap;
}
.hfc-idle-text    { color: #d97706; }
.hfc-stopped-text { color: #ef4444; }
.hfc-route {
  font-family: var(--font-mono); font-size: 10px;
  color: #94a3b8; white-space: nowrap;
}

/* Summary row */
.hfc-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.hfc-sum-item {
  background: #f8fafc;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.hfc-sum-val {
  font-family: var(--font-mono); font-size: 26px; font-weight: 800;
  color: #1e293b; line-height: 1; margin-bottom: 4px;
}
.hfc-sum-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: #94a3b8; text-transform: uppercase; letter-spacing: 0.07em;
}

/* InfoVision MDVR visual — matches index hero card style */
.iv-mdvr-visual {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 20px; padding: 2rem;
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
}
.iv-mdvr-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.iv-mdvr-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(0,0,0,0.07); }
.iv-rec { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--red); letter-spacing: 0.08em; }
.iv-res { font-family: var(--font-mono); font-size: 10px; color: var(--gray-400); }
.iv-cam-grid-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; min-height: 0; margin-bottom: 10px; }
.iv-cam { background: linear-gradient(135deg, #e8edf7 0%, #f0f4fb 100%); border-radius: 10px; position: relative; border: 1px solid rgba(46,58,140,0.1); display: flex; align-items: flex-end; overflow: hidden; min-height: 0; }
.iv-cam::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(46,58,140,0.12) 0%, transparent 70%); }
.iv-cam-lbl { font-family: var(--font-head); font-size: 8px; font-weight: 700; color: rgba(0,0,0,0.4); padding: 0 0 5px 7px; letter-spacing: 0.08em; text-transform: uppercase; position: relative; z-index: 1; }
.iv-cam.iv-front { border-top: 2px solid rgba(196,30,58,0.7); }
.iv-cam.iv-rear { border-top: 2px solid rgba(234,120,20,0.7); }
.iv-cam.iv-cabin { border-top: 2px solid rgba(46,58,140,0.6); }
.iv-cam-ai { position: absolute; top: 6px; right: 6px; z-index: 2; background: rgba(196,30,58,0.9); color: #fff; font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; animation: alertBlink 2s ease-in-out infinite; }
.iv-cam-ai.ai-blue { background: rgba(46,58,140,0.9); }
.iv-cam-ai.ai-orange { background: rgba(234,120,20,0.9); }
/* Ticker / rolling alerts */
.iv-alerts-ticker {
  height: 32px;
  overflow: hidden;
}
.iv-alerts-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: alertTrack 12s ease-in-out infinite;
}
@keyframes alertTrack {
  0%,  18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-38px); }
  50%, 68% { transform: translateY(-76px); }
  75%, 93% { transform: translateY(-114px); }
  100%     { transform: translateY(0); }
}
.iv-alert {
  height: 32px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; padding: 0 10px;
  border-radius: 6px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-alert-ai   { background: rgba(0,196,154,0.07); color: #1E293B; border: 1px solid rgba(0,196,154,0.2); }
.iv-alert-warn { background: rgba(251,192,45,0.1); color: #1E293B; border: 1px solid rgba(251,192,45,0.18); }
.iv-alert-info { background: rgba(46,58,140,0.1); color: #1E293B; border: 1px solid rgba(46,58,140,0.15); }
.iv-alert-ok   { background: rgba(0,196,154,0.08); color: #1E293B; border: 1px solid rgba(0,196,154,0.15); }

/* ============================================================
   INFOVISION PAGE SECTIONS
   ============================================================ */
.iv-challenge { padding: 80px 0; background: var(--gray-50); }
.iv-challenge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 3.5rem; }
.iv-pain-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); transition: box-shadow 0.3s, transform 0.3s; }
.iv-pain-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.iv-pain-icon { width: 48px; height: 48px; border-radius: 10px; background: #FEE8EC; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 1.2rem; }
.iv-pain-video-wrap { width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; margin-bottom: 1.2rem; background: #0B0F19; position: relative; }
.iv-pain-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.iv-pain-video-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.iv-pain-title { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 0.6rem; }
.iv-pain-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.65; }

.iv-advantage { display: none; padding: 100px 0; background: var(--gray-50); }
.iv-adv-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; margin-top: 3.5rem; align-items: start; }
.iv-adv-visual-sticky { position: sticky; top: 100px; }
.iv-adv-visual { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.iv-adv-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.iv-adv-panel.iv-adv-active { opacity: 1; transform: scale(1); }
.iv-adv-panel-label { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff; text-align: center; padding: 0 1.5rem; }
.iv-adv-text-col { display: flex; flex-direction: column; gap: 0; }
.iv-adv-block { padding: 15vh 0; border-bottom: 1px solid var(--border-light); opacity: 0.35; transition: opacity 0.4s; }
.iv-adv-block:last-child { border-bottom: none; }
.iv-adv-block-active { opacity: 1; }
.iv-adv-block-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 0.8rem; }
.iv-adv-block-title { font-family: var(--font-head); font-size: clamp(22px,2.4vw,30px); font-weight: 700; color: var(--dark); margin-bottom: 0.9rem; }
.iv-adv-block-desc { font-size: 15px; color: var(--gray-600); line-height: 1.75; max-width: 460px; }
@media (max-width: 900px) {
  .iv-adv-layout { grid-template-columns: 1fr; gap: 24px; }
  .iv-adv-visual-sticky { position: relative; top: 0; }
  .iv-adv-block { padding: 2rem 0; opacity: 1; }
}

.iv-features { padding: 100px 0; background: var(--white); }
.iv-feat-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 3.5rem; }
.iv-feat-card { background: var(--gray-50); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.6rem; transition: all 0.25s; position: relative; overflow: hidden; width: calc(25% - 12px); min-width: 200px; }
.iv-feat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.iv-feat-card:hover::before { transform: scaleX(1); }
.iv-feat-card:hover { background: var(--white); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.iv-feat-icon { width: 44px; height: 44px; border-radius: 10px; background: #FEE8EC; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 1rem; }
.iv-feat-video-wrap { width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; margin-bottom: 1rem; background: #0B0F19; position: relative; }
.iv-feat-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.iv-feat-title { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
.iv-feat-desc { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; }
.iv-feat-badge { display: inline-flex; font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 100px; margin-top: 0.8rem; background: rgba(196,30,58,0.08); color: var(--red); }

.iv-cameras { padding: 100px 0; background: var(--gray-50); position: relative; overflow: hidden; }
.iv-cameras::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg, rgba(0,0,0,0.04) 1px,transparent 1px); background-size: 60px 60px; }
.iv-cameras .container { position: relative; z-index: 1; }
.iv-cam-header { text-align: center; margin-bottom: 3.5rem; }
.iv-cam-header h2 { color: var(--dark); }
.iv-cam-header p { color: var(--gray-600); max-width: 520px; margin: 0.8rem auto 0; font-size: 15.5px; line-height: 1.7; }
.iv-cam-system { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.iv-cam-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.8rem 1.6rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.iv-cam-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.iv-cam-card.c-front::before { background: var(--red); }
.iv-cam-card.c-rear::before { background: var(--navy-mid); }
.iv-cam-card.c-cabin::before { background: var(--teal); }
.iv-cam-card.c-side::before { background: #7B5CFA; }
.iv-cam-card:hover { background: var(--gray-50); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.iv-cam-icon { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1.2rem; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.ic-red{background:rgba(196,30,58,0.15)} .ic-navy{background:rgba(46,58,140,0.2)} .ic-teal{background:rgba(0,196,154,0.12)} .ic-purple{background:rgba(123,92,250,0.15)}
.iv-cam-angle { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.iv-cam-card.c-front .iv-cam-angle{color:var(--red)} .iv-cam-card.c-rear .iv-cam-angle{color:var(--navy-mid)} .iv-cam-card.c-cabin .iv-cam-angle{color:var(--teal)} .iv-cam-card.c-side .iv-cam-angle{color:#7B5CFA}
.iv-cam-name { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 0.6rem; }
.iv-cam-desc { font-size: 12.5px; color: var(--gray-600); line-height: 1.62; }

.iv-split-section { padding: 100px 0; }
.iv-split-light { background: var(--white); }
.iv-split-gray { background: var(--gray-50); }
.iv-split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; width: 92%; margin: 0 auto; padding: 0 2rem; }
.iv-split-inner.reverse { direction: rtl; }
.iv-split-inner.reverse > * { direction: ltr; }
.iv-split-h2 { font-size: clamp(32px,4vw,50px); color: var(--dark); font-weight: 800; line-height: 1.08; margin-bottom: 1.2rem; letter-spacing: -0.02em; }
.iv-split-p { font-size: 15.5px; color: var(--gray-600); line-height: 1.74; margin-bottom: 2rem; }
.iv-feat-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2.4rem; }
.iv-feat-item { display: flex; align-items: flex-start; gap: 12px; }
.iv-feat-check { width: 22px; height: 22px; border-radius: 5px; background: #FEE8EC; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--red); flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.iv-feat-item-text { font-size: 14px; color: var(--dark); line-height: 1.55; font-weight: 500; }
.iv-feat-item-text span { color: var(--gray-600); font-weight: 400; }
.iv-stream-visual, .iv-cloud-visual { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-lift); }
.iv-panel-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border-light); }
.iv-panel-dots { display: flex; gap: 5px; }
.iv-panel-dots span { width: 9px; height: 9px; border-radius: 50%; }
.iv-panel-dots span:nth-child(1){background:#FF5F57} .iv-panel-dots span:nth-child(2){background:#FEBC2E} .iv-panel-dots span:nth-child(3){background:#28C840}
.iv-panel-title { font-family: var(--font-mono); font-size: 10px; color: var(--gray-400); margin-left: 6px; }
.iv-stream-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.iv-stream-cam { background: #dde6f0; border-radius: 6px; aspect-ratio: 4/3; position: relative; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid var(--border-light); }
.iv-stream-cam::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(46,58,140,0.05) 0%, transparent 60%); }
.iv-stream-cam-lbl { font-family: var(--font-mono); font-size: 8px; color: var(--gray-500); font-weight: 700; padding: 0 0 4px 6px; position: relative; z-index: 1; }
.iv-stream-status { display: flex; align-items: center; justify-content: space-between; background: rgba(0,196,154,0.08); border: 1px solid rgba(0,196,154,0.2); border-radius: 7px; padding: 8px 12px; font-family: var(--font-mono); font-size: 10px; color: var(--teal); font-weight: 600; }
.iv-cloud-timeline { display: flex; flex-direction: column; gap: 8px; }
.iv-cloud-event { display: flex; align-items: center; gap: 12px; background: var(--gray-50); border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border-light); }
.iv-cloud-thumb { width: 48px; height: 32px; background: #dde6f0; border-radius: 4px; border: 1px solid var(--border-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.iv-cloud-info { flex: 1; min-width: 0; }
.iv-cloud-name { font-size: 11px; font-weight: 600; color: var(--dark); margin-bottom: 2px; }
.iv-cloud-meta { font-family: var(--font-mono); font-size: 9px; color: var(--gray-400); }
.iv-cloud-tag { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; padding: 2px 7px; border-radius: 100px; white-space: nowrap; }
.iv-cloud-tag.warn { background: rgba(251,192,45,0.15); color: #FBC02D; }
.iv-cloud-tag.info { background: rgba(46,58,140,0.15); color: var(--navy-mid); }

.iv-specs { padding: 60px 0 40px; background: var(--white); }
.iv-specs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 3.5rem; }
.iv-spec-card { border: 1.5px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; background: var(--white); transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; }
.iv-spec-card:hover { border-color: var(--red); box-shadow: 0 0 0 4px rgba(196,30,58,0.05), var(--shadow-lift); transform: translateY(-3px); }
.iv-spec-icon { font-size: 28px; margin-bottom: 1rem; }
.iv-spec-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-400); font-family: var(--font-mono); margin-bottom: 0.4rem; }
.iv-spec-val { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 0.3rem; }
.iv-spec-desc { font-size: 12.5px; color: var(--gray-600); line-height: 1.55; }

.iv-roi { padding: 90px 0; background: linear-gradient(135deg, #0B1330 0%, var(--navy) 55%, #3a1420 100%); position: relative; overflow: hidden; }
.iv-roi::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size: 60px 60px; }
.iv-roi-hdr { text-align: center; margin-bottom: 3rem; position: relative; z-index: 1; }
.iv-roi-inner { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; width: 92%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }
.iv-roi-stat { text-align: left; padding: 2.2rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); border-left: 3px solid var(--red); transition: background 0.25s, transform 0.25s; }
.iv-roi-stat:hover { background: rgba(255,255,255,0.10); transform: translateY(-4px); }
.iv-roi-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(196,30,58,0.18); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
.iv-roi-val { font-family: var(--font-mono); font-size: 46px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 0.6rem; }
.iv-roi-val .rv-unit { font-size: 24px; color: var(--red); }
.iv-roi-label { font-size: 15.5px; color: rgba(255,255,255,0.92); font-weight: 600; margin-bottom: 0.6rem; }
.iv-roi-sub { font-size: 12px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); line-height: 1.5; }

.iv-integration { padding: 80px 0; background: var(--gray-50); }
.iv-int-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 3rem; }
.iv-int-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; transition: all 0.25s; }
.iv-int-card:hover { border-color: var(--navy); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.iv-int-icon { font-size: 28px; margin-bottom: 0.8rem; display: flex; justify-content: center; align-items: center; }
.iv-int-name { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 0.3rem; }
.iv-int-desc { font-size: 12px; color: var(--gray-400); }

.iv-steps5 { display: none; padding: 90px 0; background: var(--white); }
.iv-steps5-top { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 4rem; }
.iv-steps5-h2 { font-family: var(--font-head); font-size: clamp(30px,3.6vw,46px); font-weight: 700; color: var(--dark); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.2rem; }
.iv-steps5-sub { font-size: 15.5px; color: var(--gray-600); line-height: 1.7; }
.iv-steps5-sub strong { color: var(--dark); }
.iv-steps5-top-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--shadow-card); }
.iv-steps5-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.5s ease; }
.iv-steps5-img-active { opacity: 1; }
.iv-steps5-track { display: flex; gap: 40px; }
.iv-steps5-item { flex: 1 1 0; min-width: 0; cursor: pointer; }
.iv-steps5-bar { height: 3px; border-radius: 100px; background: var(--border-light); margin-bottom: 1.4rem; position: relative; overflow: hidden; }
.iv-steps5-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--red), var(--navy)); border-radius: 100px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.iv-steps5-active .iv-steps5-bar::before { transform: scaleX(1); }
.iv-steps5-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 0.6rem; }
.iv-steps5-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 0.6rem; transition: color 0.3s; }
.iv-steps5-active .iv-steps5-title { color: var(--red); }
.iv-steps5-desc { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
@media (max-width: 900px) {
  .iv-steps5-top { grid-template-columns: 1fr; gap: 2.4rem; }
  .iv-steps5-track { flex-wrap: wrap; gap: 28px 24px; }
  .iv-steps5-item { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 560px) {
  .iv-steps5-item { flex: 1 1 100%; }
}

.iv-cta { padding: 100px 0; background: var(--white); }
.iv-cta-box {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 24px; padding: 4rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  max-width: 100%; margin: 0 auto; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.iv-cta-box::before { display: none; }
.iv-cta-left { position: relative; z-index: 1; }
.iv-cta-h2 { font-family: var(--font-head); font-size: clamp(32px,4vw,52px); font-weight: 800; color: var(--dark); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.iv-cta-h2 span { color: var(--red); }
.iv-cta-p { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin-bottom: 2rem; }
.iv-cta-checks { display: flex; flex-direction: column; gap: 10px; }
.iv-cta-check { display: flex; align-items: center; gap: 10px; }
.iv-cta-check-icon { color: var(--teal); font-size: 14px; flex-shrink: 0; }
.iv-cta-check-text { font-size: 14px; color: var(--gray-600); }
.iv-cta-right { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; padding: 60px 1.5rem 80px; }
  .page-hero-inner .hero-visual { display: none; }
  .page-hero-sub { font-size: 15px; margin-bottom: 1.6rem; }
  .page-hero-btns { gap: 10px; }
  .page-hero-stats {
    display: flex; flex-wrap: nowrap;
    gap: 1rem 1.2rem; margin-top: 1.6rem; padding-top: 1.4rem;
  }
  .ph-stat-val { font-size: 22px; }
  .iv-feat-card { width: calc(50% - 8px); }
  .iv-cam-system { grid-template-columns: repeat(2,1fr); }
  .iv-specs-grid { grid-template-columns: repeat(2,1fr); }
  .iv-roi-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .iv-int-grid { grid-template-columns: repeat(2,1fr); }
  .iv-split-inner { grid-template-columns: 1fr; gap: 3rem; }
  .iv-split-inner.reverse { direction: ltr; }
  .iv-cta-box { grid-template-columns: 1fr; padding: 2.5rem; }
  .iv-challenge-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .iv-feat-card { width: 100%; }
  .iv-cam-system { grid-template-columns: 1fr; }
  .iv-testi-grid { grid-template-columns: 1fr !important; }
  .iv-specs-grid { grid-template-columns: 1fr; }
  .iv-int-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 360px) {
  /* ── Inner page hero ── */
  .page-hero-inner { padding: 44px 1rem 60px; }
  .page-hero-h1 { font-size: 30px; letter-spacing: -0.5px; }
  .page-hero-sub { font-size: 13.5px; margin-bottom: 1.4rem; }
  .page-hero-badge { font-size: 10px; padding: 4px 10px; }
  .page-hero-btns { gap: 8px; }
  .ph-stat-val { font-size: 18px; }
  .page-hero-stats { gap: 0.8rem 1.5rem; margin-top: 1.2rem; padding-top: 1.2rem; }

  /* ── Product page ROI stats row ── */
  .iv-roi-inner { grid-template-columns: 1fr !important; padding: 0 1rem; }
  .iv-roi-stat { padding: 1.2rem 1rem; }
  .iv-roi-val { font-size: 36px; }
  .iv-roi-label { font-size: 14px; }

  /* ── Integration grid: keep 2-col ── */
  .iv-int-grid { grid-template-columns: repeat(2,1fr) !important; }
  .iv-int-card { padding: 1rem; }
  .iv-int-icon { font-size: 22px; }

  /* ── CTA box ── */
  .iv-cta-box { padding: 1.5rem 1rem; }
  .iv-cta-h2 { font-size: 22px; }
  .iv-cta-p { font-size: 13px; }
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}


/* ===================== VISITOR PATH STRIP ===================== */
.visitor-path { background: var(--gray-50); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.vp-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; min-height: 52px; flex-wrap: wrap; }
.vp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }
.vp-links { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--gray-600); border: 1px solid var(--border-light); background: var(--white); text-decoration: none; transition: all 0.2s; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.vp-link:hover { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(196,30,58,0.25); }
.vp-link svg { opacity: 0.6; flex-shrink: 0; }
@media (max-width: 700px) {
  .vp-inner { padding: 10px 1.2rem; gap: 10px; }
  .vp-label { display: none; }
}

/* ===================== TRUST BADGES ===================== */
.trust-badges { padding: 52px 0; background: var(--gray-50); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.tb-inner { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.tb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; min-width: 120px; }
.tb-grid { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; }
.tb-badge { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--white); border: 1.5px solid var(--border-light); border-radius: var(--radius-md); transition: border-color 0.2s, box-shadow 0.2s; }
.tb-badge:hover { border-color: var(--navy); box-shadow: var(--shadow-card); }
.tb-badge-icon { font-size: 20px; flex-shrink: 0; }
.tb-badge-name { font-size: 12px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.tb-badge-sub { font-size: 10.5px; color: var(--gray-400); white-space: nowrap; }
@media (max-width: 900px) {
  .tb-inner { flex-direction: column; align-items: flex-start; }
  .tb-grid { gap: 8px; }
}
@media (max-width: 600px) {
  .tb-badge { padding: 8px 12px; }
  .tb-badge-name { font-size: 11px; }
}

/* ===================== RESOURCES ===================== */
.resources-section { padding: 100px 0; background: var(--white); }
.resources-header { text-align: center; margin-bottom: 3.5rem; }
.resources-h2 { font-size: clamp(36px, 4.5vw, 56px); color: var(--dark); margin-bottom: 1rem; }
.resources-sub { font-size: 16px; color: var(--gray-500); margin-top: 0.8rem; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.res-card { background: var(--white); border: 1.5px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.res-card:hover { border-color: var(--navy); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.res-card-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--red); font-family: var(--font-mono); }
.res-card-icon { font-size: 28px; margin: 0.4rem 0; }
.res-card-title { font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.4; }
.res-card-desc { font-size: 13px; color: var(--gray-500); line-height: 1.6; flex: 1; }
.res-card-link { margin-top: 1rem; font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; }
.res-card-link:hover { color: var(--red); }
@media (max-width: 960px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .res-grid { grid-template-columns: 1fr; } }

/* ===================== SCROLL TO TOP ===================== */
.scroll-top-btn {
  position: static;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(196,30,58,0.4);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  pointer-events: none;
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top-btn:hover { background: #a81830; box-shadow: 0 6px 24px rgba(196,30,58,0.55); }

/* ===================== IMPROVED REVEAL ANIMATIONS ===================== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.reveal-d1 { transition-delay: 0.1s; }
.reveal.reveal-d2 { transition-delay: 0.2s; }
.reveal.reveal-d3 { transition-delay: 0.3s; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ===================== SCROLL MOUSE BOUNCE ===================== */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
/* Scroll mouse indicator */
.scroll-mouse {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  z-index: 10;
  transition: opacity 0.4s;
}
.scroll-mouse.hidden { opacity: 0; pointer-events: none; }
.scroll-mouse-body {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 13px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}
.scroll-mouse-wheel {
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
  animation: scrollBounce 1.4s ease-in-out infinite;
}
.scroll-mouse-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-mono);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.4; }
}

/* ===================== BUTTON HOVER PULSE ===================== */
.btn-red { position: relative; overflow: hidden; }
.btn-red::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0.15); opacity: 0;
  transition: opacity 0.2s;
}
.btn-red:hover::after { opacity: 1; }

/* ===================== FAQ ===================== */
.faq-section {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--gray-50);
  position: relative;
}
.faq-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.faq-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.faq-header .section-tag { justify-content: center; }
.faq-h2 { font-size: clamp(32px, 4vw, 52px); color: var(--dark); margin-bottom: 1rem; }
.faq-sub { font-size: 17px; color: var(--gray-600); max-width: 520px; margin: 0 auto; line-height: 1.7; }

.faq-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); border-color: var(--gray-300); }
.faq-item.open { border-color: var(--navy); box-shadow: 0 4px 24px rgba(46,58,140,0.1); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: none;
  border: none;
  font-family: var(--font-head);
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--dark);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--navy); }
.faq-q[aria-expanded="true"] { color: var(--navy); }

.faq-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gray-50);
  border: 1.5px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s;
}
.faq-q[aria-expanded="true"] .faq-icon {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  transform: rotate(180deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.faq-a.open { grid-template-rows: 1fr; }
.faq-a > p {
  overflow: hidden;
  min-height: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-600);
  padding: 0 1.6rem 0;
  border-top: none;
  margin-top: 0;
}
.faq-a.open > p {
  padding: 0 1.6rem 1.6rem;
  border-top: 1px solid var(--border-light);
}
.faq-a > p strong { color: var(--dark); font-weight: 700; }

@media (max-width: 768px) {
  .faq-q { font-size: 15px; padding: 1rem 1.2rem; }
  .faq-a > p { font-size: 14px; }
}

/* ============================================================
   MOBILE RESPONSIVE — TARGETED FIXES
   ============================================================ */

/* ── 1. Stats bar: 4th item needs border-top in the 2-col layout ── */
@media (max-width: 900px) {
  .stat-item:nth-child(4) { border-top: 1px solid var(--border-light); }
}

/* ── 2. Platform tabs: 5 tabs in 2-col grid — last odd child spans full row ── */
@media (max-width: 900px) {
  .plat-tab-v:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ── 3. Reduce inner-wrapper padding on small screens ── */
/* why-inner, mdvr-inner, roi-inner, cta-inner use padding: 0 2rem directly  */
/* (they don't use .container class) so we need explicit overrides below 600px */
@media (max-width: 600px) {
  .why-inner     { padding: 0 1.2rem; }
  .mdvr-inner    { padding: 0 1.2rem; }
  .roi-inner     { padding: 0 1.2rem; }
  .cta-inner     { padding: 0 1.2rem; }
  .hms-inner     { padding: 0 1.2rem; }
}
@media (max-width: 375px) {
  .why-inner     { padding: 0 1.1rem; }
  .mdvr-inner    { padding: 0 1.1rem; }
  .roi-inner     { padding: 0 1.1rem; }
  .cta-inner     { padding: 0 1.1rem; }
  .hms-inner     { padding: 0 1.1rem; }
}
@media (max-width: 360px) {
  .why-inner     { padding: 0 1rem; }
  .mdvr-inner    { padding: 0 1rem; }
  .roi-inner     { padding: 0 1rem; }
  .cta-inner     { padding: 0 1rem; }
  .hms-inner     { padding: 0 1rem; }
}

/* ── 4. Hero section: reduce bottom padding on mobile so scroll-mouse doesn't overlap ── */
@media (max-width: 900px) {
  .hero { padding-bottom: 60px; }
  .scroll-mouse { bottom: 20px; }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 48px; }
  .scroll-mouse { display: none; }
}

/* ── 5. Trusted section: label should be centred when stacked ── */
@media (max-width: 900px) {
  .trusted-label { text-align: center; }
}

/* ── 6. Solutions header on small phones: reduce bottom margin ── */
@media (max-width: 600px) {
  .solutions-header { margin-bottom: 2rem; }
}

/* ── 7. Why float card: ensure it doesn't overflow on very small screens ── */
@media (max-width: 380px) {
  .why-float { padding: 1rem; right: 0; bottom: -16px; }
  .why-float-num { font-size: 20px; }
}

/* ── 8. Visitor path: make links wrap better on very small screens ── */
@media (max-width: 480px) {
  .vp-links { gap: 4px; }
  .vp-link  { font-size: 11.5px; padding: 5px 10px; }
}

/* ── 9. Platform video panel: ensure it doesn't overflow on mobile ── */
@media (max-width: 600px) {
  .pvp-cap-title    { font-size: 18px; }
  .pvp-cap-sub      { font-size: 11px; }
  .pvp-cap-val      { font-size: 13px; }
  .pvp-cap-stat     { padding: 6px 7px; }
}

/* ── 10. MDVR visual header on very small screens ── */
@media (max-width: 360px) {
  .mdvr-rec-badge  { font-size: 9px; }
  .mdvr-cam-label  { font-size: 8px; }
  .mdvr-alert-item { font-size: 10px; padding: 0 8px; }
}

/* ── 11. ROI calculator: range labels don't overflow ── */
@media (max-width: 600px) {
  .roi-range-labels { font-size: 10px; }
  .roi-result-label { font-size: 10px; }
}

/* ── 12. Footer: reduce social icon gap on tiny screens ── */
@media (max-width: 360px) {
  .footer-socials { gap: 8px; }
  .footer-social  { width: 38px; height: 38px; font-size: 16px; }
}

/* ── 13. Hero slider nav buttons: slightly smaller on mobile ── */
@media (max-width: 600px) {
  .hs-prev, .hs-next { width: 30px; height: 30px; font-size: 13px; }
  .hs-dot            { width: 6px; height: 6px; }
  .hs-dot.active     { width: 18px; }
}

/* ── 14. Testimonials: ensure metric pill wraps on tiny screens ── */
@media (max-width: 360px) {
  .testi-metric { font-size: 10px; padding: 4px 8px; }
  .tm-val       { font-size: 12px; }
}

/* ── 15. Demo form row always single column on 600px and below ── */
/* (already set but guard against override) */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── 16. Trust badges: hide sub-text on mobile to keep badges compact ── */
@media (max-width: 480px) {
  .tb-badge-name { white-space: nowrap; font-size: 11px; }
  .tb-badge-sub  { display: none; }
  .tb-badge      { align-items: center; padding: 8px 12px; }
}

/* ============================================================
   430px — iPhone 14 Pro Max / iPhone 14 Plus / iPhone 15 Pro Max / iPhone 15 Plus
   CSS viewport: 430 × 932px  |  DPR: 3×  |  Safari safe-area insets apply
   Must stay LAST in the file so it wins over all earlier mobile overrides.
   ============================================================ */
@media (min-width: 414px) and (max-width: 480px) {

  /* ── All 92%-width wrappers → full width with padding for side spacing ── */
  .container,
  .hero-inner,
  .stats-bar-grid,
  .trusted-inner,
  .why-inner,
  .mdvr-inner,
  .roi-inner,
  .cta-inner,
  .hms-inner,
  .page-hero-inner,
  .iv-split-inner,
  .iv-roi-inner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .container   { padding: 0 1.4rem; }
  .hero-inner  { padding: 56px 1.4rem 48px; }
  .why-inner, .mdvr-inner, .roi-inner, .cta-inner, .hms-inner { padding: 0 1.4rem; }
  .trusted-inner { padding: 0 1.4rem; gap: 1.2rem; }
  .page-hero-inner { padding: 80px 1.4rem 60px; }
  .iv-split-inner  { padding: 0 1.4rem; }
  .iv-roi-inner    { padding: 0 1.4rem; }

  /* ── Hero ── */
  .hero-h1 { font-size: clamp(36px, 8.5vw, 46px); line-height: 1.13; margin-bottom: 1.1rem; }
  .hero-sub { font-size: 15.5px; line-height: 1.65; margin-bottom: 2rem; }
  .hero-btns { gap: 12px; }
  .hero-btns .btn { min-width: 160px; padding: 14px 22px; font-size: 14.5px; }
  .hero-trust { font-size: 12px; gap: 8px; }
  .hero-badge { font-size: 11px; padding: 6px 12px; max-width: 100%; white-space: normal; text-align: center; justify-content: center; overflow: hidden; }

  /* ── Stats bar ── */
  .stats-bar-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: 1.3rem 1.1rem; gap: 0.75rem; }
  .stat-icon-box { width: 40px; height: 40px; font-size: 17px; border-radius: 9px; }
  .stat-num { font-size: 26px; }
  .stat-label { font-size: 11px; }

  /* ── Solutions ── */
  .solutions { padding: 52px 0; }
  .sol-grid { grid-template-columns: 1fr; }
  .sol-card { padding: 1.5rem; }
  .sol-title { font-size: 17px; }
  .sol-desc { font-size: 14px; }

  /* ── Platform ── */
  .platform { padding: 60px 0; }
  .plat-tabs-v { display: flex; flex-direction: column; }
  .plat-tab-v { padding: 1rem 1.2rem; }
  .ptv-title { font-size: 15px; }
  .ptv-icon { width: 40px; height: 40px; font-size: 18px; }
  .pvp-frame { aspect-ratio: 16/10; min-height: 260px; }
  .pvp-cap-title { font-size: 19px; }
  .pvp-cap-sub { font-size: 12px; }
  .pvp-cap-val { font-size: 14px; }
  .pvp-cap-stat { padding: 7px 8px; }

  /* ── Why InfoTrack ── */
  .why { padding: 60px 0; }
  .why-inner { padding: 0 1.4rem; gap: 2.4rem; }
  .why-h2 { font-size: clamp(28px, 7vw, 36px); }
  .why-body { font-size: 15px; }
  .why-item-text { font-size: 15px; }
  .why-card { padding: 1.6rem; }

  /* ── MDVR ── */
  .mdvr-section { padding: 60px 0; }
  .mdvr-inner { padding: 0 1.4rem; }
  .mdvr-text h2 { font-size: clamp(28px, 7vw, 36px); }
  .mdvr-body { font-size: 15px; }
  .mdvr-cam-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mdvr-feat-text { font-size: 14.5px; }

  /* ── Industries ── */
  .industries { padding: 60px 0; }
  .ind-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .ind-grid .ind-card { flex: unset; max-width: unset; }
  .ind-title { font-size: 19px; }
  .ind-desc { font-size: 14px; }
  .ind-icon { font-size: 34px; margin-bottom: 1.2rem; }

  /* ── Testimonials ── */
  .testimonials { padding: 60px 0; }
  .testi-card { padding: 1.6rem; }
  .testi-quote { font-size: 15px; }
  .testi-name { font-size: 14px; }

  /* ── ROI Calculator ── */
  .roi-section { padding: 52px 0; }
  .roi-inner { padding: 0 1.4rem; gap: 2.4rem; }
  .roi-left h2 { font-size: 30px; }
  .roi-sub { font-size: 15px; }
  .roi-result-val { font-size: 28px; }
  .roi-card { padding: 1.8rem; }
  .roi-range-labels { font-size: 11px; }
  .roi-result-label { font-size: 11px; }

  /* ── FAQ ── */
  .faq-section { padding: 60px 0 !important; }
  .faq-item { border-radius: 12px; }
  .faq-q { font-size: 15px; padding: 1.1rem 1.3rem; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-a > p { font-size: 14.5px; padding: 0 1.3rem 0; }
  .faq-a.open > p { padding: 0 1.3rem 1.3rem; }

  /* ── Resources ── */
  .resources-section { padding: 60px 0; }
  .res-grid { grid-template-columns: 1fr; }
  .res-card { padding: 1.5rem; }
  .res-card-title { font-size: 16px; }

  /* ── CTA / Demo form ── */
  .cta-section { padding: 60px 0; }
  .cta-inner { padding: 0 1.4rem; gap: 2.4rem; }
  .cta-left h2 { font-size: clamp(28px, 7.5vw, 38px); }
  .demo-form { padding: 1.8rem; }
  .demo-form-title { font-size: 20px; margin-bottom: 1.6rem; }
  .form-input { padding: 12px 14px; font-size: 14.5px; }
  .form-submit { font-size: 15px; padding: 14px; }
  .form-row { grid-template-columns: 1fr !important; }
  .cta-check-text { font-size: 14.5px; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-desc { font-size: 14px; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-social { width: 42px; height: 42px; font-size: 18px; }
  .footer-socials { gap: 10px; }

  /* ── Section headings ── */
  .section-h2 { font-size: clamp(28px, 7vw, 36px); }
  .section-tag { font-size: 11px; }

  /* ── Visitor-path links ── */
  .vp-links { gap: 6px; }
  .vp-link { font-size: 12.5px; padding: 6px 11px; }

  /* ── Trust badges ── */
  .tb-badge-name { white-space: nowrap; font-size: 12px; }
  .tb-badge-sub  { display: none; }
  .tb-badge      { align-items: center; padding: 9px 13px; }

  /* ── Floating buttons ── */
  .floating-action-row { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; gap: 10px; }
  .live-chat-widget { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* ── Safe-area bottom padding (home indicator) ── */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ============================================================
   HERO MOBILE BULLETPROOF FIX
   Uses .hero .hero-inner (specificity 0-2-0) to win over all
   single-class overrides above. Prevents heading overflow on
   small viewports (Galaxy S8 360px, older Androids, etc.).
   ============================================================ */
@media (max-width: 900px) {
  .hero .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .hero .hero-visual {
    display: none;
  }
  .hero .hero-h1 {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    font-size: clamp(32px, 8vw, 52px);
  }
  .hero .hero-sub {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero .hero-inner {
    padding: 52px 1.4rem 44px;
  }
  .hero .hero-h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
}

@media (max-width: 360px) {
  .hero .hero-inner {
    padding: 44px 1rem 36px;
  }
  .hero .hero-h1 {
    font-size: clamp(26px, 7.5vw, 34px);
    letter-spacing: -0.5px;
  }
  .hero .hero-badge {
    display: none;
  }
  .hero .hero-btns {
    flex-direction: column;
    gap: 8px;
  }
  .hero .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 1024px) and (max-width: 1380px) {
  .page-hero-h1 { font-size: 46px; }
  .hero-trust { font-size: 10px; gap: 4px; letter-spacing: 0; }
  .trust-sep { font-size: 9px; }
}