.hero-media {
  aspect-ratio: 700 / 394;
}

.media-tall {
  aspect-ratio: 1400 / 976;
}

.chat-agent-demo {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  width: 100%;
  margin: 30px 0 0;
  aspect-ratio: 700 / 488;
  background: var(--mockup-02-default);
}

.web3-video-demo {
  display: grid;
  width: 100%;
  margin: 30px 0 0;
  aspect-ratio: 1400 / 976;
  place-items: center;
  background: var(--mockup-02-default);
}

.web3-video-demo.case-image-viewer-trigger {
  cursor: zoom-in;
}

.web3-video-demo.case-image-viewer-trigger .web3-video-demo-stage,
.web3-video-demo.case-image-viewer-trigger video {
  pointer-events: none;
}

.web3-video-demo-stage {
  position: relative;
  overflow: hidden;
  width: 83.6%;
  aspect-ratio: 16 / 10;
  padding: 4px;
  border-radius: 6px;
  background: var(--mockup-02-bold);
}

.web3-video-demo-stage video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.chat-agent-demo-content {
  position: absolute;
  top: 11.578%;
  left: 8.143%;
  display: flex;
  width: 83.714%;
  flex-direction: column;
  gap: 2.143cqw;
  align-items: center;
}

.chat-agent-demo-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.571cqw;
  border-radius: 0.857cqw;
  background: var(--mockup-02-bold);
}

.chat-agent-demo-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.571cqw;
  aspect-ratio: 4096 / 2560;
  object-fit: cover;
  transition: opacity 140ms ease;
}

.chat-agent-demo-caption {
  width: 100%;
  margin: 0;
  color: var(--text-subtler);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.chat-agent-demo-image.is-changing {
  opacity: 0.38;
}

.chat-agent-demo-hotspots {
  position: absolute;
  inset: 0;
}

.chat-agent-hotspot {
  position: absolute;
  left: 6.35%;
  width: 23.4%;
  height: 8%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.chat-agent-hotspot:nth-child(1) { top: 23.5%; }
.chat-agent-hotspot:nth-child(2) { top: 31.56%; }
.chat-agent-hotspot:nth-child(3) { top: 39.56%; }
.chat-agent-hotspot:nth-child(4) { top: 47.56%; }

.chat-agent-hotspot:hover {
  background: rgba(21, 23, 22, 0.035);
}

.chat-agent-hotspot:focus-visible {
  outline: 2px solid rgba(21, 23, 22, 0.42);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .chat-agent-demo-image {
    transition: none;
  }
}

.explore-demo {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 30px 0 0;
  aspect-ratio: 1400 / 850;
  background: var(--mockup-02-default);
}

.explore-demo-shell {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.explore-demo-screen {
  position: absolute;
  z-index: 1;
  top: 16.47%;
  left: 12.21%;
  overflow: hidden;
  width: 75.5%;
  height: 69.88%;
  background: #f7f6f5;
}

.explore-demo-base {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

.explore-demo-scroll {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: grab;
  overscroll-behavior: contain;
  scrollbar-color: rgba(21, 23, 22, 0.22) transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.explore-demo-scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.explore-demo-scroll:focus-visible {
  outline: 2px solid rgba(21, 23, 22, 0.32);
  outline-offset: -2px;
}

.explore-demo-scroll img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.inspiration-flow-section { --flow-gallery-surface: var(--mockup-02-bold); }

.web3-gallery-head {
  margin-top: 50px;
}

.web3-gallery-head .subsection-copy {
  margin-top: 0;
}

.case-carousel-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.case-carousel-section-head > div:first-child {
  min-width: 0;
}

.case-carousel-section-head.is-subsection {
  margin-top: -50px;
}

.case-carousel-controls {
  display: flex;
  flex: 0 0 auto;
}

.case-carousel-controls button {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 160ms ease, transform 120ms ease;
}

.case-carousel-controls button:hover,
.case-carousel-controls button:focus-visible {
  opacity: 1;
}

.case-carousel-controls button:active {
  transform: scale(0.9);
}

.case-carousel-controls button:disabled {
  cursor: default;
  opacity: 0.2;
}

.case-carousel-controls svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.case-carousel {
  display: flex;
  width: calc(50vw + 50%);
  gap: 15px;
  overflow-x: auto;
  margin-top: 30px;
  padding-right: 20px;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-padding-right: 20px;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y;
  user-select: none;
}

.case-carousel::-webkit-scrollbar {
  display: none;
}

.case-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.case-carousel:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 24%, transparent);
  outline-offset: 4px;
}

.case-carousel-card {
  position: relative;
  overflow: hidden;
  width: min(600px, calc(100vw - 40px));
  flex: 0 0 min(600px, calc(100vw - 40px));
  margin: 0;
  aspect-ratio: 600 / 418;
  background: var(--mockup-02-default);
  scroll-snap-align: start;
}

.case-carousel-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.case-carousel-card.is-portrait img {
  width: auto;
  height: 78%;
  margin: 7% auto 0;
}

.case-carousel-card.is-raw {
  padding: 34px 49px 52px;
}

.case-carousel-card.is-raw img {
  object-fit: contain;
}

.case-carousel-card figcaption {
  position: absolute;
  right: 24px;
  bottom: 16px;
  left: 24px;
  color: var(--text-subtler);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.subsection-copy {
  margin-top: 50px;
  padding: 0 8px;
}

.subsection-copy h3,
.subsection-copy p {
  margin: 0;
}

.subsection-copy h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.4;
}

.subsection-copy p {
  max-width: 590px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: -0.023em;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .chat-agent-demo-caption {
    font-size: 11px;
  }

  .meta-row {
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
  }

  .case-carousel-section-head {
    display: block;
  }

  .case-carousel-controls {
    justify-content: flex-end;
    margin-top: 12px;
  }

  .case-carousel-section-head.is-subsection {
    margin-top: -40px;
  }

  .case-carousel {
    width: calc(50vw + 50%);
    gap: 12px;
  }

  .case-carousel-card.is-raw {
    padding: 22px 20px 46px;
  }

  .subsection-copy {
    margin-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-carousel {
    scroll-snap-type: none;
  }
}