/* Liquid glass layer, shared by every page. Loaded after the page styles.
   Glass needs something to bend, so the page gets a soft fixed colour wash behind everything. */
:root {
  --lg-fill: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.38));
  --lg-blur: blur(22px) saturate(1.8);
  --lg-rim: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 1px rgb(255 255 255 / 0.4),
            inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 -14px 24px -18px rgb(46 107 255 / 0.22);
  --lg-drop: 0 18px 44px -22px rgb(23 26 46 / 0.32), 0 2px 6px rgb(23 26 46 / 0.05);
  --lg-edge: rgb(255 255 255 / 0.62);
  --lg-sheen: radial-gradient(280px circle at var(--mx, 24%) var(--my, -10%), rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 62%);
  --lg-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ambient colour wash */
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 10% 14%, rgb(46 107 255 / 0.17), transparent 70%),
    radial-gradient(34% 30% at 92% 26%, rgb(255 107 90 / 0.15), transparent 70%),
    radial-gradient(40% 34% at 76% 88%, rgb(255 201 74 / 0.18), transparent 70%),
    radial-gradient(34% 34% at 18% 78%, rgb(46 107 255 / 0.1), transparent 70%);
}

/* ---------- glass surfaces ---------- */
.x-btn--ghost, .x-strip a, .x-tags li, .x-value, .x-site .wl, .fx-show__card figcaption,
.btn.ghost, .card, .faq details, .more a, .dl figure, .status, .wrap .wl {
  background: var(--lg-sheen), var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-rim), var(--lg-drop);
}
.x-btn--ghost:hover, .btn.ghost:hover { background: var(--lg-sheen), var(--lg-fill); border-color: rgb(255 255 255 / 0.9); }
.x-tags li, .status { box-shadow: var(--lg-rim), 0 6px 16px -10px rgb(23 26 46 / 0.3); }
.x-value, .card, .more a, .dl figure { transition: transform 0.5s var(--lg-spring), box-shadow 0.3s; }
.x-value:hover, .card:hover, .dl figure:hover { transform: translateY(-4px); box-shadow: var(--lg-rim), 0 26px 50px -24px rgb(23 26 46 / 0.4); }
.x-tags kbd { background: rgb(255 255 255 / 0.6); }
.wl-form input[type=email], .wl-form select { background-color: rgb(255 255 255 / 0.55); border-color: rgb(23 26 46 / 0.12);
  box-shadow: inset 0 1px 2px rgb(23 26 46 / 0.06); }
.dl figure > div { background: rgb(246 245 242 / 0.6); }
.dl figure > div.dark { background: #171a2e; }

/* dark glass on the navy sections */
.x-prod--dark .x-tags li {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  border-color: rgb(255 255 255 / 0.16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 8px 20px -12px rgb(0 0 0 / 0.6);
}
.x-sheet { background: rgb(23 26 46 / 0.8); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); }

/* ---------- header ---------- */
.x-nav, .nav {
  top: 14px; min-height: 64px; padding: 8px 8px 8px 10px;
  background: var(--lg-sheen), var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-rim), 0 20px 48px -24px rgb(23 26 46 / 0.4), 0 2px 8px rgb(23 26 46 / 0.05);
  transition: box-shadow 0.4s, padding 0.4s var(--lg-spring), background-color 0.3s;
}
.x-nav.is-scrolled, .nav.is-scrolled { box-shadow: var(--lg-rim), 0 24px 56px -22px rgb(23 26 46 / 0.48), 0 2px 8px rgb(23 26 46 / 0.06); }

/* logo: bigger, glossy, a little playful */
.x-brand, .brand { gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.x-brand img, .brand img {
  width: 42px; height: 42px; border-radius: 13px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.7), 0 0 0 4px rgb(46 107 255 / 0.08), 0 8px 18px -8px rgb(23 26 46 / 0.7);
  transition: transform 0.6s var(--lg-spring), box-shadow 0.3s;
}
.x-brand:hover img, .brand:hover img { transform: rotate(-10deg) scale(1.08);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.8), 0 0 0 6px rgb(46 107 255 / 0.14), 0 12px 24px -8px rgb(46 107 255 / 0.6); }
.x-brand span, .brand span { font-size: 18px; }
@media (max-width: 767px) { .x-brand span { display: inline; } } /* links live in the menu on phones, so the name fits */

/* links sit on a glass track; a droplet ("lens") slides to the hovered or current link */
.x-nav__links, .nav ul { position: relative; align-items: center; gap: 2px; isolation: isolate; }
.x-nav__links a, .nav ul a { position: relative; z-index: 1; font-size: 15px; font-weight: 600; padding: 0 16px; }
html.lg-js .x-nav__links a:not(.x-nav__cta):hover, html.lg-js .nav ul a:not(.cta):hover { background: transparent; }
.x-nav__links a.x-nav__cta, .nav ul a.cta {
  margin-left: 6px; padding: 0 20px;
  background: linear-gradient(180deg, #2a2f52, #171a2e);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 8px 18px -8px rgb(23 26 46 / 0.7);
  transition: transform 0.4s var(--lg-spring), box-shadow 0.3s;
}
.x-nav__links a.x-nav__cta:hover, .nav ul a.cta:hover { transform: translateY(-1px) scale(1.03); background: linear-gradient(180deg, #3a63e8, #2e6bff); }
.lg-lens {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.55));
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgb(46 107 255 / 0.12), 0 0 0 1px rgb(23 26 46 / 0.06), 0 6px 16px -6px rgb(23 26 46 / 0.3);
  transition: opacity 0.25s;
}
.lg-lens.is-on { opacity: 1; }
.x-nav__links a[aria-current], .nav ul a[aria-current] { color: #2e6bff; }

@media (prefers-reduced-motion: reduce) {
  .x-value, .card, .more a, .dl figure, .x-brand img, .brand img, .x-nav__cta, .nav ul a.cta { transition: none; }
  .x-value:hover, .card:hover, .dl figure:hover, .x-brand:hover img, .brand:hover img { transform: none; }
}
/* no backdrop-filter: fall back to solid white surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .x-btn--ghost, .x-strip a, .x-tags li, .x-value, .x-site .wl, .btn.ghost, .card, .faq details, .more a, .dl figure, .status, .wrap .wl, .x-nav, .nav { background: #fff; }
}

/* ---------- hero orbit (home) ---------- */
.x-orbit { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s; }
.x-orbit.is-on { opacity: 1; }
.x-hero.is-3d .x-hero__art img { display: none; }
.x-hero.is-3d .x-hero__art { mix-blend-mode: normal; transform: none !important; pointer-events: auto;
  -webkit-mask-image: none; mask-image: none; animation: none; }
.x-hero.is-3d { background: transparent; }
@media (max-width: 859px) {
  .x-hero.is-3d .x-hero__art { width: 100%; max-width: 560px; aspect-ratio: 1 / 0.82; margin: 0 auto 4px; }
}
@media (min-width: 860px) {
  .x-hero.is-3d .x-hero__art { position: absolute; inset: 0; width: auto; height: auto; translate: none; aspect-ratio: auto; z-index: -1; }
}