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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: #020617;

    color: #f8fafc;

    line-height: 1.6;
}


/* =========================================
   GENERAL
========================================= */

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


.container {
    width: min(1120px, 92%);

    margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.site-header {
    position: relative;

    z-index: 20;

    border-bottom: 1px solid #1e293b;

    background: rgba(2, 6, 23, 0.85);

    backdrop-filter: blur(10px);
}


.header-content {
    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.logo {
    font-size: 1.1rem;

    font-weight: 700;

    letter-spacing: -0.02em;

    transition: opacity 0.2s ease;
}


.logo:hover {
    opacity: 0.7;
}


.navigation {
    display: flex;

    align-items: center;

    gap: 24px;

    font-size: 0.9rem;

    color: #94a3b8;
}


.navigation a {
    transition: color 0.2s ease;
}


.navigation a:hover {
    color: #ffffff;
}


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

.hero {
    position: relative;

    overflow: hidden;

    min-height: 500px;

    display: flex;

    align-items: center;

    isolation: isolate;
}


.hero-content {
    position: relative;

    z-index: 5;

    padding: 100px 0 90px;
}


.eyebrow {
    margin-bottom: 18px;

    color: #64748b;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.25em;
}


.hero h1 {
    max-width: 800px;

    font-size: clamp(
        2.8rem,
        7vw,
        5rem
    );

    line-height: 1.05;

    letter-spacing: -0.05em;
}


.hero-description {
    max-width: 700px;

    margin-top: 28px;

    color: #94a3b8;

    font-size: 1.1rem;

    line-height: 1.8;
}


/* =========================================
   SUBTLE DEVOPS 3D BACKGROUND
========================================= */

.hero-background {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    perspective: 900px;

    opacity: 0.55;
}


/* -----------------------------------------
   Perspective Grid
----------------------------------------- */

.grid-plane {
    position: absolute;

    width: 1000px;

    height: 550px;

    left: 50%;

    top: 55%;

    transform:
        translate(-50%, -50%)
        rotateX(62deg)
        rotateZ(-8deg);

    background-image:
        linear-gradient(
            rgba(100, 116, 139, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(100, 116, 139, 0.08) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );
}


/* -----------------------------------------
   DevOps Nodes
----------------------------------------- */

.devops-node {
    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #64748b;

    box-shadow:
        0 0 12px
        rgba(
            148,
            163,
            184,
            0.35
        );

    opacity: 0.55;
}


.node-1 {
    left: 18%;

    top: 28%;
}


.node-2 {
    left: 39%;

    top: 17%;
}


.node-3 {
    right: 28%;

    top: 25%;
}


.node-4 {
    right: 15%;

    top: 48%;
}


.node-5 {
    left: 27%;

    bottom: 18%;
}


/* -----------------------------------------
   Connections
----------------------------------------- */

.connection {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                100,
                116,
                139,
                0.22
            ),
            transparent
        );

    transform-origin: left center;
}


.connection-1 {
    width: 240px;

    left: 19%;

    top: 29%;

    transform: rotate(-17deg);
}


.connection-2 {
    width: 230px;

    left: 39%;

    top: 18%;

    transform: rotate(17deg);
}


.connection-3 {
    width: 210px;

    right: 15%;

    top: 48%;

    transform: rotate(-27deg);
}


.connection-4 {
    width: 180px;

    left: 27%;

    bottom: 19%;

    transform: rotate(28deg);
}


/* -----------------------------------------
   3D Cubes
----------------------------------------- */

.cube {
    position: absolute;

    width: 28px;

    height: 28px;

    border:
        1px solid
        rgba(
            100,
            116,
            139,
            0.16
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                100,
                116,
                139,
                0.06
            ),
            transparent
        );

    transform:
        rotateX(45deg)
        rotateZ(45deg);

    box-shadow:
        10px 10px 0
        rgba(
            100,
            116,
            139,
            0.025
        );
}


.cube-1 {
    right: 20%;

    top: 20%;

    animation:
        floatCube
        8s
        ease-in-out
        infinite;
}


.cube-2 {
    left: 14%;

    bottom: 24%;

    width: 20px;

    height: 20px;

    animation:
        floatCube
        10s
        ease-in-out
        infinite
        reverse;
}


@keyframes floatCube {

    0%,
    100% {
        transform:
            translateY(0)
            rotateX(45deg)
            rotateZ(45deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotateX(45deg)
            rotateZ(45deg);
    }
}


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

.projects-section {
    padding: 75px 0;
}


.section-heading {
    max-width: 800px;

    margin-bottom: 28px;
}


.section-label {
    display: block;

    margin-bottom: 10px;

    color: #475569;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.15em;
}


.section-heading h2 {
    font-size: 2rem;

    line-height: 1.2;

    letter-spacing: -0.03em;
}


.section-subtitle {
    margin-top: 7px;

    color: #64748b;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}


.section-heading p {
    margin-top: 14px;

    color: #64748b;

    line-height: 1.75;
}


/* =========================================
   PROJECT OVERVIEW BUTTON
========================================= */

.project-overview {
    margin-bottom: 30px;
}


.overview-button {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    border:
        1px solid
        #334155;

    border-radius: 7px;

    background:
        rgba(
            15,
            23,
            42,
            0.65
        );

    color: #cbd5e1;

    font-size: 0.82rem;

    font-weight: 600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.overview-button:hover {
    background: #1e293b;

    border-color: #475569;

    color: #ffffff;
}


.overview-button span {
    font-size: 0.9rem;
}


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

.projects-grid {
    display: grid;

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

    gap: 22px;
}


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

.project-card {
    min-height: 370px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 27px;

    border:
        1px solid
        #1e293b;

    border-radius: 16px;

    background:
        rgba(
            15,
            23,
            42,
            0.72
        );

    backdrop-filter: blur(8px);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.project-card:hover {
    transform:
        translateY(-5px);

    border-color: #475569;

    background:
        rgba(
            17,
            28,
            49,
            0.9
        );
}


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

.project-number {
    margin-bottom: 14px;

    color: #475569;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.project-content h3 {
    margin-bottom: 18px;

    font-size: 1.25rem;

    line-height: 1.35;

    letter-spacing: -0.02em;
}


/* =========================================
   TECHNOLOGIES
========================================= */

.technologies {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;
}


.technologies span {
    padding:
        5px 9px;

    border-radius: 5px;

    background: #1e293b;

    color: #cbd5e1;

    font-size: 0.72rem;

    font-weight: 600;
}


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

.project-content p {
    color: #94a3b8;

    font-size: 0.9rem;

    line-height: 1.75;
}


/* =========================================
   GITHUB LINK
========================================= */

.github-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 28px;

    color: #f8fafc;

    font-size: 0.9rem;

    font-weight: 600;

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}


.github-link:hover {
    gap: 12px;

    color: #cbd5e1;
}


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

.site-footer {
    margin-top: 40px;

    border-top:
        1px solid
        #1e293b;
}


.footer-content {
    min-height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #64748b;

    font-size: 0.85rem;
}


.footer-content a {
    transition:
        color 0.2s ease;
}


.footer-content a:hover {
    color: #ffffff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .projects-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 640px) {

    .container {
        width: min(
            92%,
            520px
        );
    }


    /* Header */

    .header-content {
        min-height: 64px;
    }


    .navigation {
        gap: 14px;

        font-size: 0.8rem;
    }


    /* Hero */

    .hero {
        min-height: 460px;
    }


    .hero-content {
        padding:
            75px 0
            65px;
    }


    .hero-background {
        opacity: 0.35;
    }


    .grid-plane {
        width: 700px;

        height: 420px;
    }


    .hero h1 {
        font-size: 2.8rem;
    }


    .hero-description {
        margin-top: 22px;

        font-size: 1rem;
    }


    /* Section */

    .projects-section {
        padding:
            55px 0;
    }


    .section-heading {
        margin-bottom: 25px;
    }


    .section-heading h2 {
        font-size: 1.7rem;
    }


    /* Project cards */

    .projects-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .project-card {
        min-height: auto;

        padding: 23px;
    }


    /* Footer */

    .footer-content {
        min-height: auto;

        padding:
            28px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

}


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

@media (max-width: 400px) {

    .navigation {
        gap: 10px;
    }


    .navigation a {
        font-size: 0.75rem;
    }


    .hero h1 {
        font-size: 2.4rem;
    }


    .project-card {
        padding: 20px;
    }

}