body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    background: #0b0b0b;
    color: white;
  }
  
  /* HERO */
  .hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #000, #1a0000);
    border-bottom: 2px solid #ff0000;
  }
  
  .hero h1 {
    font-size: 50px;
    color: #ff0000;
    letter-spacing: 3px;
  }
  
  .hero p {
    color: #aaa;
  }
  
  /* CONTAINER */
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 50px;
  }
  
  /* CARD */
  .card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
  }
  
  /* RED GLOW EFFECT */
  .card::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    filter: blur(80px);
    top: -40px;
    right: -40px;
    opacity: 0.2;
  }
  
  /* IMAGE PLACEHOLDER */
  .img {
    height: 120px;
    background: #1a1a1a;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #333;
  }
  
  /* TITLE */
  .card h3 {
    margin: 10px 0;
    color: #fff;
  }
  
  /* BUTTON */
  .btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border: 1px solid red;
    color: red;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s;
  }
  
  .btn:hover {
    background: red;
    color: black;
  }
  
  /* HOVER EFFECT */
  .card:hover {
    transform: translateY(-10px);
    border-color: red;
  }