/* Fonts are self-hosted: the CMS gates external stylesheets behind cookie consent. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The CMS cookie banner, its dialogs and its footer strip are not part of the design. */
#ew-consent-bar,
.ew-consent-modal,
#ewSiteFooter {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Layout values are taken from the 1440px Figma frames: `--px` is one Figma pixel scaled to the
   viewport, `--fs` is the same for type but never shrinks below a readable size. */
body.theme-tracksify {
  container-type: inline-size;
  --px: calc(min(100cqw, 1440px) / 1440);
  --fs: max(0.62px, calc(min(100cqw, 1440px) / 1440));
  --gutter: max(0px, (100cqw - 1440px) / 2);
  --gold: #d4af37;
  --grey: #d9d9d9;
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  background: #000000;
  overflow-x: hidden;
}

:where(.theme-tracksify) img,
:where(.theme-tracksify) video {
  max-width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* EasyWeb may append a placeholder `.page-content` after theme/Pages layouts — hide when it follows our pages. */
.page-main > [data-page] ~ .page-content,
.page-main > .pf-page ~ .page-content {
  display: none;
}

.page-content {
  padding: 140px clamp(16px, 4vw, 40px) 64px;
  flex: 1;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.page-content .wf-editable h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  margin-top: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* —— Title bar (Figma component "title bar", 1360 × 61 at 40/40) —— */
.site-header {
  position: fixed;
  z-index: 100;
  top: calc(40 * var(--px));
  left: 0;
  right: 0;
  padding: 0 calc(40 * var(--px));
  pointer-events: none;
}

.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1360px;
  height: max(48px, calc(61 * var(--px)));
  margin: 0 auto;
  padding: 0 calc(38 * var(--px)) 0 calc(21 * var(--px));
  border-radius: 50px;
  background: rgba(217, 217, 217, 0.65);
  pointer-events: auto;
}

.nav-pill__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}

.nav-pill__checkbox:focus-visible + .nav-pill__burger {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

.nav-pill__burger {
  order: 2;
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  cursor: pointer;
  border-radius: 12px;
}

.nav-pill__burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: #000000;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-pill__backdrop {
  display: none;
}

.nav-pill__logo {
  order: 1;
  display: block;
  flex-shrink: 0;
  width: max(40px, calc(59 * var(--px)));
  height: max(40px, calc(59 * var(--px)));
  margin-top: calc(2 * var(--px));
}

.nav-pill__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-pill__links {
  order: 3;
  display: flex;
  align-items: center;
  gap: calc(103 * var(--px));
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav-pill__links a {
  display: inline-flex;
  flex-direction: column;
  color: #000000;
  font-family: "Space Grotesk", sans-serif;
  font-size: max(13px, calc(15 * var(--px)));
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  text-underline-position: from-font;
  white-space: nowrap;
}

.nav-pill__links a:hover,
.nav-pill__links a:focus-visible,
body:has([data-page="products"]) .nav-pill__links a[href="/products.html"],
body:has([data-page="solutions"]) .nav-pill__links a[href="/solutions.html"],
body:has([data-page="company"]) .nav-pill__links a[href="/company.html"],
body:has([data-page="contact"]) .nav-pill__links a[href="/contact.html"] {
  font-weight: 700;
  text-decoration: underline;
}

/* —— Shared pill buttons (Figma components 7, 8 / 9) —— */
.pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 150px;
  color: #000000;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pill-btn:hover,
.pill-btn:focus-visible {
  border-color: #555252;
  background: #000000;
  color: #a7a9ac;
}

/* —— Homepage (Figma frame 1:2) —— */
.home {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
}

.home :where(h1, h2, h3, p) {
  margin: 0;
}

.home-hero {
  position: relative;
  height: calc(810 * var(--px));
  overflow: hidden;
  background: #121212;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__brand {
  position: absolute;
  top: calc(163 * var(--px));
  left: calc(376 * var(--px));
  color: #ffffff;
  opacity: 0.38;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(150 * var(--fs));
  font-weight: 700;
  line-height: calc(75 * var(--fs));
  white-space: nowrap;
}

.home-hero__title {
  position: absolute;
  top: calc(292 * var(--px));
  left: calc(156 * var(--px));
  width: calc(689 * var(--px));
  margin: 0;
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(85 * var(--fs));
  font-weight: 700;
  line-height: calc(75 * var(--fs));
}

.home-hero__title-dark {
  color: #000000;
}

.home-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(22 * var(--px)) 0 calc(60 * var(--px));
}

.home-intro__statement {
  width: calc(605 * var(--px));
  margin-left: calc(-3 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(55 * var(--fs));
  font-weight: 500;
  line-height: calc(54 * var(--fs));
  letter-spacing: -0.08em;
  text-align: center;
}

.home-intro__statement span {
  display: block;
}

.home-intro__copy {
  align-self: flex-start;
  width: calc(790 * var(--px));
  margin: calc(22 * var(--px)) 0 0 calc(160 * var(--px));
  font-size: calc(30 * var(--fs));
  font-weight: 500;
  line-height: calc(42 * var(--fs));
  letter-spacing: 0.04em;
}

.pill-btn--explore {
  width: calc(465 * var(--px));
  height: calc(135 * var(--px));
  margin: calc(35 * var(--px)) 0 0 calc(-5 * var(--px));
  background: #ffffff;
  filter: drop-shadow(2px 2px 12.5px rgba(0, 0, 0, 0.15));
  font-size: calc(45 * var(--fs));
  line-height: calc(47 * var(--fs));
  letter-spacing: -0.04em;
}

/* Animated compass (Figma group 203:77): the long spikes are masks so their fill can animate. */
.compass-mark {
  position: relative;
  width: calc(143 * var(--px));
  aspect-ratio: 1;
  margin: calc(22 * var(--px)) 0 0 calc(-5 * var(--px));
}

.compass-mark__spike {
  position: absolute;
  background-color: #000000;
  -webkit-mask: var(--spike) center / 100% 100% no-repeat;
  mask: var(--spike) center / 100% 100% no-repeat;
}

.compass-mark__spike--ns {
  --spike: url("../img/home/compass-v1.svg");
  top: 0;
  left: 42.63%;
  width: 13.576%;
  height: 100%;
}

.compass-mark__slot {
  position: absolute;
}

.compass-mark__slot > * {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: none;
}

.compass-mark__slot--ew {
  top: 43.13%;
  left: 0;
  width: 100%;
  height: 13.835%;
}

.compass-mark__spike--ew {
  --spike: url("../img/home/compass-v2.svg");
  width: 13.576%;
  height: 722.8%;
  rotate: -89.854deg;
}

.compass-mark__small--ne {
  position: absolute;
  top: 17.93%;
  left: 56.2%;
  width: 25.09%;
  height: 23.52%;
}

.compass-mark__slot--se {
  top: 55.58%;
  left: 57.33%;
  width: 24.38%;
  height: 25.92%;
}

.compass-mark__slot--se img {
  width: 102.94%;
  height: 90.74%;
  rotate: 92.02deg;
}

.compass-mark__slot--nw {
  top: 18.06%;
  left: 17.47%;
  width: 24.24%;
  height: 25.79%;
}

.compass-mark__slot--nw img {
  width: 103.52%;
  height: 91.19%;
  rotate: -88.3deg;
}

.compass-mark__slot--sw {
  top: 57.89%;
  left: 18.37%;
  width: 25.25%;
  height: 23.68%;
}

.compass-mark__slot--sw img {
  width: 99.38%;
  height: 99.29%;
  rotate: 179.61deg;
}

.compass-mark.is-in-view {
  animation: compass-turn 2s cubic-bezier(0.151, -0.054, 0.87, 1.137) both;
}

.compass-mark.is-in-view .compass-mark__spike {
  animation: compass-pulse 2s both;
}

@keyframes compass-turn {
  from {
    rotate: 0deg;
  }

  to {
    rotate: -90deg;
  }
}

@keyframes compass-pulse {
  0% {
    scale: 1;
    background-color: #000000;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }

  50% {
    scale: 1.08;
    background-color: var(--gold);
    animation-timing-function: ease-in-out;
  }

  100% {
    scale: 1;
    background-color: #a7a9ac;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compass-mark.is-in-view,
  .compass-mark.is-in-view .compass-mark__spike {
    animation: none;
  }
}

.home-billing {
  padding: calc(39 * var(--px)) 0 calc(69 * var(--px));
  background: rgba(217, 217, 217, 0.55);
}

.home-billing__badge {
  width: calc(554 * var(--px));
  margin-left: calc(85 * var(--px));
  padding-left: calc(38 * var(--px));
  border-radius: calc(15 * var(--px));
  background: rgba(212, 175, 55, 0.65);
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 300;
  line-height: calc(75 * var(--fs));
}

.home-billing__title {
  width: calc(717 * var(--px));
  margin: calc(44 * var(--px)) 0 0 calc(100 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(75 * var(--fs));
  font-weight: 500;
  line-height: calc(68 * var(--fs));
  letter-spacing: -0.04em;
}

.home-billing__copy {
  width: calc(980 * var(--px));
  margin: calc(28 * var(--px)) 0 0 calc(114 * var(--px));
  font-size: calc(30 * var(--fs));
  font-weight: 500;
  line-height: calc(42 * var(--fs));
  letter-spacing: 0.04em;
}

.home-billing__tagline {
  width: calc(965 * var(--px));
  margin: calc(42 * var(--px)) auto 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 300;
  line-height: calc(75 * var(--fs));
  text-align: center;
  transition: font-weight 0.2s ease;
}

.home-billing__tagline:hover {
  font-weight: 700;
}

.billing-tiles {
  display: flex;
  gap: calc(74 * var(--px));
  margin: calc(26 * var(--px)) 0 0 calc(121 * var(--px));
  padding: 0;
  list-style: none;
}

.billing-tile {
  position: relative;
  flex-shrink: 0;
  width: calc(350 * var(--px));
  height: calc(300 * var(--px));
  text-align: center;
  outline: none;
}

.billing-tile__title {
  position: absolute;
  top: 0;
  left: 19.71%;
  right: 19.43%;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(30 * var(--fs));
  font-weight: 700;
  line-height: calc(35 * var(--fs));
  letter-spacing: 0.04em;
}

.billing-tile:last-child .billing-tile__title {
  left: 14.29%;
  right: 14.29%;
}

.billing-tile__media {
  position: absolute;
  top: calc(82 * var(--px));
  left: 34.29%;
  right: 34%;
  aspect-ratio: 890 / 1090;
}

.billing-tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.billing-tile__hover-img,
.billing-tile__desc {
  opacity: 0;
}

.billing-tile__desc {
  position: absolute;
  top: 70%;
  left: 3.14%;
  right: 3.14%;
  font-size: calc(25 * var(--fs));
  font-weight: 500;
  line-height: calc(30 * var(--fs));
  transition: opacity 0.25s ease;
}

.billing-tile:hover .billing-tile__hover-img,
.billing-tile:focus-visible .billing-tile__hover-img,
.billing-tile:hover .billing-tile__desc,
.billing-tile:focus-visible .billing-tile__desc {
  opacity: 1;
}

.home-ops {
  padding: calc(74 * var(--px)) 0 calc(92 * var(--px));
  background: #000000;
  color: #ffffff;
}

.home-ops__title,
.home-ops__how-title {
  width: calc(860 * var(--px));
  margin-left: calc(143 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 500;
  line-height: calc(45 * var(--fs));
  letter-spacing: 0.01em;
}

.home-ops__copy {
  width: calc(790 * var(--px));
  margin: calc(24 * var(--px)) 0 0 calc(148 * var(--px));
  font-size: calc(30 * var(--fs));
  font-weight: 600;
  line-height: calc(42 * var(--fs));
  letter-spacing: 0.04em;
}

.home-ops__copy strong {
  font-weight: 800;
  text-transform: uppercase;
}

.home-ops__copy ul {
  margin: 0;
  padding-left: 1.5em;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, calc(356 * var(--px)));
  column-gap: calc(113 * var(--px));
  row-gap: calc(88 * var(--px));
  margin: calc(49 * var(--px)) 0 0 calc(286 * var(--px));
}

.feature-card {
  position: relative;
  width: calc(356 * var(--px));
  height: calc(347 * var(--px));
  overflow: hidden;
  border-radius: calc(20 * var(--px));
  outline: none;
}

.feature-card--driver {
  margin-left: calc(160 * var(--px));
}

.feature-card--ops {
  margin-left: calc(153 * var(--px));
}

.feature-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.feature-card--ops .feature-card__img {
  object-position: bottom;
}

.feature-card::after {
  content: "";
  position: absolute;
  top: 48.7%;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: calc(20 * var(--px));
  background: rgba(217, 217, 217, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card__title {
  position: absolute;
  z-index: 1;
  top: 15.85%;
  left: 10.96%;
  right: 17.7%;
  color: var(--grey);
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(40 * var(--fs));
  font-weight: 500;
  line-height: calc(39 * var(--fs));
  letter-spacing: -0.01em;
  text-shadow: 4px 4px 20px #9d9c9c;
}

.feature-card--dispatch .feature-card__title {
  top: 11.24%;
  text-shadow: 4px 4px 10px #000000;
}

.feature-card--driver .feature-card__title {
  right: 0;
  text-shadow: 4px 4px 20px #000000;
}

.feature-card--ops .feature-card__title {
  text-shadow: 4px 4px 20px #090909;
}

.feature-card__desc {
  position: absolute;
  z-index: 1;
  top: 53.31%;
  left: 10.96%;
  right: 10.96%;
  font-size: calc(25 * var(--fs));
  font-weight: 500;
  line-height: calc(28 * var(--fs));
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card--driver .feature-card__desc {
  top: 55.91%;
}

.feature-card__img--hover {
  opacity: 0;
}

.feature-card:hover .feature-card__img--hover,
.feature-card:focus-visible .feature-card__img--hover,
.feature-card:hover .feature-card__desc,
.feature-card:focus-visible .feature-card__desc {
  opacity: 1;
}

.feature-card:hover::after,
.feature-card:focus-visible::after {
  opacity: 0.75;
}

.home-ops__how-title {
  margin-top: calc(58 * var(--px));
}

.home-steps {
  display: flex;
  gap: calc(111 * var(--px));
  margin: calc(34 * var(--px)) 0 0 calc(143 * var(--px));
  padding: 0;
  list-style: none;
}

.home-steps__item {
  position: relative;
  padding-top: calc(62 * var(--px));
}

.home-steps__item:nth-child(1) { width: calc(192 * var(--px)); }
.home-steps__item:nth-child(2) { width: calc(221 * var(--px)); }
.home-steps__item:nth-child(3) { width: calc(180 * var(--px)); }
.home-steps__item:nth-child(4) { width: calc(227 * var(--px)); }

.home-steps__num {
  position: absolute;
  top: calc(5 * var(--px));
  left: 0;
  color: var(--gold);
  font-size: calc(65 * var(--fs));
  font-weight: 800;
  line-height: calc(42 * var(--fs));
  letter-spacing: 0.04em;
}

.home-steps__title {
  position: absolute;
  top: 0;
  left: calc(20 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(35 * var(--fs));
  font-weight: 500;
  line-height: calc(42 * var(--fs));
  letter-spacing: -0.03em;
  white-space: nowrap;
  -webkit-text-stroke: calc(10 * var(--fs)) #000;
  paint-order: stroke fill;
}

.home-steps__item:nth-child(2) .home-steps__num { top: calc(4 * var(--px)); }
.home-steps__item:nth-child(3) .home-steps__num { top: calc(3 * var(--px)); }
.home-steps__item:nth-child(4) .home-steps__num { top: calc(2 * var(--px)); }
.home-steps__item:nth-child(2) .home-steps__title { left: calc(33 * var(--px)); }
.home-steps__item:nth-child(3) .home-steps__title { left: calc(31 * var(--px)); }
.home-steps__item:nth-child(4) .home-steps__title { left: calc(32 * var(--px)); }
.home-steps__item:nth-child(3) { padding-top: calc(57 * var(--px)); }

.home-steps__desc {
  min-height: calc(203 * var(--px));
  font-size: calc(25 * var(--fs));
  font-weight: 500;
  line-height: calc(35 * var(--fs));
  letter-spacing: 0.01em;
}

.pill-btn--demo {
  width: calc(365 * var(--px));
  height: calc(100 * var(--px));
  margin: calc(56 * var(--px)) 0 0 calc(556 * var(--px));
  background: var(--grey);
  box-shadow: 2px 2px 25px rgba(255, 255, 255, 0.25);
  filter: drop-shadow(1px 1px 10px rgba(255, 255, 255, 0.1));
  font-size: calc(35 * var(--fs));
  line-height: calc(47 * var(--fs));
  letter-spacing: 0.01em;
}

/* —— Products & Platform (Figma frame 28:178) —— */
.products {
  width: 100%;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
}

.products :where(h1, h2, h3, p, ul) {
  margin: 0;
}

.products :where(ul) {
  padding: 0;
  list-style: none;
}

.products-hero {
  position: relative;
  height: calc(1349 * var(--px));
}

.products-hero__media {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(699 * var(--px));
  object-fit: cover;
}

.products-hero__title {
  position: absolute;
  top: calc(538 * var(--px));
  left: calc(163 * var(--px));
  width: calc(815 * var(--px));
  color: var(--gold);
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(65 * var(--fs));
  font-weight: 700;
  line-height: calc(75 * var(--fs));
}

.products-hero__copy {
  position: absolute;
  top: calc(718 * var(--px));
  left: calc(183 * var(--px));
  width: calc(548 * var(--px));
  font-size: calc(25 * var(--fs));
  font-weight: 400;
  line-height: calc(30 * var(--fs));
  letter-spacing: 0.02em;
}

.product-cards {
  position: absolute;
  top: calc(910 * var(--px));
  left: calc(135 * var(--px));
  display: flex;
  justify-content: space-between;
  width: calc(1165 * var(--px));
}

.product-card {
  position: relative;
  display: block;
  width: calc(250 * var(--px));
  height: calc(300 * var(--px));
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  outline: none;
}

.product-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.product-card__img {
  position: absolute;
  top: -0.43%;
  left: -1.78%;
  width: 103.88%;
  max-width: none;
  height: 101.01%;
}

.product-card__title,
.product-card__desc {
  position: absolute;
  font-weight: 700;
  transition: opacity 0.2s ease;
}

.product-card__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(25 * var(--fs));
  line-height: calc(23 * var(--fs));
  letter-spacing: 0.02em;
}

.product-card--app .product-card__title {
  top: 43.67%;
  left: 18%;
  right: 18%;
  line-height: calc(20 * var(--fs));
}

.product-card--compact .product-card__title {
  top: 41%;
  left: 14.8%;
  right: 14.4%;
}

.product-card--wlan .product-card__title {
  top: 43.33%;
  left: 22%;
  right: 22.4%;
}

.product-card--multimedia .product-card__title {
  top: 41.67%;
  left: 10.8%;
  right: 10.8%;
}

.product-card__desc {
  top: 11.67%;
  left: 8.8%;
  width: 52%;
  font-size: calc(10 * var(--fs));
  line-height: calc(13 * var(--fs));
  letter-spacing: 0.02em;
  opacity: 0;
}

.product-card--app .product-card__desc {
  top: 19%;
  left: 8.4%;
}

.product-card--multimedia .product-card__desc {
  top: 46.67%;
}

/* Gold highlight (Figma group 267:611): an 11px label bar above a 1px outlined box. */
.product-card__frame {
  position: absolute;
  top: calc(var(--frame-top) * var(--px));
  left: calc(var(--frame-left) * var(--px));
  width: calc(100 * var(--px));
  height: calc(68 * var(--px));
  --bar: 11;
  opacity: 0;
}

.product-card--app .product-card__frame { --frame-top: 167; --frame-left: 50; }
.product-card--compact .product-card__frame { --frame-top: 111; --frame-left: 125; }
.product-card--wlan .product-card__frame { --frame-top: 103; --frame-left: 125; }

.product-card--multimedia .product-card__frame {
  --frame-top: 39;
  --frame-left: 78;
  --bar: 17;
  height: calc(74 * var(--px));
}

.product-card__frame::after {
  content: "";
  position: absolute;
  top: calc((var(--bar) + 1) * var(--px));
  right: 0;
  bottom: 0;
  left: 0;
  border: max(1px, calc(1 * var(--px))) solid var(--gold);
}

.product-card__label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--bar) * var(--px));
  padding: calc(3 * var(--px)) 0 0 calc(5 * var(--px));
  background: var(--gold);
  color: #000000;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(8 * var(--fs));
  font-weight: 700;
  line-height: calc(5 * var(--fs));
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.product-card--multimedia .product-card__label {
  padding-top: 0;
  line-height: calc(8 * var(--fs));
}

.product-card__arrow {
  position: absolute;
  top: calc(274.32 * var(--px));
  left: calc(214.15 * var(--px));
  width: calc(21 * var(--px));
  height: calc(7.364 * var(--px));
  transition: rotate 0.2s ease;
}

.product-card:hover .product-card__title,
.product-card:focus-visible .product-card__title {
  opacity: 0;
}

.product-card:hover .product-card__desc,
.product-card:focus-visible .product-card__desc {
  opacity: 1;
}

.product-card:hover .product-card__frame,
.product-card:focus-visible .product-card__frame {
  opacity: 1;
  animation: product-frame-blink 0.75s linear both;
}

.product-card:hover .product-card__arrow,
.product-card:focus-visible .product-card__arrow {
  rotate: -30deg;
}

@keyframes product-frame-blink {
  0% { opacity: 1; animation-timing-function: ease-in-out; }
  20% { opacity: 0; animation-timing-function: ease-in-out; }
  40% { opacity: 1; animation-timing-function: ease-in-out; }
  73.333% { opacity: 0; animation-timing-function: ease-in-out; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-card__frame,
  .product-card:focus-visible .product-card__frame {
    animation: none;
  }
}

/* Each product block is laid out on its own slice of the Figma frame; the numbers below are
   Figma pixels relative to the top of that slice. */
.product-section {
  position: relative;
  height: calc(var(--h) * var(--px));
  scroll-margin-top: calc(90 * var(--px));
}

.product-section--app {
  --h: 1646;
  --title-top: 16; --title-w: 1430;
  --sub-top: 166.4; --sub-left: 157; --sub-w: 1124.3;
  --img-top: 188; --img-left: 58; --img-w: 1233;
  --text-top: 328; --text-left: 795; --text-h: 278; --text-pt: 59.3; --text-pl: 48;
  --tiles-top: 1277; --tiles-left: 35; --tiles-w: 1370;
  background: #ffffff;
  color: #0e0e0e;
}

.product-section--compact {
  --h: 1254;
  --title-top: 16; --title-w: 1440;
  --sub-top: 155.9; --sub-left: 157; --sub-w: 1124.3;
  --img-top: -75; --img-left: 7; --img-w: 1366;
  --text-top: 305; --text-left: 109; --text-h: 241; --text-pt: 37.3; --text-pl: 50;
  --tiles-top: 891; --tiles-left: 33; --tiles-w: 1374;
}

.product-section--wlan {
  --h: 1440;
  --title-top: 14; --title-w: 1430;
  --sub-top: 164.1; --sub-left: 129; --sub-w: 1124.9;
  --img-top: 132; --img-left: 38; --img-w: 1308;
  --text-top: 487; --text-left: 809; --text-h: 278; --text-pt: 59.6; --text-pl: 48;
  --tiles-top: 1102; --tiles-left: 33; --tiles-w: 1374;
  background: #fffcfc;
  color: #0e0e0e;
}

.product-section--multimedia {
  --h: 1824;
  --title-top: -21; --title-w: 1151;
  --sub-top: 286.1; --sub-left: 112; --sub-w: 1217;
  --img-top: 206; --img-left: 68; --img-w: 1305;
  --text-top: 410; --text-left: 111; --text-h: 241; --text-pt: 36.9; --text-pl: 50;
  --tiles-top: 1324; --tiles-left: 35; --tiles-w: 1370;
}

.product-section__title {
  position: absolute;
  z-index: 1;
  top: calc(var(--title-top) * var(--px));
  left: 50%;
  width: calc(var(--title-w) * var(--px));
  translate: -50% 0;
  color: #000000;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(155 * var(--fs));
  font-weight: 500;
  line-height: calc(75 * var(--fs));
  text-align: center;
}

.product-section--compact .product-section__title,
.product-section--multimedia .product-section__title {
  color: #ffffff;
}

.product-section--multimedia .product-section__title {
  margin-left: calc(0.5 * var(--px));
  line-height: calc(150 * var(--fs));
}

.product-section__subtitle {
  position: absolute;
  z-index: 1;
  top: calc(var(--sub-top) * var(--px));
  left: calc(var(--sub-left) * var(--px));
  width: calc(var(--sub-w) * var(--px));
  color: var(--gold);
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 700;
  line-height: calc(35 * var(--fs));
  letter-spacing: 0.02em;
  text-align: center;
}

.product-section__media {
  position: absolute;
  top: calc(var(--img-top) * var(--px));
  left: calc(var(--img-left) * var(--px));
  width: calc(var(--img-w) * var(--px));
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
}

.product-section__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.product-section--app .product-section__media img {
  translate: -5.26% 0.06%;
}

.product-section__text {
  position: absolute;
  z-index: 1;
  top: calc(var(--text-top) * var(--px));
  left: calc(var(--text-left) * var(--px));
  width: calc(564 * var(--px));
  height: calc(var(--text-h) * var(--px));
  padding: calc(var(--text-pt) * var(--px)) calc((100 - var(--text-pl)) * var(--px)) 0 calc(var(--text-pl) * var(--px));
  border-radius: calc(20 * var(--px));
  background: rgba(217, 217, 217, 0.2);
  -webkit-backdrop-filter: blur(calc(12.5 * var(--px)));
  backdrop-filter: blur(calc(12.5 * var(--px)));
  font-size: calc(25 * var(--fs));
  font-weight: 400;
  line-height: calc(30 * var(--fs));
  letter-spacing: 0.02em;
}

.feature-tiles {
  position: absolute;
  z-index: 2;
  top: calc(var(--tiles-top) * var(--px));
  left: calc(var(--tiles-left) * var(--px));
  display: flex;
  justify-content: space-between;
  width: calc(var(--tiles-w) * var(--px));
}

/* Figma components 28–47: hovering swaps to a 260px variant whose panel starts 11px further left. */
.feature-tile {
  position: relative;
  width: calc(250 * var(--px));
  height: calc(250 * var(--px));
  color: #000000;
  outline: none;
}

.feature-tiles--dark .feature-tile {
  color: #ffffff;
}

.feature-tile::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: calc(25 * var(--px));
  background: rgba(0, 0, 0, 0.25);
  transition: left 0.2s ease, right 0.2s ease, bottom 0.2s ease, background-color 0.2s ease;
}

.feature-tiles--dark .feature-tile::before {
  background: #9d9c9c;
}

.feature-tile__title {
  position: absolute;
  top: calc(78 * var(--px));
  left: calc(32 * var(--px));
  right: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(35 * var(--fs));
  font-weight: 700;
  line-height: calc(40 * var(--fs));
  letter-spacing: 0.02em;
}

.feature-tile__desc {
  position: absolute;
  top: calc(104 * var(--px));
  left: calc(21 * var(--px));
  width: calc(208 * var(--px));
  font-size: calc(20 * var(--fs));
  font-weight: 500;
  line-height: calc(20 * var(--fs));
  letter-spacing: -0.03em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.feature-tile:hover::before,
.feature-tile:focus-visible::before {
  right: calc(1 * var(--px));
  bottom: calc(-10 * var(--px));
  left: calc(-11 * var(--px));
  background-color: rgba(157, 156, 156, 0.25);
}

.feature-tiles--dark .feature-tile:hover::before,
.feature-tiles--dark .feature-tile:focus-visible::before {
  background-color: rgba(255, 255, 255, 0.3);
}

.feature-tile:hover .feature-tile__title,
.feature-tile:focus-visible .feature-tile__title {
  top: calc(51 * var(--px));
  left: calc(21 * var(--px));
  right: auto;
  width: calc(149 * var(--px));
  font-size: calc(25 * var(--fs));
  line-height: calc(22 * var(--fs));
}

.feature-tile:hover .feature-tile__desc,
.feature-tile:focus-visible .feature-tile__desc {
  opacity: 1;
}

/* —— Solutions (Figma frame 28:179) —— */
.solutions {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  color: #0e0e0e;
}

.solutions :where(h1, h2, h3, h4, p, ul) {
  margin: 0;
}

.solutions :where(ul) {
  padding: 0;
  list-style: none;
}

/* background-clip: text only paints inside the box, and these line-heights are tighter than the
   glyphs, so the box is grown vertically and the growth cancelled with negative margins. */
.gradient-text {
  background: linear-gradient(90deg, #000000 0%, #313131 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: 0.4em;
  margin-block: -0.4em;
}

.solutions-intro {
  position: relative;
  height: calc(1247 * var(--px));
}

.audience-switch {
  position: absolute;
  top: calc(168 * var(--px));
  left: calc(363 * var(--px));
  display: flex;
  align-items: flex-start;
  gap: calc(32 * var(--px));
}

.audience-btn {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(341 * var(--px));
  height: calc(118 * var(--px));
  padding-top: calc(30 * var(--px));
  overflow: hidden;
  border: 0.2px solid var(--gold);
  border-radius: calc(15 * var(--px));
  background: rgba(157, 156, 156, 0.1);
  color: #000000;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(40 * var(--fs));
  font-weight: 500;
  line-height: calc(55 * var(--fs));
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.2s ease, border-width 0.2s ease;
}

.audience-btn--personal {
  margin-top: calc(1 * var(--px));
}

.audience-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-img) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.audience-btn--business {
  --btn-img: url("../img/solutions/btn-businesses.jpg");
}

.audience-btn--personal {
  --btn-img: url("../img/solutions/btn-personal.jpg");
}

.audience-btn--personal::before {
  background-size: 100% 192.61%;
  background-position: 0 25.82%;
}

.audience-btn span {
  position: relative;
}

.audience-btn:hover,
.audience-btn:focus-visible {
  border-width: 1px;
  color: #ffffff;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

/* Sub-pixel borders snap to a full device pixel on 1x screens; fade them to keep Figma's hairline weight. */
@media (max-resolution: 1.49dppx) {
  .audience-btn {
    border-color: rgba(212, 175, 55, 0.2);
  }

  .audience-btn:hover,
  .audience-btn:focus-visible {
    border-color: var(--gold);
  }
}

.audience-btn:hover::before,
.audience-btn:focus-visible::before {
  opacity: 1;
}

.solutions-intro__title {
  position: absolute;
  top: calc(359.9 * var(--px));
  left: calc(302 * var(--px));
  width: calc(897 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(65 * var(--fs));
  font-weight: 500;
  line-height: calc(55 * var(--fs));
  letter-spacing: 0.01em;
  text-align: center;
  z-index: 1;
}

/* Figma component 53: hovering the car swaps every circle to its gold crop and shows the labels. */
.car-map {
  position: absolute;
  top: calc(455 * var(--px));
  left: calc(101 * var(--px));
  width: calc(1237 * var(--px));
  height: calc(824 * var(--px));
}

.car-map__car {
  display: block;
  width: 100%;
  height: auto;
}

.car-map__spot {
  position: absolute;
  display: block;
  border-radius: 50%;
  outline: none;
}

.car-map__spot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease;
}

.car-map__spot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.car-map__spot--fleet { inset: 10.32% 58.29% 65.41% 25.55%; }
.car-map__spot--logistics { inset: 8.98% 3.88% 66.75% 79.95%; }
.car-map__spot--emergency { inset: 37.86% 75.67% 37.86% 8.16%; }
.car-map__spot--passenger { inset: 50% 50.2% 25.73% 33.63%; }
.car-map__spot--tourism { inset: 37.86% 17.22% 37.86% 66.61%; }
.car-map__spot--events { inset: 66.75% 17.22% 8.98% 66.61%; }

.car-map__label {
  position: absolute;
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(25 * var(--fs));
  font-weight: 500;
  line-height: calc(25 * var(--fs));
  letter-spacing: 0.01em;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.car-map__label--fleet { inset: 22.69% 39.45% 70.51% 41.71%; }
.car-map__label--emergency { inset: 31.07% 73% 62.14% 8.16%; }
.car-map__label--tourism { inset: 46.6% 1.21% 46.6% 79.95%; }
.car-map__label--logistics { inset: 24.88% 16.57% 68.33% 64.59%; }
.car-map__label--passenger { inset: 43.2% 48.83% 50% 32.34%; }
.car-map__label--events { inset: 68.69% 29.99% 24.51% 51.17%; }

.car-map .car-map__gold,
.car-map__label {
  opacity: 0;
}

.car-map:hover .car-map__gold,
.car-map:focus-within .car-map__gold,
.car-map:hover .car-map__label,
.car-map:focus-within .car-map__label {
  opacity: 1;
}

/* One numbered business block; numbers are Figma pixels from the top of the block's text. */
.solution {
  position: relative;
  height: calc(var(--h) * var(--px));
  scroll-margin-top: calc(110 * var(--px));
}

.solution--fleet { --h: 853; --suitable: 262; --panel-left: 91; --panel-top: 328; }
.solution--logistics { --h: 875; --suitable: 262; --panel-left: 91; --panel-top: 350; }
.solution--emergency { --h: 836; --suitable: 227; --panel-left: 74; --panel-top: 300; }
.solution--passenger { --h: 830; --suitable: 227; --panel-left: 91; --panel-top: 296; }
.solution--tourism { --h: 861; --suitable: 254; --panel-left: 91; --panel-top: 327; }
.solution--events { --h: 909; --suitable: 254; --panel-left: 91; --panel-top: 324; }

.solution__num,
.solution__title,
.solution__lead,
.solution__body,
.solution__suitable {
  position: absolute;
}

.solution__num {
  top: 0;
  left: calc(246 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(75 * var(--fs));
  font-weight: 700;
  line-height: calc(45 * var(--fs));
  letter-spacing: 0.01em;
}

.solution__title {
  top: calc(3 * var(--px));
  left: calc(366 * var(--px));
  width: calc(745 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 500;
  line-height: calc(45 * var(--fs));
  letter-spacing: 0.01em;
}

.solution__lead,
.solution__body,
.solution__suitable {
  left: calc(373 * var(--px));
  font-size: calc(25 * var(--fs));
  line-height: calc(30 * var(--fs));
  letter-spacing: 0.02em;
}

.solution__lead,
.solution__suitable {
  font-weight: 600;
}

.solution__lead {
  top: calc(60 * var(--px));
  width: calc(915 * var(--px));
}

.solution__body {
  top: calc(100 * var(--px));
  width: calc(721 * var(--px));
  font-weight: 400;
}

.solution__body strong {
  font-weight: 700;
}

.solution__suitable {
  top: calc(var(--suitable) * var(--px));
}

/* Figma "Group 19" → "Group 20" variants: the list rearranges and each entry gains a description. */
.sector-panel {
  position: absolute;
  top: calc(var(--panel-top) * var(--px));
  left: calc(var(--panel-left) * var(--px));
  width: calc(1257 * var(--px));
  height: calc(461 * var(--px));
  border-radius: calc(25 * var(--px));
  /* Figma's glass effect composites the texture over grey rather than the white page; measured from
     its renders. Without it the hover state washes out and the tire marks in the texture vanish. */
  background-color: #cccccc;
  color: #000000;
  text-align: center;
  outline: none;
  --tint: 157, 156, 156;
}

.sector-panel--gold {
  --tint: 212, 175, 55;
}

.sector-panel::before,
.sector-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sector-panel::before {
  background: url("../img/solutions/panel-bg.jpg") center / cover no-repeat;
  opacity: 0.64;
  transition: opacity 0.3s ease-out;
}

/* Added by main.js on first hover; its first frame is panel-bg.jpg, so the swap is seamless. */
.sector-panel__tracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.sector-panel.is-playing::before {
  opacity: 0;
  transition: none;
}

.sector-panel.is-playing .sector-panel__tracks {
  opacity: 0.64;
  transition: none;
}

.sector-panel::after {
  background: rgba(var(--tint), 0.45);
  transition: background-color 0.3s ease-out;
}

.sector-panel:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.sector-panel__default,
.sector-panel__detail {
  position: absolute;
  z-index: 1;
  inset: 0;
  transition: opacity 0.3s ease-out;
}

.sector-panel__default li,
.sector-panel__detail > * {
  position: absolute;
}

.sector-panel__default li,
.sector-panel__detail > :is(h3, h4) {
  font-size: calc(30 * var(--fs));
  font-weight: 700;
  line-height: calc(30 * var(--fs));
  letter-spacing: 0.02em;
}

.sector-panel__default li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sector-panel__detail > p {
  font-size: calc(22 * var(--fs));
  font-weight: 400;
  line-height: calc(30 * var(--fs));
  letter-spacing: 0.02em;
}

.sector-panel__detail {
  opacity: 0;
}

.sector-panel:hover::after,
.sector-panel:focus-visible::after {
  background-color: rgba(var(--tint), 0.2);
}

.sector-panel:hover .sector-panel__default,
.sector-panel:focus-visible .sector-panel__default {
  opacity: 0;
}

.sector-panel:hover .sector-panel__detail,
.sector-panel:focus-visible .sector-panel__detail {
  opacity: 1;
}

.solutions-personal {
  position: relative;
  height: calc(1484 * var(--px));
  scroll-margin-top: calc(110 * var(--px));
}

.solutions-personal__heading {
  position: absolute;
  top: 0;
  left: calc(321 * var(--px));
  width: calc(787 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(65 * var(--fs));
  font-weight: 500;
  line-height: calc(55 * var(--fs));
  letter-spacing: 0.01em;
  text-align: center;
}

/* Figma component 62: the circle swaps to its gold crop on hover. */
.bike-spot {
  position: absolute;
  top: calc(201 * var(--px));
  left: calc(446 * var(--px));
  width: calc(557 * var(--px));
  height: calc(418 * var(--px));
}

.bike-spot__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bike-spot__photo img {
  position: absolute;
  top: -37.32%;
  left: -7.72%;
  width: 126.39%;
  max-width: none;
  height: 168.49%;
}

.bike-spot__circle {
  position: absolute;
  top: 10.77%;
  left: 39.32%;
  width: 35.9%;
  height: 47.84%;
  transition: opacity 0.25s ease;
}

.bike-spot__circle--gold {
  opacity: 0;
}

.bike-spot:hover .bike-spot__circle--gold {
  opacity: 1;
}

.solution--family {
  position: absolute;
  top: calc(689.9 * var(--px));
  left: 0;
  width: 100%;
  height: calc(752 * var(--px));
  --suitable: 232.5;
  --panel-left: 91;
  --panel-top: 291.1;
}

.solution--family .solution__title {
  top: 0;
  left: calc(301 * var(--px));
}

.solution--family .solution__lead {
  top: calc(57.5 * var(--px));
  left: calc(303 * var(--px));
}

.solution--family .solution__body {
  top: calc(97 * var(--px));
  left: calc(303 * var(--px));
}

.solution--family .solution__suitable {
  left: calc(307 * var(--px));
}

.solutions-platform {
  position: relative;
  height: calc(1081 * var(--px));
}

.device-strip {
  position: absolute;
  inset: 0 0 auto;
  height: calc(473 * var(--px));
}

.device-strip > * {
  position: absolute;
}

.device-strip__line {
  top: calc(233.19 * var(--px));
  left: calc(260 * var(--px));
  width: calc(943 * var(--px));
  height: 0.5px;
}

.device-strip[data-animate-on-view]:not(.is-in-view) .device-strip__line {
  scale: 0;
}

.device-strip.is-in-view .device-strip__line {
  animation: device-line-grow 2s both;
}

@keyframes device-line-grow {
  0% { scale: 0; }
  49.639% { scale: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  100% { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .device-strip[data-animate-on-view] .device-strip__line {
    scale: 1;
    animation: none;
  }
}

.device-strip__phone {
  top: calc(124 * var(--px));
  left: calc(112 * var(--px));
  width: calc(225 * var(--px));
  aspect-ratio: 1;
  overflow: hidden;
}

.device-strip__phone img {
  display: block;
  width: 100%;
  height: 100%;
  translate: -5.26% 0.06%;
}

.device-strip__compact {
  top: 0;
  left: calc(273 * var(--px));
  width: calc(350 * var(--px));
  height: calc(473 * var(--px));
  overflow: hidden;
}

.device-strip__compact img {
  position: absolute;
  top: 0;
  left: -14%;
  width: 135.14%;
  max-width: none;
  height: 100%;
}

.device-strip__router {
  top: calc(49 * var(--px));
  left: calc(787 * var(--px));
  width: calc(375 * var(--px));
  height: calc(375 * var(--px));
}

.device-strip__multimedia {
  top: calc(110 * var(--px));
  left: calc(1087 * var(--px));
  width: calc(250 * var(--px));
  height: calc(250 * var(--px));
}

.device-strip__compass {
  top: calc(179 * var(--px));
  left: calc(677 * var(--px));
  width: calc(109 * var(--px));
  height: calc(112 * var(--px));
}

.solutions-platform__title {
  position: absolute;
  top: calc(423.9 * var(--px));
  left: calc(304 * var(--px));
  width: calc(865 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(75 * var(--fs));
  font-weight: 700;
  line-height: calc(65 * var(--fs));
  letter-spacing: 0.01em;
  text-align: center;
}

.solutions-platform__copy {
  position: absolute;
  top: calc(597.2 * var(--px));
  left: calc(213 * var(--px));
  width: calc(1037 * var(--px));
  font-size: calc(30 * var(--fs));
  font-weight: 400;
  line-height: calc(35 * var(--fs));
  letter-spacing: 0.02em;
  text-align: center;
}

.solutions-platform__copy strong {
  font-weight: 700;
}

.solutions-platform__copy--closing {
  top: calc(801 * var(--px));
  left: calc(206 * var(--px));
}

/* —— Company (Figma frame 28:181) —— */
.company {
  width: 100%;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
}

.company :where(h1, h2, p, ul) {
  margin: 0;
}

.company-about {
  position: relative;
  height: calc(1308 * var(--px));
  font-family: "Manrope", sans-serif;
  font-size: calc(25 * var(--fs));
  font-weight: 400;
  line-height: calc(30 * var(--fs));
  letter-spacing: 0.01em;
}

.company-about strong {
  font-weight: 700;
}

.company-about__title,
.company-about__heading {
  position: absolute;
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 500;
  line-height: calc(45 * var(--fs));
  letter-spacing: 0.01em;
}

.company-about__title {
  top: calc(156 * var(--px));
  left: 0;
  right: 0;
  text-align: center;
}

.company-about__intro {
  position: absolute;
  top: calc(212.9 * var(--px));
  left: calc(283 * var(--px));
  width: calc(873 * var(--px));
  text-align: center;
}

.company-about__compass {
  position: absolute;
  top: calc(348 * var(--px));
  left: calc(511 * var(--px));
  width: calc(418 * var(--px));
  height: calc(434 * var(--px));
  animation: company-compass-in 2s linear both;
}

@keyframes company-compass-in {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }

  75.25%,
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-about__compass {
    animation: none;
  }
}

.company-about__heading {
  left: calc(291 * var(--px));
}

.company-about__heading--mission {
  top: calc(886.9 * var(--px));
}

.company-about__heading--what {
  top: calc(1010 * var(--px));
}

.company-about__text {
  position: absolute;
  left: calc(603.9 * var(--px));
}

.company-about__text--mission {
  top: calc(862 * var(--px));
  width: calc(530.1 * var(--px));
}

.company-about__text--what {
  top: calc(985.05 * var(--px));
  width: calc(545.1 * var(--px));
}

.company-about__text ul {
  padding: 0;
  list-style: none;
}

.company-about__text li {
  position: relative;
  margin-left: calc(37.5 * var(--fs));
}

.company-about__text li::before {
  content: "•";
  position: absolute;
  left: calc(-25 * var(--fs));
}

/* —— Contact (Figma frame 28:182) —— */
.contact {
  width: 100%;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
}

.contact :where(h1, h2, p, ul) {
  margin: 0;
}

.contact-main {
  position: relative;
  height: calc(1481 * var(--px));
  font-family: "Manrope", sans-serif;
  font-size: calc(20 * var(--fs));
  font-weight: 400;
  line-height: calc(32 * var(--fs));
  letter-spacing: 0.01em;
}

.contact-main strong {
  font-weight: 700;
}

.contact-main__title {
  position: absolute;
  top: calc(131 * var(--px));
  left: calc(144 * var(--px));
  width: calc(349 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(65 * var(--fs));
  font-weight: 500;
  line-height: calc(55 * var(--fs));
  letter-spacing: 0.01em;
}

.contact-main__intro {
  position: absolute;
  top: calc(267 * var(--px));
  left: calc(144 * var(--px));
  width: calc(702 * var(--px));
  font-size: calc(30 * var(--fs));
  line-height: calc(32 * var(--fs));
}

.contact-main__form-title {
  position: absolute;
  top: calc(407 * var(--px));
  left: calc(496 * var(--px));
  width: calc(553 * var(--px));
  font-family: "Space Grotesk", sans-serif;
  font-size: calc(45 * var(--fs));
  font-weight: 700;
  line-height: calc(55 * var(--fs));
  letter-spacing: 0.01em;
  text-align: center;
}

.contact-form {
  position: absolute;
  top: calc(464 * var(--px));
  left: calc(439 * var(--px));
  width: calc(667 * var(--px));
  height: calc(570 * var(--px));
}

.contact-form__field {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--top) * var(--px));
}

.contact-form__field--name {
  --top: 0;
}

.contact-form__field--company {
  --top: 103;
}

.contact-form__field--email {
  --top: 211;
}

.contact-form__field--message {
  --top: 326;
}

.contact-form__label {
  display: block;
}

.contact-form__input,
.contact-form__submit {
  display: block;
  border: 0.5px solid var(--gold);
  border-radius: calc(15 * var(--px));
  background: rgba(157, 156, 156, 0.1);
  color: #ffffff;
  font: inherit;
  letter-spacing: inherit;
  transition: border-width 0.2s ease, background-color 0.2s ease;
}

.contact-form__input {
  width: 100%;
  height: calc(55 * var(--px));
  padding: 0 calc(20 * var(--px));
}

.contact-form__input--textarea {
  height: calc(118 * var(--px));
  padding-top: calc(12 * var(--px));
  padding-bottom: calc(12 * var(--px));
  resize: none;
}

.contact-form__input:focus {
  border-width: 1px;
  outline: none;
}

.contact-form__submit {
  position: absolute;
  top: calc(524 * var(--px));
  left: calc(111 * var(--px));
  width: calc(446 * var(--px));
  height: calc(46 * var(--px));
  padding: 0;
  font-weight: 700;
  cursor: pointer;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  border-width: 1px;
  background: rgba(157, 156, 156, 0.2);
  outline: none;
}

@media (max-resolution: 1.49dppx) {
  .contact-form__input,
  .contact-form__submit {
    border-color: rgba(212, 175, 55, 0.5);
  }

  .contact-form__input:focus,
  .contact-form__submit:hover,
  .contact-form__submit:focus-visible {
    border-color: var(--gold);
  }
}

.contact-form__result {
  position: absolute;
  top: calc(580 * var(--px));
  left: 0;
  width: 100%;
  text-align: center;
}

.contact-details {
  padding: 0;
  list-style: none;
}

.contact-details__item {
  position: absolute;
  top: calc(1142 * var(--px));
  text-align: center;
}

.contact-details__item--phone {
  top: calc(1146 * var(--px));
  left: calc(238 * var(--px));
  width: calc(233 * var(--px));
}

.contact-details__item--email {
  left: calc(664 * var(--px));
  width: calc(230 * var(--px));
}

.contact-details__item--location {
  left: calc(1087 * var(--px));
  width: calc(221 * var(--px));
}

.contact-brand {
  position: absolute;
  top: calc(1293 * var(--px));
  left: calc(120 * var(--px));
  width: calc(787 * var(--px));
  height: calc(92 * var(--px));
  font-size: calc(30 * var(--fs));
  line-height: calc(20 * var(--fs));
}

.contact-brand__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(75 * var(--px));
  height: calc(78 * var(--px));
}

.contact-brand__name,
.contact-brand__tagline {
  position: absolute;
  left: calc(85 * var(--px));
  white-space: nowrap;
}

.contact-brand__name {
  top: calc(11 * var(--px));
  font-weight: 700;
}

.contact-brand__tagline {
  top: calc(51 * var(--px));
}

/* —— Platform features (legacy page, no longer in the Figma nav) —— */
.pf-page {
  flex: 1;
  width: 100%;
  background: #000000;
  color: #ffffff;
}

.pf-page__grid {
  display: grid;
  grid-template-columns: minmax(260px, min(100%, 557px)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px clamp(16px, 4vw, 48px) clamp(48px, 8vw, 96px);
}

.pf-page__media {
  margin: 0;
}

.pf-page__img {
  display: block;
  width: 100%;
  max-width: 557px;
  object-fit: cover;
  border-radius: 4px;
}

.pf-page__title {
  margin: 0 0 1.5rem;
  max-width: 627px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.1;
  letter-spacing: 0.45px;
  background: linear-gradient(90deg, #ffffff 0%, #9d9c9c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pf-page__lede {
  margin: 0;
  max-width: 530px;
  font-size: 25px;
  line-height: 1.32;
  letter-spacing: 0.25px;
}

.pf-page__hl {
  background-color: #ffffff;
  color: #000000;
  font-weight: 700;
  padding: 0 0.28em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.pf-page__hl--brand {
  font-weight: 800;
}

/* —— Wide screens: the Figma layout stops scaling at 1440px, so each slice is centred and
   only its background and full-bleed media extend into the side gutters. —— */
.home-hero,
.products-hero,
.product-section,
.solutions-intro,
.solutions-intro ~ .solution,
.solutions-personal,
.solutions-platform,
.company-about,
.contact-main {
  max-width: 1440px;
  margin-inline: auto;
}

.home-intro,
.home-billing,
.home-ops {
  padding-inline: var(--gutter);
}

.home-hero,
.product-section--app,
.product-section--wlan {
  border-image: conic-gradient(var(--slice-bg) 0 0) fill 0 / / 0 var(--gutter);
}

.home-hero {
  --slice-bg: #121212;
  overflow: visible;
  clip-path: inset(0 calc(-1 * var(--gutter)));
}

.product-section--app {
  --slice-bg: #ffffff;
}

.product-section--wlan {
  --slice-bg: #fffcfc;
}

.home-hero__video,
.products-hero__media {
  left: calc(-1 * var(--gutter));
  width: calc(100% + 2 * var(--gutter));
  max-width: none;
}

.home-hero__video {
  right: auto;
}

/* —— Mobile: nav drawer and stacked page layouts —— */
@media (max-width: 900px) {
  .site-header {
    top: 12px;
    padding: 0 12px;
  }

  .nav-pill {
    padding: 0 8px 0 12px;
  }

  .nav-pill__burger {
    display: flex;
  }

  .nav-pill__links {
    display: none;
    position: fixed;
    z-index: 200;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    margin: 0;
    padding: 84px 20px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #1a1a1a;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
  }

  .nav-pill__links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-pill__links a {
    width: 100%;
    padding: 16px 8px;
    color: #ffffff;
    font-size: 16px;
  }

  .nav-pill__backdrop {
    display: block;
    position: fixed;
    z-index: 199;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .nav-pill__checkbox:checked ~ .nav-pill__links {
    display: flex;
  }

  .nav-pill__checkbox:checked ~ .nav-pill__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-pill__checkbox:checked ~ .nav-pill__burger {
    position: relative;
    z-index: 201;
  }

  .nav-pill__checkbox:checked ~ .nav-pill__burger .nav-pill__burger-line {
    background: #ffffff;
  }

  .nav-pill__checkbox:checked ~ .nav-pill__burger .nav-pill__burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-pill__checkbox:checked ~ .nav-pill__burger .nav-pill__burger-line:nth-child(2) {
    opacity: 0;
  }

  .nav-pill__checkbox:checked ~ .nav-pill__burger .nav-pill__burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  html:has(#nav-main-drawer:checked) {
    overflow: hidden;
  }

  .home-hero {
    height: max(560px, 85svh);
  }

  .home-hero__brand {
    top: 120px;
    left: 50%;
    translate: -50% 0;
  }

  .home-hero__title {
    top: auto;
    bottom: 64px;
    left: 20px;
    right: 20px;
    width: auto;
  }

  .home-intro {
    padding: 40px 20px 56px;
  }

  .home-intro__statement,
  .home-intro__copy,
  .home-billing__title,
  .home-billing__copy,
  .home-billing__tagline,
  .home-ops__title,
  .home-ops__copy,
  .home-ops__how-title {
    width: auto;
    margin-left: 0;
  }

  .home-intro__copy {
    margin-top: 28px;
  }

  .compass-mark {
    --px: 0.8px;
    margin-left: 0;
  }

  .pill-btn {
    --px: 0.7px;
    --fs: 0.7px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-billing,
  .home-ops {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-billing__badge {
    width: auto;
    margin-left: 0;
    padding-right: 24px;
  }

  .billing-tiles,
  .feature-cards,
  .home-steps {
    --px: 1px;
    --fs: 1px;
    flex-direction: column;
    align-items: center;
    margin-left: 0;
  }

  .billing-tiles {
    gap: 32px;
  }

  .billing-tile {
    max-width: 100%;
  }

  .feature-cards {
    grid-template-columns: minmax(0, 356px);
    justify-content: center;
    row-gap: 24px;
  }

  .feature-card,
  .feature-card--driver,
  .feature-card--ops {
    width: 100%;
    margin-left: 0;
  }

  .home-steps {
    --fs: 0.8px;
    align-items: flex-start;
    gap: 28px;
  }

  .home-steps__item,
  .home-steps__item:nth-child(n) {
    width: 100%;
  }

  .home-steps__desc {
    min-height: 0;
  }

  .products-hero {
    height: auto;
    padding-bottom: 48px;
  }

  .products-hero__media {
    position: relative;
    height: auto;
    min-height: 340px;
    aspect-ratio: 1440 / 699;
  }

  .products-hero__title,
  .products-hero__copy {
    position: static;
    width: auto;
    padding: 0 20px;
  }

  .products-hero__title {
    position: relative;
    inset: auto;
    margin-top: -48px;
    line-height: 1.1;
  }

  .products-hero__copy {
    margin-top: 20px;
    line-height: 1.4;
  }

  .product-cards,
  .feature-tiles {
    --px: 1px;
    --fs: 1px;
    position: static;
    justify-content: flex-start;
    gap: 16px;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-cards {
    margin-top: 32px;
    padding: 0 20px;
  }

  .product-cards > li,
  .feature-tile {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .product-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
    padding: 56px 20px;
    scroll-margin-top: 72px;
  }

  .product-section__title,
  .product-section__subtitle,
  .product-section__media,
  .product-section__text {
    position: static;
    width: auto;
    translate: none;
  }

  .product-section__title,
  .product-section--multimedia .product-section__title {
    margin-left: 0;
    font-size: clamp(44px, 12vw, 96px);
    line-height: 1;
  }

  .product-section__subtitle {
    line-height: 1.2;
  }

  .product-section__text {
    height: auto;
    padding: 20px 22px;
    border-radius: 20px;
    line-height: 1.4;
  }

  .feature-tiles {
    margin: 0 -20px;
    padding: 4px 20px 14px 31px;
  }

  .solutions-intro,
  .solution,
  .solutions-personal,
  .solutions-platform {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
    padding: 48px 20px;
  }

  .solutions-intro {
    gap: 32px;
    padding-top: 100px;
  }

  .audience-switch {
    --px: 0.5px;
    --fs: 0.5px;
    justify-content: center;
    gap: 12px;
  }

  .audience-switch,
  .solutions-intro__title,
  .car-map,
  .solution > *,
  .solutions-personal__heading,
  .bike-spot,
  .solutions-platform__title,
  .solutions-platform__copy,
  .solutions-platform__copy--closing {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .car-map {
    height: auto;
  }

  .solution__lead {
    margin-top: 6px;
  }

  .sector-panel {
    height: auto;
    margin-top: 6px;
    padding: 24px 18px;
  }

  .sector-panel__default {
    display: none;
  }

  .sector-panel__detail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 1;
  }

  .sector-panel__detail > * {
    position: static;
  }

  .sector-panel__detail > p {
    margin-bottom: 14px;
  }

  .sector-panel__detail br {
    display: none;
  }

  .bike-spot {
    height: auto;
    aspect-ratio: 557 / 418;
  }

  .solution--family {
    position: relative;
    top: auto;
    width: auto;
    padding: 0;
  }

  .solutions .solution--family > * {
    top: auto;
    left: auto;
  }

  .device-strip {
    position: relative;
    margin: 0 -20px;
  }

  .solutions-platform__copy br {
    display: none;
  }

  .company-about {
    --px: 1px;
    --fs: 1px;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 100px 20px 64px;
    font-size: 18px;
    line-height: 24px;
  }

  .company-about > * {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .company-about__title,
  .company-about__heading {
    font-size: 34px;
    line-height: 38px;
  }

  .company-about__title {
    right: auto;
  }

  .company-about__intro {
    margin-top: 16px;
  }

  .company-about__intro p + p {
    margin-top: 8px;
  }

  .company-about__compass {
    align-self: center;
    width: min(260px, 70%);
    height: auto;
    margin: 32px 0 40px;
  }

  .company-about__heading--what {
    margin-top: 40px;
  }

  .company-about__text {
    margin-top: 12px;
  }

  .company-about__text li {
    margin-left: 24px;
  }

  .company-about__text li::before {
    left: -16px;
  }

  .contact-main {
    --px: 1px;
    --fs: 1px;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 100px 20px 48px;
    font-size: 17px;
    line-height: 26px;
  }

  .contact-main > *,
  .contact-form,
  .contact-form__field,
  .contact-form__submit,
  .contact-form__result,
  .contact-details__item,
  .contact-brand,
  .contact-brand__logo,
  .contact-brand__name,
  .contact-brand__tagline {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
  }

  .contact-main__title {
    font-size: 44px;
    line-height: 44px;
  }

  .contact-main__intro {
    margin-top: 16px;
    font-size: 20px;
    line-height: 26px;
  }

  .contact-main__form-title {
    margin-top: 48px;
    font-size: 32px;
    line-height: 40px;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }

  .contact-form__input {
    height: 50px;
  }

  .contact-form__input--textarea {
    height: 130px;
  }

  .contact-form__submit {
    align-self: center;
    width: min(100%, 320px);
    height: 46px;
    margin-top: 16px;
  }

  .contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 48px;
  }

  .contact-details__item {
    text-align: left;
  }

  .contact-brand {
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 12px;
    align-items: center;
    margin-top: 48px;
    font-size: 22px;
    line-height: 28px;
  }

  .contact-brand__logo {
    grid-row: span 2;
    width: 60px;
  }

  .contact-brand__tagline {
    white-space: normal;
  }

  .pf-page__grid {
    grid-template-columns: 1fr;
    padding-top: 100px;
  }
}
/* ew-site-design */
:root {
  --ew-color-primary: #0d6efd;
  --ew-color-secondary: #6c757d;
  --ew-color-accent: #198754;
  --ew-nav-bg: #f8f9fa;
  --ew-nav-text: #212529;
  --ew-link-color: #0d6efd;
  --ew-link-hover: #0a58ca;
  --ew-heading-color: #212529;
  --ew-footer-bg: #212529;
  --ew-footer-text: #ffffff;
  --ew-footer-link: #ffffff;
}
.text-ew-primary{color:var(--ew-color-primary)!important}.bg-ew-primary{background-color:var(--ew-color-primary)!important}.border-ew-primary{border-color:var(--ew-color-primary)!important}.text-ew-secondary{color:var(--ew-color-secondary)!important}.bg-ew-secondary{background-color:var(--ew-color-secondary)!important}.border-ew-secondary{border-color:var(--ew-color-secondary)!important}.text-ew-accent{color:var(--ew-color-accent)!important}.bg-ew-accent{background-color:var(--ew-color-accent)!important}.border-ew-accent{border-color:var(--ew-color-accent)!important}hr{border-top:solid 0.25px #0d6efd;opacity:.25;}#ewSiteFooter{background-color:var(--ew-footer-bg);color:var(--ew-footer-text);}#ewSiteFooter a,#ewSiteFooter .nav-link{color:var(--ew-footer-link);}#ewSiteFooter .ew-footer-bottom{border-top:1px solid color-mix(in srgb, var(--ew-footer-text) 18%, transparent);}#ewSiteFooter .ew-footer-nav{gap:.25rem 1rem;flex-wrap:wrap;}
#ewMainNav { background-color: var(--ew-nav-bg) !important; }
#ewMainNav .navbar-brand,#ewMainNav .nav-link { color: var(--ew-nav-text) !important; }
#ewMainNav .navbar-toggler { border-color: color-mix(in srgb, var(--ew-nav-text) 35%, transparent); }
/* /ew-site-design */
/* ew-page-styles:company */
/* /ew-page-styles:company */
/* ew-page-styles:home */
/* /ew-page-styles:home */
/* ew-page-styles:platform-features */
/* /ew-page-styles:platform-features */
/* ew-page-styles:products */
/* /ew-page-styles:products */
/* ew-page-styles:solutions */
/* /ew-page-styles:solutions */