*{box-sizing:border-box}
body{
margin:0;
background:#07090d;
color:#fff;
font-family:'Vazirmatn',Arial,sans-serif;
direction:ltr
}
.topbar{
display:flex;
justify-content:flex-end;
gap:25px;
padding:12px 8%;
background:#020202;
font-size:14px;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
background:#090b10;
border-bottom:1px solid #333
}
.logo{
font-size:44px;
font-weight:900;
letter-spacing:3px
}
.logo span{color:#d00000}
nav a{
margin-left:25px;
color:#ddd;
text-decoration:none
}
.hero{
padding:120px 8%;
text-align:center;
background:linear-gradient(135deg,#020617,#172554)
}
.flag{
width:260px;
height:10px;
margin:auto;
background:linear-gradient(90deg,#b22234 33%,#fff 33%,#fff 66%,#3c3b6e 66%)
}
.hero h1{
font-size:72px;
font-weight:900
}
.hero h2{
font-size:24px
}
button{
background:#b91c1c;
color:white;
padding:15px 40px;
border:0;
font-weight:bold
}
section{
padding:70px 8%
}
h2{
font-size:38px
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px
}
.grid div{
background:#111827;
padding:35px;
border:1px solid #374151;
border-radius:12px;
font-size:20px
}
small{
color:#94a3b8
}
footer{
padding:40px;
text-align:center;
background:#020202
}