*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Vazirmatn',sans-serif;
scroll-behavior:smooth;
}

:root{

--bg:#050505;
--card:#0d0d0d;
--purple:#8a2be2;
--gold:#ffd700;
--white:#ffffff;
--text:#cfcfcf;

}

body{

background:var(--bg);
color:white;
overflow-x:hidden;
position:relative;

}

/* اسکرول بار */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--purple),
var(--gold)
);

border-radius:20px;

}

/* لودر */

#loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#050505;
z-index:99999;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

transition:1s;

}

.loader-circle{

width:90px;
height:90px;

border:4px solid rgba(255,255,255,.1);

border-top:4px solid var(--gold);

border-radius:50%;

animation:spin 1s linear infinite;

}

.loader-text{

margin-top:20px;
font-size:30px;
font-weight:900;
letter-spacing:10px;

background:linear-gradient(
45deg,
var(--gold),
var(--purple)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* نور موس */

.mouse-light{

position:fixed;
width:500px;
height:500px;

background:radial-gradient(
circle,
rgba(138,43,226,.18),
transparent 70%
);

pointer-events:none;

z-index:1;

transform:translate(-50%,-50%);

}

/* ذرات */

#particles{

position:fixed;

width:100%;
height:100%;

left:0;
top:0;

z-index:-1;

overflow:hidden;

}

.particle{

position:absolute;

background:rgba(255,255,255,.4);

border-radius:50%;

animation:floatParticle linear infinite;

}

@keyframes floatParticle{

0%{

transform:
translateY(100vh)
translateX(0);

opacity:0;

}

50%{
opacity:1;
}

100%{

transform:
translateY(-100px)
translateX(100px);

opacity:0;

}

}

/* منو */

header{

position:fixed;

top:0;
width:100%;

z-index:999;

backdrop-filter:blur(15px);

background:rgba(5,5,5,.4);

border-bottom:1px solid rgba(255,255,255,.05);

}

.navbar{

max-width:1400px;

margin:auto;

padding:20px 40px;

display:flex;

justify-content:space-between;
align-items:center;

}

.logo{

font-size:32px;
font-weight:900;

letter-spacing:3px;

}

.logo span{

color:var(--gold);

}

.navbar ul{

display:flex;

list-style:none;

gap:30px;

}

.navbar a{

text-decoration:none;
color:white;

transition:.3s;

}

.navbar ul a:hover{

color:var(--gold);

}

.nav-btn{

padding:12px 30px;

border-radius:40px;

background:linear-gradient(
45deg,
var(--purple),
var(--gold)
);

color:black !important;

font-weight:700;

}

/* هیرو */

.hero{

height:100vh;

display:flex;

justify-content:center;
align-items:center;

text-align:center;

padding:0 20px;

position:relative;

overflow:hidden;

}

.hero-content{

max-width:900px;

z-index:5;

}

.hero h1{

font-size:80px;

font-weight:900;

line-height:1.3;

background:linear-gradient(
45deg,
white,
var(--gold),
var(--purple)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero h2{

font-size:30px;

margin-top:20px;

color:var(--gold);

}

.hero p{

margin-top:30px;

font-size:20px;

line-height:2;

color:var(--text);

}

.hero-buttons{

margin-top:50px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

padding:18px 45px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.4s;

}

.primary{

background:linear-gradient(
45deg,
var(--purple),
var(--gold)
);

color:black;

box-shadow:
0 0 20px rgba(138,43,226,.4);

}

.primary:hover{

transform:translateY(-5px);

box-shadow:
0 0 40px rgba(138,43,226,.8);

}

.secondary{

border:1px solid rgba(255,255,255,.15);

color:white;

backdrop-filter:blur(10px);

}

/* مکعب های شناور */

.floating-cube{

position:absolute;

border:1px solid rgba(255,215,0,.2);

background:rgba(255,255,255,.02);

backdrop-filter:blur(10px);

animation:floatCube 12s infinite ease-in-out;

}

.cube1{

width:150px;
height:150px;

top:15%;
right:10%;

}

.cube2{

width:80px;
height:80px;

left:10%;
top:30%;

animation-delay:2s;

}

.cube3{

width:200px;
height:200px;

bottom:10%;
left:20%;

animation-delay:4s;

}

@keyframes floatCube{

0%,100%{

transform:
translateY(0)
rotate(0deg);

}

50%{

transform:
translateY(-40px)
rotate(180deg);

}

}

/* آمار */

.stats{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;

padding:100px 10%;

}

.stat-card{

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

padding:40px;

text-align:center;

border-radius:25px;

backdrop-filter:blur(20px);

transition:.4s;

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 30px rgba(255,215,0,.2);

}

.stat-card h3{

font-size:50px;

color:var(--gold);

margin-bottom:10px;

}

/* عنوان بخش ها */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:55px;

font-weight:900;

}

.section-title p{

margin-top:15px;

color:var(--text);

}
/* =========================
   SERVICES
========================= */

.services{

padding:120px 8%;

}

.service-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.service-card{

position:relative;

padding:40px;

border-radius:30px;

background:
rgba(255,255,255,.03);

border:1px solid
rgba(255,255,255,.08);

backdrop-filter:blur(20px);

overflow:hidden;

transition:.5s;

}

.service-card::before{

content:"";

position:absolute;

width:300px;
height:300px;

background:
radial-gradient(
circle,
rgba(138,43,226,.25),
transparent
);

top:-150px;
right:-150px;

transition:.6s;

}

.service-card:hover::before{

transform:scale(1.5);

}

.service-card:hover{

transform:
translateY(-15px)
rotateX(5deg);

border-color:
rgba(255,215,0,.3);

box-shadow:

0 0 40px
rgba(138,43,226,.25),

0 0 80px
rgba(255,215,0,.15);

}

.service-card .icon{

font-size:55px;

margin-bottom:25px;

}

.service-card h3{

font-size:28px;

margin-bottom:15px;

color:var(--gold);

}

.service-card p{

line-height:2;

color:var(--text);

}

/* =========================
   ABOUT
========================= */

.about{

padding:140px 10%;

display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:center;

}

.about h2{

font-size:60px;

margin-bottom:25px;

}

.about p{

font-size:18px;

line-height:2.3;

color:var(--text);

}

.about-right{

display:flex;

flex-direction:column;

gap:30px;

}

.glass-box{

padding:40px;

border-radius:25px;

background:
rgba(255,255,255,.04);

border:1px solid
rgba(255,255,255,.08);

backdrop-filter:blur(20px);

transition:.4s;

}

.glass-box:hover{

transform:translateX(-10px);

box-shadow:
0 0 30px rgba(255,215,0,.2);

}

.glass-box span{

display:block;

font-size:55px;

font-weight:900;

margin-bottom:10px;

color:var(--gold);

}

/* =========================
   PRICING
========================= */

.pricing{

padding:140px 8%;

}

.pricing-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:40px;

}

.price-card{

position:relative;

padding:50px;

border-radius:30px;

text-align:center;

background:
rgba(255,255,255,.03);

border:1px solid
rgba(255,255,255,.08);

transition:.5s;

overflow:hidden;

}

.price-card:hover{

transform:
translateY(-15px);

}

.price-card h3{

font-size:30px;

margin-bottom:20px;

}

.price-card h4{

font-size:42px;

color:var(--gold);

margin-bottom:30px;

}

.price-card ul{

list-style:none;

}

.price-card li{

padding:12px 0;

border-bottom:
1px solid rgba(255,255,255,.05);

}

.price-card a{

display:inline-block;

margin-top:30px;

padding:15px 35px;

border-radius:50px;

text-decoration:none;

background:
linear-gradient(
45deg,
var(--purple),
var(--gold)
);

color:black;

font-weight:800;

}

.featured{

transform:scale(1.08);

border:1px solid
rgba(255,215,0,.4);

box-shadow:

0 0 40px
rgba(255,215,0,.15);

}

.featured::before{

content:"پیشنهاد ویژه";

position:absolute;

top:15px;
left:-40px;

width:180px;

padding:10px;

background:var(--gold);

color:black;

font-weight:900;

transform:
rotate(-35deg);

}

/* =========================
   PORTFOLIO
========================= */

.portfolio{

padding:140px 8%;

}

.portfolio-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

gap:30px;

}

.portfolio-item{

height:300px;

border-radius:30px;

overflow:hidden;

position:relative;

background:
linear-gradient(
135deg,
#111,
#1d1d1d
);

border:1px solid
rgba(255,255,255,.08);

cursor:pointer;

transition:.5s;

}

.portfolio-item:hover{

transform:
translateY(-15px);

box-shadow:

0 0 50px
rgba(138,43,226,.3);

}

.portfolio-item::before{

content:"مشاهده پروژه";

position:absolute;

top:50%;
left:50%;

transform:
translate(-50%,-50%);

opacity:0;

font-size:24px;

font-weight:700;

transition:.4s;

}

.portfolio-item:hover::before{

opacity:1;

}

/* =========================
   CONTACT
========================= */

.contact{

padding:140px 8%;

}

.contact form{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:25px;

}

.contact input,
.contact textarea{

padding:20px;

border:none;

outline:none;

border-radius:20px;

background:
rgba(255,255,255,.04);

border:1px solid
rgba(255,255,255,.08);

color:white;

font-size:16px;

backdrop-filter:blur(10px);

}

.contact textarea{

height:220px;

resize:none;

}

.contact button{

padding:18px;

border:none;

border-radius:50px;

cursor:pointer;

font-size:18px;

font-weight:800;

background:
linear-gradient(
45deg,
var(--purple),
var(--gold)
);

color:black;

transition:.4s;

}

.contact button:hover{

transform:translateY(-5px);

}

/* =========================
   FOOTER
========================= */

footer{

padding:80px 20px;

text-align:center;

border-top:
1px solid rgba(255,255,255,.08);

background:
rgba(255,255,255,.02);

backdrop-filter:blur(10px);

}

footer h3{

font-size:35px;

margin-bottom:15px;

color:var(--gold);

}

footer p{

color:var(--text);

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

.about{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:
repeat(2,1fr);

}

.hero h1{

font-size:60px;

}

}

@media(max-width:768px){

.navbar{

padding:20px;

}

.navbar ul{

display:none;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:22px;

}

.hero p{

font-size:16px;

}

.stats{

grid-template-columns:1fr;

}

.section-title h2{

font-size:40px;

}

.about h2{

font-size:42px;

}

.price-card{

padding:35px;

}

.featured{

transform:none;

}

}

@media(max-width:500px){

.hero h1{

font-size:34px;

}

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

}
#matrix{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:-3;

opacity:.15;

}

.cyber-grid{

position:fixed;

width:100%;
height:100%;

top:0;
left:0;

background-image:

linear-gradient(
rgba(138,43,226,.08) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,215,0,.08) 1px,
transparent 1px
);

background-size:50px 50px;

z-index:-2;

perspective:1000px;

animation:gridmove 10s linear infinite;

}

@keyframes gridmove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(50px);
}

}
.server-status{
display:block !important;
padding:120px 8% !important;
}

.server-status .status-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(250px,1fr)) !important;
gap:30px !important;
width:100% !important;
max-width:1400px !important;
margin:50px auto 0 !important;
}

.server-status .status-card{
display:block !important;
background:rgba(255,255,255,.05) !important;
border:1px solid rgba(255,255,255,.1) !important;
border-radius:20px !important;
padding:30px !important;
text-align:center !important;
}

.server-status .online{
display:inline-block !important;
padding:8px 20px !important;
background:#00ff66 !important;
color:#000 !important;
border-radius:50px !important;
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 992px){

.navbar{
padding:15px 20px;
}

.navbar ul{
display:none;
}

.hero h1{
font-size:50px;
}

.hero h2{
font-size:24px;
}

.about{
grid-template-columns:1fr;
gap:40px;
}

.stats{
grid-template-columns:repeat(2,1fr);
}

.server-status .status-grid{
grid-template-columns:repeat(2,1fr) !important;
}

.pricing-grid,
.portfolio-grid,
.service-grid{
grid-template-columns:1fr 1fr;
}

}

@media (max-width: 768px){

.hero{
padding:120px 20px 60px;
height:auto;
min-height:100vh;
}

.hero h1{
font-size:36px;
line-height:1.5;
}

.hero h2{
font-size:20px;
}

.hero p{
font-size:15px;
line-height:2;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-buttons .btn{
width:100%;
max-width:300px;
text-align:center;
}

.stats{
grid-template-columns:1fr;
}

.service-grid,
.pricing-grid,
.portfolio-grid,
.server-status .status-grid{
grid-template-columns:1fr !important;
}

.section-title h2{
font-size:32px;
}

.about h2{
font-size:32px;
}

.glass-box span{
font-size:40px;
}

.price-card h4{
font-size:32px;
}

.contact form{
width:100%;
}

.contact input,
.contact textarea{
width:100%;
}

footer h3{
font-size:26px;
}

}

@media (max-width: 480px){

.logo{
font-size:22px;
}

.hero h1{
font-size:28px;
}

.hero h2{
font-size:18px;
}

.hero p{
font-size:14px;
}

.section-title h2{
font-size:26px;
}

.stat-card,
.service-card,
.price-card,
.status-card{
padding:20px;
}

}
/* =========================
   HAMBURGER MENU
========================= */

.hamburger{

display:none;

width:35px;

cursor:pointer;

z-index:9999;

}

.hamburger span{

display:block;

height:3px;

margin:7px 0;

background:var(--gold);

border-radius:10px;

transition:.4s;

}

.mobile-menu{

box-shadow:
0 0 50px rgba(138,43,226,.4);
position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:rgba(5,5,5,.97);

backdrop-filter:blur(20px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:30px;

transition:.5s;

z-index:9998;

border-left:1px solid rgba(255,215,0,.2);

}

.mobile-menu a{

color:white;

text-decoration:none;

font-size:20px;

font-weight:700;

transition:.3s;

}

.mobile-menu a:hover{

color:var(--gold);

transform:translateX(-10px);

}

.mobile-menu.active{

right:0;

}

.hamburger.active span:nth-child(1){

transform:
rotate(45deg)
translate(7px,7px);

}

.hamburger.active span:nth-child(2){

opacity:0;

}

.hamburger.active span:nth-child(3){

transform:
rotate(-45deg)
translate(7px,-7px);

}

@media(max-width:768px){

.hamburger{

display:block;

}

.navbar ul{

display:none !important;

}

.nav-btn{

display:none;

}

}
.service-card{
text-align:center;
}

.service-card .icon{
margin-bottom:20px;
text-align:center;
}

.service-card h3{
text-align:center;
margin-bottom:15px;
}

.service-card p{
text-align:center;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/vazirmatn/Vazirmatn-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
}

.trust-section{
    padding:120px 8%;
}

.trust-container{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:30px;
}

.trust-box{
    position:relative;
    width:450px;

    padding:40px;

    border-radius:35px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    overflow:hidden;

    text-align:center;

    transition:.5s;
}

.trust-box:hover{

    transform:translateY(-10px);

    box-shadow:
    0 0 25px rgba(138,43,226,.4),
    0 0 50px rgba(255,215,0,.15);

}

.trust-glow{

    position:absolute;

    width:350px;
    height:350px;

    background:
    radial-gradient(
    circle,
    rgba(138,43,226,.35),
    transparent 70%
    );

    top:-150px;
    left:50%;

    transform:translateX(-50%);

    pointer-events:none;

}

.trust-item{
    position:relative;
    z-index:2;
}

.trust-item img{

    width:140px;

    margin-bottom:20px;

    transition:.4s;

}

.trust-item h3{

    font-size:28px;

    margin:15px 0;

    color:#ffd700;

}

.trust-item p{

    color:#d8d8d8;

}

@media(max-width:768px){

    .trust-container{
        flex-direction:column;
        align-items:center;
    }

    .trust-box{
        width:100%;
        max-width:450px;
    }

}