/* ==========================================================================
   KO Technologies — kotechnologies.ie
   Design system for the corporate site.

   Identity: dark navy surfaces, electric blue accent, generous spacing,
   operations-platform feel. No gradients beyond controlled radial glows,
   no startup-generic UI.

   Contents
     01. Tokens
     02. Reset & base
     03. Layout primitives
     04. Typography
     05. Buttons & links
     06. Header / navigation
     07. Hero
     08. Flow (Production -> Packing -> Dispatch -> Delivery)
     09. Cards, grids, feature lists
     10. Product interface mockups
     11. Paper (light) sections
     12. CTA strip
     13. Footer
     14. Utilities & motion preferences
   ========================================================================== */

/* ── 01. Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Surfaces — dark navy scale */
  --bg:          #070B14;
  --surface-1:   #0B1220;
  --surface-2:   #101A2E;
  --surface-3:   #16223A;
  --surface-4:   #1C2A45;

  /* Hairlines */
  --line:        rgba(148, 175, 224, 0.13);
  --line-strong: rgba(148, 175, 224, 0.26);

  /* Ink on dark */
  --ink:      #EAF0FA;
  --ink-2:    #A9B6CE;
  --ink-3:    #74839F;

  /* Brand */
  --blue:        #2F6BFF;
  --blue-2:      #4C8DFF;
  --blue-3:      #8FB6FF;
  --blue-soft:   rgba(47, 107, 255, 0.13);
  --blue-line:   rgba(76, 141, 255, 0.34);

  /* Status accents (interface mockups only) */
  --ok:     #2FBF6E;
  --warn:   #E0A33A;
  --alert:  #E2604F;
  --violet: #8B7BFF;
  --cyan:   #35C4E0;

  /* Light "paper" sections */
  --paper:        #F4F7FC;
  --paper-2:      #E8EEF9;
  --paper-line:   rgba(11, 18, 32, 0.10);
  --paper-ink:    #0B1220;
  --paper-ink-2:  #4E5B75;
  --paper-ink-3:  #7C89A2;

  /* Type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Radius / shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.85);

  /* Rhythm */
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 124px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 02. Reset & base ───────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* The components below are laid out as figures, so the browser default
   `figure { margin: 1em 40px }` would inset every one of them. */
figure { margin: 0; }

a { color: var(--blue-2); text-decoration: none; }
a:hover { color: var(--blue-3); }

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

::selection { background: rgba(47, 107, 255, 0.32); }

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: #fff;
}

/* ── 03. Layout primitives ──────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 5vw, 76px); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.rule { height: 1px; background: var(--line); }

/* ── 04. Typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.9rem); font-weight: 640; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); letter-spacing: -0.014em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-2);
}

.mono {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.measure { max-width: 68ch; }
.measure-tight { max-width: 54ch; }

/* ── 05. Buttons & links ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
              color 0.16s var(--ease), transform 0.16s var(--ease);
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(47, 107, 255, 0.9);
}
/* Colour change only: the lift lives in the (hover: hover) block below, so a
   touch device never inherits a hover transform. */
.btn--primary:hover { background: #3D78FF; color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  background: rgba(148, 175, 224, 0.07);
  border-color: var(--line-strong);
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--blue-2);
}
.arrow-link svg { transition: transform 0.18s var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ── 06. Header / navigation ────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 11, 20, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-weight: 620;
  letter-spacing: -0.018em;
  font-size: 1.02rem;
}
.brand:hover { color: var(--ink); }
.brand img { width: 26px; height: auto; }

.brand--lockup img { width: 168px; }

.nav { display: flex; align-items: center; gap: 4px; }

.nav a {
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 520;
  color: var(--ink-2);
  transition: color 0.14s var(--ease), background-color 0.14s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(148, 175, 224, 0.08); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--blue-soft); }

.nav__cta {
  margin-left: 12px;
  padding: 9px 18px !important;
  background: var(--blue);
  color: #fff !important;
  font-weight: 600;
}
.nav__cta:hover { background: #3D78FF; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after { top: 5.5px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 12px 14px; font-size: 0.98rem; }
  .nav__cta { margin-left: 0; margin-top: 8px; text-align: center; justify-content: center; }
  .site-header__inner { position: relative; }
}

/* ── 07. Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 148px) clamp(56px, 7vw, 104px);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 58% at 76% -6%, rgba(47, 107, 255, 0.24), transparent 62%),
    radial-gradient(48% 42% at 8% 6%, rgba(53, 196, 224, 0.10), transparent 66%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(148, 175, 224, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 175, 224, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(78% 62% at 50% 22%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(78% 62% at 50% 22%, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero > .wrap { position: relative; z-index: 1; }

.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 30px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(16, 26, 46, 0.6);
}
.hero__brand img { width: 24px; height: auto; }
.hero__brand span {
  font-size: 0.88rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.hero h1 { max-width: 20ch; margin-bottom: 26px; }
.hero h1 .accent { color: var(--blue-2); }

.hero__sub { max-width: 58ch; }

.hero__rule {
  height: 1px;
  margin: clamp(48px, 6vw, 76px) 0 30px;
  background: linear-gradient(to right, var(--line-strong), transparent 78%);
}

.hero__note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-size: 0.86rem;
  color: var(--ink-3);
}
.hero__note b { color: var(--ink-2); font-weight: 600; }

/* ── 08. Flow ───────────────────────────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  counter-reset: flow;
}

.flow__step {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.flow__step::before {
  counter-increment: flow;
  content: "0" counter(flow);
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--blue-2);
}

.flow__step h3 { margin-bottom: 6px; font-size: 1.02rem; }
.flow__step p { font-size: 0.875rem; line-height: 1.55; margin: 0; color: var(--ink-3); }

.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 14px;
  height: 1px;
  background: var(--line-strong);
}

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; }
  .flow__step::after { display: none !important; }
}

/* ── 09. Cards, grids, feature lists ────────────────────────────────────── */

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
}

.card {
  padding: 24px 22px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.card:hover { border-color: var(--line-strong); background: var(--surface-2); }

.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.9rem; line-height: 1.6; margin: 0; color: var(--ink-3); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 9px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  color: var(--blue-2);
}
.card__icon svg { width: 17px; height: 17px; }

.card--flat { background: transparent; }
.card--flat:hover { background: var(--surface-1); }

/* Feature list with markers */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--ink-2);
  font-size: 0.945rem;
}
.feature-list li:last-child { margin-bottom: 0; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.16);
}

/* Definition-style rows (product sections) */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.row h3 { margin: 0; font-size: 1.02rem; }
.row p { margin: 0; font-size: 0.945rem; }
.row__tag {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
}

/* Callout / notice */
.notice {
  padding: 20px 22px;
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  background: linear-gradient(to right, rgba(47, 107, 255, 0.08), transparent 62%);
}
.notice p { margin: 0; font-size: 0.94rem; color: var(--ink-2); }
.notice strong { color: var(--ink); font-weight: 620; }

/* ── 10. Product interface mockups ──────────────────────────────────────── */

.mock-stage { position: relative; }

.mock {
  position: relative;
  /* Interface mockups scale with the viewport: every inner size is in `em`. */
  font-size: clamp(8.5px, 1.05vw, 12.5px);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.85em 1.1em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.mock__dots { display: flex; gap: 0.45em; }
.mock__dots i {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--surface-4);
}
.mock__title {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.mock__title b { color: var(--ink); font-weight: 620; }
.mock__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--ink-3);
  white-space: nowrap;
}

.mock__body { padding: 1.1em; display: grid; gap: 1em; }

.mock-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; }

.mock-kpi {
  padding: 0.85em 0.95em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.6em;
}
.mock-kpi__label {
  display: block;
  font-size: 0.8em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4em;
}
.mock-kpi__value { font-size: 1.5em; font-weight: 640; color: var(--ink); letter-spacing: -0.02em; }
.mock-kpi__note { display: block; margin-top: 0.25em; font-size: 0.8em; color: var(--ink-3); }

.mock-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; }

.mock-panel {
  padding: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.6em;
}
.mock-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.75em;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--ink-2);
}

.mock-task {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.6em;
  border-radius: 0.45em;
  background: rgba(148, 175, 224, 0.05);
  margin-bottom: 0.45em;
  font-size: 0.88em;
  color: var(--ink-2);
}
.mock-task:last-child { margin-bottom: 0; }
.mock-task__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-task__qty { font-family: var(--mono); font-size: 0.92em; color: var(--ink-3); }

.mock-bar {
  flex: 0 0 3.4em;
  height: 0.36em;
  border-radius: 999px;
  background: rgba(148, 175, 224, 0.16);
  overflow: hidden;
}
.mock-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue-2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip--ok     { color: #7BE0A6; background: rgba(47, 191, 110, 0.13); border-color: rgba(47, 191, 110, 0.3); }
.chip--warn   { color: #EFC173; background: rgba(224, 163, 58, 0.13); border-color: rgba(224, 163, 58, 0.3); }
.chip--alert  { color: #F0907F; background: rgba(226, 96, 79, 0.13); border-color: rgba(226, 96, 79, 0.3); }
.chip--info   { color: var(--blue-3); background: var(--blue-soft); border-color: var(--blue-line); }
.chip--muted  { color: var(--ink-3); background: rgba(148, 175, 224, 0.09); border-color: var(--line); }
.chip--violet { color: #B8AEFF; background: rgba(139, 123, 255, 0.13); border-color: rgba(139, 123, 255, 0.3); }

/* Kitchen Live — board of production tickets */
.mock-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; }

.mock-lane {
  padding: 0.75em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.6em;
}
.mock-lane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7em;
  font-size: 0.86em;
  font-weight: 620;
  color: var(--ink-2);
}
.mock-lane__head span {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink-3);
}

.mock-ticket {
  padding: 0.6em 0.7em;
  border-radius: 0.5em;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 0.22em solid var(--blue-2);
  margin-bottom: 0.5em;
}
.mock-ticket:last-child { margin-bottom: 0; }
.mock-ticket--done { border-left-color: var(--ok); }
.mock-ticket--hold { border-left-color: var(--warn); }
.mock-ticket__title {
  font-size: 0.92em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mock-ticket__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.84em;
  color: var(--ink-3);
}

/* Dispatch — table of runs */
.mock-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.mock-table th {
  text-align: left;
  padding: 0 0.8em 0.7em;
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mock-table td {
  padding: 0.7em 0.8em;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}
.mock-table tbody tr:last-child td { border-bottom: 0; }
.mock-table td strong { color: var(--ink); font-weight: 600; }
.mock-table td.num { font-family: var(--mono); color: var(--ink-3); }

/* Delivery — route timeline */
.mock-route { display: grid; gap: 0; }
.mock-stop {
  position: relative;
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9em;
  padding: 0.72em 0 0.72em 0.2em;
}
.mock-stop::before {
  content: "";
  position: absolute;
  left: 0.75em;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.mock-stop:first-child::before { top: 50%; }
.mock-stop:last-child::before { bottom: 50%; }
.mock-stop__dot {
  position: relative;
  z-index: 1;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--ink-3);
}
.mock-stop--done .mock-stop__dot { background: rgba(47, 191, 110, 0.16); border-color: rgba(47, 191, 110, 0.45); color: #7BE0A6; }
.mock-stop--next .mock-stop__dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.mock-stop__name { font-size: 0.92em; font-weight: 580; color: var(--ink); }
.mock-stop__meta { display: block; font-family: var(--mono); font-size: 0.82em; color: var(--ink-3); margin-top: 0.15em; }

.mock-progress {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.85em 1em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.6em;
  font-size: 0.88em;
  color: var(--ink-2);
}
.mock-progress__track {
  flex: 1;
  height: 0.42em;
  border-radius: 999px;
  background: rgba(148, 175, 224, 0.16);
  overflow: hidden;
}
.mock-progress__track i { display: block; height: 100%; background: var(--blue-2); border-radius: 999px; }
.mock-progress__pct { font-family: var(--mono); color: var(--ink); font-weight: 600; }

/* Small screens: the mockups are full-width but narrow, so keep the base
   font readable and collapse the dense grids instead of shrinking the type. */
@media (max-width: 700px) {
  .mock { font-size: 10px; }
  .phone .mock { font-size: 10.5px; }
  .mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-cols { grid-template-columns: 1fr; }
  .mock-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-table { font-size: 0.84em; }
  .mock-table th,
  .mock-table td { padding: 0.55em 0.6em; }
}

/* Framing for a mockup + caption */
.mockup {
  margin: 0;
}
.mockup figcaption {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.mockup figcaption b { color: var(--ink-2); font-weight: 620; }
.phone + figcaption { text-align: center; justify-content: center; }

.mockup figcaption::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--blue-2);
}

.mockup-grid { display: grid; gap: clamp(26px, 4vw, 44px); }

/* Phone frame for driver-facing surfaces */
.phone {
  width: min(310px, 100%);
  margin-inline: auto;
  padding: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
}
.phone .mock {
  font-size: clamp(9px, 2.4vw, 11.5px);
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}
.phone .mock__body { padding: 0.9em; }
.phone .mock-cols { grid-template-columns: 1fr; }

/* ── 10b. Contact form & details ───────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.detail-list { list-style: none; margin: 0 0 30px; padding: 0; }
.detail-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.detail-list li:first-child { border-top: 1px solid var(--line); }
.detail-list .label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.detail-list a,
.detail-list .value {
  font-size: 0.98rem;
  font-weight: 560;
  color: var(--ink);
  word-break: break-word;
}
.detail-list .note { display: block; margin-top: 5px; font-size: 0.83rem; color: var(--ink-3); }

.copy-btn {
  margin-left: 10px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.copy-btn:hover { color: var(--ink); border-color: var(--blue-line); }

.form {
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.form fieldset { border: 0; margin: 0; padding: 0; }
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 620px) {
  .form__grid { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.field .hint { font-size: 0.78rem; color: var(--ink-3); font-weight: 400; }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 148px; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-2);
  background: var(--surface-1);
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 24px;
}

.form-status { font-size: 0.88rem; color: var(--ink-2); }
.form-status[data-state="error"] { color: #F0907F; }
.form-status[data-state="ok"] { color: #7BE0A6; }

.form__disclaimer {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* ── 10c. Legal / long-form documents ──────────────────────────────────── */

.legal { max-width: 78ch; }
.legal h2 {
  margin: 52px 0 16px;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin: 30px 0 10px; font-size: 1.02rem; }
.legal ul { margin: 0 0 1.15em; padding-left: 22px; }
.legal li { margin-bottom: 9px; color: var(--ink-2); }
.legal li:last-child { margin-bottom: 0; }
.legal .meta { font-size: 0.86rem; color: var(--ink-3); }

.legal-toc {
  margin: 0 0 56px;
  padding: 22px 24px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.legal-toc h2 { margin: 0 0 14px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { margin-bottom: 8px; font-size: 0.9rem; }
@media (max-width: 620px) { .legal-toc ol { columns: 1; } }

/* ── 11. Paper (light) sections ─────────────────────────────────────────── */

.section--paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.section--paper h1,
.section--paper h2,
.section--paper h3,
.section--paper h4 { color: var(--paper-ink); }
.section--paper p { color: var(--paper-ink-2); }
.section--paper .eyebrow { color: #1B54D8; }
.section--paper .muted { color: var(--paper-ink-3); }
.section--paper .lead { color: var(--paper-ink-2); }
.section--paper a { color: #1B54D8; }
.section--paper a:hover { color: #0E3AA8; }

.section--paper .card {
  background: #FFFFFF;
  border-color: rgba(11, 18, 32, 0.09);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
}
.section--paper .card:hover { background: #FFFFFF; border-color: rgba(11, 18, 32, 0.18); }
.section--paper .card p { color: var(--paper-ink-2); }
.section--paper .card__icon { background: rgba(47, 107, 255, 0.10); border-color: rgba(47, 107, 255, 0.24); color: #1B54D8; }
.section--paper .feature-list li { color: var(--paper-ink-2); }
.section--paper .feature-list li::before { box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14); }
.section--paper .rule { background: var(--paper-line); }
.section--paper .rows { border-top-color: var(--paper-line); }
.section--paper .row { border-bottom-color: var(--paper-line); }
.section--paper .row__tag { color: var(--paper-ink-3); }
.section--paper .notice {
  background: rgba(47, 107, 255, 0.06);
  border-color: rgba(47, 107, 255, 0.28);
  border-left-color: var(--blue);
}
.section--paper .notice p { color: var(--paper-ink-2); }
.section--paper .notice strong { color: var(--paper-ink); }

/* Light-surface logo lockup */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.lockup img { width: clamp(150px, 20vw, 210px); }
.lockup--stacked { flex-direction: column; align-items: flex-start; gap: 10px; }

/* ── 12. CTA strip ──────────────────────────────────────────────────────── */

.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 130% at 88% 50%, rgba(47, 107, 255, 0.20), transparent 66%);
  pointer-events: none;
}
.cta > .wrap { position: relative; }

.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: clamp(48px, 6vw, 76px);
}
.cta h2 { margin-bottom: 10px; }
.cta p { max-width: 52ch; margin: 0; }
@media (max-width: 820px) {
  .cta__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
  .cta .btn-row { margin-top: 0; }
}

/* ── 13. Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  background: #05080F;
  padding-block: 56px 34px;
  font-size: 0.9rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}
@media (max-width: 520px) {
  .site-footer__top { grid-template-columns: 1fr; }
}

.site-footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.site-footer__brand img { width: 26px; }
.site-footer__brand span { font-weight: 620; letter-spacing: -0.018em; font-size: 1rem; color: var(--ink); }
.site-footer p { font-size: 0.875rem; color: var(--ink-3); max-width: 40ch; }

.footer-col h4 {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--ink-2); font-size: 0.9rem; }
.footer-col a:hover { color: var(--ink); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-size: 0.83rem;
  color: var(--ink-3);
}
.site-footer__bottom nav { display: flex; gap: 20px; }

/* ── 14. Utilities & motion preferences ─────────────────────────────────── */

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Print — the pages should read as documents */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .cta, .mock__bar { display: none; }
  .section--paper { background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
}

/* ==========================================================================
   V2 — landing-page layer
   ==========================================================================
   A larger hero with the product visible immediately, a workflow rail,
   alternating text/media stages, original operational visuals and subtle
   scroll motion.

   Everything here is additive: the V1 classes above are untouched, so About,
   Contact, Privacy and Terms keep rendering exactly as they did.

     15. Section separation & surfaces
     16. Motion (scroll reveal)
     17. Hero v2
     18. Workflow rail
     19. Alternating stages
     20. Operational visuals
     21. Pillar compositions
   ========================================================================== */

/* ── 15. Section separation & surfaces ──────────────────────────────────── */

:root {
  --section-y-lg: clamp(80px, 9.5vw, 158px);
  --aura: rgba(47, 107, 255, 0.20);
}

.section--lg   { padding-block: var(--section-y-lg); }
.section--dim  { background: var(--surface-1); border-block: 1px solid var(--line); }
.section--deep { background: #05080F; border-block: 1px solid var(--line); }

/* A soft seam between dark sections instead of a hard edge. */
.seam {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}

.section-head--wide { max-width: 900px; }

/* ── 16. Motion ─────────────────────────────────────────────────────────── */

/* The .js-motion class is added by site.js, so a JS failure leaves every
   section fully visible instead of blank. */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.75s var(--ease) var(--reveal-delay, 0s),
    transform 0.75s var(--ease) var(--reveal-delay, 0s);
}
.js-motion .reveal.is-visible { opacity: 1; transform: none; }

/* Media leads slightly slower than copy, which reads as depth, not lag. */
.js-motion .reveal--lift { transform: translateY(34px); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .js-motion .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 17. Hero v2 ────────────────────────────────────────────────────────── */

.hero--xl {
  padding-block: clamp(76px, 9vw, 150px) clamp(0px, 1vw, 16px);
  border-bottom: 0;
}

.hero--xl h1 {
  font-size: clamp(2.35rem, 5.9vw, 4.55rem);
  letter-spacing: -0.032em;
  max-width: 17ch;
  margin-bottom: 30px;
}

.hero--xl .lead { font-size: clamp(1.08rem, 1.7vw, 1.42rem); max-width: 56ch; }

.hero__cta { margin-top: 38px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-3);
}
.hero__meta b { color: var(--ink-2); font-weight: 600; }

/* The product, early and large. */
.hero__product {
  position: relative;
  margin-top: clamp(48px, 5.5vw, 84px);
  padding-bottom: clamp(56px, 7vw, 104px);
}

.hero__product::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -6%;
  height: 62%;
  background: radial-gradient(58% 62% at 50% 40%, var(--aura), transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}

.hero__product .wrap { position: relative; }

/* A wider, higher-fidelity mockup for the hero. */
.mock--xl {
  font-size: clamp(9.5px, 1.12vw, 14px);
  border-radius: var(--r-lg);
  box-shadow:
    0 70px 130px -56px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(148, 175, 224, 0.16);
}
.mock--xl .mock__body { padding: 1.25em; gap: 1.15em; }

/* Depth: a small card floating over the hero mockup corner. */
.hero__float {
  position: absolute;
  right: clamp(-8px, 1.5vw, 26px);
  bottom: clamp(18px, 3.5vw, 52px);
  width: clamp(190px, 21vw, 292px);
  font-size: clamp(8.5px, 0.82vw, 11px);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .hero__float { display: none; }
}

.mock-caption {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--ink-3);
  text-align: center;
}

/* ── 18. Workflow rail ──────────────────────────────────────────────────── */

.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(44px, 5vw, 74px);
}

/* The connecting line sits behind the markers. */
.rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}

.rail__item { position: relative; }

.rail__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--blue-2);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 8px var(--bg);
}
.rail__item--live .rail__marker {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 8px var(--bg), 0 12px 30px -14px rgba(47, 107, 255, 0.95);
}

.rail__item h3 { margin-bottom: 8px; font-size: 1.06rem; }
.rail__item p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 860px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
  .rail::before { display: none; }
}
@media (max-width: 520px) {
  .rail { grid-template-columns: 1fr; }
}

/* ── 19. Alternating stages ─────────────────────────────────────────────── */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(34px, 5vw, 84px);
  align-items: center;
}

.stage__copy h2 { margin-bottom: 18px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.stage__copy p { font-size: 1rem; }
.stage__copy .feature-list { margin-top: 26px; }

.stage__index {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--blue-2);
}

/* Reversed: media leads on the left, copy follows on the right. The column
   template is swapped as well as the order, so the media column stays the
   wider of the two whichever side it sits on. */
.stage--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.stage--flip .stage__copy { order: 2; }
.stage--flip .stage__media { order: 1; }

@media (max-width: 900px) {
  .stage,
  .stage--flip { grid-template-columns: 1fr; gap: 32px; }
  .stage--flip .stage__copy,
  .stage--flip .stage__media { order: 0; }
}

/* Stage mockups sit in a narrower column than the hero, so they get their own
   base size. Tuned and verified with scripts/audit.mjs, which detects content
   clipped inside a .mock. */
.stage__media .mock { font-size: 11px; }
.stage__media .mock__body { padding: 1em; gap: 1em; }

/* Stages alternate their surrounding surface, so consecutive blocks read as
   separate moments rather than one long scroll. */
.stage--panel .stage__media {
  padding: clamp(18px, 2.4vw, 34px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 70% at 78% 8%, rgba(47, 107, 255, 0.13), transparent 62%),
    var(--surface-1);
  border: 1px solid var(--line);
}

/* ── 20. Operational visuals ────────────────────────────────────────────── */

.visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(64% 62% at 74% 6%, rgba(47, 107, 255, 0.16), transparent 64%),
    linear-gradient(160deg, var(--surface-2), #070B12 68%);
}
.visual svg { display: block; width: 100%; height: auto; }

.visual__badge {
  position: absolute;
  left: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.72);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) { .visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .visual-grid { grid-template-columns: 1fr; } }

.visual-card { display: flex; flex-direction: column; }
.visual-card h3 { margin: 18px 0 8px; font-size: 1rem; }
.visual-card p { margin: 0; font-size: 0.9rem; color: var(--ink-3); }

/* ── 21. Pillar compositions ────────────────────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pillar { padding: 26px 22px; background: var(--surface-1); }
.pillar b {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.pillar p { margin: 0; font-size: 0.9rem; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

.section--paper .pillars { background: var(--paper-line); border-color: var(--paper-line); }
.section--paper .pillar { background: #FFFFFF; }
.section--paper .pillar b { color: #1B54D8; }
.section--paper .pillar p { color: var(--paper-ink-2); }

/* ── 22. Small-screen overrides for the V2 components ───────────────────── */
@media (max-width: 700px) {
  /* Keep the hero and stage mockups readable rather than micro-scaled. */
  .mock--xl { font-size: 10.5px; }
  .stage__media .mock { font-size: 10px; }
  .stage--panel .stage__media { padding: 14px; }
  .hero--xl h1 { max-width: none; }
}

/* ── 23. Reveal stagger ─────────────────────────────────────────────────── */

/* Elements that reveal as a group step in sequence rather than together.
   Pure CSS, so no per-element timing logic in JS. */
.rail .reveal:nth-child(2),
.visual-grid .reveal:nth-child(2),
.pillars .reveal:nth-child(2) { --reveal-delay: 0.08s; }

.rail .reveal:nth-child(3),
.visual-grid .reveal:nth-child(3),
.pillars .reveal:nth-child(3) { --reveal-delay: 0.16s; }

.rail .reveal:nth-child(4),
.pillars .reveal:nth-child(4) { --reveal-delay: 0.24s; }

/* The media in a stage lands just after its copy. */
.stage__media.reveal { --reveal-delay: 0.1s; }

/* ── 24. Contextual imagery (V2.1) ─────────────────────────────────────── */

/* Editorial scene frame. Distinct from .mock (which has window chrome) and
   from .visual (which holds diagrams): these are the contextual images. */
.scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: #070B14;
  box-shadow: var(--shadow-lg);
}
.scene img { display: block; width: 100%; height: auto; }

/* Caption block sits BELOW the image, never on top of it: the image is the
   subject and the prose is the annotation, which is what keeps this editorial
   rather than a text-over-photo hero. */
.scene-band__copy {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3.5vw, 60px);
  margin-top: clamp(26px, 3.2vw, 46px);
  align-items: start;
}
.scene-band__copy h2 { margin-bottom: 0; font-size: clamp(1.4rem, 2.5vw, 1.95rem); }
.scene-band__copy p { margin: 0; font-size: 0.98rem; }
.scene-band__meta {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.79rem;
  color: var(--ink-3);
}
@media (max-width: 800px) {
  .scene-band__copy { grid-template-columns: 1fr; gap: 12px; }
  .scene-band__copy h2 { font-size: 1.45rem; }
}

/* ── 25. Mobile density ─────────────────────────────────────────────────── */

/* The three-card operational diagram band is desktop-only.

   Measured: at 390px it cost roughly 1,200px of scroll — about two extra
   screens — while restating ideas the workflow rail, the four workflow
   stages and the contextual scenes already carry. Removed below 700px so the
   site stays navigable on a phone. Every workflow and product section is
   unaffected, and it is unchanged on desktop. */
@media (max-width: 700px) {
  .visual-band { display: none; }
}

/* ==========================================================================
   V3 — visual direction reset
   ==========================================================================
   The V2.1 page was almost uniformly dark, which read as technical
   documentation rather than a commercial B2B site. V3 alternates three
   section treatments so the eye gets rest between products:

     .section--paper                 very light off-white
     .section--paper.section--tint   blue-tinted
     (dark navy is the default, no class needed)

   Product screens stay dark on every treatment — the software is meant to
   read as the hero asset against the lighter environment around it.

     26. Light-section system
     27. Large product screens
     28. Image placeholders
     29. Compact operational blocks
     30. Editorial section lead
     31. Mobile compression
   ========================================================================== */

/* ── 26. Light-section system ───────────────────────────────────────────── */

:root {
  --tint: #E7EEFB;          /* blue-tinted section */
  --tint-2: #D8E5F9;
  --tint-line: rgba(27, 84, 216, 0.14);
}

/* Paired with .section--paper in markup, so it inherits the whole light
   theme (headings, prose, cards, lists) and only overrides the surface. */
.section--paper.section--tint {
  background: linear-gradient(180deg, var(--tint), var(--tint-2));
  border-color: var(--tint-line);
}

/* A dark product screen on a light surface needs a drop shadow rather than a
   pale blue hairline, so it reads as a real screenshot sitting on the page. */
.section--paper .mock,
.section--paper .phone {
  border-color: rgba(11, 18, 32, 0.10);
  box-shadow: 0 44px 92px -46px rgba(11, 18, 32, 0.45), 0 2px 6px rgba(11, 18, 32, 0.05);
}
.section--paper .mock__bar { border-bottom-color: rgba(255, 255, 255, 0.07); }
.section--paper .mock-caption { color: var(--paper-ink-3); }

.section--paper .rail::before {
  background: linear-gradient(to right, transparent, rgba(27, 84, 216, 0.26) 12%, rgba(27, 84, 216, 0.26) 88%, transparent);
}
.section--paper .rail__marker {
  background: #fff;
  border-color: rgba(27, 84, 216, 0.22);
  color: #1B54D8;
  box-shadow: 0 0 0 8px var(--paper);
}
.section--paper .rail__item--live .rail__marker {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 8px var(--paper), 0 12px 30px -16px rgba(47, 107, 255, 0.8);
}
.section--paper .rail__item h3 { color: var(--paper-ink); }
.section--paper .rail__item p { color: var(--paper-ink-2); }

/* ── 27. Large product screens ──────────────────────────────────────────── */

/* Full-width hero screens. The content of these mockups is deliberately
   simpler than V2 (fewer panels, fewer small elements) so the type can be
   this much larger while still fitting the column. */
.mock--2xl {
  font-size: clamp(10px, 1.14vw, 15px);
  border-radius: var(--r-xl);
}
.mock--2xl .mock__body { padding: 1.3em; gap: 1.2em; }

/* Wide product band: the screen is the subject, the prose is annotation.
   The width cap keeps the aspect ratio in believable product-screen territory
   (~1.9-2.1) instead of stretching into a thin letterbox banner. */
.product-band { margin-top: clamp(34px, 4.6vw, 66px); }
.product-band .mock { margin-inline: auto; max-width: 1020px; }
.hero__product .mock--2xl { max-width: 1020px; margin-inline: auto; }

/* ── 28. Image placeholders ─────────────────────────────────────────────── */

/* Deliberate, labelled placeholders — not broken images and not more vector
   scenes. Each states its subject and aspect ratio so the final licensed
   photograph can be dropped straight in. */
.imgph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(26px, 4vw, 56px);
  aspect-ratio: 16 / 9;
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(27, 84, 216, 0.34);
  background:
    repeating-linear-gradient(135deg, rgba(27, 84, 216, 0.035) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #EDF3FC, #DDE8F8);
  color: #33507F;
}
.imgph--wide { aspect-ratio: 21 / 9; }
.imgph--tall { aspect-ratio: 4 / 3; }

.imgph__icon { width: 32px; height: 32px; opacity: 0.7; }
.imgph__label {
  font-size: 0.76rem;
  font-weight: 660;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1B54D8;
}
.imgph__note {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #516790;
}
.imgph__spec {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: #6C7FA6;
}

/* Dark treatment, for placeholders that sit on a navy section. */
.imgph--dark {
  border-color: rgba(76, 141, 255, 0.36);
  background:
    repeating-linear-gradient(135deg, rgba(76, 141, 255, 0.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #101A2E, #0A1120);
  color: #8FB6FF;
}
.imgph--dark .imgph__label { color: var(--blue-2); }
.imgph--dark .imgph__note { color: var(--ink-3); }
.imgph--dark .imgph__spec { color: #5C6C88; }

/* ── 29. Compact operational blocks ─────────────────────────────────────── */

.blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.block {
  padding: clamp(22px, 2.2vw, 30px) clamp(18px, 1.8vw, 24px);
  border-radius: var(--r-md);
  background: #FFFFFF;
  border: 1px solid rgba(11, 18, 32, 0.08);
}
.block__n {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #1B54D8;
}
.block h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--paper-ink); }
.block p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--paper-ink-2); }

@media (max-width: 900px) { .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .blocks { grid-template-columns: 1fr; } }

/* ── 30. Editorial section lead ─────────────────────────────────────────── */

/* Heading on the left, prose on the right. Used under a large image or a
   large product screen so the visual stays the subject. */
.sec-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 3.4vw, 58px);
  align-items: start;
}
.sec-lead h2 { margin-bottom: 0; }
.sec-lead p { margin: 0; }
@media (max-width: 820px) {
  .sec-lead { grid-template-columns: 1fr; gap: 12px; }
  .sec-lead h2 { margin-bottom: 0; }
}

/* ── 31. Mobile compression ─────────────────────────────────────────────── */
/* Shortening on mobile is a design requirement, not an accident: tighter
   section rhythm, and secondary decoration removed rather than stacked. */
@media (max-width: 700px) {
  .section--lg { padding-block: clamp(46px, 9vw, 68px); }
  .hero--xl { padding-block: clamp(38px, 7vw, 60px) 0; }
  .hero__meta { margin-top: 28px; padding-top: 20px; }
  .hero__product { margin-top: 34px; padding-bottom: 46px; }
  .product-band { margin-top: 26px; }
  .mock--2xl { font-size: 10px; }
  .mock-caption { text-align: left; margin-top: 14px; }

  /* Decorative only — the same information is in the copy and the footer. */
  .scene,
  .visual,
  .visual-band { display: none; }
}

/* ==========================================================================
   V3.1 — final asset pass
   ==========================================================================
   Three things only, no layout change:

     32. Brand presence
     33. Hero polish
     34. Photography drop-in
   ========================================================================== */

/* ── 32. Brand presence ─────────────────────────────────────────────────── */

/* A touch more presence for the mark, in the header and the footer. */
.brand img { width: 30px; }
.brand { font-size: 1.06rem; letter-spacing: -0.024em; }
.site-footer__brand img { width: 30px; }
.site-footer__brand span { letter-spacing: -0.024em; }

/* The eyebrow gets a short rule, in the current colour, so the same device
   reads on dark, off-white and blue-tinted sections. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.72;
  flex: 0 0 auto;
}
.section-head--center .eyebrow { justify-content: center; }

/* Consistent icon treatment: one stroke weight, one size, one colour, used
   beside every operational label. */
.block__n {
  display: flex;
  align-items: center;
  gap: 9px;
}
.block__n svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.9;
}

/* Brand motif: faint concentric rings echoing the circular KO mark. Applied
   to dark sections only, always behind the content and never interactive. */
.motif { position: relative; }
.motif::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1400px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -34%);
  background: repeating-radial-gradient(
    circle at center,
    rgba(76, 141, 255, 0.05) 0 1px,
    transparent 1px 78px
  );
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 58%);
  mask-image: radial-gradient(circle at center, #000 0%, transparent 58%);
  pointer-events: none;
  z-index: 0;
}
.motif > * { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .motif::after { display: none; }
}

/* ── 33. Hero polish ────────────────────────────────────────────────────── */

/* Tighter hierarchy: the headline, the line of copy and the CTA read as one
   block, and the product screen follows it more closely. */
.hero--xl h1 {
  font-size: clamp(2.45rem, 6vw, 4.75rem);
  letter-spacing: -0.036em;
  line-height: 1.06;
  margin-bottom: 24px;
}
.hero--xl .lead { max-width: 52ch; }
.hero__cta { margin-top: 32px; }
.hero__product { margin-top: clamp(36px, 4.2vw, 58px); padding-bottom: clamp(62px, 7vw, 108px); }
.hero__meta { margin-top: 32px; padding-top: 22px; font-size: 0.83rem; }

/* Depth around the screen: a tighter, deeper shadow plus a cool spill, so the
   UI sits on the page rather than floating above it. */
.hero__product .mock--2xl {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.05) inset,
    0 80px 140px -58px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(148, 175, 224, 0.17),
    0 0 74px -26px rgba(47, 107, 255, 0.34);
}

/* The bar of a hero screen gets a faint blue top edge, tying the product to
   the brand accent. */
.hero__product .mock__bar {
  border-bottom-color: rgba(76, 141, 255, 0.22);
}
.hero__product .mock__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(76, 141, 255, 0.6), transparent);
}
.hero__product .mock__bar { position: relative; }

/* ── 34. Photography drop-in ────────────────────────────────────────────── */

/* The <img> is hidden by default and only revealed by site.js once the file
   actually loads, so a missing file leaves the labelled placeholder visible
   instead of a broken image. */
.imgph { position: relative; }
.imgph__img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.imgph.has-photo {
  padding: 0;
  border: 0;
  background: #0B1220;
  overflow: hidden;
}
.imgph.has-photo .imgph__img { display: block; }
.imgph.has-photo .imgph__ph { display: none; }

/* The placeholder content itself, now nested one level deeper. */
.imgph__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

/* ── 35. Block rows sized to their content ──────────────────────────────── */

/* .blocks defaults to four columns. Rows holding fewer cards use these so a
   row never leaves a stranded empty column. */
.blocks--single { grid-template-columns: minmax(0, 1fr); }
.blocks--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 520px) {
  .blocks--single,
  .blocks--duo { grid-template-columns: 1fr; }
}

/* ── 36. Editorial photo blocks ─────────────────────────────────────────── */

/* The real photographs sit *beside* their copy rather than spanning the page,
   so they support the writing instead of dominating it.

   DOM order is always copy-then-media. The modifier moves the media to the
   left on desktop, and the stack order below 860px is therefore always
   text-then-image in every section, whichever side the photo takes on
   desktop. Column split is roughly 53% copy / 47% image, so the photo stays
   under ~490px wide inside the standard container. */

.photo-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);   /* copy | image */
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

.photo-block--media-first { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
.photo-block--media-first .photo-block__media { order: -1; }

.photo-block__copy h2 {
  margin-bottom: 16px;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
}
.photo-block__copy p { margin: 0; font-size: 1rem; }

/* Contain the photograph's height as well as its width. */
.photo-block__media { max-width: 100%; }

@media (max-width: 860px) {
  .photo-block,
  .photo-block--media-first {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4.5vw, 30px);
  }
  .photo-block--media-first .photo-block__media { order: 0; }
}

/* ==========================================================================
   V3.3 — final polish: motion, hovers, photo weight
   ==========================================================================
   CSS + the existing IntersectionObserver only. No animation library, no
   keyframe loops, nothing that runs continuously. Every initial "hidden"
   state lives under .js-motion, so a JS failure leaves the page fully
   visible, and prefers-reduced-motion clears all of it.

     37. Reveal variants
     38. Workflow rail sequence
     39. Sheet depth for product screens
     40. Hover (pointer devices only)
     41. Reduced motion
     42. Legal pages, mobile reading size
   ========================================================================== */

/* ── 37. Reveal variants ────────────────────────────────────────────────── */

/* Scoped by the element's own class, so no extra markup is needed on cards. */

/* Copy: fade only. */
.js-motion .reveal--fade { transform: none; }

/* Cards: a short lift. */
.js-motion .block.reveal,
.js-motion .pillar.reveal,
.js-motion .card.reveal { transform: translateY(14px); }

/* Product screens: a little more travel, so they settle onto the page. */
.js-motion .product-band.reveal {
  transform: translateY(26px);
  transition-duration: 0.85s;
}

/* Photographs: barely-there scale as well as a lift. */
.js-motion .photo-block__media.reveal {
  transform: translateY(10px) scale(0.985);
  transition-duration: 1s;
}

/* The settled state for each variant. These need a higher specificity than the
   rules above, not just a later position: a variant rule and the generic
   .reveal.is-visible rule have the same weight, so whichever comes last in the
   file would otherwise win and leave the element permanently offset. */
.js-motion .block.reveal.is-visible,
.js-motion .pillar.reveal.is-visible,
.js-motion .card.reveal.is-visible,
.js-motion .product-band.reveal.is-visible,
.js-motion .photo-block__media.reveal.is-visible { transform: none; }

/* ── 38. Workflow rail sequence ─────────────────────────────────────────── */

/* The container carries .reveal--fade, so it only fades; the line draws and
   the nodes and labels step in from there. Desktop only for the line, which
   is hidden below 860px anyway. */
.js-motion .rail::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.05s var(--ease) 0.1s;
}
.js-motion .rail.is-visible::before { transform: scaleX(1); }

.js-motion .rail__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js-motion .rail.is-visible .rail__item { opacity: 1; transform: none; }

.js-motion .rail__marker {
  transform: scale(0.82);
  transition: transform 0.5s var(--ease);
}
.js-motion .rail.is-visible .rail__marker { transform: scale(1); }

/* Stagger: node, then label, one after another. */
.js-motion .rail.is-visible .rail__item:nth-child(1),
.js-motion .rail.is-visible .rail__item:nth-child(1) .rail__marker { transition-delay: 0.16s; }
.js-motion .rail.is-visible .rail__item:nth-child(2),
.js-motion .rail.is-visible .rail__item:nth-child(2) .rail__marker { transition-delay: 0.28s; }
.js-motion .rail.is-visible .rail__item:nth-child(3),
.js-motion .rail.is-visible .rail__item:nth-child(3) .rail__marker { transition-delay: 0.40s; }
.js-motion .rail.is-visible .rail__item:nth-child(4),
.js-motion .rail.is-visible .rail__item:nth-child(4) .rail__marker { transition-delay: 0.52s; }

/* ── 39. Sheet depth for product screens ────────────────────────────────── */

/* A single soft top highlight, no 3D, no float. */
.js-motion .product-band .mock {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.045) inset,
    0 60px 110px -52px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(148, 175, 224, 0.16);
}
.section--paper .product-band .mock {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.045) inset,
    0 46px 84px -44px rgba(11, 18, 32, 0.5),
    0 0 0 1px rgba(11, 18, 32, 0.09);
}

/* ── 40. Hover (pointer devices only) ───────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .btn {
    transition:
      background-color 0.18s var(--ease),
      border-color 0.18s var(--ease),
      color 0.18s var(--ease),
      transform 0.18s var(--ease),
      box-shadow 0.18s var(--ease);
  }
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -16px rgba(47, 107, 255, 0.95), 0 0 0 1px rgba(76, 141, 255, 0.35);
  }
  .btn--ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -20px rgba(0, 0, 0, 0.9);
  }

  .card,
  .block {
    transition:
      border-color 0.2s var(--ease),
      background-color 0.2s var(--ease),
      transform 0.2s var(--ease),
      box-shadow 0.2s var(--ease);
  }
  .card:hover,
  .block:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 38px -28px rgba(11, 18, 32, 0.5);
  }
  .card:hover { border-color: rgba(47, 107, 255, 0.42); }
  .block:hover { border-color: rgba(47, 107, 255, 0.45); }
  .section--paper .card:hover { border-color: rgba(27, 84, 216, 0.34); }

  .pillar { transition: background-color 0.2s var(--ease); }
  .pillar:hover { background: #FFFFFF; }
  .section--paper .pillar:hover { background: #FFFFFF; }

  .arrow-link svg { transition: transform 0.2s var(--ease); }
  .arrow-link:hover svg { transform: translateX(4px); }

  .footer-col a,
  .nav a { transition: color 0.16s var(--ease), background-color 0.16s var(--ease); }
}

/* ── 41. Reduced motion ─────────────────────────────────────────────────── */

/* Every non-essential animation is switched off, and nothing may be left
   hidden or displaced. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .js-motion .reveal,
  .js-motion .reveal--fade,
  .js-motion .reveal--card,
  .js-motion .reveal--screen,
  .js-motion .reveal--scale,
  .js-motion .photo-block__media.reveal,
  .js-motion .product-band.reveal,
  .js-motion .block.reveal,
  .js-motion .pillar.reveal,
  .js-motion .card.reveal,
  .js-motion .rail__item,
  .js-motion .rail__marker {
    opacity: 1 !important;
    transform: none !important;
  }

  .js-motion .rail::before,
  .js-motion .rail.is-visible::before {
    transform: none !important;
    transition: none !important;
  }

  .btn:hover,
  .card:hover,
  .block:hover,
  .pillar:hover,
  .arrow-link:hover svg { transform: none !important; }
}

/* ── 42. Legal pages, mobile reading size ───────────────────────────────── */

/* A slightly larger body and more generous leading on a phone. Headings are
   unchanged. */
@media (max-width: 700px) {
  .legal { font-size: 1.0625rem; }
  .legal p,
  .legal li { line-height: 1.78; }
}