:root{
  --bg:#050817;
  --bg2:#070b22;
  --pink:#f3166a;
  --purple:#6d1bb3;
  --text:#b9b7c3;
}

*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
html{background:var(--bg)}
body{
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--bg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.landing{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:
    max(28px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}

.tech-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(163,12,145,.22), transparent 32%),
    radial-gradient(circle at 8% 84%, rgba(160,14,151,.28), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(17,35,82,.28), transparent 44%),
    linear-gradient(145deg,#030615 0%,#07102c 48%,#040714 100%);
}

.dots{
  position:absolute;
  inset:0;
  opacity:.25;
  background-image:radial-gradient(circle,rgba(99,83,255,.75) 1px,transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,.9) 48%,transparent 86%);
}

.circuit{
  position:absolute;
  width:min(46vw,620px);
  aspect-ratio:600/420;
  background:url("../img/circuit.svg") center/contain no-repeat;
  opacity:.55;
}
.circuit--tl{left:-5vw;top:-4vh}
.circuit--br{right:-5vw;bottom:-4vh;transform:rotate(180deg)}

.glow{
  position:absolute;
  border-radius:999px;
  filter:blur(105px);
  opacity:.42;
}
.glow--top{
  width:min(42vw,520px);
  aspect-ratio:1;
  right:-12vw;top:-18vh;
  background:#9b0f80;
}
.glow--bottom{
  width:min(48vw,620px);
  aspect-ratio:1;
  left:-19vw;bottom:-27vh;
  background:#a20b8f;
}

.identity{
  width:min(68vw,760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:translateY(-1vh);
}

.logo{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 38px rgba(0,0,0,.22));
}

.accent{
  display:block;
  width:64px;
  height:2px;
  margin-top:clamp(32px,5vh,58px);
  background:var(--pink);
  box-shadow:0 0 16px rgba(243,22,106,.35);
}

.website{
  margin-top:clamp(34px,5vh,58px);
  color:#a8a5b3;
  font-size:clamp(13px,1.25vw,18px);
  font-weight:400;
  letter-spacing:.03em;
  text-decoration:none;
  transition:color .2s ease,opacity .2s ease;
}
.website:hover{color:#fff}

@media (max-width:900px){
  .identity{width:min(78vw,650px)}
  .circuit{width:70vw;opacity:.46}
  .circuit--tl{left:-18vw;top:-3vh}
  .circuit--br{right:-18vw;bottom:-2vh}
  .glow--top{width:70vw;right:-32vw}
  .glow--bottom{width:80vw;left:-38vw}
}

@media (max-width:600px){
  .landing{
    padding:
      max(24px,env(safe-area-inset-top))
      max(18px,env(safe-area-inset-right))
      max(24px,env(safe-area-inset-bottom))
      max(18px,env(safe-area-inset-left));
  }

  .identity{
    width:min(88vw,440px);
    transform:translateY(-2vh);
  }

  .accent{
    width:52px;
    margin-top:34px;
  }

  .website{
    margin-top:34px;
    font-size:13px;
  }

  .dots{
    background-size:16px 16px;
    opacity:.22;
  }

  .circuit{
    width:96vw;
    opacity:.38;
  }
  .circuit--tl{left:-45vw;top:-2vh}
  .circuit--br{right:-46vw;bottom:-2vh}

  .glow--top{
    width:95vw;
    right:-58vw;
    top:-12vh;
  }
  .glow--bottom{
    width:115vw;
    left:-72vw;
    bottom:-17vh;
  }
}

@media (max-height:520px) and (orientation:landscape){
  .identity{width:min(54vw,580px);transform:none}
  .accent{margin-top:18px}
  .website{margin-top:18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}