/* Home only: device composition stays in flow so it cannot cover the CTAs. */
.hero--devices {
  background: linear-gradient(135deg, #ffffff 15%, #f0f7fe 100%);
  min-height: 0;
  padding: 36px 0;
  isolation: isolate;
}
.hero--devices .hero-copy { position: relative; z-index: 2; }
.hero--devices h1 { font-size: clamp(2.15rem, 3.5vw, 3.45rem); letter-spacing: -0.035em; }
.hero--devices .lead { color: #536779; max-width: 35rem; }
.hero-devices {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 1.18;
  margin: 0 auto;
}
.hero-devices::before {
  content: '';
  position: absolute;
  inset: -8% -9%;
  background: radial-gradient(ellipse at 62% 49%, rgba(17, 114, 183, 0.09), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.hero-device-tablet {
  position: absolute;
  width: 94%;
  top: 13%;
  left: 0;
  border: 1px solid #dce3e9;
  border-radius: 16px;
  overflow: hidden;
  background: #eef1f4;
  box-shadow: 0 12px 28px -12px rgba(17, 44, 68, 0.2);
  animation: hero-device-reveal 700ms ease-out both;
}
.hero-tablet-screen { display: block; width: 100%; height: auto; border-radius: 15px; }
.hero-device-phone {
  position: absolute;
  width: 37%;
  right: -3%;
  bottom: 3%;
  z-index: 3;
  filter: drop-shadow(0 8px 10px rgba(15, 42, 67, 0.13));
  animation: hero-phone-float 6s ease-in-out 900ms infinite;
}
.hero-phone-screen { display: block; width: 100%; height: auto; animation: hero-phone-reveal 850ms ease-out both; }
.hero--devices .hero-video-play { left: 43%; width: 54px; height: 54px; }
.hero--devices .hero-video-play::before { display: block; pointer-events: none; background: rgba(17,114,183,.38); box-shadow: 0 0 0 2px rgba(17,114,183,.22); animation: hero-play-halo 2.2s ease-out infinite; }
.hero--devices .hero-video-play:focus-visible { outline: 3px solid #1172b7; outline-offset: 7px; }
@keyframes hero-device-reveal {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-phone-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 1199.98px) and (min-width: 992px) {
  .hero--devices .hero-actions .btn { font-size: 0.95rem; padding-inline: 14px; }
}
@media (max-width: 991.98px) {
  .hero--devices { min-height: auto; }
  .hero--devices .lead { margin-inline: auto; }
  .hero-devices { max-width: 560px; }
  .hero-device-phone { right: -1%; }
}
@media (max-width: 575.98px) {
  .hero--devices h1 { font-size: 2.15rem; }
  .hero--devices .lead { font-size: 1.05rem; }
  .hero-devices { width: 95%; aspect-ratio: 1.08; }
  .hero-device-tablet { top: 9%; border-width: 1px; border-radius: 12px; }
  .hero-tablet-screen { border-radius: 10px; }
  .hero-device-phone { width: 38%; bottom: 11%; right: -3%; }
  .hero--devices .hero-video-play { width: 48px; height: 48px; font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--devices *, .hero--devices *::before { animation: none !important; transition: none !important; }
}
.hero-video-dialog {
  width: min(900px, calc(100vw - 32px));
  max-width: none;
  padding: 0 0 16px;
  border: 0;
  border-radius: 14px;
  background: #101b2a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.hero-video-dialog::backdrop { background: rgba(9, 23, 39, 0.8); }
.hero-video-dialog-header { display: flex; justify-content: flex-end; padding: 8px 12px; }
.hero-video-close { background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; padding: 4px 8px; }
.hero-video-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-video-dialog iframe { border: 0; }

/* Extend the visual beyond the content container to the viewport's right edge. */
@media (min-width: 992px) {
  .hero--devices { --hero-container-width: 960px; }
  .hero-devices {
    width: calc(100% + (100vw - var(--hero-container-width)) / 2 + 12px);
    max-width: none;
    margin: 0;
  }
  .hero-device-tablet { width: 100%; left: auto; right: 0; border-radius: 16px 0 0 16px; border-right: 0; }
  .hero-tablet-screen { border-radius: 15px 0 0 15px; }
  .hero-device-phone { right: 5%; bottom: 0; width: 32%; }
}
@media (min-width: 1200px) { .hero--devices { --hero-container-width: 1140px; } }
@media (min-width: 1400px) { .hero--devices { --hero-container-width: 1320px; } }
@media (max-width: 991.98px) {
  .hero-devices { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); aspect-ratio: 1.3; }
  .hero-device-tablet { width: 94%; left: auto; right: 0; border-right: 0; border-radius: 12px 0 0 12px; }
  .hero-tablet-screen { border-radius: 10px 0 0 10px; }
  .hero-device-phone { width: 32%; right: 3%; bottom: 0; }
}

/* Localized UI illustrations: a single flat frame and a phone beside the map. */
.hero-devices--localized { aspect-ratio: 1.6; }
.hero-devices--localized .hero-device-tablet { z-index: 2; top: 4%; width: 79%; left: auto; right: 0; border: 0; border-radius: 12px 0 0 12px; background: transparent; box-shadow: 0 10px 30px -16px rgba(17,44,68,.3); }
.hero-devices--localized .hero-tablet-screen { border-radius: 12px 0 0 12px; }
.hero-devices--localized .hero-device-phone { z-index: 1; width: 22%; left: 9%; right: auto; bottom: 10%; transform: rotate(-8deg); transform-origin: bottom center; animation: none; }
.hero-devices--localized .hero-video-play { left: 62%; top: 66%; width: 46px; height: 46px; }
@media (max-width: 991.98px) {
  .hero-devices--localized { aspect-ratio: 1.5; }
  .hero-devices--localized .hero-device-tablet { width: 74%; top: 6%; }
  .hero-devices--localized .hero-device-phone { width: 23%; left: 14%; bottom: 19%; }
  .hero-devices--localized .hero-video-play { width: 38px; height: 38px; font-size: 20px; }
}

.hero-route-vehicle { pointer-events: none; filter: drop-shadow(0 2px 4px rgba(15,48,80,.3)); }

.hero-route-detail { filter: drop-shadow(0 8px 12px rgba(23,54,81,.12)); }


@keyframes hero-play-halo {
  0% { transform: scale(1); opacity: .85; }
  85%, 100% { transform: scale(1.95); opacity: 0; }
}

.hero-route-detail[data-completed="true"] > rect:first-child { stroke: #9ed6b9; }

.hero-actions { position: relative; z-index: 2; }
@media (min-width: 992px) {
  .hero-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy visual" "actions visual"; row-gap: 0; }
  .hero-layout > div { width: 100%; margin-top: 0; }
  .hero-layout .hero-copy { grid-area: copy; align-self: end; }
  .hero-layout .hero-actions { grid-area: actions; align-self: start; }
  .hero-layout .hero-visual-column { grid-area: visual; }
}
@media (max-width: 991.98px) {
  .hero-actions > div { margin-top: 0 !important; }
}