/* ==========================================================================
   ITBS - IT Business Solutions
   World: cool white ground under one continuous field of the four :itbs
   logo-dot blues, frosted white glass lit from a single top-left source,
   1px circuit traces with nodes and travelling data pulses over a faint
   blueprint grid.
   The glass is a web approximation (backdrop-filter, layered borders and
   highlights), not an official Apple Liquid Glass implementation.
   Shape rule: controls are full pills; cards 40px (28px under 640px);
   media nested in a card uses the card radius minus its inset.
   ========================================================================== */

/* Geist, SIL Open Font License 1.1 (see assets/fonts/OFL.txt) */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ground and ink */
  --bg: #f3f6fb;
  --ink: #0b1d38;
  --ink-2: #33496a;
  --ink-3: #5a6e8c;
  --line: rgb(11 29 56 / 0.09);

  /* brand: logo blue, overlay gradient ends, the four logo dots */
  --brand: #0054a4;
  --navy: #033a7e;
  --sky: #02acde;
  --dot-1: #0054a4;
  --dot-2: #2878c8;
  --dot-3: #4898e4;
  --dot-4: #78bcfc;
  --dots: linear-gradient(90deg, var(--dot-1), var(--dot-2) 38%, var(--dot-3) 68%, var(--dot-4));

  /* glass: one light source, top-left */
  --glass-fill:
    radial-gradient(130% 90% at 0% 0%, rgb(255 255 255 / 0.55), transparent 55%),
    linear-gradient(162deg, rgb(255 255 255 / 0.8) 0%, rgb(255 255 255 / 0.56) 50%, rgb(255 255 255 / 0.64) 100%);
  --glass-blur: blur(26px) saturate(170%);
  --glass-edge: rgb(255 255 255 / 0.78);
  --glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 1px 0 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(3 58 126 / 0.05),
    0 1px 2px rgb(3 58 126 / 0.06),
    0 20px 50px -22px rgb(3 58 126 / 0.3);
  --navy-fill: linear-gradient(180deg, #19355f 0%, var(--ink) 100%);
  --navy-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 12px 26px -10px rgb(3 58 126 / 0.7);

  /* shape */
  --r-xl: 40px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* motion: long, soft decelerations; product cards ease in gently, then land softly */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-travel: cubic-bezier(0.33, 0, 0.2, 1);

  /* layout */
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1200px;
  /* header: corner chrome, not a bar */
  --nav-top: 16px;
  --nav-h: 48px;
  --nav-inset: 14px;
  --nav-max: 1520px;
  --logo-h: 34px;
  /* how much of the product stage the first viewport shows: a band on wide
     screens, more on tall ones, where a band reads as nothing (user steer:
     the cards show a little at the bottom of every screen) */
  --stage-peek: clamp(96px, 22vh, 260px);
  --stage-side: clamp(20px, 7vw, 104px);
  --card-w: min(1120px, 100vw - 2 * var(--stage-side));
  --side-scale: 0.86;
  --peek: calc(7% + 88px);
}
@media (orientation: portrait) {
  :root {
    --stage-peek: clamp(150px, 27vh, 380px);
  }
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  /* no browser tap box on links and buttons (user steer, 2026-10-01); each
     control answers a tap with its own state, and keyboard focus keeps its ring */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 40px);
  scrollbar-color: rgb(0 84 164 / 0.32) transparent;
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--brand);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgb(72 152 228 / 0.28);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(0 84 164 / 0.28);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(0 84 164 / 0.45);
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: 16px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 550;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.35s var(--ease);
}
.skip-link:focus {
  transform: none;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

/* ---------- the continuous light field ---------- */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: var(--o);
}
.aurora span:nth-child(1) { --s: 74vmax; --x: 10%; --y: 6%; --c: var(--dot-4); --o: 0.5; }
.aurora span:nth-child(2) { --s: 58vmax; --x: 94%; --y: 20%; --c: var(--dot-3); --o: 0.3; }
.aurora span:nth-child(3) { --s: 66vmax; --x: 82%; --y: 96%; --c: var(--dot-2); --o: 0.2; }
.aurora span:nth-child(4) { --s: 54vmax; --x: 4%; --y: 84%; --c: var(--sky); --o: 0.16; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .aurora span {
      animation: drift-a linear both;
      animation-timeline: scroll(root);
    }
    .aurora span:nth-child(even) {
      animation-name: drift-b;
    }
  }
}
@keyframes drift-a {
  to { transform: translate(9vw, 12vh) scale(1.08); }
}
@keyframes drift-b {
  to { transform: translate(-11vw, -10vh) scale(0.94); }
}

/* ---------- glass material ---------- */

.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}

/* ---------- buttons ---------- */

.btn {
  --h: 54px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--h);
  padding: 0 9px 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.btn-primary {
  color: #fff;
  background: var(--navy-fill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 2px 4px rgb(11 29 56 / 0.16),
    0 12px 28px -12px rgb(3 58 126 / 0.7);
}
/* the logo-dot ring from the reference CTA */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--dot-4), var(--dot-2) 42%, var(--dot-3) 70%, var(--dot-4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 2px 4px rgb(11 29 56 / 0.16),
    0 18px 36px -14px rgb(3 58 126 / 0.78);
}
.btn-primary:hover::before {
  opacity: 1;
}
.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.12s;
}
.btn-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  transition: transform 0.6s var(--ease), background-color 0.3s ease;
}
.btn-icon .icon {
  width: 18px;
  height: 18px;
}
.btn:hover .btn-icon {
  transform: translateX(2px);
  background: rgb(255 255 255 / 0.2);
}
/* ---------- navigation ----------
   Corner chrome, not a bar: the logo top-left and a small stack of equal
   links top-right, straight on the ground. Once the page scrolls, the links
   go out of focus and fold up into a glass disc of logo dots, and the logo
   takes a glass capsule so it reads over anything. The disc opens the same
   links on a glass sheet. States: .is-compact (scrolled), .is-open (sheet). */

.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

.site-header {
  position: absolute;
  z-index: 40;
  top: var(--nav-top);
  left: 0;
  right: 0;
  pointer-events: none;
}
.site-header.is-live {
  position: fixed;
}
.nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--nav-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* the logo stays where it is; the capsule condenses around it */
.nav-logo {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--nav-inset);
  border-radius: var(--r-pill);
}
.nav-logo img {
  width: auto;
  height: var(--logo-h);
}
.nav-logo::before,
.nav-links::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--glass-edge);
  border-radius: inherit;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  pointer-events: none;
}
.nav-logo::before {
  transition: opacity 0.45s ease;
}
.is-compact .nav-logo::before {
  opacity: 1;
  transition: opacity 0.6s ease 0.1s;
}

.nav-menu {
  position: relative;
  flex: none;
}

/* the links: all the same, each with the same arrow */
.nav-links {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: grid;
  margin: 0;
  padding: calc(var(--nav-h) / 2 - 13px) var(--nav-inset) calc(var(--nav-h) / 2 - 13px) calc(var(--nav-inset) + 10px);
  border-radius: var(--r-lg);
  list-style: none;
  transition: translate 0.8s var(--ease), visibility 0s;
}
.nav-links li {
  display: flex;
  justify-content: flex-end;
  transition-property: opacity, filter, translate;
  transition-duration: 0.6s, 0.8s, 0.9s;
  transition-timing-function: ease, var(--ease), var(--ease);
  transition-delay: calc(0.06s + var(--i) * 45ms);
}
.nav-links a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.nav-links .icon {
  width: 12px;
  height: 12px;
  color: var(--ink-3);
  transition: translate 0.6s var(--ease), color 0.4s ease;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover .icon {
  color: var(--ink);
  translate: 2px -2px;
}

/* folded: out of focus, drawn up toward the disc, bottom link first */
.is-compact .nav-links {
  visibility: hidden;
  transition: translate 0s 0.5s, visibility 0s 0.5s;
}
.is-compact .nav-links li {
  opacity: 0;
  filter: blur(6px);
  translate: 8px calc(var(--i) * -12px - 4px);
  transition-duration: 0.3s, 0.4s, 0.45s;
  transition-timing-function: ease, ease, var(--ease);
  transition-delay: calc((4 - var(--i)) * 28ms);
}

/* opened: the same stack, unrolled on a glass sheet under the disc */
.nav-links::before {
  scale: 0.96;
  transform-origin: 100% 0;
  transition: opacity 0.25s ease, scale 0.3s ease;
}
.is-compact.is-open .nav-links {
  visibility: visible;
  translate: 0 calc(var(--nav-h) + 8px);
  transition: translate 0s, visibility 0s;
}
.is-compact.is-open .nav-links::before {
  opacity: 1;
  scale: 1;
  transition: opacity 0.35s ease, scale 0.7s var(--ease);
}
.is-compact.is-open .nav-links li {
  opacity: 1;
  filter: none;
  translate: 0 0;
  transition-duration: 0.5s, 0.6s, 0.7s;
  transition-timing-function: ease, var(--ease), var(--ease);
  transition-delay: calc(0.04s + var(--i) * 35ms);
}

/* the disc: three logo dots; hover stretches them into a menu glyph,
   open turns them into a close mark */
.nav-toggle {
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--nav-h);
  height: var(--nav-h);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  scale: 0.7;
  filter: blur(6px);
  transition: opacity 0.3s ease, scale 0.4s var(--ease), filter 0.35s ease, visibility 0s 0.4s;
}
.is-compact .nav-toggle {
  visibility: visible;
  opacity: 1;
  scale: 1;
  filter: none;
  transition: opacity 0.5s ease 0.14s, scale 0.9s var(--ease) 0.14s, filter 0.7s var(--ease) 0.14s, visibility 0s;
}
.is-compact .nav-toggle:active {
  scale: 0.94;
  transition: scale 0.12s ease;
}
.nav-toggle-mark {
  position: relative;
  width: 20px;
  height: 20px;
}
/* each mark is centred by its own translate, so it stays centred while it
   stretches; the 4px dot growing into a 16px line is a deliberate size
   transition, like the product tab's marker */
.nav-toggle-mark i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background-color: var(--c);
  translate: -50% -50%;
  scale: 0;
  transition-property: width, height, translate, rotate, background-color, opacity, scale;
  transition-duration: 0.55s, 0.55s, 0.55s, 0.55s, 0.3s, 0.3s, 0.25s;
  transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), ease, ease, ease;
}
.nav-toggle-mark i:nth-child(1) {
  --c: var(--dot-1);
  translate: -50% calc(-50% - 6px);
}
.nav-toggle-mark i:nth-child(2) {
  --c: var(--dot-2);
}
.nav-toggle-mark i:nth-child(3) {
  --c: var(--dot-3);
  translate: -50% calc(-50% + 6px);
}
/* the dots arrive one by one as the links fold in */
.is-compact .nav-toggle-mark i {
  scale: 1;
  transition-duration: 0.55s, 0.55s, 0.55s, 0.55s, 0.3s, 0.3s, 0.8s;
  transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), ease, ease, var(--ease);
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, calc(0.3s + var(--n) * 70ms);
}
.nav-toggle[aria-expanded="false"]:focus-visible .nav-toggle-mark i {
  width: 16px;
  height: 2px;
}
.nav-toggle[aria-expanded="false"]:focus-visible .nav-toggle-mark i:nth-child(1) {
  translate: -50% calc(-50% - 5px);
}
.nav-toggle[aria-expanded="false"]:focus-visible .nav-toggle-mark i:nth-child(3) {
  translate: -50% calc(-50% + 5px);
}
@media (hover: hover) {
  .nav-toggle[aria-expanded="false"]:hover .nav-toggle-mark i {
    width: 16px;
    height: 2px;
  }
  .nav-toggle[aria-expanded="false"]:hover .nav-toggle-mark i:nth-child(1) {
    translate: -50% calc(-50% - 5px);
  }
  .nav-toggle[aria-expanded="false"]:hover .nav-toggle-mark i:nth-child(3) {
    translate: -50% calc(-50% + 5px);
  }
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark i {
  width: 16px;
  height: 2px;
  background-color: var(--ink);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark i:nth-child(1) {
  translate: -50% -50%;
  rotate: 45deg;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark i:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark i:nth-child(3) {
  translate: -50% -50%;
  rotate: -45deg;
}

/* restoring a scrolled page: land in place, no fold */
.site-header.is-instant,
.site-header.is-instant *,
.site-header.is-instant *::before {
  transition: none !important;
}

/* ---------- hero: the name is the star, wired into a circuit ---------- */

.hero {
  --hero-top: calc(var(--nav-top) + var(--nav-h) + clamp(12px, 5vh, 38px));
  --hero-bottom: clamp(16px, 4vh, 44px);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--stage-peek));
  min-height: calc(100svh - var(--stage-peek));
  padding: var(--hero-top) 0 var(--hero-bottom);
  text-align: center;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}
/* the blueprint the circuit sits on */
.hero-grid {
  --g: rgb(0 84 164 / 0.075);
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--g) 1px, transparent 1px),
    linear-gradient(to bottom, var(--g) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 46%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 46%, #000 30%, transparent 78%);
}
/* where the pointer is, the grid lights up */
.hero-grid--lit {
  --g: rgb(40 120 200 / 0.32);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.hero.is-pointer .hero-grid--lit {
  opacity: 1;
}
.traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
/* the top-right corner belongs to the header's link stack: traces fade out under it */
.traces--wide {
  -webkit-mask-image: radial-gradient(440px 250px at 100% 0, transparent 45%, #000 88%);
  mask-image: radial-gradient(440px 250px at 100% 0, transparent 45%, #000 88%);
}
.traces--narrow {
  display: none;
}
.trace {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.node-ring {
  fill: rgb(255 255 255 / 0.65);
  stroke: var(--c);
  stroke-opacity: 0.45;
  stroke-width: 1.2;
}
.node-core {
  fill: var(--c);
}

.hero-title {
  font-size: clamp(3rem, 1.2rem + 9vw, 8.5rem);
  /* on a short screen the name gives way so the stage still peeks below it:
     its two lines (1.84em) get what is left of the viewport after the peek,
     the hero's paddings and the subline (6.5rem) */
  font-size: min(clamp(3rem, 1.2rem + 9vw, 8.5rem), max(2.25rem, (100svh - var(--stage-peek) - var(--hero-top) - var(--hero-bottom) - 6.5rem) / 1.84));
  font-weight: 640;
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.title-art {
  display: block;
}
.title-line {
  display: block;
  white-space: nowrap;
}
.word,
.char {
  display: inline-block;
}
.word--it {
  color: var(--brand);
}
.hero-sub {
  max-width: 40ch;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.96rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ---------- product stage ---------- */

.stage {
  position: relative;
  padding: 6px 0 8px;
  overflow-x: clip;
  view-timeline: --stage block;
}
/* the cards waiting off to the sides must never widen the page */
@supports not (overflow: clip) {
  .stage {
    overflow: hidden;
  }
}
/* frosted glass over the products while they wait below the fold: light
   enough that the cards and their pictures still read as cards (user steer:
   they must show at the bottom of every screen) */
.stage-veil {
  display: none;
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: -150px;
  height: min(78vh, 720px);
  pointer-events: none;
  background: linear-gradient(180deg, rgb(243 246 251 / 0) 0, rgb(243 246 251 / 0.12) 150px, rgb(243 246 251 / 0.04) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  backdrop-filter: blur(5px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 62%, transparent 100%);
}
.stage-frame {
  position: relative;
  isolation: isolate;
  width: var(--card-w);
  margin-inline: auto;
}
/* a placed bloom of logo-dot light behind the stage, so its glass has something to frost */
.stage-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -12%;
  pointer-events: none;
  background: radial-gradient(48% 54% at 50% 54%, rgb(72 152 228 / 0.34), rgb(120 188 252 / 0.16) 58%, transparent 76%);
}
.stage-track {
  display: grid;
}
.slide {
  --glass-fill:
    radial-gradient(130% 90% at 0% 0%, rgb(255 255 255 / 0.62), transparent 55%),
    linear-gradient(162deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.84) 50%, rgb(255 255 255 / 0.9) 100%);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 460px;
  padding: 14px;
  border-radius: var(--r-xl);
}
/* a hairline edge tinted with the logo dots */
.slide::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.95), rgb(120 188 252 / 0.6) 36%, rgb(255 255 255 / 0.4) 64%, rgb(72 152 228 / 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.slide-media {
  --media-r: calc(var(--r-xl) - 14px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--media-r);
  background: #fff;
}
.slide-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(205deg, transparent 58%, rgb(3 58 126 / 0.16));
  box-shadow:
    inset 0 0 0 1px rgb(11 29 56 / 0.06),
    inset 0 1px 0 rgb(255 255 255 / 0.6);
}
/* white-ground illustrations sit on a plain mat (a grid would show through the
   multiply blend); the cut edges meet the mat edges */
.slide-media--mat {
  background: linear-gradient(165deg, #f3f8fe 0%, #dcebfb 100%);
}
.slide-media--mat img {
  object-fit: contain;
  object-position: left bottom;
  mix-blend-mode: multiply;
}
.slide-media--mat::after,
.slide-media--screen::after {
  content: none;
}
/* the product screenshot floats over blueprint paper */
.slide-media--screen {
  background:
    linear-gradient(rgb(0 84 164 / 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(0 84 164 / 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(165deg, #f3f8fe 0%, #dcebfb 100%);
}
.slide-media--screen img {
  inset: 0;
  width: auto;
  height: auto;
  max-width: calc(100% - 44px);
  max-height: calc(100% - 44px);
  margin: auto;
  object-fit: fill;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgb(3 58 126 / 0.14),
    0 18px 36px -18px rgb(3 58 126 / 0.5);
}
.slide-body {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 2.4vw, 34px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 44px);
}
/* the product is the display line, the one thing the card is named for; it
   always fits unbroken (itbs.:MobilniProcenitelj is 10.32 × its size wide) */
.product-name {
  font-size: 2rem;
  font-size: min(2.875rem, 9.3cqi);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.product-prefix {
  color: var(--brand);
  font-weight: 460;
}
.product-tagline {
  margin-top: 14px;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* a trace with its node that doubles as the card's clock: in the cycle the
   node travels the line over the card's 5s and the line fills in behind it;
   where the cycle does not run, the node rests at the start of a drawn line.
   One number, --p (0 at the start, 1 at the end), places both, so they
   cannot drift apart; the script animates it. The node's centre sits 6.5px
   in from each end of its run */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.product-trace {
  --trace-w: 220px;
  position: relative;
  display: block;
  width: min(100%, var(--trace-w));
  height: 13px;
  margin-top: 18px;
  background: linear-gradient(rgb(0 84 164 / 0.14) 0 0) 0 50% / 100% 1px no-repeat;
}
.product-trace::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 3px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--dot-1);
  box-shadow: 0 0 0 3px rgb(0 84 164 / 0.14);
}
.product-trace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, rgb(40 120 200 / 0.95), rgb(72 152 228 / 0.9));
}
/* the trace is 220px or the card body's width, whichever is less (the body
   is its container), so the node's run always ends where the line does */
@supports (width: 1cqi) {
  .product-trace {
    --trace-w: min(220px, 100cqi);
  }
}
/* where the cycle does not run, the node rests at the start of a drawn line */
.stage.is-autoplay .product-trace::before {
  translate: calc(var(--p) * (var(--trace-w) - 13px)) 0;
}
.stage.is-autoplay .product-trace::after {
  clip-path: inset(0 calc(100% - 6.5px - var(--p) * (100% - 13px)) 0 0);
}
.product-text {
  max-width: 60ch;
  margin-top: 14px;
  color: var(--ink-2);
  line-height: 1.62;
  text-wrap: pretty;
}

.stage-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--navy-fill);
  box-shadow: var(--navy-shadow);
  cursor: pointer;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), opacity 0.8s var(--ease);
}
.stage-arrow .icon {
  width: 20px;
  height: 20px;
}
.stage-arrow-prev {
  left: -76px;
}
.stage-arrow-next {
  right: -76px;
}
.stage-arrow:hover {
  transform: scale(1.07);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 16px 32px -12px rgb(3 58 126 / 0.8);
}
.stage-arrow:active {
  transform: scale(0.95);
  transition-duration: 0.12s;
}

.stage-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
/* the four products by name, straight on the ground; only the current one
   is a pill, and it wears the stretched logo-dot marker */
.stage-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.4s ease, box-shadow 0.5s ease;
}
.stage-tab::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgb(11 29 56 / 0.12);
  transition: width 0.9s var(--ease);
}
.stage-tab:hover {
  color: var(--ink);
  background: rgb(255 255 255 / 0.55);
}
.stage-tab[aria-current="true"] {
  color: var(--ink);
  background: rgb(255 255 255 / 0.96);
  box-shadow:
    0 0 0 1px rgb(11 29 56 / 0.07),
    0 1px 2px rgb(3 58 126 / 0.1),
    0 6px 14px -6px rgb(3 58 126 / 0.25);
}
.stage-tab[aria-current="true"]::before {
  width: 26px;
  background: var(--dots);
  box-shadow: 0 3px 8px -3px rgb(0 84 164 / 0.55);
}
/* one product in front at every size, the others waiting at its sides: wide
   screens fan them out behind it (coverflow), narrow ones set them side by
   side in a ring you swipe through (user steer, 2026-10-01) */
/* a swipe moves the whole track with the finger (the script sets its
   translate directly, so nothing inside has to restyle on every move); on
   release the track settles back on a quick ease-out while the cards travel */
.stage-track {
  touch-action: pan-y;
  transition: translate 0.8s var(--ease);
}
.stage.is-dragging {
  -webkit-user-select: none;
  user-select: none;
}
.stage.is-dragging .stage-track {
  transition: none;
  will-change: translate;
}
.slide {
  grid-area: 1 / 1;
  transform-origin: 50% 50%;
  /* the cards ease in gently, then land softly (user steer). z-index rides
     the same curve, so an incoming card passes behind the outgoing one and
     takes the front only halfway through, where the two cross, instead of
     jumping on top at once */
  transition:
    transform 1.2s var(--ease-travel),
    opacity 1.2s var(--ease-travel),
    z-index 1.2s var(--ease-travel);
}
.slide > * {
  transition: filter 1.2s var(--ease-travel);
}
/* a released swipe carries on from the finger and settles */
.stage.is-flung .slide {
  transition:
    transform 0.8s var(--ease),
    opacity 0.8s var(--ease),
    z-index 0.8s var(--ease);
}
.stage.is-flung .slide > * {
  transition: filter 0.8s var(--ease);
}
.stage .slide.is-jumping,
.stage .slide.is-jumping > *,
.stage.is-dragging .slide {
  transition: none;
}
.slide[data-pos="0"] {
  z-index: 3;
}
/* a neighbour is a door: tap or click it to bring it forward */
.slide[data-pos="1"],
.slide[data-pos="-1"] {
  z-index: 2;
  cursor: pointer;
}
.slide[data-pos="2"],
.slide[data-pos="-2"] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
/* coverflow: the neighbours wait behind the front card */
@media (min-width: 960px) {
  .slide-body {
    justify-content: center;
  }
  .slide[data-pos="1"],
  .slide[data-pos="-1"] {
    opacity: 0.58;
  }
  /* neighbours recede as frosted glass, never as crisp clipped fragments */
  .slide[data-pos="1"] > *,
  .slide[data-pos="-1"] > * {
    filter: blur(5px);
  }
  .slide[data-pos="1"] {
    transform: translateX(var(--peek)) scale(var(--side-scale));
  }
  .slide[data-pos="-1"] {
    transform: translateX(calc(var(--peek) * -1)) scale(var(--side-scale));
  }
  .slide[data-pos="2"] {
    transform: translateX(calc(var(--peek) * 1.7)) scale(0.72);
  }
  .slide[data-pos="-2"] {
    transform: translateX(calc(var(--peek) * -1.7)) scale(0.72);
  }
}

/* ---------- bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(96px, 11vw, 152px);
}
.tile {
  position: relative;
  border-radius: var(--r-xl);
}
.tile h3 {
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.12;
}
.tile-image {
  grid-column: span 7;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  background: #e9eef5;
  box-shadow:
    0 1px 2px rgb(3 58 126 / 0.08),
    0 24px 56px -26px rgb(3 58 126 / 0.4);
}
.tile-image picture,
.tile-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tile-image img {
  object-fit: cover;
  object-position: 28% 50%;
  transition: scale 1.8s var(--ease);
}
.tile-image:hover img {
  scale: 1.035;
}
.tile-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgb(3 58 126 / 0.3));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}
.tile-plate {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 16px;
  padding: 18px 26px 20px;
  border-radius: calc(var(--r-xl) - 16px);
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 30px -18px rgb(3 43 96 / 0.55);
}
.tile-plate h3 {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
}

/* two platform facts in one glass sheet, split by a hairline */
.tile-duo {
  grid-column: span 5;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 0 clamp(28px, 3vw, 40px);
}
.duo-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 40px) 0;
}
.duo-item + .duo-item {
  border-top: 1px solid rgb(11 29 56 / 0.08);
}
.duo-item h3 {
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.625rem);
}
.duo-item p {
  max-width: 46ch;
  margin-top: 10px;
  color: var(--ink-2);
}

/* the portal: the support desk for existing clients. One sheet of the same
   glass as its neighbours; a blue glow from the left edge lights a headset
   mark set like a node of the circuit, and a plain primary button leads in */
.tile-portal {
  --portal-glow: radial-gradient(40% 130% at 0% 50%, rgb(120 188 252 / 0.42), transparent 72%);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 40px;
  padding: clamp(28px, 3.2vw, 44px) clamp(28px, 3.6vw, 52px);
  border: 1px solid var(--glass-edge);
  background: var(--portal-glow), var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
/* the mark: a core of the logo-dot blues inside a node ring */
.portal-mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 12px;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(80% 80% at 28% 18%, rgb(255 255 255 / 0.22), transparent 62%),
    linear-gradient(150deg, var(--dot-3), var(--dot-2) 52%, var(--dot-1));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 0 0 11px rgb(255 255 255 / 0.62),
    0 0 0 12.2px rgb(40 120 200 / 0.3),
    0 20px 34px -14px rgb(3 58 126 / 0.55);
}
.portal-mark .icon {
  width: 38px;
  height: 38px;
}
.portal-text {
  min-width: 0;
}
.tile-portal h3 {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
}
.portal-app {
  margin-top: 6px;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.portal-desc {
  max-width: 64ch;
  margin-top: 12px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.portal-go:hover .btn-icon {
  transform: translate(2px, -2px);
}

/* ---------- references ---------- */

.references h2 {
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.04em;
}
.references {
  margin-top: clamp(120px, 13vw, 200px);
}
.references-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px 56px;
}
.references-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
}
.partner-badge {
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  transition: transform 0.6s var(--ease);
}
.partner-badge img {
  width: auto;
  height: 26px;
}
.partner-badge:hover {
  transform: translateY(-2px);
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 90% at 0% 0%, rgb(255 255 255 / 0.6), transparent 55%),
    rgb(255 255 255 / 0.62);
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgb(3 58 126 / 0.06),
    0 8px 16px -12px rgb(3 58 126 / 0.3);
  transition: transform 0.7s var(--ease), background-color 0.5s ease, opacity 1s ease;
}
.logo-tile img {
  width: auto;
  height: var(--h, 52px);
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.76;
  transition: filter 0.7s var(--ease), opacity 0.7s var(--ease);
}
.logo-tile:hover {
  transform: translateY(-3px);
  background-color: rgb(255 255 255 / 0.86);
}
.logo-tile:hover img {
  filter: none;
  opacity: 1;
}
@media (hover: none) {
  .logo-tile img {
    filter: none;
    opacity: 1;
  }
}

/* ---------- contact ---------- */

.contact {
  margin-top: clamp(120px, 13vw, 200px);
}
.contact-panel {
  --k: clamp(4.5rem, 1rem + 15vw, 15rem);
  --pad: clamp(28px, 5vw, 72px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--pad);
  border-radius: var(--r-xl);
  color: #fff;
  background: linear-gradient(140deg, #032b60 0%, var(--navy) 40%, #0a4f98 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 36px 80px -40px rgb(3 43 96 / 0.75);
}
.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42% 70% at 92% -6%, rgb(120 188 252 / 0.5), transparent 70%),
    radial-gradient(34% 60% at 104% 106%, rgb(2 172 222 / 0.34), transparent 70%),
    radial-gradient(40% 70% at -4% 104%, rgb(72 152 228 / 0.32), transparent 70%);
}
/* a 1px box pinned to the corner label's top-right; the traces run out past
   the panel edges, which clip them */
.panel-traces {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  z-index: -1;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.ptrace {
  fill: none;
  stroke: rgb(160 208 255 / 0.42);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.pnode {
  fill: rgb(190 224 255 / 0.8);
}
/* reference 2: display lettering the frosted sheet sits on */
.contact h2 {
  margin: -0.04em 0 0 -0.05em;
  color: #7fb6f0;
  font-size: var(--k);
  font-weight: 620;
  line-height: 0.8;
  letter-spacing: -0.04em;
}
/* four frosted cards over the lower third of the word, each its own pane */
.contact-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: calc(var(--k) * -0.34) 0 0;
  padding: 0;
  list-style: none;
}
.contact-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label icon"
    "value value";
  align-content: space-between;
  gap: 22px 12px;
  height: 100%;
  min-height: 146px;
  padding: 24px 24px 26px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--r-lg);
  color: #fff;
  text-decoration: none;
  background-color: rgb(3 43 96 / 0.34);
  background-image: radial-gradient(130% 90% at 0% 0%, rgb(255 255 255 / 0.1), transparent 55%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 1px 0 0 rgb(255 255 255 / 0.08),
    0 18px 40px -24px rgb(1 16 40 / 0.7);
  transition: background-color 0.6s ease, translate 0.7s var(--ease);
}
.contact-item:hover {
  background-color: rgb(3 43 96 / 0.2);
  translate: 0 -2px;
}
.contact-item:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}
.contact-label {
  grid-area: label;
  align-self: center;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.9375rem;
}
.contact-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}
.contact-icon .icon {
  width: 19px;
  height: 19px;
}
.contact-value {
  grid-area: value;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.contact-value .nowrap {
  white-space: nowrap;
}
/* the name as a label on the board, wired in at the top right, set on two
   lines like the hero */
.contact-org {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
/* the palest blue that still holds 4.5:1 where the top-right bloom is brightest */
.contact-org-it {
  color: #cde6ff;
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: 56px;
  padding-bottom: 40px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.footer-logo {
  border-radius: 8px;
}
.footer-logo img {
  width: auto;
  height: 34px;
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.footer-copy {
  width: 100%;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* ---------- motion: slow, soft, once ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* the name materialises, letter by letter */
  .js .char {
    animation: char-in 1.7s var(--ease) both;
    animation-delay: calc(0.2s + var(--i) * 55ms);
  }
  .js .hero-sub {
    animation: rise 1.6s 1.2s var(--ease) both;
  }
  /* after the name and its line: the cards rise from under the fold into
     their peek, then the chrome comes in (user steer). The cards travel on
     translate alone and start fully below the edge, so no fade breaks the
     frost of their glass. A page opened or scrolled away from the top skips
     all of it (.no-intro on the root) */
  .js .stage-frame {
    animation: from-under 1.8s var(--ease) 1.6s backwards;
  }
  .js .nav-logo img,
  .js .nav-links li {
    animation: chrome-in 1.2s var(--ease) 2.1s backwards;
  }
  .js .nav-links li {
    animation-delay: calc(2.25s + var(--i) * 70ms);
  }
  .js .nav-logo::before,
  .js .nav-toggle {
    animation: chrome-fade 1s ease 2.1s backwards;
  }
  .no-intro .stage-frame,
  .no-intro .nav-logo img,
  .no-intro .nav-links li,
  .no-intro .nav-logo::before,
  .no-intro .nav-toggle {
    animation: none;
  }
  /* the circuit draws itself in, nodes light up at the ends */
  .js .hero-grid:not(.hero-grid--lit) {
    animation: fade 2.6s 0.1s ease both;
  }
  .js .trace {
    stroke-dashoffset: 1;
    animation: draw 3.2s var(--ease) forwards;
    animation-delay: var(--d, 0s);
  }
  .js .node {
    transform-box: fill-box;
    transform-origin: center;
    animation: node-in 1.4s var(--ease) both;
    animation-delay: var(--d, 0s);
  }

  /* the frost over the products clears as they scroll into view */
  @supports (animation-timeline: view()) {
    .js .stage-veil {
      display: block;
      animation: veil-clear linear both;
      animation-timeline: --stage;
      animation-range: entry var(--stage-peek) entry calc(var(--stage-peek) + 42vh);
    }
  }
  .veil-io .stage-veil {
    display: block;
    transition: opacity 1.8s var(--ease), visibility 0s;
  }
  .veil-io .stage.is-clear .stage-veil {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.8s var(--ease), visibility 0s 1.8s;
  }
  /* the stage rises once into place; a finished transition leaves nothing animating,
     so the cards re-rasterise crisply at rest */
  .js .stage-frame,
  .js .stage-nav {
    transform: translateY(28px);
    transition: transform 1.8s var(--ease);
  }
  .js .stage.is-ready .stage-frame,
  .js .stage.is-ready .stage-nav {
    transform: none;
  }

  /* the stage arrives once it is in view: the neighbours fan out from behind the front card */
  @media (min-width: 960px) {
    .js .stage:not(.is-ready) .slide[data-pos="1"] {
      transform: translateX(calc(var(--peek) * 0.85)) scale(0.82);
      opacity: 0.45;
    }
    .js .stage:not(.is-ready) .slide[data-pos="-1"] {
      transform: translateX(calc(var(--peek) * -0.85)) scale(0.82);
      opacity: 0.45;
    }
    .js .stage:not(.is-ready) .stage-arrow {
      opacity: 0;
    }
  }
  @media (max-width: 959.98px) {
    .js .stage:not(.is-ready) .slide[data-pos="1"] {
      transform: translateX(calc(var(--ring-step) * 0.85)) translateY(var(--ring-lift)) scale(0.9);
      opacity: 0.45;
    }
    .js .stage:not(.is-ready) .slide[data-pos="-1"] {
      transform: translateX(calc(var(--ring-step) * -0.85)) translateY(var(--ring-lift)) scale(0.9);
      opacity: 0.45;
    }
  }

  /* in coverflow a card comes out from behind the front one, so its text
     rises as it lands, not while it is still setting off. In the ring the
     card was in view beside the front one all along: it only brightens */
  @media (min-width: 960px) {
    .slide.is-entering .slide-body > * {
      animation: text-in 1.2s var(--ease) 0.36s backwards;
    }
    .slide.is-entering .slide-body > :nth-child(2) {
      animation-delay: 0.44s;
    }
    .slide.is-entering .slide-body > :nth-child(3) {
      animation-delay: 0.52s;
    }
    .slide.is-entering .slide-body > :nth-child(n + 4) {
      animation-delay: 0.58s;
    }
    .slide.is-entering .slide-media img {
      animation: settle 1.9s var(--ease) 0.2s backwards;
    }
  }

  /* scroll reveals: each section enters in its own way */
  .motion-ready .tile[data-reveal] {
    opacity: 0;
    translate: 0 32px;
    transition:
      opacity 1.4s var(--ease) calc(var(--i, 0) * 120ms),
      translate 1.6s var(--ease) calc(var(--i, 0) * 120ms),
      transform 0.7s var(--ease);
  }
  .motion-ready .logo-tile[data-reveal] {
    opacity: 0;
    transition:
      opacity 1.2s ease calc(var(--i, 0) * 100ms),
      transform 0.7s var(--ease),
      background-color 0.5s ease;
  }
  .motion-ready .contact-panel[data-reveal] {
    clip-path: inset(8% 3% 0 3% round var(--r-xl));
    transition: clip-path 1.6s var(--ease);
  }
  .motion-ready .contact-panel .ptrace {
    stroke-dashoffset: 1;
  }
  .motion-ready .contact-panel.is-in .ptrace {
    animation: draw 2.8s 0.6s var(--ease) forwards;
  }
  /* the name comes into focus as the traces reach it */
  .motion-ready .contact-panel .contact-org {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 1.2s ease 1.3s, filter 1.4s var(--ease) 1.3s;
  }
  .motion-ready .contact-panel.is-in .contact-org {
    opacity: 1;
    filter: none;
  }
  .motion-ready [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
    clip-path: inset(0 0 0 0 round var(--r-xl));
  }
}

@keyframes char-in {
  from {
    opacity: 0;
    translate: 0 0.38em;
    filter: blur(14px);
  }
}
@keyframes chrome-in {
  from {
    opacity: 0;
    translate: 0 -8px;
    filter: blur(8px);
  }
}
@keyframes chrome-fade {
  from {
    opacity: 0;
  }
}
@keyframes from-under {
  from {
    translate: 0 calc(var(--stage-peek) + 48px);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 18px;
    filter: blur(8px);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes node-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}
/* once clear, the frost stops drawing (and blurring what moves under it) */
@keyframes veil-clear {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes text-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}
@keyframes settle {
  from {
    scale: 1.08;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .packets {
    display: none;
  }
  /* the header swaps states in place: no staggered fold */
  .site-header *,
  .site-header *::before {
    transition-delay: 0s !important;
  }
}

/* ---------- material fallbacks ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .nav-logo::before,
  .nav-links::before {
    background: rgb(255 255 255 / 0.93);
  }
  .tile-portal {
    background: var(--portal-glow), rgb(255 255 255 / 0.93);
  }
  .contact-item {
    background-color: rgb(3 43 96 / 0.62);
  }
  .stage-veil {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .tile-portal,
  .contact-item,
  .nav-logo::before,
  .nav-links::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass,
  .nav-logo::before,
  .nav-links::before {
    background: #fbfcfe;
  }
  .tile-portal {
    background: var(--portal-glow), #fbfcfe;
  }
  .tile-plate {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fbfcfe;
  }
  .contact-item {
    background: #0b3f82;
  }
  .stage-veil {
    display: none !important;
  }
  .aurora {
    opacity: 0.45;
  }
}

/* ---------- responsive ---------- */

/* the arrows sit 76px outside the front card, over its neighbours. Until
   the card reaches its 1120px cap (about 1302px wide) it leaves only 7vw
   beside it, so below 1320px they would crowd the screen edge or run off
   it (user steer, 2026-10-01); from 1320px they clear it by 20px or more.
   Without them the stage moves by a swipe, a click or tap on a side card,
   the tabs and the arrow keys */
@media (max-width: 1319.98px) {
  .stage-arrow {
    display: none;
  }
}

@media (max-width: 1099px) {
  .contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* the ring: the products side by side, swiped through (user steer,
   2026-10-01). The front card is whole and its neighbours wait at the edges,
   a little smaller and dimmed; one step moves a card exactly into its
   neighbour's place, 12px from the front card's edge. Built to stay smooth
   on phones (user steer: swiping lagged), so nothing in a swipe is redrawn:
   - the neighbours are dimmed, not blurred: a blur is redrawn on every frame
     they move (tried again and dropped by the user, 2026-10-01).
   - every card keeps its own height, top-aligned. The track's one row takes
     the front card's height (the script measures it into --front-h) and
     glides to the next one's, so the stage ends where the front card does.
   - a taller neighbour is cut back to the front card's height inside its
     own rounded edge, by a clip (the script sets each card's --cut), and the
     neighbours sit 3% of that height down, so they stand centred against
     the front card. A clip glides cheaply where a resize would repaint the
     whole card on every frame. The front card's clip stands 80px clear of
     it, past its shadow, and shares its corners, so it cuts nothing.
   - a card that comes forward is already in view, so it only brightens and
     grows into place; its text does not rise in again (user steer).
   - the cards drop the backdrop filter: they never overlap here, so it only
     blurred the smooth light behind them, which reads the same unblurred */
@media (max-width: 959.98px) {
  .stage {
    --ring-gap: 12px;
    --ring-scale: 0.94;
    --ring-step: calc((1 + var(--ring-scale)) * 50% + var(--ring-gap));
    --ring-lift: calc(var(--front-h, 0px) * (1 - var(--ring-scale)) / 2);
  }
  .stage-frame {
    width: min(100% - 2 * (var(--gutter) + 18px), 600px);
  }
  .stage-track {
    align-items: start;
    grid-template-rows: var(--front-h, auto);
    transition: grid-template-rows 1.2s var(--ease-travel), translate 0.8s var(--ease);
  }
  .stage.is-flung .stage-track {
    transition-duration: 0.8s;
    transition-timing-function: var(--ease);
  }
  .stage.is-sizing .stage-track {
    transition: none;
  }
  .slide {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    border-radius: var(--r-lg);
    transform-origin: 50% 0;
    clip-path: inset(0 0 var(--cut, 0px) 0 round var(--r-lg));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
      transform 1.2s var(--ease-travel),
      opacity 1.2s var(--ease-travel),
      z-index 1.2s var(--ease-travel),
      clip-path 1.2s var(--ease-travel);
  }
  .slide[data-pos="0"] {
    clip-path: inset(-80px round calc(var(--r-lg) + 80px));
  }
  .stage.is-flung .slide {
    transition:
      transform 0.8s var(--ease),
      opacity 0.8s var(--ease),
      z-index 0.8s var(--ease),
      clip-path 0.8s var(--ease);
  }
  .stage .slide.is-jumping,
  .stage.is-dragging .slide,
  .stage.is-sizing .slide {
    transition: none;
  }
  .slide-media {
    --media-r: calc(var(--r-lg) - 10px);
    flex: none;
    aspect-ratio: 16 / 10;
  }
  .slide-media::after {
    background: none;
  }
  .slide-body {
    flex: none;
    padding: 22px 14px 18px;
  }
  .slide[data-pos="1"],
  .slide[data-pos="-1"] {
    opacity: 0.5;
  }
  .slide[data-pos="1"] {
    transform: translateX(var(--ring-step)) translateY(var(--ring-lift)) scale(var(--ring-scale));
  }
  .slide[data-pos="-1"] {
    transform: translateX(calc(var(--ring-step) * -1)) translateY(var(--ring-lift)) scale(var(--ring-scale));
  }
  .slide[data-pos="2"] {
    transform: translateX(calc(var(--ring-step) * 2)) translateY(var(--ring-lift)) scale(var(--ring-scale));
  }
  .slide[data-pos="-2"] {
    transform: translateX(calc(var(--ring-step) * -2)) translateY(var(--ring-lift)) scale(var(--ring-scale));
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .tile-image,
  .tile-duo,
  .tile-portal {
    grid-column: 1 / -1;
  }
  .tile-image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .tile-portal {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .portal-go {
    grid-column: 2;
    justify-self: start;
  }

  .references-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .references-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 640px) and (max-width: 959.98px) {
  .slide-media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .traces--wide {
    display: none;
  }
  .traces--narrow {
    display: block;
  }
  /* narrow screens open with the disc; keep the stack from flashing before the script places it */
  .js .site-header:not(.is-live) .nav-links {
    visibility: hidden;
  }
  /* no room beside the word: the label moves above it, still wired from the top edge */
  .contact-panel {
    display: flex;
    flex-direction: column;
  }
  .contact-org {
    position: static;
    order: -1;
    align-self: flex-end;
    margin-bottom: 14px;
  }
  .ptrace--under {
    display: none;
  }
}

/* narrow touch screens only ever show the links on the sheet: rows at thumb height */
@media (max-width: 767px) and (pointer: coarse) {
  .nav-links a {
    padding-block: 10px;
  }
}

@media (max-width: 639.98px) {
  :root {
    --r-xl: 28px;
    --r-lg: 22px;
    --nav-top: 12px;
    --nav-h: 44px;
    --nav-inset: 12px;
    --logo-h: 30px;
  }
  .hero-sub {
    max-width: 30ch;
  }
  /* the tabs become the ring's pager: the four dots, the current one
     stretched; each name stays as the button's accessible name */
  .stage-nav {
    margin-top: 12px;
  }
  .stage-tabs {
    gap: 0;
  }
  .stage-tab,
  .stage-tab:hover,
  .stage-tab[aria-current="true"] {
    justify-content: center;
    width: 32px;
    height: 44px;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .stage-tab::before {
    width: 8px;
    height: 8px;
  }
  .stage-tab[aria-current="true"]::before {
    width: 22px;
  }
  .stage-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tile-image {
    aspect-ratio: 4 / 3.2;
  }
  .tile-plate {
    left: 10px;
    bottom: 10px;
    padding: 16px 20px 18px;
    border-radius: calc(var(--r-xl) - 10px);
  }
  .tile-portal {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px 22px 24px;
  }
  .portal-mark {
    width: 64px;
    height: 64px;
    margin: 9px;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.4),
      0 0 0 8px rgb(255 255 255 / 0.62),
      0 0 0 9.2px rgb(40 120 200 / 0.3),
      0 16px 28px -12px rgb(3 58 126 / 0.55);
  }
  .portal-mark .icon {
    width: 30px;
    height: 30px;
  }
  .portal-go {
    grid-column: auto;
    justify-self: stretch;
    justify-content: space-between;
  }
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .logo-tile {
    padding: 18px 20px;
  }
  .logo-tile img {
    height: calc(var(--h, 52px) * 0.78);
  }
  .contact-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .contact-item {
    min-height: 0;
    gap: 14px 12px;
    padding: 20px 20px 22px;
  }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  :root {
    --logo-h: 28px;
  }
}

/* ---------- print ---------- */

@media print {
  .aurora,
  .site-header,
  .stage-nav,
  .stage-arrow,
  .stage-veil,
  .hero-field,
  .skip-link {
    display: none !important;
  }
  .stage-track {
    display: block;
    height: auto !important;
    overflow: visible;
  }
  .slide {
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 16px;
    break-inside: avoid;
  }
  .slide > * {
    filter: none !important;
  }
  .glass,
  .tile-portal,
  .contact-item {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
    box-shadow: none;
    border: 1px solid #d5dde8;
  }
  [data-reveal],
  .contact-org {
    opacity: 1 !important;
    translate: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}