:root{

--primary:#21409A;
--secondary:#6FC7B6;
--dark:#071428;
--white:#ffffff;
--glass:rgba(255,255,255,.08);

--radius:18px;

--shadow:
0 10px 35px rgba(0,0,0,.25);

--transition:.35s ease;

}



*{

margin:0;

padding:0;

box-sizing:border-box;

}



/*==============================
DISABLE TEXT SELECTION
==============================*/


*{

-webkit-user-select:none;

-moz-user-select:none;

user-select:none;

}



input,
textarea{

-webkit-user-select:text;

-moz-user-select:text;

user-select:text;

}



html{

scroll-behavior:smooth;

overflow-x:hidden;

width:100%;

}



body{

font-family:'Vazirmatn',sans-serif;

background:var(--dark);

color:#fff;

overflow-x:hidden;

overflow-y:auto;

line-height:1.8;

position:relative;

width:100%;

}



/*==============================
BACKGROUND
==============================*/


.bg-gradient{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

height:100dvh;

background:

linear-gradient(
180deg,
#21409A 0%,
#163777 40%,
#0d2247 70%,
#071428 100%
);

z-index:-6;

}



#ink-canvas{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

height:100dvh;

z-index:-5;

pointer-events:none;

mix-blend-mode:screen;

opacity:.9;

}



/* subtle film-grain texture for a bit more depth/premium feel */

.noise-overlay{

position:fixed;

inset:0;

z-index:-4;

pointer-events:none;

opacity:.02;

mix-blend-mode:overlay;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

background-size:160px 160px;

}



/*==============================
CUSTOM CURSOR (solid white dot)
==============================*/


.custom-cursor{

position:fixed;

top:0;

left:0;

width:10px;

height:10px;

border-radius:50%;

background:#fff;

pointer-events:none;

z-index:9999;

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

transition:width .2s ease,height .2s ease,opacity .2s ease;

will-change:transform;

}



.custom-cursor.cursor-hover{

width:22px;

height:22px;

}



body.has-custom-cursor,
body.has-custom-cursor *{

cursor:none;

}



body.has-custom-cursor.cursor-native-zone,
body.has-custom-cursor.cursor-native-zone *{

cursor:auto;

}



/*==============================
FLOATING CONTACT BUTTONS
==============================*/


.floating-contact{

position:fixed;

right:24px;

bottom:24px;

z-index:500;

display:flex;

flex-direction:row;

gap:14px;

}



.floating-btn{

width:56px;

height:56px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

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

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

box-shadow:0 10px 25px rgba(0,0,0,.3);

transition:.3s ease;

animation:floatBtnIn 1s ease both;

}



.floating-btn img{

width:26px;

height:26px;

object-fit:contain;

transition:filter .3s ease;

}



.floating-btn:hover,
.floating-btn:focus-visible,
.floating-btn:active{

transform:translateY(-4px) scale(1.06);

background:var(--secondary);

border-color:var(--secondary);

box-shadow:0 14px 30px rgba(0,0,0,.35), 0 0 20px rgba(111,199,182,.5);

}



.floating-btn:hover img,
.floating-btn:focus-visible img,
.floating-btn:active img{

filter:brightness(0);

}



.floating-whatsapp{

animation-delay:.1s;

}



.floating-telegram{

animation-delay:.25s;

}



@keyframes floatBtnIn{

from{

opacity:0;

transform:translateX(20px);

}

to{

opacity:1;

transform:translateX(0);

}

}



@media(max-width:768px){

.floating-contact{

right:14px;

bottom:14px;

gap:10px;

}

.floating-btn{

width:48px;

height:48px;

}

.floating-btn img{

width:22px;

height:22px;

}

}



/*==============================
NAVBAR
==============================*/


.navbar{

position:fixed;

top:20px;

left:50%;

width:min(1200px,92%);

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 28px;

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

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

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

border-radius:100px;

box-shadow:var(--shadow);

z-index:999;

transform:translateX(-50%) translateZ(0);

will-change:transform;

}



.navbar.active{

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

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border-color:rgba(255,255,255,.12);

box-shadow:

0 10px 35px rgba(0,0,0,.25);

}



.logo img{

height:44px;

display:block;

}



.navbar ul{

display:flex;

gap:35px;

list-style:none;

}



.navbar ul a{

text-decoration:none;

color:#fff;

font-size:15px;

font-weight:500;

transition:var(--transition);

position:relative;

}



.navbar ul a:hover{

color:var(--secondary);

}



.navbar ul a::after{

content:"";

position:absolute;

bottom:-8px;

right:0;

width:0;

height:2px;

background:var(--secondary);

transition:.3s;

}



.navbar ul a:hover::after{

width:100%;

}



.mobile-btn{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}



.mobile-btn span{

width:24px;

height:2px;

background:#fff;

border-radius:5px;

transition:.3s;

}


/*==========================================
HERO
==========================================*/


.hero{

min-height:calc(var(--vh, 1vh) * 100);

min-height:100svh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

width:min(1200px,92%);

margin:auto;

padding-top:120px;

padding-bottom:80px;

}



.hero-left{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}



.hero-left::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:radial-gradient(circle,var(--secondary),transparent 70%);

opacity:.18;

filter:blur(70px);

animation:pulse 6s infinite ease-in-out;

}



@keyframes pulse{

0%{

transform:scale(.9);

opacity:.12;

}

50%{

transform:scale(1.1);

opacity:.28;

}

100%{

transform:scale(.9);

opacity:.12;

}

}



.hero-logo{

width:300px;

position:relative;

z-index:5;

filter:

drop-shadow(0 0 35px rgba(111,199,182,.45));

animation:floatLogo 5s ease-in-out infinite;

}



@keyframes floatLogo{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



.hero-right h1{

font-size:72px;

font-weight:800;

line-height:1;

margin-bottom:18px;

letter-spacing:3px;

}



.hero-right h2{

font-size:30px;

font-weight:500;

color:var(--secondary);

margin-bottom:25px;

}



.hero-right p{

font-size:18px;

color:#d9e6ff;

max-width:550px;

margin-bottom:45px;

line-height:2.2;

}



.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}



.primary-btn{

background:linear-gradient(180deg,#6FC7B6,#3eb5a2);

color:#071428;

padding:16px 34px;

border-radius:100px;

text-decoration:none;

font-weight:700;

transition:.35s;

box-shadow:

0 15px 35px rgba(111,199,182,.35);

}



.primary-btn:hover{

transform:translateY(-5px);

box-shadow:

0 25px 45px rgba(111,199,182,.45);

}



.glass-btn{

padding:16px 34px;

border-radius:100px;

text-decoration:none;

color:#fff;

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

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

backdrop-filter:blur(12px);

transition:.35s;

}



.glass-btn:hover{

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

transform:translateY(-5px);

}





/*==========================================
SECTION TITLE
==========================================*/


.title,
.section-header{

text-align:center;

margin-bottom:70px;

}



.title span,
.section-header span{

letter-spacing:5px;

font-size:13px;

color:var(--secondary);

}



.title h2,
.section-header h2{

font-size:46px;

margin-top:12px;

margin-bottom:20px;

}



.section-header p{

max-width:700px;

margin:auto;

color:#c9d8ff;

line-height:2;

}





/*==========================================
SECTION
==========================================*/


section{

padding:110px 0;

width:min(1200px,92%);

margin:auto;

}





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


.services-grid{

display:grid;

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

gap:30px;

perspective:1200px;

}



.service{

position:relative;

padding:45px 35px;

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

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

backdrop-filter:blur(18px);

border-radius:22px;

overflow:hidden;

cursor:pointer;

isolation:isolate;

transform-style:preserve-3d;

transition:transform .3s ease, border-color .4s, box-shadow .4s, background .4s;

}



.service::before{

content:"";

position:absolute;

left:-80px;

top:-80px;

width:180px;

height:180px;

background:radial-gradient(circle,var(--secondary),transparent 70%);

opacity:.18;

transition:.5s;

z-index:0;

}



/* cursor-tracking spotlight glow - card size never changes, only a soft light follows the mouse */

.service .tile-glow, .stat .tile-glow{

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

opacity:0;

transition:opacity .4s;

background:radial-gradient(

260px circle at var(--mx,50%) var(--my,50%),

rgba(111,199,182,.28),

rgba(33,64,154,.12) 45%,

transparent 70%

);

}



.service:hover .tile-glow, .stat:hover .tile-glow{

opacity:1;

}



/* thin animated edge light that traces the border, following the same point as the spotlight */

.service::after, .stat::after{

content:"";

position:absolute;

inset:0;

border-radius:22px;

z-index:1;

pointer-events:none;

opacity:0;

transition:opacity .4s;

box-shadow:inset 0 0 0 1px rgba(111,199,182,.5);

background:radial-gradient(

400px circle at var(--mx,50%) var(--my,50%),

rgba(111,199,182,.14),

transparent 60%

);

}



.service:hover::after, .stat:hover::after{

opacity:1;

}



.service:hover{

border-color:rgba(111,199,182,.4);

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

box-shadow:

0 25px 60px rgba(0,0,0,.28);

}



.service:hover::before{

transform:scale(1.8);

opacity:.3;

}



/* shine sweep - passes across the card on hover, layered above the existing spotlight/glow */

.service .shine, .stat .shine{

position:absolute;

inset:0;

z-index:2;

pointer-events:none;

overflow:hidden;

border-radius:22px;

}



.service .shine::before{

content:"";

position:absolute;

top:-25%;

left:-75%;

width:60%;

height:150%;

background:linear-gradient(

100deg,

transparent 0%,

rgba(255,255,255,.05) 30%,

rgba(255,255,255,.13) 50%,

rgba(255,255,255,.05) 70%,

transparent 100%

);

filter:blur(14px);

transform:skewX(-20deg);

transition:left 1.15s ease;

}



.service:hover .shine::before, .stat:hover .shine::before{

left:120%;

}



.number{

font-size:54px;

font-weight:800;

color:rgba(255,255,255,.08);

margin-bottom:20px;

position:relative;

z-index:2;

transition:color .4s, text-shadow .4s;

}



.service:hover .number{

color:rgba(111,199,182,.3);

text-shadow:0 0 25px rgba(111,199,182,.4);

}



.service h3{

font-size:26px;

margin-bottom:15px;

color:#fff;

position:relative;

z-index:2;

transition:transform .3s;

}



.service:hover h3{

transform:translateZ(20px);

}



.service p{

color:#d7e5ff;

line-height:2;

position:relative;

z-index:2;

}

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


.portfolio-grid{

display:flex;

align-items:stretch;

gap:10px;

height:460px;

width:100%;

}



.portfolio-card{

position:relative;

overflow:hidden;

border-radius:22px;

background:#13284d;

cursor:pointer;

flex:1 1 0%;

min-width:0;

transition:flex-grow .55s cubic-bezier(.22,1,.36,1);

}



.portfolio-card.active{

flex-grow:6;

}



.portfolio-card img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .6s;

display:block;

}



.overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:28px;

background:

linear-gradient(

transparent,

rgba(0,0,0,.82)

);

opacity:0;

transition:opacity .45s;

}



.overlay h3{

font-size:28px;

margin-bottom:8px;

white-space:nowrap;

}



.overlay p{

color:#6FC7B6;

white-space:nowrap;

}



.portfolio-card.active .overlay{

opacity:1;

}



.portfolio-card.active img{

transform:scale(1.06);

}






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


.about{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}



.about span{

letter-spacing:5px;

color:#6FC7B6;

font-size:13px;

}



.about h2{

font-size:48px;

margin:20px 0;

}



.about p{

color:#d6e5ff;

line-height:2.2;

margin-bottom:35px;

}



.about ul{

list-style:none;

display:grid;

gap:16px;

}



.about li{

font-size:18px;

}



.about-right{

display:grid;

grid-template-columns:1fr;

gap:25px;

perspective:1200px;

}



.stat{

position:relative;

padding:40px;

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

border-radius:22px;

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

text-align:center;

overflow:hidden;

cursor:pointer;

isolation:isolate;

transform-style:preserve-3d;

transition:transform .3s ease, border-color .4s, box-shadow .4s, background .4s;

}



.stat:hover{

border-color:rgba(111,199,182,.4);

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

box-shadow:0 25px 60px rgba(0,0,0,.28);

}



.stat h3{

font-size:52px;

color:#6FC7B6;

margin-bottom:10px;

}



.stat h3 .counter{

font-size:inherit;

color:inherit;

letter-spacing:normal;

}



.stat span{

font-size:18px;

letter-spacing:0;

color:#fff;

}






/*==========================================
CLIENTS
==========================================*/


.clients{

padding:60px 20px 20px;

}



.clients-row{

display:flex;

flex-wrap:wrap;

align-items:center;

justify-content:center;

gap:60px;

margin-top:40px;

}



.client-logo{

height:42px;

width:auto;

max-width:140px;

object-fit:contain;

opacity:.35;

filter:grayscale(1) brightness(0) invert(1);

transition:opacity .35s ease, transform .35s ease;

}



.client-logo:hover{

opacity:1;

transform:translateY(-3px);

}



@media(max-width:768px){

.clients-row{

gap:36px;

}

.client-logo{

height:32px;

}

}




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


.contact{

padding-bottom:120px;

}



.contact-box{

display:grid;

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

gap:25px;

margin-top:50px;

}



.contact-box a{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:14px;

padding:32px 28px;

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

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

backdrop-filter:blur(15px);

border-radius:22px;

text-decoration:none;

color:#fff;

font-size:18px;

font-weight:500;

transition:.35s;

position:relative;

overflow:hidden;

text-align:center;

}



.contact-icon{

width:42px;

height:42px;

object-fit:contain;

}



.contact-text{

line-height:1.9;

}



.contact-box a .shine{

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

overflow:hidden;

border-radius:22px;

}



.contact-box a .shine::before{

content:"";

position:absolute;

top:-25%;

left:-75%;

width:60%;

height:150%;

background:linear-gradient(

100deg,

transparent 0%,

rgba(255,255,255,.08) 30%,

rgba(255,255,255,.22) 50%,

rgba(255,255,255,.08) 70%,

transparent 100%

);

filter:blur(14px);

transform:skewX(-20deg);

transition:left 1.15s ease;

}



.contact-box a:hover .shine::before{

left:120%;

}



/* glass tint layer - fades in on hover instead of swapping to a flat
   opaque gradient, so the frosted-glass look (and the blur behind it)
   stays visible and there's no hard seam at the gradient's end */

.contact-box a::before{

content:"";

position:absolute;

inset:0;

z-index:1;

border-radius:22px;

background:linear-gradient(135deg,rgba(33,64,154,.55),rgba(111,199,182,.55));

opacity:0;

transition:opacity .5s ease;

pointer-events:none;

}



.contact-box a:hover::before{

opacity:1;

}



.contact-icon,
.contact-text{

position:relative;

z-index:2;

}



.contact-box a:hover{

transform:translateY(-8px);

border-color:rgba(255,255,255,.25);

backdrop-filter:blur(20px) saturate(160%);

-webkit-backdrop-filter:blur(20px) saturate(160%);

box-shadow:

0 20px 40px rgba(0,0,0,.25);

}






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


footer{

padding:80px 20px;

text-align:center;

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

}



footer img{

width:95px;

margin-bottom:25px;

filter:drop-shadow(0 0 20px rgba(111,199,182,.35));

}



footer h3{

font-size:34px;

margin-bottom:10px;

}



footer p{

color:#bfcfff;

margin:8px 0;

}





/*==========================================
SCROLLBAR
==========================================*/


::-webkit-scrollbar{

width:10px;

}



::-webkit-scrollbar-track{

background:#071428;

}



::-webkit-scrollbar-thumb{

background:#21409A;

border-radius:30px;

}



::-webkit-scrollbar-thumb:hover{

background:#6FC7B6;

}


/*==========================================
ANIMATION
==========================================*/


.fade-up{

opacity:0;

transform:translateY(60px);

transition:opacity 1s ease, transform 1s ease;

will-change:opacity, transform;

}



.fade-up.show{

opacity:1;

transform:none;

}





/*==========================================
MOBILE MENU
==========================================*/


.navbar ul.open{

display:flex;

position:fixed;

top:90px;

right:4%;

width:92%;

flex-direction:column;

padding:25px;

border-radius:20px;

background:rgba(7,20,40,.92);

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

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

}



.mobile-btn.active span:nth-child(1){

transform:rotate(45deg) translateY(10px);

}



.mobile-btn.active span:nth-child(2){

opacity:0;

}



.mobile-btn.active span:nth-child(3){

transform:rotate(-45deg) translateY(-10px);

}





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


@media(max-width:1100px){


.hero{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}



.hero-right p{

margin:auto auto 40px;

}



.hero-buttons{

justify-content:center;

}



.about{

grid-template-columns:1fr;

}



.services-grid{

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

}



.portfolio-grid{

display:flex;

flex-direction:column;

height:auto;

gap:10px;

}

.portfolio-card{

flex:none;

width:100%;

height:56px;

transition:height .5s cubic-bezier(.22,1,.36,1);

}

.portfolio-card.active{

height:340px;

}


}





@media(max-width:768px){



.custom-cursor{

display:none;

}



.navbar{

padding:14px 20px;

}



.navbar ul{

display:none;

}



.mobile-btn{

display:flex;

}



.hero{

padding-top:140px;

min-height:auto;

}



.hero-logo{

width:190px;

}



.hero-right h1{

font-size:42px;

}



.hero-right h2{

font-size:22px;

}



.hero-right p{

font-size:16px;

}



.services-grid{

grid-template-columns:1fr;

}



.portfolio-card{

height:48px;

}

.portfolio-card.active{

height:280px;

}



.contact-box{

grid-template-columns:1fr;

}



.title h2,
.section-header h2{

font-size:34px;

}



.about h2{

font-size:34px;

}



#ink-canvas{

opacity:.55;

}



}




@media(max-width:480px){



.hero{

min-height:auto;

padding-bottom:80px;

}



.primary-btn,
.glass-btn{

width:100%;

text-align:center;

}



.hero-buttons{

flex-direction:column;

}



footer h3{

font-size:26px;

}



}