@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
    --bg:#f7f7f3;
    --surface:#ffffff;
    --surface-soft:#efefe9;
    --text:#171816;
    --muted:#6d7068;
    --line:#dedfd7;
    --accent:#65734f;
    --accent-dark:#4f5c3e;
    --max:1120px;
    --radius:14px;
    --shadow:0 18px 50px rgba(25,27,22,.07);
}

[data-theme="dark"]{
    --bg:#111310;
    --surface:#181a17;
    --surface-soft:#20231d;
    --text:#f2f3ed;
    --muted:#a3a79b;
    --line:#30332d;
    --accent:#a7b98b;
    --accent-dark:#c1d0a7;
    --shadow:0 18px 50px rgba(0,0,0,.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:var(--bg);
    color:var(--text);
    font-family:"DM Sans",sans-serif;
    line-height:1.65;
    transition:background .2s,color .2s;
}
body,button,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{border:0;cursor:pointer}
img{display:block;max-width:100%}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.section{padding:100px 0}
.muted{color:var(--muted)}
.eyebrow{
    color:var(--accent);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
h1,h2,h3,.logo{font-family:"Manrope",sans-serif}
h1,h2,h3,p{margin:0}
.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}
.section-heading h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.08;letter-spacing:-.045em;margin-top:9px}
.section-heading>p{max-width:420px;color:var(--muted);font-size:.9rem}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:0 17px;
    border-radius:10px;
    font-size:.83rem;
    font-weight:700;
    transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-secondary{border:1px solid var(--line);background:transparent}
.btn-accent{background:var(--accent);color:white}
[data-theme="dark"] .btn-accent{color:#10120e}

/* Navigation */
.navbar{
    position:fixed;
    inset:0 0 auto;
    z-index:100;
    border-bottom:1px solid transparent;
    transition:.2s;
}
.navbar.scrolled{
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(14px);
    border-color:var(--line);
}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.15rem;font-weight:800;letter-spacing:-.04em}
.logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:27px}
.nav-links a{font-size:.79rem;color:var(--muted);transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-actions{display:flex;gap:8px}
.icon-btn{
    width:38px;height:38px;display:grid;place-items:center;
    border:1px solid var(--line);background:var(--surface);
    color:var(--text);border-radius:10px;
}
.menu-btn{display:none}

/* Hero */
.hero{min-height:92vh;display:flex;align-items:center;padding:125px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:90px;align-items:end}
.hero-kicker{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.76rem;margin-bottom:22px}
.hero-kicker span{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1{
    max-width:820px;
    font-size:clamp(3.5rem,8vw,7.4rem);
    line-height:.94;
    letter-spacing:-.07em;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy{max-width:650px;color:var(--muted);font-size:1rem;margin-top:27px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero-side{border-left:1px solid var(--line);padding-left:30px}
.hero-side-title{font-family:"Manrope";font-weight:700;font-size:1.05rem;line-height:1.35;margin-bottom:18px}
.hero-side p{font-size:.82rem;color:var(--muted)}
.availability{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.75rem;margin-bottom:26px}
.availability i{font-size:.45rem;color:var(--accent)}
.quick-links{display:flex;gap:8px;margin-top:24px}
.quick-links a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:.8rem}
.quick-links a:hover{color:var(--text);border-color:var(--accent)}

/* Intro / facts */
.intro{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:50px}
.intro p{font-family:"Manrope";font-size:clamp(1.25rem,2.6vw,2.1rem);line-height:1.35;letter-spacing:-.035em;max-width:800px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:50px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:19px 15px 19px 0}
.fact strong{display:block;font-family:"Manrope";font-size:.9rem}
.fact span{display:block;color:var(--muted);font-size:.74rem;margin-top:3px}

/* Projects */
.filters{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:34px;
}
.filter{
    appearance:none;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    border-radius:999px;
    padding:9px 15px;
    font-size:.74rem;
    font-weight:600;
    line-height:1;
    transition:.2s ease;
}
.filter:hover{
    color:var(--text);
    border-color:var(--accent);
}
.filter.active{
    background:var(--text);
    color:var(--bg);
    border-color:var(--text);
}
.project-list{
    border-top:1px solid var(--line);
    margin-top:4px;
}
.project{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 125px 135px;
    gap:34px;
    align-items:center;
    min-height:155px;
    padding:34px 18px;
    border-bottom:1px solid var(--line);
    transition:background .2s ease, padding .2s ease;
}
.project:hover{
    background:var(--surface);
    padding-left:24px;
    padding-right:24px;
}
.project-number{
    color:var(--muted);
    font-size:.7rem;
    align-self:start;
    padding-top:5px;
}
.project h3{
    font-size:1.2rem;
    letter-spacing:-.025em;
}
.project p{
    color:var(--muted);
    font-size:.8rem;
    line-height:1.7;
    max-width:650px;
    margin-top:8px;
}
.project-type{
    font-size:.67rem;
    color:var(--accent);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.project-stack{
    font-size:.7rem;
    color:var(--muted);
    text-align:right;
    line-height:1.6;
}
.project-stack a{
    color:var(--text);
    font-weight:600;
}
.repo-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:transparent;
    color:var(--text) !important;
    font-size:.68rem;
    font-weight:700 !important;
    white-space:nowrap;
    transition:.2s ease;
}
.repo-btn:hover{
    background:var(--text);
    color:var(--bg) !important;
    border-color:var(--text);
    transform:translateY(-1px);
}
.repo-btn i{font-size:.75rem}
.view-all{margin-top:32px}

/* Skills */
.skill-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.skill-intro h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.045em;margin-top:10px}
.skill-intro p{color:var(--muted);font-size:.9rem;margin-top:17px;max-width:420px}
.skill-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.skill-group{background:var(--surface);padding:25px}
.skill-group h3{font-size:.86rem;margin-bottom:15px}
.skill-tags{display:flex;flex-wrap:wrap;gap:7px}
.skill-tag{border:1px solid var(--line);padding:7px 9px;border-radius:8px;font-size:.72rem;color:var(--muted)}

/* Timeline */
.timeline{border-top:1px solid var(--line)}
.timeline-item{display:grid;grid-template-columns:170px 1fr;gap:30px;padding:25px 0;border-bottom:1px solid var(--line)}
.timeline-date{font-size:.75rem;color:var(--muted)}
.timeline-item h3{font-size:1rem}
.timeline-item p{color:var(--muted);font-size:.8rem;margin-top:5px}

/* Certificates */
.certificates{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.certificate{background:var(--surface);padding:27px;min-height:190px}
.certificate .cert-number{color:var(--muted);font-size:.7rem}
.certificate h3{font-size:1.12rem;margin:40px 0 7px}
.certificate p{color:var(--muted);font-size:.79rem}
.certificate a{display:inline-block;margin-top:17px;color:var(--accent);font-size:.76rem;font-weight:700}

/* Contact */
.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}
.contact-copy h1{font-size:clamp(3rem,6vw,5.7rem);line-height:.95;letter-spacing:-.065em;margin-top:10px}
.contact-copy p{color:var(--muted);max-width:450px;margin-top:22px}
.contact-details{margin-top:35px}
.contact-detail{padding:15px 0;border-bottom:1px solid var(--line)}
.contact-detail span{display:block;color:var(--muted);font-size:.7rem;margin-bottom:4px}
.contact-detail a{font-size:.85rem;font-weight:600}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:.72rem;font-weight:700;margin-bottom:7px}
.field input,.field textarea{
    width:100%;border:1px solid var(--line);border-radius:9px;
    background:var(--surface);color:var(--text);padding:12px 13px;outline:0;
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:160px;resize:vertical}

/* Inner pages */
.page-hero{padding:145px 0 75px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(3.2rem,7vw,6.6rem);line-height:.95;letter-spacing:-.07em;max-width:900px;margin-top:10px}
.page-hero p{max-width:620px;color:var(--muted);margin-top:22px}
.about-columns{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.about-columns h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.045em}
.about-copy{color:var(--muted);font-size:.9rem}
.about-copy p+p{margin-top:17px}
.cta{border-top:1px solid var(--line);text-align:center;padding:90px 0}
.cta h2{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1;letter-spacing:-.06em}
.cta p{color:var(--muted);max-width:540px;margin:17px auto 25px}

/* Footer */
.footer{border-top:1px solid var(--line);padding:25px 0;color:var(--muted);font-size:.72rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px}

/* Motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
.back-top{
    position:fixed;right:18px;bottom:18px;width:40px;height:40px;
    border-radius:10px;background:var(--text);color:var(--bg);
    opacity:0;pointer-events:none;transition:.2s;z-index:90
}
.back-top.show{opacity:1;pointer-events:auto}
.toast{
    position:fixed;left:50%;bottom:22px;transform:translate(-50%,15px);
    padding:10px 14px;background:var(--text);color:var(--bg);
    border-radius:9px;font-size:.75rem;opacity:0;pointer-events:none;transition:.2s;z-index:200
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.hidden{display:none!important}

@media(max-width:850px){
    .hero-grid,.skill-layout,.about-columns,.contact-layout{grid-template-columns:1fr}
    .hero{min-height:auto}
    .hero-side{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}
    .section-heading{display:block}
    .section-heading>p{margin-top:15px}
    .project{
        grid-template-columns:45px minmax(0,1fr);
        gap:10px 18px;
        min-height:0;
        padding:27px 0;
    }
    .project-type{grid-column:2}
    .project-stack{
        grid-column:2;
        display:block;
        text-align:left;
    }
    .repo-btn{margin-top:4px}
    .skill-groups{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
    .container{width:min(calc(100% - 28px),var(--max))}
    .section{padding:75px 0}
    .nav-links{
        position:absolute;top:65px;left:14px;right:14px;
        display:none;flex-direction:column;gap:0;
        padding:7px;background:var(--surface);border:1px solid var(--line);
        border-radius:12px;box-shadow:var(--shadow)
    }
    .nav-links.open{display:flex}
    .nav-links a{padding:11px}
    .menu-btn{display:grid}
    .hero{padding:120px 0 70px}
    .hero h1{font-size:clamp(3.25rem,17vw,5.3rem)}
    .intro-grid,.facts{grid-template-columns:1fr}
    .facts{margin-top:30px}
    .fact{border-bottom:1px solid var(--line)}
    .filters{gap:8px;margin-bottom:27px}
    .filter{padding:8px 12px;font-size:.7rem}
    .project{
        grid-template-columns:28px minmax(0,1fr);
        gap:8px 14px;
        padding:25px 0;
    }
    .project-number{padding-top:3px}
    .project-type,
    .project-stack{grid-column:2}
    .project-stack{text-align:left}
    .repo-btn{margin-top:2px}
    .project h3{font-size:1.08rem}
    .skill-groups,.certificates,.form{grid-template-columns:1fr}
    .field.full{grid-column:auto}
    .timeline-item{grid-template-columns:1fr;gap:5px}
    .footer-inner{display:block}
    .footer-inner span+span{display:block;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
}


/* Education tree */
.education-tree{
    position:relative;
    max-width:820px;
    margin:20px auto 0;
    padding:15px 0 15px 58px;
}
.tree-line{
    position:absolute;
    left:20px;
    top:25px;
    bottom:25px;
    width:1px;
    background:var(--line);
}
.education-node{
    position:relative;
    padding:18px 0;
}
.tree-dot{
    position:absolute;
    left:-58px;
    top:31px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--bg);
    color:var(--accent);
    font-size:.68rem;
    font-weight:700;
    z-index:2;
}
.education-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:25px 27px;
    transition:.2s ease;
}
.education-card:hover{
    transform:translateX(5px);
    border-color:var(--accent);
    box-shadow:var(--shadow);
}
.education-stage{
    display:block;
    color:var(--accent);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:9px;
}
.education-card h3{
    font-size:1.18rem;
    letter-spacing:-.025em;
}
.education-card p{
    color:var(--muted);
    font-size:.8rem;
    margin-top:7px;
    max-width:650px;
}
@media(max-width:650px){
    .education-tree{padding-left:45px}
    .tree-line{left:14px}
    .tree-dot{
        left:-45px;
        width:34px;
        height:34px;
        top:31px;
        font-size:.62rem;
    }
    .education-card{padding:20px}
}