/* ===========================================
   GOOGLE FONTS
=========================================== */

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

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

:root{

    --background:#050816;
    --background-light:#0B1120;
    --surface:#111827;
    --surface-light:#1F2937;

    --primary:#3B82F6;
    --primary-hover:#2563EB;

    --secondary:#60A5FA;

    --text:#FFFFFF;
    --text-light:#CBD5E1;
    --text-gray:#94A3B8;

    --border:rgba(255,255,255,.08);

    --shadow:0 20px 40px rgba(0,0,0,.35);

    --radius:18px;

    --transition:.35s ease;

    --container:1200px;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

}

/* ===========================================
   SCROLLBAR
=========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08101f;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:#5a9cff;

}

/* ===========================================
   SELECTION
=========================================== */

::selection{

    background:var(--primary);

    color:white;

}

/* ===========================================
   LINKS
=========================================== */

a{

    color:inherit;

    text-decoration:none;

}

/* ===========================================
   LIST
=========================================== */

ul{

    list-style:none;

}

/* ===========================================
   IMAGES
=========================================== */

img{

    max-width:100%;

    display:block;

}

/* ===========================================
   CONTAINER
=========================================== */

.container{

    width:90%;

    max-width:var(--container);

    margin:auto;

}

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

.background-blur{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:
    radial-gradient(circle at top left,
    rgba(59,130,246,.15),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(96,165,250,.15),
    transparent 30%);

}

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

header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

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

    transition:.4s;

}

header.scrolled{

    background:rgba(5,8,22,.95);

}

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

nav{

    width:90%;

    max-width:1200px;

    margin:auto;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:2rem;

    font-weight:900;

    letter-spacing:2px;

    color:var(--primary);

}

nav ul{

    display:flex;

    gap:45px;

}

nav li{

    position:relative;

}

nav a{

    color:var(--text-light);

    transition:.3s;

}

nav a:hover{

    color:white;

}

nav li::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

nav li:hover::after{

    width:100%;

}

/* ===========================================
   BUTTONS
=========================================== */

.btn-nav,

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:14px;

    background:linear-gradient(135deg,#2563EB,#3B82F6);

    color:white;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

.btn-nav:hover,

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 25px 45px rgba(37,99,235,.35);

}

.btn-secondary{

    display:inline-flex;

    padding:15px 28px;

    border-radius:14px;

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

    transition:.35s;

}

.btn-secondary:hover{

    background:white;

    color:#111;

}

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

.hero{

    width:90%;

    max-width:1200px;

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.small-title{

    color:var(--secondary);

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:18px;

}

.hero h1{

    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:30px;

}

.hero p{

    color:var(--text-gray);

    line-height:1.9;

    font-size:1.1rem;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

/* ===========================================
   CODE CARD
=========================================== */

.code-card{

    width:100%;

    max-width:430px;

    margin-left:auto;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:45px;

    box-shadow:var(--shadow);

}

.code-card span{

    display:block;

    margin-bottom:18px;

    font-size:1.1rem;

    color:var(--text-light);

}

.code-card span:last-child{

    margin-bottom:0;

}

/* ===========================================
   SECTIONS
=========================================== */

section{

    width:90%;

    max-width:1200px;

    margin:150px auto;

}

section h2{

    font-size:2.8rem;

    margin-bottom:28px;

}

section p{

    color:var(--text-gray);

    line-height:1.9;

    max-width:850px;

}

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

.skills{

    margin-top:55px;

    display:grid;

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

    gap:20px;

}

.skill{

    padding:22px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    text-align:center;

    transition:.35s;

    cursor:pointer;

}

.skill:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    background:rgba(59,130,246,.08);

}

/* ===========================================
   PROJECTS
=========================================== */

.projects{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

    margin-top:60px;

}

.project-card{

    position:relative;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:35px;

    overflow:hidden;

    transition:var(--transition);

    backdrop-filter:blur(18px);

}

.project-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.4);

    box-shadow:0 30px 60px rgba(0,0,0,.35);

}

.project-card h3{

    font-size:1.5rem;

    margin-bottom:18px;

}

.project-card p{

    color:var(--text-gray);

    line-height:1.8;

    margin-bottom:25px;

}

.stack{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;

}

.stack span{

    padding:8px 16px;

    border-radius:100px;

    background:rgba(59,130,246,.08);

    border:1px solid rgba(59,130,246,.15);

    color:var(--secondary);

    font-size:.9rem;

}

.project-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--secondary);

    font-weight:600;

    transition:.3s;

}

.project-card a:hover{

    transform:translateX(8px);

}

/* ===========================================
   SERVICES
=========================================== */

.services{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

    margin-top:55px;

}

.services div{

    padding:30px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

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

    transition:.35s;

    font-weight:600;

}

.services div:hover{

    background:rgba(59,130,246,.08);

    border-color:rgba(59,130,246,.35);

    transform:translateY(-8px);

}

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

#contato{

    text-align:center;

}

#contato p{

    margin:auto;

    margin-bottom:40px;

}

#contato .btn-primary{

    min-width:230px;

}

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

footer{

    margin-top:120px;

    padding:40px 0;

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

}

footer p{

    text-align:center;

    color:var(--text-gray);

}

/* ===========================================
   GLASS
=========================================== */

.glass{

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

}

/* ===========================================
   TITLES
=========================================== */

h1,h2,h3{

    letter-spacing:-1px;

}

h2{

    position:relative;

    display:inline-block;

    margin-bottom:40px;

}

h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:60px;

    height:4px;

    border-radius:100px;

    background:linear-gradient(to right,var(--primary),transparent);

}

/* ===========================================
   UTILITIES
=========================================== */

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:60px;

}

.mb-1{

    margin-bottom:20px;

}

.mb-2{

    margin-bottom:40px;

}

.mb-3{

    margin-bottom:60px;

}

/* ===========================================
   INPUTS
=========================================== */

input,
textarea{

    width:100%;

    padding:18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    color:white;

    outline:none;

    transition:.3s;

}

textarea{

    resize:vertical;

    min-height:160px;

}

input:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(59,130,246,.15);

}

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

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.3),
        transparent
    );

    transition:.7s;

}

.btn-primary:hover::before{

    left:120%;

}

/* ===========================================
   CARD GLOW
=========================================== */

.project-card::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:rgba(59,130,246,.08);

    top:-120px;

    right:-120px;

    filter:blur(70px);

    opacity:0;

    transition:.5s;

}

.project-card:hover::after{

    opacity:1;

}

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

.hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(59,130,246,.08);

    border-radius:50%;

    filter:blur(120px);

    right:-120px;

    top:120px;

    z-index:-1;

}

/* ===========================================
   SELECTION ANIMATION
=========================================== */

.skill,
.project-card,
.services div,
.btn-primary,
.btn-secondary{

    will-change:transform;

}

/* ===========================================
   HOVER TRANSITIONS
=========================================== */

button,
a,
.skill,
.project-card,
.services div{

    transition:all .35s ease;

}

/* ===========================================
   HORIZONTAL LINE
=========================================== */

.divider{

    width:100%;

    height:1px;

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

    margin:80px 0;

}

/* ===========================================
   BADGES
=========================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:100px;

    background:rgba(96,165,250,.08);

    color:var(--secondary);

    font-size:.9rem;

}

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

.tag{

    padding:6px 14px;

    border-radius:100px;

    border:1px solid rgba(255,255,255,.08);

}

/* ===========================================
   FINAL SPACING
=========================================== */

main{

    overflow:hidden;

}

body{

    min-height:100vh;

}

/* ===========================================
   JS COMPONENTS
=========================================== */


/* ===========================================
   PRELOADER
=========================================== */


.preloader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--background);

    z-index:99999;

}


.loader{

    width:70px;

    height:70px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.1);

    border-top-color:var(--primary);

    animation:spin .8s linear infinite;

}


@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/* ===========================================
   CUSTOM CURSOR
=========================================== */


.custom-cursor{

    position:fixed;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    pointer-events:none;

    z-index:999999;

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

    mix-blend-mode:screen;

    transition:

    width .25s,

    height .25s,

    opacity .25s;

}


.custom-cursor.active{

    width:45px;

    height:45px;

    opacity:.5;

}



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


.mouse-glow{

    position:fixed;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(59,130,246,.15),

    transparent 70%

    );


    pointer-events:none;

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

    z-index:-1;

}



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


.mobile-menu{

    display:none;

    flex-direction:column;

    gap:6px;

    background:none;

    border:none;

    cursor:pointer;

}


.mobile-menu span{

    width:28px;

    height:3px;

    background:white;

    border-radius:20px;

    transition:.3s;

}



.mobile-menu.active span:nth-child(1){

    transform:

    translateY(9px)

    rotate(45deg);

}



.mobile-menu.active span:nth-child(2){

    opacity:0;

}



.mobile-menu.active span:nth-child(3){

    transform:

    translateY(-9px)

    rotate(-45deg);

}



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


.stats{

    display:flex;

    gap:30px;

    margin-top:50px;

    flex-wrap:wrap;

}


.stat{

    min-width:170px;

    padding:30px;

    border-radius:20px;

    background:

    rgba(255,255,255,.03);


    border:

    1px solid rgba(255,255,255,.08);


    text-align:center;

}



.stat strong{

    display:block;

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:10px;

}



.stat span{

    color:var(--text-gray);

}



/* ===========================================
   TYPING EFFECT
=========================================== */


.typing{

    color:var(--primary);

    border-right:

    3px solid var(--primary);


    padding-right:5px;

    animation:

    cursorBlink .8s infinite;

}



@keyframes cursorBlink{


    50%{

        border-color:transparent;

    }


}



/* ===========================================
   BACK TO TOP
=========================================== */


.back-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;


    border-radius:50%;


    border:none;


    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

    );


    color:white;


    font-size:1.5rem;


    cursor:pointer;


    opacity:0;


    pointer-events:none;


    transform:translateY(30px);


    z-index:999;


}


.back-top.active{


    opacity:1;


    pointer-events:auto;


    transform:translateY(0);


}



/* ===========================================
   PARTICLES
=========================================== */


.particles{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:-1;

}



/* ===========================================
   SCROLL STATES
=========================================== */


.hidden{

    opacity:0;

    transform:translateY(60px);

}



.show{

    opacity:1;

    transform:translateY(0);

}



.hidden-left{

    opacity:0;

    transform:translateX(-60px);

}



.show-left{

    opacity:1;

    transform:translateX(0);

}



.hidden-right{

    opacity:0;

    transform:translateX(60px);

}



.show-right{

    opacity:1;

    transform:translateX(0);

}



/* ===========================================
   LOW PERFORMANCE MODE
=========================================== */


.low-performance .particles,
.low-performance .mouse-glow{

    display:none;

}



/* ===========================================
   RESPONSIVE ADDITIONS
=========================================== */


@media(max-width:900px){


    .mobile-menu{

        display:flex;

    }


    nav ul{

        position:absolute;

        top:82px;

        left:0;

        width:100%;


        flex-direction:column;

        align-items:center;


        padding:30px;


        background:

        rgba(5,8,22,.96);


        transform:

        translateY(-150%);


        transition:.4s;


    }



    nav ul.open{


        transform:

        translateY(0);


    }



    .btn-nav{

        display:none;

    }


}



@media(max-width:600px){


    .stats{

        flex-direction:column;

    }


    .stat{

        width:100%;

    }


    .custom-cursor,
    .mouse-glow{

        display:none;

    }


}