/* ==========================================================================
   Beonsys — beonsys.com
   Single dark theme, committed on purpose. Tokens, then layout, then parts.

   Scale note: the display type is set in vw so it fills the screen it is on
   rather than sitting in a fixed 1200px column. Everything else follows from
   that — the container is near full-bleed and the hero owns a whole viewport.
   ========================================================================== */

:root {
  /* Ground — neutrals carry a slight blue bias so they sit with the accent. */
  --bg:          #0a0c11;
  --bg-alt:      #0c0f16;
  --surface:     #11141b;
  --surface-2:   #141822;
  --field:       #0e121a;

  --line:        rgba(255, 255, 255, 0.07);
  --line-2:      rgba(255, 255, 255, 0.11);
  --line-3:      rgba(255, 255, 255, 0.17);

  /* Circuit figure in the hero. Deliberately brighter than --line-*: this is
     a foreground element, not a background texture. */
  --wire:        rgba(255, 255, 255, 0.26);
  --wire-strong: rgba(255, 255, 255, 0.42);

  /* Ink — all three clear 4.5:1 on --bg. */
  --ink:         #f4f7fa;
  --ink-soft:    #b0b5bb;
  --ink-mute:    #868d95;
  /* Unlit word colour. Clears 4.5:1 on --bg, not just the 3:1 large-text
     allowance: on a narrow screen the hero statement drops to ~18px, which is
     below the large-text threshold, so it has to pass as normal body text. */
  --ink-dim:     #737e8c;

  /* Accent. Used sparingly: eyebrow marker, hero pulse, focus, one hairline. */
  --accent:      #38bdf8;
  --accent-2:    #6366f1;
  --danger:      #ff8a9b;

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* No mono face. All-caps monospace with wide tracking is hard to read at
     label size - it made every label, button and caption an act of effort.
     Small UI text is set in the body face, sentence case. */

  --header-h:  68px;
  --radius:    14px;
  --radius-sm: 8px;
  --pad-x:     clamp(1.25rem, 4vw, 3.5rem);
  --maxw:      1560px;
  --section-y: clamp(5rem, 9vw, 8.5rem);
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Dotted grid — background texture only, never a foreground element.
   A real element rather than body::before: the scroll parallax used to be
   driven by a custom property set on <body>, and custom properties inherit,
   so every scroll frame invalidated style for the whole document. This can be
   transformed directly. */
.grid {
  position: fixed;
  inset: -15% -10%;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 74%);
  will-change: transform;
}

/* Drifting particle field. Painted after .grid, so it reads on top of the
   dotted grid but still behind every piece of content (which sits at
   z-index 1). */
#particles {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 0;
  pointer-events: none;
  /* Not 100%: on mobile the visual viewport grows when the URL bar retracts,
     and lvh is the largest it can ever be, so the canvas already covers the
     strip that appears instead of needing a rebuild mid-scroll. */
  /* Both dimensions must be pinned in CSS. A canvas is a replaced element:
     if layout is left to its width/height attributes, then measuring the
     element to size the backing store feeds its own result back in and the
     canvas grows without bound on every rebuild. */
  width: 100%;
  height: 100vh;
  height: 100lvh;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
svg { display: block; }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.15rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Outlined display text. Firefox supports -webkit-text-stroke too; the
   @supports block covers anything that doesn't so the words never vanish. */
.u-outline {
  -webkit-text-stroke: 0.018em var(--ink);
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .u-outline { color: var(--ink-soft); -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------------------------
   Shared parts
   -------------------------------------------------------------------------- */

/* Sentence case in the body face. This label used to be set in a mono face,
   in caps, at 0.145em tracking, which is a lot of effort for four words. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Marker: a 2x2 cluster of specks rather than a plain rule, echoing the
   particle field behind the page. Built from one box plus three shadows, so
   it costs no extra element. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  margin-right: 7px;
  background: var(--accent);
  box-shadow:
     7px 0   0 var(--accent-2),
     0   7px 0 rgba(255, 255, 255, 0.46),
     7px 7px 0 rgba(255, 255, 255, 0.26);
  transform: translateY(-3.5px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}

.btn svg { transition: transform .25s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--ink); color: #0a0c11; }
.btn--primary:hover { background: #fff; transform: translateY(-2px); }

.btn--outline { border-color: var(--line-3); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink-soft); background: rgba(255, 255, 255, 0.05); }

.btn--ghost { color: var(--ink-soft); padding-inline: 0.6rem; }
.btn--ghost:hover { color: var(--ink); }

.btn--sm  { padding: 0.6rem 1rem; font-size: 0.75rem; }
.btn--lg  { padding: 1.1rem 1.9rem; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }

.section { position: relative; z-index: 1; padding-block: var(--section-y); }
/* Translucent rather than a solid --bg-alt, so the particle field behind the
   page stays continuous instead of stopping dead at each band. */
.section--alt { background: rgba(255, 255, 255, 0.022); border-block: 1px solid var(--line); }

.section__head { max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head .eyebrow { margin-bottom: 1.35rem; }

.section__lede {
  margin-top: 1.35rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.section__title {
  font-size: clamp(1.9rem, 4.3vw, 3.75rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: -0.028em;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 17, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(10, 12, 17, 0.95);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  flex: none;
}

.brand__mark { color: var(--ink-soft); flex: none; }

.brand__word {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }

.nav__link {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}

.nav__link:hover { color: var(--ink); }

/* A gradient rule wipes in from the left, and retracts to the right on the
   way out, so leaving reads as a reversal rather than a snap. */
.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Two stacked copies of the label in a one-line window: on hover both slide
   up, so the word appears to roll over to a fresh copy of itself. */
.nav__roll {
  display: block;
  position: relative;
  overflow: hidden;
  height: 1.25em;
}

.nav__roll-item {
  display: block;
  height: 1.25em;
  line-height: 1.25;
  transition: transform .45s var(--ease);
}

.nav__link:hover .nav__roll-item,
.nav__link:focus-visible .nav__roll-item {
  transform: translateY(-100%);
}

.header__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.burger:hover { border-color: var(--line-3); background: rgba(255, 255, 255, 0.04); }

.burger__bars { display: block; width: 17px; }
.burger__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.burger__bars span:first-child { margin-bottom: 5px; }

.burger[aria-expanded="true"] .burger__bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  padding-block: 0.5rem 1.5rem;
}

.mobile-nav__link {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible { color: var(--ink); padding-left: 0.35rem; }

.mobile-nav__cta { margin-top: 1.35rem; }

/* --------------------------------------------------------------------------
   Hero — owns a full viewport so it fills the screen it opens on.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}

.hero__inner { position: relative; }

.hero__title {
  margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.35rem, 2.5vw, 2rem);
  font-size: clamp(2.6rem, 7.4vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: initial;
}

.hero__line { display: block; }

.hero__lower { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.hero__figure { margin: 0; display: flex; justify-content: center; }

/* Pipeline figure.

   Built from elements rather than SVG on purpose. Animating transforms on SVG
   sub-elements is not GPU-composited in most mobile browsers: the whole SVG is
   re-rastered on the main thread each frame, and during a scroll that raster
   gets skipped, so the figure blanks until scrolling stops. These are ordinary
   boxes moving on their own layers, which the compositor handles without the
   main thread.

   Geometry is expressed as percentages of the original 300x340 drawing, so the
   proportions match what it replaced. */
.wf {
  position: relative;
  width: 100%;
  max-width: min(300px, 62vw);   /* stacked; the grid track takes over above */
  aspect-ratio: 300 / 340;
}

.wf__rail {
  position: absolute;
  left: 50%;
  top: 2.4%;
  bottom: 2.4%;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--wire);
  border-radius: 1px;
}

.wf__stage {
  position: absolute;
  left: 20.67%;
  width: 58.67%;
  height: 16.47%;
  border: 1.5px solid var(--wire-strong);
  border-radius: 14px;
  background: var(--surface-2);
}

.wf__stage--1 { top: 11.76%; }
.wf__stage--2 { top: 41.76%; }
.wf__stage--3 { top: 71.76%; }

/* The accent outline that lights while a stage is working. */
.wf__ring {
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  opacity: 0;
  animation: wf-ring 3s ease-out infinite;
  animation-delay: var(--at, 0s);
}

@keyframes wf-ring {
  0%        { opacity: 0; }
  8%, 34%   { opacity: .55; }
  50%, 100% { opacity: 0; }
}

/* Two short bars standing in for whatever the stage is chewing on. */
.wf__label {
  position: absolute;
  left: 11.4%;
  top: 32%;
  width: 22.7%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-mute);
  box-shadow: 0 6px 0 -0.5px var(--ink-mute);
}

.wf__track {
  position: absolute;
  left: 11.4%;
  right: 11.4%;
  bottom: 21%;
  height: 3px;
  border-radius: 3px;
  background: var(--wire);
  overflow: hidden;
}

.wf__fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform, opacity;
  animation: wf-fill 3s linear infinite;
  animation-delay: var(--at, 0s);
}

@keyframes wf-fill {
  0%   { transform: scaleX(0); opacity: 0; }
  3%   { transform: scaleX(0); opacity: 1; }
  36%  { transform: scaleX(1); opacity: 1; }
  46%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Each item is a full-height wrapper, so translateY in percent is a percent of
   the figure's height rather than of the dot. The dot rides at its top edge. */
.wf__item {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  animation: wf-travel 9s cubic-bezier(.65, 0, .35, 1) infinite;
  animation-delay: var(--lag, 0s);
}

.wf__item i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 3.5px;
  background: var(--accent);
}

.wf__item:nth-of-type(2) i { background: #7c8cf8; }
.wf__item:nth-of-type(3) i { background: var(--accent-2); }

@keyframes wf-travel {
  0%   { transform: translateY(2.4%);   opacity: 0; }
  2%   { transform: translateY(2.4%);   opacity: 1; }
  12%  { transform: translateY(20%); }
  24%  { transform: translateY(20%); }
  34%  { transform: translateY(50%); }
  46%  { transform: translateY(50%); }
  56%  { transform: translateY(80%); }
  68%  { transform: translateY(80%);    opacity: 1; }
  78%  { transform: translateY(98.8%);  opacity: 1; }
  84%  { transform: translateY(98.8%);  opacity: 0; }
  100% { transform: translateY(98.8%);  opacity: 0; }
}

.hero__kicker {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }

/* --------------------------------------------------------------------------
   Scroll-lit statement — its own band, directly above the signature.
   -------------------------------------------------------------------------- */

.statement {
  position: relative;
  z-index: 1;
  padding-block: clamp(5rem, 12vw, 10rem) clamp(3rem, 7vw, 6rem);
}

.statement__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }

/* Throughput. Each cell clears on a diagonal wave, so work is always being
   finished somewhere in the grid rather than in one synchronised blink. */
.statement__viz { display: flex; justify-content: center; }

.matrix {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(5px, 1vw, 9px);
  width: 100%;
  max-width: min(340px, 70vw);
}

.matrix span {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.055);
  animation: cell-clear 3.6s ease-out infinite;
  /* The delay spread across the diagonal (0..12 steps) covers nearly the whole
     loop, and each cell is only lit for a fifth of it, so what sweeps across
     is a narrow band rather than the whole grid glowing at once. */
  animation-delay: calc((var(--x) + var(--y)) * -0.28s);
}

@keyframes cell-clear {
  0%        { background: rgba(255, 255, 255, 0.055); }
  6%        { background: #38bdf8; }
  14%       { background: rgba(99, 102, 241, 0.6); }
  24%, 100% { background: rgba(255, 255, 255, 0.055); }
}

.statement__text {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

/* Each word turns over as the scroll position passes it. */
.lit-word { color: var(--ink-dim); transition: color .35s var(--ease); }
.lit-word.is-lit { color: var(--ink); }

/* --------------------------------------------------------------------------
   Particle signature
   -------------------------------------------------------------------------- */

.signature {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(5rem, 10vw, 9rem);
}

.signature__stage { position: relative; display: flex; justify-content: center; }

.signature__canvas {
  display: block;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 880 / 250;
  touch-action: pan-y;
}

/* Replaced by the canvas once it has drawn; if scripting fails this is what
   the visitor sees, so it is styled as a real wordmark rather than a stub. */
.signature__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* `display` here beats the UA's [hidden] { display: none }, so the attribute
   has to be honoured explicitly or the fallback paints over the canvas. */
.signature__fallback[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

.card {
  padding: clamp(1.5rem, 2.4vw, 2.15rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}

.card:hover {
  border-color: var(--line-3);
  background: var(--surface-2);
  transform: translateY(-4px);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.card:hover .card__icon { color: var(--ink); border-color: var(--line-3); }

.card__title {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.7rem;
  letter-spacing: -0.015em;
}

.card__body { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: 1fr; gap: 0; }

.step { padding-block: 1.85rem; border-top: 1px solid var(--line-2); }

.step__num {
  display: block;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.step__title { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.55rem; }
.step__body  { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Pillars
   -------------------------------------------------------------------------- */

.pillars { display: grid; grid-template-columns: 1fr; gap: clamp(2.25rem, 4vw, 3.5rem); }

.pillar__title {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.08;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.pillar__body { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; max-width: 34ch; }

/* --------------------------------------------------------------------------
   Outcomes
   -------------------------------------------------------------------------- */

.outcomes { display: grid; grid-template-columns: 1fr; }

.outcome {
  position: relative;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-2);
}

/* A short accent segment rides the rule above each item. */
.outcome::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.outcome__title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.18;
  margin-bottom: 0.7rem;
  letter-spacing: -0.018em;
}

.outcome__body {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

/* The one place the accent is allowed to stretch. */
.closing::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .6;
}

.closing__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }

.closing__title {
  font-size: clamp(2rem, 5.6vw, 5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.closing__body {
  margin-block: clamp(1.25rem, 2.5vw, 1.85rem) clamp(2rem, 3.5vw, 2.75rem);
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 5rem); }

.contact__intro .eyebrow { margin-bottom: 1.35rem; }
.contact__intro .section__title { margin-bottom: 1.35rem; }

.contact__note { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; max-width: 42ch; margin-bottom: 2rem; }

.form { display: flex; flex-direction: column; gap: 1.25rem; }

.form__submit { align-self: start; min-width: 12rem; }

.field { display: flex; flex-direction: column; gap: 0.55rem; }

.field__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.field__input {
  width: 100%;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}

.field__input::placeholder { color: var(--ink-mute); }
.field__input:hover { border-color: var(--line-3); }
.field__input:focus { outline: none; border-color: var(--accent); background: #10151f; }
.field__input--area { resize: vertical; min-height: 7rem; }

.field__input[aria-invalid="true"] { border-color: var(--danger); }

.field__error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--danger);
}

.form__status {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  min-height: 1.2em;
}
.form__status.is-error { color: var(--danger); }
.form__status.is-ok    { color: var(--accent); }
.form__status a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer__inner { display: grid; gap: 2rem; }

.footer__nav { display: flex; flex-wrap: wrap; gap: 0.85rem 1.6rem; }

.footer__nav a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.footer__nav a:hover { color: var(--ink); }

.footer__legal {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   Prose (privacy / terms)
   -------------------------------------------------------------------------- */

.prose { max-width: 44rem; }
.prose h2 { font-size: 1.1875rem; line-height: 1.3; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose p  { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; margin-bottom: 1.05rem; }
.prose a  { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.prose__meta {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin-block: 0.85rem 2rem;
}

/* --------------------------------------------------------------------------
   Scroll motion
   -------------------------------------------------------------------------- */

.js [data-anim] {
  opacity: 0;
  transform: translateY(28px);
}

.js [data-anim].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
}

/* --------------------------------------------------------------------------
   Responsive — mobile is the base; these add structure going up.
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .cards    { grid-template-columns: repeat(2, 1fr); }
  .steps    { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .outcomes { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 5rem); }
  .pillars  { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer__legal { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .cards   { grid-template-columns: repeat(4, 1fr); }
  .steps   { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .hero__lower {
    grid-template-columns: minmax(0, 1fr) clamp(190px, 20vw, 265px);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hero__figure { justify-content: flex-end; }
  .wf { max-width: 100%; }
  .statement__text { max-width: 26ch; font-size: clamp(2.4rem, 4vw, 3.4rem); }
  .statement__inner {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 340px);
    gap: clamp(2.5rem, 6vw, 6rem);
  }
  .statement__viz { justify-content: flex-end; }
}

/* Below the desktop nav breakpoint the hamburger takes over. */
@media (max-width: 61.99rem) {
  .nav { display: none; }
  .header__cta { display: none; }
  .burger { display: grid; }

  /* A blurred backdrop on a sticky bar has to be recomposited every scroll
     frame, which is one of the most expensive things a phone can be asked to
     do while the finger is moving. Opaque instead. */
  .header,
  .header.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0a0c11;
  }
}

@media (max-width: 61.99rem) {
  .hero {
    display: block;
    min-height: 0;
    padding-block: clamp(2.5rem, 8vw, 4.5rem);
  }
}

@media (max-width: 47.99rem) {
  .hero__actions { gap: 0.65rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__actions .btn--ghost {
    border-color: var(--line-3);
    color: var(--ink);
    padding: 0.95rem 1.5rem;
  }
  .hero__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }

  .form__submit { align-self: stretch; }
  .statement__text { max-width: none; }
}

/* The hero is sized to hold one screen. On a short viewport the figure is the
   part that pushes it over, so it gives ground first. */
@media (min-width: 62rem) and (max-height: 52rem) {
  .hero { padding-block: clamp(2rem, 4vw, 3rem); }
  .hero__lower { grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 250px); }
}

@media (max-width: 61.99rem) and (max-height: 46rem) {
  .hero__figure { display: none; }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js [data-anim] { opacity: 1; transform: none; }
  .lit-word { color: var(--ink); }
  .nav__link:hover .nav__roll-item { transform: none; }
  .nav__link::after { display: none; }

  /* Keep the diagram legible but still: structure visible, nothing moving. */
  .wf__item, .wf__ring { display: none; }
  .wf__fill { animation: none; transform: scaleX(0.55); opacity: 1; }
  .wf__item i { display: none; }
  .matrix span { animation: none; }
  .grid { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ink-soft: #d6dee7;
    --ink-mute: #adb8c5;
    --ink-dim:  #8a94a1;
    --line:     rgba(255, 255, 255, 0.2);
    --line-2:   rgba(255, 255, 255, 0.3);
    --line-3:   rgba(255, 255, 255, 0.42);
  }
}

@media print {
  .grid, #particles, .header, .signature, .closing, .form { display: none; }
  body { background: #fff; color: #000; }

  /* Never print an element still sitting at its pre-animation opacity. */
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .lit-word { color: #000 !important; }
}