/* ===========================
   VultHosting Style v1
=========================== */

:root{

--bg:#070b14;
--bg2:#0d1321;
--card:#111827;
--primary:#4f8cff;
--primary2:#6ea8ff;
--text:#ffffff;
--gray:#a8b3cf;
--border:#1f2937;

}

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

html{
scroll-behavior:smooth;
}

body{

background:
radial-gradient(circle at top,#13294b 0%,#070b14 60%);

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

color:var(--text);

overflow-x:hidden;

}

a{

text-decoration:none;

color:white;

}

img{

max-width:100%;

display:block;

}

.container{

width:min(1200px,92%);

margin:auto;

}

/* NAVBAR */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

backdrop-filter:blur(12px);

background:rgba(7,11,20,.75);

border-bottom:1px solid rgba(255,255,255,.05);

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

height:82px;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-size:24px;

font-weight:700;

}

.logo img{

width:60px;

}

.nav-links{

display:flex;

gap:35px;

list-style:none;

}

.nav-links a{

color:#d9e4ff;

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.panel-btn{

padding:13px 25px;

background:linear-gradient(90deg,var(--primary),var(--primary2));

border-radius:12px;

font-weight:600;

transition:.3s;

}

.panel-btn:hover{

transform:translateY(-3px);

box-shadow:0 0 25px rgba(79,140,255,.45);

}

/* HERO */

.hero{

padding-top:150px;

padding-bottom:120px;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.badge{

display:inline-block;

padding:8px 18px;

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

border:1px solid rgba(79,140,255,.3);

border-radius:999px;

color:#9fc2ff;

margin-bottom:25px;

}

.hero h1{

font-size:64px;

line-height:1.1;

margin-bottom:25px;

}

.hero p{

color:var(--gray);

font-size:20px;

line-height:34px;

max-width:600px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

}

.btn-primary{

padding:17px 34px;

border-radius:14px;

background:linear-gradient(90deg,var(--primary),var(--primary2));

font-weight:700;

transition:.3s;

}

.btn-secondary{

padding:17px 34px;

border-radius:14px;

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

transition:.3s;

}

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

transform:translateY(-4px);

}

.hero-stats{

display:flex;

gap:40px;

margin-top:30px;

}

.hero-stats h2{

font-size:34px;

color:var(--primary2);

}

.hero-stats p{

font-size:15px;

margin:0;

color:var(--gray);

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-right img{

width:420px;

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

filter:drop-shadow(0 0 60px rgba(79,140,255,.45));

}

/* TITLES */

.title{

text-align:center;

margin-bottom:70px;

}

.title span{

color:var(--primary2);

font-weight:700;

letter-spacing:2px;

}

.title h2{

font-size:48px;

margin:18px 0;

}

.title p{

color:var(--gray);

max-width:700px;

margin:auto;

}

/* SERVICES */

.services{

padding:100px 0;

}

.cards{

display:grid;

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

gap:28px;

}

.card{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:35px;

transition:.35s;

}

.card:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:0 0 35px rgba(79,140,255,.18);

}

.card h3{

margin-bottom:18px;

font-size:28px;

}

.card p{

color:var(--gray);

line-height:30px;

margin-bottom:25px;

}

.card a{

color:var(--primary2);

font-weight:600;

}

/* PLANES */

#planes{

padding:110px 0;

}

/* FOOTER */

footer{

padding:45px 0;

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

margin-top:90px;

text-align:center;

color:var(--gray);

}

/* ANIMACION */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}