*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
    --accent:#e91e4d;
    --accent-dark:#bd153c;
    --navy:#22234f;
    --text:#24264d;
    --muted:#656783;
    --bg:#f7f7fd;
    --surface:#fff;
    --border:#e5e5ef;
    --shadow:0 12px 35px rgba(34,35,79,.09);
}
body.dark{
    --navy:#f6f6ff;
    --text:#f1f1fa;
    --muted:#b5b5c9;
    --bg:#111217;
    --surface:#1a1b21;
    --border:#30313a;
    --shadow:0 12px 35px rgba(0,0,0,.25);
}
body.dark .skill-strip{
    background:#22234f;
    color:#fff;
}

body.dark .skill-strip span{
    color:rgba(255,255,255,.72);
}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:var(--bg);
    transition:background .3s,color .3s;
}
a{color:inherit;text-decoration:none}
.portfolio-shell{min-height:100vh}
.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:320px;
    height:100vh;
    padding:30px 28px 22px;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    z-index:1000;
}
.brand-mark{
    width:70px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    font-weight:800;
    letter-spacing:-2px;
    color:var(--navy);
    border-left:4px solid var(--accent);
    border-bottom:4px solid var(--accent);
    margin-bottom:22px;
}
.profile{text-align:center}
.profile-photo{
    width:170px;
    height:170px;
    margin:0 auto 18px;
    border-radius:50%;
    display:grid;
    place-items:center;
    object-fit:cover;
    object-position:center center;
    border:7px solid var(--surface);
    box-shadow:var(--shadow);
}
.profile h1{font-size:21px;margin:0 0 8px;color:var(--navy)}
.profile p{margin:0;color:var(--accent);font-weight:600;min-height:24px}
.social-links{display:flex;justify-content:center;gap:10px;margin:24px 0}
.social-links a{
    width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--accent);color:#fff;
    font-size:13px;font-weight:700;
    transition:.25s;
}
.social-links a:hover{transform:translateY(-3px);background:var(--accent-dark)}
.side-nav{display:flex;flex-direction:column}
.side-nav a{
    display:flex;align-items:center;gap:13px;
    padding:13px 5px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-weight:600;
    transition:.25s;
}
.side-nav a span{width:20px;text-align:center;color:var(--navy)}
.side-nav a:hover,.side-nav a.active{color:var(--accent)}
.side-nav a:hover span,.side-nav a.active span{color:var(--accent)}
.sidebar-bottom{margin-top:auto;text-align:center}
.sidebar-bottom button{
    width:42px;height:42px;border:1px solid var(--border);
    border-radius:10px;background:var(--surface);color:var(--text);
    cursor:pointer;font-size:19px;margin-bottom:10px;
}
.sidebar-bottom p{font-size:12px;color:var(--muted);margin:0}
.main-content{margin-left:320px;padding:0 55px}
.section{max-width:1180px;margin:0 auto;padding:95px 0 45px;scroll-margin-top:25px}
.hero{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.5fr .75fr;
    align-items:center;
    gap:60px;
}
.eyebrow{color:var(--accent);font-size:13px;font-weight:800;letter-spacing:2px;margin:0 0 12px}
.hero h2{font-size:58px;line-height:1.1;margin:0 0 12px;color:var(--navy)}
.hero h2 span{color:var(--accent)}
.hero h3{font-size:26px;margin:0 0 22px;color:var(--text)}
.hero-description{max-width:760px;color:var(--muted);font-size:18px;line-height:1.9}
.hero-tags,.skill-list,.project-tags{display:flex;flex-wrap:wrap;gap:9px}
.hero-tags{margin:25px 0}
.hero-tags span,.skill-list span,.project-tags span{
    padding:8px 13px;border:1px solid var(--border);
    background:var(--surface);border-radius:30px;font-size:13px;font-weight:600;
}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:13px 24px;border-radius:30px;font-weight:700;
    transition:.25s;border:1px solid transparent;
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:var(--accent);color:#fff}
.btn.secondary{border-color:var(--accent);color:var(--accent)}
.hero-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:28px;padding:28px;box-shadow:var(--shadow);
}
.hero-card-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1.5px}
.status-dot{width:9px;height:9px;background:#54b948;border-radius:50%;box-shadow:0 0 0 5px rgba(84,185,72,.12)}
.hero-photo{
    width:100%;
    height:280px;
    margin:24px 0;
    border-radius:20px;
    display:block;
    object-fit:cover;
    object-position:center 32%;
}
.hero-card p{font-weight:700;margin:0;line-height:1.6}

.hero-stats{
    margin-top:34px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    max-width:940px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.stat-item{
    padding:20px 22px;
    position:relative;
}
.stat-item:not(:last-child):after{
    content:"";
    position:absolute;
    right:0;
    top:22px;
    bottom:22px;
    width:1px;
    background:var(--border);
}
.stat-item strong{
    display:block;
    color:var(--navy);
    font-size:23px;
    line-height:1;
    margin-bottom:7px;
}
.stat-item span{
    color:var(--muted);
    font-size:11px;
    font-weight:600;
}
.profile-card-note{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:11px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
}
.note-dot{
    width:7px;
    height:7px;
    flex:none;
    border-radius:50%;
    background:var(--accent);
}


.section-lead{
    max-width:760px;
    margin:-18px 0 35px;
    color:var(--muted);
    line-height:1.8;
}
.about-premium{
    display:grid;
    grid-template-columns:1.45fr .8fr;
    gap:25px;
}
.about-intro{
    padding:35px;
    border-radius:24px;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}
.about-intro:before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;width:5px;
    background:var(--accent);
}
.about-kicker{
    color:var(--accent);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
}
.about-intro h3{
    margin:12px 0 18px;
    color:var(--navy);
    font-size:28px;
    line-height:1.35;
}
.about-intro p{
    color:var(--muted);
    line-height:1.9;
}
.about-highlights{
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.about-highlights>div{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:22px;
    box-shadow:var(--shadow);
}
.about-highlights span{
    color:var(--accent);
    font-size:11px;
    font-weight:800;
}
.about-highlights strong{
    display:block;
    color:var(--navy);
    margin:8px 0;
    font-size:17px;
}
.about-highlights p{
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
    margin:0;
}
.education-card{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:25px;
    padding:32px;
    border-radius:24px;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}
.education-year{
    color:var(--accent);
    font-size:18px;
    font-weight:800;
    line-height:1.5;
}
.education-label{
    color:var(--accent);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
}
.education-main h3{
    color:var(--navy);
    font-size:25px;
    margin:8px 0 4px;
}
.education-main h4{
    color:var(--muted);
    margin:0 0 13px;
    font-size:16px;
}
.education-main p{
    color:var(--muted);
    line-height:1.8;
}
.education-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}
.education-tags span{
    border:1px solid var(--border);
    border-radius:20px;
    padding:7px 11px;
    font-size:11px;
    font-weight:600;
}


.projects-section .section-lead{max-width:800px}

.linkedin-project-callout{
    margin:34px 0 48px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.linkedin-project-callout:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
}
.linkedin-project-icon{
    width:48px;
    height:48px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(233,30,77,.09);
    color:var(--accent);
    font-size:22px;
}
.linkedin-project-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.linkedin-project-copy small{
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.6px;
}
.linkedin-project-copy strong{
    color:var(--navy);
    font-size:15px;
}
.linkedin-project-arrow{
    margin-left:auto;
    color:var(--navy);
    font-size:14px;
    flex:none;
}
@media(max-width:760px){
    .linkedin-project-callout{
        margin:28px 0 34px;
        padding:16px;
    }
    .linkedin-project-copy strong{font-size:13px}
}
.project-showcase{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}
.project-card-new{
    position:relative;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);
    transition:transform .3s ease,box-shadow .3s ease;
}
.project-card-new:hover{
    transform:translateY(-7px);
    box-shadow:0 18px 45px rgba(34,35,79,.13);
}
.project-featured-new{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
}
.project-number{
    position:absolute;
    top:20px;
    right:22px;
    z-index:2;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    border:2px solid rgba(255,255,255,.85);
    font-size:12px;
    font-weight:800;
    line-height:1;
    box-shadow:0 5px 18px rgba(0,0,0,.16);
    transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.project-visual-new{
    min-height:260px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;
    color:#fff;
    padding:30px;
    text-align:center;
}
.project-featured-new .project-visual-new{min-height:330px}
.project-visual-new.irrigation{background:linear-gradient(135deg,#1e2d55,#ef174c)}
.project-visual-new.dsp{background:linear-gradient(135deg,#34235f,#d81b60)}
.project-visual-new.energy{background:linear-gradient(135deg,#154d48,#bc7c18)}
.project-visual-new>span{
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:800;
    opacity:.9;
}
.visual-icon{
    width:120px;
    height:120px;
    border:2px solid rgba(255,255,255,.7);
    border-radius:28px;
    display:grid;
    place-items:center;
    font-size:28px;
    font-weight:800;
    letter-spacing:-1px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(5px);
}
.project-body-new{padding:30px}
.project-date{
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.6px;
}
.project-body-new h3{
    color:var(--navy);
    font-size:24px;
    line-height:1.35;
    margin:9px 0 13px;
}
.project-body-new p{
    color:var(--muted);
    line-height:1.8;
    font-size:14px;
    margin:0;
}
.project-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:20px 0;
}
.project-details div{
    padding:13px;
    border:1px solid var(--border);
    border-radius:13px;
}
.project-details strong{
    display:block;
    color:var(--accent);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:5px;
}
.project-details span{
    color:var(--text);
    font-size:11px;
    font-weight:600;
}
.project-body-new .project-tags{margin-top:18px}



/* ==========================================
   PROJECT VISUAL SHOWCASE
   Visual panels are intentionally illustrative;
   replace with real project screenshots later.
========================================== */
.visual-dashboard,
.waveform-visual,
.database-visual,
.api-visual,
.energy-visual{
    width:min(88%,360px);
    position:relative;
    border:1px solid rgba(255,255,255,.32);
    border-radius:18px;
    background:rgba(8,12,30,.28);
    box-shadow:0 18px 40px rgba(0,0,0,.20);
    backdrop-filter:blur(7px);
}
.visual-dashboard{padding:14px}
.mini-topbar{display:flex;gap:5px;margin-bottom:14px}
.mini-topbar span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7)}
.mini-irrigation{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-gauge,.mini-pump,.mini-sensor{
    min-height:105px;padding:12px 8px;border-radius:12px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.mini-gauge b,.mini-pump b,.mini-sensor b{font-size:9px;letter-spacing:1px}
.mini-gauge strong{font-size:22px}
.mini-pump i,.mini-sensor i{font-size:18px}
.mini-pump span{font-size:9px;font-weight:800;color:#b8ffcc}
.mini-sensor span{font-size:11px;font-weight:700}

.waveform-visual{padding:18px 18px 14px}
.wave-label{font-size:8px;letter-spacing:1.5px;font-weight:800;text-align:left;opacity:.78;margin-bottom:7px}
.wave-label:not(:first-child){margin-top:14px}
.wave{height:52px;border-radius:8px;position:relative;overflow:hidden;background:rgba(255,255,255,.05)}
.wave:before{
    content:"";position:absolute;inset:0;
    background-repeat:repeat-x;
    background-position:center;
}
.wave.noisy:before{
    background-image:linear-gradient(0deg,transparent 48%,rgba(255,255,255,.72) 49%,rgba(255,255,255,.72) 51%,transparent 52%);
    transform:skewY(3deg) scaleY(2.1);
}
.wave.clean:before{
    background-image:radial-gradient(ellipse at center, transparent 0 17%,rgba(255,255,255,.82) 18% 20%,transparent 21%);
    background-size:38px 100%;
}

.database-visual{padding:18px}
.db-title,.api-title{font-size:10px;font-weight:800;letter-spacing:1px;margin-bottom:12px}
.db-title i,.api-title i{margin-right:7px}
.db-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 9px;border-top:1px solid rgba(255,255,255,.14);
    font-size:10px;
}
.db-row b{font-size:14px}
.db-row.low b{color:#ffd28a}

.api-visual{padding:16px}
.api-row{
    display:grid;grid-template-columns:55px 1fr;gap:8px;align-items:center;
    padding:8px 9px;margin-top:6px;border-radius:8px;background:rgba(255,255,255,.07);
    font-size:9px;text-align:left;
}
.api-row b{font-size:8px;letter-spacing:.4px}
.api-row span{opacity:.9}
.api-row.post b{color:#a9f1c1}.api-row.put b{color:#ffd27a}.api-row.delete b{color:#ff9a9a}

.energy-visual{
    min-height:145px;padding:18px;display:grid;grid-template-columns:1fr 1fr 1.3fr;
    align-items:center;gap:12px;
}
.sun,.wind,.battery{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.sun i{font-size:30px}.wind i{font-size:30px}.battery i{font-size:28px}
.battery span{font-size:7px;letter-spacing:1px;font-weight:800;text-align:center}
.energy-line{height:2px;background:rgba(255,255,255,.7);position:relative}
.energy-line:after{content:"";position:absolute;right:-2px;top:-4px;border-left:7px solid rgba(255,255,255,.8);border-top:5px solid transparent;border-bottom:5px solid transparent}

.project-card-new:hover .visual-dashboard,
.project-card-new:hover .waveform-visual,
.project-card-new:hover .database-visual,
.project-card-new:hover .api-visual,
.project-card-new:hover .energy-visual{transform:translateY(-3px);transition:transform .3s ease}

@media(max-width:900px){
    .project-featured-new{grid-column:auto;display:block}
    .project-showcase{grid-template-columns:1fr}
}

.skills-premium{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.skill-card-premium{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px;
    box-shadow:var(--shadow);
    transition:transform .3s ease,box-shadow .3s ease;
}
.skill-card-premium:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 38px rgba(34,35,79,.11);
}
.skill-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.skill-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(239,23,76,.09);
    color:var(--accent);
    font-size:11px;
    font-weight:800;
}
.skill-label{
    color:var(--accent);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
}
.skill-card-premium h3{
    margin:18px 0 8px;
    color:var(--navy);
    font-size:21px;
}
.skill-card-premium p{
    margin:0 0 20px;
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}
.skill-card-premium .skill-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.skill-card-premium .skill-list span{
    padding:8px 11px;
    border-radius:20px;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--navy);
    font-size:11px;
    font-weight:700;
}
.skill-strip{
    margin-top:20px;
    padding:22px 28px;
    border-radius:18px;
    background:var(--navy);
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.skill-strip span{
    color:rgba(255,255,255,.65);
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:800;
}
.skill-strip strong{font-size:15px}
.cert-grid-premium{
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.cert-card-premium{
    position:relative;
    min-height:220px;
    padding:25px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    box-shadow:var(--shadow);
    transition:transform .3s ease,box-shadow .3s ease;
}
.cert-card-premium:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 38px rgba(34,35,79,.11);
}
.cert-card-premium.featured-cert{
    border-top:4px solid var(--accent);
}
.cert-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}
.cert-top span{
    min-width:43px;
    height:43px;
    padding:0 9px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(239,23,76,.09);
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}
.cert-top small{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}
.cert-card-premium h3{
    color:var(--navy);
    font-size:16px;
    line-height:1.45;
    margin:0 0 10px;
}
.cert-card-premium p{
    color:var(--muted);
    font-size:11px;
    margin:0;
}
.cert-card-premium>strong{
    position:absolute;
    bottom:23px;
    left:25px;
    color:var(--accent);
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}


.resume-premium{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:30px;
    padding:38px;
    border-radius:25px;
    background:#22234f;
    color:#fff;
    box-shadow:var(--shadow);
}
.resume-kicker,.contact-kicker{
    color:var(--accent);
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:800;
}
.resume-premium h3{
    color:#fff;
    margin:12px 0 12px;
    font-size:29px;
    line-height:1.35;
}
.resume-premium p{
    color:rgba(255,255,255,.72);
    line-height:1.8;
    max-width:650px;
}
.resume-actions{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:18px;
}
.resume-file{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;
    background:rgba(255,255,255,.06);
}
.resume-file>span{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:11px;
    background:var(--accent);
    color:#fff;
    font-size:10px;font-weight:800;
}
.resume-file strong,.resume-file small{display:block}
.resume-file strong{font-size:14px}
.resume-file small{color:rgba(255,255,255,.55);margin-top:3px}
.resume-note{
    margin:14px 2px 0;
    color:var(--muted);
    font-size:11px;
}
.resume-note span{
    color:var(--accent);
    font-weight:800;
}
.contact-premium{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
}
.contact-intro{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    padding:32px;
    box-shadow:var(--shadow);
}
.contact-intro h3{
    color:var(--navy);
    font-size:29px;
    line-height:1.35;
    margin:12px 0;
}
.contact-intro>p{
    color:var(--muted);
    line-height:1.8;
}
.contact-links{
    margin-top:25px;
    display:grid;
    gap:11px;
}
.contact-links a{
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:14px;
    text-decoration:none;
    transition:transform .2s ease,border-color .2s ease;
}
.contact-links a:hover{
    transform:translateX(4px);
    border-color:var(--accent);
}
.contact-links a>span{
    width:39px;height:39px;
    display:grid;place-items:center;
    border-radius:11px;
    background:rgba(239,23,76,.09);
    color:var(--accent);
    font-size:11px;font-weight:800;
}
.contact-links small,.contact-links strong{display:block}
.contact-links small{
    color:var(--accent);
    font-size:9px;font-weight:800;letter-spacing:1px;
}
.contact-links strong{
    color:var(--navy);
    font-size:12px;
    margin-top:3px;
}


.resume-preview-note{
    display:flex;
    align-items:center;
    gap:15px;
    margin:0 0 18px;
    padding:17px 20px;
    border:1px dashed var(--border);
    border-radius:16px;
    background:var(--surface);
}
.resume-preview-icon{
    width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:12px;
    background:rgba(239,23,76,.09);
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    flex:none;
}
.resume-preview-note strong{
    display:block;
    color:var(--navy);
    font-size:13px;
    margin-bottom:3px;
}
.resume-preview-note p{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
}
.resume-preview-note code{
    color:var(--accent);
    font-weight:700;
}

.section-heading{margin-bottom:38px}
.section-heading p{color:var(--accent);font-weight:800;font-size:13px;letter-spacing:2px;margin:0 0 4px}
.section-heading h2{
    color:var(--navy);font-size:42px;margin:0;
    position:relative;display:inline-block;
}
.section-heading h2:after{
    content:"";display:block;width:62px;height:5px;
    background:var(--accent);margin-top:10px;
    box-shadow:0 8px 0 -2px var(--accent);
}
.about-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:40px}
.about-text,.about-facts,.skill-group,.cert-grid article,.resume-card,.contact-grid a{
    background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
}
.about-text{padding:34px;border-radius:22px}
.about-text h3{font-size:25px;margin-top:0;color:var(--navy)}
.about-text p{color:var(--muted);line-height:1.9}
.about-facts{border-radius:22px;padding:8px 28px}
.about-facts div{padding:20px 0;border-bottom:1px solid var(--border)}
.about-facts div:last-child{border-bottom:0}
.about-facts strong{display:block;font-size:12px;text-transform:uppercase;color:var(--accent);letter-spacing:1px}
.about-facts span{display:block;margin-top:5px;font-weight:600}
.timeline{position:relative;max-width:900px;margin-left:15px}
.timeline:before{
    content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:var(--accent);
}
.timeline-item{position:relative;padding:0 0 42px 45px}
.timeline-marker{
    position:absolute;left:-1px;top:6px;width:19px;height:19px;
    border-radius:50%;background:var(--accent);border:4px solid var(--bg);
}
.timeline-content{padding:28px 32px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.timeline-date{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:1px}
.timeline-content h3{font-size:22px;margin:9px 0 4px;color:var(--navy)}
.timeline-content h4{margin:0 0 12px;color:var(--muted);font-size:16px}
.timeline-content p{margin:0;color:var(--muted);line-height:1.8}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.project-card{
    overflow:hidden;border:1px solid var(--border);
    background:var(--surface);border-radius:20px;box-shadow:var(--shadow);
    transition:.3s;
}
.project-card:hover{transform:translateY(-7px)}
.project-card.featured{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr}
.project-visual{
    min-height:205px;display:grid;place-items:center;
    color:#fff;font-size:30px;font-weight:800;letter-spacing:1px;
}
.project-card.featured .project-visual{min-height:290px}
.project-visual.irrigation{background:linear-gradient(135deg,#1e3a5f,#e91e4d)}
.project-visual.dsp{background:linear-gradient(135deg,#32265f,#e91e4d)}
.project-visual.energy{background:linear-gradient(135deg,#174d48,#e9a11b)}
.project-body{padding:27px}
.project-date{font-size:11px;color:var(--accent);font-weight:800;letter-spacing:1px;text-transform:uppercase}
.project-body h3{font-size:21px;color:var(--navy);margin:8px 0 12px}
.project-body p{color:var(--muted);line-height:1.75;font-size:14px}
.project-tags{margin-top:18px}
.project-tags span{font-size:11px;padding:6px 10px}
.skill-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.skill-group{padding:26px;border-radius:20px}
.skill-group h3{margin:0 0 18px;color:var(--navy)}
.skill-list span{font-size:12px}
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cert-grid article{border-radius:18px;padding:24px}
.cert-grid article>span{display:inline-flex;min-width:38px;height:30px;padding:0 9px;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:8px;font-size:12px;font-weight:800}
.cert-grid h3{font-size:17px;color:var(--navy);line-height:1.5}
.cert-grid p{color:var(--muted);font-size:13px;margin:0}
.resume-card{border-radius:22px;padding:35px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.resume-card h3{font-size:27px;color:var(--navy);margin:0 0 8px}
.resume-card p{color:var(--muted);margin:0;line-height:1.7}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.contact-grid a{padding:25px;border-radius:18px;transition:.25s}
.contact-grid a:hover{transform:translateY(-5px);border-color:var(--accent)}
.contact-grid span{display:block;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.contact-grid strong{display:block;margin-top:8px;font-size:14px;overflow-wrap:anywhere}
.location{color:var(--muted);margin-top:25px}
footer{padding:35px 0 55px;color:var(--muted);font-size:12px;text-align:center}
#topBtn{
    position:fixed;right:28px;bottom:28px;width:48px;height:48px;
    border:0;border-radius:50%;background:var(--accent);color:#fff;
    font-size:22px;cursor:pointer;display:none;z-index:1200;
    box-shadow:var(--shadow);
}
.fade{opacity:0;transform:translateY(25px);transition:opacity .65s,transform .65s}
.fade.show{opacity:1;transform:translateY(0)}
@media(max-width:1050px){
    .sidebar{width:245px;padding:24px 20px}
    .main-content{margin-left:245px;padding:0 35px}
    .hero{grid-template-columns:1fr}
    .hero-card{max-width:520px}
    .hero-stats{grid-template-columns:repeat(2,1fr)}
    .stat-item:nth-child(2):after{display:none}
    .project-card.featured{grid-template-columns:1fr}
}
@media(max-width:760px){
    .sidebar{
        position:relative;width:100%;height:auto;
        padding:20px;display:block;
    }
    .brand-mark{margin-bottom:12px}
    .profile-photo{width:110px;height:110px}
    .social-links{margin:15px 0}
    .side-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px}
    .sidebar-bottom{margin-top:15px}
    .main-content{margin-left:0;padding:0 18px}
    .section{padding:65px 0 30px}
    .hero{min-height:auto;padding-top:70px}
    .hero h2{font-size:39px}
    .hero h3{font-size:20px}
    .hero-card{display:none}
    .hero-stats{grid-template-columns:repeat(2,1fr)}
    .stat-item:nth-child(2):after{display:none}
    .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid var(--border)}
    .about-grid,.about-premium,.skill-groups,.cert-grid,.contact-grid,.project-grid{grid-template-columns:1fr}
    .resume-premium,.contact-premium{grid-template-columns:1fr}
    .skills-premium{grid-template-columns:1fr}
    .cert-grid-premium{grid-template-columns:1fr}
    .skill-strip{flex-direction:column;align-items:flex-start}
    .project-showcase{grid-template-columns:1fr}
    .project-featured-new{grid-column:auto;display:block}
    .project-featured-new .project-visual-new{min-height:260px}
    .about-highlights{grid-template-columns:1fr}
    .education-card{grid-template-columns:1fr;gap:10px}
    .project-card.featured{display:block}
    .resume-card{display:block}
    .resume-card .btn{margin-top:22px}
}


/* ---------- Final polish ---------- */
::selection{
    background:var(--accent);
    color:#fff;
}
.skip-link{
    position:fixed;
    left:16px;
    top:-60px;
    z-index:2000;
    padding:10px 15px;
    border-radius:10px;
    background:var(--navy);
    color:var(--bg);
    font-size:12px;
    font-weight:700;
    transition:top .2s ease;
}
.skip-link:focus{top:16px}
#scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    background:var(--accent);
    z-index:2001;
    transition:width .08s linear;
}
.side-nav a:focus-visible,
.social-links a:focus-visible,
.btn:focus-visible,
.sidebar-bottom button:focus-visible,
.contact-links a:focus-visible,
#topBtn:focus-visible{
    outline:3px solid rgba(233,30,77,.35);
    outline-offset:3px;
}
.hero-card,
.project-card-new,
.about-premium,
.education-card,
.experience-card,
.skill-card-premium,
.cert-card-premium,
.resume-premium,
.contact-intro{
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.hero-card:hover,
.about-premium:hover,
.education-card:hover,
.experience-card:hover{
    transform:translateY(-4px);
}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}
@media(max-width:760px){
    .skip-link{left:12px}
    #scroll-progress{height:2px}
    .side-nav a{min-height:48px}
    .hero-buttons{flex-wrap:wrap}
    .hero-buttons .btn{flex:1 1 180px;text-align:center}
    .contact-intro,.resume-premium{padding:24px}
}

body.dark .resume-preview-note{
    background:var(--surface);
}
body.dark .resume-preview-note strong{
    color:var(--navy);
}


/* ==========================================
   STYLE SWITCHER
========================================== */
.style-switcher{
    position:fixed;
    top:25px;
    right:25px;
    z-index:1200;
}
.style-switcher-toggle{
    width:55px;
    height:55px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    font-size:24px;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:transform .3s ease, background .3s ease, color .3s ease;
}
.style-switcher-toggle:hover{transform:rotate(45deg);color:var(--accent)}
.style-switcher-toggle.open{color:var(--accent);transform:rotate(45deg)}
.style-switcher-panel{
    position:absolute;
    top:65px;
    right:0;
    width:250px;
    padding:20px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 18px 45px rgba(34,35,79,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.style-switcher-panel.active{opacity:1;visibility:visible;transform:translateY(0)}
.style-switcher-panel h3{margin:0;color:var(--navy);font-size:17px}
.style-switcher-divider{height:1px;background:var(--border);margin:10px 0 15px}
.color-options{display:flex;gap:12px;align-items:center}
.color-option{
    width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);
    box-shadow:0 0 0 1px var(--border);cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
}
.color-option:hover{transform:scale(1.08)}
.color-option.selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.color-option.red{background:#e91e4d}.color-option.blue{background:#2196f3}.color-option.orange{background:#ff5722}.color-option.gold{background:#ffb300}.color-option.green{background:#72c51f}
.style-switcher-panel h4{margin:20px 0 10px;color:var(--navy);font-size:14px}
.theme-options{display:flex;gap:18px;color:var(--text);font-size:13px}
.theme-options label{display:flex;align-items:center;gap:5px;cursor:pointer}
.theme-options input{accent-color:var(--accent)}

/* Software project visuals */
.project-visual-new.software{background:linear-gradient(135deg,#20234f,#3b3f7a)}
.project-visual-new.api{background:linear-gradient(135deg,#183d5c,#26759e)}

@media (max-width:760px){
    .style-switcher{top:15px;right:15px}
    .style-switcher-panel{right:0;width:230px}
}


/* ==========================================
   SIDEBAR + NAV ICON POLISH
========================================== */
.sidebar{
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--accent) transparent;
}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px}
.side-nav{
    flex:0 0 auto;
}
.side-nav a{
    min-height:48px;
    box-sizing:border-box;
}
.side-nav a .nav-icon{
    width:22px;
    min-width:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:var(--navy);
}
.side-nav a:hover .nav-icon,
.side-nav a.active .nav-icon{
    color:var(--accent);
}
.sidebar-bottom{
    flex:0 0 auto;
    padding-top:18px;
}
.experience-skills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}
.experience-skills span{
    padding:7px 10px;
    border-radius:20px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--navy);
    font-size:10px;
    font-weight:700;
}
.experience-skills span::before{
    content:"";
    display:inline-block;
    width:5px;
    height:5px;
    margin-right:6px;
    vertical-align:middle;
    border-radius:50%;
    background:var(--accent);
}
@media(max-width:760px){
    .sidebar{
        overflow:visible;
    }
}

.social-links a i{font-size:15px;line-height:1}

/* ==========================================
   REAL PROJECT IMAGES
   ========================================== */
.image-visual{
    position:relative;
    overflow:hidden;
    padding:0;
    background:#141628;
}
.image-visual img{
    display:block;
    width:100%;
    height:260px;
    object-fit:cover;
    object-position:center center;
    transition:transform .45s ease,filter .3s ease;
}
.project-featured-new .image-visual img{height:330px}
.image-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(10,12,28,0) 48%,rgba(10,12,28,.62) 100%);
    pointer-events:none;
}
.image-visual>span{
    position:absolute;
    left:24px;
    right:24px;
    bottom:18px;
    z-index:1;
    color:#fff;
    font-size:9px;
    letter-spacing:1.5px;
    font-weight:800;
    text-align:left;
}
.project-card-new:hover .image-visual img{transform:scale(1.035)}

/* Keep image-less academic projects visually balanced. */
.project-visual-new.dsp,
.project-visual-new.energy{
    min-height:260px;
}
.project-featured-new .project-visual-new.dsp,
.project-featured-new .project-visual-new.energy{
    min-height:330px;
}

/* Dark-mode surfaces: no accidental white panels. */
body.dark .resume-premium{
    background:#1a1b21;
    border:1px solid var(--border);
    color:var(--text);
}
body.dark .resume-premium h3{color:var(--navy)}
body.dark .resume-premium p{color:var(--muted)}
body.dark .resume-file{background:#22234f;border-color:#3a3b49}
body.dark .resume-file strong{color:#fff}
body.dark .resume-file small{color:rgba(255,255,255,.68)}

@media(max-width:900px){
    .image-visual img,
    .project-featured-new .image-visual img{height:260px}
}

/* Updated project image crop handling */
.image-visual img{
    object-fit:cover;
    object-position:center center;
}
.project-card-new:not(.project-featured-new) .image-visual img{
    height:260px;
}
.project-featured-new .image-visual img{
    height:330px;
}