@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700;800&display=swap');


:root{

    --bg:#05050b;
    --bg2:#090817;

    --panel:rgba(10,10,23,.72);
    --panel2:rgba(16,14,32,.82);

    --text:#f6f4ff;
    --muted:#9b98ae;

    --line:rgba(164,92,255,.20);

    --purple:#a846ff;
    --purple2:#6e35ff;

    --cyan:#35b7ff;
    --green:#36e5a0;
    --gold:#ffbf3f;

    --shadow:
        0 0 35px rgba(145,58,255,.14);
}


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


html{
    scroll-behavior:smooth;
}


body{

    background:var(--bg);
    color:var(--text);

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

    overflow-x:hidden;
}


body::selection{
    background:var(--purple);
    color:#fff;
}


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


button{
    font:inherit;
}


/* =========================================
   BACKGROUND
========================================= */

#particles{

    position:fixed;
    inset:0;

    z-index:-4;

    background:

        radial-gradient(
            circle at 50% 10%,
            rgba(119,44,255,.16),
            transparent 34%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(48,112,255,.08),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #05040b,
            #080612 55%,
            #05050b
        );
}


#particles::before{

    content:"";

    position:absolute;
    inset:0;

    opacity:.35;

    background-image:

        linear-gradient(
            rgba(170,80,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(170,80,255,.05) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


.star{

    position:absolute;

    width:2px;
    height:2px;

    background:#fff;

    border-radius:50%;

    opacity:.5;

    animation:
        twinkle 3s infinite ease-in-out;
}


@keyframes twinkle{

    50%{

        opacity:.08;

        transform:scale(.5);

    }

}


/* =========================================
   MOUSE GLOW
========================================= */

#mouseGlow{

    position:fixed;

    z-index:-1;

    width:420px;
    height:420px;

    border-radius:50%;

    pointer-events:none;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(150,54,255,.12),
            transparent 65%
        );
}


/* =========================================
   NOISE
========================================= */

.noise{

    position:fixed;

    inset:0;

    z-index:20;

    pointer-events:none;

    opacity:.035;

    background-image:url(
        "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"
    );
}


/* =========================================
   SIDEBAR
========================================= */

.sidebar{

    position:fixed;

    left:0;
    top:0;
    bottom:0;

    width:136px;

    z-index:10;

    background:
        rgba(4,5,12,.88);

    border-right:
        1px solid rgba(168,70,255,.16);

    backdrop-filter:blur(18px);

    display:flex;
    flex-direction:column;
}


.brand{

    height:88px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-bottom:
        1px solid rgba(168,70,255,.13);

    padding:15px;
}


.brandText{

    font-family:Orbitron;

    font-size:17px;

    font-weight:800;

    letter-spacing:2px;

    color:#fff;

    text-shadow:
        0 0 20px
        rgba(168,70,255,.8);
}


.nav{

    padding:18px 10px;

    display:flex;
    flex-direction:column;

    gap:6px;
}


.nav a{

    position:relative;

    padding:15px 8px;

    border-radius:10px;

    color:#aaa7ba;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:7px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.3s;
}


.nav a span{

    font-size:20px;
}


.nav a:hover,
.nav a.active{

    color:#fff;

    background:
        linear-gradient(
            90deg,
            rgba(144,50,255,.18),
            transparent
        );
}


.nav a.active::before{

    content:"";

    position:absolute;

    left:-10px;

    top:8px;
    bottom:8px;

    width:3px;

    background:var(--purple);

    box-shadow:
        0 0 15px
        var(--purple);

    border-radius:
        0 3px 3px 0;
}


.sideFooter{

    margin-top:auto;

    padding:18px;

    text-align:center;

    color:#676476;

    font-size:9px;

    line-height:1.6;
}


/* =========================================
   MAIN
========================================= */

main{
    margin-left:136px;
}


section{

    min-height:100vh;

    padding:
        90px 7vw;

    position:relative;
}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;
}


.heroOrb{

    position:absolute;

    width:620px;
    height:620px;

    border-radius:50%;

    z-index:-1;

    background:

        repeating-radial-gradient(
            circle,
            transparent 0 34px,
            rgba(157,68,255,.08) 35px 36px
        );

    animation:
        spin 30s linear infinite;
}


@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}


.heroFloor{

    position:absolute;

    left:5%;
    right:5%;

    bottom:-170px;

    height:360px;

    transform:
        perspective(400px)
        rotateX(58deg);

    background-image:

        linear-gradient(
            rgba(168,70,255,.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(168,70,255,.18) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    mask-image:
        linear-gradient(
            to top,
            black,
            transparent
        );

    opacity:.65;
}


.heroContent{

    max-width:950px;

    position:relative;

    z-index:2;
}


.heroBadge{

    display:inline-block;

    padding:
        9px 16px;

    margin-bottom:25px;

    border:
        1px solid
        rgba(168,70,255,.35);

    border-radius:30px;

    color:#b96bff;

    font-family:Orbitron;

    font-size:9px;

    letter-spacing:3px;

    background:
        rgba(168,70,255,.06);

    box-shadow:
        0 0 25px
        rgba(168,70,255,.08);
}


.hero h1{

    font-family:Orbitron;

    font-size:
        clamp(
            42px,
            7vw,
            90px
        );

    line-height:1;

    letter-spacing:4px;

    margin-bottom:25px;
}


.hero h1 span{

    display:block;

    color:var(--purple);

    text-shadow:
        0 0 35px
        rgba(168,70,255,.5);
}


.heroPhrase{

    max-width:700px;

    margin:auto;

    color:#aaa7b8;

    font-size:16px;

    line-height:1.8;
}


.heroButton{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-top:35px;

    padding:
        14px 22px;

    border:
        1px solid
        rgba(168,70,255,.45);

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(168,70,255,.18),
            rgba(168,70,255,.04)
        );

    color:#fff;

    font-family:Orbitron;

    font-size:10px;

    letter-spacing:2px;

    transition:.3s;
}


.heroButton span{

    color:var(--purple);

    font-size:17px;
}


.heroButton:hover{

    transform:translateY(-4px);

    background:
        var(--purple);

    box-shadow:
        0 0 30px
        rgba(168,70,255,.35);
}


.heroButton:hover span{
    color:#fff;
}


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

.sectionTitle{

    text-align:center;

    margin-bottom:55px;
}


.kicker{

    font-family:Orbitron;

    color:var(--purple);

    font-size:11px;

    letter-spacing:4px;

    margin-bottom:12px;
}


.sectionTitle h2{

    font-family:Orbitron;

    font-size:
        clamp(
            27px,
            4vw,
            46px
        );

    letter-spacing:2px;
}


.sectionTitle p{

    max-width:650px;

    margin:
        14px auto 0;

    color:var(--muted);

    line-height:1.7;
}


/* =========================================
   STATS
========================================= */

.stats{

    max-width:850px;

    margin:
        50px auto 0;

    display:grid;

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

    padding-top:30px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


.stat{

    text-align:center;

    border-right:
        1px solid
        rgba(255,255,255,.07);
}


.stat:last-child{
    border:0;
}


.stat strong{

    font-family:Orbitron;

    font-size:28px;

    color:#fff;
}


.stat small{

    display:block;

    margin-top:8px;

    color:#777487;

    font-size:9px;

    letter-spacing:2px;
}


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

.projects{

    display:grid;

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

    gap:22px;

    max-width:1200px;

    margin:auto;
}


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

.project{

    position:relative;

    overflow:hidden;

    display:grid;

    grid-template-columns:
        190px 1fr;

    gap:25px;

    min-height:300px;

    padding:25px;

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

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(18,15,35,.82),
            rgba(7,7,16,.78)
        );

    box-shadow:
        var(--shadow);

    backdrop-filter:blur(16px);

    transition:.35s;
}


.project::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:
        radial-gradient(
            circle at var(--mx,50%) var(--my,50%),
            rgba(168,70,255,.18),
            transparent 35%
        );

    opacity:0;

    transition:.3s;
}


.project:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(168,70,255,.65);

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


.project:hover::before{
    opacity:1;
}


.project > *{
    position:relative;
    z-index:1;
}


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

.projectLogo{

    min-height:230px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:15px;

    background:
        radial-gradient(
            circle,
            rgba(168,70,255,.12),
            rgba(5,5,12,.5)
        );

    border:
        1px solid
        rgba(168,70,255,.12);
}


.projectLogo img{

    width:100%;

    max-height:190px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 12px
            rgba(255,255,255,.18)
        )

        drop-shadow(
            0 0 30px
            rgba(157,68,255,.35)
        );

    transition:.4s;
}


.project:hover
.projectLogo img{

    transform:
        scale(1.06);
}


.logoPlaceholder{

    font-family:Orbitron;

    text-align:center;

    font-size:16px;

    line-height:1.5;

    letter-spacing:2px;

    color:#aaa5b8;

    opacity:.6;
}


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

.projectNumber{

    color:
        rgba(168,70,255,.55);

    font-family:Orbitron;

    font-size:10px;

    letter-spacing:2px;

    margin-bottom:8px;
}


.project h3{

    font-family:Orbitron;

    font-size:18px;

    letter-spacing:1px;
}


.projectLine{

    width:45px;

    height:2px;

    margin:
        12px 0 16px;

    background:
        var(--purple);

    box-shadow:
        0 0 12px
        var(--purple);
}


.project p{

    color:#8f8b9e;

    font-size:12px;

    line-height:1.7;
}


/* =========================================
   TAGS
========================================= */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:18px;
}


.tags span{

    padding:
        6px 9px;

    border:
        1px solid
        rgba(168,70,255,.22);

    border-radius:5px;

    color:#9c95ad;

    font-size:8px;

    letter-spacing:1px;

    background:
        rgba(168,70,255,.04);
}


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

.projectButton{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(168,70,255,.35);

    border-radius:7px;

    color:#b96bff;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    transition:.25s;
}


.projectButton span{
    font-size:15px;
}


.projectButton:hover{

    background:
        var(--purple);

    color:#fff;

    box-shadow:
        0 0 20px
        rgba(168,70,255,.25);
}


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

.technologies{

    min-height:80vh;

    background:
        radial-gradient(
            circle at center,
            rgba(105,38,190,.08),
            transparent 50%
        );
}


.techGrid{

    max-width:900px;

    margin:auto;

    display:grid;

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

    gap:15px;
}


.tech{

    padding:30px 15px;

    text-align:center;

    border:
        1px solid
        rgba(168,70,255,.18);

    border-radius:12px;

    background:
        rgba(10,8,20,.6);

    transition:.3s;
}


.tech:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(168,70,255,.6);

    box-shadow:
        0 0 25px
        rgba(168,70,255,.12);
}


.tech strong{

    display:block;

    font-family:Orbitron;

    font-size:14px;

    color:#fff;
}


.tech span{

    display:block;

    margin-top:8px;

    color:#777487;

    font-size:9px;

    letter-spacing:1px;
}


/* =========================================
   QUOTE
========================================= */

.quote{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
        radial-gradient(
            circle at center,
            rgba(105,38,190,.12),
            transparent 50%
        );
}


.quote h2{

    font-family:Orbitron;

    font-size:
        clamp(
            28px,
            5vw,
            62px
        );

    letter-spacing:6px;
}


.quote h2 span{

    color:var(--purple);

    text-shadow:
        0 0 25px
        rgba(168,70,255,.6);
}


.quote p{

    margin:
        22px auto 0;

    color:#aaa5b7;

    max-width:700px;

    font-size:15px;

    line-height:1.8;
}


.backButton{

    display:inline-block;

    margin-top:30px;

    padding:
        12px 18px;

    border:
        1px solid
        rgba(168,70,255,.3);

    border-radius:7px;

    color:#a99fb8;

    font-size:9px;

    letter-spacing:1px;

    transition:.3s;
}


.backButton:hover{

    background:
        var(--purple);

    color:#fff;

    transform:
        translateY(-3px);
}


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

footer{

    text-align:center;

    padding:35px 20px;

    color:#555265;

    font-size:10px;

    border-top:
        1px solid
        rgba(168,70,255,.1);
}


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

.reveal{

    opacity:0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.visible{

    opacity:1;

    transform:none;
}


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

@media(max-width:1000px){

    .projects{

        grid-template-columns:1fr;

        max-width:750px;
    }


    .techGrid{

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

}


/* =========================================
   900 PX
========================================= */

@media(max-width:900px){

    .sidebar{

        width:72px;
    }


    .nav a small{

        display:none;
    }


    .brandText{

        font-size:12px;
    }


    .sideFooter{

        display:none;
    }


    main{

        margin-left:72px;
    }


    section{

        padding:
            75px 5vw;
    }

}


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

@media(max-width:600px){

    .sidebar{

        display:none;
    }


    main{

        margin-left:0;
    }


    section{

        padding:
            75px 18px;
    }


    .hero h1{

        font-size:40px;

        letter-spacing:2px;
    }


    .heroPhrase{

        font-size:14px;
    }


    .heroOrb{

        width:450px;
        height:450px;
    }


    .stats{

        grid-template-columns:1fr;

        gap:25px;
    }


    .stat{

        border-right:0;

        border-bottom:
            1px solid
            rgba(255,255,255,.07);

        padding-bottom:20px;
    }


    .stat:last-child{

        border:0;
    }


    .project{

        grid-template-columns:1fr;

        padding:20px;
    }


    .projectLogo{

        min-height:190px;
    }


    .projectLogo img{

        max-height:150px;
    }


    .techGrid{

        grid-template-columns:1fr 1fr;

        gap:10px;
    }


    .tech{

        padding:22px 10px;
    }


    .quote h2{

        letter-spacing:3px;
    }

}