*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#0f172a;
color:white;
overflow-x:hidden;
}

.background{
position:fixed;
inset:0;
background:
linear-gradient(135deg,#0f172a,#111827,#1e1b4b);
z-index:-2;
}

.background::before{
content:"";
position:absolute;
width:800px;
height:800px;
top:-250px;
left:-250px;
border-radius:50%;
background:rgba(168,85,247,.15);
filter:blur(120px);
}

.background::after{
content:"";
position:absolute;
width:700px;
height:700px;
bottom:-250px;
right:-250px;
border-radius:50%;
background:rgba(56,189,248,.1);
filter:blur(120px);
}

section{
padding:110px 8%;
}

.section-title{
text-align:center;
font-size:3rem;
color:#a855f7;
margin-bottom:60px;
}

nav{
position:sticky;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
background:rgba(15,23,42,.75);
backdrop-filter:blur(18px);
z-index:1000;
border-bottom:1px solid rgba(255,255,255,.08);
}

.logo{
font-size:1.8rem;
font-weight:700;
color:#a855f7;
}

.nav-links{
display:flex;
align-items:center;
gap:30px;
}

.nav-links a{
color:white;
text-decoration:none;
transition:.3s;
}

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

.menu-btn{
display:none;
background:none;
border:none;
color:white;
font-size:1.8rem;
cursor:pointer;
}

#themeToggle{
width:48px;
height:48px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.06);
color:white;
cursor:pointer;
}

.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:120px 20px;
}

.hero-content{
max-width:1000px;
}

.hero h1{
font-size:clamp(3rem,6vw,5.5rem);
line-height:1.1;
margin-bottom:30px;
font-weight:700;
word-break:break-word;
}

.hero p{
max-width:900px;
margin:auto;
font-size:1.3rem;
line-height:2;
}

.status{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(56,189,248,.12);
color:#38bdf8;
margin-bottom:25px;
letter-spacing:2px;
font-size:.9rem;
}

.hero h1{
font-size:clamp(4rem,8vw,7rem);
line-height:1;
margin-bottom:25px;
}

.hero span{
color:#a855f7;
}

.hero p{
font-size:1.15rem;
line-height:2;
color:#cbd5e1;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
flex-wrap:wrap;
}

.btn{
padding:16px 30px;
border-radius:16px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.primary{
background:#a855f7;
color:white;
}

.secondary{
border:2px solid #a855f7;
color:white;
}

.btn:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(168,85,247,.3);
}

.cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));
gap:25px;
}

.card{
padding:45px;
min-height:220px;
}

.card{
background:
linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(25px);
padding:35px;
border-radius:30px;
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
border-color:rgba(168,85,247,.35);
box-shadow:0 20px 50px rgba(168,85,247,.15);
}

.card h3{
margin-bottom:20px;
color:#a855f7;
}

.card p{
color:#cbd5e1;
line-height:1.9;
}

.server-size{
display:inline-block;
padding:10px 18px;
background:rgba(168,85,247,.15);
border-radius:999px;
margin:18px 0;
color:#c084fc;
}

.about-slide{
display:none;
text-align:center;
}

.about-slide.active{
display:block;
}

.about-controls{
display:flex;
justify-content:center;
gap:20px;
margin-top:30px;
}

.about-controls button,
.review-controls button{
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#a855f7;
color:white;
cursor:pointer;
font-size:1.2rem;
transition:.3s;
}

.about-controls button:hover,
.review-controls button:hover{
transform:translateY(-4px);
}

.review{
display:none;
text-align:center;
}

.review.active{
display:block;
}

.stars{
font-size:1.6rem;
color:#fbbf24;
margin-bottom:20px;
}

.review-controls{
display:flex;
justify-content:center;
gap:20px;
margin-top:30px;
}

.contact-card{
cursor:pointer;
}

.copy-label{
margin-top:20px;
color:#c084fc;
}

#copyPopup{
position:fixed;
top:30px;
right:-300px;
background:#22c55e;
padding:18px 30px;
border-radius:15px;
transition:.4s;
z-index:9999;
}

#copyPopup.show{
right:30px;
}

footer{
padding:80px 20px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
}

footer h2{
color:#a855f7;
margin-bottom:20px;
}

footer p{
color:#94a3b8;
line-height:2;
}

.service-btn{
display:inline-block;
margin-top:25px;
padding:14px 24px;
background:#a855f7;
border-radius:14px;
color:white;
text-decoration:none;
transition:.3s;
}

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

@media(max-width:768px){

.hero h1{
font-size:3.3rem;
}

.menu-btn{
display:block;
}

.nav-links{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
padding:30px;
flex-direction:column;
background:#111827;
}

.nav-links.show{
display:flex;
}

}

.extra-experience{
display:none;
margin-top:25px;
}

.extra-experience.show{
display:block;
animation:fadeIn .5s ease;
}

.view-more-container{
display:flex;
justify-content:center;
margin-top:40px;
}

.view-more-btn{
padding:18px 30px;
border:none;
border-radius:20px;
background:#a855f7;
color:white;
font-size:1rem;
cursor:pointer;
transition:.3s;
}

.view-more-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(168,85,247,.3);
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(-20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

nav{
max-width:1600px;
margin:auto;
}

.featured-project-card{
max-width:1100px;
margin:auto;
padding:60px;
border-radius:40px;
background:linear-gradient(
135deg,
rgba(168,85,247,.12),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(25px);
}

.featured-content{
text-align:center;
}

.featured-badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(168,85,247,.15);
color:#c084fc;
margin-bottom:25px;
}

.featured-project-card h3{
font-size:3rem;
color:#a855f7;
margin-bottom:25px;
}

.featured-project-card p{
max-width:800px;
margin:auto;
line-height:2;
color:#cbd5e1;
}

.project-stats{
display:flex;
justify-content:center;
gap:25px;
margin:50px 0;
flex-wrap:wrap;
}

.stat-box{
width:180px;
padding:30px;
border-radius:25px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.stat-box h4{
font-size:2rem;
color:#a855f7;
margin-bottom:10px;
}

.stat-box span{
color:#cbd5e1;
}

.featured-project-card{
max-width:1100px;
margin:auto;
padding:60px;
border-radius:40px;
background:linear-gradient(
135deg,
rgba(168,85,247,.12),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(25px);
}

.featured-content{
text-align:center;
}

.featured-badge{
display:inline-block;
padding:10px 18px;
border-radius:999px;
background:rgba(168,85,247,.15);
color:#c084fc;
margin-bottom:25px;
}

.featured-project-card h3{
font-size:3rem;
color:#a855f7;
margin-bottom:25px;
}

.featured-project-card p{
max-width:850px;
margin:auto;
line-height:2;
color:#cbd5e1;
}

.project-stats{
display:flex;
justify-content:center;
gap:25px;
margin:50px 0;
flex-wrap:wrap;
}

.stat-box{
width:200px;
padding:30px;
border-radius:25px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.stat-box h4{
font-size:2rem;
color:#a855f7;
margin-bottom:10px;
}

.stat-box span{
color:#cbd5e1;
}

.featured-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:40px;
}

.invite-link{
margin-top:30px;
font-size:1rem;
color:#c084fc;
letter-spacing:1px;
}

/* =========================
   TABLETS
========================= */

@media (max-width: 1024px){

section{
padding:80px 6%;
}

.hero h1{
font-size:clamp(3rem,8vw,5rem);
}

.section-title{
font-size:2.5rem;
}

.cards{
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

}

/* =========================
   PHONES
========================= */

@media (max-width:768px){

section{
padding:70px 5%;
}

nav{
padding:20px 5%;
}

.menu-btn{
display:block;
}

.nav-links{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#111827;
flex-direction:column;
padding:30px 0;
gap:25px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-links.show{
display:flex;
}

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

.hero h1{
font-size:clamp(2.8rem,12vw,4.5rem);
line-height:1.1;
}

.hero p{
font-size:1rem;
line-height:1.8;
}

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

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

.section-title{
font-size:2.2rem;
margin-bottom:40px;
}

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

.card{
padding:30px;
min-height:auto;
}

.project-stats{
flex-direction:column;
align-items:center;
}

.stat-box{
width:100%;
max-width:300px;
}

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

.review-controls{
gap:15px;
}

.review-controls button,
.about-controls button{
width:50px;
height:50px;
}

footer{
padding:60px 20px;
}

}

/* =========================
   SMALL PHONES
========================= */

@media (max-width:480px){

.hero h1{
font-size:clamp(2.8rem,8vw,6rem);
line-height:1.1;
word-break:break-word;
}

.hero p{
font-size:.95rem;
}

.section-title{
font-size:1.9rem;
}

.logo{
font-size:1.5rem;
}

.card{
padding:25px;
}

.featured-project-card{
padding:35px 25px;
}

.featured-project-card h3{
font-size:2.2rem;
}

.price{
font-size:3rem;
}

.server-size{
font-size:.9rem;
}

}

/* =========================
   IMAGE CAROUSEL
========================= */

@media(max-width:768px){

.carousel-container{
gap:10px;
}

.carousel-btn{
width:50px;
height:50px;
font-size:1.2rem;
}

.carousel img{
border-radius:20px;
}

}

/* =========================
   EXPERIENCE CARDS
========================= */

@media(max-width:768px){

.view-more-btn{
width:100%;
max-width:300px;
}

.extra-experience .cards{
margin-top:20px;
}

}

.featured-buttons .btn{
min-width:220px;
}

html,body{
overflow-x:hidden;
width:100%;
}

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