/* =========================================
   HOSTIX LTD
   PREMIUM HOSTING DESIGN
========================================= */


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


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:#050507;

color:white;

overflow-x:hidden;

}





a{

text-decoration:none;

color:inherit;

}



.container{

width:90%;

max-width:1400px;

margin:auto;

}





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


.bg-grid{

position:fixed;

inset:0;

background-image:

linear-gradient(
rgba(255,255,255,.03) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.03) 1px,
transparent 1px
);

background-size:50px 50px;

z-index:-3;

}



.bg-glow{

position:fixed;

width:500px;

height:500px;

border-radius:50%;

filter:blur(150px);

z-index:-2;

opacity:.4;

}



.glow1{

background:#9333ea;

top:-200px;

left:-200px;

}



.glow2{

background:#2563eb;

bottom:-200px;

right:-200px;

}





/* =========================================
   LOADER
========================================= */


#loader{

position:fixed;

inset:0;

background:#050507;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

z-index:99999;

}



.loader-logo img{

width:120px;

height:120px;

border-radius:25px;

animation:

logoPulse 2s infinite;

}



#loader h2{

margin-top:20px;

font-size:35px;

background:

linear-gradient(
90deg,
#c084fc,
#60a5fa
);

-webkit-background-clip:text;

color:transparent;

}



.loader-bar{

width:260px;

height:6px;

background:#222;

border-radius:20px;

margin-top:25px;

overflow:hidden;

}



.loader-bar span{

display:block;

height:100%;

width:40%;

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

animation:

loading 1.5s infinite;

}



@keyframes loading{

0%{

transform:translateX(-150%);

}

100%{

transform:translateX(300%);

}

}



@keyframes logoPulse{

50%{

transform:scale(1.1);

filter:

drop-shadow(
0 0 30px #9333ea
);

}

}








/* =========================================
   HEADER
========================================= */


header{

position:fixed;

top:20px;

left:0;

right:0;

z-index:1000;

}



header .container{

display:flex;

align-items:center;

justify-content:space-between;

background:

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

border:

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

backdrop-filter:blur(20px);

padding:15px 25px;

border-radius:25px;

}





.logo{

display:flex;

align-items:center;

gap:15px;

font-size:24px;

font-weight:800;

}



.logo img{

width:50px;

height:50px;

border-radius:15px;

}



.logo span{

background:

linear-gradient(
90deg,
#c084fc,
#60a5fa
);

-webkit-background-clip:text;

color:transparent;

}



.logo b{

color:white;

}





nav{

display:flex;

gap:30px;

}



nav a{

color:#bbb;

font-weight:500;

transition:.3s;

}



nav a:hover{

color:#c084fc;

}





.header-buttons{

display:flex;

align-items:center;

gap:10px;

}



.lang-btn{

background:#ffffff10;

border:

1px solid #ffffff20;

color:white;

padding:10px 14px;

border-radius:12px;

cursor:pointer;

}




.client-btn{

padding:12px 22px;

border-radius:15px;

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

font-weight:700;

transition:.3s;

}



.client-btn:hover{

transform:translateY(-5px);

box-shadow:

0 0 30px #9333ea;

}






#menu-button{

display:none;

}



#menu-button span{

display:block;

width:28px;

height:3px;

background:white;

margin:5px;

border-radius:10px;

}
/* =========================================
   HERO SECTION
========================================= */


.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:130px;

position:relative;

}



.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}



.hero-badge{

display:inline-flex;

padding:10px 20px;

border-radius:30px;

background:

rgba(147,51,234,.15);

border:

1px solid rgba(192,132,252,.4);

color:#c084fc;

font-weight:700;

margin-bottom:25px;

}



.hero-left h1{

font-size:70px;

line-height:1.1;

font-weight:900;

letter-spacing:-2px;

}



.hero-left h1::first-letter{

color:#c084fc;

}



.hero-left p{

font-size:20px;

line-height:1.7;

color:#aaa;

max-width:600px;

margin:30px 0;

}





.hero-buttons{

display:flex;

gap:20px;

}



.btn-primary,
.btn-secondary{

padding:16px 35px;

border-radius:18px;

font-weight:700;

transition:.3s;

}



.btn-primary{

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

box-shadow:

0 0 35px rgba(147,51,234,.5);

}



.btn-secondary{

border:

1px solid rgba(255,255,255,.2);

background:#ffffff10;

}





.btn-primary:hover,
.btn-secondary:hover{

transform:translateY(-7px);

}






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


.hero-stats{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:15px;

margin-top:50px;

}



.hero-stats div{

padding:20px;

border-radius:20px;

background:

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

border:

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

text-align:center;

}



.hero-stats h3{

font-size:28px;

background:

linear-gradient(
90deg,
#c084fc,
#60a5fa
);

-webkit-background-clip:text;

color:transparent;

}



.hero-stats span{

display:block;

margin-top:8px;

color:#999;

font-size:14px;

}








/* =========================================
   SERVER 3D CARD
========================================= */


.hero-right{

display:flex;

justify-content:center;

}



.server-card{

width:330px;

height:420px;

background:

linear-gradient(
145deg,
#15151f,
#08080c
);

border-radius:35px;

padding:25px;

border:

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

box-shadow:

0 0 80px rgba(147,51,234,.35);

animation:

floatServer 5s infinite;

transform-style:preserve-3d;

}



@keyframes floatServer{


50%{

transform:translateY(-25px)
rotateY(8deg);

}


}



.server-top{

display:flex;

gap:10px;

}



.led{

width:14px;

height:14px;

border-radius:50%;

}



.led.green{

background:#22c55e;

box-shadow:

0 0 15px #22c55e;

}



.led.blue{

background:#3b82f6;

box-shadow:

0 0 15px #3b82f6;

}



.led.purple{

background:#a855f7;

box-shadow:

0 0 15px #a855f7;

}




.server-body{

margin-top:30px;

}



.server-line{

height:35px;

margin-bottom:20px;

border-radius:10px;

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

opacity:.8;

animation:

serverGlow 2s infinite;

}



.server-line:nth-child(2){

animation-delay:.3s;

}


.server-line:nth-child(3){

animation-delay:.6s;

}


.server-line:nth-child(4){

animation-delay:.9s;

}



@keyframes serverGlow{


50%{

opacity:.3;

}


}









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


.services{

padding:120px 0;

}



.section-header{

text-align:center;

margin-bottom:70px;

}



.section-header span{

color:#c084fc;

font-weight:800;

letter-spacing:3px;

}



.section-header h2{

font-size:50px;

margin:20px 0;

font-weight:900;

}



.section-header p{

color:#999;

font-size:18px;

}




.services-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.service-card{

position:relative;

padding:40px;

background:

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

border:

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

border-radius:30px;

overflow:hidden;

transition:.4s;

}




.service-card::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
135deg,
rgba(147,51,234,.3),
transparent
);

opacity:0;

transition:.4s;

}



.service-card:hover::before{

opacity:1;

}



.service-card:hover{

transform:translateY(-15px);

border-color:#9333ea;

box-shadow:

0 0 50px rgba(147,51,234,.35);

}



.service-icon{

font-size:55px;

margin-bottom:25px;

}



.service-card h3{

font-size:28px;

margin-bottom:15px;

}



.service-card p{

color:#aaa;

line-height:1.6;

}



.service-btn{

display:inline-block;

margin-top:25px;

padding:12px 25px;

border-radius:15px;

background:#ffffff10;

border:

1px solid #ffffff20;

transition:.3s;

}



.service-btn:hover{

background:#9333ea;

}
/* =========================================
   PRICING SECTION
========================================= */


.pricing,
.plans{

padding:120px 0;

}





.pricing-tabs{

display:flex;

justify-content:center;

gap:15px;

margin-bottom:50px;

flex-wrap:wrap;

}



.tab{

padding:14px 30px;

border-radius:20px;

border:

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

background:#ffffff10;

color:white;

cursor:pointer;

font-weight:700;

transition:.3s;

}



.tab:hover,
.tab.active{

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

box-shadow:

0 0 25px rgba(147,51,234,.4);

}







.pricing-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}





.price-card{

position:relative;

padding:45px 35px;

background:

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

border:

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

border-radius:35px;

overflow:hidden;

transition:.4s;

}



.price-card::after{

content:"";

position:absolute;

width:200px;

height:200px;

background:#9333ea;

filter:blur(100px);

opacity:.2;

top:-100px;

right:-100px;

}





.price-card:hover{

transform:translateY(-15px);

border-color:#9333ea;

box-shadow:

0 0 50px rgba(147,51,234,.3);

}





.price-card h3{

font-size:30px;

margin-bottom:20px;

}





.price-card h1{

font-size:60px;

font-weight:900;

background:

linear-gradient(
90deg,
#c084fc,
#60a5fa
);

-webkit-background-clip:text;

color:transparent;

}



.price-card h1 span{

font-size:16px;

color:#aaa;

}



.price-card > span{

color:#888;

}





.price-card ul{

list-style:none;

margin:35px 0;

}



.price-card li{

padding:12px 0;

color:#ccc;

border-bottom:

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

}





.buy-btn{

display:block;

text-align:center;

padding:16px;

border-radius:18px;

font-weight:800;

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

transition:.3s;

}



.buy-btn:hover{

transform:translateY(-5px);

box-shadow:

0 0 30px #9333ea;

}






/* =========================================
   RECOMMENDED PLAN
========================================= */



.recommended{

border:

2px solid #9333ea;

transform:scale(1.05);

}



.recommended:hover{

transform:

scale(1.08)
translateY(-10px);

}



.recommended-tag{

position:absolute;

top:20px;

right:20px;

padding:8px 15px;

border-radius:20px;

font-size:12px;

font-weight:800;

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

}








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


.stats{

padding:70px 0;

}



.stats-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}



.stat-card{

padding:35px;

text-align:center;

background:

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

border-radius:25px;

border:

1px solid rgba(255,255,255,.1);

}



.stat-card h2{

font-size:45px;

background:

linear-gradient(
90deg,
#c084fc,
#60a5fa
);

-webkit-background-clip:text;

color:transparent;

}



.stat-card p{

color:#aaa;

margin-top:10px;

}








/* =========================================
   DATACENTER
========================================= */



.datacenter{

padding:120px 0;

}



.datacenter-card{

max-width:600px;

margin:auto;

padding:50px;

text-align:center;

background:

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

border-radius:35px;

border:

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

box-shadow:

0 0 50px rgba(37,99,235,.2);

}





.country{

font-size:80px;

margin-bottom:20px;

}



.datacenter-card h3{

font-size:32px;

margin-bottom:20px;

}



.datacenter-card p{

color:#aaa;

line-height:2;

}



.online-status{

display:inline-block;

margin-top:25px;

padding:12px 25px;

background:

rgba(34,197,94,.15);

border:

1px solid #22c55e;

border-radius:20px;

color:#22c55e;

font-weight:700;

}









/* =========================================
   PAYMENTS
========================================= */



.payments{

padding:100px 0;

}



.payment-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



.payment-card{

padding:45px;

text-align:center;

background:

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

border-radius:30px;

border:

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

transition:.3s;

}



.payment-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 40px rgba(147,51,234,.3);

}



.payment-card:first-letter{

font-size:50px;

}



.payment-card h3{

font-size:25px;

margin-top:20px;

}
/* =========================================
   WHY HOSTIX
========================================= */


.why-hostix{

padding:120px 0;

}



.why-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



.why-card{

padding:40px;

background:

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

border:

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

border-radius:30px;

transition:.4s;

position:relative;

overflow:hidden;

}



.why-card::before{

content:"";

position:absolute;

width:150px;

height:150px;

background:#9333ea;

filter:blur(90px);

opacity:.25;

top:-50px;

right:-50px;

}



.why-card:hover{

transform:translateY(-12px);

border-color:#9333ea;

box-shadow:

0 0 40px rgba(147,51,234,.3);

}



.why-icon{

font-size:55px;

margin-bottom:25px;

}



.why-card h3{

font-size:28px;

margin-bottom:15px;

}



.why-card p{

color:#aaa;

line-height:1.6;

}







/* =========================================
   FAQ
========================================= */



.faq{

padding:120px 0;

}



.faq-list{

max-width:900px;

margin:auto;

}



.faq-item{

background:

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

border:

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

border-radius:20px;

margin-bottom:20px;

overflow:hidden;

transition:.3s;

}



.faq-item:hover{

border-color:#9333ea;

}



.faq-question{

width:100%;

padding:25px;

background:none;

border:none;

color:white;

text-align:left;

font-size:20px;

font-weight:700;

cursor:pointer;

}



.faq-answer{

max-height:0;

overflow:hidden;

transition:.4s;

}



.faq-answer p{

padding:

0 25px 25px;

color:#aaa;

line-height:1.7;

}





.faq-item.active .faq-answer{

max-height:200px;

}








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



.contact{

padding:120px 0;

}



.contact-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



.contact-card{

padding:45px;

text-align:center;

background:

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

border-radius:30px;

border:

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

transition:.4s;

}



.contact-card:hover{

transform:translateY(-12px);

box-shadow:

0 0 40px rgba(147,51,234,.35);

}



.contact-icon{

font-size:55px;

margin-bottom:20px;

}



.contact-card h3{

font-size:28px;

margin-bottom:15px;

}



.contact-card p{

color:#aaa;

margin-bottom:25px;

}



.contact-btn{

display:inline-block;

padding:14px 30px;

border-radius:15px;

background:

linear-gradient(
90deg,
#9333ea,
#2563eb
);

font-weight:700;

transition:.3s;

}



.contact-btn:hover{

transform:translateY(-5px);

}








/* =========================================
   CTA
========================================= */



.cta{

padding:100px 0;

}



.cta .container{

padding:70px;

text-align:center;

border-radius:40px;

background:

linear-gradient(
135deg,
#9333ea,
#2563eb
);

box-shadow:

0 0 80px rgba(147,51,234,.4);

}



.cta h2{

font-size:50px;

font-weight:900;

margin-bottom:20px;

}



.cta p{

font-size:20px;

margin-bottom:35px;

}



.cta-btn{

display:inline-block;

padding:18px 45px;

border-radius:20px;

background:white;

color:#111;

font-weight:900;

transition:.3s;

}



.cta-btn:hover{

transform:translateY(-7px);

}








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



footer{

padding:80px 0 30px;

background:#030304;

border-top:

1px solid rgba(255,255,255,.1);

}



.footer-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:40px;

}



.footer-logo{

width:70px;

height:70px;

border-radius:20px;

margin-bottom:20px;

}



footer h3{

font-size:30px;

margin-bottom:15px;

background:

linear-gradient(
90deg,
#c084fc,
#60a5fa
);

-webkit-background-clip:text;

color:transparent;

}



footer h4{

font-size:20px;

margin-bottom:20px;

}



footer a{

display:block;

color:#aaa;

margin-bottom:12px;

transition:.3s;

}



footer a:hover{

color:#c084fc;

}



footer p{

color:#aaa;

}



.footer-bottom{

margin-top:60px;

padding-top:30px;

border-top:

1px solid rgba(255,255,255,.1);

text-align:center;

color:#777;

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


.mobile-menu{

display:none;

position:fixed;

top:90px;

left:20px;

right:20px;

padding:30px;

background:

rgba(10,10,15,.95);

backdrop-filter:blur(20px);

border-radius:25px;

border:

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

z-index:999;

}



.mobile-menu a{

display:block;

padding:15px;

color:white;

border-bottom:

1px solid rgba(255,255,255,.1);

}



.mobile-menu.active{

display:block;

}







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


@media(max-width:1100px){


.hero-grid{

grid-template-columns:1fr;

text-align:center;

}



.hero-left p{

margin-left:auto;

margin-right:auto;

}



.hero-buttons{

justify-content:center;

}



.hero-right{

margin-top:50px;

}



.services-grid{

grid-template-columns:

repeat(2,1fr);

}



.pricing-grid{

grid-template-columns:

repeat(2,1fr);

}



.why-grid{

grid-template-columns:

repeat(2,1fr);

}



.contact-grid{

grid-template-columns:

repeat(2,1fr);

}



.footer-grid{

grid-template-columns:

repeat(2,1fr);

}



nav{

display:none;

}



#menu-button{

display:block;

cursor:pointer;

}


.header-buttons .client-btn{

display:none;

}


}









/* =========================================
   MOBILE VERSION
========================================= */


@media(max-width:700px){



.container{

width:92%;

}




header{

top:10px;

}



header .container{

padding:12px 15px;

}



.logo span{

font-size:18px;

}



.logo img{

width:40px;

height:40px;

}




.header-buttons{

gap:5px;

}



.lang-btn{

padding:8px;

font-size:12px;

}





.hero{

padding-top:120px;

}



.hero-left h1{

font-size:42px;

line-height:1.2;

}



.hero-left p{

font-size:16px;

}



.hero-buttons{

flex-direction:column;

}



.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}




.hero-stats{

grid-template-columns:

repeat(2,1fr);

}



.hero-stats h3{

font-size:22px;

}





.server-card{

width:270px;

height:350px;

}



.section-header h2{

font-size:36px;

}



.section-header p{

font-size:15px;

}






.services,
.pricing,
.plans,
.stats,
.datacenter,
.payments,
.why-hostix,
.faq,
.contact{

padding:80px 0;

}





.services-grid,
.pricing-grid,
.why-grid,
.contact-grid,
.payment-grid{

grid-template-columns:1fr;

}




.price-card{

padding:35px 25px;

}



.recommended{

transform:none;

}



.recommended:hover{

transform:translateY(-10px);

}





.stat-grid,
.stats-grid{

grid-template-columns:

1fr 1fr;

}



.stat-card{

padding:25px 15px;

}



.stat-card h2{

font-size:32px;

}





.datacenter-card{

padding:35px 20px;

}



.cta .container{

padding:45px 20px;

}



.cta h2{

font-size:32px;

}



.cta p{

font-size:16px;

}





.footer-grid{

grid-template-columns:1fr;

text-align:center;

}



.footer-logo{

margin:auto;

}





}








/* =========================================
   ANIMATIONS
========================================= */


@keyframes fadeUp{


from{

opacity:0;

transform:

translateY(40px);

}


to{

opacity:1;

transform:

translateY(0);

}


}




.service-card,
.price-card,
.why-card,
.contact-card,
.payment-card{

animation:

fadeUp .8s ease;

}









/* =========================================
   CUSTOM CURSOR
========================================= */


.cursor{

position:fixed;

width:25px;

height:25px;

border-radius:50%;

background:#9333ea;

filter:blur(10px);

pointer-events:none;

z-index:99999;

transform:

translate(-50%,-50%);

}







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


.particle{

position:fixed;

width:5px;

height:5px;

background:#c084fc;

border-radius:50%;

opacity:.5;

animation:

particleMove linear infinite;

pointer-events:none;

z-index:-1;

}



@keyframes particleMove{


from{

transform:

translateY(100vh);

}



to{

transform:

translateY(-100vh);

}


}







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


::selection{

background:#9333ea;

color:white;

}





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


::-webkit-scrollbar{

width:10px;

}



::-webkit-scrollbar-track{

background:#050507;

}



::-webkit-scrollbar-thumb{

background:

linear-gradient(
#9333ea,
#2563eb
);

border-radius:20px;

}