/* =============================================================================
   AUDIOSLICE — STYLESHEET
   Layout + components. All values reference tokens.css — edit tokens, not this.
   ============================================================================ */

/* ----------------------------------------------------------------- 0. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* ------------------------------------------------------------- 1. UTILITIES */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-top: var(--section-pad-top); padding-bottom: var(--section-pad-bottom); position: relative; }
.section--alt { background: var(--bg-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-cyan);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rainbow-text {
  background: var(--grad-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { font-size: var(--fs-lead); color: var(--ink-dim); line-height: var(--lh-snug); }
.muted { color: var(--ink-dim); }

/* Visible to screen readers only — carries the yes/no meaning of the matrix dots,
   which are otherwise pure colour. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  --_pad-y: .85rem;
  --_pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: .01em;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  color: var(--ink-on-brand);
  background: var(--grad-brand);
  box-shadow: var(--glow-blue);
}
.btn--primary:hover { box-shadow: var(--glow-cyan); }

.btn--ghost {
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--brand-cyan); }

.btn--lg { --_pad-y: 1.05rem; --_pad-x: 2rem; font-size: var(--fs-body); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--brand-cyan);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  transition: gap var(--dur) var(--ease);
}
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { gap: .7rem; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- 2. HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line-soft);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.nav {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.brand__mark { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand__name span { color: var(--brand-cyan); }

.nav__menu { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-4); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .8rem;
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--ink-dim);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover, .nav__item:hover > .nav__link, .nav__item:focus-within > .nav__link {
  color: var(--ink);
  background: rgba(255,255,255,.04);
}
.nav__link[aria-expanded] .caret {
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur) var(--ease);
  opacity: .7;
}
.nav__item:hover .caret, .nav__item:focus-within .caret { transform: rotate(225deg) translateY(-1px); }

/* Dropdowns */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  /* Wide enough that the one-line descriptions don't wrap once the 22px app logo
     takes its bite out of the text column. */
  min-width: 300px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown::before { /* hover bridge so the menu doesn't close in the gap */
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.dropdown__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .6rem .75rem;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.dropdown__link:hover { background: var(--surface-2); }
.dropdown__link strong { font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--ink); }
.dropdown__link > span,
.dropdown__text > span { font-size: var(--fs-caption); color: var(--ink-faint); }
/* Plain (non-brand) rows stack title over description. */
.dropdown__text { display: flex; flex-direction: column; gap: 2px; }

/* Brand rows: the wordmark IS the title, so there is no separate name text —
   except Synesthesia, whose mark is icon-only and so still needs its name. */
.dropdown__link--brand { gap: .45rem; }
.dropdown__brand { display: flex; align-items: center; gap: .5rem; }
.dropdown__brand strong { font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--ink); }
.dropdown__desc { font-size: var(--fs-caption); color: var(--ink-faint); }
.dropdown__logo {
  width: auto;
  filter: grayscale(1) brightness(1.25);
  opacity: .7;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.dropdown__link--brand .logo--td  { height: 15px; }
.dropdown__link--brand .logo--res { height: 14px; }
.dropdown__link--brand .logo--syn { height: 20px; }
.dropdown__link:hover .dropdown__logo { filter: none; opacity: 1; }

.nav__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.nav__logo { height: 40px; width: auto; border-radius: 10px; }

/* Mobile nav toggle */
.nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  margin-inline: auto;
}
.nav__toggle span::before { transform: translateY(-7px); }
.nav__toggle span::after  { transform: translateY(5px); }

/* ------------------------------------------------------------------ 3. HERO */
.hero {
  position: relative;
  padding-top: clamp(3rem, 1rem + 6vw, 6rem);
  padding-bottom: clamp(3rem, 1rem + 5vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.hero::before { /* ambient glow */
  content: ""; position: absolute; inset: 0;
  background: var(--grad-hero);
  pointer-events: none;
}
.hero__inner { position: relative; }

/* The tagline IS the h1 now (the wordmark headline was removed). Big gradient
   promise on top, supporting line beneath it in body type. */
.hero__tagline {
  max-width: 900px;
  margin: 0 auto var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.6rem);
  font-weight: var(--fw-xbold);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.hero__tagline .hero__sub {
  display: block;
  max-width: 660px;
  margin: var(--space-5) auto 0;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: normal;
  color: var(--ink-dim);
}

/* Platform marks on their own line under the headline — bigger than the inline
   version they replaced, since here they carry the whole "runs on" statement. */
.hero__os {
  justify-content: center;
  gap: .7em;
  margin: var(--space-3) 0 var(--space-6);
  font-size: 2rem;
}
.hero__os .os-icon { color: var(--ink-dim); }
.hero__os:hover .os-icon { color: var(--ink); }

/* Platform marks — they replace the words "Mac & Windows" inline, so they have to
   sit on the text baseline and read at text weight, not as pasted-in artwork.
   The two glyphs have very different ink coverage (the Apple mark is airy, the
   Windows flag is a solid block), so they're optically sized, not equally sized. */
.os-pair {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  vertical-align: -.14em;
}
.os-icon {
  /* An <svg> with no width/height collapses to the 300x150 default replaced size,
     so the base size here is load-bearing, not just a default. */
  width: 1em; height: 1em;
  fill: currentColor;
  color: var(--ink-faint);
  flex: none;
  transition: color var(--dur) var(--ease);
}
.os-icon--apple   { width: 1.08em; height: 1.08em; }
.os-icon--windows { width: .92em;  height: .92em; }
.os-pair:hover .os-icon { color: var(--ink); }
.hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 1rem + 4vw, 4rem);
}

/* Hero media — the logo image with a video play overlay (FabFilter-style) */
.hero__media {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  background: var(--bg);
}
.hero__media::after { /* subtle inner glow rim */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(47,230,255,.10);
  pointer-events: none;
}
.hero__img { width: 100%; display: block; }

/* Play button overlay */
.play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(7,11,22,.15), rgba(7,11,22,.45));
  transition: background var(--dur) var(--ease);
}
.play-overlay:hover { background: radial-gradient(circle at center, rgba(7,11,22,.05), rgba(7,11,22,.35)); }
.play-btn {
  position: relative;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  box-shadow: var(--glow-cyan);
  transition: transform var(--dur) var(--ease);
}
.play-btn::before { /* pulse ring */
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(47,230,255,.5);
  animation: pulse 2.4s var(--ease-out) infinite;
}
.play-btn svg { width: 38%; margin-left: 8%; fill: #fff; }
.play-overlay:hover .play-btn { transform: scale(1.06); }
@keyframes pulse {
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

.hero__trust {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: center; align-items: center;
  color: var(--ink-faint); font-size: var(--fs-small);
}
.hero__trust strong { color: var(--ink); font-weight: var(--fw-semibold); }
/* In the trust row the marks stand in for a whole text item, so they carry a bit
   more presence than the inline pair in the headline. */
.os-pair--trust { gap: .6em; font-size: 1.15rem; }
.os-pair--trust .os-icon { color: var(--ink-dim); }

/* ------------------------------------------------ 3b. INTEGRATIONS STRIP */
/* Real brand marks. Source art was wildly inconsistent — Resolume, Notch,
   TouchDesigner shipped black-on-transparent (invisible here) and MadMapper came
   as dark ink on an opaque white box — so all four were rebuilt as white-on-
   transparent. See assets/logos/README.md; the reprocessing script is archived in
   assets/logos/_source/. */
.integrations {
  max-width: 1040px;
  margin: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem) auto 0;
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.integrations__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.integrations__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.integrations__list li { display: flex; align-items: center; }

/* Per-logo optical heights. A 8:1 wordmark and a 1.3:1 icon set to the SAME height
   read as completely different weights — the wordmark dominates and the icon looks
   like a typo. These are tuned by eye, not by a formula. */
.logo { width: auto; display: block; }
.logo--td    { height: 21px; }   /* 7.4:1 wordmark */
.logo--res   { height: 19px; }   /* 8.1:1 wordmark */
.logo--notch { height: 22px; }   /* 4.0:1 */
.logo--mad   { height: 26px; }   /* 2.7:1 */
.logo--abl   { height: 18px; }   /* 8.6:1 wordmark — the widest, so the shortest */
.logo--syn   { height: 31px; }   /* 1.3:1 icon */
.logo--vdmx  { height: 31px; }   /* 1.3:1 icon */

.integrations__list .logo {
  filter: grayscale(1) brightness(1.25);
  opacity: .55;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.integrations__list li:hover .logo {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* --------------------------------------------------- 4. FEATURE SPLIT ROWS */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split + .split { margin-top: clamp(4rem, 2rem + 5vw, 7rem); }
.split--reverse .split__media { order: 2; }
.split__title { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.split__text { color: var(--ink-dim); margin-bottom: var(--space-5); }
.split__text + .split__text { margin-top: calc(var(--space-4) * -.4); }
.split__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.feature-list { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-dim); }
.feature-list .tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(47,230,255,.12); color: var(--brand-cyan);
  display: grid; place-items: center; font-size: 13px; margin-top: 2px;
}

/* Media frame (shared by splits, video rows, screenshots) */
.frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.frame--glow { box-shadow: var(--shadow), var(--glow-cyan); }
.frame img, .frame video { width: 100%; display: block; }

/* --------------------------------------------------------- 5. QUOTE BLOCK */
.quote {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 4rem; line-height: 1;
  background: var(--grad-rainbow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--space-2);
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.9rem + 1.5vw, 1.75rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.quote__author {
  margin-top: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.quote__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--line);
}
.quote__name { font-weight: var(--fw-semibold); color: var(--ink); text-align: left; }
.quote__role { font-size: var(--fs-small); color: var(--ink-faint); text-align: left; }

/* --------------------------------------------------- 6. VIDEO HIGHLIGHT ROWS */
.highlight { text-align: center; max-width: 860px; margin-inline: auto; }
.highlight__media { margin-bottom: var(--space-6); }
.highlight__title { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.highlight__text { color: var(--ink-dim); max-width: 640px; margin: 0 auto var(--space-4); }

/* 16:9 media placeholder with play affordance */
.video-embed { position: relative; aspect-ratio: 16 / 9; cursor: pointer; }
.video-embed .play-overlay { background: rgba(7,11,22,.28); }
.video-embed:hover .play-overlay { background: rgba(7,11,22,.12); }
.video-embed .play-btn { width: clamp(56px, 6vw, 76px); }

/* --------------------------------------------------------- 7. SECTION HEAD */
.section-head { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--space-8); }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head h2 { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.section-head p { color: var(--ink-dim); font-size: var(--fs-lead); }

/* -------------------------------------------------------- 8. KEY FEATURES */
/* 8 cards. auto-fill lands on 3 columns at this container width, which leaves the
   last row 2/3 empty and looks broken — so the counts are pinned to divisors of 8. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.feature-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--brand-blue); background: var(--surface-2); }
.feature-card__icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: rgba(47,123,255,.12); color: var(--brand-cyan);
  margin-bottom: var(--space-4);
}
.feature-card__icon svg { width: 24px; height: 24px; }
/* Cross-platform card: the two platform marks stand in for a drawn icon. Wider
   than the square tile, and optically sized like the rest of the .os-icon pair. */
.feature-card__icon--os {
  width: auto;
  padding-inline: .8rem;
  gap: .5rem;
  grid-auto-flow: column;
  color: var(--brand-cyan);
}
.feature-card__icon--os .os-icon { color: inherit; font-size: 1.35rem; }
.feature-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.feature-card p { color: var(--ink-dim); font-size: var(--fs-small); }
/* The reset zeroes every margin, so a second <p> in a card would butt straight up
   against the first with no gap. */
.feature-card p + p { margin-top: var(--space-3); }

/* ------------------------------------------------ 8b. REALTIME OUTPUTS */
/* A source x signal matrix, not a list of pills. Pills laid out per-row are
   right-ragged: every row starts its signals at a different x, so the eye can't
   tie a signal back to its stem, and it can't answer "which stems have pitch?"
   at all. Columns fix both. --_c is the only thing a signal variant changes. */
.sig {
  --_c: var(--brand-cyan);
  color: var(--_c);
}
.sig--loudness { --_c: var(--brand-cyan); }
.sig--onset    { --_c: var(--accent-coral); }
.sig--pan      { --_c: var(--accent-yellow); }
.sig--spread   { --_c: var(--accent-magenta); }
.sig--pitch    { --_c: var(--accent-green); }

.matrix-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;          /* narrow screens scroll the table rather than crush it */
  overflow-y: hidden;
}
.matrix {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  text-align: center;
}
.matrix__col-src { width: 34%; }

/* Column headers: icon over label, tinted with that signal's colour. This IS the
   legend — the dots below inherit the same hue, so no separate key is needed. */
.matrix thead th {
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: bottom;
}
.matrix thead th svg { width: 18px; height: 18px; margin: 0 auto .5rem; display: block; }
.matrix__src-head {
  text-align: left !important;
  padding-left: var(--space-5) !important;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide) !important;
}

/* Group divider rows */
.matrix__group th {
  padding: var(--space-4) var(--space-5) var(--space-3);
  text-align: left;
  background: rgba(255,255,255,.022);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.matrix__group th svg {
  width: 15px; height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: .5rem;
  color: var(--brand-cyan);
}

/* Source rows */
.matrix tbody tr:not(.matrix__group) th { text-align: left; }
.matrix tbody td, .matrix tbody tr:not(.matrix__group) th { padding: .7rem var(--space-3); }
.matrix tbody tr:not(.matrix__group) th { padding-left: var(--space-5); }
/* Separator lives on the <tr>, not the cells: it survives the mobile reflow below
   without fighting the chip borders for specificity. */
.matrix tbody tr:not(.matrix__group) + tr:not(.matrix__group) {
  border-top: 1px solid var(--line-soft);
}
.matrix tbody tr:not(.matrix__group):hover { background: rgba(255,255,255,.03); }

.matrix__src {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--ink);
  white-space: nowrap;
}
.matrix__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.matrix__icon svg { width: 19px; height: 19px; }
.matrix tbody tr:hover .matrix__icon { color: var(--brand-cyan); border-color: var(--brand-blue); }
.matrix__note {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

/* Cells: a dot in the column's colour when the signal exists, a faint dash when it
   doesn't. The dash matters — an empty cell reads as "not filled in yet". */
.matrix .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--_c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 16%, transparent);
}
.matrix .on--loudness { --_c: var(--brand-cyan); }
.matrix .on--onset    { --_c: var(--accent-coral); }
.matrix .on--pan      { --_c: var(--accent-yellow); }
.matrix .on--spread   { --_c: var(--accent-magenta); }
.matrix .on--pitch    { --_c: var(--accent-green); }
.matrix .dash {
  display: inline-block;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--line);
}

/* Glossary: what each column means */
.signal-glossary {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
.signal-glossary dt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
.signal-glossary dt::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--_c);
  margin-right: .5rem;
  vertical-align: 1px;
}
.signal-glossary dd {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

/* ----------------------------------------------------- 9. LOGO CAROUSEL */
.logo-carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; gap: var(--space-8); width: max-content; animation: marquee 36s linear infinite; }
.logo-track img { height: 34px; opacity: .55; filter: grayscale(1) brightness(1.6); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------- 10. TUTORIAL CARDS */
.tutorials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.tutorial-card { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tutorial-card:hover { transform: translateY(-4px); border-color: var(--brand-cyan); }
.tutorial-card__thumb { position: relative; aspect-ratio: 16/9; background: var(--bg); }
/* YouTube thumbs come in at their own ratio — cover so they fill the 16:9 frame. */
.tutorial-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.tutorial-card__body h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.tutorial-card__body span { font-size: var(--fs-caption); color: var(--ink-faint); }

/* ------------------------------------------------------------- 11. INFO ROW */
.info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.info-col h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); display: flex; align-items: center; gap: .6rem; }
.info-col h3 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-brand); }
.info-col p { color: var(--ink-dim); font-size: var(--fs-small); margin-bottom: var(--space-3); }
.info-col ul { display: grid; gap: var(--space-2); }
.info-col li a { color: var(--ink-dim); font-size: var(--fs-small); transition: color var(--dur) var(--ease); }
.info-col li a:hover { color: var(--brand-cyan); }
.info-col__quote { font-style: italic; color: var(--ink); }

/* --------------------------------------------------------------- 12. FOOTER */
/* --bg, not --bg-2: there are five sections between hero and footer (an odd
   count), so with a --bg-2 footer the alternation cannot close — some pair
   always ends up sharing a background. Flipping the footer to --bg makes the
   whole run alternate cleanly; the top border still separates it. */
.footer { background: var(--bg); border-top: 1px solid var(--line-soft); padding-block: var(--space-9) var(--space-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr; gap: var(--space-7); }
.footer__brand .brand { font-size: 1.3rem; margin-bottom: var(--space-4); }
.footer__tag { color: var(--ink-dim); font-size: var(--fs-small); max-width: 320px; }
.footer h4 { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-4); }
.footer__links { display: grid; gap: var(--space-3); }
.footer__links a { color: var(--ink-dim); font-size: var(--fs-small); transition: color var(--dur) var(--ease); }
.footer__links a:hover { color: var(--brand-cyan); }

.newsletter__form { display: flex; gap: var(--space-2); margin-top: var(--space-3); max-width: 360px; }
.newsletter__input {
  flex: 1; padding: .8rem 1rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: var(--fs-small);
}
.newsletter__input::placeholder { color: var(--ink-faint); }
.newsletter__input:focus-visible { border-color: var(--brand-cyan); box-shadow: var(--ring); }
.social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-dim);
  transition: all var(--dur) var(--ease);
}
.social a:hover { color: var(--ink); border-color: var(--brand-cyan); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

.footer__bottom {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  color: var(--ink-faint); font-size: var(--fs-caption);
}
.footer__bottom a { color: var(--ink-faint); }
.footer__bottom a:hover { color: var(--ink-dim); }
.footer__legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* ------------------------------------------------------ 13. VIDEO MODAL */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(3,6,12,.82); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__inner { width: min(960px, 100%); aspect-ratio: 16/9; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: #000; transform: scale(.96);
  transition: transform var(--dur) var(--ease-out); }
.modal.is-open .modal__inner { transform: scale(1); }
.modal__inner iframe { width: 100%; height: 100%; border: 0; }
.modal__close {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 1.4rem; display: grid; place-items: center;
}
.modal__close:hover { border-color: var(--brand-cyan); }

/* --------------------------------------------------- 14. SCROLL REVEAL ANIM */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out),
  transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------- 15. RESPONSIVE */
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }   /* 8 cards -> 4 clean rows */
  .signal-glossary { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .split, .info-row { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---- Matrix -> chips on narrow screens ----------------------------------
   Six columns can't fit a phone. Scrolling the table sideways would hide four
   of the five signals behind an invisible overflow, so instead each source
   reflows into a block listing only the signals it HAS. The dashes (absent
   signals) are dropped — on desktop they carry meaning against the column
   header, but stacked with no header they'd be noise. */
@media (max-width: 760px) {
  .matrix-wrap { overflow: visible; }
  .matrix { min-width: 0; width: 100%; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix thead, .matrix colgroup { display: none; }

  .matrix__group th { padding: var(--space-4) var(--space-5) var(--space-3); }

  /* the table centres its cells; stacked chips must read left-aligned */
  .matrix tbody tr:not(.matrix__group) { padding: var(--space-4) var(--space-5); text-align: left; }
  .matrix tbody tr:not(.matrix__group) th {
    padding: 0 0 .7rem;
    border: 0;
  }

  .matrix tbody td.off { display: none; }        /* no column header to read it against */
  .matrix tbody td.on {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .65rem;
    margin: 0 .35rem .35rem 0;
    border-radius: var(--radius-pill);
    color: var(--_c);
    background: color-mix(in srgb, var(--_c) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--_c) 32%, transparent);
    font-size: .78rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
  }
  .matrix tbody td.on::after { content: attr(data-label); }
  .matrix tbody td.on .dot { width: 7px; height: 7px; box-shadow: none; }
}

@media (max-width: 768px) {
  .nav__menu, .nav__cta .btn { display: none; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__logo { height: 34px; }

  /* Mobile menu panel */
  .nav__menu.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg); gap: var(--space-1); margin: 0;
  }
  .nav__menu.is-open .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; padding-left: var(--space-4);
    min-width: 0;
  }
  .is-open .nav__link { font-size: var(--fs-body); }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .footer__bottom { flex-direction: column; }
  .features-grid { grid-template-columns: 1fr; }
  .signal-glossary { grid-template-columns: 1fr 1fr; }
}