@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#05070a;--white:#f2f6f8;--muted:#7c8998;--dim:#4c5967;--line:rgba(255,255,255,.09);--cyan:#29e6ff;--green:#48ff9b;--violet:#806cff;--mono:"DM Mono",monospace;--sans:"Space Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--white);font-family:var(--sans);overflow-x:hidden}a,button{font:inherit}button{color:inherit}.matrix-layer,.scanlines,.grid,.glow{position:fixed;inset:0;pointer-events:none}.matrix-layer{z-index:1;opacity:.065}.scanlines{z-index:2;opacity:.07;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.035) 4px)}.grid{z-index:0;opacity:.2;background-image:linear-gradient(rgba(41,230,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(41,230,255,.04) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse at 70% 45%,black,transparent 70%)}.glow{z-index:0;inset:auto;border-radius:50%;filter:blur(110px)}.glow-cyan{width:520px;height:520px;right:-220px;top:18%;background:var(--cyan);opacity:.055}.glow-green{width:360px;height:360px;left:15%;bottom:-250px;background:var(--green);opacity:.025}
.site-header{height:82px;position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:25px;padding:0 40px;background:rgba(5,7,10,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.identity{display:flex;align-items:center;gap:15px;color:#fff;text-decoration:none;min-width:330px}.identity img{height:56px;width:auto;display:block;object-fit:contain}.identity-code{padding-left:14px;border-left:1px solid var(--line);font:400 .53rem var(--mono);letter-spacing:.1em;color:#596675}.top-status{margin-left:auto;color:#566473;font:400 .55rem var(--mono);letter-spacing:.1em}.top-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:7px}nav{display:flex;gap:1px}nav a{position:relative;padding:10px;color:#768290;text-decoration:none;font:400 .59rem var(--mono);letter-spacing:.06em}nav a:first-letter{color:var(--cyan)}nav a span{margin-left:5px}nav a:after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:.25s}nav a:hover,nav a.active{color:#fff}nav a.active:after,nav a:hover:after{transform:scaleX(1)}.menu-toggle{display:none}
.index-main{position:relative;z-index:10;width:min(1540px,calc(100% - 70px));height:calc(100vh - 142px);margin:auto}.hero-v4{position:relative;height:100%;display:grid;grid-template-columns:minmax(340px,.82fr) minmax(500px,1.18fr);align-items:center;gap:5vw;padding:35px 4vw}.portrait-column{position:relative;justify-self:center;width:min(430px,100%)}.portrait-wrap{position:relative;width:100%;aspect-ratio:.82;padding:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.018);box-shadow:30px 40px 100px rgba(0,0,0,.45)}.portrait-wrap img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.9);transition:.4s}.portrait-wrap:hover img{filter:contrast(1.08) saturate(1)}.portrait-tag{position:absolute;z-index:5;top:24px;left:24px;color:var(--green);background:rgba(5,7,10,.78);padding:6px 8px;font:400 .51rem var(--mono)}.portrait-frame{position:absolute;z-index:6;width:32px;height:32px;border-color:var(--cyan)}.frame-a{top:-1px;left:-1px;border-left:2px solid;border-top:2px solid}.frame-b{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}.portrait-line{position:absolute;z-index:5;left:12px;right:12px;top:14%;height:1px;background:rgba(72,255,155,.5);box-shadow:0 0 13px rgba(72,255,155,.35);animation:scan 4s infinite}.portrait-coords{position:absolute;z-index:5;bottom:22px;left:23px;color:#6b7886;font:400 .49rem var(--mono);line-height:1.6}.photo-switch{display:block;margin:15px auto 0;background:transparent;color:#5d6b7a;cursor:pointer;font:400 .54rem var(--mono);letter-spacing:.09em}.photo-switch:hover{color:#fff}.photo-switch:first-letter{color:var(--cyan)}.portrait-caption{margin-top:23px;border-left:1px solid var(--cyan);padding-left:13px}.portrait-caption span{display:block;color:#e6edf2;font:500 .73rem var(--mono);letter-spacing:.08em}.portrait-caption small{display:block;margin-top:5px;color:#586675;font:400 .48rem var(--mono)}
.hero-content{position:relative;z-index:4;max-width:790px}.terminal{font:400 .62rem var(--mono);color:#718090;margin-bottom:29px}.terminal strong{margin-left:10px;color:#c1ccd5;font-weight:400}.terminal em{color:var(--green);font-style:normal;animation:blink .8s steps(1) infinite}.green{color:var(--green)}.cyan{color:var(--cyan)}.eyebrow{display:flex;gap:10px;align-items:center;color:var(--cyan);font:400 .59rem var(--mono);letter-spacing:.14em;margin-bottom:15px}.eyebrow b{color:#465463;font-weight:400}h1{font-size:clamp(4.6rem,8.7vw,9rem);line-height:.76;letter-spacing:-.075em}h1 span{display:block}h1 strong{display:block;color:transparent;-webkit-text-stroke:1px rgba(242,246,248,.55)}.hero-role{display:flex;gap:14px;align-items:center;margin-top:32px}.role-index{color:var(--cyan);font:400 .55rem var(--mono)}.hero-role div{border-left:2px solid var(--cyan);padding-left:13px}.hero-role small{color:#596675;font:400 .52rem var(--mono);letter-spacing:.13em}.hero-role p{margin-top:5px;color:#d9e1e8;font-size:1.02rem;line-height:1.3}.hero-role b{font-weight:600;color:#fff}.lead{max-width:600px;margin-top:23px;color:#82909f;font-size:.91rem;line-height:1.75}.lead strong{color:#dfe6ed}.hero-buttons{display:flex;gap:9px;margin-top:28px}.button-main,.button-line{padding:13px 15px;text-decoration:none;font:700 .61rem var(--mono);letter-spacing:.07em}.button-main{color:#041014;background:var(--cyan);box-shadow:0 0 28px rgba(41,230,255,.12)}.button-main b,.button-line b{margin-left:25px}.button-line{color:#cdd6df;border:1px solid var(--line);background:rgba(255,255,255,.02)}.button-main:hover,.button-line:hover{transform:translateY(-2px)}.quick-metrics{display:flex;margin-top:49px}.quick-metrics div{min-width:120px;padding:0 18px;border-left:1px solid var(--line)}.quick-metrics div:first-child{padding-left:0;border-left:0}.quick-metrics strong{display:block;color:#fff;font:500 1.2rem var(--mono)}.quick-metrics strong span{color:var(--cyan)}.quick-metrics small{display:block;margin-top:4px;color:#566473;font:400 .49rem var(--mono)}
.network-art{position:absolute;right:-1%;top:7%;bottom:5%;width:50%;opacity:.48;z-index:1}.art-title{position:absolute;top:0;right:0;color:#465362;font:400 .5rem var(--mono);letter-spacing:.1em}.art-node{position:absolute;z-index:3;width:63px;height:63px;display:grid;place-items:center;border:1px solid rgba(41,230,255,.25);background:rgba(5,8,11,.7);color:#84919f;font:400 .48rem var(--mono)}.n-core{left:44%;top:14%;border-color:rgba(72,255,155,.42);color:var(--green)}.n-fw{left:15%;top:43%}.n-vm{right:8%;top:36%}.n-bkp{left:26%;bottom:13%}.n-lan{right:17%;bottom:10%}.art-link{position:absolute;height:1px;transform-origin:left;background:linear-gradient(90deg,transparent,rgba(41,230,255,.55),transparent)}.al1{left:30%;top:35%;width:185px;transform:rotate(70deg)}.al2{left:25%;top:51%;width:220px;transform:rotate(-12deg)}.al3{left:48%;top:49%;width:180px;transform:rotate(-25deg)}.al4{left:37%;top:65%;width:190px;transform:rotate(18deg)}.packet{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.pk1{left:45%;top:34%;animation:pkt1 3s infinite}.pk2{left:40%;top:53%;animation:pkt2 4s infinite}.pk3{left:56%;top:62%;animation:pkt3 3.4s infinite}@keyframes pkt1{50%{transform:translate(65px,80px);opacity:.2}}@keyframes pkt2{50%{transform:translate(90px,-18px);opacity:.2}}@keyframes pkt3{50%{transform:translate(-90px,28px);opacity:.2}}@keyframes scan{0%,100%{top:13%;opacity:0}12%{opacity:.7}50%{top:87%;opacity:.45}88%{opacity:0}}@keyframes blink{50%{opacity:.2}}.big-code{position:absolute;right:-1%;bottom:-4%;color:rgba(255,255,255,.025);font:700 clamp(5rem,12vw,13rem) var(--mono);letter-spacing:-.12em;z-index:0}.big-code span{color:rgba(41,230,255,.08)}
.site-footer{position:relative;z-index:10;width:min(1540px,calc(100% - 70px));height:60px;margin:auto;border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;color:#475361;font:400 .5rem var(--mono);letter-spacing:.08em}.footer-right{margin-left:auto;color:#5c796b}

/* BOOK */
.book-main{position:relative;z-index:10;width:min(1300px,calc(100% - 70px));margin:auto}.book-intro{min-height:430px;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:8vw;padding:95px 4vw 80px;border-bottom:1px solid var(--line)}.section-code{color:var(--cyan);font:400 .55rem var(--mono);letter-spacing:.14em}.book-intro h2,.contact-v4 h2{margin-top:17px;font-size:clamp(3.7rem,7vw,7.2rem);line-height:.8;letter-spacing:-.075em}.book-intro h2 em,.contact-v4 h2 em{color:transparent;-webkit-text-stroke:1px rgba(242,246,248,.5);font-style:normal}.book-intro>p{max-width:430px;color:#83909e;font-size:.93rem;line-height:1.8}.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:100px 4vw}.showcase-image{position:relative}.showcase-image img{width:100%;height:480px;object-fit:cover;filter:saturate(.75) contrast(1.08);border:1px solid var(--line)}.showcase-image span{position:absolute;bottom:15px;left:15px;padding:6px 8px;background:rgba(5,7,10,.85);color:var(--green);font:400 .5rem var(--mono)}.showcase-copy{align-self:center}.showcase-copy h3{margin:17px 0;color:#fff;font-size:clamp(2.5rem,4.5vw,4.6rem);line-height:.9;letter-spacing:-.06em}.showcase-copy h3 em{font-style:normal;color:var(--cyan)}.showcase-copy p{max-width:500px;color:#84909e;line-height:1.8;font-size:.91rem}.tag-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}.tag-cloud b{padding:6px 8px;border:1px solid rgba(41,230,255,.13);color:#71aeb7;font:400 .5rem var(--mono)}.book-section{padding:105px 4vw;border-top:1px solid var(--line)}.section-heading{display:flex;gap:25px;align-items:flex-start;margin-bottom:50px}.section-heading>span{color:var(--cyan);font:400 .65rem var(--mono)}.section-heading small{color:#536170;font:400 .52rem var(--mono);letter-spacing:.13em}.section-heading h2{margin-top:8px;font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.06em}.timeline-v4{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.timeline-v4 article{min-height:300px;padding:28px;background:#070a0e}.timeline-v4 .date{color:var(--cyan);font:400 .55rem var(--mono)}.timeline-v4 h3{margin-top:25px;font-size:1.25rem}.timeline-v4 article>b{display:block;margin-top:7px;color:#5d6b7a;font:400 .54rem var(--mono)}.timeline-v4 p{margin-top:22px;color:#7e8b99;font-size:.83rem;line-height:1.7}.timeline-v4 mark{display:inline-block;margin-top:20px;padding:5px 7px;background:rgba(72,255,155,.06);color:var(--green);font:400 .49rem var(--mono)}.skills-v4{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.skill-category{}.skills-v4 article{min-height:230px;padding:25px;border:1px solid var(--line);background:rgba(255,255,255,.015);transition:.25s}.skills-v4 article:hover{border-color:rgba(41,230,255,.3);transform:translateY(-4px)}.skills-v4 article>span{color:var(--cyan);font:400 .52rem var(--mono)}.skills-v4 h3{margin:28px 0 12px;font-size:1rem}.skills-v4 p{color:#7e8b99;font-size:.78rem;line-height:1.8}.project-grid{display:grid;gap:10px}.project-grid article{display:grid;grid-template-columns:95px 1fr;gap:20px;padding:25px;border:1px solid var(--line);background:rgba(255,255,255,.015)}.project-number{color:#26333f;font:500 2.7rem var(--mono)}.project-grid h3{font-size:1.1rem}.project-grid p{margin:7px 0;color:#7e8b99;font-size:.82rem}.project-grid b{color:#5eabb4;font:400 .5rem var(--mono)}.photo-strip{display:grid;grid-template-columns:1.3fr .7fr;gap:10px;padding:0 4vw 105px}.photo-strip div{position:relative;height:360px;overflow:hidden}.photo-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.1);transition:.5s}.photo-strip div:hover img{transform:scale(1.03);filter:saturate(.9)}.photo-strip span{position:absolute;left:15px;bottom:15px;background:rgba(5,7,10,.85);padding:6px 8px;color:var(--green);font:400 .5rem var(--mono)}.education-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}.education-row>b{color:var(--cyan);font:400 .55rem var(--mono)}.education-row span{color:#dce4eb;font-size:.9rem}.education-row small{color:#687584;font-size:.72rem}.contact-v4{padding:115px 4vw 135px;border-top:1px solid var(--line)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:55px;border-top:1px solid var(--line)}.contact-grid a{padding:24px 0;border-bottom:1px solid var(--line);color:#e0e7ed;text-decoration:none;font:400 .9rem var(--mono)}.contact-grid a:nth-child(odd){padding-right:30px;border-right:1px solid var(--line)}.contact-grid a:nth-child(even){padding-left:30px}.contact-grid small{display:block;margin-bottom:7px;color:#52606e;font-size:.5rem}.contact-grid a:hover{color:var(--cyan)}


/* =========================
   V5 — TYPOGRAPHY / IDENTITY PASS
   ========================= */

/* Header / identity */
.site-header{
    height:92px;
    padding:0 42px;
}
.identity{
    min-width:390px;
    gap:18px;
}
.identity img{
    height:72px;
}
.identity-code{
    padding-left:16px;
    font-size:.64rem;
    letter-spacing:.10em;
}
.top-status{
    font-size:.66rem;
}
nav{
    gap:4px;
}
nav a{
    padding:12px 10px;
    font-size:.70rem;
    letter-spacing:.055em;
}
nav a span{
    margin-left:6px;
}

/* Profile / hero micro typography */
.terminal{
    font-size:.70rem;
}
.eyebrow{
    font-size:.67rem;
}
.role-index{
    font-size:.64rem;
}
.hero-role small{
    font-size:.63rem;
    letter-spacing:.11em;
}
.photo-switch{
    font-size:.63rem;
}
.portrait-caption span{
    font-size:.82rem;
}
.portrait-caption small{
    font-size:.60rem;
    line-height:1.5;
}
.portrait-coords{
    font-size:.59rem;
}
.quick-metrics small{
    font-size:.58rem;
    letter-spacing:.07em;
}

/* Footer */
.site-footer{
    font-size:.58rem;
}

/* Book */
.section-code{
    font-size:.64rem;
}
.book-intro>p{
    font-size:.98rem;
}
.section-heading>span{
    font-size:.70rem;
}
.section-heading small{
    font-size:.62rem;
}
.showcase-image span,
.photo-strip span{
    font-size:.60rem;
}
.tag-cloud b{
    font-size:.59rem;
}
.timeline-v4 .date{
    font-size:.64rem;
}
.timeline-v4 article>b{
    font-size:.62rem;
}
.timeline-v4 mark{
    font-size:.57rem;
}
.skills-v4 article>span{
    font-size:.62rem;
}
.project-grid b{
    font-size:.59rem;
}
.education-row>b{
    font-size:.64rem;
}
.education-row small{
    font-size:.80rem;
}
.contact-grid small{
    font-size:.59rem;
}
.contact-grid a{
    font-size:.98rem;
}

/* Top navigation stays readable even on wide screens */
@media(max-width:1100px){
    .site-header{
        height:86px;
        padding:0 28px;
    }
    .identity{
        min-width:300px;
    }
    .identity img{
        height:64px;
    }
    nav a{
        padding-inline:8px;
        font-size:.66rem;
    }
}

@media(max-width:850px){
    .site-header{
        height:78px;
        padding:0 18px;
    }
    .identity{
        min-width:0;
    }
    .identity img{
        height:60px;
    }
    nav{
        top:78px;
    }
    nav a{
        padding:16px 11px;
        font-size:.70rem;
    }
    .identity-code{
        display:none;
    }
    .top-status{
        display:none;
    }
    .portrait-caption small{
        font-size:.57rem;
    }
    .site-footer{
        font-size:.53rem;
    }
}

@media(max-width:520px){
    .identity img{
        height:55px;
    }
    nav a{
        font-size:.67rem;
    }
    .terminal{
        font-size:.64rem;
    }
    .eyebrow{
        font-size:.61rem;
    }
    .portrait-coords{
        font-size:.56rem;
    }
    .section-code{
        font-size:.60rem;
    }
}

/* =========================
   V6 — CV / BOOK SEPARATION
   ========================= */
.site-header nav button{
    position:relative;
    padding:12px 10px;
    border:0;
    background:transparent;
    cursor:pointer;
    color:#768290;
    font:400 .70rem var(--mono);
    letter-spacing:.055em;
}
.site-header nav button span{margin-left:5px}
.site-header nav button:after{
    content:"";
    position:absolute;left:9px;right:9px;bottom:1px;height:1px;
    background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:.25s
}
.site-header nav button:hover{color:#fff}
.site-header nav button:hover:after{transform:scaleX(1)}

.profile-facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:31px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.profile-facts div{padding:13px 14px 13px 0;border-right:1px solid var(--line)}
.profile-facts div:not(:first-child){padding-left:14px}
.profile-facts div:last-child{border-right:0}
.profile-facts small{display:block;color:#536170;font:400 .52rem var(--mono);letter-spacing:.09em}
.profile-facts strong{display:block;margin-top:6px;color:#cdd6de;font:500 .60rem var(--mono);line-height:1.4}

.panel-backdrop{
    position:fixed;
    inset:92px 0 0 0;
    z-index:300;
    background:rgba(0,0,0,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s;
    backdrop-filter:blur(3px)
}
.panel-backdrop.open{opacity:1;pointer-events:auto}
.side-panel{
    position:fixed;
    z-index:301;
    top:92px;
    right:0;
    width:min(780px,95vw);
    height:calc(100vh - 92px);
    overflow-y:auto;
    padding:28px 42px 55px;
    background:rgba(7,10,14,.98);
    border-left:1px solid rgba(41,230,255,.17);
    box-shadow:-35px 0 100px rgba(0,0,0,.55);
    transform:translateX(102%);
    transition:transform .48s cubic-bezier(.22,1,.36,1)
}
.side-panel.open{transform:translateX(0)}
.panel-head{position:sticky;top:-28px;padding-top:28px;background:rgba(7,10,14,.98);z-index:5}
.panel-content{padding-top:40px}
.section-title{font-size:2.25rem}
.timeline-item h3{font-size:1.28rem}
.timeline-item .date{font-size:.67rem}
.timeline-item .company{font-size:.86rem}
.timeline-item p{font-size:.94rem;line-height:1.75}
.panel-note{color:var(--green)!important;font-family:var(--mono);font-size:.68rem!important}
.panel-intro{max-width:560px;margin:-15px 0 28px;color:#8b98a5;font-size:.94rem;line-height:1.75}
.skills-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.skill-panel-card{min-height:175px;padding:21px;border:1px solid var(--line);background:rgba(255,255,255,.018)}
.skill-panel-card>span{color:var(--cyan);font:400 .62rem var(--mono)}
.skill-panel-card h3{margin:22px 0 10px;font-size:1rem}
.skill-panel-card p{color:#8794a2;font-size:.82rem;line-height:1.75}
.contact-info{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-item{padding:20px;border:1px solid var(--line);background:rgba(255,255,255,.018)}
.contact-item .label{display:block;color:#536170;font:400 .60rem var(--mono);letter-spacing:.12em}
.contact-item .value{display:block;margin-top:8px}
.contact-item a{color:#dfe6ed;text-decoration:none;font-size:.88rem;word-break:break-word}
.contact-item a:hover{color:var(--cyan)}

@media(max-width:1100px){
    .site-header{height:86px}
    .panel-backdrop{inset:86px 0 0 0}
    .side-panel{top:86px;height:calc(100vh - 86px)}
    .profile-facts{grid-template-columns:repeat(2,1fr)}
    .profile-facts div:nth-child(2){border-right:0}
    .profile-facts div:nth-child(n+3){border-top:1px solid var(--line)}
    .profile-facts div:nth-child(3){padding-left:0}
}
@media(max-width:850px){
    .site-header{height:78px}
    .panel-backdrop{inset:78px 0 0 0}
    .side-panel{top:78px;height:calc(100vh - 78px);width:min(760px,100vw);padding:22px 24px 45px}
    .panel-head{top:-22px;padding-top:22px}
    .skills-panel-grid,.contact-info{grid-template-columns:1fr}
    .section-title{font-size:2rem}
    .profile-facts{grid-template-columns:1fr 1fr}
    .profile-facts strong{font-size:.56rem}
}
@media(max-width:520px){
    .profile-facts{grid-template-columns:1fr 1fr}
    .profile-facts div{padding:11px 8px 11px 0}
    .profile-facts div:not(:first-child){padding-left:8px}
    .profile-facts small{font-size:.46rem}
    .profile-facts strong{font-size:.51rem}
    .side-panel{padding-inline:18px}
    .panel-content{padding-top:30px}
    .section-title{font-size:1.8rem}
}


/* =========================================================
   V7 — PREMIUM CV MODULES / NON-OBSTRUCTIVE SIDE PANEL
   ========================================================= */

/* The panel belongs to the CV layer, not the whole viewport. */
:root{
    --panel-width: 720px;
    --panel-shift: 720px;
}

body.panel-open{
    --panel-width: min(720px, 46vw);
    --panel-shift: min(720px, 46vw);
}

body.panel-open .index-main{
    transform:translateX(calc(var(--panel-shift) * -0.5));
    width:calc(100% - var(--panel-shift));
    transition:transform .48s cubic-bezier(.22,1,.36,1), width .48s cubic-bezier(.22,1,.36,1);
}

.index-main{
    transition:transform .48s cubic-bezier(.22,1,.36,1), width .48s cubic-bezier(.22,1,.36,1);
}

body.panel-open .site-footer{
    transform:translateX(calc(var(--panel-shift) * -0.5));
    width:calc(100% - var(--panel-shift));
    transition:transform .48s cubic-bezier(.22,1,.36,1), width .48s cubic-bezier(.22,1,.36,1);
}
.site-footer{
    transition:transform .48s cubic-bezier(.22,1,.36,1), width .48s cubic-bezier(.22,1,.36,1);
}

/* No blur: the page remains crisp behind the module. */
.panel-backdrop{
    inset:92px 0 0 0;
    background:rgba(0,0,0,.22);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.panel-backdrop.open{opacity:1}

/* Panel starts under the header, leaving the global nav untouched. */
.side-panel{
    top:92px;
    width:var(--panel-width);
    height:calc(100vh - 92px);
    padding:0;
    overflow-y:auto;
    background:#080b10;
    border-left:1px solid rgba(41,230,255,.24);
    box-shadow:-25px 0 70px rgba(0,0,0,.42);
}
.side-panel::-webkit-scrollbar{width:7px}
.side-panel::-webkit-scrollbar-track{background:#07090d}
.side-panel::-webkit-scrollbar-thumb{background:#263441}
.side-panel::-webkit-scrollbar-thumb:hover{background:#3c5866}

.panel-head{
    position:sticky;
    top:0;
    height:88px;
    padding:0 34px;
    display:flex;
    align-items:center;
    background:#080b10;
    border-bottom:1px solid var(--line);
    z-index:10;
}
.panel-head:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:120px;
    height:1px;
    background:var(--cyan);
    box-shadow:0 0 14px rgba(41,230,255,.45);
}
.panel-index{
    font-size:.63rem;
    letter-spacing:.15em;
}
.panel-system{
    font-size:.57rem;
    margin-top:7px;
}
.close-panel{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    background:rgba(255,255,255,.015);
    font-size:1.55rem;
}
.close-panel:hover{
    border-color:rgba(41,230,255,.45);
    background:rgba(41,230,255,.035);
}

.panel-content{
    padding:0 34px 40px;
}

/* Module header */
.module-hero{
    min-height:175px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:42px 0 28px;
    border-bottom:1px solid var(--line);
}
.module-kicker{
    display:block;
    color:var(--cyan);
    font:400 .62rem var(--mono);
    letter-spacing:.15em;
}
.module-hero h2{
    margin-top:10px;
    color:#fff;
    font-size:3rem;
    line-height:.85;
    letter-spacing:-.06em;
}
.module-status{
    align-self:flex-end;
    margin-bottom:5px;
    color:#5e6c79;
    font:400 .54rem var(--mono);
    letter-spacing:.09em;
    white-space:nowrap;
}
.module-status i{
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 10px var(--green);
}

/* Current position card */
.current-role{
    display:grid;
    grid-template-columns:74px 1fr;
    gap:22px;
    margin-top:25px;
    padding:22px;
    border:1px solid rgba(41,230,255,.18);
    background:linear-gradient(135deg,rgba(41,230,255,.045),rgba(255,255,255,.012));
}
.role-marker{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border:1px solid rgba(72,255,155,.38);
    color:var(--green);
    font:400 .55rem var(--mono);
}
.role-company{
    color:var(--cyan);
    font:400 .56rem var(--mono);
    letter-spacing:.11em;
}
.current-role h3{
    margin:8px 0 9px;
    font-size:1.35rem;
}
.current-role p{
    color:#8c99a7;
    font-size:.87rem;
    line-height:1.7;
}
.role-tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:15px;
}
.role-tags span{
    padding:5px 7px;
    color:#72aeb6;
    border:1px solid rgba(41,230,255,.12);
    font:400 .52rem var(--mono);
}

/* Experience */
.experience-list{
    margin-top:28px;
}
.experience-row{
    display:grid;
    grid-template-columns:105px 1fr;
    gap:20px;
    padding:25px 0;
    border-top:1px solid var(--line);
}
.experience-row:last-child{
    border-bottom:1px solid var(--line);
}
.experience-row.featured{
    padding-top:27px;
}
.experience-date{
    color:#5c6a78;
    font:400 .61rem var(--mono);
    line-height:1.6;
}
.experience-date span{
    color:var(--cyan);
}
.experience-topline{
    display:flex;
    justify-content:space-between;
    color:#4e5b69;
    font:400 .52rem var(--mono);
    letter-spacing:.08em;
}
.experience-topline span{color:var(--cyan)}
.experience-content h3{
    margin:13px 0 9px;
    font-size:1.18rem;
}
.experience-content p{
    color:#8996a4;
    font-size:.86rem;
    line-height:1.75;
}
.experience-content strong{color:#dce5eb;font-weight:500}
.panel-note{
    color:var(--green)!important;
    margin-top:11px;
    font:400 .60rem var(--mono)!important;
}
.module-footer-line{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:25px;
    color:#4c5967;
    font:400 .52rem var(--mono);
    letter-spacing:.08em;
}

/* Skills */
.skills-intro{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
    padding:25px 0 21px;
}
.skills-intro p{
    max-width:430px;
    color:#8794a2;
    font-size:.87rem;
    line-height:1.7;
}
.skills-intro strong{color:#dce4ea;font-weight:500}
.skills-intro>span{
    color:#4e606b;
    font:400 .52rem var(--mono);
    white-space:nowrap;
}
.skills-panel-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.skill-panel-card{
    min-height:170px;
    padding:20px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.014);
    transition:border-color .2s,transform .2s,background .2s;
}
.skill-panel-card:hover{
    transform:translateY(-2px);
    border-color:rgba(41,230,255,.3);
    background:rgba(41,230,255,.025);
}
.skill-panel-card>span{
    color:var(--cyan);
    font:400 .58rem var(--mono);
}
.skill-panel-card h3{
    margin:24px 0 11px;
    font-size:.98rem;
}
.skill-panel-card p{
    color:#84919f;
    font-size:.78rem;
    line-height:1.8;
}

/* Contact */
.panel-intro{
    max-width:540px;
    margin:26px 0;
    color:#8996a4;
    font-size:.91rem;
    line-height:1.75;
}
.contact-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.contact-item{
    padding:20px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.015);
}
.contact-item .label{
    font-size:.60rem;
}
.contact-item a{
    font-size:.88rem;
}

/* Desktop: preserve a useful minimum canvas */
@media(min-width:1101px){
    body.panel-open .hero-v4{
        gap:2.5vw;
        padding-left:2vw;
        padding-right:2vw;
    }
    body.panel-open .hero-content h1{
        font-size:clamp(3.9rem,6.5vw,7rem);
    }
}

/* Tablet/mobile: a true full-width module is more usable than crushing the CV. */
@media(max-width:850px){
    body.panel-open .index-main,
    body.panel-open .site-footer{
        transform:none;
        width:calc(100% - 36px);
    }
    .panel-backdrop{
        inset:78px 0 0 0;
        background:rgba(0,0,0,.35);
    }
    .side-panel{
        top:78px;
        height:calc(100vh - 78px);
        width:min(760px,100vw);
    }
    .panel-head{
        height:78px;
        padding:0 24px;
    }
    .panel-content{
        padding-inline:24px;
    }
    .module-hero{min-height:150px}
}

@media(max-width:520px){
    .module-hero{
        min-height:130px;
        align-items:center;
    }
    .module-hero h2{font-size:2.45rem}
    .module-status{display:none}
    .current-role{
        grid-template-columns:1fr;
        gap:15px;
        padding:18px;
    }
    .experience-row{
        grid-template-columns:1fr;
        gap:8px;
    }
    .skills-intro{
        display:block;
    }
    .skills-intro>span{
        display:block;
        margin-top:12px;
    }
    .skills-panel-grid,.contact-info{
        grid-template-columns:1fr;
    }
    .module-footer-line{
        flex-direction:column;
        gap:6px;
    }
}


/* =========================================================
   V8 — EDUCATION MODULE + BOOK CONSTRUCTION
   ========================================================= */

/* Six-item navigation */
.site-header nav{
    gap:2px;
}
.site-header nav a,
.site-header nav button{
    white-space:nowrap;
}

/* Formation module */
.education-intro{
    display:grid;
    grid-template-columns:82px 1fr;
    gap:20px;
    align-items:center;
    margin:26px 0 10px;
    padding:20px;
    border:1px solid var(--line);
    background:linear-gradient(135deg,rgba(72,255,155,.035),rgba(255,255,255,.012));
}
.education-stamp{
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    border:1px solid rgba(72,255,155,.32);
    color:var(--green);
    text-align:center;
    font:400 .53rem/1.45 var(--mono);
}
.education-intro p{
    color:#8996a4;
    font-size:.86rem;
    line-height:1.7;
}
.education-intro>div>span{
    display:block;
    margin-top:10px;
    color:#52616d;
    font:400 .51rem var(--mono);
    letter-spacing:.08em;
}
.education-list{
    margin-top:25px;
}
.education-item{
    display:grid;
    grid-template-columns:105px 1fr;
    gap:20px;
    padding:25px 0;
    border-top:1px solid var(--line);
}
.education-item:last-child{
    border-bottom:1px solid var(--line);
}
.education-year{
    color:#5b6977;
    font:400 .61rem/1.6 var(--mono);
}
.education-year span{
    color:var(--cyan);
}
.education-topline{
    display:flex;
    justify-content:space-between;
    color:#4e5b69;
    font:400 .52rem var(--mono);
    letter-spacing:.08em;
}
.education-topline span{color:var(--cyan)}
.education-content h3{
    margin:13px 0 7px;
    font-size:1.13rem;
}
.education-school{
    color:var(--cyan);
    font:400 .61rem var(--mono);
    letter-spacing:.05em;
}
.education-content p{
    margin-top:12px;
    color:#8996a4;
    font-size:.84rem;
    line-height:1.7;
}
.education-tags{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    margin-top:13px;
}
.education-tags span{
    padding:5px 7px;
    border:1px solid rgba(41,230,255,.12);
    color:#70aeb6;
    font:400 .50rem var(--mono);
}

/* Book construction banner */
.construction-banner{
    position:relative;
    min-height:220px;
    display:grid;
    grid-template-columns:72px 1fr auto;
    gap:28px;
    align-items:center;
    margin:35px 0 0;
    padding:38px;
    overflow:hidden;
    border:1px solid rgba(41,230,255,.18);
    background:
        linear-gradient(135deg,rgba(41,230,255,.055),rgba(255,255,255,.012) 48%,rgba(72,255,155,.025));
}
.construction-banner:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 0 49.8%,rgba(41,230,255,.045) 50%,transparent 50.2%);
    pointer-events:none;
}
.construction-icon{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    border:1px solid rgba(41,230,255,.42);
    color:var(--cyan);
    font:400 1.6rem var(--mono);
}
.construction-main{
    position:relative;
    z-index:1;
}
.construction-main>span{
    color:var(--cyan);
    font:400 .56rem var(--mono);
    letter-spacing:.14em;
}
.construction-main h1{
    margin-top:10px;
    font-size:clamp(2.5rem,5vw,4.8rem);
    line-height:.85;
    letter-spacing:-.065em;
}
.construction-main h1 em{
    color:transparent;
    -webkit-text-stroke:1px rgba(242,246,248,.48);
    font-style:normal;
}
.construction-main p{
    max-width:600px;
    margin-top:15px;
    color:#7f8c9a;
    font-size:.86rem;
    line-height:1.7;
}
.construction-state{
    position:relative;
    z-index:1;
    align-self:start;
    color:#5b6c76;
    font:400 .53rem var(--mono);
    white-space:nowrap;
}
.construction-state i{
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 10px var(--green);
}

/* Book intro sits below construction banner with slightly less top air */
.book-main>.book-intro{
    margin-top:0;
}

/* Ensure Book's nav reflects the new CV architecture */
.book-page .site-header nav a,
.book-page .site-header nav button{
    font-size:.65rem;
}

/* Desktop panel remains a sibling of the CV, not an overlay on it. */
@media(min-width:1101px){
    body.panel-open .index-main{
        transform:translateX(calc(var(--panel-shift) * -0.48));
        width:calc(100% - var(--panel-shift));
    }
}

@media(max-width:1100px){
    .construction-banner{
        grid-template-columns:62px 1fr;
        gap:20px;
    }
    .construction-state{
        grid-column:2;
        margin-top:-10px;
    }
}

@media(max-width:850px){
    .construction-banner{
        grid-template-columns:54px 1fr;
        padding:27px 22px;
    }
    .construction-icon{
        width:50px;
        height:50px;
    }
    .construction-state{
        grid-column:2;
    }
    .education-intro{
        grid-template-columns:72px 1fr;
    }
    .education-stamp{
        width:62px;
        height:62px;
    }
}

@media(max-width:520px){
    .construction-banner{
        grid-template-columns:1fr;
        gap:15px;
    }
    .construction-state{
        grid-column:auto;
        margin:0;
    }
    .construction-main h1{
        font-size:12vw;
    }
    .education-intro{
        grid-template-columns:1fr;
    }
    .education-item{
        grid-template-columns:1fr;
        gap:8px;
    }
    .education-topline{
        gap:12px;
    }
}