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

html{
scroll-behavior:smooth;
}

body{
background:#070707;
color:#ffffff;
font-family:'Inter',sans-serif;
overflow-x:hidden;
position:relative;
}

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

img{
display:block;
max-width:100%;
}

.container{
width:100%;
max-width:1280px;
margin:0 auto;
padding:0 32px;
position:relative;
z-index:2;
}

.grid-bg{
position:fixed;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);

background-size:60px 60px;

z-index:-5;
}

.noise{
position:fixed;
inset:0;

background-image:url('https://grainy-gradients.vercel.app/noise.svg');

opacity:0.05;

pointer-events:none;

z-index:-4;
}

.blur-ball{
position:fixed;
border-radius:50%;
filter:blur(120px);
pointer-events:none;
z-index:-3;
opacity:0.5;
animation:floatBall 12s ease-in-out infinite;
}

.blur-ball-1{
width:420px;
height:420px;
background:#ff5a1f;
top:-120px;
left:-120px;
}

.blur-ball-2{
width:320px;
height:320px;
background:#7b2cff;
right:-80px;
top:20%;
animation-delay:2s;
}

.blur-ball-3{
width:360px;
height:360px;
background:#ff5a1f;
bottom:-140px;
left:20%;
animation-delay:4s;
}

.blur-ball-4{
width:260px;
height:260px;
background:#7b2cff;
right:10%;
bottom:10%;
animation-delay:6s;
}

@keyframes floatBall{

0%{
transform:translateY(0px) translateX(0px);
}

50%{
transform:translateY(-40px) translateX(30px);
}

100%{
transform:translateY(0px) translateX(0px);
}

}

.spark{
position:fixed;
width:6px;
height:6px;
border-radius:50%;
background:#ff5a1f;
box-shadow:0 0 20px #ff5a1f;
pointer-events:none;
z-index:-2;
animation:sparkFloat linear infinite;
opacity:0;
}

.spark-1{
left:10%;
animation-duration:8s;
animation-delay:1s;
}

.spark-2{
left:30%;
animation-duration:11s;
animation-delay:2s;
}

.spark-3{
left:50%;
animation-duration:9s;
animation-delay:3s;
}

.spark-4{
left:70%;
animation-duration:13s;
animation-delay:1s;
}

.spark-5{
left:85%;
animation-duration:10s;
animation-delay:4s;
}

.spark-6{
left:60%;
animation-duration:12s;
animation-delay:6s;
}

@keyframes sparkFloat{

0%{
transform:translateY(100vh) scale(0);
opacity:0;
}

10%{
opacity:1;
}

90%{
opacity:1;
}

100%{
transform:translateY(-10vh) scale(1.5);
opacity:0;
}

}

.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;

backdrop-filter:blur(20px);

background:
rgba(8,8,8,0.72);

border-bottom:
1px solid rgba(255,255,255,0.06);
}

.nav{
height:90px;

display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{
height:44px;
}

.desktop-nav{
display:flex;
align-items:center;
gap:38px;
}

.desktop-nav a{
font-size:15px;
font-weight:500;
color:rgba(255,255,255,0.72);

transition:0.3s ease;
}

.desktop-nav a:hover{
color:#ffffff;
}

.header-socials,
.footer-socials{
display:flex;
align-items:center;
gap:14px;
}

.social-icon{
width:48px;
height:48px;

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

border-radius:50%;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(14px);

color:#ffffff;

position:relative;

overflow:hidden;

transition:
0.35s ease;
}

.social-icon svg{
width:22px;
height:22px;
}

.social-icon::before{
content:'';

position:absolute;

width:120%;
height:120%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,90,31,0.45),
transparent
);

transform:
translateX(-140%)
rotate(25deg);

transition:
0.7s ease;
}

.social-icon:hover::before{

transform:
translateX(140%)
rotate(25deg);

}

.social-icon:hover{

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

background:
rgba(255,90,31,0.12);

border-color:
rgba(255,90,31,0.35);

box-shadow:
0 0 24px rgba(255,90,31,0.3);

color:#ff5a1f;
}

.mobile-button{
display:none;

width:54px;
height:54px;

border:none;

border-radius:18px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(14px);

cursor:pointer;

position:relative;

z-index:1200;

transition:
0.35s ease;
}

.mobile-button:hover{
transform:
translateY(-2px);

border-color:
rgba(255,90,31,0.25);

background:
rgba(255,90,31,0.08);
}

.mobile-button span{
display:block;

width:24px;
height:2px;

background:#ffffff;

margin:5px auto;

border-radius:999px;

transition:
0.35s cubic-bezier(.22,1,.36,1);
}

.mobile-button.active span:nth-child(1){
transform:
translateY(7px)
rotate(45deg);
}

.mobile-button.active span:nth-child(2){
opacity:0;
transform:scaleX(0);
}

.mobile-button.active span:nth-child(3){
transform:
translateY(-7px)
rotate(-45deg);
}

.mobile-menu{
position:fixed;

top:110px;
left:20px;
right:20px;

padding:26px;

display:flex;
flex-direction:column;
gap:10px;

border-radius:34px;

background:
linear-gradient(
180deg,
rgba(18,18,18,0.96),
rgba(10,10,10,0.92)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(26px);

box-shadow:
0 40px 120px rgba(0,0,0,0.45);

transform:
translateY(-40px)
scale(0.94);

opacity:0;

pointer-events:none;

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

overflow:hidden;

z-index:999;
}

.mobile-menu::before{
content:'';

position:absolute;

width:260px;
height:260px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,90,31,0.18),
transparent 70%
);

top:-120px;
right:-80px;

filter:blur(30px);

pointer-events:none;
}

.mobile-menu::after{
content:'';

position:absolute;

inset:0;

background-image:
linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);

background-size:32px 32px;

opacity:0.35;

pointer-events:none;
}

.mobile-menu.active{
transform:
translateY(0px)
scale(1);

opacity:1;

pointer-events:auto;
}

.mobile-menu a{
position:relative;

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

padding:18px 20px;

border-radius:20px;

font-size:20px;
font-weight:700;

background:
rgba(255,255,255,0.03);

border:
1px solid rgba(255,255,255,0.04);

transition:
0.35s ease;

overflow:hidden;

z-index:2;
}

.mobile-menu a::before{
content:'';

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(255,90,31,0.16),
transparent
);

opacity:0;

transition:
0.35s ease;
}

.mobile-menu a::after{
content:'↗';

font-size:16px;

opacity:0.45;

transition:
0.35s ease;
}

.mobile-menu a:hover{
transform:
translateX(6px);

border-color:
rgba(255,90,31,0.22);

background:
rgba(255,90,31,0.08);
}

.mobile-menu a:hover::before{
opacity:1;
}

.mobile-menu a:hover::after{
opacity:1;

transform:
translateX(4px)
translateY(-2px);
}

.hero{
min-height:100vh;

display:flex;
align-items:center;

position:relative;

overflow:hidden;

padding-top:120px;
padding-bottom:80px;
}

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

.hero-left{
position:relative;
z-index:2;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;

padding:12px 18px;

border-radius:999px;

background:
rgba(255,255,255,0.05);

border:
1px solid rgba(255,255,255,0.08);

font-size:13px;
font-weight:600;
letter-spacing:1px;

margin-bottom:28px;
}

.hero h1{
font-size:110px;
line-height:0.92;
font-weight:900;
letter-spacing:-5px;

margin-bottom:28px;

position:relative;
}

.word-splashes{
position:relative;
display:inline-block;
color:#ff5a1f;
}

.splash{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:#ff5a1f;

opacity:0;

animation:splashAnim 3s infinite;
}

.s1{
top:10px;
left:20px;
animation-delay:0s;
}

.s2{
top:0;
right:10px;
animation-delay:0.2s;
}

.s3{
bottom:10px;
left:40px;
animation-delay:0.4s;
}

.s4{
bottom:-5px;
right:20px;
animation-delay:0.6s;
}

.s5{
top:50%;
left:-10px;
animation-delay:0.8s;
}

.s6{
top:40%;
right:-12px;
animation-delay:1s;
}

.s7{
top:-10px;
left:50%;
animation-delay:1.2s;
}

.s8{
bottom:-12px;
left:60%;
animation-delay:1.4s;
}

@keyframes splashAnim{

0%{
transform:
scale(0)
translate(0,0);

opacity:0;
}

20%{
opacity:1;
}

100%{
transform:
scale(1.8)
translate(
calc((rand() - 0.5) * 80px),
calc((rand() - 0.5) * 80px)
);

opacity:0;
}

}

.hero p{
max-width:620px;

font-size:20px;
line-height:1.8;

color:
rgba(255,255,255,0.72);

margin-bottom:38px;
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:40px;
}

.btn-primary,
.btn-secondary{
height:62px;
padding:0 34px;

display:inline-flex;
align-items:center;
justify-content:center;

border-radius:18px;

font-size:16px;
font-weight:700;

transition:0.35s ease;

position:relative;

overflow:hidden;
}

.btn-primary{
background:#ff5a1f;
color:#ffffff;

box-shadow:
0 0 30px rgba(255,90,31,0.35);
}

.btn-primary:hover{
transform:
translateY(-4px);

box-shadow:
0 0 45px rgba(255,90,31,0.45);
}

.btn-secondary{
border:
1px solid rgba(255,255,255,0.12);

background:
rgba(255,255,255,0.04);

backdrop-filter:blur(10px);
}

.btn-secondary:hover{
transform:
translateY(-4px);

border-color:
rgba(255,255,255,0.28);
}

.large{
padding:0 48px;
height:68px;
font-size:17px;
}

.brands-row{
display:flex;
gap:26px;
flex-wrap:wrap;
}

.brands-row span{
font-size:14px;
font-weight:700;
letter-spacing:2px;

color:
rgba(255,255,255,0.35);
}

.hero-right{
position:relative;
}

.hero-card{
position:relative;

height:680px;

border-radius:40px;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(24px);
}

.hero-card-grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);

background-size:42px 42px;

opacity:0.4;
}

.hero-card-light{
position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,90,31,0.45),
transparent 70%
);

top:50%;
left:50%;

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

filter:blur(20px);

animation:
pulseGlow 6s ease-in-out infinite;
}

@keyframes pulseGlow{

0%{
transform:
translate(-50%,-50%)
scale(1);
}

50%{
transform:
translate(-50%,-50%)
scale(1.08);
}

100%{
transform:
translate(-50%,-50%)
scale(1);
}

}

.hero-card-ring{
position:absolute;

border-radius:50%;

border:
1px solid rgba(255,255,255,0.08);
}

.hero-card-ring-1{
width:520px;
height:520px;

top:50%;
left:50%;

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

animation:
rotateRing 22s linear infinite;
}

.hero-card-ring-2{
width:360px;
height:360px;

top:50%;
left:50%;

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

animation:
rotateRingReverse 18s linear infinite;
}

@keyframes rotateRing{

from{
transform:
translate(-50%,-50%)
rotate(0deg);
}

to{
transform:
translate(-50%,-50%)
rotate(360deg);
}

}

@keyframes rotateRingReverse{

from{
transform:
translate(-50%,-50%)
rotate(360deg);
}

to{
transform:
translate(-50%,-50%)
rotate(0deg);
}

}

.hero-bird{
position:absolute;

width:340px;

top:50%;
left:50%;

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

z-index:2;

filter:
drop-shadow(0 0 40px rgba(255,90,31,0.45));

animation:
birdFloat 5s ease-in-out infinite;
}

@keyframes birdFloat{

0%{
transform:
translate(-50%,-50%)
translateY(0px);
}

50%{
transform:
translate(-50%,-50%)
translateY(-18px);
}

100%{
transform:
translate(-50%,-50%)
translateY(0px);
}

}

.hero-gradient{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:0.35;
pointer-events:none;
}

.hero-gradient-1{
width:420px;
height:420px;

background:#ff5a1f;

top:-120px;
left:-120px;
}

.hero-gradient-2{
width:320px;
height:320px;

background:#7b2cff;

bottom:-80px;
right:0;
}

.hero-gradient-3{
width:240px;
height:240px;

background:#ff5a1f;

right:20%;
top:20%;
}

.hero-bg-lines{
position:absolute;
inset:0;

background:
radial-gradient(
circle at center,
rgba(255,255,255,0.04),
transparent 60%
);

pointer-events:none;
}

.rotating-ring{
position:absolute;
border-radius:50%;

border:
1px dashed rgba(255,255,255,0.08);

pointer-events:none;
}

.ring-1{
width:700px;
height:700px;

top:-200px;
right:-200px;

animation:
rotateRing 40s linear infinite;
}

.ring-2{
width:520px;
height:520px;

bottom:-180px;
left:-180px;

animation:
rotateRingReverse 35s linear infinite;
}

.ring-3{
width:340px;
height:340px;

top:40%;
left:50%;

animation:
rotateRing 28s linear infinite;
}

.floating-orb{
position:absolute;
border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,0.35),
transparent 70%
);

filter:blur(12px);

animation:
floatOrb 8s ease-in-out infinite;
}

.orb-1{
width:14px;
height:14px;

top:18%;
left:12%;
}

.orb-2{
width:20px;
height:20px;

top:70%;
right:16%;

animation-delay:2s;
}

.orb-3{
width:10px;
height:10px;

top:45%;
right:40%;

animation-delay:4s;
}

@keyframes floatOrb{

0%{
transform:
translateY(0px);
}

50%{
transform:
translateY(-24px);
}

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

}

.section{
padding:140px 0;
position:relative;
}

.section-top{
margin-bottom:70px;
}

.section-badge{
display:inline-flex;
align-items:center;

padding:12px 18px;

border-radius:999px;

background:
rgba(255,90,31,0.12);

border:
1px solid rgba(255,90,31,0.2);

color:#ff5a1f;

font-size:13px;
font-weight:700;
letter-spacing:1px;

margin-bottom:24px;
}

.purple-badge{
background:
rgba(123,44,255,0.12);

border:
1px solid rgba(123,44,255,0.24);

color:#a359ff;
}

.section h2,
.section-title{
font-size:82px;
line-height:0.95;
font-weight:900;
letter-spacing:-4px;
}

.page-hero{
padding-top:180px;
padding-bottom:40px;
}

.page-description{
max-width:760px;

font-size:20px;
line-height:1.8;

color:
rgba(255,255,255,0.72);

margin-top:34px;
}

.services-section,
.projects-page-section,
.about-section,
.contact-section{
padding-top:20px;
}

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

gap:28px;
}

.service-card{
position:relative;

padding:42px;

border-radius:34px;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(20px);

overflow:hidden;

transition:
0.45s ease;
}

.service-card::before{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(255,90,31,0.08),
transparent 60%
);

opacity:0;

transition:
0.45s ease;
}

.service-card:hover::before{
opacity:1;
}

.service-card:hover{
transform:
translateY(-10px);

border-color:
rgba(255,90,31,0.25);

box-shadow:
0 30px 80px rgba(0,0,0,0.35);
}

.service-icon{
width:72px;
height:72px;

border-radius:22px;

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

background:
linear-gradient(
135deg,
rgba(255,90,31,0.22),
rgba(255,90,31,0.08)
);

border:
1px solid rgba(255,90,31,0.25);

color:#ff5a1f;

margin-bottom:26px;

position:relative;

overflow:hidden;

box-shadow:
0 0 30px rgba(255,90,31,0.16);

transition:
0.35s ease;
}

.service-icon.purple{
background:
linear-gradient(
135deg,
rgba(163,89,255,0.22),
rgba(163,89,255,0.08)
);

border:
1px solid rgba(163,89,255,0.24);

color:#a359ff;

box-shadow:
0 0 30px rgba(163,89,255,0.16);
}

.service-icon::before{
content:'';

position:absolute;

width:160%;
height:160%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,255,255,0.18),
transparent
);

transform:
rotate(25deg)
translateX(-140%);

transition:
0.8s ease;
}

.service-card:hover .service-icon::before{
transform:
rotate(25deg)
translateX(140%);
}

.service-card:hover .service-icon{
transform:
translateY(-6px)
scale(1.06);
}

.service-icon svg{
width:34px;
height:34px;
}

.service-card h3{
font-size:28px;
font-weight:800;
line-height:1.1;

margin-bottom:18px;
}

.service-card p{
font-size:17px;
line-height:1.8;

color:
rgba(255,255,255,0.7);
}

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

gap:30px;
}

.project-card{
position:relative;

height:520px;

border-radius:36px;

overflow:hidden;

cursor:pointer;

border:
1px solid rgba(255,255,255,0.08);

transition:
0.5s ease;
}

.project-card img{
width:100%;
height:100%;
object-fit:cover;

transition:
0.7s ease;
}

.project-card:hover img{
transform:
scale(1.08);
}

.project-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
180deg,
transparent,
rgba(0,0,0,0.78)
);
}

.project-content{
position:absolute;

left:34px;
bottom:34px;

z-index:2;
}

.project-type{
display:inline-flex;

padding:10px 14px;

border-radius:999px;

background:
rgba(255,255,255,0.1);

backdrop-filter:
blur(10px);

font-size:12px;
font-weight:700;
letter-spacing:1px;

margin-bottom:16px;
}

.project-content h3{
font-size:52px;
font-weight:900;
letter-spacing:-2px;
}

.about-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);

gap:28px;
}

.about-card{
padding:42px;

border-radius:34px;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(20px);

transition:
0.45s ease;
}

.about-card:hover{
transform:
translateY(-10px);

border-color:
rgba(255,90,31,0.25);

box-shadow:
0 30px 80px rgba(0,0,0,0.35);
}

.about-card h3{
font-size:30px;
font-weight:800;

margin-bottom:20px;
}

.about-card p{
font-size:17px;
line-height:1.9;

color:
rgba(255,255,255,0.72);
}

.contact-grid{
display:grid;
grid-template-columns:
420px 1fr;

gap:40px;
align-items:start;
}

.contact-info{
display:flex;
flex-direction:column;
gap:24px;
}

.contact-item{
padding:32px;

border-radius:30px;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(18px);
}

.contact-label{
font-size:13px;
font-weight:700;
letter-spacing:1px;

text-transform:uppercase;

color:#ff5a1f;

margin-bottom:14px;
}

.contact-item a{
font-size:26px;
font-weight:700;

word-break:break-word;
}

.contact-form{
position:relative;

padding:46px;

border-radius:36px;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(20px);

overflow:hidden;
}

.contact-form::before{
content:'';

position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,90,31,0.18),
transparent 70%
);

top:-160px;
right:-120px;

filter:blur(20px);

pointer-events:none;
}

.contact-form input,
.contact-form textarea{
width:100%;

border:none;
outline:none;

padding:22px 24px;

border-radius:20px;

background:
rgba(255,255,255,0.05);

border:
1px solid rgba(255,255,255,0.08);

color:#ffffff;

font-size:16px;
font-family:'Inter',sans-serif;

margin-bottom:20px;

transition:
0.3s ease;
}

.contact-form textarea{
height:180px;
resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:
rgba(255,90,31,0.45);

box-shadow:
0 0 0 4px rgba(255,90,31,0.08);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
color:
rgba(255,255,255,0.42);
}

.captcha-box{
margin-bottom:26px;
}

.captcha-box label{
display:flex;
align-items:center;
gap:12px;

font-size:15px;

color:
rgba(255,255,255,0.72);
}

.captcha-box input{
width:18px;
height:18px;

margin:0;
}

.cta{
padding-top:60px;
}

.cta-box{
position:relative;

overflow:hidden;

padding:90px;

border-radius:42px;

background:
linear-gradient(
135deg,
rgba(255,90,31,0.16),
rgba(123,44,255,0.12)
);

border:
1px solid rgba(255,255,255,0.08);

text-align:center;
}

.cta-glow{
position:absolute;
inset:0;

background:
radial-gradient(
circle at center,
rgba(255,90,31,0.18),
transparent 70%
);

pointer-events:none;

z-index:1;
}

.cta-box > *{
position:relative;
z-index:2;
}

.cta-box p{
max-width:720px;

margin:
26px auto 40px;

font-size:20px;
line-height:1.8;

color:
rgba(255,255,255,0.72);
}

.footer-content{
padding:34px 0 50px;

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

gap:30px;

border-top:
1px solid rgba(255,255,255,0.08);
}

.footer-left{
display:flex;
align-items:center;
gap:24px;

color:
rgba(255,255,255,0.45);
}

.footer-left img{
height:40px;
}

.reveal{
opacity:0;

transform:
translateY(40px);

animation:
revealBlock 1s ease forwards;
}

.reveal-delay{
opacity:0;

transform:
translateY(40px);

animation:
revealBlock 1s ease forwards;

animation-delay:0.2s;
}

@keyframes revealBlock{

to{
opacity:1;

transform:
translateY(0px);
}

}

@media(max-width:1180px){

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

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

.hero-card{
height:620px;
}

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

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

}

@media(max-width:860px){

.container{
padding:0 22px;
}

.desktop-nav,
.header-socials{
display:none;
}

.mobile-button{
display:block;
}

.hero{
padding-top:150px;
min-height:auto;
}

.hero-grid{
gap:40px;
}

.hero h1{
font-size:64px;
letter-spacing:-3px;
}

.hero p,
.page-description,
.cta-box p{
font-size:17px;
line-height:1.7;
}

.hero-card{
height:440px;
border-radius:30px;
}

.hero-bird{
width:220px;
}

.section{
padding:100px 0;
}

.section h2,
.section-title{
font-size:54px;
letter-spacing:-2px;
}

.services-grid,
.projects-grid,
.about-grid{
grid-template-columns:1fr;
}

.project-card{
height:420px;
}

.project-content h3{
font-size:42px;
}

.contact-form{
padding:30px;
}

.cta-box{
padding:60px 26px;
}

.footer-content{
flex-direction:column;
align-items:flex-start;
}

}

@media(max-width:560px){

.hero h1{
font-size:48px;
line-height:0.95;
}

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

.btn-primary,
.btn-secondary{
width:100%;
}

.hero-card{
height:340px;
}

.hero-bird{
width:180px;
}

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

.project-card{
height:340px;
}

.project-content h3{
font-size:34px;
}

.service-card,
.about-card{
padding:32px;
}

.contact-form{
padding:24px;
}

.contact-item a{
font-size:20px;
}

.social-icon{
width:44px;
height:44px;
}

}

/* =========================
CURSOR GLOW
========================= */

.cursor-glow{
position:fixed;

width:260px;
height:260px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,90,31,0.16),
transparent 70%
);

pointer-events:none;

z-index:-1;

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

filter:blur(40px);

transition:
transform 0.08s linear;
}

/* =========================
CURSOR SPLASH
========================= */

.cursor-splash{
position:fixed;

width:10px;
height:10px;

border-radius:50%;

background:#ff5a1f;

pointer-events:none;

z-index:9999;

box-shadow:
0 0 16px rgba(255,90,31,0.8);

animation:
cursorSplashAnim 1.4s ease-out forwards;
}

@keyframes cursorSplashAnim{

0%{
opacity:1;

transform:
translate(0,0)
scale(1);
}

100%{
opacity:0;

transform:
translate(
var(--x),
var(--y)
)
scale(0);
}

}

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

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

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

::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#ff5a1f,
#7b2cff
);

border-radius:999px;
}

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

::selection{
background:#ff5a1f;
color:#ffffff;
}

/* =========================
SUCCESS POPUP
========================= */

.success-popup{
position:fixed;
inset:0;

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

background:
rgba(0,0,0,0.72);

backdrop-filter:
blur(18px);

opacity:0;
pointer-events:none;

transition:
0.35s ease;

z-index:5000;
}

.success-popup.active{
opacity:1;
pointer-events:auto;
}

.popup-card{
position:relative;

width:100%;
max-width:620px;

padding:60px 40px;

border-radius:36px;

text-align:center;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.06),
rgba(255,255,255,0.03)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(20px);
}

.popup-card::before{
content:'';

position:absolute;

width:340px;
height:340px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,90,31,0.22),
transparent 70%
);

top:-140px;
right:-100px;

filter:blur(30px);
}

.popup-logo{
width:100px;

margin:
0 auto 24px;

filter:
drop-shadow(0 0 30px rgba(255,90,31,0.35));

position:relative;
z-index:2;
}

.popup-card h2{
font-size:64px;
font-weight:900;
letter-spacing:-3px;

margin-bottom:20px;

position:relative;
z-index:2;
}

.popup-card p{
font-size:19px;
line-height:1.8;

color:
rgba(255,255,255,0.72);

margin-bottom:34px;

position:relative;
z-index:2;
}

.popup-card .btn-primary{
position:relative;
z-index:2;
}

.popup-confetti{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
}

.mini-confetti{
position:absolute;
top:-20px;

background:
linear-gradient(
180deg,
#ff5a1f,
#7b2cff
);

opacity:0.9;

animation:
miniConfetti linear forwards;
}

@keyframes miniConfetti{

0%{
transform:
translateY(-10vh)
rotate(0deg);

opacity:1;
}

100%{
transform:
translateY(120vh)
rotate(720deg);

opacity:0;
}

}

@media(max-width:560px){

.popup-card{
padding:46px 24px;
}

.popup-card h2{
font-size:46px;
}

.popup-card p{
font-size:16px;
}

.popup-logo{
width:76px;
}

}

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

.mobile-menu-socials{
display:flex;
align-items:center;
justify-content:center;
gap:14px;

padding-top:18px;
margin-top:10px;

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

position:relative;
z-index:2;
}

.mobile-menu-socials .social-icon{
width:52px;
height:52px;

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

border-radius:50%;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:
blur(14px);

color:#ffffff;

position:relative;

overflow:hidden;

transition:
0.35s ease;
}

.mobile-menu-socials .social-icon svg{
width:22px;
height:22px;
position:relative;
z-index:2;
}

.mobile-menu-socials .social-icon::before{
content:'';

position:absolute;

width:120%;
height:120%;

background:
linear-gradient(
45deg,
transparent,
rgba(255,90,31,0.45),
transparent
);

transform:
translateX(-140%)
rotate(25deg);

transition:
0.7s ease;
}

.mobile-menu-socials .social-icon:hover::before{
transform:
translateX(140%)
rotate(25deg);
}

.mobile-menu-socials .social-icon:hover{
transform:
translateY(-4px)
scale(1.08);

background:
rgba(255,90,31,0.12);

border-color:
rgba(255,90,31,0.35);

box-shadow:
0 0 24px rgba(255,90,31,0.3);

color:#ff5a1f;
}

/* =========================
FIX MOBILE SOCIAL ICONS
========================= */

.mobile-menu-socials a::after{
display:none !important;
content:none !important;
}

.mobile-menu-socials a::before{
display:none !important;
}

.mobile-menu-socials .social-icon svg{
display:block !important;

width:22px !important;
height:22px !important;

fill:currentColor !important;
stroke:none !important;

color:inherit !important;

opacity:1 !important;

visibility:visible !important;
}

.mobile-menu-socials .social-icon{
font-size:0;
line-height:0;
}