.hero {
  position: relative;
  padding-block: var(--space-2xl) var(--space-3xl);
  overflow: clip;
}
.hero-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@container page (inline-size > 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-xl);
  }
}
.hero-copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}
.hero h1 {
  max-inline-size: 12ch;
}
.hero-copy .lead {
  max-inline-size: 32rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
  list-style: none;
}
.hero-proof li {
  display: grid;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-m);
  background: var(--color-paper);
  box-shadow: var(--shadow-neu-s);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.hero-proof b {
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}
@container page (inline-size < 40rem) {
  .hero-proof {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
}
.hero-mark {
  position: absolute;
  inset: 10% 10% 10% 12%;
}
.bm {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.bm path,
.bm rect {
  fill: url(#bm-g);
}
.bm-a {
  stop-color: var(--brand-a);
}
.bm-b {
  stop-color: var(--brand-b);
}
.bm-arc,
.bm-net,
.bm-px {
  transform-box: fill-box;
  transform-origin: center;
}
.hg {
  position: absolute;
  z-index: 2;
  inline-size: 42%;
}
.hg-in {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid var(--glass-white-edge);
  border-radius: var(--radius-l);
  background: var(--glass-white);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--shadow-window);
}
.hg-frame {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-radius: var(--radius-m);
}
.hg-frame picture,
.hg-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top left;
}
.hg-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-2xs) var(--space-2xs);
}
.hg-label > span {
  display: grid;
  color: var(--color-ink-2);
  font-size: 0.75rem;
  line-height: 1rem;
}
.hg-label b {
  color: var(--color-ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--weight-strong);
}
.hg-label .logo-mark {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  border-radius: var(--radius-s);
}
.hg-1 {
  inset-block-start: 0;
  inset-inline-end: 0;
}
.hg-2 {
  inset-block-start: 16%;
  inset-inline-start: 0;
  inline-size: 38%;
}
.hg-3 {
  inset-block-end: 0;
  inset-inline-end: 4%;
}
.hg-4 {
  inset-block-end: 10%;
  inset-inline-start: 6%;
  inline-size: 38%;
}
@supports not (backdrop-filter: blur(1px)) {
  .hg-in {
    background: var(--glass-light-solid);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hg-in {
    background: var(--glass-light-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: lift 700ms var(--ease-out) both;
  }
  .hero-copy > :nth-child(2) {
    animation-delay: 80ms;
  }
  .hero-copy > :nth-child(3) {
    animation-delay: 160ms;
  }
  .hero-copy > :nth-child(4) {
    animation-delay: 240ms;
  }
  .bm-arc {
    animation: bm-arc 1300ms var(--ease-out) 150ms both;
  }
  .bm-px {
    animation: bm-fly 1100ms var(--ease-out) both;
  }
  .bm-px:nth-child(1) {
    animation-delay: 300ms;
    --fx: -220px;
    --fy: -60px;
  }
  .bm-px:nth-child(2) {
    animation-delay: 380ms;
    --fx: -260px;
    --fy: 20px;
  }
  .bm-px:nth-child(3) {
    animation-delay: 460ms;
    --fx: -120px;
    --fy: -140px;
  }
  .bm-px:nth-child(4) {
    animation-delay: 420ms;
    --fx: -200px;
    --fy: 60px;
  }
  .bm-px:nth-child(5) {
    animation-delay: 520ms;
    --fx: -160px;
    --fy: -30px;
  }
  .bm-px:nth-child(6) {
    animation-delay: 560ms;
    --fx: -240px;
    --fy: 10px;
  }
  .bm-px:nth-child(7) {
    animation-delay: 600ms;
    --fx: -140px;
    --fy: -90px;
  }
  .bm-px:nth-child(8) {
    animation-delay: 500ms;
    --fx: -280px;
    --fy: -40px;
  }
  .bm-px:nth-child(9) {
    animation-delay: 640ms;
    --fx: -180px;
    --fy: 80px;
  }
  .bm-px:nth-child(10) {
    animation-delay: 700ms;
    --fx: -220px;
    --fy: 40px;
  }
  .bm-px:nth-child(11) {
    animation-delay: 560ms;
    --fx: -260px;
    --fy: 120px;
  }
  .bm-px:nth-child(12) {
    animation-delay: 740ms;
    --fx: -160px;
    --fy: 140px;
  }
  .bm-px:nth-child(13) {
    animation-delay: 680ms;
    --fx: -200px;
    --fy: 100px;
  }
  .bm-px:nth-child(14) {
    animation-delay: 620ms;
    --fx: -240px;
    --fy: 160px;
  }
  .bm-px:nth-child(15) {
    animation-delay: 580ms;
    --fx: -180px;
    --fy: 30px;
  }
  .bm-net {
    animation: bm-join 900ms var(--ease-out) 900ms both;
  }
  .hg-in {
    animation: hg-in 900ms var(--ease-out) both;
  }
  .hg-1 .hg-in {
    animation-delay: 1100ms;
  }
  .hg-2 .hg-in {
    animation-delay: 1300ms;
  }
  .hg-3 .hg-in {
    animation-delay: 1500ms;
  }
  .hg-4 .hg-in {
    animation-delay: 1700ms;
  }
}
@keyframes lift {
  from {
    transform: translateY(24px);
  }
}
@keyframes bm-arc {
  from {
    opacity: 0;
    transform: rotate(-70deg) scale(0.8);
  }
}
@keyframes bm-fly {
  from {
    opacity: 0;
    transform: translate(var(--fx, -200px), var(--fy, 0)) rotate(-25deg) scale(0.6);
  }
}
@keyframes bm-join {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}
@keyframes hg-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bm-pxs {
      animation: bm-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
    .hg-1 .hg-frame {
      animation: hg-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
  }
}
@keyframes bm-drift {
  to {
    transform: translate(-40px, 24px);
  }
}
@keyframes hg-drift {
  to {
    transform: translateY(-16px);
  }
}