/* VOLK hero: two-column layout with the "complete system" panel (orbit lives in motion.css). */

/* The base hero is min-height: 100vh, which leaves large empty bands on tall screens
   now that the hero has real content; size it to the content instead (as on LUPUS). */
.hero { min-height: 760px; padding-bottom: 40px; }
@media (max-width: 900px) { .hero { min-height: auto; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 52px;
  align-items: center;
  position: relative;
}
.hero-grid .hero-content { padding: 72px 0; }

.engineering-visual {
  border: 1px solid #2c3d3c;
  border-radius: 18px;
  background: linear-gradient(145deg, #141c1c, #0b0f0f);
  box-shadow: 0 24px 90px #0005;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.engineering-visual:hover { border-color: #4f8f89; box-shadow: 0 28px 100px #1c4a4645; }
.visual-top,
.visual-bottom {
  display: flex;
  justify-content: space-between;
  font: 10px 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: #c3e0dc;
}
.visual-top { padding: 22px; border-bottom: 1px solid #2c3d3c; }
.visual-bottom { border-top: 1px solid #2c3d3c; }
.live-dot { color: var(--accent); }
.board {
  height: 330px;
  position: relative;
  display: grid;
  place-items: center;
  background-image: radial-gradient(#2f4442 1px, transparent 1px);
  background-size: 18px 18px;
}
.engineering-visual[data-mode="firmware"] .board { background-color: #132525; }
.pin {
  position: absolute;
  padding: 8px;
  border: 1px solid #2c3d3c;
  background: #0f1717;
  color: #b8d6d2;
  font: 9px 'JetBrains Mono', monospace;
}
.system-mode {
  flex: 1;
  padding: 20px 7px;
  border-bottom: 2px solid transparent;
  color: #a3bdb9;
  font: 9px 'JetBrains Mono', monospace;
  letter-spacing: .04em;
}
.system-mode:hover,
.system-mode.active { color: #dcfaf6; background: #1f3d3a44; }
.system-mode.active { border-bottom-color: var(--accent); }
.system-detail { padding: 23px; min-height: 157px; background: #0c1212; }
.system-detail strong { font-size: 14px; color: var(--text); }
.system-detail p { font-size: 12px; line-height: 1.7; margin: 8px 0; }
.system-detail a { font-size: 11px; color: var(--accent); }
.orbit-wordmark { font-weight: 700; letter-spacing: .18em; color: var(--text); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-grid .hero-content { padding: 60px 0 35px; }
  .engineering-visual { max-width: 560px; width: 100%; margin: 0 auto 24px; }
  .board { height: 270px; }
}
@media (max-width: 480px) {
  .system-mode { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-core::before, .orbit-link { animation: none; }
}