:root{--bg:#f5f7fb;--card:#fff;--soft:#eef2f7;--text:#101828;--muted:#667085;--line:#e4e7ec;--primary:#2563eb;--primary2:#7c3aed;--good:#16a34a;--shadow:0 12px 40px rgba(16,24,40,.07);--r:20px}html.dark{--bg:#080b12;--card:#111827;--soft:#182131;--text:#f8fafc;--muted:#94a3b8;--line:#263244;--primary:#60a5fa;--primary2:#a78bfa;--good:#4ade80;--shadow:0 16px 50px rgba(0,0,0,.3)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 Inter,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .18s,color .18s}a{color:inherit;text-decoration:none}button{font:inherit}.app{min-height:100vh}.sidebar{position:fixed;z-index:10;inset:0 auto 0 0;width:245px;padding:24px 15px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(18px);border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;padding:5px 9px 28px}.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 25px #2563eb35}.brand b{display:block;font-size:13px}.brand small{color:var(--muted);font-size:10px}.nav-label{padding:12px 10px 6px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.nav a{display:block;padding:10px;border-radius:11px;color:var(--muted);font-weight:650;font-size:12px;transition:.18s}.nav a:hover,.nav a.active{background:var(--soft);color:var(--primary);transform:translateX(2px)}.status{position:absolute;bottom:22px;left:15px;right:15px;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--soft);color:var(--muted);font-size:10px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:7px;box-shadow:0 0 0 4px #16a34a18}main{margin-left:245px;padding:24px 32px 55px;max-width:1500px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:var(--muted);font-size:11px}.actions{display:flex;gap:7px}.icon{width:37px;height:37px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);cursor:pointer}.mobile{display:none}.hero{padding:34px;border:1px solid var(--line);border-radius:25px;background:radial-gradient(circle at 90% 15%,#2563eb1c,transparent 30%),var(--card);box-shadow:var(--shadow)}.heroGrid{display:grid;grid-template-columns:1.35fr .65fr;gap:35px;align-items:center}.pill{display:inline-flex;padding:6px 10px;border-radius:99px;background:#2563eb14;color:var(--primary);font-size:9px;font-weight:800}.hero h1{font-size:clamp(36px,5vw,58px);line-height:1.02;letter-spacing:-.05em;margin:17px 0 0}.accent{color:var(--primary)}.hero p{max-width:650px;color:var(--muted);font-size:14px;margin:17px 0}.buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;border-radius:11px;font-size:11px;font-weight:750;transition:transform .18s}.btn:hover{transform:translateY(-2px)}.primary{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 10px 25px #2563eb28}.secondary{border:1px solid var(--line);background:var(--card)}.profile{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.avatar{width:70px;height:70px;display:grid;place-items:center;border-radius:19px;color:#fff;font-size:21px;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--primary2))}.profile h3{margin:14px 0 2px}.profile p{margin:0;font-size:11px}.meta{margin-top:16px;display:grid;gap:8px}.meta div{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.meta b{color:var(--text)}section{margin-top:27px}.head{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}.head h2{font-size:18px;letter-spacing:-.02em;margin:0}.head p{color:var(--muted);font-size:10px;margin:3px 0 0}#featured-app{scroll-margin-top:20px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.card{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}.stat{padding:19px}.stat small{color:var(--muted);font-weight:650}.stat strong{display:block;font-size:28px;letter-spacing:-.04em;margin-top:8px}.green{color:var(--good);font-size:9px}.grid2{display:grid;grid-template-columns:1.5fr .5fr;gap:13px;margin-top:13px}.chartCard{padding:20px}.chart{height:225px;display:flex;align-items:end;gap:10px;padding:18px 4px 23px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,var(--line) 44px)}.bar{flex:1;max-width:48px;margin:auto;background:linear-gradient(to top,var(--primary),var(--primary2));border-radius:7px 7px 2px 2px;transform-origin:bottom;animation:grow .65s cubic-bezier(.2,.8,.2,1) both}.barBox{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center}.barBox small{color:var(--muted);font-size:8px;margin-top:6px}@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}.focus{padding:20px}.focusItem{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.focusItem:last-child{border:0}.ico{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--soft)}.focusItem b{font-size:11px}.focusItem small{display:block;color:var(--muted);font-size:9px}.skills,.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.skill,.project{padding:18px}.skill h3,.project h3{font-size:13px;margin:0}.skill p,.project p{font-size:10px;color:var(--muted);line-height:1.6}.track{height:5px;background:var(--soft);border-radius:9px;margin-top:12px;overflow:hidden}.track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary2))}.cover{height:125px;margin:-18px -18px 17px;padding:15px;display:flex;align-items:end;border-radius:19px 19px 0 0;background:linear-gradient(135deg,#2563eb18,#7c3aed18)}.cover.greenish{background:linear-gradient(135deg,#16a34a1b,#2563eb16)}.cover.purple{background:linear-gradient(135deg,#7c3aed1d,#f59e0b18)}.projectIcon{width:45px;height:45px;display:grid;place-items:center;border-radius:13px;background:var(--card);font-size:21px}.tags{display:flex;flex-wrap:wrap;gap:5px}.tag{padding:4px 7px;border-radius:7px;background:var(--soft);color:var(--muted);font-size:8px;font-weight:700}.timeline{display:grid;gap:12px}.timelineItem{padding:17px 19px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.date{color:var(--primary);font-size:9px;font-weight:800}.timelineItem h3{font-size:13px;margin:4px 0}.timelineItem p{color:var(--muted);font-size:10px;margin:0}.feature{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px;border:1px solid var(--line);border-radius:23px;background:linear-gradient(135deg,var(--card),var(--soft));box-shadow:var(--shadow)}.feature h2{font-size:25px;line-height:1.1;letter-spacing:-.03em;margin:8px 0}.feature p{color:var(--muted);font-size:11px}.featureList{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.featureList div{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);font-size:9px}.featureList b{display:block;color:var(--text);margin-bottom:2px}.mock{padding:17px;border:1px solid var(--line);border-radius:17px;background:var(--card)}.mockTop{display:flex;justify-content:space-between;font-size:10px;font-weight:750}.mockValue{font-size:28px;font-weight:800;margin-top:20px}.mock small{color:var(--good);font-size:9px}.mockBars{height:110px;display:flex;align-items:end;gap:7px;margin-top:12px}.mockBars span{flex:1;background:linear-gradient(to top,var(--primary),var(--primary2));border-radius:5px 5px 2px 2px}footer{display:flex;justify-content:space-between;margin-top:45px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:9px}@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.skills,.projects{grid-template-columns:repeat(2,1fr)}.heroGrid{grid-template-columns:1fr}.feature{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.mobile{display:block}main{margin:0;padding:17px 14px 40px}.hero{padding:23px}.hero h1{font-size:38px}.stats,.skills,.projects{grid-template-columns:1fr}.featureList{grid-template-columns:1fr}footer{flex-direction:column;gap:5px}}
.text-main{color:var(--text)}
.heading-small{font-size:14px}
.featured-pill{color:var(--good);background:#16a34a14}
.section-gap{margin-top:13px}
.contact-card{padding:21px}
.h-32{height:32%}.h-36{height:36%}.h-38{height:38%}.h-39{height:39%}.h-45{height:45%}.h-47{height:47%}.h-50{height:50%}.h-58{height:58%}.h-61{height:61%}.h-64{height:64%}.h-65{height:65%}.h-72{height:72%}.h-76{height:76%}.h-78{height:78%}.h-88{height:88%}.h-92{height:92%}
.w-57{width:57%}.w-59{width:59%}.w-61{width:61%}.w-64{width:64%}.w-76{width:76%}.w-88{width:88%}
.metricGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.metricGrid div{padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.metricGrid strong{display:block;font-size:25px;line-height:1;color:var(--primary)}.metricGrid span{display:block;margin-top:7px;color:var(--muted);font-size:9px;line-height:1.45}.evidence{display:inline-flex;margin-bottom:12px;padding:5px 8px;border-radius:99px;background:var(--soft);color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.06em}.evidence.professional{background:#16a34a14;color:var(--good)}.evidence.mixed{background:#2563eb14;color:var(--primary)}.evidence.learning,.evidence.developing{background:#f59e0b18;color:#b45309}.evidence.project{background:#7c3aed16;color:var(--primary2)}
@media(max-width:760px){.metricGrid{grid-template-columns:repeat(2,1fr)}}


.project-shot{position:relative;display:block;overflow:hidden;min-height:300px;border:1px solid var(--line);border-radius:17px;background:var(--card)}
.project-shot img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover;object-position:top center;transition:transform .25s ease}
.project-shot:hover img,.project-shot:focus-visible img{transform:scale(1.015)}
.project-shot:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:760px){.project-shot,.project-shot img{min-height:220px}}
#architecture{scroll-margin-top:20px}
.architecture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.architecture-card{padding:20px;display:flex;flex-direction:column;gap:16px}
.architecture-card-head h3{font-size:15px;margin:10px 0 5px}
.architecture-card-head p{color:var(--muted);font-size:10px;line-height:1.55;margin:0}
.architecture-flow{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.architecture-node{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.architecture-node>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--card);color:var(--primary);font-size:8px;font-weight:800}
.architecture-node b{display:block;font-size:10px}
.architecture-node small{display:block;color:var(--muted);font-size:9px;line-height:1.45;margin-top:2px}
.architecture-arrow{text-align:center;color:var(--primary);font-weight:800;line-height:1}
.security-controls{padding:13px;border-left:3px solid var(--good);border-radius:0 11px 11px 0;background:var(--soft)}
.security-controls>b{font-size:10px}
.security-controls ul{margin:7px 0 0;padding-left:16px;color:var(--muted);font-size:9px;line-height:1.55}
.architecture-card .buttons{margin-top:auto}
@media(max-width:1050px){.architecture-grid{grid-template-columns:1fr}}