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

        :root {
            --bg: #09090f;
            --bg2: #111118;
            --bg3: #1a1a26;
            --card: #141420;
            --text: #eeeef8;
            --muted: #7777aa;
            --accent: #7c6bff;
            --accent2: #00e5cc;
            --border: #252535;
            --green: #00c896;
            --orange: #ff8c42;
            --red: #ff5566;
        }

        [data-theme="light"] {
            --bg: #f4f4fa;
            --bg2: #ebebf5;
            --bg3: #e0e0ee;
            --card: #fff;
            --text: #0d0d1a;
            --muted: #5555888;
            --accent: #5b4bdd;
            --accent2: #009e8a;
            --border: #cccce0;
            --green: #00a870;
            --orange: #d96a10;
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            transition: background .35s, color .35s
        }

        /* ─── NAV ─── */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(9, 9, 15, .82);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--border);
            padding: 0 6%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 66px;
            transition: background .35s
        }

        [data-theme="light"] nav {
            background: rgba(244, 244, 250, .88)
        }

        .logo {
            font-family: 'Fira Code', monospace;
            font-weight: 500;
            font-size: 18px;
            color: var(--text)
        }

        .logo span {
            color: var(--accent)
        }

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

        .nav-links {
            display: flex;
            gap: 26px;
            list-style: none
        }

        .nav-links a {
            color: var(--muted);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: color .2s;
            cursor: pointer;
            letter-spacing: .2px
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text)
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .theme-btn {
            background: var(--bg3);
            border: 1px solid var(--border);
            color: var(--text);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s
        }

        .theme-btn:hover {
            border-color: var(--accent)
        }

        .hire-btn {
            background: linear-gradient(135deg, var(--accent), #9b8fff);
            color: #fff;
            border: none;
            padding: 9px 22px;
            border-radius: 22px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Space Grotesk', sans-serif;
            transition: all .2s;
            letter-spacing: .3px
        }

        .hire-btn:hover {
            opacity: .82;
            transform: translateY(-1px)
        }

        /* ─── HERO ─── */
        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 80px 6% 60px
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 0
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            animation: floatOrb 10s ease-in-out infinite
        }

        .orb1 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(124, 107, 255, .22), transparent 70%);
            top: -120px;
            right: -140px;
            animation-delay: 0s
        }

        .orb2 {
            width: 450px;
            height: 450px;
            background: radial-gradient(circle, rgba(0, 229, 204, .18), transparent 70%);
            bottom: -80px;
            left: -100px;
            animation-delay: 3.5s
        }

        .orb3 {
            width: 340px;
            height: 340px;
            background: radial-gradient(circle, rgba(255, 140, 66, .13), transparent 70%);
            top: 45%;
            left: 38%;
            animation-delay: 6s
        }

        @keyframes floatOrb {

            0%,
            100% {
                transform: translateY(0) scale(1)
            }

            50% {
                transform: translateY(-35px) scale(1.06)
            }
        }

        .grid-bg {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(124, 107, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 107, 255, .055) 1px, transparent 1px);
            background-size: 58px 58px
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 70px;
            align-items: center;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto
        }

        .hero-left {}

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 229, 204, .1);
            border: 1px solid rgba(0, 229, 204, .28);
            border-radius: 22px;
            padding: 6px 16px;
            font-size: 12px;
            color: var(--accent2);
            margin-bottom: 22px;
            font-family: 'Fira Code', monospace;
            animation: fadeUp .8s ease both;
            letter-spacing: .5px
        }

        .badge-dot {
            width: 7px;
            height: 7px;
            background: var(--accent2);
            border-radius: 50%;
            animation: pulseDot 2s infinite
        }

        @keyframes pulseDot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1)
            }

            50% {
                opacity: .4;
                transform: scale(1.6)
            }
        }

        h1.hero-title {
            font-size: clamp(38px, 5.5vw, 68px);
            font-weight: 700;
            line-height: 1.07;
            letter-spacing: -2px;
            animation: fadeUp .8s .12s ease both
        }

        .hero-name {
            display: block;
            background: linear-gradient(135deg, var(--accent) 30%, var(--accent2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .hero-role {
            font-size: 18px;
            color: var(--muted);
            margin: 16px 0 10px;
            font-weight: 400;
            animation: fadeUp .8s .24s ease both
        }

        .hero-role code {
            font-family: 'Fira Code', monospace;
            color: var(--accent2);
            background: rgba(0, 229, 204, .08);
            padding: 2px 9px;
            border-radius: 5px;
            font-size: 14px
        }

        .hero-sub {
            font-size: 15px;
            color: var(--muted);
            line-height: 1.78;
            max-width: 480px;
            animation: fadeUp .8s .36s ease both;
            margin-bottom: 32px
        }

        .hero-btns {
            display: flex;
            gap: 13px;
            flex-wrap: wrap;
            animation: fadeUp .8s .48s ease both
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent), #9b8fff);
            color: #fff;
            border: none;
            padding: 13px 30px;
            border-radius: 30px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Space Grotesk', sans-serif;
            transition: all .25s;
            box-shadow: 0 4px 28px rgba(124, 107, 255, .32)
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 36px rgba(124, 107, 255, .48)
        }

        .btn-outline {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
            padding: 13px 30px;
            border-radius: 30px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Space Grotesk', sans-serif;
            transition: all .25s
        }

        .btn-outline:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-2px)
        }

        .hero-stats {
            display: flex;
            gap: 34px;
            margin-top: 48px;
            animation: fadeUp .8s .6s ease both
        }

        .stat .num {
            font-size: 30px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
        }

        .stat .lbl {
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-top: 3px
        }

        /* HERO RIGHT - Avatar */
        .hero-right {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeUp .8s .3s ease both
        }

        .avatar-wrap {
            position: relative;
            width: 360px;
            height: 360px
        }

        .avatar-ring {
            position: absolute;
            inset: -14px;
            border-radius: 50%;
            border: 2px solid transparent;
            background: linear-gradient(135deg, var(--accent), var(--accent2)) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: rotateSlow 12s linear infinite
        }

        @keyframes rotateSlow {
            to {
                transform: rotate(360deg)
            }
        }

        .avatar-ring2 {
            position: absolute;
            inset: -28px;
            border-radius: 50%;
            border: 1px solid rgba(124, 107, 255, .2);
            animation: rotateSlow 20s linear infinite reverse
        }

        .avatar-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid var(--bg2);
            background: linear-gradient(135deg, var(--bg3), var(--bg2));
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            z-index: 1
        }

        .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #1a1a2e, #16213e, #0f3460);
            border-radius: 50%
        }

        .avatar-face {
            font-size: 110px;
            line-height: 1;
            filter: drop-shadow(0 4px 20px rgba(124, 107, 255, .5))
        }

        .avatar-badge {
            position: absolute;
            bottom: 16px;
            right: 8px;
            background: var(--bg2);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 2;
            backdrop-filter: blur(12px)
        }

        .ab-dot {
            width: 8px;
            height: 8px;
            background: var(--green);
            border-radius: 50%;
            animation: pulseDot 2s infinite
        }

        .ab-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--text)
        }

        .floating-chip {
            position: absolute;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 600;
            backdrop-filter: blur(12px);
            z-index: 2;
            white-space: nowrap
        }

        .chip1 {
            top: 20px;
            left: -40px;
            animation: chipFloat 4s ease-in-out infinite;
            color: var(--accent)
        }

        .chip2 {
            top: 50%;
            right: -50px;
            animation: chipFloat 5s ease-in-out infinite .8s;
            color: var(--accent2)
        }

        .chip3 {
            bottom: 60px;
            left: -30px;
            animation: chipFloat 4.5s ease-in-out infinite 1.5s;
            color: var(--orange)
        }

        @keyframes chipFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-10px)
            }
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        /* ─── SECTIONS ─── */
        section {
            padding: 100px 6%
        }

        .container {
            max-width: 1200px;
            margin: 0 auto
        }

        .section-label {
            font-family: 'Fira Code', monospace;
            font-size: 11px;
            color: var(--accent2);
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .section-label::after {
            content: '';
            flex: 1;
            max-width: 50px;
            height: 1px;
            background: var(--accent2);
            opacity: .4
        }

        h2.sh {
            font-size: clamp(26px, 4vw, 42px);
            font-weight: 700;
            letter-spacing: -1px;
            margin-bottom: 12px
        }

        .section-sub {
            color: var(--muted);
            font-size: 15px;
            max-width: 500px;
            line-height: 1.75;
            margin-bottom: 56px
        }

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

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto
        }

        .about-code-box {
            background: var(--bg3);
            border-radius: 20px;
            border: 1px solid var(--border);
            padding: 28px;
            font-family: 'Fira Code', monospace;
            font-size: 13px;
            line-height: 1.95;
            position: relative;
            overflow: hidden
        }

        .about-code-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 36px;
            background: var(--card);
            border-bottom: 1px solid var(--border);
            border-radius: 20px 20px 0 0
        }

        .dots {
            position: absolute;
            top: 11px;
            left: 16px;
            display: flex;
            gap: 7px
        }

        .dots span {
            width: 12px;
            height: 12px;
            border-radius: 50%
        }

        .dot-r {
            background: #ff5f57
        }

        .dot-y {
            background: #febc2e
        }

        .dot-g {
            background: #28c840
        }

        .code-content {
            margin-top: 24px
        }

        .kw {
            color: #c792ea
        }

        .fn {
            color: var(--accent2)
        }

        .str {
            color: #c3e88d
        }

        .num {
            color: var(--orange)
        }

        .cm {
            color: #546e7a;
            font-style: italic
        }

        .prop {
            color: #82b1ff
        }

        .obj {
            color: var(--accent)
        }

        .about-text p {
            color: var(--muted);
            line-height: 1.82;
            margin-bottom: 14px;
            font-size: 15px
        }

        .about-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 20px 0
        }

        .info-item {
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 16px
        }

        .info-lbl {
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .8px;
            margin-bottom: 3px
        }

        .info-val {
            font-size: 14px;
            font-weight: 600
        }

        .dl-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--bg3);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 10px 20px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s;
            font-family: 'Space Grotesk', sans-serif;
            margin-top: 8px
        }

        .dl-btn:hover {
            border-color: var(--accent);
            color: var(--accent)
        }

        /* ─── SKILLS ─── */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto
        }

        .skill-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 26px;
            transition: all .3s
        }

        .skill-card:hover {
            border-color: var(--accent);
            transform: translateY(-5px);
            box-shadow: 0 16px 48px rgba(124, 107, 255, .12)
        }
.sk-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px
}

.sk-icon.v1 {
    background: rgba(124, 107, 255, .14)
}

.sk-icon.v2 {
    background: rgba(0, 229, 204, .12)
}

.sk-icon.v3 {
    background: rgba(0, 200, 150, .12)
}

.sk-icon.v4 {
    background: rgba(255, 140, 66, .13)
}

.sk-icon.v5 {
    background: rgba(240, 98, 146, .12)
}

.sk-icon.v6 {
    background: rgba(97, 218, 251, .12)
}

.sk-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px
}

.sk-level {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px
}

.sk-bar-bg {
    background: var(--bg3);
    border-radius: 10px;
    height: 5px;
    overflow: hidden
}

.sk-bar {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    width: 0%;
    transition: width 1.6s ease
}

.sk-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px
}

.sk-pill {
    font-size: 11px;
    font-family: 'Fira Code', monospace;
    color: var(--muted);
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 10px
}

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

.proj-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

.filter-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    font-family: 'Space Grotesk', sans-serif
}

.filter-btn:hover,
.filter-btn.active {
    background: rgba(124, 107, 255, .12);
    border-color: var(--accent);
    color: var(--accent)
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto
}

.proj-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: all .3s;
    position: relative
}

.proj-card:hover {
    border-color: var(--accent);
    transform: translateY(-7px);
    box-shadow: 0 24px 64px rgba(124, 107, 255, .16)
}

.proj-thumb {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    position: relative;
    overflow: hidden
}

.proj-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--card))
}

.t1 {
    background: linear-gradient(135deg, rgba(124, 107, 255, .35), rgba(0, 229, 204, .15))
}

.t2 {
    background: linear-gradient(135deg, rgba(0, 229, 204, .28), rgba(124, 107, 255, .1))
}

.t3 {
    background: linear-gradient(135deg, rgba(255, 140, 66, .28), rgba(200, 80, 80, .1))
}

.t4 {
    background: linear-gradient(135deg, rgba(0, 200, 150, .28), rgba(0, 180, 255, .1))
}

.t5 {
    background: linear-gradient(135deg, rgba(240, 98, 146, .28), rgba(124, 107, 255, .12))
}

.t6 {
    background: linear-gradient(135deg, rgba(50, 150, 255, .28), rgba(0, 229, 204, .12))
}

.t7 {
    background: linear-gradient(135deg, rgba(200, 160, 255, .25), rgba(80, 200, 220, .12))
}

.t8 {
    background: linear-gradient(135deg, rgba(255, 200, 80, .25), rgba(255, 120, 80, .12))
}

.proj-featured {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, var(--accent), #9b8fff);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 10px;
    letter-spacing: .5px;
    z-index: 1
}

.proj-body {
    padding: 20px 22px 22px
}

.proj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px
}

.ptag {
    font-size: 10px;
    font-family: 'Fira Code', monospace;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid;
    font-weight: 500
}

.ptag.mern {
    color: var(--accent2);
    border-color: rgba(0, 229, 204, .28);
    background: rgba(0, 229, 204, .07)
}

.ptag.ai {
    color: var(--accent);
    border-color: rgba(124, 107, 255, .28);
    background: rgba(124, 107, 255, .08)
}

.ptag.react {
    color: #61dafb;
    border-color: rgba(97, 218, 251, .28);
    background: rgba(97, 218, 251, .07)
}

.ptag.node {
    color: #8bc34a;
    border-color: rgba(139, 195, 74, .28);
    background: rgba(139, 195, 74, .07)
}

.ptag.mongo {
    color: #4db86a;
    border-color: rgba(77, 184, 106, .28);
    background: rgba(77, 184, 106, .07)
}

.ptag.gen {
    color: var(--orange);
    border-color: rgba(255, 140, 66, .28);
    background: rgba(255, 140, 66, .07)
}

.ptag.seo {
    color: #f06292;
    border-color: rgba(240, 98, 146, .28);
    background: rgba(240, 98, 146, .07)
}

.ptag.next {
    color: #ddd;
    border-color: rgba(220, 220, 220, .2);
    background: rgba(220, 220, 220, .06)
}

.ptag.ts {
    color: #3178c6;
    border-color: rgba(49, 120, 198, .28);
    background: rgba(49, 120, 198, .07)
}

.proj-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -.3px
}

.proj-desc {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.72;
    margin-bottom: 16px
}

.proj-links {
    display: flex;
    gap: 9px
}

.plink {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
    font-family: 'Space Grotesk', sans-serif;
    transition: all .2s
}

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

.plink.live {
    background: linear-gradient(135deg, var(--accent), #9b8fff);
    color: #fff;
    border-color: transparent
}

.plink.live:hover {
    opacity: .82
}

.add-proj-card {
    background: var(--card);
    border: 2px dashed var(--border);
    border-radius: 20px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: pointer;
    transition: all .3s
}

.add-proj-card:hover {
    border-color: var(--accent);
    background: rgba(124, 107, 255, .04);
    transform: translateY(-4px)
}

.add-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(124, 107, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--accent);
    transition: transform .2s
}

.add-proj-card:hover .add-icon {
    transform: scale(1.1)
}
.add-label {
    font-weight: 600;
    font-size: 16px;
    color: var(--muted)
}

.add-sub {
    font-size: 13px;
    color: var(--muted);
    opacity: .55
}

/* ─── MODAL ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
    backdrop-filter: blur(10px)
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: all
}

.modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px;
    width: 92%;
    max-width: 560px;
    transform: translateY(24px);
    transition: transform .28s;
    max-height: 86vh;
    overflow-y: auto
}

.modal-overlay.open .modal {
    transform: translateY(0)
}

.modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px
}

.modal-title {
    font-size: 20px;
    font-weight: 700
}

.modal-close {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-close:hover {
    color: var(--text)
}

.form-group {
    margin-bottom: 16px
}

label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: .8px
}

input,
textarea,
select {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: 'Space Grotesk', sans-serif;
    transition: border .2s;
    outline: none
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent)
}

textarea {
    min-height: 88px;
    resize: vertical
}

select option {
    background: var(--bg2)
}

.modal-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px
}

.cancel-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 10px 22px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s
}

.cancel-btn:hover {
    border-color: var(--muted)
}

.save-btn {
    background: linear-gradient(135deg, var(--accent), #9b8fff);
    color: #fff;
    border: none;
    padding: 10px 26px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s
}

.save-btn:hover {
    opacity: .82
}

.tag-select-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tag-toggle {
    padding: 5px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    cursor: pointer;
    background: var(--bg3);
    color: var(--muted);
    font-family: 'Fira Code', monospace;
    transition: all .2s
}

.tag-toggle.on {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(124, 107, 255, .1)
}

/* ─── EXPERIENCE ─── */
.timeline {
    position: relative;
    padding-left: 36px;
    max-width: 800px;
    margin: 0 auto
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--accent2) 60%, transparent)
}

.titem {
    position: relative;
    margin-bottom: 44px;
    animation: fadeUp .6s ease both
}

.tdot {
    position: absolute;
    left: -42px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px rgba(124, 107, 255, .18)
}

.tcard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: all .25s
}

.tcard:hover {
    border-color: rgba(124, 107, 255, .35)
}

.tdate {
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    color: var(--accent2);
    margin-bottom: 8px;
    letter-spacing: .4px
}

.trole {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -.3px
}

.tcomp {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 14px
}

.tdesc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.8
}

.tbadges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px
}

.tbadge {
    font-size: 11px;
    font-family: 'Fira Code', monospace;
    padding: 3px 11px;
    border-radius: 10px;
    background: rgba(124, 107, 255, .1);
    color: var(--accent);
    border: 1px solid rgba(124, 107, 255, .22)
}

/* ─── EDUCATION ─── */
#education {
    background: var(--bg2)
}

.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto
}

.edu-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px;
    transition: all .28s
}

.edu-card:hover {
    border-color: var(--accent2);
    transform: translateY(-5px)
}

.edu-icon {
    font-size: 30px;
    margin-bottom: 16px
}

.edu-deg {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px
}

.edu-school {
    font-size: 14px;
    color: var(--accent2);
    margin-bottom: 5px;
    font-weight: 500
}

.edu-year {
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    color: var(--muted)
}

.edu-desc {
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.72
}

.edu-gpa {
    display: inline-block;
    margin-top: 12px;
    background: rgba(0, 229, 204, .1);
    border: 1px solid rgba(0, 229, 204, .25);
    color: var(--accent2);
    font-size: 12px;
    font-family: 'Fira Code', monospace;
    padding: 3px 11px;
    border-radius: 8px
}

/* ─── CONTACT ─── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto
}

.contact-info p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 28px
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.clink {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--text);
    transition: all .22s;
    cursor: pointer
}

.clink:hover {
    border-color: var(--accent);
    transform: translateX(7px)
}

.clink-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0
}

.clink-icon.gh {
    background: rgba(255, 255, 255, .08)
}

.clink-icon.li {
    background: rgba(0, 119, 181, .14)
}

.clink-icon.em {
    background: rgba(255, 140, 66, .12)
}

.clink-icon.tw {
    background: rgba(29, 161, 242, .12)
}

.clink-lbl {
    font-size: 12px;
    color: var(--muted)
}

.clink-val {
    font-size: 14px;
    font-weight: 600
}

.contact-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px
}

.cf-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 24px
}

.send-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent), #9b8fff);
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    margin-top: 6px;
    transition: all .25s;
    letter-spacing: .3px
}

.send-btn:hover {
    opacity: .82;
    transform: translateY(-1px)
}

.toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    transform: translateX(120%);
    transition: transform .35s;
    max-width: 320px
}

.toast.show {
    transform: translateX(0)
}

/* ─── FOOTER ─── */
footer {
    background: var(--bg3);
    border-top: 1px solid var(--border);
    padding: 36px 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px
}

.fc {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: var(--muted)
}

.fl {
    display: flex;
    gap: 22px
}

.fl a {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s
}

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

.back-top {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all .2s
}

.back-top:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.avatar-placeholder img {
    width: 83%;
    object-fit: cover;
}

/* PARTICLES */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: driftP linear infinite;
    opacity: .35
}

@keyframes driftP {
    0% {
        transform: translateY(0) translateX(0)
    }

    25% {
        transform: translateY(-30px) translateX(12px)
    }

    75% {
        transform: translateY(-15px) translateX(-10px)
    }

    100% {
        transform: translateY(0) translateX(0)
    }
}

@media(max-width:900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center
    }

    .hero-right {
        display: none
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr
    }

    .hero-stats {
        justify-content: center
    }

    .hero-btns {
        justify-content: center
    }

    .hero-sub {
        margin: 0 auto 32px
    }

    .nav-links {
        display: none
    }
}