/* ==========================================================================
   QuadricIT design system
   Palette: deep navy ink, ivory text and antique gold accents, with the company's own
   blue (#0060c8) and green (#7ac21b) from the logo for secondary accents and live states.
   Type: Unbounded for hero headlines and standout numbers, Syne for headings, navigation,
   buttons and body, Fraunces for accent phrases.
   ========================================================================== */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin.edd24a2b43a9.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/syne-latin.06dac3d9f8a5.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.5d2835174326.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.be1b7d1cec18.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink-950: #04060e;
  --ink-900: #060b1a;
  --ink-850: #0a1126;
  --ink-800: #0f1833;
  --ink-700: #162344;
  --ink-600: #213258;
  --line-dark: rgba(234, 214, 166, 0.13);
  --line-dark-strong: rgba(234, 214, 166, 0.24);
  --text-on-dark: #f3ece0;
  --muted-on-dark: #aab4c8;

  /* Dark glass over the 3D background (see "Site background" below). */
  --paper: transparent;
  --paper-2: transparent;
  --surface: rgba(10, 17, 38, 0.6);
  --surface-strong: rgba(6, 11, 26, 0.92);
  --line: rgba(234, 214, 166, 0.15);
  --text: #f3ece0;
  --text-2: #dcd3c4;
  --muted: #a6b0c3;
  --link: #e6cf98;
  --link-hover: #f6e7c3;
  --glass: linear-gradient(160deg, rgba(234, 214, 166, 0.07), rgba(255, 255, 255, 0.012) 45%), rgba(8, 14, 31, 0.84);
  --glass-strong: linear-gradient(160deg, rgba(234, 214, 166, 0.06), rgba(255, 255, 255, 0.01) 50%), rgba(6, 11, 26, 0.9);
  /* Live backdrop blur is kept for the header, menus and drawer only: re-blurring many panels
     over the moving 3D background every frame makes scrolling stutter on high-DPI screens. */
  --glass-blur: none;
  --glass-border: rgba(234, 214, 166, 0.17);
  --glass-shine: inset 0 1px 0 rgba(255, 244, 214, 0.08);

  /* Accents: antique gold, and the company blue and green */
  --gold-300: #e6cf98;
  --gold-500: #c9a35c;
  --gold-700: #8f6c2f;
  --blue-100: rgba(0, 96, 200, 0.18);
  --blue-300: #7fb1ef;
  --blue-500: #0060c8;
  --blue-700: #0a3f86;
  --gold: #d7b46c;
  --gold-600: #b48d48;
  --cyan: #7fb1ef;
  --green-300: #a3d65c;
  --green-500: #7ac21b;
  --green-700: #4f8a0f;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 10px 30px -22px rgba(0, 0, 0, 0.7);
  --shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, 0.88);

  --font-hero: "Unbounded", "Syne", system-ui, sans-serif;
  --font-display: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Syne", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Fraunces", Georgia, "Times New Roman", serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html:has(.anchor-nav) { scroll-padding-top: calc(var(--header-h) + 76px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: #04060e;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: inherit;
  text-wrap: balance;
}
/* Hero headlines: Unbounded, medium to semibold, with generous spacing. Section headings: Syne. */
h1 { font-family: var(--font-hero); font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 500; letter-spacing: 0.005em; line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: 0; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
/* Fraunces italics for short accent phrases. */
.accent-serif, .hx-accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--gold-300); font-variation-settings: "opsz" 120, "SOFT" 50; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--surface-strong); color: var(--text); padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--shadow); font-weight: 600;
}
.skip-link:focus { top: 12px; }

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

.icon { flex: none; }

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

.section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }
/* Content sections are frosted glass bands (the scene stays visible, softened, behind the
   text); "dark" sections stay clear so the 3D background shows fully between them. Cards in a
   frosted band skip their own blur: the band has already softened what is behind them. */
.section--paper, .section--white, .section--tint {
  background: linear-gradient(180deg, rgba(6, 11, 25, 0.84), rgba(6, 11, 25, 0.76));
  border-block: 1px solid rgba(234, 214, 166, 0.07);
}
:is(.section--paper, .section--white, .section--tint) :is(.card, .list-cards li, .steps li, .form-card, .facts, .matrix__row, .bridge__row, .empty-state, .pager a, .pager span, .page-hero__media) {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.section--dark {
  background: radial-gradient(1000px 520px at 85% 0%, rgba(0, 96, 200, 0.16), transparent 60%),
    radial-gradient(800px 460px at 0% 100%, rgba(201, 163, 92, 0.08), transparent 60%);
  color: var(--text-on-dark);
}
.section--dark a:not(.btn) { color: var(--blue-300); }
.section--dark .muted, .section--dark .lead { color: var(--muted-on-dark); }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  max-width: none; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; justify-content: space-between;
}
.section-head--split > div { max-width: 720px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300);
  margin-bottom: 14px;
}
/* A small diamond marks eyebrows (a short line before them read as an em dash). */
.eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.section--dark .eyebrow, .page-hero .eyebrow { color: var(--gold-300); }
.eyebrow--gold { color: var(--gold) !important; }

.lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid--logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; }

.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.split--top { align-items: start; }

.stack > * + * { margin-top: 1rem; }

/* ----------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--blue-500); --btn-fg: #fff; --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-border);
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); color: var(--btn-fg); box-shadow: 0 10px 24px -10px rgba(0, 96, 200, 0.6); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--blue-500); }
.btn--primary:hover { --btn-bg: var(--blue-700); }
.btn--accent { --btn-bg: var(--gold-500); --btn-fg: #1a1206; }
.btn--accent:hover { --btn-bg: var(--gold-300); box-shadow: 0 10px 24px -10px rgba(201, 163, 92, 0.6); }
.btn--gold { --btn-bg: linear-gradient(135deg, var(--gold), var(--gold-600)); --btn-fg: #1a1206; background: linear-gradient(135deg, var(--gold), var(--gold-600)); }
.btn--outline { --btn-bg: rgba(255, 255, 255, 0.05); --btn-fg: var(--text); --btn-border: var(--glass-border); }
.btn--outline:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-border: rgba(230, 207, 152, 0.6); --btn-fg: #fff; box-shadow: none; }
.btn--ghost-dark { --btn-bg: rgba(255, 255, 255, 0.06); --btn-fg: var(--text-on-dark); --btn-border: rgba(255, 255, 255, 0.22); }
.btn--ghost-dark:hover { --btn-bg: rgba(255, 255, 255, 0.14); --btn-fg: #fff; box-shadow: none; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.88rem; }
.btn .icon { transition: transform 0.25s var(--ease); }
.btn:hover .icon--move { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-family: var(--font-display);
  text-decoration: none; font-size: 0.95rem;
}
.link-arrow .icon { transition: transform 0.25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ----------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 0.88rem; color: var(--text-2); line-height: 1.3;
}
.section--dark .chip, .card--dark .chip { background: rgba(255, 255, 255, 0.05); border-color: var(--line-dark); color: var(--text-on-dark); }
.chip--blue { background: var(--blue-100); border-color: rgba(230, 207, 152, 0.28); color: var(--link-hover); }
.chip--concept { background: rgba(215, 180, 108, 0.12); border-color: rgba(215, 180, 108, 0.4); color: #ecd9ad; }

/* ----------------------------------------------------------------- cards */
.card {
  position: relative; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--glass-shine), var(--shadow-sm);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--glass-shine), var(--shadow), 0 0 0 1px rgba(230, 207, 152, 0.18); border-color: rgba(230, 207, 152, 0.45); color: inherit; }
.card--link .link-arrow { margin-top: auto; padding-top: 14px; color: var(--link); }
.card--dark { color: var(--text-on-dark); }
.card--dark p { color: var(--muted-on-dark); }
.card--dark.card--link:hover { border-color: rgba(127, 177, 239, 0.5); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--blue-100); color: var(--link);
}
.card--dark .card__icon { background: rgba(127, 177, 239, 0.12); color: var(--blue-300); }
.card__icon--green { background: rgba(201, 163, 92, 0.14); color: var(--gold-300); }
.card__icon--gold { background: rgba(215, 180, 108, 0.16); color: var(--gold); }
.card__media { margin: calc(-1 * clamp(20px, 2.4vw, 28px)) calc(-1 * clamp(20px, 2.4vw, 28px)) 20px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink-850); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card--link:hover .card__media img { transform: scale(1.04); }
.card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.card__logo { height: 36px; width: auto; object-fit: contain; object-position: left center; margin-bottom: 18px; }

/* Numbered list cards */
.list-cards { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.list-cards li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 18px 20px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.list-cards li .icon { color: var(--gold-300); margin-top: 3px; grid-row: span 2; }
.list-cards strong { font-family: var(--font-display); font-weight: 600; }
.list-cards span { color: var(--muted); font-size: 0.95rem; }
.section--dark .list-cards li { border-color: var(--glass-border); }
.section--dark .list-cards span { color: var(--muted-on-dark); }
.section--dark .list-cards li .icon { color: var(--gold-300); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.steps li {
  counter-increment: step; position: relative; padding: 20px 20px 20px 64px; background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm); font-weight: 500;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 18px;
  font-family: var(--font-display); font-weight: 700; color: var(--link); font-size: 1rem;
}

/* ----------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  transition: background 0.35s, box-shadow 0.35s, color 0.35s, transform 0.35s var(--ease);
  color: var(--text);
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.72), rgba(10, 16, 30, 0.5));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 var(--glass-border), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.has-dark-hero .site-header:not(.is-solid) {
  background: linear-gradient(180deg, rgba(3, 7, 14, 0.72), rgba(3, 7, 14, 0));
  box-shadow: none; color: var(--text-on-dark); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand {
  display: inline-flex; align-items: center; flex: none; padding: 7px 12px; margin-left: 0;
  border-radius: 12px; background: #fff; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6); transition: background 0.3s, box-shadow 0.3s;
}
.has-dark-hero .site-header:not(.is-solid) .brand { background: #fff; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6); margin-left: 0; }
.brand img { height: 34px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px;
  color: inherit; text-decoration: none; font-weight: 500; font-size: 0.95rem; background: none; border: 0;
  font-family: inherit; cursor: pointer; line-height: 1.2;
}
.nav__link:hover, .nav__item.is-open > .nav__link { background: rgba(255, 255, 255, 0.08); color: inherit; }
.has-dark-hero .site-header:not(.is-solid) .nav__link:hover,
.has-dark-hero .site-header:not(.is-solid) .nav__item.is-open > .nav__link { background: rgba(255, 255, 255, 0.1); }
.nav__link[aria-current="page"], .nav__item.is-active > .nav__link { color: var(--gold-300); }
.has-dark-hero .site-header:not(.is-solid) .nav__item.is-active > .nav__link { color: var(--gold-300); }
.nav__link .icon { transition: transform 0.25s; opacity: 0.7; }
.nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }
.nav__cta { margin-left: 10px; }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
  min-width: 300px; padding: 10px; border-radius: var(--radius); background: var(--glass-strong); color: var(--text);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shine), var(--shadow-lg); opacity: 0; visibility: hidden;
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.nav__item.is-open > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text);
}
.dropdown a:hover { background: rgba(255, 255, 255, 0.06); color: var(--link-hover); }
.dropdown a strong { display: block; font-weight: 600; font-size: 0.95rem; }
.dropdown a span { display: block; font-size: 0.82rem; color: var(--muted); }

.mega {
  position: fixed; left: 50%; top: calc(var(--header-h) - 4px); transform: translate(-50%, 8px);
  width: min(100% - 2 * var(--gutter), 1180px); padding: 28px; border-radius: var(--radius-lg);
  background: var(--glass-strong); color: var(--text); border: 1px solid var(--glass-border); box-shadow: var(--glass-shine), var(--shadow-lg);
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; opacity: 0; visibility: hidden;
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega__col h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); margin: 0 0 10px; }
.mega__col h4 a { color: inherit; text-decoration: none; }
.mega__col ul { list-style: none; padding: 0; margin: 0; }
.mega__col li a {
  display: block; padding: 6px 8px; margin-left: -8px; border-radius: 8px; color: var(--text-2);
  text-decoration: none; font-size: 0.9rem; line-height: 1.35;
}
.mega__col li a:hover { background: rgba(255, 255, 255, 0.06); color: var(--link-hover); }
.mega__footer {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; font-size: 0.92rem; color: var(--muted);
}

.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08); color: #fff; align-items: center; justify-content: center; cursor: pointer;
}
.has-dark-hero .site-header:not(.is-solid) .nav-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); color: #fff; }

.drawer {
  position: fixed; inset: 0; z-index: 200; background: var(--surface-strong); color: var(--text);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  transform: translateX(100%); transition: transform 0.4s var(--ease); display: flex; flex-direction: column;
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); }
.drawer__head img { height: 30px; width: auto; }
.drawer__close { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.drawer__body { overflow-y: auto; padding: 10px var(--gutter) 40px; flex: 1; overscroll-behavior: contain; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary, .drawer__link {
  list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; cursor: pointer; color: var(--text); text-decoration: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer details[open] summary .icon { transform: rotate(180deg); }
.drawer__link { border-bottom: 1px solid var(--line); }
.drawer__sub { padding: 0 0 14px; }
.drawer__sub h5 { margin: 12px 0 4px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); }
.drawer__sub a { display: block; padding: 8px 0; color: var(--text-2); text-decoration: none; }
.drawer__cta { margin-top: 24px; display: grid; gap: 10px; }

/* ----------------------------------------------------------------- page hero */
.page-hero {
  position: relative; color: var(--text-on-dark); isolation: isolate;
  padding: calc(var(--header-h) + clamp(56px, 8vw, 110px)) 0 clamp(48px, 6vw, 88px);
}
.page-hero__inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.page-hero--media .page-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.page-hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); }
.page-hero__media {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; position: relative;
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shine), var(--shadow-lg);
  background: var(--glass); padding: 8px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-lg) - 8px); }
@media (max-width: 900px) { .page-hero--media .page-hero__inner { grid-template-columns: 1fr; } .page-hero__media { max-width: 560px; } }
.page-hero h1 { max-width: 16ch; }
.page-hero--wide h1 { max-width: 22ch; }
.page-hero .lead { color: var(--muted-on-dark); max-width: 62ch; }
.page-hero__logo { display: inline-flex; background: #fff; padding: 12px 18px; border-radius: 14px; margin-bottom: 22px; box-shadow: var(--shadow); }
.page-hero__logo img { height: 34px; width: auto; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; padding: 0; margin: 0 0 22px; font-size: 0.86rem; color: var(--muted-on-dark); }
.breadcrumb a { color: var(--muted-on-dark); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }

/* ----------------------------------------------------------------- facts / stats */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--glass-border); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow); }
.fact { background: rgba(8, 14, 31, 0.72); padding: 24px; }
.fact__value { font-family: var(--font-hero); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.25rem); letter-spacing: 0.01em; color: var(--gold-300); line-height: 1.1; }
.fact__label { font-size: 0.9rem; color: var(--muted-on-dark); margin-top: 6px; }
.facts--light .fact { background: rgba(8, 14, 31, 0.72); }
.facts--light .fact__value { color: #fff; }
.facts--light .fact__label { color: var(--muted); }

/* ----------------------------------------------------------------- logos */
.logo-tile {
  display: grid; place-items: center; height: 96px; padding: 16px 20px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.logo-tile img { max-height: 54px; max-width: 100%; width: auto; object-fit: contain; }
.logo-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.logo-tile figcaption { font-size: 0.78rem; color: #3f4a5e; text-align: center; line-height: 1.3; margin-top: 8px; }
.logo-tile--captioned { height: auto; min-height: 132px; align-content: center; gap: 8px; }

.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .logo-tile { width: 180px; flex: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ----------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--blue-500), var(--gold-500)); border-radius: 2px; }
.timeline li { position: relative; padding: 0 0 28px 48px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #0b1228; border: 3px solid var(--blue-500); }
.timeline__year { font-family: var(--font-display); font-weight: 700; color: var(--gold-300); font-size: 0.95rem; letter-spacing: 0.06em; }
.timeline h3 { margin: 2px 0 6px; }
.timeline p { color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- media blocks */
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink-850); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-pair .media-frame { margin: 0; aspect-ratio: 4 / 3; }
.media-frame figcaption, .caption { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }
.media-frame .concept-label { position: absolute; left: 14px; bottom: 14px; }
.concept-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(3, 7, 14, 0.72); color: #ecd9ad; border: 1px solid rgba(215, 180, 108, 0.4);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- CTA band */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px);
  color: var(--text-on-dark); border: 1px solid var(--glass-border); box-shadow: var(--glass-shine), var(--shadow-lg);
  background: radial-gradient(600px 300px at 90% 0%, rgba(201, 163, 92, 0.22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(0, 96, 200, 0.42), transparent 60%), rgba(8, 14, 31, 0.62);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center;
}
.cta-band h2 { margin-bottom: 0.3em; }
.cta-band p { color: var(--muted-on-dark); margin: 0; }
.cta-band .btn-row { justify-content: flex-end; }

/* ----------------------------------------------------------------- prose */
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--text-2); }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 1.8em 0 0.6em; color: var(--text); }
.prose h3 { font-size: 1.28rem; margin: 1.6em 0 0.5em; color: var(--text); }
.prose h4, .prose h5, .prose h6 { font-size: 1.08rem; margin: 1.4em 0 0.4em; color: var(--text); }
.prose img { border-radius: var(--radius-sm); margin: 1.6em auto; box-shadow: var(--shadow); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { text-align: center; font-size: 0.88rem; color: var(--muted); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold-500); color: var(--text); font-family: var(--font-accent); font-style: italic; font-size: 1.15em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0.35em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: rgba(255, 255, 255, 0.06); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* ----------------------------------------------------------------- forms */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.92rem; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1.5px solid var(--glass-border);
  border-radius: 12px; padding: 12px 14px; transition: border-color 0.2s, box-shadow 0.2s; min-height: 48px;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 4px rgba(124, 192, 200, 0.14); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; accent-color: var(--gold-500); }
.field--check label { font-weight: 400; color: var(--muted); }
.field .errorlist { list-style: none; padding: 0; margin: 0; color: #ff9b8f; font-size: 0.86rem; }
.field--error input, .field--error textarea, .field--error select { border-color: #ff6b5b; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 14px 18px; border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; }
.notice--success { background: rgba(34, 197, 94, 0.12); color: #9ff0bf; border: 1px solid rgba(34, 197, 94, 0.4); }
.notice--error { background: rgba(244, 63, 94, 0.12); color: #ffb3b8; border: 1px solid rgba(244, 63, 94, 0.4); }
.form-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--glass-shine), var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* ----------------------------------------------------------------- footer */
.site-footer {
  color: var(--muted-on-dark); padding: clamp(56px, 8vw, 96px) 0 32px; font-size: 0.95rem;
  background: linear-gradient(180deg, rgba(4, 8, 17, 0.82), rgba(4, 8, 17, 0.94));
  border-top: 1px solid var(--glass-border);
}
.site-footer a { color: var(--text-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold-300); }
.footer-top { display: grid; gap: 40px; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 1fr)); }
.footer-brand .brand { background: #fff; margin: 0 0 18px; }
.footer-brand p { max-width: 36ch; }
.footer-col__title { color: #fff; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-offices { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.footer-office__title { color: #fff; font-size: 0.95rem; margin: 0 0 6px; letter-spacing: 0; }
.footer-office p { margin: 0; font-size: 0.88rem; line-height: 1.55; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 0.86rem; }
.footer-credits { margin: 18px 0 0; font-size: 0.78rem; color: rgba(166, 181, 205, 0.75); line-height: 1.6; }
.footer-credits a { color: var(--muted-on-dark); text-decoration: underline; text-decoration-color: rgba(166, 181, 205, 0.4); }
.social { display: flex; gap: 8px; }
.social a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-dark); color: var(--text-on-dark); }
.social a:hover { border-color: var(--gold-300); color: var(--gold-300); }
.accreditations { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.accreditations img { height: 44px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; }

/* ----------------------------------------------------------------- misc components */
.anchor-nav { position: sticky; top: var(--header-h); z-index: 20; background: linear-gradient(180deg, rgba(6, 11, 26, 0.97), rgba(6, 11, 26, 0.93)); box-shadow: 0 12px 30px -24px rgba(0, 0, 0, 0.9); border-bottom: 1px solid var(--line); }
.anchor-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.anchor-nav ul::-webkit-scrollbar { display: none; }
.anchor-nav a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: var(--radius-pill); color: var(--text-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.anchor-nav a:hover, .anchor-nav a.is-active { background: var(--blue-100); color: var(--link-hover); }

.side-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.side-nav h4, .side-nav__title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.side-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.side-nav a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 0.92rem; }
.side-nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--link-hover); }
.side-nav a[aria-current="page"] { background: var(--blue-100); color: var(--link-hover); font-weight: 600; }

.layout-with-aside { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.layout-with-aside > aside { order: 2; }

.pager { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: 12px; border: 1px solid var(--glass-border); text-decoration: none; color: var(--text-2); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.pager .is-current { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-bar a { padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: rgba(8, 14, 31, 0.78); text-decoration: none; color: var(--text-2); font-size: 0.92rem; font-weight: 500; }
.filter-bar a.is-active { background: #f3ece0; color: #07101f; border-color: #f3ece0; }

.feature-article { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0; overflow: hidden; padding: 0; }
.feature-article .card__media { margin: 0; border-radius: 0; aspect-ratio: auto; min-height: 280px; }
.feature-article__body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }

.quote-card { border-left: 3px solid var(--gold-500); padding-left: 20px; font-family: var(--font-accent); font-style: italic; }

.industry-block { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.industry-block:first-child { border-top: 0; }
.industry-block__visual { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--ink-800), var(--ink-700)); display: grid; place-items: center; color: var(--blue-300); position: relative; }
.industry-block__visual img { width: 100%; height: 100%; object-fit: cover; }
.industry-block__visual .icon { width: 64px; height: 64px; opacity: 0.8; }

.case-study { display: grid; gap: 20px; }
.case-study__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case-study__cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.case-study__cols h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); }
.case-study__cols ul { padding-left: 1.1em; color: var(--muted); font-size: 0.95rem; }

.matrix { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.matrix__row { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.matrix__row h3 { color: #fff; margin-bottom: 10px; font-size: 0.98rem; }

.screens { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.screens figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }

.leader { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.leader__avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--gold-500)); }

.office-card { display: grid; gap: 6px; }
.office-card .chip { justify-self: start; }
.office-card address { font-style: normal; color: var(--muted); line-height: 1.55; }

.mention { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.mention:hover h3 { color: var(--link-hover); }
.mention h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.4; letter-spacing: 0; transition: color 0.2s; }
.mention span { font-size: 0.86rem; color: var(--muted); }

.empty-state { padding: 32px; border: 1px dashed var(--glass-border); border-radius: var(--radius); text-align: center; color: var(--muted); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* ----------------------------------------------------------------- site background
   Fixed 3D scene (neon city, server hall) behind every page, under a dark veil so text on
   and between the glass panels stays readable. The poster shows until the scene is ready. */
.site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #04060e; overflow: hidden; }
.site-bg__poster, .site-bg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-bg__poster { object-fit: cover; }
.site-bg__canvas { opacity: 0; transition: opacity 1.4s ease; }
.site-bg.is-ready .site-bg__canvas { opacity: 1; }
.site-bg__veil {
  position: absolute; inset: 0;
  background: radial-gradient(130% 90% at 50% 25%, rgba(3, 7, 15, 0.08), rgba(3, 7, 15, 0.55) 75%),
    linear-gradient(180deg, rgba(3, 7, 15, 0.3), rgba(3, 7, 15, 0.4));
}
main, .site-footer { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- product agents
   Each product is introduced by its own agent: the neural intelligence recoloured, on a
   holographic stage, "speaking" its explanation in chat bubbles. */
.agents { position: relative; padding-block: clamp(16px, 3vw, 40px) clamp(64px, 8vw, 112px); }
.agents__layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.agents__stage-wrap { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.agent-stage {
  --agent: #d9b45a;
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: calc(100vh - var(--header-h) - 130px); margin-inline: auto;
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--agent) 38%, transparent);
  background: radial-gradient(58% 58% at 50% 46%, color-mix(in srgb, var(--agent) 20%, transparent), transparent 72%), #060b1a;
  box-shadow: var(--glass-shine), 0 30px 90px -36px color-mix(in srgb, var(--agent) 55%, transparent), var(--shadow-lg);
  transition: border-color 0.8s, box-shadow 0.8s;
}
.agent-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s; }
.agent-stage.is-3d .agent-stage__canvas { opacity: 1; }
.agent-stage__orb {
  position: absolute; inset: 24%; border-radius: 50%; transition: background 0.8s, box-shadow 0.8s, opacity 0.9s ease;
  background: radial-gradient(circle at 42% 38%, #fff 0%, var(--agent) 16%, color-mix(in srgb, var(--agent) 38%, transparent) 46%, transparent 70%);
  box-shadow: 0 0 90px color-mix(in srgb, var(--agent) 60%, transparent);
}
/* The 3D agent cross-fades in over the placeholder orb (no blank frame between them). */
.agent-stage.is-3d .agent-stage__orb { opacity: 0; }
.agent-stage__hud {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--radius-pill); background: rgba(5, 9, 19, 0.62); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 0.8rem/1 var(--font-hero); letter-spacing: 0.06em; color: #fff;
}
.agent-stage__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--agent); box-shadow: 0 0 12px var(--agent); transition: background 0.8s; }
.agent-stage__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-stage__wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.agent-stage__wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--agent); opacity: 0.7; }
.agent-stage[data-speaking] .agent-stage__wave i { animation: agent-wave 0.62s ease-in-out infinite; }
.agent-stage__wave i:nth-child(2) { animation-delay: 0.12s; }
.agent-stage__wave i:nth-child(3) { animation-delay: 0.24s; }
.agent-stage__wave i:nth-child(4) { animation-delay: 0.08s; }
.agent-stage__wave i:nth-child(5) { animation-delay: 0.2s; }
@keyframes agent-wave { 0%, 100% { height: 4px; } 50% { height: 16px; } }

.agents__index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.agents__index a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border); background: rgba(8, 14, 31, 0.8); color: var(--text-2); text-decoration: none; font-size: 0.82rem;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.agents__index a:hover { color: #fff; }
.agents__index a.is-active { color: #fff; border-color: var(--agent); background: color-mix(in srgb, var(--agent) 14%, transparent); }
.agents__index-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--agent); }

.agents__talks { display: grid; }
.agent-talk { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-block: 6vh; }
.agent-talk__head { display: flex; align-items: center; gap: 14px; }
.agent-talk__logo { flex: none; display: inline-flex; background: #fff; border-radius: 12px; padding: 8px 12px; }
.agent-talk__logo img { height: 26px; width: auto; }
.agent-talk__title {
  margin: 0; font-family: var(--font-hero); font-size: clamp(1.45rem, 2.5vw, 2.15rem); letter-spacing: 0.02em; color: var(--agent);
  text-shadow: 0 0 26px color-mix(in srgb, var(--agent) 45%, transparent);
}
.agent-talk__role { margin: 6px 0 0; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.agent-talk__chat { display: grid; gap: 12px; }
.bubble {
  position: relative; padding: 16px 18px; border-radius: 4px 18px 18px 18px;
  background: var(--glass); border: 1px solid var(--glass-border); border-left: 2px solid var(--agent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shine), var(--shadow-sm);
}
.bubble p { margin: 0; }
.bubble--hello { font-size: 1.12rem; font-weight: 500; color: #fff; }
.bubble__label { margin: 0 0 8px !important; font: 600 0.7rem/1 var(--font-hero); letter-spacing: 0.14em; text-transform: uppercase; color: var(--agent); }
.bubble__why { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bubble__why li { position: relative; padding-left: 22px; }
.bubble__why li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 10px var(--agent); }
.btn--agent { --btn-bg: var(--agent); --btn-fg: #0d0904; white-space: normal; text-align: center; }
.btn--agent:hover { --btn-fg: #0d0904; box-shadow: 0 12px 30px -12px var(--agent); }
/* Streaming: once the script has prepared a talk, words appear as the agent speaks them. */
.is-streamable .bubble { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.is-streamable .bubble.is-on { opacity: 1; transform: none; }
.is-streamable .tok { opacity: 0; filter: blur(4px); transition: opacity 0.25s ease, filter 0.25s ease; }
.is-streamable .tok.is-shown { opacity: 1; filter: none; }
.is-streamable .bubble__why li:not(.is-on) { opacity: 0; }

/* Product page hero: the product's own agent next to the title. */
.agent-hero .agent-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.agent-stage--hero { max-width: 460px; max-height: none; }
.agent-talk--hero { min-height: 0; padding-block: clamp(28px, 4vw, 44px) 0; }
.agent-talk--hero .agent-talk__chat { grid-template-columns: 1fr 1.4fr 1.4fr; align-items: start; }

@media (max-width: 900px) {
  .agents__layout, .agent-hero .agent-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .agents__stage-wrap { top: calc(var(--header-h) + 8px); z-index: 2; }
  .agents .agent-stage { aspect-ratio: auto; height: 32vh; height: 32svh; }
  .agents__index { display: none; }
  .agent-talk { min-height: 64vh; padding-block: 4vh; }
  .agent-talk--hero .agent-talk__chat { grid-template-columns: 1fr; }
  .agent-stage--hero { max-width: 360px; }
}

/* Reveal-on-scroll (progressive: only hidden when JS marks the document). */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Cinematic story (home)
   Text lives in the top and bottom bands over soft dark edges; the 3D subject is
   framed in the clear middle of the screen. No cards or boxes.
   ========================================================================== */
:root { --bar-h: 52px; }
.story { position: relative; background: var(--ink-950); color: var(--text-on-dark); }
.story .eyebrow { color: var(--gold-300); }

/* Baseline (no WebGL / reduced motion): full-screen poster panels with the same text. */
.story__stage { display: none; }
.chapter { position: relative; min-height: 100vh; min-height: 100svh; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; }
.chapter__poster { position: absolute; inset: 0; z-index: -1; }
.chapter__poster img { width: 100%; height: 100%; object-fit: cover; }
.chapter__poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 6, 12, 0.92) 0%, rgba(3, 6, 12, 0.55) 24%, rgba(3, 6, 12, 0) 42%, rgba(3, 6, 12, 0) 52%, rgba(3, 6, 12, 0.62) 70%, rgba(3, 6, 12, 0.95) 100%);
}
.chapter--transit { min-height: 0; }
.chapter--transit .chapter__content { display: none; }
.chapter__content { display: contents; }
.chapter__top { padding-top: calc(var(--header-h) + 28px); }
.chapter__bottom { padding-bottom: 56px; }

.chapter__eyebrow { font: 600 0.8rem/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.chapter__top h2 { font-size: clamp(1.8rem, 3.3vw, 3rem); max-width: 24ch; margin: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.chapter__caption { font: 600 0.82rem/1.2 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(234, 241, 252, 0.78); margin: 0; }
.chapter__bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px 48px; align-items: start; }
.chapter__body { color: #cfd9e9; font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 54ch; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.chapter__col h3 { font: 600 0.7rem/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-on-dark); margin: 3px 0 10px; display: flex; gap: 10px; align-items: center; }
.chapter__tag { color: var(--gold); letter-spacing: 0.12em; }
.chapter__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.chapter__col--tasks li { color: #c8d4e6; padding-left: 15px; position: relative; }
.chapter__col--tasks li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(127, 177, 239, 0.8); }
.chapter__col--today h3 { color: var(--gold-300); }
.chapter__col--today a { color: #e8f7d2; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(230, 207, 152, 0.35); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; }
.chapter__col--today a:hover { color: #fff; border-color: var(--gold-300); }
.chapter__col--today a .icon { opacity: 0.8; }
.chapter__actions { grid-column: 1 / -1; margin-top: 4px; }
/* Opening: the intelligence, with one headline ticker running like a news ticker. On the 3D
   stage it is very large and passes behind the intelligence: the story script projects the
   sphere onto the screen each frame, centres the ticker on it, cuts the sphere's outline out of
   the text (soft edge) and lets the text grow as the opening scrolls on. Solid colours only:
   ivory, the company blue and green. */
.story-ticker { padding: 0; }
.ticker {
  overflow: hidden; width: 100%;
  -webkit-mask-image: radial-gradient(circle var(--br, 0px) at var(--bx, -999px) calc(50% + var(--bdy, 0px)), transparent 95%, #000 102%), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle var(--br, 0px) at var(--bx, -999px) calc(50% + var(--bdy, 0px)), transparent 95%, #000 102%), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.ticker__track { display: flex; align-items: center; width: max-content; white-space: nowrap; animation: ticker-left 48s linear infinite; will-change: transform; }
.ticker__item { font-family: var(--font-hero); font-weight: 600; font-size: clamp(2.1rem, 5.4vw, 5.2rem); line-height: 1.16; letter-spacing: 0.02em; padding-inline: 0.45em; }
.ticker__sep { font-size: 0.32em; }
.story-slides .chapter__top.story-ticker--hero {
  top: var(--ty, 50%); transform: translateY(-50%) scale(var(--grow, 1)); transform-origin: var(--bx, 50%) 50%;
  opacity: 0; transition: opacity 1.1s ease;
}
/* It fades in once the story has placed it behind the drawn intelligence. */
.story-slides .chapter__top.story-ticker--hero.is-placed { opacity: 1; }
.story-slides .story-ticker--hero .ticker__item { font-size: clamp(3.4rem, 12.5vw, 14rem); line-height: 1.12; letter-spacing: 0.01em; }
.story-slides .story-ticker--hero .ticker__sep { font-size: clamp(1.2rem, 3.4vw, 3.6rem); }
.story-slides .story-ticker--hero .ticker__track { animation-duration: 130s; }
.t-ivory { color: #f3ece0; }
.t-gold { color: #d7b46c; }
.t-blue { color: #4a90e8; }
.t-green { color: #7ac21b; }
@keyframes ticker-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.motion-paused .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
/* Poster version (no 3D stage): the headline sits below the navigation; with reduced motion it
   does not run, so it shows once, whole, wrapped and centred. */
.story__chapters .chapter__top.story-ticker { padding-top: calc(var(--header-h) + 22px); }
@media (prefers-reduced-motion: reduce) {
  .story__chapters .ticker { -webkit-mask-image: none; mask-image: none; }
  .story__chapters .ticker__track { width: auto; flex-wrap: wrap; justify-content: center; white-space: normal; text-align: center; padding-inline: var(--gutter); }
  .story__chapters .ticker__item { padding-inline: 0; }
  .story__chapters .ticker__item ~ .ticker__item, .story__chapters .ticker__sep { display: none; }
}
.story-intro__optin { justify-content: center; margin-top: 18px; }
.story-intro__optin:empty { display: none; }

/* At the opening the story bar steps aside; the navigation always stays. */
html.story-at-start .story-bar:not(:focus-within) { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* Enhanced: sticky WebGL stage; chapter blocks only provide scroll distance. */
.has-webgl .story__stage {
  display: block; position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; z-index: 1;
}
/* Chapters start at the top of the story, under the stage. (The negative margin sits here, not on
   the stage, so the stage releases as soon as the story ends instead of covering the next section.) */
.has-webgl .story__chapters { margin-top: -100vh; margin-top: -100svh; }
.has-webgl .chapter { display: block; min-height: calc(var(--chapter-vh, 1.6) * 100vh); }
/* The last viewport of the story cannot be scrolled through, so the final chapter adds one to keep its share. */
.has-webgl .chapter:last-child { min-height: calc((var(--chapter-vh, 1.6) + 1) * 100vh); }
.has-webgl .chapter__poster { display: none; }
/* Until the story script moves the chapter text into the stage, keep it out of sight; the
   opening's services band and buttons are the exception: they already sit in their final
   place on the first paint (the headline ticker waits for the 3D, which places it). */
.has-webgl .story__chapters .chapter__content { visibility: hidden; }
/* (Chapters are only scroll spacers here; without isolation the opening's text stacks above the stage.) */
.has-webgl .story__chapters .chapter { isolation: auto; }
.has-webgl .story__chapters .chapter--intro .chapter__content { display: block; position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: 2; visibility: visible; pointer-events: none; }
.has-webgl .story__chapters .chapter--intro .chapter__content :is(a, button) { pointer-events: auto; }
.has-webgl .story__chapters .chapter--intro .story-ticker--hero { visibility: hidden; }
.has-webgl .story__chapters .chapter--intro .chapter__bottom { position: absolute; left: 0; right: 0; bottom: calc(var(--bar-h) + 2.6vh); padding: 0; }
.story__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story__poster-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.has-webgl .story__canvas { opacity: 0; transition: opacity 0.9s ease; }
.has-webgl .story__canvas.is-live { opacity: 1; }
.story__poster-layer.is-visible { opacity: 1; }
.story__poster-layer img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s ease; }
/* The opening poster fades in as it arrives rather than popping in. */
.js .story__poster-layer img:not(.is-loaded) { opacity: 0; }

.story-scrim { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.story-scrim--top { top: 0; height: 34%; background: linear-gradient(180deg, rgba(3, 6, 12, 0.9) 0%, rgba(3, 6, 12, 0.6) 46%, rgba(3, 6, 12, 0) 100%); }
.story-scrim--bottom { bottom: 0; height: 46%; background: linear-gradient(0deg, rgba(3, 6, 12, 0.96) 0%, rgba(3, 6, 12, 0.74) 40%, rgba(3, 6, 12, 0) 100%); }

.story-slides { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.story-slides .chapter__content { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.story-slides .chapter__content.is-active a, .story-slides .chapter__content.is-active button { pointer-events: auto; }
.story-slides .chapter__top { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 2.4vh); padding: 0; }
.story-slides .chapter__bottom { position: absolute; left: 0; right: 0; bottom: calc(var(--bar-h) + 2.6vh); padding: 0; }

.story-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(16px, 2.5vw, 32px) 2px; border-top: 1px solid rgba(234, 214, 166, 0.1);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.story-bar__note { margin: 0; font-size: 0.76rem; color: #ecd9ad; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.story-bar__chapters { display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; }
.story-bar__chapters button {
  background: none; border: 0; color: var(--muted-on-dark); font: 500 0.72rem/1 var(--font-display); letter-spacing: 0.1em;
  text-transform: uppercase; padding: 9px 8px; cursor: pointer; position: relative; white-space: nowrap; transition: color 0.2s;
}
.story-bar__chapters button:hover { color: #fff; }
.story-bar__chapters button.is-active { color: #fff; }
.story-bar__chapters button.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px; background: var(--gold); border-radius: 2px; box-shadow: 0 0 8px rgba(215, 180, 108, 0.7); }
.story-bar__controls { display: flex; align-items: center; gap: 2px; }
.story-bar__controls button, .story-bar__controls a {
  background: none; border: 0; color: var(--text-on-dark); font: 500 0.8rem/1 var(--font-body); display: inline-flex; align-items: center;
  gap: 6px; padding: 9px 10px; cursor: pointer; text-decoration: none; border-radius: 8px; white-space: nowrap;
}
.story-bar__controls button:hover, .story-bar__controls a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.story-bar__loader { font-size: 0.76rem; color: var(--muted-on-dark); margin-right: 6px; transition: opacity 0.5s; white-space: nowrap; }
.story-bar__loader.is-done { opacity: 0; max-width: 0; margin: 0; overflow: hidden; }
.story-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.06); }

/* Pause and Skip live outside the 3D stage (which the opening hides the bar of, and the poster
   version hides entirely). They are sticky to the bottom of the screen while the story is on
   screen, from the first frame, and take no space themselves (the negative margin). The
   story bar keeps its right end clear for them. */
.story-controls {
  position: sticky; bottom: 0; z-index: 6; height: var(--bar-h); margin-top: calc(-1 * var(--bar-h));
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 0 clamp(12px, 2.5vw, 32px) 2px; pointer-events: none;
}
.story-controls__btn {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: rgba(6, 11, 26, 0.8);
  color: var(--text-on-dark); font: 600 0.8rem/1 var(--font-display); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.story-controls__btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(230, 207, 152, 0.55); color: #fff; }
.story-controls { transition: opacity 0.3s ease, visibility 0s; }
.story-controls.is-away { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.story-controls__pause .i-play { display: none; }
.story-controls__pause[aria-pressed="true"] .i-pause { display: none; }
.story-controls__pause[aria-pressed="true"] .i-play { display: inline; }
/* Pausing needs the script; with reduced motion the poster version has nothing to pause. */
.no-js .story-controls__pause { display: none; }
@media (prefers-reduced-motion: reduce) { html:not(.has-webgl) .story-controls__pause { display: none; } }
.story-bar { padding-right: clamp(300px, 24vw, 330px); }

/* The opening's bottom band: what QuadricIT does, and the two ways in. */
.chapter__bottom.story-intro__bottom { display: block; }
.story-intro { display: grid; justify-items: center; gap: 16px; text-align: center; }
.story-intro__lead { margin: 0; max-width: 66ch; font-size: clamp(0.98rem, 1.2vw, 1.12rem); line-height: 1.55; color: var(--text-2); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.65); }
.story-intro__lead strong { display: block; margin-bottom: 6px; font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3; color: var(--text); }
.story-intro__actions { justify-content: center; }
.story-intro__optin { margin-top: 0; }
/* The services summary is the intelligence's thought: a cumulus cloud, with little puffs
   trailing from it to the sphere. Each layer is a soft shape whose edges the SVG filters tear
   into wisps: the body (a rounded core with billows around it), a blue-grey underside with a
   warm glow from the intelligence, and a brighter crown. */
.thought { --p: clamp(18px, 2.2vw, 28px); --cloud: #ece8e2; position: relative; isolation: isolate; display: grid; justify-items: center; gap: 12px; width: min(100%, 980px); padding: calc(var(--p) * 1.4) calc(var(--p) * 2.4) calc(var(--p) * 1.1); }
.thought__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.thought .story-intro__lead { max-width: none; text-shadow: none; color: #2b3446; font-weight: 500; }
.thought .story-intro__lead strong { margin-bottom: 4px; color: #0d1628; }
.thought .btn--outline { --btn-bg: rgba(255, 255, 255, 0.5); --btn-fg: #16203a; --btn-border: rgba(22, 32, 58, 0.28); }
.thought .btn--outline:hover { --btn-bg: rgba(255, 255, 255, 0.85); --btn-fg: #0d1628; --btn-border: rgba(143, 108, 47, 0.7); }
.thought__shape { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: drop-shadow(0 0 28px rgba(255, 196, 120, 0.16)); }
.thought__shape > span { position: absolute; display: block; }
.thought__mass { inset: 0; filter: url(#qit-cloud-body); }
.thought__mass::before, .thought__mass::after { content: ""; position: absolute; }
.thought__mass::after { inset: -3% -2%; border-radius: 34% / 46%; background: var(--cloud); }
.thought__mass::before {
  inset: -18% -7% -10%;
  background:
    radial-gradient(17% 23% at 22% 30%, var(--cloud) 98%, transparent),
    radial-gradient(21% 27% at 41% 19%, var(--cloud) 98%, transparent),
    radial-gradient(19% 25% at 61% 22%, var(--cloud) 98%, transparent),
    radial-gradient(15% 20% at 79% 33%, var(--cloud) 98%, transparent),
    radial-gradient(10% 22% at 8% 56%, var(--cloud) 98%, transparent),
    radial-gradient(10% 22% at 92% 55%, var(--cloud) 98%, transparent),
    radial-gradient(19% 13% at 26% 84%, var(--cloud) 98%, transparent),
    radial-gradient(23% 12% at 50% 87%, var(--cloud) 98%, transparent),
    radial-gradient(19% 13% at 74% 84%, var(--cloud) 98%, transparent);
}
.thought__shade { inset: 50% 7% 3% 9%; border-radius: 50%; background: rgba(92, 104, 134, 0.42); filter: url(#qit-cloud-shade); }
.thought__shade::after { content: ""; position: absolute; left: -12%; top: -40%; width: 42%; height: 130%; border-radius: 50%; background: rgba(255, 168, 76, 0.32); }
.thought__light { inset: -14% 22% 58% 16%; border-radius: 50%; background: rgba(255, 253, 248, 0.95); filter: url(#qit-cloud-light); }
/* Little cloud puffs rising from the cloud into the intelligence above it (over its lower edge). */
.thought__trail { position: absolute; left: 50%; bottom: calc(100% - var(--p) * 0.2); display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; pointer-events: none; }
.thought__trail i { display: block; border-radius: 50%; background: radial-gradient(60% 55% at 45% 35%, #fbf8f3, var(--cloud) 70%, #c9c8cc); filter: url(#qit-cloud-puff) drop-shadow(0 0 10px rgba(255, 196, 120, 0.22)); animation: thought-bob 3.6s ease-in-out infinite; }
.thought__trail i:nth-child(1) { width: 38px; height: 27px; translate: -34px 0; }
.thought__trail i:nth-child(2) { width: 25px; height: 18px; translate: -18px 0; animation-delay: -1.2s; }
.thought__trail i:nth-child(3) { width: 15px; height: 11px; translate: -6px 0; animation-delay: -2.4s; }
/* Wide screens: the thought cloud floats at the intelligence's top right, bubbles trailing
   down from it to the sphere. */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  .has-webgl .story__chapters .chapter--intro .chapter__bottom.story-intro__bottom,
  .has-webgl .story-slides .chapter__bottom.story-intro__bottom { top: calc(var(--header-h) + 7vh); bottom: auto; right: auto; left: calc(50% + 27vh); width: min(430px, calc(50vw - 27vh - 24px)); }
  .story-intro__bottom .story-intro { padding-inline: 0; max-width: none; }
  .story-intro__bottom .thought { --p: clamp(11px, 1vw, 15px); width: 100%; gap: 8px; padding: calc(var(--p) * 1.5) calc(var(--p) * 2.1) calc(var(--p) * 1.4); }
  .story-intro__bottom .story-intro__lead { font-size: clamp(0.8rem, 0.88vw, 0.88rem); line-height: 1.45; }
  .story-intro__bottom .story-intro__lead strong { font-size: clamp(0.9rem, 1vw, 1rem); }
  .story-intro__bottom .story-intro__actions { gap: 8px; }
  .story-intro__bottom .story-intro__actions .btn { min-height: 34px; padding: 6px 13px; font-size: 0.8rem; }
  .story-intro__bottom .thought__trail { top: calc(100% + var(--p) * 0.2); bottom: auto; left: 14%; flex-direction: column; }
  .story-intro__bottom .thought__trail i:nth-child(1) { width: 28px; height: 20px; translate: 0 0; }
  .story-intro__bottom .thought__trail i:nth-child(2) { width: 19px; height: 14px; translate: -18px 0; }
  .story-intro__bottom .thought__trail i:nth-child(3) { width: 12px; height: 9px; translate: -32px 0; }
}
@keyframes thought-bob { 50% { transform: translateY(-3px); } }
.motion-paused .thought__trail i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .thought__trail i { animation: none; } }
.story-progress__bar { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--blue-500), var(--gold-500), var(--gold)); }

@media (max-width: 1240px) {
  .story-bar__more { display: none; }
}
@media (max-width: 1060px) {
  .story-bar__chapters { display: none; }
}
@media (min-width: 761px) and (max-height: 800px) and (min-aspect-ratio: 4/5) {
  .chapter__col--tasks { display: none; }
  .chapter__bottom { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .chapter__top h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
}

/* Concept → capability bridge (home) */
.bridge { display: grid; gap: 16px; }
.bridge__row {
  display: grid; grid-template-columns: 220px 1fr 1fr; gap: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shine), var(--shadow-sm);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.bridge__row > * { padding: 20px 22px; }
.bridge__img { padding: 0 !important; position: relative; min-height: 140px; }
.bridge__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bridge__concept { border-right: 1px solid var(--line-dark); }
.bridge__label { font: 600 0.72rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.bridge__concept .bridge__label { color: var(--gold); }
.bridge__today .bridge__label { color: var(--gold-300); }
.bridge__today .chips { margin-top: 12px; }
.bridge__today .chip { text-decoration: none; }
.bridge__today .chip:hover { border-color: var(--gold-300); color: #fff; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .mega { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .layout-with-aside { grid-template-columns: 1fr; }
  .layout-with-aside > aside { order: -1; }
  .side-nav { position: static; }
}
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand img { height: 30px; }
  .bridge__row { grid-template-columns: 1fr; }
  .bridge__img { min-height: 160px; }
  .bridge__concept { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .cta-band .btn-row { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; }
  .mention { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__track [aria-hidden="true"] { display: none; }
  .marquee { mask-image: none; }
}

@media print {
  .site-header, .site-footer, .story__stage, .drawer { display: none !important; }
  body { background: #fff; }
}

/* ----------------------------------------------------------------- story: portrait & phone layout */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --bar-h: 46px; }
  .story-slides .chapter__top { top: calc(var(--header-h) + 14px); }
  .chapter__top h2 { font-size: clamp(1.3rem, 5.8vw, 1.8rem); }
  .chapter__eyebrow { font-size: 0.7rem; margin-bottom: 6px; }
  .ticker__item { font-size: clamp(1.7rem, 8.6vw, 2.6rem); }
  .story-slides .story-ticker--hero .ticker__item { font-size: clamp(3rem, 17vw, 5.4rem); }
  .story-slides .chapter__top .eyebrow { font-size: 0.66rem; letter-spacing: 0.12em; margin-bottom: 8px; }
  .chapter__col--today li:nth-child(n+4) { display: none; }
  .chapter__bottom { grid-template-columns: 1fr; gap: 10px; }
  .chapter__body { font-size: 0.92rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .chapter__col--tasks { display: none; }
  .chapter__col h3 { margin: 0 0 6px; }
  .chapter__col--today ul { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; }
  .chapter__col--today a .icon { display: none; }
  .chapter__actions .btn { min-height: 42px; padding: 9px 16px; font-size: 0.88rem; }
  .story-scrim--top { height: 30%; }
  .story-scrim--bottom { height: 52%; }
  .story-bar__chapters, .story-bar__more { display: none; }
  .story-bar { padding-right: 112px; }
  .story-controls__btn { width: 40px; height: 40px; min-height: 0; padding: 0; }
  .story-controls__btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .story-intro__more { display: none; }
  .thought { --p: 15px; gap: 10px; padding: 22px 26px 20px; }
  .thought__mass::before { inset: -14% -2% -6%; }
  .thought__mass::after { inset: -2% 1%; }
  .thought__shade { inset: 58% 12% 8%; }
  .story-intro__lead strong { margin: 0; font-size: 1.08rem; }
  .story-intro__actions .btn { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }
  .chapter__top { padding-top: calc(var(--header-h) + 20px); }
  .chapter__bottom { padding-bottom: 40px; }
}