:root{--color-1: $color-1; --font-size-base: 1.4rem; --font-size-xs: 0.8em; --font-size-s: 1em; --font-size-m: 1.2em; --font-size-l: calc(1.2em + .5vw); --font-size-xl: calc(1.5em + .5vw); --font-size-xxl: calc(2.6em + 2vw); --list-margin-left: 1em; --list-cols: repeat(1, 1fr); --grid-areas-main: "content content content" "contact contact contact" "footer footer footer"; --col-small: 1px; --gallery-grid-cols: 1fr 1fr; --span: span 2; --text-cols: 1; --section-text-pos: 3em; --page-padding: 3em; --padding-nav: var(--page-padding); --padding-nav-fixed: 1em var(--page-padding); --fixed-header-height: 4em; --flex-dir: column; --grid-flow: row; --hide-mobile: none; --hide-tablet: inline-block; --hide-desktop: inline-block; --show-mobile: inline-block; --show-tablet: none; --show-desktop: none; --anim-time: 0.3s; --body-padding: 10vw}:root span{--hide-mobile: none; --hide-tablet: inline; --hide-desktop: inline}:root span{--show-mobile: inline; --show-tablet: none; --show-desktop: none}@media screen and (min-width: 400px){:root{--font-size-base: 1.6rem; --list-margin-left: 3em}}@media screen and (min-width: 600px){:root{--list-margin-left: 5em; --list-cols: repeat(3, 1fr); --col-small: 1px; --body-padding: 12vw; --hide-mobile: inline-block; --hide-tablet: none; --hide-desktop: inline-block; --show-mobile: none; --show-tablet: inline-block; --show-desktop: none}:root span{--hide-mobile: inline; --hide-tablet: none; --hide-desktop: inline}:root span{--show-mobile: none; --show-tablet: inline; --show-desktop: none}}@media screen and (min-width: 900px){:root{--flex-dir: row; --grid-flow: column; --anim-time: 0.3s; --body-padding: 8vw; --hide-mobile: inline-block; --hide-tablet: inline-block; --hide-desktop: none; --show-mobile: none; --show-tablet: none; --show-desktop: inline-block}:root span{--hide-mobile: inline; --hide-tablet: inline; --hide-desktop: none}:root span{--show-mobile: none; --show-tablet: none; --show-desktop: inline}}@media screen and (min-width: 1200px){:root{--text-cols: 2; --fixed-header-height: 7em}}@media screen and (min-width: 1800px){:root{--text-cols: 3}}html.has-scroll-smooth{overflow: hidden}html.has-scroll-dragging{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}.has-scroll-smooth body{overflow: hidden}.has-scroll-smooth [data-scroll-container]{min-height: 100vh}[data-scroll-direction=horizontal] [data-scroll-container]{height: 100vh; display: inline-block; white-space: nowrap}[data-scroll-direction=horizontal] [data-scroll-section]{display: inline-block; vertical-align: top; white-space: nowrap; height: 100%}.c-scrollbar{position: absolute; right: 0; top: 0; width: 11px; height: 100%; -webkit-transform-origin: center right; transform-origin: center right; transition: opacity .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s; opacity: 0}.c-scrollbar:hover{-webkit-transform: scaleX(1.45); transform: scaleX(1.45)}.c-scrollbar:hover,.has-scroll-scrolling .c-scrollbar,.has-scroll-dragging .c-scrollbar{opacity: 1}[data-scroll-direction=horizontal] .c-scrollbar{width: 100%; height: 10px; top: auto; bottom: 0; -webkit-transform: scaleY(1); transform: scaleY(1)}[data-scroll-direction=horizontal] .c-scrollbar:hover{-webkit-transform: scaleY(1.3); transform: scaleY(1.3)}.c-scrollbar_thumb{position: absolute; top: 0; right: 0; background-color: #000; opacity: .5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab}.has-scroll-dragging .c-scrollbar_thumb{cursor: -webkit-grabbing; cursor: grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{right: auto; bottom: 0}.preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #1f2233; z-index: 999999; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column}.preloader__wrapper{position: relative; display: -ms-grid; display: grid; place-items: center; text-align: center}.preloader__elem{position: absolute; white-space: nowrap; visibility: hidden; font-size: var(--font-size-m)}.preloader__logo{font-size: 2em}.preloader__logo .icon{fill: #fff; stroke: #fff}.preloader__bar{position: absolute; bottom: 0; width: 100%; height: 5px; background: #8d6dff}*,*::after,*::before{margin: 0; padding: 0; box-sizing: border-box; text-rendering: optimizeSpeed}html,body{font-size: 62.5%; width: 100%; height: 100%; min-height: calc(var(--vh, 1vh) * 100); -webkit-overflow-scrolling: touch}body{box-sizing: border-box; overflow-x: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; background-color: #1f2233}::-moz-selection{background-color: #8d6dff; color: #fff}::selection{background-color: #8d6dff; color: #fff}.webgl{position: fixed; top: 0; left: 0; outline: none; height: 100vh !important; width: 100% !important; overflow: hidden; pointer-events: none; z-index: -2; background-color: #1f2233}.webgl__color{position: fixed; top: 0; left: 0; height: 100vh !important; width: 100% !important; overflow: hidden; pointer-events: none; z-index: -1}.app{position: relative; z-index: 0; width: 100%; min-height: 100vh; overflow: hidden; counter-reset: section}.header{pointer-events: none; padding: var(--body-padding); position: fixed !important; top: 0px; left: 0; width: 100%; text-shadow: 0px 0px .3em #1f2233; z-index: 100; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; transition: all .6 ease-in-out}@media screen and (max-width: 900px){.header{background-image: linear-gradient(to bottom, rgba(31, 34, 51, 0.95) 60%, rgba(31, 34, 51, 0) 100%)}}.header>*{pointer-events: all}.header__brand{text-transform: uppercase; letter-spacing: .2ch}.header__brand-logo{font-size: 1.75em; font-size: clamp(1.5em, 3vw, 2em)}.header__nav{color: #8d6dff}.header__nav-list{display: -webkit-flex; display: flex; list-style: none; -webkit-flex-direction: row; flex-direction: row}.header__nav-list-elem{display: inline-block; padding-left: 3vw}.header__nav-list-elem:first-child{padding: 0 2vw 0 0; font-size: 1.5em; margin-top: -0.5ch}.balken{position: relative; top: 0; left: 0; margin-top: var(--font-size-xs); width: 100%; height: 2px; background-image: linear-gradient(to right, rgba(141, 109, 255, 0.1) 30%, rgba(141, 109, 255, 0.7) 92%, #fff); z-index: 920}.balken--before{position: relative; top: 0; left: 0; width: 100%; height: 2px; margin-top: -2px; z-index: 910}.position-wrapper{position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; z-index: 900; pointer-events: none}.position-wrapper .byline,.position-wrapper .scroll-down{position: absolute; bottom: var(--body-padding); -webkit-transform: rotate(-90deg); transform: rotate(-90deg)}.position-wrapper .byline{left: var(--body-padding); -webkit-transform-origin: left center; transform-origin: left center; pointer-events: auto}.position-wrapper .byline>*{padding: 0 .3em; display: inline-block}.position-wrapper .scroll-down{right: var(--body-padding); color: #d405fd; bottom: 10em; -webkit-transform-origin: right center; transform-origin: right center}.position-wrapper .scroll-down .icon{-webkit-transform: translateY(0.2em); transform: translateY(0.2em)}.position-wrapper .scroll-down span{display: inline-block}@media(any-pointer: fine){.follower{width: 60px; height: 60px; position: fixed; top: 0; left: 0; border: 2px solid #d405fd; border-radius: 50%; pointer-events: none; z-index: 1000}.cursor{position: fixed; left: 0; top: 0; pointer-events: none; width: 64px; height: 64px; left: -32px; top: -32px; stroke-linecap: round; stroke-linejoin: round; z-index: 8000000}.cursor #cursor__svg{-webkit-transform: scale(1); transform: scale(1); transition: .3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, .2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity}.cursor #cursor__inner{stroke: none; fill: #d405fd; -webkit-transform-origin: center; transform-origin: center}.cursor #cursor__outer{stroke: #d405fd; stroke-width: 1px; fill: none; transition: .3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform}.cursor #cursor__pulse{stroke: #d405fd; stroke-width: 12px; fill: none; -webkit-animation: cursor-pulse 2s infinite linear; animation: cursor-pulse 2s infinite linear; -webkit-transform-origin: center center; transform-origin: center center}.cursor #cursor__svg.active{-webkit-transform: scale(3); transform: scale(3)}.cursor #cursor__svg.active #cursor__inner{-webkit-transform: scale(0.34); transform: scale(0.34)}.cursor #cursor__svg.active #cursor__outer{stroke-width: .34px}.cursor #cursor__svg.active #cursor__pulse{display: none}@-webkit-keyframes cursor-pulse{0%{-webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0}70%{-webkit-transform: scale(1); transform: scale(1); opacity: .1}100%{-webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0}}@keyframes cursor-pulse{0%{-webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0}70%{-webkit-transform: scale(1); transform: scale(1); opacity: .1}100%{-webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0}}}.c-scrollbar{z-index: 200}.c-scrollbar_thumb{background-color: #d405fd}.hide-desktop{display: var(--hide-desktop) !important}.hide-tablet{display: var(--hide-tablet) !important}.hide-mobile{display: var(--hide-mobile) !important}.show-desktop{display: var(--show-desktop) !important}.show-tablet{display: var(--show-tablet) !important}.show-mobile{display: var(--show-mobile) !important}.wrapper--center{border: 1px solid aqua; display: -ms-grid; display: grid; place-items: center; width: 100%; height: 100%}.inline-block{display: inline-block}.color-1{color: #d405fd}.color-2{color: #8d6dff}@font-face{font-family: "GT Flexa"; src: url("../fonts/GTFlexa-Thin.eot"); src: local("GT Flexa Thin"), local("GTFlexa-Thin"), url("../fonts/GTFlexa-Thin%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../fonts/GTFlexa-Thin.woff2") format("woff2"), url("../fonts/GTFlexa-Thin.woff") format("woff"); font-weight: 200; font-style: normal; font-display: swap}@font-face{font-family: "GT Flexa"; src: url("../fonts/GTFlexa-Regular.eot"); src: local("GT Flexa Regular"), local("GTFlexa-Regular"), url("../fonts/GTFlexa-Regular%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../fonts/GTFlexa-Regular.woff2") format("woff2"), url("../fonts/GTFlexa-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap}@font-face{font-family: "GT Flexa Mono"; src: url("../fonts/GTFlexaMono-Regular.eot"); src: local("GT Flexa Mono Regular"), local("GTFlexaMono-Regular"), url("../fonts/GTFlexaMono-Regular%EF%B9%96.eot#iefix") format("embedded-opentype"), url("../fonts/GTFlexaMono-Regular.woff2") format("woff2"), url("../fonts/GTFlexaMono-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap}body{font-size: var(--font-size-base); line-height: 1.6; letter-spacing: .05em; color: #fff; font-family: "GT Flexa", sans-serif; font-weight: 200; font-style: normal}h1{font-size: var(--font-size-xxl); font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal; line-height: 1.1}h2{font-family: "GT Flexa Mono", sans-serif; font-weight: normal; font-style: normal; font-size: var(--font-size-l); line-height: 1.2}h3{line-height: 1.3; font-size: var(--font-size-l); font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal}h4{font-size: var(--font-size-m); line-height: 1.4; font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal; margin-bottom: .3em}h5{font-size: var(--font-size-s); line-height: 1.5; font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal}.header,.scroll-down{font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal}strong,b,.font-title{font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal}.font-mono{font-family: "GT Flexa Mono", sans-serif; font-weight: normal; font-style: normal}.font-regular{font-family: "GT Flexa", sans-serif; font-weight: 200; font-style: normal}p{max-inline-size: 100ch; line-height: 1.7}.legende,.marker{font-family: "GT Flexa Mono", sans-serif; font-weight: normal; font-style: normal; line-height: 1.4}a{outline: none; text-decoration: none; color: inherit; display: inline-block; border: none; outline: none; background-color: transparent}a:visited,a:hover,a:focus,a:active{border: none}.text-link{background-image: linear-gradient(#1f2233, #1f2233), linear-gradient(rgba(141, 109, 255, 0.5), rgba(141, 109, 255, 0.5)), linear-gradient(#8d6dff, #8d6dff); background-size: 20px 2px, 100% 2px, 0 2px; background-position: calc(20px * -1) 100%, 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size .3s linear, background-position .3s linear}@media(hover: hover)and (pointer: fine){.text-link:hover{background-size: 20px 2px, 0 2px, 100% 2px; background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%}}.text-link-nav{transition: color .3s ease, -webkit-transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); transition: color .3s ease, transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); transition: color .3s ease, transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55), -webkit-transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); -webkit-transform-origin: center center; transform-origin: center center; border: none !important; border-bottom: 2px solid transparent; color: #fff}.text-link-nav:hover{color: #8d6dff}.text-link-nav.active{color: #8d6dff; -webkit-animation: nav-scale 1s; animation: nav-scale 1s}.text-link-nav.active .icon{fill: #fff}@-webkit-keyframes nav-scale{0%, 100%{-webkit-transform: scale(1); transform: scale(1)}50%{-webkit-transform: scale(1.1); transform: scale(1.1)}}@keyframes nav-scale{0%, 100%{-webkit-transform: scale(1); transform: scale(1)}50%{-webkit-transform: scale(1.1); transform: scale(1.1)}}.text-link-nav.anchor-link-intro{-webkit-transform: rotate(0deg); transform: rotate(0deg)}.text-link-nav.anchor-link-intro.active{-webkit-transform: rotate(180deg); transform: rotate(180deg)}.img--responsive{width: 100%}.container-img{position: relative; width: 100%; max-width: 1000px; margin: 0 auto}.container-img .text{position: absolute; bottom: 40px; left: 40px}.container-img .box{position: absolute; top: 0; left: 0}.container-img .box img{max-width: 100%}.icon{display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; pointer-events: none}.icon-purple{fill: #fff}.icon-sun{fill: #d405fd; font-size: 2em; margin-bottom: -0.35em}.icon-tower{margin-bottom: -0.15em; margin-right: .1em}.icon-paper-plane{font-size: .7em; margin-right: .2em}.icon-phone{font-size: .7em; margin-right: .2em}.btn{text-decoration: none; border: none; font-family: inherit; cursor: pointer; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-align-self: start; -ms-grid-row-align: start; align-self: start; font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal; font-size: var(--font-size-s); background-color: transparent; color: #8d6dff; border-radius: 1000px; border: 2px solid #8d6dff; text-align: center; line-height: 1.1; transition: 220ms all ease-in-out; margin: calc(var(--font-size-s)*0.2); pointer-events: all}.btn:not(.btn-icon-only){padding: calc(var(--font-size-s)*1) calc(var(--font-size-s)*1.8); min-width: 10ch}.btn:focus,.btn:visited{outline: none; color: #8d6dff; border: 2px solid #8d6dff}.btn:hover,.btn:active{color: #fff; outline: none; background-color: #8d6dff; border: 2px solid #8d6dff}.btn__icon{width: .9em; height: .9em; fill: currentcolor; margin-right: calc(var(--font-size-s)*0.5)}.btn__icon--end{margin-right: 0; margin-left: .5em}.btn-icon-only{width: calc(var(--font-size-s)*2.5); height: calc(var(--font-size-s)*2.5); border-radius: 50%; padding: calc(var(--font-size-s)*0.8)}.btn-icon-only__icon{width: 100%; height: 100%; fill: currentColor}.btn--small{font-size: calc(var(--font-size-xs)*0.8)}.btn--large{font-size: clamp(1.5em, 2vw, 2em)}.list{list-style: none; margin-left: var(--list-margin-left)}.list__elem{padding-bottom: 2em; display: -webkit-flex; display: flex}.list__elem p{line-height: 1.5; max-inline-size: 40ch}.list__icon{font-size: calc(var(--font-size-s) * 1.5); width: 1.8em; -webkit-flex-shrink: 0; flex-shrink: 0}.list__icon .icon{fill: #d405fd}.list__text{-webkit-flex-shrink: 1; flex-shrink: 1}.list__hr{margin-top: 0 !important}.list--grid{display: -ms-grid; display: grid; -ms-grid-columns: var(--list-cols); grid-template-columns: var(--list-cols); gap: 3vw; margin: 0}.list--grid .list__elem{text-align: center; -webkit-flex-direction: column; flex-direction: column}.list--grid .list__icon{font-size: calc(var(--font-size-s) * 2); width: 100%}.section{position: relative; padding: var(--body-padding); padding-top: calc(var(--body-padding) * 1.2); padding-bottom: calc(var(--body-padding) * 1.2); min-height: 100vh; width: 100%}@media screen and (orientation: portrait){.section{padding-top: calc(var(--body-padding) * 2)}}@media screen and (orientation: portrait){.section{padding-bottom: calc(var(--body-padding) * 2)}}.section__content:not(.section__intro){max-width: 800px; margin: 0 auto}@media screen and (min-width: 900px){.section__content:not(.section__intro){padding-left: calc(var(--body-padding) * 2)}}@media screen and (min-width: 1000px){.section__content:not(.section__intro){padding-left: calc(var(--body-padding) * 1.5)}}@media screen and (min-width: 1200px){.section__content:not(.section__intro){padding-left: auto; max-width: 1000px}}.section__legende{display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end}.section__legende__p{text-align: right; max-inline-size: 60ch; color: rgba(141, 109, 255, .7)}.section__marker{position: absolute; width: 100%; left: 0; right: 0; z-index: 20; text-align: right; color: rgba(141, 109, 255, .7)}.section__marker::after{content: " ———"}@media screen and (min-width: 1500px){.section__h1, .section__h2{margin-left: calc(var(--body-padding) * -1.5)}}.section__h2{color: #d405fd; text-shadow: 0px 0px .1em #1f2233}.section__h3{max-width: 25em; z-index: 2; position: relative}.section__imgs{display: -ms-grid; display: grid; grid-auto-flow: column; z-index: 3; margin: 0 -20vw}@media(orientation: portrait){.section__imgs{margin: 0 -40vw}}.section__hr{border: none; border-bottom: 2px solid #8d6dff; opacity: .3; margin: 3ch 0}.section .screens{font-size: var(--font-size-xl)}.section .screens__icon{margin-right: .5em; display: inline-block}.section .skills{font-size: var(--font-size-xl); text-align: center; color: #8d6dff; opacity: .3; padding-top: 10vh}.section .skills__icon{display: inline-block; padding: .3em; fill: inherit}.intro__section{display: -ms-grid; display: grid; place-items: center}@media only screen and (orientation: portrait){.intro__section{place-items: center start}}.intro__section .unique{font-family: "GT Flexa", sans-serif; font-weight: 200; font-style: normal; font-size: 7vw; max-inline-size: 18ch; line-height: .6; color: #fff}@media only screen and (orientation: portrait){.intro__section .unique{margin-top: -2ch}}.intro__section .claim{text-align: right; font-size: clamp(1em, 1vw, 1.2em); font-family: "GT Flexa", sans-serif; font-weight: 200; font-style: normal; line-height: 1.5}.intro__section .icon{font-size: 1em; -webkit-transform: scale(2) translateY(0.1em) !important; transform: scale(2) translateY(0.1em) !important; margin: 0 .5em}.web__section__content .list__icon{border-radius: 50%; border: calc(var(--font-size-s) * .2) solid #fff; display: -webkit-flex; display: flex; height: calc(var(--font-size-s) * 2.2); width: calc(var(--font-size-s) * 2.2); -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: relative; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); transition: .3s ease-in; -webkit-transform-origin: top; transform-origin: top}.web__section__content .list__text{margin-left: 1em; opacity: 0; -webkit-transform: rotate(3deg); transform: rotate(3deg); transition: .3s ease-in}.web__section__content .list__elem{-webkit-align-items: center; align-items: center}.web__section__content .list__elem:not(:first-child):after{position: absolute; content: ""; background-color: #fff; top: calc(var(--font-size-s) * -2); left: calc(var(--font-size-s) * 1.5); height: calc(var(--font-size-s) * 2); width: calc(var(--font-size-s) * .3); transition: .6s ease-in; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: scaleY(0); transform: scaleY(0)}.web__section__content .list__elem .list__icon .icon{fill: #d405fd; opacity: 0; -webkit-transform: rotate(30deg); transform: rotate(30deg); transition: .3s ease-in; transition-delay: .3s}.web__section__content .list__elem.active:not(:first-child):after{-webkit-transform: scaleY(1); transform: scaleY(1)}.web__section__content .list__elem.active .list__icon{opacity: 1; -webkit-transform: scale(1); transform: scale(1)}.web__section__content .list__elem.active .list__icon .icon{fill: #d405fd; opacity: 1; -webkit-transform: rotate(0); transform: rotate(0)}.web__section__content .list__elem.active .list__text{opacity: 1; -webkit-transform: rotate(0); transform: rotate(0)}.studio__section__content{height: 100%; min-height: calc(100vh - (calc(var(--body-padding) * 2.2))); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between}.studio__section .list{margin-top: 3ch}.studio__section__trusted{color: rgba(212, 5, 253, .4); color: #b274c5; overflow: hidden}@media screen and (min-width: 1500px){.studio__section__trusted{margin-left: calc(var(--body-padding) * -1.5)}}.studio__section__trusted__title{font-family: "GT Flexa", sans-serif; font-weight: normal; font-style: normal}.studio__section__trusted__names{font-size: var(--font-size-l); white-space: nowrap}