@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:#1a1a1a;font-family:Inter,system-ui,sans-serif;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}.xnav{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:1000;width:calc(100% - 40px);max-width:1300px;background:#141414bf;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:50px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:2rem}.xnav-logo{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;color:#111;flex-shrink:0}.xnav-links{display:flex;align-items:center;gap:3rem;flex:1;justify-content:center}.xnav-links a{color:#ffffffbf;text-decoration:none;font-size:1rem;transition:color .2s;white-space:nowrap}.xnav-links a:hover{color:#fff}.xnav-plus{margin-left:3px;opacity:.7}.xnav-cta{display:flex;align-items:center;gap:12px;background:#fff;color:#000;text-decoration:none;font-size:1rem;font-weight:600;padding:12px 16px 12px 22px;border-radius:50px;white-space:nowrap;transition:background .2s;flex-shrink:0}.xnav-cta:hover{background:#e0e0e0}.xnav-arrow{width:36px;height:36px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}.our-work-heading{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:130px 40px 32px;text-align:center}.our-work-static{display:none}.gooey-word-wrap{position:relative;display:inline-block;filter:url(#gooey-threshold);width:680px;height:110px}.gooey-word{font-size:clamp(3.5rem,9vw,8rem);font-weight:900;letter-spacing:-4px;line-height:1;color:#fff;white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content}.accordion-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 40px 80px}.accordion{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;width:100%}.panel{position:relative;height:360px;width:200px;border-radius:22px;overflow:hidden;cursor:pointer;flex-shrink:0;opacity:0;transition:width .65s cubic-bezier(.77,0,.18,1),filter .5s ease,transform .65s cubic-bezier(.77,0,.18,1),opacity .8s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}.panel:nth-child(1){transform:translate(-160px) translateY(80px)}.panel:nth-child(2){transform:translate(-80px) translateY(35px)}.panel:nth-child(3){transform:translateY(80px)}.panel:nth-child(4){transform:translate(80px) translateY(35px)}.panel:nth-child(5){transform:translate(160px) translateY(80px)}.panel.visible{opacity:1}.panel.visible:nth-child(1){transform:translateY(80px)}.panel.visible:nth-child(2){transform:translateY(35px)}.panel.visible:nth-child(3){transform:translateY(0)}.panel.visible:nth-child(4){transform:translateY(35px)}.panel.visible:nth-child(5){transform:translateY(80px)}.accordion:has(.panel:hover) .panel.visible:not(:hover){filter:brightness(.28) saturate(.3);width:130px}.panel.visible:hover{width:440px!important;filter:brightness(1.05) saturate(1.1)!important;transform:translateY(-16px)!important;z-index:10;box-shadow:0 40px 100px #0000008c}.panel-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transition:transform .65s cubic-bezier(.77,0,.18,1)}.panel:hover .panel-bg{transform:scale(1.06)}.panel-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,#000000e6,#00000073 55%,#0000001a);transition:opacity .4s}.panel:hover .panel-overlay{opacity:.88}.panel-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ffffff80;writing-mode:vertical-rl;transition:opacity .25s ease;pointer-events:none}.panel:hover .panel-label{opacity:0}.panel-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;pointer-events:none}.panel-num{font-family:Space Mono,monospace;font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#c9a96ed9;margin-bottom:8px;opacity:0;transform:translateY(6px);transition:opacity .3s ease .05s,transform .3s ease .05s}.panel:hover .panel-num{opacity:1;transform:translateY(0)}.panel-title{font-size:1.55rem;font-weight:800;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;transition:max-width .55s cubic-bezier(.77,0,.18,1) .07s,opacity .3s ease .09s}.panel:hover .panel-title{max-width:440px;opacity:1}.panel-desc{font-size:.78rem;color:#ffffff8c;line-height:1.65;margin-top:7px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease .12s,opacity .3s ease .12s}.panel:hover .panel-desc{max-height:60px;opacity:1}.panel-actions{display:flex;gap:8px;margin-top:14px;opacity:0;transform:translateY(5px);transition:opacity .3s ease .18s,transform .3s ease .18s;pointer-events:all}.panel:hover .panel-actions{opacity:1;transform:translateY(0)}.panel-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;background:#c9a96ef2;color:#111;border-radius:99px;font-size:.76rem;font-weight:800;text-decoration:none;transition:background .2s,transform .15s}.panel-btn:hover{background:#fff;transform:scale(1.04)}.panel-tag{position:absolute;top:16px;right:16px;background:#ffffff12;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:99px;opacity:0;transform:translateY(-5px);transition:opacity .3s ease .1s,transform .3s ease .1s}.panel:hover .panel-tag{opacity:1;transform:translateY(0)}.panel-index{position:absolute;top:16px;left:16px;font-family:Space Mono,monospace;font-size:.62rem;font-weight:700;color:#ffffff59;transition:color .3s}.panel:hover .panel-index{color:#c9a96ee6}#demo-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#000000f0;align-items:center;justify-content:center}#demo-modal.open{display:flex;animation:modalIn .3s cubic-bezier(.22,1,.36,1)}@keyframes modalIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}#demo-modal-inner{position:relative;width:92vw;height:90vh;border-radius:14px;overflow:hidden;box-shadow:0 50px 150px #000000e6;border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column}.demo-browser-bar{background:#1c1c1c;border-bottom:1px solid rgba(255,255,255,.06);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0}.demo-browser-dots{display:flex;gap:6px}.demo-browser-dot{width:12px;height:12px;border-radius:50%}.demo-browser-dot:nth-child(1){background:#ff5f57}.demo-browser-dot:nth-child(2){background:#febc2e}.demo-browser-dot:nth-child(3){background:#28c840}.demo-browser-url{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:5px 12px;font-family:Space Mono,monospace;font-size:.68rem;color:#ffffff59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-browser-close{width:30px;height:30px;border-radius:50%;background:#ffffff12;border:1px solid rgba(255,255,255,.1);color:#ffffff80;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex-shrink:0}.demo-browser-close:hover{background:#ffffff24;color:#fff}#demo-modal iframe{flex:1;width:100%;border:none;display:block}#demo-modal-loader{position:absolute;right:0;bottom:0;left:0;top:41px;background:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s}#demo-modal-loader.hidden{opacity:0;pointer-events:none}.loader-spinner{width:32px;height:32px;border:2px solid rgba(255,255,255,.08);border-top-color:#c9a96ecc;border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loader-text{font-family:Space Mono,monospace;font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:#ffffff40}@media (max-width: 900px){.xnav-links{display:none}.panel{height:280px;width:150px}.panel.visible:hover{width:320px!important}.accordion-wrap{padding:90px 16px 40px}}@media (max-width: 600px){.panel{height:240px;width:110px}.panel.visible:hover{width:260px!important}}