/* ==========================================================================
   01 - UTILITIES مشترک: دکمه‌ها، کارت‌ها، گریدها، انیمیشن ورود به صفحه
   این کلاس‌ها در چند بخش استفاده می‌شوند؛ اینجا مرکزی مدیریت می‌شوند.
   ========================================================================== */

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation:none !important; transition:none !important;}
}

/* دکمه‌ها */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 28px; border-radius:var(--radius-md);
  font-size:16px; font-weight:600; white-space:nowrap;
  transition:all .2s ease-out;
}
.btn-primary{background:var(--green); color:var(--bg-0);}
.btn-primary:hover{filter:brightness(1.08); box-shadow:var(--shadow-green); transform:translateY(-1px);}
.btn-primary:active{transform:scale(.98);}
.btn-outline{background:transparent; color:var(--green); border:1px solid var(--green);}
.btn-outline:hover{background:rgba(124,252,0,.08);}
.btn-lavender{background:var(--lavender); color:var(--bg-0);}
.btn-lavender:hover{filter:brightness(1.05); box-shadow:0 8px 24px rgba(230,230,250,.2); transform:translateY(-1px);}
@media(max-width:600px){ .btn{width:100%; height:48px;} }

/* گریدها */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:900px){ .grid-3{grid-template-columns:1fr;} }
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} }

/* کارت پایه */
.card{
  background:var(--bg-1); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:32px; transition:transform .2s ease, box-shadow .2s ease; box-shadow:var(--shadow-1);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2);}
.card h3{margin-bottom:10px;}
.card p{font-size:15px; color:var(--text-muted); margin-bottom:20px;}
.card-link{color:var(--green); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:4px;}

.icon-badge{
  width:48px; height:48px; border-radius:var(--radius-sm); background:rgba(124,252,0,.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.icon-badge svg{width:24px; height:24px; stroke:var(--green);}