/* Soft viewport edges sit below the navigation and electrical effects. */
.scroll-fade {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
.scroll-fade--top {
  top: 0;
  height: 164px;
  background: linear-gradient(to bottom, #ffffffbf 0%, #ffffff99 55%, #ffffff2e 82%, #ffffff00 100%);
}
.scroll-fade--bottom {
  bottom: 0;
  height: 88px;
  background: linear-gradient(to top, #ffffffb3 0%, #ffffff52 38%, #ffffff00 100%);
}
@media (max-width: 800px) {
  .scroll-fade--top { height: 138px; }
  .scroll-fade--bottom { height: 60px; }
}
@media (forced-colors: active), print {
  .scroll-fade { display: none; }
}
/* A stable outer header keeps the page still as the navigation becomes a floating bar. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 92px;
  min-height: 92px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  width: 100%;
  min-height: 92px;
  margin-inline: auto;
  padding: 19px max(5.5%, calc((100vw - 1248px) / 2));
  border: 1px solid transparent;
  border-bottom-color: #e0e9f1;
  background: #fffffff5;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
  transition: width .32s ease, min-height .32s ease, padding .32s ease,
    border-radius .32s ease, box-shadow .32s ease, background .32s ease;
}
.header.is-floating .header-inner {
  width: min(1248px, calc(100% - 32px));
  min-height: 70px;
  padding: 12px 24px;
  border-color: #dce8f0d9;
  border-radius: 18px;
  background: #ffffffed;
  box-shadow: 0 10px 35px #0b35521a, 0 2px 5px #0b355208;
}
.header .brand-logo { transition: width .32s ease; }
.header.is-floating .brand-logo { width: 190px; }
.header nav > a:not(.nav-contact) { position: relative; }
.header nav > a:not(.nav-contact)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: #009cde;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.header nav > a[aria-current="location"] { color: #006fc4; }
.header nav > a:not(.nav-contact):is(:hover, [aria-current="location"])::after { transform: scaleX(1); }
.header nav .nav-contact[aria-current="location"] { color: white; background: #005faa; }
.header .nav-contact { transition: background .2s ease, box-shadow .2s ease; }
.header .nav-contact:hover { box-shadow: 0 5px 16px #006fc425; }
.skip { z-index: 60; }
html { scroll-padding-top: 104px; }
.solution, .platforms article, .system-options button {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.solution-bottom > span, .text-link > span, .button > span, .nav-contact > span {
  display: inline-block;
  transition: transform .22s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .solution:hover, .platforms article:hover { transform: translateY(-5px); border-color: #acd8ee; box-shadow: 0 18px 38px #10345412; }
  .system-options button:hover { transform: translateX(3px); border-color: #7ec6e6; }
  .solution:hover .solution-bottom > span, .text-link:hover > span { transform: translateX(4px); }
  .button:hover > span, .nav-contact:hover > span { transform: translate(2px, -2px); }
  .conversation-suggestion:hover::after { transform: translate(2px, -2px); }
}
.conversation-suggestion::after { transition: transform .22s ease; }
.map-line { position: relative; overflow: hidden; }
.map-line::after {
  content: '';
  position: absolute;
  width: 16px;
  top: 0;
  bottom: 0;
  left: -16px;
  background: #fff;
  box-shadow: 0 0 8px #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .integration-visual.has-arrived .map-line::after { animation: connection-signal 1.25s ease-in-out 2; }
  .integration-visual.has-arrived .map-line:nth-of-type(4)::after { animation-delay: .3s; }
  .voice-visual.has-arrived .wave i { animation: voice-wave 1.2s ease-in-out 2; animation-delay: var(--wave-delay, 0ms); transform-origin: center; }
}
@keyframes connection-signal { from { left: -16px; } to { left: 100%; } }
@keyframes voice-wave { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(.42); } 65% { transform: scaleY(.85); } }
@media (max-width: 1100px) {
  .header-inner { gap: 20px; }
  .header.is-floating .brand-logo { width: 175px; }
  .header.is-floating nav { gap: 16px; }
}
@media (max-width: 1200px) {
  .header { height: 88px; min-height: 88px; }
  .header-inner { min-height: 88px; padding: 18px 6%; }
  .header.is-floating .header-inner { width: calc(100% - 24px); min-height: 66px; padding: 12px 17px; border-radius: 16px; }
  .header.is-floating .brand-logo { width: 175px; }
  .menu-toggle { display: flex; align-items: center; gap: 14px; padding: 10px 0 10px 10px; min-height: 44px; background: none; border: 0; color: var(--ink); font-size: 14px; cursor: pointer; }
  .header nav, .header.is-floating nav {
    display: none;
    position: absolute;
    flex-direction: column;
    align-items: stretch;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    gap: 0;
    padding: 12px 24px 22px;
    border: 1px solid #dce8f0;
    border-radius: 16px;
    box-shadow: 0 16px 30px #0b35521a;
    background: #fff;
    max-height: calc(100dvh - 115px);
    overflow: auto;
  }
  .header nav.open { display: flex; }
  .header nav > a { padding: 15px 0; font-size: 16px; }
  .header .nav-contact { margin-top: 10px; padding: 15px; justify-content: space-between; }
  .header nav > a:not(.nav-contact)::after { left: 0; right: auto; bottom: 8px; width: 24px; }
  html { scroll-padding-top: 98px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}