/* Hero product preview (mock) — tab switch "Our systems | Your IT stack" + browser-framed screenshots.
   Brand tokens only (style-v2.css :root). Transform/opacity animations only. */
.hp{ position:relative; z-index:1; align-self:center; display:flex; flex-direction:column; gap:14px; min-width:0; }
.hp-switch{
  align-self:flex-start; display:inline-flex; padding:4px; gap:4px; border-radius:999px;
  background:rgba(14,36,56,.85); border:1px solid var(--glass-border);   /* solid: a live blur here was redrawn every frame the diagram moved behind it */
}
.hp-switch button{
  font:700 14px/1 var(--font-display); letter-spacing:.02em; color:var(--primary-200);
  background:transparent; border:0; border-radius:999px; padding:10px 18px; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.hp-switch button:hover{ color:#fff; }
.hp-switch button[aria-selected="true"]{ background:var(--primary); color:#fff; box-shadow:var(--glow-cta); }
.hp-switch button:focus-visible{ outline:2px solid var(--primary-100); outline-offset:2px; }

.hp-pane[hidden]{ display:none; }

.hp-frame{
  border-radius:var(--radius-lg); overflow:hidden; background:var(--panel);
  border:1px solid var(--glass-border); box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 44px rgba(28,108,143,.28);
}
.hp-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(8,26,56,.9); border-bottom:1px solid var(--line-dark); }
.hp-bar i{ width:10px; height:10px; border-radius:50%; background:var(--primary-300); opacity:.55; }
.hp-bar i:nth-child(2){ opacity:.4; } .hp-bar i:nth-child(3){ opacity:.25; }
.hp-title{ margin:0 0 0 8px; font:600 13px/1 var(--font-body); color:var(--primary-200); letter-spacing:.02em; }
.hp-shot{ position:relative; aspect-ratio:16/10; background:var(--dark); }
.hp-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; opacity:0; transform:scale(1.015); transition:opacity .6s var(--ease), transform .9s var(--ease); }
.hp-shot img.on{ opacity:1; transform:none; }

.hp-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.hp-tabs button{
  position:relative; overflow:hidden; font:700 14px/1 var(--font-display); color:var(--primary-100);
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:12px; padding:11px 16px; cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.hp-tabs button:hover{ border-color:var(--primary-200); color:#fff; }
.hp-tabs button[aria-selected="true"]{ background:rgba(28,108,143,.35); border-color:var(--primary-300); color:#fff; }
.hp-tabs button:focus-visible{ outline:2px solid var(--primary-100); outline-offset:2px; }
/* progress line on the active tab while auto-rotating */
.hp-tabs button::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--primary-200); transform:scaleX(0); transform-origin:left; }
.hp[data-auto="1"] .hp-tabs button[aria-selected="true"]::after{ animation:hp-prog var(--hp-ms,5500ms) linear forwards; }
@keyframes hp-prog{ to{ transform:scaleX(1); } }

.hp-cap{ margin:14px 0 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.hp-cap p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--primary-100); max-width:34ch; }
.hp-cap a{ white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  .hp-shot img{ transition:none; transform:none; }
  .hp-tabs button::after{ display:none; }
}

/* Shorter hero on tablet / phone: the preview sits right under the buttons, chips drop out */
@media (max-width:900px){
  .hero-chips{ display:none; }
  .hp{ margin-top:8px; }
  .hp-cap p{ max-width:none; }
}
@media (max-width:560px){
  .hp-switch button{ padding:9px 14px; font-size:13px; }
  .hp-tabs button{ padding:10px 12px; font-size:13px; }
}

/* Phones: the diagram's "YOUR IT STACK" label sits 24px above the diagram (stack-fx.css), which put it under
   the tab switch. Give the stack view room so the label clears the buttons. */
@media (max-width:640px){
  #hp-p-stack{ padding-top:30px; }
}