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

.container{

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

    margin:auto;

}

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

body::before{

content:"";

position:fixed;

inset:-25%;

z-index:-2;

pointer-events:none;

background:

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

radial-gradient(circle at 85% 15%,rgba(96,165,250,.20),transparent 30%),

radial-gradient(circle at 75% 80%,rgba(59,130,246,.18),transparent 35%),

radial-gradient(circle at 20% 75%,rgba(29,78,216,.20),transparent 35%);

filter:blur(90px);

animation:aurora 18s linear infinite alternate;

}

@keyframes aurora{

0%{

transform:translate3d(0,0,0) rotate(0deg) scale(1);

}

25%{

transform:translate3d(-4%,-2%,0) rotate(3deg) scale(1.05);

}

50%{

transform:translate3d(4%,3%,0) rotate(-2deg) scale(1.08);

}

75%{

transform:translate3d(-2%,4%,0) rotate(2deg) scale(1.03);

}

100%{

transform:translate3d(3%,-3%,0) rotate(-3deg) scale(1.1);

}

}

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

z-index:-1;

background-image:

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

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

background-size:42px 42px;

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

opacity:.45;

}

/* ==========================================
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;

}

.glow{

position:fixed;

width:450px;

height:450px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);

filter:blur(50px);

transform:translate(-50%,-50%);

z-index:-1;

transition:

left .18s linear,

top .18s linear;

}

/* ==========================================
SCROLL PROGRESS
========================================== */

.scroll-progress{

position:fixed;

top:0;

left:0;

width:0;

height:3px;

background:linear-gradient(90deg,#2563EB,#60A5FA);

z-index:99999;

box-shadow:0 0 18px rgba(37,99,235,.6);

}