html.lenis{scroll-behavior:auto!important}
.project-card,.demo-card{position:relative;isolation:isolate;display:grid;box-sizing:border-box;color:var(--text);text-decoration:none;background:linear-gradient(115deg,#152941,#101b2b 40%,#0d1726);clip-path:polygon(18px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 18px),calc(100% - 18px) 100%,28px 100%,0 calc(100% - 28px),0 18px);transform-origin:center;transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s}
.project-card{height:460px;padding:31px 33px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:34px}
.project-copy{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:8px 5px 8px 3px}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7186a3}
.project-meta span{display:block;margin-top:8px;font-size:12px;line-height:1.55;letter-spacing:0;text-transform:none;color:#a6b8d0}
.project-summary h3{font-size:28px;line-height:1.18;font-weight:500;letter-spacing:-.02em;margin:0 0 18px;color:#edf4ff}
.project-summary p{font-size:16px;line-height:1.6;margin:0 0 24px;color:#b3c5de}
.project-chips,.demo-copy .case-tag{display:flex;gap:8px;flex-wrap:wrap}
.project-chips .tag,.demo-copy .tag{font-size:11px;line-height:1.3;padding:7px 11px;border:1px solid #7eafff45;color:#b9d3f8;background:#17283f;border-radius:0;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.project-media{height:398px;border-radius:12px;border:1px solid #8fbcff35;background:#101b2b;box-sizing:border-box}
.collection-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.collection-frame .outer{stroke:#86b5f5;stroke-opacity:.6}.collection-frame .inner{stroke:#86b5f5;stroke-opacity:.17;stroke-width:.7}.collection-frame .accent{stroke:#a6cbff;stroke-width:1.6;stroke-opacity:.8}
.project-card:hover,.project-card:focus-visible,.demo-card:focus-within{transform:scale(1.012)}
.project-card:focus-visible{outline:2px solid #9dc7ff;outline-offset:5px}
.demo-card{height:438px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px;padding:34px;align-items:center}
.demo-copy h2{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1.12;margin:0 0 15px}
.demo-copy .featured-brief{font-size:15px;line-height:1.6;margin:20px 0;color:#b3c3d9}
.demo-copy .featured-role{padding:16px 0 0;border:0;border-top:1px solid #8fbcff22;background:none;border-radius:0}
.demo-copy .featured-role-label{font-size:10px;letter-spacing:.1em;color:#7f95b2;text-transform:uppercase}
.demo-copy .featured-role strong{font-size:13px;margin:7px 0;display:block;color:#d2e1f6}
.demo-copy .featured-role p{font-size:13px;line-height:1.55;color:#9badc6;margin:0}
.demo-media{width:100%;aspect-ratio:16/9;border:1px solid #8fbcff35;border-radius:12px;overflow:hidden}
.demo-media iframe{display:block;width:100%;height:100%;border:0}
.ui-preview{position:relative;overflow:hidden;pointer-events:none}.preview-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}.preview-canvas{position:absolute;width:1440px;height:1000px;transform-origin:0 0}.preview-canvas iframe{width:1440px;height:1000px;border:0;display:block;pointer-events:none}
@media(max-width:900px){.project-card{height:auto;min-height:550px;grid-template-columns:1fr;padding:24px 20px 26px;gap:24px}.project-media{height:240px;grid-row:1}.project-copy{gap:26px;padding:0 5px}.project-summary h3{font-size:25px;margin-bottom:14px}.project-summary p{font-size:15px;margin-bottom:20px}.project-meta{gap:18px}.demo-card{height:auto;min-height:627px;grid-template-columns:1fr;padding:20px;gap:26px}.demo-card:nth-child(2){min-height:658px}.demo-media{grid-row:1}.demo-copy h2{font-size:30px}.demo-copy .featured-role{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.project-card,.demo-card{transition:none}.project-card:hover,.project-card:focus-visible,.demo-card:focus-within{transform:none}}

.project-card + .project-card{margin-top:28px}

.demo-card + .demo-card{margin-top:28px}

.project-card::before,.demo-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 80% 100%,#5b9bff35,transparent 65%);opacity:0;transition:opacity .3s ease}
.project-card:hover::before,.project-card:focus-visible::before,.demo-card:focus-within::before{opacity:1}
.project-copy,.project-media,.demo-copy,.demo-media{position:relative;z-index:1}
.collection-frame{fill:none;stroke:#91b6ed;stroke-width:1}
.collection-frame path{vector-effect:non-scaling-stroke}
.collection-frame .outline{stroke:#91b6ed;stroke-opacity:1}
.collection-frame .inner{stroke:#8fbcff;stroke-opacity:.23;stroke-width:.7}
.collection-frame .brackets{stroke:#8fbcff;stroke-width:2.5}
.collection-frame .etch{stroke-opacity:.5;stroke-width:1.3}
.project-card:hover .collection-frame,.project-card:focus-visible .collection-frame,.demo-card:focus-within .collection-frame{filter:drop-shadow(0 0 4px #5b9bff66)}
.project-copy{justify-content:flex-start;padding-top:12px;padding-bottom:12px}
.project-meta{margin-top:auto;padding-top:24px;border-top:1px solid #8fbcff22}
.project-summary{margin-bottom:24px}
.project-summary h3{font-size:28px;line-height:1.2}
@media(max-width:900px){.project-copy{gap:0}.project-summary{margin-bottom:22px}.project-meta{padding-top:18px}.project-summary h3{font-size:25px}}