:root{
  --bg:#050505;
  --red:#ed1017;
  --white:#fff;
  --muted:#d7d7d7;
}

*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
html{background:var(--bg)}
body{
  min-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%,rgba(237,16,23,.075),transparent 30%),
    linear-gradient(145deg,#090909 0%,#030303 55%,#080808 100%);
  color:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

button{font:inherit}
.background{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.background:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.19;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at center,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at center,#000 0%,transparent 72%);
}
.glow{
  position:absolute;
  width:min(72vw,900px);
  aspect-ratio:1;
  left:50%;top:48%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,16,23,.10) 0%,rgba(237,16,23,.025) 42%,transparent 70%);
  filter:blur(10px);
}
.slash{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.18;transform:rotate(-24deg)}
.slash-one{width:50vw;right:-12vw;top:23%}
.slash-two{width:42vw;left:-10vw;bottom:18%}

.language-wrap{
  position:fixed;
  z-index:10;
  top:max(22px,env(safe-area-inset-top));
  right:max(24px,env(safe-area-inset-right));
}
.language-switcher{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(13,13,13,.78);
  box-shadow:0 14px 45px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.language-button{
  width:48px;
  height:36px;
  padding:4px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.68;
  transition:opacity .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.language-button:hover{opacity:1;transform:translateY(-1px);background:rgba(255,255,255,.07)}
.language-button.active{
  opacity:1;
  background:rgba(237,16,23,.16);
  border-color:rgba(237,16,23,.88);
  box-shadow:0 0 0 1px rgba(237,16,23,.14),0 6px 20px rgba(237,16,23,.15);
}
.language-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.language-button img{
  display:block;
  width:31px;
  height:21px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.48);
}

.coming-soon{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.5vw,24px);
  padding:100px 24px 72px;
  text-align:center;
}
.logo{
  display:block;
  width:min(640px,74vw);
  max-height:clamp(220px,46vh,520px);
  object-fit:contain;
  filter:drop-shadow(0 24px 65px rgba(0,0,0,.6));
  animation:logoIn .8s cubic-bezier(.2,.75,.2,1) both;
}
h1{
  margin:clamp(-24px,-2vw,-6px) 0 0;
  color:var(--muted);
  font-size:clamp(24px,3.1vw,45px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  animation:messageIn .8s .12s cubic-bezier(.2,.75,.2,1) both;
}
h1:after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin:22px auto 0;
  background:var(--red);
  border-radius:999px;
}

@keyframes logoIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes messageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .language-wrap{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
  .language-switcher{gap:4px;padding:5px}
  .language-button{width:43px;height:33px;padding:4px}
  .language-button img{width:28px;height:19px}
  .coming-soon{padding:90px 18px 58px}
  .logo{width:min(92vw,520px);max-height:47vh}
  h1{font-size:clamp(22px,7vw,34px);letter-spacing:.025em}
}

@media (prefers-reduced-motion:reduce){
  .logo,h1{animation:none}
  .language-button{transition:none}
}