.back{display:inline-flex;align-items:center;gap:10px;min-height:40px;align-self:flex-start;padding:0 16px 0 12px;border-radius:999px;color:var(--text);text-decoration:none;font-size:14.5px;font-weight:500}
.back:hover{color:var(--text)}
.proj-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:18px 0;padding:20px 22px;border-radius:22px}
.meta > div{padding:0 22px;box-shadow:-1px 0 0 var(--line-2)}
.meta > div:first-child{padding-left:0;box-shadow:none}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:clamp(24px,3vw,34px);border-radius:26px}
.cols4 > div{padding:0 26px}
.cols4 > div:first-child{padding-left:0}
.cols4 > div:last-child{padding-right:0}
.cols4 > div + div{box-shadow:-1px 0 0 var(--line-2)}
.tech{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));align-items:center;gap:18px 26px;padding:22px clamp(22px,3vw,34px);border-radius:26px}
.result{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center}
.fade-img{display:block;width:100%;height:auto;aspect-ratio:745 / 630;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 58% 52% at 54% 52%,#000 52%,transparent 98%);mask-image:radial-gradient(ellipse 58% 52% at 54% 52%,#000 52%,transparent 98%)}
.dev{position:relative;min-width:0}
.lap{position:relative;width:88%}
.lap-scr{border-radius:14px 14px 4px 4px;background:#0c0e12;padding:2.2% 2.2% 2.6%;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,var(--lg-shadow),0 40px 70px -30px rgba(0,0,0,.55)}
.lap-scr img{display:block;width:100%;aspect-ratio:1440 / 900;object-fit:cover;border-radius:6px}
.lap-base{height:clamp(8px,1.1vw,14px);margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(#cfd3d9,#9aa0aa);box-shadow:0 18px 30px -14px rgba(0,0,0,.5)}
.pho{position:absolute;right:0;bottom:-4%;width:25%;border-radius:clamp(16px,2.4vw,30px);background:#0c0e12;padding:2.6%;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 30px 50px -20px rgba(0,0,0,.65)}
.pho img{display:block;width:100%;aspect-ratio:390 / 844;object-fit:cover;border-radius:clamp(12px,1.9vw,24px)}
.pho::after{content:"";position:absolute;top:3.4%;left:50%;width:30%;height:2.2%;transform:translateX(-50%);border-radius:99px;background:#0c0e12}
.concept-note{font-size:13px;line-height:1.5;color:var(--text-3)}
.next{display:flex;align-items:center;gap:24px;padding:14px 22px 14px 14px;border-radius:26px;text-decoration:none;color:var(--text);transition:transform .25s}
.next:hover{transform:translateY(-3px);color:var(--text)}
.arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--text);flex:none;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s}
.next:hover .arrow{background:var(--btn-grad);color:var(--btn-text);box-shadow:none}
@media (max-width:1100px){.cols4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;column-gap:28px}.cols4 > div{padding:0 !important;box-shadow:none !important}.tech{grid-template-columns:repeat(3,minmax(0,1fr))}.tech > :first-child{grid-column:1 / -1}}
@media (max-width:960px){.proj-top,.result{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.cols4{grid-template-columns:minmax(0,1fr)}.tech{grid-template-columns:repeat(2,minmax(0,1fr))}.meta{grid-template-columns:minmax(0,1fr)}.meta > div{padding:0 !important;box-shadow:none !important}.next img{display:none !important}}
.lap,.pho{animation:rise .9s .35s cubic-bezier(.2,.8,.2,1) backwards}.pho{animation-name:pop;animation-delay:.7s}
.dev .lap{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.dev:hover .lap{transform:translateY(-4px)}
.lap-scr img,.pho img{height:auto}

@media (max-width:960px){.dev{padding-inline:2%}}
@media (max-width:420px){.next{gap:14px;padding:12px 14px 12px 12px}.meta{padding:18px}}