.showcase{height:550vh;margin-top:120px;position:relative}.showcaseSticky{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;height:100vh;padding-top:5vh;display:flex;position:sticky;top:0;overflow:hidden}.showcaseHeader{text-align:center;flex-direction:column;align-items:center;margin-bottom:80px;display:flex}.showcaseTag{letter-spacing:.1em;color:#000;background:#00000014;border-radius:999px;margin-bottom:24px;padding:6px 14px;font-family:AssociateSans,sans-serif;font-size:.9rem;font-weight:500}.showcaseTitle{text-transform:uppercase;color:#000;margin:0;font-family:MarbleDisplayExtraBold,sans-serif;font-size:clamp(2.2rem,4.5vw,5rem);font-weight:800;line-height:.95}.showcaseInner{justify-content:center;align-items:flex-start;gap:40px;width:100%;max-width:1200px;margin:0 auto;padding:0 24px;display:flex}.showcaseAnimIn{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transform:translateY(30px)}.showcaseAnimIn.showcaseVisible{opacity:1;transform:translateY(0)}.showcaseAnimDelay1{transition-delay:.15s}.showcaseLeft{flex-direction:column;flex-shrink:1;gap:12px;width:340px;min-width:0;display:flex}.showcaseRight{flex-shrink:1;align-self:flex-start;width:340px;min-width:0;min-height:340px;position:relative}.showcaseMockup{background-color:#8193d0;border-radius:32px;flex-shrink:0;width:400px;height:500px;position:relative;overflow:hidden}.mockupCloudTop{pointer-events:none;z-index:3;width:100%;position:absolute;top:2.5%;left:50%;transform:translate(-50%)}.mockupCloudBottom{pointer-events:none;z-index:3;width:100%;position:absolute;bottom:2.5%;left:50%;transform:translate(-50%)scaleY(-1)}.skeletonBar{background:#ffffff2e;border-radius:4px}.mockupInner{height:100%;position:relative}.mockupScreen{box-sizing:border-box;flex-direction:column;padding:50px 40px;display:flex;position:absolute;inset:0}.mockupLogoScreen{z-index:1;justify-content:center;align-items:center}.mockupLogo{transform-origin:50%;will-change:transform;width:126px;height:auto;animation:3.5s ease-in-out infinite logoBreathe}@keyframes logoIn{0%{opacity:0;filter:blur(8px);transform:scale(.7)rotate(-8deg)}60%{filter:blur()}to{opacity:.65;filter:blur();transform:scale(1)rotate(0)}}@keyframes logoBreathe{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.04)rotate(1.5deg)}}.mockupJobList{flex-direction:column;flex:1;gap:8px;display:flex}.mockupJobCard{will-change:transform, opacity;background:#ffffff1f;border-radius:14px;flex:1;align-items:center;gap:14px;padding:16px 18px;display:flex;box-shadow:0 2px 6px #0000000f}.mockupJobCardLogo{background:#ffffff2e;border-radius:10px;flex-shrink:0;width:44px;height:44px}.mockupJobCardBody{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.mockupSkeletonTitle{width:68%;height:12px}.mockupSkeletonSub{width:48%;height:9px}.mockupSkeletonRow{gap:8px;display:flex}.mockupSkeletonMeta{width:30%;height:8px}.mockupSkeletonSalary{width:22%;height:8px}@keyframes shimmerOnce{0%{background-position:-200%}to{background-position:200%}}.mockupJobCard.mockupCardAnalyzing .skeletonBar,.mockupJobCard.mockupCardAnalyzing .mockupJobCardLogo{background:linear-gradient(90deg,#ffffff2e 22.5%,#ffffff47 50%,#ffffff2e 72.5%) 0 0/200% 100%;animation:1.2s ease-in-out 5 forwards shimmerOnce}.mockupForm{flex-direction:column;flex:1;gap:8px;display:flex}.mockupFormField{will-change:transform, opacity;background:#ffffff1f;border-radius:14px;flex-direction:column;flex:1;gap:8px;padding:16px 18px;display:flex;box-shadow:0 2px 6px #0000000f}.mockupFormLabel{width:28%;height:8px}.mockupFormField:nth-child(2) .mockupFormLabel{width:40%}.mockupFormField:nth-child(4) .mockupFormLabel{width:20%}.mockupFormInput{background:#ffffff1a;border-radius:4px;height:10px;overflow:hidden}.mockupFormField:nth-child(2) .mockupFormInput{height:8px}.mockupFormField:nth-child(4) .mockupFormInput{height:12px}.mockupFormUpload{flex-direction:row;justify-content:center;align-items:center;gap:12px}.mockupUploadText{flex-direction:column;gap:6px;display:flex}.mockupUploadTextTitle{width:70px;height:9px}.mockupUploadTextSub{width:45px;height:7px}.mockupUploadIcon{width:28px;height:28px}.mockupCheckbox{background:#ffffff0f;border:1.5px solid #ffffff40;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;transition:background .3s,border-color .3s;display:flex}.mockupCheckbox.mockupCheckboxChecked{background:#ffffff4d;border-color:#ffffff73}.mockupCheckboxRow{align-items:center;gap:10px;display:flex}.mockupCheckboxContent{flex-direction:column;flex:1;gap:6px;display:flex}.mockupCheckboxLabel{background:#ffffff1a;border-radius:4px;width:100%;height:10px;overflow:hidden}.mockupCheckboxSub{background:#ffffff1a;border-radius:4px;width:62.5%;height:8px;overflow:hidden}.mockupFormInputFill{background:#ffffff2e;border-radius:4px;width:0;height:100%;transition:width .5s}.mockupFormInputFill.mockupFormInputFilled{width:60%}.mockupFormField:nth-child(2) .mockupFormInputFill.mockupFormInputFilled{width:42.5%}.mockupFormField:nth-child(3) .mockupFormInputFill.mockupFormInputFilled{width:72.5%}.mockupFormField:nth-child(4) .mockupFormInputFill.mockupFormInputFilled{width:32.5%}.mockupFormButton{will-change:transform, opacity;background:#ffffff1f;border-radius:14px;justify-content:center;align-items:center;padding:14px;transition:background .4s;display:flex;box-shadow:0 2px 6px #0000000f}@keyframes clickRipple{0%{opacity:.5;transform:translate(-50%,-50%)scale(.2)}20%{opacity:.2;transform:translate(-50%,-50%)scale(1.2)}32.5%{opacity:.5;transform:translate(-50%,-50%)scale(.2)}60%{opacity:.15;transform:translate(-50%,-50%)scale(1.4)}to{opacity:0;transform:translate(-50%,-50%)scale(1.8)}}.mockupClickCircle{pointer-events:none;z-index:2;opacity:0;background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.mockupClickCircle.mockupClickActive{animation:.8s ease-out forwards clickRipple}@keyframes buttonPress{0%{background:#ffffff1f;transform:scale(1)}30%{background:#ffffff59;transform:scale(.94)}60%{background:#ffffff4d;transform:scale(1.02)}to{background:#ffffff4d;transform:scale(1)}}.mockupFormButton.mockupFormButtonPressed{animation:.5s forwards buttonPress;overflow:visible}.mockupFormButtonBar{width:30%;height:10px}.mockupReviewCard{will-change:transform, opacity;background:#ffffff1f;border-radius:14px;flex-direction:column;padding:10px;display:flex;overflow:hidden;box-shadow:0 2px 6px #0000000f}.mockupReviewHeader{flex:1;align-items:center;gap:12px;min-height:0;padding:14px 18px;display:flex}.mockupPlayButton{background:#fff3;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.mockupPlayButtonPressed{animation:.5s forwards buttonPress;overflow:visible}.mockupReviewContent{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;position:relative;overflow:hidden}.mockupReviewContent .mockupFormField{box-shadow:none;background:0 0;border-radius:0;flex:1;padding:0}.mockupReviewRow{flex-direction:column;gap:6px;display:flex}.mockupPlayerControls{flex-direction:column;flex-shrink:0;gap:8px;padding-top:8px;display:flex}.mockupPlayerBar{background:#ffffff1f;border-radius:2px;height:6px;overflow:hidden}.mockupPlayerProgress{background:#ffffff59;border-radius:2px;width:62.5%;height:100%}.mockupPlayerButtons{justify-content:center;align-items:center;gap:14px;display:flex}.mockupPlayerBtn{background:#ffffff26;border-radius:999px;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.mockupPlayerBtnMain{background:#ffffff38;width:26px;height:26px}.mockupReviewOverlay{-webkit-backdrop-filter:blur(8px);z-index:1;pointer-events:none;background:#8193d040;border-radius:14px;position:absolute;inset:0}.mockupMatchBadge{opacity:0;background:#ffffff38;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;margin-right:6px;transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1);display:flex;transform:scale(.5);box-shadow:0 2px 6px #0000000f}.mockupMatchBadge.mockupMatchBadgeVisible{opacity:1;transform:scale(1)}.mockupMatchBadgeIcon{flex-shrink:0;width:9px;height:9px}.showcaseCardLeft{will-change:transform, opacity;border-radius:24px;flex-direction:column;width:100%;padding:28px;display:flex;position:relative;overflow:hidden}.showcaseCardLeftIcon{position:absolute;right:24px}.showcaseCardLeftContent{will-change:opacity, height;margin-right:48px;overflow:hidden}.showcaseCardLeftFooter{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.showcaseCardTitle{color:#0a0a14;margin:0;font-family:AssociateSans,sans-serif;font-size:1.75rem;font-weight:500;line-height:1.2}.showcaseCardTag{color:#0a0a14;background:#fff9;border-radius:999px;padding:6px 16px;font-family:AssociateSans,sans-serif;font-size:.875rem;font-weight:500;display:inline-block}.showcaseCardRight{will-change:transform, opacity;aspect-ratio:1;border-radius:24px;padding:32px;position:absolute;top:0;left:0;right:0}.showcaseCardText{color:#0a0a14;margin:0;font-family:AssociateSans,sans-serif;font-size:1.5rem;font-weight:400;line-height:1.4}@media (width<=1200px){.showcaseCardTitle{font-size:1.3rem}.showcaseCardText{font-size:1.1rem}}@media (width<=1050px){.showcaseRight{display:none}}@media (width<=1023px){.showcaseRight{display:none}.showcaseMockup{border-radius:28px;width:360px;height:540px}}@media (width<=767px){.showcaseMockup{border-radius:24px;width:280px;height:440px}}@media (width<=650px){.showcaseInner{flex-direction:column;flex:1;align-items:stretch;gap:20px;min-height:0;padding:0 20px}.showcaseLeft{flex-shrink:0;order:1;width:100%;max-width:none}.showcaseMockup{border-radius:24px;flex:1;order:2;width:100%;min-height:0}.showcaseMobileStack{display:grid}.showcaseMobileStack .showcaseCardLeft{grid-area:1/1;transition:opacity .5s}.showcaseCardTitle{font-size:.95rem}.showcaseCardTag{margin-top:20px;font-size:.65rem}.showcaseCardSubtitle{display:none}.showcaseHeader{flex-shrink:0;margin-bottom:28px}.showcaseTitle{font-size:clamp(1.3rem,6vw,1.8rem)}.showcaseTag{padding:4px 10px;font-size:.65rem}.showcaseInner{padding-bottom:36px}.mockupScreen{padding:36px 28px}.mockupJobList,.mockupForm{gap:10px}.mockupJobCard{border-radius:12px;align-items:center;gap:12px;padding:14px 16px}.mockupJobCardLogo{border-radius:8px;width:38px;height:38px}.mockupJobCardBody{justify-content:center}.mockupSkeletonTitle{height:11px}.mockupSkeletonSub{height:8px}.mockupSkeletonMeta,.mockupSkeletonSalary{height:7px}.mockupFormField{border-radius:12px;justify-content:center;padding:14px 16px}.mockupFormLabel{height:7px}.mockupFormInput{height:9px}.mockupFormButton{border-radius:12px;padding:12px}.mockupUploadIcon{width:24px;height:24px}}@media (width<=450px){.mockupScreen{padding:24px 18px}.mockupJobCard{gap:10px;padding:10px 12px}.mockupJobCardLogo{width:30px;height:30px}.mockupFormField{padding:10px 12px}.mockupFormButton{padding:10px}}
