@font-face {
  font-family:Archivo;
  src:url('/assets/fonts/archivo/archivo-var-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}
:root {
  --paper:#ffffff;
  --ink:#20221e;
  --muted:#6d7066;
  --yellow:#f4d44b;
  --line:#dddfd3;
  --dark:#171b19;
  --font:Archivo,Inter,system-ui,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #537cb7;
  outline-offset:5px
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.055em
}
em {
  font-style:normal
}
h2 {
  font-size:clamp(38px,4.7vw,68px)
}
h2 span {
  color:#85897b
}
.wrap {
  max-width:1360px;
  margin:auto;
  padding-inline:64px
}
.section {
  padding-top:110px;
  padding-bottom:110px
}
.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em;
  line-height:1.6
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#73824c;
  box-shadow:0 0 0 4px #73824c15;
  margin-right:8px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:var(--ink);
  color:white;
  border:1px solid var(--ink);
  padding:17px 23px;
  border-radius:7px;
  font-size:13px;
  font-weight:550;
  transition:transform .2s,background .2s
}
.button:hover {
  transform:translateY(-3px);
  background:#3b4034
}
.button span {
  font-size:20px;
  line-height:1
}
.button.yellow {
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--ink)
}
.button.yellow:hover {
  background:#ffe679
}
.button.small {
  padding:12px 17px;
  font-size:11px;
  gap:20px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:600
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.text-link>span:last-child {
  margin-left:auto
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--yellow);
  padding:12px;
  z-index:200
}
.skip:focus {
  top:10px
}
.header {
  height:86px;
  padding:0 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line);
  background:#f7f7f0f5;
  position:sticky;
  top:0;
  z-index:100
}
.logo {
  display:inline-block;
  width:122px;
  flex-shrink:0
}
.logo img {
  filter:invert(1);
  width:122px
}
.header>nav {
  display:flex;
  gap:26px
}
.header nav a {
  font-size:12px
}
.header nav a:hover {
  color:#758052
}
.header-actions {
  display:flex;
  align-items:center;
  gap:26px
}
.login {
  font-size:12px
}
.login span {
  margin-left:8px
}
.menu-toggle {
  display:none;
  background:none;
  border:0;
  font-size:25px
}
.mobile-nav {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  padding:24px;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.hero {
  position:relative;
  min-height:760px;
  overflow:hidden;
  max-width:1800px;
  margin:auto;
  padding:84px 64px 0;
  background:radial-gradient(ellipse at 75% 46%,#e8ebda 0,transparent 57%),var(--paper)
}
.hero-copy {
  position:relative;
  z-index:4;
  width:50%;
  pointer-events:none
}
.hero-copy a {
  pointer-events:auto
}
.hero h1 {
  font-size:clamp(68px,7.7vw,112px);
  line-height:.94;
  letter-spacing:-.07em;
  margin:29px 0 27px;
  font-weight:650
}
.hero h1 em {
  display:inline-block;
  position:relative;
  z-index:0
}
.hero h1 em:after {
  content:'';
  position:absolute;
  bottom:2px;
  left:0;
  width:103%;
  height:19px;
  z-index:-1;
  background:var(--yellow);
  transform:rotate(-2deg)
}
.intro {
  font-size:16px;
  line-height:1.65;
  color:#676c60;
  max-width:370px
}
.hero-actions {
  display:flex;
  gap:24px;
  align-items:center;
  margin-top:29px
}
.play {
  font-size:8px;
  border:1px solid #b6bba9;
  border-radius:50%;
  padding:9px
}
.hero-note {
  font-size:10px;
  color:var(--muted);
  margin-top:19px
}
.hero-stage {
  position:absolute;
  left:47%;
  top:25px;
  width:53%;
  height:635px;
  isolation:isolate
}
.stage-grid {
  position:absolute;
  inset:30px -50px -20px 0;
  background-image:linear-gradient(#aeb49c22 1px,transparent 1px),linear-gradient(90deg,#aeb49c22 1px,transparent 1px);
  background-size:60px 60px;
  transform:rotate(-10deg);
  mask-image:radial-gradient(ellipse,black,transparent 72%)
}
.hero-orbit {
  position:absolute;
  top:30px;
  right:-180px;
  width:850px;
  height:850px;
  pointer-events:none;
  transform:rotate(-30deg)
}
.hero-orbit span {
  position:absolute;
  inset:0;
  border:1px solid #b8bda640;
  border-radius:50%
}
.hero-orbit span:nth-child(2) {
  inset:80px
}
.hero-orbit span:nth-child(3) {
  inset:160px
}
.coordinate {
  position:absolute;
  right:30px;
  top:25px;
  font:9px/1.8 monospace;
  letter-spacing:.06em;
  color:#70796b
}
.coordinate b {
  font-size:8px;
  font-weight:400
}
.route {
  position:absolute;
  width:110%;
  height:100%;
  left:-4%;
  top:20px;
  overflow:visible;
  z-index:-1
}
.route-shadow {
  stroke:#e2d694;
  stroke-width:16;
  opacity:.38
}
.route-line {
  stroke:#a39343;
  stroke-width:2;
  stroke-dasharray:7 6
}
.route circle {
  fill:var(--paper);
  stroke:#7e894c;
  stroke-width:4
}
.device {
  position:relative;
  border:6px solid #262a26;
  border-radius:33px;
  overflow:hidden;
  background:#080b12;
  box-shadow:14px 23px 50px #22291c25,1px 0 0 1px #85897d inset
}
.device img {
  width:100%;
  height:auto
}
.device-island {
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  background:#171b19;
  width:50px;
  height:12px;
  border-radius:20px;
  z-index:2
}
.device-main {
  position:absolute;
  top:93px;
  left:27%;
  width:235px;
  transform:rotate(-8deg);
  z-index:3
}
.device-back {
  position:absolute;
  top:49px;
  left:56%;
  width:210px;
  transform:rotate(10deg);
  z-index:1
}
.live-card {
  position:absolute;
  top:386px;
  left:3%;
  width:265px;
  background:#fff;
  border:5px solid #fff;
  border-radius:12px;
  z-index:5;
  box-shadow:0 15px 40px #252d2330;
  transform:rotate(-3deg)
}
.live-heading {
  font-size:7px;
  font-weight:650;
  padding:6px 5px 10px;
  display:flex;
  align-items:center
}
.live-heading .status-dot {
  width:5px;
  height:5px;
  margin-right:7px
}
.live-heading>span:last-child {
  margin-left:auto;
  font-size:14px
}
.live-card img {
  width:100%;
  border-radius:5px;
  aspect-ratio:1.98;
  object-fit:cover
}
.live-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 5px 3px;
  font-size:8px
}
.live-caption b {
  font-size:7px;
  margin-left:6px;
  color:#999
}
.live-caption>span:last-child {
  font-size:7px;
  color:#7c826f
}
.stage-label {
  position:absolute;
  bottom:4px;
  left:46%;
  font:9px monospace;
  letter-spacing:.09em
}
.signal-chip {
  position:absolute;
  top:530px;
  left:57%;
  background:var(--yellow);
  padding:13px 18px;
  font-size:10px;
  line-height:1.5;
  box-shadow:0 8px 20px #22222210;
  transform:rotate(4deg);
  z-index:6;
  border-radius:3px
}
.signal-chip>span {
  font-size:22px;
  float:left;
  margin-right:12px
}
.signal-chip b {
  font-weight:600
}
.hero-bottom {
  position:relative;
  z-index:6;
  margin-top:69px;
  padding:22px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.07em
}
.hero-bottom b {
  color:#929882;
  margin-right:12px
}
.hero-bottom a span {
  margin-left:30px;
  font-size:17px
}
.trust {
  display:flex;
  align-items:center;
  gap:55px;
  padding-top:34px;
  padding-bottom:34px;
  border-bottom:1px solid var(--line)
}
.trust p {
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
  line-height:1.6
}
.trust strong {
  color:var(--ink);
  font-weight:500
}
.client-logos {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  width:100%
}
.client-logos img {
  width:100px;
  height:44px;
  object-fit:contain;
  filter:grayscale(1);
  mix-blend-mode:multiply;
  opacity:.68
}
.section-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
.section-marker {
  font:9px monospace;
  letter-spacing:.08em;
  color:var(--muted)
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:50px
}
.section-heading>p {
  max-width:330px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  padding-bottom:4px
}
.product-explorer {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:620px;
  background:#eeefe6;
  border-radius:16px;
  overflow:hidden
}
.explorer-content {
  padding:46px
}
.mini-label {
  font:9px monospace;
  letter-spacing:.12em;
  margin-bottom:26px;
  color:#787f6c
}
.feature-tabs {
  display:flex;
  flex-direction:column;
  margin-bottom:24px
}
.feature-tabs button {
  border:0;
  border-top:1px solid #d6dacb;
  background:transparent;
  text-align:left;
  padding:23px 0;
  display:flex;
  align-items:flex-start;
  gap:17px;
  color:#7b8074;
  cursor:pointer
}
.tab-number {
  font:10px monospace;
  padding-top:4px
}
.feature-tabs strong {
  font-size:17px;
  letter-spacing:-.035em;
  font-weight:550
}
.feature-tabs small {
  display:none;
  font-size:12px;
  line-height:1.8;
  margin-top:10px;
  max-width:290px;
  color:#69715f
}
.feature-tabs button[aria-selected=true] {
  color:var(--ink)
}
.feature-tabs button[aria-selected=true] .tab-number {
  color:#7b883f
}
.feature-tabs button[aria-selected=true] small {
  display:block
}
.tab-arrow {
  margin-left:auto
}
.explorer-visual {
  position:relative;
  background:#e0e4d2;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:38px 0 55px
}
.explorer-visual:before,.explorer-visual:after {
  content:'';
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid #b4bd9b70;
  border-radius:50%
}
.explorer-visual:after {
  width:400px;
  height:400px
}
.visual-word {
  position:absolute;
  top:44%;
  font-size:88px;
  font-weight:650;
  color:#bfc7ac;
  letter-spacing:-.06em;
  transform:rotate(-90deg);
  white-space:nowrap;
  left:-210px
}
.explorer-phone {
  width:242px;
  z-index:1;
  transform:rotate(5deg);
  box-shadow:20px 22px 30px #39432125
}
.visual-caption {
  position:absolute;
  bottom:20px;
  left:28px;
  right:28px;
  display:flex;
  justify-content:space-between;
  font:8px monospace;
  letter-spacing:.08em
}
.web-showcase {
  margin-top:100px;
  display:grid;
  grid-template-columns:.7fr 1.5fr;
  gap:55px;
  align-items:center
}
.web-copy h3 {
  font-size:43px;
  margin:20px 0;
  line-height:1.07
}
.web-copy h3 em {
  color:#85897b
}
.web-copy>p:not(.eyebrow) {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:24px
}
.browser-frame {
  background:#e8eae0;
  padding:9px;
  border-radius:12px;
  min-width:0;
  box-shadow:0 20px 50px #1d281513
}
.browser-bar {
  display:flex;
  justify-content:space-between;
  padding:7px 5px 13px;
  font:8px monospace;
  color:#72796b
}
.browser-bar>span:first-child {
  letter-spacing:3px;
  color:#a4aa97
}
.browser-frame img {
  border-radius:5px;
  width:100%
}
.image-caption {
  font:8px monospace;
  letter-spacing:.06em;
  display:block;
  padding:12px 6px 5px;
  color:#707966
}
.video-section {
  background:var(--dark);
  color:#f3f4eb
}
.video-section .eyebrow,.video-section .section-marker {
  color:#bdc4b1
}
.video-section h2 em {
  color:var(--yellow)
}
.video-section .section-heading>p {
  color:#a7b09e
}
.camera-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:22px
}
.camera-screen {
  position:relative;
  min-height:330px;
  overflow:hidden;
  border-radius:10px;
  background:#353a32
}
.camera-screen img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover
}
.camera-screen:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#0007,transparent 40%,#000b)
}
.camera-top,.camera-bottom {
  position:absolute;
  left:24px;
  right:24px;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.camera-top {
  top:20px;
  font:8px monospace;
  letter-spacing:.05em
}
.camera-top>span:last-child {
  background:#101812a0;
  padding:5px 8px;
  border-radius:3px
}
.camera-bottom {
  bottom:25px;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.03em
}
.camera-bottom b {
  font-weight:400;
  color:#d6ddcd
}
.crosshair {
  font-size:35px;
  font-weight:200
}
.video-benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin:40px 0
}
.video-benefits article {
  border-top:1px solid #3d4439;
  padding-top:20px
}
.video-benefits article>span {
  font-size:25px;
  color:var(--yellow)
}
.video-benefits h3 {
  font-size:20px;
  margin:17px 0 12px;
  letter-spacing:-.03em
}
.video-benefits p {
  font-size:12px;
  line-height:1.8;
  color:#a7b09e;
  max-width:280px
}
.hardware-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.hardware-image {
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#eaece1
}
.hardware-image>span {
  position:absolute;
  left:20px;
  top:20px;
  z-index:1;
  font:8px monospace;
  letter-spacing:.08em;
  background:#f7f7f0dd;
  padding:5px 8px;
  border-radius:3px
}
.hardware-image img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  transition:transform .5s
}
.hardware-card:hover img {
  transform:scale(1.04)
}
.card-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:22px;
  gap:10px
}
.card-title h3 {
  font-size:22px;
  letter-spacing:-.035em
}
.card-title>span {
  font-size:25px
}
.hardware-card>p {
  font-size:12px;
  color:var(--muted);
  margin-top:9px;
  line-height:1.8;
  max-width:290px
}
.integration-strip {
  margin-top:60px;
  padding:30px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.integration-strip h3 {
  font-size:23px;
  margin:10px 0;
  letter-spacing:-.035em
}
.integration-strip p:last-child {
  font-size:12px;
  color:var(--muted)
}
.protocols {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  max-width:470px
}
.protocols>span {
  font-size:15px;
  font-weight:650;
  color:#707865
}
.protocols a {
  flex-basis:100%;
  justify-content:flex-end;
  font-size:11px;
  margin-top:8px
}
.mobility {
  background:var(--yellow);
  padding-block:0
}
.mobility-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-right:0;
  gap:60px;
  max-width:1360px
}
.mobility-layout>div:first-child {
  padding-block:80px
}
.mobility h2 {
  font-size:clamp(38px,4.3vw,61px);
  margin:25px 0
}
.mobility h2 em {
  color:#746522
}
.mobility-layout>div>p:not(.eyebrow) {
  font-size:14px;
  max-width:360px;
  line-height:1.8;
  color:#645820
}
.mobility-links {
  margin-top:30px
}
.mobility-links a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #b9a23f;
  padding:20px 0;
  font-size:9px;
  letter-spacing:.06em
}
.mobility-links a strong {
  display:block;
  font-size:18px;
  letter-spacing:-.03em;
  margin-top:5px;
  font-weight:550
}
.mobility-links a>span:last-child {
  font-size:25px
}
.mobility-art {
  position:relative;
  overflow:hidden;
  min-height:580px;
  border-left:1px solid #cdb345
}
.city-grid {
  position:absolute;
  inset:-100px;
  background-image:linear-gradient(#a18d3633 1px,transparent 1px),linear-gradient(90deg,#a18d3633 1px,transparent 1px);
  background-size:65px 65px;
  transform:rotate(-17deg)
}
.mobility-art svg {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover
}
.city-label {
  position:absolute;
  top:35px;
  right:35px;
  font:10px/1.8 monospace;
  z-index:1;
  text-align:right
}
.city-label b {
  font-size:8px;
  font-weight:400
}
.ride-ticket {
  position:absolute;
  bottom:75px;
  right:40px;
  transform:rotate(-7deg);
  background:var(--paper);
  padding:24px;
  width:260px;
  box-shadow:10px 20px 30px #67550d25
}
.ride-ticket>span {
  font:9px monospace;
  display:flex;
  justify-content:space-between
}
.ride-ticket strong {
  font-size:25px;
  line-height:1.05;
  font-weight:550;
  letter-spacing:-.05em;
  display:block;
  margin:25px 0
}
.ride-ticket small {
  font:8px monospace;
  border-top:1px dashed #bbc0ae;
  display:block;
  padding-top:12px
}
.approach .section-heading {
  margin-top:24px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px
}
.steps article {
  border-top:1px solid var(--line);
  padding-top:23px
}
.steps article>span {
  font-size:44px;
  letter-spacing:-.05em;
  color:#9ba28b;
  font-weight:400
}
.steps h3 {
  font-size:22px;
  margin:23px 0 12px;
  letter-spacing:-.035em
}
.steps p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  max-width:280px
}
.offer-strip {
  padding:35px;
  background:#e9ecdf;
  border-radius:10px;
  margin-top:55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.offer-strip h3 {
  font-size:26px;
  letter-spacing:-.04em;
  line-height:1.15;
  margin-top:10px
}
.faq {
  padding-top:0;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:70px
}
.faq h2 {
  font-size:43px;
  margin:20px 0 24px
}
.faq details {
  border-bottom:1px solid var(--line)
}
.faq details:first-child {
  border-top:1px solid var(--line)
}
.faq summary {
  list-style:none;
  padding:24px 0;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary span {
  font-size:20px;
  transition:transform .2s
}
.faq details[open] summary span {
  transform:rotate(45deg)
}
.faq details p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  padding:0 25px 24px 0
}
.faq details>a {
  display:block;
  font-size:13px;
  margin-bottom:24px;
  text-decoration:underline
}
.final {
  background:var(--dark);
  color:var(--paper);
  padding:80px 0 0;
  overflow:hidden;
  position:relative
}
.final:after {
  content:'↗';
  font-size:420px;
  line-height:1;
  position:absolute;
  right:50px;
  top:0;
  font-weight:200;
  color:#c1caab0b;
  pointer-events:none
}
.final .eyebrow {
  color:#c4cdb4
}
.final .status-dot {
  background:var(--yellow)
}
.final h2 {
  font-size:clamp(50px,7vw,100px);
  margin:27px 0 35px;
  position:relative;
  z-index:1
}
.final h2 em {
  color:var(--yellow)
}
.final-actions {
  display:flex;
  align-items:center;
  gap:30px
}
.final-line {
  margin-top:75px;
  border-top:1px solid #3b4435;
  padding-block:23px;
  display:flex;
  justify-content:space-between;
  font:8px monospace;
  letter-spacing:.09em;
  color:#b1bba3
}
.footer {
  padding-block:55px 20px
}
.footer .logo img {
  width:122px
}
.footer-top {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:50px
}
.footer-top>div>p {
  font-size:12px;
  color:var(--muted);
  margin-top:20px
}
.footer-top h3 {
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:20px
}
.footer-top>div>a:not(.logo),.footer-top>div>span {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:10px
}
.footer-top a:hover {
  text-decoration:underline
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  gap:25px;
  font-size:9px;
  color:var(--muted)
}
.footer-bottom>span {
  margin-right:auto
}
.footer-bottom a:last-child {
  margin-left:auto
}
@media(min-width:1500px) {
  .hero {
    padding-left:max(64px,calc((100% - 1232px)/2));
    min-height:850px
  }
  .hero-stage {
    left:48%;
    top:50px;
    height:700px;
    width:48%;
    transform:scale(1.1);
    transform-origin:top left
  }
  .hero-bottom {
    margin-top:80px
  }
  .hero-copy {
    max-width:650px
  }
}
@media(max-width:1150px) {
  .header {
    padding-inline:30px;
    gap:20px
  }
  .header>nav {
    gap:18px
  }
  .header-actions {
    gap:20px
  }
  .header .login {
    display:none
  }
  .wrap {
    padding-inline:40px
  }
  .hero {
    padding:75px 40px 0;
    min-height:730px
  }
  .hero h1 {
    font-size:85px
  }
  .hero-copy {
    width:52%
  }
  .hero-stage {
    left:49%;
    width:54%;
    transform:scale(.9);
    transform-origin:top left
  }
  .hero-actions {
    gap:15px
  }
  .hero-actions .button {
    padding:15px;
    gap:12px
  }
  .hero-actions .text-link {
    font-size:10px
  }
  .hero-bottom {
    margin-top:75px
  }
  .trust {
    gap:30px
  }
  .client-logos {
    gap:15px
  }
  .client-logos img {
    width:80px
  }
  .section {
    padding-block:85px
  }
  .section-heading {
    gap:30px
  }
  .explorer-content {
    padding:35px
  }
  .feature-tabs strong {
    font-size:15px
  }
  .web-showcase {
    gap:35px
  }
  .web-copy h3 {
    font-size:36px
  }
  .mobility-layout {
    padding-right:0;
    gap:40px
  }
  .mobility-art {
    min-height:570px
  }
  .faq {
    padding-top:0;
    gap:40px
  }
  .protocols {
    max-width:380px
  }
  .footer-top {
    gap:25px
  }
}
@media(max-width:850px) {
  .header {
    height:75px;
    padding-inline:24px
  }
  .header>nav:not(.mobile-nav) {
    display:none
  }
  .header-actions .login {
    display:block
  }
  .menu-toggle {
    display:block
  }
  .header-actions {
    gap:18px
  }
  .header-actions .button {
    display:none
  }
  .mobile-nav:not([hidden]) {
    display:flex;
    flex-direction:column;
    gap:20px
  }
  .header .mobile-nav a {
    font-size:16px
  }
  .hero {
    min-height:680px;
    padding:60px 30px 0
  }
  .hero h1 {
    font-size:72px
  }
  .hero .eyebrow {
    font-size:8px
  }
  .intro {
    font-size:14px;
    max-width:300px
  }
  .hero-stage {
    left:49%;
    width:60%;
    transform:scale(.78);
    top:50px
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .hero-actions .button {
    padding:15px 20px;
    gap:25px
  }
  .hero-actions .text-link {
    font-size:11px
  }
  .hero-bottom {
    margin-top:48px
  }
  .hero-note {
    font-size:9px
  }
  .hero-bottom {
    font-size:8px
  }
  .wrap {
    padding-inline:30px
  }
  .trust {
    align-items:flex-start;
    gap:25px
  }
  .client-logos {
    flex-wrap:wrap;
    justify-content:center;
    gap:20px
  }
  .client-logos img {
    width:75px;
    height:30px
  }
  .section {
    padding-block:70px
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }
  .section-heading>p {
    max-width:480px
  }
  .section-marker {
    font-size:8px
  }
  .explorer-content {
    padding:26px
  }
  .explorer-visual {
    min-height:600px
  }
  .feature-tabs button {
    gap:10px
  }
  .feature-tabs strong {
    font-size:14px
  }
  .explorer-phone {
    width:215px
  }
  .feature-tabs small {
    font-size:11px
  }
  .web-showcase {
    grid-template-columns:1fr;
    margin-top:65px
  }
  .web-copy h3 br {
    display:none
  }
  .web-copy h3 {
    font-size:37px
  }
  .web-copy>p:not(.eyebrow) {
    max-width:480px
  }
  .camera-screen {
    min-height:270px
  }
  .camera-top,.camera-bottom {
    left:17px;
    right:17px
  }
  .camera-top {
    font-size:7px
  }
  .camera-bottom {
    font-size:21px
  }
  .video-benefits {
    gap:23px
  }
  .video-benefits h3 {
    font-size:18px
  }
  .hardware-grid {
    gap:18px
  }
  .card-title h3 {
    font-size:18px
  }
  .hardware-image>span {
    left:12px;
    top:12px;
    font-size:7px
  }
  .integration-strip {
    align-items:flex-start
  }
  .protocols {
    max-width:280px
  }
  .mobility {
    padding-block:0
  }
  .mobility-layout {
    gap:30px;
    padding-right:0
  }
  .mobility-layout>div:first-child {
    padding-block:60px
  }
  .mobility h2 {
    font-size:39px
  }
  .mobility-art {
    min-height:570px
  }
  .ride-ticket {
    width:220px;
    right:15px;
    bottom:60px;
    padding:20px
  }
  .ride-ticket strong {
    font-size:22px
  }
  .mobility-links a strong {
    font-size:16px
  }
  .steps {
    gap:25px
  }
  .steps h3 {
    font-size:19px
  }
  .offer-strip {
    padding:25px
  }
  .offer-strip h3 {
    font-size:22px
  }
  .offer-strip .button {
    font-size:11px;
    padding:15px;
    gap:15px;
    flex-shrink:0
  }
  .faq {
    padding-top:0;
    grid-template-columns:1fr;
    gap:25px
  }
  .faq h2 {
    margin-bottom:18px
  }
  .footer-top {
    grid-template-columns:repeat(2,1fr);
    row-gap:35px
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:15px
  }
  .footer-bottom>span {
    flex-basis:100%
  }
  .footer-bottom a:last-child {
    margin-left:0
  }
}
@media(max-width:750px) {
  html {
    scroll-padding-top:85px
  }
  .header {
    height:70px;
    padding-inline:20px
  }
  .logo,.logo img {
    width:110px
  }
  .header-actions {
    gap:20px
  }
  .header-actions .login {
    font-size:11px
  }
  .hero {
    padding:40px 22px 0;
    min-height:1070px
  }
  .hero-copy {
    width:100%;
    pointer-events:auto
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.08em
  }
  .hero h1 {
    font-size:clamp(62px,16vw,83px);
    margin:25px 0
  }
  .hero h1 em:after {
    height:14px;
    bottom:0
  }
  .intro {
    font-size:14px;
    max-width:330px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:17px;
    margin-top:24px
  }
  .hero-actions .button {
    font-size:11px;
    padding:14px;
    gap:18px
  }
  .hero-actions .text-link {
    font-size:10px;
    gap:7px
  }
  .play {
    font-size:7px;
    padding:7px
  }
  .hero-note {
    font-size:8px;
    margin-top:15px
  }
  .hero-stage {
    top:465px;
    left:0;
    width:100%;
    height:520px;
    transform:none
  }
  .device-main {
    width:190px;
    left:20%;
    top:60px;
    border-width:5px;
    border-radius:28px
  }
  .device-back {
    width:166px;
    left:52%;
    top:26px;
    border-width:5px;
    border-radius:26px
  }
  .live-card {
    left:4%;
    top:305px;
    width:205px
  }
  .live-heading {
    font-size:6px
  }
  .live-caption {
    font-size:7px
  }
  .live-caption>span:last-child {
    font-size:6px
  }
  .signal-chip {
    top:407px;
    left:auto;
    right:4%;
    font-size:8px;
    padding:10px 12px
  }
  .signal-chip>span {
    font-size:19px
  }
  .stage-label {
    bottom:13px;
    left:44%;
    font-size:7px
  }
  .coordinate {
    top:3px;
    right:18px;
    font-size:8px
  }
  .coordinate b {
    font-size:7px
  }
  .hero-orbit {
    width:650px;
    height:650px;
    top:420px;
    right:-190px
  }
  .hero-bottom {
    position:absolute;
    bottom:0;
    left:22px;
    right:22px;
    font-size:7px;
    padding-block:20px
  }
  .hero-bottom a {
    font-size:0
  }
  .hero-bottom a span {
    font-size:18px;
    margin-left:0
  }
  .hero-bottom b {
    margin-right:8px
  }
  .trust {
    padding-top:28px;
    padding-bottom:28px;
    flex-direction:column;
    gap:22px
  }
  .trust p br {
    display:none
  }
  .trust p {
    font-size:10px
  }
  .client-logos {
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:15px
  }
  .client-logos img {
    width:46px;
    height:28px
  }
  .wrap {
    padding-inline:22px
  }
  .section {
    padding-block:60px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.1em
  }
  .section-marker {
    display:none
  }
  .section-top {
    margin-bottom:20px
  }
  .section-heading {
    gap:20px;
    margin-bottom:30px
  }
  h2 {
    font-size:42px
  }
  .section-heading>p {
    font-size:13px;
    line-height:1.8
  }
  .product-explorer {
    display:flex;
    flex-direction:column-reverse;
    border-radius:12px
  }
  .explorer-visual {
    min-height:490px;
    padding:25px 0 40px
  }
  .explorer-phone {
    width:207px;
    border-width:5px;
    border-radius:28px;
    transform:rotate(4deg)
  }
  .visual-word {
    font-size:77px;
    left:-170px
  }
  .visual-caption {
    font-size:7px;
    bottom:16px;
    left:20px;
    right:20px
  }
  .explorer-content {
    padding:25px
  }
  .mini-label {
    font-size:8px;
    margin-bottom:20px
  }
  .feature-tabs button {
    padding:20px 0;
    gap:15px
  }
  .feature-tabs strong {
    font-size:16px
  }
  .feature-tabs small {
    font-size:12px
  }
  .feature-tabs {
    margin-bottom:15px
  }
  .web-showcase {
    margin-top:60px;
    gap:25px
  }
  .web-copy h3 {
    font-size:35px;
    line-height:1.1
  }
  .web-copy h3 br {
    display:block
  }
  .web-copy h3 br:last-of-type {
    display:none
  }
  .browser-frame {
    padding:6px;
    border-radius:8px;
    margin-inline:-8px
  }
  .browser-bar {
    font-size:7px
  }
  .image-caption {
    font-size:6px
  }
  .camera-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .camera-screen {
    min-height:240px
  }
  .camera-top {
    font-size:8px
  }
  .camera-bottom {
    font-size:24px
  }
  .video-benefits {
    grid-template-columns:1fr;
    gap:20px;
    margin:30px 0
  }
  .video-benefits article {
    position:relative;
    padding:20px 0 0 40px
  }
  .video-benefits article>span {
    position:absolute;
    left:0;
    top:18px
  }
  .video-benefits h3 {
    font-size:20px;
    margin:3px 0 10px
  }
  .video-benefits p {
    max-width:none;
    font-size:12px
  }
  .hardware-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .hardware-image {
    max-height:360px
  }
  .hardware-image img {
    aspect-ratio:1.1
  }
  .hardware-image>span {
    top:18px;
    left:18px;
    font-size:8px
  }
  .card-title {
    margin-top:17px
  }
  .card-title h3 {
    font-size:23px
  }
  .hardware-card>p {
    max-width:none;
    font-size:12px
  }
  .integration-strip {
    margin-top:35px;
    flex-direction:column;
    gap:25px
  }
  .integration-strip h3 {
    font-size:22px
  }
  .protocols {
    justify-content:flex-start;
    max-width:none;
    width:100%;
    gap:20px
  }
  .protocols>span {
    font-size:14px
  }
  .protocols a {
    justify-content:flex-start;
    margin-top:0
  }
  .mobility {
    padding-block:0
  }
  .mobility-layout {
    display:block;
    padding-right:22px
  }
  .mobility-layout>div:first-child {
    padding-block:55px 35px
  }
  .mobility h2 {
    font-size:42px
  }
  .mobility-layout>div>p:not(.eyebrow) {
    font-size:13px
  }
  .mobility-links a {
    font-size:8px
  }
  .mobility-links a strong {
    font-size:18px
  }
  .mobility-art {
    min-height:360px;
    margin-inline:-22px;
    border:0;
    border-top:1px solid #cdb345
  }
  .ride-ticket {
    bottom:35px;
    right:35px;
    width:215px
  }
  .city-label {
    top:18px;
    right:22px;
    font-size:8px
  }
  .city-label b {
    font-size:7px
  }
  .steps {
    grid-template-columns:1fr;
    gap:25px
  }
  .steps article {
    position:relative;
    padding:23px 0 0 65px;
    min-height:110px
  }
  .steps article>span {
    position:absolute;
    left:0;
    top:20px;
    font-size:37px
  }
  .steps h3 {
    font-size:22px;
    margin:0 0 12px
  }
  .steps p {
    max-width:none;
    font-size:12px
  }
  .offer-strip {
    flex-direction:column;
    align-items:flex-start;
    padding:25px;
    gap:25px;
    margin-top:35px
  }
  .offer-strip h3 {
    font-size:24px
  }
  .offer-strip .button {
    font-size:12px;
    padding:15px 20px
  }
  .faq {
    padding-top:0;
    gap:23px
  }
  .faq h2 {
    font-size:38px
  }
  .faq summary {
    font-size:14px;
    padding-block:22px
  }
  .faq details p {
    font-size:12px
  }
  .final {
    padding-top:55px
  }
  .final h2 {
    font-size:48px;
    margin-block:25px 30px
  }
  .final-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:24px
  }
  .final .button {
    font-size:12px;
    gap:20px
  }
  .final-actions .text-link {
    font-size:12px
  }
  .final-line {
    margin-top:45px;
    font-size:6px;
    gap:15px
  }
  .final:after {
    font-size:280px;
    top:20px;
    right:-50px
  }
  .footer {
    padding-top:40px
  }
  .footer-top {
    gap:30px 20px;
    padding-bottom:30px
  }
  .footer-top>div:first-child {
    grid-column:1/-1
  }
  .footer-top>div>p {
    margin-top:12px
  }
  .footer-top>div>p br {
    display:none
  }
  .footer-top h3 {
    margin-bottom:15px
  }
  .footer-top>div>a:not(.logo),.footer-top>div>span {
    font-size:11px
  }
  .footer-bottom {
    font-size:8px;
    gap:15px 20px
  }
}
@media(prefers-reduced-motion:no-preference) {
  .device-main {
    animation:arrive-main 1s ease-out both
  }
  .device-back {
    animation:arrive-back 1.2s ease-out both
  }
  .live-card {
    animation:arrive-card 1.4s ease-out both
  }
  .route-line {
    animation:route-flow 25s linear infinite
  }
  @keyframes arrive-main {
    from {
      opacity:0;
      transform:translateY(35px) rotate(-4deg)
    }
    to {
      opacity:1;
      transform:translateY(0) rotate(-8deg)
    }
  }
  @keyframes arrive-back {
    from {
      opacity:0;
      transform:translateY(50px) rotate(5deg)
    }
    to {
      opacity:1;
      transform:translateY(0) rotate(10deg)
    }
  }
  @keyframes arrive-card {
    from {
      opacity:0;
      transform:translateY(25px) rotate(0)
    }
    to {
      opacity:1;
      transform:translateY(0) rotate(-3deg)
    }
  }
  @keyframes route-flow {
    to {
      stroke-dashoffset:-260
    }
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}

/* Homepage : surfaces claires ; le noir reste réservé à la vidéo / DVR. */
.header { background: #fffffff5; }
.hero { background: radial-gradient(ellipse at 75% 46%, #f3f5eb 0, transparent 57%), #fff; }
.product-explorer { background: #fafbf7; }
.explorer-visual { background: #f2f4ec; }
.mobility { background: #fff; border-block: 1px solid var(--line); }
.mobility-art { background: #fafbf7; border-color: var(--line); }
.mobility-links a { border-color: var(--line); }
.mobility h2 em, .mobility-layout > div > p:not(.eyebrow) { color: var(--muted); }
.final { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.final .eyebrow { color: var(--muted); }
.final h2 em { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 8px; text-underline-offset: 4px; }
.final:after { color: #a3ad8e0b; }
.final-line { border-color: var(--line); color: var(--muted); }

/* Première lecture : la vidéo route/cabine, le DVR mobile en soutien. */
.camera-stage { top: 38px; }
.dvr-console { position: absolute; top: 104px; left: 0; width: 82%; padding: 10px; background: #191e1c; border: 1px solid #41483e; border-radius: 13px; transform: rotate(-4deg); box-shadow: 5px 25px 55px #20281d28; z-index: 2; }
.dvr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 6px 17px; color: #b6c0ae; font: 7px monospace; }
.dvr-brand { font: 11px Archivo, sans-serif; font-weight: 650; color: #f8f8ee; }
.dvr-brand b { font-size: 9px; color: var(--yellow); font-weight: 500; }
.dvr-dots { font-size: 5px; letter-spacing: 3px; }
.dvr-road { position: relative; overflow: hidden; border-radius: 7px; }
.dvr-road > img { width: 100%; aspect-ratio: 1.75; object-fit: cover; }
.dvr-road:after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0004, transparent 45%, #000a); pointer-events: none; }
.dvr-channel { position: absolute; left: 14px; top: 14px; font: 8px monospace; color: #fff; background: #0f161bd0; border-radius: 3px; padding: 5px 7px; z-index: 1; }
.dvr-road-caption { position: absolute; bottom: 18px; left: 18px; right: 18px; color: #fff; display: flex; align-items: center; justify-content: space-between; z-index: 1; font-size: 22px; letter-spacing: -.04em; }
.dvr-road-caption b { color: var(--yellow); border: 1px solid #e9d76888; border-radius: 4px; padding: 5px 8px; font: 10px monospace; }
.dvr-controls { display: flex; justify-content: space-between; color: #b4bdac; font: 7px monospace; padding: 17px 6px 6px; }
.dvr-controls b { font-size: 15px; color: var(--yellow); margin-left: 8px; }
.dms-inset { position: absolute; top: 390px; left: -4%; width: 45%; background: #fff; padding: 6px; border-radius: 10px; transform: rotate(3deg); z-index: 5; box-shadow: 0 15px 35px #25321f28; }
.dms-frame { position: relative; border-radius: 5px; overflow: hidden; background: #1a1e1b; }
.dms-frame img { width: 100%; aspect-ratio: 1.8; object-fit: cover; }
.dms-frame .dvr-channel { font-size: 6px; top: 9px; left: 9px; padding: 4px 5px; }
.dms-frame > b { position: absolute; right: 10px; bottom: 10px; color: var(--yellow); font: 9px monospace; background: #141b15c9; padding: 4px 7px; border-radius: 3px; }
.dms-caption { display: flex; justify-content: space-between; align-items: center; padding: 9px 6px 4px; font-size: 10px; }
.dms-caption > span:last-child { font-size: 17px; }
.camera-phone { position: absolute; top: 235px; right: 2%; width: 182px; transform: rotate(9deg); z-index: 4; border-width: 5px; border-radius: 28px; }
.camera-pill { position: absolute; top: 55px; left: 8%; display: flex; align-items: center; gap: 12px; background: var(--yellow); border-radius: 5px; padding: 12px 16px; transform: rotate(-4deg); z-index: 3; }
.camera-pill > span { font-size: 25px; line-height: 1; }
.camera-pill b { font-size: 12px; font-weight: 600; }
.camera-pill small { display: block; font-size: 8px; margin-top: 2px; }
.camera-proof { position: absolute; bottom: 9px; left: 0; font: 7px monospace; color: var(--muted); letter-spacing: .06em; }
@media (max-width: 1150px) { .camera-stage { left: 48%; width: 57%; } }
@media (max-width: 850px) { .camera-stage { left: 49%; width: 62%; top: 60px; } }
@media (max-width: 750px) {
  .camera-stage { top: 470px; left: 0; width: 100%; height: 520px; }
  .dvr-console { width: 85%; left: 4%; top: 80px; padding: 7px; border-radius: 10px; }
  .dvr-bar { padding: 5px 4px 12px; font-size: 5px; gap: 6px; }
  .dvr-brand { font-size: 9px; }
  .dvr-brand b { font-size: 7px; }
  .dvr-dots { display: none; }
  .dvr-channel { top: 10px; left: 10px; font-size: 6px; }
  .dvr-road-caption { bottom: 12px; left: 12px; right: 12px; font-size: 17px; }
  .dvr-road-caption b { font-size: 8px; padding: 4px 6px; }
  .dvr-controls { font-size: 5px; padding: 11px 4px 4px; }
  .dvr-controls b { font-size: 12px; }
  .camera-pill { top: 31px; left: 9%; padding: 9px 12px; gap: 10px; }
  .camera-pill b { font-size: 10px; }
  .camera-pill small { font-size: 7px; }
  .camera-pill > span { font-size: 21px; }
  .camera-phone { width: 140px; top: 244px; right: 6%; border-width: 4px; border-radius: 23px; }
  .dms-inset { width: 51%; left: 5%; top: 294px; }
  .dms-caption { font-size: 8px; padding: 7px 3px 1px; }
  .dms-frame .dvr-channel { font-size: 5px; left: 6px; top: 6px; }
  .camera-proof { left: 7%; bottom: -11px; font-size: 6px; }
}
@media (min-width: 601px) { .camera-phone { right: 9%; } }

/* Sept références : garder les logos lisibles sur les petits écrans. */
@media (max-width: 750px) {
  .client-logos { flex-wrap: wrap; justify-content: center; gap: 18px 24px; }
  .client-logos img { width: 60px; height: 32px; flex-shrink: 0; }
}

.client-logos img.client-finexs { object-fit: cover; }

/* Petites tablettes et comparaison côte à côte : composition empilée. */
@media (min-width:601px) and (max-width:750px) { .hero { min-height:1150px; } .hero-stage.camera-stage { top:540px; } }

/* Lisibilité éditoriale : même finesse, descriptions agrandies. */
.eyebrow { font-size:11px; }
.intro { font-size:17px; line-height:1.75; }
.button { font-size:14px; }
.hero-actions { gap:20px; }
.hero-note { font-size:12px; }
.text-link { font-size:14px; }
.trust p { font-size:13px; }
.section-heading > p { font-size:16px; line-height:1.8; }
.feature-tabs strong { font-size:19px; }
.feature-tabs small { font-size:14px; line-height:1.75; }
.mini-label,.section-marker,.visual-caption,.image-caption { font-size:11px; }
.web-copy > p:not(.eyebrow) { font-size:15px; }
.video-benefits p,.hardware-card > p,.steps p { font-size:15px; line-height:1.8; }
.integration-strip p:last-child { font-size:14px; }
.mobility-layout > div > p:not(.eyebrow) { font-size:16px; }
.mobility-links a { font-size:11px; }
.faq summary { font-size:17px; }
.faq details p { font-size:15px; }
.footer-top > div > a:not(.logo),.footer-top > div > span,.footer-top > div > p { font-size:13px; }
.footer-top h3 { font-size:13px; }
.footer-bottom { font-size:11px; }
.dvr-bar { font-size:9px; }
.dvr-controls { font-size:9px; }
.dms-caption { font-size:12px; }
.camera-proof { font-size:9px; }
@media(max-width:850px){.hero-note{font-size:11px}.hero-actions .text-link{font-size:12px}.section-heading>p{font-size:15px}.feature-tabs strong{font-size:17px}.feature-tabs small{font-size:14px}}
@media(max-width:750px){.hero .eyebrow{font-size:10px}.intro{font-size:16px}.hero-actions .button{font-size:12px}.hero-actions .text-link{font-size:11px}.hero-note{font-size:10px}.trust p{font-size:12px}.section-heading>p{font-size:15px}.mini-label,.section-marker,.visual-caption,.image-caption{font-size:10px}.web-copy>p:not(.eyebrow){font-size:15px}.video-benefits p,.hardware-card>p,.steps p{font-size:14px}.mobility-layout>div>p:not(.eyebrow){font-size:15px}.faq summary{font-size:16px}.faq details p{font-size:14px}.footer-bottom{font-size:11px}.dvr-bar{font-size:6px}.dvr-controls{font-size:6px}.dms-caption{font-size:10px}.camera-proof{font-size:8px}.hero-stage.camera-stage{top:580px}.hero{min-height:1180px}}
@media(min-width:601px) and (max-width:750px){.hero-stage.camera-stage{top:560px}.hero{min-height:1160px}}

@media(max-width:360px){.hero-stage.camera-stage{top:640px}.hero{min-height:1240px}}

/* Compagnon R : capture authentique du prototype, surface claire. */
.compagnon-r-card .hardware-image{background:#eff3ef}.compagnon-r-card .hardware-image img{object-fit:contain;mix-blend-mode:multiply;height:100%;max-height:300px;animation:compagnon-preview-float 7s ease-in-out infinite}.compagnon-r-card:hover .hardware-image img{animation-play-state:paused}@keyframes compagnon-preview-float{50%{transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){.compagnon-r-card .hardware-image img{animation:none}}
/* Gamme : mêmes hauteurs de visuels et objet Compagnon détouré. */
.hardware-image{aspect-ratio:1}.hardware-image img{display:block;height:100%}
.compagnon-r-card .hardware-image{background:transparent}.compagnon-r-card .hardware-image img{height:100%;max-height:none;object-fit:contain;mix-blend-mode:normal;padding:38px 18px 16px}
@media(max-width:750px){.hardware-image{aspect-ratio:1.1}.compagnon-r-card .hardware-image img{padding:35px 16px 14px}}

/* ADAS, DMS, BSD et DVR : quatre fonctions, une lecture alignée. */
.video-benefits{grid-template-columns:repeat(4,minmax(0,1fr))}.video-benefits h3{min-height:52px}
@media(max-width:1000px){.video-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.video-benefits{grid-template-columns:1fr}.video-benefits h3{min-height:0}}