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

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

html{
    scroll-behavior:smooth;
}

:root{

    --primary:#6C4CF7;
    --primary-light:#EEE8FF;

    --text:#1D1D1F;
    --text-secondary:#6B7280;

    --border:#ECECEC;

    --background:#FAFAFA;

    --white:#FFFFFF;

}

body{

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

    background:var(--background);

    color:var(--text);

    -webkit-font-smoothing:antialiased;

}

a{

    color:var(--primary);

    text-decoration:none;

}

.container{

    max-width:1280px;

    margin:auto;

    padding:0 40px;

}

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

.header{

    padding:80px 0 60px;

}

.hero{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;

}

.hero-info{

    flex:1;

}

.hero-info h1{

    font-size:56px;

    line-height:1;

    font-weight:900;

    margin-bottom:16px;

}

.role{

    display:inline-block;

    background:var(--primary-light);

    color:var(--primary);

    padding:10px 18px;

    border-radius:999px;

    font-weight:700;

    margin-bottom:28px;

}

.description{

    max-width:700px;

    font-size:18px;

    line-height:34px;

    color:var(--text-secondary);

}

/* ==========================================
   FOTO
========================================== */

.hero-side{

    width:280px;

}

.profile-photo{

    width:100%;

    border-radius:24px;

    display:block;

    border:4px solid white;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.contact{

    margin-top:22px;

}

.contact p{

    margin-bottom:10px;

    color:var(--text-secondary);

    font-size:15px;

}

/* ==========================================
   CARDS SUPERIORES
========================================== */

.stats{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.stat{

    background:white;

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

    border-radius:22px;

    padding:28px;

    transition:.25s;

}

.stat:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.stat h2{

    color:var(--primary);

    font-size:34px;

    margin-bottom:8px;

}

.stat p{

    color:var(--text-secondary);

}
/* ==========================================
   LAYOUT PRINCIPAL
========================================== */

.content{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:32px;

    align-items:start;

    margin-bottom:60px;

}

/* ==========================================
   CARDS
========================================== */

.card{

    background:var(--white);

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

    border-radius:22px;

    padding:30px;

    margin-bottom:24px;

    transition:.25s;

}

.card:hover{

    box-shadow:0 14px 40px rgba(0,0,0,.06);

}

.card h3{

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#777;

    margin-bottom:24px;

}

/* ==========================================
   CHIPS
========================================== */

.chips{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.chips span{

    background:#F5F5F5;

    border-radius:999px;

    padding:10px 16px;

    font-size:14px;

    transition:.2s;

}

.chips span:hover{

    background:var(--primary-light);

    color:var(--primary);

}

/* ==========================================
   FORMAÇÃO
========================================== */

.education h4{

    font-size:17px;

    margin-bottom:6px;

}

.education p{

    color:var(--text-secondary);

    line-height:26px;

    margin-bottom:18px;

}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

    position:relative;

    padding-left:34px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:7px;

    top:0;

    bottom:0;

    width:2px;

    background:#E7E7E7;

}

.timeline-item{

    position:relative;

    margin-bottom:48px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item::before{

    content:"";

    width:14px;

    height:14px;

    background:var(--primary);

    border-radius:50%;

    position:absolute;

    left:-33px;

    top:5px;

}

.date{

    color:#888;

    font-size:13px;

    display:block;

    margin-bottom:10px;

}

.timeline h4{

    font-size:24px;

    margin-bottom:8px;

}

.company{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    margin-bottom:18px;

}

.timeline ul{

    padding-left:20px;

}

.timeline li{

    margin-bottom:12px;

    line-height:28px;

    color:#555;

}

.timeline p{

    line-height:30px;

    color:#555;

}

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

.sidebar{

    position:sticky;

    top:30px;

}
/* ==========================================
   PROJETOS
========================================== */

.projects{

    display:grid;

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

    gap:20px;

    margin-top:10px;

}

.project{

    background:#FBFBFB;

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

    border-radius:18px;

    padding:24px;

    transition:all .25s ease;

    cursor:default;

}

.project:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    border-color:#DDD;

}

.project h4{

    font-size:20px;

    margin-bottom:12px;

}

.project p{

    color:var(--text-secondary);

    line-height:28px;

}

/* ==========================================
   MICRO ANIMAÇÕES
========================================== */

.profile-photo{

    transition:transform .35s ease;

}

.profile-photo:hover{

    transform:scale(1.03);

}

.role{

    transition:.25s;

}

.role:hover{

    transform:translateY(-2px);

}

.stat{

    overflow:hidden;

    position:relative;

}

.stat::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:var(--primary);

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.stat:hover::after{

    transform:scaleX(1);

}

/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:1100px){

.hero{

    flex-direction:column;

}

.hero-side{

    width:240px;

}

.stats{

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

}

.content{

    grid-template-columns:1fr;

}

.sidebar{

    position:relative;

    top:0;

}

}

@media(max-width:768px){

.container{

    padding:0 22px;

}

.header{

    padding-top:50px;

}

.hero-info h1{

    font-size:42px;

}

.description{

    font-size:17px;

    line-height:30px;

}

.stats{

    grid-template-columns:1fr;

}

.projects{

    grid-template-columns:1fr;

}

.card{

    padding:24px;

}

.profile-photo{

    border-radius:18px;

}

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F4F4F4;

}

::-webkit-scrollbar-thumb{

    background:#D6D6D6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#BDBDBD;

}