.portfolio-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.site-mockup{background:#fff;border:1px solid #d8e2ef;border-radius:18px;padding:.7rem;box-shadow:0 18px 42px rgba(11,40,96,.12);transition:transform .22s ease,box-shadow .22s ease}
.site-mockup:hover{transform:translateY(-6px);box-shadow:0 25px 52px rgba(11,40,96,.18)}
.browser{overflow:hidden;border:1px solid #ccd8e7;border-radius:11px;background:#f8fafd}
.browser-bar{height:27px;padding:0 10px;display:flex;align-items:center;gap:5px;background:#edf2f8;border-bottom:1px solid #d7e0ea}
.browser-bar i{width:7px;height:7px;border-radius:50%;background:#b5c2d3}
.browser-url{height:12px;flex:1;max-width:165px;margin-left:5px;border-radius:5px;background:#dce5f0}
.mock-screen{height:220px;padding:18px;position:relative;overflow:hidden}
.mock-screen::before,.mock-screen::after{content:"";position:absolute;border-radius:999px;opacity:.3}
.mock-screen::before{width:180px;height:180px;right:-55px;top:-55px;background:#fff}
.mock-screen::after{width:120px;height:120px;left:-55px;bottom:-65px;background:#fff}
.mock-screen[data-kind="ecommerce"]{background:linear-gradient(145deg,#3d256d,#8a50c8)}
.mock-screen[data-kind="restaurant"]{background:linear-gradient(145deg,#5e2418,#b55028)}
.mock-screen[data-kind="property"]{background:linear-gradient(145deg,#0c486d,#48a5c7)}
.mock-screen[data-kind="corporate"]{background:linear-gradient(145deg,#092350,#1e5da4)}
.mock-screen[data-kind="saas"]{background:linear-gradient(145deg,#07585f,#32a888)}
.mock-screen[data-kind="creative"]{background:linear-gradient(145deg,#942b66,#e86b8b)}
.mock-nav{position:relative;z-index:1;display:flex;justify-content:space-between;color:#fff;font-size:.48rem;opacity:.9}
.mock-mark{width:30px;height:7px;border-radius:3px;background:#fff}
.mock-links{display:flex;gap:8px}
.mock-links b{width:15px;height:4px;border-radius:2px;background:rgba(255,255,255,.75)}
.mock-title{position:relative;z-index:1;margin-top:38px;max-width:62%;color:#fff;font-size:1.18rem;font-weight:800;line-height:1.05;letter-spacing:-.04em}
.mock-copy{position:relative;z-index:1;width:48%;height:6px;margin-top:10px;border-radius:3px;background:rgba(255,255,255,.65)}
.mock-copy+div{width:36%;margin-top:6px}
.mock-button{position:relative;z-index:1;width:58px;height:17px;margin-top:15px;border-radius:5px;background:#fff}
.mock-device{position:absolute;z-index:2;right:18px;bottom:0;width:36%;height:142px;padding:7px;border:4px solid rgba(255,255,255,.92);border-bottom:0;border-radius:10px 10px 0 0;background:rgba(7,20,54,.25)}
.mock-device::before{content:"";display:block;height:44px;border-radius:4px;background:rgba(255,255,255,.74)}
.mock-device::after{content:"";display:block;height:9px;margin-top:8px;border-radius:3px;background:rgba(255,255,255,.42);box-shadow:0 16px 0 rgba(255,255,255,.32),0 32px 0 rgba(255,255,255,.24)}
.mock-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem .35rem .25rem}
.mock-meta h2{margin:0;color:#132b52;font-size:1rem}
.mock-meta p{margin:.25rem 0 0;color:#677994;font-size:.84rem}
.mock-chip{color:#1e5ba2;background:#e8f1fc;border-radius:999px;padding:.28rem .58rem;font-size:.7rem;font-weight:800;white-space:nowrap}
@media(max-width:700px){.portfolio-showcase{grid-template-columns:1fr;gap:1.25rem}
.mock-screen{height:205px}
}
@media(max-width:400px){.mock-meta{align-items:flex-start;flex-direction:column;gap:.5rem}
}

/* Detailed website interfaces inside every browser frame. */
.interface-screen{padding:0!important;color:#17233b;font-family:Inter,Arial,sans-serif;background:#fff!important}.interface-screen:before,.interface-screen:after{display:none}.interface-screen button{border:0;font:inherit;cursor:default}.ui-top{height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:5px;background:#fff}.ui-top strong{font-size:9px;letter-spacing:-.08em}.ui-top span{color:#69738a;white-space:nowrap}.ui-top button{padding:4px 7px;border-radius:3px;background:#17233b;color:#fff;font-size:5px}.ui-hero{height:113px;padding:17px 14px;position:relative;overflow:hidden;background:#e7e1d9}.ui-hero small,.ui-dining small,.ui-property-hero small,.ui-corporate small,.ui-creative small{font-size:5px;letter-spacing:.12em;font-weight:800}.ui-hero h3,.ui-dining h3,.ui-property-hero h3,.ui-corporate h3,.ui-creative h3{margin:7px 0 9px;font-size:18px;line-height:.9;letter-spacing:-.07em}.ui-hero button,.ui-dining button{padding:6px 8px;border-radius:3px;background:#1d1b19;color:#fff;font-size:5px}.ui-model{position:absolute;right:20px;bottom:-21px;width:58px;height:112px;border-radius:32px 32px 6px 6px;background:linear-gradient(130deg,#a16d50 0 26%,#263851 27% 58%,#c3a08e 59%);transform:rotate(12deg)}.ui-model:before{content:"";position:absolute;top:-22px;left:15px;width:29px;height:31px;border-radius:50%;background:#8a604c}.ui-products{height:77px;padding:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:#fff}.ui-products div{display:grid;grid-template-columns:1fr auto;gap:2px;font-size:5px}.ui-products i{grid-column:1/-1;height:37px;border-radius:3px;background:#ece7e1}.ui-products div:nth-child(2) i{background:#d1d8d2}.ui-products div:nth-child(3) i{background:#d8c9bd}.ui-products em,.ui-listings em{font-style:normal;color:#6c7482}.ui-dining{height:190px;padding:24px 16px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(125deg,#2c211c,#925337)}.ui-dining h3{font-family:Georgia,serif;font-size:23px;letter-spacing:-.06em}.ui-dining p{width:48%;font-size:6px;line-height:1.55;color:#f3dcca}.ui-dining button{background:#e8ba7b;color:#382016}.ui-plate{position:absolute;right:19px;bottom:18px;width:82px;height:82px;border:8px solid #ead2ae;border-radius:50%;display:grid;place-items:center;color:#d87740;background:#5d3027;font-size:18px}.ui-property-hero{height:109px;padding:18px 14px;color:#fff;background:linear-gradient(110deg,rgba(14,37,58,.84),rgba(37,104,131,.45)),linear-gradient(135deg,#193a4f,#9fc5c4)}.ui-property-hero h3{font-size:18px}.ui-search{margin-top:11px;width:137px;padding:5px 5px 5px 8px;border-radius:3px;background:#fff;color:#718092;font-size:5px}.ui-search button{float:right;padding:4px 7px;margin-top:-4px;border-radius:2px;background:#157499;color:#fff;font-size:5px}.ui-listings{height:81px;padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#f5f7f7}.ui-listings div{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:5px}.ui-listings i{grid-column:1/-1;height:38px;border-radius:3px;background:linear-gradient(145deg,#b3d5e0,#5d8995)}.ui-listings div+div i{background:linear-gradient(145deg,#d7cdb4,#719969)}.ui-corporate{height:190px;padding:27px 16px;color:#fff;background:linear-gradient(130deg,#0a2145 53%,#2762a3 53%)}.ui-corporate h3{font-size:24px}.ui-corporate p{width:52%;font-size:6px;line-height:1.5;color:#c7dbf7}.ui-stat{position:absolute;right:17px;bottom:18px;width:95px;display:grid;grid-template-columns:1fr 1fr;gap:3px;border-top:1px solid #8fb3e3;padding-top:8px}.ui-stat b{font-size:13px}.ui-stat span{font-size:5px;color:#c1d9f7}.ui-app{height:220px;display:grid;grid-template-columns:62px 1fr;background:#f6f8fc}.ui-app aside{padding:13px 8px;display:flex;flex-direction:column;gap:13px;color:#aab4ce;background:#152550;font-size:5px}.ui-app aside strong{color:#fff;font-size:10px;margin-bottom:4px}.ui-app aside span:first-of-type{color:#fff}.ui-app main{padding:14px 13px}.ui-app-head{display:flex;justify-content:space-between;font-size:8px}.ui-app-head button{padding:5px 7px;border-radius:3px;background:#5648df;color:#fff;font-size:5px}.ui-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0}.ui-metrics div,.ui-app section{padding:8px;border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(26,39,82,.07)}.ui-metrics small,.ui-app section small{display:block;color:#7c879e;font-size:5px}.ui-metrics b{display:block;margin:5px 0 2px;font-size:12px}.ui-metrics em{color:#28a475;font-size:5px;font-style:normal}.ui-chart{height:50px;margin-top:6px;padding:4px 3px;display:flex;align-items:end;gap:5px;background:repeating-linear-gradient(to bottom,transparent 0 12px,#eef0f7 13px)}.ui-chart i{flex:1;border-radius:2px 2px 0 0;background:#7469e8}.ui-chart i:nth-child(1){height:18px}.ui-chart i:nth-child(2){height:30px}.ui-chart i:nth-child(3){height:25px}.ui-chart i:nth-child(4){height:40px}.ui-chart i:nth-child(5){height:34px}.ui-chart i:nth-child(6){height:47px}.ui-chart i:nth-child(7){height:43px}.ui-creative-top{height:35px;padding:8px 12px;display:flex;align-items:start;justify-content:space-between;color:#1e1c25;background:#f2eddf}.ui-creative-top strong{font-size:8px;line-height:.72}.ui-creative-top span{font-size:5px}.ui-creative{height:185px;padding:17px 14px;position:relative;background:#f2eddf}.ui-creative h3{font-size:24px}.ui-work-grid{position:absolute;right:13px;bottom:18px;width:110px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.ui-work-grid i{height:37px;background:#fd6d61}.ui-work-grid i:nth-child(2){background:#254dd1}.ui-work-grid i:nth-child(3){height:25px;background:#ffc826}.ui-creative>b{position:absolute;bottom:8px;left:14px;font-size:5px}