/* Full mobile recordings inside slim phone frames. Keep every screen pixel visible. */
body[data-design="cyber"] .project-case .case-preview{--case-preview-height:440px}
.case-phone-stage{position:relative;isolation:isolate;height:var(--case-preview-height);padding:10px 0 34px;--phone-glow:rgba(194,127,153,.16)}
.case-phone-stage-matrix{--phone-glow:rgba(197,160,83,.17)}
.case-phone-stage-nelly{--phone-glow:rgba(197,160,83,.17);--case-screen-ratio:.5625}
.case-phone-stage-milana{--phone-glow:rgba(162,113,173,.16);--case-screen-ratio:.5625}
.case-phone-stage::before{content:"";position:absolute;inset:9% 1% 12%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,var(--phone-glow),transparent 70%);pointer-events:none}
.case-phone-stage::after{content:"";position:absolute;z-index:-1;bottom:31px;left:15%;right:15%;height:20px;border-radius:50%;background:rgba(0,0,0,.65);filter:blur(12px);pointer-events:none}
.case-phone-stage .case-app-preview.case-phone{position:relative;display:block;width:calc((var(--case-preview-height) - 58px)*var(--case-screen-ratio,.49) + 14px);max-width:calc(100% - 16px);height:calc(var(--case-preview-height) - 44px);margin:0 auto;padding:7px;overflow:visible;border:1px solid rgba(205,217,225,.5);border-radius:30px;background:linear-gradient(115deg,#68747c 0%,#20282e 7%,#10171b 43%,#0b1014 80%,#596670 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.1),0 16px 35px rgba(0,0,0,.48);transition:transform .25s ease,box-shadow .25s ease}
.case-phone::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:35px;height:3px;border-radius:5px;background:#0a0e11;box-shadow:0 1px 0 rgba(255,255,255,.12);pointer-events:none}
.case-phone-screen{position:relative;display:block;width:100%;height:100%;overflow:hidden;border:1px solid rgba(0,0,0,.85);border-radius:22px;background:#080b0c}
.case-phone-stage-trip .case-phone-screen{background:#f3ede2}
.case-preview .case-phone-screen>img{display:block;width:100%;max-width:none;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;border:0;border-radius:0;background:transparent}
.case-phone .case-demo-video{object-fit:contain}
.case-phone .case-video-hint{left:50%;right:auto;bottom:-31px;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border-color:rgba(198,211,217,.2);background:rgba(25,34,40,.55);color:var(--dim);font-size:9px}
.case-phone-stage .case-app-preview.case-phone:hover{filter:none;transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 20px 42px rgba(0,0,0,.52)}
@media(max-width:1180px) and (min-width:1001px){body[data-design="cyber"] .project-case .case-preview{--case-preview-height:400px}}
@media(max-width:600px){body[data-design="cyber"] .project-case .case-preview{--case-preview-height:480px}}
@media(prefers-reduced-motion:reduce){.case-phone-stage .case-app-preview.case-phone{transition:none}.case-phone-stage .case-app-preview.case-phone:hover{transform:none}}

/* Skill Bot is a desktop tool: preserve the entire interface in a monitor. */
.case-computer-stage{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:var(--case-preview-height);padding:22px 2px 44px}
.case-computer-stage::before{content:"";position:absolute;inset:10% 0 12%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,rgba(179,87,107,.15),transparent 70%);pointer-events:none}
.case-computer{position:relative;display:block;width:100%;max-width:430px;color:var(--dim);filter:drop-shadow(0 16px 18px rgba(0,0,0,.35))}
.case-monitor{position:relative;display:block;padding:8px 8px 0;border:1px solid rgba(205,217,225,.48);border-radius:12px;background:linear-gradient(115deg,#5e6c76,#182127 8%,#0e1418 70%,#52616c);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 18px rgba(0,0,0,.25)}
.case-monitor::before{content:"";position:absolute;top:2px;left:50%;width:3px;height:3px;border-radius:50%;background:#030708;box-shadow:0 0 0 1px rgba(198,211,217,.12);pointer-events:none}
.case-monitor-screen{display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid #080d10;border-radius:4px 4px 0 0;background:#101317}
.case-preview .case-monitor-screen img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;border:0;border-radius:0;background:transparent}
.case-monitor-chin{display:flex;height:23px;align-items:center;justify-content:center}
.case-monitor-chin>span{width:6px;height:6px;border:1px solid rgba(198,211,217,.4);border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.case-monitor-neck{display:block;width:16%;height:30px;margin:0 auto;background:linear-gradient(90deg,#26343e,#8d9ca6 48%,#33434e);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.case-monitor-foot{display:block;width:41%;height:8px;margin:0 auto;border:1px solid rgba(198,211,217,.4);border-radius:50% 50% 30% 30%;background:linear-gradient(#8e9ba5,#3c4c57);box-shadow:0 7px 14px rgba(0,0,0,.38)}
.case-computer-hint{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border:1px solid rgba(198,211,217,.2);border-radius:20px;background:rgba(25,34,40,.55);font-size:9px;line-height:1.3}
.case-computer:hover .case-monitor{border-color:rgba(220,230,236,.8)}