/* =========================
GLOBAL RESET
========================= */

html{
scroll-behavior:smooth;
}

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

body{
background:#050816;
color:white;
font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
overflow-x:hidden;
}

/* remove link underline */

a{
text-decoration:none !important;
}

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

.btn-primary{
@apply bg-blue-500 text-white px-6 py-3 rounded-lg font-medium transition;
box-shadow:0 10px 30px rgba(59,130,246,.4);
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 20px 40px rgba(59,130,246,.6);
}

.btn-outline{
@apply border border-white/30 text-white px-6 py-3 rounded-lg transition;
}

.btn-outline:hover{
border-color:#3b82f6;
background:rgba(59,130,246,.1);
}

/* =========================
HERO IMAGE
========================= */

.profile-img{
mix-blend-mode:screen;
filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));

-webkit-mask-image:linear-gradient(
to bottom,
rgba(0,0,0,1) 75%,
rgba(0,0,0,0)
);

mask-image:linear-gradient(
to bottom,
rgba(0,0,0,1) 75%,
rgba(0,0,0,0)
);
}

/* =========================
NAVBAR GLASS EFFECT
========================= */
.nav-scrolled{
background:#050816;
box-shadow:0 4px 20px rgba(0,0,0,0.4);
}

.navbar{
backdrop-filter:blur(12px);
background:rgba(5,8,22,.6);
border-bottom:1px solid rgba(255,255,255,.05);
transition:all 0.3s ease;
}
#navbar-main{
height:60px;
display:flex;
align-items:center;
}

#navbar-main a{
position:relative;
}

#navbar-main a:hover{
box-shadow:0 0 6px rgba(59,130,246,0.35);
}
#navbar-main ul{
align-items:center;
}

/* =========================
NAVBAR LINK GLOW EFFECT
========================= */

#navbar-main ul li a{
position:relative;
border-radius:9999px;
padding:6px 16px;
transition:all .25s ease;
}

/* soft capsule hover */

#navbar-main ul li a:hover{
color:white;
background:rgba(59,130,246,0.12);
box-shadow:0 0 10px rgba(59,130,246,0.35);
border:1px solid rgba(59,130,246,0.25);
}

/* subtle futuristic glow */

#navbar-main ul li a::after{
content:"";
position:absolute;
inset:0;
border-radius:9999px;
opacity:0;
transition:opacity .25s ease;
background:radial-gradient(circle at center,
rgba(59,130,246,.35),
transparent 70%);
}

#navbar-main ul li a:hover::after{
opacity:.35;
}

/* =========================
NAVBAR ACTIVE INDICATOR
========================= */

#navbar-main ul{
position:relative;
}

/* glow bar */

.nav-indicator{
position:absolute;
bottom:-4px;
height:2px;
width:0;
background:#3b82f6;
border-radius:10px;
transition:all .3s ease;
box-shadow:0 0 10px rgba(59,130,246,.7);
}
/* =========================
PARTICLES LINES
========================= */

#particles-js{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}