/* infovtech design system.
   1. Tokens   2. Base   3. Layout   4. Components   5. Site chrome   6. Utilities
   Child sites override tokens only (accent, logo) in their own small stylesheet loaded after this one.
   No inline styles anywhere: public pages are cached and use a hash-based CSP (docs/adr/0005). */

/* ---------- 1. Tokens ---------- */
/* The look follows the company's advertisement application (its MudBlazor theme, AppTheme.cs): slate-blue primary,
   copper accent, cool greys, Roboto, 6 px corners and light elevation. One light theme only. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Colour: one primary, one accent, neutrals tinted toward the primary. Status colours are separate. */
  --color-bg: #f5f7f9;
  --color-surface: #ffffff;
  --color-surface-alt: #eef2f5;
  --color-border: #dde3e8;
  --color-border-strong: #7a8996;
  --color-text: #1f2933;
  --color-text-muted: #56636f;
  --color-primary: #536878;
  --color-primary-hover: #445664;
  --color-on-primary: #ffffff;
  --color-primary-soft: #e6ebef;
  --color-accent: #9c5a30;
  --color-accent-soft: #f6ebe3;
  --color-focus: #536878;
  --color-success: #2e7d32;
  --color-success-soft: #e5f3e6;
  --color-warning: #a15c00;
  --color-warning-soft: #fdf0dc;
  --color-danger: #c62828;
  --color-danger-soft: #fde8e8;
  --color-info: #1565c0;
  --color-info-soft: #e3eefa;
  /* The teal of the logo's "v" in the wordmark, dark enough for 4.5:1 on the page. */
  --color-brand-v: #0f766e;

  /* Type: Roboto, self-hosted, as in the advertisement application. */
  --font-display: "Roboto", "Helvetica", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Six-step type scale. */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --text-2xl: clamp(1.625rem, 1.4rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.6rem + 2.4vw, 3rem);
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* 8 px spacing. */
  --space-half: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Light elevation, like MudBlazor's elevation 1 to 4. */
  --shadow-sm: 0 1px 3px rgb(31 41 51 / 0.12), 0 1px 1px rgb(31 41 51 / 0.08);
  --shadow-md: 0 2px 6px rgb(31 41 51 / 0.12), 0 1px 3px rgb(31 41 51 / 0.08);
  --shadow-lg: 0 8px 24px rgb(31 41 51 / 0.14);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --container: 75rem; /* 1200 px */
  --gutter: var(--space-3);
  --header-height: 4rem;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

p,
ul,
ol {
  margin: 0 0 var(--space-2);
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-primary-hover);
}

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

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Headings and <main> receive focus from scripts after navigation; they are not controls, so no ring. */
[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

@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;
  }
}

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(48rem + 2 * var(--gutter));
}

/* 12-column grid. Children span all columns on small screens and opt in to narrower spans from 48rem. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}

.grid > * {
  grid-column: span 12;
}

@media (min-width: 48rem) {
  .col-6 {
    grid-column: span 6;
  }

  .col-4 {
    grid-column: span 6;
  }

  .col-3 {
    grid-column: span 6;
  }

  .col-8 {
    grid-column: span 12;
  }
}

@media (min-width: 64rem) {
  .col-4 {
    grid-column: span 4;
  }

  .col-3 {
    grid-column: span 3;
  }

  .col-8 {
    grid-column: span 8;
  }
}

.section {
  padding-block: var(--space-8);
}

.section--alt {
  background: var(--color-surface-alt);
}

.section__header {
  max-width: 44rem;
  margin-bottom: var(--space-4);
}

.section__lead {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* Short label above a section heading, such as "What we do". Plain text, with no mark before it. */
.eyebrow {
  margin-bottom: var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stack > * + * {
  margin-top: var(--space-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- 4. Components ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn--secondary {
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
}

.btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  padding-inline: var(--space-1);
}

.btn--lg {
  min-height: 3.25rem;
  padding-inline: 1.75rem;
  font-size: var(--text-lg);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.card--link {
  position: relative;
  transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

.card--link:hover,
.card--link:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

/* Makes the whole card clickable while keeping one link for assistive technology. */
.card--link .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__body {
  color: var(--color-text-muted);
  flex: 1;
}

.card__meta {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.card__kicker {
  margin-bottom: var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.card__result {
  margin-bottom: 0;
  color: var(--color-text);
}

.card__result strong {
  color: var(--color-primary);
  font-size: var(--text-lg);
}

.filters {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.filter-group__label {
  min-width: 6.5rem;
  font-weight: 700;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.chip[aria-current="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  padding-top: var(--space-2);
  border-top: 3px solid var(--color-primary);
  counter-increment: step;
}

.steps__title {
  font-size: var(--text-lg);
}

.steps__title::before {
  content: counter(step) ". ";
  color: var(--color-primary);
}

.faq {
  border-bottom: 1px solid var(--color-border);
}

.faq summary {
  padding-block: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
}

.faq p {
  max-width: 44rem;
  color: var(--color-text-muted);
}

.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-half) var(--space-3);
  padding: 0;
  margin: var(--space-2) 0 0;
  list-style: none;
  color: var(--color-text-muted);
}

.meta-list strong {
  color: var(--color-text);
}

.toc {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.toc h2 {
  font-size: var(--text-base);
  letter-spacing: 0;
}

.toc ol {
  padding-inline-start: 1.25rem;
  margin: 0;
}

.toc li + li {
  margin-top: var(--space-1);
}

@media (min-width: 64rem) {
  .toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-2));
  }
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.search-results {
  padding: 0;
  margin: var(--space-3) 0 0;
  list-style: none;
}

.search-results li {
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.search-results h3 {
  margin-bottom: var(--space-half);
  font-size: var(--text-lg);
}

.screenshot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.contact-list {
  font-style: normal;
}

.contact-list p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.contact-list .icon {
  margin-top: 0.2em;
  color: var(--color-accent);
}

.tech-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

.tech-groups h3 {
  font-size: var(--text-base);
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

a.badge:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.badge--accent {
  background: var(--color-accent-soft);
}

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero {
  padding-block: var(--space-12) var(--space-8);
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--color-primary-soft), transparent 70%),
    var(--color-bg);
}

.hero__title {
  max-width: 18ch;
}

.hero__lead {
  max-width: 40rem;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.page-hero {
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__title {
  font-size: var(--text-2xl);
}

.page-hero__lead {
  max-width: 44rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.breadcrumbs {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: var(--space-1);
  color: var(--color-text-muted);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-primary);
}

.stat__label {
  color: var(--color-text-muted);
}

.quote {
  margin: 0;
}

.quote blockquote {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.quote figcaption {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.quote figcaption strong {
  display: block;
  color: var(--color-text);
}

.rating {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--space-1);
  color: var(--color-warning);
}

.rating .icon {
  fill: currentColor;
  stroke: none;
}

.rating .icon--off {
  fill: var(--color-border);
}

/* Rich text from the CMS. */
.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: var(--space-4);
  font-size: var(--text-xl);
}

.prose h3 {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

.prose li + li {
  margin-top: var(--space-1);
}

.prose img {
  border-radius: var(--radius-md);
}

.alert {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
  background: var(--color-info-soft);
}

.alert--success {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.alert--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.alert--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.alert > :last-child {
  margin-bottom: 0;
}

.empty-state {
  padding: var(--space-6) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.field {
  display: grid;
  gap: var(--space-half);
  margin-bottom: var(--space-3);
}

.field__label {
  font-weight: 600;
}

.field__optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.field__error:empty {
  display: none;
}

/* Multi-step forms. Without JavaScript every step is shown and the step buttons are hidden. */
.step {
  min-width: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
  border: 0;
}

.step__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.step__progress {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-weight: 600;
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

:root:not(.js) [data-step-next],
:root:not(.js) [data-step-back],
:root:not(.js) .step__progress {
  display: none;
}

.choice-list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  margin: 0 0 var(--space-3);
  border: 0;
}

.choice-list legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

.choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.estimate {
  padding: var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.estimate__range {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: var(--leading-tight);
}

.field__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field__error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.textarea {
  min-height: 8rem;
  resize: vertical;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  border-width: 2px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  padding: 0;
  margin: var(--space-4) 0 0;
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.pagination [aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.placeholder-note {
  padding: var(--space-half) var(--space-1);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: var(--text-sm);
}

/* ---------- 5. Site chrome ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: -10rem;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--space-1);
  color: var(--color-on-primary);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text);
}

/* The Growth V logo keeps its own colours on every site; child sites change only the accent. */
.brand__mark {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.brand__mark-bg {
  fill: #0b2a5b;
}

.brand__mark-left,
.brand__mark-right {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}

.brand__mark-left {
  stroke: #ffffff;
}

.brand__mark-right {
  stroke: #2dd4bf;
}

/* The logo's teal, darkened so the letter keeps 4.5:1 contrast as text. */
.brand__v {
  color: var(--color-brand-v);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-half);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav__list a:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
}

@media (max-width: 63.99rem) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    padding-bottom: var(--space-2);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav__actions {
    justify-content: space-between;
  }

  /* With JavaScript the menu collapses behind a button; without it the links stay visible. */
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav:not([data-open]) {
    display: none;
  }
}

.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-6) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
}

.site-footer h2 {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  letter-spacing: 0;
}

.site-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer li {
  margin-bottom: var(--space-half);
}

.site-footer a {
  display: inline-block;
  padding-block: var(--space-half);
  color: var(--color-text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.site-footer .brand {
  display: inline-flex;
}

.site-footer address {
  font-style: normal;
}

.site-footer__tagline {
  max-width: 22rem;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.link-button {
  padding: var(--space-half) 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.link-button:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Without JavaScript the consent choice cannot be stored, so the control is hidden. */
:root:not(.js) [data-cookie-settings] {
  display: none;
}

.cookie-banner {
  position: fixed;
  inset: auto var(--space-2) var(--space-2) var(--space-2);
  z-index: 60;
  max-width: 40rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Equal prominence for both choices. */
.cookie-banner__actions .btn {
  flex: 1 1 10rem;
}

.whatsapp-fab {
  position: fixed;
  inset-inline-end: var(--space-2);
  bottom: var(--space-2);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: #0b6b3a;
  color: #ffffff;
  box-shadow: var(--shadow-lg);
}

.whatsapp-fab:hover {
  background: #095a31;
  color: #ffffff;
}

.whatsapp-fab .icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------- Products (catalogue, carousel, product pages) ---------- */
/* Each pillar has its own pair of colours, used for glows, accents and the illustrations. --pillar-ink is the dark
   shade for text and filled marks on white (4.5:1 or more); --pillar-light is the light shade for text on navy. */
.pillar--governance {
  --pillar-a: #6366f1;
  --pillar-b: #38bdf8;
  --pillar-ink: #4338ca;
  --pillar-light: #a5b4fc;
  --pillar-soft: #eef2ff;
}

.pillar--risk {
  --pillar-a: #f97316;
  --pillar-b: #f43f5e;
  --pillar-ink: #c2410c;
  --pillar-light: #fdba74;
  --pillar-soft: #fff7ed;
}

.pillar--compliance {
  --pillar-a: #14b8a6;
  --pillar-b: #22c55e;
  --pillar-ink: #0f766e;
  --pillar-light: #5eead4;
  --pillar-soft: #f0fdfa;
}

.pillar--operations {
  --pillar-a: #8b5cf6;
  --pillar-b: #3b82f6;
  --pillar-ink: #6d28d9;
  --pillar-light: #c4b5fd;
  --pillar-soft: #f5f3ff;
}

/* The navy of the Growth V logo, with soft glows and a faint dot grid, as in the product illustrations. */
.product-hero {
  --hero-muted: #cbd5e1;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-6);
  color: #ffffff;
  background:
    radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.6px) 0 0 / 32px 32px,
    radial-gradient(48rem 28rem at 88% -6%, rgb(99 102 241 / 0.4), transparent 70%),
    radial-gradient(40rem 26rem at -6% 104%, rgb(45 212 191 / 0.28), transparent 70%),
    linear-gradient(135deg, #0b1b3a, #132f5c);
}

.product-hero--detail {
  background:
    radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.6px) 0 0 / 32px 32px,
    radial-gradient(48rem 28rem at 88% -6%, color-mix(in srgb, var(--pillar-a) 45%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at -6% 104%, color-mix(in srgb, var(--pillar-b) 30%, transparent), transparent 70%),
    linear-gradient(135deg, #0b1b3a, #132f5c);
}

.product-hero :focus-visible,
.platform-band :focus-visible {
  outline-color: #ffffff;
}

.product-hero__intro {
  max-width: 46rem;
  margin-bottom: var(--space-4);
}

.product-hero__eyebrow,
.platform-band__eyebrow {
  margin-bottom: var(--space-1);
  color: #5eead4;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-hero__title {
  margin: 0;
  font-size: var(--text-2xl);
}

.product-hero .breadcrumbs a,
.product-hero .breadcrumbs li,
.product-hero .breadcrumbs li + li::before {
  color: var(--hero-muted);
}

.product-hero .breadcrumbs a:hover {
  color: #ffffff;
}

/* Buttons for dark backgrounds. */
.btn--light {
  background: #ffffff;
  color: #0b2a5b;
}

.btn--light:hover {
  background: #e0e7ff;
  color: #0b2a5b;
}

.btn--outline-light {
  border-color: rgb(255 255 255 / 0.6);
  background: transparent;
  color: #ffffff;
}

.btn--outline-light:hover {
  border-color: #ffffff;
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
}

/* Carousel. */
.carousel__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-radius: 24px;
}

.carousel[data-ready] .carousel__track {
  scrollbar-width: none;
}

.carousel[data-ready] .carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track:focus {
  outline: none;
}

.carousel__slide {
  display: grid;
  flex: 0 0 100%;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 24px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
  scroll-snap-align: start;
}

.carousel__media,
.product-detail-hero__media {
  position: relative;
  order: -1;
}

/* A glow in the product's colours behind its picture. */
.carousel__media::before,
.product-detail-hero__media::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pillar-a), var(--pillar-b));
  filter: blur(56px);
  opacity: 0.55;
}

.carousel__media img,
.product-detail-hero__media img {
  position: relative;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 30px 60px -24px rgb(2 8 23 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.1);
}

.carousel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}

.carousel__family,
.carousel__pillar {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
}

.carousel__family {
  background: rgb(255 255 255 / 0.12);
  color: #ffffff;
}

.carousel__pillar {
  border: 1px solid var(--pillar-light);
  color: var(--pillar-light);
}

.carousel__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-3xl);
}

.carousel__tagline {
  max-width: 32rem;
  margin-bottom: var(--space-4);
  color: var(--hero-muted);
  font-size: var(--text-lg);
}

/* The slide coming into view lifts its text in, one line after another. */
.carousel[data-ready] .carousel__text > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.carousel[data-ready] .carousel__slide[data-active] .carousel__text > * {
  opacity: 1;
  transform: none;
}

.carousel[data-ready] .carousel__slide[data-active] .carousel__text > :nth-child(2) {
  transition-delay: 80ms;
}

.carousel[data-ready] .carousel__slide[data-active] .carousel__text > :nth-child(3) {
  transition-delay: 160ms;
}

.carousel[data-ready] .carousel__slide[data-active] .carousel__text > :nth-child(4) {
  transition-delay: 240ms;
}

.carousel[data-ready] .carousel__media img {
  transform: scale(0.96);
  transition: transform 700ms var(--ease-out);
}

.carousel[data-ready] .carousel__slide[data-active] .carousel__media img {
  transform: none;
}

.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.carousel__controls[hidden] {
  display: none;
}

.carousel__arrow,
.carousel__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.carousel__arrow:hover,
.carousel__play:hover {
  border-color: #ffffff;
  background: rgb(255 255 255 / 0.16);
}

[dir="rtl"] .carousel__arrow .icon,
[dir="rtl"] .product-card__more .icon {
  transform: scaleX(-1);
}

.carousel__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Each dot is a 24 px target with a small mark inside; the current one stretches into a bar in its product's colour. */
.carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width var(--motion-base) var(--ease-out);
}

.carousel__dot::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.55);
  transition: width var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out);
}

.carousel__dot:hover::before {
  background: #ffffff;
}

.carousel__dot[aria-current="true"] {
  width: 2.5rem;
}

.carousel__dot[aria-current="true"]::before {
  width: 1.875rem;
  background: var(--pillar-light);
}

.carousel__count {
  margin-inline-start: auto;
  color: var(--hero-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.carousel__progress {
  flex-basis: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.12);
}

.carousel__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #5eead4, #a5b4fc);
  transform: scaleX(0);
  transform-origin: left;
}

[dir="rtl"] .carousel__progress-bar {
  transform-origin: right;
}

.carousel__progress-bar.is-running {
  animation: carousel-progress 7s linear forwards;
}

@keyframes carousel-progress {
  to {
    transform: scaleX(1);
  }
}

@media (min-width: 64rem) {
  .carousel__slide {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .carousel__media,
  .product-detail-hero__media {
    order: 0;
  }
}

/* Product cards. */
.product-pillar + .product-pillar {
  margin-top: var(--space-6);
}

.product-pillar__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.product-pillar__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--pillar-a), var(--pillar-b));
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
}

.product-card:hover,
.product-card:focus-within {
  border-color: color-mix(in srgb, var(--pillar-a) 45%, var(--color-border));
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--pillar-a) 60%, transparent), var(--shadow-md);
  transform: translateY(-4px);
}

.product-card:focus-within {
  outline: 3px solid var(--pillar-ink);
  outline-offset: 2px;
}

.product-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b1b3a;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.product-card__pillar {
  margin: 0;
  color: var(--pillar-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-card__title {
  margin: 0;
  font-size: var(--text-lg);
}

.product-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.product-card__title a:focus-visible {
  outline: none;
}

/* One link per card for assistive technology; the whole card is clickable. */
.product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-card__tagline {
  flex: 1;
  margin: 0;
  color: var(--color-text-muted);
}

.product-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-half);
  color: var(--pillar-ink);
  font-weight: 600;
}

.product-card__more .icon {
  transition: translate var(--motion-base) var(--ease-out);
}

.product-card:hover .product-card__more .icon {
  translate: 4px 0;
}

/* What every GRC module shares. */
.platform-band {
  padding-block: var(--space-8);
  color: #ffffff;
  background:
    radial-gradient(40rem 24rem at 100% 0%, rgb(45 212 191 / 0.22), transparent 70%),
    linear-gradient(135deg, #0b2a5b, #10386a);
}

.platform-band .container {
  display: grid;
  align-items: center;
  gap: var(--space-4);
}

.platform-band__intro p:last-child {
  color: #cbd5e1;
  font-size: var(--text-lg);
}

.platform-band__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-band__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.06);
  font-weight: 600;
}

.platform-band__list .icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #0d9488);
}

@media (min-width: 64rem) {
  .platform-band .container {
    grid-template-columns: 5fr 7fr;
  }
}

/* Product page. */
.product-detail-hero {
  display: grid;
  align-items: center;
  gap: var(--space-4);
}

.product-detail-hero__title {
  margin: var(--space-1) 0;
}

.product-detail-hero__tagline {
  color: var(--pillar-light);
  font-size: var(--text-xl);
  font-weight: 500;
}

.product-detail-hero__overview {
  max-width: 40rem;
  margin-bottom: var(--space-4);
  color: var(--hero-muted);
}

@media (min-width: 64rem) {
  .product-detail-hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.product-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: product-step;
}

.product-steps__item {
  position: relative;
  padding: calc(var(--space-3) + 3rem) var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  counter-increment: product-step;
}

.product-steps__item::before {
  content: counter(product-step, decimal-leading-zero);
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--pillar-ink);
  color: var(--pillar-on-ink, #ffffff);
  font-weight: 700;
}

.product-steps__name,
.product-parts__name {
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
}

.product-steps__item p,
.product-parts__item p {
  margin: 0;
  color: var(--color-text-muted);
}

.product-cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: product-cycle;
}

.product-cycle li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  counter-increment: product-cycle;
}

/* An arrow between steps; the empty alternative text keeps screen readers from announcing it. */
.product-cycle li:not(:last-child)::after {
  content: "\2192";
  content: "\2192" / "";
  color: var(--pillar-ink);
  font-size: var(--text-xl);
}

[dir="rtl"] .product-cycle li:not(:last-child)::after {
  content: "\2190";
  content: "\2190" / "";
}

.product-cycle__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--pillar-a) 35%, transparent);
  border-radius: var(--radius-pill);
  background: var(--pillar-soft);
  font-size: var(--text-lg);
  font-weight: 600;
}

.product-cycle__name::before {
  content: counter(product-cycle);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--pillar-ink);
  color: var(--pillar-on-ink, #ffffff);
  font-size: var(--text-sm);
}

.product-cycle__note {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.product-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-parts__item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--pillar-a);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--pillar-soft), var(--color-surface) 60%);
}

.product-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.product-features__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--pillar-ink);
  color: var(--pillar-on-ink, #ffffff);
}

.product-features__icon .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 3;
}

.product-value {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-3);
}

.product-value__panel {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.product-value__panel p {
  margin: 0;
  font-size: var(--text-lg);
}

.product-value__panel--benefits {
  border-color: transparent;
  background:
    radial-gradient(24rem 14rem at 100% 0%, color-mix(in srgb, var(--pillar-a) 40%, transparent), transparent 70%),
    linear-gradient(135deg, #0b1b3a, #132f5c);
  color: #ffffff;
}

.product-value__panel--benefits p {
  color: #e2e8f0;
}

.product-value__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  background: var(--pillar-ink);
  color: var(--pillar-on-ink, #ffffff);
}

.product-value__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- 6. Utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-0 {
  margin-bottom: 0;
}

/* Honeypot field: hidden from people, visible to naive bots. */
.hp-field {
  position: absolute;
  inset-inline-start: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Site assistant ---------- */
.chat__log {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-3) 0;
  list-style: none;
}

.chat__message {
  max-width: 90%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.chat__message--visitor {
  justify-self: end;
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.chat__text {
  margin: 0;
  white-space: pre-line;
}

.chat__sources-label {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chat__sources {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
}

.chat__status {
  min-height: 1.5rem;
  color: var(--color-text-muted);
}

.chat__form[hidden] {
  display: none;
}

/* The floating assistant: a pill button at the bottom corner and a panel above it. Without JavaScript the button is
   hidden (the assistant needs a script) and the footer still links to the assistant's page. */
.chat-widget {
  position: fixed;
  inset-inline-end: var(--space-2);
  bottom: var(--space-2);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.chat-widget__launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 3.25rem;
  padding: 0 1.25rem 0 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #4338ca, #0f766e);
  box-shadow: 0 18px 36px -14px rgb(67 56 202 / 0.65), var(--shadow-md);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.chat-widget__launcher[hidden] {
  display: none;
}

.chat-widget__launcher:hover {
  box-shadow: 0 22px 44px -14px rgb(67 56 202 / 0.75), var(--shadow-lg);
  transform: translateY(-2px);
}

.chat-widget__launcher .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.chat-widget[data-open] .chat-widget__launcher {
  background: linear-gradient(135deg, #312e81, #115e59);
}

.chat-widget__panel {
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2 * var(--space-2)));
  max-height: min(36rem, calc(100vh - 6.5rem));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: 0 30px 70px -20px rgb(15 23 42 / 0.45), var(--shadow-md);
  transform-origin: bottom right;
}

.chat-widget__panel[hidden] {
  display: none;
}

.motion .chat-widget__panel:not([hidden]) {
  animation: chat-open 260ms var(--ease-out);
}

@keyframes chat-open {
  from {
    transform: translateY(12px) scale(0.97);
  }
}

.chat-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  color: #ffffff;
  background:
    radial-gradient(18rem 8rem at 100% 0%, rgb(45 212 191 / 0.35), transparent 70%),
    linear-gradient(135deg, #0b1b3a, #132f5c);
}

.chat-widget__avatar {
  display: grid;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 3px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.12);
}

.chat-widget__avatar .brand__mark {
  width: 100%;
  height: 100%;
}

.chat-widget__title {
  margin: 0;
  font-size: var(--text-base);
}

.chat-widget__subtitle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #cbd5e1;
  font-size: var(--text-sm);
}

.chat-widget__online {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #34d399;
}

.chat-widget__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
  cursor: pointer;
}

.chat-widget__close:hover {
  background: rgb(255 255 255 / 0.2);
}

.chat-widget__close:focus-visible {
  outline-color: #ffffff;
}

.chat--widget {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--space-2) var(--space-2);
}

.chat--widget .chat__log {
  flex: 1;
  min-height: 8rem;
  margin: 0;
  padding: var(--space-2) var(--space-half) var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat--widget .chat__message {
  max-width: 88%;
  border-radius: 16px 16px 16px 4px;
  font-size: var(--text-sm);
}

.chat--widget .chat__message--visitor {
  border-color: transparent;
  border-radius: 16px 16px 4px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.chat--widget .chat__message--assistant {
  background: var(--color-surface-alt);
}

.chat--widget .chat__status {
  min-height: 0;
  margin: 0;
  font-size: var(--text-sm);
}

.chat__message--typing {
  display: inline-flex;
  gap: 4px;
  width: max-content;
}

.chat__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.motion .chat__dot {
  animation: chat-typing 1s ease-in-out infinite;
}

.motion .chat__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.motion .chat__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing {
  50% {
    opacity: 0.3;
    transform: translateY(-3px);
  }
}

.chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 var(--space-half) var(--space-2);
}

.chat__suggestions[hidden] {
  display: none;
}

.chat__suggestion {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.chat__suggestion:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.chat__form--compact {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface-alt);
}

.chat__form--compact:focus-within {
  border-color: var(--color-primary);
}

.chat__form--compact .textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 7rem;
  padding: var(--space-1);
  border: 0;
  background: transparent;
  resize: none;
}

.chat__form--compact .textarea:focus-visible {
  outline: none;
}

.chat__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.chat__send[disabled] {
  opacity: 0.55;
  cursor: progress;
}

[dir="rtl"] .chat__send .icon {
  transform: scaleX(-1);
}

.chat__note {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Live chat: the visitor can ask for a person; staff messages carry the person's name. */
.chat__person {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--space-1);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.chat__person[hidden] {
  display: none;
}

.chat__person:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.chat__person[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.chat__message--staff {
  border-inline-start: 3px solid var(--color-accent);
}

.chat__author {
  display: block;
  margin-block-end: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* With the assistant on the page, the WhatsApp button sits above it. */
.whatsapp-fab--raised {
  bottom: calc(var(--space-2) + 4.25rem);
}

.chat-widget[data-open] ~ .whatsapp-fab {
  display: none;
}

@media (max-width: 30rem) {
  .chat-widget__launcher span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .chat-widget__launcher {
    width: 3.5rem;
    padding: 0;
    justify-content: center;
  }
}

/* ---------- Languages and right-to-left (FR-041) ----------
   Layout uses logical properties (inline-start/end), so it mirrors with the document direction.
   Only things that point in a direction need a rule of their own. */
/* Arrows mean "forward", which is leftwards in a right-to-left page. */
[dir="rtl"] .btn .icon,
[dir="rtl"] .card--link .icon {
  transform: scaleX(-1);
}

/* Addresses, phone numbers and code stay left-to-right inside right-to-left text. */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] pre {
  text-align: left;
}

/* ---------- Home page ----------
   The 3D hero scene, counters, tilting cards, bento grid and timeline. Colours come from the theme tokens, so every
   website theme works; the six "tone" gradients only fill icon tiles and glows. Motion is added by infovtech.js
   (html.motion is set only when the visitor has not asked for reduced motion), so without it everything is shown,
   still and complete. */
.tone-1 {
  --tone-a: #4f46e5;
  --tone-b: #7c3aed;
}

.tone-2 {
  --tone-a: #0284c7;
  --tone-b: #2563eb;
}

.tone-3 {
  --tone-a: #0d9488;
  --tone-b: #059669;
}

.tone-4 {
  --tone-a: #d97706;
  --tone-b: #ea580c;
}

.tone-5 {
  --tone-a: #db2777;
  --tone-b: #e11d48;
}

.tone-6 {
  --tone-a: #7c3aed;
  --tone-b: #c026d3;
}

.home .section__header h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  letter-spacing: -0.03em;
}

.home .section__header .eyebrow {
  display: inline-flex;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Hero. */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-12);
}

.home-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44rem 30rem at 80% 16%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%),
    radial-gradient(36rem 26rem at 8% 92%, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 70%),
    radial-gradient(30rem 20rem at 52% -4%, rgb(139 92 246 / 0.12), transparent 70%),
    var(--color-bg);
}

/* A faint grid that fades out towards the edges. */
.home-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
}

.home-hero__inner {
  display: grid;
  align-items: center;
  gap: var(--space-6);
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
  padding: 0.4rem 0.95rem 0.4rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

.home-hero__pulse {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.motion .home-hero__pulse {
  animation: home-pulse 2.2s var(--ease-out) infinite;
}

@keyframes home-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
  }

  70%,
  100% {
    box-shadow: 0 0 0 0.65rem transparent;
  }
}

.home-hero__title {
  max-width: 14ch;
  margin-bottom: var(--space-3);
  font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.home-hero__lead {
  max-width: 36rem;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
}

.home-hero__promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.home-hero__promises li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.home-hero__promises .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
  stroke-width: 3;
}

/* The hero text rises in once, on load (movement only, so it is always readable). */
.motion .home-hero__text > * {
  animation: home-rise 900ms var(--ease-out) both;
}

.motion .home-hero__text > :nth-child(2) {
  animation-delay: 80ms;
}

.motion .home-hero__text > :nth-child(3) {
  animation-delay: 160ms;
}

.motion .home-hero__text > :nth-child(4) {
  animation-delay: 240ms;
}

.motion .home-hero__text > :nth-child(5) {
  animation-delay: 320ms;
}

@keyframes home-rise {
  from {
    transform: translateY(18px);
  }
}

@media (min-width: 64rem) {
  .home-hero__inner {
    grid-template-columns: 1.05fr 1fr;
  }
}

/* The 3D scene. */
.hero-scene {
  position: relative;
  height: clamp(21rem, 42vw, 34rem);
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

.hero-scene__floor {
  position: absolute;
  inset: auto -30% -20%;
  height: 70%;
  overflow: hidden;
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 15%, transparent 85%);
}

.hero-scene__floor::before {
  content: "";
  position: absolute;
  inset: -56px 0 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 30%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}

.motion .hero-scene__floor::before {
  animation: scene-floor 2.6s linear infinite;
}

@keyframes scene-floor {
  to {
    transform: translateY(56px);
  }
}

.hero-scene__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.55;
}

.hero-scene__orb--a {
  top: 4%;
  right: 6%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #6366f1, transparent 70%);
}

.hero-scene__orb--b {
  bottom: 8%;
  left: 2%;
  width: 40%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #14b8a6, transparent 70%);
}

.motion .hero-scene__orb--a {
  animation: scene-drift 11s ease-in-out infinite alternate;
}

.motion .hero-scene__orb--b {
  animation: scene-drift 13s ease-in-out infinite alternate-reverse;
}

@keyframes scene-drift {
  to {
    translate: -8% 10%;
  }
}

.hero-scene__stage {
  position: absolute;
  inset: 4% 2% 10%;
  transform-style: preserve-3d;
  transform: rotateX(calc(12deg + var(--scene-x, 0deg))) rotateY(calc(-18deg + var(--scene-y, 0deg)));
  transition: transform 600ms var(--ease-out);
}

.motion .hero-scene__stage {
  animation: scene-float 7s ease-in-out infinite alternate;
}

@keyframes scene-float {
  from {
    translate: 0 -10px;
  }

  to {
    translate: 0 10px;
  }
}

.hero-scene__window {
  position: absolute;
  inset: 12% 8% 14% 10%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 50px 90px -40px rgb(15 23 42 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.4) inset;
  transform: translateZ(0);
}

.hero-scene__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.hero-scene__bar > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f87171;
}

.hero-scene__bar > span:nth-child(2) {
  background: #fbbf24;
}

.hero-scene__bar > span:nth-child(3) {
  background: #34d399;
}

.hero-scene__bar > .hero-scene__address {
  width: 40%;
  height: 12px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.hero-scene__body {
  display: grid;
  flex: 1;
  grid-template-columns: 22% 1fr;
  min-height: 0;
}

.hero-scene__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-inline-end: 1px solid var(--color-border);
}

.hero-scene__nav {
  height: 10px;
  border-radius: 5px;
  background: var(--color-border);
}

.hero-scene__nav--active {
  background: linear-gradient(90deg, #4f46e5, #0ea5e9);
}

.hero-scene__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px;
}

.hero-scene__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-scene__kpi {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.hero-scene__kpi b {
  width: 60%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #4f46e5, #0ea5e9);
}

.hero-scene__kpi:nth-child(2) b {
  background: linear-gradient(90deg, #0d9488, #22c55e);
}

.hero-scene__kpi:nth-child(3) b {
  background: linear-gradient(90deg, #f59e0b, #f43f5e);
}

.hero-scene__kpi i {
  width: 85%;
  height: 7px;
  border-radius: 4px;
  background: var(--color-border);
}

.hero-scene__chart {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 7%;
  min-height: 4rem;
  padding: 10px 6px 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-surface-alt), transparent);
}

.hero-scene__column {
  flex: 1;
  height: 40%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #6366f1, color-mix(in srgb, #6366f1 35%, transparent));
  transform-origin: bottom;
}

.hero-scene__column:nth-child(2n) {
  height: 62%;
  background: linear-gradient(180deg, #0ea5e9, color-mix(in srgb, #0ea5e9 35%, transparent));
}

.hero-scene__column:nth-child(3n) {
  height: 78%;
}

.hero-scene__column:nth-child(4n) {
  height: 52%;
  background: linear-gradient(180deg, #14b8a6, color-mix(in srgb, #14b8a6 35%, transparent));
}

.hero-scene__column:nth-child(7) {
  height: 90%;
}

.motion .hero-scene__column {
  animation: scene-bars 3.2s ease-in-out infinite alternate;
}

.motion .hero-scene__column:nth-child(2n) {
  animation-delay: -0.8s;
}

.motion .hero-scene__column:nth-child(3n) {
  animation-delay: -1.6s;
}

@keyframes scene-bars {
  from {
    transform: scaleY(0.55);
  }

  to {
    transform: scaleY(1);
  }
}

.hero-scene__line {
  position: absolute;
  inset: 8px 6px 18%;
  width: calc(100% - 12px);
  height: auto;
  overflow: visible;
}

.hero-scene__line path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 420;
  vector-effect: non-scaling-stroke;
}

.motion .hero-scene__line path {
  animation: scene-line 5s ease-in-out infinite;
}

@keyframes scene-line {
  from {
    stroke-dashoffset: 420;
  }

  55%,
  to {
    stroke-dashoffset: 0;
  }
}

/* Floating cards in front of the window, at different depths. */
.hero-scene__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 24px 40px -18px rgb(15 23 42 / 0.45);
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
}

.hero-scene__chip strong,
.hero-scene__chip small {
  display: block;
}

.hero-scene__chip small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.hero-scene__chip--a {
  top: 4%;
  inset-inline-start: -2%;
  transform: translateZ(180px);
}

.hero-scene__chip--b {
  bottom: 4%;
  inset-inline-end: -2%;
  transform: translateZ(110px);
}

.hero-scene__chip--c {
  bottom: 22%;
  inset-inline-start: -6%;
  transform: translateZ(190px);
}

.motion .hero-scene__chip {
  animation: scene-bob 5s ease-in-out infinite alternate;
}

.motion .hero-scene__chip--b {
  animation-delay: -1.7s;
}

.motion .hero-scene__chip--c {
  animation-delay: -3.1s;
}

@keyframes scene-bob {
  to {
    translate: 0 -12px;
  }
}

.hero-scene__chip-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: #ffffff;
}

.hero-scene__chip-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2.5;
}

.hero-scene__chip-icon--green {
  background: linear-gradient(135deg, #10b981, #059669);
}

.hero-scene__chip-icon--blue {
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
}

.hero-scene__gauge {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--color-surface) 68%, transparent 70%),
    conic-gradient(#14b8a6 0 82%, var(--color-border) 82% 100%);
}

.hero-scene__badge {
  position: absolute;
  top: 2%;
  inset-inline-end: 6%;
  width: 3.5rem;
  height: 3.5rem;
  padding: 6px;
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 20px 40px -14px rgb(79 70 229 / 0.55);
  transform: translateZ(160px);
}

.hero-scene__badge .brand__mark {
  width: 100%;
  height: 100%;
}

/* A dashed ring orbiting under the window, with three glowing dots on it. */
.hero-scene__ring {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 92%;
  aspect-ratio: 1;
  border: 2px dashed color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(76deg) translateZ(-30px);
}

.motion .hero-scene__ring {
  animation: scene-ring 24s linear infinite;
}

@keyframes scene-ring {
  to {
    transform: translate(-50%, -50%) rotateX(76deg) translateZ(-30px) rotateZ(360deg);
  }
}

.hero-scene__satellite {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 18px 4px rgb(99 102 241 / 0.6);
}

.hero-scene__satellite--a {
  top: -7px;
  left: calc(50% - 7px);
}

.hero-scene__satellite--b {
  top: calc(50% - 7px);
  right: -7px;
  background: #14b8a6;
  box-shadow: 0 0 18px 4px rgb(20 184 166 / 0.6);
}

.hero-scene__satellite--c {
  bottom: -7px;
  left: 30%;
  background: #f59e0b;
  box-shadow: 0 0 18px 4px rgb(245 158 11 / 0.6);
}

/* A code panel behind the window. */
.hero-scene__code {
  position: absolute;
  top: 2%;
  inset-inline-start: 0;
  display: grid;
  gap: 9px;
  width: 46%;
  padding: 18px;
  border-radius: 16px;
  background: #0f172a;
  box-shadow: 0 30px 60px -30px rgb(15 23 42 / 0.7);
  transform: translateZ(-90px) translateX(-6%);
  opacity: 0.9;
}

.hero-scene__code-line {
  height: 8px;
  border-radius: 4px;
  background: #818cf8;
}

.hero-scene__code-line--a {
  width: 70%;
}

.hero-scene__code-line--b {
  width: 50%;
  margin-inline-start: 12%;
  background: #34d399;
}

.hero-scene__code-line--c {
  width: 62%;
  margin-inline-start: 12%;
  background: #fbbf24;
}

.hero-scene__code-line--d {
  width: 40%;
  margin-inline-start: 24%;
  background: #38bdf8;
}

.hero-scene__code-line--e {
  width: 30%;
  background: #f472b6;
}

/* Scenes off screen stop moving. */
.hero-scene.is-paused *,
.hero-scene.is-paused *::before {
  animation-play-state: paused;
}

/* Key numbers: a glass panel overlapping the hero. */
.home-numbers {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-8));
}

.home-numbers__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  list-style: none;
}

.home-numbers__item {
  display: grid;
  gap: var(--space-half);
  padding: var(--space-2) var(--space-3);
}

.home-numbers__value {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  background-clip: text;
  color: transparent;
}

.home-numbers__label {
  color: var(--color-text-muted);
}

/* Cards that tilt in 3D under the pointer (infovtech.js sets --tilt-x, --tilt-y, --mx and --my). */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

[data-tilt].is-tilting {
  transition: transform 80ms linear, box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* A spotlight that follows the pointer, and a gradient border, both in the card's tone. */
.service-tile::before,
.bento__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone-a, var(--color-primary)) 14%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
}

.service-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.service-tile:hover,
.service-tile:focus-within {
  --lift: -6px;
  border-color: transparent;
  box-shadow: 0 34px 60px -30px color-mix(in srgb, var(--tone-a) 60%, transparent), var(--shadow-md);
}

.service-tile:hover::before,
.service-tile:hover::after,
.service-tile:focus-within::after,
.bento__tile:hover::before {
  opacity: 1;
}

.service-tile:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.service-tile__icon,
.bento__icon,
.timeline__marker {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--tone-a) 75%, transparent);
  color: #ffffff;
}

.service-tile__icon {
  margin-bottom: var(--space-2);
  transition: transform 400ms var(--ease-out);
}

.service-tile:hover .service-tile__icon {
  transform: translateZ(40px) rotate(-6deg) scale(1.06);
}

.service-tile__icon .icon,
.bento__icon .icon,
.timeline__marker .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.service-tile__title {
  margin: 0;
  font-size: var(--text-xl);
}

.service-tile__title a {
  color: var(--color-text);
  text-decoration: none;
}

.service-tile__title a:focus-visible {
  outline: none;
}

.service-tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-tile__summary {
  flex: 1;
  margin: 0;
  color: var(--color-text-muted);
}

.service-tile__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-half);
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-weight: 600;
}

.service-tile__more .icon {
  transition: translate var(--motion-base) var(--ease-out);
}

.service-tile:hover .service-tile__more .icon {
  translate: 5px 0;
}

[dir="rtl"] .service-tile__more .icon {
  transform: scaleX(-1);
}

[dir="rtl"] .service-tile:hover .service-tile__more .icon {
  translate: -5px 0;
}

/* Products band: the navy of the product pages. */
.home-products {
  padding-block: var(--space-12);
  color: #ffffff;
  background:
    radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1.6px) 0 0 / 32px 32px,
    radial-gradient(48rem 28rem at 90% 0%, rgb(99 102 241 / 0.4), transparent 70%),
    radial-gradient(40rem 26rem at 0% 100%, rgb(45 212 191 / 0.28), transparent 70%),
    linear-gradient(135deg, #0b1b3a, #132f5c);
}

.home-products :focus-visible {
  outline-color: #ffffff;
}

.home-products__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.home-products__intro h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  letter-spacing: -0.03em;
}

.home-products__lead {
  max-width: 40rem;
  margin: 0;
  color: #cbd5e1;
  font-size: var(--text-lg);
}

/* Why infovtech: a bento grid with one feature tile. */
.bento {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bento__tile {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.bento__tile:hover {
  --lift: -4px;
  box-shadow: var(--shadow-lg);
}

.bento__tile h3 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xl);
}

.bento__tile p {
  margin: 0;
  color: var(--color-text-muted);
}

.bento__tile--feature {
  overflow: hidden;
  border-color: transparent;
  color: #ffffff;
  background:
    radial-gradient(28rem 18rem at 100% 0%, rgb(99 102 241 / 0.55), transparent 70%),
    radial-gradient(22rem 16rem at 0% 100%, rgb(20 184 166 / 0.4), transparent 70%),
    linear-gradient(135deg, #0b1b3a, #132f5c);
}

.bento__tile--feature h3 {
  max-width: 16ch;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  letter-spacing: -0.03em;
}

.bento__tile--feature p {
  max-width: 34rem;
  color: #dbe4f0;
  font-size: var(--text-lg);
}

/* Rings behind the feature tile's text. */
.bento__tile--feature::after {
  content: "";
  position: absolute;
  inset-block-end: -30%;
  inset-inline-end: -12%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgb(255 255 255 / 0.08) 22px 23px);
  pointer-events: none;
}

.bento__tile--feature .bento__icon {
  width: 4rem;
  height: 4rem;
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__tile--feature {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento__tile--feature {
    grid-row: span 2;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 22rem;
  }
}

/* How we deliver: a timeline whose line fills in as it comes into view. */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  inset-block: 1.625rem;
  inset-inline-start: 1.5625rem;
  width: 3px;
  border-radius: 3px;
  background: var(--color-border);
}

.timeline::after {
  background: linear-gradient(180deg, #4f46e5, #0ea5e9, #14b8a6, #f59e0b, #db2777);
  transform-origin: top;
}

.motion .timeline[data-reveal-ready]:not([data-revealed])::after {
  transform: scaleY(0);
}

.motion .timeline::after {
  transition: transform 1600ms var(--ease-out);
}

.timeline__step {
  position: relative;
  padding-inline-start: 4.75rem;
}

.timeline__marker {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
}

.timeline__step:nth-child(1) {
  --tone-a: #4f46e5;
  --tone-b: #6366f1;
}

.timeline__step:nth-child(2) {
  --tone-a: #0284c7;
  --tone-b: #0ea5e9;
}

.timeline__step:nth-child(3) {
  --tone-a: #0d9488;
  --tone-b: #14b8a6;
}

.timeline__step:nth-child(4) {
  --tone-a: #d97706;
  --tone-b: #f59e0b;
}

.timeline__step:nth-child(5) {
  --tone-a: #db2777;
  --tone-b: #e11d48;
}

.timeline__number {
  display: block;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.timeline__title {
  margin: var(--space-half) 0 var(--space-1);
  font-size: var(--text-xl);
}

.timeline__step p {
  margin: 0;
  color: var(--color-text-muted);
}

@media (min-width: 64rem) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
  }

  .timeline::before,
  .timeline::after {
    inset-block: 1.5625rem auto;
    inset-inline: 1.625rem;
    width: auto;
    height: 3px;
  }

  .timeline::after {
    background: linear-gradient(90deg, #4f46e5, #0ea5e9, #14b8a6, #f59e0b, #db2777);
    transform-origin: left;
  }

  [dir="rtl"] .timeline::after {
    transform-origin: right;
  }

  .motion .timeline[data-reveal-ready]:not([data-revealed])::after {
    transform: scaleX(0);
  }

  .timeline__step {
    padding-inline-start: 0;
    padding-top: 4.75rem;
  }
}

/* Case studies and testimonials on the home page. */
.home-work .card,
.home-quotes .card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

.home-work .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.home-work .card:hover,
.home-quotes .card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.home-work .card__result strong {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.quote__mark {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #ffffff;
}

/* Reveal on scroll: the children of [data-reveal] rise and fade in, one after another. */
.motion [data-reveal][data-reveal-ready]:not([data-revealed]) > * {
  opacity: 0;
  transform: translateY(28px);
}

.motion [data-reveal] > * {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.motion .home-stagger > :nth-child(2),
.motion .home-numbers__list > :nth-child(2),
.motion .timeline > :nth-child(2) {
  transition-delay: 90ms;
}

.motion .home-stagger > :nth-child(3),
.motion .home-numbers__list > :nth-child(3),
.motion .timeline > :nth-child(3) {
  transition-delay: 180ms;
}

.motion .home-stagger > :nth-child(4),
.motion .home-numbers__list > :nth-child(4),
.motion .timeline > :nth-child(4) {
  transition-delay: 270ms;
}

.motion .home-stagger > :nth-child(5),
.motion .timeline > :nth-child(5) {
  transition-delay: 360ms;
}

.motion .home-stagger > :nth-child(6) {
  transition-delay: 450ms;
}

/* Tilting cards that are also revealed keep their own transform, and once the reveal has finished (data-settled)
   they answer the pointer straight away again. */
.motion [data-reveal][data-revealed] > [data-tilt] {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
}

.motion [data-reveal][data-settled] > [data-tilt] {
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
  transition-delay: 0s;
}

.motion [data-reveal][data-settled] > [data-tilt].is-tilting {
  transition: transform 80ms linear, box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

/* ---------- Website themes ----------
   Chosen under Admin → Website theme and set as data-theme on <html> (SiteThemes in Infovtech.Common). A theme changes
   tokens only: colours, corners, shadows and layout width. :root above is Classic Slate. Every pair of text and
   background keeps 4.5:1 or more; the browser tests run the accessibility checks in each theme. Child sites still
   change only their accent, in the block after this one. */

/* Premium White, the default: pure white, wide layout, the logo's navy and teal, soft navy-tinted depth. */
:root[data-theme="premium-white"] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8fb;
  --color-border: #e6eaf0;
  --color-border-strong: #8a94a6;
  --color-text: #0f172a;
  --color-text-muted: #4a5568;
  --color-primary: #0b2a5b;
  --color-primary-hover: #08204a;
  --color-on-primary: #ffffff;
  --color-primary-soft: #eaf0fa;
  --color-accent: #0f766e;
  --color-accent-soft: #e6f6f3;
  --color-focus: #0b2a5b;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 6px rgb(15 23 42 / 0.06);
  --shadow-md: 0 6px 16px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 20px 44px rgb(15 23 42 / 0.12);

  --container: 85rem; /* 1,360 px */
  --header-height: 4.5rem;
}

/* A frosted header that lets the page show through as it scrolls. */
:root[data-theme="premium-white"] .site-header {
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: saturate(180%) blur(14px);
}

:root[data-theme="premium-white"] .hero {
  background:
    radial-gradient(56rem 30rem at 88% -12%, #e3ebf8, transparent 70%),
    radial-gradient(36rem 22rem at 0% 110%, #e6f6f3, transparent 70%),
    #ffffff;
}

/* Royal Indigo: crisp white, deep indigo and a berry accent, generous rounding. */
:root[data-theme="royal-indigo"] {
  --color-bg: #fbfbff;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f4fe;
  --color-border: #e3e5f5;
  --color-border-strong: #7c80a8;
  --color-text: #111827;
  --color-text-muted: #4b5563;
  --color-primary: #4338ca;
  --color-primary-hover: #3730a3;
  --color-on-primary: #ffffff;
  --color-primary-soft: #eceefe;
  --color-accent: #9d174d;
  --color-accent-soft: #fdeef4;
  --color-focus: #4338ca;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgb(49 46 129 / 0.06), 0 2px 8px rgb(49 46 129 / 0.06);
  --shadow-md: 0 8px 20px rgb(49 46 129 / 0.1);
  --shadow-lg: 0 22px 48px rgb(49 46 129 / 0.14);

  --container: 82.5rem; /* 1,320 px */
}

/* Ivory & Gold: warm ivory, deep emerald and antique gold, finer corners. */
:root[data-theme="ivory-gold"] {
  --color-bg: #fbf8f2;
  --color-surface: #fffdf8;
  --color-surface-alt: #f4ede1;
  --color-border: #e6dccb;
  --color-border-strong: #8c7f6a;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-primary: #1f3d36;
  --color-primary-hover: #152b26;
  --color-on-primary: #ffffff;
  --color-primary-soft: #e4ece7;
  --color-accent: #8a5a12;
  --color-accent-soft: #f6ead3;
  --color-focus: #1f3d36;
  --color-brand-v: #8a5a12;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgb(68 52 26 / 0.08);
  --shadow-md: 0 4px 12px rgb(68 52 26 / 0.1);
  --shadow-lg: 0 16px 36px rgb(68 52 26 / 0.14);

  --container: 80rem; /* 1,280 px */
}

/* Midnight: a dark theme in deep navy, sky blue and amber. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --color-bg: #0b1220;
  --color-surface: #111a2e;
  --color-surface-alt: #0f1729;
  --color-border: #26334f;
  --color-border-strong: #6b7a99;
  --color-text: #e5edf7;
  --color-text-muted: #a7b4c8;
  --color-primary: #7cc4fa;
  --color-primary-hover: #a5d8ff;
  --color-on-primary: #0b1220;
  --color-primary-soft: #16233d;
  --color-accent: #f5c46b;
  --color-accent-soft: #2a2416;
  --color-focus: #7cc4fa;
  --color-success: #4ade80;
  --color-success-soft: #10291b;
  --color-warning: #fbbf24;
  --color-warning-soft: #2b230f;
  --color-danger: #f87171;
  --color-danger-soft: #2d1416;
  --color-info: #60a5fa;
  --color-info-soft: #13213a;
  --color-brand-v: #5eead4;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 16px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 20px 44px rgb(0 0 0 / 0.55);

  --container: 85rem;
}

:root[data-theme="midnight"] .site-header {
  background: rgb(11 18 32 / 0.86);
  backdrop-filter: saturate(160%) blur(14px);
}

/* On dark pages the product colours swap to their light shades, with dark text on the filled marks. */
:root[data-theme="midnight"] [class*="pillar--"] {
  --pillar-ink: var(--pillar-light);
  --pillar-on-ink: #0b1220;
  --pillar-soft: color-mix(in srgb, var(--pillar-a) 16%, #111a2e);
}

/* ---------- Child company site (FR-052) ----------
   A child site changes the accent tokens and nothing else; layout, type and the primary colour are shared.
   The pair keeps at least 4.5:1 on the tinted surface and on its own soft tint. */
:root[data-site="software"],
[data-accent="software"] {
  --color-accent: #0b5cad;
  --color-accent-soft: #dbeafb;
}

/* The child site's blue, lightened for the dark Midnight theme. */
:root[data-theme="midnight"][data-site="software"],
:root[data-theme="midnight"] [data-accent="software"] {
  --color-accent: #8cc2ff;
  --color-accent-soft: #13213a;
}

/* FR-056: a company of the group, shown on the parent site in that company's accent ([data-accent] above). */
.company-card .card {
  border-top: var(--space-half) solid var(--color-accent);
}