* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif; background:#f5f1e8; }

.container { max-width:1600px; margin:0 auto; padding:2rem 4rem; display:flex; flex-direction:column; min-height:100vh; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:3rem; position:relative; }
.logo { height:50px; }
.contact-btn { background:transparent; color:#4a5d6a; padding:0.75rem 2rem; border:2px solid #4a5d6a; border-radius:50px; text-decoration:none; font-weight:600; transition:0.3s; }
.contact-btn:hover { background:#4a5d6a; color:white; }

.eyebrow { color:#6b8294; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; margin-bottom:1.5rem; }
h1 { font-size:2.5rem; color:#2c3e50; margin-bottom:1rem; line-height:1.3; font-weight:600; max-width:900px; }
.subtitle { font-size:1.25rem; color:#6b8294; margin-bottom:2.5rem; font-style:italic; }

.tabs { display:flex; gap:0; margin-bottom:3rem; border-bottom:2px solid #d4cec0; }
.tab { padding:1rem 2rem; background:none; border:none; color:#6b8294; font-size:1rem; font-weight:500; cursor:pointer; position:relative; border-bottom:3px solid transparent; transition:0.3s; }
.tab.active { color:#2c3e50; border-bottom:3px solid #009b77; }
.tab:hover { color:#2c3e50; }

.main-content { display:flex; gap:3rem; align-items:center; flex:1; }

.left-section { flex:0 0 65%; display:flex; justify-content:center; align-items:center; }
.image-wrapper { position:relative; width:auto; max-width:100%; display:flex; justify-content:center; align-items:center; }
.main-image { max-width:100%; height:auto; display:block; transition:opacity 0.3s; }
.img-hover { position:absolute; top:0; left:0; opacity:0; }
.image-wrapper:hover .img-hover { opacity:1; }
.image-wrapper:hover .img-default { opacity:0; }

.right-section { flex:0 0 35%; background:white; padding:3rem; border-radius:0; display:flex; flex-direction:column; overflow-y:auto; }

.tab-content { display:none; flex-direction:column; animation:fadeIn 0.5s; flex:1; }
.tab-content.active { display:flex; }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.content-header { color:#6b8294; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; margin-bottom:1.5rem; }
.content-title { color:#2c3e50; font-size:1.75rem; margin-bottom:2rem; font-weight:600; }
.intro-text { color:#4a5d6a; line-height:1.8; font-size:1.1rem; margin-bottom:2rem; }

.feature-list { list-style:none; flex:1; }
.feature-list li { padding:1.25rem 0; color:#4a5d6a; display:flex; align-items:flex-start; gap:1rem; line-height:1.6; }
.check-icon { width:24px; height:24px; border-radius:50%; border:2px solid #009b77; flex-shrink:0; margin-top:2px; position:relative; }
.check-icon::after { content:'✓'; position:absolute; color:#009b77; font-size:14px; font-weight:bold; top:50%; left:50%; transform:translate(-50%,-50%); }

.experience-item { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid #e8e4d8; }
.experience-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.experience-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.company-logo { width:50px; height:50px; background:#009b77; border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:bold; font-size:1.2rem; }
.experience-details h3 { color:#2c3e50; font-size:1.1rem; font-weight:600; margin-bottom:0.25rem; }
.experience-period { color:#6b8294; font-size:0.875rem; }
.experience-description { color:#4a5d6a; line-height:1.6; margin-bottom:1rem; }
.experience-activities { list-style:none; padding-left:0; }
.experience-activities li { color:#6b8294; font-size:0.9rem; padding:0.5rem 0; padding-left:1.5rem; position:relative; }
.experience-activities li::before { content:'•'; color:#009b77; position:absolute; left:0; font-weight:bold; }

.cta-link { color:#009b77; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.5rem; transition:0.3s; }
.cta-link:hover { gap:1rem; }
.cta-link::after { content:'→'; font-size:1.2rem; }

.contact-info { background:#f9f7f3; padding:2rem; border-radius:10px; margin-top:1rem; }
.contact-info p { color:#4a5d6a; line-height:1.6; margin-bottom:1.5rem; }
.linkedin-btn { display:inline-flex; align-items:center; gap:0.75rem; background:#0077b5; color:white; padding:1rem 2rem; border-radius:50px; text-decoration:none; font-weight:600; transition:0.3s; margin-top:1rem; }
.linkedin-btn:hover { background:#006399; transform:translateY(-2px); box-shadow:0 5px 20px rgba(0,119,181,0.3); }

/* Hamburger menu */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger div { width:25px; height:3px; background:#4a5d6a; transition:0.3s; }
.hamburger.active div:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active div:nth-child(2) { opacity:0; }
.hamburger.active div:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
#tabs-container.show { display:flex !important; flex-direction:column; gap:1rem; }

@media(max-width:900px){
    .main-content { flex-direction:column; gap:2rem; }
    .left-section, .right-section { flex:1; width:100%; }
    .main-image { width:100%; height:auto; }
    h1 { font-size:2rem; }
    .container { padding:1.5rem; }
    .tabs { display:none; }
    .hamburger { display:flex; }
}