@font-face{
  font-family:'Nadea';
  src:url('../fonts/nadea/Nadea-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face{
  font-family:'Nadea';
  src:url('../fonts/nadea/Nadea-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,
body.wibe-landing-page{height:100%;overflow:hidden}
body.wibe-landing-page,
body.wibe-landing-page #page{
  background:#000;
  font-family:'Zalando Sans',sans-serif;
  margin:0
}

#scroll-section{position:relative;height:100vh;height:100dvh}
#sticky-wrap{position:relative;height:100%;overflow:hidden;background:#000}

#portal-scene{position:absolute;inset:0;transform-origin:center center}
.pf{position:absolute;overflow:hidden;will-change:transform}

#f1{inset:0;border-radius:0;background:#000;overflow:hidden}
.f1-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to right,#542cd2 0%,#3a229e 20%,#28176b 50%,#150b42 75%,#060313 100%);
  filter:blur(30px);opacity:.88
}
.f1-light{position:absolute;inset:0;pointer-events:none;z-index:1}

#f2{
  inset:30px;border-radius:50px;background:#000;border:1.5px solid rgba(91,58,195,.85);
  box-shadow:0 0 37px 11px rgba(59,35,158,.55),0 0 77px 24px rgba(59,35,158,.2)
}
#f3{
  inset:62px;border-radius:39px;background:#000;border:1.5px solid rgba(60,36,145,.8);
  box-shadow:0 0 35px 9px rgba(40,24,107,.55),0 0 69px 21px rgba(40,24,107,.2)
}
#f4{
  inset:94px;border-radius:29px;background:#000;border:1.5px solid rgba(40,22,100,.75);
  box-shadow:0 0 32px 8px rgba(22,12,66,.55),0 0 64px 19px rgba(22,12,66,.2)
}
#f5{
  inset:126px;border-radius:18px;background:#000;border:1.5px solid rgba(22,10,55,.7);
  box-shadow:0 0 28px 6px rgba(12,6,40,.55),0 0 52px 14px rgba(12,6,40,.2)
}
#portal-center{position:absolute;inset:158px;border-radius:14px;background:#000;z-index:2;will-change:transform}

@keyframes pulse-f5{
  0%,100%{box-shadow:0 0 28px 6px rgba(12,6,40,.55),0 0 52px 14px rgba(12,6,40,.2)}
  50%{box-shadow:0 0 40px 12px rgba(20,10,60,.85),0 0 72px 22px rgba(12,6,40,.4)}
}
@keyframes pulse-f4{
  0%,100%{box-shadow:0 0 32px 8px rgba(22,12,66,.55),0 0 64px 19px rgba(22,12,66,.2)}
  50%{box-shadow:0 0 44px 14px rgba(30,16,88,.8),0 0 84px 26px rgba(22,12,66,.38)}
}
@keyframes pulse-f3{
  0%,100%{box-shadow:0 0 35px 9px rgba(40,24,107,.55),0 0 69px 21px rgba(40,24,107,.2)}
  50%{box-shadow:0 0 48px 15px rgba(50,30,130,.75),0 0 90px 28px rgba(40,24,107,.36)}
}
@keyframes pulse-f2{
  0%,100%{box-shadow:0 0 37px 11px rgba(59,35,158,.55),0 0 77px 24px rgba(59,35,158,.2)}
  50%{box-shadow:0 0 52px 18px rgba(72,44,180,.72),0 0 98px 32px rgba(59,35,158,.34)}
}
#f5{animation:pulse-f5 3.2s ease-in-out 1 forwards}
#f4{animation:pulse-f4 3.2s ease-in-out .4s 1 forwards}
#f3{animation:pulse-f3 3.2s ease-in-out .8s 1 forwards}
#f2{animation:pulse-f2 3.2s ease-in-out 1.2s 1 forwards}

.grain{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:3;
  opacity:1;background-repeat:repeat;background-size:200px 200px;mix-blend-mode:overlay
}
#noise-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:100;opacity:.04
}

#header-content{
  position:absolute;inset:158px;border-radius:14px;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:2rem;will-change:transform;pointer-events:auto
}
.hero-video{width:min(100%,500px);max-height:200px;height:auto;display:block}
.contact{
  margin-top:clamp(48px,8vw,64px);
  opacity:0;
  transition:opacity .7s ease .15s
}
.contact.contact--visible{opacity:1}

.linkedin-link{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 32px;
  color:#f4df3f;text-decoration:underline;transition:opacity .2s ease
}
.linkedin-link:hover{opacity:.8}
.linkedin-link img{width:24px;height:24px;display:block}
.linkedin-link span{font-size:clamp(16px,2vw,20px);color:#f4df3f}

.contact h2{
  margin:0 0 24px;
  font-family:'Nadea',sans-serif;
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  color:#fff
}
.contact p{margin:0 0 16px;font-size:clamp(16px,2vw,20px);line-height:1.6;color:#d9d9d9}
.contact a{color:#f4df3f;text-decoration:underline}

.gyro-enable{
  position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  padding:0 24px 28px;border:0;cursor:pointer;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 45%);
  color:rgba(220,210,255,.92);
  font-family:'Zalando Sans',sans-serif;font-size:clamp(.8rem,2.8vw,.9rem);
  text-align:center;line-height:1.4
}
.gyro-enable[hidden]{display:none!important}

@media(max-width:600px){
  #f2{inset:18px}
  #f3{inset:36px}
  #f4{inset:54px}
  #f5{inset:72px;border-radius:12px}
  #portal-center,#header-content{inset:90px}
}

@media(prefers-reduced-motion:reduce){
  #f5,#f4,#f3,#f2{animation:none !important}
  .contact{opacity:1;transition:none}
  #noise-canvas{display:none}
}