@import url('/nav-submenus-base.css?v=20260919c');

/* Final homepage overrides — loaded after site.css. */

/* --------------------------------------------------------------------------
   Showcase desktop: restore the last known-good full-section background.
   -------------------------------------------------------------------------- */
#main-page section#showcase.showcase.showcase-ui{
  --dfd-showcase-desk:url('/assets/showcase-desk-section-desktop-v2.webp?v=20260918h');
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background-color:#f7f2ec!important;
  background-image:var(--dfd-showcase-desk)!important;
  background-size:cover!important;
  background-position:center 58%!important;
  background-repeat:no-repeat!important;
}
#main-page section#showcase.showcase.showcase-ui::before{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:var(--dfd-showcase-desk) center 58% / cover no-repeat!important;
  opacity:1!important;
}
#main-page section#showcase.showcase.showcase-ui::after{
  display:none!important;
  content:none!important;
}
#main-page section#showcase.showcase.showcase-ui>.wrap{
  position:relative!important;
  z-index:2!important;
  background:transparent!important;
}

/* All inner showcase wrappers stay transparent. */
#main-page section#showcase.showcase.showcase-ui .showcase-head,#main-page section#showcase.showcase.showcase-ui .showcase-toolbar-ui,#main-page section#showcase.showcase.showcase-ui .showcase-controls-ui,#main-page section#showcase.showcase.showcase-ui .device-stage,#main-page section#showcase.showcase.showcase-ui .desktop-preview,#main-page section#showcase.showcase.showcase-ui .mobile-preview,#main-page section#showcase.showcase.showcase-ui .preview-info,#main-page section#showcase.showcase.showcase-ui .preview-info-ui{
  background:transparent!important;
  background-image:none!important;
}
#main-page section#showcase.showcase.showcase-ui .device-stage{
  position:relative!important;
  isolation:auto!important;
  max-width:1080px!important;
  margin:12px auto 0!important;
  padding:18px 0 44px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#main-page section#showcase.showcase.showcase-ui .device-stage::before,#main-page section#showcase.showcase.showcase-ui .device-stage::after{
  display:none!important;
  content:none!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Desktop controls: preserve the contrast version that worked on the photo. */
@media(min-width:761px){
  #main-page section#showcase.showcase.showcase-ui .showcase-mobile-desk-ui{display:none!important}
  #main-page section#showcase.showcase.showcase-ui .industry-tab{
    background:rgba(11,20,36,.90)!important;
    color:#f8fbff!important;
    border:1px solid rgba(11,20,36,.18)!important;
    box-shadow:0 8px 24px rgba(11,20,36,.12)!important;
  }
  #main-page section#showcase.showcase.showcase-ui .industry-tab:hover,#main-page section#showcase.showcase.showcase-ui .industry-tab:focus-visible{
    background:#132a46!important;
    color:#fff!important;
  }
  #main-page section#showcase.showcase.showcase-ui .industry-tab.active{
    background:#8ab9ff!important;
    color:#0b1424!important;
    border-color:#6fa7f4!important;
    box-shadow:0 10px 28px rgba(48,101,173,.20)!important;
  }
}

/* Note stays readable on the photograph. */
#main-page section#showcase.showcase.showcase-ui .showcase-only-note-ui{
  color:#25384f!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(37,56,79,.14)!important;
  border-radius:12px!important;
  padding:10px 14px!important;
  box-shadow:0 8px 24px rgba(11,20,36,.08)!important;
}
#main-page section#showcase.showcase.showcase-ui .showcase-only-note-ui strong{color:#0b1424!important}

/* --------------------------------------------------------------------------
   Mobile showcase: do NOT stretch a portrait photo across the entire tall
   section. A real sticky image element acts as the background for one phone
   viewport at a time while the showcase content scrolls above it.
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  /*
   * Normal page scrolling only: no sticky/fixed backdrop and no JS tracking.
   * The desk photo scrolls naturally with the showcase section.
   */
  #main-page section#showcase.showcase.showcase-ui{
    overflow:hidden!important;
    background-color:#f7f2ec!important;
    background-image:url('/assets/showcase-desk-section-desktop-v2.webp?v=20260918h')!important;
    background-size:auto 100svh!important;
    background-position:left top!important;
    background-repeat:repeat-y!important;
  }

  /* Soft veil for readable text while keeping the desk photo clearly visible. */
  #main-page section#showcase.showcase.showcase-ui::before{
    display:none!important;
    content:none!important;
    background:none!important;
  }
  #main-page section#showcase.showcase.showcase-ui::after{
    content:''!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:rgba(255,255,255,.46)!important;
  }

  /* The old moving image layer is no longer used. */
  #main-page section#showcase.showcase.showcase-ui>.showcase-mobile-desk-ui{
    display:none!important;
  }

  #main-page section#showcase.showcase.showcase-ui>.wrap{
    position:relative!important;
    z-index:2!important;
  }

  /* Stronger text contrast on top of the photo. */
  #main-page section#showcase.showcase.showcase-ui .showcase-head h2{
    color:#0b1424!important;
  }
  #main-page section#showcase.showcase.showcase-ui .showcase-head .showcase-demo-kicker-ui{
    color:#294764!important;
    text-shadow:0 1px 0 rgba(255,255,255,.6)!important;
  }
  #main-page section#showcase.showcase.showcase-ui .showcase-head .showcase-demo-copy-ui{
    color:#2d4158!important;
    text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
  }

  /* Controls stay readable against both the light wall and the desk details. */
  #main-page section#showcase.showcase.showcase-ui .industry-tab{
    background:rgba(255,255,255,.78)!important;
    color:#24384f!important;
    border:1px solid rgba(36,56,79,.26)!important;
    box-shadow:0 5px 18px rgba(11,20,36,.07)!important;
  }
  #main-page section#showcase.showcase.showcase-ui .industry-tab.active{
    background:#0f2440!important;
    color:#fff!important;
    border-color:#0f2440!important;
  }
  #main-page section#showcase.showcase.showcase-ui .device-switch{
    background:rgba(255,255,255,.72)!important;
    border-radius:12px!important;
    padding:5px!important;
  }
  #main-page section#showcase.showcase.showcase-ui .device-stage{
    padding:14px 0 30px!important;
  }
}

/* Mobile hero: keep our photo close and force the desktop accent colour. */

/* Mobile hero: keep our photo materially closer to the headline block. */



/* --------------------------------------------------------------------------
   USP flip circles — interaction signal only.
   Desktop: hover flips automatically. Touch: tap flips and two dots show state.
   -------------------------------------------------------------------------- */
#main-page .usp-ui .usp-more-ui{
  display:none!important;
}

#main-page .usp-ui .usp-circle-ui{
  transition:transform .55s ease-in-out,box-shadow .55s ease-in-out!important;
}

#main-page .usp-ui .usp-flip-ui{
  transform:rotateY(0deg)!important;
  transform-style:preserve-3d!important;
  transition:transform .55s ease-in-out!important;
}

#main-page .usp-ui .usp-face-ui{
  opacity:1!important;
  visibility:visible!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

#main-page .usp-ui .usp-front-ui{
  opacity:1!important;
  visibility:visible!important;
  transform:rotateY(0deg)!important;
}

#main-page .usp-ui .usp-back-ui{
  opacity:1!important;
  visibility:visible!important;
  transform:rotateY(180deg)!important;
  background:linear-gradient(145deg,#2a5b8f,#193d67)!important;
  color:#fff!important;
  border-color:#78b5ef!important;
}

#main-page .usp-ui .usp-back-ui p{
  color:#edf5ff!important;
}

#main-page .usp-ui .usp-circle-ui.is-open .usp-front-ui,#main-page .usp-ui .usp-circle-ui.is-open .usp-back-ui{
  opacity:1!important;
  visibility:visible!important;
}

#main-page .usp-ui .usp-circle-ui.is-open .usp-flip-ui{
  transform:rotateY(180deg)!important;
}

/* No page-state dots unless the primary input is touch/coarse. */
#main-page .usp-ui .usp-circle-ui::before,#main-page .usp-ui .usp-circle-ui::after{
  display:none!important;
  content:none!important;
}

@media (hover:hover) and (pointer:fine){
  #main-page .usp-ui .usp-circle-ui{
    cursor:pointer!important;
  }

  #main-page .usp-ui .usp-circle-ui:hover{
    transform:scale(1.03)!important;
    border-color:inherit!important;
    box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 18px rgba(64,139,225,.10)!important;
  }

  #main-page .usp-ui .usp-circle-ui:hover .usp-flip-ui{
    transform:rotateY(180deg)!important;
    filter:none!important;
  }

  /* Preserve the existing front-side colours while hovering. */
  #main-page .usp-ui .usp-circle-ui:hover .usp-front-ui{
    border-color:rgba(108,177,255,.64)!important;
    background:radial-gradient(circle at 44% 30%,#254f83 0%,#17385f 55%,#10243e 100%)!important;
    box-shadow:0 15px 34px rgba(0,0,0,.16),inset 0 0 30px rgba(100,168,245,.08)!important;
  }
}

@media (hover:none), (pointer:coarse){
  #main-page .usp-ui .usp-circle-ui{
    cursor:pointer!important;
  }

  #main-page .usp-ui .usp-circle-ui::before,#main-page .usp-ui .usp-circle-ui::after{
    content:''!important;
    display:block!important;
    position:absolute!important;
    bottom:10%!important;
    z-index:12!important;
    border-radius:999px!important;
    pointer-events:none!important;
    transition:width .2s ease, height .2s ease, opacity .2s ease, background .2s ease!important;
  }

  #main-page .usp-ui .usp-circle-ui::before{
    left:calc(50% - 10px)!important;
    width:7px!important;
    height:7px!important;
    background:#dceeff!important;
    opacity:1!important;
  }

  #main-page .usp-ui .usp-circle-ui::after{
    left:calc(50% + 4px)!important;
    width:5px!important;
    height:5px!important;
    background:#8cb8e7!important;
    opacity:.72!important;
  }

  #main-page .usp-ui .usp-circle-ui.is-open::before{
    width:5px!important;
    height:5px!important;
    background:#8cb8e7!important;
    opacity:.72!important;
  }

  #main-page .usp-ui .usp-circle-ui.is-open::after{
    width:7px!important;
    height:7px!important;
    background:#dceeff!important;
    opacity:1!important;
  }
}

#main-page .usp-ui .usp-circle-ui:focus-visible{
  outline:2px solid #9dccff!important;
  outline-offset:4px!important;
}

@media(prefers-reduced-motion:reduce){
  #main-page .usp-ui .usp-circle-ui,#main-page .usp-ui .usp-flip-ui,#main-page .usp-ui .usp-circle-ui::before,#main-page .usp-ui .usp-circle-ui::after{
    transition:none!important;
  }
}


/* USP touch rendering + concise back-side copy sizing.
   Mobile uses a cross-fade instead of 3D rotation to avoid mirrored text on
   mobile browsers. Desktop keeps the hover flip. */
@media (hover:none), (pointer:coarse){
  #main-page .usp-ui .usp-flip-ui,#main-page .usp-ui .usp-circle-ui.is-open .usp-flip-ui{
    transform:none!important;
    transform-style:flat!important;
  }

  #main-page .usp-ui .usp-face-ui{
    transform:none!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    transition:opacity .28s ease-in-out,visibility .28s ease-in-out!important;
  }

  #main-page .usp-ui .usp-front-ui{
    opacity:1!important;
    visibility:visible!important;
  }

  #main-page .usp-ui .usp-back-ui{
    opacity:0!important;
    visibility:hidden!important;
  }

  #main-page .usp-ui .usp-circle-ui.is-open .usp-front-ui{
    opacity:0!important;
    visibility:hidden!important;
  }

  #main-page .usp-ui .usp-circle-ui.is-open .usp-back-ui{
    opacity:1!important;
    visibility:visible!important;
  }

  #main-page .usp-ui .usp-back-ui p{
    max-width:125px!important;
    font-size:.62rem!important;
    line-height:1.36!important;
    font-weight:400!important;
    margin:0 auto!important;
  }
}

@media (hover:hover) and (pointer:fine){
  #main-page .usp-ui .usp-back-ui p{
    max-width:146px!important;
    font-size:.68rem!important;
    line-height:1.38!important;
    font-weight:400!important;
    margin:0 auto!important;
  }
}