:root {
  color-scheme: light;
  --paper: #f8f7f4;
  --white: #fff;
  --ink: #17282f;
  --muted: #45575d;
  --line: #d6e1e3;
  --accent: #215e70;
  --accent-dark: #174957;
  --mist: #e6eff0;
  --night: #122b34;
  --light-ink: #d7e5e8;
  --light-accent: #a5d5df;
  --dark-line: #577983;
  --gutter: clamp(20px, 5vw, 78px);
  --spacing: clamp(64px, 8vw, 112px);
  --mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
p, figure, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 720; line-height: 1.08; letter-spacing: -.05em; }
h2 { font-size: clamp(2.15rem, 4.3vw, 4.3rem); text-wrap: balance; }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
a { color: var(--accent-dark); text-underline-offset: .22em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[id] { scroll-margin-block-start: 20px; }
.shell { width: min(1280px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--spacing); }
.skip-link { position: absolute; top: 0; left: var(--gutter); padding: 10px 16px; background: var(--white); z-index: 2; transform: translateY(-130%); }
.skip-link:focus { transform: translateY(8px); }

.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 24px; }
.brand { display: inline-block; width: 176px; flex: 0 0 auto; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 3.3vw, 45px); }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .93rem; font-weight: 640; text-decoration: none; }
.main-nav a:hover, .main-nav [aria-current="page"] { color: var(--accent-dark); text-decoration: underline; }

.button, .arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  font-size: .93rem;
  font-weight: 690;
}
.button { border-radius: 10px; padding: 10px 16px; text-decoration: none; }
.button span, .arrow-link span { flex: 0 0 auto; }
.button-ink { background: var(--ink); color: var(--white); }
.button-ink:hover { background: #294851; }
.button-accent, .button-primary { background: var(--accent); color: var(--white); }
.button-accent:hover, .button-primary:hover { background: var(--accent-dark); }
.button-light { background: #edf5f5; color: var(--night); }
.button-light:hover { background: #d7e9eb; }
.header-cta { min-height: 44px; }
.actions, .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; }
.arrow-link { gap: 8px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: center;
  padding-block: clamp(50px, 6.4vw, 94px);
}
.hero h1 { margin-top: 20px; font-size: clamp(3rem, 6.45vw, 6.65rem); line-height: .98; letter-spacing: -.072em; }
.hero.home-hero h1 { font-size: clamp(2rem, 4.05vw, 4.25rem); line-height: 1.02; }
.hero h1 em { color: var(--accent); font-style: normal; }
.intro { max-width: 52ch; margin-top: 24px; color: var(--muted); font-size: clamp(1.04rem, 1.45vw, 1.22rem); line-height: 1.6; }
.kicker, .eyebrow, .micro-label {
  display: flex; align-items: center; gap: 10px; color: var(--accent-dark);
  font: 650 .75rem / 1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.kicker > span:empty, .eyebrow .marker { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; background: currentColor; }
.kicker > .swiss-flag:empty {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #b72938;
}
.swiss-flag::before, .swiss-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 3px;
  background: #fff;
}
.swiss-flag::after { width: 3px; height: 9px; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 18px 0 0; margin: 26px 0 0; border-top: 1px solid var(--line); }
.platforms li { font: 650 .8rem / 1.5 var(--mono); color: var(--muted); }
.platforms li + li::before { content: "/"; margin-inline-end: 18px; color: #637c83; }
.hero-art {
  --trace: #74b7c6;
  --problem-y: 17%;
  --hardware-y: 34.667%;
  --software-y: 52.333%;
  --ai-y: 70%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border-radius: 26px;
  aspect-ratio: 1.12;
  background:
    radial-gradient(ellipse at 62% 46%, #266274 0%, transparent 58%),
    linear-gradient(142deg, #112933, #0b1a22 75%);
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #9bd5df20 1px, transparent 1px),
    linear-gradient(to bottom, #9bd5df20 1px, transparent 1px);
  background-size: clamp(18px, 2.5vw, 36px) clamp(18px, 2.5vw, 36px);
  mask-image: radial-gradient(ellipse at 55% 48%, #000, transparent 78%);
}
.hero-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10%;
  border: 1px solid #9bd5df32;
  border-radius: 50%;
  box-shadow: 0 0 0 16px #9bd5df09, inset 0 0 0 16px #9bd5df09;
  transform: rotate(-17deg);
}
.hero-fractal {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-label {
  position: absolute;
  top: 50%;
  left: 11%;
  color: #c3e2e8;
  font: 650 clamp(.63rem, 1.05vw, .89rem) / 1.15 var(--mono);
  transform: translateY(calc(-100% - 9px));
}
.hero-label--problem { top: var(--problem-y); }
.hero-label--upper { top: var(--hardware-y); }
.hero-label--middle { top: var(--software-y); }
.hero-label--lower { top: var(--ai-y); }
.hero-label--output { left: auto; right: 9%; }

.hero-trace {
  position: absolute;
  left: 11%;
  border-color: var(--trace);
  border-style: solid;
  border-width: 0;
}
.hero-trace::before {
  content: "";
  position: absolute;
  left: 0;
  width: clamp(6px, 1vw, 11px);
  aspect-ratio: 1;
  border: 1px solid var(--trace);
  border-radius: 50%;
  background: #102a33;
  transform: translate(-50%, -50%);
}
.hero-trace--upper, .hero-trace--lower { width: 20%; height: 10%; border-right-width: 1px; }
.hero-trace--upper { top: var(--hardware-y); border-top-width: 1px; border-top-right-radius: 10px; }
.hero-trace--problem { top: var(--problem-y); }
.hero-trace--lower { bottom: calc(100% - var(--ai-y)); border-bottom-width: 1px; border-bottom-right-radius: 10px; }
.hero-trace--upper::after, .hero-trace--lower::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 57%;
  border-top: 1px solid var(--trace);
}
.hero-trace--upper::after { top: 100%; }
.hero-trace--lower::after { bottom: 100%; }
.hero-trace--lower::before { top: 100%; }
.hero-trace--middle { top: var(--software-y); width: 31%; border-top-width: 1px; }
.hero-trace--output {
  --trace: currentColor;
  color: #74b7c6;
  top: 50%;
  left: 74%;
  right: 9%;
  border-top-width: 1px;
}
.hero-trace--output::before { left: 100%; }
.hero-signal {
  position: absolute;
  inset: 0;
  display: none;
  color: #b9efff;
  pointer-events: none;
}
.hero-signal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(6px, 1vw, 9px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  transform: translate(-50%, -50%);
}
.hero-signal--problem { --signal-from: var(--problem-y); --signal-to: calc(var(--problem-y) + 10%); }
.hero-signal--upper { --signal-from: var(--hardware-y); --signal-to: calc(var(--hardware-y) + 10%); }
.hero-signal--middle { --signal-from: var(--software-y); --signal-to: var(--software-y); --signal-turn: 35%; }
.hero-signal--lower { --signal-from: var(--ai-y); --signal-to: calc(var(--ai-y) - 10%); }
.hero-signal--output { color: #ffd7a5; }
.hero-module {
  position: absolute;
  inset: 26% 25% 26% 42%;
  border: 1px solid #a5d5df;
  border-radius: clamp(10px, 2vw, 20px);
  background: linear-gradient(145deg, #316574, #15333f 80%);
  box-shadow:
    5px 5px 0 #214955, 5px 5px 0 1px #6095a2,
    10px 10px 0 #183641, 10px 10px 0 1px #416975,
    0 20px 45px #06141bbf;
}
.hero-module-grid {
  position: absolute;
  inset: 13%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1.15fr;
  gap: clamp(3px, .65vw, 9px);
}
.hero-module-grid span {
  display: grid;
  place-items: center;
  border: 1px solid #a5d5df62;
  border-radius: clamp(3px, .65vw, 8px);
  background: linear-gradient(145deg, #79adba44, #a5d5df0d);
}

.hero-module-grid img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.hero-module-grid span:last-child {
  border-color: #c8e6ec;
  background: linear-gradient(145deg, #b8dce1, #6dabb8);
  box-shadow: 0 0 18px #b8dce146;
}

.hero-module-grid span:last-child img { width: 100%; height: 100%; }

.split-heading { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); align-items: end; gap: 22px 58px; margin-bottom: clamp(26px, 4vw, 52px); }
.split-heading h2, .contact-panel h2 { margin-top: 11px; text-wrap: pretty; }
.split-heading > p { color: var(--muted); max-width: 48ch; }
.capability-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.capability {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 218px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.capability p { margin-top: 9px; max-width: 54ch; }
.cap-window { grid-column: span 5; }
.cap-web { grid-column: span 7; }
.cap-mobile { grid-column: span 7; }
.cap-systems { grid-column: span 5; }
.platform-symbol { width: 48px; height: 42px; margin-bottom: 24px; color: var(--card-accent); }
.platform-symbol i { display: block; }
.window-symbol { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding-inline-end: 6px; }
.window-symbol i { border-radius: 3px; background: currentColor; }
.browser-symbol { position: relative; display: flex; align-items: flex-start; gap: 3px; padding: 7px; border: 2px solid currentColor; border-radius: 7px; }
.browser-symbol i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.browser-symbol::after { content: ""; position: absolute; inset: 17px 0 0; border-top: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 24px 2px no-repeat; }
.phone-symbol { width: 30px; margin-left: 8px; display: grid; place-items: end center; padding-bottom: 5px; border: 2px solid currentColor; border-radius: 8px; }
.phone-symbol i { width: 10px; height: 2px; background: currentColor; }
.integration-symbol { display: flex; justify-content: space-between; align-items: center; }
.integration-symbol i { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 4px; }
.integration-symbol i:nth-child(2) { width: 24px; height: 2px; border: 0; border-radius: 0; background: currentColor; }

.method-section { color: var(--white); background: var(--night); }
.method-section .split-heading > p { color: var(--light-ink); }
.method-section .kicker, .method-section .micro-label, .contact-panel .kicker { color: var(--light-accent); }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; padding-top: 20px; border-top: 1px solid var(--dark-line); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--light-accent); font: 650 .82rem / 1.3 var(--mono); }
.steps p, .saisie-grid article > p:last-child { color: var(--light-ink); margin-top: 9px; }
.product-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 30px 70px; align-items: center; padding: clamp(26px, 6vw, 72px); border-radius: 24px; background: var(--mist); }
.product-name { color: var(--ink); font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 740; letter-spacing: -.075em; }
.product-name span { color: var(--accent); }
.product-teaser h2 { margin-top: 8px; }
.product-teaser p:not(.kicker) { max-width: 42ch; margin-block: 12px 20px; color: var(--muted); }
.flow { margin: 0; padding: 0; list-style: none; }
.flow li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 18px; margin-block: 8px; padding: 13px 17px; border: 1px solid var(--card-surface); border-radius: 11px; background: var(--card-surface); color: var(--paper); }
.flow strong { font-size: 1.02rem; }
.flow span { color: #f1f5f9; font-size: .9rem; }
.product-section { padding-block: 0; }
.product-section-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.product-section .product-section-actions {
  margin-top: 0;
  padding-block: calc((var(--spacing) + 24px) / 2);
}
.contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px 56px; padding: clamp(26px, 5.3vw, 66px); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, #245768, transparent 72%), var(--night); color: var(--white); }
.contact-panel h2 { font-size: clamp(2rem, 4vw, 3.8rem); }
.contact-panel p:not(.kicker) { margin-top: 14px; max-width: 52ch; color: var(--light-ink); }
.contact-actions { display: grid; justify-self: start; justify-items: center; gap: 10px; }
.contact-actions a:not(.button) { color: var(--light-ink); padding-block: 7px; }
.contact-panel a:focus-visible { outline-color: var(--light-accent); }

.product-hero h1 { font-size: clamp(2.25rem, 4.15vw, 4.3rem); }
.product-hero .product-name { display: block; margin-top: 12px; font-family: inherit; font-size: clamp(1.9rem, 3.1vw, 2.9rem); text-transform: none; line-height: 1; }
.product-illustration { min-width: 0; padding: clamp(18px, 4vw, 48px); border-radius: 24px; color: var(--white); background: radial-gradient(ellipse at 100% 0%, #2d6678, transparent 75%), var(--night); }
.example-panel { padding: clamp(16px, 3vw, 25px); border: 1px solid var(--dark-line); border-radius: 15px; background: #183740; }
.example-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--dark-line); }
.example-top span { color: var(--light-accent); font: 650 .75rem / 1.4 var(--mono); }
.example-total { margin-top: 15px; font-size: clamp(1.9rem, 3.3vw, 2.9rem); font-weight: 720; letter-spacing: -.04em; }
.example-total span { font-size: .88rem; font-weight: 400; letter-spacing: 0; color: var(--light-ink); }
.example-data { margin-top: 14px; }
.example-data > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; margin-bottom: 13px; font-size: .88rem; }
.example-data dd { font: 650 .81rem / 1.4 var(--mono); white-space: nowrap; }
.example-data > div::after { content: ""; grid-column: 1 / -1; height: 5px; border-radius: 9px; background: linear-gradient(90deg, var(--light-accent) var(--bar-size), #365762 var(--bar-size)); }
.example-data > div:nth-child(1) { --bar-size: 100%; }
.example-data > div:nth-child(2) { --bar-size: 70%; }
.example-data > div:nth-child(3) { --bar-size: 50%; }
.product-illustration figcaption { margin-top: 13px; color: var(--light-ink); font-size: .81rem; }
.product-features, .saisie-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.product-features article { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.product-features article p { margin-top: 10px; color: var(--muted); }
:is(.capability-grid, .product-palette, .flow) > :nth-child(1) { --card-surface: #225c88; --card-accent: #b7e3ff; }
:is(.capability-grid, .product-palette, .flow) > :nth-child(2) { --card-surface: #653b87; --card-accent: #ecd5ff; }
:is(.capability-grid, .product-palette, .flow) > :nth-child(3) { --card-surface: #1d6859; --card-accent: #b5eee2; }
:is(.capability-grid, .product-palette) > article:nth-child(4) { --card-surface: #8c5025; --card-accent: #ffe0b3; }

:is(.capability-grid, .product-palette) > article {
  background: var(--card-surface);
  color: var(--paper);
  border-color: var(--card-surface);
}
:is(.capability-grid, .product-palette) > article p { color: #f1f5f9; }
.ai-section { padding-block-start: 0; }
.product-features.ai-use-cases { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.saisie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saisie-grid article { padding: 20px; border: 1px solid var(--dark-line); border-radius: 14px; }
.saisie-grid h3 { margin-top: 10px; }

.site-footer { padding-block: 42px 20px; border-top: 1px solid var(--line); background: #eef3f3; color: var(--muted); font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr .72fr 1fr; gap: 20px 36px; }
.footer-grid address { font-style: normal; }
.footer-grid nav { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.footer-label { margin-bottom: 7px; color: var(--ink); font-weight: 700; }
.footer-brand .brand { width: 155px; margin-bottom: 9px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 21px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.legal-hero { display: block; padding-block: clamp(35px, 7vw, 75px); background: var(--mist); }
.legal-hero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.08; }
.legal-reading { width: min(74ch, 100% - var(--gutter) * 2); margin-inline: auto; }
.legal-hero .hero-description { margin-top: 15px; color: var(--muted); }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: var(--muted); font-size: .86rem; }
.legal-meta span { border: 1px solid var(--line); border-radius: 20px; background: var(--white); padding: 4px 9px; }
.legal-content { padding-block: clamp(26px, 5vw, 64px); line-height: 1.7; overflow-wrap: anywhere; }
.legal-content > .note { margin-bottom: 18px; color: var(--muted); }
.legal-section { padding-block: 22px; border-bottom: 1px solid var(--line); }
.legal-section h2, .toc h2 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: wrap; }
.legal-section h2 { margin-bottom: 11px; }
.legal-section p + p, .table-scroll + p { margin-top: 12px; }
.toc, .callout { padding: clamp(14px, 3vw, 23px); border: 1px solid var(--line); border-radius: 12px; background: #edf3f3; }
.toc ul { margin: 10px 0 0; padding-inline-start: 20px; columns: 2 220px; column-gap: 30px; }
.toc li { break-inside: avoid; padding-block: 3px; }
.table-scroll { overflow-x: auto; margin-block: 14px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.data-table th, .data-table td { padding: clamp(8px, 2vw, 14px); border: 1px solid var(--line); text-align: start; vertical-align: top; }
.data-table th { background: var(--mist); color: var(--accent-dark); }
.data-table td:first-child { width: 32%; min-width: 8.5rem; font-weight: 650; }
.callout { margin-block: 14px; border-inline-start: 4px solid var(--accent); }
.callout .button-row { margin-top: 13px; }
.callout .button-light { border: 1px solid var(--line); }

@media (max-width: 1020px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-features, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .hero, .split-heading, .contact-panel, .product-teaser { grid-template-columns: 1fr; }
  .hero { gap: 28px; }
  .hero h1 { font-size: clamp(3rem, 9vw, 5.1rem); }
  .hero.home-hero h1 { font-size: clamp(2rem, 6vw, 3.3rem); }
  .product-hero h1 { font-size: clamp(2.1rem, 6.45vw, 3.55rem); }
  .hero-art { max-width: 680px; aspect-ratio: 1.55; }
  .product-illustration { width: min(100%, 600px); }
  .split-heading > p { max-width: 60ch; }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability { grid-column: auto; }
  .saisie-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .header-inner { flex-wrap: wrap; gap: 6px 12px; padding-block: 12px 4px; }
  .brand { width: 148px; }
  .main-nav { order: 3; width: 100%; gap: 19px; }
  .header-cta { margin-left: auto; padding-inline: 12px; }
  .hero h1 { font-size: clamp(2.75rem, 11.1vw, 3.75rem); }
  .hero.home-hero h1 { font-size: clamp(1.75rem, 7.2vw, 2.45rem); }
  .product-hero h1 { font-size: clamp(2rem, 7.9vw, 2.8rem); }
  .hero-art { aspect-ratio: 1.16; border-radius: 18px; }
  .capability-grid, .product-features, .footer-grid { grid-template-columns: 1fr; }
  .capability { min-height: 190px; }
  .platform-symbol { margin-bottom: 19px; }
  .steps { gap: 18px 14px; }
  .legal-hero h1 { font-size: clamp(2.05rem, 8.2vw, 3.3rem); }
}


@media screen and (prefers-reduced-motion: no-preference) {
  .hero-fractal {
    clip-path: circle(calc(13% + 50% * var(--build, 1)) at 58% 50%);
  }

  .hero-trace {
    --draw: clamp(0, calc(var(--build, 1) * 2.1), 1);
    clip-path: inset(-12px calc((1 - var(--draw)) * 120% - 22px) -12px -12px);
  }

  .hero-trace--upper, .hero-trace--lower {
    clip-path: inset(-12px calc((1 - var(--draw)) * 170% - 65%) -12px -12px);
  }

  .hero-trace--lower { --draw: clamp(0, calc((var(--build, 1) - .15) * 2.6), 1); }

  .hero-art.is-flowing .hero-signal {
    display: block;
    animation: signal-in 4.6s linear infinite;
  }

  .hero-art.is-flowing .hero-signal--output { animation-name: signal-out; }

  .hero-art.is-flowing .hero-label--output {
    animation: solution-label 4.6s linear infinite;
  }

  .hero-art.is-flowing .hero-trace--output::before {
    animation: solution-node 4.6s linear infinite;
  }

  @keyframes solution-label {
    0%, 75%, 95%, 100% { color: #c3e2e8; }
    76%, 88% { color: #ffd7a5; }
  }

  @keyframes solution-node {
    0%, 75%, 95%, 100% {
      border-color: #74b7c6;
      background: #102a33;
      box-shadow: none;
    }
    76%, 88% {
      border-color: #ffd7a5;
      background: #ffd7a5;
      box-shadow: 0 0 12px #ffd7a586;
    }
  }

  .hero-art.is-flowing .hero-module::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 20px #a5d5df80, 0 0 22px #a5d5df65;
    pointer-events: none;
    animation: signal-process 4.6s ease-out infinite;
  }

  @keyframes signal-in {
    0%, 5% { transform: translate(11%, var(--signal-from)); opacity: 0; }
    9% { opacity: 1; }
    23% { transform: translate(31%, var(--signal-from)); opacity: 1; }
    31% { transform: translate(var(--signal-turn, 31%), var(--signal-to)); opacity: 1; }
    42% { transform: translate(42%, var(--signal-to)); opacity: 1; }
    46%, 100% { transform: translate(44%, var(--signal-to)); opacity: 0; }
  }

  @keyframes signal-process {
    0%, 38%, 68%, 100% { opacity: 0; }
    49% { opacity: 1; }
  }

  @keyframes signal-out {
    0%, 51% { transform: translate(75%, 50%); opacity: 0; }
    55% { opacity: 1; }
    76% { transform: translate(91%, 50%); opacity: 1; }
    84%, 100% { transform: translate(91%, 50%); opacity: 0; }
  }


  .hero-module {
    --assemble: clamp(0, calc((var(--build, 1) - .17) * 1.65), 1);
    opacity: calc(.16 + .84 * var(--assemble));
    transform: translateY(calc((1 - var(--assemble)) * 24px)) scale(calc(.9 + .1 * var(--assemble)));
  }

  .hero-module-grid span {
    --tile: clamp(0, calc((var(--build, 1) - var(--tile-start)) * 4), 1);
    --tile-start: .30;
    opacity: var(--tile);
    transform: translateY(calc((1 - var(--tile)) * 10px));
  }

  .hero-module-grid span:nth-child(2) { --tile-start: .40; }
  .hero-module-grid span:nth-child(3) { --tile-start: .50; }
  .hero-module-grid span:nth-child(4) { --tile-start: .62; }

  :is(.capability-grid, .product-features, .saisie-grid) > article,
  .flow > li { position: relative; }

  .scroll-reveal:not(:focus-within) { opacity: var(--build, 1); }

  .scroll-reveal:not(:focus-within) > * {
    translate: 0 calc((1 - var(--build, 1)) * clamp(26px, 5vw, 48px));
  }

  :is(.capability-grid, .product-features, .saisie-grid) > article::before,
  .flow > li::before {
    content: "";
    position: absolute;
    bottom: 8px;
    inset-inline: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .38;
    transform: scaleX(var(--build, 1));
    transform-origin: left;
  }

  .saisie-grid > article::before { background: var(--light-accent); }

  .steps li { position: relative; }

  .steps li::after {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline: 0;
    height: 1px;
    background: var(--light-accent);
    transform: scaleX(var(--build, 1));
    transform-origin: left;
  }

  .example-data > div::after {
    --bar-fill: calc(var(--bar-size) * var(--build, 1));
    background: linear-gradient(90deg, var(--light-accent) var(--bar-fill), #365762 var(--bar-fill));
  }

  @media (min-width: 1021px) {
    .steps li:not(:last-child)::after { inset-inline-end: -20px; }
  }

  @media (max-width: 1020px) {
    .steps li:nth-child(odd)::after { inset-inline-end: -20px; }
  }

  @media (max-width: 560px) {
    .steps li:nth-child(odd)::after { inset-inline-end: -14px; }
  }
}

@media (hover: hover) and (pointer: fine) {
  .capability:hover { box-shadow: 0 14px 28px #122b3429; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .capability { transition: box-shadow 220ms ease-out; }
  .capability .platform-symbol { transition: transform 240ms cubic-bezier(.2, .7, .3, 1); }
  .capability:hover .platform-symbol { transform: translate(3px, -4px) rotate(-5deg) scale(1.08); }
}