*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
body{background:#fff;color:#0f172a;transition:.3s}
body.dark{background:#020617;color:#e2e8f0}

/* LOADER */
.loader{position:fixed;inset:0;background:white;z-index:3000}
.loader:after{
content:"";position:absolute;top:50%;left:50%;
width:40px;height:40px;margin:-20px;
border:4px solid #eee;border-top:4px solid #2563eb;
border-radius:50%;animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* PROGRESS */
.progress{position:fixed;top:0;height:3px;background:#2563eb;width:0%;z-index:2000}

/* NAV */
.navbar{
position:sticky;top:10px;margin:10px 12%;
padding:14px 24px;border-radius:14px;
display:flex;justify-content:space-between;
background:rgba(255,255,255,.7);
backdrop-filter:blur(10px);
}
body.dark .navbar{background:rgba(2,6,23,.7)}

.nav-links{display:flex;gap:18px;list-style:none}
.nav-links a{text-decoration:none;color:inherit}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0 12%}
.hero-inner{display:flex;gap:60px;flex-wrap:wrap;align-items:center;justify-content:center}

.hero-photo img{
width:170px;border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
cursor:pointer
}

.hero-text h1{font-size:3rem}
.role{margin:10px 0 25px;color:#64748b}

.btn{padding:12px 26px;background:#2563eb;color:white;border:none;border-radius:8px;cursor:pointer}

/* SOCIAL */
.socials{margin-top:25px}
.socials a{margin-right:14px;font-size:22px;color:#64748b}

/* SECTIONS */
section{padding:90px 12%}
.reveal{opacity:0;transform:translateY(40px);transition:1s}
.reveal.visible{opacity:1;transform:none}

/* BADGE */
.experience-badge{
display:inline-block;background:#2563eb;color:white;
padding:6px 14px;border-radius:999px;font-size:.85rem;margin-bottom:15px
}

/* SKILLS */
.skill{margin:18px 0}
.bar{background:#e5e7eb;height:10px;border-radius:999px;margin-top:6px}
.bar div{height:100%;background:#2563eb;border-radius:999px}

/* TIMELINE */
.timeline{border-left:3px solid #2563eb;padding-left:25px}
.timeline-item{margin-bottom:35px;position:relative}
.timeline-item:before{
content:"";width:12px;height:12px;background:#2563eb;border-radius:50%;
position:absolute;left:-32px;top:5px
}

/* PROJECT */
.project{
border:1px solid #e5e7eb;padding:24px;margin-top:20px;
border-radius:14px;background:white;transition:.3s
}
body.dark .project{background:#1e293b;border-color:#334155}

/* FOOTER */
footer{padding:30px;text-align:center;background:#f1f5f9}
body.dark footer{background:#020617}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal img{width:340px;border-radius:12px}
.modal iframe{width:85vw;height:85vh;background:white;border-radius:12px}

/* FLOAT EMAIL */
.contact-float{
position:fixed;bottom:25px;right:25px;
background:#2563eb;color:white;width:55px;height:55px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:22px;text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.2)
}