@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root{
--bg:#050507;
--bg2:#0b0b10;
--card:rgba(255,255,255,.045);
--text:#f2f2f5;
--muted:#92929d;
--purple:#8b5cf6;
--purple2:#c4b5fd;
--green:#6ee7b7;
--border:rgba(255,255,255,.09);
--radius:25px;
--ease:cubic-bezier(.22,1,.36,1);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
scroll-padding-top:90px;
}

body{
font-family:"Vazirmatn",sans-serif;
direction:rtl;
color:var(--text);
line-height:1.9;
background:
radial-gradient(circle at 80% -10%,rgba(139,92,246,.16),transparent 35%),
radial-gradient(circle at 0 40%,rgba(124,58,237,.07),transparent 30%),
var(--bg);
overflow-x:hidden;
}

body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
opacity:.5;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:70px 70px;
mask-image:linear-gradient(to bottom,black,transparent 75%);
}

a{
text-decoration:none;
color:inherit;
}

.container{
width:min(1180px,92%);
margin:auto;
}

::selection{
background:rgba(139,92,246,.45);
color:#fff;
}

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

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

::-webkit-scrollbar-thumb{
background:#29212f;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:var(--purple);
}


/* NAV */

nav{
position:fixed;
top:0;
right:0;
left:0;
z-index:1000;
padding:15px 0;
background:rgba(5,5,7,.72);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
border-bottom:1px solid rgba(255,255,255,.055);
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand-mark{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:14px;
background:linear-gradient(135deg,#a78bfa,#6d28d9);
font-weight:900;
box-shadow:0 10px 35px rgba(139,92,246,.35);
}

.brand-text strong{
display:block;
font-size:14px;
font-weight:800;
}

.brand-text span{
display:block;
color:#777782;
font-size:9px;
letter-spacing:2px;
direction:ltr;
}

.nav-links{
display:flex;
align-items:center;
gap:30px;
color:#aaaab3;
font-size:13px;
}

.nav-links a{
position:relative;
transition:.3s;
}

.nav-links a:after{
content:"";
position:absolute;
right:0;
bottom:-8px;
width:0;
height:1px;
background:var(--purple2);
transition:.3s;
}

.nav-links a:hover{
color:#fff;
}

.nav-links a:hover:after{
width:100%;
}

.nav-btn{
padding:11px 20px;
border-radius:12px;
background:#fff;
color:#08080a;
font-size:12px;
font-weight:800;
transition:.3s;
}

.nav-btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(255,255,255,.15);
}


/* HERO */

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
padding-top:120px;
overflow:hidden;
}

.hero:before{
content:"";
position:absolute;
width:650px;
height:650px;
right:-250px;
top:-80px;
border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.18),transparent 68%);
filter:blur(20px);
}

.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:80px;
align-items:center;
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:24px;
color:var(--purple2);
font-size:12px;
}

.eyebrow i{
width:7px;
height:7px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 15px rgba(110,231,183,.8);
}

h1{
font-size:clamp(48px,6.5vw,86px);
line-height:1.12;
letter-spacing:-4px;
font-weight:900;
margin-bottom:26px;
}

h1 span{
display:block;
background:linear-gradient(100deg,#fff,#a78bfa,#ddd6fe);
-webkit-background-clip:text;
color:transparent;
}

.hero-text{
max-width:650px;
margin-bottom:35px;
color:var(--muted);
font-size:16px;
line-height:2.2;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
padding:0 24px;
border-radius:14px;
font-size:13px;
font-weight:700;
transition:all .35s var(--ease);
}

.btn-primary{
color:#fff;
background:linear-gradient(135deg,#8b5cf6,#6d28d9);
box-shadow:0 15px 40px rgba(124,58,237,.22);
}

.btn-primary:hover{
transform:translateY(-4px);
box-shadow:0 20px 45px rgba(124,58,237,.35);
}

.btn-outline{
border:1px solid var(--border);
background:rgba(255,255,255,.025);
color:#ddd;
}

.btn-outline:hover{
background:rgba(255,255,255,.07);
transform:translateY(-3px);
}


/* HERO CARD */

.hero-card{
padding:13px;
position:relative;
border:1px solid rgba(255,255,255,.1);
border-radius:32px;
background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
box-shadow:0 35px 90px rgba(0,0,0,.45);
backdrop-filter:blur(20px);
}

.profile{
height:440px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:23px;
background:
radial-gradient(circle at center,rgba(139,92,246,.28),transparent 35%),
#0d0d13;
}

.profile-orbit{
position:absolute;
border:1px solid rgba(196,181,253,.18);
border-radius:50%;
}

.orbit-one{
width:330px;
height:330px;
animation:rotate 20s linear infinite;
}

.orbit-two{
width:230px;
height:230px;
border-style:dashed;
animation:rotate 14s linear infinite reverse;
}

.monogram{
position:relative;
z-index:5;
font-size:105px;
font-weight:900;
letter-spacing:-8px;
background:linear-gradient(135deg,#fff,#a78bfa,#6d28d9);
-webkit-background-clip:text;
color:transparent;
filter:drop-shadow(0 20px 30px rgba(139,92,246,.25));
}

.profile-label{
position:absolute;
bottom:25px;
left:25px;
display:flex;
gap:7px;
}

.profile-label span{
padding:5px 8px;
border:1px solid rgba(255,255,255,.08);
border-radius:6px;
color:#777782;
font-size:8px;
letter-spacing:2px;
}

.profile-info{
padding:18px 8px 6px;
}

.profile-info strong{
display:block;
font-size:17px;
}

.profile-info span{
color:#777782;
font-size:10px;
direction:ltr;
display:block;
}

@keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}


/* STATS */

.stats{
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
background:rgba(255,255,255,.012);
}

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

.stat{
position:relative;
padding:32px 20px;
text-align:center;
}

.stat:not(:last-child):after{
content:"";
position:absolute;
left:0;
top:25%;
bottom:25%;
width:1px;
background:var(--border);
}

.stat strong{
display:block;
font-size:30px;
font-weight:900;
background:linear-gradient(135deg,#fff,#a78bfa);
-webkit-background-clip:text;
color:transparent;
}

.stat span{
color:#777782;
font-size:11px;
}


/* SECTIONS */

section{
padding:125px 0;
}

.section-dark{
background:
linear-gradient(
180deg,
rgba(255,255,255,.012),
rgba(255,255,255,.025),
rgba(255,255,255,.012)
);
border-top:1px solid rgba(255,255,255,.025);
border-bottom:1px solid rgba(255,255,255,.025);
}

.section-head{
max-width:720px;
margin-bottom:55px;
}

.section-head.centered{
text-align:center;
margin-inline:auto;
}

.section-head small{
display:inline-block;
color:#a78bfa;
font-size:10px;
font-weight:800;
letter-spacing:3px;
direction:ltr;
}

.section-head h2{
font-size:clamp(32px,4vw,52px);
line-height:1.3;
letter-spacing:-1.5px;
margin:10px 0 15px;
}

.section-head p{
color:var(--muted);
font-size:14px;
}


/* ABOUT */

.about-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
align-items:center;
}

.about-box{
position:relative;
padding:38px;
border:1px solid var(--border);
border-radius:var(--radius);
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
box-shadow:0 25px 60px rgba(0,0,0,.25);
}

.about-avatar{
width:60px;
height:60px;
display:grid;
place-items:center;
margin-bottom:20px;
border-radius:18px;
background:linear-gradient(135deg,#8b5cf6,#6d28d9);
font-weight:900;
font-size:18px;
box-shadow:0 15px 30px rgba(139,92,246,.25);
}

.about-box h3{
font-size:23px;
margin-bottom:2px;
}

.about-role{
color:#a78bfa;
font-size:11px;
margin-bottom:15px;
}

.about-box p{
color:var(--muted);
font-size:13px;
}

.check-list{
display:grid;
gap:12px;
margin-top:25px;
}

.check-list div{
display:flex;
align-items:center;
gap:9px;
color:#d1d1d6;
font-size:12px;
}

.check-list b{
color:var(--green);
}

.about-text{
position:relative;
padding-right:25px;
}

.quote-mark{
position:absolute;
top:-45px;
right:0;
font-family:Georgia,serif;
font-size:90px;
color:rgba(139,92,246,.18);
line-height:1;
}

.about-text p{
max-width:700px;
color:var(--muted);
font-size:14px;
margin-bottom:20px;
}

.about-text .big-text{
color:#eee;
font-size:27px;
font-weight:700;
line-height:1.7;
}


/* SERVICES */

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

.service{
position:relative;
overflow:hidden;
padding:30px;
border:1px solid var(--border);
border-radius:var(--radius);
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
transition:all .35s var(--ease);
}

.service:hover{
transform:translateY(-8px);
border-color:rgba(139,92,246,.45);
box-shadow:0 25px 60px rgba(0,0,0,.3);
}

.service-icon{
width:52px;
height:52px;
display:grid;
place-items:center;
margin-bottom:20px;
border:1px solid rgba(139,92,246,.2);
border-radius:16px;
color:#c4b5fd;
background:rgba(139,92,246,.09);
font-size:20px;
font-weight:700;
}

.service h3{
font-size:17px;
margin-bottom:8px;
}

.service p{
color:var(--muted);
font-size:12px;
line-height:2;
}

.service-number{
position:absolute;
left:25px;
bottom:18px;
color:rgba(139,92,246,.12);
font-size:50px;
font-weight:900;
direction:ltr;
}


/* WHY */

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}

.why{
padding:28px;
border:1px solid var(--border);
border-radius:20px;
background:rgba(255,255,255,.025);
transition:.35s var(--ease);
}

.why:hover{
transform:translateY(-5px);
background:rgba(255,255,255,.045);
border-color:rgba(255,255,255,.14);
}

.why-number{
margin-bottom:25px;
color:#8b5cf6;
font-size:12px;
direction:ltr;
}

.why h3{
font-size:15px;
margin-bottom:8px;
}

.why p{
color:var(--muted);
font-size:11px;
}


/* TECHNOLOGIES */

.tech-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tech{
padding:10px 18px;
border:1px solid var(--border);
border-radius:50px;
color:#c9c9d0;
background:rgba(255,255,255,.025);
font-size:12px;
transition:.3s;
}

.tech:hover{
color:#fff;
border-color:rgba(139,92,246,.4);
background:rgba(139,92,246,.08);
transform:translateY(-2px);
}


/* PROJECTS */

.projects{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.project{
position:relative;
min-height:370px;
overflow:hidden;
border:1px solid var(--border);
border-radius:27px;
transition:.4s var(--ease);
}

.project-one{
background:
radial-gradient(circle at 75% 25%,rgba(139,92,246,.3),transparent 30%),
linear-gradient(135deg,#181221,#0d0d12);
}

.project-two{
background:
radial-gradient(circle at 25% 25%,rgba(59,130,246,.25),transparent 30%),
linear-gradient(135deg,#101722,#0d0d12);
}

.project-three{
background:
radial-gradient(circle at 70% 25%,rgba(16,185,129,.22),transparent 30%),
linear-gradient(135deg,#0f1917,#0d0d12);
}

.project-four{
background:
radial-gradient(circle at 30% 25%,rgba(236,72,153,.22),transparent 30%),
linear-gradient(135deg,#191018,#0d0d12);
}

.project:before{
content:"";
position:absolute;
width:280px;
height:190px;
top:45px;
left:50%;
transform:translateX(-50%) rotate(-4deg);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
background:rgba(255,255,255,.025);
box-shadow:
0 15px 50px rgba(0,0,0,.25),
inset 0 0 50px rgba(255,255,255,.02);
}

.project:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.95));
}

.project:hover{
transform:translateY(-7px);
border-color:rgba(255,255,255,.18);
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.project-number{
position:absolute;
top:20px;
left:25px;
z-index:2;
color:rgba(255,255,255,.15);
font-size:55px;
font-weight:900;
direction:ltr;
}

.project-content{
position:absolute;
right:0;
bottom:0;
left:0;
z-index:3;
padding:30px;
}

.project-content small{
display:block;
color:#b8a4ff;
font-size:9px;
letter-spacing:2px;
direction:ltr;
}

.project-content h3{
font-size:24px;
margin:4px 0 8px;
}

.project-content span{
color:#999;
font-size:11px;
transition:.3s;
}

.project:hover .project-content span{
color:#fff;
}


/* PRICING */

.pricing{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
align-items:stretch;
}

.price-card{
position:relative;
padding:35px;
border:1px solid var(--border);
border-radius:var(--radius);
background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
transition:.35s var(--ease);
}

.price-card:hover{
transform:translateY(-6px);
}

.price-card.featured{
transform:translateY(-10px);
border-color:rgba(139,92,246,.55);
background:linear-gradient(180deg,rgba(139,92,246,.14),rgba(255,255,255,.025));
box-shadow:0 30px 80px rgba(109,40,217,.14);
}

.price-card.featured:hover{
transform:translateY(-15px);
}

.badge{
position:absolute;
top:20px;
left:20px;
padding:5px 11px;
border-radius:50px;
background:linear-gradient(135deg,#8b5cf6,#6d28d9);
font-size:9px;
font-weight:700;
}

.price-card h3{
font-size:18px;
}

.price{
margin:18px 0 5px;
font-size:38px;
font-weight:900;
letter-spacing:-2px;
}

.price span{
color:#777782;
font-size:10px;
font-weight:400;
letter-spacing:0;
}

.price-description{
color:#777782;
font-size:10px;
}

.features{
list-style:none;
margin:25px 0;
}

.features li{
padding:7px 0;
color:#aaaab3;
font-size:11px;
}

.features li:before{
content:"✓";
margin-left:8px;
color:var(--green);
}


/* PROCESS */

.process{
display:grid;
grid-template-columns:repeat(4,1fr);
}

.step{
position:relative;
padding:25px;
border-top:1px solid var(--border);
}

.step:not(:last-child):after{
content:"←";
position:absolute;
top:25px;
left:-8px;
color:#5b5566;
}

.step-number{
color:rgba(139,92,246,.35);
font-size:42px;
font-weight:900;
direction:ltr;
}

.step h3{
font-size:15px;
margin:5px 0;
}

.step p{
color:var(--muted);
font-size:11px;
}


/* TESTIMONIAL */

.testimonial{
position:relative;
max-width:850px;
margin:auto;
padding:55px 45px;
text-align:center;
border:1px solid var(--border);
border-radius:30px;
background:
radial-gradient(circle at center,rgba(139,92,246,.1),transparent 60%),
rgba(255,255,255,.025);
}

.testimonial p{
color:#ddd;
font-size:19px;
line-height:2;
}

.testimonial span{
display:block;
margin-top:20px;
color:#777782;
font-size:11px;
}


/* CTA */

.cta{
position:relative;
overflow:hidden;
padding:95px 30px;
text-align:center;
border:1px solid rgba(139,92,246,.2);
border-radius:35px;
background:
radial-gradient(circle at 50% 15%,rgba(139,92,246,.25),transparent 55%),
#0d0d13;
}

.cta-glow{
position:absolute;
width:500px;
height:500px;
top:-350px;
left:50%;
transform:translateX(-50%);
border-radius:50%;
border:1px solid rgba(255,255,255,.05);
box-shadow:0 0 100px rgba(139,92,246,.1);
}

.cta small{
position:relative;
color:#a78bfa;
font-size:9px;
letter-spacing:3px;
}

.cta h2{
position:relative;
font-size:clamp(34px,5vw,60px);
line-height:1.3;
letter-spacing:-2px;
margin:10px 0 15px;
}

.cta p{
position:relative;
color:var(--muted);
font-size:13px;
margin-bottom:30px;
}

.cta-actions{
position:relative;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}


/* FOOTER */

footer{
margin-top:100px;
padding:45px 0;
border-top:1px solid var(--border);
}

.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.footer-inner strong{
display:block;
font-size:14px;
}

.footer-inner span{
display:block;
color:#666670;
font-size:9px;
letter-spacing:2px;
direction:ltr;
}

.footer-inner p{
color:#666670;
font-size:10px;
}

.phone{
direction:ltr;
color:#aaaab3;
font-size:13px;
}


/* FLOATING */

.floating-contact{
position:fixed;
left:22px;
bottom:22px;
z-index:999;
width:55px;
height:55px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
background:linear-gradient(135deg,#8b5cf6,#6d28d9);
color:white;
box-shadow:0 15px 40px rgba(109,40,217,.35);
font-size:19px;
transition:.35s var(--ease);
}

.floating-contact:hover{
transform:translateY(-5px) scale(1.05);
}


/* ANIMATION */

.service,
.why,
.project,
.price-card,
.step,
.about-box,
.testimonial{
opacity:0;
transform:translateY(25px);
transition:
opacity .7s ease,
transform .7s var(--ease),
border-color .3s,
box-shadow .3s;
}

.show{
opacity:1!important;
transform:translateY(0)!important;
}


/* RESPONSIVE */

@media(max-width:950px){

.nav-links{
display:none;
}

.hero-grid{
grid-template-columns:1fr;
gap:55px;
}

.hero-card{
max-width:600px;
margin:auto;
}

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

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

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

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

.pricing .price-card:last-child{
grid-column:1/-1;
max-width:500px;
width:100%;
margin:auto;
}

.process{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

}


@media(max-width:650px){

.container{
width:90%;
}

nav{
padding:12px 0;
}

.nav-btn{
display:none;
}

.hero{
padding-top:135px;
padding-bottom:80px;
min-height:auto;
}

h1{
font-size:48px;
letter-spacing:-3px;
}

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

.profile{
height:330px;
}

.monogram{
font-size:80px;
}

.orbit-one{
width:250px;
height:250px;
}

.orbit-two{
width:180px;
height:180px;
}

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

.stat{
padding:25px 10px;
}

.stat:nth-child(2):after{
display:none;
}

section{
padding:85px 0;
}

.section-head{
margin-bottom:35px;
}

.services,
.why-grid,
.projects,
.pricing,
.process{
grid-template-columns:1fr;
}

.pricing .price-card:last-child{
grid-column:auto;
max-width:none;
}

.price-card.featured,
.price-card.featured:hover{
transform:none;
}

.project{
min-height:310px;
}

.process{
gap:0;
}

.step:not(:last-child):after{
display:none;
}

.testimonial{
padding:40px 25px;
}

.testimonial p{
font-size:15px;
}

.about-text .big-text{
font-size:22px;
}

.cta{
padding:70px 20px;
}

.footer-inner{
flex-direction:column;
text-align:center;
}

.floating-contact{
width:50px;
height:50px;
left:15px;
bottom:15px;
}

}