/* Terminal-only visual refinement based on the supplied ops-console reference.
   All rules are scoped to .hero-visual so navigation, sections and buttons are untouched. */
.hero-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 465px;
  overflow: visible;
}
.hero-visual .halo {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border: 1px solid rgba(109, 197, 166, .10);
  border-radius: 50%;
  pointer-events: none;
}
.hero-visual .halo-one { width: min(106%, 412px); }
.hero-visual .halo-two { width: min(132%, 510px); }
.hero-visual .terminal {
  position: relative;
  z-index: 1;
  width: min(100%, 485px);
  min-width: 0;
  border: 1px solid #315450;
  border-radius: 15px;
  overflow: hidden;
  background: #091720;
  color: #e2eceb;
  box-shadow: 0 22px 48px rgba(0,0,0,.20);
  transform: none;
}
.hero-visual .terminal-bar {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  height: 47px;
  padding-inline: 19px;
  border-bottom: 1px solid #29474a;
  background: #172b33;
  color: #9aadb5;
  font: 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  letter-spacing: .012em;
}
.hero-visual .terminal-bar > span:nth-child(2) { text-align: center; white-space: nowrap; }
.hero-visual .traffic-lights { display: flex; gap: 7px; align-items: center; }
.hero-visual .traffic-lights i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef8278;
}
.hero-visual .traffic-lights i:nth-child(2) { background: #e3ba72; }
.hero-visual .traffic-lights i:nth-child(3) { background: #72cda7; }
.hero-visual .terminal-kebab { justify-self: end; font-size: 10px; letter-spacing: .08em; color: #526f76; }
.hero-visual .terminal-body {
  min-height: 285px;
  padding: 25px 23px 28px;
  color: #dfebeb;
  font: 12.5px/1.79 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  letter-spacing: .008em;
}
.hero-visual .terminal-body p { margin: 0; }
.hero-visual .prompt { color: #c4dad6; white-space: nowrap; }
.hero-visual .prompt > span:first-child { margin-right: 8px; color: #72e2c0; }
.hero-visual .terminal-cwd { color: #80dce0; }
.hero-visual .command { color: #e8f2f0; }
.hero-visual .yaml-lines { padding-top: 18px; }
.hero-visual .yaml-lines p { white-space: normal; overflow-wrap: normal; }
.hero-visual .yaml-lines .key { color: #70d2c4; }
.hero-visual .yaml-lines .val { color: #e2eaeb; }
.hero-visual .yaml-lines .punct { color: #80d4c0; }
.hero-visual .yaml-lines .string { color: #eeca84; }
.hero-visual .yaml-lines .indent { padding-left: 22px; }
.hero-visual .prompt-bottom { padding-top: 19px; }
.hero-visual .cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 5px;
  vertical-align: -2px;
  background: #a4f1d1;
  animation: terminal-reference-cursor 1.25s steps(1) infinite;
}
@keyframes terminal-reference-cursor { 50% { opacity: 0; } }
.hero-visual .terminal-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 9px 21px;
  background: #132b32;
  border-top: 1px solid #294a4a;
  color: #99c4bd;
  font: 10px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .03em;
}
.hero-visual .footer-light {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a1dfb4;
  box-shadow: 0 0 0 3px rgba(143,219,170,.12);
}
.hero-visual .terminal-footer-right { margin-left: auto; color: #61828c; }
.hero-visual .float-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #345b56;
  border-radius: 11px;
  background: #142d2d;
  color: #8daea9;
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
  font: 9px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .035em;
}
.hero-visual .float-badge strong { color: #e2f5ec; font-weight: 750; }
.hero-visual .badge-mark { font-size: 25px; font-weight: 600; color: #a2f1d2; }
.hero-visual .mini-shield { color: #acf0d4; font-size: 25px; }
.hero-visual .float-one { top: 4px; right: -10px; transform: rotate(2deg); }
.hero-visual .float-two { bottom: -7px; left: -9px; transform: rotate(-2deg); }
/* Let the reference terminal breathe on wide monitors without changing the hero grid. */
@media (min-width: 1100px) {
  .hero-visual .terminal { flex: 0 0 460px; width: 460px; }
}
/* Respect minimal design: don't let visual overflow create horizontal page scroll. */
@media (max-width: 820px) {
  .hero-visual { width: min(100%, 560px); margin-inline: auto; min-height: 455px; }
  .hero-visual .terminal { width: min(100%, 485px); }
  .hero-visual .float-one { right: -2px; }
  .hero-visual .float-two { left: -2px; }
}
@media (max-width: 650px) {
  .hero-visual { min-height: auto; overflow: visible; }
  .hero-visual .halo, .hero-visual .float-badge { display: none; }
  .hero-visual .terminal { width: 100%; }
  .hero-visual .terminal-bar { grid-template-columns: 40px 1fr 40px; padding-inline: 13px; font-size: 10px; }
  .hero-visual .terminal-body { min-height: 0; padding: 22px 16px 24px; font-size: clamp(10.5px, 2.75vw, 12.5px); line-height: 1.84; }
  .hero-visual .prompt { white-space: normal; overflow-wrap: anywhere; }
  .hero-visual .yaml-lines p { overflow-wrap: anywhere; }
  .hero-visual .yaml-lines .indent { padding-left: 16px; }
  .hero-visual .terminal-footer { padding-inline: 13px; font-size: 9px; }
}
@media (max-width: 370px) {
  .hero-visual .terminal-body { font-size: 10.5px; padding-inline: 12px; }
  .hero-visual .yaml-lines .indent { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .cursor { animation: none; }
}