:root {
  --paper: #ffffff;
  --grid: #dce8f8;
  --grid-strong: #c2d7f1;
  --ink: #1b2538;
  --ink-soft: #4a566b;
  --ink-faint: #8a96a8;
  --pen: #2a52cc;
  --pen-deep: #1c3aa0;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --u: 27px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  /* Blue graph paper: fine lines every 27px, heavier every 5 squares. */
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 135px 135px, 135px 135px, 27px 27px, 27px 27px;
  background-position: 0 0;
}

a { color: var(--pen); text-decoration: none; }
a:hover { color: var(--pen-deep); }

.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

nav { flex: none; height: 81px; border-bottom: 1px solid var(--grid-strong); }
nav .bar { max-width: 1040px; margin: 0 auto; padding: 0 40px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; letter-spacing: .01em; }
.brand svg { display: block; }
.contact { font-size: 13px; letter-spacing: .03em; color: var(--ink-soft); border: 1px solid var(--grid-strong); padding: 9px 15px; border-radius: 3px; transition: color .18s, border-color .18s; }
.contact:hover { color: var(--ink); border-color: var(--ink-soft); }

main.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; min-height: 0; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 40px; width: 100%; }
.grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }

/* Hero copy: definition on top, headline in the middle, company line below. */
.col-text { display: flex; flex-direction: column; justify-content: center; min-height: 432px; }
.def { font-weight: 400; font-size: 14px; line-height: 27px; color: var(--ink-faint); max-width: 52ch; margin: 0; text-wrap: balance; }
h1 { font-weight: 500; font-size: 52px; line-height: 54px; letter-spacing: -.02em; margin: 0; }
h1 .bend { font-style: italic; color: var(--pen); }
.lede { font-weight: 400; font-size: 15px; line-height: 27px; color: var(--ink-soft); max-width: 44ch; margin: 81px 0 0; text-wrap: balance; }

.col-figure { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; isolation: isolate; }
.col-figure svg { width: 100%; max-width: 380px; height: auto; overflow: visible; touch-action: none; }
.figure-note { margin: -24px 0 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); opacity: .72; }
.figure-note span { display: inline-block; width: 18px; height: 1px; margin: 0 7px 3px 0; background: var(--pen); transform-origin: left; animation: pressure 2.4s ease-in-out infinite; }
.entity-halo { opacity: .16; transform-origin: 280px 235px; animation: entity-pulse 3.2s ease-out infinite; }
.entity-node { transform-origin: 280px 235px; transition: transform .3s ease; }
.col-figure:hover .entity-node { transform: scale(1.08); }
.outer-nodes > g { cursor: grab; }
.outer-nodes > g:active { cursor: grabbing; }
.outer-nodes .node-hit { fill: transparent; stroke: none; pointer-events: all; }
.outer-nodes .node-core { fill: #fff; stroke: var(--pen); stroke-width: 2; transition: r .16s, fill .16s, stroke-width .16s; pointer-events: none; }
.outer-nodes text { transition: fill .16s, font-weight .16s; pointer-events: none; }
.outer-nodes > g:hover .node-core { fill: #f6f8ff; stroke-width: 2.4; }
.outer-nodes > g.is-active .node-core, .outer-nodes > g.is-selected .node-core { r: 14px; fill: #eef3ff; stroke-width: 2.6; }
.outer-nodes > g.is-active text, .outer-nodes > g.is-selected text { fill: var(--pen-deep); font-weight: 500; }
.outer-nodes > g:focus { outline: none; }
.outer-nodes > g:focus-visible .node-core { stroke: var(--pen-deep); stroke-width: 3.5; }
.graph-edges path { transition: stroke .16s, stroke-width .16s; }
.object-agent-edge { stroke: var(--pen); stroke-width: 2.2; opacity: .86; transition: stroke .16s, stroke-width .16s, opacity .16s; }
.object-agent-edge.is-regular { stroke: #c1cddd; stroke-width: 1.5; opacity: 1; }
.graph-edges path.is-active, .graph-edges path.is-selected, .cross-edges path.is-active, .cross-edges path.is-selected, .object-agent-edge.is-active, .object-agent-edge.is-selected { stroke: var(--pen); stroke-width: 2.5; opacity: 1; }
@keyframes entity-pulse { 0% { transform: scale(.7); opacity: .38; } 80%,100% { transform: scale(1.5); opacity: 0; } }
@keyframes pressure { 0%,100% { transform: scaleX(.35); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }

footer { flex: none; border-top: 1px solid var(--grid-strong); }
.foot { max-width: 1040px; margin: 0 auto; padding: 22px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 27px; color: var(--ink-faint); flex-wrap: wrap; gap: 12px; }
.foot a { color: var(--ink-soft); }
.foot a:hover { color: var(--pen-deep); }

@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; gap: 28px; }
  .col-text { min-height: 0; order: 2; }
  .col-figure { order: 1; }
  .lede { margin-top: 40px; }
  h1 { font-size: 44px; }
}
@media (max-width: 620px) {
  nav .bar, .wrap, .foot { padding-left: 20px; padding-right: 20px; }
  .contact { font-size: 0; }
  .contact::after { content: "Contact"; font-size: 12px; }
  .col-figure svg { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .figure-note span, .entity-halo { animation: none; }
  .col-figure svg { transition: none; }
}