.home-button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  font: 500 .68rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-button:hover { color: var(--accent); border-color: var(--accent); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  gap: clamp(46px, 7vw, 94px);
  align-items: center;
}
.hero-main { display: grid; gap: 26px; }
.mindmap {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 430;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--raised);
  background-size: 32px 32px;
  overflow: hidden;
}
.map-caption {
  position: absolute; left: 16px; top: 13px;
  font: 500 .62rem var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.map-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--accent); stroke: var(--line-strong); stroke-width: 1.25;
}
.map-core {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 76px;
  transform: translate(-50%, -50%); display: grid; place-content: center;
  text-align: center; background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
}
.map-core span, .map-node > span {
  font: 500 .58rem var(--mono); letter-spacing: .1em; color: var(--muted);
}
.map-core span { color: #aaa; }
.map-core strong { font: 400 1.3rem var(--serif); }
.map-node {
  position: absolute; width: 128px; min-height: 72px; padding: 11px 12px;
  display: grid; align-content: center; border: 1px solid var(--line-strong); background: var(--bone);
}
.map-node strong { font: 400 1.1rem/1.2 var(--serif); }
.map-node small {
  margin-top: 3px; font: 500 .56rem var(--mono); color: var(--muted); text-transform: uppercase;
}
.node-observe { left: 6%; top: 16%; }
.node-execute { right: 6%; top: 16%; }
.node-control { left: 6%; bottom: 16%; }
.node-connect { right: 6%; bottom: 16%; }
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .mindmap { max-width: 620px; margin-top: 16px; }
  .display { font-size: clamp(3rem, 10vw, 6rem); }
}
@media (max-width: 860px) {
  .masthead-right { gap: 8px; }
  .home-button { order: 1; }
  .lang-toggle { order: 2; }
}
@media (max-width: 560px) {
  .brand-name { display: none; }
  .home-button { padding: 0 8px; font-size: .6rem; }
  .mindmap { aspect-ratio: 1 / 1; }
  .map-lines { transform: scale(.92); }
  .map-node { width: 104px; min-height: 64px; padding: 8px; }
  .map-core { width: 108px; height: 68px; }
  .map-node strong { font-size: .98rem; }
  .node-observe, .node-control { left: 3%; }
  .node-execute, .node-connect { right: 3%; }
}

.setup-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr auto 1.35fr;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}
.setup-flow span {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--raised);
  font: 500 .68rem/1.5 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.setup-flow i { align-self: center; font-style: normal; color: var(--accent); }
.install-note { max-width: 68ch; margin-top: 20px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 760px) {
  .setup-flow { grid-template-columns: 1fr; }
  .setup-flow i { transform: rotate(90deg); justify-self: center; }
}