@import "https://unpkg.com/open-props@2.0.0-beta.5" layer(library);
@import "https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap";
@layer reset;@layer base{.section{--nav-block-size:74px;--brand-gradient:linear-gradient(227deg, #1400c7 0%, #0bf 100%)}}@layer demo{.navbar{min-block-size:var(--nav-block-size);z-index:var(--layer-3);padding-block:var(--size-3);padding-inline:var(--size-5);background-color:#fff;place-items:center end;display:grid;position:fixed;inset-block-start:0;inset-inline:0}@media (min-width:600px){.navbar{padding-inline:6dvi}}.nav-cta-btn{font-size:var(--font-size-1);font-weight:var(--font-weight-7);white-space:nowrap;inline-size:max-content;padding-block:var(--size-3);padding-inline:var(--size-7);border:var(--border-size-2) solid transparent;color:#000;isolation:isolate;background:linear-gradient(white, white) padding-box, var(--brand-gradient) border-box;border-radius:var(--radius-6);text-decoration:none;position:relative;overflow:hidden}.nav-cta-btn:before{content:"";background:var(--brand-gradient);mix-blend-mode:screen;display:block;position:absolute;inset:0}.nav-cta-btn:hover{color:#fff}.nav-cta-btn:hover:before{background:var(--brand-gradient) padding-box, var(--brand-gradient) border-box;mix-blend-mode:normal;z-index:-1;background-repeat:no-repeat;background-size:contain}.section{--section-block-size:max(400px, 100dvb);min-block-size:var(--section-block-size);background-color:#fff;block-size:100%;inline-size:100%;display:grid;position:relative}.section>*{grid-area:1/1}.section-wrapper{display:grid;position:relative}@media (min-width:960px){.section-wrapper{grid-template-columns:1fr 1fr}}@media not all and (min-width:960px){.section-wrapper{padding-block-start:calc(var(--nav-block-size) + var(--size-7));padding-block-end:var(--size-7)}}.video{object-fit:cover;z-index:-1;block-size:100%;inline-size:100%;display:block;position:relative}.content-wrapper{display:grid}@media not all and (min-width:960px){.content-wrapper{gap:var(--size-7)}}.meta{gap:var(--size-3);display:grid}.content{inline-size:100%;padding-block:var(--size-7);padding-inline:var(--size-5);place-items:center;display:grid}@media (min-width:960px){.content{padding:var(--size-10);place-items:center end;min-block-size:100cqb}}@media not all and (min-width:960px){.content{gap:var(--size-5)}}.mobile-visual{inline-size:100%;aspect-ratio:var(--ratio-square)}@media (min-width:960px){.mobile-visual{display:none}}.headline{font-size:var(--font-size-7);font-weight:var(--font-weight-4);max-inline-size:var(--size-content-1);text-wrap:pretty}@media not all and (min-width:960px){.headline{font-size:var(--font-size-6)}}.desc{font-size:var(--font-size-4);text-wrap:pretty;max-inline-size:40ch;line-height:1.5}@media not all and (min-width:960px){.desc{font-size:var(--font-size-3)}}.visual{block-size:var(--section-block-size);display:grid;position:sticky;inset-block-start:0;container-type:size}@media not all and (min-width:960px){.visual{display:none}}.video-visual{inline-size:100%;block-size:var(--section-block-size);isolation:isolate;filter:hue-rotate(210deg);display:block;position:sticky;inset-block-start:0}.card-wrapper{place-items:center;display:grid;overflow:clip;container-type:size}.card-wrapper>*{grid-area:1/1}.card-wrapper .card{aspect-ratio:var(--ratio-square);border-radius:var(--radius-3);inline-size:70cqi;scale:.4}.card-wrapper .card-img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card-wrapper .card-1{scale:1}.card-wrapper .card-2{opacity:.3;translate:-35cqi 30cqb}.card-wrapper .card-3{opacity:.5;translate:0 50cqb}.card-wrapper .card-4{opacity:.5;translate:45cqi 40cqb}.content-1{--_text-gradient:linear-gradient(227deg, #1400c7 0%, #0bf 100%)}.content-2{--_text-gradient:linear-gradient(227deg, #28dc28 0%, #0bf 100%)}.content-3{--_text-gradient:linear-gradient(227deg, #1400c7 0%, #b800b1 100%)}.content-4{--_text-gradient:linear-gradient(227deg, #b800b1 0%, #f50000 100%)}.text-highlight{background:var(--_text-gradient);-webkit-text-fill-color:transparent;text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}}@supports (animation-timeline:scroll()){body{timeline-scope:--content-1, --content-2, --content-3, --content-4}.section{view-timeline-name:--section}.content-1{view-timeline-name:--content-1}.content-2{view-timeline-name:--content-2}.content-3{view-timeline-name:--content-3}.content-4{view-timeline-name:--content-4}.card-wrapper .card{animation-timing-function:linear;animation-fill-mode:forwards}.card-wrapper .card-1{animation-name:slide-up-first-card;animation-timeline:--content-1}.card-wrapper .card-2{animation-name:slide-up-card;animation-timeline:--content-2}.card-wrapper .card-3{animation-name:slide-up-card;animation-timeline:--content-3}.card-wrapper .card-4{animation-name:slide-up-card;animation-timeline:--content-4}.video-visual{animation-name:update-hue;animation-timing-function:step-end;animation-fill-mode:forwards;animation-timeline:--section;animation-range-end:exit 110%}@keyframes update-hue{0%{filter:hue-rotate(210deg)}25%{filter:hue-rotate(150deg)}45%{filter:hue-rotate(300deg)}60%{filter:hue-rotate(4deg)}}@keyframes slide-up-first-card{50%{opacity:1;translate:0}90%{translate:0 -50cqi;scale:.6}to{opacity:0;translate:0 -100cqi}}@keyframes slide-up-card{50%{opacity:1;translate:0;scale:1}90%{opacity:.5;translate:0 -50cqb;scale:.6}to{opacity:0;translate:0 -100cqi}}}
