:root{
  --bg:#0b0a10;
  --glow1:#ff5d7a;
  --accent:#8b5cf6;
  --text:#f4f2f7;
  --muted:#c9a9b2;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:radial-gradient(ellipse at center, #1a1620 0%, var(--bg) 70%);
  color:var(--text);
  font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  overflow:hidden;
}

.frame{
  position:relative;
  width:min(92vw,1100px);
  aspect-ratio:16/10;
  background:#0d0b12;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:48px 60px;
}

.logo{
  font-size:15px;
  letter-spacing:6px;
  font-weight:600;
  color:#eee;
  z-index:3;
}
.logo span{color:var(--accent);}

.eclipse{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  width:520px;
  height:520px;
  border-radius:50%;
  background:#0a090e;
  box-shadow:
    0 0 120px 60px rgba(255,93,122,0.35),
    0 0 220px 140px rgba(255,93,122,0.12);
  z-index:1;
}
.eclipse::before{
  content:"";
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(255,150,120,0.55), rgba(255,93,122,0.18) 45%, transparent 70%);
  filter:blur(2px);
  z-index:0;
}

.content{
  position:relative;
  z-index:3;
  margin-top:auto;
  margin-bottom:auto;
  text-align:center;
}

.coming-soon{
  font-size:clamp(28px,4vw,46px);
  font-weight:700;
  letter-spacing:18px;
  margin:0 0 0 18px;
  color:var(--text);
  text-shadow:0 0 30px rgba(255,255,255,0.25);
}

.footer{
  position:relative;
  z-index:3;
  text-align:center;
  margin-top:auto;
}
.footer p{
  font-size:12px;
  letter-spacing:4px;
  color:var(--muted);
  margin:0 0 18px;
}

.signup{
  display:flex;
  justify-content:center;
  gap:10px;
}
.signup input{
  width:280px;
  max-width:50vw;
  padding:14px 18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-size:13px;
  letter-spacing:1px;
  outline:none;
}
.signup input::placeholder{color:#7a7480;}
.signup input:focus{border-color:var(--accent);}

.signup button{
  padding:14px 26px;
  border-radius:24px;
  border:none;
  background:linear-gradient(135deg,var(--accent),#5b3df0);
  color:#fff;
  font-size:12px;
  letter-spacing:2px;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.signup button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(139,92,246,0.4);
}

.msg{
  margin-top:14px;
  font-size:12px;
  letter-spacing:1px;
  min-height:16px;
  color:#ffae5d;
}

@media (max-width:640px){
  .frame{padding:32px 24px;}
  .coming-soon{letter-spacing:8px;}
  .signup{flex-direction:column;align-items:center;}
  .signup input{width:80vw;max-width:280px;}
}