html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020617;
  font-family:"Orbitron","Rajdhani","Segoe UI",Arial,sans-serif;
}

.home-stage{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#020617;
}

.panel{
  position:absolute;
  top:0;
  height:100vh;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  transition:filter .35s ease, opacity .35s ease, transform .45s ease;
}

.panel-profile{
  left:-11vw;
  width:48vw;
  clip-path:polygon(0 0,100% 0,66% 100%,0 100%);
}

.panel-ai{
  left:22vw;
  width:56vw;
  clip-path:polygon(34% 0,100% 0,66% 100%,0 100%);
}

.panel-future{
  right:-7vw;
  width:49vw;
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
}

.panel img{
  position:absolute;
  top:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  max-width:none;
  transition:transform .55s ease, filter .45s ease;
}

.panel-profile img{left:11vw}
.panel-ai img{left:-22vw}
.panel-future img{right:7vw}

.panel-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(2,6,23,.58);
  transition:background .35s ease, box-shadow .35s ease;
}

.panel h1{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:80%;
  max-width:520px;
  margin:0;
  transform:translate(-50%,-50%) scale(.75);
  color:white;
  font-size:clamp(28px,3.4vw,58px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  white-space:normal;
  font-weight:900;
  opacity:0;
  filter:blur(10px);
  transition:opacity .35s ease, transform .45s ease, filter .35s ease, text-shadow .35s ease;
}

.home-stage:hover .panel{
  filter:saturate(.35) brightness(.40);
  opacity:.75;
}

.home-stage .panel:hover{
  z-index:10;
  opacity:1;
  filter:saturate(1.25) brightness(1.12);
}

.panel:hover img{
  transform:scale(1.06);
}

.panel:hover h1{
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,-50%) scale(1);
}

.panel-profile:hover .panel-shade{
  background:linear-gradient(105deg,rgba(0,255,255,.22),rgba(2,6,23,.12));
  box-shadow:inset 0 0 220px rgba(0,255,255,.55);
}

.panel-ai:hover .panel-shade{
  background:linear-gradient(105deg,rgba(59,130,246,.18),rgba(139,92,246,.24));
  box-shadow:inset 0 0 220px rgba(99,102,241,.60);
}

.panel-future:hover .panel-shade{
  background:linear-gradient(105deg,rgba(251,191,36,.18),rgba(249,115,22,.24));
  box-shadow:inset 0 0 220px rgba(251,146,60,.60);
}

.panel-profile:hover h1{
  text-shadow:0 0 20px rgba(34,211,238,1),0 0 70px rgba(34,211,238,.75);
}

.panel-ai:hover h1{
  text-shadow:0 0 20px rgba(129,140,248,1),0 0 80px rgba(168,85,247,.75);
}

.panel-future:hover h1{
  text-shadow:0 0 20px rgba(251,191,36,1),0 0 80px rgba(249,115,22,.75);
}

.panel::after{
  content:"";
  position:absolute;
  top:-18%;
  right:14%;
  width:36px;
  height:140%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.82),rgba(34,211,238,.56),transparent);
  transform:rotate(19deg);
  opacity:.30;
  z-index:4;
  pointer-events:none;
}

.panel-ai::after{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.78),rgba(129,140,248,.58),transparent);
}

.panel-future::after{
  display:none;
}

@media(max-width:760px){
  html,body{
    overflow:hidden;
  }

  .home-stage{
    display:flex;
    flex-direction:column;
  }

  .panel{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:100vw;
    height:33.333vh;
    clip-path:none;
    filter:saturate(.70) brightness(.68);
    opacity:1;
    background-image:url("/home/images/homepage-fast.jpg");
    background-size:auto 100vh;
    background-repeat:no-repeat;
  }

  .panel-profile{
    background-position:left 35%;
  }

  .panel-ai{
    background-position:center center;
  }

  .panel-future{
    background-position:right bottom;
  }

  .panel img{
    display:none;
  }

  .panel-shade{
    background:rgba(2,6,23,.38);
  }

  .panel h1{
    opacity:.82;
    filter:blur(0);
    transform:translate(-50%,-50%) scale(.86);
    font-size:clamp(26px,8vw,42px);
    width:90%;
    max-width:none;
    line-height:1;
  }

  .home-stage:hover .panel,
  .home-stage .panel:hover{
    filter:saturate(.70) brightness(.68);
    opacity:1;
  }

  .panel:hover h1{
    transform:translate(-50%,-50%) scale(1);
  }

  .panel-profile{
    animation:mobilePanelPulseCyan 6s infinite ease-in-out;
  }

  .panel-ai{
    animation:mobilePanelPulseViolet 6s infinite ease-in-out;
    animation-delay:2s;
  }

  .panel-future{
    animation:mobilePanelPulseGold 6s infinite ease-in-out;
    animation-delay:4s;
  }

  .panel-profile h1{
    animation:mobileTitlePulseCyan 6s infinite ease-in-out;
  }

  .panel-ai h1{
    animation:mobileTitlePulseViolet 6s infinite ease-in-out;
    animation-delay:2s;
  }

  .panel-future h1{
    animation:mobileTitlePulseGold 6s infinite ease-in-out;
    animation-delay:4s;
  }

  .panel-profile::after,
  .panel-ai::after,
  .panel-future::after{
    display:block;
    top:auto;
    bottom:-8px;
    left:0;
    right:auto;
    width:100%;
    height:14px;
    transform:none;
    opacity:.35;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  }
}

@keyframes mobilePanelPulseCyan{
  0%,100%{filter:saturate(.70) brightness(.68);box-shadow:none}
  10%,30%{filter:saturate(1.35) brightness(1.18);box-shadow:inset 0 0 120px rgba(34,211,238,.48)}
}

@keyframes mobilePanelPulseViolet{
  0%,100%{filter:saturate(.70) brightness(.68);box-shadow:none}
  10%,30%{filter:saturate(1.35) brightness(1.18);box-shadow:inset 0 0 120px rgba(129,140,248,.50)}
}

@keyframes mobilePanelPulseGold{
  0%,100%{filter:saturate(.70) brightness(.68);box-shadow:none}
  10%,30%{filter:saturate(1.35) brightness(1.18);box-shadow:inset 0 0 120px rgba(251,191,36,.50)}
}

@keyframes mobileTitlePulseCyan{
  0%,100%{opacity:.76;transform:translate(-50%,-50%) scale(.86);text-shadow:0 0 14px rgba(34,211,238,.55)}
  10%,30%{opacity:1;transform:translate(-50%,-50%) scale(1.05);text-shadow:0 0 22px rgba(34,211,238,1),0 0 68px rgba(34,211,238,.8)}
}

@keyframes mobileTitlePulseViolet{
  0%,100%{opacity:.76;transform:translate(-50%,-50%) scale(.86);text-shadow:0 0 14px rgba(129,140,248,.55)}
  10%,30%{opacity:1;transform:translate(-50%,-50%) scale(1.05);text-shadow:0 0 22px rgba(129,140,248,1),0 0 68px rgba(168,85,247,.8)}
}

@keyframes mobileTitlePulseGold{
  0%,100%{opacity:.76;transform:translate(-50%,-50%) scale(.86);text-shadow:0 0 14px rgba(251,191,36,.55)}
  10%,30%{opacity:1;transform:translate(-50%,-50%) scale(1.05);text-shadow:0 0 22px rgba(251,191,36,1),0 0 68px rgba(249,115,22,.8)}
}