:root {
  color-scheme: dark;
  --ink: #13140f;
  --surface: #1b1c16;
  --ivory: #f4efe3;
  --muted: rgba(244, 239, 227, 0.64);
  --line: rgba(231, 217, 184, 0.2);
  --gold: #dfb765;
  --gold-soft: #ccb27a;
  --olive: #737858;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--ivory);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); scroll-behavior: smooth; }
body {
  min-height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(223, 183, 101, 0.1), transparent 30rem),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--ink);
  background-size: auto, 32px 32px, 32px 32px, auto;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.copy-en { display: none !important; }
html[data-language="en"] .copy-de { display: none !important; }
html[data-language="en"] .copy-en { display: revert !important; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  color: var(--ink);
  background: var(--gold);
  font-weight: 800;
}
.skip-link:focus { transform: none; }

.site-header,
main,
footer {
  width: min(1420px, calc(100% - 64px));
  margin-inline: auto;
}
.site-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-separator {
  width: 1px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; }
.brand strong, .brand small { display: block; }
.brand strong { font: 650 1.08rem/1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.brand small { margin-top: 5px; color: var(--gold-soft); font-size: 0.58rem; font-weight: 760; letter-spacing: 0.14em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 20px; }
.nav-link,
.technology-link,
.language-toggle { flex: 0 0 auto; white-space: nowrap; }
.nav-link { color: var(--gold-soft); font-size: 0.72rem; text-decoration: none; }
.nav-link:hover,
.nav-link.active { color: var(--ivory); }
.nav-play { color: var(--gold-soft); }
.technology-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.72rem; text-decoration: none; }
.technology-link img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; opacity: 0.9; }
.technology-wordmark strong,
.technology-wordmark small { display: block; }
.technology-wordmark strong { color: var(--ivory); font: 400 0.94rem/1 "Avenir Next", Avenir, "Helvetica Neue", ui-sans-serif, sans-serif; letter-spacing: 0.02em; }
.technology-wordmark small { margin-top: 4px; color: var(--gold-soft); font: 400 0.63rem/1 "Avenir Next", Avenir, "Helvetica Neue", ui-sans-serif, sans-serif; letter-spacing: 0.17em; text-transform: uppercase; }
.technology-link:hover { color: var(--ivory); }
.language-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.02);
  font: 760 0.68rem/1 inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.language-toggle:hover { border-color: rgba(223, 183, 101, 0.65); background: rgba(223, 183, 101, 0.08); }

main { align-self: center; padding: clamp(30px, 4.2vh, 58px) 0 24px; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
  align-items: center;
  gap: clamp(44px, 7vw, 112px);
}
.hero-copy { max-width: 760px; }
.eyebrow {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-soft);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(223, 183, 101, 0.09); }
h1 {
  max-width: 13ch;
  margin: 0;
  text-wrap: balance;
  font: 650 clamp(3.35rem, 6.1vw, 6.9rem)/0.92 Georgia, "Times New Roman", serif;
  letter-spacing: -0.057em;
}
h1 span,
h2 span,
h3 { text-wrap: balance; }
.lead {
  max-width: 65ch;
  margin: clamp(24px, 3vh, 36px) 0 0;
  color: rgba(244, 239, 227, 0.71);
  font-size: clamp(0.93rem, 1.1vw, 1.08rem);
  line-height: 1.65;
}
.hero-action { margin-top: clamp(28px, 4vh, 44px); }
.primary-action {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 22px;
  border: 1px solid var(--gold);
  color: #18170f;
  background: var(--gold);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
.primary-action:hover { transform: translateY(-2px); filter: brightness(1.07); }
.primary-action > span:first-child { font-size: 1.15rem; }
.hero-action p { margin: 11px 0 0; color: rgba(244, 239, 227, 0.42); font-size: 0.64rem; letter-spacing: 0.04em; }
.preview-request {
  max-width: 590px;
  margin-top: 28px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}
.preview-request label {
  display: block;
  margin-bottom: 9px;
  color: var(--gold-soft);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.preview-request-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.preview-request input:not(.preview-request-honeypot) {
  min-width: 0;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(231, 217, 184, 0.34);
  border-radius: 0;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.035);
  font: 500 0.82rem/1 inherit;
}
.preview-request input:not(.preview-request-honeypot)::placeholder { color: rgba(244, 239, 227, 0.38); }
.preview-request input:not(.preview-request-honeypot):focus { border-color: var(--gold); outline: 2px solid rgba(223, 183, 101, 0.24); outline-offset: 0; }
.preview-request-submit {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--gold);
  color: #18170f;
  background: var(--gold);
  font: 800 0.72rem/1 inherit;
  letter-spacing: 0.045em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}
.preview-request-submit:hover { transform: translateY(-2px); filter: brightness(1.07); }
.preview-request-submit:disabled { cursor: wait; opacity: 0.64; transform: none; filter: none; }
.preview-request-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.preview-request-note { margin: 10px 0 0; color: rgba(244, 239, 227, 0.42); font-size: 0.64rem; line-height: 1.5; }
.preview-request-privacy { margin: 5px 0 0; color: rgba(244, 239, 227, 0.36); font-size: 0.6rem; line-height: 1.5; }
.preview-request-privacy a { color: var(--gold-soft); text-underline-offset: 3px; }
.preview-request-message { min-height: 1.45em; margin: 10px 0 0; color: var(--gold-soft); font-size: 0.69rem; line-height: 1.5; }
.preview-request-message[data-tone="error"] { color: #df8f78; }
.preview-request-message[data-tone="success"] { color: #b6bd86; }

.matchroom {
  position: relative;
  min-height: 620px;
  margin: 0;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(231, 217, 184, 0.28);
  background: #202019;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.36);
}
.matchroom::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(19, 20, 15, 0.08), rgba(19, 20, 15, 0.1) 44%, rgba(19, 20, 15, 0.88)); }
.matchroom::after { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 12px rgba(19, 20, 15, 0.17); pointer-events: none; }
.matchroom > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.64) sepia(0.13) contrast(1.04); }
.landing-board-shell {
  position: absolute;
  z-index: 3;
  inset: 84px 24px 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  pointer-events: none;
}
.landing-board-frame {
  --landing-board-scale: 1;
  --landing-board-x: 0px;
  --landing-board-y: 0px;
  position: relative;
  width: min(100%, 354px);
  aspect-ratio: 1;
  padding: 3px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  grid-template-rows: 18px minmax(0, 1fr) 18px;
  border: 1px solid rgba(244, 239, 227, 0.48);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(30, 31, 25, 0.97), rgba(10, 11, 9, 0.98));
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.48), 0 0 0 7px rgba(19, 20, 15, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translate3d(var(--landing-board-x), var(--landing-board-y), 0) scale(var(--landing-board-scale));
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  touch-action: none;
  transition: transform 180ms cubic-bezier(.2, .72, .28, 1);
}
.landing-board-frame.is-moving,
.landing-board-frame.is-resizing { transition: none; }
.landing-board-frame.is-moving { cursor: move; }
.landing-board-frame.is-resizing { cursor: nwse-resize; }
.landing-board-coordinates { display: grid; place-items: center; color: rgba(244, 239, 227, 0.68); font: 700 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.landing-board-coordinates.files { grid-column: 2; grid-template-columns: repeat(8, 1fr); }
.landing-board-coordinates.files.top { grid-row: 1; }
.landing-board-coordinates.files.bottom { grid-row: 3; }
.landing-board-coordinates.ranks { grid-row: 2; grid-template-rows: repeat(8, 1fr); }
.landing-board-coordinates.ranks.left { grid-column: 1; }
.landing-board-coordinates.ranks.right { grid-column: 3; }
.landing-chess-board {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 227, 0.34);
}
.landing-board-square { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.landing-board-square.light { background: #c8b58b; background-image: linear-gradient(45deg, rgba(255, 255, 255, .13), transparent 46%, rgba(0, 0, 0, .15)); box-shadow: inset 1px -1px 0 rgba(255, 255, 255, .16), inset -1px 1px 0 rgba(0, 0, 0, .17); }
.landing-board-square.dark { background: #4b5b4c; }
.landing-board-piece { position: relative; z-index: 1; color: #f5f1e5; font: 700 clamp(1.1rem, 3vw, 2.2rem)/1 Georgia, "Times New Roman", serif; text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .9); transform: translateY(-1%); }
.landing-board-piece.black { color: #181913; text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 2px 2px rgba(0, 0, 0, .45); }
.landing-board-resize-corner { position: absolute; right: 4px; bottom: 4px; z-index: 2; width: 30px; height: 30px; border-right: 2px solid rgba(223, 183, 101, .84); border-bottom: 2px solid rgba(223, 183, 101, .84); opacity: .7; pointer-events: none; transition: opacity 180ms ease, filter 180ms ease; }
.landing-board-frame:hover .landing-board-resize-corner { opacity: 1; filter: drop-shadow(0 0 7px rgba(223, 183, 101, .5)); }
.landing-board-tools { width: min(100%, 354px); min-height: 32px; display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgba(244, 239, 227, .22); color: rgba(244, 239, 227, .72); background: rgba(19, 20, 15, .66); backdrop-filter: blur(10px); pointer-events: auto; }
.landing-board-tools label { color: var(--gold-soft); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.landing-board-tools input[type="range"] { width: 100%; accent-color: var(--gold); cursor: ew-resize; }
.landing-board-tools button { padding: 4px 7px; border: 1px solid rgba(244, 239, 227, .3); color: var(--ivory); background: rgba(255, 255, 255, .04); font: 700 .55rem/1 inherit; cursor: pointer; }
.landing-board-tools button:hover { border-color: var(--gold); color: var(--gold); }
.avatar-card {
  position: absolute;
  z-index: 3;
  top: 26px;
  left: 26px;
  display: inline-grid;
  grid-template-columns: 96px auto;
  align-items: center;
  gap: 10px;
  min-width: 244px;
  padding: 8px 15px 8px 8px;
  border: 1px solid rgba(244, 239, 227, 0.34);
  color: var(--ivory);
  background: rgba(19, 20, 15, 0.58);
  backdrop-filter: blur(12px);
}
.avatar-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 23%; filter: saturate(0.78) contrast(1.05); }
.avatar-card span { min-width: 0; }
.avatar-card strong,
.avatar-card small { display: block; }
.avatar-card strong { font: 650 1.35rem/1 Georgia, serif; letter-spacing: -0.02em; }
.avatar-card small { margin-top: 7px; color: var(--gold-soft); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.board-signal {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 26px;
  width: 76px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 239, 227, 0.4);
  background: rgba(19, 20, 15, 0.5);
  backdrop-filter: blur(12px);
}
.board-signal span:first-child { position: absolute; inset: 7px; opacity: 0.38; background: conic-gradient(from 90deg, rgba(223, 183, 101, 0.72) 25%, transparent 0 50%, rgba(223, 183, 101, 0.72) 0 75%, transparent 0) 0 0 / 18px 18px; }
.board-signal span:last-child { position: relative; color: var(--ivory); font: 2.25rem/1 Georgia, serif; text-shadow: 0 2px 12px #000; }
figcaption { position: absolute; z-index: 3; right: 28px; bottom: 28px; left: 28px; padding-top: 18px; border-top: 1px solid rgba(244, 239, 227, 0.28); }
figcaption > span { color: var(--gold-soft); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
figcaption strong { max-width: 18ch; margin-top: 8px; display: block; font: 650 clamp(1.6rem, 2.4vw, 2.5rem)/1 Georgia, serif; letter-spacing: -0.035em; }
figcaption small { margin-top: 12px; display: block; color: rgba(244, 239, 227, 0.54); font-size: 0.65rem; }

.value-strip {
  margin-top: clamp(30px, 4vh, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.value-strip article { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 26px; border-right: 1px solid var(--line); }
.value-strip article:first-child { padding-left: 0; }
.value-strip article:last-child { padding-right: 0; border-right: 0; }
.value-strip article > span { color: var(--olive); font: 800 0.62rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.value-strip strong { display: block; color: var(--gold-soft); font: 700 0.7rem/1.3 inherit; letter-spacing: 0.06em; text-transform: uppercase; }
.value-strip p { margin: 7px 0 0; color: rgba(244, 239, 227, 0.52); font-size: 0.7rem; line-height: 1.45; }

footer {
  min-height: 70px;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--line);
  color: rgba(244, 239, 227, 0.4);
  font-size: 0.62rem;
  line-height: 1.45;
}
.disclaimer { max-width: 76ch; margin: 0; }
footer div { display: flex; align-items: center; justify-content: flex-end; gap: 16px; white-space: nowrap; }
footer a { text-underline-offset: 3px; }
footer a:hover { color: var(--ivory); }

/* The technology explainer keeps the BobbyChess shell, but gives the
   DeepSquare relationship enough room to be understood before an outbound
   navigation happens. */
.technology-main { align-self: center; }
.technology-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.72fr);
  align-items: center;
  gap: clamp(42px, 8vw, 120px);
}
.technology-copy { max-width: 760px; }
.technology-kicker {
  margin: 0 0 14px;
  color: var(--gold-soft);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.technology-copy h1 { max-width: 12ch; }
.technology-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vh, 44px); }
.secondary-action {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 5px;
  color: var(--gold-soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-decoration: none;
}
.secondary-action:hover { color: var(--ivory); }
.outbound-note { margin: 12px 0 0; color: rgba(244, 239, 227, 0.42); font-size: 0.63rem; line-height: 1.5; }
.technology-visual {
  position: relative;
  min-height: min(54vh, 510px);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.technology-orbit {
  position: absolute;
  width: min(86%, 28rem);
  aspect-ratio: 1;
  border: 1px solid rgba(223, 183, 101, 0.24);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.technology-orbit::before,
.technology-orbit::after {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(223, 183, 101, 0.18);
  border-radius: 50%;
  content: "";
}
.technology-orbit::after { inset: 25%; border-color: rgba(244, 239, 227, 0.18); }
.technology-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px rgba(223, 183, 101, 0.72); }
.technology-orbit span:nth-child(1) { top: 7%; left: 48%; }
.technology-orbit span:nth-child(2) { right: 14%; bottom: 29%; background: var(--olive); box-shadow: 0 0 18px rgba(115, 120, 88, 0.68); }
.technology-orbit span:nth-child(3) { bottom: 13%; left: 28%; background: var(--ivory); box-shadow: 0 0 18px rgba(244, 239, 227, 0.48); }
.technology-card {
  position: relative;
  z-index: 1;
  width: min(78%, 300px);
  padding: 28px;
  border: 1px solid rgba(231, 217, 184, 0.3);
  background: rgba(27, 28, 22, 0.86);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
}
.technology-card img { width: 64px; height: 64px; display: block; border-radius: 14px; object-fit: cover; margin-bottom: 22px; }
.technology-card-label { margin: 0 0 8px; color: var(--gold-soft); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.technology-card > strong { display: block; color: var(--ivory); font: 500 clamp(1.7rem, 3vw, 2.35rem)/1 "Avenir Next", Avenir, "Helvetica Neue", ui-sans-serif, sans-serif; letter-spacing: 0.01em; }
.technology-card > small { display: block; margin-top: 14px; color: rgba(244, 239, 227, 0.62); font-size: 0.76rem; line-height: 1.55; }
.technology-metrics { display: flex; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--olive); font: 800 0.55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
.technology-metrics span { flex: 1; }
.technology-pillars {
  margin-top: clamp(30px, 4vh, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.technology-pillars article { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 26px; border-right: 1px solid var(--line); }
.technology-pillars article:first-child { padding-left: 0; }
.technology-pillars article:last-child { padding-right: 0; border-right: 0; }
.technology-pillars article > span { color: var(--olive); font: 800 0.62rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.technology-pillars strong { display: block; color: var(--gold-soft); font: 700 0.7rem/1.3 inherit; letter-spacing: 0.06em; text-transform: uppercase; }
.technology-pillars p { margin: 7px 0 0; color: rgba(244, 239, 227, 0.52); font-size: 0.7rem; line-height: 1.45; }

@media (max-width: 1040px) {
  .site-header, main, footer { width: calc(100% - 40px); max-width: 880px; }
  main { padding-top: 42px; }
  .hero { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .hero-copy, .matchroom { width: 100%; min-width: 0; }
  h1 { max-width: 12ch; font-size: clamp(3.25rem, 10.5vw, 6rem); }
  .matchroom { min-height: 600px; }
  .value-strip { grid-template-columns: 1fr; }
  .value-strip article, .value-strip article:first-child, .value-strip article:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .value-strip article:last-child { border-bottom: 0; }
  footer { align-items: flex-start; }
}

@media (max-width: 640px) {
  .site-header, main, footer { width: calc(100% - 28px); max-width: 520px; }
  .site-header { min-height: 72px; flex-wrap: wrap; padding-block: 12px; }
  .brand img { width: 36px; height: 36px; }
  .brand small { display: none; }
  .technology-link { gap: 0; }
  .technology-link img { width: 28px; height: 28px; }
  .technology-wordmark { display: none; }
  .technology-link span:last-child { margin-left: 0; }
  nav { width: 100%; justify-content: space-between; gap: 8px; }
  main { padding: 36px 0 20px; }
  .eyebrow { margin-bottom: 16px; }
  h1 { max-width: 12ch; font-size: clamp(2.8rem, 12.2vw, 4rem); overflow-wrap: normal; }
  .lead { font-size: 0.91rem; line-height: 1.58; }
  .primary-action { width: 100%; justify-content: center; }
  .preview-request { margin-top: 24px; padding-top: 18px; }
  .preview-request-fields { grid-template-columns: 1fr; }
  .preview-request-submit { width: 100%; }
  .matchroom { min-height: 560px; }
  .landing-board-shell { inset: 82px 14px 92px; gap: 7px; }
  .landing-board-frame { width: min(100%, 268px); }
  .landing-board-tools { width: min(100%, 268px); grid-template-columns: auto minmax(54px, 1fr) auto; padding: 5px 7px; }
  .landing-board-tools label { font-size: .5rem; }
  .landing-board-tools button { font-size: .5rem; }
  .avatar-card { top: 18px; left: 18px; min-width: 0; grid-template-columns: 72px auto; padding: 7px 11px 7px 7px; }
  .avatar-card img { width: 72px; height: 72px; }
  .avatar-card strong { font-size: 1.08rem; }
  .avatar-card small { margin-top: 6px; font-size: 0.5rem; }
  .board-signal { top: 18px; right: 18px; width: 64px; }
  figcaption { right: 20px; bottom: 20px; left: 20px; }
  footer { padding: 22px 0; display: block; }
  footer div { margin-top: 18px; justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
}

@media (max-height: 760px) and (min-width: 1041px) {
  .site-header { min-height: 70px; }
  main { padding-block: 22px 16px; }
  h1 { max-width: 15ch; font-size: clamp(3.4rem, 5.9vw, 5.6rem); }
  .matchroom { min-height: 380px; }
  .lead { margin-top: 22px; }
  .hero-action { margin-top: 24px; }
  .value-strip { margin-top: 18px; }
  .value-strip article { padding-block: 11px; }
  footer { min-height: 50px; padding-block: 10px; }
}

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

@media (max-width: 1040px) {
  .site-header { flex-wrap: wrap; padding-block: 12px; }
  .brand-cluster { flex: 1 1 auto; }
  .technology-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .technology-copy { max-width: 780px; }
  .technology-visual { min-height: 390px; }
  .technology-pillars { grid-template-columns: 1fr; }
  .technology-pillars article,
  .technology-pillars article:first-child,
  .technology-pillars article:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .technology-pillars article:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .site-header { gap: 10px; }
  .brand-cluster { width: 100%; gap: 10px; }
  .brand-separator { height: 30px; }
  .technology-link { gap: 7px; }
  .technology-wordmark { display: block; }
  .technology-wordmark strong { font-size: 0.82rem; }
  .technology-wordmark small { margin-top: 3px; font-size: 0.52rem; }
  nav { width: 100%; justify-content: flex-end; }
  .technology-main { padding-top: 26px; }
  .technology-actions { align-items: stretch; flex-direction: column; }
  .secondary-action { justify-content: center; }
  .technology-visual { min-height: 330px; }
  .technology-card { width: min(84%, 290px); padding: 24px; }
}