*{box-sizing:border-box;margin:0;padding:0}
:root{--green:#087f5b;--green2:#0b6b4a;--dark:#151918;--light:#f1f5f3;--white:#fff;--muted:#69736f}
body{font-family:Arial,Helvetica,sans-serif;background:var(--light);color:#202523;line-height:1.6}
nav{background:var(--dark);padding:18px 7%;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.logo{color:#fff;text-decoration:none;font-size:24px;font-weight:800}.logo span{color:#25c58c}
nav ul{display:flex;gap:20px;list-style:none;flex-wrap:wrap;justify-content:center}
nav a{color:#dce4e0;text-decoration:none;font-weight:600}nav a:hover,.active{color:#35d39b!important}
.hero{min-height:80vh;display:flex;align-items:center;padding:65px 9%;color:#fff;background:linear-gradient(135deg,#063d2d,#087f5b 58%,#123f31)}
.hero-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:center;width:100%;max-width:1150px;margin:auto}
.hero-content{max-width:700px}.badge{display:inline-block;border:1px solid #ffffff55;background:#ffffff18;border-radius:30px;padding:8px 16px;margin-bottom:20px}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.05;margin-bottom:20px}.hero h1 span{color:#50e0aa}.hero p{font-size:19px;color:#e8f4ef}
.hero-photo{width:310px;height:310px;border-radius:50%;object-fit:cover;border:8px solid #ffffffcc;box-shadow:0 15px 45px #0007;justify-self:center}
.btn{display:inline-block;margin-top:28px;background:#fff;color:#086b4c;padding:13px 23px;border-radius:8px;text-decoration:none;font-weight:800}
.container{max-width:1100px;margin:auto;padding:70px 6%}.title{text-align:center;margin-bottom:45px}.title h1{font-size:40px}.title p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}.card{background:#fff;padding:28px;border-radius:14px;box-shadow:0 5px 18px #00000012;border-top:4px solid var(--green)}.card h3{margin-bottom:10px}.icon{font-size:34px;margin-bottom:12px}
.profile{width:150px;height:150px;margin:0 auto 22px;border-radius:50%;object-fit:cover;border:5px solid var(--green);box-shadow:0 8px 25px #087f5b33}
.skill{margin:18px 0}.skill-top{display:flex;justify-content:space-between;margin-bottom:7px}.bar{height:10px;background:#d9e2de;border-radius:20px;overflow:hidden}.fill{height:100%;background:var(--green);border-radius:20px}
.contact-box{max-width:700px;margin:auto;background:#fff;padding:35px;border-radius:15px;box-shadow:0 5px 20px #00000012}
label{font-weight:bold}input,textarea{width:100%;padding:13px;margin:8px 0 15px;border:1px solid #c8d1cd;border-radius:8px;font:inherit}textarea{min-height:150px;resize:vertical}
button{border:0;padding:13px 24px;border-radius:8px;background:var(--green);color:#fff;font-weight:bold;cursor:pointer}
.timeline{border-left:3px solid var(--green);padding-left:25px;max-width:750px;margin:auto}.timeline article{margin-bottom:30px}
.project{display:flex;flex-direction:column;gap:12px}.tag{display:inline-block;background:#dff5ec;color:#076344;padding:5px 10px;border-radius:20px;font-size:13px;font-weight:bold}
footer{text-align:center;padding:25px;background:var(--dark);color:#cbd5d1}
@media(max-width:800px){nav{flex-direction:column;gap:12px}.hero{padding:55px 7%}.hero-wrap{grid-template-columns:1fr;text-align:center}.hero-photo{width:230px;height:230px;grid-row:1}.hero-content{margin:auto}.container{padding:55px 6%}}