.montage-hero {
  --accent: #ffdf79;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  align-items: center;
  gap: clamp(22px, 5vw, 70px);
  padding-block: clamp(42px, 7vw, 86px) 36px;
}
.montage-hero .intro { padding: 0; }
.montage-hero h1 { font-size: clamp(3.1rem, 7.5vw, 6.4rem); }
.montage-hero h1 em { display: block; }
.hero-actions, .download-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.hero-actions .home { display: inline-flex; align-items: center; }
.hero-actions .action { gap: 10px; }
.demo-card {
  display: block;
  border: 1px solid #74518f;
  background: #19112e;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 20px 55px #0b0619aa;
}
.demo-card:hover { border-color: #ffdf79; }
.demo-top, .demo-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  color: #d6c6e8;
}
.demo-top { font-size: .63rem; font-weight: 800; letter-spacing: .14em; }
.demo-top span { color: #e7afcc; }
.demo-caption { font-size: .88rem; font-weight: 700; border-top: 1px solid #49305e; }
.demo-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  aspect-ratio: 1.85;
  overflow: hidden;
  background: radial-gradient(ellipse at 55% 62%, #593b78, #211533 72%);
}
.demo-shot {
  position: absolute;
  width: 26%;
  aspect-ratio: 9/16;
  border: 2px solid #e1c6ff7a;
  border-radius: 11px;
  background: #815ba5 url('winter.svg') center / cover;
  box-shadow: 0 12px 25px #13091c99;
}
.shot-left { transform: translateX(-83%) rotate(-13deg); filter: hue-rotate(25deg) brightness(.77); }
.shot-right { transform: translateX(83%) rotate(13deg); filter: hue-rotate(-34deg) brightness(.77); }
.shot-main { display: grid; place-items: center; transform: rotate(-3deg); }
.shot-main span {
  margin-top: -25%;
  text-align: center;
  font-size: clamp(.8rem, 2vw, 1.3rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff8ee;
  text-shadow: 0 2px 8px #1b102d;
}
.play {
  position: absolute;
  top: 65%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-left: 2px;
  border-radius: 50%;
  background: #ffdf79;
  color: #1a112d;
  font-size: .72rem;
}
.demo-tracks {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .8fr 1.25fr 1fr;
  gap: 4px;
  padding: 10px 18px 13px;
}
.demo-tracks i { height: 10px; border-radius: 4px; background: #a982dd; }
.demo-tracks i:nth-child(even) { background: #dc9ab9; }
.demo-tracks b { position: absolute; left: 42%; top: 4px; bottom: 5px; width: 2px; background: #ffdf79; }
.prototype-note { max-width: 700px; padding-block: 18px 34px; }
.prototype-note > p:last-child, .local-note, .platform ol { color: #ded3ee; line-height: 1.65; }
.downloads { border-top: 1px solid #503771; padding-block: 30px 12px; scroll-margin-top: 16px; }
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.platform { --accent: #ffc5d8; padding: 22px; border: 1px solid #503771; border-radius: 18px; background: #1a112d; }
.platform h3 { margin: 0; font-size: 1.4rem; }
.platform ol { padding-left: 1.25em; margin-block: 12px; }
.platform li + li { margin-top: 5px; }
.local-note { margin-top: 20px; }
@media (max-width: 740px) {
  .montage-hero, .platforms { grid-template-columns: 1fr; }
  .demo-card { max-width: 560px; }
}