/*
 * Local Liquid Glass preview — 2026-07-21
 * Progressive enhancement for the global header and primary page tab bars.
 * The original site.css remains the complete no-JS / unsupported-browser fallback.
 */

:root{
  --lg-blue:31,93,131;
  --lg-green:92,157,139;
  --lg-ink:16,47,69;
}

[data-liquid-glass]{
  --lg-pointer-x:50%;
  --lg-pointer-y:15%;
  --lg-shift-x:0px;
  --lg-shift-y:0px;
  --lg-blur:14px;
  --lg-saturation:170%;
  position:relative;
  background:rgba(240,248,250,.075);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturation));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturation));
}

[data-liquid-glass].liquid-glass--refractive{
  -webkit-backdrop-filter:var(--lg-backdrop-filter);
  backdrop-filter:var(--lg-backdrop-filter);
}

/* Stable glass renderer for Safari, iOS WebKit and constrained devices. */
[data-liquid-glass].liquid-glass--fallback{
  background:rgba(245,250,252,.76);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  backdrop-filter:blur(24px) saturate(155%);
}

.site-header .nav[data-liquid-glass="header"].liquid-glass--fallback{
  background:linear-gradient(135deg,rgba(252,254,255,.86),rgba(235,245,248,.76));
  box-shadow:0 7px 8px rgba(var(--lg-ink),.13),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(var(--lg-ink),.10);
}

.liquid-glass-tabs-shell[data-liquid-glass="tabs"].liquid-glass--fallback{
  background:linear-gradient(135deg,rgba(252,254,255,.82),rgba(235,245,248,.70));
  box-shadow:0 7px 8px rgba(var(--lg-ink),.15),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(var(--lg-ink),.08);
}

.liquid-glass--fallback .liquid-glass__visual::before{opacity:.24}
.liquid-glass--fallback .liquid-glass__visual::after{
  border-color:rgba(255,255,255,.78);
  background:none;
  -webkit-mask:none;
  mask:none;
  box-shadow:inset 0 0 0 1px rgba(var(--lg-ink),.045);
}
.liquid-glass--fallback .liquid-glass__sheen{opacity:.42}

[data-liquid-glass] > :not(.liquid-glass__visual){
  position:relative;
  z-index:2;
}

.liquid-glass__visual{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}

.liquid-glass__visual::before,
.liquid-glass__visual::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

/* Moving caustic plus a bright optical rim: these keep the lens legible on pale pages. */
.liquid-glass__visual::before{
  z-index:1;
  left:calc(var(--lg-pointer-x) - 110px);
  top:calc(var(--lg-pointer-y) - 70px);
  width:220px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.48) 0%,rgba(171,225,235,.16) 30%,transparent 68%);
  filter:blur(11px);
  opacity:.58;
  mix-blend-mode:screen;
  transition:left .34s cubic-bezier(.22,1,.36,1),top .34s cubic-bezier(.22,1,.36,1);
}

.liquid-glass__visual::after{
  z-index:2;
  inset:1px;
  border-radius:inherit;
  border:1px solid transparent;
  background:
    linear-gradient(112deg,rgba(255,255,255,.94),rgba(255,255,255,.12) 29%,transparent 48%,rgba(136,213,226,.20) 71%,rgba(255,255,255,.72)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.82;
}

.liquid-glass__warp,
.liquid-glass__tint,
.liquid-glass__sheen{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

.liquid-glass__warp{
  transform:translate3d(var(--lg-shift-x),var(--lg-shift-y),0) scale(1.025);
  background:
    radial-gradient(90% 140% at var(--lg-pointer-x) var(--lg-pointer-y),rgba(255,255,255,.18),transparent 48%),
    linear-gradient(90deg,rgba(92,198,225,.22),transparent 14%,transparent 84%,rgba(255,126,106,.18)),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 24%,transparent 72%,rgba(76,157,192,.075));
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.liquid-glass__tint{
  background:
    radial-gradient(150% 115% at var(--lg-pointer-x) var(--lg-pointer-y),rgba(255,255,255,.18) 0%,rgba(255,255,255,.025) 34%,transparent 58%),
    linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(236,246,249,.055) 48%,rgba(var(--lg-green),.055) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(var(--lg-ink),.13),
    inset 2px 0 0 rgba(91,194,224,.18),
    inset -2px 0 0 rgba(255,126,107,.13);
}

.liquid-glass__sheen{
  inset:1px;
  background:
    linear-gradient(105deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.10) 23%,transparent 42%),
    radial-gradient(58% 110% at var(--lg-pointer-x) -20%,rgba(255,255,255,.58),transparent 70%);
  opacity:.68;
  mix-blend-mode:screen;
}

/* One floating glass body for the complete header; text and logo never receive distortion. */
.site-header.liquid-glass-header-host{
  height:78px;
  padding:7px 0;
  border:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.site-header.liquid-glass-header-host::after{display:none}

.site-header.liquid-glass-header-host::before{
  content:"";
  position:absolute;
  left:50%;
  top:11px;
  width:min(1160px,calc(100% - 62px));
  height:56px;
  border-radius:16px;
  background:
    radial-gradient(ellipse at 13% 48%,rgba(92,157,139,.46) 0 5%,transparent 17%),
    radial-gradient(ellipse at 47% 28%,rgba(58,145,185,.42) 0 4%,transparent 19%),
    radial-gradient(ellipse at 82% 58%,rgba(223,75,50,.30) 0 4%,transparent 17%),
    repeating-linear-gradient(102deg,transparent 0 96px,rgba(31,93,131,.16) 98px 100px,transparent 102px 168px);
  filter:blur(2px);
  opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  transform:translateX(-50%);
  pointer-events:none;
}

/* Pull the first page surface under the sticky lens while keeping its content in place. */
.site-header.liquid-glass-header-host + .liquid-glass-underlay-host{
  margin-top:-78px;
}

.liquid-glass-header-spacer{
  display:block;
  width:100%;
  height:78px;
  pointer-events:none;
}

.site-header .nav[data-liquid-glass="header"]{
  --lg-blur:7px;
  --lg-saturation:190%;
  width:calc(100% - 28px);
  height:64px;
  padding-left:20px;
  padding-right:15px;
  border:0;
  border-radius:20px;
  background:rgba(241,248,250,.055);
  box-shadow:
    0 10px 20px rgba(var(--lg-ink),.14),
    0 2px 5px rgba(var(--lg-ink),.08);
}

/* The glass body stays visible through blur and depth, without drawing a frame
   around the complete navigation bar after a menu interaction. */
.site-header .nav[data-liquid-glass="header"] > .liquid-glass__visual::after{
  border:0;
  background:none;
  -webkit-mask:none;
  mask:none;
  box-shadow:none;
  opacity:0;
}

.site-header .nav[data-liquid-glass="header"] .brand-logo{
  filter:drop-shadow(0 5px 8px rgba(var(--lg-blue),.14));
}

.site-header .nav[data-liquid-glass="header"] .menu a{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  outline:none;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}

/* A filled focus state remains visible to keyboard users without introducing
   the browser-dependent rounded ring reported after cross-page navigation. */
.site-header .nav[data-liquid-glass="header"] .menu a:focus-visible{
  outline:0;
  background:rgba(var(--lg-green),.16);
  box-shadow:none;
}

/*
 * Translated labels commonly wrap to two lines. Their inherited body line-height
 * made the selected surface taller than the 64px glass header. Keep every
 * translated item centered inside the lens, including the narrow desktop edge
 * where one English label can use three lines before the mobile menu takes over.
 */
html[lang^="en"] .site-header .nav[data-liquid-glass="header"] .menu a,
html[lang^="vi"] .site-header .nav[data-liquid-glass="header"] .menu a,
html[lang^="ru"] .site-header .nav[data-liquid-glass="header"] .menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:2px 10px;
  line-height:1.3;
  text-align:center;
}

@media (hover:hover) and (pointer:fine){
  .site-header .nav[data-liquid-glass="header"] .menu a:hover{
    background:rgba(255,255,255,.46);
    box-shadow:none;
    transform:translateY(-1px);
  }
}

.site-header .nav[data-liquid-glass="header"] .menu a.active{
  background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(var(--lg-blue),.16));
  box-shadow:none;
}

/*
 * Primary page tabs use two independent layers:
 * - the outer shell owns the glass and never scrolls;
 * - the existing .solution-tabs element remains the horizontal scroller.
 * Keeping the optical layer outside the scroller prevents its rounded edge from
 * drifting across tab labels after scrollIntoView() centers an active tab.
 */
.liquid-glass-tabs-shell{
  position:relative;
  isolation:isolate;
  display:inline-block;
  width:max-content;
  max-width:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.86);
  outline:1px solid rgba(var(--lg-blue),.12);
  border-radius:999px;
  vertical-align:top;
  pointer-events:auto;
}

.liquid-glass-tabs-shell > .solution-tabs{
  width:max-content;
  max-width:100%;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* The fixed shell refracts; labels and active-state contrast stay crisp. */
.liquid-glass-tabs-shell[data-liquid-glass="tabs"]{
  --lg-blur:7px;
  --lg-saturation:195%;
  border-color:rgba(255,255,255,.88);
  outline-color:rgba(var(--lg-blue),.13);
  background:rgba(241,248,250,.045);
  box-shadow:
    0 11px 22px rgba(var(--lg-ink),.17),
    0 2px 5px rgba(var(--lg-ink),.08),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(var(--lg-ink),.08);
}

.liquid-glass-tabs-shell[data-liquid-glass="tabs"] > .solution-tabs::before,
.liquid-glass-tabs-shell[data-liquid-glass="tabs"] > .solution-tabs::after{display:none}

.liquid-glass-tabs-shell[data-liquid-glass="tabs"] .solution-tab{
  border-color:rgba(255,255,255,.48);
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(var(--lg-ink),.04);
}

.liquid-glass-tabs-shell[data-liquid-glass="tabs"] .solution-tab:hover{
  border-color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.42);
  box-shadow:0 8px 18px rgba(var(--lg-ink),.10),inset 0 1px 0 rgba(255,255,255,.94);
}

.liquid-glass-tabs-shell[data-liquid-glass="tabs"] .solution-tab.active{
  border-color:rgba(255,255,255,.56);
  background:linear-gradient(180deg,rgba(45,120,159,.86),rgba(22,69,101,.90));
  box-shadow:0 10px 20px rgba(var(--lg-blue),.30),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(8,36,54,.24);
}

/* If full refraction is not appropriate, keep the same composition using a stable blur. */
.liquid-glass--fallback .liquid-glass__warp{
  transform:none;
}

.liquid-glass-webkit-fallback .site-header.liquid-glass-header-host::before{
  opacity:.24;
  filter:blur(8px);
}

/* Sticky wrappers must not place an opaque backdrop between the lens and page content. */
.liquid-glass-ready .gateway-scene-tabs,
.liquid-glass-ready .software-product-nav{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/*
 * The translated desktop navigation reaches its content limit slightly before
 * the site's general 1080px breakpoint (Russian is the widest case). Switch only
 * the translated headers to the existing compact menu in that narrow interval.
 */
@media (min-width:1081px) and (max-width:1120px){
  html[lang^="en"] .site-header .menu,
  html[lang^="vi"] .site-header .menu,
  html[lang^="ru"] .site-header .menu{
    display:none;
  }

  html[lang^="en"] .site-header .nav,
  html[lang^="vi"] .site-header .nav,
  html[lang^="ru"] .site-header .nav{
    justify-content:space-between;
  }

  html[lang^="en"] .site-header .nav .nav-toggle,
  html[lang^="vi"] .site-header .nav .nav-toggle,
  html[lang^="ru"] .site-header .nav .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    height:44px;
    margin:0;
    padding:0 14px;
    border:1px solid var(--header-glass-line);
    border-radius:7px;
    background:rgba(255,255,255,.62);
    color:var(--blue-800);
    font-family:inherit;
    font-size:15px;
    font-weight:800;
    line-height:1;
  }

  html[lang^="en"] .site-header .language-switcher summary,
  html[lang^="vi"] .site-header .language-switcher summary,
  html[lang^="ru"] .site-header .language-switcher summary{
    min-height:40px;
  }

  html[lang^="en"] body.nav-open .site-header .nav[data-liquid-glass="header"] .menu,
  html[lang^="vi"] body.nav-open .site-header .nav[data-liquid-glass="header"] .menu,
  html[lang^="ru"] body.nav-open .site-header .nav[data-liquid-glass="header"] .menu{
    display:flex;
    position:absolute;
    left:-1px;
    right:-1px;
    top:70px;
    overflow:hidden;
    padding:14px 28px;
    border:1px solid rgba(255,255,255,.84);
    border-radius:16px;
    background:rgba(247,250,252,.92);
    box-shadow:0 18px 32px rgba(var(--lg-ink),.16),inset 0 1px 0 rgba(255,255,255,.9);
    flex-direction:column;
    align-items:stretch;
  }

  html[lang^="en"] body.nav-open .site-header .menu a,
  html[lang^="vi"] body.nav-open .site-header .menu a,
  html[lang^="ru"] body.nav-open .site-header .menu a{
    min-height:44px;
    padding:10px;
    justify-content:flex-start;
    text-align:left;
  }
}

@media(max-width:1080px){
  .site-header .nav[data-liquid-glass="header"]{
    width:calc(100% - 24px);
  }

  .site-header .nav .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    height:44px;
    margin:0;
    padding:0 14px;
    font-family:inherit;
    font-size:15px;
    line-height:1;
    text-align:center;
    vertical-align:middle;
  }

  body.nav-open .site-header .nav[data-liquid-glass="header"] .menu{
    left:-1px;
    right:-1px;
    top:70px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.84);
    border-radius:16px;
    background:rgba(247,250,252,.92);
    box-shadow:0 18px 32px rgba(var(--lg-ink),.16),inset 0 1px 0 rgba(255,255,255,.9);
  }
}

@media(max-width:720px){
  .site-header.liquid-glass-header-host::before{display:none}
  .site-header .nav[data-liquid-glass="header"]{
    width:calc(100% - 20px);
    padding-left:14px;
    padding-right:10px;
    border-radius:17px;
  }

  .liquid-glass-tabs-shell[data-liquid-glass="tabs"]{
    box-shadow:
      0 6px 8px rgba(var(--lg-ink),.13),
      0 2px 4px rgba(var(--lg-ink),.06),
      inset 0 1px 0 rgba(255,255,255,.94),
      inset 1px 0 0 rgba(91,194,224,.16),
      inset -1px 0 0 rgba(255,126,107,.11);
  }

  /*
   * The outer shell is the glass surface on phones. Inactive tabs stay clear so
   * their individual pill rims do not read as overlapping glass lenses.
   */
  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .solution-tab:not(.active){
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }

  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .solution-tab:not(.active):hover{
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    transform:none;
  }

  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .solution-tab.active{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -1px 0 rgba(8,36,54,.24);
  }

  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .liquid-glass__visual::before{
    display:none;
  }

  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .liquid-glass__warp,
  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .liquid-glass__tint,
  .liquid-glass-tabs-shell[data-liquid-glass="tabs"] .liquid-glass__sheen{
    display:none;
  }

  .liquid-glass__sheen{opacity:.56}
  .liquid-glass__visual::before{opacity:.36}
}

@media(prefers-reduced-motion:reduce){
  .liquid-glass__warp{transition:none;transform:none}
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header .nav[data-liquid-glass="header"],
  .liquid-glass-tabs-shell[data-liquid-glass="tabs"]{
    background:rgba(248,250,252,.96);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .liquid-glass__warp{display:none}
}