:root{
  --void:#0d0a16;
  --panel:rgba(24,18,36,0.72);
  --panel-edge:#3a2f52;
  --gold:#b98cf0;
  --gold-dim:#7d5fb0;
  --rust:#5b8dee;
  --cream:#ede7f5;
  --cream-dim:#b3a8c9;
  --patina:#8b7fbd;
}
*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background:var(--void);
  color:var(--cream);
  font-family:'Space Mono', monospace;
  overflow-x:hidden;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  position:relative;
}

/* фон */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(to bottom, rgba(10,8,20,0.35) 0%, rgba(10,8,20,0.55) 45%, rgba(10,8,20,0.88) 100%),
    url('./assets/bg.png');
  background-size:cover, cover;
  background-position:center center, center bottom;
  background-repeat:no-repeat, no-repeat;
  pointer-events:none;
  z-index:0;
}
/* полосы */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.12) 3px,
    rgba(0,0,0,0.12) 3px
  );
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:5;
  opacity:0.5;
}

.machine{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
}

.box{
  position:relative;
  background:var(--panel);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:2px solid var(--panel-edge);
  padding:36px 28px 32px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 20px 60px rgba(0,0,0,0.55);
}
.corner{
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid var(--gold-dim);
}
.corner.tl{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.corner.tr{top:-2px;right:-2px;border-left:none;border-bottom:none;}
.corner.bl{bottom:-2px;left:-2px;border-right:none;border-top:none;}
.corner.br{bottom:-2px;right:-2px;border-left:none;border-top:none;}

.eyebrow{
  text-align:center;
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--patina);
  margin:0 0 22px;
}

/* лампочка */
.lantern{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.lantern svg{
  filter:drop-shadow(0 0 6px rgba(155,140,240,0.55));
  animation:flicker 4.2s infinite ease-in-out;
}
@keyframes flicker{
  0%,100%{opacity:1;}
  3%{opacity:0.55;}
  6%{opacity:1;}
  46%{opacity:1;}
  49%{opacity:0.65;}
  52%{opacity:1;}
  78%{opacity:1;}
  80%{opacity:0.7;}
  82%{opacity:1;}
}

.avatar-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:20px;
}
.avatar-ring{
  width:112px;
  height:112px;
  border-radius:50%;
  padding:4px;
  background:conic-gradient(from 0deg, var(--gold), var(--rust), var(--patina), var(--gold));
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar-ring img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:var(--void);
  image-rendering:pixelated;
}

h1{
  font-family:'Silkscreen', monospace;
  font-size:20px;
  text-align:center;
  letter-spacing:0.04em;
  color:var(--gold);
  margin:0 0 6px;
  text-shadow:0 0 12px rgba(155,140,240,0.35);
}
.subname{
  text-align:center;
  font-size:12px;
  color:var(--cream-dim);
  margin:0 0 4px;
}
.tagline{
  text-align:center;
  font-size:12px;
  font-style:italic;
  color:var(--patina);
  margin:0 0 26px;
}

.divider{
  border:none;
  height:1px;
  background:linear-gradient(to right, transparent, var(--panel-edge), transparent);
  margin:0 0 24px;
}

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.link-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 16px;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--panel-edge);
  text-decoration:none;
  color:var(--cream);
  transition:border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  position:relative;
}
.link-btn:hover{
  border-color:var(--gold-dim);
  background:rgba(155,140,240,0.08);
  transform:translateX(2px);
}
.link-btn:active{
  transform:translateX(2px) scale(0.99);
}
.link-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--gold);
}
.link-icon svg{width:100%;height:100%;}
.link-text{flex:1;}
.link-label{
  display:block;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--patina);
  margin-bottom:2px;
}
.link-value{
  display:block;
  font-size:14px;
  color:var(--cream);
}
.link-arrow{
  color:var(--gold-dim);
  font-size:14px;
}

footer{
  text-align:center;
  margin-top:24px;
  font-size:10px;
  letter-spacing:0.15em;
  color:var(--panel-edge);
}
footer span{color:var(--patina);}

@media (max-width:420px){
  .box{padding:28px 20px 24px;}
}