/* diffuse-systems.com
 *
 * Dark, dense, technical. Condensed type in the headings, generous tracking in
 * the small labels, one vivid accent on a near-black ground.
 *
 * Nothing loads from a third party: the typeface is served from this origin,
 * there is no analytics, no tag manager and no embedded anything. A product
 * that sells sovereignty cannot have a site that phones a CDN. */

/* Self-hosted, subsetted to the ranges these pages render, and WOFF2 rather
   than TTF. That is 1.48 MB of fonts down to 87 KB, which was most of what made
   the first load slow. Nothing is fetched from a third party. */

/* Titillium Web, SIL Open Font Licence, subsetted and served from this origin.
   The reference sets its headings in Klavika, which is a commercial licence we
   cannot ship; this is the face that replaces it. */

@font-face {
  font-family: 'KV';
  src: url('fonts/tw-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'KV';
  src: url('fonts/tw-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'KV';
  src: url('fonts/tw-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'RC';
  src: url('fonts/RobotoCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RC';
  src: url('fonts/RobotoCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'RC';
  src: url('fonts/RobotoCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'RS';
  src: url('fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RS';
  src: url('fonts/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #000000;
  --ink-2: #060608;
  --ink-3: #0b0b0e;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.2);
  --text: #ffffff;
  --text-2: #b6bec9;
  --text-3: #8b95a3;
  --text-4: #6d7684;
  --accent: #35cdf0;
  --accent-2: #7aa2ff;
  --accent-warm: #ffc46b;
  --accent-soft: rgba(53, 205, 240, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --shell: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'RS', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* One family for every heading on the site, at its heaviest cut, with the
   tracking pulled in. The reference does not change typeface between a hero and
   a card title; it changes size. */
h1, h2, h3, h4, .cond {
  font-family: 'KV', 'Titillium Web', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.08;
  margin: 0;
  text-transform: none;
  color: var(--text);
}

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

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px;
}

/* Context before everything, which is the pattern the reference repeats on
   every section: a short coloured line in caps, then the heading, then the
   lede. No pill, no dot, no rectangle. */
.eyebrow {
  font-family: 'KV', 'Titillium Web', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}


/* ── Buttons ──────────────────────────────────────────────────────────────
   Two ranks that look different, and every state accounted for: rest, hover,
   focus, active. The previous pass had one flat outline for everything, which
   is why nothing on the page felt clickable. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'RS', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}

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

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The arrow travels on hover. One property, and it is most of what makes a
   button feel like a control rather than a rectangle. */
.btn__arrow {
  display: inline-block;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

/* Primary: light on black, the way the reference does it. It is the brightest
   thing on the page, which is the point of exactly one button per view. */
.btn--primary {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 0 0 rgba(53, 205, 240, 0);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px -12px rgba(255, 255, 255, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.07);
}

/* Secondary: a dark pill with a lit edge that brightens. */
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 205, 240, 0.75);
  color: var(--accent);
  background: rgba(53, 205, 240, 0.08);
  box-shadow: 0 10px 28px -14px rgba(53, 205, 240, 0.7);
}

/* The reference's own control: a rectangle with a coloured border and no fill,
   which floods with that colour on hover and flips the label to the ground
   colour. Sharp corners, because a pill and a rectangle are two different
   statements and this one is the technical register. */
.btn--outline {
  border-radius: 0;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  padding: 12px 24px;
  font-family: 'KV', 'Titillium Web', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
}

.btn--outline:hover {
  background: var(--accent);
  color: #000;
  transform: none;
  box-shadow: 0 12px 34px -18px var(--accent);
}

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

/* Small, for the foot of a card. */
.btn--sm { padding: 9px 17px; font-size: 13.5px; }

/* Tertiary: a link that behaves like one, with a rule that draws itself. */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s ease;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link:hover .btn__arrow { transform: translateX(4px); }

/* A pill label, above a headline or on a card. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  color: var(--text-2);
}

.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* ── The ground ───────────────────────────────────────────────────────────
   Fixed, full viewport, behind everything on every page. The first version put
   the light in the hero and left the rest flat black, so scrolling fell off a
   cliff. This one lives under the whole document and the canvas keeps moving
   as you go down it.

   Three layers: the canvas flow, a dotted field, and faint corner guides on the
   container. */

.ground {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: #000000;
}

.ground canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  /* The buffer is smaller than the element; the browser scales it up, which for
     soft light is exactly what we want and costs nothing. */
  image-rendering: auto;
}

/* A dotted field over the whole page, denser near the top. Reads as texture
   rather than as a grid, which is the difference between a surface and a
   spreadsheet. */
.ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.25) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.25) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* The guides: two hairlines marking the content column, the way the reference
   frames its page. They make a wide dark canvas feel composed rather than
   empty. */
/* ── Navigation ───────────────────────────────────────────────────────────
   Small, quiet, few items, and no coloured button. The reference's bar is
   almost invisible until you look for it, which is what lets the visual carry
   the page. */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease;
}

.nav.is-stuck {
  background: rgba(0, 0, 0, 0.94);
  border-bottom-color: var(--line);
}

.nav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* 10. The mark is placed, not framed. A white square around it read as a
   sticker; the reference simply puts its logo on the black. */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'RC', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: auto;
  color: var(--text);
}

.nav__brand img {
  height: 26px;
  width: 26px;
  object-fit: contain;
  border-radius: 2px;
}

.nav__links {
  display: flex;
  gap: 30px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
}

.nav__links a { transition: color 0.16s ease; }
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--text); }

/* ── Hero ─────────────────────────────────────────────────────────────────
   Text on the left forty per cent, the light flow on the right sixty. Sixty-five
   per cent of the viewport rather than all of it, so the cards below are
   visible and the page says there is more without needing an arrow. */

.hero {
  position: relative;
  min-height: 65svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 118px 32px 56px;
  width: 100%;
}

.hero__text { max-width: 47%; }

/* The flow. Anchored to the right, bleeding off the top and the right edge the
   way the reference does, and faded into black at its left so it never
   competes with the sentence. */
.hero__flow {
  position: absolute;
  top: -8%;
  right: -6%;
  width: 68%;
  height: 116%;
  z-index: 1;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
}

.hero__flow canvas { width: 100%; height: 100%; display: block; }

/* 4. Sentence case, condensed bold, and nothing like the size it was. The
   reference states something at sixty pixels; ours shouted at a hundred and
   twenty. */
.hero h1 {
  font-size: clamp(34px, 3.5vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: none;
  max-width: 24ch;
  margin-bottom: 24px;
  color: var(--text);
  -webkit-text-stroke: 0;
}

/* 5. One accent, on one line, in italic. No gradient anywhere. */
.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--accent);
}

.hero__lede {
  font-size: 16px;
  color: var(--text-2);
  max-width: 46ch;
  margin: 0 0 30px;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__meta {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px 30px;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  font-family: 'RC', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Cards ────────────────────────────────────────────────────────────────
   Rounded, raised on hover, with a border that reacts and a light that follows
   the pointer. Each carries a small built visual rather than a photograph: the
   picture is made of the product's own vocabulary, which is both honest and
   the only thing we can draw accurately.

   They are deliberately not identical. The first is accented in cyan, the
   second in blue, the third in warm, and their visuals differ in kind. A row of
   three identical rectangles is what made the previous pass read as a list. */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px 96px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  /* A surface you can see against the ground. Transparent cards read as holes
     in the page; the reference gives its cards a body and lets the border do
     the framing. */
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.34s ease,
    box-shadow 0.34s ease;
}

/* The pointer light, positioned by two custom properties the script sets. */
.tile::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(240px 240px at var(--px, 50%) var(--py, 0%), var(--glow, rgba(53, 205, 240, 0.16)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.tile:hover {
  transform: translateY(-5px);
  border-color: var(--edge, rgba(53, 205, 240, 0.4));
  box-shadow:
    0 26px 60px -34px var(--edge, rgba(53, 205, 240, 0.5)),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.tile:hover::before { opacity: 1; }

.tile--blue { --tint: rgba(122, 162, 255, 0.13); --glow: rgba(122, 162, 255, 0.16); --edge: rgba(122, 162, 255, 0.42); }
.tile--warm { --tint: rgba(255, 196, 107, 0.11); --glow: rgba(255, 196, 107, 0.14); --edge: rgba(255, 196, 107, 0.38); }

/* The visual sits on its own ground, a shade above the card, with a rule under
   it. That separation is what stops a card reading as one undifferentiated
   block, and it is how the reference builds its cards. */
.tile__art {
  position: relative;
  z-index: 1;
  height: 172px;
  padding: 26px 26px 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.tile__body {
  position: relative;
  z-index: 1;
  padding: 22px 26px 26px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* A label above the title, so the three cards read as a set of three things
   rather than as three paragraphs. */
.tile__k {
  font-family: 'KV', 'Titillium Web', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.tile:hover .tile__k { color: var(--edge, var(--accent)); }

.tile h3 {
  font-size: 22px;
  text-transform: none;
  letter-spacing: -0.008em;
  margin-bottom: 7px;
  -webkit-text-stroke: 0;
  color: var(--text);
}

.tile p { margin: 0 0 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.62; }

/* ── The visuals inside the cards ─────────────────────────────────────────
   Built from the product's own vocabulary: a pipeline of slices, a loss curve,
   a teacher and a student. Drawn in markup so they cost no request and stay
   crisp, and so a hover can animate them. */



/* A pipeline: three machines and the hidden state moving between them. */
.viz { display: flex; align-items: center; height: 100%; }
.viz-pipe { gap: 10px; padding: 0; }

.viz-pipe__node {
  flex: 1;
  height: 54px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-3);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.tile:hover .viz-pipe__node {
  border-color: rgba(53, 205, 240, 0.4);
  color: var(--accent);
  background: rgba(53, 205, 240, 0.06);
}

.viz-pipe__link {
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  flex: none;
}

.viz-pipe__link::after {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent);
  animation: travel 2.4s linear infinite;
}

.viz-pipe__link:nth-of-type(4)::after { animation-delay: 1.2s; }

@keyframes travel {
  from { left: -4px; opacity: 0; }
  20%, 80% { opacity: 1; }
  to { left: 22px; opacity: 0; }
}

/* A loss curve, drawn as an SVG path that draws itself on hover. */
.viz-loss { display: block; padding: 0; }
.viz-loss svg { width: 100%; height: 118px; display: block; }

.viz-loss .line {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.tile.is-in .viz-loss .line { stroke-dashoffset: 0; }
.viz-loss .area { fill: url(#lossFill); opacity: 0; transition: opacity 0.9s ease 0.5s; }
.tile.is-in .viz-loss .area { opacity: 1; }
.viz-loss .grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }

/* A teacher and a student, and the labels passing between them. */
.viz-distil { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: 100%; padding: 0; }

.viz-distil__box {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 10px;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-3);
  transition: transform 0.34s ease, border-color 0.34s ease;
}

.viz-distil__box b { display: block; font-size: 15px; color: var(--text); font-weight: 500; margin-bottom: 3px; }
.viz-distil__box.big { padding: 20px 10px; }
.tile:hover .viz-distil__box.big { transform: scale(1.03); border-color: rgba(255, 196, 107, 0.45); }
.tile:hover .viz-distil__box.small { transform: scale(0.97); }

.viz-distil__flow {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 107, 0.7), transparent);
  position: relative;
}

.viz-distil__flow::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 9px 1px var(--accent-warm);
  animation: travel2 2.8s linear infinite;
}

@keyframes travel2 {
  from { left: -5px; opacity: 0; }
  20%, 80% { opacity: 1; }
  to { left: 40px; opacity: 0; }
}

/* ── Supported technology ─────────────────────────────────────────────────
   The reference's pattern, followed rather than approximated: an eyebrow, a
   large centred heading, a lede, then two rows of large marks travelling in
   opposite directions across the page's own background. No band, no border, no
   ground of its own.

   The marks are the vendors' own artwork from the Simple Icons collection,
   which is CC0. The trademarks remain theirs, and their presence here says
   this product runs on those platforms and nothing more. */

.marks { padding: 8px 0 0; }

.marks__row {
  display: flex;
  overflow: hidden;
  padding: 22px 0;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.marks__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: slide 58s linear infinite;
}

/* The second row travels the other way, which is what stops two parallel
   marquees reading as one wide one. */
.marks__row--back .marks__track { animation-direction: reverse; animation-duration: 68s; }
.marks__row:hover .marks__track { animation-play-state: paused; }

.marks__group {
  display: flex;
  align-items: center;
  gap: 84px;
  padding-right: 84px;
}

.mk {
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Large, the way the reference sizes them. Small marks in a wide dark band are
   what made the first attempt look like a footer. */
.mk svg,
.mk img {
  width: 40px;
  height: 40px;
  flex: none;
  display: block;
}

.mk img { filter: brightness(0) invert(1); opacity: 0.72; transition: opacity 0.3s ease, filter 0.3s ease; }

.mk span {
  font-family: 'KV', 'Titillium Web', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.mk:hover { color: #fff; transform: translateY(-2px); }
.mk:hover img { opacity: 1; }

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── The mark ─────────────────────────────────────────────────────────────
   The artwork is dark navy and magenta on white, so it is always shown on its
   own white ground. A square, a drawn edge, and a ring of faint dots that ties
   it to the page instead of leaving it pasted on top. */

/* The mark, plainly. The artwork is dark on light, so it keeps a white ground
   and nothing else: no frame, no glow, no dotted field. Those made it a sticker
   on the page rather than part of it. */
.mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  background: #ffffff;
  border-radius: 3px;
}

.mark img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}

.mark--lg { width: 40px; height: 40px; }

/* ── Sections ─────────────────────────────────────────────────────────────
   Alternating text and visual, revealed on scroll. */

/* No rule between sections. A horizontal line across a page whose whole point
   is one continuous surface is the thing that cuts it into slabs. Space
   separates them. */
.band { padding: 112px 0; position: relative; }

/* A veil rather than a fill: the ground stays visible through it, so the light
   crossing the page is continuous instead of restarting at every section. */
/* No fill. The ground is the surface; a section that paints itself opaque cuts
   the light in half and reads as a different page. What separates one section
   from the next is a rule and the space around it. */
.band--alt { background: transparent; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 78px;
  align-items: center;
}

.split--flip .split__text { order: 2; }

.band h2 em { font-style: italic; color: var(--accent); }

.band h2 {
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 20px;
  max-width: 20ch;
  text-transform: none;
  letter-spacing: -0.012em;
  -webkit-text-stroke: 0;
}
.band p { color: var(--text-2); max-width: 56ch; }

.figure {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  padding: 30px;
  overflow: hidden;
  transition: border-color 0.34s ease, transform 0.34s ease, box-shadow 0.34s ease;
}

.figure:hover {
  transform: translateY(-3px);
  border-color: rgba(53, 205, 240, 0.34);
  box-shadow: 0 24px 56px -34px rgba(53, 205, 240, 0.5);
}

/* A light that follows the pointer. The script sets two custom properties and
   the stylesheet does the drawing, which keeps the animation on the compositor
   and the logic in one line. */
.figure::after,
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px 220px at var(--px, 82%) var(--py, 0%), rgba(45, 212, 191, 0.1), transparent 62%);
  pointer-events: none;
  transition: background 0.2s ease;
}

.figure pre {
  margin: 0;
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
  overflow-x: auto;
}

.figure pre b { color: var(--accent); font-weight: 400; }
.figure pre i { color: var(--text-3); font-style: normal; }

.figcap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'RC', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Pillars ──────────────────────────────────────────────────────────────*/

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 54px;
}

.card {
  border: 1px solid var(--line);
  background: rgba(10, 12, 18, 0.72);
  padding: 34px 30px 30px;
  position: relative;
  transition: border-color 0.24s ease, transform 0.24s ease, background 0.24s ease;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.card:hover { border-color: var(--line-2); transform: translateY(-3px); background: rgba(16, 19, 27, 0.86); }
.card:hover::before { transform: scaleX(1); }

.card__n {
  font-family: 'RC', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-3);
}

.card h3 { font-size: 22px; margin: 12px 0 14px; text-transform: none; }
.card p { color: var(--text-2); font-size: 15px; margin: 0 0 18px; }

.card__link {
  font-family: 'RC', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────*/

/* **Only hidden once JavaScript has said it is there.** The first version set
   opacity to zero in the stylesheet, so a visitor with scripting off, or a
   script that failed to parse, got a page of empty dark boxes. A screenshot
   found it; the code looked correct. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.66s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.66s cubic-bezier(0.2, 0.7, 0.3, 1);
}

html.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Footer ───────────────────────────────────────────────────────────────*/

/* The footer opts out of the page ground and keeps its own. It was the one
   part of the first pass that was already right. */
.foot {
  padding: 76px 0 40px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 44px;
  padding-bottom: 44px;
}

.foot__brand { display: flex; gap: 13px; align-items: flex-start; }
.foot__brand img { height: 34px; width: auto; }
.foot__brand p { color: var(--text-3); font-size: 14px; margin: 6px 0 0; max-width: 34ch; }

.foot h4 {
  font-family: 'RC', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 14px;
}

.foot a { display: block; color: var(--text-2); font-size: 14px; padding: 4px 0; }
.foot a:hover { color: var(--accent); }

.foot__bar {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}

/* ── Inner pages ──────────────────────────────────────────────────────────*/

.page { padding: 168px 0 96px; }
.page h1 {
  font-size: clamp(35px, 4.3vw, 60px);
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: -0.012em;
  -webkit-text-stroke: 0;
}
.page__lede { font-size: 19px; color: var(--text-2); max-width: 62ch; }
.prose { max-width: 68ch; margin-top: 46px; }
.prose h2 { font-size: 24px; margin: 46px 0 16px; text-transform: none; letter-spacing: -0.008em; }
.prose p { color: var(--text-2); }
.prose ul { color: var(--text-2); padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose strong { color: var(--text); font-weight: 500; }

.note {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(53, 205, 240, 0.045);
  padding: 20px 24px;
  margin: 32px 0;
}

.note p { margin: 0; color: var(--text-2); }

.dl { display: grid; gap: 16px; margin-top: 42px; }

.dl__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  padding: 26px 28px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.dl__row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(300px 180px at var(--px, 20%) var(--py, 50%), var(--tint, rgba(53, 205, 240, 0.12)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dl__row:hover::before { opacity: 1; }
.dl__row > * { position: relative; z-index: 1; }

.dl__row:hover {
  transform: translateY(-3px);
  border-color: var(--edge, rgba(53, 205, 240, 0.4));
  box-shadow: 0 22px 50px -32px var(--edge, rgba(53, 205, 240, 0.55));
}

.dl__row--blue { --tint: rgba(122, 162, 255, 0.1); --edge: rgba(122, 162, 255, 0.42); }
.dl__row--warm { --tint: rgba(255, 196, 107, 0.09); --edge: rgba(255, 196, 107, 0.4); }

/* A number down the left, which is what turns four identical rows into a
   sequence somebody reads in order. */
.dl__n {
  font-family: 'RC', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-4);
  flex: none;
  width: 26px;
}

.dl__row div { flex: 1; }
.dl__row h3 { font-size: 21px; margin-bottom: 5px; text-transform: none; }
.dl__row p { margin: 0; color: var(--text-3); font-size: 14px; }

.tag {
  font-family: 'RC', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
  transition: color 0.26s ease, border-color 0.26s ease, background 0.26s ease;
}

.dl__row:hover .tag {
  color: var(--accent);
  border-color: rgba(53, 205, 240, 0.5);
  background: rgba(53, 205, 240, 0.08);
}

a.tag:hover { color: #000; background: #fff; border-color: #fff; }

/* A download link, as opposed to a "coming soon" label. It has to read as
   something you can press: the rest of the tags on this page are captions. */
.tag--go {
  color: var(--accent);
  border-color: rgba(53, 205, 240, 0.5);
  background: rgba(53, 205, 240, 0.08);
  text-decoration: none;
}

/* The verification block. Deliberately between the buttons and the
   requirements: checking a download is part of installing it, not an appendix
   somebody finds later. */
.verify {
  margin: 56px 0 0;
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.verify h3 { margin: 0 0 8px; font-size: 17px; }
.verify p { margin: 0 0 18px; color: var(--text-3); font-size: 14px; max-width: 62ch; }
.verify pre {
  margin: 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
}
.verify code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.verify__note { margin: 16px 0 0; font-size: 13px; color: var(--text-3); }

@media (max-width: 900px) {
  .split, .grid3, .foot__grid { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__text { order: 0; }
  .nav__links { display: none; }
  .band { padding: 78px 0; }
  .hero__meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ── Inner pages ──────────────────────────────────────────────────────────
   The same language as the home page. The first pass left these as a column of
   long grey prose, which is the 2006 blog the review named. */

.page { padding: 150px 0 92px; }

.page__head { max-width: 62ch; margin-bottom: 8px; }

.page h1 em {
  font-style: italic;
  color: var(--accent);
}

.page__lede {
  font-size: 18px;
  color: var(--text-2);
  max-width: 56ch;
  line-height: 1.65;
}

/* A grid of short cards instead of a wall of paragraphs. */
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  padding: 26px 26px 24px;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease;
}

/* The only fill any card gets, and only while the pointer is on it. */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px 200px at var(--px, 50%) var(--py, 0%), var(--tint, rgba(53, 205, 240, 0.13)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.panel:hover::before { opacity: 1; }

.panel > * { position: relative; z-index: 1; }

.panel:hover {
  transform: translateY(-4px);
  border-color: var(--edge, rgba(53, 205, 240, 0.4));
  box-shadow: 0 24px 54px -34px var(--edge, rgba(53, 205, 240, 0.55));
}

.panel--blue { --tint: rgba(122, 162, 255, 0.1); --edge: rgba(122, 162, 255, 0.42); }
.panel--warm { --tint: rgba(255, 196, 107, 0.09); --edge: rgba(255, 196, 107, 0.4); }

.panel__k {
  font-family: 'RC', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 12px;
}

.panel h3 {
  font-size: 21px;
  text-transform: none;
  letter-spacing: -0.008em;
  margin: 0 0 9px;
  color: var(--text);
  -webkit-text-stroke: 0;
}

.panel p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.62; }
.panel p + p { margin-top: 12px; }
.panel strong { color: var(--text); font-weight: 500; }

/* A statistic, for the places where a number says it faster than a sentence. */
.panel .stat {
  font-family: 'RC', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 6px;
}

.panel--blue .stat { color: var(--accent-2); }
.panel--warm .stat { color: var(--accent-warm); }
.panel .stat + h3 { margin-top: 2px; }

/* Prose, where prose is still the right answer, but narrower and lighter. */
.prose { max-width: 64ch; margin-top: 44px; }
.prose h2 {
  font-size: 25px;
  margin: 44px 0 14px;
  text-transform: none;
  letter-spacing: -0.008em;
  color: var(--text);
}
.prose p { color: var(--text-2); font-size: 15px; line-height: 1.72; }
.prose ul { color: var(--text-2); padding-left: 20px; font-size: 15px; }
.prose li { margin: 9px 0; }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }

/* Reveals, with a stagger driven by data-delay. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.62s cubic-bezier(0.2, 0.7, 0.3, 1);
}

html.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .grid2, .grid3, .tiles { grid-template-columns: 1fr; }
  .hero__text { max-width: 100%; }
  .hero__flow { opacity: 0.5; }
  .ticker { width: 100vw; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track, .pill i, .viz-pipe__link::after, .viz-distil__flow::after { animation: none; }
  .btn, .tile, .panel, .dl__row, .figure { transition: none; }
}


/* ── Landing sections ─────────────────────────────────────────────────────
   The pieces a landing page is expected to have and this one did not: numbers
   that count up, a sequence somebody can follow, a comparison, and questions
   answered before they are asked. */

.section { padding: 104px 0; position: relative; }

.section__head { max-width: 60ch; margin-bottom: 48px; }
.section__head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section h2 {
  font-size: clamp(30px, 3.5vw, 46px);
  letter-spacing: -0.022em;
  margin-bottom: 16px;
  max-width: 19ch;
}

.section__head.center h2 { max-width: 26ch; margin-left: auto; margin-right: auto; }

.section h2 em { font-style: italic; color: var(--accent); }
.section__lede { color: var(--text-2); font-size: 16.5px; line-height: 1.65; margin: 0; }

/* Numbers. Each counts up when it arrives. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.figure-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  padding: 26px 24px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s ease;
}

.figure-card:hover { transform: translateY(-4px); border-color: rgba(53, 205, 240, 0.4); }

.figure-card b {
  display: block;
  font-family: 'RC', sans-serif;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 8px;
}

.figure-card b span { color: var(--accent); }
.figure-card p { margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.55; }
.figure-card em { font-style: normal; color: var(--text-2); }

/* A sequence: four steps with a rule running through them. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }

.step {
  position: relative;
  padding: 30px 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s ease;
}

.step:hover { transform: translateY(-4px); border-color: rgba(53, 205, 240, 0.4); }

.step__n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(53, 205, 240, 0.4);
  color: var(--accent);
  font-family: 'RC', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.58; }
.step code {
  display: block;
  margin-top: 12px;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* A two-column comparison, which is the argument this product actually makes. */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.versus__col {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  padding: 30px 28px;
}

.versus__col--ours { border-color: rgba(53, 205, 240, 0.32); }
.versus__col h3 { font-size: 21px; margin-bottom: 20px; }
.versus__col ul { list-style: none; margin: 0; padding: 0; }

.versus__col li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  color: var(--text-2);
  font-size: 14.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.versus__col li:last-child { border-bottom: none; }

.versus__col li i {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-4);
}

.versus__col--ours li i { background: rgba(53, 205, 240, 0.14); color: var(--accent); }

/* Questions. Native details, so it works with no script at all. */
.faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }

.faq details {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #121418 0%, #0b0c0f 100%);
  transition: border-color 0.26s ease;
}

.faq details[open] { border-color: rgba(53, 205, 240, 0.34); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 24px;
  font-family: 'RC', 'Arial Narrow', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: 'RC', sans-serif;
  font-size: 20px;
  color: var(--accent);
  transition: transform 0.26s ease;
  flex: none;
}

.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 24px 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.68; }

/* The closing call. */
.cta { text-align: center; padding: 110px 0 120px; }
.cta h2 { font-size: clamp(33px, 4vw, 54px); margin: 0 auto 18px; max-width: 20ch; }
.cta p { color: var(--text-2); max-width: 52ch; margin: 0 auto 32px; }
.cta__actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .figures, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .figures, .steps, .versus { grid-template-columns: 1fr; }
}


/* Each card's control carries that card's accent, which is what makes three
   cards read as three things. */
.tile--blue .btn--outline { border-color: var(--accent-2); color: var(--accent-2); }
.tile--blue .btn--outline:hover { background: var(--accent-2); color: #000; box-shadow: 0 12px 34px -18px var(--accent-2); }
.tile--warm .btn--outline { border-color: var(--accent-warm); color: var(--accent-warm); }
.tile--warm .btn--outline:hover { background: var(--accent-warm); color: #000; box-shadow: 0 12px 34px -18px var(--accent-warm); }