/* ==========================================
CONTAINER
========================================== */

.container{

    width:min(100% - 40px,var(--container));

    margin:auto;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at 15% 20%,rgba(37,99,235,.22),transparent 35%),

    radial-gradient(circle at 85% 15%,rgba(59,130,246,.12),transparent 30%),

    radial-gradient(circle at 50% 90%,rgba(37,99,235,.10),transparent 45%);

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background-image:

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

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

    background-size:40px 40px;

    mask-image:radial-gradient(circle,#000 35%,transparent 100%);

    z-index:-1;

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:var(--transition);

}

.header.scrolled{

    backdrop-filter:blur(18px);

    background:rgba(4,11,24,.78);

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

}

.navbar{

    height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:30px;

    font-weight:800;

    letter-spacing:-1px;

}

.logo span{

    color:var(--primary-light);

}

nav{

    display:flex;

    gap:42px;

}

nav a{

    color:var(--text-secondary);

    transition:var(--transition);

    position:relative;

}

nav a:hover,

nav a.active{

    color:#fff;

}

nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--primary-light);

    border-radius:999px;

}