/* -------- رنگ‌ها و فونت -------- */
:root{
  --green:#00b055;
  --green-dark:#008e4a;
  --mint:#eaf9f1;
  --gray:#f4f4f6;
  --gray-hover:#e4e6ea;
  --text:#1a1a1a;
  --radius:16px;
  font-family:"Vazir",sans-serif
}

body{margin:0;background:#fff;color:var(--text);scroll-behavior:smooth}

/* -------- نوار بالایی -------- */
.topbar{
  display:flex;align-items:center;gap:1rem;
  padding:2rem 5rem;
  border-bottom:1px solid var(--gray);
  flex-wrap:wrap;
  position:sticky;
  top:0;
  background:#fff;
  z-index:100;
}

.logo{
  margin:0;
  font-size:1.7rem;
  font-weight:900;
  letter-spacing:-.5px;
  display:flex;
  align-items:center;
  gap:.5rem;
}

.logo-icon{
  width:32px;
  height:32px;
  object-fit:contain;
}

/* -------- تب‌ها -------- */
.tabs{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.tab{
  background:var(--gray);
  border:none;
  border-radius:var(--radius);
  padding:.55rem 1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s,color .2s;
  white-space:nowrap;
}

.tab:hover:not(.active){background:var(--gray-hover)}
.tab.active{background:var(--mint);color:var(--green)}

/* -------- جستجو -------- */
.search{
  flex:1;
  min-width:200px;
  margin-inline-start:auto;
  border:1px solid var(--gray);
  border-radius:var(--radius);
  padding:.55rem 1.1rem;
  font-size:.9rem;
  width:100%;
  max-width:400px;
}

/* -------- گرید کارت‌ها -------- */
.grid{
  padding:2rem;
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  max-width:1400px;
  margin:0 auto;
}

/* -------- کارت سرویس -------- */
.card{
  background:#fff;
  border:1px solid var(--gray);
  border-radius:var(--radius);
  box-shadow:0 3px 12px rgba(0,0,0,.05);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  transition:transform .25s ease,box-shadow .25s ease;
  height:100%;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.1)
}

/* آیکون گرد */
.icon-wrap{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--mint);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-inline:auto;
  color:var(--green);
  font-size:1.4rem;
}

/* عنوان کارت */
.title{
  margin:0;
  text-align:center;
  font-size:1.08rem;
  font-weight:800;
  word-break:break-word;
}

/* دسته‌ی لینک‌ها */
.links{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  justify-content:center;
  margin-top:auto;
}

/* -------- دکمه لینک‌ها -------- */
.btn{
  border:none;
  border-radius:var(--radius);
  padding:.38rem .85rem;
  font-size:.78rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s,transform .15s;
  min-width:60px;
  text-align:center;
}

.btn:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}

.btn.prod{
  background:var(--green);
  color:#fff;
}

.btn.prod:hover{background:var(--green-dark);transform:translateY(-1px)}

.btn.stage{
  background:var(--gray);
  color:var(--text);
}

.btn.stage:hover{background:var(--gray-hover);transform:translateY(-1px)}

/* -------- واکنش‌گرایی -------- */
@media(max-width:1200px){
  .grid{
    padding:2rem;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  }
}

@media(max-width:768px){
  .topbar{
    padding:1.5rem;
    gap:.75rem;
  }
  
  .logo{
    font-size:1.5rem;
  }
  
  .logo-icon{
    width:28px;
    height:28px;
  }
  
  .search{
    order:3;
    margin-top:.5rem;
    margin-inline-start:0;
    max-width:none;
  }
  
  .grid{
    padding:1.5rem;
    gap:1rem;
  }
  
  .card{
    padding:1.25rem;
  }
  
  .icon-wrap{
    width:50px;
    height:50px;
    font-size:1.2rem;
  }
}

@media(max-width:480px){
  .topbar{
    padding:1rem;
  }
  
  .logo{
    font-size:1.3rem;
  }
  
  .logo-icon{
    width:24px;
    height:24px;
  }
  
  .tabs{
    width:100%;
    justify-content:center;
  }
  
  .tab{
    flex:1;
    text-align:center;
    padding:.45rem .75rem;
    font-size:.9rem;
  }
  
  .grid{
    padding:1rem;
    grid-template-columns:1fr;
  }
  
  .card{
    padding:1rem;
  }
  
  .btn{
    padding:.3rem .6rem;
    font-size:.75rem;
  }
}