.real-case-cover{position:absolute;inset:0;padding:46px 42px 38px;background:linear-gradient(135deg,color-mix(in srgb,var(--case-accent) 86%,#fff 14%),var(--case-accent));overflow:hidden}
.real-case-cover:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#00000012 1px,transparent 1px),linear-gradient(90deg,#00000012 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 84%)}
.real-case-cover:after{content:"";position:absolute;width:210px;height:210px;border:2px solid #111;border-radius:50%;right:-70px;bottom:-90px;box-shadow:0 0 0 16px #ffffff1c,0 0 0 17px #111}
.real-browser{position:relative;z-index:1;width:86%;height:82%;background:#111418;color:#f6f5f0;border:2px solid #111;box-shadow:18px 18px 0 #ffffff52;transform:rotate(-1.7deg)}
.real-browser-bar{height:35px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid #ffffff26;background:#1d2127}
.real-browser-bar i{width:7px;height:7px;border-radius:50%;background:var(--case-accent)}
.real-browser-bar i:nth-child(2){opacity:.7}.real-browser-bar i:nth-child(3){opacity:.4}
.real-browser-bar span{margin-left:8px;font:500 8px/1.2 monospace;letter-spacing:.08em;color:#ffffff8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.real-browser-body{height:calc(100% - 35px);display:flex;flex-direction:column;justify-content:space-between;padding:28px 30px 25px;background:radial-gradient(circle at 90% 15%,color-mix(in srgb,var(--case-accent) 36%,transparent) 0 13%,transparent 14%),linear-gradient(155deg,#171b20,#0c0e11)}
.real-browser-body small{font:700 8px/1.3 monospace;letter-spacing:.16em;color:var(--case-accent)}
.real-browser-body strong{max-width:88%;font-size:clamp(24px,3vw,43px);line-height:.96;text-transform:uppercase;letter-spacing:-.045em}
.real-browser-body>div{display:flex;gap:7px;flex-wrap:wrap}.real-browser-body span{border:1px solid #ffffff38;padding:5px 8px;font:600 7px/1 monospace;letter-spacing:.1em}
.real-live{position:absolute;z-index:2;right:24px;bottom:21px;background:#111;color:#fff;padding:9px 12px;font-size:10px;transform:rotate(3deg);box-shadow:5px 5px 0 #ffffff80}
.real-case-cover-brand .real-browser-body{background:radial-gradient(circle at 85% 15%,#ffffff1c 0 13%,transparent 14%),linear-gradient(155deg,#2a141e,#120d11)}
.real-case-cover-shop .real-browser-body{background:radial-gradient(circle at 85% 15%,#ffffff1c 0 13%,transparent 14%),linear-gradient(155deg,#1e241b,#0c100b)}
.single-visual .real-case-cover{position:relative;height:100%;padding:58px 7%}.single-visual .real-browser{width:82%;height:85%}.single-visual .real-browser-body{padding:45px}.single-visual .real-browser-body strong{font-size:clamp(40px,6vw,76px)}
@media(max-width:700px){.real-case-cover{padding:40px 28px 34px}.real-browser{width:91%;height:83%;box-shadow:12px 12px 0 #ffffff52}.real-browser-body{padding:24px 22px 20px}.real-browser-body strong{font-size:clamp(25px,8vw,39px)}.real-live{right:16px;bottom:16px}.single-visual .real-case-cover{padding:38px 24px}.single-visual .real-browser{width:91%;height:84%}.single-visual .real-browser-body{padding:25px 22px}.single-visual .real-browser-body strong{font-size:clamp(28px,9vw,43px)}}