@font-face{
font-family:vazir;
src:url(fonts/Vazirmatn-Regular.woff2);
}
@font-face{
font-family:vazir;
src:url(fonts/Vazirmatn-Bold.woff2);
font-weight:bold;
}

*{box-sizing:border-box}
body{
font-family:vazir;
direction:rtl;
margin:0;
background:linear-gradient(180deg,#0f172a,#020617);
color:white;
}

.container{max-width:900px;margin:auto;padding:25px}
.header{text-align:center;margin-bottom:30px}
.header h1{margin-bottom:5px}
.auto{opacity:.6;font-size:13px}

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

.card{
background:#1e293b;
border-radius:16px;
padding:20px;
text-align:center;
cursor:pointer;
transition:.25s;
border:1px solid #334155;
}

.card:hover{
transform:translateY(-5px);
background:#334155;
}

.icon-box{width:70px;height:70px;display:flex;align-items:center;justify-content:center;margin:auto;margin-bottom:10px}
.icon-box img{max-width:100%;max-height:100%;object-fit:contain}

.page{animation:fade .4s}
.hidden{display:none}

.video-box{max-width:650px;margin:20px auto;display:flex;justify-content:center;align-items:center;background:black;border-radius:14px;overflow:hidden}
.video-box video{width:100%;height:100%;border-radius:14px;object-fit:contain}

.btn{margin-top:20px;padding:10px 18px;background:#2563eb;border:none;border-radius:10px;color:white;cursor:pointer;font-family:vazir}

.downloadBox{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.download{background:#16a34a;padding:10px 18px;border-radius:10px;text-decoration:none;color:white}
.store{background:#2563eb;padding:10px 18px;border-radius:10px;text-decoration:none;color:white}

@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;}}