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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#050816;
color:#ffffff;
overflow-x:hidden;
line-height:1.6;
}

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

ul{
list-style:none;
}

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

.container{
width:90%;
max-width:1400px;
margin:auto;
}

/* =========================================
CUSTOM VARIABLES
========================================= */

:root{

--bg:#050816;
--card:#0b1022;
--card2:#0d1430;

--border:rgba(255,255,255,.08);

--primary:#5b5cff;
--secondary:#8b5cf6;

--text:#ffffff;
--muted:#a8b0d3;

--gradient:
linear-gradient(
135deg,
#5b5cff,
#8b5cf6
);

--glow:
0 0 30px rgba(91,92,255,.35);

}

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

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(
circle at top left,
rgba(91,92,255,.15),
transparent 30%
),

radial-gradient(
circle at top right,
rgba(139,92,246,.12),
transparent 35%
),

radial-gradient(
circle at bottom center,
rgba(0,200,255,.08),
transparent 30%
);

pointer-events:none;

z-index:-1;

}

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

.site-header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

transition:.35s;

padding:18px 0;

}

.site-header.scrolled{

background:
rgba(5,8,22,.92);

backdrop-filter:blur(15px);

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

}

.site-header .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo a{

display:flex;
align-items:center;
width: 285px;
height: auto;

}

.logo-icon{

width: 285px;
height: auto;
}

.desktop-nav ul{

display:flex;

align-items:center;

gap:35px;

}

.desktop-nav a{

font-size:13px;
font-weight: bold;
color:#d5d9ef;

transition:.3s;

}

.desktop-nav a:hover{

color:#fff;

}

.header-cta{

display:flex;
align-items:center;

}



/* =========================================
BUTTONS
========================================= */

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:12px;

background:var(--gradient);

color:white;

font-weight:600;

transition:.3s;

box-shadow:var(--glow);

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:12px;

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

color:white;

transition:.3s;

}

.btn-secondary:hover{

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

}

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

.mobile-menu-btn{

background:none;

border:none;

cursor:pointer;

width:40px;

height:40px;

position:relative;

display: none
}
.mobile-menu-btn span{

display:block;

height:2px;

background:#fff;

margin:7px 0;

transition:.3s;

}
.mobile-menu{

position:fixed;

top:113px;

left:-100%;

width:100%;

background:#081021;

padding:30px;

transition:.4s;

z-index:998;

}

.mobile-menu.active{

left:0;

}

.mobile-menu ul{

display:flex;

flex-direction:column;

gap:20px;

}

.mobile-menu a{

font-size:18px;

}

.mobile-menu.active{
    left:0;
}

.mobile-menu-btn{
    z-index:1001;
    position:relative;
}

@media(max-width:992px){

    .desktop-nav,
    .header-cta{
        display:none !important;
    }

    .mobile-menu-btn{
        display:block !important;
    }

}