:root {
  --navy-950: #0b1f33;
  --navy-900: #112b46;
  --navy-800: #173b5d;
  --navy-700: #235579;
  --sky-500: #12bfe6;
  --sky-100: #e7f6fc;
  --mint-500: #28a879;
  --mint-100: #e5f7f0;
  --amber-500: #f0aa24;
  --amber-100: #fff4d8;
  --red-500: #c94d56;
  --ink: #142235;
  --muted: #647386;
  --line: #e2e9f0;
  --canvas: #f5f8fb;
  --surface: #ffffff;
  --shadow: 0 24px 70px rgba(11, 31, 51, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 0%, rgba(32, 164, 217, .14), transparent 34rem),
    radial-gradient(circle at 95% 10%, rgba(40, 168, 121, .12), transparent 30rem),
    var(--canvas);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 18px clamp(20px, 4vw, 70px);
  border-bottom: 1px solid rgba(226, 233, 240, .78);
  background: rgba(245, 248, 251, .84);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; }
.brand img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  padding: 0;
  border: 1px solid rgba(17, 43, 70, .12);
  border-radius: 14px;
  background: #061321;
  box-shadow: 0 12px 30px rgba(17, 43, 70, .08);
}
.brand strong { display: block; color: var(--navy-950); font-size: 15px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.top-nav { display: flex; justify-content: center; gap: 8px; }
.top-nav a, .ghost-link {
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 800;
}
.top-nav a:hover, .ghost-link:hover { background: #fff; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.landing-language {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.landing-language select {
  min-height: 40px;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-900);
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 900;
}
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  box-shadow: 0 14px 30px rgba(17, 43, 70, .18);
}
.button.secondary {
  color: var(--navy-900);
  border: 1px solid var(--line);
  background: #fff;
}
.button:hover { transform: translateY(-1px); }

main { overflow: hidden; }
main section[id] { scroll-margin-top: 92px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(54px, 8vw, 110px) clamp(20px, 5vw, 86px) 56px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--sky-500);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 760px;
  margin-bottom: 22px;
  color: var(--navy-950);
  font-size: 76px;
  line-height: .95;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 16px;
  color: var(--navy-950);
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: 0;
}
h3 {
  margin-bottom: 10px;
  color: var(--navy-950);
  font-size: 20px;
  letter-spacing: 0;
}
.lead {
  max-width: 680px;
  margin-bottom: 28px;
  color: #46566a;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; }
.trust-row span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy-800);
  background: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 900;
}

.product-frame {
  position: relative;
  min-height: 580px;
  padding: 14px;
  border: 1px solid rgba(226, 233, 240, .95);
  border-radius: 34px;
  background:
    radial-gradient(circle at 85% 0%, rgba(32, 164, 217, .24), transparent 17rem),
    linear-gradient(160deg, rgba(255,255,255,.96), rgba(238, 245, 250, .92));
  box-shadow: var(--shadow);
}
.product-frame::before {
  content: "";
  position: absolute;
  inset: 52px 22px auto auto;
  width: 190px;
  height: 190px;
  border: 38px solid rgba(17, 43, 70, .07);
  border-radius: 999px;
}
.mock-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  border-radius: 22px;
  color: var(--muted);
  background: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 900;
}
.mock-toolbar span { width: 9px; height: 9px; border-radius: 999px; background: #d7e0e9; }
.mock-toolbar strong { margin-left: auto; color: var(--navy-900); }
.mock-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 4px 0;
}
.mock-tabs button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(226, 233, 240, .95);
  border-radius: 13px;
  color: var(--navy-800);
  background: rgba(255,255,255,.78);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.mock-tabs button.active {
  color: #fff;
  border-color: var(--navy-900);
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.mock-panel {
  position: relative;
  z-index: 1;
  min-height: 480px;
}
.mock-panel[hidden] { display: none; }
.mock-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  padding: 16px 4px 4px;
}
.mock-card, .mock-map, .mock-list {
  border: 1px solid rgba(226, 233, 240, .9);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 30px rgba(17,43,70,.06);
}
.mock-card { min-height: 128px; padding: 18px; }
.mock-card.wide { grid-column: 1 / -1; }
.mock-card small, .mock-list div { color: var(--muted); font-size: 12px; font-weight: 850; }
.mock-card strong {
  display: block;
  margin: 7px 0 12px;
  color: var(--navy-950);
  font-size: 26px;
  letter-spacing: 0;
}
.mock-card p { margin: 0; color: var(--muted); font-size: 13px; }
.mock-card.accent { color: #fff; background: linear-gradient(135deg, var(--navy-900), #285f87); }
.mock-card.accent small, .mock-card.accent p, .mock-card.accent strong { color: #fff; }
.route-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.route-strip span {
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--navy-900);
  background: var(--sky-100);
  font-size: 12px;
  font-weight: 1000;
}
.mock-map {
  position: relative;
  grid-column: 1 / -1;
  min-height: 230px;
  overflow: hidden;
  background:
    linear-gradient(110deg, transparent 46%, rgba(255,255,255,.45) 46% 48%, transparent 48%),
    linear-gradient(25deg, transparent 28%, rgba(255,255,255,.55) 28% 30%, transparent 30%),
    radial-gradient(circle at 20% 20%, #d5efe3, transparent 17rem),
    radial-gradient(circle at 80% 65%, #dbeefd, transparent 14rem),
    #ecf4ef;
}
.pin, .driver-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(17,43,70,.22);
}
.pin-a { top: 34%; left: 25%; background: var(--sky-500); }
.pin-b { top: 59%; left: 54%; background: var(--mint-500); }
.pin-c { top: 28%; left: 72%; background: var(--amber-500); }
.driver-dot {
  width: 26px;
  height: 26px;
  top: 48%;
  left: 42%;
  background: var(--navy-900);
  animation: driverPulse 1.8s ease-in-out infinite;
}
.mock-list { grid-column: 1 / -1; display: grid; gap: 10px; padding: 16px; }
.mock-list div { display: flex; align-items: center; gap: 8px; }
.status { width: 10px; height: 10px; border-radius: 999px; }
.green { background: var(--mint-500); }
.blue { background: var(--sky-500); }
.red { background: var(--red-500); }

.phone-mock {
  width: min(315px, 100%);
  margin: 18px auto 0;
  padding: 14px;
  border: 1px solid rgba(226, 233, 240, .95);
  border-radius: 34px;
  background: linear-gradient(180deg, #102a43, #071827);
  box-shadow: 0 24px 60px rgba(11,31,51,.22);
}
.large-phone { margin-top: 0; }
.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 900;
}
.phone-head span { color: #cfe2ee; font-size: 12px; }
.phone-head strong { font-size: 18px; }
.phone-map {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 28%, rgba(40,168,121,.28), transparent 9rem),
    radial-gradient(circle at 80% 72%, rgba(32,164,217,.25), transparent 10rem),
    #eaf2ee;
}
.live-map {
  background:
    radial-gradient(circle at 24% 18%, rgba(40,168,121,.18), transparent 11rem),
    radial-gradient(circle at 84% 70%, rgba(32,164,217,.18), transparent 12rem),
    #edf4f1;
}
.map-road {
  position: absolute;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 0 0 1px rgba(17,43,70,.05);
}
.road-a { width: 115%; left: -12%; top: 42%; transform: rotate(22deg); }
.road-b { width: 90%; left: 12%; top: 62%; transform: rotate(-18deg); }
.road-c { width: 80%; left: 10%; top: 25%; transform: rotate(-34deg); }
.phone-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.phone-actions span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  color: #dbe9f2;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 900;
}
.phone-note {
  margin-top: 10px;
  padding: 11px;
  border-radius: 14px;
  color: #dbe9f2;
  background: rgba(40,168,121,.16);
  font-size: 12px;
  line-height: 1.45;
}
.map-showcase {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background-color: #eef6f3;
}
.map-showcase .pin,
.phone-map .pin {
  width: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border: 3px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}
.stop-a { top: 28%; left: 20%; background: var(--sky-500); }
.stop-b { top: 58%; left: 55%; background: var(--amber-500); }
.stop-c { top: 37%; left: 74%; background: var(--mint-500); }
.driver-puck {
  position: absolute;
  top: 48%;
  left: 40%;
  width: 28px;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 999px;
  color: var(--navy-950);
  background: var(--navy-900);
  box-shadow: 0 12px 24px rgba(17,43,70,.24);
  animation: puckDrive 5s ease-in-out infinite;
}
.driver-puck span {
  position: absolute;
  left: 30px;
  top: -4px;
  padding: 7px 9px;
  border-radius: 12px;
  color: #fff;
  background: var(--navy-900);
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}
.map-caption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.route-map-showcase {
  display: grid;
  grid-template-rows: auto minmax(230px, 1fr) auto;
  gap: 12px;
  min-height: 456px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.42)),
    radial-gradient(circle at 20% 18%, rgba(40,168,121,.24), transparent 14rem),
    radial-gradient(circle at 88% 72%, rgba(32,164,217,.22), transparent 15rem),
    #eaf3f0;
}
.route-map-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.route-map-header div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.route-map-header strong {
  color: var(--navy-950);
  font-size: 24px;
  letter-spacing: 0;
}
.route-map-header small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}
.route-map-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--mint-500);
  box-shadow: 0 10px 24px rgba(40,168,121,.24);
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}
.route-map-canvas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 264px;
  border: 1px solid rgba(17,43,70,.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 76%, rgba(255,255,255,.64), transparent 8rem),
    radial-gradient(circle at 76% 20%, rgba(255,255,255,.54), transparent 10rem),
    #e7f1ee;
}
.route-map-canvas::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(17,43,70,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17,43,70,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotate(-14deg);
  animation: mapDrift 9s linear infinite;
}
.route-road {
  position: absolute;
  z-index: 1;
  height: 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(17,43,70,.05), 0 10px 20px rgba(17,43,70,.05);
}
.route-road-a { width: 112%; left: -10%; top: 28%; transform: rotate(28deg); }
.route-road-b { width: 92%; left: 6%; top: 68%; transform: rotate(-16deg); }
.route-road-c { width: 88%; left: 20%; top: 42%; transform: rotate(-35deg); }
.route-road-d { width: 52%; left: 50%; top: 18%; transform: rotate(8deg); }
.route-path {
  position: absolute;
  inset: 16px 14px 18px;
  z-index: 2;
  width: calc(100% - 28px);
  height: calc(100% - 34px);
  overflow: visible;
}
.route-path path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-path-shadow {
  stroke: rgba(17,43,70,.18);
  stroke-width: 16;
}
.route-path-line {
  stroke: var(--navy-800);
  stroke-width: 8;
  stroke-dasharray: 18 12;
  animation: routeMarch 5s linear infinite;
}
.route-stop {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--sky-500);
  box-shadow: 0 12px 24px rgba(17,43,70,.24);
  font-size: 12px;
  font-weight: 1000;
}
.route-stop-1 { left: 8%; top: 72%; }
.route-stop-2 { left: 29%; top: 48%; }
.route-stop-3 { left: 56%; top: 19%; }
.route-stop-4 { left: 76%; top: 52%; background: var(--amber-500); }
.route-stop-5 { left: 90%; top: 37%; background: var(--mint-500); }
.route-stop.is-active {
  width: 36px;
  height: 36px;
  background: var(--navy-900);
  animation: driverPulse 1.9s ease-in-out infinite;
}
.driver-bearing {
  position: absolute;
  z-index: 5;
  left: 37%;
  top: 45%;
  width: 36px;
  height: 36px;
  border: 4px solid #fff;
  border-radius: 999px;
  background: var(--navy-950);
  box-shadow: 0 14px 28px rgba(17,43,70,.28);
}
.driver-bearing::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 10px;
  height: 18px;
  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
  background: #fff;
  transform: rotate(42deg);
  transform-origin: 50% 70%;
}
.driver-bearing::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 2px solid rgba(32,164,217,.22);
  border-radius: 999px;
}
.route-map-chip {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  color: var(--navy-950);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 26px rgba(17,43,70,.12);
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}
.route-map-chip-address { left: 16px; top: 16px; }
.route-map-chip-heading { right: 16px; bottom: 16px; color: #fff; background: var(--navy-900); }
.route-manifest {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.route-manifest article {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(226,233,240,.92);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 22px rgba(17,43,70,.05);
}
.route-manifest article.is-active {
  border-color: rgba(32,164,217,.42);
  background: #f1f9fd;
}
.route-manifest strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--navy-950);
  font-size: 12px;
  line-height: 1.25;
}
.route-manifest strong span {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--navy-900);
  font-size: 11px;
}
.route-manifest small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}
.before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 4px 4px;
}
.before-after article {
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
.before-after article:first-child { background: #fff8ed; }
.before-after .after { background: #ecf8f2; }
.before-after small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.before-after strong {
  display: block;
  margin: 8px 0;
  color: var(--navy-950);
  font-size: 24px;
}
.before-after p {
  color: var(--muted);
  line-height: 1.55;
}
.mini-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 4px 4px;
}
.mini-pipeline span {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 15px;
  color: var(--navy-900);
  background: var(--sky-100);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.section, .history, .workflow, .control-section, .audience, .cta, .data-trust-section,
.app-section, .map-section, .integration-section, .custom-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto clamp(54px, 8vw, 92px);
}
.split {
  display: grid;
  grid-template-columns: .92fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding-top: 18px;
}
.split p, .history p, .control-copy p, .audience p, .cta p, .data-trust-section p {
  color: #4f5f72;
  font-size: 17px;
  line-height: 1.7;
}

.history {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
}
.history-card, .history-stats, .workflow, .control-section, .audience, .cta, .data-trust-section,
.app-section, .map-section, .integration-section, .custom-section {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 45px rgba(17,43,70,.06);
}
.data-trust-section {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
  background:
    radial-gradient(circle at 100% 0%, rgba(40,168,121,.14), transparent 22rem),
    rgba(255,255,255,.88);
}
.data-trust-section h2 { max-width: 680px; }
.data-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.data-trust-grid article {
  display: grid;
  gap: 8px;
  min-height: 148px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.data-trust-grid strong { color: var(--navy-950); }
.data-trust-grid span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.history-card { padding: clamp(26px, 4vw, 48px); }
.history-stats { display: grid; gap: 12px; padding: 16px; }
.history-stats article, .audience-cards article {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fbfd;
}
.history-stats strong {
  color: var(--navy-950);
  font-size: 30px;
  letter-spacing: 0;
}
.history-stats span, .audience-cards span { color: var(--muted); font-size: 13px; line-height: 1.45; }

.module-grid {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto clamp(54px, 8vw, 92px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.module-grid article {
  min-height: 246px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 38px rgba(17,43,70,.055);
}
.module-grid article:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.module-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--navy-900);
  background: var(--sky-100);
  font-weight: 1000;
}
.module-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-radius: 6px;
}
.icon-driver::before { border-radius: 10px 10px 5px 5px; }
.icon-shift::before { border-radius: 999px; }
.icon-vehicle::before { width: 24px; height: 14px; border-radius: 8px; }
.icon-map::before { border-radius: 999px 999px 999px 4px; transform: rotate(-45deg); }
.icon-import::before { border-radius: 4px; border-top-width: 8px; }
.icon-quality::before { border-radius: 50%; border-color: var(--mint-500); }
.icon-integration::before { width: 22px; height: 14px; border-radius: 999px; }
.module-grid p { color: var(--muted); line-height: 1.62; }

.app-section, .map-section, .custom-section {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
}
.app-copy p,
.map-section p,
.custom-section p,
.integration-section p,
.workflow > p {
  color: #4f5f72;
  font-size: 17px;
  line-height: 1.7;
}
.feature-list, .custom-chips, .integration-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.feature-list { margin-top: 22px; }
.feature-list span,
.custom-chips span,
.integration-grid span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy-800);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}
.integration-section {
  padding: clamp(28px, 5vw, 54px);
}
.section-heading {
  max-width: 820px;
  margin-bottom: 24px;
}
.onboarding-steps-section,
.product-tour-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 28px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(226, 233, 240, .92);
  border-radius: 28px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 45px rgba(17, 43, 70, .07);
}
.onboarding-steps-section .section-heading p,
.product-tour-heading p {
  color: #4f5f72;
  font-size: 17px;
  line-height: 1.65;
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.onboarding-steps article {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.onboarding-steps strong {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--navy-900);
}
.onboarding-steps span {
  color: var(--navy-950);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}
.product-tour-heading {
  max-width: 920px;
}
.product-tour-video {
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #000;
  box-shadow: 0 18px 45px rgba(17, 43, 70, .14);
}
.product-tour-shell {
  display: grid;
  gap: 18px;
}
.tour-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.tour-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-800);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}
.tour-tabs button.active {
  color: #fff;
  border-color: var(--navy-900);
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  box-shadow: 0 12px 26px rgba(17, 43, 70, .14);
}
.tour-preview-layout {
  display: grid;
  grid-template-columns: minmax(210px, .28fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.tour-copy {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, #ffffff, #f6fafc);
}
.tour-copy h3 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
}
.tour-copy p {
  margin: 0;
  color: #4f5f72;
  line-height: 1.6;
}
.tour-kicker {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--navy-800);
  background: var(--sky-100);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}
.tour-highlights {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.tour-highlights span {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-900);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.tour-device-stage {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .26fr);
  gap: 16px;
  align-items: end;
}
.desktop-mockup,
.mobile-mockup {
  border: 1px solid rgba(226, 233, 240, .95);
  background: #fff;
  box-shadow: 0 22px 54px rgba(11, 31, 51, .14);
}
.desktop-mockup {
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
}
.desktop-chrome {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fbfd;
}
.desktop-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d8e1ea;
}
.desktop-chrome strong {
  margin-left: auto;
  color: var(--navy-900);
  font-size: 12px;
}
.admin-screen {
  min-height: 430px;
  padding: 18px;
  background: #f4f7fa;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.admin-card,
.admin-table,
.admin-board,
.admin-side-list,
.admin-picture-card,
.admin-calendar-month,
.calendar-summary-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(17, 43, 70, .05);
}
.admin-card {
  min-height: 94px;
  padding: 14px;
}
.admin-card small,
.admin-table th,
.admin-side-list small,
.admin-picture-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.admin-card strong {
  display: block;
  margin-top: 8px;
  color: var(--navy-950);
  font-size: 24px;
}
.admin-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.admin-table {
  grid-column: 1 / -1;
  overflow: hidden;
}
.admin-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-table th,
.admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #edf2f6;
  text-align: left;
  white-space: nowrap;
}
.admin-table td {
  color: #314357;
  font-weight: 800;
}
.admin-table tr:last-child td { border-bottom: 0; }
.source-cell {
  display: inline-grid;
  gap: 4px;
  min-width: 145px;
  white-space: normal;
}
.source-cell small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.source-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
}
.source-mail {
  color: #0d5f45;
  background: #ddf5ea;
}
.source-file {
  color: #145c84;
  background: #e4f4fb;
}
.profile-cell,
.driver-cell {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.profile-avatar,
.driver-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 8px 18px rgba(17, 43, 70, .16);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0;
}
.profile-avatar-mint,
.driver-avatar-mint { background: linear-gradient(135deg, #1d8766, #47c693); }
.profile-avatar-amber,
.driver-avatar-amber { background: linear-gradient(135deg, #a46a05, #e6aa33); }
.profile-avatar-sky,
.driver-avatar-sky { background: linear-gradient(135deg, #146f9b, #42b9e6); }
.profile-avatar-blue,
.driver-avatar-blue { background: linear-gradient(135deg, var(--navy-900), var(--sky-500)); }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}
.status-ok { color: #146749; background: var(--mint-100); }
.status-warn { color: #8c5d06; background: var(--amber-100); }
.status-bad { color: #922d36; background: #fdebed; }
.admin-board {
  grid-column: span 2;
  min-height: 170px;
  padding: 14px;
}
.calendar-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.calendar-day {
  min-height: 120px;
  padding: 10px;
  border-radius: 12px;
  background: #f5f8fb;
}
.calendar-day strong,
.calendar-day span {
  display: block;
  font-size: 11px;
}
.calendar-day strong { color: var(--navy-900); }
.calendar-day span {
  margin-top: 8px;
  padding: 7px;
  border-radius: 9px;
  color: var(--navy-800);
  background: #fff;
  font-weight: 900;
}
.admin-calendar-month {
  grid-column: 1 / -1;
  padding: 12px;
}
.month-planner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.month-planner-head small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}
.month-planner-head strong {
  display: block;
  margin-top: 3px;
  color: var(--navy-950);
  font-size: 18px;
  line-height: 1.1;
}
.month-plan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.month-plan-actions span {
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--navy-800);
  background: #edf5fb;
  font-size: 10px;
  font-weight: 950;
}
.month-weekdays,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.month-weekdays {
  margin-bottom: 5px;
}
.month-weekdays span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
}
.month-day {
  min-height: 53px;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 6px;
  border: 1px solid #e8eef4;
  border-radius: 10px;
  background: #f8fbfd;
}
.month-day b {
  color: var(--navy-950);
  font-size: 10px;
  line-height: 1;
}
.month-day small {
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-day.is-light {
  background: #fbfdfe;
}
.month-day.is-muted {
  opacity: .45;
}
.month-day.is-warning {
  border-color: #f0d69a;
  background: #fffaf0;
}
.month-day.is-today {
  border-color: rgba(32, 164, 217, .5);
  box-shadow: inset 0 0 0 1px rgba(32, 164, 217, .28);
}
.plan-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 3px 5px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-osl { color: #0e5f47; background: #ddf5ea; }
.plan-drm { color: #7c5103; background: #fff0c7; }
.plan-lsk { color: #145c84; background: #dff3fc; }
.plan-krs { color: #6043a1; background: #eee7ff; }
.calendar-summary-card {
  min-height: 76px;
  padding: 12px;
}
.calendar-summary-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}
.calendar-summary-card strong {
  display: block;
  margin-top: 5px;
  color: var(--navy-950);
  font-size: 22px;
  line-height: 1;
}
.calendar-summary-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.admin-side-list {
  grid-column: span 2;
  display: grid;
  gap: 9px;
  padding: 14px;
}
.side-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #f7fafc;
  color: #314357;
  font-size: 12px;
  font-weight: 850;
}
.admin-picture-card {
  grid-column: span 2;
  min-height: 210px;
  padding: 14px;
}
.damage-photo {
  height: 132px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid #d7e3ed;
  border-radius: 14px;
  background: #eef4f8;
}
.damage-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.mobile-mockup {
  width: min(240px, 100%);
  min-height: 470px;
  justify-self: center;
  padding: 12px;
  border-radius: 30px;
}
.mobile-speaker {
  width: 64px;
  height: 6px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #dbe3eb;
}
.mobile-screen {
  min-height: 426px;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: 22px;
  color: var(--ink);
  background: #f4f7fa;
}
.mobile-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--navy-950);
  font-size: 12px;
  font-weight: 950;
}
.mobile-action {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(17, 43, 70, .05);
}
.mobile-action strong,
.mobile-action span {
  display: block;
}
.mobile-action strong {
  color: var(--navy-950);
  font-size: 13px;
}
.mobile-action span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.mobile-progress {
  display: grid;
  gap: 7px;
  margin: 4px 0;
}
.mobile-progress span {
  height: 8px;
  border-radius: 999px;
  background: #dfe7ee;
}
.mobile-progress span.done { background: var(--mint-500); }
.mobile-scan {
  height: 94px;
  display: grid;
  place-items: center;
  border: 1px dashed #b8c6d3;
  border-radius: 16px;
  color: var(--navy-800);
  background: #fff;
  font-size: 12px;
  font-weight: 950;
}
.integration-grid span:nth-child(4n+1),
.custom-chips span:nth-child(3n+1) { background: var(--sky-100); }
.integration-grid span:nth-child(4n+2),
.custom-chips span:nth-child(3n+2) { background: var(--mint-100); }
.integration-grid span:nth-child(4n+3),
.custom-chips span:nth-child(3n+3) { background: var(--amber-100); }
.import-workflow p { max-width: 860px; }
.flow-cards { padding: 24px 0 0; }

.workflow { padding: clamp(26px, 4vw, 48px); }
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.steps article {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  color: #d8e5ef;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.steps strong {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.12);
}
.steps span { font-size: 13px; line-height: 1.5; }

.control-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 28px;
  padding: clamp(26px, 4vw, 48px);
  background:
    radial-gradient(circle at 100% 0%, rgba(32,164,217,.14), transparent 22rem),
    rgba(255,255,255,.86);
}
.control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.control-list div {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.control-list strong { color: var(--navy-950); }
.control-list span { color: var(--muted); font-size: 13px; line-height: 1.5; }

.audience {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 28px;
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
}
.audience-cards { display: grid; gap: 12px; }
.audience-cards strong { color: var(--navy-950); font-size: 18px; }

.cta {
  padding: clamp(34px, 5vw, 62px);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 10% 0%, rgba(32,164,217,.34), transparent 20rem),
    linear-gradient(135deg, var(--navy-950), var(--navy-800));
}
.cta h2 { max-width: 760px; margin-left: auto; margin-right: auto; color: #fff; }
.cta p { max-width: 760px; margin-left: auto; margin-right: auto; color: #d8e5ef; }
.contact-note { font-weight: 900; }
.contact-note a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.cta .hero-actions { justify-content: center; margin-bottom: 0; }
.cta .button.secondary { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); }

@keyframes puckDrive {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(58px, -34px); }
  68% { transform: translate(116px, 22px); }
}
@keyframes driverPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(17,43,70,.22), 0 0 0 0 rgba(32,164,217,.32); }
  50% { transform: scale(1.08); box-shadow: 0 8px 18px rgba(17,43,70,.22), 0 0 0 14px rgba(32,164,217,0); }
}
@keyframes routeMarch {
  to { stroke-dashoffset: -30; }
}
@keyframes mapDrift {
  to { transform: rotate(-14deg) translate3d(42px, 42px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .route-map-canvas::before,
  .route-path-line,
  .route-stop.is-active {
    animation: none;
  }
}

.landing-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: grid;
  justify-items: end;
  gap: 12px;
  pointer-events: none;
}
.landing-chat > * {
  pointer-events: auto;
}
.landing-chat-toggle {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #376f8f;
  box-shadow: 0 18px 45px rgba(11,31,51,.18);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.landing-chat-toggle:hover,
.landing-chat-toggle:focus-visible {
  background: #2f6380;
  box-shadow: 0 22px 54px rgba(11,31,51,.22);
  transform: translateY(-2px);
}
.landing-chat-icon {
  position: relative;
  width: 29px;
  height: 20px;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(11,31,51,.06);
}
.landing-chat-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: -7px;
  width: 10px;
  height: 10px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.landing-chat-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 50%;
  width: max-content;
  max-width: min(260px, calc(100vw - 110px));
  padding: 13px 17px;
  border-radius: 18px;
  color: #fff;
  background: #376f8f;
  box-shadow: 0 18px 45px rgba(11,31,51,.2);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(8px, 50%);
  transition: opacity .18s ease, transform .18s ease;
}
.landing-chat-tooltip::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 20px;
  border-width: 9px 0 9px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #376f8f;
}
.landing-chat-toggle:hover .landing-chat-tooltip,
.landing-chat-toggle:focus-visible .landing-chat-tooltip {
  opacity: 1;
  transform: translate(0, 50%);
}
.landing-chat-tooltip > span,
.landing-chat-tooltip small {
  display: block;
}
.landing-chat-tooltip > span {
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.2;
}
.landing-chat-tooltip small {
  margin-top: 5px;
  color: #e8f2f7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}
.landing-chat-panel {
  order: -1;
  width: min(380px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(226,233,240,.95);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(11,31,51,.2);
}
.landing-chat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-950), var(--navy-700));
}
.landing-chat-head strong,
.landing-chat-head span {
  display: block;
}
.landing-chat-head strong { font-size: 17px; }
.landing-chat-head span {
  margin-top: 4px;
  color: #d8e5ef;
  font-size: 12px;
  line-height: 1.4;
}
.landing-chat-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  font-size: 20px;
}
.landing-chat-messages {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 16px;
  background: #f7fafc;
}
.chat-message {
  max-width: 88%;
  padding: 11px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}
.chat-message.agent {
  justify-self: start;
  color: var(--navy-900);
  background: #fff;
  border: 1px solid var(--line);
}
.chat-message.user {
  justify-self: end;
  color: #fff;
  background: var(--navy-800);
}
.landing-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.landing-chat-contact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.landing-chat-form input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--ink);
  font: inherit;
}
.landing-chat-form button {
  border: 0;
  border-radius: 14px;
  padding: 0 14px;
  color: #fff;
  background: var(--navy-900);
  cursor: pointer;
  font-weight: 900;
}
.landing-chat-escalate {
  display: block;
  border: 0;
  background: transparent;
  padding: 0 16px 16px;
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 26px clamp(20px, 5vw, 86px);
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1040px) {
  .site-header { grid-template-columns: 1fr auto; }
  .top-nav { display: none; }
  h1 { font-size: 58px; }
  h2 { font-size: 38px; }
  .hero, .split, .history, .control-section, .audience, .app-section, .map-section, .custom-section, .data-trust-section { grid-template-columns: 1fr; }
  .tour-preview-layout,
  .tour-device-stage { grid-template-columns: 1fr; }
  .mobile-mockup { width: min(360px, 100%); }
  .product-frame { min-height: auto; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps,
  .onboarding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-panel { min-height: auto; }
}

@media (max-width: 680px) {
  .site-header { padding: 14px 16px; }
  .brand { min-width: 0; }
  .brand small, .ghost-link { display: none; }
  .landing-language span { display: none; }
  .landing-language select { max-width: 126px; }
  .header-actions .button { min-height: 40px; padding: 10px 13px; }
  .hero { grid-template-columns: 1fr; padding: 42px 18px 34px; }
  h1 { font-size: 42px; line-height: 1.02; }
  h2 { font-size: 31px; }
  .mock-grid, .module-grid, .steps, .onboarding-steps, .control-list, .before-after, .mini-pipeline, .mock-tabs, .data-trust-grid, .admin-grid, .calendar-strip { grid-template-columns: 1fr; }
  .section, .history, .workflow, .control-section, .audience, .cta, .module-grid, .app-section, .map-section, .integration-section, .custom-section, .data-trust-section, .onboarding-steps-section, .product-tour-section { width: calc(100% - 28px); }
  .history-card, .workflow, .control-section, .audience, .cta, .app-section, .map-section, .integration-section, .custom-section, .data-trust-section, .onboarding-steps-section, .product-tour-section { border-radius: 24px; }
  .product-frame { padding: 10px; border-radius: 24px; }
  .onboarding-steps-section,
  .product-tour-section { padding: 24px 16px; }
  .admin-board,
  .admin-side-list,
  .admin-picture-card { grid-column: 1; }
  .admin-screen { min-height: auto; padding: 12px; }
  .admin-table { overflow-x: auto; }
  .admin-calendar-month {
    grid-column: 1;
    overflow-x: auto;
  }
  .month-weekdays,
  .month-grid {
    min-width: 560px;
  }
  .calendar-summary-card { min-height: 68px; }
  .map-showcase { min-height: 320px; }
  .route-map-showcase { grid-template-rows: auto minmax(230px, 1fr) auto; padding: 12px; }
  .route-map-header { align-items: flex-start; }
  .route-map-header div { flex-wrap: wrap; gap: 7px; }
  .route-map-header strong { font-size: 20px; }
  .route-map-header small { text-align: left; }
  .route-map-canvas { min-height: 238px; }
  .route-map-chip { font-size: 10px; }
  .route-map-chip-address { max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
  .route-map-chip-heading { right: 10px; bottom: 10px; }
  .route-manifest { grid-template-columns: 1fr; }
  .route-manifest article { min-height: 58px; }
  .driver-puck span, .map-showcase .pin span { display: none; }
  .landing-chat { left: 14px; right: 14px; bottom: 14px; }
  .landing-chat-toggle {
    width: 52px;
    height: 52px;
  }
  .landing-chat-icon { width: 26px; height: 18px; }
  .landing-chat-tooltip { display: none; }
  .landing-chat-panel { width: 100%; }
  .landing-chat-contact { grid-template-columns: 1fr; }
}