/* =========================================================
   FUTURE OS ENTERPRISE 5.8.1b
   WEBSITE UX & MOTION POLISH
   ========================================================= */

/* Header is a permanent black brand surface in both themes. */
.future-sticky-header,
header[data-sticky-header]{
  position:fixed!important;
  top:0;
  left:0;
  right:0;
  z-index:10000!important;
  background:rgba(5,5,6,.92)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 8px 35px rgba(0,0,0,.18);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.future-sticky-header.is-scrolled,
header[data-sticky-header].is-scrolled{
  background:rgba(5,5,6,.975)!important;
  border-bottom-color:rgba(88,231,214,.14)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.28);
}
.future-sticky-header *,
header[data-sticky-header] *{
  --header-text:#fff;
}
.future-sticky-header a,
.future-sticky-header button:not(.quantum):not(.primary),
header[data-sticky-header] a,
header[data-sticky-header] button:not(.quantum):not(.primary){
  color:rgba(255,255,255,.88)!important;
}
.future-sticky-header a:hover,
header[data-sticky-header] a:hover{
  color:#58E7D6!important;
}
.future-sticky-header .brand,
.future-sticky-header .logo,
.future-sticky-header .brand *,
.future-sticky-header .logo *,
header[data-sticky-header] .brand *,
header[data-sticky-header] .logo *{
  color:#fff!important;
}
.future-sticky-header img,
header[data-sticky-header] img{
  filter:brightness(0) invert(1)!important;
}
.future-sticky-header .quantum,
.future-sticky-header .primary,
header[data-sticky-header] .quantum,
header[data-sticky-header] .primary{
  color:#071114!important;
}
body{
  scroll-padding-top:96px;
}
main,
body > .site-shell,
body > .page{
  /* header occupies the first visual layer */
}

/* Hero remains cinematic/dark regardless of selected site theme. */
.future-theme-locked-hero,
section[data-theme-locked-hero]{
  color:#F5FFFF!important;
  background-color:#010B0F!important;
  color-scheme:dark;
}
html[data-theme="light"] .future-theme-locked-hero,
html[data-theme="light"] section[data-theme-locked-hero]{
  color:#F5FFFF!important;
  background-color:#010B0F!important;
}
.future-theme-locked-hero h1,
.future-theme-locked-hero h2,
.future-theme-locked-hero h3,
section[data-theme-locked-hero] h1,
section[data-theme-locked-hero] h2,
section[data-theme-locked-hero] h3{
  color:#F3FFFF!important;
}
.future-theme-locked-hero p,
.future-theme-locked-hero li,
section[data-theme-locked-hero] p,
section[data-theme-locked-hero] li{
  color:rgba(239,255,255,.78)!important;
}
.future-theme-locked-hero .overline,
.future-theme-locked-hero em,
.future-theme-locked-hero .accent,
section[data-theme-locked-hero] .overline,
section[data-theme-locked-hero] em,
section[data-theme-locked-hero] .accent{
  color:#16D7C7!important;
}
html[data-theme="light"] .future-theme-locked-hero .btn:not(.quantum):not(.primary),
html[data-theme="light"] section[data-theme-locked-hero] .btn:not(.quantum):not(.primary){
  color:#fff!important;
  border-color:rgba(255,255,255,.25)!important;
  background:rgba(255,255,255,.06)!important;
}

/* Compensate fixed header without changing the cinematic hero proportions. */
.future-theme-locked-hero,
section[data-theme-locked-hero]{
  padding-top:max(var(--hero-padding-top,120px),120px)!important;
}

/* Mobile navigation inherits the permanent black surface. */
@media(max-width:900px){
  .future-sticky-header nav,
  header[data-sticky-header] nav{
    background:#050506!important;
    border-color:rgba(255,255,255,.10)!important;
  }
}
@media(max-width:680px){
  body{scroll-padding-top:78px}
  .future-theme-locked-hero,
  section[data-theme-locked-hero]{
    padding-top:100px!important;
  }
}