.fk-float{animation:fk-float var(--float) ease-in-out var(--delay) infinite}.fk-float-img{width:var(--size);height:var(--size)}@media (width>=768px){.fk-float-img{width:calc(var(--size) * 1.45);height:calc(var(--size) * 1.45)}}@keyframes fk-float{0%,to{translate:0}50%{translate:0 -12px}}@media (prefers-reduced-motion:reduce){.fk-float{animation:none}}@property --pp{syntax:"<percentage>";inherits:true;initial-value:0%}.steps-row{scrollbar-width:none}.steps-row::-webkit-scrollbar{display:none}.steps-card{background-color:var(--surface-2);background-image:radial-gradient(120% 80% at 0% 0%, light-dark(#0000,#ffffff0a), transparent 60%), linear-gradient(160deg, light-dark(transparent,color-mix(in srgb, var(--violet) 8%, var(--bg-2))) 0%, light-dark(transparent,var(--bg-2)) 70%)}.steps-glow{background:radial-gradient(closest-side at 35% 60%, light-dark(color-mix(in srgb, var(--glow-blue) 22%, transparent),color-mix(in srgb, var(--glow-blue) 45%, transparent)), transparent), radial-gradient(closest-side at 65% 50%, light-dark(color-mix(in srgb, var(--glow-pink) 20%, transparent),color-mix(in srgb, var(--glow-pink) 40%, transparent)), transparent);filter:blur(32px);border-radius:50%;inset:18% -25% -35%}.phone{--pp:0%;border-radius:40px 40px 0 0;transition:--pp .9s cubic-bezier(.65,0,.35,1) .35s;box-shadow:0 30px 60px -30px #0b0b128c,inset 0 0 0 1px light-dark(#ffffff14,#ffffff24)}.phone-screen{clip-path:inset(0 round 32px 32px 0 0)}.phone-img,.phone picture{object-fit:cover;object-position:50% 0%;width:100%;height:100%;position:absolute;inset:0}.phone-after{clip-path:inset(0 calc(100% - var(--pp)) 0 0);position:absolute;inset:0}.phone[data-step="2"]{--pp:100%}.phone[data-step="3"]{--pp:50%;transition-delay:0s;animation:3s cubic-bezier(.65,0,.35,1) .6s infinite phone-sweep}@keyframes phone-sweep{0%,to{--pp:50%}35%{--pp:78%}70%{--pp:24%}}.phone-line{inset-block:0;left:var(--pp);opacity:0;background:#fff;width:2px;margin-left:-1px;transition:opacity .3s;position:absolute}.phone[data-step="3"] .phone-line{opacity:1}.phone-handle{color:#0b0b12;background:#fff;border-radius:999px;place-items:center;width:30px;height:30px;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 6px 18px #0000004d}.phone-top{font:600 10px/1.2 var(--font-display);backdrop-filter:blur(10px);background:#00000059;border-radius:999px;padding:4px 10px;position:absolute;top:12px;left:50%;translate:-50%}.phone-label{color:#0b0b12;font:600 11px/1.2 var(--font-display);white-space:nowrap;opacity:0;background:#ffffffeb;border-radius:999px;padding:6px 12px;transition:opacity .3s;position:absolute;bottom:18%;left:50%;translate:-50%}.phone[data-step="1"] .phone-label{opacity:1}.phone-tap{opacity:0;pointer-events:none;background:#ffffff59;border:2px solid #fff;border-radius:999px;width:30px;height:30px;position:absolute}.phone-tap-photo{margin:-15px 0 0 -15px;top:32%;left:50%}.phone-tap-chip{margin:-15px 0 0 -15px;top:50%;left:50%}.phone[data-step="1"] .phone-tap-photo,.phone[data-step="2"] .phone-tap-chip{animation:.9s ease-out .25s both phone-tap}@keyframes phone-tap{0%{opacity:0;scale:.4}30%{opacity:1}to{opacity:0;scale:1.8}}.phone-chips{inset-inline:0;transition:translate .45s var(--ease-out-soft);background:linear-gradient(#0000,#000000b3);gap:5px;padding:32px 10px 14px;display:flex;position:absolute;bottom:0;overflow:hidden;translate:0 100%;-webkit-mask-image:linear-gradient(90deg,#000 80%,#0000);mask-image:linear-gradient(90deg,#000 80%,#0000)}.phone[data-step="2"] .phone-chips,.phone[data-step="3"] .phone-chips{translate:0}.phone-chip{font:500 11px/1.2 var(--font-sans);white-space:nowrap;backdrop-filter:blur(10px);background:#ffffff24;border:1px solid #ffffff4d;border-radius:999px;flex-shrink:0;padding:5px 10px;position:relative}.phone[data-step="2"] .phone-chip.is-picked,.phone[data-step="3"] .phone-chip.is-picked{color:#0b0b12;background:#fff;transition:background .2s .5s,color .2s .5s}.phone-tags{top:40px;font:600 9px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;opacity:0;justify-content:space-between;transition:opacity .3s;display:flex;position:absolute;inset-inline:10px}.phone-tags>span{background:#0006;border-radius:999px;padding:4px 7px}.phone[data-step="3"] .phone-tags{opacity:1}@media (prefers-reduced-motion:reduce){.phone,.phone[data-step="3"]{transition:none;animation:none}.phone-tap{animation:none!important}.phone-chips,.phone-chip{transition:none!important}}@property --p{syntax:"<percentage>";inherits:true;initial-value:0%}.reel-slide[data-state=idle]{display:none}.reel-slide{opacity:0;transition:opacity .26s}.reel-slide.is-active{opacity:1;animation:reel-wipe var(--slide-ms) linear both}.reel-img{object-fit:cover;object-position:50% 0%;width:100%;height:100%}.reel-slide picture{position:absolute;inset:0}.reel-after{clip-path:inset(0 calc(100% - var(--p)) 0 0);position:absolute;inset:0}.reel-line{inset-block:0;left:var(--p);width:2px;box-shadow:0 0 18px 4px color-mix(in srgb, var(--glow-blue) 80%, transparent), 0 0 40px 10px color-mix(in srgb, var(--glow-pink) 45%, transparent);opacity:0;background:#fff;margin-left:-1px;position:absolute}.reel-slide.is-active .reel-line{animation:reel-line var(--slide-ms) linear both}.reel-slide.is-active .reel-caption{animation:reel-caption var(--slide-ms) linear both}.reel-final{z-index:15;pointer-events:none}.reel-final [data-store]{pointer-events:auto}.reel-final:not(.is-active) [data-store]{visibility:hidden}.reel-seg[data-state=done] i{transform:scaleX(1)}.reel-seg[data-state=todo] i{transform:scaleX(0)}.reel-seg[data-state=active] i{animation:reel-progress var(--slide-ms) linear both}.reel.is-paused *,.reel.is-holding *{animation-play-state:paused!important}.reel.is-holding .reel-slide.is-active .reel-after,.reel.is-holding .reel-slide.is-active .reel-line{visibility:hidden}.reel .reel-icon-play,.reel.is-paused .reel-icon-pause{display:none}.reel.is-paused .reel-icon-play{display:block}@media (width>=48rem){.fk-hero{--story-h:clamp(440px, calc(100svh - 240px), 560px);background:radial-gradient(1200px 520px at 50% -180px, var(--surface) 0%, transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 55%, var(--bg)) 0%, var(--bg) 60%)}.fk-phone{z-index:10;height:var(--story-h);aspect-ratio:3/5;box-shadow:0 0 0 1px light-dark(#0b0b1214,#ffffff14), inset 0 1px 0 light-dark(#fff,#ffffff1f), 0 30px 60px -28px #0b0b1273, 0 60px 120px -40px color-mix(in srgb, var(--violet) 45%, transparent);background:linear-gradient(light-dark(#ffffffe6,#ffffff24),light-dark(#ffffff8c,#ffffff0f));border-radius:31px;padding:7px;position:absolute;top:0;left:50%;translate:-50%}.fk-phone .reel-slide:not(.reel-final):after{content:"";pointer-events:none;background:linear-gradient(#0000,#0000006b 50%,#00000080);position:absolute;inset:45% 0 0}.fk-aura{filter:blur(30px);background:radial-gradient(closest-side at 38% 46%, light-dark(color-mix(in srgb, var(--glow-blue) 47%, transparent),color-mix(in srgb, var(--grad-from) 30%, transparent)), transparent), radial-gradient(closest-side at 64% 54%, light-dark(color-mix(in srgb, var(--glow-pink) 38%, transparent),color-mix(in srgb, var(--grad-to) 24%, transparent)), transparent), radial-gradient(closest-side at 50% 40%, light-dark(color-mix(in srgb, var(--grad-via) 24%, transparent),color-mix(in srgb, var(--grad-via) 20%, transparent)), transparent 80%);width:1100px;height:760px;position:absolute;translate:-50% -50%}.fk-rings{width:2000px;height:2000px;position:absolute;translate:-50% -50%;-webkit-mask:radial-gradient(closest-side,#000 30%,#0000 92%);mask:radial-gradient(closest-side,#000 30%,#0000 92%)}.fk-rings>circle{fill:none;stroke:light-dark(color-mix(in srgb, var(--violet) 11%, transparent),color-mix(in srgb, var(--violet) 13%, transparent))}.fk-rings>circle.dash{stroke-dasharray:2 7;stroke:light-dark(color-mix(in srgb, var(--violet) 16%, transparent),color-mix(in srgb, var(--violet) 20%, transparent))}.fk-orbit{transform-origin:1000px 1000px;animation:70s linear infinite fk-spin}.fk-orbit-b{animation-duration:110s;animation-direction:reverse}:root[data-motion=paused] .fk-orbit{animation-play-state:paused}}@keyframes fk-spin{to{transform:rotate(360deg)}}.fk-slot{--cw:clamp(168px, 14vw, 212px);width:var(--cw);will-change:transform;position:absolute;top:0;left:50%}.fk-card{aspect-ratio:4/5;cursor:pointer;opacity:0;width:100%;box-shadow:0 0 0 1px #0b0b120f, 0 2px 6px -2px #0b0b121f, 0 24px 48px -22px color-mix(in srgb, var(--violet) 30%, #0000006b);transition:transform .65s var(--ease-out-soft), box-shadow .4s ease, opacity .6s ease;border-radius:20px;display:block;position:relative}.fk-card.is-in{opacity:1}.fk-card:after{content:"";z-index:-1;background:var(--grad);opacity:0;border-radius:23px;transition:opacity .3s;position:absolute;inset:-3px}.fk-card-media{border-radius:inherit;background:var(--bg-2);position:absolute;inset:0;overflow:hidden}.fk-card-media picture,.fk-card-media img{width:100%;height:100%;display:block}.fk-card-media>picture img{transition:transform .9s var(--ease-out-soft)}.fk-card-media:after{content:"";border-radius:inherit;background:linear-gradient(#0000 58%,#0000006b);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff59}.fk-card-before{z-index:2;border-radius:50%;width:42px;height:42px;position:absolute;top:10px;right:10px;overflow:hidden;box-shadow:0 0 0 2px #fff,0 4px 10px #00000040}.fk-card-before picture{width:100%;height:100%;display:block}.fk-card-label{z-index:2;color:#fff;white-space:nowrap;backdrop-filter:blur(12px);background:#ffffff2e;border-radius:999px;align-items:center;gap:6px;padding:5px 11px 5px 9px;font-size:12.5px;font-weight:600;display:inline-flex;position:absolute;bottom:10px;left:10px;box-shadow:inset 0 0 0 1px #ffffff38}.fk-card-label:before{content:"";background:#ffffffb3;border-radius:50%;width:6px;height:6px;transition:background .2s}.fk-card-prog{z-index:2;opacity:0;border-radius:2px;height:2px;transition:opacity .2s;position:absolute;bottom:4px;left:12px;right:12px;overflow:hidden}.fk-card-prog i{transform-origin:0;background:#fff;height:100%;display:block;transform:scaleX(0)}.fk-card:hover{transform:translateY(-8px)}.fk-card:hover .fk-card-media>picture img{transform:scale(1.04)}.fk-card.is-active{box-shadow:0 0 0 1px #0b0b120a, 0 30px 60px -20px color-mix(in srgb, var(--violet) 55%, transparent);transform:translateY(-20px)scale(1.05)}.fk-card.is-active:after,.fk-card.is-active .fk-card-prog{opacity:1}.fk-card.is-active .fk-card-label{color:#0b0b12;background:#fffffff2}.fk-card.is-active .fk-card-label:before{background:var(--grad)}.fk-card.is-active .fk-card-prog i{animation:reel-progress var(--slide-ms) linear both}.fk-hero:has(.reel.is-paused) .fk-card-prog i,.fk-hero:has(.reel.is-holding) .fk-card-prog i{animation-play-state:paused}.fk-slot-l .fk-card-before{left:10px;right:auto}.fk-slot-r .fk-card-label{left:auto;right:10px}@keyframes reel-wipe{0%,16%{--p:0%;animation-timing-function:cubic-bezier(.65,0,.35,1)}40%,to{--p:100%}}@keyframes reel-line{0%,15%{opacity:0}18%,38%{opacity:1}43%,to{opacity:0}}@keyframes reel-caption{0%{opacity:0;translate:0 14px}7%,to{opacity:1;translate:0}}@keyframes reel-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.reel-slide.is-active{--p:100%;animation:none}}
