*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#08080f;
  color:#f0f2ff;
  font-family:'Vazirmatn',sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  direction:rtl;
  overflow:hidden;
  position:relative;
}

/* Background */
.bg-grid{
  position:fixed;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(120,80,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,80,255,0.03) 1px, transparent 1px);
  background-size:50px 50px;
}
.bg-glow{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(120,60,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(60,120,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(180,60,255,0.05) 0%, transparent 70%);
}
.bg-lines{
  position:fixed;inset:0;z-index:0;overflow:hidden;
}
.line{
  position:absolute;height:1px;
  background:linear-gradient(90deg, transparent, rgba(150,100,255,0.15), transparent);
  animation:lineMove 8s linear infinite;
}
.line:nth-child(1){top:20%;width:100%;animation-delay:0s}
.line:nth-child(2){top:45%;width:100%;animation-delay:3s}
.line:nth-child(3){top:70%;width:100%;animation-delay:6s}
@keyframes lineMove{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Main */
.wrap{
  position:relative;z-index:2;
  text-align:center;
  padding:2.5rem 2rem;
  max-width:460px;
  width:100%;
}

/* Logo area */
.logo-ring{
  width:96px;height:96px;
  margin:0 auto 1.5rem;
  position:relative;
}
.logo-ring::before{
  content:'';position:absolute;inset:-3px;
  border-radius:28px;
  background:linear-gradient(135deg,#7c3aed,#3b82f6,#7c3aed);
  background-size:200% 200%;
  animation:gradRot 3s linear infinite;
  z-index:-1;
}
@keyframes gradRot{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.logo-inner{
  width:100%;height:100%;
  border-radius:26px;
  background:#0e0e1a;
  display:flex;align-items:center;justify-content:center;
}
.logo-inner svg{width:52px;height:52px}

/* Title */
.app-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.9rem;font-weight:700;
  margin-bottom:0.5rem;
  background:linear-gradient(135deg,#fff 0%,#c4b5fd 50%,#93c5fd 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-0.02em;
}
.app-desc{
  color:rgba(200,200,230,0.45);
  font-size:0.88rem;font-weight:300;
  margin-bottom:2.2rem;line-height:1.8;
}

/* Cards */
.cards{display:flex;gap:1rem}
.dl-card{
  flex:1;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:1.5rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:0.9rem;
  cursor:pointer;text-decoration:none;color:#f0f2ff;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  position:relative;overflow:hidden;
}
.dl-card::before{
  content:'';position:absolute;inset:0;border-radius:18px;
  opacity:0;transition:opacity 0.35s;
  background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(59,130,246,0.05));
}
.dl-card::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,0.5),transparent);
  opacity:0;transition:opacity 0.35s;
}
.dl-card:hover{
  transform:translateY(-5px);
  border-color:rgba(124,58,237,0.35);
  box-shadow:0 20px 50px rgba(124,58,237,0.15), 0 0 0 1px rgba(124,58,237,0.1);
}
.dl-card:hover::before,.dl-card:hover::after{opacity:1}

.icon-box{
  width:56px;height:56px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.2);
}
.icon-box svg{width:30px;height:30px}
.card-label{font-size:0.68rem;color:rgba(200,200,230,0.4);letter-spacing:0.05em}
.card-title{
  font-size:1rem;font-weight:600;
  background:linear-gradient(135deg,#c4b5fd,#93c5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* Footer */
.footer{
  margin-top:2rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,0.05);
  font-size:0.72rem;
  color:rgba(200,200,230,0.3);
  letter-spacing:0.04em;
}
.footer strong{color:rgba(196,181,253,0.6);font-weight:500}