*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Vazirmatn',sans-serif;
  }
  
  body{
  background:#050505;
  overflow-x:hidden;
  color:white;
  min-height:100vh;
  }
  
  #particles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  }
  
  header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 8%;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,0,0,.2);
  }
  
  .logo{
  font-size:2rem;
  font-weight:900;
  color:#ff2323;
  text-shadow:0 0 25px red;
  }
  
  nav{
  display:flex;
  gap:15px;
  align-items:center;
  }
  
  nav a{
  text-decoration:none;
  color:white;
  transition:.3s;
  }
  
  nav a:hover{
  color:#ff2d2d;
  }
  
  nav button{
  background:linear-gradient(45deg,#ff0000,#870000);
  border:none;
  padding:12px 25px;
  border-radius:30px;
  color:white;
  cursor:pointer;
  }
  
  .hero{
  height:45vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  }
  
  .hero h1{
  font-size:6rem;
  font-weight:900;
  background:linear-gradient(to right,#ff0000,#fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: glow 2s infinite alternate;
  }
  
  @keyframes glow{
  from{
  filter:drop-shadow(0 0 15px red);
  }
  to{
  filter:drop-shadow(0 0 40px red);
  }
  }
  
  .hero p{
  font-size:1.2rem;
  margin-top:20px;
  color:#ccc;
  }
  
  .plans{
  padding:50px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  }
  
  .card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,0,0,.25);
  backdrop-filter:blur(25px);
  padding:35px;
  border-radius:25px;
  text-align:center;
  transition:.5s;
  }
  
  .card:hover{
  transform:translateY(-15px) rotateX(8deg);
  box-shadow:0 0 40px rgba(255,0,0,.6);
  }
  
  .glow{
  position:absolute;
  width:250px;
  height:250px;
  background:red;
  filter:blur(130px);
  opacity:.2;
  top:-100px;
  right:-100px;
  }
  
  .card h2{
  font-size:2rem;
  margin-bottom:20px;
  }
  
  .volume{
  font-size:3rem;
  font-weight:900;
  color:#ff2f2f;
  display:block;
  margin-bottom:20px;
  }
  
  .card h3{
  margin-bottom:20px;
  }
  
  .card button{
  width:100%;
  padding:15px;
  border:none;
  background:linear-gradient(45deg,#ff0000,#830000);
  color:white;
  border-radius:15px;
  cursor:pointer;
  font-size:1rem;
  }
  
  .featured{
  transform:scale(1.08);
  border:2px solid red;
  }
  
  .badge{
  position:absolute;
  top:15px;
  left:15px;
  background:red;
  padding:5px 15px;
  border-radius:20px;
  }


  /* footer */

  

  .footer-credit{
    text-align:center;
    padding:15px;
    font-size:14px;
    color:#888;
    border-top:1px solid #eee;
}

.footer-credit a{
    color:#0ea5e9;
    text-decoration:none;
    margin-right:8px;
}

.footer-credit a:hover{
    text-decoration:underline;
}