:root{
  --bg:#0c0f1f; --bg2:#141936; --panel:#171c3b; --line:rgba(255,255,255,.1);
  --text:#eceaff; --mute:#9aa0c3; --violet:#8a6bff; --mint:#3ee8c8; --amber:#ffb454;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'DM Sans','Segoe UI',system-ui,sans-serif;
  --r-lg:26px; --r-md:14px; --r-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:1.05rem;line-height:1.65;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60vw 50vh at 85% 10%,rgba(138,107,255,.18),transparent 70%),radial-gradient(50vw 50vh at 5% 90%,rgba(62,232,200,.09),transparent 70%)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(18px,4vw,48px);
  background:linear-gradient(180deg,rgba(12,15,31,.92),rgba(12,15,31,.55));backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.15rem}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--violet),var(--mint));color:#0c0f1f;font-weight:800;transition:transform .8s}
.brand:hover .brand-mark{transform:rotateY(360deg)}
nav ul{display:flex;gap:4px}
nav ul a{padding:8px 14px;border-radius:99px;color:var(--mute);font-size:.95rem;transition:.25s}
nav ul a:hover{color:var(--text);background:rgba(255,255,255,.06)}
nav ul a.active{color:#0c0f1f;background:var(--text);font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:8px 16px;border-radius:99px;font:inherit;cursor:pointer}

main{position:relative;z-index:1;padding:110px clamp(18px,5vw,64px) 60px;max-width:1240px;margin:0 auto;animation:enter .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
@keyframes enter{from{opacity:0;transform:perspective(1200px) rotateX(8deg) translateY(30px)}to{opacity:1;transform:none}}
body.leaving main{transition:.35s ease-in;opacity:0;transform:perspective(1200px) rotateY(-14deg) translateX(-40px)}

h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.8rem,8vw,6.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;margin-bottom:18px}
h3{font-size:1.3rem;font-weight:700}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--mute);max-width:56ch}
.page-head{margin-bottom:56px;max-width:820px}
.page-head h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.page-head p{margin-top:16px}
section{margin-top:96px}
.muted{color:var(--mute)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:99px;font-weight:600;border:1px solid var(--line);transition:transform .25s,box-shadow .25s,background .25s;cursor:pointer;font-family:var(--body);font-size:1rem;color:var(--text);background:transparent}
.btn.primary{background:linear-gradient(135deg,var(--violet),#5f8bff);border-color:transparent;box-shadow:0 12px 30px -10px rgba(138,107,255,.7)}
.btn.primary:hover{box-shadow:0 18px 36px -10px rgba(138,107,255,.9)}
.btn:hover{transform:translateY(-3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;min-height:calc(100vh - 170px)}
.hello{color:var(--mint);font-weight:600;margin-bottom:14px}
.hero h1 span{display:block}
.hero h1 .l2{background:linear-gradient(90deg,var(--violet),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.role{margin-top:22px;font-size:1.25rem;min-height:1.7em;color:var(--text)}
.role b{color:var(--amber);font-weight:600}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--amber);vertical-align:-3px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stage{perspective:1100px;display:grid;place-items:center;padding:30px}
.portrait{position:relative;width:min(340px,80vw);aspect-ratio:3/4;transform-style:preserve-3d;border-radius:var(--r-lg)}
.portrait .frame{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14)}
.portrait .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portrait::before{content:"";position:absolute;inset:-14px;border-radius:34px;border:1.5px solid rgba(138,107,255,.55);transform:translateZ(-50px)}
.portrait::after{content:"";position:absolute;inset:-28px;border-radius:42px;border:1.5px dashed rgba(62,232,200,.35);transform:translateZ(-100px)}
.chip{position:absolute;padding:8px 16px;border-radius:99px;background:rgba(20,25,54,.88);border:1px solid var(--line);font-size:.9rem;font-weight:600;backdrop-filter:blur(6px);animation:float 5s ease-in-out infinite;white-space:nowrap}
.chip.c1{top:6%;left:-16%;transform:translateZ(90px);color:var(--mint)}
.chip.c2{top:38%;right:-18%;transform:translateZ(120px);color:var(--violet);animation-delay:-1.5s}
.chip.c3{bottom:14%;left:-12%;transform:translateZ(80px);color:var(--amber);animation-delay:-3s}
.chip.c4{bottom:-4%;right:-6%;transform:translateZ(110px);animation-delay:-2s}
@keyframes float{50%{margin-top:-14px}}

/* tilt */
.tilt{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform;position:relative}
.tilt.leave{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.13),transparent 60%);opacity:0;transition:opacity .3s}
.tilt:hover::after{opacity:1}

.card{background:linear-gradient(160deg,var(--panel),rgba(23,28,59,.6));border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:20px;transform:translateZ(40px);background:rgba(138,107,255,.16)}
.card h3{transform:translateZ(30px);margin-bottom:10px}
.card p{color:var(--mute);transform:translateZ(15px)}
.card .go{display:inline-block;margin-top:18px;color:var(--mint);font-weight:600;transform:translateZ(25px)}

/* cube */
.cube-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.scene{--s:270px;width:var(--s);height:var(--s);margin:70px auto;perspective:1000px;cursor:grab;touch-action:pan-y;user-select:none}
.scene:active{cursor:grabbing}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d}
.face{position:absolute;inset:0;padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(145deg,rgba(138,107,255,.34),rgba(20,25,54,.92));backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px}
.face h4{font-family:var(--display);font-size:1.3rem;color:var(--mint)}
.face p{font-size:.98rem;line-height:1.5}
.face.f-front{transform:translateZ(calc(var(--s)/2))}
.face.f-back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.face.f-right{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.face.f-left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.face.f-top{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.face.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2));align-items:center;text-align:center}
.hint{text-align:center;color:var(--mute);font-size:.9rem;margin-top:-30px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{padding:7px 15px;border-radius:99px;border:1px solid var(--line);font-size:.92rem;background:rgba(255,255,255,.04)}
.pill.hl{border-color:rgba(62,232,200,.5);color:var(--mint)}

/* timeline */
.timeline{position:relative;perspective:1400px}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--violet),var(--mint),transparent);transform:translateX(-50%)}
.t-item{position:relative;width:calc(50% - 44px);margin-bottom:56px;opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.t-item:nth-child(odd){transform:rotateY(28deg) translateZ(-160px) translateX(-30px);transform-origin:100% 50%}
.t-item:nth-child(even){margin-left:calc(50% + 44px);transform:rotateY(-28deg) translateZ(-160px) translateX(30px);transform-origin:0 50%}
.t-item.in,.t-item.in:nth-child(odd),.t-item.in:nth-child(even){opacity:1;transform:none}
.t-item::before{content:"";position:absolute;top:34px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:3px solid var(--mint);box-shadow:0 0 0 6px rgba(62,232,200,.15)}
.t-item:nth-child(odd)::before{right:-53px}
.t-item:nth-child(even)::before{left:-53px}
.t-item.now::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 6px rgba(255,180,84,.2),0 0 24px rgba(255,180,84,.6);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(255,180,84,.05),0 0 30px rgba(255,180,84,.8)}}
.t-item .when{color:var(--mint);font-weight:600;font-size:.95rem}
.t-item.now .when{color:var(--amber)}
.t-item h3{margin:6px 0 2px}
.t-item .org{color:var(--mute);margin-bottom:14px}
.t-item li{padding-left:20px;position:relative;margin-top:8px;color:#cfd0ea;font-size:1rem}
.t-item li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--violet)}
.badge{display:inline-block;padding:3px 12px;border-radius:99px;background:rgba(255,180,84,.16);color:var(--amber);font-size:.82rem;font-weight:600;margin-left:8px;vertical-align:2px}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button{padding:10px 20px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--mute);font:inherit;cursor:pointer;transition:.25s}
.filters button:hover{color:var(--text)}
.filters button.on{background:var(--text);color:#0c0f1f;font-weight:600;border-color:transparent}
.proj{padding:28px;display:flex;flex-direction:column;gap:12px;min-height:250px}
.proj .kind{font-size:.85rem;font-weight:600;transform:translateZ(30px);color:var(--amber)}
.proj .kind.ml{color:var(--mint)}
.proj .kind.ac{color:var(--violet)}
.proj h3{transform:translateZ(36px);font-size:1.2rem}
.proj p{color:var(--mute);font-size:.98rem;transform:translateZ(18px);flex:1}
.proj .tags{display:flex;flex-wrap:wrap;gap:8px;transform:translateZ(24px)}
.proj .tags span{font-size:.8rem;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.07)}
.proj.hide{display:none}

/* education */
.edu{display:grid;grid-template-columns:1fr 1fr;gap:24px;perspective:1200px}
.edu .card h3{font-size:1.5rem}
.edu .yrs{color:var(--mint);font-weight:600;margin-bottom:6px}
.edu .big{font-family:var(--display);font-size:2.6rem;font-weight:800;margin-top:16px;color:var(--amber)}
.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cert{padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.cert .medal{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--amber),#ff8a5b);color:#0c0f1f;font-weight:800;transform:translateZ(40px)}
.cert h4{font-family:var(--display);font-size:1.1rem}
.cert p{color:var(--mute);font-size:.95rem}

/* teaching */
.teach-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.iso{height:360px;perspective:1000px;display:grid;place-items:center}
.stack3d{position:relative;width:250px;height:170px;transform-style:preserve-3d;animation:spin 16s linear infinite}
.stack3d .layer{position:absolute;inset:0;border-radius:20px;padding:22px;display:flex;align-items:flex-end;font-family:var(--display);font-weight:700;font-size:1.2rem;border:1px solid rgba(255,255,255,.22)}
.stack3d .layer:nth-child(1){transform:translateZ(0);background:rgba(138,107,255,.5)}
.stack3d .layer:nth-child(2){transform:translateZ(48px);background:rgba(62,232,200,.4)}
.stack3d .layer:nth-child(3){transform:translateZ(96px);background:rgba(255,180,84,.45)}
.stack3d .layer:nth-child(4){transform:translateZ(144px);background:rgba(20,25,54,.85)}
@keyframes spin{from{transform:rotateX(58deg) rotateZ(-30deg)}to{transform:rotateX(58deg) rotateZ(330deg)}}
.students{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.stu{padding:24px;text-align:center}
.avatar{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.8rem;color:#0c0f1f;background:linear-gradient(135deg,var(--mint),var(--violet));transform:translateZ(45px);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.student-photo-trigger{padding:0;border:0;cursor:zoom-in}
.student-photo-dialog{position:fixed;inset:0;margin:auto;width:max-content;max-width:min(92vw,900px);max-height:90vh;padding:48px 18px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(12,15,31,.97);color:var(--text);overflow:visible}
.student-photo-dialog::backdrop{background:rgba(4,6,14,.82);backdrop-filter:blur(5px)}
.student-photo-dialog img{max-width:calc(92vw - 36px);max-height:calc(90vh - 72px);width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm)}
.student-photo-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.08);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer}
.stu h4{font-family:var(--display);font-size:1.1rem;transform:translateZ(28px)}
.stu p{color:var(--mute);font-size:.92rem;transform:translateZ(15px)}
.stu .course{color:var(--amber);font-size:.88rem;font-weight:600;margin-bottom:4px}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px}
.c-list{display:grid;gap:18px;align-content:start}
.c-row{display:flex;gap:16px;align-items:center;padding:20px 24px}
.c-row .ico{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(62,232,200,.14);transform:translateZ(35px)}
.c-row small{color:var(--mute);display:block;font-size:.85rem}
.c-row b{font-weight:600;word-break:break-word}
form{display:grid;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,textarea{font:inherit;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--violet);border-color:transparent}
textarea{min-height:150px;resize:vertical}

footer{position:relative;z-index:1;text-align:center;padding:40px 20px 50px;color:var(--mute);font-size:.92rem;border-top:1px solid var(--line);margin-top:40px}
footer a{color:var(--text);margin:0 10px}
footer a:hover{color:var(--mint)}
.cta{margin-top:110px;text-align:center;padding:64px 24px}
.cta h2{max-width:20ch;margin:0 auto 14px}

@media(max-width:940px){
  .hero,.cube-wrap,.teach-hero,.contact{grid-template-columns:1fr}
  .hero{min-height:auto}
  .grid3,.grid2,.edu,.certs{grid-template-columns:1fr}
  .chip.c1{left:-4%}.chip.c2{right:-4%}.chip.c3{left:-2%}
  .menu-btn{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:12px;background:rgba(12,15,31,.97);border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
  .timeline::before{left:12px}
  .t-item,.t-item:nth-child(even){width:auto;margin-left:40px}
  .t-item:nth-child(odd),.t-item:nth-child(even){transform:rotateY(-20deg) translateZ(-100px);transform-origin:0 50%}
  .t-item:nth-child(odd)::before,.t-item:nth-child(even)::before{left:-38px;right:auto}
}
@media(max-width:480px){.scene{--s:240px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .t-item{opacity:1!important;transform:none!important}
}