.portfolio{background:radial-gradient(ellipse at 90% 0,#6e399b14,transparent 65%),#100b19}
.cases-heading{max-width:880px}.cases-heading>p:last-child{max-width:640px;color:#b6a9c5;font-size:18px;line-height:1.7;margin:24px 0 0}
.case-filters{display:flex;gap:10px;flex-wrap:wrap;margin:38px 0 34px}.case-filters button,.case-more{font:inherit;color:#d4c2e6;border:1px solid #aa7cd43d;border-radius:30px;background:transparent;padding:12px 22px;cursor:pointer;font-size:14px}.case-filters button[aria-pressed=true]{background:#a771e3;color:#120c1b;border-color:#a771e3;font-weight:650}.case-filters button:hover,.case-more:hover{border-color:#c59af0}.portfolio button:focus-visible,.case-dialog a:focus-visible,.case-dialog button:focus-visible{outline:2px solid #ddc1ff;outline-offset:5px}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 26px}.case-card[hidden],.case-more[hidden]{display:none}.case-open{display:block;width:100%;border:0;background:none;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}.case-visual{display:block;position:relative;overflow:hidden;border-radius:16px;background:#23182f;border:1px solid #ffffff14}.case-image-window{display:block;aspect-ratio:4/5;overflow:hidden}.case-image-window img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .6s ease}.case-open:hover .case-image-window img{transform:scale(1.025)}.case-view{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;padding:13px 17px;border:1px solid #ffffff26;border-radius:10px;background:#100b19df;backdrop-filter:blur(12px);font-size:13px;color:#fff}.case-caption{display:block;padding:19px 2px 0}.case-kind{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#af87d2;margin-bottom:8px}.case-name{display:block;font-size:22px;line-height:1.3;letter-spacing:-.025em;color:#f0e9f7}.case-status{font-size:13px;color:#a796b8;margin:26px 0 0}.case-more{display:block;margin:22px auto 0}.case-browser{display:block;height:30px;padding:8px 13px;font-size:9px;letter-spacing:4px;color:#8c799e;background:#21192c}.case-website .case-image-window{aspect-ratio:4/5}.case-website img{height:auto;min-height:100%;object-fit:initial;transition:transform 7s ease-in-out}.case-open:hover .case-website img,.case-open:focus-visible .case-website img{transform:translateY(calc(-100% + var(--case-window,440px)))}
.case-dialog{color:#f2eaf9;background:#130e1c;border:1px solid #ae84d144;border-radius:20px;padding:0;width:min(1000px,92vw);max-height:90vh;overflow:auto}.case-dialog::backdrop{background:#08060cda;backdrop-filter:blur(6px)}.case-dialog-inner{padding:30px}.case-dialog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.case-dialog h2{font-size:clamp(26px,4vw,42px);line-height:1.15;margin:8px 0 20px}.case-dialog p{color:#b8aac7;line-height:1.7;max-width:700px}.case-close{border:1px solid #ffffff33;border-radius:50%;width:38px;height:38px;background:transparent;color:#fff;font-size:25px;cursor:pointer;flex-shrink:0}.case-detail-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}.case-detail-images img{width:100%;height:auto;max-height:65vh;object-fit:contain;background:#20182b;border-radius:12px}.case-links{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.case-links a{border:1px solid #b485d755;border-radius:24px;padding:11px 17px;font-size:14px;color:#e1c9f7;text-decoration:none}.case-links a:first-child{background:#b385df;color:#130d1b}.case-dialog[open]{animation:case-in .2s ease-out}@keyframes case-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.case-name{font-size:20px}}
@media(max-width:560px){.case-grid{grid-template-columns:1fr;gap:28px}.cases-heading>p:last-child{font-size:16px}.case-filters{gap:8px;margin:26px 0}.case-filters button{padding:10px 15px;font-size:13px}.case-dialog-inner{padding:22px}.case-detail-images{grid-template-columns:1fr}.case-name{font-size:22px}}
@media(prefers-reduced-motion:reduce){.case-image-window img,.case-website img{transition:none}.case-dialog[open]{animation:none}}