.hero {
  padding: 72px 0 0;
  background-color: hsl(35 13% 5%);
}
.hero h1 { font-family: var(--font); font-size: clamp(34px, 4.2vw, 54px); -webkit-text-stroke: 0; letter-spacing: -0.04em; line-height: 1.04; }
.hero-sub { margin-top: 14px; max-width: 420px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.hero-actions { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.home-page .hero .download-controls > .btn,
.home-page .hero .download-picker > summary { border-radius: 0; }

/* Photo backdrop, kept black-and-white so it never fights the UI */
.frame {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg); background: #0b0b0b;
}
.frame::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('../hero-backdrop.jpg') var(--bp, 50% 50%) / var(--bs, cover) no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(0.85);
}
.frame::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 9, 10, 0.15), rgba(9, 9, 10, 0.6)); }
.hero-frame { border-radius: 0; margin-top: 56px; padding: clamp(20px, 5vw, 64px) clamp(16px, 6vw, 84px) 0; }
.hero-frame .cam { max-width: none; border-radius: 8px 8px 0 0; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }

.agents-strip { padding: 56px 0 0; text-align: center; }
.agents-strip p { color: var(--dim); font-size: 14px; margin-bottom: 20px; }
.agent-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.agent-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 6px; background: var(--surface); font-size: 14px; }
.agent-chip .mk { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.agent-chip .mk svg { width: 18px; height: 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }