:root{
  --brand-1:#f3f1f3;   
  --brand-2:#8abdce;     
  --accent:#FF66B2;      
  --accent-2:#008080;    
  --bg-soft:#DCDCDC;     
  --ink:#1a1a75;         
  --white:#ffffff;
}


*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#1a1a1a;
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,IRANSansX,Tahoma}
img{max-width:100%;height:auto;display:block}
[dir="rtl"]{text-align:right}


.wrap{max-width:1100px;margin:auto;padding-inline:20px}


.glass-header{
  position:sticky;top:0;z-index:10;
  background: rgba(20,20,40,0.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;color:#fff}
.logo-img{height:40px;width:auto;display:block}
.menu{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.menu a{
  color:#f5f5f5;text-decoration:none;padding:6px 10px;border-radius:10px;transition:.2s ease;
}
.menu a:hover{background:rgba(255,255,255,.12)}


.glass-btn{

    background: rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 10px 18px;
  color: #1a1a75;
text-align: center;
  font-weight: 700;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all .25s ease;
  text-decoration:none; display:inline-block;
  align-self: center;

}
.glass-btn:hover{
  background: rgba(255,255,255,0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.glass-outline{
  background: transparent;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.35);
}


.nav-toggle{display:none}
.hamburger{display:none;cursor:pointer;margin-inline-start:8px}
.hamburger span{
  display:block;width:24px;height:2px;background:#fff;margin:6px 0;transition:.2s
}


.hero-animated{
  border-radius: 20px;
overflow: hidden;
margin: 20px;
  color:#1a1a75; padding:72px 0 48px;
  background:   linear-gradient(120deg,#35b4ca, #fdfcfd, #d3589e);
  background-size: 200% 200%;
  animation: gradMove 5s ease infinite;
}
@keyframes gradMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.hero-content{text-align:center}
.hero-logo{width:140px;max-width:35vw;height:auto;margin:0 auto 14px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25))}
.hero h1{margin:0 0 10px;font-size:40px;line-height:1.2}
.hero p{margin:0 0 22px;opacity:.95}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.banner-card {
  border: none !important;       
  background: transparent !important; 
  box-shadow: none !important;   
  padding: 0;                    
}

.banner-img{
  display: block;
  width: 100%;
  height: auto;             
  border-radius: inherit;
}

@supports (aspect-ratio: 21/9){
  .banner-img{
    height: auto;
    width: auto;    
  }
}


section{padding:46px 0}
.section-title{margin:0 0 12px;color:var(--ink);font-size:28px}
.subtitle{margin:0 0 14px;color:#333}


.tutorial{background:var(--brand-2);
border-radius: 20px;
overflow: hidden;
margin: 20px;}
.tutorial-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.logo-big{height:100px;width:auto;display:block}
.card{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:18px}
.glass-card{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.articles{background:var(--brand-2);
border-radius: 20px;
overflow: hidden;
margin: 20px;}
.tutorial-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.logo-big{height:100px;width:auto;display:block}
.card{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:18px}
.glass-card{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.muted{  background: linear-gradient(120deg,#8abdce, #fdfcfd, #e9bdd6);
   border-radius: 20px;
overflow: hidden;
margin: 20px;}
.grid{display:grid;gap:16px}
@media(min-width:900px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
.box{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:18px}


.post{background:#f9f5fa5d;border:1px solid #ececec;border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .2s}
.post .thumb{height:120px;background:#eef2f7}
.post .content{padding:14px}
.post h3{margin:0 0 8px;font-size:18px}
.post a{color:var(--brand-1);text-decoration:none}
.post a:hover{text-decoration:underline}
.card-hover:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.12)}


footer{
  background:  linear-gradient(120deg,#8bc6ca, #745e7e, #9e6687);;color:#cfd6e0;padding:28px 0;margin-top:10px ;}
footer a{color:#dfe7ff;text-decoration:none}
footer a:hover{text-decoration:underline}
.footer-flex{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.footer-links{display:flex;gap:14px}
 .pill{display:inline-block;background:rgba(255,255,255,.15);color:#1a1a75;
          border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);
          -webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;margin:4px 6px;font-weight:600}
    .two-col{display:grid;gap:16px}
    @media(min-width:900px){ .two-col{grid-template-columns:1fr 1fr} }
    .list-badge li{margin:6px 0;padding-inline-start:10px;position:relative}
    .list-badge li::before{content:"•"; position:absolute; right:-12px; color:#6600CC; font-weight:bold}
    .flag{font-size:12px;opacity:.7;margin-inline-start:6px}
  
    .uion{  background:#ebebeb33;
   border-radius: 20px;
overflow: hidden;
width: auto;
height: 50%;
margin: 20px;}
.grid{display:grid;gap:16px}
@media(min-width:900px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
 
.uin{  background:#ebebeb33;
   border-radius: 20px;
overflow: hidden;
margin: 20px;}
.grid{display:grid;gap:16px}
@media(min-width:900px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
    .article{padding:40px 0}
    .article h2{margin:24px 0 12px;color:#0F0F32;font-size:22px}
    .article p{margin:0 0 10px}
    .article ul{margin:0 0 10px;padding-right:18px}
    .badge{display:inline-block;background:#eef2f7;border:1px solid #e6eaf0;border-radius:999px;padding:6px 12px;margin:4px 6px}
    .video-box{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:14px}
    .video-box a{color:#6600CC;text-decoration:none}
    .video-box a:hover{text-decoration:underline}
    .en{opacity:.9}






    
@media(max-width:900px){
  .menu{position:absolute;inset-inline:0;top:64px;background:rgba(20,20,40,.92);
        display:block;padding:10px 20px;transform:scaleY(0);transform-origin:top;transition:.2s}
  .menu a{display:block;padding:10px 0;border-radius:8px}
  .nav-cta{display:block;margin:8px 0}
  .hamburger{display:block}
  .nav{position:relative}
  .nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-toggle:checked ~ .menu{transform:scaleY(1)}
  .hero h1{font-size:30px}
}