@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --paper:#ECEEF2; --card:#FFFFFF; --ink:#121317; --ink-2:#2A2C35; --muted:#5E6270; --line:#DFE2E8;
  --yellow:#FFD23F; --yellow-soft:#FFF4CC; --green:#16A34A; --green-soft:#DCF5E5; --blue-soft:#E3EBFF;
  --r:22px; --font:"Sora","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:24px}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--paper); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-0.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
svg.i{width:20px; height:20px; flex:none}

/* ---------- App frame ---------- */
.app{display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh}
.side{position:sticky; top:0; height:100vh; background:var(--card); border-right:1px solid var(--line); padding:26px 18px; display:flex; flex-direction:column; gap:26px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{width:42px; height:42px; border-radius:13px; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-weight:700; font-size:17px}
.brand b{display:block; font-size:16px}
.brand span{font-size:13px; color:var(--muted)}
.menu{display:grid; gap:4px}
.menu a{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; text-decoration:none; color:var(--muted); font-weight:500; font-size:15px; transition:background .2s, color .2s}
.menu a:hover{background:var(--paper); color:var(--ink)}
.menu a.active{background:var(--ink); color:#fff}
.menu a.active svg{color:var(--yellow)}
.hire{margin-top:auto; background:var(--yellow); border-radius:20px; padding:20px}
.hire b{display:block; font-size:17px; line-height:1.3; margin-bottom:6px}
.hire p{font-size:14px; margin-bottom:14px}

.main{padding:28px 32px 64px; min-width:0}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.topbar h1{font-size:28px}
.topbar p{color:var(--muted); font-size:15px}
.top-right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-size:14px; font-weight:500}
.dot{width:9px; height:9px; border-radius:50%; background:var(--green); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 var(--font); padding:13px 20px; border-radius:14px; border:2px solid var(--ink); text-decoration:none; cursor:pointer; transition:transform .15s, background .2s}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-line{background:transparent; color:var(--ink)}
.btn-line:hover{background:var(--card)}
.btn-yellow{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}
.btn svg{width:18px; height:18px}

/* ---------- Cards ---------- */
.card{background:var(--card); border-radius:var(--r); border:1px solid var(--line); padding:24px}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.card-head h2{font-size:20px}
.sec{margin-top:40px}
.sec-title{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.sec-title h2{font-size:26px}
.sec-title p{color:var(--muted); font-size:15px}

/* Overview bento */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.profile{grid-column:span 2; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center}
.avatar{position:relative; width:132px; height:132px; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,var(--yellow),#FFE89A)}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar:has(img.ph)::after{content:"Your photo"; position:absolute; inset:0; display:grid; place-items:center; font-weight:600; font-size:14px}
.avatar .online{position:absolute; right:8px; bottom:8px; width:16px; height:16px; border-radius:50%; background:var(--green); border:3px solid #fff}
.profile h2{font-size:26px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.verified{width:22px; height:22px; color:#2563EB}
.role{font-size:16px; color:var(--muted); margin:4px 0 12px}
.meta{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:14px; color:var(--muted); margin-bottom:16px}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta svg{width:16px; height:16px}
.profile .actions{display:flex; gap:10px; flex-wrap:wrap}

.term{grid-column:span 2; background:var(--ink); color:#E6E8EF; border-color:var(--ink); font-family:var(--mono); font-size:14px; line-height:1.75; display:flex; flex-direction:column}
.term-bar{display:flex; gap:7px; margin-bottom:14px}
.term-bar i{width:11px; height:11px; border-radius:50%; background:#3A3D48; display:block}
.term-bar i:first-child{background:var(--yellow)}
.term pre{margin:0; white-space:pre-wrap; font:inherit; min-height:190px}
.term .p{color:var(--yellow)}
.term .k{color:#8FB4FF}
.term .s{color:#7EE2A8}
.caret{display:inline-block; width:8px; height:16px; background:var(--yellow); vertical-align:-3px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.stat{display:flex; gap:14px; align-items:center}
.stat .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex:none}
.stat .ic svg{width:24px; height:24px}
.stat b{display:block; font-size:28px; font-weight:700; line-height:1.1}
.stat span{font-size:14px; color:var(--muted)}
.bar{height:6px; border-radius:99px; background:var(--paper); margin-top:16px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; width:0; transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.loaded .bar i{width:var(--w)}

.stack{grid-column:span 4; overflow:hidden; padding:20px 0}
.stack .card-head{padding:0 24px; margin-bottom:14px}
.stack .marquee + .marquee{margin-top:12px}
.marquee.reverse{animation-direction:reverse; animation-duration:44s}
.marquee{display:flex; gap:12px; width:max-content; animation:slide 38s linear infinite}
.stack:hover .marquee{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tool{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; background:var(--paper); font-weight:500; font-size:15px; white-space:nowrap}
.tool i{width:10px; height:10px; border-radius:3px; background:var(--ink); display:block}
.tool:nth-child(3n) i{background:var(--yellow)}
.tool:nth-child(3n+1) i{background:#8FB4FF}

/* Intro video */
.intro-card{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:32px; align-items:center; padding:20px}
.video{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--ink) center/cover no-repeat}
.video .vid-empty{position:absolute; left:20px; top:18px; color:#B8BBC7; font-size:14px; font-weight:500}
.video.has-poster .vid-empty{display:none}
.video iframe,.video video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
.play{position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; border:0; cursor:pointer; background:var(--yellow); color:var(--ink); display:grid; place-items:center; transition:transform .2s}
.play::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,210,63,.55); animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.85); opacity:1}100%{transform:scale(1.35); opacity:0}}
.play:hover{transform:scale(1.06)}
.play-ic{display:grid; place-items:center; margin-left:4px}
.vid-len{position:absolute; left:16px; bottom:16px; background:rgba(18,19,23,.75); color:#fff; font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px}
.video.playing .play,.video.playing .vid-len,.video.playing .vid-empty{display:none}
.intro-copy h2{font-size:clamp(24px,2.4vw,32px); margin-bottom:10px}
.intro-copy p{color:var(--muted); margin-bottom:16px}
.intro-points{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}
.intro-points li{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.intro-points li::before{content:""; width:20px; height:20px; flex:none; margin-top:2px; border-radius:6px; background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23121317' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* Projects */
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filter{font:500 14px var(--font); padding:9px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.filter small{opacity:.6; margin-left:4px}
.projects{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.project{background:var(--card); border-radius:var(--r); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; animation:rise .45s ease both}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.shot{position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#F3F4F7,#E4E7EE); overflow:hidden; border-bottom:1px solid var(--line)}
.shot img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s ease}
.project:hover .shot img{transform:scale(1.04)}
.shot .fallback{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; font-weight:600; color:var(--muted); font-size:14px}
.status{position:absolute; top:12px; left:12px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:#fff}
.status.live{background:var(--green-soft); color:#0F7A37}
.status.demo{background:var(--yellow-soft); color:#7A5B00}
.status.progress{background:var(--blue-soft); color:#2B4CB8}
.p-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.p-body h3{font-size:19px}
.p-type{font-size:14px; color:var(--muted); margin-top:-4px}
.p-desc{font-size:15px; color:var(--ink-2)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.tags span{font-size:12px; font-weight:500; padding:4px 9px; border-radius:8px; background:var(--paper)}
.p-foot{margin-top:auto; padding-top:8px; display:flex; justify-content:space-between; align-items:center}
.p-foot a{font-weight:600; font-size:14px; text-decoration:none; border-bottom:2px solid var(--yellow)}
.p-foot span{font-size:13px; color:var(--muted)}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:40px}

/* Services */
.services{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.svc .ic{width:48px; height:48px; border-radius:14px; background:var(--yellow-soft); display:grid; place-items:center; margin-bottom:16px}
.svc .ic svg{width:24px; height:24px}
.svc h3{font-size:18px; margin-bottom:6px}
.svc p{font-size:15px; color:var(--muted)}

/* Experience timeline */
.exp-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start}
.timeline{list-style:none; margin:0; padding:0}
.timeline li{display:grid; grid-template-columns:96px 22px 1fr; gap:12px; position:relative; padding-bottom:24px}
.timeline li:last-child{padding-bottom:0}
.timeline time{font-size:13px; font-weight:600; color:var(--muted); padding-top:2px; font-family:var(--mono)}
.timeline .node{position:relative; display:flex; justify-content:center}
.timeline .node::before{content:""; width:14px; height:14px; border-radius:50%; border:3px solid var(--ink); background:#fff; margin-top:4px; position:relative; z-index:1}
.timeline li:first-child .node::before{background:var(--yellow)}
.timeline .node::after{content:""; position:absolute; top:20px; bottom:-24px; width:2px; background:var(--line)}
.timeline li:last-child .node::after{display:none}
.timeline b{display:block; font-size:16px}
.timeline .co{font-size:14px; color:var(--muted)}
.timeline p{font-size:14px; margin-top:6px; color:var(--ink-2)}
.skills{display:grid; gap:16px}
.skill-row{display:flex; justify-content:space-between; font-size:14px; font-weight:500; margin-bottom:6px}
.skill-row span{color:var(--muted)}
.edu{margin-top:18px}
.edu div{padding:12px 0; border-top:1px solid var(--line)}
.edu b{display:block; font-size:15px}
.edu span{font-size:14px; color:var(--muted)}

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px}
.cta{background:var(--ink); color:#fff; border-color:var(--ink); padding:36px}
.cta h2{font-size:clamp(28px,3vw,38px); margin-bottom:12px; max-width:18ch}
.cta p{color:#B8BBC7; margin-bottom:24px; max-width:48ch}
.cta .btn-line{border-color:#fff; color:#fff}
.cta .btn-line:hover{background:#fff; color:var(--ink)}
.links{display:grid; gap:10px}
.link-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--paper); text-decoration:none; font-weight:500}
.link-row span{font-size:14px; color:var(--muted); font-weight:400}
.link-row:hover{background:var(--yellow-soft)}

.foot{margin-top:40px; font-size:14px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Hire me */
.btn-hire{padding:10px 18px}
.btn-hire:hover{background:#FFDC66}
.work-types{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.work-types span{font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; background:rgba(255,210,63,.14); color:var(--yellow); border:1px solid rgba(255,210,63,.35)}

/* Email sheet */
.mail-sheet{border:0; border-radius:24px; padding:24px; width:min(420px,calc(100vw - 32px)); box-shadow:0 30px 80px -20px rgba(18,19,23,.5); font-family:var(--font); color:var(--ink)}
.mail-sheet::backdrop{background:rgba(18,19,23,.45)}
.mail-sheet[open]{animation:pop .25s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.98)}to{opacity:1; transform:none}}
.sheet-head{display:flex; justify-content:space-between; align-items:center}
.sheet-head h2{font-size:20px}
.x{background:var(--paper); border:0; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.sheet-addr{font-family:var(--mono); font-size:14px; color:var(--muted); margin:6px 0 18px}
.sheet-opts{display:grid; gap:8px}
.opt{display:block; width:100%; text-align:left; padding:14px 16px; border-radius:14px; background:var(--paper); border:1px solid transparent; text-decoration:none; cursor:pointer; font:inherit; color:var(--ink)}
.opt:hover{border-color:var(--ink); background:var(--yellow-soft)}
.opt b{display:block; font-size:15px}
.opt span{font-size:13px; color:var(--muted)}
.btn.copied{background:var(--green); border-color:var(--green); color:#fff}

/* Mobile bottom nav */
.tabbar{display:none}
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; transition:all .3s; z-index:99; pointer-events:none}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .projects,.services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile,.term,.stack{grid-column:span 2}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:20px 16px 110px}
  .topbar h1{font-size:24px}
  .profile{grid-template-columns:1fr; text-align:left}
  .avatar{width:96px; height:96px; border-radius:22px}
  .exp-grid,.contact,.intro-card{grid-template-columns:1fr}
  .intro-card{gap:20px; padding:14px}
  .play{width:68px; height:68px}
  .projects,.services{grid-template-columns:1fr}
  .tabbar{display:flex; justify-content:space-around; align-items:center; position:fixed; left:12px; right:12px; bottom:12px; z-index:50; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:8px; box-shadow:0 20px 40px -20px rgba(18,19,23,.35); padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:500; text-decoration:none; color:var(--muted); padding:6px 10px; border-radius:14px}
  .tabbar a.active{color:var(--ink); background:var(--paper)}
  .tabbar a.mail{background:var(--yellow); color:var(--ink); width:52px; height:52px; border-radius:50%; justify-content:center; margin-top:-26px; box-shadow:0 10px 20px -8px rgba(18,19,23,.4)}
  .toast{bottom:100px}
  .top-right .chip:nth-child(2){display:none}
}
@media (max-width:520px){
  .bento{grid-template-columns:1fr 1fr; gap:12px}
  .stat{flex-direction:column; align-items:flex-start; gap:10px}
  .stat b{font-size:24px}
  .card{padding:18px}
  .timeline li{grid-template-columns:22px 1fr}
  .timeline time{grid-column:2; order:-1; padding:0}
  .timeline .node{grid-row:1 / span 2}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .loaded .bar i{width:var(--w)}
}