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

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


/* =========================
   VARIABLES
========================= */

:root {

    --bg: #0b0d10;
    --surface: #111419;
    --surface-2: #171a20;
    --border: #252a32;
    --text: #f1f3f5;
    --muted: #9299a3;
    --accent: #4ade80;
    --accent-dark: #22c55e;
}


/* =========================
   BODY
========================= */

body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);

    line-height:
        1.7;
}


a {
    text-decoration: none;
    color: inherit;
}


.container {

    width:
        min(1100px, 90%);

    margin:
        auto;
}


/* =========================
   NAVBAR
========================= */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(11, 13, 16, 0.94);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(10px);
}


nav {

    height: 70px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;
}


.logo {

    font-size: 20px;

    font-weight: 700;

    letter-spacing:
        -0.5px;
}


.logo span {

    color:
        var(--accent);
}


.nav-links {

    display: flex;

    gap: 28px;

    list-style: none;
}


.nav-links a {

    color:
        var(--muted);

    font-size: 14px;

    transition:
        0.2s;
}


.nav-links a:hover {

    color:
        var(--text);
}


.menu-button {

    display: none;

    width: 38px;
    height: 38px;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor:
        pointer;

    font-size:
        18px;
}


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

.hero {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    padding-top:
        70px;
}


.hero-content {

    max-width:
        760px;
}


.status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--muted);

    font-size:
        13px;

    margin-bottom:
        22px;
}


.status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 10px
        rgba(74, 222, 128, 0.5);
}


.hero h1 {

    font-size:
        clamp(45px, 7vw, 72px);

    line-height:
        1.05;

    letter-spacing:
        -3px;

    margin-bottom:
        18px;
}


.hero h1 span {

    color:
        var(--accent);
}


.hero-role {

    font-size:
        20px;

    color:
        var(--muted);

    margin-bottom:
        20px;
}


#typing {

    color:
        var(--text);
}


.hero-description {

    max-width:
        650px;

    color:
        var(--muted);

    font-size:
        16px;

    margin-bottom:
        30px;
}


.hero-buttons {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;
}


/* =========================
   BUTTON
========================= */

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        11px 18px;

    border-radius:
        7px;

    border:
        1px solid var(--border);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        0.2s;
}


.button-green {

    background:
        var(--accent);

    color:
        #07110a;

    border-color:
        var(--accent);
}


.button-green:hover {

    background:
        var(--accent-dark);

    transform:
        translateY(-2px);
}


.button-dark:hover {

    border-color:
        #454c57;

    background:
        var(--surface);
}


/* =========================
   SECTION
========================= */

section {

    padding:
        100px 0;

    border-top:
        1px solid var(--border);
}


.section-heading {

    margin-bottom:
        45px;
}


.section-heading small {

    color:
        var(--accent);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.section-heading h2 {

    font-size:
        34px;

    margin-top:
        8px;

    letter-spacing:
        -1px;
}


.section-heading p {

    color:
        var(--muted);

    margin-top:
        8px;
}


/* =========================
   ABOUT
========================= */

.about-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr 1fr;

    gap:
        70px;
}


.about-text p {

    color:
        var(--muted);

    margin-bottom:
        18px;
}


.about-info {

    border-left:
        1px solid var(--border);

    padding-left:
        30px;
}


.info-row {

    padding:
        14px 0;

    border-bottom:
        1px solid var(--border);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;
}


.info-row span:first-child {

    color:
        var(--muted);
}


.info-row span:last-child {

    text-align:
        right;
}


/* =========================
   SKILLS
========================= */

.skill-list {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        14px;
}


.skill {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    padding:
        22px;

    border-radius:
        8px;

    transition:
        0.25s;
}


.skill:hover {

    transform:
        translateY(-3px);

    border-color:
        #3b424d;
}


.skill h3 {

    font-size:
        16px;

    margin-bottom:
        7px;
}


.skill p {

    color:
        var(--muted);

    font-size:
        14px;
}


.skill-icon {

    font-size:
        24px;

    margin-bottom:
        12px;

    color:
        var(--accent);
}


/* =========================
   PROJECT
========================= */

.project-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    max-width:
        800px;
}


.project {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        9px;

    overflow:
        hidden;

    transition:
        0.25s;
}


.project:hover {

    transform:
        translateY(-4px);

    border-color:
        #3b424d;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.2);
}


.project-preview {

    min-height:
        180px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        8px;

    background:
        linear-gradient(
            135deg,
            #111419,
            #191e25
        );

    border-bottom:
        1px solid var(--border);
}


.project-preview-icon {

    font-size:
        100px;
}


.project-preview span {

    color:
        var(--muted);

    font-size:
        13px;
}


.project-content {

    padding:
        25px;
}


.project-content h3 {

    font-size:
        20px;

    margin-bottom:
        8px;
}


.project-content p {

    color:
        var(--muted);

    font-size:
        14px;

    margin-bottom:
        18px;
}


.project-tags {

    display:
        flex;

    gap:
        7px;

    flex-wrap:
        wrap;

    margin-bottom:
        20px;
}


.tag {

    font-size:
        11px;

    padding:
        4px 9px;

    color:
        #b7c0cc;

    border:
        1px solid var(--border);

    border-radius:
        5px;
}


.project-link {

    display:
        inline-block;

    color:
        var(--accent);

    font-size:
        14px;

    font-weight:
        600;
}


.project-link:hover {

    text-decoration:
        underline;
}


/* =========================
   NETWORKING
========================= */

.network-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        15px;
}


.network-card {

    padding:
        25px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        8px;

    transition:
        0.25s;
}


.network-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #3b424d;
}


.network-card h3 {

    margin:
        12px 0 7px;

    font-size:
        17px;
}


.network-card p {

    color:
        var(--muted);

    font-size:
        14px;
}


.network-icon {

    font-size:
        25px;
}


/* =========================
   CTA
========================= */

.cta {

    padding:
        55px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.cta h2 {

    font-size:
        30px;

    margin-bottom:
        8px;
}


.cta p {

    color:
        var(--muted);

    max-width:
        600px;
}


/* =========================
   CONTACT
========================= */

.contact {

    text-align:
        center;

    max-width:
        650px;

    margin:
        auto;
}


.social-links {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


.social {

    padding:
        10px 16px;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    background:
        var(--surface);

    font-size:
        14px;

    transition:
        0.2s;
}


.social:hover {

    border-color:
        var(--accent);

    color:
        var(--accent);

    transform:
        translateY(-2px);
}


/* =========================
   FOOTER
========================= */

footer {

    border-top:
        1px solid var(--border);

    padding:
        25px 0;

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        13px;
}


/* =========================
   REVEAL
========================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        0.7s;
}


.reveal.show {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            70px;

        left:
            5%;

        width:
            90%;

        flex-direction:
            column;

        gap:
            0;

        background:
            var(--surface);

        border:
            1px solid var(--border);

        border-radius:
            8px;

        padding:
            8px;
    }


    .nav-links.show {

        display:
            flex;
    }


    .nav-links li a {

        display:
            block;

        padding:
            12px;
    }


    .menu-button {

        display:
            block;
    }


    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .about-info {

        border-left:
            none;

        border-top:
            1px solid var(--border);

        padding-left:
            0;

        padding-top:
            15px;
    }


    .skill-list {

        grid-template-columns:
            1fr;
    }


    .network-grid {

        grid-template-columns:
            1fr;
    }


    .cta {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 25px;
    }


    .hero h1 {

        letter-spacing:
            -2px;
    }

}


@media (max-width: 500px) {

    section {

        padding:
            75px 0;
    }


    .hero h1 {

        font-size:
            45px;
    }


    .hero-role {

        font-size:
            17px;
    }


    .section-heading h2 {

        font-size:
            29px;
    }


    .hero-buttons {

        flex-direction:
            column;
    }


    .hero-buttons .button {

        width:
            100%;
    }


    .social-links {

        flex-direction:
            column;
    }


    .social {

        width:
            100%;
    }


    .project-content {

        padding:
            20px;
    }


    .info-row {

        font-size:
            13px;
    }

}