.hero-apps{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-app{position:absolute;display:grid;place-items:center;width:124px;aspect-ratio:1;border:1px solid #fff9;border-radius:30px;background:linear-gradient(145deg,#fffffc,#e8e8df);box-shadow:inset 0 2px 2px #fff,0 8px 0 #cdd0c5,0 20px 28px #535b412b;transform:perspective(500px) rotateY(-12deg) rotate(-12deg)}
.hero-app::before{content:"";width:64%;height:64%;background:var(--app-color);mask:var(--app-logo) center/contain no-repeat;-webkit-mask:var(--app-logo) center/contain no-repeat}
.hero-app img{width:76%;height:76%;object-fit:contain}
.hero-app--nextcloud{--float-delay:-1s;--app-logo:url('./assets/logos/nextcloud.svg');--app-color:#0082c9;left:8%;top:190px}
.hero-app--onlyoffice{--float-duration:9s;--float-delay:-4s;--float-x:-6px;--app-logo:url('./assets/logos/onlyoffice.svg');--app-color:#e97736;right:8%;top:188px;width:138px;transform:perspective(500px) rotateY(16deg) rotate(14deg)}
.hero-app--bookstack{--float-duration:7s;--float-delay:-2s;--app-logo:url('./assets/logos/bookstack.svg');--app-color:#0288d1;left:2%;bottom:80px;width:142px;transform:perspective(500px) rotateY(18deg) rotate(-17deg)}
.hero-app--mail{--float-duration:8.5s;--float-delay:-6s;--float-x:-5px;right:3%;bottom:66px;width:138px;transform:perspective(500px) rotateY(-14deg) rotate(12deg)}
.hero-app--mail::before{display:none}
.hero-app--mail img{width:96%;height:96%}
.hero-app--jitsi{--float-duration:9.5s;--float-delay:-3s;--app-logo:url('./assets/logos/jitsi.svg');--app-color:#609ad2;left:25%;bottom:24px;width:98px;border-radius:26px;transform:perspective(500px) rotateY(-10deg) rotate(16deg)}
.hero-app--penpot{--float-duration:7.5s;--float-delay:-5s;--float-x:-4px;--app-logo:url('./assets/logos/penpot.svg');--app-color:#34343c;right:25%;bottom:20px;width:92px;border-radius:24px;transform:perspective(500px) rotateY(14deg) rotate(-9deg)}
#hero-tagline{display:flex;align-items:center;justify-content:center;text-wrap:balance}
.hero-copy h1{max-width:1000px;margin-inline:auto;font-size:52px;line-height:56px;text-wrap:balance}
@media(min-width:1504px){.hero-copy h1{font-size:60px;line-height:64px}}
@media(max-width:850px){.hero-copy h1{padding-inline:24px;font-size:40px;line-height:44px}}
@media(max-width:540px){.hero-shell{height:auto;min-height:680px}.hero-copy{position:relative;top:auto;margin-top:106px;padding-bottom:32px}.hero-copy h1{padding-inline:0;font-size:32px;line-height:36px}}

@media(min-width:1504px){.hero-app--nextcloud{top:220px}.hero-app--onlyoffice{top:214px}}
@media(max-width:1100px){.hero-app--nextcloud{left:4%;width:108px}.hero-app--onlyoffice{right:4%;width:112px}.hero-app--bookstack,.hero-app--mail{width:112px}}
@media(max-width:850px){.hero-app--nextcloud,.hero-app--onlyoffice{top:106px;width:88px;border-radius:24px}.hero-app--nextcloud{left:10%}.hero-app--onlyoffice{right:10%}.hero-app--bookstack,.hero-app--mail{bottom:24px;width:86px;border-radius:24px}.hero-app--bookstack{left:4%}.hero-app--mail{right:4%}.hero-app--jitsi,.hero-app--penpot{display:none}}
@media(max-width:540px){.hero-app--nextcloud,.hero-app--onlyoffice{top:106px;width:74px;border-radius:20px}.hero-app--nextcloud{left:14%}.hero-app--onlyoffice{right:14%}.hero-app--bookstack,.hero-app--mail{bottom:18px;width:68px;border-radius:18px}.hero-app--bookstack{left:3%}.hero-app--mail{right:3%}.hero-app{box-shadow:inset 0 2px 2px #fff,0 5px 0 #cdd0c5,0 12px 18px #535b412b}}

@media(max-width:540px){.hero-app--bookstack,.hero-app--mail{display:none}}

@keyframes hero-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:var(--float-x,6px) -18px;rotate:1deg}}
@media(prefers-reduced-motion:no-preference){.hero-app{animation:hero-float var(--float-duration,8s) ease-in-out var(--float-delay,0s) infinite}}
