:root
{
    --bg:#030816;
    --panel:#091224cc;
    --line:#223254;
    --ink:#f3f6ff;
    --muted:#b5bfd4;
    --blue:#168cff;
    --purple:#8837ec;
    --green:#20e682
}

*
{
    box-sizing:border-box
}

html
{
    scroll-behavior:smooth
}
body
{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:14px 'DM Sans',sans-serif;
    background-image:radial-gradient(circle at 74% 8%,#162a6355,transparent 26%),radial-gradient(circle at 20% 48%,#31105e33,transparent 22%)
}
.wrap
{
    max-width:1200px;
    margin:auto;
    padding-left:18px;
    padding-right:18px
}
.page-glow
{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 65%,#192a8130);
    z-index:-1
}
.nav
{
    height:76px;
    display:flex;
    align-items:center;
    gap:28px;
    border-bottom:1px solid #1b2948
}
.brand
{
    display:flex;
    align-items:center;
    gap:13px;text-decoration:none;
    color:#fff;
    white-space:nowrap
}
.brand span
{
    font:bold 29px Outfit;
    color:#506fff;
    letter-spacing:-7px;
    margin-right:6px
}
.brand b
{
    font:500 18px Outfit
}
.brand small
{
    display:block;
    font:12px 'DM Sans';
    color:#a7b0c6;
    margin-top:3px
}
nav
{
    display:flex;
    align-items:stretch;
    height:100%;
    gap:28px;
    margin:auto
}
nav a
{
    color:#fff;
    text-decoration:none;
    font-size:13px;
    display:flex;
    align-items:center;
    border-bottom:2px solid transparent
}
nav a.active,nav a:hover
{
    color:#409aff;
    border-color:#3a82ff
}
.nav-actions
{
    display:flex;
    align-items:center;
    gap:16px
}
.theme
{
    background:transparent;
    color:white;
    border:0;
    font-size:18px
}
.btn
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:white;
    text-decoration:none;
    border:1px solid #617094;
    border-radius:7px;
    padding:11px 19px;
    font-weight:600;
    font-size:13px;
    background:#07101f
}
.btn.gradient
{
    border:0;
    background:linear-gradient(105deg,#1d72f7,#9131db);
    box-shadow:0 5px 20px #42169755
}
.btn.mini
{
    padding:10px 15px
}
.menu-btn
{
    display:none
}
.hero
{
    min-height:390px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    padding-top:30px
}
.eyebrow
{
    font:20px Outfit;
    color:#8e63ff;
    margin:0 0 7px
}
.hero h1
{
    font:800 47px Outfit;
    margin:0 0 6px;
    letter-spacing:-1px
}
.hero h1 span
{
    background:linear-gradient(90deg,#a23deb,#177dff);
    color:transparent;
    background-clip:text
}
.hero h2
{
    font:600 21px Outfit;
    line-height:1.38;
    color:#4688ff;
    margin:0
}
.hero h2 i
{
    color:#ddd;
    font-style:normal
}
.lede
{
    line-height:1.65;
    max-width:500px;
    margin:16px 0;
    color:#f1f1f3
}
.hero-buttons
{
    display:flex;
    gap:16px;
    flex-wrap:wrap
}
.socials
{
    display:flex;
    gap:14px;
    margin-top:16px
}
.socials a
{
    color:#e5eafd;
    border:1px solid #34415d;
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-decoration:none
}
.hero-art
{
    height:295px;
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at center,#102e6b44,transparent 65%)
}
.code-window
{
    position:absolute;
    width:270px;
    height:180px;
    border:1px solid #5277bd;
    border-radius:9px;
    left:118px;
    top:65px;
    background:#071224;
    box-shadow:0 0 30px #1255c822
}
.dots
{
    height:20px;
    border-bottom:1px solid #344c77;
    padding:6px
}
.dots i
{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#e65755;
    margin-right:4px
}
.dots i:nth-child(2)
{
    background:#efc455
}
.dots i:nth-child(3)
{
    background:#38c879
}
.code-lines
{
    padding:13px 26px
}
.code-lines b
{
    display:block;
    width:74%;
    height:4px;
    background:linear-gradient(90deg,#8757e9 20%,#178bca 20% 60%,transparent 60%);
    margin:8px
}
.code-lines b:nth-child(2)
{
    width:88%
}
.code-lines b:nth-child(3)
{
    width:56%;margin-left:28px
}
.code-lines b:nth-child(4)
{
    width:70%;margin-left:38px
}
.code-lines b:nth-child(5)
{
    width:49%;margin-left:42px
}
.bubble
{
    position:absolute;
    z-index:2;
    border:1px solid #6b4fc5;
    border-radius:20px;
    background:#11153b;
    color:#dce8ff;
    display:grid;
    place-items:center;
    box-shadow:0 0 18px #6d27ff44
}
.csharp
{
    left:48px;
    top:15px;
    width:64px;
    height:64px;
    font:26px Outfit
}
.dotnet
{
    right:32px;
    top:28px;
    width:58px;
    height:58px;
    border-radius:50%;
    font:21px Outfit;
    background:#3c146d
}
.angular
{
    left:28px;
    top:105px;
    width:56px;
    height:56px;
    color:#ff334d;
    font-size:37px
}
.java
{
    right:4px;
    top:100px;
    width:56px;
    height:77px;
    color:#ff671b;
    font-size:31px
}
.java small
{
    color:#ff7140;
    font:10px Outfit;
    margin-top:-12px
}
.orb
{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#6844f5;
    box-shadow:0 0 12px 4px #4934e9
}
.o1
{
    top:35px;
    right:115px
}
.o2
{
    bottom:36px;
    left:90px
}
.card
{
    background:linear-gradient(135deg,#0a1426e8,#070e1dc9);
    border:1px solid var(--line);
    border-radius:9px
}
.about
{
    display:grid;
    grid-template-columns:1.15fr 1.45fr;
    gap:20px
}
.about-card
{
    padding:17px 21px
}
.about h3,.section-title
{
    font:500 21px Outfit;
    margin:0 0 12px
}
.section-title i,.about h3 i
{
    color:#00a4ff;
    margin-right:10px
}
.about-card p
{
    line-height:1.6;
    margin:0;
    color:#e4e7ee
}
.info-grid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.info
{
    display:flex;
    align-items:center;
    padding:16px;
    gap:15px
}
.info>i
{
    font-size:25px
}
.blue
{
    color:#00a4ff
}
.green
{
    color:#13e47a
}
.info span
{
    display:grid;
    gap:4px;
    font-size:12px;
    color:#ddd
}
.info b
{
    font-weight:500;
    color:white
}
.section
{
    padding-top:20px
}
.filters
{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:10px
}
.filters button
{
    background:#080f20;
    color:#d9def0;
    border:1px solid #293754;
    border-radius:6px;
    padding:6px 17px;
    font-size:11px
}
.filters .selected
{
    background:linear-gradient(100deg,#3e46d7,#972ee2);
    border-color:#8e46db
}
.skills-grid
{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:9px
}
.skill
{
    min-height:87px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px
}
    .skill i
    {
        font-size:31px;
        color:#208ce8}
        .skill:nth-child(1) i,.skill:nth-child(5) i{
            color:#ff5b33
        }
    .skill:nth-child(3) i{color:#f6c934} .skill:nth-child(7) i
    {color:#1f8cef}
    .skill b{font-size:11px;font-weight:500}
    .section-heading{display:flex;align-items:center;justify-content:space-between}
    .section-heading>a{color:#a846f1;text-decoration:none;font-size:13px}
    .project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .project{padding:12px;min-height:230px;display:flex;flex-direction:column}
    .project:nth-child(1){border-color:#6144c1}
    .project:nth-child(2){border-color:#1772c3}
    .project:nth-child(3){border-color:#278760}
    .project:nth-child(4){border-color:#b3642d}
    .project-icon{font-size:38px;height:44px;text-align:center}
    .project h4{font:600 15px Outfit;margin:9px 0 7px}
    .tags{display:flex;gap:4px;flex-wrap:wrap}
    .tags span{font-size:9px;padding:3px 5px;border-radius:3px;background:#12305a;color:#b4d9ff}
    .project p{font-size:11px;line-height:1.55;color:#d7dbe6;flex:1}
    .project div:last-child{display:flex;justify-content:space-between}
    .project a{color:#dfe9ff;text-decoration:none;font-size:10px}
    .project a:last-child{color:#56a4ff}
    .github-note{margin:11px 0 0;color:#a6b2c9;font-size:12px}
    .github-note a{color:#8d65ff}
    .dashboard{display:grid;grid-template-columns:1.15fr .8fr 1.25fr;gap:28px;padding-top:25px}
    .timeline{border-left:1px solid #7160da;padding-left:19px}
    .timeline>div{position:relative;display:grid;grid-template-columns:55px 1fr;margin:0 0 12px;font-size:10px}
    .timeline>div:before{content:'';position:absolute;width:8px;height:8px;background:#8d65ff;border-radius:50%;left:-24px}
    .timeline em{font-style:normal;color:#d4d7e5}
    .timeline p{margin:0;color:#adb8cd}
    .timeline b{display:block;color:white;margin-bottom:2px}
    .stat-box{border:1px solid var(--line);border-radius:8px;padding:8px 13px}
    .stat-box span{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #1e2b45;font-size:11px}
    .stat-box span:last-child{border:0}
    .stats h4,.contributions h4{font:500 14px Outfit;margin:12px 0 8px}
    .bars label{display:block;font-size:10px;color:#cdd4e7;margin:5px 0}
    .bars i{display:block;height:5px;background:linear-gradient(90deg,#7447f5,#ffaa00);border-radius:4px;margin-top:2px}
    .contributions{padding:13px}
    .contributions h4{text-align:center;margin-top:0}
    .months{text-align:center;font-size:9px;color:#aeb7cc}
    .heatmap{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;margin:9px 0}
    .heatmap i{height:9px;background:#173a32;border-radius:1px}
    .heatmap .l1{background:#177242}
    .heatmap .l2{background:#289c4f}
    .heatmap .l3{background:#49bd5b}
    .heatmap .l4{background:#8dda51}
    .most-used{border:1px solid #233250;border-radius:8px;padding:11px;display:grid;gap:7px;font-size:10px}
    .most-used span i{width:20px;color:#30bfff}
    .bottom-grid{display:grid;grid-template-columns:1.3fr .55fr .8fr;gap:20px;padding-top:20px}
    .certs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
    .certs .card{padding:13px 9px;min-height:125px;display:grid;place-items:center;text-align:center;gap:7px}
    .certs i{font-size:25px;color:#48a5ff}
    .certs b{font-size:11px}
    .certs small{color:#aab3c8;font-size:10px}
    .contact p{font-size:11px;color:#c5cada;line-height:1.5}
    .contact>a{color:#d7e4fa;display:block;text-decoration:none;font-size:11px;margin:13px 0}
    .contact>a i{color:#05a3ff;width:25px;font-size:14px}
    .contact-form{padding:11px;display:grid;gap:7px}
    .contact-form input,.contact-form textarea{background:#0c1527;border:1px solid #293652;color:white;border-radius:4px;padding:8px;font:10px 'DM Sans'}
    .contact-form textarea{height:56px;resize:vertical}
    .contact-form .btn{padding:9px;border-radius:4px}
    footer{margin-top:20px;border-top:1px solid #1c2943;min-height:70px;display:flex;align-items:center;justify-content:space-between}
    footer p{color:#a7aec0;font-size:15px}.light{--bg:#eef4ff;--panel:#fff;--ink:#0b1530;--muted:#536078}
    .light .card{background:#fff}
    .light .brand,.light nav a,.light .theme{color:#0b1530}
    .light .lede,.light .about-card p{color:#26354f}
    @media(max-width:900px){
        .nav{gap:12px}
        .nav nav{gap:14px}
        .brand b{display:none}
        .nav-actions .btn{display:none}
        .hero{grid-template-columns:1fr}
        .hero-art{display:none}
        .skills-grid{grid-template-columns:repeat(6,1fr)}
        .project-grid{grid-template-columns:repeat(2,1fr)}
        .dashboard{grid-template-columns:1fr 1fr}
        .contributions{grid-column:span 2}
        .bottom-grid{grid-template-columns:1fr 1fr}
        .contact-form{grid-column:span 2}
        .certs{grid-template-columns:repeat(4,1fr)}}
        
        @media(max-width:620px){
            .nav{height:62px}
            .menu-btn{display:block;margin-left:auto;background:transparent;border:0;color:white;font-size:18px}
            .nav nav{display:none;position:absolute;top:62px;left:0;right:0;height:auto;background:#07101f;z-index:5;padding:10px 18px;flex-wrap:wrap}
            .nav nav.open{display:flex}
            .nav nav a{padding:9px}
            .theme{display:none}
            .hero{min-height:auto;padding:42px 18px}
            .hero h1{font-size:38px}
            .hero h2{font-size:18px}
            .about,.bottom-grid{grid-template-columns:1fr}
            .info-grid{grid-template-columns:1fr}
            .skills-grid{grid-template-columns:repeat(3,1fr)}
            .project-grid{grid-template-columns:1fr}
            .dashboard{grid-template-columns:1fr}
            .contributions,.contact-form{grid-column:auto}
            .certs{grid-template-columns:repeat(2,1fr)}
            footer{padding-top:14px;padding-bottom:14px}
            footer p{display:none}
            .nav-actions{display:none}}