.hero-liquid{--hl-ink:#0E0E14;--hl-coal:#1A1822;--hl-indigo:#576FF6;--hl-indigo-deep:#3F58E0;--hl-spark:#FF6F3C;--hl-green:#00A47C;--hl-shopify:#008060;--hl-up:#0a8a5f;--hl-down:#d6543f;--hl-cream:#F7F7F4;--hl-mist:#A8A199;--hl-stone:#6F6862;--hl-head:var(--font-heading--family);--hl-body:var(--font-body--family);--hl-acc:var(--hl-green);--a11y-scale:var(--a11y-text-scale,1);position:relative;direction:var(--kott-dir, rtl);background:#f4f6fb;color:#1b1c24}.hero-liquid *,.hero-liquid *:before,.hero-liquid *:after{box-sizing:border-box}.hero-liquid__a11y{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hero-liquid .wrap{position:relative;height:100vh;z-index:1}.hero-liquid .stage{position:relative;inset-block-start:0;height:100vh;width:100%;overflow:hidden}.hero-liquid .wrap:after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;z-index:40;background:linear-gradient(90deg,var(--hl-indigo),var(--hl-spark));opacity:.9}.hero-liquid .bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;background:radial-gradient(140% 120% at 50% -10%,#fff,#eef1f9 60%,#f4f6fb);opacity:1}.hero-liquid .bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.42;will-change:transform}.hero-liquid .bg .b1{width:46vw;height:46vw;inset-inline-start:-8vw;inset-block-start:-6vh;background:radial-gradient(circle,rgba(87,111,246,.7),transparent 65%);animation:hl-drift1 22s ease-in-out infinite}.hero-liquid .bg .b2{width:40vw;height:40vw;inset-inline-end:-6vw;inset-block-end:-10vh;background:radial-gradient(circle,rgba(255,111,60,.55),transparent 65%);animation:hl-drift2 26s ease-in-out infinite}.hero-liquid .bg .b3{width:32vw;height:32vw;inset-inline-end:18vw;inset-block-start:-12vh;background:radial-gradient(circle,rgba(0,164,124,.55),transparent 65%);animation:hl-drift3 30s ease-in-out infinite}.hero-liquid .bg .dots{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:radial-gradient(rgba(20,22,40,.07) 1px,transparent 1.4px);background-size:30px 30px;-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(120% 90% at 50% 40%,#000,transparent 75%)}@keyframes hl-drift1{50%{transform:translate(calc(var(--kott-sign,1) * 6vw),5vh) scale(1.1)}}@keyframes hl-drift2{50%{transform:translate(calc(var(--kott-sign,1) * -5vw),-4vh) scale(1.08)}}@keyframes hl-drift3{50%{transform:translate(calc(var(--kott-sign,1) * -4vw),6vh) scale(1.12)}}.hero-liquid canvas.liquid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;display:block}.hero-liquid .grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:.04;mix-blend-mode:multiply;background-image:radial-gradient(rgba(30,33,60,.35) 1px,transparent 1px);background-size:3px 3px}.hero-liquid .intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px;gap:clamp(16px,2.6vh,30px);opacity:var(--hl-introA,1);transform:translateY(var(--hl-introY,0))}.hero-liquid .intro:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(62% 46% at 50% 50%,rgba(255,255,255,.55),transparent 72%)}.hero-liquid .title{font-family:var(--hl-head);font-weight:900;line-height:.9;letter-spacing:-.025em;font-size:clamp(calc(44px*var(--a11y-text-scale,1)),7.4vw,calc(118px*var(--a11y-display-scale,1)));color:#16171f;text-shadow:0 10px 36px rgba(40,44,80,.1);margin:0}.hero-liquid .title .l2{color:#3f58e0}.hero-liquid .lede{font-family:var(--hl-body);font-weight:500;font-size:calc(clamp(15px,1.5vw,19px)*var(--a11y-scale));line-height:1.6;color:#4a4c5c;max-width:46ch;margin:6px auto 0;text-shadow:0 1px 10px rgba(255,255,255,.5)}.hero-liquid .title .dot{position:relative;display:inline-block;vertical-align:baseline;inline-size:.2em;block-size:.2em;margin-inline-start:.07em;transform-origin:50% 50%}.hero-liquid .title .dot>i{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;display:block}.hero-liquid .title .dot__orb{background:conic-gradient(from 0deg,#008060 0deg 74deg,#576ff6 140deg 214deg,#ff6f3c 280deg 344deg,#008060 360deg);animation:hl-orb 18s linear infinite}.hero-liquid .title .dot__solid{background:var(--hl-resolve,#008060);opacity:0;transition:opacity .45s ease,background .45s ease}.hero-liquid .title .dot.is-resolved .dot__solid{opacity:1}@keyframes hl-orb{to{transform:rotate(360deg)}}.hero-liquid .title .dot.is-emitting{animation:hl-emit .9s cubic-bezier(.22,.9,.28,1)}@keyframes hl-emit{0%{transform:scale(1)}22%{transform:scale(1.5)}to{transform:scale(1)}}.hero-liquid .title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block-end:.1em;margin-block-end:-.1em}.hero-liquid .title .w>span{display:inline-block;will-change:transform}.hero-liquid.is-intro-armed .intro{opacity:1!important;transform:none!important}.hero-liquid.is-intro-armed .title .w>span{transform:translateY(110%)}.hero-liquid.is-intro-armed .title .dot{opacity:0;transform:scale(.2)}.hero-liquid.is-intro-armed .lede{opacity:0;transform:translateY(14px)}.hero-liquid.is-intro-in .title .w>span{transform:none;transition:transform .82s cubic-bezier(.2,.86,.24,1) calc(var(--wi,0)*90ms)}.hero-liquid.is-intro-in .title .dot{opacity:1;transform:none;transition:opacity .3s ease .4s,transform .62s cubic-bezier(.2,.9,.26,1.2) .4s}.hero-liquid.is-intro-in .lede{opacity:1;transform:none;transition:opacity .6s ease .56s,transform .7s cubic-bezier(.2,.86,.24,1) .56s}.hero-liquid .hl-svcs{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,.9vw,14px);margin-block-start:clamp(12px,2.2vh,26px)}.hero-liquid .hl-svc{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:11px;padding:9px clamp(13px,1.3vw,17px);border-radius:999px;font-family:var(--hl-body);font-weight:600;letter-spacing:.005em;font-size:calc(clamp(13.5px,1.28vw,15.5px)*var(--a11y-scale));color:#2b2c38;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .34s ease}.hero-liquid .hl-svc__dot{position:relative;flex:none;inline-size:13px;block-size:13px;background:radial-gradient(118% 118% at 32% 26%,color-mix(in srgb,var(--hl-svc) 42%,#fff) 0%,var(--hl-svc) 48%,color-mix(in srgb,var(--hl-svc) 74%,#000) 100%);border-radius:48% 52% 51% 49%/50% 47% 53% 50%;box-shadow:0 2px 7px -2px color-mix(in srgb,var(--hl-svc) 65%,transparent);transform-origin:50% 100%;transition:box-shadow .35s ease}.hero-liquid .hl-svc__dot:after{content:"";position:absolute;top:13%;left:20%;width:36%;height:30%;border-radius:50%;background:#fffc;filter:blur(.4px);pointer-events:none}@keyframes hl-bead{0%,to{border-radius:48% 52% 51% 49%/50% 47% 53% 50%}34%{border-radius:54% 46% 47% 53%/46% 53% 47% 54%}67%{border-radius:46% 54% 54% 46%/53% 47%}}.hero-liquid .hl-svc__t{transition:color .3s ease}.hero-liquid .hl-svc__x{display:inline-flex;align-items:center;gap:9px;max-inline-size:0;opacity:0;overflow:hidden;transition:max-inline-size .42s cubic-bezier(.22,.9,.28,1),opacity .26s ease}.hero-liquid .hl-svc__d{font-weight:500;white-space:nowrap;color:#55576a;font-size:calc(clamp(12.5px,1.08vw,13.5px)*var(--a11y-scale))}.hero-liquid .hl-arrow{position:relative;flex:none;inline-size:26px;block-size:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--hl-svc) 16%,transparent);color:var(--hl-svc-ink)}.hero-liquid .hl-arrow svg{position:absolute;inline-size:12px;block-size:12px;transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg))}.hero-liquid .hl-arrow__out{opacity:1;transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(0)}@keyframes hl-arr-loop{0%,26%{transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(0);opacity:1}42%{transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(100%,calc(var(--kott-sign,1) * -100%));opacity:0}43%{transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(-100%,calc(var(--kott-sign,1) * 100%));opacity:0}59%,to{transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(0);opacity:1}}.hero-liquid .hl-svc:hover .hl-arrow__out,.hero-liquid .hl-svc:focus-visible .hl-arrow__out{animation:hl-arr-loop 2.4s cubic-bezier(.32,.72,0,1) .12s infinite}.hero-liquid .hl-svc__x{display:inline-flex;align-items:center;max-inline-size:0;opacity:1;overflow:hidden;transition:max-inline-size .34s cubic-bezier(.22,.9,.28,1)}.hero-liquid .hl-svc__d{display:none}.hero-liquid .hl-arrow{opacity:0;transform:scale(.55);transition:opacity .2s ease,transform .34s cubic-bezier(.2,.9,.26,1.35)}.hero-liquid .hl-svc:hover,.hero-liquid .hl-svc:focus-visible{color:var(--hl-svc-ink)}.hero-liquid .hl-svc:hover .hl-svc__x,.hero-liquid .hl-svc:focus-visible .hl-svc__x{max-inline-size:5rem}.hero-liquid .hl-svc:hover .hl-arrow,.hero-liquid .hl-svc:focus-visible .hl-arrow{opacity:1;transform:scale(1)}.hero-liquid .hl-svc:hover .hl-svc__dot,.hero-liquid .hl-svc:focus-visible .hl-svc__dot{box-shadow:0 3px 12px -2px color-mix(in srgb,var(--hl-svc) 80%,transparent)}.hero-liquid .hl-svc:focus-visible{outline:2px solid #3F58E0;outline-offset:3px}.hero-liquid .hl-ripple{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;inline-size:14px;block-size:14px;margin:-7px 0 0 -7px;background:color-mix(in srgb,var(--hl-svc) 50%,transparent);animation:hl-ripple .6s cubic-bezier(.22,.9,.28,1) forwards}@keyframes hl-ripple{0%{transform:scale(1);opacity:.5}to{transform:scale(24);opacity:0}}.hero-liquid.is-dots-armed .hl-svc__dot,.hero-liquid.is-dots-armed .hl-svc__t,.hero-liquid.is-dots-armed .hl-svc{opacity:0}.hero-liquid.is-dots-in .hl-svc{opacity:1;transition:opacity .01s linear var(--dropDelay,0ms)}.hero-liquid.is-dots-in .hl-svc__dot{opacity:1;animation:hl-drop var(--dropDur,1.15s) linear var(--dropDelay,0ms) both,hl-bead 7s ease-in-out calc(var(--dropDelay,0ms) + var(--dropDur,1.15s)) infinite}.hero-liquid.is-dots-in .hl-svc__t{opacity:1;transition:opacity .45s ease calc(var(--dropDelay,0ms) + var(--dropDur,1.15s) * .42)}@keyframes hl-drop{0%{opacity:0;transform:translateY(calc(-1 * var(--dropH,280px))) rotate(calc(var(--tilt,-6deg) * var(--kott-sign,1))) scale(.86)}6%{opacity:1}40%{transform:translateY(0) rotate(0) scaleX(1.34) scaleY(.68);animation-timing-function:cubic-bezier(.3,0,.9,.55)}56%{transform:translateY(calc(-1 * var(--b1,30px))) rotate(calc(var(--tilt,-6deg) * .35 * var(--kott-sign,1))) scaleX(.9) scaleY(1.14)}70%{transform:translateY(0) scaleX(1.18) scaleY(.86)}82%{transform:translateY(calc(-1 * var(--b2,10px))) scaleX(.96) scaleY(1.06)}92%{transform:translateY(0) scaleX(1.06) scaleY(.95)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}.hero-liquid .hl-cursor{position:fixed;z-index:9;inset-block-start:0;inset-inline-start:0;inline-size:26px;block-size:26px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--hl-cursor-c,#576FF6) 70%,transparent);background:color-mix(in srgb,var(--hl-cursor-c,#576FF6) 12%,transparent);pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0) scale(.6);transition:opacity .3s ease,background .35s ease,border-color .35s ease;will-change:transform}.hero-liquid .hl-cursor.is-on{opacity:1}@media(max-width:749px){.hero-liquid .title{font-size:clamp(calc(34px*var(--a11y-text-scale,1)),10.5vw,calc(64px*var(--a11y-display-scale,1)))}.hero-liquid .hl-svcs{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;inline-size:min(400px,90vw);margin-inline:auto;margin-block-start:clamp(16px,3vh,30px)}.hero-liquid .hl-svcs:before{content:"";position:absolute;z-index:0;inset-inline-start:6px;inset-block:22px;inline-size:1.5px;border-radius:2px;background:linear-gradient(180deg,#008060,#576ff6,#ff6f3c);opacity:.5;transform:scaleY(0);transform-origin:top center;transition:transform 1s cubic-bezier(.22,.9,.28,1) .15s}.hero-liquid.is-dots-in .hl-svcs:before{transform:scaleY(1)}.hero-liquid .hl-svc{position:relative;z-index:1;display:grid;grid-template-columns:14px minmax(0,max-content) auto;grid-template-areas:"dot t  go" "dot d  go";align-items:center;justify-content:start;gap:2px 18px;padding:15px 0;border-radius:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;white-space:normal}.hero-liquid .hl-svc__dot{grid-area:dot;justify-self:center;inline-size:15px;block-size:15px}.hero-liquid .hl-svc__t{grid-area:t;text-align:start;color:#16171f;font-family:var(--hl-head);font-weight:800;letter-spacing:-.01em;font-size:calc(16px*var(--a11y-scale))}.hero-liquid .hl-svc__x{display:contents;max-inline-size:none;overflow:visible}.hero-liquid .hl-svc__d{grid-area:d;display:block;max-inline-size:none;opacity:1;white-space:normal;text-align:start;font-size:calc(13px*var(--a11y-scale));color:#55576a}.hero-liquid .hl-arrow{grid-area:go;inline-size:34px;block-size:34px;opacity:1;transform:none;background:color-mix(in srgb,var(--hl-svc) 12%,transparent);color:var(--hl-svc-ink)}.hero-liquid .hl-arrow svg{inline-size:14px;block-size:14px}.hero-liquid .hl-arrow__out{animation:hl-arr-loop 3.4s cubic-bezier(.32,.72,0,1) calc(var(--i,0)*.4s) infinite}.hero-liquid .hl-svc:hover,.hero-liquid .hl-svc:focus-visible{color:#2b2c38}.hero-liquid .hl-svc:hover .hl-svc__dot,.hero-liquid .hl-svc:focus-visible .hl-svc__dot{background:var(--hl-svc);transform:none}.hero-liquid .hl-cursor{display:none}}@media(max-width:410px){.hero-liquid .hl-svc{padding:13px 0;gap:2px 12px}.hero-liquid .hl-svc__t{font-size:calc(15px*var(--a11y-scale))}.hero-liquid .hl-svc__d{font-size:calc(12.5px*var(--a11y-scale))}.hero-liquid .hl-arrow{inline-size:30px;block-size:30px}}@media(hover:none),(pointer:coarse){.hero-liquid .hl-cursor{display:none!important}}@media(prefers-reduced-motion:reduce){.hero-liquid .bg .blob{animation:none}}html[data-reduce-motion] .hero-liquid canvas.liquid,html[data-reduce-motion] .hero-liquid .grain{display:none}html[data-reduce-motion] .hero-liquid .bg{opacity:1}html[data-reduce-motion] .hero-liquid .bg .blob{animation:none}html[data-reduce-motion] .hero-liquid .intro{opacity:1!important;transform:none!important}@media(prefers-reduced-motion:reduce){.hero-liquid .hl-svc,.hero-liquid .hl-svc__dot,.hero-liquid .hl-svc__t,.hero-liquid .hl-svc__x,.hero-liquid .title .dot{transition:none!important}.hero-liquid .title .dot{animation:none!important}.hero-liquid .hl-cursor,.hero-liquid .hl-ripple{display:none!important}}html[data-reduce-motion] .hero-liquid .hl-svc,html[data-reduce-motion] .hero-liquid .hl-svc__dot,html[data-reduce-motion] .hero-liquid .hl-svc__t,html[data-reduce-motion] .hero-liquid .hl-svc__x,html[data-reduce-motion] .hero-liquid .title .dot{transition:none!important;animation:none!important}html[data-reduce-motion] .hero-liquid .hl-cursor,html[data-reduce-motion] .hero-liquid .hl-ripple{display:none!important}html[data-reduce-motion] .hero-liquid .hl-svc,html[data-reduce-motion] .hero-liquid .hl-svc__dot,html[data-reduce-motion] .hero-liquid .hl-svc__t{opacity:1!important;transform:none!important}@media(prefers-reduced-motion:reduce){.hero-liquid .title .dot__orb,.hero-liquid .hl-arrow__out,.hero-liquid .hl-svc__dot{animation:none!important}.hero-liquid .hl-svc__dot{transform:none!important;border-radius:50%!important}.hero-liquid .hl-arrow__out{transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(0)!important;opacity:1!important}.hero-liquid .title .w>span{transform:none!important}.hero-liquid .title .dot,.hero-liquid .lede{opacity:1!important;transform:none!important}}html[data-reduce-motion] .hero-liquid .title .dot__orb,html[data-reduce-motion] .hero-liquid .hl-arrow__out,html[data-reduce-motion] .hero-liquid .hl-svc__dot{animation:none!important}html[data-reduce-motion] .hero-liquid .hl-svc__dot{transform:none!important;border-radius:50%!important}html[data-reduce-motion] .hero-liquid .hl-arrow__out{transform:rotate(calc(-90deg - var(--kott-sign,1) * 50deg)) translate(0)!important;opacity:1!important}html[data-reduce-motion] .hero-liquid .title .w>span{transform:none!important}html[data-reduce-motion] .hero-liquid .title .dot,html[data-reduce-motion] .hero-liquid .lede{opacity:1!important;transform:none!important}
/*# sourceMappingURL=/cdn/shop/t/3/assets/hero-liquid.css.map */