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

        :root {
            --bg: #0a0a0a;
            --surface: #111;
            --surface2: #181818;
            --border: #1e1e1e;
            --accent: #e8ff5a;
            --accent2: #5affe8;
            --text: #f0f0f0;
            --muted: #777;
            --muted2: #333;
        }

        /* Custom Scrollbar for Chrome, Safari, and Edge */
            ::-webkit-scrollbar {
            width: 10px; 
            }


            ::-webkit-scrollbar-track {
            background: #0a0a0a; 
            }


            ::-webkit-scrollbar-thumb {
            background: #d4ff00;
            border-radius: 10px;
            border: 3px solid #0a0a0a; 
            }


            ::-webkit-scrollbar-thumb:hover {
            background: #e5ff5e; 
            cursor: pointer;
            }

            /* For Firefox */
            * {
            scrollbar-width: thin;
            scrollbar-color: #d4ff00 #0a0a0a;
            }

        html {
            scroll-behavior: smooth;
            cursor: none
        }

        .cur {
            position: fixed;
            width: 10px;
            height: 10px;
            background: var(--accent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width .18s, height .18s;
            mix-blend-mode: difference
        }

        .cur-r {
            position: fixed;
            width: 36px;
            height: 36px;
            border: 1.5px solid var(--accent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transform: translate(-50%, -50%);
            transition: width .18s, height .18s, opacity .18s;
            opacity: .4
        }

        .cur.hov {
            width: 5px;
            height: 5px
        }

        .cur-r.hov {
            width: 52px;
            height: 52px;
            opacity: .15
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.6
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 900;
            opacity: .5
        }

        /* NAV */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px 52px;
            z-index: 200;
            transition: background .3s, border-color .3s;
            border-bottom: 1px solid transparent
        }

        nav.scrolled {
            background: rgba(10, 10, 10, .92);
            backdrop-filter: blur(16px);
            border-color: var(--border)
        }

        .n-logo {
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            font-size: 17px;
            color: var(--text);
            text-decoration: none
        }

        .n-logo em {
            color: var(--accent);
            font-style: normal
        }

        .n-links {
            display: flex;
            gap: 36px;
            list-style: none
        }

        .n-links a {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: none;
            transition: color .2s
        }

        .n-links a:hover {
            color: var(--text)
        }

        /* HERO */
        #hero {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 420px;
            align-items: center;
            padding: 0 52px;
            gap: 48px;
            position: relative;
            overflow: hidden
        }

        .hero-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 155px 0 60px;
        }

        .h-tag {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0;
            animation: up .6s .1s forwards
        }

        .h-tag::before {
            content: '';
            display: block;
            width: 26px;
            height: 1px;
            background: var(--accent)
        }

        .h-name {
            font-family: 'Syne', sans-serif;
            font-size: clamp(48px, 7.5vw, 106px);
            font-weight: 800;
            line-height: .92;
            letter-spacing: -4px;
            opacity: 0;
            animation: up .7s .25s forwards
        }

        .h-name .stroke {
            color: transparent;
            -webkit-text-stroke: 1.5px var(--text)
        }

        .h-desc {
            margin-top: 26px;
            max-width: 420px;
            font-size: 15px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.82;
            opacity: 0;
            animation: up .7s .42s forwards
        }

        .h-cta {
            display: flex;
            gap: 12px;
            margin-top: 36px;
            flex-wrap: wrap;
            opacity: 0;
            animation: up .7s .56s forwards
        }

        .btn-p {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 28px;
            background: var(--accent);
            color: #0a0a0a;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .3px;
            text-decoration: none;
            transition: transform .18s, box-shadow .18s;
            cursor: none
        }

        .btn-p:hover {
            transform: translate(-3px, -3px);
            box-shadow: 5px 5px 0 var(--accent2)
        }

        .btn-o {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 28px;
            background: transparent;
            color: var(--text);
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .3px;
            text-decoration: none;
            border: 1.5px solid var(--border);
            transition: border-color .2s, transform .18s;
            cursor: none
        }

        .btn-o:hover {
            border-color: var(--muted);
            transform: translate(-2px, -2px)
        }

        /* CODE BLOCK HERO PANEL */
        .hero-code {
            opacity: 0;
            animation: up .8s .7s forwards;
            align-self: center
        }

        .code-window {
            background: #0d0d0d;
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
            min-width: 340px
        }

        .code-titlebar {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 10px 14px;
            background: #141414;
            border-bottom: 1px solid var(--border)
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%
        }

        .dot.r {
            background: #ff5f57
        }

        .dot.y {
            background: #febc2e
        }

        .dot.g {
            background: #28c840
        }

        .code-filename {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--muted);
            margin-left: 8px
        }

        .code-body {
            padding: 20px 22px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12.5px;
            line-height: 2
        }

        .c-kw {
            color: #c792ea
        }

        .c-str {
            color: var(--accent2)
        }

        .c-acc {
            color: var(--accent)
        }

        .c-fn {
            color: #82aaff
        }

        .c-cm {
            color: #444
        }

        .code-cursor {
            display: inline-block;
            width: 2px;
            height: 14px;
            background: var(--accent);
            vertical-align: middle;
            animation: blink 1s step-end infinite;
            margin-left: 1px
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0
            }
        }

        /* MARQUEE */
        .mq-wrap {
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            padding: 13px 0;
            overflow: hidden;
            background: var(--surface)
        }

        .mq-track {
            display: flex;
            animation: mq 22s linear infinite;
            white-space: nowrap
        }

        .mq-item {
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--muted2);
            padding: 0 26px
        }

        .mq-item em {
            color: var(--accent);
            font-style: normal;
            margin-right: 26px
        }

        /* SECTION */
        section {
            padding: 96px 52px
        }

        .s-label {
            font-size: 9.5px;
            font-weight: 600;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .s-label::before {
            content: '';
            display: block;
            width: 26px;
            height: 1px;
            background: var(--accent)
        }

        .s-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(28px, 3.8vw, 48px);
            font-weight: 800;
            letter-spacing: -1.5px;
            line-height: 1.05;
            color: var(--text);
            margin-bottom: 52px
        }

        /* ABOUT */
        #about {
            background: var(--surface)
        }

        .ab-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: start
        }

        .ab-text p {
            font-size: 15px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.85;
            margin-bottom: 16px
        }

        .ab-text strong {
            color: var(--text);
            font-weight: 500
        }

        .ab-text .hl {
            color: var(--accent);
            font-weight: 500
        }

        .ab-timeline {
            margin-top: 32px;
            border-left: 1px solid var(--border);
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .tl-date {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 3px
        }

        .tl-role {
            font-size: 13px;
            font-weight: 500;
            color: var(--text)
        }

        .tl-place {
            font-size: 12px;
            color: var(--muted)
        }

        .stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px
        }

        .stat {
            background: var(--surface2);
            padding: 26px 22px;
            border: 1px solid var(--border)
        }

        .stat-n {
            font-family: 'Syne', sans-serif;
            font-size: 38px;
            font-weight: 800;
            color: var(--accent);
            line-height: 1;
            margin-bottom: 4px
        }

        .stat-l {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--muted)
        }

        /* SKILLS */
        #skills {
            background: var(--bg)
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px
        }

        .skill-card {
            background: var(--surface);
            border: 1px solid var(--border);
            padding: 28px 26px;
            transition: border-color .2s, background .2s
        }

        .skill-card:hover {
            border-color: var(--muted2);
            background: var(--surface2)
        }

        .skill-cat {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 14px
        }

        .skill-items {
            display: flex;
            flex-wrap: wrap;
            gap: 7px
        }

        .s-pill {
            font-size: 11px;
            font-weight: 400;
            color: var(--muted);
            padding: 4px 12px;
            border: 1px solid var(--border)
        }

        .s-pill.learning {
            border-color: var(--accent);
            color: var(--accent)
        }

        /* PROJECTS */
        #projects {
            background: var(--surface)
        }

        .pj-grid {
            display: flex;
            flex-direction: column;
            gap: 2px
        }

        .pj-card {
            display: grid;
            grid-template-columns: 52px 1fr auto;
            align-items: center;
            padding: 26px 30px;
            background: var(--surface2);
            border: 1px solid var(--border);
            text-decoration: none;
            position: relative;
            overflow: hidden;
            transition: background .2s, transform .15s;
            cursor: none;
            gap: 0
        }

        .pj-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--accent);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform .24s
        }

        .pj-card:hover {
            background: var(--bg);
            transform: translateX(5px)
        }

        .pj-card:hover::before {
            transform: scaleY(1)
        }

        .pj-n {
            font-family: 'Syne', sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: var(--muted2);
            letter-spacing: 1px;
            align-self: start;
            padding-top: 2px
        }

        .pj-name {
            font-family: 'Syne', sans-serif;
            font-size: 19px;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -.2px;
            margin-bottom: 4px
        }

        .pj-desc {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            max-width: 560px;
            margin-bottom: 9px
        }

        .pj-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 5px
        }

        .pill {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: .6px;
            text-transform: uppercase;
            color: var(--muted2);
            padding: 3px 9px;
            border: 1px solid var(--border)
        }

        .pj-links {
            display: flex;
            gap: 14px;
            align-self: center;
            padding-left: 24px;
            flex-shrink: 0
        }

        .pj-link {
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: color .2s, border-color .2s;
            white-space: nowrap
        }

        .pj-link:hover {
            color: var(--accent);
            border-color: var(--accent)
        }

        .pj-card.feat {
            grid-template-columns: 1fr;
            padding: 38px
        }

        .feat-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 24px;
            flex-wrap: wrap
        }

        .feat-num {
            font-family: 'Syne', sans-serif;
            font-size: 9.5px;
            font-weight: 700;
            color: var(--accent);
            letter-spacing: 2.5px;
            text-transform: uppercase;
            margin-bottom: 12px
        }

        .feat-links {
            display: flex;
            gap: 14px;
            flex-shrink: 0;
            margin-top: 4px
        }

        .feat-link {
            font-family: 'Syne', sans-serif;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color .2s
        }

        .feat-link:hover {
            border-color: var(--accent)
        }

        /* TESTIMONIALS */
        #testimonials {
            background: var(--bg);
            padding: 96px 0;
            overflow: hidden
        }

        .test-header {
            padding: 0 52px;
            margin-bottom: 52px
        }

        .test-rows {
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .test-row {
            display: flex;
            gap: 14px;
            animation: mq 48s linear infinite;
            width: max-content
        }

        .test-row.rev {
            animation: mq-rev 44s linear infinite
        }

        .t-card {
            background: var(--surface);
            border: 1px solid var(--border);
            padding: 22px 24px;
            width: 290px;
            flex-shrink: 0;
            transition: border-color .2s
        }

        .t-card:hover {
            border-color: var(--muted2)
        }

        .t-top {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 12px
        }

        .t-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            border: 1.5px solid var(--border)
        }

        .t-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .t-avatar.init {
            background: var(--surface2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 800;
            color: var(--accent)
        }

        .t-name {
            font-family: 'Syne', sans-serif;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text);
            line-height: 1.2
        }

        .t-role {
            font-size: 10px;
            color: var(--muted);
            margin-top: 2px
        }

        .t-quote {
            font-size: 12px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.72
        }

        .t-quote::before {
            content: '\201C';
            color: var(--accent);
            font-size: 16px;
            line-height: 1
        }

        .t-quote::after {
            content: '\201D';
            color: var(--accent);
            font-size: 16px;
            line-height: 1
        }

        /* CONTACT */
        #contact {
            background: var(--surface);
            text-align: center;
            padding: 112px 52px
        }

        .ct-inner {
            max-width: 560px;
            margin: 0 auto
        }

        .ct-big {
            font-family: 'Syne', sans-serif;
            font-size: clamp(36px, 6vw, 76px);
            font-weight: 800;
            letter-spacing: -2px;
            line-height: .95;
            color: var(--text);
            margin-bottom: 24px
        }

        .ct-big .out {
            color: transparent;
            -webkit-text-stroke: 1.5px var(--text)
        }

        .ct-sub {
            font-size: 14px;
            font-weight: 300;
            color: var(--muted);
            margin-bottom: 40px;
            line-height: 1.75
        }

        .ct-links {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap
        }

        .ct-a {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 12px 22px;
            border: 1.5px solid var(--border);
            font-family: 'Syne', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--text);
            text-decoration: none;
            transition: border-color .2s, background .2s, color .2s;
            cursor: none
        }

        .ct-a:hover {
            border-color: var(--accent);
            background: var(--accent);
            color: #0a0a0a
        }

        footer {
            padding: 26px 52px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .fc {
            font-size: 10.5px;
            color: var(--muted2)
        }

        .fc em {
            color: var(--accent);
            font-style: normal
        }

        .rv {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .6s ease, transform .6s ease
        }

        .rv.on {
            opacity: 1;
            transform: none
        }

        @keyframes up {
            from {
                opacity: 0;
                transform: translateY(20px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes mq {
            from {
                transform: translateX(0)
            }

            to {
                transform: translateX(-50%)
            }
        }

        @keyframes mq-rev {
            from {
                transform: translateX(-50%)
            }

            to {
                transform: translateX(0)
            }
        }

        @media(max-width:1024px) {
            #hero {
                grid-template-columns: 1fr;
                padding: 0 22px
            }

            .hero-code {
                display: none
            }
        }

        @media(max-width:900px) {
            nav {
                padding: 18px 22px
            }

            .n-links {
                display: none
            }

            section {
                padding: 68px 22px
            }

            .ab-grid,
            .skills-grid {
                grid-template-columns: 1fr;
                gap: 40px
            }

            .pj-card {
                grid-template-columns: 38px 1fr;
                padding: 18px
            }

            .pj-links {
                display: none
            }

            .pj-card.feat {
                padding: 22px
            }

            .feat-top {
                flex-direction: column
            }

            .test-header {
                padding: 0 22px
            }

            footer {
                padding: 18px 22px;
                flex-direction: column;
                gap: 6px;
                text-align: center
            }
        }

/* HAMBURGER BUTTON */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: none;
    z-index: 1000;
}

.menu-toggle span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--text);
    transition: 0.3s;
}

/* MOBILE NAV OPEN STATE */
@media(max-width: 900px) {
    .menu-toggle { display: flex; }

    .n-links {
        display: flex; /* Override previous display:none */
        position: fixed;
        top: 0;
        right: -100%; /* Hidden by default */
        width: 100%;
        height: 100vh;
        background: var(--bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 500;
    }

    .n-links.active {
        right: 0;
    }

    .n-links a {
        font-size: 24px; /* Larger links for mobile tap */
    }

    /* Animation for the X shape */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
        background: var(--accent);
    }
    .menu-toggle.active span:nth-child(2) {
        transform: translateY(-4px) rotate(-45deg);
        background: var(--accent);
    }
}