*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:#050816;

color:#fff;

font-family:Inter,sans-serif;

overflow-x:hidden;

}

.background{

position:fixed;

width:600px;

height:600px;

background:#2563eb;

filter:blur(220px);

opacity:.18;

top:-150px;

right:-150px;

z-index:-1;

}

.hero{

max-width:900px;

margin:auto;

padding:90px 25px;

text-align:center;

}

.logo{

font-size:38px;

font-weight:800;

margin-bottom:40px;

}

.logo span{

color:#3B82F6;

}

.tag{

display:inline-block;

padding:8px 18px;

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

border-radius:40px;

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

color:#60A5FA;

font-size:14px;

margin-bottom:30px;

}

h1{

font-size:60px;

line-height:70px;

margin-bottom:30px;

}

h1 span{

color:#3B82F6;

}

.subtitle{

font-size:22px;

line-height:36px;

color:#CBD5E1;

margin-bottom:45px;

}

.btn{

display:inline-block;

background:#2563EB;

padding:18px 38px;

border-radius:12px;

text-decoration:none;

color:white;

font-weight:700;

transition:.3s;

}

.btn:hover{

transform:translateY(-4px);

background:#1D4ED8;

}

.package{

max-width:1100px;

margin:auto;

padding:60px 25px;

}

.package h2{

text-align:center;

font-size:34px;

margin-bottom:50px;

}

.cards{

display:grid;

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

gap:20px;

}

.card{

background:#111827;

padding:28px;

border-radius:16px;

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

transition:.3s;

}

.card:hover{

border-color:#2563EB;

transform:translateY(-6px);

}

.cta{

text-align:center;

padding:100px 25px;

max-width:900px;

margin:auto;

}

.cta h2{

font-size:44px;

margin-bottom:25px;

}

.cta p{

font-size:22px;

line-height:36px;

color:#CBD5E1;

margin-bottom:45px;

}

footer{

padding:50px;

text-align:center;

color:#94A3B8;

font-size:14px;

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

}

@media(max-width:768px){

h1{

font-size:42px;

line-height:50px;

}

.subtitle{

font-size:18px;

line-height:30px;

}

.cta h2{

font-size:34px;

}

}