:root{
    --font: "Space Grotesk", system-ui;
    --accent: 56,189,248;
    --accent2: 34,211,238;
}

*{ font-family: var(--font); }

html{ scroll-behavior:smooth; }

.card{
    border-radius:1.25rem;
    border:1px solid rgba(0,0,0,.08);
    background:white;
    box-shadow:0 12px 40px rgba(0,0,0,.08);
}

.badge{
    padding:.35rem .7rem;
    border-radius:999px;
    background:rgba(var(--accent),.12);
    border:1px solid rgba(var(--accent),.25);
    font-size:.75rem;
    color:#0c4a6e;
}

.section-title h2{
    font-size:1.8rem;
    font-weight:700;
}
.section-title p{
    color:rgba(0,0,0,.65);
}

.btn-primary{
    padding:.75rem 1rem;
    border-radius:1rem;
    background:rgba(var(--accent),.18);
    border:1px solid rgba(var(--accent),.3);
    color:white;
    transition:.2s;
}
.btn-primary:hover{ background:rgba(var(--accent2),.3); }

.btn-secondary{
    padding:.75rem 1rem;
    border-radius:1rem;
    border:1px solid rgba(0,0,0,.12);
    background:white;
    color:#0f172a;
    transition:.2s;
}
.btn-secondary:hover{ background:rgba(0,0,0,.05); }

.input{
    width:100%;
    padding:.7rem .9rem;
    border-radius:1rem;
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.12);
    color:#0f172a;
}
.input:focus{
    border-color:rgba(var(--accent),.5);
    box-shadow:0 0 0 4px rgba(var(--accent),.12);
    outline:none;
}

.meter{
    margin-top:.5rem;
    padding:.4rem .6rem;
    border-radius:.8rem;
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
}
.meter::before{
    content:"";
    position:absolute;
    inset:0;
    width:var(--w,0%);
    background:rgba(var(--accent),.25);
}
.meter span{
    position:relative;
    display:flex;
    justify-content:space-between;
    font-size:.75rem;
    color:#0f172a;
}

.nav-link{
    position:relative;
    transition:.2s;
    color:#1e293b;
}
.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    height:2px;
    width:0%;
    background:rgba(var(--accent2),.9);
    transition:.25s;
}
.nav-link:hover::after{ width:100%; }

.skill-tag{
    padding:.35rem .6rem;
    border-radius:.6rem;
    background:rgba(var(--accent),.12);
    border:1px solid rgba(var(--accent),.3);
    font-size:.75rem;
    color:#0c4a6e;
}

.skill-level{
    font-size:.75rem;
    color:rgba(0,0,0,.65);
}

.tag{
    padding:.35rem .6rem;
    border-radius:.6rem;
    background:rgba(0,0,0,.06);
    font-size:.75rem;
    color:#374151;
}