/* Real product screenshots: keep the full interface visible in case details. */
.yupi-project {
  background:var(--depth-sky);
  color:var(--studio-ink);
}
.yupi-project .project-tag,
.yupi-project .depth-project-copy>p {color:var(--studio-muted);}
.yupi-scene {
  position:relative;
  width:100%;
  max-width:470px;
  min-width:0;
  height:470px;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  perspective:1200px;
}
.yupi-screen {
  position:absolute;
  display:block;
  overflow:hidden;
  background:var(--studio-ink);
  border:4px solid var(--studio-ink);
  border-radius:20px;
  box-shadow:var(--depth-shadow);
  transition:transform var(--duration-reveal) var(--ease-reveal);
}
.yupi-screen img {display:block;width:100%;height:auto;}
.yupi-screen-platform {
  width:250px;
  left:0;
  top:10px;
  transform:rotateY(8deg) rotateZ(-5deg);
}
.yupi-screen-telegram {
  width:180px;
  right:5px;
  top:64px;
  transform:rotateY(-9deg) rotateZ(6deg);
}
.yupi-scene-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:15px;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.055em;
  color:var(--studio-muted);
}
.yupi-scene:hover .yupi-screen-platform {transform:rotateY(3deg) rotateZ(-3deg) translateY(-5px);}
.yupi-scene:hover .yupi-screen-telegram {transform:rotateY(-3deg) rotateZ(4deg) translateY(-5px);}
.case-details-list {padding-left:21px;margin:4px 0 24px;color:var(--studio-muted);font-size:15px;line-height:1.6;}
.case-details-list li+li {margin-top:10px;}
.case-outcome {padding:18px 20px;background:var(--studio-paper);border-left:3px solid var(--studio-blue);border-radius:0 10px 10px 0;}
.case-proof-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:30px 0;align-items:start;}
.case-proof {min-width:0;margin:0;}
.case-proof img {display:block;width:100%;height:auto;border:1px solid var(--studio-line);border-radius:12px;}
.case-proof figcaption {margin-top:12px;color:var(--studio-muted);font-size:12px;line-height:1.6;}
#case-dialog[data-project="yupi"] .case-proof-grid {max-width:620px;margin-left:auto;margin-right:auto;}
@media (max-width:1100px) and (min-width:768px) {
  .yupi-screen-platform {width:225px;}
  .yupi-screen-telegram {width:155px;right:-15px;top:100px;}
}
@media (max-width:767px) {
  .gallery-panel .yupi-scene {height:395px;margin-top:20px;max-width:350px;justify-self:center;}
  .yupi-screen-platform {width:205px;left:2px;top:10px;}
  .yupi-screen-telegram {width:145px;right:0;top:58px;}
  .yupi-scene-caption {font-size:7px;bottom:12px;text-align:center;}
  .case-proof-grid {gap:16px;}
}
@media (max-width:480px) {
  .case-proof-grid {grid-template-columns:minmax(0,1fr);max-width:310px;margin-left:auto;margin-right:auto;gap:28px;}
  #case-dialog[data-project="yupi"] .case-proof-grid {max-width:310px;}
  .case-outcome {padding:15px;}
}
@media (max-width:360px) {
  .yupi-screen-platform {width:180px;}
  .yupi-screen-telegram {width:130px;top:64px;}
  .gallery-panel .yupi-scene {height:355px;}
}
@media (prefers-reduced-motion:reduce) {
  .yupi-screen {transition:none;}
  .yupi-scene:hover .yupi-screen-platform {transform:rotateY(8deg) rotateZ(-5deg);}
  .yupi-scene:hover .yupi-screen-telegram {transform:rotateY(-9deg) rotateZ(6deg);}
}