.device-showcase{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;background:#090809;border-bottom:1px solid #302027;overflow:hidden}
.showcase-copy h2{font:700 clamp(48px,5vw,76px)/.95 var(--display);text-transform:uppercase;margin:14px 0 24px}.showcase-copy h2 span{color:var(--red)}.showcase-copy>p:not(.eyebrow){color:#aaa;line-height:1.8;max-width:430px}.showcase-copy .btn{margin-top:16px}
.device-scene{position:relative;perspective:1300px;padding:35px 50px 85px 5px;min-width:0}
.showcase-laptop{position:relative;border:7px solid #242326;border-radius:15px 15px 4px 4px;background:#080808;transform:rotateY(-12deg) rotateX(7deg);box-shadow:0 30px 55px #000a;animation:laptop-drift 8s ease-in-out infinite;animation-play-state:paused}
.scene-in-view .showcase-laptop,.scene-in-view .showcase-phone{animation-play-state:running}
.mockup-bar{display:flex;gap:5px;align-items:center;padding:9px;background:#19171a}.mockup-bar i{width:5px;height:5px;border-radius:50%;background:#ad333d}.mockup-bar span{font-size:7px;color:#aaa;letter-spacing:.15em;margin-left:auto}
.showcase-laptop>img{display:block;width:100%;height:auto;border-radius:0 0 3px 3px}
.mockup-keyboard{position:absolute;top:100%;left:-10%;width:120%;height:27px;background:linear-gradient(#777,#303033 40%,#121214);clip-path:polygon(8% 0,92% 0,100% 75%,98% 100%,2% 100%,0 75%);box-shadow:0 20px 30px #000}
.showcase-phone{position:absolute;right:2%;bottom:35px;width:26%;aspect-ratio:.49;background:#080708;border:5px solid #454045;border-radius:25px;box-shadow:5px 5px 0 #171317,0 26px 38px #000b;transform:rotateY(-15deg) rotateZ(7deg);animation:phone-drift 7s ease-in-out infinite;animation-play-state:paused}
.phone-speaker{position:absolute;top:7px;left:30%;width:40%;height:7px;border-radius:10px;background:#252125;z-index:1}.phone-content{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:15px 9px;background:radial-gradient(ellipse at bottom,#4a1520,transparent 70%);border-radius:19px}.phone-content img{width:95%;height:auto}.phone-content>span{text-align:center;font:800 clamp(17px,2.3vw,33px)/1 var(--display)}.phone-content>div{width:35%;height:3px;background:var(--red)}.phone-content small{font-size:6px;letter-spacing:.1em;text-align:center;color:#b0a5a9}.device-caption{position:absolute;left:10%;bottom:0;font-size:9px;letter-spacing:.17em;color:#8f7f85}
@keyframes laptop-drift{0%,100%{translate:0 0;transform:rotateY(-12deg) rotateX(7deg)}50%{translate:0 -14px;transform:rotateY(-7deg) rotateX(4deg)}}
@keyframes phone-drift{0%,100%{translate:0 0}50%{translate:0 -20px}}
.portfolio-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 15px}.portfolio-toolbar button{padding:12px 20px;border:1px solid #41343a;border-radius:30px;background:#120e10;color:#bbb;cursor:pointer;font:600 13px var(--body);transition:background .25s,box-shadow .25s}.portfolio-toolbar button span{font-size:10px;margin-left:9px;opacity:.65}.portfolio-toolbar button[aria-pressed=true]{color:#fff;border-color:#ed4b57;background:linear-gradient(130deg,#c92636,#721423);box-shadow:0 7px 25px #d5232326}.portfolio-count{text-align:center;color:#999;font-size:12px;margin:0 0 30px}.project-card[hidden]{display:none!important}
.real-work .device-laptop{padding:24px 20px 52px;overflow:hidden;background:radial-gradient(ellipse at center,#31252b,#0b090b)}
.device-screen{display:block;position:relative;width:100%;height:100%;border:5px solid #363136;border-radius:7px 7px 2px 2px;box-shadow:0 12px 25px #0008;background:#000;transform:perspective(700px) rotateY(-6deg) rotateX(4deg);transition:transform .5s ease}
.real-work .device-screen img{width:100%;height:100%;object-fit:contain}.device-base{position:absolute;bottom:40px;left:7%;width:86%;height:11px;clip-path:polygon(6% 0,94% 0,100% 80%,98% 100%,2% 100%,0 80%);background:linear-gradient(#888,#272329)}
.project-card:hover .device-screen{transform:perspective(700px) rotateY(0) rotateX(0) translateY(-3px)}
.case-study{margin-top:17px;border-top:1px solid #403037}.case-study summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;padding:14px 0;font:600 14px var(--body);color:#eee}.case-study summary::-webkit-details-marker{display:none}.case-study summary span{color:#e24b59;font-size:22px;transition:rotate .25s}.case-study[open] summary span{rotate:90deg}.case-body{padding:22px;background:linear-gradient(145deg,#21161b,#0f0c0e);border:1px solid #51343f;border-radius:10px;box-shadow:0 14px 25px #0005}.case-body .case-eyebrow{font-size:9px;color:#e26a78;letter-spacing:.14em}.case-body h4{font:600 29px/1.05 var(--display);margin:14px 0 22px}.case-body dl{margin:0 0 18px;display:grid;gap:14px}.case-body dt{font-size:9px;color:#ab7b88;text-transform:uppercase;letter-spacing:.12em}.case-body dd{margin:5px 0 0;font-size:12px;line-height:1.5}.case-body>p:not(.case-eyebrow){line-height:1.8;font-size:12px}.case-cta{display:inline-block;margin-top:20px;font-size:12px;color:#f18794;border-bottom:1px solid #7b3b48;padding-bottom:5px}
@media(max-width:850px){.device-showcase{grid-template-columns:1fr;gap:20px}.device-scene{width:100%;max-width:660px;margin:auto;padding-top:15px}.phone-content>span{font-size:clamp(20px,4vw,34px)}}
@media(max-width:480px){.device-scene{padding-right:30px;padding-bottom:65px}.showcase-phone{border-width:3px;border-radius:17px}.phone-content{gap:8px;border-radius:13px}.phone-content>span{font-size:18px}.phone-content small{font-size:4px}.device-caption{font-size:7px;left:0}.portfolio-toolbar{gap:7px}.portfolio-toolbar button{padding:11px 12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.showcase-laptop,.showcase-phone{animation:none;transform:none}.device-screen,.project-card:hover .device-screen{transform:none}}
body.motion-paused .showcase-laptop,body.motion-paused .showcase-phone{animation:none;transform:none}

.project-status{display:inline-flex;margin:9px 0;padding:6px 11px;border:1px solid #a54c5a;border-radius:20px;background:#35151e;color:#ffb7c2;font:700 10px var(--body);text-transform:uppercase;letter-spacing:.12em}.case-body .case-status{color:#ffb7c2;font-size:12px;margin-bottom:18px}

.service-quote{grid-column:1/-1;color:#f48b98;font-size:12px;padding-top:8px}.quote-selection{margin:0;padding:15px 18px;border-left:3px solid #e84959;background:#2c151c;color:#ffd4da;font-size:13px;line-height:1.6}.quote-selection[hidden]{display:none}