\:root{
  --navy:#0E2A5C;--blue:#1A4FBF;--blue2:#2563EB;--blue3:#EFF6FF;
  --green:#0D5C42;--green2:#059669;--green3:#ECFDF5;
  --amber:#D97706;--red:#DC2626;
  --dark:#0A1628;--mid:#334155;--gray:#64748B;--light:#F1F5F9;
  --border:#E2E8F0;--white:#FFFFFF;
  --r:14px;--shadow:0 4px 24px rgba(14,42,92,.08);--shadow-lg:0 16px 48px rgba(14,42,92,.15);
  --transition:.3s cubic-bezier(.22,1,.36,1)
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Vazirmatn',Tahoma,sans-serif;direction:rtl;background:#F8FAFC;color:var(--dark);overflow-x:hidden}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:'Vazirmatn',Tahoma,sans-serif}
a{text-decoration:none;color:inherit}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ripple{0%{transform:scale(0);opacity:.4}100%{transform:scale(4);opacity:0}}
@keyframes dotpulse{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1.1);opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ping{0%,100%{transform:scale(1);opacity:1}60%{transform:scale(1.6);opacity:0}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--transition),transform .7s var(--transition)}
.reveal.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}

.mono{font-family:'JetBrains Mono',monospace}
.container{max-width:1280px;margin:0 auto;padding:0 2rem}