/* ==========================================================================
   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 logo's orange is the signal on the circuit, in
   points only: the pulses, the clock nodes, an arrow under the pointer.
   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;
  /* halfway blends between neighbouring dots, so six products still run
     dark to light in catalogue order (user steer, 2026-10-02) */
  --dot-1-2: #1466b6;
  --dot-3-4: #60aaf0;
  --dots: linear-gradient(90deg, var(--dot-1), var(--dot-2) 38%, var(--dot-3) 68%, var(--dot-4));
  /* the logo's orange (its underline), for the little details (user, 2026-10-06):
     the signal on the circuit, never a surface. As light it is the logo's own
     orange; as ink on the light ground (arrows, the +, underlines) a deeper
     orange that holds 3:1, where the logo's falls to 2.1:1 */
  --orange: #f7941d;
  --orange-ink: #d46f00;

  /* 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. From tablets up the logo grows with
     the screen, 40px at 640px wide to 52px at 1440px (user steer,
     2026-10-06: it did not scale up enough), and the capsule and the menu
     disc grow around it, keeping 6px of glass above and below it, so the two
     still match; phones fix all three smaller (see the 640px step) */
  --nav-top: 16px;
  --logo-h: clamp(40px, 30.4px + 1.5vw, 52px);
  --nav-h: calc(var(--logo-h) + 12px);
  --nav-inset: calc(var(--nav-h) * 0.28);
  --nav-max: 1520px;
  /* 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(247 148 29 / 0.28);
  color: var(--ink);
}
.contact-panel ::selection {
  background: rgb(247 148 29 / 0.45);
  color: #fff;
}

: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, color 0.3s ease;
}
.btn-icon .icon {
  width: 18px;
  height: 18px;
}
/* every arrow catches the signal on hover: orange, light on navy */
.btn:hover .btn-icon {
  transform: translateX(2px);
  background: rgb(255 255 255 / 0.2);
  color: var(--orange);
}
/* ---------- 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(--orange-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;
}
/* the mark is drawn in em, so it grows with the disc: 16px to the em at the
   48px disc, never less (the dots 4px, the menu lines 16px by 2px there) */
.nav-toggle-mark {
  position: relative;
  font-size: max(16px, var(--nav-h) / 3);
  width: 1.25em;
  height: 1.25em;
}
/* each mark is centred by its own translate, so it stays centred while it
   stretches; the dot growing into a line is a deliberate size transition,
   like the product tab's marker */
.nav-toggle-mark i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.25em;
  height: 0.25em;
  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% - 0.375em);
}
.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% + 0.375em);
}
/* 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: 1em;
  height: 0.125em;
}
.nav-toggle[aria-expanded="false"]:focus-visible .nav-toggle-mark i:nth-child(1) {
  translate: -50% calc(-50% - 0.3125em);
}
.nav-toggle[aria-expanded="false"]:focus-visible .nav-toggle-mark i:nth-child(3) {
  translate: -50% calc(-50% + 0.3125em);
}
@media (hover: hover) {
  .nav-toggle[aria-expanded="false"]:hover .nav-toggle-mark i {
    width: 1em;
    height: 0.125em;
  }
  .nav-toggle[aria-expanded="false"]:hover .nav-toggle-mark i:nth-child(1) {
    translate: -50% calc(-50% - 0.3125em);
  }
  .nav-toggle[aria-expanded="false"]:hover .nav-toggle-mark i:nth-child(3) {
    translate: -50% calc(-50% + 0.3125em);
  }
}
.nav-toggle[aria-expanded="true"] .nav-toggle-mark i {
  width: 1em;
  height: 0.125em;
  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-style: italic;
  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. Device and screen
   pictures with a white margin of their own sit centred on it (--pos) */
.slide-media--mat {
  background: linear-gradient(165deg, #f3f8fe 0%, #dcebfb 100%);
}
.slide-media--mat img {
  object-fit: contain;
  object-position: var(--pos, left bottom);
  mix-blend-mode: multiply;
}
/* an illustration cut off at its bottom edge, set in the middle of its mat
   (user steer, 2026-10-02: the Insurance hand). The picture takes its own
   height, centred, so the cut edge can fade into the mat instead of ending
   in a hard line in mid-air */
.slide-media--centred img {
  height: auto;
  max-height: 100%;
  margin: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, #000 86%, transparent);
}
.slide-media--mat::after {
  content: none;
}
/* on a touch screen a tap on the card in front holds the cycle and the next
   lets it go on (user steer, 2026-10-06); a glass disc comes into focus in
   the middle of its picture with the pause or play glyph, and dissolves. The
   script moves it into the card in front */
.stage-flash {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  color: var(--ink);
  background: rgb(255 255 255 / 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgb(255 255 255 / 0.6),
    0 14px 30px -14px rgb(3 58 126 / 0.55);
  opacity: 0;
  pointer-events: none;
}
.stage-flash .icon {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
}
/* Phosphor sets its play triangle optically, its weight on the centre of
   the glyph's box; a further nudge pushed it right (user steer, 2026-10-06) */
.stage-flash:not(.is-play) .icon--play,
.stage-flash.is-play .icon--pause {
  display: none;
}
.stage-flash.is-on {
  animation: flash 1.3s var(--ease) both;
}
@keyframes flash {
  0% {
    opacity: 0;
    scale: 0.82;
  }
  24%,
  62% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.06;
  }
}
.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 runs from
   6.5px in at the start to 6.5px in at the end, and the line runs exactly
   that far, so at the end of the run the node sits on the end of the line
   with no bare line beyond it (user steer, 2026-10-02) */
@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) 6.5px 50% / calc(100% - 13px) 1px no-repeat;
}
/* the node is the signal travelling the blue line: the logo's orange */
.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(--orange);
  box-shadow: 0 0 0 3px rgb(247 148 29 / 0.22);
}
.product-trace::after {
  content: "";
  position: absolute;
  left: 6.5px;
  right: 6.5px;
  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((1 - var(--p)) * 100%) 0 0);
}
.product-text {
  max-width: 60ch;
  margin-top: 14px;
  color: var(--ink-2);
  line-height: 1.62;
  text-wrap: pretty;
}
/* a light pill: white on the glass with a hairline ring, an ink label and an
   arrow that turns orange and moves on under the pointer. It reads as a way
   on without the weight of the navy primary */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px 0 18px;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: rgb(255 255 255 / 0.92);
  box-shadow:
    0 0 0 1px rgb(11 29 56 / 0.12),
    0 1px 2px rgb(3 58 126 / 0.08),
    0 8px 18px -10px rgb(3 58 126 / 0.35);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.4s ease, box-shadow 0.6s var(--ease), translate 0.6s var(--ease);
}
.pill-link .icon {
  flex: none;
  width: 16px;
  height: 16px;
  transition: translate 0.6s var(--ease), color 0.3s ease;
}
.pill-link:hover {
  background-color: #fff;
  translate: 0 -1px;
  box-shadow:
    0 0 0 1px rgb(11 29 56 / 0.18),
    0 2px 4px rgb(3 58 126 / 0.1),
    0 12px 24px -12px rgb(3 58 126 / 0.45);
}
.pill-link:hover .icon {
  color: var(--orange-ink);
  translate: 3px 0;
}
.pill-link:active {
  translate: 0 0;
  scale: 0.98;
  transition-duration: 0.12s;
}
/* the way into the product's own page (user steer, 2026-10-02). The name
   leads the card; this follows the text, set apart from it as a light pill
   (user steer, 2026-10-06: the quiet text link it was blended into the text;
   2026-10-03: an ink label with a navy arrow disc was too big and too
   important). Only the card in front takes focus or a click; a side card
   stays a door that brings itself forward */
.product-more {
  margin-top: 20px;
}

.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), color 0.3s ease;
}
.stage-arrow .icon {
  width: 20px;
  height: 20px;
}
.stage-arrow-prev {
  left: -76px;
}
.stage-arrow-next {
  right: -76px;
}
.stage-arrow:hover {
  color: var(--orange);
  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;
}
/* with seven products two cards wait hidden on each side (the far ones at
   the same place as the next ones in, so moving between them shows nothing) */
.slide[data-pos="2"],
.slide[data-pos="-2"],
.slide[data-pos="3"],
.slide[data-pos="-3"] {
  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"],
  .slide[data-pos="3"] {
    transform: translateX(calc(var(--peek) * 1.7)) scale(0.72);
  }
  .slide[data-pos="-2"],
  .slide[data-pos="-3"] {
    transform: translateX(calc(var(--peek) * -1.7)) scale(0.72);
  }
}

/* ---------- experience ----------
   added by the user (2026-10-02): twenty years, straight after the stage.
   The figure and its unit make one lockup on a shared baseline, on the left
   of the same 4fr / 8fr split as Reference, with two sentences on the right.
   Plain ink on the ground: a statement needs no glass and no colour. The
   unit and the first sentence take the tile titles' step-up size */

.experience {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: 24px 56px;
  margin-top: clamp(96px, 11vw, 152px);
}
/* the band's circuit (user steer, 2026-10-02), routed by the script in the
   band's own pixels: a trace drops out of the space under the stage into a
   node beside "iskustva"; on wide screens a second one runs on from there,
   through 45°, to a smaller node before the first words, and on narrow ones
   it comes in from the right edge instead. Nothing shows until it is routed */
.xtraces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.xtraces:not(.is-routed) {
  display: none;
}
.xtrace {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.xtrace--link {
  stroke: rgb(40 120 200 / 0.8);
}
@media (min-width: 960px) {
  .xtrace--edge {
    display: none;
  }
}
@media (max-width: 959.98px) {
  .xtrace--link,
  [data-xnode="b"] {
    display: none;
  }
}
.experience-figure {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  gap: clamp(12px, 1.4vw, 20px);
}
/* tabular figures, so the count runs at one width; while it runs the script
   holds the count at the width of its "20", set right, so the + and the unit
   and the node beside them never move */
.experience-number {
  font-size: clamp(5rem, 2.5rem + 5.6vw, 8rem);
  font-weight: 640;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.experience-count {
  display: inline-block;
  text-align: right;
}
/* twenty and more (user steer, 2026-10-05): the + at half the figure's
   size, raised to its top, so the figure stays the 20. It is the one orange
   glyph, in the ink orange (3.2:1, large text) */
.experience-plus {
  display: inline-block;
  margin-left: 0.06em;
  color: var(--orange-ink);
  font-size: 0.5em;
  vertical-align: 0.62em;
}
.experience-unit {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.experience-lead {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.experience-text {
  max-width: 52ch;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- 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. The first
   takes its own height; the second, Svi uređaji, takes the rest, with the
   three platforms' marks under its text and the products on every device at
   its foot (user steer, 2026-10-02) */
.tile-duo {
  grid-column: span 5;
  display: grid;
  grid-template-rows: auto 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);
}
.duo-item--devices {
  justify-content: flex-start;
  padding-bottom: clamp(20px, 2vw, 28px);
}
/* Android, Apple, Windows: Phosphor's fill marks in their own brand colours
   (user steer, 2026-10-02), in the order the text names them: Android green,
   Apple's near-black, Windows blue */
.platforms {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 22px;
  color: var(--ink-2);
}
.platforms .icon {
  width: 24px;
  height: 24px;
}
.platforms .icon--android {
  color: #3ddc84;
}
.platforms .icon--apple {
  color: #1d1d1f;
}
.platforms .icon--windows {
  color: #0078d4;
}
/* the picture sits at the foot of the sheet, as wide as the text column
   allows, never wider than it reads well */
.devices {
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-top: auto;
}

/* 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;
}
/* six clients, three across in two even rows (two across on phones), the
   insurers first; each tile is a link to the client's own site (user steer,
   2026-10-02) */
.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%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.76;
  transition: filter 0.7s var(--ease), opacity 0.7s var(--ease);
}
.logo-tile:hover,
.logo-tile:focus-visible {
  transform: translateY(-3px);
  background-color: rgb(255 255 255 / 0.86);
}
.logo-tile:hover img,
.logo-tile:focus-visible img {
  filter: none;
  opacity: 1;
}
@media (hover: none) {
  .logo-tile img {
    filter: none;
    opacity: 1;
  }
}

/* ---------- partners ---------- */

/* added by the user (2026-10-01): Oracle and CORIS in full colour and linked,
   side by side across the logo grid's width wherever there is room, one above
   the other on phones (user steer, 2026-10-02); it shares Reference's split
   and sits closer to it */
.partners {
  margin-top: clamp(72px, 8vw, 120px);
}
.partners-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px 56px;
  align-items: start;
}
.partners h2 {
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.04em;
}
.partner-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partner-tile {
  display: grid;
  place-items: center;
  height: 108px;
  padding: 22px 32px;
  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;
}
.partner-tile img {
  width: auto;
  height: var(--h, 29px);
  max-width: 100%;
  object-fit: contain;
}
.partner-tile:hover,
.partner-tile:focus-visible {
  transform: translateY(-3px);
  background-color: rgb(255 255 255 / 0.86);
}

/* ---------- 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;
}
/* where the two traces meet, the signal: an orange node with a soft ring
   (the stroke, painted under the fill) */
.pnode {
  fill: var(--orange);
  stroke: rgb(247 148 29 / 0.3);
  stroke-width: 6px;
  paint-order: stroke;
}
/* 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;
}
/* three frosted cards over the lower third of the word, each its own pane
   (the fax went, user steer 2026-10-01) */
.contact-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 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;
}

/* ---------- product pages ----------
   added by the user (2026-10-02): a page for each product, built from its
   flyer. The same world as the home page: the corner chrome, the light field,
   glass lit from the top left, 1px traces with nodes. A trace comes in from
   the left edge to a node beside the product's name and runs on down the
   left margin as the page's rail, through a node at every block. The rail
   leads the reader (user steer, 2026-10-04): a data packet, the hero's own,
   flows down it ahead of them, lighting the rail behind it, and each node it
   reaches lights before its block comes into focus (main.js routes the rail
   and moves the packet). The pages are written by tools/build-product-pages.py */

.p-main {
  --rail-x: 18px;
  --h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem);
  --h3: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);
  --lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --panel-pad: clamp(26px, 2.8vw, 38px);
  --panel-title: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  --p-icon: 44px;
  position: relative;
}
/* the rail: from the node beside the name to the last block's node. Its
   faint line shows the way on; the lit line over it is the way come, drawn
   by the packet (main.js scales it). Where the packet does not run, the rail
   stands lit end to end */
.p-main::before,
.p-rail {
  position: absolute;
  top: var(--rail-top, 0);
  left: calc(-1 * var(--rail-x) - 0.5px);
  width: 1px;
  height: var(--rail-h, 0);
  pointer-events: none;
}
.p-main::before {
  content: "";
  background: rgb(0 84 164 / 0.14);
}
.p-rail {
  background: linear-gradient(180deg, rgb(40 120 200 / 0.5), rgb(40 120 200 / 0.92));
  transform-origin: 50% 0;
}
/* the packet at the head of the lit line: the card trace's 7px orange
   node, glowing with the hero packets' orange light */
.p-rail-head {
  position: absolute;
  top: calc(var(--rail-top, 0px) - 11px);
  left: calc(-1 * var(--rail-x) - 11px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--orange) 3.5px, rgb(247 148 29 / 0.42) 4.5px, rgb(247 148 29 / 0.14) 62%, rgb(247 148 29 / 0));
  opacity: 0;
  transition: opacity 0.6s ease;
}
.p-main.is-live .p-rail-head.is-on {
  opacity: 1;
}
/* a node on the rail: a white ring whose core is the product's dot */
.p-node {
  position: absolute;
  z-index: 1;
  top: calc(var(--node-y, 0px) - 8.5px);
  left: calc(-1 * var(--rail-x) - 8.5px);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  box-shadow: inset 0 0 0 1.2px rgb(0 84 164 / 0.34);
  pointer-events: none;
}
.p-node::after {
  content: "";
  position: absolute;
  inset: 5.1px;
  border-radius: 50%;
  background: var(--c);
}
/* the ring of light a node gives off once, as it lights: the signal's orange */
.p-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.2px rgb(247 148 29 / 0.85);
  opacity: 0;
}

/* the opening: the name, then the line under it and the intro beside the
   product's picture. The name always fits on one line: the generator sets
   --title-em, its width in em */
.p-hero {
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(40px, 8vh, 84px));
}
.p-title {
  --node-y: 0.5em;
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: min(4.75rem, 8vw + 0.75rem, (100vw - 2 * var(--gutter)) / var(--title-em, 10.6));
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
/* the lead-in, from the screen's left edge to the node beside the name */
.p-title::before {
  content: "";
  position: absolute;
  top: 0.5em;
  right: calc(100% + var(--rail-x) + 8.5px);
  width: calc((100vw - min(var(--container), 100vw - 2 * var(--gutter))) / 2 - var(--rail-x) - 8.5px);
  height: 1px;
  margin-top: -0.5px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(72 152 228 / 0), rgb(40 120 200 / 0.9));
}
.p-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 36px clamp(32px, 4.6vw, 64px);
  margin-top: clamp(26px, 3.6vw, 48px);
}
.p-hero-grid--short {
  align-items: center;
}
.p-tagline {
  font-size: clamp(1.0625rem, 0.96rem + 0.45vw, 1.375rem);
  font-weight: 520;
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.p-intro {
  max-width: 58ch;
  margin-top: 18px;
  color: var(--ink-2);
  line-height: 1.65;
  text-wrap: pretty;
}
.p-intro + .p-intro {
  margin-top: 12px;
}

/* the product's picture on a sheet of the product cards' glass, over a
   placed bloom of dot light so the glass has something to frost */
.p-media {
  position: relative;
  isolation: isolate;
  margin: 0;
}
.p-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -10%;
  pointer-events: none;
  background: radial-gradient(50% 56% at 52% 52%, rgb(72 152 228 / 0.3), rgb(120 188 252 / 0.14) 60%, transparent 78%);
}
.p-media-card {
  --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%);
  padding: 14px;
  border-radius: var(--r-xl);
}
.p-shot {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 14px);
  background: #fff;
}
.p-shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* white-ground pictures on the plain mat, as on the cards */
.p-shot--mat {
  aspect-ratio: var(--ar, 16 / 10);
  background: linear-gradient(165deg, #f3f8fe 0%, #dcebfb 100%);
}
.p-shot--mat img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
  object-position: var(--pos, 50% 50%);
  mix-blend-mode: multiply;
}
.p-shot--photo {
  aspect-ratio: var(--ar, 3 / 2);
}
.p-shot--photo img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* the app's own screens, each in a navy phone, the middle one raised */
.p-shot--phones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 22px);
  padding: clamp(26px, 3.4vw, 42px) clamp(14px, 2vw, 26px);
  background: linear-gradient(165deg, #f3f8fe 0%, #dcebfb 100%);
}
.p-phone {
  flex: 0 1 31%;
  max-width: 196px;
  margin: 0;
  padding: 6px;
  border-radius: 24px;
  background: var(--navy-fill);
  box-shadow:
    0 1px 2px rgb(3 58 126 / 0.18),
    0 18px 34px -16px rgb(3 58 126 / 0.55);
}
.p-shot .p-phone img {
  border-radius: 18px;
}
.p-phone:nth-child(2) {
  translate: 0 -14px;
}
/* DIA greets the visitor in its flyer's own words */
.p-bubble {
  position: absolute;
  z-index: 1;
  top: clamp(14px, 2vw, 24px);
  left: clamp(14px, 2vw, 24px);
  max-width: min(62%, 290px);
  margin: 0;
  padding: 13px 18px 14px;
  border-radius: 20px 20px 20px 6px;
  background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgb(3 58 126 / 0.08),
    0 14px 28px -16px rgb(3 58 126 / 0.5);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: balance;
}
.p-bubble strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* the blocks of the page, each with its node on the rail at its first line */
.p-block {
  --node-y: calc(var(--h2) * 0.55);
  position: relative;
  margin-top: clamp(84px, 10vw, 136px);
}
.p-block > h2,
.p-split h2 {
  max-width: 26ch;
  font-size: var(--h2);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.p-block-intro,
.p-prose p {
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-wrap: pretty;
}
.p-block-intro {
  margin-top: 16px;
}
.p-prose {
  margin-top: 18px;
}
.p-prose p + p {
  margin-top: 12px;
}
/* a block that opens with a lead instead of a heading */
.p-block--lead {
  --node-y: calc(var(--lead) * 0.75);
  margin-top: clamp(64px, 8vw, 104px);
}
.p-lead p {
  max-width: 60ch;
  font-size: var(--lead);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.p-lead p + p {
  margin-top: 14px;
  color: var(--ink-2);
}
/* blocks headed by their items' own titles */
.p-block--bare {
  --node-y: calc(var(--h3) * 0.6);
}
.p-block--panels-bare {
  --node-y: calc(var(--panel-pad) + 1px + var(--panel-title) * 0.575);
}

/* lists set with the product trace's node as their bullet */
.p-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(32px, 4.6vw, 64px);
}
.p-list--one {
  columns: auto;
}
.p-list li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 26px;
  line-height: 1.5;
  break-inside: avoid;
  text-wrap: pretty;
}
.p-list li::before,
.p-item-title::before {
  content: "";
  position: absolute;
  top: calc(0.75em - 3.5px);
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px rgb(0 84 164 / 0.12);
}
.p-sublists,
.p-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 4.6vw, 64px);
}
.p-sublists {
  margin-top: 28px;
}
.p-sublists h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.p-sublists .p-list,
.p-split .p-list {
  margin-top: 16px;
}

/* short names as glass chips; one fact set apart, wired in by its node */
.p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.p-chips li,
.bus-modules span,
.p-other {
  border: 1px solid rgb(255 255 255 / 0.9);
  background:
    radial-gradient(130% 90% at 0% 0%, rgb(255 255 255 / 0.6), transparent 55%),
    rgb(255 255 255 / 0.66);
  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);
}
.p-chips li {
  padding: 9px 16px 10px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.p-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-top: 26px;
  padding: 16px 24px 16px 18px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 140% at 0% 50%, rgb(120 188 252 / 0.34), transparent 72%),
    var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.p-callout::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 3.4px, #fff 3.7px 7.2px, rgb(0 84 164 / 0.34) 7.4px 8.5px, transparent 8.6px);
}

/* items with a title and their text: no containers, the titles carry the
   product's node */
.p-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: clamp(36px, 4vw, 52px) clamp(32px, 4.6vw, 64px);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.p-block--bare .p-grid {
  margin-top: 0;
}
.p-item-title {
  position: relative;
  padding-left: 24px;
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.p-item-title::before {
  top: calc(0.6em - 3.5px);
}
.p-item p {
  margin-top: 10px;
  padding-left: 24px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
/* items that carry their flyer's own icon in place of the node: DIA's four
   features (user steer, 2026-10-06). The flyer's white line icons on its
   orange discs, lit from the top left, beside the title and its text as the
   flyer sets them; the rail's node stands level with the first disc */
.p-item--icon {
  display: grid;
  grid-template-columns: var(--p-icon) minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
}
.p-icon {
  grid-row: span 2;
  width: var(--p-icon);
  height: var(--p-icon);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(80% 80% at 28% 18%, rgb(255 255 255 / 0.24), transparent 62%),
    var(--orange);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 1px 2px rgb(3 58 126 / 0.12),
    0 10px 20px -10px rgb(3 58 126 / 0.45);
}
.p-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.p-item--icon .p-item-title,
.p-item--icon p {
  grid-column: 2;
  padding-left: 0;
}
.p-item--icon .p-item-title::before {
  content: none;
}
.p-block--icons {
  --node-y: calc(var(--p-icon) / 2);
}

/* sub-products and roles on sheets of glass, each led by its own dot */
.p-panels {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.p-block--panels-bare .p-panels {
  margin-top: 0;
}
.p-panel {
  padding: var(--panel-pad);
  border-radius: var(--r-xl);
}
.p-panel-title {
  font-size: var(--panel-title);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.028em;
}
.p-panel-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(11 29 56 / 0.12);
  vertical-align: 0.14em;
}
.p-panel-role {
  margin-top: 10px;
  font-size: 1.0625rem;
  font-weight: 520;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.p-panel p:not(.p-panel-role) {
  margin-top: 12px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.p-panel .p-list {
  margin-top: 14px;
  columns: auto;
}
.p-panel .p-list li {
  margin-bottom: 9px;
}
.p-after {
  max-width: 64ch;
  margin-top: 24px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* itbs.:Insurance's subsystems wired to its core: a bus runs out of the core,
   and every module branches off it on a straight 1px line that meets the bus
   in a node, alternately above and below it */
.bus {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  margin-top: 40px;
}
.bus-core {
  position: relative;
  z-index: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--navy-fill);
  box-shadow: var(--navy-shadow);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.bus-core .product-prefix {
  color: #9fd0ff;
}
.bus-modules {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: auto 64px auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bus-modules::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  height: 1.3px;
  /* from the core to the last module's node, at the centre of the last slot */
  margin-right: 10%;
  background: linear-gradient(90deg, rgb(40 120 200 / 0.95), rgb(72 152 228 / 0.5));
}
.bus-modules li {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 4px;
}
.bus-modules li:nth-child(odd) {
  grid-row: 1;
  align-items: flex-end;
}
.bus-modules li:nth-child(even) {
  grid-row: 3;
  align-items: flex-start;
}
.bus-modules li:nth-child(1) { grid-column: 1 / span 2; }
.bus-modules li:nth-child(2) { grid-column: 2 / span 2; }
.bus-modules li:nth-child(3) { grid-column: 3 / span 2; }
.bus-modules li:nth-child(4) { grid-column: 4 / span 2; }
.bus-modules li:nth-child(5) { grid-column: 5 / span 2; }
.bus-modules li:nth-child(6) { grid-column: 6 / span 2; }
.bus-modules li:nth-child(7) { grid-column: 7 / span 2; }
.bus-modules li:nth-child(8) { grid-column: 8 / span 2; }
.bus-modules li:nth-child(9) { grid-column: 9 / span 2; }
.bus-modules span {
  max-width: 100%;
  padding: 10px 16px 11px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}
/* the branch, from the module to the bus, and its node on the bus */
.bus-modules li::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 32px;
  background: rgb(40 120 200 / 0.55);
}
.bus-modules li:nth-child(odd)::after {
  top: 100%;
}
.bus-modules li:nth-child(even)::after {
  bottom: 100%;
}
.bus-modules li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 2.4px, #fff 2.7px 4.8px, rgb(0 84 164 / 0.36) 5px 6px, transparent 6.1px);
}
.bus-modules li:nth-child(odd)::before {
  top: calc(100% + 26px);
}
.bus-modules li:nth-child(even)::before {
  bottom: calc(100% + 26px);
}

/* itbs.:MobilniProcenitelj's process, node by node along one trace */
.steps {
  --gap: 18px;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 0 var(--gap);
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  position: relative;
  padding-top: 36px;
  text-align: center;
}
.step-node {
  position: absolute;
  top: 0;
  left: calc(50% - 8.5px);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  box-shadow: inset 0 0 0 1.2px rgb(0 84 164 / 0.34);
}
.step-node::after {
  content: "";
  position: absolute;
  inset: 5.1px;
  border-radius: 50%;
  background: var(--sc);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(50% + 8.5px);
  width: calc(100% + var(--gap) - 17px);
  height: 1px;
  background: linear-gradient(90deg, var(--sc), var(--sc-next, var(--sc)));
}
.step-name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.step-text {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: balance;
}

/* the other products, each a pill with its dot and the way to its page */
.p-others-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.p-other {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 9px 8px 20px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 550;
  letter-spacing: -0.012em;
  text-decoration: none;
  transition: translate 0.7s var(--ease), background-color 0.5s ease;
}
.p-other::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oc);
  box-shadow: inset 0 0 0 1px rgb(11 29 56 / 0.12);
}
.p-other .product-prefix {
  font-weight: 460;
}
.p-other:hover,
.p-other:focus-visible {
  translate: 0 -3px;
  background-color: rgb(255 255 255 / 0.86);
}
.p-other-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: var(--navy-fill);
  box-shadow: var(--navy-shadow);
  transition: translate 0.6s var(--ease), scale 0.12s ease, color 0.3s ease;
}
.p-other-icon .icon {
  width: 16px;
  height: 16px;
}
.p-other:hover .p-other-icon {
  translate: 3px 0;
  color: var(--orange);
}
.p-other:active .p-other-icon {
  scale: 0.94;
}
/* under the other products, the way back to the home page (user steer,
   2026-10-03), and the weightiest thing in the block (user steer,
   2026-10-04: more important than the other products): the primary button,
   mirrored, its disc first with the arrow turned back */
.p-home {
  margin-top: 32px;
}
.btn--back {
  padding: 0 26px 0 9px;
}
.btn--back .icon {
  scale: -1 1;
}
.btn--back:hover .btn-icon {
  transform: translateX(-2px);
}
.page-product .contact {
  margin-top: clamp(96px, 11vw, 152px);
}
/* the picture's bloom reaches past the column; past the screen's edge it
   must not widen the page (the rail and the lead-in in the margin stay) */
.page-product main {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .page-product main {
    overflow-x: hidden;
  }
}

@media (max-width: 1099.98px) {
  .p-panels--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 959.98px) {
  .p-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the bus stands up (user steer, 2026-10-06: the stacked list read as
     loose bullets beside an empty page). It is the desktop bus turned
     through 90°: the core on top, centred, a spine down from it, and the
     modules alternately left and right of it, each half a step below the
     last, so neighbours on opposite sides overlap as they do above and below
     the bus on desktop. Every branch has the same length, from the chip's
     inner edge to its node on the spine. Phones keep one side (below) */
  .bus {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .bus-modules {
    --spine: 56px;
    grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 8px;
    width: 100%;
    margin-top: 0;
    padding-top: 22px;
  }
  /* the spine, from the core to the last module's node: with no grid area
     of its own, the whole list is its containing block, and it stretches
     between its insets (the desktop bus's centring would shrink it to
     nothing) */
  .bus-modules::before {
    grid-row: auto;
    grid-column: auto;
    align-self: stretch;
    position: absolute;
    top: 0;
    bottom: 21px;
    left: 50%;
    width: 1.3px;
    height: auto;
    margin: 0 0 0 -0.65px;
    background: linear-gradient(180deg, rgb(40 120 200 / 0.95), rgb(72 152 228 / 0.5));
  }
  .bus-modules li,
  .bus-modules li:nth-child(n) {
    align-items: center;
    padding: 0;
  }
  .bus-modules li:nth-child(odd) {
    grid-column: 1;
    justify-content: flex-end;
  }
  .bus-modules li:nth-child(even) {
    grid-column: 3;
    justify-content: flex-start;
  }
  .bus-modules li:nth-child(1) { grid-row: 1 / span 2; }
  .bus-modules li:nth-child(2) { grid-row: 2 / span 2; }
  .bus-modules li:nth-child(3) { grid-row: 3 / span 2; }
  .bus-modules li:nth-child(4) { grid-row: 4 / span 2; }
  .bus-modules li:nth-child(5) { grid-row: 5 / span 2; }
  .bus-modules li:nth-child(6) { grid-row: 6 / span 2; }
  .bus-modules li:nth-child(7) { grid-row: 7 / span 2; }
  .bus-modules li:nth-child(8) { grid-row: 8 / span 2; }
  .bus-modules li:nth-child(9) { grid-row: 9 / span 2; }
  .bus-modules li:nth-child(n)::after {
    top: 50%;
    bottom: auto;
    width: calc(var(--spine) / 2);
    height: 1px;
  }
  .bus-modules li:nth-child(odd)::after {
    left: 100%;
  }
  .bus-modules li:nth-child(even)::after {
    left: auto;
    right: 100%;
  }
  .bus-modules li:nth-child(n)::before {
    top: calc(50% - 6px);
    bottom: auto;
  }
  .bus-modules li:nth-child(odd)::before {
    left: calc(100% + var(--spine) / 2 - 6px);
  }
  .bus-modules li:nth-child(even)::before {
    left: calc(var(--spine) / -2 - 6px);
  }
  /* the process runs down the page instead of across it */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .steps li {
    padding: 0 0 0 38px;
    text-align: left;
  }
  .step-node {
    left: 0;
  }
  .steps li:not(:last-child)::after {
    top: 17px;
    left: 8px;
    width: 1px;
    height: calc(100% + 24px - 17px);
    background: linear-gradient(180deg, var(--sc), var(--sc-next, var(--sc)));
  }
}
/* no room in the margin for the rail on phones: the blocks stand alone */
@media (max-width: 767.98px) {
  .p-main::before,
  .p-rail,
  .p-rail-head,
  .p-node,
  .p-title::before {
    display: none;
  }
  .p-list {
    columns: auto;
  }
  .p-grid,
  .p-sublists,
  .p-split,
  .p-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* phones keep the spine in the middle with a module either side, as on
   tablets (user steer, 2026-10-06; they had one side). To fit, the spine
   narrows and the chips get smaller: their text follows the screen's width,
   so every name holds one line from 360px wide; narrower than that a long
   name wraps onto a second line inside its chip */
@media (max-width: 639.98px) {
  .bus-modules {
    --spine: 34px;
    row-gap: 7px;
    padding-top: 18px;
  }
  .bus-modules span {
    padding: 8px 9px 9px;
    border-radius: var(--r-lg);
    font-size: clamp(12px, 3.3vw, 14px);
  }
}

/* ---------- 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;
}
/* underlined on hover in orange, like the logo's own line */
.footer-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange-ink);
}
/* every product's page, from every page (user steer, 2026-10-02); each name
   wears its itbs.: prefix in Logo Blue, the current page's in ink */
.footer-products {
  width: 100%;
}
.footer-products ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-products a {
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
}
.footer-products .product-prefix {
  font-weight: 460;
}
.footer-products a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange-ink);
}
.footer-products a[aria-current="page"] {
  color: var(--ink);
  font-weight: 550;
}
.footer-copy {
  width: 100%;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* ---------- consent ----------
   added by the user (2026-10-07): Google Analytics runs only after the visitor
   accepts (assets/js/analytics.js). A small sheet of glass in the bottom-left
   corner, over the light field: one sentence and the two answers, nothing
   more (user steer, 2026-10-07: accept and decline only, no cookie page). The
   answers are equal light pills, so declining is as easy as accepting. It
   comes into focus once, after the opening has landed, and goes when
   answered; until then it holds nothing up */
.consent {
  position: fixed;
  z-index: 30;
  left: var(--gutter);
  bottom: clamp(16px, 2.4vw, 28px);
  width: min(392px, 100% - 2 * var(--gutter));
  padding: 20px 20px 20px 22px;
  border-radius: var(--r-lg);
}
.consent-text {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.consent-btn {
  justify-content: center;
  padding: 0 18px;
  border: 0;
  cursor: pointer;
}
@media (pointer: coarse) {
  .consent-btn {
    height: 44px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .consent {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.9s ease, translate 1.2s var(--ease);
  }
  .consent > * {
    filter: blur(6px);
    transition: filter 1.2s var(--ease) 0.1s;
  }
  .consent.is-in {
    opacity: 1;
    translate: 0 0;
  }
  .consent.is-in > * {
    filter: none;
  }
  .consent.is-out {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.45s ease, translate 0.6s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .consent.is-out {
    opacity: 0;
  }
}
@media (max-width: 639.98px) {
  .consent {
    left: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 18px;
  }
}

/* ---------- 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],
  .motion-ready .partner-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;
  }
  /* the orange node where they meet lights as the traces reach it */
  .motion-ready .contact-panel .pnode {
    opacity: 0;
  }
  .motion-ready .contact-panel.is-in .pnode {
    opacity: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: node-in 1.4s var(--ease) 1.5s both;
  }
  .motion-ready [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
    clip-path: inset(0 0 0 0 round var(--r-xl));
  }
  /* twenty years comes into focus, the figure first (counting up), then the
     words; the band takes no clip (a rounded clip would cut the corner of the
     2, and the traces run past its edges). The circuit powers up with it: the
     drop and the edge trace draw in, the node beside "iskustva" lights as
     they reach it, the link runs on to the words, and its node lights as the
     count lands on 20 */
  .motion-ready .experience[data-reveal] > .experience-figure,
  .motion-ready .experience[data-reveal] > .experience-words {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1.2s ease, filter 1.4s var(--ease);
  }
  .motion-ready .experience[data-reveal] > .experience-words {
    transition-delay: 0.25s;
  }
  .motion-ready .experience[data-reveal].is-in > .experience-figure,
  .motion-ready .experience[data-reveal].is-in > .experience-words {
    opacity: 1;
    filter: none;
  }
  .motion-ready .experience[data-reveal].is-in {
    clip-path: none;
  }
  .motion-ready .experience .xtrace {
    stroke-dashoffset: 1;
  }
  .motion-ready .experience.is-in .xtrace--drop,
  .motion-ready .experience.is-in .xtrace--edge {
    animation: draw 1.3s var(--ease) 0.1s forwards;
  }
  .motion-ready .experience.is-in .xtrace--link {
    animation: draw 1.1s var(--ease) 1.05s forwards;
  }
  .motion-ready .experience .xnode {
    opacity: 0;
  }
  .motion-ready .experience.is-in .xnode {
    opacity: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: node-in 1.4s var(--ease) 0.95s both;
  }
  .motion-ready .experience.is-in .xnode--b {
    animation-delay: 1.9s;
  }
  /* the + waits for the count and comes into focus as it lands on 20 (the
     script sets .has-count only where the count runs) */
  .experience.has-count .experience-plus {
    opacity: 0;
    scale: 0.4;
  }
  .experience.has-count .experience-plus.is-on {
    opacity: 1;
    scale: 1;
    transition: opacity 0.5s ease, scale 0.9s var(--ease);
  }

  /* product pages: the opening comes into focus line by line, the picture
     rises after it. Meanwhile the lead-in draws itself from the screen's
     edge into the name's node, which lights; then the packet sets off down
     the rail (main.js, at 1.05s). A block's node waits unlit on the faint
     rail, lights as the packet reaches it, and the block's content comes
     into focus behind it, its heading first. The node itself never fades:
     the way on stays in view */
  .js .p-title,
  .js .p-hero-text > * {
    animation: rise 1.3s var(--ease) 0.04s backwards;
  }
  .js .p-title::before {
    transform-origin: 0 50%;
    animation: lead-in 0.9s var(--ease) 0.25s backwards;
  }
  .js .p-title .p-node::after {
    animation: core-on 0.7s var(--ease) 0.95s backwards;
  }
  .js .p-title .p-node::before {
    animation: node-halo 1.2s var(--ease) 0.95s;
  }
  .js .p-rail {
    transform: scaleY(0);
  }
  .js .p-block .p-node::after {
    scale: 0;
    transition: scale 0.7s var(--ease);
  }
  .js .p-block .p-node.is-lit::after {
    scale: 1;
  }
  .js .p-block .p-node.is-lit::before {
    animation: node-halo 1.2s var(--ease);
  }
  .js .p-hero-text > :nth-child(1) {
    animation-delay: 0.16s;
  }
  .js .p-hero-text > :nth-child(2) {
    animation-delay: 0.26s;
  }
  .js .p-hero-text > :nth-child(n + 3) {
    animation-delay: 0.34s;
  }
  .js .p-media {
    animation: media-in 1.6s var(--ease) 0.3s backwards;
  }
  /* hidden at once (a block the script hides must not be seen fading out),
     revealed on a transition */
  .motion-ready .p-block[data-reveal] > :not(.p-node) {
    opacity: 0;
    translate: 0 26px;
  }
  .motion-ready .p-block[data-reveal].is-in > :not(.p-node) {
    opacity: 1;
    translate: 0 0;
    transition: opacity 1.2s ease 0.12s, translate 1.4s var(--ease) 0.12s;
  }
  .motion-ready .p-block[data-reveal].is-in > :not(.p-node, h2) {
    transition-delay: 0.24s;
  }
  /* no clip on a block: its node sits outside it, in the margin */
  .motion-ready .p-block[data-reveal].is-in {
    clip-path: none;
  }
  /* the core powers its bus, then its modules light along it */
  .motion-ready .p-block .bus-modules::before {
    scale: 0 1;
    transform-origin: 0 50%;
    transition: scale 1.4s var(--ease) 0.3s;
  }
  .motion-ready .p-block.is-in .bus-modules::before {
    scale: 1 1;
  }
  .motion-ready .p-block .bus-modules li {
    opacity: 0;
    transition: opacity 0.9s ease calc(0.55s + var(--i) * 90ms);
  }
  .motion-ready .p-block.is-in .bus-modules li {
    opacity: 1;
  }
  /* the process runs once, node by node */
  .motion-ready .p-block .step-node::after {
    scale: 0;
    transition: scale 0.6s var(--ease) calc(0.5s + var(--i) * 0.24s);
  }
  .motion-ready .p-block .steps li:not(:last-child)::after {
    scale: 0 1;
    transform-origin: 0 50%;
    transition: scale 0.5s var(--ease) calc(0.62s + var(--i) * 0.24s);
  }
  .motion-ready .p-block.is-in .step-node::after,
  .motion-ready .p-block.is-in .steps li:not(:last-child)::after {
    scale: 1;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 959.98px) {
  .motion-ready .p-block .steps li:not(:last-child)::after,
  .motion-ready .p-block .bus-modules::before {
    scale: 1 0;
    transform-origin: 50% 0;
  }
}
@keyframes media-in {
  from {
    opacity: 0;
    translate: 0 30px;
  }
}
@keyframes lead-in {
  from {
    scale: 0 1;
  }
}
@keyframes core-on {
  from {
    scale: 0;
  }
}
@keyframes node-halo {
  from {
    opacity: 0.9;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.6;
  }
}

@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);
  }
  .stage-flash {
    background: 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,
  .stage-flash {
    -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;
  }
}

/* three across needs room for the phone number on one line; below that,
   two across with the e-mail card running the full width under them */
@media (max-width: 899.98px) {
  .contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-list > li:last-child {
    grid-column: 1 / -1;
  }
}

/* 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"],
  .slide[data-pos="3"] {
    transform: translateX(calc(var(--ring-step) * 2)) translateY(var(--ring-lift)) scale(var(--ring-scale));
  }
  .slide[data-pos="-2"],
  .slide[data-pos="-3"] {
    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,
  .partners-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .experience {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .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;
  }
}

/* the six product names need about 800px in one row (user steer,
   2026-10-02), more than a tablet has: below 960px, where the ring takes
   over, the tabs become its pager, the six dots with the current one
   stretched, each name kept as the button's accessible name */
@media (max-width: 959.98px) {
  .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;
  }
}

@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;
  }
  .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;
  }
  /* two across on phones; an odd last logo would take a full-width tile */
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .logo-grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .partner-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .partner-tile {
    height: 96px;
  }
  .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,
  .p-rail-head,
  .consent,
  .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;
  }
  .experience .xtrace {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  [data-reveal],
  .p-block > *,
  .experience-plus,
  .contact-org,
  .contact-panel .pnode,
  .experience > *,
  .experience .xnode {
    opacity: 1 !important;
    translate: none !important;
    clip-path: none !important;
    filter: none !important;
  }
  .experience-plus {
    scale: none !important;
  }
  /* a product page prints with its rail drawn and every node lit */
  .p-rail {
    transform: none !important;
  }
  .p-node::after {
    scale: 1 !important;
  }
}