@charset "UTF-8";
*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#082f49;
--secondary:#006d77;
--accent:#e9a23b;
--dark:#263238;
--light:#f7fafc;
--white:#fff;
--gray:#64748b;
--shadow:0 20px 50px rgba(0,0,0,.09)
}
html{scroll-behavior:smooth}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:var(--light);color:var(--dark);line-height:1.9;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:90%;max-width:1200px;margin:auto}
.section{padding:90px 0}

.section-title{text-align:center;margin-bottom:55px}
.section-title span{display:inline-block;color:var(--secondary);font-weight:700;font-size:15px}
.section-title h2{font-size:38px;color:var(--primary);font-weight:900;line-height:1.5}
.section-title p{color:var(--gray);max-width:650px;margin:15px auto}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 32px;border-radius:50px;font-weight:700;transition:.3s}
.primary-btn{background:var(--accent);color:#fff}
.primary-btn:hover{transform:translateY(-4px);background:#d98b24}
.secondary-btn{border:1px solid rgba(255,255,255,.5);color:#fff;margin-right:15px}
.secondary-btn:hover{background:#fff;color:var(--primary)}


/* INTRO */

.intro-screen{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circle at center,#0b4f6c,#041d2a);
animation:introHide 1s ease 3.2s forwards
}

.intro-brand{text-align:center;color:#fff}

.intro-mark{
width:90px;
height:90px;
margin:auto;
position:relative;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px
}

.intro-mark span{
background:var(--accent);
border-radius:12px;
animation:markPulse 1.5s infinite alternate
}

.intro-mark span:nth-child(2){animation-delay:.2s}
.intro-mark span:nth-child(3){animation-delay:.4s}
.intro-mark span:nth-child(4){animation-delay:.6s}

.intro-logo{
margin-top:25px;
font-size:42px;
letter-spacing:5px;
font-weight:900
}

.intro-divider{
height:2px;
width:90px;
background:var(--accent);
margin:20px auto
}

.intro-brand h1{
font-size:28px;
font-weight:800
}

.intro-brand p{
margin-top:15px;
color:#dce7eb
}

@keyframes markPulse{
from{transform:scale(.85);opacity:.6}
to{transform:scale(1);opacity:1}
}

@keyframes introHide{
to{opacity:0;visibility:hidden}
}


/* HEADER */

.header{
position:fixed;
top:0;
right:0;
width:100%;
z-index:1000;
background:rgba(255,255,255,.92);
backdrop-filter:blur(15px);
box-shadow:0 5px 25px rgba(0,0,0,.06)
}

.nav-wrapper{
height:90px;
display:flex;
align-items:center;
justify-content:space-between
}

.brand strong{
display:block;
font-size:24px;
letter-spacing:2px;
color:var(--primary)
}

.brand span{
display:block;
font-size:11px;
color:var(--gray)
}

.navigation>ul{
display:flex;
gap:25px;
align-items:center
}

.navigation a{
font-size:15px;
font-weight:600;
transition:.3s
}

.navigation a:hover,
.navigation .active{
color:var(--secondary)
}

.dropdown{position:relative}

.dropdown-menu{
position:absolute;
top:40px;
right:0;
width:230px;
background:#fff;
padding:15px;
border-radius:15px;
box-shadow:var(--shadow);
opacity:0;
visibility:hidden;
transition:.3s
}

.dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible
}

.dropdown-menu li{padding:8px}

.menu-toggle{
display:none;
border:0;
background:none;
font-size:32px;
color:var(--primary)
}


/* HERO */

.hero{
min-height:100vh;
position:relative;
display:flex;
align-items:center;
padding-top:90px;
background:linear-gradient(120deg,#041d2a,#0b4f6c);
color:#fff;
overflow:hidden
}

.hero-background{
position:absolute;
inset:0;
background:
radial-gradient(circle at 80% 30%,rgba(244,162,97,.25),transparent 25%),
radial-gradient(circle at 20% 70%,rgba(255,255,255,.08),transparent 25%)
}

.hero-container{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center
}

.hero-badge{
display:inline-flex;
gap:8px;
align-items:center;
background:rgba(255,255,255,.12);
padding:7px 20px;
border-radius:50px;
font-size:14px
}

.hero-content h1{
font-size:55px;
line-height:1.45;
font-weight:900;
margin-top:25px
}

.hero-content p{
font-size:18px;
color:#dbe7ec;
margin:25px 0;
max-width:600px
}

.hero-buttons{margin-top:35px}


/* HUMAN NETWORK */

.hero-visual{
height:500px;
display:flex;
align-items:center;
justify-content:center
}

.human-network{
width:400px;
height:400px;
position:relative
}

.network-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:150px;
height:150px;
border-radius:50%;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(15px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-weight:700
}

.network-center i{
font-size:45px;
color:var(--accent)
}

.network-item{
position:absolute;
background:#fff;
color:var(--primary);
padding:15px 20px;
border-radius:20px;
box-shadow:var(--shadow);
display:flex;
gap:8px;
align-items:center;
font-weight:700;
animation:float 4s infinite
}

.network-item i{color:var(--secondary)}

.item1{top:20px;right:40px}
.item2{bottom:40px;right:20px}
.item3{bottom:30px;left:20px}
.item4{top:60px;left:0}

@keyframes float{
50%{transform:translateY(-10px)}
}
/* ABOUT */

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center
}

.about-text h3{
font-size:30px;
color:var(--primary);
margin-bottom:20px
}

.about-text p{
color:#555;
margin-bottom:18px
}

.about-points{
margin-top:25px;
display:flex;
flex-direction:column;
gap:15px
}

.about-points div{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
color:var(--dark)
}

.about-points i{
color:var(--secondary);
font-size:20px
}

.about-image{
display:flex;
justify-content:center
}

.image-box{
width:350px;
height:350px;
border-radius:35px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
box-shadow:var(--shadow)
}

.image-box i{
font-size:70px;
color:var(--accent);
margin-bottom:20px
}

.image-box h3{
font-size:24px
}


/* SERVICES */

.services{
background:#fff
}

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px
}

.service-card{
background:var(--light);
padding:35px 25px;
border-radius:25px;
transition:.35s;
border:1px solid transparent
}

.service-card:hover{
transform:translateY(-10px);
background:#fff;
border-color:#e5e7eb;
box-shadow:var(--shadow)
}

.service-card i{
font-size:45px;
color:var(--secondary)
}

.service-card h3{
font-size:21px;
color:var(--primary);
margin:18px 0
}

.service-card p{
font-size:15px;
color:var(--gray);
margin-bottom:15px
}

.service-card a{
color:var(--accent);
font-weight:700
}


/* WHY US */

.feature-boxes{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px
}

.feature-item{
background:#fff;
padding:30px 20px;
border-radius:22px;
box-shadow:var(--shadow);
text-align:center;
transition:.3s
}

.feature-item:hover{
transform:translateY(-8px)
}

.feature-item i{
font-size:40px;
color:var(--accent)
}

.feature-item h3{
color:var(--primary);
margin:15px 0;
font-size:19px
}

.feature-item p{
font-size:14px;
color:var(--gray)
}


/* PROCESS */

.process{
background:#f1f6f8
}

.timeline{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
position:relative
}

.timeline:before{
content:"";
height:2px;
background:#d4e1e5;
position:absolute;
top:35px;
left:10%;
right:10%
}

.step{
text-align:center;
position:relative;
z-index:2
}

.step span{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
margin:auto auto 20px;
background:var(--primary);
color:#fff;
border-radius:50%;
font-size:22px;
font-weight:800
}

.step h3{
color:var(--primary);
font-size:18px
}

.step p{
font-size:14px;
color:var(--gray)
}


/* STATS */

.stats{
padding:70px 0;
background:linear-gradient(120deg,var(--primary),var(--secondary));
color:#fff
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
text-align:center
}

.stat-item strong{
display:block;
font-size:45px;
color:var(--accent);
font-weight:900
}

.stat-item span{
font-size:17px
}


/* CTA */

.cta{
padding:90px 0;
background:
linear-gradient(120deg,#041d2a,var(--primary));
color:#fff;
text-align:center
}

.cta h2{
font-size:38px;
margin-bottom:20px
}

.cta p{
color:#dbe5e9;
margin-bottom:30px
}


/* FOOTER */

.footer{
background:#101820;
color:#fff;
padding-top:70px
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
padding-bottom:50px
}

.footer h3{
color:var(--accent);
font-size:26px
}

.footer h4{
margin-bottom:20px
}

.footer p,
.footer li{
font-size:14px;
color:#b7c3ca
}

.footer li{
margin-bottom:10px
}

.footer a:hover{
color:var(--accent)
}

.copyright{
border-top:1px solid rgba(255,255,255,.1);
text-align:center;
padding:20px;
font-size:13px;
color:#aaa
}


/* RESPONSIVE */

@media(max-width:1100px){

.navigation{
display:none
}

.menu-toggle{
display:block
}

.hero-container,
.about-grid{
grid-template-columns:1fr;
text-align:center
}

.hero-content p{
margin-left:auto;
margin-right:auto
}

.hero-buttons{
display:flex;
justify-content:center
}

.hero-visual{
height:400px
}

.feature-boxes{
grid-template-columns:repeat(2,1fr)
}

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

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

.timeline:before{
display:none
}

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

.footer-grid{
grid-template-columns:1fr 1fr
}

}


@media(max-width:600px){

.container{
width:92%
}

.section{
padding:60px 0
}

.section-title h2{
font-size:28px
}

.intro-logo{
font-size:28px
}

.intro-brand h1{
font-size:22px
}

.hero-content h1{
font-size:38px
}

.hero-visual{
height:330px
}

.human-network{
width:280px;
height:280px
}

.network-center{
width:110px;
height:110px
}

.network-center i{
font-size:32px
}

.network-item{
font-size:11px;
padding:8px 12px
}

.item1{right:0}
.item2{right:0}
.item3{left:0}
.item4{left:0}

.feature-boxes,
.services-grid,
.stats-grid,
.article-grid{
grid-template-columns:repeat(2,1fr)
}

.timeline{
grid-template-columns:1fr
}

.footer-grid{
grid-template-columns:1fr
}

.image-box{
width:280px;
height:280px
}

.cta h2{
font-size:28px
}

}
.intro-screen.hide{
opacity:0;
visibility:hidden
}
.service-card{
padding:25px 15px;
}

.service-card h3{
font-size:17px;
}

.feature-item{
padding:20px 15px;
}

.feature-item i{
font-size:30px;
}

.stat-item strong{
font-size:34px;
}

.stat-item span{
font-size:13px;
}

@media(max-width:360px){
.services-grid,
.feature-boxes,
.stats-grid,
.article-grid{
grid-template-columns:1fr
}
}

@media(max-width:992px){
.navigation.active{
display:block;
position:absolute;
top:90px;
right:5%;
left:5%;
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:var(--shadow)
}

.navigation.active>ul{
flex-direction:column;
align-items:flex-start
}
}
.brand{
display:flex;
flex-direction:column;
gap:2px;
}

.brand strong{
font-size:22px;
font-weight:800;
color:var(--primary);
letter-spacing:2px;
}

.brand span{
font-size:11px;
color:var(--gray);
}


.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 18px;
border-radius:50px;
background:rgba(255,255,255,.12);
color:#fff;
font-size:14px;
margin-bottom:25px;
}


.hero-trust{
display:flex;
gap:35px;
margin-top:45px;
}

.hero-trust div{
display:flex;
flex-direction:column;
}


.hero-trust strong{
font-size:16px;
}


.hero-trust span{
font-size:13px;
color:#d5e1e5;
}


.image-box{
height:350px;
border-radius:30px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
text-align:center;
}


.image-box i{
font-size:70px;
color:var(--accent);
margin-bottom:20px;
}


.human-network{
position:relative;
width:420px;
height:420px;
}


.network-center{
position:absolute;
width:160px;
height:160px;
background:#fff;
color:var(--primary);
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
left:50%;
top:50%;
transform:translate(-50%,-50%);
box-shadow:var(--shadow);
font-weight:700;
}


.network-center i{
font-size:45px;
margin-bottom:10px;
}


.network-item{
position:absolute;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
padding:15px;
border-radius:20px;
color:#fff;
backdrop-filter:blur(10px);
text-align:center;
}


.item1{
top:20px;
right:80px;
}


.item2{
right:0;
bottom:100px;
}


.item3{
left:0;
bottom:100px;
}


.item4{
left:90px;
top:20px;
}


@media(max-width:600px){

.hero-trust{
display:grid;
grid-template-columns:1fr;
gap:15px;
}

.human-network{
width:300px;
height:300px;
}

.network-center{
width:120px;
height:120px;
}

.network-item{
font-size:12px;
padding:10px;
}

}
@media(max-width:992px){

.navigation.active{
display:block;
position:absolute;
top:90px;
right:5%;
left:5%;
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:var(--shadow);
}


.navigation.active ul{
flex-direction:column;
align-items:flex-start;
}


.navigation.active .dropdown-menu{
position:static;
display:none;
box-shadow:none;
width:100%;
}


.dropdown.open .dropdown-menu{
display:block;
opacity:1;
visibility:visible;
}

}