/* ============ Hero ============ */
.hero { padding-top: 150px; padding-bottom: 90px; }
.hero-inner { display: grid; grid-template-columns: 1fr .95fr; gap: 56px; align-items: center; }
.hero-title { font-size: clamp(1.9rem, 3vw + 1rem, 3.2rem); margin-bottom: 16px; }
.hero-title .accent { color: var(--amber); }
.hero-role { font-family: var(--ff-body); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text-dim); margin-bottom: 22px; font-weight: 700; }
.hero-lead { color: var(--text-dim); font-size: 1.02rem; max-width: 480px; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero-specs { display: flex; flex-wrap: wrap; font-family: var(--ff-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 16px; }
.hero-specs span { padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--line); }
.hero-specs span:last-child { border: none; margin: 0; padding: 0; }

.hero-visual { position: relative; }
.schematic-frame {
  position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 26px 20px 20px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  background-color: var(--bg-card);
}
.corner { position: absolute; width: 14px; height: 14px; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--amber); border-left: 2px solid var(--amber); }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.schematic { width: 100%; height: auto; overflow: visible; }
.node { cursor: pointer; }
.node rect { fill: none; stroke: var(--text-dim); stroke-width: 1.4; transition: stroke var(--transition), stroke-width var(--transition); }
.node text { font-family: var(--ff-mono); fill: var(--text); font-size: 13px; font-weight: 700; text-anchor: middle; transition: fill var(--transition); }
.node text.sub { fill: var(--text-mute); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.node:hover rect, .node:focus-visible rect { stroke: var(--amber); stroke-width: 2; }
.node:hover text, .node:focus-visible text { fill: var(--amber); }
.node:focus-visible { outline: none; }
.conn path { fill: none; stroke: var(--amber); stroke-width: 2; opacity: .5; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1s ease forwards; transition: opacity .2s ease, stroke-width .2s ease; }
.conn path.active { opacity: 1; stroke-width: 3; }
.conn path:nth-child(1) { animation-delay: .35s; }
.conn path:nth-child(2) { animation-delay: .75s; }
.conn path:nth-child(3) { animation-delay: 1.05s; }
.schematic-caption { font-family: var(--ff-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); max-width: 78%; }
.stamp {
  position: absolute; bottom: -16px; right: 20px; padding: 8px 14px;
  border: 2px solid var(--amber); border-radius: var(--radius-sm);
  font-family: var(--ff-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--amber); background: var(--bg-card); transform: rotate(-4deg);
}

@keyframes draw { to { stroke-dashoffset: 0; } }