@font-face {
    font-family: 'Vazir';
    src: url('Vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Vazir', 'Arial', sans-serif;
  background: linear-gradient(145deg, #0f2c1d, #1db954);
  color: #fff;
  direction: rtl;
  line-height: 1.6;
}

.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

/* Header */
.landing-header {
  padding: 60px 20px;
}

.landing-header h1 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.landing-header p {
  font-size: 1.3rem;
  color: #ddd;
  margin-bottom: 30px;
}

.btn-primary {
  background: #1ed760;
  padding: 15px 40px;
  border-radius: 50px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  transition: transform 0.2s, background 0.2s;
}

.btn-primary:hover {
  transform: scale(1.05);
  background: #1db954;
}

/* Features */
.features {
  margin: 60px 0;
}

.features h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #fff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 25px;
}

.feature-card {
  background: rgba(0,0,0,0.6);
  padding: 25px;
  border-radius: 20px;
  transition: all 0.3s;
}

.feature-card:hover {
  background: rgba(29,185,84,0.5);
  transform: translateY(-10px);
}

.feature-card h3 {
  margin-bottom: 10px;
}

.feature-card p {
  color: #ddd;
  font-size: 0.95rem;
}

/* CTA Section */
.cta {
  background: rgba(0,0,0,0.7);
  padding: 50px 20px;
  border-radius: 20px;
  margin-bottom: 50px;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.cta p {
  font-size: 1rem;
  margin-bottom: 25px;
  color: #eee;
}

/* Signup */
.signup {
  margin-bottom: 60px;
}

.signup h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.signup p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #ccc;
}

.signup button {
  background: #1db954;
  border: none;
  padding: 15px 35px;
  border-radius: 50px;
  cursor: not-allowed;
  opacity: 0.7;
  font-size: 1rem;
  font-family: 'Vazir';
}

/* Footer */
footer {
  margin-top: 50px;
  font-size: 0.9rem;
  color: #aaa;
}

/* Responsive */
@media(max-width: 900px){
  .feature-grid { grid-template-columns: 1fr; }
  .landing-header h1 { font-size: 2.2rem; }
  .landing-header p { font-size: 1.1rem; }
  .cta h2 { font-size: 1.7rem; }
}