*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;font-family:'Inter',Arial,Helvetica,sans-serif}

body{
  background:#03070B;
  color:#fff;
  overflow-x:hidden;
}

.site{
  width:100%;
  max-width:520px;
  min-height:100vh;
  margin:0 auto;
  padding:24px 19px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ===== Logo ===== */
.logo{
  width:min(300px,68%);
  height:auto;
  margin:0 auto 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  letter-spacing:-1px;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ===== Panel (main container) ===== */
.panel{
  width:100%;
  padding:16px;
  border:2px solid #7B5FE8;
  border-radius:21px;
  background:#101820;
  box-shadow:0 0 14px rgba(77,163,217,.15);
  animation:panelBorderPulse 2.5s ease-in-out infinite;
}
@keyframes panelBorderPulse{
  0%,100%{border-color:#7B5FE8}
  50%{border-color:#C4B5FD}
}

/* ===== Banner ===== */
.banner{
  width:100%;
  aspect-ratio:1/1;
  border:1px solid #7B5FE8;
  border-radius:12px;
  overflow:hidden;
  background:#132B3A;
}
.banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Buttons ===== */
.buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:13px 0 0;
}
.button{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  border:1px solid #C4B5FD;
  border-radius:10px;
  background:linear-gradient(180deg,#A78BFA,#7B5FE8);
  animation:buttonFlicker 3.2s infinite;
}
.buttons a:nth-child(2){
  animation-delay:.5s;
}
@keyframes buttonFlicker{
  0%,100%{filter:brightness(1)}
  4%{filter:brightness(1.6)}
  6%{filter:brightness(1)}
  46%{filter:brightness(1)}
  48%{filter:brightness(1.5)}
  50%{filter:brightness(1)}
}

/* ===== Info section ===== */
.info{
  margin-top:10px;
  border:1px solid #7B5FE8;
  border-radius:10px;
  overflow:hidden;
  background:#081018;
}
.info-head{
  height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #304653;
  color:#DCE5EA;
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
}
.info-table{
}
.info-row{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid rgba(120,147,168,.20);
}
.info-row:last-child{
  border-bottom:none;
}
.info-title{
  flex:1;
  padding:12px 14px;
  color:#EAF4FA;
  font-size:13px;
  font-weight:900;
  letter-spacing:.5px;
  position:relative;
}
.info-title::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:1px;
  background:rgba(120,147,168,.30);
}
.info-desc{
  flex:1;
  padding:12px 14px;
  text-align:right;
  color:#FFFFFF;
  font-size:13px;
  font-weight:700;
}
.info-row a{
  flex:1;
  padding:12px 14px;
  text-align:right;
  text-decoration:none;
  animation:linkBlink 1.4s steps(1) infinite;
}
@keyframes linkBlink{
  0%,49%{color:#7B5FE8}
  50%,100%{color:#FFFFFF}
}
.info-row a .info-desc{
  padding:0;
  flex:none;
  color:inherit;
}

/* ===== Footer ===== */
.footer{
  padding:12px 4px 0;
  text-align:center;
  color:#78909E;
  font-size:10px;
  font-weight:700;
}

/* ===== Responsive ===== */
@media(max-width:360px){
  .site{padding-left:10px;padding-right:10px}
  .panel{padding:11px}
}

/* ===== Particles ===== */
.particles{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.particles i{
  position:absolute;
  display:block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#c4b5fd;
  box-shadow:0 0 6px rgba(196,181,253,.9),0 0 12px rgba(123,95,232,.5);
  opacity:0;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.p-up{ animation-name:pUp; animation-duration:8s; }
.p-down{ animation-name:pDown; animation-duration:8s; }
.p-out-left{ animation-name:pOutLeft; animation-duration:9s; }
.p-out-right{ animation-name:pOutRight; animation-duration:9s; }

@keyframes pUp{
  0%{transform:translateY(20px) scale(.4);opacity:0}
  15%{opacity:.9}
  50%{transform:translateY(-60px) scale(1);opacity:.7}
  85%{opacity:.3}
  100%{transform:translateY(-140px) scale(.3);opacity:0}
}
@keyframes pDown{
  0%{transform:translateY(-20px) scale(.4);opacity:0}
  15%{opacity:.9}
  50%{transform:translateY(60px) scale(1);opacity:.7}
  85%{opacity:.3}
  100%{transform:translateY(140px) scale(.3);opacity:0}
}
@keyframes pOutLeft{
  0%{transform:translateX(0) scale(.4);opacity:0}
  15%{opacity:.9}
  50%{transform:translateX(-50px) scale(1);opacity:.7}
  85%{opacity:.3}
  100%{transform:translateX(-110px) scale(.3);opacity:0}
}
@keyframes pOutRight{
  0%{transform:translateX(0) scale(.4);opacity:0}
  15%{opacity:.9}
  50%{transform:translateX(50px) scale(1);opacity:.7}
  85%{opacity:.3}
  100%{transform:translateX(110px) scale(.3);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .particles i{
    animation:none;
    opacity:.4;
  }
}

/* ===== Entrance: elements fade + slide up one by one on load ===== */
.ent{
  opacity:0;
  transform:translateY(16px);
  animation:entIn .6s ease forwards;
  animation-delay:var(--d,0s);
}
@keyframes entIn{
  to{opacity:1;transform:translateY(0)}
}

/* ===== Banner shimmer ===== */
.banner{
  position:relative;
}
.banner::after{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-45%;
  width:40%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(196,181,253,.25),transparent);
  animation:bannerShimmer 4s ease-in-out infinite;
}
@keyframes bannerShimmer{
  0%,20%{left:-100%;opacity:0}
  35%{opacity:1}
  55%{left:100%;opacity:0}
  100%{left:100%;opacity:0}
}