:root{
  --bg:#000000;
  --panel:rgba(255,255,255,.02);
  --line:rgba(255,255,255,.08);
  --text:#d2d2d7;
  --muted:rgba(210,210,215,.72);
  --hi:#f5f5f7;
  --accent:#2f80ff;
  --shadow:0 30px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  letter-spacing:.2px;
}

a{color:inherit;text-decoration:none}

.container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px 16px 0;
}

.card{
  width:min(860px,100%);
  padding:0 8px;
}

.hero{
  min-height:68vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:translateY(-36px);
}

.brandText{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:0;
  margin-bottom:26px;
  user-select:none;
  line-height:1;
}

.brandMain,
.brandDotCom{
  font-family:"Orbitron", sans-serif;
  font-style:normal;
  color:var(--hi);
}

.brandMain{
  font-size:clamp(48px, 9vw, 108px);
  font-weight:800;
  letter-spacing:.08em;
}

.brandDotCom{
  font-size:clamp(18px, 3.2vw, 34px);
  font-weight:700;
  letter-spacing:.04em;
  margin-left:4px;
  opacity:.95;
}

.heroLabel{
  margin-bottom:10px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(210,210,215,.7);
}

.ip{
  font-size:72px;
  line-height:1.05;
  font-weight:500;
  color:var(--hi);
  letter-spacing:-.02em;
}

.heroActions{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.copyBtnText{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:rgba(245,245,247,.82);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
}

.copyBtnText:hover{
  border-color:rgba(47,128,255,.7);
  background:rgba(47,128,255,.10);
}

.copyBtnText:active{
  transform:translateY(1px);
}

.status{
  text-align:center;
  margin-top:12px;
  min-height:18px;
  color:rgba(210,210,215,.72);
  font-size:13px;
}

.footer{
  padding:22px 28px 28px;
  color:rgba(210,210,215,.7);
}

.footerRule{
  border-top:1px solid var(--line);
  margin-bottom:16px;
}

.footerTitle{
  text-align:center;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:12px;
}

.footerLinks{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  font-size:14px;
}

.footerLinks a{
  padding:6px 8px;
  border-radius:10px;
}

.footerLinks a:hover{
  background:rgba(255,255,255,.03);
}

.footerMeta{
  text-align:center;
  font-size:12px;
  color:rgba(210,210,215,.55);
  margin-top:10px;
}

@media(max-width:640px){
  .main{
    padding:16px 16px 0;
  }

  .hero{
    min-height:62vh;
    transform:translateY(-18px);
  }

  .brandText{
    margin-bottom:22px;
  }

  .ip{
    font-size:44px;
  }
}