.cm{--accent:#1d4ed8;--cm-ease:cubic-bezier(.2, .7, .2, 1);--mx:0;--my:0;isolation:isolate;background:radial-gradient(120% 90% at 30% 20%,#fff,color-mix(in srgb,var(--accent) 5%,#f7f8fb) 55%,color-mix(in srgb,var(--accent) 10%,#eef1f7));position:absolute;inset:0;overflow:hidden;container-type:inline-size}.cm-bg{z-index:0;pointer-events:none;position:absolute;inset:0}.cm-blob{transition:transform .9s var(--cm-ease);border-radius:46% 54% 60% 40%/50% 42% 58% 50%;position:absolute}.cm-blob.is-brand{background:radial-gradient(closest-side,color-mix(in oklab,var(--brand,#1d4ed8) 18%,transparent),transparent);width:58cqw;height:46cqw;top:-10cqw;right:-8cqw}.cm-blob.is-accent{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);width:40cqw;height:34cqw;bottom:-14cqw;left:-10cqw}.cm-dots{background-image:radial-gradient(color-mix(in oklab,var(--brand,#1d4ed8) 30%,transparent) 1.4px,transparent 1.6px);background-size:1.2cqw 1.2cqw;width:12cqw;height:8cqw;position:absolute}.cm-layer{transition:transform .7s var(--cm-ease),translate .5s var(--cm-ease),box-shadow .7s var(--cm-ease),opacity .4s var(--cm-ease);will-change:transform;position:absolute}.cm-laptop{object-fit:contain;z-index:1;width:100%;height:100%;transform-origin:var(--lo,50% 55%);translate:calc(var(--mx) * -.5cqw) calc(var(--my) * -.35cqw);inset:0}.cm-phone{--w:19cqw;z-index:2;width:var(--w);aspect-ratio:71.6/147.6;border-radius:calc(var(--w) * .17);padding:calc(var(--w) * .028);box-shadow:0 calc(var(--w) * .16) calc(var(--w) * .22) calc(var(--w) * -.09) #141e3c73,0 calc(var(--w) * .05) calc(var(--w) * .08) calc(var(--w) * -.04) #141e3c40;transform:rotate(var(--r,0deg));translate:calc(var(--mx) * 1.1cqw) calc(var(--my) * .8cqw);background:linear-gradient(145deg,#eceef1,#a9adb4 38%,#e3e5e8 66%,#9a9ea6)}.cm-phone:before,.cm-phone:after{content:"";width:calc(var(--w) * .014);background:#9a9ea5;border-radius:2px;position:absolute}.cm-phone:before{left:calc(var(--w) * -.01);height:9%;top:22%}.cm-phone:after{right:calc(var(--w) * -.01);height:14%;top:26%}.cm-bezel{border-radius:calc(var(--w) * .145);width:100%;height:100%;padding:calc(var(--w) * .02);background:#0a0a0b}.cm-screen{border-radius:calc(var(--w) * .125);background:#fff;width:100%;height:100%;position:relative;overflow:hidden}.cm-status{z-index:2;height:calc(var(--w) * .135);padding:calc(var(--w) * .02) calc(var(--w) * .085) 0 calc(var(--w) * .1);color:#0b0b0c;font:600 calc(var(--w) * .045) / 1 -apple-system,"SF Pro Text",system-ui,sans-serif;background:#fff;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:0 0 auto}.cm-status i{width:calc(var(--w) * .07);height:calc(var(--w) * .034);border-radius:calc(var(--w) * .01);background:linear-gradient(90deg,#000 78%,#0000 78%);border:1px solid #00000073;display:inline-block}.cm-island{z-index:3;left:50%;top:calc(var(--w) * .03);width:32%;height:calc(var(--w) * .085);background:#000;border-radius:999px;position:absolute;translate:-50%}.cm-shot{left:0;right:0;top:calc(var(--w) * .135);position:absolute;bottom:0;overflow:hidden}.cm-shot img{width:100%;height:auto;transition:transform 2.2s cubic-bezier(.45,.05,.25,1);display:block;transform:translateY(0)}.cm-home{z-index:3;left:50%;bottom:calc(var(--w) * .022);width:34%;height:calc(var(--w) * .014);background:#000000b3;border-radius:99px;position:absolute;translate:-50%}.cm-card{z-index:3;width:max-content;max-width:max(30cqw,150px);color:var(--ink,#111827);transform:translateY(0) rotate(var(--cr,-1.5deg));translate:calc(var(--mx) * 1.8cqw) calc(var(--my) * 1.3cqw);background:#fffffff5;border:1px solid #141e3c0f;border-radius:max(1.5cqw,9px);align-items:center;gap:max(1.2cqw,7px);padding:max(1.3cqw,7px) max(1.6cqw,9px);display:flex;box-shadow:0 2cqw 4cqw -1.8cqw #141e3c59,0 .6cqw 1.2cqw -.8cqw #141e3c2e}.cm-card-icon{background:var(--accent);color:#fff;width:max(3.4cqw,22px);height:max(3.4cqw,22px);box-shadow:0 .8cqw 1.6cqw -.6cqw color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .7s var(--cm-ease);border-radius:max(1cqw,6px);flex:none;place-items:center;display:grid}.cm-card-icon svg{width:55%;height:55%}.cm-card small{letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground,#6b7280);font-size:max(.8cqw,7px);font-weight:600;display:block}.cm-card strong{letter-spacing:-.01em;white-space:nowrap;margin-top:.2em;font-size:max(2cqw,12px);font-weight:700;line-height:1.15;display:block}.cm-card span{color:var(--muted-foreground,#6b7280);margin-top:.2em;font-size:max(1cqw,8px);display:block}.cm-photo{object-fit:cover;z-index:1;width:100%;height:100%;transition:transform 1.2s var(--cm-ease);inset:0}.cm-flat{object-fit:contain;z-index:2;width:100%;height:100%;transform-origin:var(--fo,70% 70%);translate:calc(var(--mx) * .9cqw) calc(var(--my) * .6cqw);inset:0}.cm-frag{z-index:3;height:auto;transform:rotate(var(--r,0deg));translate:calc(var(--mx) * 1.5cqw) calc(var(--my) * 1.1cqw);border-radius:max(1.2cqw,8px);display:block;box-shadow:0 2.4cqw 4.4cqw -1.8cqw #141e3c61,0 .5cqw 1cqw -.5cqw #141e3c2e,0 0 0 1px #141e3c0f}.cm-browser{z-index:2;transform:perspective(1800px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transform-origin:30%;translate:calc(var(--mx) * -.6cqw) calc(var(--my) * -.4cqw);background:#fff;border-radius:max(1cqw,7px);overflow:hidden;box-shadow:0 3cqw 6cqw -2.4cqw #141e3c66,0 .6cqw 1.4cqw -.6cqw #141e3c33,0 0 0 1px #141e3c14}.cm-bar{background:#f3f4f6;border-bottom:1px solid #e3e4e8;align-items:center;gap:max(.6cqw,4px);height:max(2.6cqw,16px);padding:0 max(1.1cqw,7px);display:flex}.cm-bar i{aspect-ratio:1;background:#ff5f57;border-radius:50%;width:max(.8cqw,5px)}.cm-bar i:nth-child(2){background:#febc2e}.cm-bar i:nth-child(3){background:#28c840}.cm-url{color:#3b3d42;background:#e5e6ea;border-radius:max(.5cqw,4px);place-items:center;width:46%;height:62%;margin:0 auto;font:500 max(.85cqw,7px)/1 -apple-system,system-ui,sans-serif;display:grid}.cm-view{position:relative;overflow:hidden}.cm-view img{width:100%;height:auto;transition:transform 2.4s cubic-bezier(.45,.05,.25,1);display:block;transform:translateY(0)}.cm[data-variant=angle]{--lo:62% 55%}.cm[data-variant=angle] .cm-phone{--w:18cqw;--r:-6deg;top:24%;left:8%}.cm[data-variant=angle] .cm-card{--cr:-1.5deg;top:7%;left:4%}.cm[data-variant=angle] .cm-dots{top:78%;left:84%}.cm[data-variant=front]{--lo:50% 55%}.cm[data-variant=front] .cm-phone{--w:14cqw;--r:6deg;top:40%;right:6%}.cm[data-variant=front] .cm-card{--cr:-1.5deg;top:7%;left:4%}.cm[data-variant=front] .cm-dots{top:80%;left:4%}.cm[data-variant=browser] .cm-browser{--ry:9deg;--rx:2deg;width:60cqw;top:10%;left:5%}.cm[data-variant=browser] .cm-view{height:37cqw}.cm[data-variant=browser] .cm-frag.is-1{--r:3deg;width:27cqw;top:21%;right:4%}.cm[data-variant=browser] .cm-frag.is-2{--r:-4deg;z-index:4;width:17cqw;top:50%;left:50%}.cm[data-variant=browser] .cm-card{z-index:5;bottom:6%;left:4%}.cm[data-variant=browser] .cm-dots{top:80%;left:86%}.cm[data-variant=phones-xl] .cm-phone.is-1{--w:23cqw;--r:-8deg;top:9%;left:12%}.cm[data-variant=phones-xl] .cm-phone.is-2{--w:23cqw;--r:6deg;z-index:3;top:15%;left:38%}.cm[data-variant=phones-xl] .cm-frag.is-1{--r:3deg;width:19cqw;top:19%;right:5%}.cm[data-variant=phones-xl] .cm-card{z-index:5;--cr:1.5deg;bottom:6%;right:4%}.cm[data-variant=phones-xl] .cm-dots{top:76%;left:3%}.cm[data-variant=closeup]{--lo:40% 60%}.cm[data-variant=closeup] .cm-frag.is-1{--r:4deg;width:20cqw;top:17%;right:6%}.cm[data-variant=closeup] .cm-card{z-index:5;--cr:1.5deg;bottom:6%;right:4%}.cm[data-variant=closeup] .cm-dots{top:6%;left:3%}.cm[data-variant=topdown]{--lo:45% 50%;--fo:74% 74%}.cm[data-variant=topdown] .cm-card{--cr:-1.5deg;bottom:6%;left:4%}.cm[data-variant=topdown] .cm-dots{top:8%;left:84%}.cm[data-variant=angle-r]{--lo:38% 55%}.cm[data-variant=angle-r] .cm-phone{--w:16.5cqw;--r:5deg;z-index:3;top:31%;right:8%}.cm[data-variant=angle-r] .cm-card{--cr:-1.5deg;z-index:4;top:7%;left:4%}.cm[data-variant=angle-r] .cm-dots{top:8%;left:82%}@container (width<=600px){.cm[data-variant=browser] .cm-frag.is-1{top:34%}.cm[data-variant=phones-xl] .cm-frag.is-1{width:18cqw;top:33%}.cm[data-variant=phones-xl] .cm-card{--cr:-1.5deg;bottom:5%;left:4%;right:auto}.cm[data-variant=closeup] .cm-frag.is-1{width:18cqw;top:33%;right:22%}.cm[data-variant=angle-r] .cm-phone{top:33%}}.cm[data-variant=photo] .cm-card{bottom:7%;left:4%}@media(hover:hover)and (prefers-reduced-motion:no-preference){.case-card:is(:hover,:focus-visible) .cm-laptop{transform:translateY(-.4cqw)scale(1.012)}.case-card:is(:hover,:focus-visible) .cm-shot img{transform:translateY(-24%)}.case-card:is(:hover,:focus-visible) .cm-blob.is-brand{transform:translate(-2cqw,1.5cqw)scale(1.08)}.case-card:is(:hover,:focus-visible) .cm-blob.is-accent{transform:translate(2cqw,-1.5cqw)scale(1.1)}.case-card:is(:hover,:focus-visible) .cm-card{transform:translateY(-1.2cqw)rotate(0);box-shadow:0 3cqw 5cqw -2cqw #141e3c66,0 .8cqw 1.6cqw -.8cqw #141e3c33}.case-card:is(:hover,:focus-visible) .cm-card-icon{transform:rotate(-8deg)scale(1.08)}.case-card:is(:hover,:focus-visible) .cm-photo{transform:scale(1.045)}.case-card:is(:hover,:focus-visible) .cm[data-variant=angle] .cm-laptop{transform:translate(-1cqw)scale(1.02)}.case-card:is(:hover,:focus-visible) .cm[data-variant=angle] .cm-phone{transform:translate(2cqw,-2cqw)rotate(-1deg)scale(1.05)}.case-card:is(:hover,:focus-visible) .cm[data-variant=angle-r] .cm-laptop{transform:translate(1cqw)scale(1.02)}.case-card:is(:hover,:focus-visible) .cm[data-variant=angle-r] .cm-phone{transform:translate(-1.8cqw,-2.6cqw)rotate(0)scale(1.05)}.case-card:is(:hover,:focus-visible) .cm[data-variant=front] .cm-phone{transform:translate(-1.6cqw,-3cqw)rotate(0)scale(1.07)}.case-card:is(:hover,:focus-visible) .cm[data-variant=browser] .cm-browser{transform:perspective(1800px)rotateY(0)rotateX(0)translateY(-.6cqw)}.case-card:is(:hover,:focus-visible) .cm[data-variant=browser] .cm-view img{transform:translateY(-38%)}.case-card:is(:hover,:focus-visible) .cm[data-variant=browser] .cm-frag.is-1{transform:translate(1.2cqw,-1.6cqw)rotate(0)}.case-card:is(:hover,:focus-visible) .cm[data-variant=browser] .cm-frag.is-2{transform:translate(-1.4cqw,2cqw)rotate(-7deg)scale(1.04)}.case-card:is(:hover,:focus-visible) .cm[data-variant=phones-xl] .cm-phone.is-1{transform:translate(-2cqw,-1cqw)rotate(-11deg)}.case-card:is(:hover,:focus-visible) .cm[data-variant=phones-xl] .cm-phone.is-2{transform:translate(1.4cqw,-2.6cqw)rotate(2deg)scale(1.03)}.case-card:is(:hover,:focus-visible) .cm[data-variant=phones-xl] .cm-phone.is-2 .cm-shot img{transition-delay:.15s;transform:translateY(-30%)}.case-card:is(:hover,:focus-visible) .cm[data-variant=phones-xl] .cm-frag.is-1{transform:translate(1cqw,-1.6cqw)rotate(0)scale(1.04)}.case-card:is(:hover,:focus-visible) .cm[data-variant=closeup] .cm-laptop{transform:translate(-1.6cqw,-.6cqw)scale(1.035)}.case-card:is(:hover,:focus-visible) .cm[data-variant=closeup] .cm-frag.is-1{transform:translate(-1.2cqw,-1.6cqw)rotate(0)scale(1.05)}.case-card:is(:hover,:focus-visible) .cm[data-variant=topdown] .cm-laptop{transform:rotate(-1deg)scale(1.02)}.case-card:is(:hover,:focus-visible) .cm[data-variant=topdown] .cm-flat{transform:translate(1.6cqw,-1.2cqw)rotate(5deg)}}@media(prefers-reduced-motion:reduce){.cm-layer,.cm-blob,.cm-shot img,.cm-view img,.cm-card-icon{transition:none!important}.cm-layer{translate:none!important}}